@daimo/pay 1.19.5 → 1.19.7

package/build/pay/packages/connectkit/src/components/Pages/SelectExchange/index.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ExternalPaymentOptions } from '@daimo/pay-common';
+import { PageContent, ModalH1 } from '../../Common/Modal/styles.js';
+import { ROUTES } from '../../../constants/routes.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { OptionsList } from '../../Common/OptionsList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+
+const SelectExchange = () => {
+  const { paymentState, setRoute } = usePayContext();
+  const { externalPaymentOptions, setSelectedExternalOption } = paymentState;
+  const exchangeOptions = externalPaymentOptions.options.get("exchange");
+  const isLoading = externalPaymentOptions.loading;
+  if (!isLoading && !exchangeOptions) {
+    return /* @__PURE__ */ jsxs(PageContent, { children: [
+      /* @__PURE__ */ jsx(OrderHeader, { minified: true }),
+      /* @__PURE__ */ jsx(ModalH1, { children: "No Exchange options available" })
+    ] });
+  }
+  const paymentOptions = paymentState.buttonProps?.paymentOptions;
+  const isAllExchangesOnly = paymentOptions && paymentOptions.length === 1 && paymentOptions[0] === "AllExchanges";
+  let filtered = [];
+  if (exchangeOptions) {
+    if (isAllExchangesOnly) {
+      filtered = exchangeOptions.filter(
+        (o) => o.id === ExternalPaymentOptions.Coinbase || o.id === ExternalPaymentOptions.Binance
+      );
+    } else {
+      filtered = exchangeOptions;
+    }
+  }
+  const options = filtered.map((option) => ({
+    id: option.id,
+    title: option.cta,
+    icons: [option.logoURI],
+    onClick: () => {
+      setSelectedExternalOption(option);
+      const meta = { event: "click-option", option: option.id };
+      if (paymentState.isDepositFlow) {
+        setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT, meta);
+      } else {
+        setRoute(ROUTES.WAITING_EXTERNAL, meta);
+      }
+    },
+    disabled: option.disabled,
+    subtitle: option.message
+  }));
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(OrderHeader, { minified: true, show: "zkp2p" }),
+    /* @__PURE__ */ jsx(
+      OptionsList,
+      {
+        requiredSkeletons: 2,
+        options,
+        isLoading
+      }
+    )
+  ] });
+};
+
+export { SelectExchange as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Pages/SelectExchange/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Pages/SelectExchange/index.tsx"],"sourcesContent":["import { ExternalPaymentOptions } from \"@daimo/pay-common\";\nimport React from \"react\";\n\nimport { ModalH1, PageContent } from \"../../Common/Modal/styles\";\n\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport { OptionsList } from \"../../Common/OptionsList\";\nimport { OrderHeader } from \"../../Common/OrderHeader\";\n\nconst SelectExchange: React.FC = () => {\n  const { paymentState, setRoute } = usePayContext();\n  const { externalPaymentOptions, setSelectedExternalOption } = paymentState;\n  const exchangeOptions = externalPaymentOptions.options.get(\"exchange\");\n  const isLoading = externalPaymentOptions.loading;\n\n  // No exchange options available\n  if (!isLoading && !exchangeOptions) {\n    return (\n      <PageContent>\n        <OrderHeader minified />\n        <ModalH1>No Exchange options available</ModalH1>\n      </PageContent>\n    );\n  }\n\n  // For the exchange flow with single \"AllExchanges\" payment option, we only\n  // show the Coinbase and Binance options\n  const paymentOptions = paymentState.buttonProps?.paymentOptions;\n  const isAllExchangesOnly =\n    paymentOptions &&\n    paymentOptions.length === 1 &&\n    paymentOptions[0] === \"AllExchanges\";\n\n  let filtered: typeof exchangeOptions = [];\n  if (exchangeOptions) {\n    if (isAllExchangesOnly) {\n      filtered = exchangeOptions.filter(\n        (o) =>\n          o.id === ExternalPaymentOptions.Coinbase ||\n          o.id === ExternalPaymentOptions.Binance,\n      );\n    } else {\n      filtered = exchangeOptions;\n    }\n  }\n\n  const options = filtered.map((option) => ({\n    id: option.id,\n    title: option.cta,\n    icons: [option.logoURI],\n    onClick: () => {\n      setSelectedExternalOption(option);\n      const meta = { event: \"click-option\", option: option.id };\n      if (paymentState.isDepositFlow) {\n        setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT, meta);\n      } else {\n        setRoute(ROUTES.WAITING_EXTERNAL, meta);\n      }\n    },\n    disabled: option.disabled,\n    subtitle: option.message,\n  }));\n\n  return (\n    <PageContent>\n      <OrderHeader minified show=\"zkp2p\" />\n      <OptionsList\n        requiredSkeletons={2}\n        options={options}\n        isLoading={isLoading}\n      />\n    </PageContent>\n  );\n};\n\nexport default SelectExchange;\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,iBAA2B,MAAM;AACrC,EAAA,MAAM,EAAE,YAAA,EAAc,QAAS,EAAA,GAAI,aAAc,EAAA,CAAA;AACjD,EAAM,MAAA,EAAE,sBAAwB,EAAA,yBAAA,EAA8B,GAAA,YAAA,CAAA;AAC9D,EAAA,MAAM,eAAkB,GAAA,sBAAA,CAAuB,OAAQ,CAAA,GAAA,CAAI,UAAU,CAAA,CAAA;AACrE,EAAA,MAAM,YAAY,sBAAuB,CAAA,OAAA,CAAA;AAGzC,EAAI,IAAA,CAAC,SAAa,IAAA,CAAC,eAAiB,EAAA;AAClC,IAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,WAAA,EAAA,EAAY,UAAQ,IAAC,EAAA,CAAA;AAAA,sBACtB,GAAA,CAAC,WAAQ,QAA6B,EAAA,+BAAA,EAAA,CAAA;AAAA,KACxC,EAAA,CAAA,CAAA;AAAA,GAEJ;AAIA,EAAM,MAAA,cAAA,GAAiB,aAAa,WAAa,EAAA,cAAA,CAAA;AACjD,EAAA,MAAM,qBACJ,cACA,IAAA,cAAA,CAAe,WAAW,CAC1B,IAAA,cAAA,CAAe,CAAC,CAAM,KAAA,cAAA,CAAA;AAExB,EAAA,IAAI,WAAmC,EAAC,CAAA;AACxC,EAAA,IAAI,eAAiB,EAAA;AACnB,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,eAAgB,CAAA,MAAA;AAAA,QACzB,CAAC,MACC,CAAE,CAAA,EAAA,KAAO,uBAAuB,QAChC,IAAA,CAAA,CAAE,OAAO,sBAAuB,CAAA,OAAA;AAAA,OACpC,CAAA;AAAA,KACK,MAAA;AACL,MAAW,QAAA,GAAA,eAAA,CAAA;AAAA,KACb;AAAA,GACF;AAEA,EAAA,MAAM,OAAU,GAAA,QAAA,CAAS,GAAI,CAAA,CAAC,MAAY,MAAA;AAAA,IACxC,IAAI,MAAO,CAAA,EAAA;AAAA,IACX,OAAO,MAAO,CAAA,GAAA;AAAA,IACd,KAAA,EAAO,CAAC,MAAA,CAAO,OAAO,CAAA;AAAA,IACtB,SAAS,MAAM;AACb,MAAA,yBAAA,CAA0B,MAAM,CAAA,CAAA;AAChC,MAAA,MAAM,OAAO,EAAE,KAAA,EAAO,cAAgB,EAAA,MAAA,EAAQ,OAAO,EAAG,EAAA,CAAA;AACxD,MAAA,IAAI,aAAa,aAAe,EAAA;AAC9B,QAAS,QAAA,CAAA,MAAA,CAAO,wBAAwB,IAAI,CAAA,CAAA;AAAA,OACvC,MAAA;AACL,QAAS,QAAA,CAAA,MAAA,CAAO,kBAAkB,IAAI,CAAA,CAAA;AAAA,OACxC;AAAA,KACF;AAAA,IACA,UAAU,MAAO,CAAA,QAAA;AAAA,IACjB,UAAU,MAAO,CAAA,OAAA;AAAA,GACjB,CAAA,CAAA,CAAA;AAEF,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,QAAA,EAAQ,IAAC,EAAA,IAAA,EAAK,OAAQ,EAAA,CAAA;AAAA,oBACnC,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,iBAAmB,EAAA,CAAA;AAAA,QACnB,OAAA;AAAA,QACA,SAAA;AAAA,OAAA;AAAA,KACF;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/build/pay/packages/connectkit/src/components/Pages/SelectExternalAmount/index.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { ROUTES } from '../../../constants/routes.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
+import styled from '../../../styles/styled/index.js';
+import { formatUsd, USD_DECIMALS } from '../../../utils/format.js';
+import { isValidNumber, sanitizeNumber } from '../../../utils/validateInput.js';
+import AmountInputField from '../../Common/AmountInput/AmountInputField.js';
+import Button from '../../Common/Button/index.js';
+import ExternalPaymentSpinner from '../../Spinners/ExternalPaymentSpinner/index.js';
+
+const SelectExternalAmount = () => {
+  const { paymentState, setRoute, triggerResize } = usePayContext();
+  const { selectedExternalOption } = paymentState;
+  const maxUsdLimit = paymentState.getOrderUsdLimit();
+  const minimumMessage = (selectedExternalOption?.minimumUsd ?? 0) > 0 ? `Minimum ${formatUsd(selectedExternalOption?.minimumUsd ?? 0, "up")}` : null;
+  const [usdInput, setUsdInput] = useState("");
+  const [message, setMessage] = useState(minimumMessage);
+  const [continueDisabled, setContinueDisabled] = useState(true);
+  useEffect(() => {
+    triggerResize();
+  }, [message]);
+  if (selectedExternalOption == null) {
+    return /* @__PURE__ */ jsx(PageContent, {});
+  }
+  const handleAmountChange = (e) => {
+    const value = e.target.value;
+    if (value !== "" && !isValidNumber(value, USD_DECIMALS)) return;
+    setUsdInput(value);
+    if (Number(value) > maxUsdLimit) {
+      setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
+    } else {
+      setMessage(minimumMessage);
+    }
+    const usd = Number(sanitizeNumber(value));
+    setContinueDisabled(
+      usd <= 0 || usd < (selectedExternalOption.minimumUsd ?? 0) || usd > maxUsdLimit
+    );
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !continueDisabled) {
+      handleContinue();
+    }
+  };
+  const handleContinue = () => {
+    const amountUsd = Number(sanitizeNumber(usdInput));
+    paymentState.setChosenUsd(amountUsd);
+    setRoute(ROUTES.WAITING_EXTERNAL, { amountUsd });
+  };
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(
+      ExternalPaymentSpinner,
+      {
+        logoURI: selectedExternalOption.logoURI,
+        logoShape: selectedExternalOption.logoShape
+      }
+    ),
+    /* @__PURE__ */ jsxs(ModalContent, { $preserveDisplay: true, children: [
+      /* @__PURE__ */ jsx(AmountInputContainer, { children: /* @__PURE__ */ jsx(
+        AmountInputField,
+        {
+          value: usdInput,
+          onChange: handleAmountChange,
+          onKeyDown: handleKeyDown
+        }
+      ) }),
+      message && /* @__PURE__ */ jsx(ModalBody, { children: message }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })
+    ] })
+  ] });
+};
+const AmountInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export { SelectExternalAmount as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Pages/SelectExternalAmount/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Pages/SelectExternalAmount/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport {\n  ModalBody,\n  ModalContent,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport styled from \"../../../styles/styled\";\nimport { formatUsd, USD_DECIMALS } from \"../../../utils/format\";\nimport { isValidNumber, sanitizeNumber } from \"../../../utils/validateInput\";\nimport AmountInputField from \"../../Common/AmountInput/AmountInputField\";\nimport Button from \"../../Common/Button\";\nimport ExternalPaymentSpinner from \"../../Spinners/ExternalPaymentSpinner\";\n\nconst SelectExternalAmount: React.FC = () => {\n  const { paymentState, setRoute, triggerResize } = usePayContext();\n  const { selectedExternalOption } = paymentState;\n\n  const maxUsdLimit = paymentState.getOrderUsdLimit();\n  const minimumMessage =\n    (selectedExternalOption?.minimumUsd ?? 0) > 0\n      ? `Minimum ${formatUsd(selectedExternalOption?.minimumUsd ?? 0, \"up\")}`\n      : null;\n\n  const [usdInput, setUsdInput] = useState<string>(\"\");\n  const [message, setMessage] = useState<string | null>(minimumMessage);\n  const [continueDisabled, setContinueDisabled] = useState(true);\n\n  useEffect(() => {\n    triggerResize();\n  }, [message]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (selectedExternalOption == null) {\n    return <PageContent></PageContent>;\n  }\n\n  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    if (value !== \"\" && !isValidNumber(value, USD_DECIMALS)) return;\n\n    setUsdInput(value);\n\n    if (Number(value) > maxUsdLimit) {\n      setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);\n    } else {\n      setMessage(minimumMessage);\n    }\n\n    const usd = Number(sanitizeNumber(value));\n    setContinueDisabled(\n      usd <= 0 ||\n        usd < (selectedExternalOption.minimumUsd ?? 0) ||\n        usd > maxUsdLimit,\n    );\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" && !continueDisabled) {\n      handleContinue();\n    }\n  };\n\n  const handleContinue = () => {\n    const amountUsd = Number(sanitizeNumber(usdInput));\n    paymentState.setChosenUsd(amountUsd);\n    setRoute(ROUTES.WAITING_EXTERNAL, { amountUsd });\n  };\n\n  return (\n    <PageContent>\n      <ExternalPaymentSpinner\n        logoURI={selectedExternalOption.logoURI}\n        logoShape={selectedExternalOption.logoShape}\n      />\n      <ModalContent $preserveDisplay={true}>\n        <AmountInputContainer>\n          <AmountInputField\n            value={usdInput}\n            onChange={handleAmountChange}\n            onKeyDown={handleKeyDown}\n          />\n        </AmountInputContainer>\n        {message && <ModalBody>{message}</ModalBody>}\n        <Button onClick={handleContinue} disabled={continueDisabled}>\n          Continue\n        </Button>\n      </ModalContent>\n    </PageContent>\n  );\n};\n\nconst AmountInputContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport default SelectExternalAmount;\n"],"names":[],"mappings":"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"}

