@daimo/pay 0.3.13 → 0.3.15

package/build/index.es.js

@@ -1,15 +1,17 @@
-import { http, useConfig, useAccountEffect, useConnectors as useConnectors$1, useAccount, useEnsName, useWriteContract, useSendTransaction, useSwitchChain, useConnect as useConnect$1, createConfig, useEnsAddress, useEnsAvatar, useDisconnect, useBalance, useChainId, WagmiContext } from 'wagmi';
+import { http, useConfig, useAccountEffect, useAccount, useEnsName, useWriteContract, useSendTransaction, useConnectors as useConnectors$1, useSwitchChain, useConnect as useConnect$1, useDisconnect, useChainId, WagmiContext, createConfig, useEnsAddress, useEnsAvatar } from 'wagmi';
 import { mainnet, base as base$1, polygon, optimism, arbitrum, linea, bsc, sepolia, baseSepolia } from 'wagmi/chains';
 import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { detect } from 'detect-browser';
 import React, { useEffect, useState, useCallback, useRef, useLayoutEffect, useMemo, createContext, createElement } from 'react';
 import { Buffer } from 'buffer';
-import { ExternalPaymentOptions, readDaimoPayOrderID, assert, assertNotNull, DaimoPayOrderMode, DaimoPayOrderStatusDest, getAddressContraction, capitalize, getDisplayPrice, DaimoPayOrderStatusSource, DaimoPayIntentStatus, retryBackoff, debugJson, writeDaimoPayOrderID } from '@daimo/common';
+import { ExternalPaymentOptions, assertNotNull, readDaimoPayOrderID, assert, DaimoPayOrderMode, DaimoPayOrderStatusDest, getAddressContraction, capitalize, getDisplayPrice, DaimoPayOrderStatusSource, DaimoPayIntentStatus, retryBackoff, debugJson, writeDaimoPayOrderID } from '@daimo/common';
 import styled$1, { css, keyframes, ThemeProvider } from 'styled-components';
 import { ethereum, erc20Abi, getChainName, arbitrum as arbitrum$1, base as base$2, optimism as optimism$1, polygon as polygon$1, ethereumSepolia, baseSepolia as baseSepolia$1, linea as linea$1, bsc as bsc$1, getChainExplorerTxUrl } from '@daimo/contract';
