fix(dw): communication (#2658)

* fix(dw): comminucation

* feat(dw): improvments

* refactor(dw)

packages/apps/dev-wallet-example/package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@kadena/client": "workspace:*",
+    "@kadena/client-utils": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "next": "14.2.2"
@@ -23,4 +25,4 @@
     "eslint": "^8.45.0",
     "eslint-config-next": "13.4.5"
   }
-}
+}

packages/apps/dev-wallet-example/src/app/page.tsx

@@ -1,5 +1,13 @@
 'use client';
 
+import {
+  ChainId,
+  createTransaction,
+  ICommand,
+  IPartialPactCommand,
+} from '@kadena/client';
+import { transferAllCommand } from '@kadena/client-utils/coin';
+import { hash } from 'crypto';
 import { useState } from 'react';
 
 const sleep = (time: number) =>
@@ -9,7 +17,7 @@ const sleep = (time: number) =>
     }, time);
   });
 
-const walletOrigin = () => (window as any).walletUrl || 'http://localhost:4173';
+const walletOrigin = () => (window as any).walletUrl || 'http://localhost:1420';
 const walletUrl = () => `${walletOrigin()}`;
 const walletName = 'Dev-Wallet';
 const appName = 'Dev Wallet Example';
@@ -93,10 +101,31 @@ async function getWalletConnection(page: string = '') {
   };
 }
 
+interface IState {
+  profile: {
+    name: string;
+    accentColor: string;
+    uuid: string;
+  };
+  accounts: Array<{
+    address: string;
+    keyset: {
+      guard: { keys: string[]; pred: 'keys-all' | 'keys-any' | 'keys-2' };
+    };
+    alias: string;
+    contract: string;
+    chains: Array<{ chainId: ChainId; balance: string }>;
+    overallBalance: string;
+  }>;
+}
+
 export default function Home() {
   const [log, setLog] = useState<string[]>([]);
   const [profile, setProfile] = useState<any>(null);
+  const [state, setState] = useState<IState>();
+  const [signedTx, setSignedTx] = useState<ICommand>();
   const accentColor = profile?.accentColor ?? '#3b82f6';
+  const signDisabled = !state || (state && state.accounts.length < 2);
 
   const addLog = (data: unknown) => {
     log.push(JSON.stringify(data));
@@ -113,6 +142,7 @@ export default function Home() {
             This is a simple example of a dApp that uses the Dev Wallet to sign
             transactions.
           </p>
+
           <button
             className="mt-8 px-4 py-2 text-white rounded"
             style={{ backgroundColor: accentColor }}
@@ -131,7 +161,7 @@ export default function Home() {
               });
               addLog(status);
               setProfile((status.payload as any).profile);
-              close();
+              // close();
             }}
           >
             {profile
@@ -153,28 +183,101 @@ export default function Home() {
                 name: appName,
               });
               addLog(response);
+              setState(response.payload as IState);
               // close();
             }}
           >
             GET_STATUS
           </button>
         </div>
         <div>
-          <h2 className="text-2xl font-bold">Log</h2>
-          <ul>
-            {log.map((item, index) => (
-              <li
-                key={index}
+          {state && (
+            <>
+              <h2>Wallet Data</h2>
+              <div>name: {state.profile.name}</div>
+              <h3>Accounts</h3>
+              {
+                <ul>
+                  {state.accounts.map((account, index) => (
+                    <li key={index}>
+                      <div>Address: {account.address}</div>
+                      <div>Alias: {account.alias}</div>
+                      <div>Contract: {account.contract}</div>
+                      <div>overallBalance: {account.overallBalance}</div>
+                      <div>Guard: {JSON.stringify(account.keyset.guard)}</div>
+                    </li>
+                  ))}
+                </ul>
+              }
+            </>
+          )}
+        </div>
+        <button
+          className={`mt-8 px-4 py-2 text-white rounded ${signDisabled ? 'bg-gray-300 text-gray-50' : 'bg-blue-500'}`}
+          disabled={!state || (state && state.accounts.length < 2)}
+          onClick={async () => {
+            if (!state) return;
+            const { message, close } = await getWalletConnection();
+            const tx = transferAllCommand({
+              sender: {
+                account: state.accounts[0].address,
+                publicKeys: state.accounts[0].keyset.guard.keys,
+              },
+              receiver: {
+                account: state.accounts[1].address,
+                keyset: state.accounts[1].keyset.guard,
+              },
+              chainId: state.accounts[0].chains[0].chainId,
+              amount: state.accounts[0].chains[0].balance,
+              contract: state.accounts[0].contract,
+            });
+            const response = await message(
+              'SIGN_REQUEST',
+              createTransaction(tx()) as any,
+            );
+            const payload: {
+              status: 'signed' | 'rejected';
+              transaction?: ICommand;
+            } = response.payload as any;
+            debugger;
+            if (payload && payload.status === 'signed') {
+              setSignedTx(payload.transaction as ICommand);
+            }
+            addLog(response);
+            // close();
+          }}
+        >
+          Transfer balance from account 1 to account 2
+        </button>
+
+        <div
+          style={{
+            width: '80vw',
+            padding: 10,
+            overflow: 'auto',
+          }}
+        >
+          {signedTx && (
+            <>
+              <h2>Signed Transaction</h2>
+              <pre
+                className="bg-gray-50 overflow-auto"
                 style={{
-                  borderTop: '1px solid gray',
-                  marginTop: '10px',
-                  paddingTop: '10px',
+                  width: '100%',
                 }}
               >
-                {item}
-              </li>
-            ))}
-          </ul>
+                {JSON.stringify(
+                  {
+                    cmd: JSON.parse(signedTx.cmd),
+                    hash: signedTx.hash,
+                    sigs: signedTx.sigs,
+                  },
+                  undefined,
+                  2,
+                )}
+              </pre>
+            </>
+          )}
         </div>
       </div>
     </main>

