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

52
src/views/HomeTab.vue
View File

@ -106,11 +106,14 @@
button
@click="copyText(String(selectedNetwork?.chainId), getToastRef())"
style="cursor: pointer"
>Selected Network ID:
>Selected Network ID: 
<span style="color: #645285; font-weight: bold">{{
selectedNetwork?.chainId
}}</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-button
@click="
@ -230,14 +233,13 @@
<ion-buttons slot="start">
<ion-button @click="networksModal = false">Close</ion-button>
</ion-buttons>
<ion-title>Select</ion-title>
<ion-title>Select Network</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-list style="margin-bottom: 4rem">
<ion-radio-group :value="selectedNetwork.chainId">
<ion-list-header>
<ion-label>Networks</ion-label>
<ion-searchbar
autocomplete="off"
autocorrect="off"
@ -262,17 +264,43 @@
slot="start"
:value="network.chainId"
:aria-label="network.name"
labelPlacement="start"
mode="ios"
justify="space-between"
>
<span style="opacity: 0.7; font-size: 0.8rem">
ID: {{ network.chainId }} ->
<div>
<ion-avatar
v-if="(allTemplateNets as any)[network.chainId]?.icon"
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>
{{ network.name }}
</ion-radio>
</ion-item>
<ion-item>
<ion-text style="opacity: 0.8; font-size: 0.85rem">{{
network.rpc
</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-item>
</ion-list>
</ion-radio-group>