diff --git a/.changeset/moody-beers-turn.md b/.changeset/moody-beers-turn.md new file mode 100644 index 00000000..031029ca --- /dev/null +++ b/.changeset/moody-beers-turn.md @@ -0,0 +1,5 @@ +--- +'@skip-go/widget': patch +--- + +filter cosmos wallets for is available items diff --git a/packages/widget/src/components/RenderWalletList.tsx b/packages/widget/src/components/RenderWalletList.tsx index b37b8881..f71d90e5 100644 --- a/packages/widget/src/components/RenderWalletList.tsx +++ b/packages/widget/src/components/RenderWalletList.tsx @@ -61,6 +61,14 @@ export const RenderWalletList = ({ const theme = useTheme(); const setChainAddresses = useSetAtom(chainAddressesAtom); + const displayWallets = useMemo(() => { + const filteredWallets = walletList.filter( + (wallet) => isMinimalWallet(wallet) && wallet?.isAvailable !== false + ); + + return filteredWallets.length === 1 ? walletList : filteredWallets; + }, [walletList]); + const clearAssetInputAmounts = useSetAtom(clearAssetInputAmountsAtom); const connectMutation = useMutation({ @@ -106,68 +114,51 @@ export const RenderWalletList = ({ const renderItem = useCallback( (wallet: ManualWalletEntry | MinimalWallet) => { - const name = isMinimalWallet(wallet) ? wallet.walletPrettyName ?? wallet.walletName : wallet.walletName; - const imageUrl = isMinimalWallet(wallet) ? wallet.walletInfo.logo : undefined; - const rightContent = isManualWalletEntry(wallet) ? wallet.rightContent : undefined; - const isAvailable = isMinimalWallet(wallet) ? wallet.isAvailable : undefined; + const name = isMinimalWallet(wallet) + ? wallet.walletPrettyName ?? wallet.walletName + : wallet.walletName; + + const imageUrl = isMinimalWallet(wallet) ? wallet?.walletInfo?.logo : undefined; + const rightContent = isManualWalletEntry(wallet) ? wallet?.rightContent : undefined; + const isAvailable = isMinimalWallet(wallet) ? wallet?.isAvailable : undefined; + + const renderedRightContent = rightContent?.() ?? <>; + + const imageElement = ( + {`${name}-logo`} + ) const onClickConnectWallet = () => { if (isMinimalWallet(wallet)) { connectMutation.mutate(wallet); } else { wallet.onSelect(); - }; + } }; - if (wallet.walletName === "prax") { - return ( - - {imageUrl && ( - {`${name} - )} - - {name} - - } - rightContent={rightContent?.()} - /> - ); - } + const leftContent = ( + + + {imageElement} + {name} + + {isAvailable !== undefined && {isAvailable ? "Installed" : "Not Installed"}} + + ); return ( - - {imageUrl && ( - {`${name} - )} - {name} - - {isAvailable !== undefined && {isAvailable ? "Installed" : "Not Installed"}} - - } - rightContent={rightContent?.()} + leftContent={leftContent} + rightContent={renderedRightContent} /> ); }, @@ -175,8 +166,9 @@ export const RenderWalletList = ({ ); const height = useMemo(() => { - return Math.min(530, walletList.length * (ITEM_HEIGHT + ITEM_GAP)); - }, [walletList]); + return Math.min(530, displayWallets.length * (ITEM_HEIGHT + ITEM_GAP)); + }, [walletList, displayWallets.length]); + const renderWalletListOrWalletConnectionStatus = useMemo(() => { if (connectMutation.isError || connectMutation.isPending) { @@ -219,7 +211,7 @@ export const RenderWalletList = ({ return ( item.walletName} @@ -238,7 +230,6 @@ export const RenderWalletList = ({ renderItem, theme.primary.text.lowContrast, theme.primary.text.normal, - walletList, ]); return (