@rozoai/intent-pay 0.0.7 → 0.0.9

package/build/src/components/Pages/MobileConnectors/styles.js

@@ -0,0 +1,66 @@
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const WalletItem = styled.button `
+  text-align: center;
+  transition: opacity 100ms ease;
+  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};
+  background: transparent;
+`;
+const WalletIcon = styled.div `
+  z-index: 9;
+  position: relative;
+  margin: 0 auto 10px;
+  border-radius: 16px;
+  width: 60px;
+  height: 60px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.04);
+  ${(props) => props.$outline &&
+    `
+  &:before {
+    content: '';
+    z-index: 2;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
+  }`}
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+`;
+const WalletLabel = styled.div `
+  color: var(--ck-body-color);
+  font-size: 13px;
+  line-height: 15px;
+  font-weight: 500;
+  opacity: 0.75;
+`;
+const PulseKeyframes = keyframes `
+  0%,100% { opacity:1; }
+  50% { opacity:0.5; }
+`;
+const WalletList = styled.div `
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 22px 8px;
+  margin: 0 -10px;
+  padding: 4px 0 0;
+  transition: opacity 300ms ease;
+  ${(props) => props.$disabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.4;
+      ${WalletItem} {
+        animation: ${PulseKeyframes} 1s infinite ease-in-out;
+      }
+    `}
+`;
+const Container = styled.div ``;
+
+export { Container, WalletIcon, WalletItem, WalletLabel, WalletList };
+//# sourceMappingURL=styles.js.map

package/build/src/components/Pages/MobileConnectors/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Pages/MobileConnectors/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGa,MAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAwB,CAAA;;;AAGlD,WAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC,CAAA;;EAEhD;AACW,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAAwB,CAAA;;;;;;;;;AASxD,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,QAAQ;AACd,IAAA,CAAA;;;;;;;;AAQA,GAAA,CAAA,CAAA;;;;;;;EAOF;AACW,MAAA,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;EAMnC;AAEF,MAAM,cAAc,GAAG,SAAS,CAAA,CAAA;;;CAG/B,CAAC;AAEW,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAA;;;;;;;AAOzD,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,SAAS;AACf,IAAA,GAAG,CAAA,CAAA;;;QAGC,UAAU,CAAA;qBACG,cAAc,CAAA;;AAE9B,IAAA,CAAA,CAAA;EACH;MACW,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;"}

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

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Graphic, LogoGroup, Logo, LogoPosition, LogoInner, FloatWrapper, RotateWrapper, LogoGraphic, GraphicBackground } from './styles.js';
+import Logos from '../../../assets/logos.js';
+import wave from '../../../assets/wave.js';
+import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import Button from '../../Common/Button/index.js';
+
+const Introduction = () => {
+    const context = usePayContext();
+    const locales = useLocales({});
+    const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
+    return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Coinbase, { background: true }) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.MetaMask, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Rainbow, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Phantom, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Trust, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
+};
+
+export { Introduction as default };
+//# sourceMappingURL=index.js.map

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

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

package/build/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/src/components/Pages/Onboarding/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Pages/Onboarding/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAKa,MAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;AAOF,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;;EAK7D;AACW,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;EAIzC;AACF,MAAM,SAAS,GAAG,SAAS,CAAA,CAAA;;;;;;;;;CAS1B,CAAC;AACW,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;eAuBpC,SAAS,CAAA;AACkB,wCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;EAGhE;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA,CAAA;;;;;;;;;CASvB,CAAC;AACW,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;EAK5C;AACW,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;EAEzC;AACW,MAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;EAe3C;AACF,MAAM,KAAK,GAAG,SAAS,CAAA,CAAA;;;CAGtB,CAAC;AACW,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;oBAG1B,KAAK,CAAA;;EAEvB;AACF,MAAM,MAAM,GAAG,SAAS,CAAA,CAAA;;;CAGvB,CAAC;AACW,MAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;oBAG3B,MAAM,CAAA;;EAExB;AACW,MAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;eAIvB,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;;;;MAuBf,aAAa,CAAA;;;;;MAKb,aAAa,CAAA;;;;;MAKb,aAAa,CAAA;;;;;MAKb,aAAa,CAAA;;;;;MAKb,aAAa,CAAA;;;;;;MAMb,YAAY,CAAA;;;;;MAKZ,YAAY,CAAA;;;;;MAKZ,YAAY,CAAA;;;;;MAKZ,YAAY,CAAA;;;;;MAKZ,YAAY,CAAA;;;;;AAKwB,wCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;AAEzD,OAAA,EAAA,aAAa,IAAI,YAAY,CAAA;;;;;IAKlC,SAAS,CAAA;;;;mBAIM,YAAY,CAAA;;MAEzB,WAAW,CAAA;;;;;;mBAME,YAAY,CAAA;;;mBAGZ,YAAY,CAAA;;;mBAGZ,YAAY,CAAA;;;mBAGZ,YAAY,CAAA;;;;;;;"}

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

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getChainExplorerTxUrl } from '@rozoai/intent-common';
+import { useState, useEffect } from 'react';
+import { useChainId, useSwitchChain } from 'wagmi';
+import { ROUTES } from '../../../constants/routes.js';
+import { useRozoPay } from '../../../hooks/useRozoPay.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';
+
+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 } = usePayContext();
+    const { payWithToken, selectedTokenOption } = paymentState;
+    const { order } = useRozoPay();
+    const [payState, setPayState] = useState(PayState.RequestingPayment);
+    const [txURL, setTxURL] = useState();
+    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);
+        try {
+            const result = await payWithToken(option);
+            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);
+            }
+        }
+        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) {
+                    try {
+                        const retryResult = await payWithToken(option);
+                        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;
+                    }
+                }
+            }
+            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, {});
+    }
+    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: "Retry Payment" })), payState === PayState.RequestFailed && (jsx(Button, { onClick: () => {
+                            window.open(getSupportUrl(order?.id?.toString() ?? "", `Pay with token${txURL ? ` ${txURL}` : ""}`), "_blank");
+                        }, children: "Contact Support" }))] })] }));
+};
+
+export { PayWithToken as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,17 @@
+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 jsx(PageContent, {});
+    }
+    return (jsx(MultiCurrencySelectAmount, { selectedTokenOption: selectedTokenOption, setSelectedTokenOption: setSelectedTokenOption, nextPage: ROUTES.PAY_WITH_TOKEN }));
+};
+
+export { SelectAmount as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,61 @@
+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]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (selectedDepositAddressOption == null) {
+        return 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 > 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 (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" })] })] }));
+};
+const AmountInputContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export { SelectDepositAddressAmount as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,46 @@
+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 { RozoPayOrderMode } from '@rozoai/intent-common';
+import { useRozoPay } from '../../../hooks/useRozoPay.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 = useRozoPay();
+    const { order } = pay;
+    const { isDepositFlow, setSelectedDepositAddressOption, depositAddressOptions, } = 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) => {
+                    return {
+                        id: option.id,
+                        title: option.id,
+                        icons: [option.logoURI],
+                        disabled: option.minimumUsd > 0 &&
+                            order?.mode === RozoPayOrderMode.HYDRATED &&
+                            order.usdValue < option.minimumUsd,
+                        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);
+                            }
+                        },
+                    };
+                }) ?? [] })] }));
+};
+
+export { SelectDepositAddressChain as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Pages/SelectDepositAddressChain/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAYM,MAAA,yBAAyB,GAAa,MAAK;IAC/C,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAC;AACnD,IAAA,MAAM,GAAG,GAAG,UAAU,EAAE,CAAC;AACzB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC;IACtB,MAAM,EACJ,aAAa,EACb,+BAA+B,EAC/B,qBAAqB,GACtB,GAAG,YAAY,CAAC;AAEjB,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EAAA,CACVC,GAAC,CAAA,WAAW,EAAC,EAAA,QAAQ,EAAG,IAAA,EAAA,CAAA,EAEvB,CAAC,qBAAqB,CAAC,OAAO;AAC7B,gBAAA,qBAAqB,CAAC,OAAO,EAAE,MAAM,KAAK,CAAC,KACzCD,IAAC,CAAA,YAAY,EACX,EAAA,KAAK,EAAE;AACL,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,EAAE;AACd,oBAAA,aAAa,EAAE,EAAE;AAClB,iBAAA,EAAA,QAAA,EAAA,CAEDC,GAAC,CAAA,OAAO,EAA8B,EAAA,QAAA,EAAA,qBAAA,EAAA,CAAA,EACtCA,IAAC,yBAAyB,EAAA,EAAA,CAAG,CAChB,EAAA,CAAA,CAChB,EAEHA,GAAC,CAAA,WAAW,EACV,EAAA,iBAAiB,EAAE,CAAC,EACpB,SAAS,EAAE,qBAAqB,CAAC,OAAO,EACxC,OAAO,EACL,qBAAqB,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,KAAI;oBAC5C,OAAO;wBACL,EAAE,EAAE,MAAM,CAAC,EAAE;wBACb,KAAK,EAAE,MAAM,CAAC,EAAE;AAChB,wBAAA,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC;AACvB,wBAAA,QAAQ,EACN,MAAM,CAAC,UAAU,GAAG,CAAC;AACrB,4BAAA,KAAK,EAAE,IAAI,KAAK,gBAAgB,CAAC,QAAQ;AACzC,4BAAA,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU;wBACpC,OAAO,EAAE,MAAK;4BACZ,+BAA+B,CAAC,MAAM,CAAC,CAAC;AACxC,4BAAA,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;4BAC1D,IAAI,aAAa,EAAE;AACjB,gCAAA,QAAQ,CAAC,MAAM,CAAC,6BAA6B,EAAE,IAAI,CAAC,CAAC;6BACtD;iCAAM;AACL,gCAAA,QAAQ,CAAC,MAAM,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;6BAChD;yBACF;qBACF,CAAC;AACJ,iBAAC,CAAC,IAAI,EAAE,EAEV,CAAA,CAAA,EAAA,CACU,EACd;AACJ;;;;"}