@mintmoney/react 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/esm/api/payments.js

@@ -0,0 +1,52 @@
+import { api } from "./index.js";
+const paymentDTO = (data) => {
+    return {
+        ...data.data,
+    };
+};
+export function getRequiredSettlementConfig(payment) {
+    const settlementConfig = payment.checkout.checkout_config.crypto?.settlementConfig;
+    if (!settlementConfig) {
+        throw new Error("Payment is missing crypto settlement config");
+    }
+    return settlementConfig;
+}
+export async function createPaymentAttempt(paymentId, data, confirmations = 1) {
+    const resp = await api.v1.paymentsCryptoPayCreate(paymentId, {
+        ...data,
+        required_confirmations: data.required_confirmations ?? confirmations,
+    });
+    return resp.data.data;
+}
+export async function createTestPaymentAttempt(paymentId, address, payment) {
+    const settlementConfig = getRequiredSettlementConfig(payment);
+    const data = {
+        required_confirmations: 1,
+        sendingAddress: address,
+        routing: {
+            type: "direct",
+            source: {
+                token: settlementConfig.asset,
+                chain: settlementConfig.chain,
+            },
+        },
+    };
+    const resp = await api.v1.paymentsCryptoPayCreate(paymentId, data);
+    return resp.data.data;
+}
+export function createFiatPaymentAttempt(paymentId, method) {
+    throw new Error(`Fiat payment attempts are not available in the public SDK (${paymentId}, ${method}).`);
+}
+export async function getPaymentById(paymentId) {
+    const resp = await api.v1.paymentsDetail(paymentId);
+    return paymentDTO(resp.data);
+}
+export async function confirmPayment(paymentId, options = {}) {
+    const payload = {
+        ...(options.txHash ? { tx_hash: options.txHash } : {}),
+        ...(options.lifiQuote ? { lifi_quote: options.lifiQuote } : {}),
+    };
+    const resp = await api.v1.paymentsConfirmCreate(paymentId, payload);
+    return resp.data.data;
+}
+//# sourceMappingURL=payments.js.map

package/dist/esm/api/payments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments.js","sourceRoot":"","sources":["../../../src/api/payments.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAEjC,MAAM,UAAU,GAAG,CAAC,IAAwB,EAAE,EAAE;IAC9C,OAAO;QACL,GAAG,IAAI,CAAC,IAAI;KACF,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,UAAU,2BAA2B,CACzC,OAAgB;IAEhB,MAAM,gBAAgB,GACpB,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAC5D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IACjE,CAAC;IAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,oBAAoB,CACxC,SAAiB,EACjB,IAAoC,EACpC,gBAAwB,CAAC;IAEzB,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC,uBAAuB,CAAC,SAAS,EAAE;QAC3D,GAAG,IAAI;QACP,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAAI,aAAa;KACrE,CAAC,CAAC;IACH,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,wBAAwB,CAC5C,SAAiB,EACjB,OAA+B,EAC/B,OAAgB;IAEhB,MAAM,gBAAgB,GAAG,2BAA2B,CAAC,OAAO,CAAC,CAAC;IAE9D,MAAM,IAAI,GAAG;QACX,sBAAsB,EAAE,CAAC;QACzB,cAAc,EAAE,OAAO;QACvB,OAAO,EAAE;YACP,IAAI,EAAE,QAAiB;YACvB,MAAM,EAAE;gBACN,KAAK,EAAE,gBAAgB,CAAC,KAAK;gBAC7B,KAAK,EAAE,gBAAgB,CAAC,KAAK;aAC9B;SACF;KACF,CAAC;IACF,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IACnE,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,CAAC;AAOD,MAAM,UAAU,wBAAwB,CACtC,SAAiB,EACjB,MAAyB;IAEzB,MAAM,IAAI,KAAK,CACb,8DAA8D,SAAS,KAAK,MAAM,IAAI,CACvF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,SAAiB;IACpD,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/B,CAAC;AAMD,MAAM,CAAC,KAAK,UAAU,cAAc,CAClC,SAAiB,EACjB,UAOI,EAAE;IAEN,MAAM,OAAO,GAAiC;QAC5C,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACtD,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAChE,CAAC;IACF,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC,qBAAqB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACpE,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,CAAC"}

