feat: implement evmnetworkinformation in the network card (#2428)

* add network information for evm chains

* remove networksettingsdrawer and unify with network informations

* cleanup information drawers

---------

Co-authored-by: Nicole O'Brien <[email protected]>

packages/desktop/components/NetworkCard.svelte

@@ -32,12 +32,8 @@
     }
 
     function onCardClick(): void {
-        if (network.namespace === NetworkNamespace.Stardust) {
-            $networkConfigRouter.goTo(NetworkConfigRoute.NetworkSettings)
-        } else {
-            setSelectedChain(network)
-            $networkConfigRouter.goTo(NetworkConfigRoute.ChainInformation)
-        }
+        setSelectedChain(network)
+        $networkConfigRouter.goTo(NetworkConfigRoute.ChainInformation)
     }
 
     function onQrCodeIconClick(): void {

packages/desktop/views/dashboard/drawers/network-config/NetworkConfigRouterView.svelte

@@ -9,7 +9,6 @@
         ConfirmLedgerEvmAddressDrawer,
         ConnectedNetworksDrawer,
         EditNetworkDrawer,
-        NetworkSettingsDrawer,
         RemoveNetworkDrawer,
     } from './views'
     import { clearSelectedChain } from '@core/network'
@@ -39,8 +38,6 @@
     <ConnectedNetworksDrawer {drawerRouter} />
 {:else if $networkConfigRoute === NetworkConfigRoute.ChainInformation}
     <NetworkInformationDrawer {drawerRouter} />
-{:else if $networkConfigRoute === NetworkConfigRoute.NetworkSettings}
-    <NetworkSettingsDrawer {drawerRouter} />
 {:else if $networkConfigRoute === NetworkConfigRoute.EditChain}
     <EditNetworkDrawer {drawerRouter} />
 {:else if $networkConfigRoute === NetworkConfigRoute.RemoveChain}

packages/desktop/views/dashboard/drawers/network-config/network-config-route.enum.ts

