From 183d0d1e504f55e27809b4abd1d4db821acb5a8c Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 3 Dec 2024 23:10:39 +1100 Subject: [PATCH] feat: new dropdown menu for multiple account --- src/background/controller/wallet.ts | 10 +- src/ui/utils/modules/findAddressWithPK.tsx | 2 +- src/ui/utils/modules/passkey.js | 22 +- .../views/Dashboard/Components/MenuDrawer.tsx | 303 +++++++++--------- .../Dashboard/Components/WalletFunction.tsx | 48 ++- src/ui/views/Dashboard/Header.tsx | 3 + src/ui/views/Deposit/index.tsx | 32 +- 7 files changed, 225 insertions(+), 195 deletions(-) diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts index 09d335ae..354d9a06 100644 --- a/src/background/controller/wallet.ts +++ b/src/background/controller/wallet.ts @@ -1584,7 +1584,9 @@ export class WalletController extends BaseController { const pubKey = await this.getPubKey(); const address = await findAddressWithNetwork(pubKey, network); const emoji = await this.getEmoji(); - + if (!address) { + throw new Error("Can't find address in chain"); + } let transformedArray: any[]; // Check if the addresses array is empty @@ -3351,11 +3353,7 @@ export class WalletController extends BaseController { getEvmEnabled = async (): Promise => { const address = await this.getEvmAddress(); - if (isValidEthereumAddress(address)) { - return true; - } else { - return false; - } + return !!address && isValidEthereumAddress(address); }; refreshEvmWallets = () => { diff --git a/src/ui/utils/modules/findAddressWithPK.tsx b/src/ui/utils/modules/findAddressWithPK.tsx index 367685a2..dd24750c 100644 --- a/src/ui/utils/modules/findAddressWithPK.tsx +++ b/src/ui/utils/modules/findAddressWithPK.tsx @@ -41,7 +41,7 @@ export const findAddressWithNetwork = async (pubKTuple, network) => { } const account = accounts.find((account) => account.weight >= 1000); - return account ? [account] : null; + return account ? accounts : null; }; export const findAddressWithPK = async (pk, address) => { diff --git a/src/ui/utils/modules/passkey.js b/src/ui/utils/modules/passkey.js index ab55c4af..867d3528 100644 --- a/src/ui/utils/modules/passkey.js +++ b/src/ui/utils/modules/passkey.js @@ -1,16 +1,19 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ // @ts-nocheck + +import { initWasm } from '@trustwallet/wallet-core'; + +import { getStringFromHashAlgo, getStringFromSignAlgo } from '@/shared/utils/algo'; +import { storage } from 'background/webapi'; + +import { decodeArray, encodeArray } from './base64'; +import { FLOW_BIP44_PATH, HASH_ALGO, KEY_TYPE, SIGN_ALGO } from './constants'; +import { addCredential, readSettings } from './settings'; import { decodeAuthenticatorData, decodeClientDataJSON, decodeAttestationObject, } from './WebAuthnDecoder'; -import { decodeArray, encodeArray } from './base64'; -import { initWasm } from '@trustwallet/wallet-core'; -import { addCredential, readSettings } from './settings'; -import { FLOW_BIP44_PATH, HASH_ALGO, KEY_TYPE, SIGN_ALGO } from './constants'; -import { getStringFromHashAlgo, getStringFromSignAlgo } from 'ui/utils'; -import { storage } from 'background/webapi'; const jsonToKey = async (json, password) => { try { @@ -73,10 +76,7 @@ const seed2PubKey = async (seed) => { (await storage.get(pathKeyId)) ?? (await storage.get(pathKeyIndex)) ?? FLOW_BIP44_PATH; const passphrase = (await storage.get(phraseKeyId)) ?? (await storage.get(phraseKeyIndex)) ?? ''; - // console.log('pathpathpath ', path) - // console.log('pathKey ', pathKey) - // console.log('phraseKey ', phraseKey) - // console.log('passphrase ', passphrase) + const wallet = HDWallet.createWithMnemonic(seed, passphrase); const p256PK = wallet.getKeyByCurve(Curve.nist256p1, path); const p256PubK = Buffer.from(p256PK.getPublicKeyNist256p1().uncompressed().data()) @@ -127,7 +127,7 @@ const seed2PubKeyTemp = async (seed) => { }; function getRandomBytes(length) { - var array = new Uint8Array(length ?? 32); + const array = new Uint8Array(length ?? 32); crypto.getRandomValues(array); return array; } diff --git a/src/ui/views/Dashboard/Components/MenuDrawer.tsx b/src/ui/views/Dashboard/Components/MenuDrawer.tsx index 1a7505af..344ac007 100644 --- a/src/ui/views/Dashboard/Components/MenuDrawer.tsx +++ b/src/ui/views/Dashboard/Components/MenuDrawer.tsx @@ -236,184 +236,109 @@ const MenuDrawer = (props: MenuDrawerProps) => { - {props.walletList.length > 0 && props.walletList.map(props.createWalletList)} - {(isValidEthereumAddress(props.evmWallet.address) || hasChildAccounts) && ( - - {chrome.i18n.getMessage('Linked_Account')} - - )} - - {isValidEthereumAddress(props.evmWallet.address) && ( - - props.setWallets( - { - name: 'evm', - address: props.evmWallet.address, - chain_id: props.currentNetwork, - coins: ['flow'], - id: 1, - }, - 'evm' - ) - } + + {props.walletList.length > 0 && + props.walletList + .slice() + .sort((a, b) => + a.address === props.current.address + ? -1 + : b.address === props.current.address + ? 1 + : 0 + ) + .map(props.createWalletList)} + {(isValidEthereumAddress(props.evmWallet.address) || hasChildAccounts) && ( + - - - - {props.evmWallet.icon} - - - - - - {props.evmWallet.name} - - - - EVM - - {isEvm && ( - - - - )} - - - - - + {chrome.i18n.getMessage('Linked_Account')} + )} - - {props.childAccounts && - Object.keys(props.childAccounts).map((key, index) => ( + + {isValidEthereumAddress(props.evmWallet.address) && ( props.setWallets( { - name: props.childAccounts[key]?.name ?? key, - address: key, + name: 'evm', + address: props.evmWallet.address, chain_id: props.currentNetwork, coins: ['flow'], id: 1, }, - key + 'evm' ) } > - + > + + {props.evmWallet.icon} + + + + {props.evmWallet.name} + + - {props.childAccounts[key]?.name ?? key} + EVM - {props.current['address'] === key && ( - + {isEvm && ( + { )} - - {key} - + - ))} + )} + + {props.childAccounts && + Object.keys(props.childAccounts).map((key, index) => ( + + props.setWallets( + { + name: props.childAccounts[key]?.name ?? key, + address: key, + chain_id: props.currentNetwork, + coins: ['flow'], + id: 1, + }, + key + ) + } + > + + + + + + {props.childAccounts[key]?.name ?? key} + + {props.current['address'] === key && ( + + + + )} + + + {key} + + + + + ))} + {/* { diff --git a/src/ui/views/Dashboard/Components/WalletFunction.tsx b/src/ui/views/Dashboard/Components/WalletFunction.tsx index 678b4380..38f5941c 100644 --- a/src/ui/views/Dashboard/Components/WalletFunction.tsx +++ b/src/ui/views/Dashboard/Components/WalletFunction.tsx @@ -1,20 +1,25 @@ import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; import { ListItem, ListItemButton, ListItemIcon, Typography, Box } from '@mui/material'; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import { useWallet } from 'ui/utils'; +import IconEnd from '../../../../components/iconfont/IconAVector11Stroke'; + const WalletFunction = (props) => { const usewallet = useWallet(); const [currentBalance, setCurrentBalance] = useState(null); - const walletFlowBalance = async (address) => { - const balance = await usewallet.getFlowBalance(address); - if (balance) { - return balance; - } else { - return 0; - } + const walletFlowBalance = useCallback( + async (address) => { + const balance = await usewallet.getFlowBalance(address); + return balance || 0; + }, + [usewallet] + ); + + const toggleExpand = () => { + props.setExpandAccount((prev) => !prev); }; useEffect(() => { @@ -28,12 +33,16 @@ const WalletFunction = (props) => { }; fetchBalance(); - }, [props.address]); + }, [props.address, walletFlowBalance]); - return ( + return props.address === props.mainAddress || props.expandAccount ? ( { - props.setWallets(props, null, props.props_id); + if (props.address === props.current['address']) { + toggleExpand(); // Toggle the list if the current address is clicked + } else { + props.setWallets(props, null, props.props_id); // Set the wallet if it's a different address + } }} sx={{ mb: 0, padding: '0', cursor: 'pointer' }} > @@ -42,7 +51,7 @@ const WalletFunction = (props) => { my: 0, display: 'flex', px: '16px', - py: '4px', + py: '8px', justifyContent: 'space-between', alignItems: 'center', }} @@ -79,12 +88,12 @@ const WalletFunction = (props) => { color={props.props_id === props.currentWallet ? 'text.title' : 'text.nonselect'} > {props.name} - {props.address === props.mainAddress && ( + {props.address === props.current['address'] && ( @@ -103,9 +112,18 @@ const WalletFunction = (props) => { + {props.address === props.current['address'] && ( + + )} - ); + ) : null; }; export default WalletFunction; diff --git a/src/ui/views/Dashboard/Header.tsx b/src/ui/views/Dashboard/Header.tsx index 54253e8d..6351890c 100644 --- a/src/ui/views/Dashboard/Header.tsx +++ b/src/ui/views/Dashboard/Header.tsx @@ -110,6 +110,7 @@ const Header = ({ loading = false }) => { const [initialStart, setInitial] = useState(true); const [switchLoading, setSwitchLoading] = useState(false); + const [expandAccount, setExpandAccount] = useState(false); const [, setErrorMessage] = useState(''); const [errorCode, setErrorCode] = useState(null); @@ -628,6 +629,8 @@ const Header = ({ loading = false }) => { currentWallet={currentWallet} current={current} mainAddress={mainAddress} + setExpandAccount={setExpandAccount} + expandAccount={expandAccount} /> ); diff --git a/src/ui/views/Deposit/index.tsx b/src/ui/views/Deposit/index.tsx index ef06b4ca..49df50c8 100644 --- a/src/ui/views/Deposit/index.tsx +++ b/src/ui/views/Deposit/index.tsx @@ -114,7 +114,7 @@ const Deposit = () => { const classes = useStyles(); const theme = useTheme(); const history = useHistory(); - const wallet = useWallet(); + const usewallet = useWallet(); const ref = useRef(null); const [currentWallet, setCurrentWallet] = useState(0); @@ -124,10 +124,10 @@ const Deposit = () => { const [active, setIsActive] = useState(false); const fetchStuff = useCallback(async () => { - const isChild = await wallet.getActiveWallet(); + const isChild = await usewallet.getActiveWallet(); let childresp = {}; try { - childresp = await wallet.checkUserChildAccount(); + childresp = await usewallet.checkUserChildAccount(); // Handle the response when there is no error } catch (error) { // Handle the error here @@ -135,7 +135,7 @@ const Deposit = () => { } if (isChild === 'evm') { setIsActive(true); - const wallets = await wallet.getEvmWallet(); + const wallets = await usewallet.getEvmWallet(); const result = [ { id: 0, @@ -164,22 +164,22 @@ const Deposit = () => { ); } else { setIsActive(true); - const wallets = await wallet.getUserWallets(); - setUserWallets( - wallets.map((ele, idx) => ({ - id: idx, - name: chrome.i18n.getMessage('Wallet'), - address: withPrefix(ele.blockchain[0].address), - })) - ); + const cw = await usewallet.getCurrentWallet(); + setUserWallets([ + { + id: 0, + name: cw.name, + address: cw.address, + }, + ]); } - await wallet.setDashIndex(0); - const network = await wallet.getNetwork(); + await usewallet.setDashIndex(0); + const network = await usewallet.getNetwork(); setNetwork(network); - const user = await wallet.getUserInfo(false); + const user = await usewallet.getUserInfo(false); setUserInfo(user); - }, [currentNetwork, wallet]); + }, [currentNetwork, usewallet]); useEffect(() => { if (userWallets && userInfo) {