package/dist/esm/api/types.js

@@ -0,0 +1,8 @@
+export var PaymentStatus;
+(function (PaymentStatus) {
+    PaymentStatus["PENDING"] = "pending";
+    PaymentStatus["CONFIRMING_PAYMENT"] = "confirming_payment";
+    PaymentStatus["PAID"] = "paid";
+    PaymentStatus["FAILED"] = "failed";
+})(PaymentStatus || (PaymentStatus = {}));
+//# sourceMappingURL=types.js.map

package/dist/esm/api/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/api/types.ts"],"names":[],"mappings":"AA2BA,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,0DAAyC,CAAA;IACzC,8BAAa,CAAA;IACb,kCAAiB,CAAA;AACnB,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB"}

package/dist/esm/checkout/container.js

@@ -0,0 +1,10 @@
+import { styled } from "styled-components";
+export const ModalViewContainer = styled.div `
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+`;
+//# sourceMappingURL=container.js.map

package/dist/esm/checkout/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/checkout/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO3C,CAAC"}

package/dist/esm/checkout/index.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, cloneElement, useRef } from "react";
+import { arbitrum, base, baseSepolia, mainnet, optimism, polygon, sepolia, } from "viem/chains";
+import { createConfig, http, WagmiProvider } from "wagmi";
+import { StyledButton } from "../components/index.js";
+import { WalletProvider } from "../components/wallet-selector/provider.js";
+import { CheckoutModal } from "./modal.js";
+export function Checkout({ createPayment, onError, onSuccess, asChild, children, }) {
+    const [isOpen, openModal] = useState(false);
+    const [payment, setPayment] = useState(null);
+    const wagmi = useRef();
+    const queryClient = useRef(new QueryClient());
+    const wagmiConfig = createConfig({
+        chains: [mainnet, sepolia, base, baseSepolia, arbitrum, polygon, optimism],
+        transports: {
+            [mainnet.id]: http(),
+            [sepolia.id]: http(),
+            [base.id]: http(),
+            [baseSepolia.id]: http(),
+            [arbitrum.id]: http(),
+            [polygon.id]: http(),
+            [optimism.id]: http(),
+        },
+    });
+    if (!wagmi.current) {
+        wagmi.current = wagmiConfig;
+    }
+    const handleCheckout = async () => {
+        try {
+            const payment = await createPayment();
+            setPayment(payment);
+            openModal(true);
+        }
+        catch (error) {
+            console.error("Error creating payment:", error);
+            if (onError) {
+                await onError(error);
+            }
+        }
+    };
+    const trigger = asChild && children ? (cloneElement(children, {
+        onClick: handleCheckout,
+    })) : (_jsx(StyledButton, { variant: "primary", onClick: handleCheckout, children: "Pay Now" }));
+    return (_jsx(WalletProvider, { children: _jsx(QueryClientProvider, { client: queryClient.current, children: _jsxs(WagmiProvider, { config: wagmi.current, reconnectOnMount: true, children: [trigger, payment && (_jsx(CheckoutModal, { open: isOpen, onOpenChange: openModal, payment: payment, onSuccess: onSuccess, restartCheckout: handleCheckout }))] }) }) }));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/checkout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkout/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/checkout/modal.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ModalWithView } from "../components/modals/modal-with-views.js";
+import { CheckoutAmountHeader } from "./views/amount-header.js";
+import { ModalBackButton } from "./views/back.js";
+import { CardIntentViewContent } from "./views/card-intent/details.js";
+import { CryptoIntentDirectDetailsViewContent } from "./views/crypto-intent/direct-details.js";
+import { CryptoIntentViewContent } from "./views/crypto-intent/methods.js";
+import { CryptoIntentPaymentStatusViewContent } from "./views/crypto-intent/processing.js";
+import { CryptoIntentPaymentSuccessViewContent } from "./views/crypto-intent/success.js";
+import { TestPayment } from "./views/crypto-intent/test-payment.js";
+import { CryptoIntentWalletPaymentOptionsViewContent } from "./views/crypto-intent/wallet-payment-options.js";
+import { CryptoIntentSelectWalletViewContent } from "./views/crypto-intent/wallet-select.js";
+import { FailedViewContent } from "./views/failed.js";
+import { BankIntentViewContent } from "./views/fiat-intent/bank-payment.js";
+import { InitialiseCheckoutViewContent } from "./views/initial.js";
+import { MethodSelectViewContent } from "./views/method-select.js";
+import { RestartCheckoutButton } from "./views/restart.js";
+export const CheckoutModal = (props) => {
+    const header = () => (_jsx(CheckoutAmountHeader, { amount: props.payment.amount, currency: props.payment.currency }));
+    const cardHeader = () => (_jsx(CheckoutAmountHeader, { amount: props.payment.amount, currency: props.payment.currency, instructions: "Please complete card payment using the payment form." }));
+    const bankHeader = () => (_jsx(CheckoutAmountHeader, { amount: props.payment.amount, currency: props.payment.currency, instructions: "Please complete bank payment using the embedded form." }));
+    return (_jsx(ModalWithView, { className: "mm-checkout-modal", initialView: "initial", isOpen: props.open, onOpenChange: props.onOpenChange, views: {
+            initial: {
+                title: "Order Summary",
+                header,
+                content: () => (_jsx(InitialiseCheckoutViewContent, { payment: props.payment })),
+            },
+            methods: {
+                title: "Order Summary",
+                header,
+                content: () => _jsx(MethodSelectViewContent, {}),
+            },
+            cryptoIntent: {
+                title: "Pay with Crypto",
+                header,
+                content: () => _jsx(CryptoIntentViewContent, {}),
+                footer: () => _jsx(ModalBackButton, { view: "methods" }),
+            },
+            cryptoIntentDirectDetails: {
+                title: "Pay manually",
+                content: () => _jsx(CryptoIntentDirectDetailsViewContent, {}),
+            },
+            cryptoIntentSelectWallet: {
+                title: "Connect Wallet",
+                header,
+                content: () => _jsx(CryptoIntentSelectWalletViewContent, {}),
+                footer: () => _jsx(ModalBackButton, { view: "cryptoIntent" }),
+            },
+            cryptoIntentWalletPaymentOptions: {
+                title: "Pay With Wallet",
+                header,
+                content: () => _jsx(CryptoIntentWalletPaymentOptionsViewContent, {}),
+            },
+            paymentStatus: {
+                title: "Payment Processing",
+                header,
+                content: () => _jsx(CryptoIntentPaymentStatusViewContent, {}),
+            },
+            paymentSuccess: {
+                title: "Payment Successful",
+                header,
+                content: () => (_jsx(CryptoIntentPaymentSuccessViewContent, { onClose: props.onOpenChange, onSuccess: props.onSuccess })),
+            },
+            cardIntent: {
+                title: "Pay by Card",
+                header: cardHeader,
+                content: () => _jsx(CardIntentViewContent, {}),
+                footer: () => _jsx(ModalBackButton, { view: "methods" }),
+                layout: "two-column",
+            },
+            bankIntent: {
+                title: "Pay by Bank",
+                header: bankHeader,
+                content: () => _jsx(BankIntentViewContent, {}),
+                footer: () => _jsx(ModalBackButton, { view: "methods" }),
+                layout: "two-column",
+            },
+            failed: {
+                title: "Payment Failed",
+                header,
+                content: () => _jsx(FailedViewContent, {}),
+                footer: () => (_jsx(RestartCheckoutButton, { restartCheckout: props.restartCheckout })),
+            },
+            cryptoTestPayment: {
+                title: "Test Your Checkout",
+                header,
+                content: () => _jsx(TestPayment, {}),
+            },
+        } }));
+};
+//# sourceMappingURL=modal.js.map

