Skip to content

Commit

Permalink
add asset and send asset native working
Browse files Browse the repository at this point in the history
  • Loading branch information
@BitHighlander
BitHighlander committed Oct 27, 2024
1 parent 8c68d0f commit be1c585
Show file tree
Hide file tree
Showing 2 changed files with 249 additions and 2 deletions.
4 changes: 3 additions & 1 deletion chrome-extension/src/background/keepkey.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,12 @@ export const onStartKeepkey = async function () {
'DASH',
'ETH',
'LTC',
'OP',
'MATIC',
'THOR',
'MAYA',
// 'GNO',
'BASE',
'OP',
];

await db.init({});
Expand Down
247 changes: 246 additions & 1 deletion pages/side-panel/src/components/AssetSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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',
Expand All @@ -166,27 +169,269 @@ 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
</Button>
<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>
Expand Down

0 comments on commit be1c585

Please sign in to comment.