@daimo/pay 1.15.0 → 1.16.1

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

@@ -12,134 +12,145 @@ import { PageContent, ModalContent, ModalH1, Link } from '../../Common/Modal/sty
 import PaymentBreakdown from '../../Common/PaymentBreakdown/index.js';
 import TokenLogoSpinner from '../../Spinners/TokenLogoSpinner/index.js';
 
-var PayState;
-(function (PayState) {
-    PayState["RequestingPayment"] = "Waiting For Payment";
-    PayState["SwitchingChain"] = "Switching Chain";
-    PayState["RequestCancelled"] = "Payment Cancelled";
-    PayState["RequestSuccessful"] = "Payment Successful";
-    PayState["RequestFailed"] = "Payment Failed";
-})(PayState || (PayState = {}));
 const PayWithToken = () => {
-    const { triggerResize, paymentState, setRoute, log, trpc } = usePayContext();
-    const { payWithToken, selectedTokenOption } = paymentState;
-    const { order } = useDaimoPay();
-    const [payState, setPayStateInner] = useState(PayState.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) => {
-        // Switch chain if necessary
-        setPayState(PayState.SwitchingChain);
-        const switchChain = await trySwitchingChain(option);
-        if (!switchChain) {
-            console.error("Switching chain failed");
-            setPayState(PayState.RequestCancelled);
-            return;
-        }
-        setPayState(PayState.RequestingPayment);
+  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 {
-            const result = await payWithToken(option);
-            if (!result.txHash) {
-                // Transaction not submitted yet. Do nothing, just keep polling.
-                return;
-            }
-            setTxURL(getChainExplorerTxUrl(option.required.token.chainId, result.txHash));
-            if (result.success) {
-                setPayState(PayState.RequestSuccessful);
-                setTimeout(() => {
-                    setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-token" });
-                }, 200);
-            }
-            else {
-                setPayState(PayState.RequestFailed);
-            }
+          return await switchChainAsync({
+            chainId: option.required.token.chainId
+          });
+        } catch (e) {
+          console.error("Failed to switch chain", e);
+          return null;
         }
-        catch (e) {
-            if (e?.name === "ConnectorChainMismatchError") {
-                // Workaround for Rainbow wallet bug -- user is able to switch chain
-                // without the wallet updating the chain ID for wagmi.
-                log("Chain mismatch detected, attempting to switch and retry");
-                const switchSuccessful = await trySwitchingChain(option, true);
-                if (switchSuccessful) {
-                    setPayState(PayState.RequestingPayment);
-                    try {
-                        const retryResult = await payWithToken(option);
-                        if (!retryResult.txHash) {
-                            // Transaction not submitted yet. Do nothing, just keep polling.
-                            return;
-                        }
-                        setTxURL(getChainExplorerTxUrl(option.required.token.chainId, retryResult.txHash));
-                        if (retryResult.success) {
-                            setPayState(PayState.RequestSuccessful);
-                            setTimeout(() => {
-                                setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-token" });
-                            }, 200);
-                        }
-                        else {
-                            setPayState(PayState.RequestFailed);
-                        }
-                        return; // Payment handled after switching chain
-                    }
-                    catch (retryError) {
-                        console.error("Failed to pay with token after switching chain", retryError);
-                        throw retryError;
-                    }
-                }
+      })();
+      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 */);
             }
-            setPayState(PayState.RequestCancelled);
-            console.error("Failed to pay with token", e);
-        }
-    };
-    useEffect(() => {
-        if (!selectedTokenOption)
             return;
-        const transferTimeout = setTimeout(() => {
-            handleTransfer(selectedTokenOption);
-        }, 100);
-        return () => {
-            clearTimeout(transferTimeout);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedTokenOption]);
-    useEffect(() => {
-        triggerResize();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [payState]);
-    if (selectedTokenOption == null) {
-        return jsx(PageContent, {});
+          } 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);
     }