package/build/pay/packages/connectkit/src/components/Pages/SelectMethod/index.js

@@ -0,0 +1,315 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ROUTES } from '../../../constants/routes.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent } from '../../Common/Modal/styles.js';
+import { DepositAddressPaymentOptions, getAddressContraction } from '@daimo/pay-common';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useAccount, useDisconnect, useConnections } from 'wagmi';
+import { Ethereum, Solana, Polygon, Base, Tron } from '../../../assets/chains.js';
+import { MetaMask, Trust, Rainbow, Phantom, Rabby, WalletIcon } from '../../../assets/logos.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { flattenChildren } from '../../../utils/index.js';
+import { walletConfigs } from '../../../wallets/walletConfigs.js';
+import { OptionsList } from '../../Common/OptionsList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+import WalletChainLogo from '../../Common/WalletChainLogo/index.js';
+
+function SelectMethod() {
+  const locales = useLocales();
+  const payWithString = flattenChildren(locales.payWith).join("");
+  const { isMobile } = useIsMobile();
+  const {
+    address,
+    chain,
+    isConnected: isEthConnected,
+    connector
+  } = useAccount();
+  const {
+    connected: isSolanaConnected,
+    wallet: solanaWallet,
+    disconnect: disconnectSolana,
+    publicKey
+  } = useWallet();
+  const { setRoute, paymentState, log, disableMobileInjector } = usePayContext();
+  const { disconnectAsync } = useDisconnect();
+  const connections = useConnections();
+  const { externalPaymentOptions, senderEnsName, topOptionsOrder } = paymentState;
+  const showConnectedEth = isEthConnected && (!isMobile || !disableMobileInjector);
+  const showConnectedSolana = isSolanaConnected && (!isMobile || !disableMobileInjector);
+  const getConnectedWalletOptions = () => {
+    const showChainLogo = isEthConnected && isSolanaConnected;
+    const connectedOptions = [];
+    if (showConnectedEth) {
+      const ethWalletDisplayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
+      let walletIcon;
+      const matchedConfig = Object.values(walletConfigs).find((cfg) => {
+        if (!cfg.name || !connector?.name) return false;
+        const cfgName = cfg.name.toLowerCase();
+        const connName = connector.name.toLowerCase();
+        return cfgName.includes(connName) || connName.includes(cfgName);
+      });
+      if (matchedConfig?.icon) {
+        walletIcon = typeof matchedConfig.icon === "string" ? /* @__PURE__ */ jsx("img", { src: matchedConfig.icon, alt: matchedConfig.name }) : matchedConfig.icon;
+      } else if (connector?.icon) {
+        walletIcon = /* @__PURE__ */ jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: connector.icon, alt: connector.name }) });
+      } else {
+        walletIcon = /* @__PURE__ */ jsx(WalletIcon, {});
+      }
+      const connectedEthWalletOption = {
+        id: "connectedWallet",
+        title: `${payWithString} ${ethWalletDisplayName}`,
+        icons: [
+          /* @__PURE__ */ jsx(
+            WalletChainLogo,
+            {
+              walletIcon,
+              walletName: connector?.name || "Wallet",
+              chainLogo: showChainLogo ? /* @__PURE__ */ jsx(Ethereum, {}) : null
+            },
+            "eth"
+          )
+        ],
+        onClick: () => {
+          paymentState.setTokenMode("evm");
+          setRoute(ROUTES.SELECT_TOKEN, {
+            event: "click-wallet",
+            walletId: connector?.id,
+            chainId: chain?.id,
+            address
+          });
+        }
+      };
+      connectedOptions.push(connectedEthWalletOption);
+    }
+    if (showConnectedSolana) {
+      const solWalletDisplayName = getAddressContraction(
+        publicKey?.toBase58() ?? ""
+      );
+      let solWalletIcon;
+      const solMatchedConfig = Object.values(walletConfigs).find((cfg) => {
+        if (!cfg.name) return false;
+        const cfgName = cfg.name.toLowerCase();
+        const solName = solanaWallet?.adapter.name.toLowerCase() || "";
+        return cfgName.includes(solName) || solName.includes(cfgName);
+      });
+      if (solMatchedConfig?.icon) {
+        solWalletIcon = typeof solMatchedConfig.icon === "string" ? /* @__PURE__ */ jsx("img", { src: solMatchedConfig.icon, alt: solMatchedConfig.name }) : solMatchedConfig.icon;
+      } else if (solanaWallet?.adapter.icon) {
+        solWalletIcon = solanaWallet.adapter.icon;
+      } else {
+        solWalletIcon = /* @__PURE__ */ jsx(Solana, {});
+      }
+      const connectedSolWalletOption = {
+        id: "connectedSolanaWallet",
+        title: `${payWithString} ${solWalletDisplayName}`,
+        icons: [
+          /* @__PURE__ */ jsx(
+            WalletChainLogo,
+            {
+              walletIcon: solWalletIcon,
+              walletName: solanaWallet?.adapter.name || "Wallet",
+              chainLogo: showChainLogo && /* @__PURE__ */ jsx(Solana, {})
+            },
+            "sol-wallet"
+          )
+        ],
+        onClick: () => {
+          paymentState.setTokenMode("solana");
+          setRoute(ROUTES.SELECT_TOKEN, {
+            event: "click-wallet",
+            walletId: solanaWallet?.adapter.name,
+            chainId: "solana",
+            address: publicKey?.toBase58()
+          });
+        }
+      };
+      connectedOptions.push(connectedSolWalletOption);
+    }
+    return connectedOptions;
+  };
+  const connectedWalletOptions = getConnectedWalletOptions();
+  const walletOrder = paymentState.externalPaymentOptions.parsedConfig.walletOrder;
+  const unconnectedWalletOption = {
+    id: "unconnectedWallet",
+    title: isEthConnected || isSolanaConnected ? locales.payWithAnotherWallet : locales.payWithWallet,
+    icons: getBestUnconnectedWalletIcons(connector, isMobile, walletOrder),
+    onClick: async () => {
+      await Promise.allSettled(
+        connections.map(
+          (connection) => disconnectAsync({ connector: connection.connector })
+        )
+      );
+      await disconnectSolana();
+      setRoute(ROUTES.CONNECTORS);
+    }
+  };
+  log(
+    `[SELECT_METHOD] loading: ${externalPaymentOptions.loading}, options: ${JSON.stringify(
+      externalPaymentOptions.options
+    )}`
+  );
+  const categorizedOptions = [];
+  connectedWalletOptions.forEach(
+    (opt) => categorizedOptions.push({ ...opt, category: "connected" })
+  );
+  if (topOptionsOrder.includes("AllWallets")) {
+    categorizedOptions.push({
+      ...unconnectedWalletOption,
+      category: "AllWallets"
+    });
+  }
+  const exchangeOptions = externalPaymentOptions.options.get("exchange") ?? [];
+  const showExchangePaymentMethod = exchangeOptions.length > 0 && topOptionsOrder.includes("AllExchanges");
+  if (showExchangePaymentMethod) {
+    categorizedOptions.push({
+      id: "exchange",
+      title: locales.payWithExchange,
+      icons: exchangeOptions.slice(0, 3).map((option) => option.logoURI),
+      onClick: () => {
+        setRoute(ROUTES.SELECT_EXCHANGE, {
+          event: "click-option",
+          option: "exchange"
+        });
+      },
+      category: "AllExchanges"
+    });
+  }
+  if (topOptionsOrder.includes("Tron")) {
+    const tronOption = paymentState.depositAddressOptions.options?.find(
+      (option) => option.id === DepositAddressPaymentOptions.TRON_USDT
+    );
+    if (tronOption) {
+      categorizedOptions.push({
+        id: "tron",
+        title: tronOption.id,
+        // Use the actual title like "USDT on Tron"
+        icons: [tronOption.logoURI],
+        onClick: () => {
+          paymentState.setSelectedDepositAddressOption(tronOption);
+          setRoute(
+            paymentState.isDepositFlow ? ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT : ROUTES.WAITING_DEPOSIT_ADDRESS,
+            { event: "select_tron" }
+          );
+        },
+        category: "Tron"
+      });
+    }
+  }
+  if (topOptionsOrder.includes("AllAddresses")) {
+    const depositAddressOption = getDepositAddressOption(
+      setRoute,
+      locales,
+      topOptionsOrder.includes("Tron")
+      // exclude Tron if shown separately
+    );
+    categorizedOptions.push({
+      ...depositAddressOption,
+      category: "AllAddresses"
+    });
+  }
+  const zkp2pOptions = externalPaymentOptions.options.get("zkp2p") ?? [];
+  const showZkp2pPaymentMethod = !isMobile && zkp2pOptions.length > 0 && topOptionsOrder.includes("AllPaymentApps");
+  if (showZkp2pPaymentMethod) {
+    categorizedOptions.push({
+      id: "ZKP2P",
+      title: locales.payViaPaymentApp,
+      icons: zkp2pOptions.slice(0, 2).map((option) => option.logoURI),
+      onClick: () => {
+        setRoute(ROUTES.SELECT_ZKP2P);
+      },
+      category: "AllPaymentApps"
+    });
+  }
+  const sortedOptions = categorizedOptions.sort((a, b) => {
+    if (a.category === "connected") return -1;
+    if (b.category === "connected") return 1;
+    const aIndex = topOptionsOrder.indexOf(a.category);
+    const bIndex = topOptionsOrder.indexOf(b.category);
+    if (aIndex === -1 && bIndex === -1) return 0;
+    if (aIndex === -1) return 1;
+    if (bIndex === -1) return -1;
+    return aIndex - bIndex;
+  });
+  const options = sortedOptions.map(({ category, ...opt }) => opt);
+  options.sort((a, b) => (a.disabled ? 1 : 0) - (b.disabled ? 1 : 0));
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(OrderHeader, {}),
+    /* @__PURE__ */ jsx(
+      OptionsList,
+      {
+        requiredSkeletons: 3,
+        isLoading: externalPaymentOptions.loading,
+        options: externalPaymentOptions.loading ? [] : options
+      }
+    ),
+    /* @__PURE__ */ jsx(PoweredByFooter, {})
+  ] });
+}
+function getBestUnconnectedWalletIcons(connector, isMobile, walletOrder) {
+  const icons = [];
+  const strippedId = connector?.id.toLowerCase();
+  if (walletOrder && walletOrder.length > 0 && isMobile) {
+    const maxIcons = 3;
+    for (const walletName of walletOrder) {
+      if (icons.length >= maxIcons) break;
+      if (strippedId?.includes(walletName.toLowerCase())) continue;
+      const walletId = Object.keys(walletConfigs).find((id) => {
+        const wallet = walletConfigs[id];
+        const nameLower = walletName.toLowerCase();
+        return wallet.name?.toLowerCase().includes(nameLower) || wallet.shortName?.toLowerCase().includes(nameLower) || id.toLowerCase().includes(nameLower);
+      });
+      if (walletId) {
+        const wallet = walletConfigs[walletId];
+        const icon = wallet.iconConnector || wallet.icon;
+        if (icon) {
+          icons.push(
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { borderRadius: "22.5%", overflow: "hidden" },
+                children: icon
+              },
+              walletId
+            )
+          );
+        }
+      }
+    }
+    if (icons.length > 0) return icons;
+  }
+  const [isRainbow, isTrust, isPhantom, isMetaMask, isRabby] = [
+    strippedId?.includes("rainbow"),
+    strippedId?.includes("trust"),
+    strippedId?.includes("phantom"),
+    strippedId?.includes("coinbase"),
+    strippedId?.includes("metamask"),
+    strippedId?.includes("rabby")
+  ];
+  if (isMobile) {
+    if (!isMetaMask) icons.push(/* @__PURE__ */ jsx(MetaMask, {}));
+    if (!isTrust) icons.push(/* @__PURE__ */ jsx(Trust, { background: true }));
+    if (!isRainbow && icons.length < 3) icons.push(/* @__PURE__ */ jsx(Rainbow, {}));
+  } else {
+    if (!isMetaMask) icons.push(/* @__PURE__ */ jsx(MetaMask, {}));
+    if (!isRainbow) icons.push(/* @__PURE__ */ jsx(Rainbow, {}));
+    if (!isPhantom) icons.push(/* @__PURE__ */ jsx(Phantom, {}));
+    if (!isRabby && icons.length < 3) icons.push(/* @__PURE__ */ jsx(Rabby, {}));
+  }
+  return icons;
+}
+function getDepositAddressOption(setRoute, locales, excludeTron = false) {
+  const icons = excludeTron ? [/* @__PURE__ */ jsx(Ethereum, {}, "eth"), /* @__PURE__ */ jsx(Polygon, {}, "polygon"), /* @__PURE__ */ jsx(Base, {}, "base")] : [/* @__PURE__ */ jsx(Ethereum, {}, "eth"), /* @__PURE__ */ jsx(Tron, {}, "tron"), /* @__PURE__ */ jsx(Base, {}, "base")];
+  return {
+    id: "depositAddress",
+    title: locales.payToAddress,
+    icons,
+    onClick: () => {
+      setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+    }
+  };
+}
+
+export { SelectMethod as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Pages/SelectMethod/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Pages/SelectMethod/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport { PageContent } from \"../../Common/Modal/styles\";\n\nimport {\n  DepositAddressPaymentOptions,\n  getAddressContraction,\n} from \"@daimo/pay-common\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { Connector, useAccount, useConnections, useDisconnect } from \"wagmi\";\nimport { Base, Ethereum, Polygon, Solana, Tron } from \"../../../assets/chains\";\nimport {\n  MetaMask,\n  Phantom,\n  Rabby,\n  Rainbow,\n  Trust,\n  WalletIcon,\n} from \"../../../assets/logos\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { flattenChildren } from \"../../../utils\";\nimport { walletConfigs } from \"../../../wallets/walletConfigs\";\nimport { Option, OptionsList } from \"../../Common/OptionsList\";\nimport { OrderHeader } from \"../../Common/OrderHeader\";\nimport PoweredByFooter from \"../../Common/PoweredByFooter\";\nimport WalletChainLogo from \"../../Common/WalletChainLogo\";\n\nexport default function SelectMethod() {\n  const locales = useLocales();\n  const payWithString = flattenChildren(locales.payWith).join(\"\");\n  const { isMobile } = useIsMobile();\n\n  const {\n    address,\n    chain,\n    isConnected: isEthConnected,\n    connector,\n  } = useAccount();\n  const {\n    connected: isSolanaConnected,\n    wallet: solanaWallet,\n    disconnect: disconnectSolana,\n    publicKey,\n  } = useWallet();\n  const { setRoute, paymentState, log, disableMobileInjector } =\n    usePayContext();\n  const { disconnectAsync } = useDisconnect();\n  const connections = useConnections();\n\n  const { externalPaymentOptions, senderEnsName, topOptionsOrder } =\n    paymentState;\n\n  // Decide whether to show the connected eth account, solana account, or both.\n  // Desktop: Always show connected wallets when available\n  // Mobile: Only show connected wallets when mobile injector is enabled (!disableMobileInjector)\n  const showConnectedEth =\n    isEthConnected && (!isMobile || !disableMobileInjector);\n  const showConnectedSolana =\n    isSolanaConnected && (!isMobile || !disableMobileInjector);\n\n  const getConnectedWalletOptions = () => {\n    const showChainLogo = isEthConnected && isSolanaConnected;\n\n    const connectedOptions: Option[] = [];\n\n    if (showConnectedEth) {\n      const ethWalletDisplayName =\n        senderEnsName ?? (address ? getAddressContraction(address) : \"wallet\");\n\n      // Prefer icon from walletConfigs if there's a name match, otherwise fall back\n      // to the connector-provided icon, and finally to the generic WalletIcon.\n      let walletIcon: JSX.Element;\n\n      const matchedConfig = Object.values(walletConfigs).find((cfg) => {\n        if (!cfg.name || !connector?.name) return false;\n        const cfgName = cfg.name.toLowerCase();\n        const connName = connector.name.toLowerCase();\n        return cfgName.includes(connName) || connName.includes(cfgName);\n      });\n\n      if (matchedConfig?.icon) {\n        walletIcon =\n          typeof matchedConfig.icon === \"string\" ? (\n            <img src={matchedConfig.icon} alt={matchedConfig.name} />\n          ) : (\n            (matchedConfig.icon as JSX.Element)\n          );\n      } else if (connector?.icon) {\n        walletIcon = (\n          <div style={{ borderRadius: \"22.5%\", overflow: \"hidden\" }}>\n            <img src={connector.icon} alt={connector.name} />\n          </div>\n        );\n      } else {\n        walletIcon = <WalletIcon />;\n      }\n\n      const connectedEthWalletOption = {\n        id: \"connectedWallet\",\n        title: `${payWithString} ${ethWalletDisplayName}`,\n        icons: [\n          <WalletChainLogo\n            key=\"eth\"\n            walletIcon={walletIcon}\n            walletName={connector?.name || \"Wallet\"}\n            chainLogo={showChainLogo ? <Ethereum /> : null}\n          />,\n        ],\n        onClick: () => {\n          paymentState.setTokenMode(\"evm\");\n          setRoute(ROUTES.SELECT_TOKEN, {\n            event: \"click-wallet\",\n            walletId: connector?.id,\n            chainId: chain?.id,\n            address: address,\n          });\n        },\n      };\n      connectedOptions.push(connectedEthWalletOption);\n    }\n\n    if (showConnectedSolana) {\n      const solWalletDisplayName = getAddressContraction(\n        publicKey?.toBase58() ?? \"\",\n      );\n\n      // Prefer icon from walletConfigs if available\n      let solWalletIcon: React.ReactNode;\n      const solMatchedConfig = Object.values(walletConfigs).find((cfg) => {\n        if (!cfg.name) return false;\n        const cfgName = cfg.name.toLowerCase();\n        const solName = solanaWallet?.adapter.name.toLowerCase() || \"\";\n        return cfgName.includes(solName) || solName.includes(cfgName);\n      });\n\n      if (solMatchedConfig?.icon) {\n        solWalletIcon =\n          typeof solMatchedConfig.icon === \"string\" ? (\n            <img src={solMatchedConfig.icon} alt={solMatchedConfig.name} />\n          ) : (\n            (solMatchedConfig.icon as JSX.Element)\n          );\n      } else if (solanaWallet?.adapter.icon) {\n        solWalletIcon = solanaWallet.adapter.icon;\n      } else {\n        solWalletIcon = <Solana />;\n      }\n\n      const connectedSolWalletOption = {\n        id: \"connectedSolanaWallet\",\n        title: `${payWithString} ${solWalletDisplayName}`,\n        icons: [\n          <WalletChainLogo\n            key=\"sol-wallet\"\n            walletIcon={solWalletIcon}\n            walletName={solanaWallet?.adapter.name || \"Wallet\"}\n            chainLogo={showChainLogo && <Solana />}\n          />,\n        ],\n        onClick: () => {\n          paymentState.setTokenMode(\"solana\");\n          setRoute(ROUTES.SELECT_TOKEN, {\n            event: \"click-wallet\",\n            walletId: solanaWallet?.adapter.name,\n            chainId: \"solana\",\n            address: publicKey?.toBase58(),\n          });\n        },\n      };\n\n      connectedOptions.push(connectedSolWalletOption);\n    }\n\n    return connectedOptions;\n  };\n\n  const connectedWalletOptions = getConnectedWalletOptions();\n\n  // Get custom wallet list if specified\n  const walletOrder =\n    paymentState.externalPaymentOptions.parsedConfig.walletOrder;\n\n  const unconnectedWalletOption = {\n    id: \"unconnectedWallet\",\n    title:\n      isEthConnected || isSolanaConnected\n        ? locales.payWithAnotherWallet\n        : locales.payWithWallet,\n    icons: getBestUnconnectedWalletIcons(connector, isMobile, walletOrder),\n    onClick: async () => {\n      // Disconnect all wagmi connections in parallel\n      await Promise.allSettled(\n        connections.map((connection) =>\n          disconnectAsync({ connector: connection.connector }),\n        ),\n      );\n      await disconnectSolana();\n      setRoute(ROUTES.CONNECTORS);\n    },\n  };\n\n  log(\n    `[SELECT_METHOD] loading: ${externalPaymentOptions.loading}, options: ${JSON.stringify(\n      externalPaymentOptions.options,\n    )}`,\n  );\n\n  // Build categorized options\n  type CategorizedOption = {\n    id: string;\n    title: string;\n    subtitle?: string;\n    icons: (React.ReactNode | string)[];\n    onClick: () => void;\n    disabled?: boolean;\n    category: string;\n  };\n\n  const categorizedOptions: CategorizedOption[] = [];\n\n  // Connected wallets always appear first\n  connectedWalletOptions.forEach((opt) =>\n    categorizedOptions.push({ ...opt, category: \"connected\" }),\n  );\n\n  // Wallet options (unconnected) - only if AllWallets is in topOptionsOrder\n  if (topOptionsOrder.includes(\"AllWallets\")) {\n    categorizedOptions.push({\n      ...unconnectedWalletOption,\n      category: \"AllWallets\",\n    });\n  }\n\n  // Exchange options - only if AllExchanges is in topOptionsOrder\n  const exchangeOptions = externalPaymentOptions.options.get(\"exchange\") ?? [];\n  const showExchangePaymentMethod =\n    exchangeOptions.length > 0 && topOptionsOrder.includes(\"AllExchanges\");\n  if (showExchangePaymentMethod) {\n    categorizedOptions.push({\n      id: \"exchange\",\n      title: locales.payWithExchange,\n      icons: exchangeOptions.slice(0, 3).map((option) => option.logoURI),\n      onClick: () => {\n        setRoute(ROUTES.SELECT_EXCHANGE, {\n          event: \"click-option\",\n          option: \"exchange\",\n        });\n      },\n      category: \"AllExchanges\",\n    });\n  }\n\n  // Tron option - only if Tron is in topOptionsOrder\n  if (topOptionsOrder.includes(\"Tron\")) {\n    const tronOption = paymentState.depositAddressOptions.options?.find(\n      (option) => option.id === DepositAddressPaymentOptions.TRON_USDT,\n    );\n    if (tronOption) {\n      categorizedOptions.push({\n        id: \"tron\",\n        title: tronOption.id, // Use the actual title like \"USDT on Tron\"\n        icons: [tronOption.logoURI],\n        onClick: () => {\n          paymentState.setSelectedDepositAddressOption(tronOption);\n          setRoute(\n            paymentState.isDepositFlow\n              ? ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT\n              : ROUTES.WAITING_DEPOSIT_ADDRESS,\n            { event: \"select_tron\" },\n          );\n        },\n        category: \"Tron\",\n      });\n    }\n  }\n\n  // Deposit address options - only if AllAddresses is in topOptionsOrder\n  if (topOptionsOrder.includes(\"AllAddresses\")) {\n    const depositAddressOption = getDepositAddressOption(\n      setRoute,\n      locales,\n      topOptionsOrder.includes(\"Tron\"), // exclude Tron if shown separately\n    );\n    categorizedOptions.push({\n      ...depositAddressOption,\n      category: \"AllAddresses\",\n    });\n  }\n\n  // ZKP2P options - only if AllPaymentApps is in topOptionsOrder\n  const zkp2pOptions = externalPaymentOptions.options.get(\"zkp2p\") ?? [];\n  const showZkp2pPaymentMethod =\n    !isMobile &&\n    zkp2pOptions.length > 0 &&\n    topOptionsOrder.includes(\"AllPaymentApps\");\n  if (showZkp2pPaymentMethod) {\n    categorizedOptions.push({\n      id: \"ZKP2P\",\n      title: locales.payViaPaymentApp,\n      icons: zkp2pOptions.slice(0, 2).map((option) => option.logoURI),\n      onClick: () => {\n        setRoute(ROUTES.SELECT_ZKP2P);\n      },\n      category: \"AllPaymentApps\",\n    });\n  }\n\n  // Sort based on topOptionsOrder, keeping connected wallets first\n  const sortedOptions = categorizedOptions.sort((a, b) => {\n    // Connected wallets always first\n    if (a.category === \"connected\") return -1;\n    if (b.category === \"connected\") return 1;\n\n    // Then sort by topOptionsOrder\n    const aIndex = topOptionsOrder.indexOf(a.category);\n    const bIndex = topOptionsOrder.indexOf(b.category);\n\n    // If not in order list, put at the end\n    if (aIndex === -1 && bIndex === -1) return 0;\n    if (aIndex === -1) return 1;\n    if (bIndex === -1) return -1;\n\n    return aIndex - bIndex;\n  });\n\n  // Remove category field for final options\n  const options = sortedOptions.map(({ category, ...opt }) => opt);\n\n  // Order disabled to bottom\n  options.sort((a, b) => (a.disabled ? 1 : 0) - (b.disabled ? 1 : 0));\n\n  return (\n    <PageContent>\n      <OrderHeader />\n\n      <OptionsList\n        requiredSkeletons={3}\n        isLoading={externalPaymentOptions.loading}\n        options={externalPaymentOptions.loading ? [] : options}\n      />\n      <PoweredByFooter />\n    </PageContent>\n  );\n}\n\n// Get 3 icons, skipping the one that is already connected\nfunction getBestUnconnectedWalletIcons(\n  connector: Connector | undefined,\n  isMobile: boolean,\n  walletOrder?: string[],\n) {\n  const icons: JSX.Element[] = [];\n  const strippedId = connector?.id.toLowerCase();\n\n  // If custom wallet list is provided, use those wallets\n  if (walletOrder && walletOrder.length > 0 && isMobile) {\n    const maxIcons = 3;\n    for (const walletName of walletOrder) {\n      if (icons.length >= maxIcons) break;\n\n      // Skip if this wallet is already connected\n      if (strippedId?.includes(walletName.toLowerCase())) continue;\n\n      // Find wallet config\n      const walletId = Object.keys(walletConfigs).find((id) => {\n        const wallet = walletConfigs[id];\n        const nameLower = walletName.toLowerCase();\n        return (\n          wallet.name?.toLowerCase().includes(nameLower) ||\n          wallet.shortName?.toLowerCase().includes(nameLower) ||\n          id.toLowerCase().includes(nameLower)\n        );\n      });\n\n      if (walletId) {\n        const wallet = walletConfigs[walletId];\n        const icon = wallet.iconConnector || wallet.icon;\n        if (icon) {\n          icons.push(\n            <div\n              key={walletId}\n              style={{ borderRadius: \"22.5%\", overflow: \"hidden\" }}\n            >\n              {icon}\n            </div>,\n          );\n        }\n      }\n    }\n\n    if (icons.length > 0) return icons;\n  }\n\n  // Default icons (fallback)\n  const [isRainbow, isTrust, isPhantom, isMetaMask, isRabby] = [\n    strippedId?.includes(\"rainbow\"),\n    strippedId?.includes(\"trust\"),\n    strippedId?.includes(\"phantom\"),\n    strippedId?.includes(\"coinbase\"),\n    strippedId?.includes(\"metamask\"),\n    strippedId?.includes(\"rabby\"),\n  ];\n\n  if (isMobile) {\n    if (!isMetaMask) icons.push(<MetaMask />);\n    if (!isTrust) icons.push(<Trust background />);\n    if (!isRainbow && icons.length < 3) icons.push(<Rainbow />);\n  } else {\n    if (!isMetaMask) icons.push(<MetaMask />);\n    if (!isRainbow) icons.push(<Rainbow />);\n    if (!isPhantom) icons.push(<Phantom />);\n    if (!isRabby && icons.length < 3) icons.push(<Rabby />);\n  }\n\n  return icons;\n}\n\nfunction getDepositAddressOption(\n  setRoute: (route: ROUTES, data?: Record<string, any>) => void,\n  locales: ReturnType<typeof useLocales>,\n  excludeTron: boolean = false,\n) {\n  const icons = excludeTron\n    ? [<Ethereum key=\"eth\" />, <Polygon key=\"polygon\" />, <Base key=\"base\" />]\n    : [<Ethereum key=\"eth\" />, <Tron key=\"tron\" />, <Base key=\"base\" />];\n\n  return {\n    id: \"depositAddress\",\n    title: locales.payToAddress,\n    icons,\n    onClick: () => {\n      setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/build/pay/packages/connectkit/src/components/Pages/SelectToken/index.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useAccount, injected } from 'wagmi';
+import { Solana, Ethereum } from '../../../assets/chains.js';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import { useConnect } from '../../../hooks/useConnect.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { useTokenOptions } from '../../../hooks/useTokenOptions.js';
+import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
+import { OptionsList } from '../../Common/OptionsList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+import SelectAnotherMethodButton from '../../Common/SelectAnotherMethodButton/index.js';
+
+function SelectToken() {
+  const { isMobile } = useIsMobile();
+  const isMobileFormat = isMobile || window?.innerWidth < defaultTheme.mobileWidth;
+  const { paymentState } = usePayContext();
+  const { tokenMode } = paymentState;
+  const { optionsList, isLoading } = useTokenOptions(tokenMode);
+  const { isConnected: isEvmConnected } = useAccount();
+  const solanaWallets = useWallet();
+  const isSolConnected = solanaWallets.connected;
+  const isConnected = isEvmConnected || isSolConnected;
+  const isAnotherMethodButtonVisible = optionsList.length > 0 && tokenMode !== "all";
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(OrderHeader, { minified: true, show: tokenMode }),
+    /* @__PURE__ */ jsx(
+      OptionsList,
+      {
+        requiredSkeletons: 4,
+        isLoading,
+        options: optionsList,
+        scrollHeight: isAnotherMethodButtonVisible && isMobileFormat ? 225 : 300,
+        orDivider: isAnotherMethodButtonVisible,
+        hideBottomLine: !isAnotherMethodButtonVisible
+      }
+    ),
+    !isLoading && isConnected && optionsList.length === 0 && /* @__PURE__ */ jsx(InsufficientBalance, {}),
+    !isLoading && !isConnected && tokenMode === "all" && /* @__PURE__ */ jsx(ConnectButton, {}),
+    isAnotherMethodButtonVisible && /* @__PURE__ */ jsx(SelectAnotherMethodButton, {})
+  ] });
+}
+function InsufficientBalance() {
+  const locales = useLocales();
+  const { paymentState } = usePayContext();
+  const { tokenMode } = paymentState;
+  return /* @__PURE__ */ jsxs(
+    ModalContent,
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingTop: 16,
+        paddingBottom: 16
+      },
+      children: [
+        /* @__PURE__ */ jsx(ModalH1, { children: locales.insufficientBalance }),
+        tokenMode !== "all" && /* @__PURE__ */ jsx(SelectAnotherMethodButton, {})
+      ]
+    }
+  );
+}
+function ConnectButton() {
+  const locales = useLocales();
+  const { connect } = useConnect();
+  const solanaWallets = useWallet();
+  const filteredWallets = solanaWallets.wallets.filter(
+    (w) => w.adapter.name !== "Mobile Wallet Adapter"
+  );
+  const hasSolanaWallet = filteredWallets.length > 0;
+  const icons = [/* @__PURE__ */ jsx(Ethereum, {}, "ethereum")];
+  if (hasSolanaWallet) {
+    icons.push(/* @__PURE__ */ jsx(Solana, {}, "solana"));
+  }
+  const onClick = () => {
+    connect({
+      connector: injected()
+    });
+    if (hasSolanaWallet) {
+      if (solanaWallets.wallet == null) {
+        solanaWallets.select(solanaWallets.wallets[0].adapter.name);
+      }
+      solanaWallets.connect();
+    }
+  };
+  const connectOption = {
+    id: "connect-wallet",
+    title: locales.connectWallet,
+    icons,
+    onClick
+  };
+  return /* @__PURE__ */ jsx(OptionsList, { options: [connectOption] });
+}
+
+export { SelectToken as default };
+//# sourceMappingURL=index.js.map