kadena-community · javadkh2 · Oct 25, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 24, 2024
diff --git a/packages/apps/dev-wallet/index.html b/packages/apps/dev-wallet/index.html
@@ -5,9 +5,24 @@
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Kadena Dev Wallet</title>
+    <link rel="stylesheet" href="./boot.css" />
   </head>
-  <body>
+  <body class="boot">
     <div id="root"></div>
+    <!-- Welcome message will be removed after wallet is loaded -->
+    <div id="welcome-message" class="welcome-wrapper">
+      <div class="welcome-message-content">
+        <img
+          src="/favicon.png"
+          alt="Chainweaver Logo"
+          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>
+      </div>
+    </div>
+
     <script type="module" src="/src/index.ts"></script>
   </body>
 </html>
diff --git a/packages/apps/dev-wallet/public/boot.css b/packages/apps/dev-wallet/public/boot.css
@@ -0,0 +1,45 @@
+.welcome-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+  background: #050e1b;
+  opacity: 0;
+}
+.welcome-message-content {
+  display: flex;
+  padding: 40px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background: #14202b;
+  color: #ffffffb3;
+  font-family: 'Roboto', sans-serif;
+  font-smooth: antialiased;
+  gap: 10px;
+  line-height: 3rem;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+}
+body.boot.boot-theme-light .welcome-wrapper {
+  background: #f5f5f5;
+}
+
+body.boot.boot-theme-light .welcome-wrapper .welcome-message-content {
+  background: #e7e8e9;
+  color: #494949;
+}
+body.boot {
+  margin: 0;
+  background: #050e1b;
+}
+body.boot.boot-theme-light {
+  background: #f5f5f5;
+  color: #050e1b;
+}
diff --git a/packages/apps/dev-wallet/src/App/app.tsx b/packages/apps/dev-wallet/src/App/app.tsx
@@ -14,18 +14,18 @@ function Providers({ children }: { children: React.ReactNode }) {
     }
   }, []);
   return (
-    <SessionProvider>
-      <PromptProvider>
-        <DatabaseProvider>
-          <WalletProvider>
-            {/* TODO: fixed the issue with prompt and remove this one in favor of the one above */}
-            <PromptProvider>
-              <MediaContextProvider>{children}</MediaContextProvider>
-            </PromptProvider>
-          </WalletProvider>
-        </DatabaseProvider>
-      </PromptProvider>
-    </SessionProvider>
+    <MediaContextProvider>
+      <SessionProvider>
+        <PromptProvider>
+          <DatabaseProvider>
+            <WalletProvider>
+              {/* TODO: fixed the issue with prompt and remove this one in favor of the one above */}
+              <PromptProvider>{children}</PromptProvider>
+            </WalletProvider>
+          </DatabaseProvider>
+        </PromptProvider>
+      </SessionProvider>
+    </MediaContextProvider>
   );
 }
 

