@daimo/pay 1.19.2 → 1.19.4

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

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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");
+  if (!exchangeOptions) {
+    return /* @__PURE__ */ jsxs(PageContent, { children: [
+      /* @__PURE__ */ jsx(OrderHeader, { minified: true }),
+      /* @__PURE__ */ jsx(ModalH1, { children: "No Exchange options available" })
+    ] });
+  }
+  const options = exchangeOptions.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, { options })
+  ] });
+};
+
+export { SelectExchange as default };
+//# sourceMappingURL=index.js.map

package/build/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 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\n  if (!exchangeOptions) {\n    return (\n      <PageContent>\n        <OrderHeader minified />\n        <ModalH1>No Exchange options available</ModalH1>\n      </PageContent>\n    );\n  }\n\n  const options = exchangeOptions.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 options={options} />\n    </PageContent>\n  );\n};\n\nexport default SelectExchange;\n"],"names":[],"mappings":";;;;;;;AASA,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;AAErE,EAAA,IAAI,CAAC,eAAiB,EAAA;AACpB,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;AAEA,EAAA,MAAM,OAAU,GAAA,eAAA,CAAgB,GAAI,CAAA,CAAC,MAAY,MAAA;AAAA,IAC/C,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,CAAC,eAAY,OAAkB,EAAA,CAAA;AAAA,GACjC,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/build/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/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/connectkit/src/components/Pages/SelectMethod/index.js