package/dist/esm/checkout/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/checkout/modal.tsx"],"names":[],"mappings":"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"}

package/dist/esm/checkout/views/amount-header.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import { useModalWithView } from "../../components/modals/use-modal-with-views.js";
+const HeaderContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  font-family: var(--mm-font-family);
+`;
+const Label = styled.span `
+  font-size: 0.7rem;
+  line-height: 1;
+  color: #888;
+  font-weight: 500;
+  text-transform: uppercase;
+`;
+const Value = styled.span `
+  font-weight: bold;
+  color: #222;
+  display: block;
+  font-size: ${({ $isSmall }) => ($isSmall ? "1.2rem" : "2.5rem")};
+  transition: font-size 0.2s ease-out;
+`;
+const Instructions = styled.p `
+  font-size: 0.875rem;
+  color: #666;
+  margin-top: 1rem;
+  line-height: 1.5;
+  font-weight: 400;
+`;
+export const CheckoutAmountHeader = ({ amount, currency, instructions, }) => {
+    const { currentView } = useModalWithView();
+    const isSmall = !["initial", "methods"].includes(currentView);
+    return (_jsxs(HeaderContainer, { children: [_jsx(Label, { children: "Amount" }), _jsxs(Value, { "$isSmall": isSmall, children: [amount.toLocaleString(undefined, {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                    }), " ", currency] }), instructions && _jsx(Instructions, { children: instructions })] }));
+};
+//# sourceMappingURL=amount-header.js.map

package/dist/esm/checkout/views/amount-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"amount-header.js","sourceRoot":"","sources":["../../../../src/checkout/views/amount-header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAC;AAQnF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQjC,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;CAMxB,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAuB;;;;eAIjC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;;CAEhE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;CAM5B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,MAAM,EACN,QAAQ,EACR,YAAY,GACb,EAAE,EAAE;IACH,MAAM,EAAE,WAAW,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC3C,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE9D,OAAO,CACL,MAAC,eAAe,eACd,KAAC,KAAK,yBAAe,EACrB,MAAC,KAAK,gBAAW,OAAO,aACrB,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE;wBAChC,qBAAqB,EAAE,CAAC;wBACxB,qBAAqB,EAAE,CAAC;qBACzB,CAAC,EAAE,GAAG,EACN,QAAQ,IACH,EACP,YAAY,IAAI,KAAC,YAAY,cAAE,YAAY,GAAgB,IAC5C,CACnB,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/checkout/views/back.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useModalWithView, StyledButton } from "../../components/index.js";
+const ModalBackButton = ({ view, disabled }) => {
+    const { goToView } = useModalWithView();
+    return (_jsx(StyledButton, { onClick: () => goToView(view), variant: "secondary", disabled: disabled, children: "Back" }));
+};
+export { ModalBackButton };
+//# sourceMappingURL=back.js.map

package/dist/esm/checkout/views/back.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"back.js","sourceRoot":"","sources":["../../../../src/checkout/views/back.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAO3E,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC9D,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAExC,OAAO,CACL,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,qBAGL,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/esm/checkout/views/card-intent/details.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useModalWithView } from "../../../components/modals/use-modal-with-views.js";
+import { InstaXchangePayment } from "../../../integrations/instaxchange.js";
+import { useCheckoutStore, createCheckoutFiatPaymentAttempt, ACTIONS, } from "../../../state/checkout/store.js";
+import { ModalViewContainer } from "../../container.js";
+const CardIntentViewContent = () => {
+    const { payment, checkout, fiatPaymentAttempt, error: storeError, loading, } = useCheckoutStore();
+    const { goToView } = useModalWithView();
+    const [initialized, setInitialized] = useState(false);
+    useEffect(() => {
+        if (!payment || !checkout) {
+            goToView("failed", { reason: "Payment or checkout not found" });
+        }
+    }, [payment, checkout, goToView]);
+    useEffect(() => {
+        if (!initialized && payment) {
+            setInitialized(true);
+            void createCheckoutFiatPaymentAttempt("card");
+        }
+    }, [initialized, payment]);
+    useEffect(() => {
+        if (storeError && storeError.CREATE_FIAT_PAYMENT_ATTEMPT) {
+            goToView("failed", { reason: storeError.CREATE_FIAT_PAYMENT_ATTEMPT });
+        }
+    }, [storeError, goToView]);
+    if (!payment || !checkout) {
+        return null;
+    }
+    if (loading[ACTIONS.CREATE_FIAT_PAYMENT_ATTEMPT] || !fiatPaymentAttempt) {
+        return (_jsx(ModalViewContainer, { children: _jsxs("div", { className: "text-center py-8", children: [_jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto" }), _jsx("p", { className: "mt-2", children: "Initializing payment..." })] }) }));
+    }
+    return (_jsx(ModalViewContainer, { children: _jsx(InstaXchangePayment, { onError: () => { }, clientParams: fiatPaymentAttempt.client_params }) }));
+};
+export { CardIntentViewContent };
+//# sourceMappingURL=details.js.map

package/dist/esm/checkout/views/card-intent/details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.js","sourceRoot":"","sources":["../../../../../src/checkout/views/card-intent/details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EACL,gBAAgB,EAChB,gCAAgC,EAChC,OAAO,GACR,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACjC,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,KAAK,EAAE,UAAU,EACjB,OAAO,GACR,GAAG,gBAAgB,EAAE,CAAC;IACvB,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACxC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1B,QAAQ,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,+BAA+B,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAElC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,IAAI,OAAO,EAAE,CAAC;YAC5B,cAAc,CAAC,IAAI,CAAC,CAAC;YACrB,KAAK,gCAAgC,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,IAAI,UAAU,CAAC,2BAA2B,EAAE,CAAC;YACzD,QAAQ,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,2BAA2B,EAAE,CAAC,CAAC;QACzE,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,OAAO,CAAC,OAAO,CAAC,2BAA2B,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxE,OAAO,CACL,KAAC,kBAAkB,cACjB,eAAK,SAAS,EAAC,kBAAkB,aAC/B,cAAK,SAAS,EAAC,sEAAsE,GAAO,EAC5F,YAAG,SAAS,EAAC,MAAM,wCAA4B,IAC3C,GACa,CACtB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,kBAAkB,cACjB,KAAC,mBAAmB,IAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EACjB,YAAY,EAAE,kBAAkB,CAAC,aAAa,GAC9C,GACiB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/esm/checkout/views/crypto-intent/direct-details.js

@@ -0,0 +1,318 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+//@ts-expect-error import error
+import { QRCode } from "react-qr-code";
+import { styled } from "styled-components";
+import { confirmPayment } from "../../../api/payments.js";
+import { useModalWithView, StyledButton, Text, ClipboardAddIcon, ClipboardCheckIcon, } from "../../../components/index.js";
+import { useMintMoneyConfig } from "../../../context.js";
+import { useCheckoutStore } from "../../../state/checkout/store.js";
+import { ModalViewContainer } from "../../container.js";
+import { ModalBackButton } from "../back.js";
+const StepContainer = styled.div `
+  margin-bottom: 16px;
+`;
+const StepHeader = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+`;
+const StepNumber = styled.div `
+  background: ${({ theme }) => theme.btn.primary.default.backgroundColor || "#3b82f6"};
+  color: white;
+  min-width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  margin-right: 8px;
+  flex-shrink: 0;
+`;
+const StepTitle = styled.div `
+  font-size: 14px;
+  font-weight: 400;
+  color: ${({ theme }) => theme.font.color.primary};
+  line-height: 1.3;
+`;
+const QRCard = styled.div `
+  background: #f3f7fa;
+  border-radius: 12px;
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 8px 0;
+`;
+const InfoRow = styled.div `
+  display: flex;
+  align-items: center;
+  background: #f3f7fa;
+  border-radius: 12px;
+  padding: 4px 8px;
+  margin: 4px 0 0 0;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  border: 2px solid transparent;
+
+  &:hover {
+    background: #e8f2f7;
+  }
+
+  ${({ isCopied }) => isCopied &&
+    `
+    border-color: #10b981;
+    background: #f0fdf4;
+    animation: copySuccess 0.6s ease-in-out;
+  `}
+
+  @keyframes copySuccess {
+    0% {
+      border-color: transparent;
+    }
+    50% {
+      border-color: #10b981;
+    }
+    100% {
+      border-color: #10b981;
+    }
+  }
+`;
+const AddressText = styled.div `
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 12px;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const CopyButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  ${({ isCopied }) => isCopied &&
+    `
+    animation: iconBounce 0.6s ease-in-out;
+  `}
+
+  @keyframes iconBounce {
+    0% {
+      transform: scale(1);
+    }
+    25% {
+      transform: scale(1.2);
+    }
+    50% {
+      transform: scale(0.9);
+    }
+    75% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+`;
+const WarningCard = styled.div `
+  background: #fef3c7;
+  border: 1px solid #f59e0b;
+  border-radius: 12px;
+  padding: 16px;
+  margin: 8px 0;
+  text-align: center;
+`;
+const OptionCard = styled.div `
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  padding: 14px;
+  background: #ffffff;
+`;
+const OptionHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+const OptionHeaderLeft = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+`;
+const TokenIconWrap = styled.div `
+  position: relative;
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+`;
+const TokenIcon = styled.div `
+  width: 100%;
+  height: 100%;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #1d4ed8;
+  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
+  background-image: ${({ $iconUrl }) => $iconUrl ? `url(${$iconUrl})` : "none"};
+  background-size: 85%;
+  background-position: center;
+  background-repeat: no-repeat;
+`;
+const ChainBadge = styled.div `
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 1.5px solid #ffffff;
+  background: linear-gradient(135deg, #bbf7d0, #86efac);
+  background-image: ${({ $iconUrl }) => $iconUrl ? `url(${$iconUrl})` : "none"};
+  background-size: 85%;
+  background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 8px;
+  font-weight: 700;
+  color: #065f46;
+`;
+const OptionIdentity = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+`;
+const OptionBalance = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  flex-shrink: 0;
+`;
+const FastBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  gap: 4px;
+  background: #ecfdf5;
+  color: #047857;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 6px 9px;
+  white-space: nowrap;
+`;
+const WarningActions = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 8px;
+`;
+const getMonogram = (value) => {
+    const parts = value
+        .split(/\s+/)
+        .map((part) => part.trim())
+        .filter(Boolean);
+    if (parts.length === 0) {
+        return "?";
+    }
+    if (parts.length === 1) {
+        return parts[0].slice(0, 2).toUpperCase();
+    }
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+};
+const getChainAbbreviation = (chainName) => {
+    const normalized = chainName.toLowerCase();
+    if (normalized === "base")
+        return "B";
+    if (normalized === "ethereum")
+        return "ETH";
+    return getMonogram(chainName);
+};
+const formatManualPaymentAmount = (amount, currency) => {
+    const amountText = String(amount);
+    if (currency.toLowerCase().includes("usd")) {
+        return `$${amountText}`;
+    }
+    if (currency.toLowerCase() === "eth") {
+        return `ETH ${amountText}`;
+    }
+    return `${amountText} ${currency}`;
+};
+const CryptoIntentDirectDetailsViewContent = () => {
+    const modalRef = useRef(null);
+    const { goToView } = useModalWithView();
+    const { cryptoPaymentAttempt, cryptoCurrency, payment } = useCheckoutStore();
+    const config = useMintMoneyConfig();
+    const [copiedAddress, setCopiedAddress] = useState(false);
+    const [hasAcknowledged, setHasAcknowledged] = useState(false);
+    const handleConfirm = async () => {
+        if (!payment?.id) {
+            goToView("failed", { reason: "confirm_payment" });
+            return;
+        }
+        try {
+            await confirmPayment(payment.id);
+            goToView("paymentStatus");
+        }
+        catch (error) {
+            console.error("Failed to confirm payment:", error);
+            goToView("failed", { reason: "confirm_payment" });
+        }
+    };
+    if (!cryptoPaymentAttempt || !cryptoCurrency) {
+        return null;
+    }
+    const settlementCurrency = cryptoPaymentAttempt.settlement_config;
+    const amount = cryptoPaymentAttempt.amount_formatted;
+    const currency = settlementCurrency.asset_name;
+    const chain = settlementCurrency.chain_name;
+    const tokenIconUrl = settlementCurrency.logo_url ?? null;
+    const chainIconUrl = settlementCurrency.chain_logo_url ?? null;
+    const displayAmount = formatManualPaymentAmount(amount, currency);
+    const copyToClipboard = async (value, setCopied) => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
+        }
+        catch (error) {
+            console.error("Failed to copy to clipboard:", error);
+        }
+    };
+    // Show initial warning state
+    if (!hasAcknowledged) {
+        return (_jsxs(ModalViewContainer, { ref: modalRef, children: [_jsxs(WarningCard, { children: [_jsxs(Text, { size: "base", weight: "medium", color: config.theme.font.color.primary, style: { marginBottom: 12 }, children: ["\u26A0\uFE0F ", currency, " on ", chain, " only"] }), _jsxs(Text, { size: "sm", weight: "normal", color: config.theme.font.color.secondary, style: { lineHeight: 1.5 }, children: ["Send ", _jsx("strong", { children: currency }), " on ", _jsx("strong", { children: chain }), " only. If you send it on another chain, the funds may be lost and may not be recoverable."] })] }), _jsxs(WarningActions, { children: [_jsxs(StyledButton, { onClick: () => setHasAcknowledged(true), variant: "primary", style: { marginTop: 8 }, children: ["I'm sending on ", chain] }), _jsx(ModalBackButton, { view: "cryptoIntent" })] })] }));
+    }
+    return (_jsxs(ModalViewContainer, { ref: modalRef, children: [_jsxs(StepContainer, { children: [_jsxs(StepHeader, { children: [_jsx(StepNumber, { theme: config.theme, children: "1" }), _jsx(StepTitle, { theme: config.theme, children: "Review the payment option" })] }), _jsx(OptionCard, { children: _jsxs(OptionHeader, { children: [_jsxs(OptionHeaderLeft, { children: [_jsxs(TokenIconWrap, { children: [_jsx(TokenIcon, { "$iconUrl": tokenIconUrl, children: tokenIconUrl ? null : getMonogram(currency) }), _jsx(ChainBadge, { "$iconUrl": chainIconUrl, children: chainIconUrl ? null : getChainAbbreviation(chain) })] }), _jsxs(OptionIdentity, { children: [_jsx(Text, { size: "base", weight: "semibold", color: config.theme.font.color.primary, children: currency }), _jsxs(Text, { size: "sm", color: config.theme.font.color.secondary, children: ["On ", chain] })] })] }), _jsxs(OptionBalance, { children: [_jsx(Text, { size: "base", weight: "semibold", color: config.theme.font.color.primary, children: displayAmount }), _jsxs(FastBadge, { children: [_jsx("span", { children: "\u26A1" }), _jsx("span", { children: "Fast" })] })] })] }) })] }), _jsxs(StepContainer, { children: [_jsxs(StepHeader, { children: [_jsx(StepNumber, { theme: config.theme, children: "2" }), _jsx(StepTitle, { theme: config.theme, children: "Scan QR code or copy wallet address" })] }), _jsx(QRCard, { children: _jsx(QRCode, { value: cryptoPaymentAttempt.destination_address, size: 120 }) }), _jsxs(InfoRow, { isCopied: copiedAddress, onClick: () => copyToClipboard(cryptoPaymentAttempt.destination_address, setCopiedAddress).catch((error) => {
+                            console.error("Failed to copy address:", error);
+                        }), title: "Click to copy address", children: [_jsx(AddressText, { theme: config.theme, children: cryptoPaymentAttempt.destination_address }), _jsx("span", { style: { marginLeft: 8 }, children: _jsx(CopyButton, { isCopied: copiedAddress, onClick: (e) => {
+                                        e.stopPropagation();
+                                        copyToClipboard(cryptoPaymentAttempt.destination_address, setCopiedAddress).catch((error) => {
+                                            console.error("Failed to copy address:", error);
+                                        });
+                                    }, title: "Copy address", children: copiedAddress ? (_jsx(ClipboardCheckIcon, { size: 16 })) : (_jsx(ClipboardAddIcon, { size: 16 })) }) })] })] }), _jsx(StyledButton, { onClick: handleConfirm, variant: "primary", style: { marginTop: 8 }, children: "I've sent the funds" }), _jsx(ModalBackButton, { view: "cryptoIntent" })] }));
+};
+export { CryptoIntentDirectDetailsViewContent };
+//# sourceMappingURL=direct-details.js.map