diff --git a/packages/apps/dev-wallet/src/Components/Accounts/WatchAccountDialog.tsx b/packages/apps/dev-wallet/src/Components/Accounts/WatchAccountDialog.tsx
@@ -50,43 +50,45 @@ export function WatchAccountsDialog({
               contract={contract}
             />
           </Stack>
-          <Stack flexDirection={'column'}>
-            <Stack marginBlockEnd={'sm'}>
-              <Heading variant="h6">Watch your contacts</Heading>
-            </Stack>
-            {contacts.map((contact) => (
-              <ListItem>
-                <Stack
-                  alignItems={'center'}
-                  flex={1}
-                  gap={'md'}
-                  onClick={() => {
-                    setSelectedContacts((prev) =>
-                      prev.find((c) => c.uuid === contact.uuid)
-                        ? prev.filter((c) => c.uuid !== contact.uuid)
-                        : [...prev, contact],
-                    );
-                  }}
-                >
-                  <Checkbox
-                    isSelected={
-                      !!selectedContacts.find((c) => c.uuid === contact.uuid)
-                    }
-                    onChange={(isSelected) => {
+          {contacts.length > 0 && (
+            <Stack flexDirection={'column'}>
+              <Stack marginBlockEnd={'sm'}>
+                <Heading variant="h6">Watch your contacts</Heading>
+              </Stack>
+              {contacts.map((contact) => (
+                <ListItem>
+                  <Stack
+                    alignItems={'center'}
+                    flex={1}
+                    gap={'md'}
+                    onClick={() => {
                       setSelectedContacts((prev) =>
-                        isSelected
-                          ? [...prev, contact]
-                          : prev.filter((c) => c.uuid !== contact.uuid),
+                        prev.find((c) => c.uuid === contact.uuid)
+                          ? prev.filter((c) => c.uuid !== contact.uuid)
+                          : [...prev, contact],
                       );
                     }}
                   >
-                    {' '}
-                  </Checkbox>
-                  <ContactItem contact={contact} />
-                </Stack>
-              </ListItem>
-            ))}
-          </Stack>
+                    <Checkbox
+                      isSelected={
+                        !!selectedContacts.find((c) => c.uuid === contact.uuid)
+                      }
+                      onChange={(isSelected) => {
+                        setSelectedContacts((prev) =>
+                          isSelected
+                            ? [...prev, contact]
+                            : prev.filter((c) => c.uuid !== contact.uuid),
+                        );
+                      }}
+                    >
+                      {' '}
+                    </Checkbox>
+                    <ContactItem contact={contact} />
+                  </Stack>
+                </ListItem>
+              ))}
+            </Stack>
+          )}
         </Stack>
       </DialogContent>
       <DialogFooter>

diff --git a/packages/apps/dev-wallet/src/Components/CopyButton/CopyButton.tsx b/packages/apps/dev-wallet/src/Components/CopyButton/CopyButton.tsx
@@ -0,0 +1,17 @@
+// import { MonoContentCopy } from '@kadena/kode-icons/system';
+import { MonoContentCopy } from '@kadena/kode-icons/system';
+import { Button } from '@kadena/kode-ui';
+
+export const CopyButton = ({ data }: { data: string | object }) => (
+  <Button
+    variant="transparent"
+    isCompact
+    onClick={() =>
+      navigator.clipboard.writeText(
+        typeof data === 'string' ? data : JSON.stringify(data, null, 2),
+      )
+    }
+  >
+    <MonoContentCopy />
+  </Button>
+);
diff --git a/packages/apps/dev-wallet/src/Components/Keyset/Keyset.tsx b/packages/apps/dev-wallet/src/Components/Keyset/Keyset.tsx
@@ -5,7 +5,7 @@ import { Stack, Text } from '@kadena/kode-ui';
 
 export function Keyset({ keySet }: { keySet: IKeySet }) {
   return (
-    <Stack justifyContent={'space-between'} flex={1}>
+    <Stack justifyContent={'space-between'} gap="md" flex={1}>
       <Stack key={keySet.uuid} gap={'sm'}>
         <Text>{keySet.alias}</Text>
         <Text>{keySet.principal}</Text>

diff --git a/packages/apps/dev-wallet/src/index.ts b/packages/apps/dev-wallet/src/index.ts
@@ -1,7 +1,30 @@
+const getTheme = () => localStorage.getItem('theme') || 'dark';
+const addBootTheme = () => {
+  document.body.classList.add(`boot-theme-${getTheme()}`);
+};
+const removeBootTheme = () => {
+  document.body.classList.remove(`boot`);
+  document.body.classList.remove(`boot-theme-${getTheme()}`);
+};
+
 // the entry file for the dev wallet app
 // TODO: we need to do setup app here like service worker, etc
-function bootstrap() {
-  import('./App/main').then(({ renderApp }) => renderApp());
+async function bootstrap() {
+  addBootTheme();
+  import('./App/main').then(async ({ renderApp }) => {
+    renderApp();
+    globalThis.addEventListener('wallet-loaded', function () {
+      document.getElementById('welcome-message')?.remove();
+      removeBootTheme();
+    });
+  });
+  // show welcome message if wallet is not loaded after 200ms
+  setTimeout(() => {
+    const welcomeMessage = document.getElementById('welcome-message');
+    if (welcomeMessage) {
+      welcomeMessage.style.opacity = '1';
+    }
+  }, 200);
 }
 
 bootstrap();
diff --git a/packages/apps/dev-wallet/src/modules/account/account.service.ts b/packages/apps/dev-wallet/src/modules/account/account.service.ts
@@ -116,14 +116,16 @@ export const accountDiscovery = (
       const accounts: IAccount[] = [];
       const keysets: IKeySet[] = [];
       const usedKeys: IKeyItem[] = [];
+      const saveCallbacks: Array<() => Promise<void>> = [];
       for (let i = 0; i < numberOfKeys; i++) {
         const key = await keySourceService.getPublicKey(keySource, i);
         if (!key) {
           return;
         }
         await emit('key-retrieved')(key);
+        const principal = `k:${key.publicKey}`;
         const chainResult = (await discoverAccount(
-          `k:${key.publicKey}`,
+          principal,
           network.networkId,
           undefined,
           contract,
@@ -134,24 +136,31 @@ export const accountDiscovery = (
           .execute()) as IDiscoveredAccount[];
 
         if (chainResult.filter(({ result }) => Boolean(result)).length > 0) {
+          const availableKeyset = await accountRepository.getKeysetByPrincipal(
+            principal,
+            profileId,
+          );
           usedKeys.push(key);
-          const keyset: IKeySet = {
+          const keyset: IKeySet = availableKeyset || {
             uuid: crypto.randomUUID(),
-            principal: `k:${key.publicKey}`,
+            principal,
             profileId,
             guard: {
               keys: [key.publicKey],
               pred: 'keys-all',
             },
             alias: '',
           };
-          keysets.push(keyset);
-          accounts.push({
+          if (!availableKeyset) {
+            keysets.push(keyset);
+          }
+          const account: IAccount = {
             uuid: crypto.randomUUID(),
             profileId,
             networkUUID: network.uuid,
             contract,
             keysetId: keyset.uuid,
+            keyset,
             address: `k:${key.publicKey}`,
             chains: chainResult
               .filter(({ result }) => Boolean(result))
@@ -166,26 +175,26 @@ export const accountDiscovery = (
                   : acc,
               '0',
             ),
+          };
+          accounts.push(account);
+          saveCallbacks.push(async () => {
+            if (!keySource.keys.find((k) => k.publicKey === key.publicKey)) {
+              await keySourceService.createKey(
+                keySource.uuid,
+                key.index as number,
+              );
+            }
+            if (!availableKeyset) {
+              await accountRepository.addKeyset(keyset);
+            }
+            await accountRepository.addAccount(account);
           });
         }
       }
 
       await emit('query-done')(accounts);
 
-      // store keys; key creation needs to be in sequence so I used a for loop instead of Promise.all
-      for (const key of usedKeys) {
-        await keySourceService.createKey(keySource.uuid, key.index as number);
-      }
-
-      // store accounts
-      await Promise.all([
-        ...accounts.map(async (account) =>
-          accountRepository.addAccount(account),
-        ),
-        ...keysets.map(async (keyset) =>
-          accountRepository.addKeyset(keyset).catch(console.log),
-        ),
-      ]);
+      await Promise.all(saveCallbacks.map((cb) => cb().catch(console.error)));
 
       keySourceService.clearCache();
       await emit('accounts-saved')(accounts);

diff --git a/packages/apps/dev-wallet/src/modules/wallet/wallet.provider.tsx b/packages/apps/dev-wallet/src/modules/wallet/wallet.provider.tsx
@@ -197,7 +197,7 @@ function usePassword(profile: IProfile | undefined) {
       if (unlockOptions.keepOpen === 'never') {
         return unlockOptions.password;
       }
-      setPassword(unlockOptions.password);
+      await setPassword(unlockOptions.password);
       if (unlockOptions.keepOpen === 'short-time') {
         setTimeout(
           () => {
@@ -487,6 +487,7 @@ export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
         await setProfile(profile, true);
       }
       setContextValue((ctx) => ({ ...ctx, loaded: true }));
+      globalThis.dispatchEvent(new CustomEvent('wallet-loaded'));
     };
     loadSession();
   }, [retrieveProfileList, session, setProfile]);