-    return (jsxs(PageContent, { children: [jsx(TokenLogoSpinner, { token: selectedTokenOption.required.token }), jsxs(ModalContent, { style: { paddingBottom: 0 }, "$preserveDisplay": true, children: [txURL ? (jsx(ModalH1, { children: jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: payState }) })) : (jsx(ModalH1, { children: payState })), jsx(PaymentBreakdown, { paymentOption: selectedTokenOption }), payState === PayState.RequestCancelled && (jsx(Button, { onClick: () => handleTransfer(selectedTokenOption), children: locales.retryPayment })), payState === PayState.RequestFailed && (jsx(Button, { onClick: () => {
-                            window.open(getSupportUrl(order?.id?.toString() ?? "", `Pay with token${txURL ? ` ${txURL}` : ""}`), "_blank");
-                        }, children: locales.contactSupport }))] })] }));
+  };
+  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 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/PayWithToken/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"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":";;;;;;;;;;;;;;AA2BA,MAAM,eAAyB,MAAM;AACnC,EAAA,MAAM,EAAE,aAAe,EAAA,YAAA,EAAc,UAAU,GAAK,EAAA,IAAA,KAAS,aAAc,EAAA,CAAA;AAC3E,EAAM,MAAA,EAAE,YAAc,EAAA,mBAAA,EAAwB,GAAA,YAAA,CAAA;AAC9C,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,WAAY,EAAA,CAAA;AAC9B,EAAM,MAAA,CAAC,QAAU,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IACnC,qBAAA;AAAA,GACF,CAAA;AACA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAoB,KAAA;AACvC,IAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AACtB,IAAI,GAAA,CAAA,CAAA,sBAAA,EAAyB,KAAK,CAAE,CAAA,CAAA,CAAA;AACpC,IAAC,IAAA,CAAoB,IAAI,MAAO,CAAA;AAAA,MAC9B,MAAQ,EAAA,sBAAA;AAAA,MACR,IAAA,EAAM,EAAE,KAAM,EAAA;AAAA,KACf,CAAA,CAAA;AAAA,GACH,CAAA;AACA,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAA6B,EAAA,CAAA;AACvD,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAA,MAAM,gBAAgB,UAAW,EAAA,CAAA;AACjC,EAAM,MAAA,EAAE,gBAAiB,EAAA,GAAI,cAAe,EAAA,CAAA;AAE5C,EAAA,MAAM,iBAAoB,GAAA,OACxB,MACA,EAAA,WAAA,GAAuB,KACF,KAAA;AACrB,IAAA,IAAI,aAAkB,KAAA,MAAA,CAAO,QAAS,CAAA,KAAA,CAAM,WAAW,WAAa,EAAA;AAClE,MAAM,MAAA,WAAA,GAAc,OAAO,YAAY;AACrC,QAAI,IAAA;AACF,UAAA,OAAO,MAAM,gBAAiB,CAAA;AAAA,YAC5B,OAAA,EAAS,MAAO,CAAA,QAAA,CAAS,KAAM,CAAA,OAAA;AAAA,WAChC,CAAA,CAAA;AAAA,iBACM,CAAG,EAAA;AACV,UAAQ,OAAA,CAAA,KAAA,CAAM,0BAA0B,CAAC,CAAA,CAAA;AACzC,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AAAA,OACC,GAAA,CAAA;AAEH,MAAA,IAAI,WAAa,EAAA,EAAA,KAAO,MAAO,CAAA,QAAA,CAAS,MAAM,OAAS,EAAA;AACrD,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,KACF;AAEA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiB,OAAO,MAAgC,KAAA;AAE5D,IAAA,WAAA,CAAY,iBAAuB,sBAAA,CAAA;AACnC,IAAM,MAAA,WAAA,GAAc,MAAM,iBAAA,CAAkB,MAAM,CAAA,CAAA;AAElD,IAAA,IAAI,CAAC,WAAa,EAAA;AAChB,MAAA,OAAA,CAAQ,MAAM,wBAAwB,CAAA,CAAA;AACtC,MAAA,WAAA,CAAY,mBAAyB,wBAAA,CAAA;AACrC,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,WAAA,CAAY,qBAA0B,yBAAA,CAAA;AACtC,IAAI,IAAA;AACF,MAAM,MAAA,MAAA,GAAS,MAAM,YAAA,CAAa,MAAM,CAAA,CAAA;AACxC,MAAI,IAAA,CAAC,OAAO,MAAQ,EAAA;AAElB,QAAA,OAAA;AAAA,OACF;AACA,MAAA,QAAA;AAAA,QACE,sBAAsB,MAAO,CAAA,QAAA,CAAS,KAAM,CAAA,OAAA,EAAS,OAAO,MAAM,CAAA;AAAA,OACpE,CAAA;AACA,MAAA,IAAI,OAAO,OAAS,EAAA;AAClB,QAAA,WAAA,CAAY,oBAA0B,yBAAA,CAAA;AACtC,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,QAAA,CAAS,MAAO,CAAA,YAAA,EAAc,EAAE,KAAA,EAAO,uBAAuB,CAAA,CAAA;AAAA,WAC7D,GAAG,CAAA,CAAA;AAAA,OACD,MAAA;AACL,QAAA,WAAA,CAAY,gBAAsB,qBAAA,CAAA;AAAA,OACpC;AAAA,aACO,CAAQ,EAAA;AACf,MAAI,IAAA,CAAA,EAAG,SAAS,6BAA+B,EAAA;AAG7C,QAAA,GAAA,CAAI,yDAAyD,CAAA,CAAA;AAC7D,QAAA,MAAM,gBAAmB,GAAA,MAAM,iBAAkB,CAAA,MAAA,EAAQ,IAAI,CAAA,CAAA;AAC7D,QAAA,IAAI,gBAAkB,EAAA;AACpB,UAAA,WAAA,CAAY,qBAA0B,yBAAA,CAAA;AACtC,UAAI,IAAA;AACF,YAAM,MAAA,WAAA,GAAc,MAAM,YAAA,CAAa,MAAM,CAAA,CAAA;AAC7C,YAAI,IAAA,CAAC,YAAY,MAAQ,EAAA;AAEvB,cAAA,OAAA;AAAA,aACF;AACA,YAAA,QAAA;AAAA,cACE,qBAAA;AAAA,gBACE,MAAA,CAAO,SAAS,KAAM,CAAA,OAAA;AAAA,gBACtB,WAAY,CAAA,MAAA;AAAA,eACd;AAAA,aACF,CAAA;AACA,YAAA,IAAI,YAAY,OAAS,EAAA;AACvB,cAAA,WAAA,CAAY,oBAA0B,yBAAA,CAAA;AACtC,cAAA,UAAA,CAAW,MAAM;AACf,gBAAA,QAAA,CAAS,MAAO,CAAA,YAAA,EAAc,EAAE,KAAA,EAAO,uBAAuB,CAAA,CAAA;AAAA,iBAC7D,GAAG,CAAA,CAAA;AAAA,aACD,MAAA;AACL,cAAA,WAAA,CAAY,gBAAsB,qBAAA,CAAA;AAAA,aACpC;AACA,YAAA,OAAA;AAAA,mBACO,UAAY,EAAA;AACnB,YAAQ,OAAA,CAAA,KAAA;AAAA,cACN,gDAAA;AAAA,cACA,UAAA;AAAA,aACF,CAAA;AACA,YAAM,MAAA,UAAA,CAAA;AAAA,WACR;AAAA,SACF;AAAA,OACF;AACA,MAAA,WAAA,CAAY,mBAAyB,wBAAA,CAAA;AACrC,MAAQ,OAAA,CAAA,KAAA,CAAM,4BAA4B,CAAC,CAAA,CAAA;AAAA,KAC7C;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,mBAAqB,EAAA,OAAA;AAE1B,IAAM,MAAA,eAAA,GAAkB,WAAW,MAAM;AACvC,MAAA,cAAA,CAAe,mBAAmB,CAAA,CAAA;AAAA,OACjC,GAAG,CAAA,CAAA;AACN,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,eAAe,CAAA,CAAA;AAAA,KAC9B,CAAA;AAAA,GAEF,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAA,SAAA,CAAU,MAAM;AACd,IAAc,aAAA,EAAA,CAAA;AAAA,GAEhB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAA,IAAI,uBAAuB,IAAM,EAAA;AAC/B,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA,CAAA;AAAA,GACtB;AAEA,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,KAAA,EAAO,mBAAoB,CAAA,QAAA,CAAS,KAAO,EAAA,CAAA;AAAA,oBAC7D,IAAA,CAAC,gBAAa,KAAO,EAAA,EAAE,eAAe,CAAE,EAAA,EAAG,kBAAkB,IAC1D,EAAA,QAAA,EAAA;AAAA,MAAA,KAAA,mBACE,GAAA,CAAA,OAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,MAAM,KAAO,EAAA,MAAA,EAAO,QAAS,EAAA,GAAA,EAAI,uBACpC,QACH,EAAA,QAAA,EAAA,CAAA,EACF,CAEA,mBAAA,GAAA,CAAC,WAAS,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,sBAErB,GAAA,CAAC,gBAAiB,EAAA,EAAA,aAAA,EAAe,mBAAqB,EAAA,CAAA;AAAA,MACrD,QAAA,KAAa,mBACZ,2CAAA,GAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAS,MAAM,cAAe,CAAA,mBAAmB,CACtD,EAAA,QAAA,EAAA,OAAA,CAAQ,YACX,EAAA,CAAA;AAAA,MAED,aAAa,gBACZ,wCAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAS,MAAM;AACb,YAAO,MAAA,CAAA,IAAA;AAAA,cACL,aAAA;AAAA,gBACE,KAAA,EAAO,EAAI,EAAA,QAAA,EAAc,IAAA,EAAA;AAAA,gBACzB,CAAiB,cAAA,EAAA,KAAA,GAAQ,CAAI,CAAA,EAAA,KAAK,KAAK,EAAE,CAAA,CAAA;AAAA,eAC3C;AAAA,cACA,QAAA;AAAA,aACF,CAAA;AAAA,WACF;AAAA,UAEC,QAAQ,EAAA,OAAA,CAAA,cAAA;AAAA,SAAA;AAAA,OACX;AAAA,KAEJ,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

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