@@ -2,7 +2,6 @@ export enum NetworkConfigRoute {
     AddChain = 'addChain',
     ChainDepositAddress = 'chainDepositAddress',
     ChainInformation = 'chainInformation',
-    NetworkSettings = 'networkSettings',
     ConfirmLedgerEvmAddress = 'confirmLedgerEvmAddress',
     ConnectedChains = 'connectedChains',
     EditChain = 'editChain',

packages/desktop/views/dashboard/drawers/network-config/views/NetworkInformationDrawer.svelte

@@ -1,21 +1,14 @@
 <script lang="ts">
-    import { DrawerTemplate } from '@components'
-    import { NetworkType, IscChain, selectedChain } from '@core/network'
+    import { selectedChain, NetworkNamespace } from '@core/network'
     import { Router } from '@core/router'
     import { NetworkConfigRoute } from '../'
-    import { EvmChainInformation, IscChainInformation } from './components'
+    import { EvmChainInformationDrawer, StardustInformationDrawer } from './components'
 
     export let drawerRouter: Router<NetworkConfigRoute>
-
-    $: evmNetwork = $selectedChain as IscChain
 </script>
 
-<DrawerTemplate title={evmNetwork?.name} {drawerRouter}>
-    <div class="w-full h-full px-6">
-        {#if evmNetwork?.type === NetworkType.Isc}
-            <IscChainInformation {evmNetwork} />
-        {:else if evmNetwork?.type === NetworkType.Evm}
-            <EvmChainInformation />
-        {/if}
-    </div>
-</DrawerTemplate>
+{#if $selectedChain && $selectedChain.namespace === NetworkNamespace.Evm}
+    <EvmChainInformationDrawer network={$selectedChain} {drawerRouter} />
+{:else if $selectedChain && $selectedChain.namespace === NetworkNamespace.Stardust}
+    <StardustInformationDrawer network={$selectedChain} {drawerRouter} />
+{/if}

packages/desktop/views/dashboard/drawers/network-config/views/components/EvmChainInformationDrawer.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { localize } from '@core/i18n'
+    import { IEvmNetwork, IIscChain, NetworkType } from '@core/network'
+    import { Table } from '@bloomwalletio/ui'
+    import { DrawerTemplate } from '@components/drawers'
+    import { NetworkConfigRoute } from '../../network-config-route.enum'
+    import { Router } from '@core/router'
+
+    export let drawerRouter: Router<NetworkConfigRoute>
+    export let network: IEvmNetwork
+
+    const localeKey = 'views.dashboard.drawers.networkConfig.chain'
+
+    function isIscChain(network: IEvmNetwork): network is IIscChain {
+        return network.type === NetworkType.Isc
+    }
+</script>
+
+<DrawerTemplate title={network.name} {drawerRouter}>
+    <div class="w-full h-full px-6">
+        <Table
+            orientation="vertical"
+            items={[
+                {
+                    key: localize(`${localeKey}.chainId`),
+                    value: network.chainId ?? undefined,
+                    copyable: true,
+                },
+                {
+                    key: localize(`${localeKey}.rpcEndpoint`),
+                    value: network.rpcEndpoint ?? undefined,
+                    copyable: true,
+                },
+                {
+                    key: localize(`${localeKey}.explorerUrl`),
+                    value: network.explorerUrl ?? undefined,
+                    copyable: true,
+                },
+                ...(isIscChain(network)
+                    ? [
+                          {
+                              key: localize(`${localeKey}.aliasAddress`),
+                              value: network.aliasAddress ?? undefined,
+                              copyable: true,
+                          },
+                      ]
+                    : []),
+            ]}
+        />
+    </div>
+</DrawerTemplate>

packages/desktop/views/dashboard/drawers/network-config/views/NetworkSettingsDrawer.svelte → packages/desktop/views/dashboard/drawers/network-config/views/components/StardustInformationDrawer.svelte

@@ -3,12 +3,14 @@
     import { DrawerTemplate } from '@components'
     import { localize } from '@core/i18n'
     import { Router } from '@core/router'
-    import { activeProfile } from '@core/profile/stores'
-    import { NetworkConfigRoute } from '..'
-    import { ConfigureNodeList, LocalProofOfWork } from '../components'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
+    import ConfigureNodeList from './ConfigureNodeList.svelte'
+    import LocalProofOfWork from './LocalProofOfWork.svelte'
+    import { IStardustNetwork } from '@core/network'
+    import { NetworkConfigRoute } from '../../network-config-route.enum'
 
     export let drawerRouter: Router<NetworkConfigRoute>
+    export let network: IStardustNetwork
 
     let nodesContainer: HTMLElement
 
@@ -31,7 +33,7 @@
     }
 </script>
 
-<DrawerTemplate title={$activeProfile.network.name} {drawerRouter}>
+<DrawerTemplate title={network.name} {drawerRouter}>
     <div class="flex flex-col w-full space-y-4 px-6">
         <ConfigureNodeList bind:nodesContainer />
         <LocalProofOfWork />

packages/desktop/views/dashboard/drawers/network-config/views/components/index.ts

@@ -1,3 +1,3 @@
 export { default as AddIscChainForm } from './AddIscChainForm.svelte'
-export { default as EvmChainInformation } from './EvmChainInformation.svelte'
-export { default as IscChainInformation } from './IscChainInformation.svelte'
+export { default as EvmChainInformationDrawer } from './EvmChainInformationDrawer.svelte'
+export { default as StardustInformationDrawer } from './StardustInformationDrawer.svelte'

packages/desktop/views/dashboard/drawers/network-config/views/index.ts

@@ -4,5 +4,4 @@ export { default as NetworkInformationDrawer } from './NetworkInformationDrawer.
 export { default as ConfirmLedgerEvmAddressDrawer } from './ConfirmLedgerEvmAddressDrawer.svelte'
 export { default as ConnectedNetworksDrawer } from './ConnectedNetworksDrawer.svelte'
 export { default as EditNetworkDrawer } from './EditNetworkDrawer.svelte'
-export { default as NetworkSettingsDrawer } from './NetworkSettingsDrawer.svelte'
 export { default as RemoveNetworkDrawer } from './RemoveNetworkDrawer.svelte'

packages/shared/src/lib/core/network/stores/selected-chain.store.ts

@@ -1,9 +1,9 @@
 import { Writable, writable } from 'svelte/store'
-import { IEvmNetwork } from '../interfaces'
+import { Network } from '../types'
 
-export const selectedChain: Writable<IEvmNetwork | undefined> = writable(undefined)
+export const selectedChain: Writable<Network | undefined> = writable(undefined)
 
-export function setSelectedChain(evmNetwork: IEvmNetwork): void {
+export function setSelectedChain(evmNetwork: Network): void {
     selectedChain.set(evmNetwork)
 }