@@ -0,0 +1,230 @@
+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 { getAddressContraction } from '@daimo/pay-common';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useAccount, useDisconnect } from 'wagmi';
+import { Ethereum, Solana, Tron, Base } 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, isIOS, isAndroid } = useIsMobile();
+  const {
+    address,
+    chain,
+    isConnected: isEthConnected,
+    connector
+  } = useAccount();
+  const {
+    connected: isSolanaConnected,
+    wallet: solanaWallet,
+    disconnect: disconnectSolana,
+    publicKey
+  } = useWallet();
+  const { setRoute, paymentState, log, disableMobileInjector } = usePayContext();
+  const { showSolanaPaymentMethod } = paymentState;
+  const { disconnectAsync } = useDisconnect();
+  const { externalPaymentOptions, senderEnsName } = paymentState;
+  const showConnectedEth = isEthConnected && (!isMobile || !disableMobileInjector);
+  const showConnectedSolana = isSolanaConnected && (!isMobile || !disableMobileInjector);
+  const getConnectedWalletOptions = () => {
+    const showChainLogo = isEthConnected && isSolanaConnected && showSolanaPaymentMethod;
+    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 && showSolanaPaymentMethod) {
+      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 unconnectedWalletOption = {
+    id: "unconnectedWallet",
+    title: isEthConnected || isSolanaConnected ? locales.payWithAnotherWallet : locales.payWithWallet,
+    icons: getBestUnconnectedWalletIcons(connector, isMobile),
+    onClick: async () => {
+      await disconnectAsync();
+      await disconnectSolana();
+      setRoute(ROUTES.CONNECTORS);
+    }
+  };
+  const options = [];
+  options.push(...connectedWalletOptions);
+  options.push(unconnectedWalletOption);
+  log(
+    `[SELECT_METHOD] loading: ${externalPaymentOptions.loading}, options: ${JSON.stringify(
+      externalPaymentOptions.options
+    )}`
+  );
+  const exchangeOptions = externalPaymentOptions.options.get("exchange") ?? [];
+  const showExchangePaymentMethod = exchangeOptions.length > 0;
+  if (showExchangePaymentMethod) {
+    options.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"
+        });
+      }
+    });
+  }
+  const depositAddressOption = getDepositAddressOption(setRoute, locales);
+  options.push(depositAddressOption);
+  const zkp2pOptions = externalPaymentOptions.options.get("zkp2p") ?? [];
+  const showZkp2pPaymentMethod = !isMobile && zkp2pOptions.length > 0;
+  if (showZkp2pPaymentMethod) {
+    options.push({
+      id: "ZKP2P",
+      title: locales.payViaPaymentApp,
+      icons: zkp2pOptions.slice(0, 2).map((option) => option.logoURI),
+      onClick: () => {
+        setRoute(ROUTES.SELECT_ZKP2P);
+      }
+    });
+  }
+  options.sort((a, b) => (a.disabled ? 1 : 0) - (b.disabled ? 1 : 0));
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(OrderHeader, {}),
+    /* @__PURE__ */ jsx(
+      OptionsList,
+      {
+        requiredSkeletons: isMobile ? 3 : 4,
+        isLoading: externalPaymentOptions.loading,
+        options: externalPaymentOptions.loading ? [] : options
+      }
+    ),
+    /* @__PURE__ */ jsx(PoweredByFooter, {})
+  ] });
+}
+function getBestUnconnectedWalletIcons(connector, isMobile) {
+  const icons = [];
+  const strippedId = connector?.id.toLowerCase();
+  const [isRainbow, isPhantom, isRabby, isMetaMask] = [
+    strippedId?.includes("rainbow"),
+    strippedId?.includes("trust"),
+    strippedId?.includes("phantom"),
+    strippedId?.includes("coinbase"),
+    strippedId?.includes("metamask"),
+    strippedId?.includes("rabby"),
+    strippedId?.includes("metamask")
+  ];
+  if (isMobile) {
+    icons.push(/* @__PURE__ */ jsx(MetaMask, {}));
+    icons.push(/* @__PURE__ */ jsx(Trust, { background: true }));
+    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) {
+  return {
+    id: "depositAddress",
+    title: locales.payToAddress,
+    icons: [/* @__PURE__ */ jsx(Ethereum, {}, "eth"), /* @__PURE__ */ jsx(Tron, {}, "tron"), /* @__PURE__ */ jsx(Base, {}, "base")],
+    onClick: () => {
+      setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+    }
+  };
+}
+
+export { SelectMethod as default };
+//# sourceMappingURL=index.js.map

package/build/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 { getAddressContraction } from \"@daimo/pay-common\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { Connector, useAccount, useDisconnect } from \"wagmi\";\nimport { Base, Ethereum, 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, isIOS, isAndroid } = 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 { showSolanaPaymentMethod } = paymentState;\n  const { disconnectAsync } = useDisconnect();\n\n  const { externalPaymentOptions, senderEnsName } = 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 =\n      isEthConnected && isSolanaConnected && showSolanaPaymentMethod;\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 && showSolanaPaymentMethod) {\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  const unconnectedWalletOption = {\n    id: \"unconnectedWallet\",\n    title:\n      isEthConnected || isSolanaConnected\n        ? locales.payWithAnotherWallet\n        : locales.payWithWallet,\n    icons: getBestUnconnectedWalletIcons(connector, isMobile),\n    onClick: async () => {\n      await disconnectAsync();\n      await disconnectSolana();\n      setRoute(ROUTES.CONNECTORS);\n    },\n  };\n\n  const options: {\n    id: string;\n    title: string;\n    subtitle?: string;\n    icons: (React.ReactNode | string)[];\n    onClick: () => void;\n    disabled?: boolean;\n  }[] = [];\n  options.push(...connectedWalletOptions);\n  options.push(unconnectedWalletOption);\n\n  log(\n    `[SELECT_METHOD] loading: ${externalPaymentOptions.loading}, options: ${JSON.stringify(\n      externalPaymentOptions.options,\n    )}`,\n  );\n\n  // Pay with Exchange\n  const exchangeOptions = externalPaymentOptions.options.get(\"exchange\") ?? [];\n\n  const showExchangePaymentMethod = exchangeOptions.length > 0;\n  if (showExchangePaymentMethod) {\n    options.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    });\n  }\n\n  const depositAddressOption = getDepositAddressOption(setRoute, locales);\n  options.push(depositAddressOption);\n\n  // ZKP2P is currently only available on desktop. Check if the user is on\n  // desktop and if any ZKP2P options are available.\n  const zkp2pOptions = externalPaymentOptions.options.get(\"zkp2p\") ?? [];\n  const showZkp2pPaymentMethod = !isMobile && zkp2pOptions.length > 0;\n  if (showZkp2pPaymentMethod) {\n    options.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    });\n  }\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={isMobile ? 3 : 4}\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) {\n  const icons: JSX.Element[] = [];\n  const strippedId = connector?.id.toLowerCase(); // some connector ids can have weird casing and or suffixes and prefixes\n  const [isRainbow, isPhantom, isRabby, isMetaMask] = [\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    strippedId?.includes(\"metamask\"),\n  ];\n\n  if (isMobile) {\n    icons.push(<MetaMask />);\n    icons.push(<Trust background />);\n    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) {\n  return {\n    id: \"depositAddress\",\n    title: locales.payToAddress,\n    icons: [<Ethereum key=\"eth\" />, <Tron key=\"tron\" />, <Base key=\"base\" />],\n    onClick: () => {\n      setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,97 @@
+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();
+  return /* @__PURE__ */ jsxs(
+    ModalContent,
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingTop: 16,
+        paddingBottom: 16
+      },
+      children: [
+        /* @__PURE__ */ jsx(ModalH1, { children: locales.insufficientBalance }),
+        /* @__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

package/build/connectkit/src/components/Pages/SelectToken/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/SelectToken/index.tsx"],"sourcesContent":["import { useWallet } from \"@solana/wallet-adapter-react\";\nimport { injected, useAccount } from \"wagmi\";\nimport { Ethereum, Solana } from \"../../../assets/chains\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport { useConnect } from \"../../../hooks/useConnect\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport { useTokenOptions } from \"../../../hooks/useTokenOptions\";\nimport { ModalContent, ModalH1, PageContent } from \"../../Common/Modal/styles\";\nimport { OptionsList } from \"../../Common/OptionsList\";\nimport { OrderHeader } from \"../../Common/OrderHeader\";\nimport SelectAnotherMethodButton from \"../../Common/SelectAnotherMethodButton\";\n\nexport default function SelectToken() {\n  const { isMobile } = useIsMobile();\n  const isMobileFormat =\n    isMobile || window?.innerWidth < defaultTheme.mobileWidth;\n\n  const { paymentState } = usePayContext();\n  const { tokenMode } = paymentState;\n  const { optionsList, isLoading } = useTokenOptions(tokenMode);\n  const { isConnected: isEvmConnected } = useAccount();\n\n  const solanaWallets = useWallet();\n  const isSolConnected = solanaWallets.connected;\n  const isConnected = isEvmConnected || isSolConnected;\n\n  const isAnotherMethodButtonVisible =\n    optionsList.length > 0 && tokenMode !== \"all\";\n  return (\n    <PageContent>\n      <OrderHeader minified show={tokenMode} />\n      <OptionsList\n        requiredSkeletons={4}\n        isLoading={isLoading}\n        options={optionsList}\n        scrollHeight={\n          isAnotherMethodButtonVisible && isMobileFormat ? 225 : 300\n        }\n        orDivider={isAnotherMethodButtonVisible}\n        hideBottomLine={!isAnotherMethodButtonVisible}\n      />\n      {!isLoading && isConnected && optionsList.length === 0 && (\n        <InsufficientBalance />\n      )}\n      {!isLoading && !isConnected && tokenMode === \"all\" && <ConnectButton />}\n      {isAnotherMethodButtonVisible && <SelectAnotherMethodButton />}\n    </PageContent>\n  );\n}\n\nfunction InsufficientBalance() {\n  const locales = useLocales();\n  return (\n    <ModalContent\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        paddingTop: 16,\n        paddingBottom: 16,\n      }}\n    >\n      <ModalH1>{locales.insufficientBalance}</ModalH1>\n      <SelectAnotherMethodButton />\n    </ModalContent>\n  );\n}\n\nfunction ConnectButton() {\n  const locales = useLocales();\n  const { connect } = useConnect();\n  const solanaWallets = useWallet();\n  // On Android, filter out the Android Intent deeplink fake wallet.\n  const filteredWallets = solanaWallets.wallets.filter(\n    (w) => w.adapter.name !== \"Mobile Wallet Adapter\",\n  );\n  const hasSolanaWallet = filteredWallets.length > 0;\n\n  const icons = [<Ethereum key=\"ethereum\" />];\n  if (hasSolanaWallet) {\n    icons.push(<Solana key=\"solana\" />);\n  }\n\n  const onClick = () => {\n    connect({\n      connector: injected(),\n    });\n    if (hasSolanaWallet) {\n      if (solanaWallets.wallet == null) {\n        solanaWallets.select(solanaWallets.wallets[0].adapter.name);\n      }\n      solanaWallets.connect();\n    }\n  };\n\n  const connectOption = {\n    id: \"connect-wallet\",\n    title: locales.connectWallet,\n    icons,\n    onClick,\n  };\n\n  return <OptionsList options={[connectOption]} />;\n}\n"],"names":[],"mappings":"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"}

package/build/connectkit/src/components/Pages/SelectWalletAmount/index.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { ROUTES } from '../../../constants/routes.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, ModalContent } from '../../Common/Modal/styles.js';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import styled from '../../../styles/styled/index.js';
+import { USD_DECIMALS } from '../../../utils/format.js';
+import { isValidNumber, sanitizeNumber } from '../../../utils/validateInput.js';
+import { WALLET_ID_MOBILE_WALLETS } from '../../../wallets/useWallets.js';
+import AmountInputField from '../../Common/AmountInput/AmountInputField.js';
+import Button from '../../Common/Button/index.js';
+import WalletPaymentSpinner from '../../Spinners/WalletPaymentSpinner/index.js';
+
+const SelectWalletAmount = () => {
+  const { paymentState, setPendingConnectorId, setRoute } = usePayContext();
+  const { selectedWallet, openInWalletBrowser } = paymentState;
+  const { setChosenUsd, hydrateOrder } = useDaimoPay();
+  const { isMobile } = useIsMobile();
+  const maxUsdLimit = paymentState.getOrderUsdLimit();
+  const [usdInput, setUsdInput] = useState("");
+  const [continueDisabled, setContinueDisabled] = useState(true);
+  if (selectedWallet == null) {
+    return /* @__PURE__ */ jsx(PageContent, {});
+  }
+  const handleAmountChange = (e) => {
+    const value = e.target.value;
+    if (value !== "" && !isValidNumber(value, USD_DECIMALS)) return;
+    setUsdInput(value);
+    const usd = Number(sanitizeNumber(value));
+    setContinueDisabled(usd <= 0 || usd > maxUsdLimit);
+  };
+  const handleContinue = async () => {
+    const amountUsd = Number(sanitizeNumber(usdInput));
+    setChosenUsd(amountUsd);
+    await hydrateOrder();
+    if (selectedWallet.id === WALLET_ID_MOBILE_WALLETS || selectedWallet.id === "world" && !isMobile) {
+      setPendingConnectorId(selectedWallet.id);
+      setRoute(ROUTES.CONNECT);
+    } else {
+      openInWalletBrowser(selectedWallet, amountUsd);
+    }
+  };
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(
+      WalletPaymentSpinner,
+      {
+        logo: selectedWallet.icon,
+        logoShape: selectedWallet.iconShape === "square" ? "squircle" : selectedWallet.iconShape || "squircle"
+      }
+    ),
+    /* @__PURE__ */ jsxs(ModalContent, { $preserveDisplay: true, children: [
+      /* @__PURE__ */ jsx(AmountInputContainer, { children: /* @__PURE__ */ jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange }) }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })
+    ] })
+  ] });
+};
+const AmountInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export { SelectWalletAmount as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Pages/SelectWalletAmount/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/SelectWalletAmount/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport { ModalContent, PageContent } from \"../../Common/Modal/styles\";\n\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport styled from \"../../../styles/styled\";\nimport { USD_DECIMALS } from \"../../../utils/format\";\nimport { isValidNumber, sanitizeNumber } from \"../../../utils/validateInput\";\nimport { WALLET_ID_MOBILE_WALLETS } from \"../../../wallets/useWallets\";\nimport AmountInputField from \"../../Common/AmountInput/AmountInputField\";\nimport Button from \"../../Common/Button\";\nimport WalletPaymentSpinner from \"../../Spinners/WalletPaymentSpinner\";\n\nconst SelectWalletAmount: React.FC = () => {\n  const { paymentState, setPendingConnectorId, setRoute } = usePayContext();\n  const { selectedWallet, openInWalletBrowser } = paymentState;\n  const { setChosenUsd, hydrateOrder } = useDaimoPay();\n  const { isMobile } = useIsMobile();\n  const maxUsdLimit = paymentState.getOrderUsdLimit();\n\n  const [usdInput, setUsdInput] = useState<string>(\"\");\n  const [continueDisabled, setContinueDisabled] = useState(true);\n\n  if (selectedWallet == 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    setUsdInput(value);\n\n    const usd = Number(sanitizeNumber(value));\n    setContinueDisabled(usd <= 0 || usd > maxUsdLimit);\n  };\n\n  const handleContinue = async () => {\n    const amountUsd = Number(sanitizeNumber(usdInput));\n    setChosenUsd(amountUsd);\n    await hydrateOrder();\n    if (\n      selectedWallet.id === WALLET_ID_MOBILE_WALLETS ||\n      (selectedWallet.id === \"world\" && !isMobile)\n    ) {\n      setPendingConnectorId(selectedWallet.id);\n      setRoute(ROUTES.CONNECT);\n    } else {\n      openInWalletBrowser(selectedWallet, amountUsd);\n    }\n  };\n\n  return (\n    <PageContent>\n      <WalletPaymentSpinner\n        logo={selectedWallet.icon}\n        logoShape={\n          selectedWallet.iconShape === \"square\"\n            ? \"squircle\"\n            : selectedWallet.iconShape || \"squircle\"\n        }\n      />\n      <ModalContent $preserveDisplay={true}>\n        <AmountInputContainer>\n          <AmountInputField value={usdInput} onChange={handleAmountChange} />\n        </AmountInputContainer>\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 SelectWalletAmount;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,qBAA+B,MAAM;AACzC,EAAA,MAAM,EAAE,YAAA,EAAc,qBAAuB,EAAA,QAAA,KAAa,aAAc,EAAA,CAAA;AACxE,EAAM,MAAA,EAAE,cAAgB,EAAA,mBAAA,EAAwB,GAAA,YAAA,CAAA;AAChD,EAAA,MAAM,EAAE,YAAA,EAAc,YAAa,EAAA,GAAI,WAAY,EAAA,CAAA;AACnD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,WAAY,EAAA,CAAA;AACjC,EAAM,MAAA,WAAA,GAAc,aAAa,gBAAiB,EAAA,CAAA;AAElD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAiB,EAAE,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAE7D,EAAA,IAAI,kBAAkB,IAAM,EAAA;AAC1B,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA,CAAA;AAAA,GACtB;AAEA,EAAM,MAAA,kBAAA,GAAqB,CAAC,CAA2C,KAAA;AACrE,IAAM,MAAA,KAAA,GAAQ,EAAE,MAAO,CAAA,KAAA,CAAA;AACvB,IAAA,IAAI,UAAU,EAAM,IAAA,CAAC,aAAc,CAAA,KAAA,EAAO,YAAY,CAAG,EAAA,OAAA;AACzD,IAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAEjB,IAAA,MAAM,GAAM,GAAA,MAAA,CAAO,cAAe,CAAA,KAAK,CAAC,CAAA,CAAA;AACxC,IAAoB,mBAAA,CAAA,GAAA,IAAO,CAAK,IAAA,GAAA,GAAM,WAAW,CAAA,CAAA;AAAA,GACnD,CAAA;AAEA,EAAA,MAAM,iBAAiB,YAAY;AACjC,IAAA,MAAM,SAAY,GAAA,MAAA,CAAO,cAAe,CAAA,QAAQ,CAAC,CAAA,CAAA;AACjD,IAAA,YAAA,CAAa,SAAS,CAAA,CAAA;AACtB,IAAA,MAAM,YAAa,EAAA,CAAA;AACnB,IAAA,IACE,eAAe,EAAO,KAAA,wBAAA,IACrB,eAAe,EAAO,KAAA,OAAA,IAAW,CAAC,QACnC,EAAA;AACA,MAAA,qBAAA,CAAsB,eAAe,EAAE,CAAA,CAAA;AACvC,MAAA,QAAA,CAAS,OAAO,OAAO,CAAA,CAAA;AAAA,KAClB,MAAA;AACL,MAAA,mBAAA,CAAoB,gBAAgB,SAAS,CAAA,CAAA;AAAA,KAC/C;AAAA,GACF,CAAA;AAEA,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,MAAM,cAAe,CAAA,IAAA;AAAA,QACrB,WACE,cAAe,CAAA,SAAA,KAAc,QACzB,GAAA,UAAA,GACA,eAAe,SAAa,IAAA,UAAA;AAAA,OAAA;AAAA,KAEpC;AAAA,oBACA,IAAA,CAAC,YAAa,EAAA,EAAA,gBAAA,EAAkB,IAC9B,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,wBACC,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAiB,OAAO,QAAU,EAAA,QAAA,EAAU,oBAAoB,CACnE,EAAA,CAAA;AAAA,0BACC,MAAO,EAAA,EAAA,OAAA,EAAS,cAAgB,EAAA,QAAA,EAAU,kBAAkB,QAE7D,EAAA,UAAA,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,uBAAuB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}