From be1c585f2603f73164066e67c56ba0f06656d657 Mon Sep 17 00:00:00 2001
From: bithighlander <bithighlander@gmail.com>
Date: Sun, 27 Oct 2024 18:41:15 -0500
Subject: [PATCH] add asset and send asset native working

---
 chrome-extension/src/background/keepkey.ts    |   4 +-
 .../side-panel/src/components/AssetSelect.tsx | 247 +++++++++++++++++-
 2 files changed, 249 insertions(+), 2 deletions(-)

diff --git a/chrome-extension/src/background/keepkey.ts b/chrome-extension/src/background/keepkey.ts
index 97081d8..802438a 100644
--- a/chrome-extension/src/background/keepkey.ts
+++ b/chrome-extension/src/background/keepkey.ts
@@ -45,10 +45,12 @@ export const onStartKeepkey = async function () {
       'DASH',
       'ETH',
       'LTC',
-      'OP',
       'MATIC',
       'THOR',
       'MAYA',
+      // 'GNO',
+      'BASE',
+      'OP',
     ];
 
     await db.init({});
diff --git a/pages/side-panel/src/components/AssetSelect.tsx b/pages/side-panel/src/components/AssetSelect.tsx
index 92f3c16..4a7beed 100644
--- a/pages/side-panel/src/components/AssetSelect.tsx
+++ b/pages/side-panel/src/components/AssetSelect.tsx
@@ -120,6 +120,7 @@ export function AssetSelect({ setShowAssetSelect }: AssetSelectProps) {
     const isCurrentlyEnabled = chain.isEnabled;
 
     if (isCurrentlyEnabled) {
+      // Disable the chain
       try {
         await blockchainStorage.removeBlockchain(networkId);
         await blockchainDataStorage.removeBlockchainData(networkId);
@@ -142,9 +143,11 @@ export function AssetSelect({ setShowAssetSelect }: AssetSelectProps) {
         return;
       }
     } else {
+      // Enable the chain
       try {
         await blockchainStorage.addBlockchain(networkId);
         const assetData = await getAssetData(networkId);
+        console.log('assetData:', assetData);
         await blockchainDataStorage.addBlockchainData(networkId, assetData);
         toast({
           title: 'Chain Enabled',
@@ -166,13 +169,222 @@ export function AssetSelect({ setShowAssetSelect }: AssetSelectProps) {
       }
     }
 
+    // Update the state
     setBlockchains(prevBlockchains =>
       prevBlockchains.map(c => (c.networkId === networkId ? { ...c, isEnabled: !c.isEnabled } : c)),
     );
   };
 
+  /**
+   * Selects all chains by enabling them and updating storage.
+   */
+  const selectAllChains = async () => {
+    const tag = ' | selectAllChains | ';
+    try {
+      // Enable all chains in storage
+
+      const allnetworkIds = blockchains.map(chain => chain.networkId);
+      await blockchainStorage.addBlockchains(allnetworkIds);
+      console.log(tag, 'All chains added to storage:', allnetworkIds);
+
+      // Fetch and store data for all chains
+      for (const networkId of allnetworkIds) {
+        try {
+          const assetData = await getAssetData(networkId);
+          await blockchainDataStorage.addBlockchainData(networkId, assetData);
+          console.log(tag, `Blockchain data added for ${networkId}`);
+        } catch (error) {
+          console.error(`Failed to fetch data for networkId ${networkId}`, error);
+          toast({
+            title: 'Error',
+            description: `Failed to fetch data for chain ${networkId}`,
+            status: 'error',
+            duration: 5000,
+            isClosable: true,
+          });
+        }
+      }
+
+      // Update the state to enable all chains
+      setBlockchains(prevBlockchains =>
+        prevBlockchains.map(chain => ({
+          ...chain,
+          isEnabled: true,
+        })),
+      );
+
+      toast({
+        title: 'All Chains Selected',
+        description: 'All available chains have been enabled.',
+        status: 'success',
+        duration: 3000,
+        isClosable: true,
+      });
+    } catch (error) {
+      console.error('Failed to select all chains', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to select all chains.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
+    }
+  };
+
+  /**
+   * Unselects all chains by disabling them and updating storage.
+   */
+  const unselectAllChains = async () => {
+    const tag = ' | unselectAllChains | ';
+    try {
+      // Disable all chains in storage
+
+      const allnetworkIds = blockchains.map(chain => chain.networkId);
+      await blockchainStorage.removeBlockchains(allnetworkIds);
+      console.log(tag, 'All chains removed from storage:', allnetworkIds);
+
+      // Remove blockchain data for all chains
+      for (const networkId of allnetworkIds) {
+        try {
+          await blockchainDataStorage.removeBlockchainData(networkId);
+          console.log(tag, `Blockchain data removed for ${networkId}`);
+        } catch (error) {
+          console.error(`Failed to remove data for networkId ${networkId}`, error);
+          toast({
+            title: 'Error',
+            description: `Failed to remove data for chain ${networkId}`,
+            status: 'error',
+            duration: 5000,
+            isClosable: true,
+          });
+        }
+      }
+
+      // Update the state to disable all chains
+      setBlockchains(prevBlockchains =>
+        prevBlockchains.map(chain => ({
+          ...chain,
+          isEnabled: false,
+        })),
+      );
+
+      toast({
+        title: 'All Chains Unselected',
+        description: 'All available chains have been disabled.',
+        status: 'info',
+        duration: 3000,
+        isClosable: true,
+      });
+    } catch (error) {
+      console.error('Failed to unselect all chains', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to unselect all chains.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
+    }
+  };
+
+  /**
+   * Handles the continuation action, such as closing the modal.
+   */
+  const handleContinue = async () => {
+    await loadEnabledChains(); // Reload enabled chains from storage
+    setShowAssetSelect(false); // Close the modal or asset selection view
+    toast({
+      title: 'Selection Updated',
+      description: 'Your asset selections have been updated.',
+      status: 'success',
+      duration: 3000,
+      isClosable: true,
+    });
+  };
+
+  /**
+   * Renders a single blockchain item with its details and toggle switch.
+   * @param chain - The blockchain data to render.
+   */
+  const renderChain = (chain: Chain) => (
+    <Flex
+      key={chain.networkId}
+      alignItems="center"
+      justifyContent="space-between"
+      p={2}
+      borderBottomWidth="1px"
+      borderColor="gray.200">
+      <Flex alignItems="center">
+        <Avatar size="sm" src={chain.image} mr={4} />
+        <Text fontWeight="bold">{chain.name}</Text>
+      </Flex>
+      <Flex alignItems="center">
+        <Badge mr={4}>
+          <Text fontSize="xs" style={middleEllipsisStyle}>
+            {chain.networkId}
+          </Text>
+        </Badge>
+        <Switch isChecked={chain.isEnabled} onChange={() => toggleChain(chain.networkId)} />
+      </Flex>
+    </Flex>
+  );
+
+  // Group and sort chains by type
+  const { UTXO, EVM, others } = blockchains.reduce(
+    (acc: any, chain: Chain) => {
+      if (chain.networkId.startsWith('bip122:')) acc.UTXO.push(chain);
+      else if (chain.networkId.startsWith('eip155:')) acc.EVM.push(chain);
+      else acc.others.push(chain);
+      return acc;
+    },
+    { UTXO: [] as Chain[], EVM: [] as Chain[], others: [] as Chain[] },
+  );
+
+  /**
+   * Opens a new tab to add an EVM chain.
+   */
+  const handleAddEvmChain = () => {
+    console.log('Add EVM Chain button clicked');
+    window.open('https://chainlist.org/', '_blank');
+  };
+
+  /**
+   * Handles the refresh action to reload blockchains.
+   */
+  const handleRefresh = async () => {
+    const tag = ' | handleRefresh | ';
+    try {
+      toast({
+        title: 'Refreshing',
+        description: 'Refreshing the blockchain list...',
+        status: 'info',
+        duration: 2000,
+        isClosable: true,
+      });
+      await onStart();
+      toast({
+        title: 'Refreshed',
+        description: 'Blockchain list has been refreshed.',
+        status: 'success',
+        duration: 3000,
+        isClosable: true,
+      });
+    } catch (error) {
+      console.error(tag, 'Error during refresh:', error);
+      toast({
+        title: 'Refresh Error',
+        description: 'Failed to refresh blockchain list.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
+    }
+  };
+
   return (
     <Box>
+      {/* Select All, Unselect All, and Refresh Buttons */}
       <Flex justifyContent="space-between" mb={4}>
         <Button size="sm" variant="outline" colorScheme="green" onClick={selectAllChains}>
           Select All
@@ -180,13 +392,46 @@ export function AssetSelect({ setShowAssetSelect }: AssetSelectProps) {
         <Button size="sm" variant="outline" colorScheme="red" onClick={unselectAllChains}>
           Unselect All
         </Button>
+        {/* Refresh Button */}
         <Button size="sm" variant="outline" colorScheme="blue" onClick={handleRefresh}>
           Refresh
         </Button>
       </Flex>
 
-      {blockchains.map(renderChain)}
+      {/* UTXO Chains Section */}
+      {UTXO.length > 0 && (
+        <>
+          <Text fontSize="xl" mb={4}>
+            UTXO Chains
+          </Text>
+          {UTXO.map(renderChain)}
+        </>
+      )}
+
+      {/* EVM Chains Section */}
+      {EVM.length > 0 && (
+        <>
+          <Text fontSize="xl" my={4}>
+            EVM Chains
+          </Text>
+          {EVM.map(renderChain)}
+          <Button mt={2} colorScheme="blue" onClick={handleAddEvmChain}>
+            Add an EVM Chain
+          </Button>
+        </>
+      )}
+
+      {/* Other Chains Section */}
+      {others.length > 0 && (
+        <>
+          <Text fontSize="xl" my={4}>
+            Other Chains
+          </Text>
+          {others.map(renderChain)}
+        </>
+      )}
 
+      {/* Continue/Update Button */}
       <Button colorScheme="blue" onClick={handleContinue} mt={4} width="100%">
         Continue/Update
       </Button>