@@ -5,12 +5,19 @@ 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 jsx(PageContent, {});
+  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
     }
-    return (jsx(MultiCurrencySelectAmount, { selectedTokenOption: selectedTokenOption, setSelectedTokenOption: setSelectedTokenOption, nextPage: ROUTES.PAY_WITH_TOKEN }));
+  );
 };
 
 export { SelectAmount as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/SelectAmount/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAMM,MAAA,YAAY,GAAa,MAAK;AAClC,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAC;AACzC,IAAA,MAAM,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,GAAG,YAAY,CAAC;AAErE,IAAA,IAAI,mBAAmB,IAAI,IAAI,EAAE;QAC/B,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAA,CAAe,CAAC;KACpC;AAED,IAAA,QACEA,GAAC,CAAA,yBAAyB,IACxB,mBAAmB,EAAE,mBAAmB,EACxC,sBAAsB,EAAE,sBAAsB,EAC9C,QAAQ,EAAE,MAAM,CAAC,cAAc,EAAA,CAC/B,EACF;AACJ;;;;"}
+{"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/src/components/Pages/SelectDepositAddressAmount/index.js

@@ -11,47 +11,65 @@ 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]); // eslint-disable-line react-hooks/exhaustive-deps
-    if (selectedDepositAddressOption == null) {
-        return jsx(PageContent, {});
+  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);
+    if (Number(value) > maxUsdLimit) {
+      setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
+    } else {
+      setMessage(minimumMessage);
     }
