andrei0x309/clear-wallet
1
0
Fork 0
mirror of https://github.com/andrei0x309/clear-wallet.git synced 2025-02-02 14:50:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: improve network selection UX & UI

Browse Source
This commit is contained in:
Andrei O 2025-01-20 01:30:13 +02:00
parent 032292a239
commit c1cee1f150
No known key found for this signature in database
GPG Key ID: B961E5B68389457E
1 changed files with 41 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/HomeTab.vue
View File

@ -106,11 +106,14 @@
button button
@click="copyText(String(selectedNetwork?.chainId), getToastRef())" @click="copyText(String(selectedNetwork?.chainId), getToastRef())"
style="cursor: pointer" style="cursor: pointer"
>Selected Network ID: >Selected Network ID: 
<span style="color: #645285; font-weight: bold">{{ <span style="color: #645285; font-weight: bold">{{
selectedNetwork?.chainId selectedNetwork?.chainId
}}</span> }}</span>
<ion-icon style="margin-left: 0.5rem" :icon="copyOutline"></ion-icon> <ion-icon
style="margin-left: 0.5rem; top: 2px; position: relative"
:icon="copyOutline"
></ion-icon>
</ion-label> </ion-label>
<ion-button <ion-button
@click=" @click="
@ -230,14 +233,13 @@
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button @click="networksModal = false">Close</ion-button> <ion-button @click="networksModal = false">Close</ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Select</ion-title> <ion-title>Select Network</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="ion-padding"> <ion-content class="ion-padding">
<ion-list style="margin-bottom: 4rem"> <ion-list style="margin-bottom: 4rem">
<ion-radio-group :value="selectedNetwork.chainId"> <ion-radio-group :value="selectedNetwork.chainId">
<ion-list-header> <ion-list-header>
<ion-label>Networks</ion-label>
<ion-searchbar <ion-searchbar
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
@ -262,18 +264,44 @@
slot="start" slot="start"
:value="network.chainId" :value="network.chainId"
:aria-label="network.name" :aria-label="network.name"
labelPlacement="start"
mode="ios"
justify="space-between"
> >
<span style="opacity: 0.7; font-size: 0.8rem"> <div>
ID: {{ network.chainId }} -> <ion-avatar
</span> v-if="(allTemplateNets as any)[network.chainId]?.icon"
{{ network.name }} style="
margin-right: 0.5rem;
width: 1.4rem;
height: 1.4rem;
margin-bottom: 0.5rem;
"
>
<img
:alt="selectedNetwork?.name"
:src="getUrl('assets/chain-icons/' + (allTemplateNets as any)[network.chainId]?.icon)"
/>
</ion-avatar>
{{
(network.name?.length || 0) > 18
? (network.name || "").slice(0, 15) + "..."
: network.name
}}&nbsp;
<span style="opacity: 0.7; font-size: 0.7rem">
({{ network.chainId }})
</span>
</div>
<div>
<ion-text style="opacity: 0.9; font-size: 0.85rem"
>RPC:&nbsp;</ion-text
>
<ion-text style="opacity: 0.8; font-size: 0.75rem">{{
network.rpc.replace("https://", "").replace("http://", "")
}}</ion-text>
</div>
</ion-radio> </ion-radio>
</ion-item> </ion-item>
<ion-item>
<ion-text style="opacity: 0.8; font-size: 0.85rem">{{
network.rpc
}}</ion-text>
</ion-item>
</ion-list> </ion-list>
</ion-radio-group> </ion-radio-group>
</ion-list> </ion-list>