From 58bac3a7bb82af4ec5782dfaba7e601d39c36301 Mon Sep 17 00:00:00 2001 From: Emre Bogazliyanlioglu Date: Mon, 23 Sep 2024 14:10:37 +0300 Subject: [PATCH 1/4] [Redesign] Fixing which tokens to display whether a wallet is connected Signed-off-by: Emre Bogazliyanlioglu --- .../views/v2/Bridge/AssetPicker/TokenList.tsx | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx index 2742a9f29..f2983fe7e 100644 --- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx +++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx @@ -52,8 +52,6 @@ type Props = { isSource: boolean; }; -const SHORT_LIST_SIZE = 5; - const TokenList = (props: Props) => { const { classes } = useStyles(); const theme = useTheme(); @@ -79,17 +77,22 @@ const TokenList = (props: Props) => { const tokens: Array = []; const addToken = (tokenConfig: TokenConfig) => { + // Get token balance + const tokenBalance = balances?.[tokenConfig.key]?.balance; + // Check "no balance" only when a wallet is connected + const noBalance = + props.wallet?.address && (!tokenBalance || Number(tokenBalance) === 0); + // Exclude frankenstein tokens with no balance - const balance = Number(balances?.[tokenConfig.key]?.balance); if ( isFrankensteinToken(tokenConfig, selectedChainConfig.key) && - !balance + noBalance ) { return; } // Exclude tokens with no balance on source list - if (props.isSource && !balance && props.wallet?.address) { + if (props.isSource && noBalance && props.wallet?.address) { return; } @@ -99,7 +102,7 @@ const TokenList = (props: Props) => { props.isSource && isWrappedToken(tokenConfig, selectedChainConfig.key) && !isCanonicalToken(tokenConfig, selectedChainConfig.key) && - !balance + noBalance ) { return; } @@ -148,25 +151,27 @@ const TokenList = (props: Props) => { // Fourth: Add tokens with a balances in the connected wallet Object.entries(balances).forEach(([key, val]) => { - if (Number(val?.balance) > 0) { + if (val?.balance && Number(val.balance) > 0) { const tokenConfig = props.tokenList?.find((t) => t.key === key); const tokenNotAdded = !tokens.find( (addedToken) => addedToken.key === key, ); - if (tokenConfig && tokenNotAdded && tokens.length < SHORT_LIST_SIZE) { + if (tokenConfig && tokenNotAdded) { addToken(tokenConfig); } } }); - // Finally: Fill up any remaining space from supported tokens - props.tokenList?.forEach((t) => { - // Adding remaining tokens - if (!tokenSet.has(t.key)) { - addToken(t); - } - }); + // Finally: If no wallet is connected, fill up any remaining space from supported tokens + if (!props.wallet?.address) { + props.tokenList?.forEach((t) => { + // Adding remaining tokens + if (!tokenSet.has(t.key)) { + addToken(t); + } + }); + } return tokens; }, [balances, props.tokenList, props.sourceToken]); From 32f7a700bc8cac924981d40faf507a41af9cf3ef Mon Sep 17 00:00:00 2001 From: Emre Bogazliyanlioglu Date: Mon, 23 Sep 2024 18:05:17 +0300 Subject: [PATCH 2/4] [Redesign] Exclude Frankenstein tokens when no wallet connected Signed-off-by: Emre Bogazliyanlioglu --- .../views/v2/Bridge/AssetPicker/TokenList.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx index f2983fe7e..91c13cd40 100644 --- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx +++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx @@ -91,11 +91,6 @@ const TokenList = (props: Props) => { return; } - // Exclude tokens with no balance on source list - if (props.isSource && noBalance && props.wallet?.address) { - return; - } - // Exclude wormhole-wrapped tokens with no balance // unless it's canonical if ( @@ -163,11 +158,14 @@ const TokenList = (props: Props) => { } }); - // Finally: If no wallet is connected, fill up any remaining space from supported tokens - if (!props.wallet?.address) { + // Finally: If this is destination token or no wallet is connected, + // fill up any remaining space from supported and non-Frankenstein tokens + if (!props.isSource || !props.wallet?.address) { props.tokenList?.forEach((t) => { - // Adding remaining tokens - if (!tokenSet.has(t.key)) { + if ( + !tokenSet.has(t.key) && + !isFrankensteinToken(t, selectedChainConfig.key) + ) { addToken(t); } }); From e5db69603f4cdca84724d1bb5cdf4be4026ec938 Mon Sep 17 00:00:00 2001 From: Emre Bogazliyanlioglu Date: Tue, 24 Sep 2024 23:18:48 +0300 Subject: [PATCH 3/4] [Redesign] Address the latest product feedback for the token list Signed-off-by: Emre Bogazliyanlioglu --- .../views/v2/Bridge/AssetPicker/TokenList.tsx | 87 ++++++++----------- 1 file changed, 36 insertions(+), 51 deletions(-) diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx index 91c13cd40..be04e3d52 100644 --- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx +++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx @@ -76,51 +76,20 @@ const TokenList = (props: Props) => { const tokenSet: Set = new Set(); const tokens: Array = []; - const addToken = (tokenConfig: TokenConfig) => { - // Get token balance - const tokenBalance = balances?.[tokenConfig.key]?.balance; - // Check "no balance" only when a wallet is connected - const noBalance = - props.wallet?.address && (!tokenBalance || Number(tokenBalance) === 0); - - // Exclude frankenstein tokens with no balance - if ( - isFrankensteinToken(tokenConfig, selectedChainConfig.key) && - noBalance - ) { - return; - } - - // Exclude wormhole-wrapped tokens with no balance - // unless it's canonical - if ( - props.isSource && - isWrappedToken(tokenConfig, selectedChainConfig.key) && - !isCanonicalToken(tokenConfig, selectedChainConfig.key) && - noBalance - ) { - return; - } - - if (!tokenSet.has(tokenConfig.key)) { - tokenSet.add(tokenConfig.key); - tokens.push(tokenConfig); - } - }; - // First: Add previously selected token at the top of the list - if (selectedTokenConfig) { - addToken(selectedTokenConfig); + if (selectedTokenConfig && !tokenSet.has(selectedTokenConfig.key)) { + tokenSet.add(selectedTokenConfig.key); + tokens.push(selectedTokenConfig); } // Second: Add the wrapped token of the source token, if sourceToken is defined (meaning // this is being rendered with destination tokens). if (props.sourceToken) { - const sourceToken = config.tokens[props.sourceToken]; - if (sourceToken) { - const destTokenKey = sourceToken.wrappedAsset; + const sourceTokenConfig = config.tokens[props.sourceToken]; + if (sourceTokenConfig) { + const destTokenKey = sourceTokenConfig.wrappedAsset; if (destTokenKey) { - const destToken = props.tokenList?.find( + const destTokenConfig = props.tokenList?.find( (t) => t.key === destTokenKey && // Only add the wrapped token if it actually exists on the destination chain @@ -129,31 +98,32 @@ const TokenList = (props: Props) => { selectedChainConfig.key, ), ); - if (destToken) { - addToken(destToken); + if (destTokenConfig && !tokenSet.has(destTokenConfig.key)) { + tokenSet.add(destTokenConfig.key); + tokens.push(destTokenConfig); } } } } - // Third: Add the native gas token, if not previously selected + // Third: Add the native gas token if ( nativeTokenConfig && - nativeTokenConfig.key !== selectedTokenConfig?.key + nativeTokenConfig.key !== selectedTokenConfig?.key && + !tokenSet.has(nativeTokenConfig.key) ) { - addToken(nativeTokenConfig); + tokenSet.add(nativeTokenConfig.key); + tokens.push(nativeTokenConfig); } // Fourth: Add tokens with a balances in the connected wallet Object.entries(balances).forEach(([key, val]) => { if (val?.balance && Number(val.balance) > 0) { const tokenConfig = props.tokenList?.find((t) => t.key === key); - const tokenNotAdded = !tokens.find( - (addedToken) => addedToken.key === key, - ); - if (tokenConfig && tokenNotAdded) { - addToken(tokenConfig); + if (tokenConfig && !tokenSet.has(tokenConfig.key)) { + tokenSet.add(tokenConfig.key); + tokens.push(tokenConfig); } } }); @@ -162,12 +132,27 @@ const TokenList = (props: Props) => { // fill up any remaining space from supported and non-Frankenstein tokens if (!props.isSource || !props.wallet?.address) { props.tokenList?.forEach((t) => { + // Check if previously added + if (tokenSet.has(t.key)) { + return; + } + + // Exclude frankenstein tokens + if (isFrankensteinToken(t, selectedChainConfig.key)) { + return; + } + + // Exclude wormhole-wrapped tokens, unless it's canonical if ( - !tokenSet.has(t.key) && - !isFrankensteinToken(t, selectedChainConfig.key) + props.isSource && + isWrappedToken(t, selectedChainConfig.key) && + !isCanonicalToken(t, selectedChainConfig.key) ) { - addToken(t); + return; } + + tokenSet.add(t.key); + tokens.push(t); }); } From 7f16966d36ea87314858206092c508f62c0d9014 Mon Sep 17 00:00:00 2001 From: Emre Bogazliyanlioglu Date: Wed, 25 Sep 2024 00:12:14 +0300 Subject: [PATCH 4/4] [Redesign] Exclude destination wrapped token if Frankenstein Signed-off-by: Emre Bogazliyanlioglu --- .../src/views/v2/Bridge/AssetPicker/TokenList.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx index be04e3d52..c4f4a6254 100644 --- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx +++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx @@ -83,7 +83,7 @@ const TokenList = (props: Props) => { } // Second: Add the wrapped token of the source token, if sourceToken is defined (meaning - // this is being rendered with destination tokens). + // this is being rendered with destination tokens) and the wrapped is not a Frankenstein token if (props.sourceToken) { const sourceTokenConfig = config.tokens[props.sourceToken]; if (sourceTokenConfig) { @@ -98,7 +98,12 @@ const TokenList = (props: Props) => { selectedChainConfig.key, ), ); - if (destTokenConfig && !tokenSet.has(destTokenConfig.key)) { + + if ( + destTokenConfig && + !tokenSet.has(destTokenConfig.key) && + !isFrankensteinToken(destTokenConfig, selectedChainConfig.key) + ) { tokenSet.add(destTokenConfig.key); tokens.push(destTokenConfig); }