From a287ef09bda17d67afa8a6f1392354b976ca9329 Mon Sep 17 00:00:00 2001 From: Chaitanya Potti Date: Tue, 10 Sep 2024 13:21:39 +0800 Subject: [PATCH 1/2] fix adapter loading in case of external wallets --- .../ExternalWallet/ExternalWalletDetail.tsx | 26 ---------- .../ui/src/components/ExternalWallets.tsx | 52 +++++++++++++------ 2 files changed, 37 insertions(+), 41 deletions(-) delete mode 100644 packages/ui/src/components/ExternalWallet/ExternalWalletDetail.tsx diff --git a/packages/ui/src/components/ExternalWallet/ExternalWalletDetail.tsx b/packages/ui/src/components/ExternalWallet/ExternalWalletDetail.tsx deleted file mode 100644 index b5f8cbfa7..000000000 --- a/packages/ui/src/components/ExternalWallet/ExternalWalletDetail.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { ExternalButton } from "../../interfaces"; -import ExternalWalletConnect from "./ExternalWalletConnect"; -import ExternalWalletInstall from "./ExternalWalletInstall"; - -interface ExternalWalletDetailProps { - connectButton: ExternalButton; - walletConnectUri: string; - goBack: () => void; - closeModal: () => void; -} - -export default function ExternalWalletDetail(props: ExternalWalletDetailProps) { - const { connectButton, walletConnectUri, goBack, closeModal } = props; - - return ( -
- {connectButton.hasWalletConnect ? ( - // Wallet Connect - - ) : ( - // Download wallets - - )} -
- ); -} diff --git a/packages/ui/src/components/ExternalWallets.tsx b/packages/ui/src/components/ExternalWallets.tsx index ab03ff795..a5c8bc249 100644 --- a/packages/ui/src/components/ExternalWallets.tsx +++ b/packages/ui/src/components/ExternalWallets.tsx @@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next"; import { ExternalButton, MODAL_STATUS, ModalStatusType } from "../interfaces"; import i18n from "../localeImport"; import ExternalWalletButton from "./ExternalWallet/ExternalWalletButton"; -import ExternalWalletDetail from "./ExternalWallet/ExternalWalletDetail"; +import ExternalWalletConnect from "./ExternalWallet/ExternalWalletConnect"; import ExternalWalletHeader from "./ExternalWallet/ExternalWalletHeader"; import Loader from "./Loader"; @@ -95,6 +95,7 @@ export default function ExternalWallet(props: ExternalWalletsProps) { } canShowMap[adapter] = false; }); + log.debug("adapter visibility map", canShowMap); setAdapterVisibilityMap(canShowMap); }, [config, handleExternalWalletClick, walletConnectUri, deviceDetails]); @@ -104,18 +105,21 @@ export default function ExternalWallet(props: ExternalWalletsProps) { const buttons: ExternalButton[] = Object.keys(walletRegistry).reduce((acc, wallet) => { if (adapterVisibilityMap[wallet] !== false) { const walletRegistryItem = walletRegistry[wallet]; + // don't include wallets that don't support sign v2 + if (!walletRegistryItem.walletConnect?.sdks?.includes("sign_v2")) return acc; let href = ""; if (deviceDetails.platform === bowser.PLATFORMS_MAP.mobile && walletConnectUri) { const universalLink = walletRegistryItem?.mobile?.universal; const deepLink = walletRegistryItem?.mobile?.native; href = universalLink || deepLink ? formatIOSMobile({ uri: walletConnectUri, universalLink, deepLink }) : walletConnectUri; } + // All injected wallets are present in wallet registry const button = { name: wallet, displayName: walletRegistryItem.name, href, hasInjectedWallet: config[wallet]?.isInjected || false, - hasWalletConnect: isWalletConnectAdapterIncluded && walletRegistryItem.walletConnect?.sdks?.includes("sign_v2"), + hasWalletConnect: isWalletConnectAdapterIncluded, hasInstallLinks: Object.keys(walletRegistryItem.app || {}).length > 0, walletRegistryItem, }; @@ -126,22 +130,37 @@ export default function ExternalWallet(props: ExternalWalletsProps) { } return acc; }, [] as ExternalButton[]); - setTotalExternalWallets(buttons.length); - // prioritize wallet that has injected wallet - buttons.sort((a, b) => { - if (a.hasInjectedWallet && !b.hasInjectedWallet) return -1; - if (!a.hasInjectedWallet && b.hasInjectedWallet) return 1; - return 0; - }); - const filteredButtons = buttons + const customAdapterButtons: ExternalButton[] = Object.keys(config).reduce((acc, adapter) => { + log.debug("external adapter installed buttons", adapter, adapterVisibilityMap[adapter]); + if (![WALLET_ADAPTERS.WALLET_CONNECT_V2].includes(adapter) && !config[adapter].isInjected && adapterVisibilityMap[adapter]) { + acc.push({ + name: adapter, + displayName: config[adapter].label || adapter, + hasInjectedWallet: false, + hasWalletConnect: false, + hasInstallLinks: false, + }); + } + return acc; + }, [] as ExternalButton[]); + setTotalExternalWallets(buttons.length + customAdapterButtons.length); + // sort wallets so that injected wallets come first and then ones without wallet connect and then rest + const injectedWallets = buttons.filter((button) => button.hasInjectedWallet); + const nonInjectedWallets = buttons.filter((button) => !button.hasInjectedWallet); + + const filteredButtons = injectedWallets + .concat(customAdapterButtons) + .concat(nonInjectedWallets) .filter((button) => { if (!walletSearch) return true; return button.displayName.toLowerCase().includes(walletSearch.toLowerCase()); }) .slice(0, 15); // show at most 15 wallets + log.debug("external buttons", buttons, filteredButtons); setExternalButtons(filteredButtons); } else { const buttons: ExternalButton[] = Object.keys(config).reduce((acc, adapter) => { + log.debug("external buttons", adapter, adapterVisibilityMap[adapter]); if (![WALLET_ADAPTERS.WALLET_CONNECT_V2].includes(adapter) && adapterVisibilityMap[adapter]) { acc.push({ name: adapter, @@ -160,15 +179,18 @@ export default function ExternalWallet(props: ExternalWalletsProps) { const handleWalletClick = (button: ExternalButton) => { if (deviceDetails.platform === "desktop") { // if has injected wallet, connect to injected wallet - if (button.hasInjectedWallet) { - handleExternalWalletClick({ adapter: button.name }); - } else { + if (!button.hasInjectedWallet && button.hasWalletConnect) { // else, show wallet detail setSelectedButton(button); + } else { + handleExternalWalletClick({ adapter: button.name }); } } else if (!button.href && button.hasInjectedWallet) { // on mobile, if href is not available, connect to injected wallet handleExternalWalletClick({ adapter: button.name }); + } else { + // this must be an adapter wallet + handleExternalWalletClick({ adapter: button.name }); } }; @@ -233,10 +255,10 @@ export default function ExternalWallet(props: ExternalWalletsProps) { ) : ( // Wallet Detail - setSelectedButton(null)} walletConnectUri={walletConnectUri} + goBack={() => setSelectedButton(null)} closeModal={closeModal} /> ))} From 8553d3399e7d17dadd415ebcbe4f39c4bd8d6125 Mon Sep 17 00:00:00 2001 From: Archit Date: Tue, 10 Sep 2024 11:31:46 +0530 Subject: [PATCH 2/2] refactor if else statements --- packages/ui/src/components/ExternalWallets.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/ExternalWallets.tsx b/packages/ui/src/components/ExternalWallets.tsx index a5c8bc249..e6a3bd77e 100644 --- a/packages/ui/src/components/ExternalWallets.tsx +++ b/packages/ui/src/components/ExternalWallets.tsx @@ -182,16 +182,10 @@ export default function ExternalWallet(props: ExternalWalletsProps) { if (!button.hasInjectedWallet && button.hasWalletConnect) { // else, show wallet detail setSelectedButton(button); - } else { - handleExternalWalletClick({ adapter: button.name }); + return; } - } else if (!button.href && button.hasInjectedWallet) { - // on mobile, if href is not available, connect to injected wallet - handleExternalWalletClick({ adapter: button.name }); - } else { - // this must be an adapter wallet - handleExternalWalletClick({ adapter: button.name }); } + handleExternalWalletClick({ adapter: button.name }); }; return (