-import { zeroAddress, parseUnits } from 'viem';
+import { hexToBytes, zeroAddress, getAddress, parseUnits } from 'viem';
+import { useConnection, useWallet as useWallet$1, ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
 import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import { VersionedTransaction } from '@solana/web3.js';
 import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import { useTransition } from 'react-transition-state';
@@ -17,6 +19,7 @@ import ResizeObserver from 'resize-observer-polyfill';
 import useMeasure from 'react-use-measure';
 import QRCodeUtil from 'qrcode';
 import { walletConnect as walletConnect$1 } from 'wagmi/connectors';
+import { WalletSignTransactionError } from '@solana/wallet-adapter-base';
 import { normalize } from 'viem/ens';
 
 const defaultConnectors = ({ app, walletConnectProjectId, coinbaseWalletPreference, }) => {
@@ -36,20 +39,18 @@ const defaultConnectors = ({ app, walletConnectProjectId, coinbaseWalletPreferen
         overrideIsMetaMask: false,
         preference: coinbaseWalletPreference,
     }));
-    if (walletConnectProjectId) {
-        connectors.push(walletConnect({
-            showQrModal: false,
-            projectId: walletConnectProjectId,
-            metadata: hasAllAppData
-                ? {
-                    name: app.name,
-                    description: app.description,
-                    url: app.url,
-                    icons: [app.icon],
-                }
-                : undefined,
-        }));
-    }
+    connectors.push(walletConnect({
+        showQrModal: false,
+        projectId: walletConnectProjectId,
+        metadata: hasAllAppData
+            ? {
+                name: app.name,
+                description: app.description,
+                url: app.url,
+                icons: [app.icon],
+            }
+            : undefined,
+    }));
     /*
     connectors.push(
       injected({
@@ -100,7 +101,7 @@ const defaultConfig = ({ appName = "Daimo Pay", appIcon, appDescription, appUrl,
                 description: appDescription,
                 url: appUrl,
             },
-            walletConnectProjectId,
+            walletConnectProjectId: walletConnectProjectId ?? "ea6c5b36001c18b96e06128f14c06f40",
             coinbaseWalletPreference,
         });
     const config = {
@@ -263,29 +264,6 @@ const truncateEthAddress = (address, separator = "••••") => {
         return address;
     return `${match[1]}${separator}${match[2]}`;
 };
-const nFormatter = (num, digits = 2) => {
-    if (num < 10000)
-        return num.toFixed(2);
-    const lookup = [
-        { value: 1, symbol: "" },
-        { value: 1e3, symbol: "k" },
-        { value: 1e6, symbol: "m" },
-        { value: 1e9, symbol: "g" },
-        { value: 1e12, symbol: "t" },
-        { value: 1e15, symbol: "p" },
-        { value: 1e18, symbol: "e" },
-    ];
-    const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
-    var item = lookup
-        .slice()
-        .reverse()
-        .find(function (item) {
-        return num >= item.value;
-    });
-    return item
-        ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol
-        : "0";
-};
 const detectBrowser = () => {
     const browser = detect();
     return browser?.name ?? "";
@@ -816,31 +794,6 @@ const useConnectCallback = ({ onConnect, onDisconnect, }) => {
     });
 };
 
-function useConnectors() {
-    const connectors = useConnectors$1();
-    return connectors ?? [];
-}
-function useConnector(id, uuid) {
-    const connectors = useConnectors();
-    if (id === "injected" && uuid) {
-        return connectors.find((c) => c.id === id && c.name === uuid);
-    }
-    else if (id === "injected") {
-        return connectors.find((c) => c.id === id && c.name.includes("Injected"));
-    }
-    return connectors.find((c) => c.id === id);
-}
-function useWalletConnectConnector() {
-    /*
-    options: {
-      qrcode: false,
-      // or
-      showQrModal: false,
-    }
-    */
-    return useConnector("walletConnect");
-}
-
 function useGoogleFont(font) {
     useEffect(() => {
         if (!font)
@@ -901,6 +854,30 @@ const trpc = createTRPCClient({
     ],
 });
 
+function useDepositAddressOptions({ usdRequired, }) {
+    const [options, setOptions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        const refreshDepositAddressOptions = async () => {
+            setLoading(true);
+            try {
+                const options = await trpc.getDepositAddressOptions.query({
+                    usdRequired,
+                });
+                setOptions(options);
+            }
+            catch (e) {
+                console.error(e);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        refreshDepositAddressOptions();
+    }, [usdRequired]);
+    return { options, loading };
+}
+
 const DEFAULT_EXTERNAL_PAYMENT_OPTIONS = [
     ExternalPaymentOptions.Coinbase,
     ExternalPaymentOptions.Binance,
@@ -942,11 +919,89 @@ function useExternalPaymentOptions({ filterIds, usdRequired, platform, }) {
     };
 }
 
+function usePayWithSolanaToken(orderId, setDaimoPayOrder, chosenFinalTokenAmount, platform) {
+    const { connection } = useConnection();
+    const wallet = useWallet$1();
+    const payWithSolanaToken = async (inputToken) => {
+        if (!wallet.publicKey || !orderId || !chosenFinalTokenAmount || !platform) {
+            throw new Error("Invalid parameters");
+        }
+        const { hydratedOrder } = await trpc.hydrateOrder.query({
+            id: orderId.toString(),
+            chosenFinalTokenAmount,
+            platform,
+        });
+        const txHash = await (async () => {
+            try {
+                const serializedTx = await trpc.getSolanaSwapAndBurnTx.query({
+                    orderId: orderId.toString(),
+                    userPublicKey: assertNotNull(wallet.publicKey).toString(),
+                    inputTokenMint: inputToken,
+                });
+                const tx = VersionedTransaction.deserialize(hexToBytes(serializedTx));
+                const txHash = await wallet.sendTransaction(tx, connection);
+                return txHash;
+            }
+            catch (e) {
+                console.error(e);
+                setDaimoPayOrder(hydratedOrder);
+                throw e;
+            }
+            finally {
+                setDaimoPayOrder(hydratedOrder);
+            }
+        })();
+        trpc.processSolanaSourcePayment.mutate({
+            orderId: orderId.toString(),
+            startIntentTxHash: txHash,
+            amount: chosenFinalTokenAmount,
+            token: inputToken,
+        });
+        return txHash;
+    };
+    return { payWithSolanaToken };
+}
+
+function useSolanaPaymentOptions({ address, usdRequired, }) {
+    const [options, setOptions] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        const refreshWalletPaymentOptions = async () => {
+            if (!address || !usdRequired)
+                return;
+            setOptions(null);
+            setIsLoading(true);
+            try {
+                const newOptions = await trpc.getSolanaPaymentOptions.query({
+                    pubKey: address,
+                    usdRequired,
+                });
+                setOptions(newOptions);
+            }
+            catch (error) {
+                console.error(error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        if (address && usdRequired != null) {
+            refreshWalletPaymentOptions();
+        }
+    }, [address, usdRequired]);
+    return {
+        options,
+        isLoading,
+    };
+}
+
 function useWalletPaymentOptions({ address, usdRequired, destChainId, }) {
     const [options, setOptions] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     useEffect(() => {
         const refreshWalletPaymentOptions = async () => {
+            if (!address || !usdRequired || !destChainId)
+                return;
             setOptions(null);
             setIsLoading(true);
             try {
@@ -964,8 +1019,6 @@ function useWalletPaymentOptions({ address, usdRequired, destChainId, }) {
                 setIsLoading(false);
             }
         };
-        if (!address || !usdRequired || !destChainId)
-            return;
         if (address && usdRequired != null && destChainId) {
             refreshWalletPaymentOptions();
         }
@@ -990,6 +1043,9 @@ function usePaymentInfo({ daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
     });
     const { writeContractAsync } = useWriteContract();
     const { sendTransactionAsync } = useSendTransaction();
+    // Solana wallet state.
+    const solanaWallet = useWallet$1();
+    const solanaPubKey = solanaWallet.publicKey?.toBase58();
     // Daimo Pay order state.
     const [paymentWaitingMessage, setPaymentWaitingMessage] = useState();
     // Payment UI config.
@@ -1005,8 +1061,18 @@ function usePaymentInfo({ daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
         usdRequired: daimoPayOrder?.destFinalCallTokenAmount.usd,
         destChainId: daimoPayOrder?.destFinalCallTokenAmount.token.chainId,
     });
+    const solanaPaymentOptions = useSolanaPaymentOptions({
+        address: solanaPubKey,
+        usdRequired: daimoPayOrder?.destFinalCallTokenAmount.usd,
+    });
+    const depositAddressOptions = useDepositAddressOptions({
+        usdRequired: daimoPayOrder?.destFinalCallTokenAmount.usd ?? 0,
+    });
+    const { payWithSolanaToken } = usePayWithSolanaToken(daimoPayOrder?.id ?? undefined, setDaimoPayOrder, daimoPayOrder?.destFinalCallTokenAmount.amount ?? undefined, platform);
     const [selectedExternalOption, setSelectedExternalOption] = useState();
     const [selectedTokenOption, setSelectedTokenOption] = useState();
+    const [selectedSolanaTokenOption, setSelectedSolanaTokenOption] = useState();
+    const [selectedDepositAddressOption, setSelectedDepositAddressOption] = useState();
     const payWithToken = async (tokenAmount) => {
         assert(!!daimoPayOrder && !!platform);
         const { hydratedOrder } = await trpc.hydrateOrder.query({
@@ -1027,7 +1093,7 @@ function usePaymentInfo({ daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
                 else {
                     return await writeContractAsync({
                         abi: erc20Abi,
-                        address: tokenAmount.token.token,
+                        address: getAddress(tokenAmount.token.token),
                         functionName: "transfer",
                         args: [hydratedOrder.intentAddr, BigInt(tokenAmount.amount)],
                     });
@@ -1066,6 +1132,21 @@ function usePaymentInfo({ daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
         setDaimoPayOrder(hydratedOrder);
         return externalPaymentOptionData.url;
     };
+    const payWithDepositAddress = async (option) => {
+        assert(!!daimoPayOrder && !!platform);
+        const { hydratedOrder } = await trpc.hydrateOrder.query({
+            id: daimoPayOrder.id.toString(),
+            chosenFinalTokenAmount: daimoPayOrder.destFinalCallTokenAmount.amount,
+            platform,
+        });
+        setDaimoPayOrder(hydratedOrder);
+        const depositAddressOption = await trpc.getDepositAddressOptionData.query({
+            input: option,
+            usdRequired: daimoPayOrder.destFinalCallTokenAmount.usd,
+            toAddress: assertNotNull(hydratedOrder.intentAddr),
+        });
+        return depositAddressOption;
+    };
     const refreshOrder = useCallback(async () => {
         const id = daimoPayOrder?.id?.toString();
         if (!id)
@@ -1120,13 +1201,21 @@ function usePaymentInfo({ daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
         paymentWaitingMessage,
         selectedExternalOption,
         selectedTokenOption,
+        selectedSolanaTokenOption,
         externalPaymentOptions,
         walletPaymentOptions,
+        solanaPaymentOptions,
+        depositAddressOptions,
+        selectedDepositAddressOption,
+        setSelectedDepositAddressOption,
         setSelectedExternalOption,
         setSelectedTokenOption,
+        setSelectedSolanaTokenOption,
         setChosenUsd,
         payWithToken,
         payWithExternal,
+        payWithDepositAddress,
+        payWithSolanaToken,
         refreshOrder,
         onSuccess,
         senderEnsName: senderEnsName ?? undefined,
@@ -2274,7 +2363,7 @@ const ResetContainer = styled(motion.div) `
 `;
 
 var name = "@daimo/pay";
-var version = "0.3.13";
+var version = "0.3.15";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";
@@ -2313,13 +2402,18 @@ var keywords = [
 	"crypto"
 ];
 var dependencies = {
-	"@daimo/common": "0.3.11",
-	"@daimo/contract": "0.3.11",
+	"@daimo/common": "0.3.15",
+	"@daimo/contract": "0.3.15",
+	"@solana/wallet-adapter-base": "^0.9.23",
+	"@solana/wallet-adapter-react": "^0.15.35",
+	"@solana/web3.js": "^1.95.4",
 	"@trpc/client": "^11.0.0-next-beta.318",
 	"@trpc/server": "^11.0.0-next-beta.318",
 	buffer: "^6.0.3",
 	"detect-browser": "^5.3.0",
+	encoding: "^0.1.13",
 	"framer-motion": "^11.11.4",
+	"pino-pretty": "^13.0.0",
 	qrcode: "^1.5.0",
 	"react-transition-state": "^1.1.4",
 	"react-use-measure": "^2.1.1",
@@ -2875,7 +2969,7 @@ const InfoButton = styled(motion.button) `
     }
   }
 `;
-const Container$6 = styled(motion.div) `
+const Container$5 = styled(motion.div) `
   --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
   --duration: 200ms;
   --transition: height var(--duration) var(--ease),
@@ -4498,6 +4592,31 @@ function usePrevious(value, initial) {
     return ref.current.previous;
 }
 
+function useConnectors() {
+    const connectors = useConnectors$1();
+    return connectors ?? [];
+}
+function useConnector(id, uuid) {
+    const connectors = useConnectors();
+    if (id === "injected" && uuid) {
+        return connectors.find((c) => c.id === id && c.name === uuid);
+    }
+    else if (id === "injected") {
+        return connectors.find((c) => c.id === id && c.name.includes("Injected"));
+    }
+    return connectors.find((c) => c.id === id);
+}
+function useWalletConnectConnector() {
+    /*
+    options: {
+      qrcode: false,
+      // or
+      showQrModal: false,
+    }
+    */
+    return useConnector("walletConnect");
+}
+
 const useWallet = (id) => {
     const wallets = useWallets();
     const wallet = wallets.find((c) => c.id === id);
@@ -4792,7 +4911,7 @@ const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onB
     const context = useContext();
     const themeContext = useThemeContext();
     const mobile = isMobile();
-    const { daimoPayOrder, selectedExternalOption, selectedTokenOption } = context.paymentInfo;
+    const { daimoPayOrder, selectedExternalOption, selectedTokenOption, selectedSolanaTokenOption, selectedDepositAddressOption, } = context.paymentInfo;
     const wallet = useWallet(context.connector?.id);
     const walletInfo = {
         name: wallet?.name,
@@ -4902,6 +5021,10 @@ const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onB
                 else {
                     return walletInfo?.name;
                 }
+            case ROUTES.SOLANA_CONNECT:
+                return "Connect Solana Wallet";
+            case ROUTES.SOLANA_CONNECTOR:
+                return context.solanaConnector ?? "Solana Wallet";
             case ROUTES.CONNECTORS:
                 return locales.connectorsScreen_heading;
             case ROUTES.MOBILECONNECTORS:
@@ -4910,16 +5033,24 @@ const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onB
                 return locales.downloadAppScreen_heading;
             case ROUTES.ONBOARDING:
                 return locales.onboardingScreen_heading;
-            case ROUTES.PROFILE:
-                return locales.profileScreen_heading;
             case ROUTES.SWITCHNETWORKS:
                 return locales.switchNetworkScreen_heading;
             case ROUTES.SELECT_METHOD:
-                return daimoPayOrder?.metadata.intent;
             case ROUTES.SELECT_TOKEN:
+            case ROUTES.SOLANA_SELECT_TOKEN:
                 return daimoPayOrder?.metadata.intent;
+            case ROUTES.SOLANA_PAY_WITH_TOKEN:
+                if (!selectedSolanaTokenOption)
+                    return undefined;
+                return `Pay with ${selectedSolanaTokenOption.required.token.symbol}`;
             case ROUTES.WAITING_OTHER:
                 return selectedExternalOption?.cta;
+            case ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN:
+                return "Select Chain";
+            case ROUTES.WAITING_DEPOSIT_ADDRESS:
+                if (!selectedDepositAddressOption)
+                    return undefined;
+                return `Pay with ${selectedDepositAddressOption.id}`;
             case ROUTES.PAY_WITH_TOKEN:
                 if (!selectedTokenOption)
                     return undefined;
@@ -4933,7 +5064,7 @@ const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onB
     const Content = (jsx(ResetContainer, { "$useTheme": demo?.theme ?? themeContext.theme, "$useMode": demo?.mode ?? themeContext.mode, "$customTheme": demo?.customTheme ?? themeContext.customTheme, children: jsxs(ModalContainer, { role: "dialog", style: {
                 pointerEvents: rendered ? "auto" : "none",
                 position: positionInside ? "absolute" : undefined,
-            }, children: [!inline && (jsx(BackgroundOverlay, { "$active": rendered, onClick: onClose, "$blur": context.options?.overlayBlur })), jsxs(Container$6, { style: dimensionsCSS, initial: false, children: [jsx("div", { style: {
+            }, children: [!inline && (jsx(BackgroundOverlay, { "$active": rendered, onClick: onClose, "$blur": context.options?.overlayBlur })), jsxs(Container$5, { style: dimensionsCSS, initial: false, children: [jsx("div", { style: {
                                 pointerEvents: inTransition ? "all" : "none", // Block interaction while transitioning
                                 position: "absolute",
                                 top: 0,
@@ -6968,6 +7099,10 @@ const Evmos = ({ testnet, ...props }) => (jsx("svg", { ...props, "aria-hidden":
             : "#2D2A25",
     }, children: jsx("path", { d: "M18.4916 12.6668C12.9416 14.806 12.4332 20.2846 10.8418 22.8432C9.23155 25.4322 5.54251 26.8607 6.04698 28.1801C6.55143 29.4994 10.2449 28.0824 13.1669 28.9242C16.0543 29.7561 20.0831 33.4862 25.633 31.3469C28.4603 30.2573 30.5076 28.0143 31.449 25.3574C31.5502 25.0723 31.361 24.7673 31.0606 24.7391C30.874 24.7215 30.6948 24.8196 30.6106 24.9877C29.759 26.6908 28.2981 28.0934 26.3864 28.8301C23.2303 30.0465 19.777 29.0915 17.6562 26.6961C17.1746 26.1522 16.7626 25.533 16.4374 24.8487C16.348 24.6603 16.2629 24.4689 16.1875 24.2708C16.1117 24.0728 16.0473 23.8735 15.9881 23.6732C17.6562 22.8925 19.5812 22.0656 21.7635 21.2246C23.903 20.3999 25.8505 19.731 27.5841 19.1958C28.7571 18.8341 29.8322 18.5331 30.8029 18.2871C30.8732 18.2695 30.9423 18.2519 31.0112 18.2347C31.158 18.1982 31.3088 18.2769 31.363 18.4186L31.364 18.4213C31.396 18.5053 31.4236 18.5898 31.4535 18.6743C31.6453 19.2196 31.7892 19.7706 31.8841 20.3229C31.9258 20.5645 32.1888 20.6961 32.4044 20.5799C33.2014 20.1504 33.9302 19.7314 34.5814 19.3283C37.0083 17.8276 38.3538 16.5549 38.0776 15.8336C37.802 15.1119 35.9541 15.0705 33.1503 15.5854C32.2593 15.7491 31.2716 15.9691 30.207 16.2416C30.0229 16.2886 29.8365 16.3375 29.6481 16.3877C28.7522 16.6262 27.8073 16.8995 26.8234 17.2053C24.9936 17.7744 23.0305 18.4561 21.0038 19.2372C19.1078 19.9682 17.3109 20.726 15.6629 21.4812C15.6428 18.2761 17.5725 15.2461 20.7286 14.0297C22.6399 13.293 24.6605 13.3533 26.4285 14.0473C26.6029 14.116 26.8015 14.0684 26.9291 13.9298C27.1331 13.7076 27.0706 13.3537 26.8053 13.2094C24.3353 11.8685 21.319 11.5771 18.4916 12.6668Z", fill: "#FAF1E4" }) }));
 const BinanceSmartChain = ({ testnet, ...props }) => (jsx("svg", { ...props, "aria-hidden": "true", width: "44", height: "44", version: "1.1", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2496 2496", children: jsxs("g", { children: [jsx("path", { style: { fillRule: "evenodd", clipRule: "evenodd", fill: "#F0B90B" }, d: "M1248,0c689.3,0,1248,558.7,1248,1248s-558.7,1248-1248,1248\n\t\tS0,1937.3,0,1248S558.7,0,1248,0L1248,0z" }), jsx("path", { style: { fill: "#FFFFFF" }, d: "M685.9,1248l0.9,330l280.4,165v193.2l-444.5-260.7v-524L685.9,1248L685.9,1248z M685.9,918v192.3\n\t\tl-163.3-96.6V821.4l163.3-96.6l164.1,96.6L685.9,918L685.9,918z M1084.3,821.4l163.3-96.6l164.1,96.6L1247.6,918L1084.3,821.4\n\t\tL1084.3,821.4z" }), jsx("path", { style: { fill: "#FFFFFF" }, d: "M803.9,1509.6v-193.2l163.3,96.6v192.3L803.9,1509.6L803.9,1509.6z M1084.3,1812.2l163.3,96.6\n\t\tl164.1-96.6v192.3l-164.1,96.6l-163.3-96.6V1812.2L1084.3,1812.2z M1645.9,821.4l163.3-96.6l164.1,96.6v192.3l-164.1,96.6V918\n\t\tL1645.9,821.4L1645.9,821.4L1645.9,821.4z M1809.2,1578l0.9-330l163.3-96.6v524l-444.5,260.7v-193.2L1809.2,1578L1809.2,1578\n\t\tL1809.2,1578z" }), jsx("polygon", { style: { fill: "#FFFFFF" }, points: "1692.1,1509.6 1528.8,1605.3 1528.8,1413 1692.1,1316.4 1692.1,1509.6 \t" }), jsx("path", { style: { fill: "#FFFFFF" }, d: "M1692.1,986.4l0.9,193.2l-281.2,165v330.8l-163.3,95.7l-163.3-95.7v-330.8l-281.2-165V986.4\n\t\tL968,889.8l279.5,165.8l281.2-165.8l164.1,96.6H1692.1L1692.1,986.4z M803.9,656.5l443.7-261.6l444.5,261.6l-163.3,96.6\n\t\tl-281.2-165.8L967.2,753.1L803.9,656.5L803.9,656.5z" })] }) }));
+const Solana = ({ testnet, ...props }) => (jsxs("svg", { ...props, "aria-hidden": "true", width: "44", height: "44", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("rect", { width: "200", height: "200", rx: "100", fill: "#121212" }), jsx("g", { clipPath: "url(#clip0_295_42)", children: jsx("path", { d: "M149.48 125.382L132.807 142.801C132.444 143.18 132.006 143.482 131.519 143.688C131.031 143.894 130.505 144 129.974 144H50.9356C50.5585 144 50.1896 143.893 49.8742 143.691C49.5588 143.49 49.3107 143.203 49.1604 142.866C49.0101 142.529 48.9641 142.157 49.028 141.795C49.092 141.432 49.2631 141.096 49.5204 140.828L66.2061 123.408C66.5676 123.031 67.0047 122.729 67.4904 122.523C67.9762 122.317 68.5002 122.21 69.0301 122.21H148.064C148.441 122.21 148.81 122.317 149.126 122.518C149.441 122.72 149.689 123.007 149.84 123.344C149.99 123.681 150.036 124.053 149.972 124.415C149.908 124.777 149.737 125.113 149.48 125.382ZM132.807 90.3032C132.444 89.9248 132.006 89.6231 131.519 89.4169C131.031 89.2108 130.505 89.1045 129.974 89.1048H50.9356C50.5585 89.1048 50.1896 89.2121 49.8742 89.4136C49.5588 89.6151 49.3107 89.9019 49.1604 90.2388C49.0101 90.5758 48.9641 90.9482 49.028 91.3103C49.092 91.6723 49.2631 92.0083 49.5204 92.277L66.2061 109.697C66.5676 110.074 67.0047 110.375 67.4904 110.581C67.9762 110.788 68.5002 110.894 69.0301 110.895H148.064C148.441 110.895 148.81 110.788 149.126 110.586C149.441 110.385 149.689 110.098 149.84 109.761C149.99 109.424 150.036 109.052 149.972 108.69C149.908 108.328 149.737 107.992 149.48 107.723L132.807 90.3032ZM50.9356 77.7905H129.974C130.505 77.7907 131.031 77.6845 131.519 77.4783C132.006 77.2721 132.444 76.9704 132.807 76.592L149.48 59.1722C149.737 58.9036 149.908 58.5676 149.972 58.2055C150.036 57.8434 149.99 57.471 149.84 57.1341C149.689 56.7971 149.441 56.5103 149.126 56.3088C148.81 56.1073 148.441 56 148.064 56H69.0301C68.5002 56.0009 67.9762 56.1077 67.4904 56.3138C67.0047 56.52 66.5676 56.8211 66.2061 57.1985L49.5247 74.6183C49.2677 74.8866 49.0966 75.2223 49.0325 75.5839C48.9684 75.9456 49.0141 76.3177 49.1639 76.6545C49.3136 76.9913 49.5611 77.2781 49.8758 77.4799C50.1905 77.6817 50.5589 77.7896 50.9356 77.7905Z", fill: "url(#paint0_linear_295_42)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_295_42", x1: "57.5256", y1: "146.097", x2: "137.993", y2: "52.9838", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { offset: "0.08", stopColor: "#9945FF" }), jsx("stop", { offset: "0.3", stopColor: "#8752F3" }), jsx("stop", { offset: "0.5", stopColor: "#5497D5" }), jsx("stop", { offset: "0.6", stopColor: "#43B4CA" }), jsx("stop", { offset: "0.72", stopColor: "#28E0B9" }), jsx("stop", { offset: "0.97", stopColor: "#19FB9B" })] }), jsx("clipPath", { id: "clip0_295_42", children: jsx("rect", { width: "101", height: "88", fill: "white", transform: "translate(49 56)" }) })] })] }));
+const Bitcoin = ({ testnet, ...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", children: [jsx("path", { d: "M43.3388 27.3219C40.4005 39.1077 28.4634 46.2804 16.6762 43.3413C4.89383 40.4029 -2.27886 28.4652 0.660895 16.68C3.59789 4.89286 15.535 -2.28052 27.3187 0.657859C39.1052 3.59623 46.2772 15.5354 43.3388 27.3219Z", fill: "#F7931A" }), jsx("path", { d: "M31.6992 18.8656C32.1371 15.9382 29.9082 14.3645 26.8605 13.3147L27.8492 9.34922L25.4353 8.74765L24.4728 12.6087C23.8383 12.4505 23.1865 12.3013 22.5389 12.1535L23.5083 8.26709L21.0958 7.66553L20.1065 11.6297C19.5813 11.51 19.0657 11.3918 18.5652 11.2673L18.5679 11.255L15.239 10.4238L14.5969 13.0019C14.5969 13.0019 16.3878 13.4123 16.35 13.4378C17.3277 13.6818 17.5043 14.3288 17.4748 14.8417L16.3487 19.3592C16.416 19.3764 16.5033 19.4012 16.5996 19.4397C16.5192 19.4197 16.4332 19.3977 16.3445 19.3764L14.766 25.7048C14.6464 26.0018 14.3432 26.4473 13.6598 26.2782C13.6839 26.3133 11.9053 25.8403 11.9053 25.8403L10.707 28.6033L13.8482 29.3864C14.4326 29.5328 15.0053 29.6862 15.569 29.8305L14.5701 33.8414L16.9812 34.443L17.9705 30.4747C18.6291 30.6535 19.2685 30.8185 19.8941 30.9738L18.9082 34.9235L21.322 35.5251L22.321 31.5218C26.437 32.3007 29.5322 31.9865 30.835 28.2637C31.8848 25.2662 30.7827 23.5372 28.6171 22.4097C30.1942 22.046 31.3822 21.0085 31.6992 18.8656ZM26.184 26.5993C25.4381 29.5968 20.3912 27.9763 18.7549 27.57L20.0804 22.2563C21.7167 22.6647 26.9637 23.4732 26.184 26.5993ZM26.9307 18.8223C26.25 21.5489 22.0494 20.1636 20.6868 19.824L21.8885 15.0046C23.2512 15.3442 27.6395 15.9781 26.9307 18.8223Z", fill: "white" })] }));
+const Tron = ({ testnet, ...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", children: [jsxs("g", { "clip-path": "url(#clip0_450_171)", children: [jsx("path", { d: "M43.3388 27.3219C40.4005 39.1077 28.4634 46.2804 16.6762 43.3413C4.89383 40.4029 -2.27886 28.4652 0.660896 16.68C3.59789 4.89286 15.535 -2.28052 27.3187 0.65786C39.1052 3.59623 46.2772 15.5354 43.3388 27.3219Z", fill: "#FF060A" }), jsx("path", { d: "M36.3975 17.2381C35.0196 16.0232 33.1057 14.1724 31.5555 12.8625L31.4598 12.8056C31.3067 12.6917 31.1344 12.5968 30.9526 12.5303C27.2015 11.8659 9.74716 8.76218 9.41224 8.80015C9.31654 8.80964 9.22085 8.84761 9.1443 8.89507L9.05817 8.96151C8.95291 9.06591 8.86679 9.1893 8.81894 9.33167L8.7998 9.38862V9.70184V9.7493C10.7615 14.9507 18.5222 31.9785 20.0532 35.9839C20.1489 36.2591 20.3212 36.7717 20.6465 36.8001H20.7231C20.8953 36.8001 21.6417 35.8605 21.6417 35.8605C21.6417 35.8605 34.9717 20.5032 36.321 18.8707C36.4932 18.6713 36.6463 18.453 36.7803 18.2252C36.8186 18.0449 36.7994 17.8646 36.7324 17.6937C36.6655 17.5229 36.5411 17.3615 36.3975 17.2381ZM25.0484 19.032L30.7325 14.552L34.0722 17.4754L25.0484 19.032ZM22.8379 18.7378L13.0486 11.1066L28.8952 13.8876L22.8379 18.7378ZM23.7183 20.731L33.7373 19.1934L22.2829 32.3202L23.7183 20.731ZM11.7184 11.8754L22.0245 20.1805L20.5317 32.3296L11.7184 11.8754Z", fill: "white" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_450_171", children: jsx("rect", { width: "44", height: "44", fill: "white" }) }) })] }));
+const Zcash = ({ testnet, ...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", children: [jsx("path", { d: "M43.3415 27.3221C40.4029 39.1078 28.4645 46.2804 16.676 43.3413C4.8924 40.403 -2.28106 28.4654 0.659014 16.6803C3.59632 4.8933 15.5347 -2.28001 27.3197 0.658341C39.1074 3.59668 46.2802 15.5357 43.3415 27.3221Z", fill: "white" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 22C0 9.86741 9.86741 0 22 0C34.1326 0 44 9.86741 44 22C44 34.1326 34.1326 44 22 44C9.86741 44 0 34.1326 0 22ZM29.8475 11.7904V15.1384L20.5358 27.7681H29.8475V32.2088H23.8447V35.8885H20.1553V32.2088H14.1525V28.8607L23.4544 16.2311H14.1525V11.7904H20.1553V8.10089H23.8447V11.7904H29.8475Z", fill: "#F4B728" })] }));
 const Canto = ({ testnet, ...props }) => (jsx("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: testnet
             ? "linear-gradient(180deg, #8995A9 0%, #424D5F 99.48%)"
@@ -7015,7 +7150,7 @@ const chainToLogo = {
     [linea$1.chainId]: jsx(Linea, {}),
     [bsc$1.chainId]: jsx(BinanceSmartChain, {}),
 };
-var ChainIcons = {
+var Chains = {
     UnknownChain,
     Base,
     Ethereum,
@@ -7052,6 +7187,7 @@ const CoinLogos = ({ $size = 24 }) => {
         jsx(Arbitrum, {}),
         jsx(Base, {}),
         jsx(Polygon, {}),
+        jsx(Solana, {}),
     ];
     const logoBlock = (element, index) => (jsx(LogoContainer$4, { "$marginLeft": index !== 0 ? -($size / 3) : 0, "$zIndex": logos.length - index, "$size": $size, transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: element }, index));
     return (jsx(Logos, { children: logos.map((element, index) => logoBlock(element, index)) }));
@@ -7280,7 +7416,7 @@ const QRCodeContent = styled(motion.div) `
     height: auto !important;
   }
 `;
-const PlaceholderKeyframes$1 = keyframes `
+const PlaceholderKeyframes = keyframes `
   0%{ background-position: 100% 0; }
   100%{ background-position: -100% 0; }
 `;
@@ -7352,7 +7488,7 @@ const QRPlaceholder = styled(motion.div) `
       rgba(255, 255, 255, 0)
     );
     background-size: 200% 100%;
-    animation: ${PlaceholderKeyframes$1} 1000ms linear infinite both;
+    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
   }
 `;
 const LogoContainer$3 = styled(motion.div) `
@@ -7588,7 +7724,7 @@ const generateMatrix = (value, errorCorrectionLevel) => {
         : rows[rows.length - 1].push(key)) && rows, []);
 };
 function QRCode({ ecl = "M", size: sizeProp = 200, uri, clearArea = false, image, imageBackground = "transparent", }) {
-    const logoSize = clearArea ? 76 : 0;
+    const logoSize = clearArea ? 168 : 0;
     const size = sizeProp - 10 * 2;
     const dots = useMemo(() => {
         const dots = [];
@@ -7650,7 +7786,7 @@ function CustomQRCode({ value, image, imageBackground, imagePosition = "center",
                             background: imagePosition === "center" ? imageBackground : undefined,
                         }, children: Logo }) })), jsx(AnimatePresence, { initial: false, children: value ? (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: "absolute", inset: [0, 0] }, transition: {
                             duration: 0.2,
-                        }, children: jsx(QRCode, { uri: value, size: 288, ecl: "M", clearArea: !!(imagePosition === "center" && image) }) }, value)) : (jsxs(QRPlaceholder, { initial: { opacity: 0.1 }, animate: { opacity: 0.1 }, exit: { opacity: 0, position: "absolute", inset: [0, 0] }, transition: {
+                        }, children: jsx(QRCode, { uri: value, size: 576, ecl: "H", clearArea: !!(imagePosition === "center" && image) }) }, value)) : (jsxs(QRPlaceholder, { initial: { opacity: 0.1 }, animate: { opacity: 0.1 }, exit: { opacity: 0, position: "absolute", inset: [0, 0] }, transition: {
                             duration: 0.2,
                         }, children: [jsx("span", {}), jsx("span", {}), jsx("span", {}), jsx("div", {})] })) })] }) }));
 }
@@ -7735,7 +7871,7 @@ const WalletList = styled.div `
       }
     `}
 `;
-const Container$5 = styled.div ``;
+const Container$4 = styled.div ``;
 
 function useWalletConnectModal() {
     const { log } = useContext();
@@ -7837,20 +7973,22 @@ const IconContainer$1 = styled(motion.div) `
           }
         `}
 `;
-const CopyToClipboardIcon = ({ copied, small, }) => (jsx(IconContainer$1, { "$clipboard": copied, children: jsx(CopyToClipboardIcon$1, { style: {
+const CopyToClipboardIcon = ({ copied, small, dark, }) => (jsx(IconContainer$1, { "$clipboard": copied, children: jsx(CopyToClipboardIcon$1, { style: {
             transform: small ? "scale(1)" : "translateX(3px) scale(1.5)",
-            opacity: small || copied ? 1 : 0.3,
+            opacity: small || copied || dark ? 1 : 0.3,
         } }) }));
 
-const Container$4 = styled.div `
+const Container$3 = styled.div `
   --color: var(--ck-copytoclipboard-stroke);
   --bg: var(--ck-body-background);
   transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
 
   cursor: pointer;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 4px;
+  gap: 8px;
 
   ${(props) => props.$disabled
     ? css `
@@ -7863,19 +8001,6 @@ const Container$4 = styled.div `
           }
         `}
 `;
-const OffsetContainer = styled.div `
-  display: block;
-  position: relative;
-  transition: inherit;
-  svg {
-    position: absolute;
-    left: 100%;
-    display: block;
-    top: -1px;
-    margin: 0;
-    margin-left: 4px;
-  }
-`;
 const CopyToClipboard = ({ string, children, variant }) => {
     const [clipboard, setClipboard] = useState(false);
     let timeout;
@@ -7892,7 +8017,7 @@ const CopyToClipboard = ({ string, children, variant }) => {
     };
     if (variant === "button")
         return (jsx(Button, { disabled: !string, onClick: onCopy, icon: jsx(CopyToClipboardIcon, { copied: clipboard }), children: children }));
-    return (jsx(Container$4, { onClick: onCopy, "$disabled": !string, children: jsxs(OffsetContainer, { children: [children, jsx(CopyToClipboardIcon, { copied: clipboard, small: true })] }) }));
+    return (jsxs(Container$3, { onClick: onCopy, "$disabled": !string, children: [jsx(CopyToClipboardIcon, { copied: clipboard, dark: true }), children] }));
 };
 
 const MoreIcon = (jsx("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" }) }));
@@ -7918,7 +8043,7 @@ const MobileConnectors = () => {
             window.location.href = uri;
         //if (uri) window.open(uri, '_blank');
     };
-    return (jsx(PageContent, { style: { width: 312 }, children: jsxs(Container$5, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { "$disabled": !wcUri, children: [walletsIdsToDisplay
+    return (jsx(PageContent, { style: { width: 312 }, children: jsxs(Container$4, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { "$disabled": !wcUri, children: [walletsIdsToDisplay
                                     .sort(
                                 // sort by name
                                 (a, b) => {
@@ -8184,186 +8309,13 @@ const Introduction = () => {
     return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.Coinbase, { background: true }) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.MetaMask, { background: true }) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.Trust, {}) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.Argent, {}) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos$1.ImToken, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
 };
 
-const AvatarContainer = styled(motion.div) `
-  padding: 18px 0 20px;
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    padding: 16px 0 20px;
-  }
-`;
-const AvatarInner = styled(motion.div) `
-  position: relative;
-  display: inline-block;
-`;
-const ChainSelectorContainer = styled(motion.div) `
-  z-index: 3;
-  position: absolute;
-  bottom: 0px;
-  right: -16px;
-`;
-const BalanceContainer = styled(motion.div) `
-  position: relative;
-`;
-const Balance = styled(motion.div) `
-  position: relative;
-`;
-const PlaceholderKeyframes = keyframes `
-  0%{ background-position: 100% 0; }
-  100%{ background-position: -100% 0; }
-`;
-const LoadingBalance = styled(motion.div) `
-  width: 25%;
-  margin: 0 auto;
-  position: relative;
-  overflow: hidden;
-  border-radius: 10px;
-  background: var(--ck-body-background-secondary);
-  inset: 0;
-  &:before {
-    z-index: 4;
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-image: linear-gradient(
-      90deg,
-      var(--ck-body-background-transparent) 50%,
-      var(--ck-body-background),
-      var(--ck-body-background-transparent)
-    );
-    opacity: 0.75;
-    background-size: 200% 100%;
-    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
-  }
-`;
-
-function addressToNumber(address) {
-    return ((address
-        .split("")
-        .map((l) => l.charCodeAt(0))
-        .reduce((a, b) => a + b) %
-        100) /
-        100);
-}
-const EnsAvatar = styled(motion.div) `
-  will-change: transform; // Needed for Safari
-  pointer-events: none;
-  user-select: none;
-  position: relative;
-  overflow: hidden;
-  margin: 0;
-  border-radius: ${(props) => `${props.$radius}px`};
-  width: ${(props) => `${props.$size}px`};
-  height: ${(props) => `${props.$size}px`};
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
-  &:before {
-    content: "";
-    z-index: 1;
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
-  }
-  ${(props) => {
-    if (props.$seed) {
-        const id = Math.ceil(addressToNumber(props.$seed) * 8);
-        const ensColor = `0${id === 0 ? 1 : id}`; // No zero ID in ENS color list.. 🤷‍♀️
-        return css `
-        background: var(--ck-ens-${ensColor}-start);
-        background: linear-gradient(
-          180deg,
-          var(--ck-ens-${ensColor}-start) 0%,
-          var(--ck-ens-${ensColor}-stop) 100%
-        );
-      `;
-    }
-}}
-`;
-const ImageContainer = styled(motion.img) `
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  opacity: ${(props) => (props.$loaded ? 1 : 0)};
-  will-change: opacity; // Needed for Safari
-  transition: opacity 500ms ease;
-  transform: scale(1.01); // fixes background color bleeding
-`;
-
-const ensFallbackConfig = createConfig({
-    chains: [mainnet],
-    transports: {
-        [mainnet.id]: http(),
-    },
-});
-function useEnsFallbackConfig() {
-    return !useChainIsSupported(1) ? ensFallbackConfig : undefined;
-}
-
-function useIsMounted() {
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => setMounted(true), []);
-    return mounted;
-}
-
-const Avatar = ({ address, name, size = 96, radius = 96 }) => {
-    const isMounted = useIsMounted();
-    const context = useContext();
-    const imageRef = useRef(null);
-    const [loaded, setLoaded] = useState(true);
-    const ensFallbackConfig = useEnsFallbackConfig();
-    const { data: ensAddress } = useEnsAddress({
-        chainId: 1,
-        name: name,
-        config: ensFallbackConfig,
-    });
-    const { data: ensName } = useEnsName({
-        chainId: 1,
-        address: address ?? ensAddress ?? undefined,
-        config: ensFallbackConfig,
-    });
-    const { data: ensAvatar } = useEnsAvatar({
-        chainId: 1,
-        name: normalize(ensName ?? ""),
-        config: ensFallbackConfig,
-    });
-    const ens = {
-        address: ensAddress ?? address,
-        name: ensName ?? name,
-        avatar: ensAvatar ?? undefined,
-    };
-    useEffect(() => {
-        if (!(imageRef.current &&
-            imageRef.current.complete &&
-            imageRef.current.naturalHeight !== 0)) {
-            setLoaded(false);
-        }
-    }, [ensAvatar]);
-    if (!isMounted)
-        return jsx("div", { style: { width: size, height: size, borderRadius: radius } });
-    if (context.options?.customAvatar)
-        return (jsx("div", { style: {
-                width: size,
-                height: size,
-                borderRadius: radius,
-                overflow: "hidden",
-            }, children: context.options?.customAvatar({
-                address: address ?? ens?.address,
-                ensName: name ?? ens?.name,
-                ensImage: ens?.avatar,
-                size,
-                radius,
-            }) }));
-    if (!ens.name || !ens.avatar)
-        return (jsx(ResetContainer, { style: { pointerEvents: "none" }, children: jsx(EnsAvatar, { "$size": size, "$seed": ens.address, "$radius": radius }) }));
-    return (jsx(ResetContainer, { style: { pointerEvents: "none" }, children: jsx(EnsAvatar, { "$size": size, "$seed": ens.address, "$radius": radius, children: jsx(ImageContainer, { ref: imageRef, src: ens.avatar, alt: ens.name, onLoad: () => setLoaded(true), "$loaded": loaded }) }) }));
-};
-
 // Note: these rpcUrls are incomplete, and are subject to change from their respective providers
 // More RPC URLs can be found: https://chainid.network/chains.json
 const chainConfigs = [
     {
         id: 1,
         name: "Ethereum",
-        logo: jsx(ChainIcons.Ethereum, {}),
+        logo: jsx(Chains.Ethereum, {}),
         rpcUrls: {
             alchemy: {
                 http: ["https://eth-mainnet.g.alchemy.com/v2"],
@@ -8378,68 +8330,68 @@ const chainConfigs = [
     {
         id: 3,
         name: "Rinkeby",
-        logo: jsx(ChainIcons.Ethereum, { testnet: true }),
+        logo: jsx(Chains.Ethereum, { testnet: true }),
         rpcUrls: {},
     },
     {
         id: 4,
         name: "Ropsten",
-        logo: jsx(ChainIcons.Ethereum, { testnet: true }),
+        logo: jsx(Chains.Ethereum, { testnet: true }),
     },
     {
         id: 5,
         name: "Görli",
-        logo: jsx(ChainIcons.Ethereum, { testnet: true }),
+        logo: jsx(Chains.Ethereum, { testnet: true }),
     },
     {
         id: 42,
         name: "Kovan",
-        logo: jsx(ChainIcons.Ethereum, { testnet: true }),
+        logo: jsx(Chains.Ethereum, { testnet: true }),
     },
     {
         id: 10,
         name: "Optimism",
-        logo: jsx(ChainIcons.Optimism, {}),
+        logo: jsx(Chains.Optimism, {}),
     },
     {
         id: 69, // nice
         name: "Optimism Kovan",
-        logo: jsx(ChainIcons.Optimism, { testnet: true }),
+        logo: jsx(Chains.Optimism, { testnet: true }),
     },
     {
         id: 420, // nice
         name: "Optimism Goerli",
-        logo: jsx(ChainIcons.Optimism, { testnet: true }),
+        logo: jsx(Chains.Optimism, { testnet: true }),
     },
     {
         id: 11155420,
         name: "Optimism Sepolia",
-        logo: jsx(ChainIcons.Optimism, { testnet: true }),
+        logo: jsx(Chains.Optimism, { testnet: true }),
     },
     {
         id: 137,
         name: "Polygon",
-        logo: jsx(ChainIcons.Polygon, {}),
+        logo: jsx(Chains.Polygon, {}),
     },
     {
         id: 80001,
         name: "Polygon Mumbai",
-        logo: jsx(ChainIcons.Polygon, { testnet: true }),
+        logo: jsx(Chains.Polygon, { testnet: true }),
     },
     {
         id: 31337,
         name: "Hardhat",
-        logo: jsx(ChainIcons.Ethereum, { testnet: true }),
+        logo: jsx(Chains.Ethereum, { testnet: true }),
     },
     {
         id: 1337,
         name: "Localhost",
-        logo: jsx(ChainIcons.Ethereum, { testnet: true }),
+        logo: jsx(Chains.Ethereum, { testnet: true }),
     },
     {
         id: 42161,
         name: "Arbitrum",
-        logo: jsx(ChainIcons.Arbitrum, {}),
+        logo: jsx(Chains.Arbitrum, {}),
         rpcUrls: {
             alchemy: {
                 http: ["https://arb-mainnet.g.alchemy.com/v2"],
@@ -8454,12 +8406,12 @@ const chainConfigs = [
     {
         id: 421611,
         name: "Arbitrum Rinkeby",
-        logo: jsx(ChainIcons.Arbitrum, { testnet: true }),
+        logo: jsx(Chains.Arbitrum, { testnet: true }),
     },
     {
         id: 421613,
         name: "Arbitrum Goerli",
-        logo: jsx(ChainIcons.Arbitrum, { testnet: true }),
+        logo: jsx(Chains.Arbitrum, { testnet: true }),
         rpcUrls: {
             alchemy: {
                 http: ["https://arb-goerli.g.alchemy.com/v2"],
@@ -8474,292 +8426,190 @@ const chainConfigs = [
     {
         id: 40,
         name: "Telos",
-        logo: jsx(ChainIcons.Telos, {}),
+        logo: jsx(Chains.Telos, {}),
     },
     {
         id: 41,
         name: "Telos Testnet",
-        logo: jsx(ChainIcons.Telos, { testnet: true }),
+        logo: jsx(Chains.Telos, { testnet: true }),
     },
     {
         id: 1313161554,
         name: "Aurora",
-        logo: jsx(ChainIcons.Aurora, {}),
+        logo: jsx(Chains.Aurora, {}),
     },
     {
         id: 1313161555,
         name: "Aurora Testnet",
-        logo: jsx(ChainIcons.Aurora, { testnet: true }),
+        logo: jsx(Chains.Aurora, { testnet: true }),
     },
     {
         id: 43_114,
         name: "Avalanche",
-        logo: jsx(ChainIcons.Avalanche, {}),
+        logo: jsx(Chains.Avalanche, {}),
     },
     {
         id: 43_113,
         name: "Avalanche Fuji",
-        logo: jsx(ChainIcons.Avalanche, { testnet: true }),
+        logo: jsx(Chains.Avalanche, { testnet: true }),
     },
     {
         id: 31337,
         name: "Foundry",
-        logo: jsx(ChainIcons.Foundry, { testnet: true }),
+        logo: jsx(Chains.Foundry, { testnet: true }),
     },
     {
         id: 100,
         name: "Gnosis",
-        logo: jsx(ChainIcons.Gnosis, {}),
+        logo: jsx(Chains.Gnosis, {}),
     },
     {
         id: 9001,
         name: "Evmos",
-        logo: jsx(ChainIcons.Evmos, {}),
+        logo: jsx(Chains.Evmos, {}),
     },
     {
         id: 9000,
         name: "Evmos Testnet",
-        logo: jsx(ChainIcons.Evmos, { testnet: true }),
+        logo: jsx(Chains.Evmos, { testnet: true }),
     },
     {
         id: 56,
         name: "BNB Smart Chain",
-        logo: jsx(ChainIcons.BinanceSmartChain, {}),
+        logo: jsx(Chains.BinanceSmartChain, {}),
     },
     {
         id: 97,
         name: "Binance Smart Chain Testnet",
-        logo: jsx(ChainIcons.BinanceSmartChain, { testnet: true }),
+        logo: jsx(Chains.BinanceSmartChain, { testnet: true }),
     },
     {
         id: 11155111,
         name: "Sepolia",
-        logo: jsx(ChainIcons.Sepolia, {}),
+        logo: jsx(Chains.Sepolia, {}),
     },
     {
         id: 841,
         name: "Taraxa",
-        logo: jsx(ChainIcons.Taraxa, {}),
+        logo: jsx(Chains.Taraxa, {}),
     },
     {
         id: 842,
         name: "Taraxa Testnet",
-        logo: jsx(ChainIcons.Taraxa, { testnet: true }),
+        logo: jsx(Chains.Taraxa, { testnet: true }),
     },
     {
         id: 324,
         name: "zkSync",
-        logo: jsx(ChainIcons.zkSync, {}),
+        logo: jsx(Chains.zkSync, {}),
     },
     {
         id: 280,
         name: "zkSync Testnet",
-        logo: jsx(ChainIcons.zkSync, { testnet: true }),
+        logo: jsx(Chains.zkSync, { testnet: true }),
     },
     {
         id: 42_220,
         name: "Celo",
-        logo: jsx(ChainIcons.Celo, {}),
+        logo: jsx(Chains.Celo, {}),
     },
     {
         id: 44_787,
         name: "Celo Alfajores",
-        logo: jsx(ChainIcons.Celo, { testnet: true }),
+        logo: jsx(Chains.Celo, { testnet: true }),
     },
     {
         id: 7_700,
         name: "Canto",
-        logo: jsx(ChainIcons.Canto, {}),
+        logo: jsx(Chains.Canto, {}),
     },
     {
         id: 250,
         name: "Fantom",
-        logo: jsx(ChainIcons.Fantom, {}),
+        logo: jsx(Chains.Fantom, {}),
     },
     {
         id: 4_002,
         name: "Fantom Testnet",
-        logo: jsx(ChainIcons.Fantom, { testnet: true }),
+        logo: jsx(Chains.Fantom, { testnet: true }),
     },
     {
         id: 14,
         name: "Flare",
-        logo: jsx(ChainIcons.Flare, {}),
+        logo: jsx(Chains.Flare, {}),
     },
     {
         id: 114,
         name: "Coston2",
-        logo: jsx(ChainIcons.Flare, {}),
+        logo: jsx(Chains.Flare, {}),
     },
     {
         id: 314,
         name: "Filecoin",
-        logo: jsx(ChainIcons.Filecoin, {}),
+        logo: jsx(Chains.Filecoin, {}),
     },
     {
         id: 314_1,
         name: "Filecoin Hyperspace",
-        logo: jsx(ChainIcons.Filecoin, { testnet: true }),
+        logo: jsx(Chains.Filecoin, { testnet: true }),
     },
     {
         id: 314_159,
         name: "Filecoin Calibration",
-        logo: jsx(ChainIcons.Filecoin, { testnet: true }),
+        logo: jsx(Chains.Filecoin, { testnet: true }),
     },
     {
         id: 1_088,
         name: "Metis",
-        logo: jsx(ChainIcons.Metis, {}),
+        logo: jsx(Chains.Metis, {}),
     },
     {
         id: 599,
         name: "Metis Goerli",
-        logo: jsx(ChainIcons.Metis, { testnet: true }),
+        logo: jsx(Chains.Metis, { testnet: true }),
     },
     {
         id: 4_689,
         name: "IoTeX",
-        logo: jsx(ChainIcons.IoTeX, {}),
+        logo: jsx(Chains.IoTeX, {}),
     },
     {
         id: 4_690,
         name: "IoTeX Testnet",
-        logo: jsx(ChainIcons.IoTeX, { testnet: true }),
+        logo: jsx(Chains.IoTeX, { testnet: true }),
     },
     {
         id: 8_453,
         name: "Base",
-        logo: jsx(ChainIcons.Base, {}),
+        logo: jsx(Chains.Base, {}),
     },
     {
         id: 84_531,
         name: "Base Goerli",
-        logo: jsx(ChainIcons.Base, { testnet: true }),
+        logo: jsx(Chains.Base, { testnet: true }),
     },
     {
         id: 84_532,
         name: "Base Sepolia",
-        logo: jsx(ChainIcons.Base, { testnet: true }),
+        logo: jsx(Chains.Base, { testnet: true }),
     },
     {
         id: 7777777,
         name: "Zora",
-        logo: jsx(ChainIcons.Zora, {}),
+        logo: jsx(Chains.Zora, {}),
     },
     {
         id: 999999999,
         name: "Zora Sepolia",
-        logo: jsx(ChainIcons.Zora, { testnet: true }),
+        logo: jsx(Chains.Zora, { testnet: true }),
     },
     {
         id: 999,
         name: "Zora Goerli Testnet",
-        logo: jsx(ChainIcons.Zora, { testnet: true }),
+        logo: jsx(Chains.Zora, { testnet: true }),
     },
 ];
 
-const ChainContainer$1 = styled.div `
-  --bg: transparent;
-  --color: #333;
-  ${(props) => typeof props.size === "string"
-    ? css `
-          --width: ${props.size};
-          --height: ${props.size};
-        `
-    : css `
-          --width: ${props.size >= 0 ? `${props.size}px` : "24px"};
-          --height: ${props.size >= 0 ? `${props.size}px` : "24px"};
-        `};
-  ${(props) => typeof props.radius === "string"
-    ? css `
-          --radius: ${props.radius};
-        `
-    : css `
-          --radius: ${props.radius >= 0 ? `${props.radius}px` : "24px"};
-        `};
-  display: block;
-  position: relative;
-  width: var(--width);
-  height: var(--height);
-  min-width: var(--width);
-  min-height: var(--height);
-  border-radius: var(--radius);
-  background: var(--ck-body-background-secondary);
-  pointer-events: none;
-  user-select: none;
-  svg {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-  > div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-`;
-const LogoContainer$2 = styled(motion.div) `
-  display: block;
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  border-radius: inherit;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-`;
-const Spin = keyframes `
-  0%{ transform: rotate(0deg); }
-  100%{ transform: rotate(360deg); }
-`;
-const LoadingContainer$2 = styled(motion.div) `
-  position: absolute;
-  inset: 0;
-  animation: ${Spin} 1s linear infinite;
-  svg {
-    display: block;
-    position: absolute;
-    inset: 0;
-  }
-`;
-const Unsupported = styled(motion.div) `
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 40%;
-  height: 40%;
-  min-width: 13px;
-  min-height: 13px;
-  color: var(--ck-body-color-danger, red);
-  svg {
-    display: block;
-    position: relative;
-    top: -30%;
-    right: -30%;
-  }
-`;
-
-const Spinner$4 = (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z", fill: "url(#paint0_linear_1288_1870)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_1870", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0.7" }), jsx("stop", { offset: "1", stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0" })] }) })] }));
-const Chain = ({ id, unsupported: controlledUnsupported, radius = "50%", size = 24, }) => {
-    const isChainSupported = useChainIsSupported(id);
-    const unsupported = controlledUnsupported ?? !isChainSupported;
-    const chain = chainConfigs.find((c) => c.id === id);
-    const isMounted = useIsMounted();
-    if (!isMounted)
-        return (jsx("div", { style: {
-                width: size,
-                height: size,
-            } }));
-    return (jsx(ChainContainer$1, { size: size, radius: radius, children: jsxs(AnimatePresence, { initial: false, children: [unsupported && (jsx(Unsupported, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) })), id ? (jsx(LogoContainer$2, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: chain?.logo ?? jsx(ChainIcons.UnknownChain, {}) }, `${chain?.id}-${chain?.name}-${id}`)) : (jsx(LoadingContainer$2, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: Spinner$4 }, "loading"))] }) }));
-};
-
 const SwitchNetworksContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -8981,7 +8831,7 @@ const ChainButtonBg = styled(motion.div) `
   }
 `;
 
-const Spinner$3 = (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 16.75C2.69036 16.75 3.25 17.3096 3.25 18V19C3.25 26.5939 9.40609 32.75 17 32.75V35.25C8.02537 35.25 0.75 27.9746 0.75 19V18C0.75 17.3096 1.30964 16.75 2 16.75Z", fill: "url(#paint0_linear_1288_18701)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_18701", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-spinner-color)" }), jsx("stop", { offset: "1", stopColor: "var(--ck-spinner-color)", stopOpacity: "0" })] }) })] }));
+const Spinner$4 = (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 16.75C2.69036 16.75 3.25 17.3096 3.25 18V19C3.25 26.5939 9.40609 32.75 17 32.75V35.25C8.02537 35.25 0.75 27.9746 0.75 19V18C0.75 17.3096 1.30964 16.75 2 16.75Z", fill: "url(#paint0_linear_1288_18701)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_18701", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-spinner-color)" }), jsx("stop", { offset: "1", stopColor: "var(--ck-spinner-color)", stopOpacity: "0" })] }) })] }));
 const ChainSelectList = ({ variant, }) => {
     const { connector, chain } = useAccount();
     const { chains, isPending, switchChain, error } = useSwitchChain();
@@ -9010,422 +8860,68 @@ const ChainSelectList = ({ variant, }) => {
                                         justifyContent: "flex-start",
                                         gap: 12,
                                         color: ch.id === chain?.id
-                                            ? "var(--ck-dropdown-active-color, inherit)"
-                                            : "inherit",
-                                    }, children: [jsxs(ChainLogoContainer$1, { children: [jsx(ChainLogoSpinner, { initial: { opacity: 0 }, animate: {
-                                                        opacity: isPending && pendingChainId === ch.id ? 1 : 0,
-                                                    }, transition: {
-                                                        ease: [0.76, 0, 0.24, 1],
-                                                        duration: 0.15,
-                                                        delay: 0.1,
-                                                    }, children: jsx(motion.div, { animate: 
-                                                        // UI fix for Coinbase Wallet on mobile does not remove isPending on rejection event
-                                                        mobile &&
-                                                            isCoinbaseWalletConnector(connector?.id) &&
-                                                            isPending &&
-                                                            pendingChainId === ch.id
-                                                            ? {
-                                                                opacity: [1, 0],
-                                                                transition: { delay: 4, duration: 3 },
-                                                            }
-                                                            : { opacity: 1 }, children: Spinner$3 }, `${ch?.id}-${ch?.name}`) }), jsx(ChainIcon, { children: ch.logo ?? jsx(ChainIcons.UnknownChain, {}) })] }), ch.name] }), variant !== "secondary" && (jsx(ChainButtonStatus, { children: jsxs(AnimatePresence, { initial: false, exitBeforeEnter: true, children: [ch.id === chain?.id && (jsx(motion.span, { style: {
-                                                    color: "var(--ck-dropdown-active-color, var(--ck-focus-color))",
-                                                    display: "block",
-                                                    position: "relative",
-                                                }, initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: {
-                                                    opacity: 0,
-                                                    x: 4,
-                                                    transition: { duration: 0.1, delay: 0 },
-                                                }, transition: {
-                                                    ease: [0.76, 0, 0.24, 1],
-                                                    duration: 0.3,
-                                                    delay: 0.2,
-                                                }, children: locales.connected }, "connectedText")), isPending && pendingChainId === ch.id && (jsx(motion.span, { style: {
-                                                    color: "var(--ck-dropdown-pending-color, inherit)",
-                                                    display: "block",
-                                                    position: "relative",
-                                                }, initial: {
-                                                    opacity: 0,
-                                                    x: -4,
-                                                }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 4 }, transition: {
-                                                    ease: [0.76, 0, 0.24, 1],
-                                                    duration: 0.3,
-                                                    delay: 0.1,
-                                                }, children: jsx(motion.span, { animate: 
-                                                    // UI fix for Coinbase Wallet on mobile does not remove isLoading on rejection event
-                                                    mobile &&
-                                                        isCoinbaseWalletConnector(connector?.id) && {
-                                                        opacity: [1, 0],
-                                                        transition: { delay: 4, duration: 4 },
-                                                    }, children: locales.approveInWallet }) }, "approveText"))] }) })), variant === "secondary" ? (jsx(ChainButtonBg, { initial: false, animate: {
-                                        opacity: ch.id === chain?.id ? 1 : 0,
-                                    }, transition: {
-                                        duration: 0.3,
-                                        ease: "easeOut",
-                                    } })) : (
-                                //hover === ch.name && (
-                                ch.id === chain?.id && (jsx(ChainButtonBg, { layoutId: "activeChain", layout: "position", transition: {
-                                        duration: 0.3,
-                                        ease: "easeOut",
-                                    } })))] }, `${ch?.id}-${ch?.name}`));
-                    }) }) }), jsx(AnimatePresence, { children: isError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
-                        ease: [0.76, 0, 0.24, 1],
-                        duration: 0.3,
-                    }, onAnimationStart: triggerResize, onAnimationComplete: triggerResize, children: jsx("div", { style: { paddingTop: 10, paddingBottom: 8 }, children: jsxs(Alert, { children: [locales.warnings_walletSwitchingUnsupported, " ", locales.warnings_walletSwitchingUnsupportedResolve] }) }) })) })] }));
-};
-
-const DropdownWindow = styled(motion.div) `
-  z-index: 2147483647;
-  position: fixed;
-  inset: 0;
-`;
-const DropdownOverlay = styled(motion.div) `
-  position: absolute;
-  inset: 0;
-`;
-const DropdownContainer = styled(motion.div) `
-  --shadow: 0px 2px 15px rgba(0, 0, 0, 0.15);
-  --background: var(--ck-dropdown-background, var(--ck-tooltip-background));
-  --border-radius: var(
-    --ck-dropdown-border-radius,
-    var(--ck-tooltip-border-radius, 12px)
-  );
-
-  pointer-events: auto;
-  z-index: 2147483647;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  max-width: fit-content;
-  padding: 14px 16px 16px;
-  color: var(--ck-dropdown-color, var(--ck-tooltip-color));
-  background: var(--background);
-  box-shadow: var(
-    --ck-dropdown-box-shadow,
-    var(--ck-tooltip-shadow, var(--shadow))
-  );
-  border-radius: var(--border-radius);
-`;
-const DropdownHeading = styled(motion.div) `
-  padding: 0 0 6px;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 400;
-  user-select: none;
-  color: var(--ck-dropdown-color, var(--ck-tooltip-color));
-`;
-
-const ChainSelectDropdown = ({ children, open, onClose, offsetX = 0, offsetY = 8 }) => {
-    const context = useContext();
-    const themeContext = useThemeContext();
-    const locales = useLocales();
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
-    useLockBodyScroll(open);
-    const contentRef = useRef(null);
-    useEffect(() => {
-        const listener = (e) => {
-            if (!open)
-                return;
-            if (e.key === "Escape")
-                onClose();
-            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-                if (!contentRef.current)
-                    return;
-                e.preventDefault();
-                const focusableEls = contentRef.current?.querySelectorAll(`
-            a[href]:not(:disabled),
-            button:not(:disabled),
-            textarea:not(:disabled),
-            input[type="text"]:not(:disabled),
-            input[type="radio"]:not(:disabled),
-            input[type="checkbox"]:not(:disabled),
-            select:not(:disabled)
-          `), firstFocusableEl = focusableEls[0], lastFocusableEl = focusableEls[focusableEls.length - 1];
-                if (e.key === "ArrowUp") {
-                    if (document.activeElement === firstFocusableEl) {
-                        lastFocusableEl.focus();
-                    }
-                    else {
-                        let focusItem = document?.activeElement?.previousSibling;
-                        if (!focusItem)
-                            focusItem = lastFocusableEl;
-                        while (focusItem.disabled)
-                            focusItem = focusItem.previousSibling;
-                        focusItem.focus();
-                    }
-                }
-                else {
-                    if (document.activeElement === lastFocusableEl) {
-                        firstFocusableEl.focus();
-                    }
-                    else {
-                        let focusItem = document?.activeElement?.nextSibling;
-                        if (!focusItem)
-                            focusItem = firstFocusableEl;
-                        while (focusItem.disabled)
-                            focusItem = focusItem.nextSibling;
-                        focusItem.focus();
-                    }
-                }
-            }
-        };
-        document.addEventListener("keydown", listener);
-        return () => {
-            document.removeEventListener("keydown", listener);
-        };
-    }, [open]);
-    const targetRef = useRef(null);
-    const innerRef = useCallback((node) => {
-        if (!node)
-            return;
-        targetRef.current = node;
-        refresh();
-    }, [open]);
-    const [ref, bounds] = useMeasure({
-        debounce: 120, // waits until modal transition has finished before measuring
-        offsetSize: true,
-        scroll: true,
-    });
-    const refresh = () => {
-        if (!targetRef.current ||
-            bounds.top +
-                bounds.bottom +
-                bounds.left +
-                bounds.right +
-                bounds.height +
-                bounds.width ===
-                0) {
-            return;
-        }
-        let x = bounds.left + offsetX;
-        let y = bounds.top + bounds.height + offsetY;
-        targetRef.current.style.left = `${x}px`;
-        targetRef.current.style.top = `${y}px`;
-        /*
-        const contentRect = targetRef.current.getBoundingClientRect();
-    
-        const w = contentRect.width;
-        const h = contentRect.height;
-    
-        if (x + w > window.innerWidth) {
-          x = bounds.left + bounds.width - contentRect.width - offsetX;
-        }
-        if (y + h > window.innerHeight - 24) {
-          y = bounds.top - contentRect.height - offsetY;
-        }
-    
-        setOffset({
-          x: x,
-          y: y,
-        });
-        */
-    };
-    const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-    useIsomorphicLayoutEffect(refresh, [targetRef.current, bounds, open]);
-    useEffect(refresh, [open, targetRef.current]);
-    const onScroll = onClose;
-    const onResize = onClose;
-    useEffect(() => {
-        refresh();
-        window.addEventListener("scroll", onScroll);
-        window.addEventListener("resize", onResize);
-        return () => {
-            window.removeEventListener("scroll", onScroll);
-            window.removeEventListener("resize", onResize);
-        };
-    }, []);
-    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, children: children }), jsx(AnimatePresence, { children: open && (jsx(Portal, { children: jsx(ResetContainer, { "$useTheme": themeContext.theme ?? context.theme, "$useMode": themeContext.mode ?? context.mode, "$customTheme": themeContext.customTheme ?? context.customTheme, children: jsx(FocusTrap, { children: jsxs(DropdownWindow, { ref: contentRef, children: [jsx(DropdownOverlay, { onClick: onClose }), jsxs(DropdownContainer, { ref: innerRef, style: {
-                                            left: offset.x,
-                                            top: offset.y,
-                                        }, initial: "collapsed", animate: "open", exit: "collapsed", variants: {
-                                            collapsed: {
-                                                transformOrigin: "0 0",
-                                                opacity: 0,
-                                                scale: 0.96,
-                                                z: 0.01,
-                                                y: -4,
-                                                x: 0,
-                                                transition: {
-                                                    duration: 0.1,
-                                                },
-                                            },
-                                            open: {
-                                                transformOrigin: "0 0",
-                                                willChange: "opacity,transform",
-                                                opacity: 1,
-                                                scale: 1,
-                                                z: 0.01,
-                                                y: 0,
-                                                x: 0,
-                                                transition: {
-                                                    ease: [0.76, 0, 0.24, 1],
-                                                    duration: 0.15,
-                                                },
-                                            },
-                                        }, children: [jsx(DropdownHeading, { children: locales.switchNetworks }), jsx(ChainSelectList, {})] })] }) }) }) })) })] }));
-};
-
-const Container$3 = styled(motion.div) ``;
-const SwitchChainButton = styled(motion.button) `
-  --color: var(
-    --ck-dropdown-button-color,
-    var(--ck-button-primary-color, var(--ck-body-color))
-  );
-  --background: var(
-    --ck-dropdown-button-background,
-    var(--ck-secondary-button-background, var(--ck-body-background-secondary))
-  );
-  --box-shadow: var(
-    --ck-dropdown-button-box-shadow,
-    var(
-      --ck-secondary-button-box-shadow,
-      var(--ck-button-primary-box-shadow),
-      none
-    )
-  );
-
-  --hover-color: var(--ck-dropdown-button-hover-color, var(--color));
-  --hover-background: var(
-    --ck-dropdown-button-hover-background,
-    var(--background)
-  );
-  --hover-box-shadow: var(
-    --ck-dropdown-button-hover-box-shadow,
-    var(--box-shadow)
-  );
-
-  --active-color: var(--ck-dropdown-button-active-color, var(--hover-color));
-  --active-background: var(
-    --ck-dropdown-button-active-background,
-    var(--hover-background)
-  );
-  --active-box-shadow: var(
-    --ck-dropdown-button-active-box-shadow,
-    var(--hover-box-shadow)
-  );
-
-  appearance: none;
-  user-select: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 15px;
-  width: 52px;
-  height: 30px;
-  padding: 2px 6px 2px 3px;
-  font-size: 16px;
-  line-height: 19px;
-  font-weight: 500;
-  text-decoration: none;
-  white-space: nowrap;
-  transform: translateZ(0px);
-
-  transition: 100ms ease;
-  transition-property: transform, background-color, box-shadow, color;
-
-  color: var(--color);
-  background: var(--background);
-  box-shadow: var(--box-shadow);
-
-  svg {
-    position: relative;
-    display: block;
-  }
-
-  ${(props) => props.disabled
-    ? css `
-          width: auto;
-          padding: 3px;
-          position: relative;
-          left: -22px;
-        `
-    : css `
-          cursor: pointer;
-
-          @media only screen and (min-width: ${defaultTheme.mobileWidth +
-        1}px) {
-            &:hover,
-            &:focus-visible {
-              color: var(--hover-color);
-              background: var(--hover-background);
-              box-shadow: var(--hover-box-shadow);
-            }
-            &:active {
-              color: var(--active-color);
-              background: var(--active-background);
-              box-shadow: var(--active-box-shadow);
-            }
-          }
-        `}
-`;
-const ChevronDown = ({ ...props }) => (jsx("svg", { "aria-hidden": "true", width: "11", height: "6", viewBox: "0 0 11 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M1.5 1L5.5 5L9.5 1", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const ChainSelector = () => {
-    const context = useContext();
-    const [isOpen, setIsOpen] = useState(false);
-    const { chain } = useAccount();
-    const { chains } = useSwitchChain();
-    const locales = useLocales({
-        CHAIN: chain?.name,
-    });
-    const mobile = isMobile() || window?.innerWidth < defaultTheme.mobileWidth;
-    useEffect(() => {
-        if (!context.open)
-            setIsOpen(false);
-    }, [context.open]);
-    const disabled = chains.length <= 1;
-    return (jsx(Fragment, { children: jsx(Container$3, { children: jsx(ChainSelectDropdown, { offsetX: -12, open: !mobile && isOpen, onClose: () => setIsOpen(false), children: jsxs(SwitchChainButton, { "aria-label": flattenChildren(locales.switchNetworks).toString(), disabled: disabled, onClick: () => {
-                        if (mobile) {
-                            context.setRoute(ROUTES.SWITCHNETWORKS);
-                        }
-                        else {
-                            setIsOpen(!isOpen);
-                        }
-                    }, children: [disabled ? (jsx(Tooltip, { message: locales.chainNetwork, xOffset: -6, delay: 0.01, children: jsx(Chain, { id: chain?.id }) })) : (jsx(Chain, { id: chain?.id })), !disabled && jsx(ChevronDown, { style: { top: 1, left: -3 } })] }) }) }) }));
-};
-
-const Profile = ({ closeModal }) => {
-    const context = useContext();
-    const themeContext = useThemeContext();
-    const locales = useLocales();
-    const { reset } = useConnect$1();
-    const { disconnect } = useDisconnect();
-    const { address, isConnected, connector, chain } = useAccount();
-    const ensFallbackConfig = useEnsFallbackConfig();
-    const { data: ensName } = useEnsName({
-        chainId: 1,
-        address: address,
-        config: ensFallbackConfig,
-    });
-    const { data: balance } = useBalance({
-        address,
-        //watch: true,
-    });
-    const [shouldDisconnect, setShouldDisconnect] = useState(false);
-    useEffect(() => {
-        if (!isConnected)
-            context.setOpen(false);
-    }, [isConnected]);
-    useEffect(() => {
-        if (!shouldDisconnect)
-            return;
-        // Close before disconnecting to avoid layout shifting while modal is still open
-        if (closeModal) {
-            closeModal();
-        }
-        else {
-            context.setOpen(false);
-        }
-        return () => {
-            disconnect();
-            reset();
-        };
-    }, [shouldDisconnect, disconnect, reset]);
-    const separator = ["web95", "rounded", "minimal"].includes(themeContext.theme ?? context.theme ?? "")
-        ? "...."
-        : undefined;
-    return (jsxs(PageContent, { children: [jsxs(ModalContent, { style: { paddingBottom: 22, gap: 6 }, children: [jsx(AvatarContainer, { children: jsxs(AvatarInner, { children: [jsx(ChainSelectorContainer, { children: jsx(ChainSelector, {}) }), jsx(Avatar, { address: address })] }) }), jsx(ModalH1, { children: jsx(CopyToClipboard, { string: address, children: ensName ?? truncateEthAddress(address, separator) }) }), context?.options?.hideBalance ? null : (jsx(ModalBody, { children: jsx(BalanceContainer, { children: jsxs(AnimatePresence, { exitBeforeEnter: true, initial: false, children: [balance && (jsxs(Balance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: [nFormatter(Number(balance?.formatted)), ` `, balance?.symbol] }, `chain-${chain?.id}`)), !balance && (jsx(LoadingBalance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: "\u00A0" }))] }) }) }))] }), !isSafeConnector(connector?.id) && (jsx(Button, { onClick: () => setShouldDisconnect(true), icon: jsx(DisconnectIcon, {}), children: locales.disconnect }))] }));
+                                            ? "var(--ck-dropdown-active-color, inherit)"
+                                            : "inherit",
+                                    }, children: [jsxs(ChainLogoContainer$1, { children: [jsx(ChainLogoSpinner, { initial: { opacity: 0 }, animate: {
+                                                        opacity: isPending && pendingChainId === ch.id ? 1 : 0,
+                                                    }, transition: {
+                                                        ease: [0.76, 0, 0.24, 1],
+                                                        duration: 0.15,
+                                                        delay: 0.1,
+                                                    }, children: jsx(motion.div, { animate: 
+                                                        // UI fix for Coinbase Wallet on mobile does not remove isPending on rejection event
+                                                        mobile &&
+                                                            isCoinbaseWalletConnector(connector?.id) &&
+                                                            isPending &&
+                                                            pendingChainId === ch.id
+                                                            ? {
+                                                                opacity: [1, 0],
+                                                                transition: { delay: 4, duration: 3 },
+                                                            }
+                                                            : { opacity: 1 }, children: Spinner$4 }, `${ch?.id}-${ch?.name}`) }), jsx(ChainIcon, { children: ch.logo ?? jsx(Chains.UnknownChain, {}) })] }), ch.name] }), variant !== "secondary" && (jsx(ChainButtonStatus, { children: jsxs(AnimatePresence, { initial: false, exitBeforeEnter: true, children: [ch.id === chain?.id && (jsx(motion.span, { style: {
+                                                    color: "var(--ck-dropdown-active-color, var(--ck-focus-color))",
+                                                    display: "block",
+                                                    position: "relative",
+                                                }, initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: {
+                                                    opacity: 0,
+                                                    x: 4,
+                                                    transition: { duration: 0.1, delay: 0 },
+                                                }, transition: {
+                                                    ease: [0.76, 0, 0.24, 1],
+                                                    duration: 0.3,
+                                                    delay: 0.2,
+                                                }, children: locales.connected }, "connectedText")), isPending && pendingChainId === ch.id && (jsx(motion.span, { style: {
+                                                    color: "var(--ck-dropdown-pending-color, inherit)",
+                                                    display: "block",
+                                                    position: "relative",
+                                                }, initial: {
+                                                    opacity: 0,
+                                                    x: -4,
+                                                }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 4 }, transition: {
+                                                    ease: [0.76, 0, 0.24, 1],
+                                                    duration: 0.3,
+                                                    delay: 0.1,
+                                                }, children: jsx(motion.span, { animate: 
+                                                    // UI fix for Coinbase Wallet on mobile does not remove isLoading on rejection event
+                                                    mobile &&
+                                                        isCoinbaseWalletConnector(connector?.id) && {
+                                                        opacity: [1, 0],
+                                                        transition: { delay: 4, duration: 4 },
+                                                    }, children: locales.approveInWallet }) }, "approveText"))] }) })), variant === "secondary" ? (jsx(ChainButtonBg, { initial: false, animate: {
+                                        opacity: ch.id === chain?.id ? 1 : 0,
+                                    }, transition: {
+                                        duration: 0.3,
+                                        ease: "easeOut",
+                                    } })) : (
+                                //hover === ch.name && (
+                                ch.id === chain?.id && (jsx(ChainButtonBg, { layoutId: "activeChain", layout: "position", transition: {
+                                        duration: 0.3,
+                                        ease: "easeOut",
+                                    } })))] }, `${ch?.id}-${ch?.name}`));
+                    }) }) }), jsx(AnimatePresence, { children: isError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+                        ease: [0.76, 0, 0.24, 1],
+                        duration: 0.3,
+                    }, onAnimationStart: triggerResize, onAnimationComplete: triggerResize, children: jsx("div", { style: { paddingTop: 10, paddingBottom: 8 }, children: jsxs(Alert, { children: [locales.warnings_walletSwitchingUnsupported, " ", locales.warnings_walletSwitchingUnsupportedResolve] }) }) })) })] }));
 };
 
 const SwitchNetworks = () => {
@@ -9567,7 +9063,7 @@ const RetryIconContainer = styled(motion.div) `
   }
 `;
 
-const LogoContainer$1 = styled(motion.div) `
+const LogoContainer$2 = styled(motion.div) `
   z-index: 4;
   position: relative;
   overflow: hidden;
@@ -9597,7 +9093,7 @@ const SpinnerContainer$1 = styled(motion.div) `
   inset: 1px;
   overflow: hidden;
 `;
-const Spinner$2 = styled(motion.div) `
+const Spinner$3 = styled(motion.div) `
   pointer-events: none;
   user-select: none;
   z-index: 1;
@@ -9628,8 +9124,8 @@ const Spinner$2 = styled(motion.div) `
   }
 `;
 
-const SquircleSpinner = ({ logo, connecting = true, }) => {
-    return (jsxs(LogoContainer$1, { transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: [jsx(Logo$1, { children: logo }), jsx(SpinnerContainer$1, { children: jsx(AnimatePresence, { children: connecting && (jsx(Spinner$2, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: {
+const SquircleSpinner = ({ logo, loading = true, }) => {
+    return (jsxs(LogoContainer$2, { transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: [jsx(Logo$1, { children: logo }), jsx(SpinnerContainer$1, { children: jsx(AnimatePresence, { children: loading && (jsx(Spinner$3, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: {
                             opacity: 0,
                             transition: {
                                 duration: 0,
@@ -9681,7 +9177,7 @@ const BrowserIcon = React.forwardRef(({ browser }, ref) => {
 });
 BrowserIcon.displayName = "BrowserIcon";
 
-const LogoContainer = styled(motion.div) `
+const LogoContainer$1 = styled(motion.div) `
   z-index: 4;
   position: relative;
   width: 100px;
@@ -9768,7 +9264,7 @@ const ExpiringSpinner = styled(motion.div) `
     }
   }
 `;
-const Spinner$1 = styled(motion.div) `
+const Spinner$2 = styled(motion.div) `
   pointer-events: none;
   user-select: none;
   z-index: 1;
@@ -9793,8 +9289,8 @@ const Spinner$1 = styled(motion.div) `
   }
 `;
 
-const CircleSpinner = ({ logo, smallLogo, connecting = true, unavailable = false, countdown = false, }) => {
-    return (jsxs(LogoContainer, { transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: [jsx(Logo, { "$small": !unavailable && smallLogo, style: unavailable ? { borderRadius: 0 } : undefined, children: logo }), jsx(SpinnerContainer, { children: jsxs(AnimatePresence, { children: [connecting && (jsx(Spinner$1, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: {
+const CircleSpinner = ({ logo, smallLogo, loading = true, unavailable = false, countdown = false, }) => {
+    return (jsxs(LogoContainer$1, { transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: [jsx(Logo, { "$small": !unavailable && smallLogo, style: unavailable ? { borderRadius: 0 } : undefined, children: logo }), jsx(SpinnerContainer, { children: jsxs(AnimatePresence, { children: [loading && (jsx(Spinner$2, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: {
                                 opacity: 0,
                                 transition: {
                                     duration: countdown ? 1 : 0,
@@ -9973,11 +9469,11 @@ const ConnectWithInjector = ({ switchConnectMethod, forceState }) => {
                                         transform: "scale(1.14)",
                                         position: "relative",
                                         width: "100%",
-                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), smallLogo: walletInfo.iconShouldShrink, connecting: status === states$1.CONNECTING, unavailable: status === states$1.UNAVAILABLE })) : (jsx(SquircleSpinner, { logo: status === states$1.UNAVAILABLE ? (jsx("div", { style: {
+                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), smallLogo: walletInfo.iconShouldShrink, loading: status === states$1.CONNECTING, unavailable: status === states$1.UNAVAILABLE })) : (jsx(SquircleSpinner, { logo: status === states$1.UNAVAILABLE ? (jsx("div", { style: {
                                         transform: "scale(1.14)",
                                         position: "relative",
                                         width: "100%",
-                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), connecting: status === states$1.CONNECTING }))] }) }), jsx(ModalContentContainer, { children: jsxs(AnimatePresence, { initial: false, children: [status === states$1.FAILED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$error": true, children: [jsx(AlertIcon, {}), locales.injectionScreen_failed_h1] }), jsx(ModalBody, { children: locales.injectionScreen_failed_p })] }) }, states$1.FAILED)), status === states$1.REJECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: locales.injectionScreen_rejected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] }) }, states$1.REJECTED)), (status === states$1.CONNECTING || status === states$1.EXPIRING) && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: wallet.connector.id === "injected"
+                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), loading: status === states$1.CONNECTING }))] }) }), jsx(ModalContentContainer, { children: jsxs(AnimatePresence, { initial: false, children: [status === states$1.FAILED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$error": true, children: [jsx(AlertIcon, {}), locales.injectionScreen_failed_h1] }), jsx(ModalBody, { children: locales.injectionScreen_failed_p })] }) }, states$1.FAILED)), status === states$1.REJECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: locales.injectionScreen_rejected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] }) }, states$1.REJECTED)), (status === states$1.CONNECTING || status === states$1.EXPIRING) && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: wallet.connector.id === "injected"
                                                 ? locales.injectionScreen_connecting_injected_h1
                                                 : locales.injectionScreen_connecting_h1 }), jsx(ModalBody, { children: wallet.connector.id === "injected"
                                                 ? locales.injectionScreen_connecting_injected_p
@@ -10178,9 +9674,9 @@ const Confirmation = () => {
                 justifyContent: "center",
                 alignItems: "center",
                 paddingBottom: 0,
-            }, children: [jsx(AnimationContainer$2, { children: jsxs(InsetContainer, { children: [jsx(Spinner, { "$status": done }), jsx(SuccessIcon, { "$status": done })] }) }), !done ? (jsx(ModalH1, { children: "Confirming..." })) : (jsx(ModalH1, { children: jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: "Payment completed" }) })), jsx(PoweredByFooter, {})] }) }));
+            }, children: [jsx(AnimationContainer$4, { children: jsxs(InsetContainer, { children: [jsx(Spinner$1, { "$status": done }), jsx(SuccessIcon, { "$status": done })] }) }), !done ? (jsx(ModalH1, { children: "Confirming..." })) : (jsx(ModalH1, { children: jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: "Payment completed" }) })), jsx(PoweredByFooter, {})] }) }));
 };
-const AnimationContainer$2 = styled(motion.div) `
+const AnimationContainer$4 = styled(motion.div) `
   position: relative;
   width: 100px;
   height: 100px;
@@ -10219,7 +9715,7 @@ const SuccessIcon = styled(TickIcon) `
   opacity: ${(props) => (props.$status ? 1 : 0)};
   transform: ${(props) => (props.$status ? "scale(1)" : "scale(0.5)")};
 `;
-const Spinner = styled(LoadingCircleIcon) `
+const Spinner$1 = styled(LoadingCircleIcon) `
   position: absolute;
   transition: all 0.2s ease-in-out;
   animation: rotateSpinner 400ms linear infinite;
@@ -10236,17 +9732,17 @@ const Spinner = styled(LoadingCircleIcon) `
   }
 `;
 
-var PayState;
+var PayState$1;
 (function (PayState) {
     PayState["RequestingPayment"] = "Requesting Payment";
     PayState["SwitchingChain"] = "Switching Chain";
     PayState["RequestCancelled"] = "Payment Cancelled";
     PayState["RequestSuccessful"] = "Payment Successful";
-})(PayState || (PayState = {}));
+})(PayState$1 || (PayState$1 = {}));
 const PayWithToken = () => {
     const { triggerResize, paymentInfo, setRoute, log } = useContext();
     const { selectedTokenOption, payWithToken } = paymentInfo;
-    const [payState, setPayState] = useState(PayState.RequestingPayment);
+    const [payState, setPayState] = useState(PayState$1.RequestingPayment);
     const walletChainId = useChainId();
     const { switchChainAsync } = useSwitchChain();
     const trySwitchingChain = async (option, forceSwitch = false) => {
@@ -10270,17 +9766,17 @@ const PayWithToken = () => {
     };
     const handleTransfer = async (option) => {
         // Switch chain if necessary
-        setPayState(PayState.SwitchingChain);
+        setPayState(PayState$1.SwitchingChain);
         const switchChain = await trySwitchingChain(option);
         if (!switchChain) {
             console.error("Switching chain failed");
-            setPayState(PayState.RequestCancelled);
+            setPayState(PayState$1.RequestCancelled);
             return;
         }
-        setPayState(PayState.RequestingPayment);
+        setPayState(PayState$1.RequestingPayment);
         try {
             await payWithToken(option.required);
-            setPayState(PayState.RequestSuccessful);
+            setPayState(PayState$1.RequestSuccessful);
             setTimeout(() => {
                 setRoute(ROUTES.CONFIRMATION);
             }, 200);
@@ -10302,7 +9798,7 @@ const PayWithToken = () => {
                     }
                 }
             }
-            setPayState(PayState.RequestCancelled);
+            setPayState(PayState$1.RequestCancelled);
             console.error("Failed to pay with token", e);
         }
     };
@@ -10321,17 +9817,17 @@ const PayWithToken = () => {
     useEffect(() => {
         triggerResize();
     }, [payState]);
-    return (jsxs(PageContent, { children: [jsx(LoadingContainer$1, { children: jsx(AnimationContainer$1, { "$circle": true, children: jsxs(AnimatePresence, { children: [jsx(ChainLogoContainer, { children: selectedTokenOption &&
-                                    chainToLogo[selectedTokenOption.required.token.chainId] }, "ChainLogoContainer"), jsx(CircleSpinner, { logo: jsx("img", { src: selectedTokenOption?.required.token.logoURI, alt: selectedTokenOption?.required.token.symbol }, selectedTokenOption?.required.token.logoURI), connecting: true, unavailable: false }, "CircleSpinner")] }) }) }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { children: payState }), payState === PayState.RequestCancelled && (jsx(Button, { onClick: () => selectedTokenOption ? handleTransfer(selectedTokenOption) : null, children: "Retry Payment" }))] })] }));
+    return (jsxs(PageContent, { children: [jsx(LoadingContainer$3, { children: jsx(AnimationContainer$3, { "$circle": true, children: jsxs(AnimatePresence, { children: [jsx(ChainLogoContainer, { children: selectedTokenOption &&
+                                    chainToLogo[selectedTokenOption.required.token.chainId] }, "ChainLogoContainer"), jsx(CircleSpinner, { logo: jsx("img", { src: selectedTokenOption?.required.token.logoURI, alt: selectedTokenOption?.required.token.symbol }, selectedTokenOption?.required.token.logoURI), loading: true, unavailable: false }, "CircleSpinner")] }) }) }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { children: payState }), payState === PayState$1.RequestCancelled && (jsx(Button, { onClick: () => selectedTokenOption ? handleTransfer(selectedTokenOption) : null, children: "Retry Payment" }))] })] }));
 };
-const LoadingContainer$1 = styled(motion.div) `
+const LoadingContainer$3 = styled(motion.div) `
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 10px auto 16px;
   height: 120px;
 `;
-const AnimationContainer$1 = styled(motion.div) `
+const AnimationContainer$3 = styled(motion.div) `
   user-select: none;
   position: relative;
   --spinner-error-opacity: 0;
@@ -10641,6 +10137,29 @@ const IconStackItem = styled(motion.div) `
   border-radius: 22.5%;
 `;
 
+const SelectDepositAddressChain = () => {
+    const { setRoute, paymentInfo } = useContext();
+    const { setSelectedDepositAddressOption, depositAddressOptions } = paymentInfo;
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !depositAddressOptions.loading &&
+                depositAddressOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                }, children: [jsx(ModalH1, { children: "Chains unavailable." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: depositAddressOptions.loading, options: depositAddressOptions.options?.map((option) => {
+                    return {
+                        id: option.id,
+                        title: option.id,
+                        icons: [option.logoURI],
+                        onClick: () => {
+                            setSelectedDepositAddressOption(option);
+                            setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS);
+                        },
+                    };
+                }) ?? [] })] }));
+};
+
 // Get 3 icons, skipping the one that is already connected
 function getBestUnconnectedWalletIcons(connector) {
     const icons = [];
@@ -10660,12 +10179,42 @@ function getBestUnconnectedWalletIcons(connector) {
         icons.push(jsx(Rabby, {}));
     return icons;
 }
+function getSolanaOption() {
+    const { wallets } = useWallet$1();
+    const { setRoute } = useContext();
+    if (wallets.length === 0)
+        return null;
+    return {
+        id: "solana",
+        title: "Pay on Solana",
+        icons: [jsx(Solana, {})],
+        onClick: () => {
+            setRoute(ROUTES.SOLANA_CONNECT);
+        },
+    };
+}
+function getDepositAddressOption(depositAddressOptions) {
+    const { setRoute } = useContext();
+    console.log(`[SELECT_METHOD] depositAddressOptions: ${JSON.stringify(depositAddressOptions)}`);
+    if (!depositAddressOptions.loading &&
+        depositAddressOptions.options.length === 0)
+        return null;
+    return {
+        id: "depositAddress",
+        title: "Pay on another chain",
+        subtitle: "Bitcoin, Tron, Zcash...",
+        icons: [jsx(Bitcoin, {}), jsx(Tron, {}), jsx(Zcash, {})],
+        onClick: () => {
+            setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+        },
+    };
+}
 const SelectMethod = () => {
     const isMobile = useIsMobile();
     const { address, isConnected, connector } = useAccount();
     const { disconnectAsync } = useDisconnect();
     const { setRoute, paymentInfo, log } = useContext();
-    const { setSelectedExternalOption, externalPaymentOptions, senderEnsName } = paymentInfo;
+    const { setSelectedExternalOption, externalPaymentOptions, depositAddressOptions, senderEnsName, } = paymentInfo;
     const displayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
     const connectedWalletOption = isConnected
         ? {
@@ -10690,31 +10239,36 @@ const SelectMethod = () => {
         ? [connectedWalletOption, unconnectedWalletOption]
         : [unconnectedWalletOption];
     log(`[SELECT_METHOD] loading: ${externalPaymentOptions.loading}, options: ${JSON.stringify(externalPaymentOptions.options)}`);
-    return (jsxs(PageContent, { children: [jsx(OrderHeader, {}), jsx(OptionsList, { requiredSkeletons: isMobile ? 4 : 3, isLoading: externalPaymentOptions.loading, options: [
-                    ...walletOptions,
-                    ...(externalPaymentOptions.options ?? []).map((option) => ({
-                        id: option.id,
-                        title: option.cta,
-                        icons: [option.logoURI],
-                        onClick: () => {
-                            setSelectedExternalOption(option);
-                            setRoute(ROUTES.WAITING_OTHER);
-                        },
-                    })),
-                ] }), jsx(PoweredByFooter, {})] }));
+    const solanaOption = getSolanaOption();
+    const depositAddressOption = getDepositAddressOption(depositAddressOptions);
+    const options = [
+        ...walletOptions,
+        ...(solanaOption ? [solanaOption] : []),
+        ...(externalPaymentOptions.options ?? []).map((option) => ({
+            id: option.id,
+            title: option.cta,
+            icons: [option.logoURI],
+            onClick: () => {
+                setSelectedExternalOption(option);
+                setRoute(ROUTES.WAITING_OTHER);
+            },
+        })),
+        ...(depositAddressOption ? [depositAddressOption] : []),
+    ];
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, {}), jsx(OptionsList, { requiredSkeletons: isMobile ? 4 : 3, isLoading: externalPaymentOptions.loading, options: externalPaymentOptions.loading ? [] : options }), jsx(PoweredByFooter, {})] }));
 };
 
 function getDaimoTokenKey(token) {
     return `${token.chainId}-${token.token}`;
 }
 const TokenChainLogo = ({ token }) => {
-    return (jsxs(TokenChainContainer, { children: [jsx("img", { src: token.logoURI, alt: token.symbol, style: { borderRadius: 9999 } }), jsx(ChainContainer, { children: chainToLogo[token.chainId] })] }));
+    return (jsxs(TokenChainContainer, { children: [jsx("img", { src: token.logoURI, alt: token.symbol, style: { borderRadius: 9999 } }), jsx(ChainContainer$1, { children: chainToLogo[token.chainId] })] }));
 };
 const TokenChainContainer = styled(motion.div) `
   width: 100%;
   height: 100%;
 `;
-const ChainContainer = styled(motion.div) `
+const ChainContainer$1 = styled(motion.div) `
   position: absolute;
   width: 16px;
   height: 16px;
@@ -10733,7 +10287,7 @@ const SelectToken = () => {
                     justifyContent: "center",
                     paddingTop: 16,
                     paddingBottom: 16,
-                }, children: [jsx(ModalH1, { children: "Insufficient balance. Please select an alternative payment method." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: walletPaymentOptions.isLoading, options: walletPaymentOptions.options?.map((option) => {
+                }, 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: walletPaymentOptions.options?.map((option) => {
                     const capitalizedChainName = capitalize(getChainName(option.required.token.chainId));
                     const title = `${getDisplayPrice(option.required)} ${option.required.token.symbol} on ${capitalizedChainName}`;
                     const subtitle = `Balance: ${getDisplayPrice(option.balance)} ${option.balance.token.symbol}`;
@@ -10789,48 +10343,243 @@ const WaitingOther = () => {
     }
     const optionSpinner = (() => {
         if (selectedExternalOption.logoShape === "circle") {
-            return (jsx(CircleSpinner, { logo: jsx("img", { src: selectedExternalOption.logoURI }), connecting: true, unavailable: false }));
+            return (jsx(CircleSpinner, { logo: jsx("img", { src: selectedExternalOption.logoURI }), loading: true, unavailable: false }));
         }
         else {
-            return (jsx(SquircleSpinner, { logo: jsx("img", { src: selectedExternalOption.logoURI }), connecting: true }));
+            return (jsx(SquircleSpinner, { logo: jsx("img", { src: selectedExternalOption.logoURI }), loading: true }));
         }
     })();
-    return (jsxs(PageContent, { children: [jsx(LoadingContainer, { children: jsx(AnimationContainer, { "$circle": selectedExternalOption.logoShape === "circle", children: jsx(AnimatePresence, { children: optionSpinner }) }) }), jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [jsx(ModalH1, { children: "Waiting for Payment" }), paymentWaitingMessage && (jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage })), jsx(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: () => {
+    return (jsxs(PageContent, { children: [jsx(LoadingContainer$2, { children: jsx(AnimationContainer$2, { "$circle": selectedExternalOption.logoShape === "circle", children: jsx(AnimatePresence, { children: optionSpinner }) }) }), jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [jsx(ModalH1, { children: "Waiting for Payment" }), paymentWaitingMessage && (jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage })), jsx(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: () => {
                             if (externalURL)
                                 window.open(externalURL, "_blank");
                         }, children: "Open in New Tab" })] })] }));
 };
-const LoadingContainer = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 10px auto 16px;
-  height: 120px;
-`;
-const AnimationContainer = styled(motion.div) `
-  user-select: none;
-  position: relative;
-  --spinner-error-opacity: 0;
-  &:before {
-    content: "";
-    position: absolute;
-    inset: 1px;
-    opacity: 0;
-    background: var(--ck-body-color-danger);
-    ${(props) => props.$circle &&
-    css `
-        inset: -5px;
-        border-radius: 50%;
-        background: none;
-        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
-      `}
-  }
-`;
+const LoadingContainer$2 = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
+`;
+const AnimationContainer$2 = styled(motion.div) `
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+    ${(props) => props.$circle &&
+    css `
+        inset: -5px;
+        border-radius: 50%;
+        background: none;
+        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
+      `}
+  }
+`;
+
+const ConnectSolana$1 = () => {
+    const solanaWallets = useWallet$1();
+    const isConnected = solanaWallets.connected;
+    const { solanaConnector, setRoute } = useContext();
+    const selectedWallet = solanaWallets.wallets.find((wallet) => wallet.adapter.name === solanaConnector);
+    useEffect(() => {
+        if (!solanaConnector)
+            return;
+        solanaWallets.select(solanaConnector);
+    }, [solanaConnector]);
+    useEffect(() => {
+        if (isConnected) {
+            // Wait so user can see it's connected
+            setTimeout(() => setRoute(ROUTES.SOLANA_SELECT_TOKEN), 500);
+        }
+    }, [isConnected]);
+    if (!solanaConnector)
+        return null;
+    return (jsxs(PageContent, { children: [jsx(LoadingContainer$2, { children: jsx(AnimationContainer$1, { children: jsx(AnimatePresence, { children: jsx(SquircleSpinner, { logo: jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: jsx("img", { src: selectedWallet?.adapter.icon, alt: selectedWallet?.adapter.name }) }), loading: true }) }) }) }), jsx(ModalContent, { style: { paddingBottom: 0 }, children: isConnected ? (jsx(ModalH1, { children: "Connected" })) : (jsxs(Fragment, { children: [jsx(ModalH1, { children: "Requesting Connection" }), jsxs(ModalBody, { children: ["Open ", selectedWallet?.adapter.name, " to continue."] })] })) })] }));
+};
+const AnimationContainer$1 = styled(motion.div) `
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+  }
+`;
+
+const ConnectSolana = () => {
+    const { setSolanaConnector, setRoute } = useContext();
+    const solanaWallets = useWallet$1();
+    const options = solanaWallets.wallets.map((wallet) => ({
+        id: wallet.adapter.name,
+        title: `${wallet.adapter.name}`,
+        icons: [
+            jsx(SquircleIcon, { icon: wallet.adapter.icon, alt: wallet.adapter.name }),
+        ],
+        onClick: async () => {
+            setSolanaConnector(wallet.adapter.name);
+            if (solanaWallets.connected) {
+                await solanaWallets.disconnect();
+            }
+            setRoute(ROUTES.SOLANA_CONNECTOR);
+        },
+    }));
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), solanaWallets.wallets.length === 0 && (jsxs(ModalContent, { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                }, children: [jsx(ModalH1, { children: "No Solana wallets detected." }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })), jsx(OptionsList, { options: options })] }));
+};
+const SquircleIcon = ({ icon, alt }) => (jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: jsx("img", { src: icon, alt: alt }) }));
+
+var PayState;
+(function (PayState) {
+    PayState["RequestingPayment"] = "Requesting Payment";
+    PayState["RequestCancelled"] = "Payment Cancelled";
+    PayState["RequestFailed"] = "Payment Failed";
+    PayState["RequestSuccessful"] = "Payment Successful";
+})(PayState || (PayState = {}));
+const PayWithSolanaToken = () => {
+    const { triggerResize, paymentInfo, setRoute } = useContext();
+    const { selectedSolanaTokenOption, payWithSolanaToken } = paymentInfo;
+    const [payState, setPayState] = useState(PayState.RequestingPayment);
+    const handleTransfer = async () => {
+        try {
+            setPayState(PayState.RequestingPayment);
+            assert(!!selectedSolanaTokenOption, "No token option selected");
+            await payWithSolanaToken(selectedSolanaTokenOption.required.token.token);
+            setPayState(PayState.RequestSuccessful);
+            setTimeout(() => {
+                setRoute(ROUTES.CONFIRMATION);
+            }, 200);
+        }
+        catch (error) {
+            console.error(error);
+            if (error instanceof WalletSignTransactionError) {
+                setPayState(PayState.RequestCancelled);
+            }
+            else {
+                setPayState(PayState.RequestFailed);
+            }
+        }
+    };
+    let transferTimeout; // Prevent double-triggering in React dev strict mode.
+    useEffect(() => {
+        if (!selectedSolanaTokenOption)
+            return;
+        // Give user time to see the UI before opening
+        transferTimeout = setTimeout(handleTransfer, 100);
+        return () => clearTimeout(transferTimeout);
+    }, []);
+    useEffect(() => {
+        triggerResize();
+    }, [payState]);
+    return (jsxs(PageContent, { children: [jsx(LoadingContainer$1, { children: jsx(AnimationContainer, { "$circle": true, children: jsx(AnimatePresence, { children: jsx(CircleSpinner, { logo: jsx("img", { src: selectedSolanaTokenOption?.required.token.logoURI, alt: selectedSolanaTokenOption?.required.token.symbol }, selectedSolanaTokenOption?.required.token.logoURI), loading: true, unavailable: false }, "CircleSpinner") }) }) }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { children: payState }), payState === PayState.RequestCancelled && (jsx(Button, { onClick: handleTransfer, children: "Retry Payment" })), payState === PayState.RequestFailed && (jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" }))] })] }));
+};
+const LoadingContainer$1 = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
+`;
+const AnimationContainer = styled(motion.div) `
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+    ${(props) => props.$circle &&
+    css `
+        inset: -5px;
+        border-radius: 50%;
+        background: none;
+        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
+      `}
+  }
+`;
+
+const SelectSolanaToken = () => {
+    const { paymentInfo, setRoute } = useContext();
+    const { solanaPaymentOptions, setSelectedSolanaTokenOption } = paymentInfo;
+    return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !solanaPaymentOptions.isLoading &&
+                solanaPaymentOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    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: solanaPaymentOptions.options?.map((option) => {
+                    const title = `${getDisplayPrice(option.required)} ${option.required.token.symbol}`;
+                    const subtitle = `Balance: ${getDisplayPrice(option.balance)} ${option.balance.token.symbol}`;
+                    return {
+                        id: `${option.required.token.token}-${option.required.token.symbol}`,
+                        title,
+                        subtitle,
+                        icons: [
+                            jsx("img", { src: option.required.token.logoURI, alt: option.required.token.symbol, style: { borderRadius: 9999 } }),
+                        ],
+                        onClick: () => {
+                            setSelectedSolanaTokenOption(option);
+                            setRoute(ROUTES.SOLANA_PAY_WITH_TOKEN);
+                        },
+                    };
+                }) ?? [] })] }));
+};
+
+const WaitingDepositAddress = () => {
+    const { triggerResize, paymentInfo, setRoute } = useContext();
+    const { daimoPayOrder, payWithDepositAddress, selectedDepositAddressOption } = paymentInfo;
+    useEffect(() => {
+        const checkForSourcePayment = async () => {
+            if (!daimoPayOrder || !selectedDepositAddressOption)
+                return;
+            const found = await trpc.findSourcePayment.query({
+                orderId: daimoPayOrder.id.toString(),
+            });
+            if (found) {
+                setRoute(ROUTES.CONFIRMATION);
+            }
+        };
+        // Check every 10 seconds, bitcoin takes a while
+        const interval = setInterval(checkForSourcePayment, 10000);
+        return () => clearInterval(interval);
+    }, [daimoPayOrder?.id]);
+    const [details, setDetails] = useState();
+    const [failed, setFailed] = useState(false);
+    useEffect(() => {
+        if (!selectedDepositAddressOption)
+            return;
+        payWithDepositAddress(selectedDepositAddressOption.id).then((details) => {
+            if (!details)
+                setFailed(true);
+            else
+                setDetails(details);
+        });
+    }, [selectedDepositAddressOption]);
+    useEffect(() => {
+        triggerResize();
+    }, [details]);
+    return (jsx(PageContent, { children: failed ? (jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [jsxs(ModalH1, { children: [selectedDepositAddressOption?.id, " unavailable"] }), jsxs(ModalBody, { children: ["We're unable to process ", selectedDepositAddressOption?.id, " payments at this time. Please select another payment method."] }), jsx(Button, { onClick: () => setRoute(ROUTES.SELECT_METHOD), children: "Select Another Method" })] })) : (jsxs(ModalContent, { children: [jsx(CustomQRCode, { value: details?.uri, image: jsx("img", { src: selectedDepositAddressOption?.logoURI, width: "100%", height: "100%" }), tooltipMessage: jsxs(Fragment, { children: [jsx(ScanIconWithLogos, { logo: jsx("img", { src: selectedDepositAddressOption?.logoURI }) }), jsxs("span", { children: ["Use a ", selectedDepositAddressOption?.id, " wallet to scan"] })] }) }), details && (jsxs(Fragment, { children: [jsx(OrDivider, {}), jsxs(ModalBody, { children: ["Send exactly ", details.amount, " ", details.suffix, " to", " ", getAddressContraction(details.address), " and return to this page. Confirmation should appear in a few minutes."] }), jsx(CopyToClipboard, { variant: "button", string: details.address, children: "Copy Address" }), jsx(CopyToClipboard, { variant: "left", string: details.amount, children: "Copy Amount" })] }))] })) }));
+};
 
 const customThemeDefault = {};
 const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThemeDefault, lang = "en-US", }) => {
     const context = useContext();
-    const { setSelectedExternalOption, setSelectedTokenOption } = context.paymentInfo;
+    const { setSelectedExternalOption, setSelectedTokenOption, setSelectedDepositAddressOption, setSelectedSolanaTokenOption, } = context.paymentInfo;
     const { isConnected, chain } = useAccount();
     const chainIsSupported = useChainIsSupported(chain?.id);
     //if chain is unsupported we enforce a "switch chain" prompt
@@ -10838,15 +10587,10 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
         isConnected &&
         !chainIsSupported);
     const showBackButton = closeable &&
-        context.route !== ROUTES.PROFILE &&
         context.route !== ROUTES.SELECT_METHOD &&
         context.route !== ROUTES.CONFIRMATION;
-    closeable && context.route !== ROUTES.PROFILE;
     const onBack = () => {
-        if (context.route === ROUTES.SWITCHNETWORKS) {
-            context.setRoute(ROUTES.PROFILE);
-        }
-        else if (context.route === ROUTES.DOWNLOAD) {
+        if (context.route === ROUTES.DOWNLOAD) {
             context.setRoute(ROUTES.CONNECT);
         }
         else if (context.route === ROUTES.CONNECTORS) {
@@ -10866,6 +10610,14 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
         else if (context.route === ROUTES.ONBOARDING) {
             context.setRoute(ROUTES.CONNECTORS);
         }
+        else if (context.route === ROUTES.WAITING_DEPOSIT_ADDRESS) {
+            setSelectedDepositAddressOption(undefined);
+            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+        }
+        else if (context.route === ROUTES.SOLANA_PAY_WITH_TOKEN) {
+            setSelectedSolanaTokenOption(undefined);
+            context.setRoute(ROUTES.SOLANA_SELECT_TOKEN);
+        }
         else {
             context.setRoute(ROUTES.SELECT_METHOD);
         }
@@ -10874,15 +10626,20 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
         daimoPaySelectMethod: jsx(SelectMethod, {}),
         daimoPaySelectToken: jsx(SelectToken, {}),
         daimoPayWaitingOther: jsx(WaitingOther, {}),
+        daimoPaySelectDepositAddressChain: jsx(SelectDepositAddressChain, {}),
+        daimoPayWaitingDepositAddress: jsx(WaitingDepositAddress, {}),
         daimoPayConfirmation: jsx(Confirmation, {}),
         daimoPayPayWithToken: jsx(PayWithToken, {}),
+        daimoPaySolanaConnect: jsx(ConnectSolana, {}),
+        daimoPaySolanaConnector: jsx(ConnectSolana$1, {}),
+        daimoPaySolanaSelectToken: jsx(SelectSolanaToken, {}),
+        daimoPaySolanaPayWithToken: jsx(PayWithSolanaToken, {}),
         onboarding: jsx(Introduction, {}),
         about: jsx(About, {}),
         download: jsx(DownloadApp, {}),
         connectors: jsx(Wallets, {}),
         mobileConnectors: jsx(MobileConnectors, {}),
         connect: jsx(ConnectUsing, {}),
-        profile: jsx(Profile, {}),
         switchNetworks: jsx(SwitchNetworks, {}),
     };
     function hide() {
@@ -10927,24 +10684,35 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
     return (jsx(DaimoPayThemeProvider, { theme: theme, customTheme: customTheme, mode: mode, children: jsx(Modal, { open: context.open, pages: pages, pageId: context.route, onClose: closeable ? hide : undefined, onInfo: undefined, onBack: showBackButton ? onBack : undefined }) }));
 };
 
+const DEFAULT_SOLANA_RPC_URL = "https://nameless-thrilling-spring.solana-mainnet.quiknode.pro/71d5c9acbf54c7cf00584cf6fab7fc37e844415f/";
+const SolanaContextProvider = ({ children, solanaRpcUrl, }) => {
+    const endpoint = solanaRpcUrl ?? DEFAULT_SOLANA_RPC_URL;
+    return (jsx(ConnectionProvider, { endpoint: endpoint, children: jsx(WalletProvider, { wallets: [], autoConnect: true, children: children }) }));
+};
+
 var ROUTES;
 (function (ROUTES) {
     ROUTES["SELECT_METHOD"] = "daimoPaySelectMethod";
     ROUTES["SELECT_TOKEN"] = "daimoPaySelectToken";
     ROUTES["WAITING_OTHER"] = "daimoPayWaitingOther";
+    ROUTES["SELECT_DEPOSIT_ADDRESS_CHAIN"] = "daimoPaySelectDepositAddressChain";
+    ROUTES["WAITING_DEPOSIT_ADDRESS"] = "daimoPayWaitingDepositAddress";
     ROUTES["PAY_WITH_TOKEN"] = "daimoPayPayWithToken";
     ROUTES["CONFIRMATION"] = "daimoPayConfirmation";
+    ROUTES["SOLANA_CONNECT"] = "daimoPaySolanaConnect";
+    ROUTES["SOLANA_CONNECTOR"] = "daimoPaySolanaConnector";
+    ROUTES["SOLANA_SELECT_TOKEN"] = "daimoPaySolanaSelectToken";
+    ROUTES["SOLANA_PAY_WITH_TOKEN"] = "daimoPaySolanaPayWithToken";
     ROUTES["ONBOARDING"] = "onboarding";
     ROUTES["ABOUT"] = "about";
     ROUTES["CONNECTORS"] = "connectors";
     ROUTES["MOBILECONNECTORS"] = "mobileConnectors";
     ROUTES["CONNECT"] = "connect";
     ROUTES["DOWNLOAD"] = "download";
-    ROUTES["PROFILE"] = "profile";
     ROUTES["SWITCHNETWORKS"] = "switchNetworks";
 })(ROUTES || (ROUTES = {}));
 const Context = createContext(null);
-const DaimoPayProvider = ({ children, theme = "auto", mode = "auto", customTheme, options, onConnect, onDisconnect, debugMode = false, }) => {
+const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto", customTheme, options, onConnect, onDisconnect, debugMode = false, }) => {
     // DaimoPayProvider must be within a WagmiProvider
     if (!React.useContext(WagmiContext)) {
         throw Error("DaimoPayProvider must be within a WagmiProvider");
@@ -10964,7 +10732,6 @@ const DaimoPayProvider = ({ children, theme = "auto", mode = "auto", customTheme
             throw new Error(`Daimo Pay requires chains ${REQUIRED_CHAINS.map((c) => c.name).join(", ")}. Use \`getDefaultConfig\` to automatically configure required chains.`);
         }
     }
-    const injectedConnector = useConnector("injected");
     // Default config options
     const defaultOptions = {
         language: "en-US",
@@ -11008,6 +10775,7 @@ const DaimoPayProvider = ({ children, theme = "auto", mode = "auto", customTheme
     const [connector, setConnector] = useState({
         id: "",
     });
+    const [solanaConnector, setSolanaConnector] = useState();
     const [route, setRoute] = useState(ROUTES.SELECT_METHOD);
     const [errorMessage, setErrorMessage] = useState("");
     const [resize, onResize] = useState(0);
@@ -11027,13 +10795,6 @@ const DaimoPayProvider = ({ children, theme = "auto", mode = "auto", customTheme
             setRoute(ROUTES.SWITCHNETWORKS);
         }
     }, [isConnected, isChainSupported, chain, route, open]);
-    // Autoconnect to Family wallet if available
-    // TODO: Does this work for all injected providers?
-    useEffect(() => {
-        if (isFamily()) {
-            injectedConnector?.connect();
-        }
-    }, [injectedConnector]);
     const log = debugMode ? console.log : () => { };
     // PaymentInfo is a second, inner context object containing a DaimoPayOrder
     // plus all associated status and callbacks. In order for useContext() and
@@ -11096,6 +10857,8 @@ const DaimoPayProvider = ({ children, theme = "auto", mode = "auto", customTheme
         setRoute,
         connector,
         setConnector,
+        solanaConnector,
+        setSolanaConnector,
         onConnect,
         // Other configuration
         options: opts,
@@ -11119,6 +10882,9 @@ const DaimoPayProvider = ({ children, theme = "auto", mode = "auto", customTheme
     };
     return createElement(Context.Provider, { value }, jsx(Web3ContextProvider, { enabled: open, children: jsxs(ThemeProvider, { theme: defaultTheme$1, children: [children, jsx(DaimoPayModal, { lang: ckLang, theme: ckTheme, mode: mode, customTheme: ckCustomTheme })] }) }));
 };
+const DaimoPayProvider = (props) => {
+    return (jsx(SolanaContextProvider, { solanaRpcUrl: props.solanaRpcUrl, children: jsx(DaimoPayProviderWithoutSolana, { ...props }) }));
+};
 const useContext = () => {
     const context = React.useContext(Context);
     if (!context)
@@ -11126,6 +10892,12 @@ const useContext = () => {
     return context;
 };
 
+function useIsMounted() {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    return mounted;
+}
+
 const TextContainer = styled(motion.div) `
   top: 0;
   bottom: 0;
@@ -11456,12 +11228,228 @@ const useModal = ({ onConnect, onDisconnect } = {}) => {
         // Disconnected Routes
         openAbout: () => gotoAndOpen(ROUTES.ABOUT),
         openOnboarding: () => gotoAndOpen(ROUTES.ONBOARDING),
-        // Connected Routes
-        openProfile: () => gotoAndOpen(ROUTES.PROFILE),
         openSwitchNetworks: () => gotoAndOpen(ROUTES.SWITCHNETWORKS),
     };
 };
 
+function addressToNumber(address) {
+    return ((address
+        .split("")
+        .map((l) => l.charCodeAt(0))
+        .reduce((a, b) => a + b) %
+        100) /
+        100);
+}
+const EnsAvatar = styled(motion.div) `
+  will-change: transform; // Needed for Safari
+  pointer-events: none;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  border-radius: ${(props) => `${props.$radius}px`};
+  width: ${(props) => `${props.$size}px`};
+  height: ${(props) => `${props.$size}px`};
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  &:before {
+    content: "";
+    z-index: 1;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+  }
+  ${(props) => {
+    if (props.$seed) {
+        const id = Math.ceil(addressToNumber(props.$seed) * 8);
+        const ensColor = `0${id === 0 ? 1 : id}`; // No zero ID in ENS color list.. 🤷‍♀️
+        return css `
+        background: var(--ck-ens-${ensColor}-start);
+        background: linear-gradient(
+          180deg,
+          var(--ck-ens-${ensColor}-start) 0%,
+          var(--ck-ens-${ensColor}-stop) 100%
+        );
+      `;
+    }
+}}
+`;
+const ImageContainer = styled(motion.img) `
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: ${(props) => (props.$loaded ? 1 : 0)};
+  will-change: opacity; // Needed for Safari
+  transition: opacity 500ms ease;
+  transform: scale(1.01); // fixes background color bleeding
+`;
+
+const ensFallbackConfig = createConfig({
+    chains: [mainnet],
+    transports: {
+        [mainnet.id]: http(),
+    },
+});
+function useEnsFallbackConfig() {
+    return !useChainIsSupported(1) ? ensFallbackConfig : undefined;
+}
+
+const Avatar = ({ address, name, size = 96, radius = 96 }) => {
+    const isMounted = useIsMounted();
+    const context = useContext();
+    const imageRef = useRef(null);
+    const [loaded, setLoaded] = useState(true);
+    const ensFallbackConfig = useEnsFallbackConfig();
+    const { data: ensAddress } = useEnsAddress({
+        chainId: 1,
+        name: name,
+        config: ensFallbackConfig,
+    });
+    const { data: ensName } = useEnsName({
+        chainId: 1,
+        address: address ?? ensAddress ?? undefined,
+        config: ensFallbackConfig,
+    });
+    const { data: ensAvatar } = useEnsAvatar({
+        chainId: 1,
+        name: normalize(ensName ?? ""),
+        config: ensFallbackConfig,
+    });
+    const ens = {
+        address: ensAddress ?? address,
+        name: ensName ?? name,
+        avatar: ensAvatar ?? undefined,
+    };
+    useEffect(() => {
+        if (!(imageRef.current &&
+            imageRef.current.complete &&
+            imageRef.current.naturalHeight !== 0)) {
+            setLoaded(false);
+        }
+    }, [ensAvatar]);
+    if (!isMounted)
+        return jsx("div", { style: { width: size, height: size, borderRadius: radius } });
+    if (context.options?.customAvatar)
+        return (jsx("div", { style: {
+                width: size,
+                height: size,
+                borderRadius: radius,
+                overflow: "hidden",
+            }, children: context.options?.customAvatar({
+                address: address ?? ens?.address,
+                ensName: name ?? ens?.name,
+                ensImage: ens?.avatar,
+                size,
+                radius,
+            }) }));
+    if (!ens.name || !ens.avatar)
+        return (jsx(ResetContainer, { style: { pointerEvents: "none" }, children: jsx(EnsAvatar, { "$size": size, "$seed": ens.address, "$radius": radius }) }));
+    return (jsx(ResetContainer, { style: { pointerEvents: "none" }, children: jsx(EnsAvatar, { "$size": size, "$seed": ens.address, "$radius": radius, children: jsx(ImageContainer, { ref: imageRef, src: ens.avatar, alt: ens.name, onLoad: () => setLoaded(true), "$loaded": loaded }) }) }));
+};
+
+const ChainContainer = styled.div `
+  --bg: transparent;
+  --color: #333;
+  ${(props) => typeof props.size === "string"
+    ? css `
+          --width: ${props.size};
+          --height: ${props.size};
+        `
+    : css `
+          --width: ${props.size >= 0 ? `${props.size}px` : "24px"};
+          --height: ${props.size >= 0 ? `${props.size}px` : "24px"};
+        `};
+  ${(props) => typeof props.radius === "string"
+    ? css `
+          --radius: ${props.radius};
+        `
+    : css `
+          --radius: ${props.radius >= 0 ? `${props.radius}px` : "24px"};
+        `};
+  display: block;
+  position: relative;
+  width: var(--width);
+  height: var(--height);
+  min-width: var(--width);
+  min-height: var(--height);
+  border-radius: var(--radius);
+  background: var(--ck-body-background-secondary);
+  pointer-events: none;
+  user-select: none;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+const LogoContainer = styled(motion.div) `
+  display: block;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+`;
+const Spin = keyframes `
+  0%{ transform: rotate(0deg); }
+  100%{ transform: rotate(360deg); }
+`;
+const LoadingContainer = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  animation: ${Spin} 1s linear infinite;
+  svg {
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+`;
+const Unsupported = styled(motion.div) `
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40%;
+  height: 40%;
+  min-width: 13px;
+  min-height: 13px;
+  color: var(--ck-body-color-danger, red);
+  svg {
+    display: block;
+    position: relative;
+    top: -30%;
+    right: -30%;
+  }
+`;
+
+const Spinner = (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z", fill: "url(#paint0_linear_1288_1870)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_1870", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0.7" }), jsx("stop", { offset: "1", stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0" })] }) })] }));
+const Chain = ({ id, unsupported: controlledUnsupported, radius = "50%", size = 24, }) => {
+    const isChainSupported = useChainIsSupported(id);
+    const unsupported = controlledUnsupported ?? !isChainSupported;
+    const chain = chainConfigs.find((c) => c.id === id);
+    const isMounted = useIsMounted();
+    if (!isMounted)
+        return (jsx("div", { style: {
+                width: size,
+                height: size,
+            } }));
+    return (jsx(ChainContainer, { size: size, radius: radius, children: jsxs(AnimatePresence, { initial: false, children: [unsupported && (jsx(Unsupported, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) })), id ? (jsx(LogoContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: chain?.logo ?? jsx(Chains.UnknownChain, {}) }, `${chain?.id}-${chain?.name}-${id}`)) : (jsx(LoadingContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: Spinner }, "loading"))] }) }));
+};
+
 function useDaimoPayStatus() {
     const { paymentInfo } = useContext();
     const status = (() => {
@@ -11493,5 +11481,5 @@ function useDaimoPayStatus() {
     return status;
 }
 
-export { Avatar, Chain as ChainIcon, Context, DaimoPayButton, DaimoPayProvider, types$1 as Types, defaultConfig as getDefaultConfig, defaultConnectors as getDefaultConnectors, useChainIsSupported, useChains, useDaimoPayStatus, useIsMounted, useModal, wallets };
+export { Avatar, Chain as ChainIcon, Context, DaimoPayButton, DaimoPayProvider, types$1 as Types, defaultConfig as getDefaultConfig, useChainIsSupported, useChains, useDaimoPayStatus, useIsMounted, useModal, wallets };
 //# sourceMappingURL=index.es.js.map