feat(dw): networks page + create client based on networks in db

packages/apps/dev-wallet/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "prebuild": "npm run generate-coin-type",
     "build": "pnpm run prebuild && tsc && vite build",
-    "build-dev": "vite build --watch",
+    "build-dev": "tsc && vite build --mode development --watch",
     "dev": "vite --force",
     "dev:chainweaver": "concurrently \"chokidar './src/**' --command './node_modules/.bin/vite build' --initial\" \"pnpm run preview --port 3002\"",
     "generate-coin-type": "pactjs contract-generate --contract \"coin\" --api \"https://api.testnet.chainweb.com/chainweb/0.0/testnet04/chain/14/pact\"",
@@ -74,4 +74,4 @@
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^1.6.0"
   }
-}
+}

packages/apps/dev-wallet/src/App/layout.tsx

@@ -30,8 +30,8 @@ export const Layout: FC = () => {
 
   const { theme, setTheme } = useTheme();
 
-  const handleNetworkUpdate = (value: string) => {
-    const network = networks.find((network) => network.networkId === value);
+  const handleNetworkUpdate = (uuid: string) => {
+    const network = networks.find((network) => network.uuid === uuid);
     if (network && setActiveNetwork) {
       setActiveNetwork(network);
     }
@@ -82,13 +82,13 @@ export const Layout: FC = () => {
           </NavHeaderButton>
           <NavHeaderSelect
             aria-label="Select Network"
-            selectedKey={activeNetwork?.networkId}
-            onSelectionChange={(value) => handleNetworkUpdate(value as string)}
+            selectedKey={activeNetwork?.uuid}
+            onSelectionChange={(uuid) => handleNetworkUpdate(uuid as string)}
             startVisual={<MonoPublic />}
             className={selectNetworkClass}
           >
             {networks.map((network) => (
-              <SelectItem key={network.networkId} textValue={network.name}>
+              <SelectItem key={network.uuid} textValue={network.name}>
                 {network.name}
               </SelectItem>
             ))}

packages/apps/dev-wallet/src/App/routes.tsx

@@ -20,7 +20,6 @@ import { ImportChainweaverExport } from '@/pages/import-chainweaver-export/impor
 import { ImportWallet } from '@/pages/import-wallet/import-wallet';
 import { KeySources } from '@/pages/key-sources/key-sources';
 import { Keyset } from '@/pages/keyset/keyset';
-import { CreateNetwork } from '@/pages/networks/create-network';
 import { Networks } from '@/pages/networks/networks';
 import { Ready } from '@/pages/ready/ready';
 import { SignatureBuilder } from '@/pages/signature-builder/signature-builder';
@@ -129,7 +128,6 @@ export const Routes: FC = () => {
             <Route path="/" element={<HomePage />} />
             <Route path="/sig-builder" element={<SignatureBuilder />} />
             <Route path="/networks" element={<Networks />} />
-            <Route path="/networks/create" element={<CreateNetwork />} />
             <Route path="/connect/:requestId" element={<Connect />} />
             <Route path="/key-sources" element={<KeySources />} />
             <Route path="/create-account" element={<CreateAccount />} />

packages/apps/dev-wallet/src/Components/AccountBalanceDistribution/AccountBalanceDistribution.tsx

@@ -39,7 +39,7 @@
       new PactNumber(overallBalance).toNumber(),
     );
     return divideChains(enrichedChains, 2);
   }, [chains]);
 
   const flatChains = useMemo(
     () =>
@@ -129,7 +129,7 @@
       account,
       gasLimit,
       gasPrice,
-      networkId: activeNetwork!.networkId,
+      network: activeNetwork!,
       redistribution,
       mapKeys,
     });

packages/apps/dev-wallet/src/Components/AccountBalanceDistribution/components/ChainBalance.tsx

@@ -21,7 +21,7 @@
   chainId: string;
   fundAccount: (chainId: ChainId) => Promise<void>;
   editable?: boolean;
   onItemChange?: (key: string, value: any) => void;
 }
 
 export const ChainBalance: FC<IProps> = ({
@@ -60,19 +60,16 @@
         >
           Chain {chainId}
         </Text>
-        {!editable &&
-          ['testnet04', 'testnet05'].includes(
-            activeNetwork?.networkId ?? '',
-          ) && (
-            <Button
-              isCompact
-              variant={chainAccount.balance ? 'primary' : 'transparent'}
-              className={fundButtonClass}
-              onPress={() => fundAccount(chainId as ChainId)}
-            >
-              Fund on Testnet
-            </Button>
-          )}
+        {!editable && activeNetwork?.faucetContract && (
+          <Button
+            isCompact
+            variant={chainAccount.balance ? 'primary' : 'transparent'}
+            className={fundButtonClass}
+            onPress={() => fundAccount(chainId as ChainId)}
+          >
+            Fund on Testnet
+          </Button>
+        )}
       </Stack>
 
       {!editable && (

packages/apps/dev-wallet/src/Components/Accounts/Accounts.tsx

@@ -72,7 +72,7 @@ export function Accounts({
                       profileId: profile.uuid,
                       address: keyset?.principal,
                       keysetId: keyset.uuid,
-                      networkId: activeNetwork.networkId,
+                      networkUUID: activeNetwork.uuid,
                       contract: asset?.contract ?? 'coin',
                       chains: [],
                       overallBalance: '0',

packages/apps/dev-wallet/src/Components/Sidebar/Sidebar.tsx

@@ -1,15 +1,17 @@
 import {
   MonoDataThresholding,
   MonoKey,
+  MonoNetworkCheck,
   MonoSignature,
   MonoSwapHoriz,
   MonoTableRows,
   MonoTerminal,
 } from '@kadena/kode-icons';
-import { Box, Stack, Text } from '@kadena/kode-ui';
+import { Box, Divider, Heading, Stack, Text } from '@kadena/kode-ui';
 import type { FC } from 'react';
 import { NavLink, useParams } from 'react-router-dom';
 import {
+  fullHightClass,
   sidebarClass,
   sidebarLinkClass,
   sidebarMenuClass,
@@ -20,71 +22,89 @@ export const Sidebar: FC = () => {
   useParams();
   return (
     <Box paddingBlockStart="xxl" padding="xl" className={sidebarClass}>
-      <aside>
-        <Box marginBlockStart="md">
+      <aside className={fullHightClass}>
+        <Stack marginBlockStart="md" height="100%">
           <ul className={sidebarMenuClass}>
-            <li className={sidebarMenuOptionClass}>
-              <NavLink to="/" className={sidebarLinkClass}>
-                <Text>
-                  <Stack alignItems="center" gap="md">
-                    <MonoDataThresholding />
-                    Dashboard
-                  </Stack>
-                </Text>
-              </NavLink>
-            </li>
-            <li className={sidebarMenuOptionClass}>
-              <NavLink to="/sig-builder" className={sidebarLinkClass}>
-                <Text>
-                  <Stack alignItems="center" gap="md">
-                    <MonoSignature />
-                    Sig Builder
-                  </Stack>
-                </Text>
-              </NavLink>
-            </li>
-            <li className={sidebarMenuOptionClass}>
-              <NavLink to="/key-sources" className={sidebarLinkClass}>
-                <Text>
-                  <Stack alignItems="center" gap="md">
-                    <MonoKey />
-                    Key sources
-                  </Stack>
-                </Text>
-              </NavLink>
-            </li>
-            <li className={sidebarMenuOptionClass}>
-              <NavLink to="/transfer" className={sidebarLinkClass}>
-                <Text>
-                  <Stack alignItems="center" gap="md">
-                    <MonoSwapHoriz />
-                    Transfer
-                  </Stack>
-                </Text>
-              </NavLink>
-            </li>
-            <li className={sidebarMenuOptionClass}>
-              <NavLink to="/transactions" className={sidebarLinkClass}>
-                <Text>
-                  <Stack alignItems="center" gap="md">
-                    <MonoTableRows />
-                    Transactions
-                  </Stack>
-                </Text>
-              </NavLink>
-            </li>
-            <li className={sidebarMenuOptionClass}>
-              <NavLink to="/terminal" className={sidebarLinkClass}>
-                <Text>
-                  <Stack alignItems="center" gap="md">
-                    <MonoTerminal />
-                    DX Terminal
-                  </Stack>
-                </Text>
-              </NavLink>
-            </li>
+            <Stack flexDirection={'column'} gap={'xxs'}>
+              <li className={sidebarMenuOptionClass}>
+                <NavLink to="/" className={sidebarLinkClass}>
+                  <Text>
+                    <Stack alignItems="center" gap="md">
+                      <MonoDataThresholding />
+                      Dashboard
+                    </Stack>
+                  </Text>
+                </NavLink>
+              </li>
+              <li className={sidebarMenuOptionClass}>
+                <NavLink to="/sig-builder" className={sidebarLinkClass}>
+                  <Text>
+                    <Stack alignItems="center" gap="md">
+                      <MonoSignature />
+                      Sig Builder
+                    </Stack>
+                  </Text>
+                </NavLink>
+              </li>
+              <li className={sidebarMenuOptionClass}>
+                <NavLink to="/transfer" className={sidebarLinkClass}>
+                  <Text>
+                    <Stack alignItems="center" gap="md">
+                      <MonoSwapHoriz />
+                      Transfer
+                    </Stack>
+                  </Text>
+                </NavLink>
+              </li>
+              <li className={sidebarMenuOptionClass}>
+                <NavLink to="/transactions" className={sidebarLinkClass}>
+                  <Text>
+                    <Stack alignItems="center" gap="md">
+                      <MonoTableRows />
+                      Transactions
+                    </Stack>
+                  </Text>
+                </NavLink>
+              </li>
+            </Stack>
+            <Stack gap={'xxs'} flexDirection={'column'} marginBlockEnd={'n9'}>
+              <Stack justifyContent={'center'} flexDirection={'column'}>
+                <Heading variant="h5">Dev Tools</Heading>
+                <Divider variant="bold" />
+              </Stack>
+              <li className={sidebarMenuOptionClass}>
+                <NavLink to="/networks" className={sidebarLinkClass}>
+                  <Text>
+                    <Stack alignItems="center" gap="md">
+                      <MonoNetworkCheck />
+                      Networks
+                    </Stack>
+                  </Text>
+                </NavLink>
+              </li>
+              <li className={sidebarMenuOptionClass}>
+                <NavLink to="/key-sources" className={sidebarLinkClass}>
+                  <Text>
+                    <Stack alignItems="center" gap="md">
+                      <MonoKey />
+                      Key sources
+                    </Stack>
+                  </Text>
+                </NavLink>
+              </li>
+              <li className={sidebarMenuOptionClass}>
+                <NavLink to="/terminal" className={sidebarLinkClass}>
+                  <Text>
+                    <Stack alignItems="center" gap="md">
+                      <MonoTerminal />
+                      Dev Console
+                    </Stack>
+                  </Text>
+                </NavLink>
+              </li>
+            </Stack>
           </ul>
-        </Box>
+        </Stack>
       </aside>
     </Box>
   );

packages/apps/dev-wallet/src/Components/Sidebar/style.css.ts

@@ -10,6 +10,7 @@ export const sidebarClass = style([
   {
     borderRight: `1px solid ${vars.colors.$layoutSurfaceCard}`,
     backgroundColor: tokens.kda.foundation.color.neutral.n1,
+    maxHeight: 'calc(100vh - 100px)',
   },
 ]);
 
@@ -20,7 +21,9 @@ export const sidebarMenuClass = style([
     listStyleType: 'none',
     display: 'flex',
     flexDirection: 'column',
-    gap: 'xs',
+    gap: 'xxl',
+    flex: 1,
+    justifyContent: 'space-between',
   }),
 ]);
 
@@ -53,3 +56,11 @@ export const sidebarLinkClass = style([
     },
   },
 ]);
+
+export const fullHightClass = style({
+  height: '100%',
+});
+
+export const displayContentsClass = style({
+  display: 'contents',
+});

packages/apps/dev-wallet/src/modules/account/account.repository.ts

@@ -1,6 +1,7 @@
 import { IDBService, dbService } from '@/modules/db/db.service';
 import { execInSequence } from '@/utils/helpers';
 import { BuiltInPredicate, ChainId } from '@kadena/client';
+import { UUID } from '../types';
 
 export interface Fungible {
   contract: string; // unique identifier
@@ -23,7 +24,7 @@ export interface IKeySet {
 
 export interface IAccount {
   uuid: string;
-  networkId: string;
+  networkUUID: UUID;
   profileId: string;
   contract: string;
   keysetId: string;
@@ -94,10 +95,10 @@ const createAccountRepository = ({
       );
       return accounts;
     },
-    async getAccountsByProfileId(profileId: string, networkId: string) {
+    async getAccountsByProfileId(profileId: string, networkUUID: UUID) {
       const accounts: IAccount[] = await getAll(
         'account',
-        IDBKeyRange.only([profileId, networkId]),
+        IDBKeyRange.only([profileId, networkUUID]),
         'profile-network',
       );
       return Promise.all(accounts.map(appendKeyset));