@coin-voyage/paykit 2.2.1 → 2.2.2

package/dist/components/ui/ConnectorList/index.js

@@ -7,6 +7,7 @@ import { useLastConnector, useUniversalConnect } from "@coin-voyage/crypto/hooks
 import { isWalletInstalled } from "@coin-voyage/crypto/lib/utils/is-wallet-installed";
 import { useIsMobile } from "@coin-voyage/shared/hooks";
 import { detectBrowser } from "@coin-voyage/shared/utils";
+import { useCallback, useMemo } from "react";
 import useLocales from "../../../hooks/useLocales";
 import { useWalletConnectUri } from "../../../hooks/useWalletConnectUri";
 import { useWallets } from "../../../hooks/useWallets";
@@ -14,34 +15,34 @@ import { walletConfigs } from "../../../lib/config/wallet";
 import { isCoinbaseWalletConnector, isMobileWalletConnector, isWalletConnectConnector } from "../../../utils";
 import usePayContext from "../../contexts/pay";
 const ignoreHoist = ["walletConnect", "WalletConnect", "mobileWallet"];
+const browser = detectBrowser();
 export default function ConnectorList() {
-    const context = usePayContext();
-    const { connectorChainType } = context.paymentState;
+    const { paymentState, options } = usePayContext();
+    const { connectorChainType } = paymentState;
     const isMobile = useIsMobile();
+    const { uri } = useWalletConnectUri();
     const installedWallets = useWallets();
     const { lastConnectorId } = useLastConnector();
-    const mobileWallet = walletConfigs["mobileWallet"];
-    if (isMobile && connectorChainType && mobileWallet.chainTypes?.includes(connectorChainType)) {
-        installedWallets.push({
-            id: "mobileWallet",
-            ...mobileWallet,
-            isInstalled: true,
-            connectors: [],
-        });
-    }
-    const walletsToDisplay = context.options?.hideRecentBadge || (lastConnectorId && ignoreHoist.includes(lastConnectorId))
-        ? installedWallets
-        : [
-            // move last used wallet to top of list
-            // using .filter and spread to avoid mutating original array order with .sort
-            ...installedWallets.filter((wallet) => lastConnectorId === wallet.id),
-            ...installedWallets.filter((wallet) => lastConnectorId !== wallet.id),
-        ];
-    return (_jsx(ScrollArea, { children: walletsToDisplay.length > 0 ? (_jsx(ConnectorsContainer, { "$totalResults": walletsToDisplay.length, children: walletsToDisplay.map((wallet) => (_jsx(ConnectorItem, { wallet: wallet, isRecent: wallet.id === lastConnectorId }, wallet.id))) })) : (_jsx(Alert, { error: true, children: "No wallets found." })) }));
+    const walletsToDisplay = useMemo(() => {
+        let wallets = [...installedWallets];
+        const mobileWallet = walletConfigs["mobileWallet"];
+        if (isMobile && connectorChainType && mobileWallet.chainTypes?.includes(connectorChainType)) {
+            wallets.push({
+                id: "mobileWallet",
+                ...mobileWallet,
+                isInstalled: true,
+                connectors: [],
+            });
+        }
+        if (options?.hideRecentBadge || !lastConnectorId || ignoreHoist.includes(lastConnectorId)) {
+            return wallets;
+        }
+        return [...wallets.filter((w) => w.id === lastConnectorId), ...wallets.filter((w) => w.id !== lastConnectorId)];
+    }, [installedWallets, isMobile, connectorChainType, lastConnectorId, options]);
+    return (_jsx(ScrollArea, { children: walletsToDisplay.length > 0 ? (_jsx(ConnectorsContainer, { "$totalResults": walletsToDisplay.length, children: walletsToDisplay.map((wallet) => (_jsx(ConnectorItem, { wallet: wallet, walletConnectURI: uri, isRecent: wallet.id === lastConnectorId }, wallet.id))) })) : (_jsx(Alert, { error: true, children: "No wallets found." })) }));
 }
-const ConnectorItem = ({ wallet, isRecent }) => {
+const ConnectorItem = ({ wallet, isRecent, walletConnectURI, }) => {
     const locales = useLocales();
-    const { uri } = useWalletConnectUri();
     const isMobile = useIsMobile();
     const { route, setRoute, options, paymentState } = usePayContext();
     const { connect } = useUniversalConnect({
@@ -57,16 +58,27 @@ const ConnectorItem = ({ wallet, isRecent }) => {
         },
     });
     const walletConfig = walletConfigs[wallet.id];
-    let deeplink = !isWalletInstalled(wallet.id) && isMobile && walletConfig
-        ? walletConfig.getWalletDeeplink?.(uri ?? "", paymentState.connectorChainType)
-        : undefined;
     const redirectToMoreWallets = isMobile && (isWalletConnectConnector(wallet.id) || isMobileWalletConnector(wallet.id));
-    // Safari requires opening popup on user gesture, so we connect immediately here
-    const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") && isCoinbaseWalletConnector(wallet.id);
-    if (redirectToMoreWallets || shouldConnectImmediately) {
-        deeplink = undefined; // mobile redirects to more wallets page
-    }
-    const handleClick = () => {
+    const shouldConnectImmediately = (browser === "safari" || browser === "ios") && isCoinbaseWalletConnector(wallet.id);
+    const deeplink = useMemo(() => {
+        if (redirectToMoreWallets ||
+            shouldConnectImmediately ||
+            isWalletInstalled(wallet.id) ||
+            !isMobile ||
+            !walletConfig) {
+            return undefined;
+        }
+        return walletConfig.getWalletDeeplink?.(walletConnectURI ?? "", paymentState.connectorChainType);
+    }, [
+        redirectToMoreWallets,
+        shouldConnectImmediately,
+        wallet.id,
+        isMobile,
+        walletConfig,
+        walletConnectURI,
+        paymentState.connectorChainType,
+    ]);
+    const handleClick = useCallback(() => {
         if (deeplink)
             return;
         if (redirectToMoreWallets) {
@@ -77,10 +89,10 @@ const ConnectorItem = ({ wallet, isRecent }) => {
             const walletConnector = wallet.connectors.find((w) => w.chainType === paymentState.connectorChainType);
             if (!walletConnector)
                 return;
-            connect({ walletConnector: walletConnector });
+            connect({ walletConnector });
         }
-        setRoute(ROUTES.CONNECT);
         paymentState.setSelectedWallet(wallet);
-    };
+        setRoute(ROUTES.CONNECT);
+    }, [deeplink, redirectToMoreWallets, shouldConnectImmediately, wallet, paymentState, setRoute, connect]);
     return (_jsxs(ConnectorButton, { type: "button", as: deeplink ? "a" : undefined, href: deeplink, disabled: route !== ROUTES.CONNECTORS, onClick: handleClick, children: [_jsx(ConnectorIcon, { "data-small": wallet.iconShouldShrink, "data-shape": wallet.iconShape, children: wallet.iconConnector ?? wallet.icon }), _jsxs(ConnectorLabel, { children: [isMobile ? (wallet.shortName ?? wallet.name) : wallet.name, !options?.hideRecentBadge && isRecent && _jsx(RecentlyUsedTag, { children: locales.recent })] })] }));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/paykit",
   "description": "Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -61,8 +61,8 @@
     "react-use-measure": "^2.1.1",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/crypto": "2.2.1",
-    "@coin-voyage/shared": "2.2.0"
+    "@coin-voyage/shared": "2.2.0",
+    "@coin-voyage/crypto": "2.2.2"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",