feat: Copy address to clipboard (#248)

* fix: Compatible with chain_name in libra.yaml and chain_id in TS code.

* feat: Copy address to clipboard

src/components/dev/DebugSwitchRexMainnet.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { setNetwork, getNetwork, network_profile, NamedChain } from '../../modules/networks'
+  import { setNetwork, getNetwork, network_profile, NamedChain, pickChainIdFromNetworkPlaylist } from '../../modules/networks'
 
   let current_chain_id
 
   onMount(async () => {
     getNetwork()
     network_profile.subscribe((n) => {
       if (n) {
-        current_chain_id = n.chain_id
+        current_chain_id = pickChainIdFromNetworkPlaylist(n)
       }
     })
   })

src/components/layout/Copy.svelte

@@ -16,4 +16,4 @@
   }
 </script>
 
-<button class="uk-icon-link uk-margin-small-right" uk-icon={icon} on:click={copyThis} />
+<button class="uk-icon-link uk-margin-small-right" uk-icon={icon} on:click|stopPropagation={copyThis} />

src/components/settings/UpdateNetwork.svelte

@@ -10,6 +10,7 @@
     getNetwork,
     synced_fullnodes,
     refreshUpstreamPeerStats,
+    pickChainIdFromNetworkPlaylist,
   } from "../../modules/networks";
   import type { NetworkPlaylist } from "../../modules/networks";
   import { notify_success } from "../../modules/carpeNotify";
@@ -25,7 +26,7 @@
     network_profile.subscribe((n: NetworkPlaylist) => {
       if (n) {
         upstream_url = n.nodes.length == 1 ? n.nodes[0].url : ""; // just used to show OVERRIDE PEERS url
-        current_chain_id = n.chain_id;
+        current_chain_id = pickChainIdFromNetworkPlaylist(n);
       }
 
     });
@@ -107,10 +108,10 @@
         id="add-btn">{$_("settings.network_settings.btn_update")}</button
       >
 
-      <h5 class="uk-text-light uk-text-uppercase uk-text-muted uk-text-thin">
+      <!-- <h5 class="uk-text-light uk-text-uppercase uk-text-muted uk-text-thin">
         {$_("settings.network_settings.upstream_title")}
       </h5>
-      <p>{$_("settings.network_settings.upstream_subtitle")}</p>
+      <p>{$_("settings.network_settings.upstream_subtitle")}</p> -->
       <!-- <button class="uk-button uk-button-default" on:click={refreshWaypoint}>{$_("settings.network_settings.btn_fetch_new_waypoint")}</button> -->
     </fieldset>
   </form>

src/components/wallet/AccountsList.svelte

@@ -9,7 +9,7 @@
   import { connected } from '../../modules/networks'
   import { setAccount } from '../../modules/accountActions'
   import Actions from './Actions.svelte'
-
+  import Copy from '../../components/layout/Copy.svelte'
   UIkit.use(Icons)
 
   let showOptions = false
@@ -33,7 +33,7 @@
           <!-- <th>{$_('wallet.account_list.nickname')}</th> -->
           <th>{$_('wallet.account_list.address')}</th>
           <!-- <th>{$_('wallet.account_list.authkey')}</th> -->
-          <th class="uk-width-small">{$_('wallet.account_list.unlocked')}</th>
+          <th class="uk-width-small uk-text-right">{$_('wallet.account_list.unlocked')}</th>
 
           <th class="uk-text-right">{$_('wallet.account_list.balance')}</th>
         </tr>
@@ -72,10 +72,20 @@
             grab">{a.nickname}</td
             > -->
 
-            <td on:click={() => setAccount(a.account)} class="uk-text-truncate" style="cursor:
-            grab" >{formatAccount(a.account)}</td>
+            <td
+              on:click={() => setAccount(a.account)}
+              class="uk-transition-toggle uk-table-shrink"
+              style="cursor:grab"
+            >
+              <div class="uk-flex-inline">
+                <span class="uk-text-truncate" style="width: 32vw; display:inline-block"
+                  >{formatAccount(a.account)}</span
+                >
+                <span class="uk-transition-fade"><Copy text={a.account}></Copy></span>
+              </div>
+            </td>
             <!-- <td>{a.auth_key.slice(0, 5)}...</td> -->
-            <td>{printCoins(a.balance.unlocked)}</td>
+            <td class="uk-text-right">{printCoins(a.balance.unlocked)}</td>
             <td class="uk-text-right">
               {#if a.on_chain != null && a.on_chain == false}
                 {$_('wallet.account_list.account_on_chain')}

src/components/wallet/NetworkIcon.svelte

@@ -1,14 +1,15 @@
 <script>
   import { onDestroy, onMount } from 'svelte'
-  import { NamedChain, network_profile } from '../../modules/networks'
+  import { NamedChain, network_profile, pickChainIdFromNetworkPlaylist } from '../../modules/networks'
 
   let isTestNet = false
   let unsubs
 
   onMount(async () => {
     unsubs = network_profile.subscribe((network) => {
       if (network) {
-        isTestNet = network.chain_id == NamedChain.TESTNET
+        const chain_id = pickChainIdFromNetworkPlaylist(network)
+        isTestNet = chain_id == NamedChain.TESTNET
       }
     })
   })

src/modules/accountActions.ts

@@ -34,7 +34,10 @@ export const getDefaultProfile = async () => {
 export const getAccounts = async () => {
   // first make sure we don't have empty accounts
   invoke('get_all_accounts')
-    .then((result: CarpeProfile[]) => allAccounts.set(result))
+    .then((result: CarpeProfile[]) => {
+      allAccounts.set(result)
+      console.log(result)
+    })
     .catch((e) => raise_error(e, true, 'get_all_accounts'))
 }
 

src/modules/networks.ts

@@ -10,6 +10,7 @@ import { nodeEnvIsTest } from './debug'
 export interface NetworkPlaylist {
   chain_id: NamedChain // Todo, use the Network Enum
   nodes: HostProfile[]
+  chain_name?: NamedChain
 }
 
 // matches rust equivalent
@@ -122,7 +123,7 @@ export const updateNetwork = async (url: string, notice = true) => {
 }
 
 export function setNetwork(network: NamedChain) {
-  invoke('toggle_network', { chainId: network })
+  invoke('toggle_network', { chainIdStr: network })
     .then((res: NetworkPlaylist) => {
       network_profile.set(res)
       // update accounts from current network
@@ -214,3 +215,7 @@ export const initNetwork = async () => {
   }
   return true
 }
+
+export function pickChainIdFromNetworkPlaylist(np: NetworkPlaylist) {
+  return (np.chain_name || np.chain_id).toUpperCase()
+}