@daimo/pay 1.18.2 → 1.19.0

package/build/connectkit/src/components/Pages/Onboarding/styles.js

@@ -0,0 +1,229 @@
+import { motion } from 'framer-motion';
+import { keyframes } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+
+const Graphic = styled(motion.div)`
+  position: relative;
+  margin: 16px auto 20px;
+  height: 190px;
+  max-width: 295px;
+  pointer-events: none;
+  user-select: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    height: 200px;
+    max-width: 100%;
+    margin-bottom: 32px;
+  }
+`;
+const LogoGroup = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+`;
+const graphicIn = keyframes`
+  0%{
+    opacity:0;
+    transform:scale(0.9);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+const GraphicBackground = styled(motion.div)`
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  top: -2px;
+  overflow: hidden;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--ck-body-background);
+    background: radial-gradient(
+      closest-side,
+      var(--ck-body-background-transparent, transparent) 18.75%,
+      var(--ck-body-background) 100%
+    );
+    background-size: 100%;
+  }
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  animation: ${graphicIn} 1000ms 100ms ease both;
+  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+  //   animation: none;
+  // }
+`;
+const logoIn = keyframes`
+  0%{
+    opacity:0;
+    transform:scale(0) translateY(40%);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+const LogoPosition = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-delay: inherit;
+`;
+const LogoInner = styled(motion.div)`
+  position: absolute;
+`;
+const LogoGraphic = styled(motion.div)`
+  position: relative;
+  overflow: hidden;
+  height: 58px;
+  width: 58px;
+  border-radius: 13.84px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 2px 20px 0 rgba(0, 0, 0, 0.03);
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const float = keyframes`
+  0%,100%{ transform:none; }
+  50%{ transform: translateY(-10%) }
+`;
+const FloatWrapper = styled(motion.div)`
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${float};
+  animation-duration: 3600ms;
+`;
+const rotate = keyframes`
+  0%,100%{ transform:rotate(-3deg); }
+  50%{ transform:rotate(3deg); }
+`;
+const RotateWrapper = styled(motion.div)`
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${rotate};
+  animation-duration: 3200ms;
+`;
+const Logo = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+
+  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
+  &:nth-child(1) {
+    z-index: 2;
+    animation-delay: 0ms;
+  }
+  &:nth-child(2) {
+    z-index: 1;
+    animation-delay: 60ms;
+  }
+  &:nth-child(3) {
+    z-index: 1;
+    animation-delay: 30ms;
+  }
+  &:nth-child(4) {
+    z-index: 1;
+    animation-delay: 90ms;
+  }
+  &:nth-child(5) {
+    z-index: 1;
+    animation-delay: 120ms;
+  }
+
+  &:nth-child(1) {
+    ${RotateWrapper} {
+      animation-delay: 0ms;
+    }
+  }
+  &:nth-child(2) {
+    ${RotateWrapper} {
+      animation-delay: -600ms;
+    }
+  }
+  &:nth-child(3) {
+    ${RotateWrapper} {
+      animation-delay: -1200ms;
+    }
+  }
+  &:nth-child(4) {
+    ${RotateWrapper} {
+      animation-delay: -1800ms;
+    }
+  }
+  &:nth-child(5) {
+    ${RotateWrapper} {
+      animation-delay: -2400ms;
+    }
+  }
+
+  &:nth-child(1) {
+    ${FloatWrapper} {
+      animation-delay: -200ms;
+    }
+  }
+  &:nth-child(2) {
+    ${FloatWrapper} {
+      animation-delay: -600ms;
+    }
+  }
+  &:nth-child(3) {
+    ${FloatWrapper} {
+      animation-delay: -800ms;
+    }
+  }
+  &:nth-child(4) {
+    ${FloatWrapper} {
+      animation-delay: -300ms;
+    }
+  }
+  &:nth-child(5) {
+    ${FloatWrapper} {
+      animation-delay: -3200ms;
+    }
+  }
+
+  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+  //   animation: none !important;
+  //   ${RotateWrapper},${FloatWrapper} {
+  //     animation: none !important;
+  //   }
+  }
+
+  ${LogoInner} {
+    transform: translate(-50%, -50%);
+  }
+
+  &:nth-child(1) ${LogoPosition} {
+    transform: translate(50%, 50%);
+    ${LogoGraphic} {
+      border-radius: 17.2px;
+      width: 72px;
+      height: 72px;
+    }
+  }
+  &:nth-child(2) ${LogoPosition} {
+    transform: translate(21%, 21.5%);
+  }
+  &:nth-child(3) ${LogoPosition} {
+    transform: translate(78%, 14%);
+  }
+  &:nth-child(4) ${LogoPosition} {
+    transform: translate(22.5%, 76%);
+  }
+  &:nth-child(5) ${LogoPosition} {
+    transform: translate(76%, 80%);
+  }
+`;
+
+export { FloatWrapper, Graphic, GraphicBackground, Logo, LogoGraphic, LogoGroup, LogoInner, LogoPosition, RotateWrapper };
+//# sourceMappingURL=styles.js.map

package/build/connectkit/src/components/Pages/Onboarding/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Pages/Onboarding/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { keyframes } from \"styled-components\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"./../../../styles/styled\";\n\nexport const Graphic = styled(motion.div)`\n  position: relative;\n  margin: 16px auto 20px;\n  height: 190px;\n  max-width: 295px;\n  pointer-events: none;\n  user-select: none;\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    height: 200px;\n    max-width: 100%;\n    margin-bottom: 32px;\n  }\n`;\nexport const LogoGroup = styled(motion.div)`\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n`;\nconst graphicIn = keyframes`\n  0%{\n    opacity:0;\n    transform:scale(0.9);\n  }\n  100%{\n    opacity:1;\n    transform:none;\n  }\n`;\nexport const GraphicBackground = styled(motion.div)`\n  z-index: 1;\n  position: absolute;\n  inset: 0;\n  top: -2px;\n  overflow: hidden;\n  &:before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: var(--ck-body-background);\n    background: radial-gradient(\n      closest-side,\n      var(--ck-body-background-transparent, transparent) 18.75%,\n      var(--ck-body-background) 100%\n    );\n    background-size: 100%;\n  }\n  svg {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n  animation: ${graphicIn} 1000ms 100ms ease both;\n  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n  //   animation: none;\n  // }\n`;\n\nconst logoIn = keyframes`\n  0%{\n    opacity:0;\n    transform:scale(0) translateY(40%);\n  }\n  100%{\n    opacity:1;\n    transform:none;\n  }\n`;\nexport const LogoPosition = styled(motion.div)`\n  position: absolute;\n  inset: 0;\n  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;\n  animation-delay: inherit;\n`;\nexport const LogoInner = styled(motion.div)`\n  position: absolute;\n`;\nexport const LogoGraphic = styled(motion.div)`\n  position: relative;\n  overflow: hidden;\n  height: 58px;\n  width: 58px;\n  border-radius: 13.84px;\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.05),\n    0 2px 20px 0 rgba(0, 0, 0, 0.03);\n\n  svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n`;\nconst float = keyframes`\n  0%,100%{ transform:none; }\n  50%{ transform: translateY(-10%) }\n`;\nexport const FloatWrapper = styled(motion.div)`\n  position: relative;\n  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;\n  animation-name: ${float};\n  animation-duration: 3600ms;\n`;\nconst rotate = keyframes`\n  0%,100%{ transform:rotate(-3deg); }\n  50%{ transform:rotate(3deg); }\n`;\nexport const RotateWrapper = styled(motion.div)`\n  position: relative;\n  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;\n  animation-name: ${rotate};\n  animation-duration: 3200ms;\n`;\nexport const Logo = styled(motion.div)`\n  position: absolute;\n  inset: 0;\n\n  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;\n  &:nth-child(1) {\n    z-index: 2;\n    animation-delay: 0ms;\n  }\n  &:nth-child(2) {\n    z-index: 1;\n    animation-delay: 60ms;\n  }\n  &:nth-child(3) {\n    z-index: 1;\n    animation-delay: 30ms;\n  }\n  &:nth-child(4) {\n    z-index: 1;\n    animation-delay: 90ms;\n  }\n  &:nth-child(5) {\n    z-index: 1;\n    animation-delay: 120ms;\n  }\n\n  &:nth-child(1) {\n    ${RotateWrapper} {\n      animation-delay: 0ms;\n    }\n  }\n  &:nth-child(2) {\n    ${RotateWrapper} {\n      animation-delay: -600ms;\n    }\n  }\n  &:nth-child(3) {\n    ${RotateWrapper} {\n      animation-delay: -1200ms;\n    }\n  }\n  &:nth-child(4) {\n    ${RotateWrapper} {\n      animation-delay: -1800ms;\n    }\n  }\n  &:nth-child(5) {\n    ${RotateWrapper} {\n      animation-delay: -2400ms;\n    }\n  }\n\n  &:nth-child(1) {\n    ${FloatWrapper} {\n      animation-delay: -200ms;\n    }\n  }\n  &:nth-child(2) {\n    ${FloatWrapper} {\n      animation-delay: -600ms;\n    }\n  }\n  &:nth-child(3) {\n    ${FloatWrapper} {\n      animation-delay: -800ms;\n    }\n  }\n  &:nth-child(4) {\n    ${FloatWrapper} {\n      animation-delay: -300ms;\n    }\n  }\n  &:nth-child(5) {\n    ${FloatWrapper} {\n      animation-delay: -3200ms;\n    }\n  }\n\n  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n  //   animation: none !important;\n  //   ${RotateWrapper},${FloatWrapper} {\n  //     animation: none !important;\n  //   }\n  }\n\n  ${LogoInner} {\n    transform: translate(-50%, -50%);\n  }\n\n  &:nth-child(1) ${LogoPosition} {\n    transform: translate(50%, 50%);\n    ${LogoGraphic} {\n      border-radius: 17.2px;\n      width: 72px;\n      height: 72px;\n    }\n  }\n  &:nth-child(2) ${LogoPosition} {\n    transform: translate(21%, 21.5%);\n  }\n  &:nth-child(3) ${LogoPosition} {\n    transform: translate(78%, 14%);\n  }\n  &:nth-child(4) ${LogoPosition} {\n    transform: translate(22.5%, 76%);\n  }\n  &:nth-child(5) ${LogoPosition} {\n    transform: translate(76%, 80%);\n  }\n`;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getChainExplorerTxUrl } from '@daimo/pay-common';
+import { useState, useEffect } from 'react';
+import { useChainId, useSwitchChain } from 'wagmi';
+import { ROUTES } from '../../../constants/routes.js';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { getSupportUrl } from '../../../utils/supportUrl.js';
+import Button from '../../Common/Button/index.js';
+import { PageContent, ModalContent, ModalH1, Link } from '../../Common/Modal/styles.js';
+import PaymentBreakdown from '../../Common/PaymentBreakdown/index.js';
+import TokenLogoSpinner from '../../Spinners/TokenLogoSpinner/index.js';
+
+const PayWithToken = () => {
+  const { triggerResize, paymentState, setRoute, log, trpc } = usePayContext();
+  const { payWithToken, selectedTokenOption } = paymentState;
+  const { order } = useDaimoPay();
+  const [payState, setPayStateInner] = useState(
+    "Waiting For Payment" /* RequestingPayment */
+  );
+  const setPayState = (state) => {
+    setPayStateInner(state);
+    log(`[PAY TOKEN] payState: ${state}`);
+    trpc.nav.mutate({
+      action: "pay-with-token-state",
+      data: { state }
+    });
+  };
+  const [txURL, setTxURL] = useState();
+  const locales = useLocales();
+  const walletChainId = useChainId();
+  const { switchChainAsync } = useSwitchChain();
+  const trySwitchingChain = async (option, forceSwitch = false) => {
+    if (walletChainId !== option.required.token.chainId || forceSwitch) {
+      const resultChain = await (async () => {
+        try {
+          return await switchChainAsync({
+            chainId: option.required.token.chainId
+          });
+        } catch (e) {
+          console.error("Failed to switch chain", e);
+          return null;
+        }
+      })();
+      if (resultChain?.id !== option.required.token.chainId) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const handleTransfer = async (option) => {
+    setPayState("Switching Chain" /* SwitchingChain */);
+    const switchChain = await trySwitchingChain(option);
+    if (!switchChain) {
+      console.error("Switching chain failed");
+      setPayState("Payment Cancelled" /* RequestCancelled */);
+      return;
+    }
+    setPayState("Waiting For Payment" /* RequestingPayment */);
+    try {
+      const result = await payWithToken(option);
+      if (!result.txHash) {
+        return;
+      }
+      setTxURL(
+        getChainExplorerTxUrl(option.required.token.chainId, result.txHash)
+      );
+      if (result.success) {
+        setPayState("Payment Successful" /* RequestSuccessful */);
+        setTimeout(() => {
+          setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-token" });
+        }, 200);
+      } else {
+        setPayState("Payment Failed" /* RequestFailed */);
+      }
+    } catch (e) {
+      if (e?.name === "ConnectorChainMismatchError") {
+        log("Chain mismatch detected, attempting to switch and retry");
+        const switchSuccessful = await trySwitchingChain(option, true);
+        if (switchSuccessful) {
+          setPayState("Waiting For Payment" /* RequestingPayment */);
+          try {
+            const retryResult = await payWithToken(option);
+            if (!retryResult.txHash) {
+              return;
+            }
+            setTxURL(
+              getChainExplorerTxUrl(
+                option.required.token.chainId,
+                retryResult.txHash
+              )
+            );
+            if (retryResult.success) {
+              setPayState("Payment Successful" /* RequestSuccessful */);
+              setTimeout(() => {
+                setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-token" });
+              }, 200);
+            } else {
+              setPayState("Payment Failed" /* RequestFailed */);
+            }
+            return;
+          } catch (retryError) {
+            console.error(
+              "Failed to pay with token after switching chain",
+              retryError
+            );
+            throw retryError;
+          }
+        }
+      }
+      setPayState("Payment Cancelled" /* RequestCancelled */);
+      console.error("Failed to pay with token", e);
+    }
+  };
+  useEffect(() => {
+    if (!selectedTokenOption) return;
+    const transferTimeout = setTimeout(() => {
+      handleTransfer(selectedTokenOption);
+    }, 100);
+    return () => {
+      clearTimeout(transferTimeout);
+    };
+  }, [selectedTokenOption]);
+  useEffect(() => {
+    triggerResize();
+  }, [payState]);
+  if (selectedTokenOption == null) {
+    return /* @__PURE__ */ jsx(PageContent, {});
+  }
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(TokenLogoSpinner, { token: selectedTokenOption.required.token }),
+    /* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 0 }, $preserveDisplay: true, children: [
+      txURL ? /* @__PURE__ */ jsx(ModalH1, { children: /* @__PURE__ */ jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: payState }) }) : /* @__PURE__ */ jsx(ModalH1, { children: payState }),
+      /* @__PURE__ */ jsx(PaymentBreakdown, { paymentOption: selectedTokenOption }),
+      payState === "Payment Cancelled" /* RequestCancelled */ && /* @__PURE__ */ jsx(Button, { onClick: () => handleTransfer(selectedTokenOption), children: locales.retryPayment }),
+      payState === "Payment Failed" /* RequestFailed */ && /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            window.open(
+              getSupportUrl(
+                order?.id?.toString() ?? "",
+                `Pay with token${txURL ? ` ${txURL}` : ""}`
+              ),
+              "_blank"
+            );
+          },
+          children: locales.contactSupport
+        }
+      )
+    ] })
+  ] });
+};
+
+export { PayWithToken as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/PayWithToken/index.tsx"],"sourcesContent":["import { getChainExplorerTxUrl, WalletPaymentOption } from \"@daimo/pay-common\";\nimport React, { useEffect, useState } from \"react\";\nimport { useChainId, useSwitchChain } from \"wagmi\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport { getSupportUrl } from \"../../../utils/supportUrl\";\nimport { TrpcClient } from \"../../../utils/trpc\";\nimport Button from \"../../Common/Button\";\nimport {\n  Link,\n  ModalContent,\n  ModalH1,\n  PageContent,\n} from \"../../Common/Modal/styles\";\nimport PaymentBreakdown from \"../../Common/PaymentBreakdown\";\nimport TokenLogoSpinner from \"../../Spinners/TokenLogoSpinner\";\n\nenum PayState {\n  RequestingPayment = \"Waiting For Payment\",\n  SwitchingChain = \"Switching Chain\",\n  RequestCancelled = \"Payment Cancelled\",\n  RequestSuccessful = \"Payment Successful\",\n  RequestFailed = \"Payment Failed\",\n}\n\nconst PayWithToken: React.FC = () => {\n  const { triggerResize, paymentState, setRoute, log, trpc } = usePayContext();\n  const { payWithToken, selectedTokenOption } = paymentState;\n  const { order } = useDaimoPay();\n  const [payState, setPayStateInner] = useState<PayState>(\n    PayState.RequestingPayment,\n  );\n  const setPayState = (state: PayState) => {\n    setPayStateInner(state);\n    log(`[PAY TOKEN] payState: ${state}`);\n    (trpc as TrpcClient).nav.mutate({\n      action: \"pay-with-token-state\",\n      data: { state },\n    });\n  };\n  const [txURL, setTxURL] = useState<string | undefined>();\n  const locales = useLocales();\n  const walletChainId = useChainId();\n  const { switchChainAsync } = useSwitchChain();\n\n  const trySwitchingChain = async (\n    option: WalletPaymentOption,\n    forceSwitch: boolean = false,\n  ): Promise<boolean> => {\n    if (walletChainId !== option.required.token.chainId || forceSwitch) {\n      const resultChain = await (async () => {\n        try {\n          return await switchChainAsync({\n            chainId: option.required.token.chainId,\n          });\n        } catch (e) {\n          console.error(\"Failed to switch chain\", e);\n          return null;\n        }\n      })();\n\n      if (resultChain?.id !== option.required.token.chainId) {\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  const handleTransfer = async (option: WalletPaymentOption) => {\n    // Switch chain if necessary\n    setPayState(PayState.SwitchingChain);\n    const switchChain = await trySwitchingChain(option);\n\n    if (!switchChain) {\n      console.error(\"Switching chain failed\");\n      setPayState(PayState.RequestCancelled);\n      return;\n    }\n\n    setPayState(PayState.RequestingPayment);\n    try {\n      const result = await payWithToken(option);\n      if (!result.txHash) {\n        // Transaction not submitted yet. Do nothing, just keep polling.\n        return;\n      }\n      setTxURL(\n        getChainExplorerTxUrl(option.required.token.chainId, result.txHash),\n      );\n      if (result.success) {\n        setPayState(PayState.RequestSuccessful);\n        setTimeout(() => {\n          setRoute(ROUTES.CONFIRMATION, { event: \"wait-pay-with-token\" });\n        }, 200);\n      } else {\n        setPayState(PayState.RequestFailed);\n      }\n    } catch (e: any) {\n      if (e?.name === \"ConnectorChainMismatchError\") {\n        // Workaround for Rainbow wallet bug -- user is able to switch chain\n        // without the wallet updating the chain ID for wagmi.\n        log(\"Chain mismatch detected, attempting to switch and retry\");\n        const switchSuccessful = await trySwitchingChain(option, true);\n        if (switchSuccessful) {\n          setPayState(PayState.RequestingPayment);\n          try {\n            const retryResult = await payWithToken(option);\n            if (!retryResult.txHash) {\n              // Transaction not submitted yet. Do nothing, just keep polling.\n              return;\n            }\n            setTxURL(\n              getChainExplorerTxUrl(\n                option.required.token.chainId,\n                retryResult.txHash,\n              ),\n            );\n            if (retryResult.success) {\n              setPayState(PayState.RequestSuccessful);\n              setTimeout(() => {\n                setRoute(ROUTES.CONFIRMATION, { event: \"wait-pay-with-token\" });\n              }, 200);\n            } else {\n              setPayState(PayState.RequestFailed);\n            }\n            return; // Payment handled after switching chain\n          } catch (retryError) {\n            console.error(\n              \"Failed to pay with token after switching chain\",\n              retryError,\n            );\n            throw retryError;\n          }\n        }\n      }\n      setPayState(PayState.RequestCancelled);\n      console.error(\"Failed to pay with token\", e);\n    }\n  };\n\n  useEffect(() => {\n    if (!selectedTokenOption) return;\n\n    const transferTimeout = setTimeout(() => {\n      handleTransfer(selectedTokenOption);\n    }, 100);\n    return () => {\n      clearTimeout(transferTimeout);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedTokenOption]);\n\n  useEffect(() => {\n    triggerResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [payState]);\n\n  if (selectedTokenOption == null) {\n    return <PageContent></PageContent>;\n  }\n\n  return (\n    <PageContent>\n      <TokenLogoSpinner token={selectedTokenOption.required.token} />\n      <ModalContent style={{ paddingBottom: 0 }} $preserveDisplay={true}>\n        {txURL ? (\n          <ModalH1>\n            <Link href={txURL} target=\"_blank\" rel=\"noopener noreferrer\">\n              {payState}\n            </Link>\n          </ModalH1>\n        ) : (\n          <ModalH1>{payState}</ModalH1>\n        )}\n        <PaymentBreakdown paymentOption={selectedTokenOption} />\n        {payState === PayState.RequestCancelled && (\n          <Button onClick={() => handleTransfer(selectedTokenOption)}>\n            {locales.retryPayment}\n          </Button>\n        )}\n        {payState === PayState.RequestFailed && (\n          <Button\n            onClick={() => {\n              window.open(\n                getSupportUrl(\n                  order?.id?.toString() ?? \"\",\n                  `Pay with token${txURL ? ` ${txURL}` : \"\"}`,\n                ),\n                \"_blank\",\n              );\n            }}\n          >\n            {locales.contactSupport}\n          </Button>\n        )}\n      </ModalContent>\n    </PageContent>\n  );\n};\n\nexport default PayWithToken;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import MultiCurrencySelectAmount from '../../Common/AmountInput/index.js';
+import { PageContent } from '../../Common/Modal/styles.js';
+import { ROUTES } from '../../../constants/routes.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+
+const SelectAmount = () => {
+  const { paymentState } = usePayContext();
+  const { selectedTokenOption, setSelectedTokenOption } = paymentState;
+  if (selectedTokenOption == null) {
+    return /* @__PURE__ */ jsx(PageContent, {});
+  }
+  return /* @__PURE__ */ jsx(
+    MultiCurrencySelectAmount,
+    {
+      selectedTokenOption,
+      setSelectedTokenOption,
+      nextPage: ROUTES.PAY_WITH_TOKEN
+    }
+  );
+};
+
+export { SelectAmount as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/SelectAmount/index.tsx"],"sourcesContent":["import React from \"react\";\nimport MultiCurrencySelectAmount from \"../../Common/AmountInput\";\nimport { PageContent } from \"../../Common/Modal/styles\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nconst SelectAmount: React.FC = () => {\n  const { paymentState } = usePayContext();\n  const { selectedTokenOption, setSelectedTokenOption } = paymentState;\n\n  if (selectedTokenOption == null) {\n    return <PageContent></PageContent>;\n  }\n\n  return (\n    <MultiCurrencySelectAmount\n      selectedTokenOption={selectedTokenOption}\n      setSelectedTokenOption={setSelectedTokenOption}\n      nextPage={ROUTES.PAY_WITH_TOKEN}\n    />\n  );\n};\n\nexport default SelectAmount;\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,eAAyB,MAAM;AACnC,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,aAAc,EAAA,CAAA;AACvC,EAAM,MAAA,EAAE,mBAAqB,EAAA,sBAAA,EAA2B,GAAA,YAAA,CAAA;AAExD,EAAA,IAAI,uBAAuB,IAAM,EAAA;AAC/B,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA,CAAA;AAAA,GACtB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,mBAAA;AAAA,MACA,sBAAA;AAAA,MACA,UAAU,MAAO,CAAA,cAAA;AAAA,KAAA;AAAA,GACnB,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,79 @@
+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 SelectDepositAddressAmount = () => {
+  const { paymentState, setRoute, triggerResize } = usePayContext();
+  const { selectedDepositAddressOption } = paymentState;
+  const maxUsdLimit = paymentState.getOrderUsdLimit();
+  const minUsd = selectedDepositAddressOption?.minimumUsd ?? 0;
+  const minimumMessage = minUsd > 0 ? `Minimum ${formatUsd(minUsd, "up")}` : null;
+  const [usdInput, setUsdInput] = useState("");
+  const [message, setMessage] = useState(minimumMessage);
+  const [continueDisabled, setContinueDisabled] = useState(true);
+  useEffect(() => {
+    triggerResize();
+  }, [message]);
+  if (selectedDepositAddressOption == 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));
+    if (usd > maxUsdLimit) {
+      setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
+    } else {
+      setMessage(minimumMessage);
+    }
+    setContinueDisabled(usd <= 0 || usd > maxUsdLimit || usd < minUsd);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !continueDisabled) {
+      handleContinue();
+    }
+  };
+  const handleContinue = () => {
+    const amountUsd = Number(sanitizeNumber(usdInput));
+    paymentState.setChosenUsd(amountUsd);
+    setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, { amountUsd });
+  };
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(
+      ExternalPaymentSpinner,
+      {
+        logoURI: selectedDepositAddressOption.logoURI,
+        logoShape: "circle"
+      }
+    ),
+    /* @__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 { SelectDepositAddressAmount as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/SelectDepositAddressAmount/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 SelectDepositAddressAmount: React.FC = () => {\n  const { paymentState, setRoute, triggerResize } = usePayContext();\n  const { selectedDepositAddressOption } = paymentState;\n\n  const maxUsdLimit = paymentState.getOrderUsdLimit();\n  const minUsd = selectedDepositAddressOption?.minimumUsd ?? 0;\n  const minimumMessage =\n    minUsd > 0 ? `Minimum ${formatUsd(minUsd, \"up\")}` : 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 (selectedDepositAddressOption == 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    const usd = Number(sanitizeNumber(value));\n\n    if (usd > maxUsdLimit) {\n      setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);\n    } else {\n      setMessage(minimumMessage);\n    }\n\n    setContinueDisabled(usd <= 0 || usd > maxUsdLimit || usd < minUsd);\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_DEPOSIT_ADDRESS, { amountUsd });\n  };\n\n  return (\n    <PageContent>\n      <ExternalPaymentSpinner\n        logoURI={selectedDepositAddressOption.logoURI}\n        logoShape=\"circle\"\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 SelectDepositAddressAmount;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ROUTES } from '../../../constants/routes.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
+import { DaimoPayOrderMode, DepositAddressPaymentOptions } from '@daimo/pay-common';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import { OptionsList } from '../../Common/OptionsList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+import SelectAnotherMethodButton from '../../Common/SelectAnotherMethodButton/index.js';
+
+const SelectDepositAddressChain = () => {
+  const { setRoute, paymentState } = usePayContext();
+  const pay = useDaimoPay();
+  const { order } = pay;
+  const {
+    isDepositFlow,
+    setSelectedDepositAddressOption,
+    depositAddressOptions,
+    untronAvailable
+  } = paymentState;
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(OrderHeader, { minified: true }),
+    !depositAddressOptions.loading && depositAddressOptions.options?.length === 0 && /* @__PURE__ */ jsxs(
+      ModalContent,
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          paddingTop: 16,
+          paddingBottom: 16
+        },
+        children: [
+          /* @__PURE__ */ jsx(ModalH1, { children: "Chains unavailable." }),
+          /* @__PURE__ */ jsx(SelectAnotherMethodButton, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OptionsList,
+      {
+        requiredSkeletons: 4,
+        isLoading: depositAddressOptions.loading,
+        options: (depositAddressOptions.options ?? []).map((option) => {
+          const disabled = (
+            // Disable if usd below min
+            option.minimumUsd > 0 && order?.mode === DaimoPayOrderMode.HYDRATED && order.usdValue < option.minimumUsd || // Disable if TRON_USDT unavailable
+            option.id === DepositAddressPaymentOptions.TRON_USDT && untronAvailable === false
+          );
+          return {
+            id: option.id,
+            title: option.id,
+            icons: [option.logoURI],
+            disabled,
+            onClick: () => {
+              setSelectedDepositAddressOption(option);
+              const meta = { event: "click-option", option: option.id };
+              if (isDepositFlow) {
+                setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT, meta);
+              } else {
+                setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, meta);
+              }
+            }
+          };
+        }).sort((a, b) => Number(a.disabled) - Number(b.disabled))
+      }
+    )
+  ] });
+};
+
+export { SelectDepositAddressChain as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/SelectDepositAddressChain/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport { ModalContent, ModalH1, PageContent } from \"../../Common/Modal/styles\";\n\nimport {\n  DaimoPayOrderMode,\n  DepositAddressPaymentOptions,\n} from \"@daimo/pay-common\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport { OptionsList } from \"../../Common/OptionsList\";\nimport { OrderHeader } from \"../../Common/OrderHeader\";\nimport SelectAnotherMethodButton from \"../../Common/SelectAnotherMethodButton\";\n\nconst SelectDepositAddressChain: React.FC = () => {\n  const { setRoute, paymentState } = usePayContext();\n  const pay = useDaimoPay();\n  const { order } = pay;\n  const {\n    isDepositFlow,\n    setSelectedDepositAddressOption,\n    depositAddressOptions,\n    untronAvailable,\n  } = paymentState;\n\n  return (\n    <PageContent>\n      <OrderHeader minified />\n\n      {!depositAddressOptions.loading &&\n        depositAddressOptions.options?.length === 0 && (\n          <ModalContent\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              paddingTop: 16,\n              paddingBottom: 16,\n            }}\n          >\n            <ModalH1>Chains unavailable.</ModalH1>\n            <SelectAnotherMethodButton />\n          </ModalContent>\n        )}\n\n      <OptionsList\n        requiredSkeletons={4}\n        isLoading={depositAddressOptions.loading}\n        options={(depositAddressOptions.options ?? [])\n          .map((option) => {\n            const disabled =\n              // Disable if usd below min\n              (option.minimumUsd > 0 &&\n                order?.mode === DaimoPayOrderMode.HYDRATED &&\n                order.usdValue < option.minimumUsd) ||\n              // Disable if TRON_USDT unavailable\n              (option.id === DepositAddressPaymentOptions.TRON_USDT &&\n                untronAvailable === false);\n\n            return {\n              id: option.id,\n              title: option.id,\n              icons: [option.logoURI],\n              disabled,\n              onClick: () => {\n                setSelectedDepositAddressOption(option);\n                const meta = { event: \"click-option\", option: option.id };\n                if (isDepositFlow) {\n                  setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT, meta);\n                } else {\n                  setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, meta);\n                }\n              },\n            };\n          })\n          // Push disabled options to the bottom of the list\n          .sort((a, b) => Number(a.disabled) - Number(b.disabled))}\n      />\n    </PageContent>\n  );\n};\n\nexport default SelectDepositAddressChain;\n"],"names":[],"mappings":";;;;;;;;;;AAeA,MAAM,4BAAsC,MAAM;AAChD,EAAA,MAAM,EAAE,QAAA,EAAU,YAAa,EAAA,GAAI,aAAc,EAAA,CAAA;AACjD,EAAA,MAAM,MAAM,WAAY,EAAA,CAAA;AACxB,EAAM,MAAA,EAAE,OAAU,GAAA,GAAA,CAAA;AAClB,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,+BAAA;AAAA,IACA,qBAAA;AAAA,IACA,eAAA;AAAA,GACE,GAAA,YAAA,CAAA;AAEJ,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,WAAA,EAAA,EAAY,UAAQ,IAAC,EAAA,CAAA;AAAA,IAErB,CAAC,qBAAsB,CAAA,OAAA,IACtB,qBAAsB,CAAA,OAAA,EAAS,WAAW,CACxC,oBAAA,IAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,cAAgB,EAAA,QAAA;AAAA,UAChB,UAAY,EAAA,EAAA;AAAA,UACZ,aAAe,EAAA,EAAA;AAAA,SACjB;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,WAAQ,QAAmB,EAAA,qBAAA,EAAA,CAAA;AAAA,8BAC3B,yBAA0B,EAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KAC7B;AAAA,oBAGJ,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,iBAAmB,EAAA,CAAA;AAAA,QACnB,WAAW,qBAAsB,CAAA,OAAA;AAAA,QACjC,UAAU,qBAAsB,CAAA,OAAA,IAAW,EACxC,EAAA,GAAA,CAAI,CAAC,MAAW,KAAA;AACf,UAAM,MAAA,QAAA;AAAA;AAAA,YAEH,MAAA,CAAO,aAAa,CACnB,IAAA,KAAA,EAAO,SAAS,iBAAkB,CAAA,QAAA,IAClC,KAAM,CAAA,QAAA,GAAW,MAAO,CAAA,UAAA;AAAA,YAEzB,MAAO,CAAA,EAAA,KAAO,4BAA6B,CAAA,SAAA,IAC1C,eAAoB,KAAA,KAAA;AAAA,WAAA,CAAA;AAExB,UAAO,OAAA;AAAA,YACL,IAAI,MAAO,CAAA,EAAA;AAAA,YACX,OAAO,MAAO,CAAA,EAAA;AAAA,YACd,KAAA,EAAO,CAAC,MAAA,CAAO,OAAO,CAAA;AAAA,YACtB,QAAA;AAAA,YACA,SAAS,MAAM;AACb,cAAA,+BAAA,CAAgC,MAAM,CAAA,CAAA;AACtC,cAAA,MAAM,OAAO,EAAE,KAAA,EAAO,cAAgB,EAAA,MAAA,EAAQ,OAAO,EAAG,EAAA,CAAA;AACxD,cAAA,IAAI,aAAe,EAAA;AACjB,gBAAS,QAAA,CAAA,MAAA,CAAO,+BAA+B,IAAI,CAAA,CAAA;AAAA,eAC9C,MAAA;AACL,gBAAS,QAAA,CAAA,MAAA,CAAO,yBAAyB,IAAI,CAAA,CAAA;AAAA,eAC/C;AAAA,aACF;AAAA,WACF,CAAA;AAAA,SACD,CAAA,CAEA,IAAK,CAAA,CAAC,CAAG,EAAA,CAAA,KAAM,MAAO,CAAA,CAAA,CAAE,QAAQ,CAAA,GAAI,MAAO,CAAA,CAAA,CAAE,QAAQ,CAAC,CAAA;AAAA,OAAA;AAAA,KAC3D;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}