-    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 > maxUsdLimit || usd < minUsd);
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === "Enter" && !continueDisabled) {
-            handleContinue();
+    const usd = Number(sanitizeNumber(value));
+    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
         }
-    };
-    const handleContinue = () => {
-        const amountUsd = Number(sanitizeNumber(usdInput));
-        paymentState.setChosenUsd(amountUsd);
-        setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, { amountUsd });
-    };
-    return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedDepositAddressOption.logoURI, logoShape: "circle" }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsx(AmountInputContainer, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange, onKeyDown: handleKeyDown }) }), message && jsx(ModalBody, { children: message }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
+      ) }),
+      message && /* @__PURE__ */ jsx(ModalBody, { children: message }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })
+    ] })
+  ] });
 };
-const AmountInputContainer = styled.div `
+const AmountInputContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/SelectDepositAddressAmount/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"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\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(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/src/components/Pages/SelectDepositAddressChain/index.js

@@ -9,46 +9,63 @@ 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 (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true }), !depositAddressOptions.loading &&
-                depositAddressOptions.options?.length === 0 && (jsxs(ModalContent, { style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    paddingTop: 16,
-                    paddingBottom: 16,
-                }, children: [jsx(ModalH1, { children: "Chains unavailable." }), jsx(SelectAnotherMethodButton, {})] })), 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);
-                            }
-                        },
-                    };
-                })
-                    // Push disabled options to the bottom of the list
-                    .sort((a, b) => Number(a.disabled) - Number(b.disabled)) })] }));
+  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 };