Merge branch 'main' into chore/devwallet/stylefixes

# Conflicts: # packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx # packages/apps/dev-wallet/src/pages/terminal/terminal.tsx
kadena-community · Nov 6, 2024 · 1a8bf3d · 1a8bf3d
2 parents 29878e4 + 8fb3b86
commit 1a8bf3d
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 786 deletions.
diff --git a/packages/apps/dev-wallet/src/App/BetaHeader.tsx b/packages/apps/dev-wallet/src/App/BetaHeader.tsx
@@ -1,29 +1,6 @@
-import { closeDatabaseConnections } from '@/modules/db/db.service';
-import { deleteDatabase } from '@/modules/db/indexeddb';
-import { MonoRemoveCircleOutline as DeleteIcon } from '@kadena/kode-icons';
-import { Button, Stack, Text } from '@kadena/kode-ui';
-import { useState } from 'react';
+import { Stack, Text } from '@kadena/kode-ui';
 
 export const BetaHeader = () => {
-  const [isDeleting, setIsDeleting] = useState(false);
-  const cleanLocalDb = async () => {
-    const confirmDelete = confirm(
-      [
-        'This will DELETE your profiles! ' +
-          'Make sure you have a backup of your seed phrase before proceeding.',
-        '',
-        'Do you want to delete the local database?',
-      ].join('\n'),
-    );
-    if (!confirmDelete) return;
-    setIsDeleting(true);
-    closeDatabaseConnections();
-    setTimeout(async () => {
-      await deleteDatabase('dev-wallet');
-      location.reload();
-    }, 1000);
-  };
-
   return (
     <>
       <Stack
@@ -38,18 +15,8 @@ export const BetaHeader = () => {
       >
         <Text>
           This is an unreleased development version of the Kadena Wallet. Use
-          with caution!
+          with caution and at your own risk.
         </Text>
-        <Button
-          isCompact
-          endVisual={DeleteIcon({})}
-          variant="negative"
-          onPress={cleanLocalDb}
-          isLoading={isDeleting}
-          loadingLabel="Deleting..."
-        >
-          Delete Local Database
-        </Button>
       </Stack>
     </>
   );

diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -83,11 +83,6 @@ export const SideBar: FC = () => {
               component={Link}
               href="/sig-builder"
             />
-            <SideBarTreeItem
-              label="Dev Console"
-              component={Link}
-              href="/terminal"
-            />
             <SideBarTreeItem
               label="Backup"
               component={Link}

diff --git a/packages/apps/dev-wallet/src/App/routes.tsx b/packages/apps/dev-wallet/src/App/routes.tsx
@@ -24,7 +24,6 @@ import { Keyset } from '@/pages/keyset/keyset';
 import { Networks } from '@/pages/networks/networks';
 import { Ready } from '@/pages/ready/ready';
 import { SignatureBuilder } from '@/pages/signature-builder/signature-builder';
-import { TerminalPage } from '@/pages/terminal/terminal';
 import { TransactionPage } from '@/pages/transaction/Transaction';
 import { Transactions } from '@/pages/transactions/transactions';
 import { TransferV2 } from '@/pages/transfer-v2/transfer-v2';
@@ -124,7 +123,6 @@ export const Routes: FC = () => {
             <Route path="/fungible/:contract" element={<FungiblePage />} />
             <Route path="/account/:accountId" element={<AccountPage />} />
             <Route path="/transfer" element={<TransferV2 />} />
-            <Route path="/terminal" element={<TerminalPage />} />
             <Route path="/contacts" element={<Contacts />} />
             <Route
               path="/backup-recovery-phrase"

diff --git a/packages/apps/dev-wallet/src/Components/Accounts/Accounts.tsx b/packages/apps/dev-wallet/src/Components/Accounts/Accounts.tsx
@@ -6,7 +6,11 @@ import {
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { panelClass } from '@/pages/home/style.css';
 import { IReceiverAccount } from '@/pages/transfer/utils';
-import { MonoMoreVert } from '@kadena/kode-icons/system';
+import {
+  MonoAdd,
+  MonoMoreVert,
+  MonoRemoveRedEye,
+} from '@kadena/kode-icons/system';
 import {
   Button,
   ContextMenu,
@@ -36,6 +40,43 @@ export function Accounts({
   const { createNextAccount, activeNetwork, profile } = useWallet();
   const prompt = usePrompt();
   const accountsToShow = show === 'owned' ? accounts : watchedAccounts;
+
+  const onWatch = async () => {
+    const accounts = (await prompt((resolve, reject) => (
+      <WatchAccountsDialog
+        onWatch={resolve}
+        onClose={reject}
+        contract={contract}
+        networkId={activeNetwork!.networkId}
+      />
+    ))) as IReceiverAccount[];
+    const accountsToWatch: IWatchedAccount[] = accounts.map((account) => ({
+      uuid: crypto.randomUUID(),
+      alias: account.alias ?? '',
+      profileId: profile!.uuid,
+      address: account.address,
+      chains: account.chains,
+      overallBalance: account.overallBalance,
+      keyset: {
+        ...account.keyset,
+        guard: {
+          ...account.keyset.guard,
+          keys: account.keyset.guard.keys.map((key) =>
+            typeof key === 'string' ? key : key.pubKey,
+          ),
+        },
+      },
+      contract,
+      networkUUID: activeNetwork!.uuid,
+      watched: true,
+    }));
+    await Promise.all(
+      accountsToWatch.map((account) =>
+        accountRepository.addWatchedAccount(account),
+      ),
+    );
+  };
+
   return (
     <Stack flexDirection={'column'}>
       <Stack justifyContent={'space-between'}>
@@ -63,76 +104,49 @@ export function Accounts({
           </Stack>
         </Stack>
         <Stack gap={'sm'}>
-          {contract && (
-            <Button
-              variant="outlined"
-              isCompact
-              onClick={() => createNextAccount({ contract })}
-            >
-              Create Next Account
-            </Button>
-          )}
-          <ContextMenu
-            placement="bottom end"
-            trigger={
+          {contract &&
+            (show === 'owned' ? (
               <Button
-                endVisual={<MonoMoreVert />}
-                variant="transparent"
+                startVisual={<MonoAdd />}
+                variant="outlined"
                 isCompact
-              />
-            }
-          >
-            <Link
-              to={
-                contract
-                  ? `/create-account${contract ? `?contract=${contract}` : ''}`
-                  : '/create-account'
+                onClick={() => createNextAccount({ contract })}
+              >
+                Next Account
+              </Button>
+            ) : (
+              <Button
+                startVisual={<MonoRemoveRedEye />}
+                variant="outlined"
+                isCompact
+                onClick={() => onWatch()}
+              >
+                Watch Account
+              </Button>
+            ))}
+          {show === 'owned' && (
+            <ContextMenu
+              placement="bottom end"
+              trigger={
+                <Button
+                  endVisual={<MonoMoreVert />}
+                  variant="transparent"
+                  isCompact
+                />
               }
-              className={noStyleLinkClass}
             >
-              <ContextMenuItem label="Add Multisig/Advanced" />
-            </Link>
-            <ContextMenuItem
-              label="Watch Account"
-              onClick={async () => {
-                const accounts = (await prompt((resolve, reject) => (
-                  <WatchAccountsDialog
-                    onWatch={resolve}
-                    onClose={reject}
-                    contract={contract}
-                    networkId={activeNetwork!.networkId}
-                  />
-                ))) as IReceiverAccount[];
-                const accountsToWatch: IWatchedAccount[] = accounts.map(
-                  (account) => ({
-                    uuid: crypto.randomUUID(),
-                    alias: account.alias ?? '',
-                    profileId: profile!.uuid,
-                    address: account.address,
-                    chains: account.chains,
-                    overallBalance: account.overallBalance,
-                    keyset: {
-                      ...account.keyset,
-                      guard: {
-                        ...account.keyset.guard,
-                        keys: account.keyset.guard.keys.map((key) =>
-                          typeof key === 'string' ? key : key.pubKey,
-                        ),
-                      },
-                    },
-                    contract,
-                    networkUUID: activeNetwork!.uuid,
-                    watched: true,
-                  }),
-                );
-                await Promise.all(
-                  accountsToWatch.map((account) =>
-                    accountRepository.addWatchedAccount(account),
-                  ),
-                );
-              }}
-            />
-          </ContextMenu>
+              <Link
+                to={
+                  contract
+                    ? `/create-account${contract ? `?contract=${contract}` : ''}`
+                    : '/create-account'
+                }
+                className={noStyleLinkClass}
+              >
+                <ContextMenuItem label="+ Advanced Account" />
+              </Link>
+            </ContextMenu>
+          )}
         </Stack>
       </Stack>
       {accountsToShow.length ? (

diff --git a/packages/apps/dev-wallet/src/pages/account/account.tsx b/packages/apps/dev-wallet/src/pages/account/account.tsx
@@ -240,9 +240,9 @@ export function AccountPage() {
                 >
                   <Heading variant="h4">Migrate Account</Heading>
                   <Text>
-                    You can not change the keyset guard of this account but you
-                    still are bale to use account migration which transfers all
-                    balance to a newly created account with the new keyset
+                    You can use account migration to transfer all balances to a
+                    newly created account with a new keyset, even though the
+                    keyset guard for this account cannot be changed.
                   </Text>
                   <Button variant="outlined">Migrate</Button>
                 </Stack>

diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
@@ -1,10 +1,13 @@
 import { AuthCard } from '@/Components/AuthCard/AuthCard';
-import { SideBarBreadcrumbs } from '@/Components/Breadcrumbs/Breadcrumbs';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import { Box, Button, Heading, Stack, Text } from '@kadena/kode-ui';
 import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
-
+<SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
+  <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+  <SideBarBreadcrumbsItem href="/terminal">Dev Console</SideBarBreadcrumbsItem>
+</SideBarBreadcrumbs>;
 export function BackupRecoveryPhrase() {
   return (
     <>