packages/apps/dev-wallet/index.html

@@ -18,8 +18,8 @@
           width="60px"
           style="margin: 0"
         />
-        <h1 style="margin: 0; font-weight: 400">Welcome to Chainweaver v3</h1>
-        <h2 style="margin: 0; font-weight: 400">Wallet is Loading ...</h2>
+        <h1 style="margin: 0; font-weight: 400">Chainweaver v3</h1>
+        <p style="margin: 0">Loading</p>
       </div>
     </div>
 

packages/apps/dev-wallet/public/boot.css

@@ -14,7 +14,7 @@
 }
 .welcome-message-content {
   display: flex;
-  padding: 40px;
+  padding: 40px 100px;
   justify-content: center;
   align-items: center;
   flex-direction: column;

packages/apps/dev-wallet/src/App/Layout/SideBar.tsx

@@ -1,6 +1,7 @@
 import {
   MonoApps,
   MonoBackupTable,
+  MonoCheck,
   MonoContacts,
   MonoContrast,
   MonoDarkMode,
@@ -168,25 +169,33 @@ export const SideBar: FC = () => {
                 >
                   <Heading variant="h6">Switch Profile</Heading>
                 </Stack>
-                {profileList.map((profile, index) => (
+                {profileList.map((prf, index) => (
                   <ContextMenuItem
-                    key={profile.uuid}
+                    key={prf.uuid}
+                    endVisual={
+                      prf.uuid === profile?.uuid ? (
+                        <Text>
+                          <MonoCheck />
+                        </Text>
+                      ) : undefined
+                    }
                     label={
                       (
                         <Stack gap="sm">
                           <Avatar
                             color={('category' + ((index + 1) % 8)) as any}
-                            name={getInitials(profile.name)}
+                            name={getInitials(prf.name)}
                           />
-                          <Text>{profile.name}</Text>
+                          <Text>{prf.name}</Text>
                         </Stack>
                       ) as any
                     }
                     onClick={async () => {
-                      if (profile.options.authMode === 'WEB_AUTHN') {
-                        await unlockWithWebAuthn(profile, unlockProfile);
+                      if (prf.uuid === profile?.uuid) return;
+                      if (prf.options.authMode === 'WEB_AUTHN') {
+                        await unlockWithWebAuthn(prf, unlockProfile);
                       } else {
-                        navigate(`/unlock-profile/${profile.uuid}`);
+                        navigate(`/unlock-profile/${prf.uuid}`);
                       }
                     }}
                   />

packages/apps/dev-wallet/src/App/Layout/style.css.ts

@@ -10,7 +10,7 @@ export const isNotExpandedClass = style({
 
 export const isExpandedMainClass = style({
   vars: {
-    [contentWidth]: 'calc(100vw - 232px)',
+    [contentWidth]: 'min(1200px, calc(100vw - 232px))',
   },
 });
 

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

@@ -1,5 +1,9 @@
 import { useWallet } from '@/modules/wallet/wallet.hook';
-import { MonoSettings, MonoWifiTethering } from '@kadena/kode-icons/system';
+import {
+  MonoCheck,
+  MonoSettings,
+  MonoWifiTethering,
+} from '@kadena/kode-icons/system';
 import {
   Button,
   ContextMenu,
@@ -46,6 +50,9 @@ export const NetworkSelector: FC<{
           aria-label={network.name}
           key={network.networkId}
           label={network.name ?? network.networkId}
+          endVisual={
+            network.uuid === activeNetwork?.uuid ? <MonoCheck /> : undefined
+          }
           onClick={() => handleNetworkUpdate(network.uuid)}
         />
       ))}

packages/apps/dev-wallet/src/config.ts

@@ -1,4 +1,13 @@
-const colorList = ['#42CEA4', '#42BDCE', '#4269CE', '#B242CE', '#CEA742'];
+const colorList = [
+  '#2898bd',
+  '#5e4db2',
+  '#e56910',
+  '#943d73',
+  '#09326c',
+  '#8f7ee7',
+  '#50253f',
+  '#a54800',
+];
 export const config = {
   colorList,
   defaultAccentColor: colorList[0],

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

@@ -48,25 +48,34 @@ export type IDiscoveredAccount = {
       };
 };
 
-export async function createKAccount(
-  profileId: string,
-  networkUUID: UUID,
-  publicKey: string,
-  contract: string = 'coin',
-  chains: Array<{ chainId: ChainId; balance: string }> = [],
-) {
+export async function createKAccount({
+  profileId,
+  networkUUID,
+  publicKey,
+  contract = 'coin',
+  chains = [],
+  alias = '',
+}: {
+  profileId: string;
+  networkUUID: UUID;
+  publicKey: string;
+  contract: string;
+  chains?: Array<{ chainId: ChainId; balance: string }>;
+  alias?: string;
+}) {
   const keyset: IKeySet = {
     principal: `k:${publicKey}`,
     uuid: crypto.randomUUID(),
     profileId,
-    alias: '',
+    alias: alias || '',
     guard: {
       pred: 'keys-all',
       keys: [publicKey],
     },
   };
   const account: IAccount = {
     uuid: crypto.randomUUID(),
+    alias: alias || '',
     profileId: profileId,
     address: `k:${publicKey}`,
     keysetId: keyset.uuid,