Feat: mono account refactor

packages/dapp/src/components/AccountMenu.tsx

@@ -1,100 +1,29 @@
-import { AddIcon, ChevronDownIcon, DownloadIcon } from '@chakra-ui/icons';
+import { DownloadIcon } from '@chakra-ui/icons';
 import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  Button,
-  Flex,
-  useDisclosure,
   Spinner,
-  Text,
-  useColorModeValue,
-  Box,
+  IconButton,
 } from '@chakra-ui/react';
 
-import { GenerateAccountModal } from './GenerateAccountModal';
-import { ImportAccountModal } from './ImportAccountModal';
-
-import { useAccountList } from '@/hooks/useAccountList';
 import {
   useActiveAccount,
-  invalidateActiveAccount,
 } from '@/hooks/useActiveAccount';
-import { invalidateOperations } from '@/hooks/useOperations';
-import { useSetActiveAccount } from '@/hooks/useSetActiveAccount';
 import { useShowCredentials } from '@/hooks/useShowCredentials';
-import { invalidateTokens } from '@/hooks/useTokens';
 
 export const AccountMenu = () => {
-  const {
-    isOpen: isImportOpen,
-    onOpen: onImportOpen,
-    onClose: onImportClose,
-  } = useDisclosure();
-  const {
-    isOpen: isGenerateOpen,
-    onOpen: onGenerateOpen,
-    onClose: onGenerateClose,
-  } = useDisclosure();
-  const showIconBg = useColorModeValue('gray.100', 'gray.600');
-
-  const { isLoading: accountsListLoading, data: accountsList } =
-    useAccountList();
   const { isLoading: activeAccountLoading, data: activeAccount } =
     useActiveAccount();
-  const setActiveAccount = useSetActiveAccount();
   const showCredentials = useShowCredentials();
 
   return (
-    <Menu>
-      <MenuButton
-        as={Button}
-        disabled={activeAccountLoading || accountsListLoading}
-        rightIcon={<ChevronDownIcon />}
-      >
-        {activeAccountLoading ? <Spinner /> : activeAccount?.name}
-      </MenuButton>
-      <MenuList>
-        {!accountsListLoading &&
-          accountsList?.map((account) => (
-            <MenuItem
-              key={account!.address}
-              onClick={() =>
-                setActiveAccount({ address: account!.address })?.then(() => {
-                  invalidateActiveAccount();
-                  invalidateOperations();
-                  invalidateTokens();
-                })
-              }
-            >
-              <Flex justify={'space-between'} align={'center'} w={'full'}>
-                <Text flexGrow={1}>{account!.name}</Text>
-                <Box
-                  borderRadius={'lg'}
-                  bg={showIconBg}
-                  p={2}
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    showCredentials({ address: account!.address });
-                  }}
-                >
-                  <DownloadIcon />
-                </Box>
-              </Flex>
-            </MenuItem>
-          ))}
-        <Flex justifyContent={'space-between'} m={4} gap={4}>
-          <Button onClick={onImportOpen} leftIcon={<DownloadIcon />}>
-            Import Account
-          </Button>
-          <Button onClick={onGenerateOpen} leftIcon={<AddIcon />}>
-            Generate Account
-          </Button>
-        </Flex>
-      </MenuList>
-      <ImportAccountModal isOpen={isImportOpen} onClose={onImportClose} />
-      <GenerateAccountModal isOpen={isGenerateOpen} onClose={onGenerateClose} />
-    </Menu>
+    <>
+      {activeAccountLoading ? (
+        <Spinner />
+      ) : (
+        <IconButton onClick={(evt) => {
+          evt.preventDefault();
+          showCredentials({ address: activeAccount?.address});
+        }} icon={<DownloadIcon />} aria-label={''} />
+      )}
+    </>
   );
 };

packages/dapp/src/components/Header.tsx

@@ -26,6 +26,7 @@ export const Header = () => {
       <Flex
         justifyContent={{ base: 'center', lg: 'space-between' }}
         w={'full'}
+        id="header"
         p={5}
         flexWrap={'wrap'}
         bg={'grey.100'}
@@ -40,7 +41,7 @@ export const Header = () => {
           </Flex>
         </Show>
       </Flex>
-      <Show below="md">
+      <Show below="lg">
         <Flex
           gap={4}
           align={'center'}
@@ -50,8 +51,13 @@ export const Header = () => {
         >
           <ThemeSwitch />
           {!ready && <ConnectMetamaskButton />}
-          {ready && <AccountMenu />}
-          {ready && <NetworkMenu />}
+
+          {ready && (
+            <Flex gap={4}>
+              <AccountMenu />
+              <NetworkMenu />
+            </Flex>
+          )}
         </Flex>
       </Show>
     </>

packages/dapp/src/components/OperationTab.tsx

@@ -75,7 +75,7 @@ export const OperationTab = () => {
           <IconButton
             aria-label="delete-all"
             icon={<DeleteIcon />}
-            onClick={() => clearOperations({})}
+            onClick={() => clearOperations()}
           />
           <IconButton
             aria-label="Refresh"

packages/dapp/src/components/TokenRow.tsx

@@ -66,7 +66,6 @@ export const TokenRow = ({ token }: { token: string }) => {
           icon={<DeleteIcon />}
           onClick={() => {
             deleteToken({
-              accountAddress: account!.address,
               address: token,
             }).then(() => {
               invalidateTokens();

packages/dapp/src/components/TokenTab.tsx

@@ -48,7 +48,9 @@ export const TokenTab = () => {
     useActiveAccount();
   const { isLoading: isLoadingTokenList, data: tokenList } = useTokens();
   const { isLoading: isLoadingAccountBalance, data: accountBalance } =
-    useAccountBalance({ address: activeAccount?.address });
+    useAccountBalance({
+      address: activeAccount?.address,
+    });
   const { colorMode } = useColorMode();
   const headerBg = useColorModeValue('teal.400', 'teal.600');
   const sendButtonBg = useColorModeValue('gray.400', 'gray.600');
@@ -74,11 +76,7 @@ export const TokenTab = () => {
     >
       <Flex justifyContent={'space-between'} align={'center'}>
         <Heading pl={3}>
-          {isLoadingActiveAccount ? (
-            <Spinner />
-          ) : (
-            activeAccount?.name || 'My Account'
-          )}
+          {isLoadingActiveAccount ? <Spinner /> : 'My Account'}
         </Heading>
         <Flex justify={'space-between'} align={'center'} mt={2}>
           <Link