Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show selected token at the top only for the network it's selected from #2890

Merged
merged 2 commits into from
Nov 1, 2024
Merged

Show selected token at the top only for the network it's selected from #2890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdfffec
Show selected token at the top only for the network it's selected from
emreboga Oct 28, 2024
17aa40b
Addressing the first round of feedback
emreboga Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 29 additions & 15 deletions wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ type Props = {
isFetching?: boolean;
selectedChainConfig: ChainConfig;
selectedToken?: string;
selectedTokenChain?: string;
sourceToken?: string;
wallet: WalletData;
onSelectToken: (key: string) => void;
Expand All @@ -63,21 +64,24 @@ const TokenList = (props: Props) => {
);

const sortedTokens = useMemo(() => {
const { selectedToken, selectedChainConfig } = props;
emreboga marked this conversation as resolved.
Show resolved Hide resolved

const selectedTokenConfig = selectedToken
? config.tokens[selectedToken]
: undefined;
const selectedTokenConfig = props.tokenList?.find(
(t) => t.key === props.selectedToken,
);

const nativeTokenConfig = props.tokenList?.find(
(t) => t.key === selectedChainConfig.gasToken,
(t) => t.key === props.selectedChainConfig.gasToken,
);

const tokenSet: Set<string> = new Set();
const tokens: Array<TokenConfig> = [];

// First: Add previously selected token at the top of the list
if (selectedTokenConfig && !tokenSet.has(selectedTokenConfig.key)) {
// First: Add previously selected token at the top of the list,
// only if it's the selected token's chain
if (
selectedTokenConfig &&
props.selectedTokenChain === props.selectedChainConfig.key &&
!tokenSet.has(selectedTokenConfig.key)
) {
tokenSet.add(selectedTokenConfig.key);
tokens.push(selectedTokenConfig);
}
Expand All @@ -95,14 +99,14 @@ const TokenList = (props: Props) => {
// Only add the wrapped token if it actually exists on the destination chain
!!getTokenBridgeWrappedTokenAddressSync(
t,
selectedChainConfig.key,
props.selectedChainConfig.key,
),
);

if (
destTokenConfig &&
!tokenSet.has(destTokenConfig.key) &&
!isFrankensteinToken(destTokenConfig, selectedChainConfig.key)
!isFrankensteinToken(destTokenConfig, props.selectedChainConfig.key)
) {
tokenSet.add(destTokenConfig.key);
tokens.push(destTokenConfig);
Expand Down Expand Up @@ -143,15 +147,15 @@ const TokenList = (props: Props) => {
}

// Exclude frankenstein tokens
if (isFrankensteinToken(t, selectedChainConfig.key)) {
if (isFrankensteinToken(t, props.selectedChainConfig.key)) {
return;
}

// Exclude wormhole-wrapped tokens, unless it's canonical
if (
props.isSource &&
isWrappedToken(t, selectedChainConfig.key) &&
!isCanonicalToken(t, selectedChainConfig.key)
isWrappedToken(t, props.selectedChainConfig.key) &&
!isCanonicalToken(t, props.selectedChainConfig.key)
) {
return;
}
Expand All @@ -162,15 +166,25 @@ const TokenList = (props: Props) => {
}

return tokens;
}, [balances, props.tokenList, props.sourceToken]);
}, [
balances,
emreboga marked this conversation as resolved.
Show resolved Hide resolved
props.tokenList,
props.selectedChainConfig.key,
props.selectedChainConfig.gasToken,
props.sourceToken,
props.isSource,
props.wallet?.address,
props.selectedToken,
props.selectedTokenChain,
]);

const noTokensMessage = useMemo(
() => (
<Typography variant="body2" color={theme.palette.grey.A400}>
No supported tokens found in wallet
</Typography>
),
[],
[theme.palette.grey.A400],
);

const shouldShowEmptyMessage =
Expand Down
9 changes: 7 additions & 2 deletions wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ type Props = {

const AssetPicker = (props: Props) => {
const [showChainSearch, setShowChainSearch] = useState(false);
const [selectedTokenChain, setSelectedTokenChain] = useState('');
const { classes } = useStyles();

const popupState = usePopupState({
Expand Down Expand Up @@ -108,6 +109,8 @@ const AssetPicker = (props: Props) => {
props.setChain(firstAllowedChain.key);
}
}
// Re-run only when popup state changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [popupState.isOpen]);

const chainConfig: ChainConfig | undefined = useMemo(() => {
Expand Down Expand Up @@ -141,7 +144,7 @@ const AssetPicker = (props: Props) => {
<TokenIcon icon={tokenConfig?.icon} height={48} />
</Badge>
);
}, [chainConfig, tokenConfig]);
}, [chainConfig, classes.chainBadge, tokenConfig?.icon]);

const selection = useMemo(() => {
if (!chainConfig && !tokenConfig) {
Expand All @@ -162,7 +165,7 @@ const AssetPicker = (props: Props) => {
</Typography>
</div>
);
}, [props.chain, props.token]);
}, [chainConfig, tokenConfig]);

return (
<>
Expand Down Expand Up @@ -211,10 +214,12 @@ const AssetPicker = (props: Props) => {
isFetching={props.isFetching}
selectedChainConfig={chainConfig}
selectedToken={props.token}
selectedTokenChain={selectedTokenChain}
kev1n-peters marked this conversation as resolved.
Show resolved Hide resolved
sourceToken={props.sourceToken}
wallet={props.wallet}
onSelectToken={(key: string) => {
props.setToken(key);
setSelectedTokenChain(chainConfig.key);
popupState.close();
}}
isSource={props.isSource}
Expand Down
Loading