@daimo/pay 1.6.5 → 1.7.0

package/build/index.js

@@ -22,7 +22,7 @@ import { WalletSignTransactionError, WalletSendTransactionError } from '@solana/
 import { normalize } from 'viem/ens';
 
 var name = "@daimo/pay";
-var version = "1.6.5";
+var version = "1.7.0";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";
@@ -61,7 +61,7 @@ var keywords = [
 	"crypto"
 ];
 var dependencies = {
-	"@daimo/pay-common": "1.6.5",
+	"@daimo/pay-common": "1.7.0",
 	"@rollup/plugin-typescript": "^12.1.2",
 	"@solana/wallet-adapter-base": "^0.9.23",
 	"@solana/wallet-adapter-react": "^0.15.35",
@@ -273,18 +273,6 @@ const useConnectCallback = ({ onConnect, onDisconnect, }) => {
     });
 };
 
-const isWalletInstalled = (name) => {
-    if (typeof window === "undefined")
-        return false;
-    const { ethereum } = window;
-    return !!(ethereum?.[`is${name}`] ||
-        (ethereum?.providers &&
-            ethereum?.providers.find((provider) => provider?.[`is${name}`])));
-};
-const isFamily = () => isWalletInstalled("Family");
-const isRainbow = () => isWalletInstalled("Rainbow");
-const isZerion = () => isWalletInstalled("Zerion");
-
 const Mock = ({ ...props }) => (jsxs("svg", { ...props, "aria-hidden": "true", width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
         background: "linear-gradient(180deg, #8995A9 0%, #424D5F 99.48%)",
     }, children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.5611 8.12948C21.0082 7.90729 21.5007 7.79167 22 7.79167C22.4993 7.79167 22.9919 7.90729 23.439 8.12948L23.4408 8.1304L33.0387 12.9293C33.577 13.197 34.031 13.61 34.3478 14.121C34.6649 14.6323 34.833 15.2218 34.8333 15.8234V27.2595C34.833 27.8611 34.6649 28.4511 34.3478 28.9624C34.031 29.4733 33.578 29.8858 33.0398 30.1535L23.4411 34.9528C22.9919 35.1775 22.4963 35.2947 21.994 35.2947C21.4918 35.2947 20.9964 35.1777 20.5472 34.9529L10.9475 30.1531L10.9452 30.1519C10.4071 29.8808 9.95535 29.4646 9.6411 28.9504C9.32739 28.437 9.16312 27.8464 9.16673 27.2448L9.16675 27.2417L10.0004 27.2475H9.16673V27.2448V15.8239C9.16705 15.2223 9.33518 14.6322 9.65222 14.121C9.96906 13.61 10.4221 13.1976 10.9604 12.9298L20.5592 8.1304L20.5611 8.12948ZM21.3031 9.62267L11.8706 14.3389L22 19.4036L32.1294 14.3389L22.697 9.62267C22.4806 9.51531 22.2416 9.45905 22 9.45905C21.7585 9.45905 21.5194 9.51534 21.3031 9.62267ZM10.8341 15.8241C10.8341 15.7785 10.8362 15.733 10.8401 15.6878L21.1663 20.8509V33.3983L11.6955 28.6629C11.4352 28.5315 11.2159 28.3297 11.0638 28.0809C10.9116 27.8318 10.8321 27.5452 10.8341 27.2533L10.8341 27.2475V15.8241ZM22.8337 33.3923L32.2967 28.6608C32.5576 28.5312 32.7772 28.3313 32.9308 28.0836C33.0844 27.836 33.1658 27.5504 33.166 27.259V15.8243C33.1659 15.7786 33.1639 15.7331 33.1599 15.6878L22.8337 20.8509V33.3923Z", fill: "url(#paint0_linear_3546_7073)" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.8341 15.8241C10.8341 15.7785 10.8362 15.733 10.8401 15.6878L21.1663 20.8509V33.3983L11.6955 28.6629C11.4352 28.5315 11.2159 28.3297 11.0638 28.0809C10.9116 27.8318 10.8321 27.5452 10.8341 27.2533L10.8341 27.2475V15.8241Z", fill: "url(#paint1_linear_3546_7073)", fillOpacity: "0.3" }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_3546_7073", x1: "22", y1: "7.79167", x2: "22", y2: "35.2947", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "white" }), jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.7" })] }), jsxs("linearGradient", { id: "paint1_linear_3546_7073", x1: "22", y1: "7.79167", x2: "22", y2: "35.2947", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "white" }), jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.7" })] })] })] }));
@@ -389,7 +377,7 @@ const OtherWallets = ({ ...props }) => {
         overflow: "hidden",
         borderRadius: "27.5%",
     };
-    return (jsxs("div", { style: column, ...props, children: [jsxs("div", { style: row, children: [jsx("div", { style: cell, children: jsx(WalletConnect, { background: true }) }), jsx("div", { style: cell, children: !isZerion() ? jsx(Zerion, {}) : jsx(Phantom, {}) })] }), jsxs("div", { style: row, children: [jsx("div", { style: cell, children: !isFamily() ? jsx(Family, {}) : jsx(ImToken, {}) }), jsx("div", { style: cell, children: !isRainbow() ? jsx(Rainbow, {}) : jsx(Trust, {}) })] })] }));
+    return (jsxs("div", { style: column, ...props, children: [jsxs("div", { style: row, children: [jsx("div", { style: cell, children: jsx(Rainbow, {}) }), jsx("div", { style: cell, children: jsx(WalletConnect, { background: true }) })] }), jsxs("div", { style: row, children: [jsx("div", { style: cell, children: jsx(Family, {}) }), jsx("div", { style: cell, children: jsx(Ledger, {}) })] })] }));
 };
 const Fordefi = ({ ...props }) => (jsxs("svg", { ...props, width: "88", height: "88", viewBox: "0 0 96 96", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { clipPath: "url(#clip0_14298_75627)", children: [jsx("path", { d: "M43.5075 62.5508H6V73.5954C6 79.2046 10.5379 83.7515 16.1357 83.7515H32.9997L43.5075 62.5508Z", fill: "#7994FF" }), jsx("path", { d: "M6.00098 39.1016H76.2075L68.0567 55.4841H6.00098V39.1016Z", fill: "#486DFF" }), jsx("path", { d: "M30.6398 12H6.09766V32.0282H89.8447V12H65.3025V26.9577H60.2423V12H35.7001V26.9577H30.6398V12Z", fill: "#5CD1FA" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_14298_75627", children: jsx("rect", { width: "84", height: "72", fill: "white", transform: "translate(6 12)" }) }) })] }));
 const SquircleIcon = ({ icon, alt, }) => {
@@ -807,10 +795,19 @@ function useExtractWcWallet({ log, connector, }) {
             localStorage.removeItem("WALLETCONNECT_DEEPLINK_CHOICE");
         }
         else {
-            connector
-                .getProvider()
-                .then((p) => setWcWallet(extractWcWalletFromProvider(p, log)))
-                .catch((e) => console.error(`[WCWALLET] err getting provider`, e));
+            // Check if getProvider exists and is a function before calling
+            if (typeof connector.getProvider === "function") {
+                connector
+                    .getProvider()
+                    .then((p) => setWcWallet(extractWcWalletFromProvider(p, log)))
+                    .catch((e) => console.error(`[WCWALLET] err getting provider`, e));
+            }
+            else {
+                // Log a warning if getProvider is not available
+                console.warn(`[WCWALLET] connector does not have getProvider method`, connector);
+                // Potentially reset wcWallet state if the connector is invalid/unexpected
+                setWcWallet(undefined);
+            }
         }
     }, [connector]);
     return wcWallet;
@@ -5190,7 +5187,7 @@ const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onB
         CONNECTORNAME: walletInfo?.name,
     });
     const [state, setOpen] = useTransition({
-        timeout: mobile ? 160 : 160, // different animations, 10ms extra to avoid final-frame drops
+        timeout: 160,
         preEnter: true,
         mountOnEnter: true,
         unmountOnExit: true,
@@ -6591,11 +6588,12 @@ const MoreIndicator = styled.div `
 `;
 const ScrollAreaContainer = styled.div `
   --bg: ${({ $backgroundColor }) => $backgroundColor || "var(--ck-body-background)"};
-  --fade-height: 1px;
+  --fade-height-top: 1px;
+  --fade-height-bottom: ${(props) => props.$hideBottomLine && props.$totalItems > 2 ? "32px" : "1px"};
   position: relative;
   z-index: 1;
 
-  ${({ $mobile, $height, $mobileDirection }) => $mobile && $mobileDirection === "horizontal"
+  ${({ $mobile, $height, $mobileDirection, $hideBottomLine }) => $mobile && $mobileDirection === "horizontal"
     ? css `
           overflow-x: scroll;
           margin: 0 -24px;
@@ -6610,7 +6608,7 @@ const ScrollAreaContainer = styled.div `
             position: sticky;
             top: 0;
             bottom: 0;
-            width: var(--fade-height);
+            width: var(--fade-height-bottom);
             background: var(
               --ck-body-divider-secondary,
               var(--ck-body-divider)
@@ -6641,7 +6639,7 @@ const ScrollAreaContainer = styled.div `
           max-height: ${$height ? `${$height}px` : "310px"};
           overflow-y: scroll;
           padding: 0 10px;
-          margin: calc(var(--fade-height) * -1) -16px 0 -10px;
+          margin: calc(var(--fade-height-top) * -1) -16px 0 -10px;
 
           &:before,
           &:after {
@@ -6652,19 +6650,23 @@ const ScrollAreaContainer = styled.div `
             position: sticky;
             left: 0;
             right: 0;
-            height: var(--fade-height);
+          }
+          &:before {
+            top: 0;
+            height: var(--fade-height-top);
             background: var(
               --ck-body-divider-secondary,
               var(--ck-body-divider)
             );
             box-shadow: var(--ck-body-divider-box-shadow);
-            transition: opacity 300ms ease;
-          }
-          &:before {
-            top: 0;
           }
           &:after {
             bottom: 0;
+            height: var(--fade-height-bottom);
+            background: ${$hideBottomLine
+        ? "linear-gradient(to bottom, transparent, var(--bg))"
+        : "var(--ck-body-divider-secondary, var(--ck-body-divider))"};
+            box-shadow: none;
           }
 
           &.scroll-start {
@@ -6700,7 +6702,7 @@ const ScrollAreaContainer = styled.div `
 `;
 
 const ArrowDown = () => (jsx("svg", { width: "11", height: "12", viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const ScrollArea = ({ children, height, backgroundColor, mobileDirection, }) => {
+const ScrollArea = ({ children, height, backgroundColor, mobileDirection, hideBottomLine = false, totalItems, }) => {
     const { log } = usePayContext();
     const ref = useRef(null);
     const moreRef = useRef(null);
@@ -6743,7 +6745,7 @@ const ScrollArea = ({ children, height, backgroundColor, mobileDirection, }) =>
             el.removeEventListener("scroll", handleScroll);
         };
     }, [ref.current]);
-    return (jsxs(ScrollContainer, { children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobile, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, children: children }), jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
+    return (jsxs(ScrollContainer, { children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobile, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, "$hideBottomLine": hideBottomLine, "$totalItems": totalItems, children: children }), jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
                     if (ref.current) {
                         ref.current.scrollTo({
                             top: ref.current.scrollHeight,
@@ -10329,7 +10331,7 @@ const OptionsContainer = styled.div `
     `}
 `;
 
-const OptionsList = ({ options, isLoading, requiredSkeletons, }) => {
+const OptionsList = ({ options, isLoading, requiredSkeletons, shortScroll, orDivider = false, }) => {
     const { triggerResize, log } = usePayContext();
     const optionsLength = options.length;
     useEffect(() => {
@@ -10345,7 +10347,7 @@ const OptionsList = ({ options, isLoading, requiredSkeletons, }) => {
         return (jsxs(OptionsContainer, { "$totalResults": options.length, children: [options.map((option) => (jsx(OptionItem, { option: option }, option.id))), isLoading &&
                     Array.from({ length: skeletonCount }).map((_, index) => (jsx(SkeletonOptionItem, {}, index)))] }));
     }
-    return (jsx(ScrollArea, { mobileDirection: "vertical", height: 300, children: jsx(OptionsContainer, { "$totalResults": options.length, children: options.map((option) => (jsx(OptionItem, { option: option }, option.id))) }) }));
+    return (jsxs(Fragment, { children: [jsx(ScrollArea, { mobileDirection: "vertical", height: shortScroll ? 225 : 300, hideBottomLine: orDivider, totalItems: options.length, children: jsx(OptionsContainer, { "$totalResults": options.length, children: options.map((option) => (jsx(OptionItem, { option: option }, option.id))) }) }), orDivider && jsx(OrDivider, {})] }));
 };
 const SkeletonOptionItem = () => {
     return (jsxs(OptionButton, { type: "button", children: [jsx(SkeletonIcon, {}), jsx(SkeletonLabel, {})] }));
@@ -10536,15 +10538,13 @@ function SelectMethod() {
             const ethWalletDisplayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
             let walletIcon;
             if (connector?.icon) {
-                log("[SELECT_METHOD] connector?.icon", connector?.icon);
                 walletIcon = (jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: jsx("img", { src: connector.icon, alt: connector.name }) }));
             }
             else if (wcWallet?.icon) {
-                log("[SELECT_METHOD] wcWallet.icon", wcWallet.icon);
                 walletIcon = (jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: typeof wcWallet.icon === "string" ? (jsx("img", { src: wcWallet.icon, alt: wcWallet.name })) : (wcWallet.icon) }));
             }
             else {
-                log("[SELECT_METHOD] else");
+                // TODO: remove this once we have a default icon for wagmi wallets
                 walletIcon = jsx(MetaMask, {});
             }
             const connectedEthWalletOption = {
@@ -10564,7 +10564,7 @@ function SelectMethod() {
             };
             connectedOptions.push(connectedEthWalletOption);
         }
-        if (isSolanaConnected) {
+        if (isSolanaConnected && includeSolana) {
             const solWalletDisplayName = getAddressContraction(publicKey?.toBase58() ?? "");
             const connectedSolWalletOption = {
                 id: "connectedSolanaWallet",
@@ -10652,10 +10652,10 @@ function getBestUnconnectedWalletIcons(connector) {
         strippedId?.includes("rainbow"),
         strippedId?.includes("coinbase"),
     ];
-    if (!isMetaMask)
-        icons.push(jsx(MetaMask, {}));
     if (!isRainbow)
         icons.push(jsx(Rainbow, {}));
+    if (!isMetaMask)
+        icons.push(jsx(MetaMask, {}));
     if (!isCoinbase)
         icons.push(jsx(Coinbase, {}));
     if (icons.length < 3)
@@ -10663,7 +10663,7 @@ function getBestUnconnectedWalletIcons(connector) {
     return icons;
 }
 function getSolanaOption(isOnIOS) {
-    const { wallets } = useWallet$1();
+    const { wallets, disconnect: disconnectSolana } = useWallet$1();
     const { setRoute } = usePayContext();
     if (wallets.length === 0 && !isOnIOS)
         return null;
@@ -10671,7 +10671,8 @@ function getSolanaOption(isOnIOS) {
         id: "solana",
         title: "Pay on Solana",
         icons: [jsx(Solana, {})],
-        onClick: () => {
+        onClick: async () => {
+            await disconnectSolana();
             setRoute(ROUTES.SOLANA_CONNECT);
         },
     };
@@ -10695,6 +10696,80 @@ function getDepositAddressOption(depositAddressOptions) {
     };
 }
 
+function SelectAnotherMethodButton() {
+    const { paymentState, setRoute } = usePayContext();
+    const { externalPaymentOptions, daimoPayOrder } = paymentState;
+    const { connector } = useAccount();
+    const { disconnectAsync } = useDisconnect();
+    const paymentOptions = daimoPayOrder?.metadata.payer?.paymentOptions;
+    const allPaymentOptions = [
+        ...externalPaymentOptions.options.map((option) => option.id),
+        ...(paymentOptions ?? []),
+    ].flat();
+    const includeSolana = paymentOptions == null ||
+        paymentOptions.includes(ExternalPaymentOptions.Solana);
+    // Deposit address options, e.g. Bitcoin, Tron, Zcash, etc.
+    // Include by default if paymentOptions not provided
+    const includeDepositAddressOption = paymentOptions == null ||
+        paymentOptions.includes(ExternalPaymentOptions.ExternalChains);
+    const selectMethodOption = {
+        id: "select-method",
+        title: `Pay with another method`,
+        icons: getBestPaymentMethodIcons(),
+        onClick: () => {
+            setRoute(ROUTES.SELECT_METHOD);
+        },
+    };
+    const selectWalletOption = {
+        id: "select-wallet",
+        title: "Pay with another wallet",
+        icons: getBestUnconnectedWalletIcons(connector),
+        onClick: async () => {
+            await disconnectAsync();
+            setRoute(ROUTES.CONNECTORS);
+        },
+    };
+    function getBestUnconnectedWalletIcons(connector) {
+        const icons = [];
+        const strippedId = connector?.id.toLowerCase(); // some connector ids can have weird casing and or suffixes and prefixes
+        const [isMetaMask, isRainbow, isCoinbase] = [
+            strippedId?.includes("metamask"),
+            strippedId?.includes("rainbow"),
+            strippedId?.includes("coinbase"),
+        ];
+        if (!isRainbow)
+            icons.push(jsx(Rainbow, {}));
+        if (!isMetaMask)
+            icons.push(jsx(MetaMask, {}));
+        if (!isCoinbase)
+            icons.push(jsx(Coinbase, {}));
+        if (icons.length < 3)
+            icons.push(jsx(Rabby, {}));
+        return icons;
+    }
+    function getBestPaymentMethodIcons() {
+        let icons = externalPaymentOptions.options
+            .filter((option) => option.id !== ExternalPaymentOptions.Daimo)
+            .map((option) => (jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: jsx("img", { src: option.logoURI, alt: "" }) }, option.id)));
+        if (icons.length < 3) {
+            const additionalIcons = [];
+            if (includeSolana)
+                additionalIcons.push(jsx(Solana, {}));
+            if (includeDepositAddressOption && additionalIcons.length < 3)
+                additionalIcons.push(jsx(Bitcoin, {}));
+            if (includeDepositAddressOption && additionalIcons.length < 3)
+                additionalIcons.push(jsx(Tron, {}));
+            if (additionalIcons.length < 3)
+                additionalIcons.push(...getBestUnconnectedWalletIcons(connector));
+            icons = [...icons, ...additionalIcons.slice(0, 3 - icons.length)];
+        }
+        return icons;
+    }
+    return (jsx(OptionsList, { options: allPaymentOptions.length > 0
+            ? [selectMethodOption]
+            : [selectWalletOption] }));
+}
+
 const TokenChainLogo = ({ token }) => {
     return (jsxs(TokenChainContainer, { children: [jsx("img", { src: token.logoURI, alt: token.symbol, style: { borderRadius: 9999 } }), jsx(ChainContainer$1, { children: chainToLogo[token.chainId] })] }));
 };
@@ -10767,7 +10842,7 @@ function SelectToken() {
                     justifyContent: "center",
                     paddingTop: 16,
                     paddingBottom: 16,
-                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: walletPaymentOptions.isLoading, options: optionsList })] }));
+                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx("div", { className: "w-full mt-4", children: jsx(SelectAnotherMethodButton, {}) })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: walletPaymentOptions.isLoading, options: optionsList, shortScroll: isMobile, orDivider: optionsList.length != 0 }), optionsList.length != 0 && (jsx("div", { className: "mt-2", children: jsx(SelectAnotherMethodButton, {}) }))] }));
 }
 function getDaimoTokenKey(token) {
     return `${token.chainId}-${token.token}`;
@@ -10990,7 +11065,7 @@ const SelectSolanaToken = () => {
                     justifyContent: "center",
                     paddingTop: 16,
                     paddingBottom: 16,
-                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: solanaPaymentOptions.isLoading, options: optionsList })] }));
+                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(SelectAnotherMethodButton, {})] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: solanaPaymentOptions.isLoading, options: optionsList, orDivider: optionsList.length != 0 }), optionsList.length != 0 && (jsx("div", { className: "mt-2", children: jsx(SelectAnotherMethodButton, {}) }))] }));
 };
 
 const WaitingDepositAddress = () => {
@@ -11062,7 +11137,11 @@ const WaitingExternal = () => {
     const openExternalWindow = (url) => {
         if (selectedExternalOption?.id === "Coinbase") {
             //opening Coinbase onramp in a popup window in portrait mode in the center of the screen
-            window.open(url, "popupWindow", `width=500,height=700,left=${(window.screen.width - 500) / 2},top=${(window.screen.height - 700) / 2}`);
+            const width = 500;
+            const height = 700;
+            const left = Math.max(0, Math.floor((window.innerWidth - width) / 2) + window.screenX);
+            const top = Math.max(0, Math.floor((window.innerHeight - height) / 2) + window.screenY);
+            window.open(url, "popupWindow", `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`);
         }
         else {
             window.open(url, "_blank");
@@ -11087,15 +11166,24 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
     const context = usePayContext();
     const paymentState = context.paymentState;
     const { payParams, generatePreviewOrder, isDepositFlow, setPaymentWaitingMessage, setSelectedExternalOption, setSelectedTokenOption, setSelectedSolanaTokenOption, setSelectedDepositAddressOption, } = paymentState;
-    const { isConnected, connector, chain, address } = useAccount();
+    const { isConnected: isEthConnected, connector, chain, address, } = useAccount();
+    const { connected: isSolanaConnected } = useWallet$1();
+    const { daimoPayOrder } = paymentState;
+    const paymentOptions = daimoPayOrder?.metadata.payer?.paymentOptions;
+    // Solana payment option
+    // Include by default if paymentOptions not provided
+    const includeSolana = paymentOptions == null ||
+        paymentOptions.includes(ExternalPaymentOptions.Solana);
     const chainIsSupported = useChainIsSupported(chain?.id);
     //if chain is unsupported we enforce a "switch chain" prompt
     const closeable = !(context.options?.enforceSupportedChains &&
-        isConnected &&
+        isEthConnected &&
         !chainIsSupported);
     const showBackButton = closeable &&
         context.route !== ROUTES.SELECT_METHOD &&
-        context.route !== ROUTES.CONFIRMATION;
+        context.route !== ROUTES.CONFIRMATION &&
+        context.route !== ROUTES.SELECT_TOKEN &&
+        context.route !== ROUTES.SOLANA_SELECT_TOKEN;
     const onBack = () => {
         const meta = { event: "click-back" };
         if (context.route === ROUTES.DOWNLOAD) {
@@ -11104,9 +11192,6 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
         else if (context.route === ROUTES.CONNECTORS) {
             context.setRoute(ROUTES.SELECT_METHOD, meta);
         }
-        else if (context.route === ROUTES.SELECT_TOKEN) {
-            context.setRoute(ROUTES.SELECT_METHOD, meta);
-        }
         else if (context.route === ROUTES.SELECT_AMOUNT) {
             setSelectedTokenOption(undefined);
             context.setRoute(ROUTES.SELECT_TOKEN, meta);
@@ -11207,11 +11292,42 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
         }
         context.setOpen(false, { event: "click-close" });
     }
+    // Separate effect for initial route when modal opens
+    useEffect(() => {
+        if (context.open &&
+            !isSolanaConnected &&
+            (context.wcWallet || isEthConnected)) {
+            // Only set initial route if we're at SELECT_METHOD when opening
+            if (context.route === ROUTES.SELECT_METHOD) {
+                context.setRoute(ROUTES.SELECT_TOKEN, {
+                    event: "eth_connected_on_open",
+                    walletId: connector?.id,
+                    chainId: chain?.id,
+                    address,
+                });
+            }
+        }
+        else if (context.open &&
+            isSolanaConnected &&
+            !isEthConnected &&
+            context.wcWallet === undefined &&
+            includeSolana) {
+            console.log("solana connected on open");
+            console.log("isEthConnected ", isEthConnected);
+            console.log("context.wcWallet ", context.wcWallet);
+            if (context.route === ROUTES.SELECT_METHOD) {
+                context.setRoute(ROUTES.SOLANA_SELECT_TOKEN, {
+                    event: "solana_connected_on_open",
+                });
+            }
+        }
+        // If both are connected, do nothing and stay on SELECT_METHOD
+    }, [context.open]);
     useEffect(() => {
         if (context.route === ROUTES.CONNECT ||
             context.route === ROUTES.CONNECTORS ||
             context.route === ROUTES.MOBILECONNECTORS) {
-            if (isConnected) {
+            if (isEthConnected) {
                 context.setRoute(ROUTES.SELECT_TOKEN, {
                     event: "connected",
                     walletId: connector?.id,
@@ -11220,7 +11336,7 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
                 });
             }
         }
-    }, [isConnected, context.route]);
+    }, [isEthConnected, context.route]);
     useEffect(() => context.setMode(mode), [mode]);
     useEffect(() => context.setTheme(theme), [theme]);
     useEffect(() => context.setCustomTheme(customTheme), [customTheme]);