@b3dotfun/sdk 0.0.33-alpha.1 → 0.0.33

package/dist/cjs/anyspend/react/components/common/OrderDetails.js

@@ -12,13 +12,14 @@ const hooks_1 = require("../../../../shared/react/hooks");
 const utils_1 = require("../../../../shared/utils");
 const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
 const number_1 = require("../../../../shared/utils/number");
+const react_2 = require("@chakra-ui/react");
 const spl_token_1 = require("@solana/spl-token");
 const web3_js_1 = require("@solana/web3.js");
-const react_2 = require("@web3icons/react");
+const react_3 = require("@web3icons/react");
 const lucide_react_1 = require("lucide-react");
-const react_3 = require("motion/react");
+const react_4 = require("motion/react");
 const qrcode_react_1 = require("qrcode.react");
-const react_4 = require("react");
+const react_5 = require("react");
 const react_timeago_1 = __importDefault(require("react-timeago"));
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
@@ -129,12 +130,9 @@ function roundTokenAmount(amount) {
     const roundedDecimalPart = digits.join("");
     return `${wholePart}.${roundedDecimalPart}`;
 }
-exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, cryptoPaymentMethod, onBack, disableUrlParamManagement = false, }) {
+exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, cryptoPaymentMethod, onBack, disableUrlParamManagement = false, }) {
     const router = (0, hooks_1.useRouter)();
     const searchParams = (0, hooks_1.useSearchParams)();
-    // Get theme from B3Provider context
-    const { theme } = (0, react_1.useB3)();
-    const colorMode = theme || "light";
     // Read crypto payment method from URL parameters
     const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod");
     const effectiveCryptoPaymentMethod = cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE;
@@ -147,11 +145,12 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
     const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
     const account = (0, react_1.useAccountWallet)();
     const { data: walletClient } = (0, wagmi_1.useWalletClient)();
-    const [txHash, setTxHash] = (0, react_4.useState)();
-    const [showQRCode, setShowQRCode] = (0, react_4.useState)(false);
+    const [txHash, setTxHash] = (0, react_5.useState)();
+    const [showQRCode, setShowQRCode] = (0, react_5.useState)(false);
     const { isLoading: txLoading, isSuccess: txSuccess } = (0, wagmi_1.useWaitForTransactionReceipt)({ hash: txHash });
     const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
-    const roundedUpSrcAmount = (0, react_4.useMemo)(() => {
+    const { colorMode } = (0, react_2.useColorMode)();
+    const roundedUpSrcAmount = (0, react_5.useMemo)(() => {
         // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
         // Use 21 significant digits (max allowed by Intl.NumberFormat)
         const formattedSrcAmount = srcToken
@@ -160,7 +159,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
         return roundTokenAmount(formattedSrcAmount);
     }, [order.srcAmount, srcToken]);
     // Unified payment handler for both EOA and AA wallets
-    const handleUnifiedPaymentProcess = (0, react_4.useCallback)(async () => {
+    const handleUnifiedPaymentProcess = (0, react_5.useCallback)(async () => {
         let txData;
         let value;
         let to;
@@ -196,7 +195,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
         }
     };
     // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
-    const setWaitingForDeposit = (0, react_4.useCallback)(() => {
+    const setWaitingForDeposit = (0, react_5.useCallback)(() => {
         if (disableUrlParamManagement)
             return;
         const params = new URLSearchParams(searchParams.toString());
@@ -204,7 +203,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
         router.push(`?${params}`);
     }, [router, searchParams, disableUrlParamManagement]);
     // Clean up URL parameters before closing modal or navigating back
-    const cleanupUrlParams = (0, react_4.useCallback)(() => {
+    const cleanupUrlParams = (0, react_5.useCallback)(() => {
         if (disableUrlParamManagement)
             return;
         const params = new URLSearchParams(searchParams.toString());
@@ -217,25 +216,25 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
         }
     }, [router, searchParams, disableUrlParamManagement]);
     // Helper functions that clean up URL params before executing actions
-    const handleCloseModal = (0, react_4.useCallback)(() => {
+    const handleCloseModal = (0, react_5.useCallback)(() => {
         cleanupUrlParams();
         setB3ModalOpen(false);
     }, [cleanupUrlParams, setB3ModalOpen]);
-    const handleBack = (0, react_4.useCallback)(() => {
+    const handleBack = (0, react_5.useCallback)(() => {
         cleanupUrlParams();
         onBack?.();
     }, [cleanupUrlParams, onBack]);
-    (0, react_4.useEffect)(() => {
+    (0, react_5.useEffect)(() => {
         if (txSuccess) {
             sonner_1.toast.success("Transaction successful! We are processing your order.", { duration: 10000 });
             setWaitingForDeposit();
             setTxHash(undefined);
         }
     }, [setWaitingForDeposit, txSuccess]);
-    const isPhantomMobile = (0, react_4.useMemo)(() => navigator.userAgent.includes("Phantom"), []);
-    const isPhantomBrowser = (0, react_4.useMemo)(() => window.phantom?.solana?.isPhantom, []);
+    const isPhantomMobile = (0, react_5.useMemo)(() => navigator.userAgent.includes("Phantom"), []);
+    const isPhantomBrowser = (0, react_5.useMemo)(() => window.phantom?.solana?.isPhantom, []);
     // Get connected Phantom wallet address if available
-    const phantomWalletAddress = (0, react_4.useMemo)(() => {
+    const phantomWalletAddress = (0, react_5.useMemo)(() => {
         const phantom = window.phantom?.solana;
         if (phantom?.isConnected && phantom?.publicKey) {
             return phantom.publicKey.toString();
@@ -400,7 +399,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
         }
     };
     if (refundTxs) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "refund-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "refund-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
@@ -409,7 +408,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
                                             : null] }) })] }) }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
     }
     if (executeTx) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "execute-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "execute-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTxs => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
@@ -431,7 +430,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
                                 }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
     }
     if (relayTx && relayTx.status === "success") {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "more-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "More Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "more-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "More Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
                                             ? depositTxs.map(dTxs => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                     ? `Received payment`
                                                     : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
@@ -463,7 +462,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
     // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
     const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
     if (depositTxs?.length || waitingForDeposit) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "deposit-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "deposit-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "from-as-brand/50 absolute left-[2px] top-0 z-10 w-[3px] bg-gradient-to-b from-20% via-purple-500/50 via-80% to-transparent", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1, ease: "easeInOut" } }) }), (depositTxs || []).map((dTxs, index) => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
                                                 ? `Received payment`
                                                 : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount }, dTxs.txHash))), statusDisplay === "failure" ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: statusText, chainId: order.srcChain, tx: null, isProcessing: false, delay: 0.5 })) : depositEnoughAmount ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap"
                                                 ? "Processing Swap"
@@ -487,11 +486,11 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
                                                                 ? "Pay from Phantom Wallet"
                                                                 : "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsxs)("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                                         ? (0, centerTruncate_1.default)(phantomWalletAddress, 6)
-                                                        : (0, centerTruncate_1.default)(account?.address || "", 6)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
+                                                        : (0, centerTruncate_1.default)(account?.address || "", 6)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
                         // Default case - existing QR code flow
-                        (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && ((0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })), (0, jsx_runtime_1.jsxs)("button", { className: "flex w-full items-center justify-center gap-2", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
+                        (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, filter: "blur(10px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.5, ease: "easeInOut" }, className: "flex w-full items-center justify-evenly gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-brand/70 text-sm", children: "Scan with" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: depositEnoughAmount ? ("Received") : order.status === "expired" ? ("Expired") : ((0, jsx_runtime_1.jsx)(react_timeago_1.default, { date: new Date(order.expiredAt), live: true })) })] }), statusDisplay !== "processing" && ((0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })), (0, jsx_runtime_1.jsxs)("button", { className: "flex w-full items-center justify-center gap-2", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
 });
 function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex grow items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_3.motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, children: title })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary", children: title })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: tx ? ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(chainId, tx.txHash), target: "_blank", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 font-mono text-xs", children: (0, centerTruncate_1.default)(tx?.txHash, 6) }) }) })) : null })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex grow items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-surface-secondary relative h-10 w-10 rounded-full", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeInOut", delay }, className: "border-as-border-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border-2 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }) })) : ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, scale: 0.3 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut", delay }, className: "bg-as-success-secondary absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "text-as-content-icon-success h-4 w-4" }) })) }), (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay }, className: "shrink-0 text-base", children: isProcessing ? ((0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, children: title })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-as-primary", children: title })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: tx ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeInOut", delay: (delay || 0) + 0.3 }, className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsx)("a", { href: (0, anyspend_1.getExplorerTxUrl)(chainId, tx.txHash), target: "_blank", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 font-mono text-xs", children: (0, centerTruncate_1.default)(tx?.txHash, 6) }) }) })) : null })] }));
 }
 exports.OrderDetailsLoadingView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsxs)(react_1.Badge, { variant: "default", className: "hover:bg-b3-react-background flex items-center gap-3 border-white/20 bg-white/10 px-4 py-1 text-base transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-as-primary h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_1.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mb-4 h-12 w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)(react_1.Skeleton, { className: "rounded-lg p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-[200px] w-[200px]" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-5 w-5 rounded-full" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 w-full" }, i))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background mt-8 w-full rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "mb-3 h-4 w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 flex-1" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-10 w-full" })] }));

package/dist/cjs/global-account/react/components/B3DynamicModal.js

@@ -12,6 +12,7 @@ const LinkAccount_1 = require("./LinkAccount/LinkAccount");
 const ManageAccount_1 = require("./ManageAccount/ManageAccount");
 const RequestPermissions_1 = require("./RequestPermissions/RequestPermissions");
 const SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
+const TransakModal_1 = require("./Transak/TransakModal");
 const dialog_1 = require("./ui/dialog");
 const drawer_1 = require("./ui/drawer");
 const debug = (0, debug_1.debugB3React)("B3DynamicModal");
@@ -47,7 +48,7 @@ function B3DynamicModal() {
     const hideCloseButton = isFreestyleType;
     // Build content class using cn utility
     // eslint-disable-next-line tailwindcss/no-custom-classname
-    const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:px-6");
+    const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:px-6", contentType?.type === "transak" && "transak-modal");
     debug("contentType", contentType);
     const renderContent = () => {
         if (!contentType)
@@ -69,6 +70,8 @@ function B3DynamicModal() {
                 return (0, jsx_runtime_1.jsx)(react_1.AnySpendTournament, { ...contentType, mode: "modal", action: "join" });
             case "anySpendFundTournament":
                 return (0, jsx_runtime_1.jsx)(react_1.AnySpendTournament, { ...contentType, mode: "modal", action: "fund" });
+            case "transak":
+                return (0, jsx_runtime_1.jsx)(TransakModal_1.TransakModal, {});
             case "anySpendOrderHistory":
                 return (0, jsx_runtime_1.jsx)(react_1.OrderHistory, { onBack: () => { }, mode: "modal" });
             case "anySpendStakeB3":

package/dist/cjs/global-account/react/components/Transak/TransakModal.d.ts

@@ -0,0 +1 @@
+export declare function TransakModal(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/global-account/react/components/Transak/TransakModal.js

@@ -0,0 +1,110 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransakModal = TransakModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../global-account/react");
+const debug_1 = __importDefault(require("../../../../shared/utils/debug"));
+const transak_sdk_1 = require("@transak/transak-sdk");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const sonner_1 = require("sonner");
+function TransakModal() {
+    const [isLoading, setIsLoading] = (0, react_2.useState)(true);
+    const [_error, setError] = (0, react_2.useState)(null);
+    const account = (0, react_1.useAccountWallet)();
+    const { environment } = (0, react_1.useB3)();
+    console.log(`process.env.NEXT_PUBLIC_TRANSAK_API_KEY`, process.env.NEXT_PUBLIC_TRANSAK_API_KEY); // d1f4e8be-cacb-4cfa-b2cd-c591084b5ef6
+    const transakConfig = (0, react_2.useMemo)(() => {
+        return {
+            apiKey: process.env.NEXT_PUBLIC_TRANSAK_API_KEY || "", // (Required)
+            // Yes, I know it looks weird to use isDevelopment for staging, but this is how this was done on Basement. Leaving till confirming difference
+            environment: environment === "development" ? transak_sdk_1.Transak.ENVIRONMENTS.STAGING : transak_sdk_1.Transak.ENVIRONMENTS.PRODUCTION, // (Required)
+            containerId: "transakMount", // Id of the element where you want to initialize the iframe
+            themeColor: "0c68e9",
+            widgetHeight: "650px",
+            productsAvailed: "BUY",
+            hideMenu: true,
+            colorMode: "DARK",
+            backgroundColors: "000000", // TODO: figure out why this doesn't work
+            exchangeScreenTitle: "Buy ETH on B3",
+            isFeeCalculationHidden: true,
+            cryptoCurrencyCode: "ETH",
+            network: "b3",
+        };
+    }, [environment]);
+    const { ready } = (0, react_1.useB3)();
+    const modalOptions = (0, react_1.useModalStore)(state => state.contentType);
+    const isOnRamp = modalOptions?.type === "transak";
+    const destinationWalletAddress = isOnRamp ? modalOptions?.destinationWalletAddress : undefined;
+    const defaultCryptoAmount = isOnRamp ? modalOptions?.defaultCryptoAmount : undefined;
+    const onSuccess = isOnRamp ? modalOptions?.onSuccess : undefined;
+    const fiatAmount = isOnRamp ? modalOptions?.fiatAmount : undefined;
+    const countryCode = isOnRamp ? modalOptions?.countryCode : undefined;
+    (0, react_2.useEffect)(() => {
+        if (!ready || !isOnRamp)
+            return;
+        const config = {
+            ...transakConfig,
+            walletAddress: destinationWalletAddress || account?.address, // In the future, this should be set to the new global B3 SCW address
+            defaultCryptoAmount,
+            disableWalletAddressForm: !!destinationWalletAddress || !!account?.address, // Only disable the form if we have an address
+            fiatAmount: fiatAmount,
+            countryCode: countryCode,
+        };
+        const transak = new transak_sdk_1.Transak(config);
+        try {
+            transak.init();
+            // Add event listeners
+            transak_sdk_1.Transak.on("*", data => {
+                (0, debug_1.default)("@@transak", data);
+            });
+            transak_sdk_1.Transak.on(transak_sdk_1.Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
+                setIsLoading(false);
+                (0, debug_1.default)("@@transak", "Transak SDK closed!");
+            });
+            transak_sdk_1.Transak.on(transak_sdk_1.Transak.EVENTS.TRANSAK_WIDGET_INITIALISED, () => {
+                (0, debug_1.default)("@@transak", "Transak SDK initialized!");
+                setIsLoading(false);
+            });
+            transak_sdk_1.Transak.on(transak_sdk_1.Transak.EVENTS.TRANSAK_ORDER_FAILED, orderData => {
+                (0, debug_1.default)("@@transak", orderData);
+                sonner_1.toast.error("Oh no! Something went wrong. Please try again.");
+            });
+            transak_sdk_1.Transak.on(transak_sdk_1.Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, orderData => {
+                (0, debug_1.default)("@@transak", orderData);
+                sonner_1.toast.success("Successfully purchased ETH with credit card!");
+                onSuccess?.();
+            });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Failed to initialize Transak"));
+            sonner_1.toast.error("Oh no! Something went wrong. Please try again.");
+            setIsLoading(false);
+        }
+        // Cleanup code
+        return () => {
+            transak.close();
+        };
+    }, [
+        ready,
+        account?.address,
+        destinationWalletAddress,
+        defaultCryptoAmount,
+        isOnRamp,
+        onSuccess,
+        fiatAmount,
+        transakConfig,
+        countryCode,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading && ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full min-h-[650px] flex-col items-center justify-center gap-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-24 w-24 animate-spin opacity-10" }), (0, jsx_runtime_1.jsx)(react_1.TextShimmer, { children: "Powering up our credit card processor..." })] })), (0, jsx_runtime_1.jsx)("div", { id: "transakMount", style: {
+                    display: isLoading ? "none" : "block",
+                    width: "100%",
+                    height: "650px",
+                    borderRadius: "25px",
+                    overflow: "hidden",
+                } })] }));
+}

package/dist/cjs/global-account/react/components/index.d.ts

@@ -1,15 +1,15 @@
+export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
 export { B3DynamicModal } from "./B3DynamicModal";
 export { B3Provider, InnerProvider } from "./B3Provider/B3Provider";
-export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
 export { B3Context, type B3ContextType } from "./B3Provider/types";
 export { useB3 } from "./B3Provider/useB3";
 export { StyleRoot } from "./StyleRoot";
-export { SignInWithB3 } from "./SignInWithB3/SignInWithB3";
-export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
-export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { AuthButton } from "./SignInWithB3/components/AuthButton";
 export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
 export { WalletRow } from "./SignInWithB3/components/WalletRow";
+export { SignInWithB3 } from "./SignInWithB3/SignInWithB3";
+export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
+export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
@@ -19,15 +19,12 @@ export { AccountAssets } from "./AccountAssets/AccountAssets";
 export { MintButton } from "./MintButton/MintButton";
 export { SendETHButton } from "./SendETHButton/SendETHButton";
 export { SendERC20Button } from "./SendERC20Button/SendERC20Button";
+export { TransakModal } from "./Transak/TransakModal";
 export { Button as CustomButton, buttonVariants as customButtonVariants } from "./custom/Button";
 export { ClientOnly } from "./custom/ClientOnly";
 export { CopyToClipboard } from "./custom/CopyToClipboard";
 export { StaggeredFadeLoader } from "./custom/StaggeredFadeLoader";
 export { WalletConnectorIcon } from "./custom/WalletConnectorIcon";
-export { Loading } from "./ui/Loading";
-export { ShinyButton } from "./ui/ShinyButton";
-export { TabTrigger, Tabs, TabsContent, TabsList, TabsTransitionWrapper } from "./ui/TabSystem";
-export { TabTrigger as TabTriggerPrimitive, TabsContent as TabsContentPrimitive, TabsList as TabsListPrimitive, Tabs as TabsPrimitive, } from "./ui/Tabs";
 export { Badge, badgeVariants } from "./ui/badge";
 export { Button, buttonVariants } from "./ui/button";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "./ui/command";
@@ -36,9 +33,13 @@ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
 export { GlareCard } from "./ui/glare-card";
 export { GlareCardRounded } from "./ui/glare-card-rounded";
 export { Input } from "./ui/input";
+export { Loading } from "./ui/Loading";
 export { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 export { ScrollArea, ScrollBar } from "./ui/scroll-area";
+export { ShinyButton } from "./ui/ShinyButton";
 export { Skeleton } from "./ui/skeleton";
+export { TabsContent as TabsContentPrimitive, TabsList as TabsListPrimitive, Tabs as TabsPrimitive, TabTrigger as TabTriggerPrimitive, } from "./ui/Tabs";
+export { Tabs, TabsContent, TabsList, TabsTransitionWrapper, TabTrigger } from "./ui/TabSystem";
 export { TextLoop } from "./ui/text-loop";
 export { TextShimmer } from "./ui/text-shimmer";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";

package/dist/cjs/global-account/react/components/index.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommandItem = exports.CommandInput = exports.CommandGroup = exports.CommandEmpty = exports.CommandDialog = exports.Command = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.TabsPrimitive = exports.TabsListPrimitive = exports.TabsContentPrimitive = exports.TabTriggerPrimitive = exports.TabsTransitionWrapper = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TabTrigger = exports.ShinyButton = exports.Loading = exports.WalletConnectorIcon = exports.StaggeredFadeLoader = exports.CopyToClipboard = exports.ClientOnly = exports.customButtonVariants = exports.CustomButton = exports.SendERC20Button = exports.SendETHButton = exports.MintButton = exports.AccountAssets = exports.RequestPermissionsButton = exports.RequestPermissions = exports.ManageAccount = exports.isWalletType = exports.getConnectOptionsFromStrategy = exports.LoginStepContainer = exports.WalletRow = exports.PermissionItem = exports.AuthButton = exports.SignInWithB3Privy = exports.SignInWithB3Flow = exports.SignInWithB3 = exports.StyleRoot = exports.useB3 = exports.B3Context = exports.RelayKitProviderWrapper = exports.InnerProvider = exports.B3Provider = exports.B3DynamicModal = void 0;
-exports.AnimatedLottie = exports.TransitionPanel = exports.TooltipTrigger = exports.TooltipProvider = exports.TooltipContent = exports.Tooltip = exports.TextShimmer = exports.TextLoop = exports.Skeleton = exports.ScrollBar = exports.ScrollArea = exports.PopoverTrigger = exports.PopoverContent = exports.Popover = exports.Input = exports.GlareCardRounded = exports.GlareCard = exports.DrawerTrigger = exports.DrawerTitle = exports.DrawerPortal = exports.DrawerOverlay = exports.DrawerHeader = exports.DrawerFooter = exports.DrawerDescription = exports.DrawerContent = exports.DrawerClose = exports.Drawer = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = exports.CommandShortcut = exports.CommandSeparator = exports.CommandList = void 0;
+exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = exports.CommandShortcut = exports.CommandSeparator = exports.CommandList = exports.CommandItem = exports.CommandInput = exports.CommandGroup = exports.CommandEmpty = exports.CommandDialog = exports.Command = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.WalletConnectorIcon = exports.StaggeredFadeLoader = exports.CopyToClipboard = exports.ClientOnly = exports.customButtonVariants = exports.CustomButton = exports.TransakModal = exports.SendERC20Button = exports.SendETHButton = exports.MintButton = exports.AccountAssets = exports.RequestPermissionsButton = exports.RequestPermissions = exports.ManageAccount = exports.isWalletType = exports.getConnectOptionsFromStrategy = exports.LoginStepContainer = exports.SignInWithB3Privy = exports.SignInWithB3Flow = exports.SignInWithB3 = exports.WalletRow = exports.PermissionItem = exports.AuthButton = exports.StyleRoot = exports.useB3 = exports.B3Context = exports.InnerProvider = exports.B3Provider = exports.B3DynamicModal = exports.RelayKitProviderWrapper = void 0;
+exports.AnimatedLottie = exports.TransitionPanel = exports.TooltipTrigger = exports.TooltipProvider = exports.TooltipContent = exports.Tooltip = exports.TextShimmer = exports.TextLoop = exports.TabTrigger = exports.TabsTransitionWrapper = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TabTriggerPrimitive = exports.TabsPrimitive = exports.TabsListPrimitive = exports.TabsContentPrimitive = exports.Skeleton = exports.ShinyButton = exports.ScrollBar = exports.ScrollArea = exports.PopoverTrigger = exports.PopoverContent = exports.Popover = exports.Loading = exports.Input = exports.GlareCardRounded = exports.GlareCard = exports.DrawerTrigger = exports.DrawerTitle = exports.DrawerPortal = exports.DrawerOverlay = exports.DrawerHeader = exports.DrawerFooter = exports.DrawerDescription = exports.DrawerContent = exports.DrawerClose = exports.Drawer = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = void 0;
 // Core Components
+var RelayKitProviderWrapper_1 = require("./B3Provider/RelayKitProviderWrapper");
+Object.defineProperty(exports, "RelayKitProviderWrapper", { enumerable: true, get: function () { return RelayKitProviderWrapper_1.RelayKitProviderWrapper; } });
 var B3DynamicModal_1 = require("./B3DynamicModal");
 Object.defineProperty(exports, "B3DynamicModal", { enumerable: true, get: function () { return B3DynamicModal_1.B3DynamicModal; } });
 var B3Provider_1 = require("./B3Provider/B3Provider");
 Object.defineProperty(exports, "B3Provider", { enumerable: true, get: function () { return B3Provider_1.B3Provider; } });
 Object.defineProperty(exports, "InnerProvider", { enumerable: true, get: function () { return B3Provider_1.InnerProvider; } });
-var RelayKitProviderWrapper_1 = require("./B3Provider/RelayKitProviderWrapper");
-Object.defineProperty(exports, "RelayKitProviderWrapper", { enumerable: true, get: function () { return RelayKitProviderWrapper_1.RelayKitProviderWrapper; } });
 var types_1 = require("./B3Provider/types");
 Object.defineProperty(exports, "B3Context", { enumerable: true, get: function () { return types_1.B3Context; } });
 var useB3_1 = require("./B3Provider/useB3");
@@ -17,18 +17,18 @@ Object.defineProperty(exports, "useB3", { enumerable: true, get: function () { r
 var StyleRoot_1 = require("./StyleRoot");
 Object.defineProperty(exports, "StyleRoot", { enumerable: true, get: function () { return StyleRoot_1.StyleRoot; } });
 // SignInWithB3 Components
-var SignInWithB3_1 = require("./SignInWithB3/SignInWithB3");
-Object.defineProperty(exports, "SignInWithB3", { enumerable: true, get: function () { return SignInWithB3_1.SignInWithB3; } });
-var SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
-Object.defineProperty(exports, "SignInWithB3Flow", { enumerable: true, get: function () { return SignInWithB3Flow_1.SignInWithB3Flow; } });
-var SignInWithB3Privy_1 = require("./SignInWithB3/SignInWithB3Privy");
-Object.defineProperty(exports, "SignInWithB3Privy", { enumerable: true, get: function () { return SignInWithB3Privy_1.SignInWithB3Privy; } });
 var AuthButton_1 = require("./SignInWithB3/components/AuthButton");
 Object.defineProperty(exports, "AuthButton", { enumerable: true, get: function () { return AuthButton_1.AuthButton; } });
 var PermissionItem_1 = require("./SignInWithB3/components/PermissionItem");
 Object.defineProperty(exports, "PermissionItem", { enumerable: true, get: function () { return PermissionItem_1.PermissionItem; } });
 var WalletRow_1 = require("./SignInWithB3/components/WalletRow");
 Object.defineProperty(exports, "WalletRow", { enumerable: true, get: function () { return WalletRow_1.WalletRow; } });
+var SignInWithB3_1 = require("./SignInWithB3/SignInWithB3");
+Object.defineProperty(exports, "SignInWithB3", { enumerable: true, get: function () { return SignInWithB3_1.SignInWithB3; } });
+var SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
+Object.defineProperty(exports, "SignInWithB3Flow", { enumerable: true, get: function () { return SignInWithB3Flow_1.SignInWithB3Flow; } });
+var SignInWithB3Privy_1 = require("./SignInWithB3/SignInWithB3Privy");
+Object.defineProperty(exports, "SignInWithB3Privy", { enumerable: true, get: function () { return SignInWithB3Privy_1.SignInWithB3Privy; } });
 var LoginStep_1 = require("./SignInWithB3/steps/LoginStep");
 Object.defineProperty(exports, "LoginStepContainer", { enumerable: true, get: function () { return LoginStep_1.LoginStepContainer; } });
 var signInUtils_1 = require("./SignInWithB3/utils/signInUtils");
@@ -54,6 +54,9 @@ Object.defineProperty(exports, "SendETHButton", { enumerable: true, get: functio
 // SendERC20Button Components
 var SendERC20Button_1 = require("./SendERC20Button/SendERC20Button");
 Object.defineProperty(exports, "SendERC20Button", { enumerable: true, get: function () { return SendERC20Button_1.SendERC20Button; } });
+// Transak Components
+var TransakModal_1 = require("./Transak/TransakModal");
+Object.defineProperty(exports, "TransakModal", { enumerable: true, get: function () { return TransakModal_1.TransakModal; } });
 // Custom Components
 var Button_1 = require("./custom/Button");
 Object.defineProperty(exports, "CustomButton", { enumerable: true, get: function () { return Button_1.Button; } });
@@ -67,21 +70,6 @@ Object.defineProperty(exports, "StaggeredFadeLoader", { enumerable: true, get: f
 var WalletConnectorIcon_1 = require("./custom/WalletConnectorIcon");
 Object.defineProperty(exports, "WalletConnectorIcon", { enumerable: true, get: function () { return WalletConnectorIcon_1.WalletConnectorIcon; } });
 // UI Components
-var Loading_1 = require("./ui/Loading");
-Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return Loading_1.Loading; } });
-var ShinyButton_1 = require("./ui/ShinyButton");
-Object.defineProperty(exports, "ShinyButton", { enumerable: true, get: function () { return ShinyButton_1.ShinyButton; } });
-var TabSystem_1 = require("./ui/TabSystem");
-Object.defineProperty(exports, "TabTrigger", { enumerable: true, get: function () { return TabSystem_1.TabTrigger; } });
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return TabSystem_1.Tabs; } });
-Object.defineProperty(exports, "TabsContent", { enumerable: true, get: function () { return TabSystem_1.TabsContent; } });
-Object.defineProperty(exports, "TabsList", { enumerable: true, get: function () { return TabSystem_1.TabsList; } });
-Object.defineProperty(exports, "TabsTransitionWrapper", { enumerable: true, get: function () { return TabSystem_1.TabsTransitionWrapper; } });
-var Tabs_1 = require("./ui/Tabs");
-Object.defineProperty(exports, "TabTriggerPrimitive", { enumerable: true, get: function () { return Tabs_1.TabTrigger; } });
-Object.defineProperty(exports, "TabsContentPrimitive", { enumerable: true, get: function () { return Tabs_1.TabsContent; } });
-Object.defineProperty(exports, "TabsListPrimitive", { enumerable: true, get: function () { return Tabs_1.TabsList; } });
-Object.defineProperty(exports, "TabsPrimitive", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 var badge_1 = require("./ui/badge");
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return badge_1.Badge; } });
 Object.defineProperty(exports, "badgeVariants", { enumerable: true, get: function () { return badge_1.badgeVariants; } });
@@ -126,6 +114,8 @@ var glare_card_rounded_1 = require("./ui/glare-card-rounded");
 Object.defineProperty(exports, "GlareCardRounded", { enumerable: true, get: function () { return glare_card_rounded_1.GlareCardRounded; } });
 var input_1 = require("./ui/input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_1.Input; } });
+var Loading_1 = require("./ui/Loading");
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return Loading_1.Loading; } });
 var popover_1 = require("./ui/popover");
 Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return popover_1.Popover; } });
 Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return popover_1.PopoverContent; } });
@@ -133,8 +123,21 @@ Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: functi
 var scroll_area_1 = require("./ui/scroll-area");
 Object.defineProperty(exports, "ScrollArea", { enumerable: true, get: function () { return scroll_area_1.ScrollArea; } });
 Object.defineProperty(exports, "ScrollBar", { enumerable: true, get: function () { return scroll_area_1.ScrollBar; } });
+var ShinyButton_1 = require("./ui/ShinyButton");
+Object.defineProperty(exports, "ShinyButton", { enumerable: true, get: function () { return ShinyButton_1.ShinyButton; } });
 var skeleton_1 = require("./ui/skeleton");
 Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return skeleton_1.Skeleton; } });
+var Tabs_1 = require("./ui/Tabs");
+Object.defineProperty(exports, "TabsContentPrimitive", { enumerable: true, get: function () { return Tabs_1.TabsContent; } });
+Object.defineProperty(exports, "TabsListPrimitive", { enumerable: true, get: function () { return Tabs_1.TabsList; } });
+Object.defineProperty(exports, "TabsPrimitive", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
+Object.defineProperty(exports, "TabTriggerPrimitive", { enumerable: true, get: function () { return Tabs_1.TabTrigger; } });
+var TabSystem_1 = require("./ui/TabSystem");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return TabSystem_1.Tabs; } });
+Object.defineProperty(exports, "TabsContent", { enumerable: true, get: function () { return TabSystem_1.TabsContent; } });
+Object.defineProperty(exports, "TabsList", { enumerable: true, get: function () { return TabSystem_1.TabsList; } });
+Object.defineProperty(exports, "TabsTransitionWrapper", { enumerable: true, get: function () { return TabSystem_1.TabsTransitionWrapper; } });
+Object.defineProperty(exports, "TabTrigger", { enumerable: true, get: function () { return TabSystem_1.TabTrigger; } });
 var text_loop_1 = require("./ui/text-loop");
 Object.defineProperty(exports, "TextLoop", { enumerable: true, get: function () { return text_loop_1.TextLoop; } });
 var text_shimmer_1 = require("./ui/text-shimmer");

package/dist/cjs/global-account/react/stores/index.d.ts

@@ -1,3 +1,3 @@
 export { useAuthStore } from "./useAuthStore";
 export { useModalStore } from "./useModalStore";
-export type { AnySpendBuySpinProps, AnySpendFundTournamentProps, AnySpendJoinTournamentProps, AnySpendModalProps, AnySpendNftProps, AnySpendOrderHistoryProps, AnySpendStakeB3Props, AnyspendOrderDetailsProps, ManageAccountModalProps, ModalContentType, RequestPermissionsModalProps, SignInWithB3ModalProps, } from "./useModalStore";
+export type { AnySpendBuySpinProps, AnySpendFundTournamentProps, AnySpendJoinTournamentProps, AnySpendModalProps, AnySpendNftProps, AnyspendOrderDetailsProps, AnySpendOrderHistoryProps, AnySpendStakeB3Props, ManageAccountModalProps, ModalContentType, RequestPermissionsModalProps, SignInWithB3ModalProps, TransakProps, } from "./useModalStore";

package/dist/cjs/global-account/react/stores/useModalStore.d.ts

@@ -183,6 +183,24 @@ export interface AnyspendOrderDetailsProps extends BaseModalProps {
     /** Whether to show the back button */
     showBackButton?: boolean;
 }
+/**
+ * Props for the Transak modal
+ * Handles Transak-specific on-ramping
+ */
+export interface TransakProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "transak";
+    /** Wallet address to receive the purchased crypto */
+    destinationWalletAddress?: string;
+    /** Default amount of crypto to purchase */
+    defaultCryptoAmount?: number;
+    /** Amount of fiat currency to spend */
+    fiatAmount?: number;
+    /** ISO country code for KYC and available payment methods */
+    countryCode?: string;
+    /** Callback function called when the purchase is successful */
+    onSuccess?: () => void;
+}
 /**
  * Props for the AnySpend order history modal
  */
@@ -290,7 +308,7 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | TransakProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps;
 /**
  * State interface for the modal store
  */

package/dist/esm/anyspend/react/components/common/OrderDetails.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ALL_CHAINS, DEPOSIT_HYPE_ACTION, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, } from "../../../../anyspend/index.js";
-import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useB3, useModalStore, useProfile, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useModalStore, useProfile, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
 import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
+import { useColorMode } from "@chakra-ui/react";
 import { createAssociatedTokenAccountInstruction, createTransferCheckedInstruction, getAssociatedTokenAddressSync, } from "@solana/spl-token";
 import { ComputeBudgetProgram, Connection, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust, WalletWalletConnect } from "@web3icons/react";
@@ -126,9 +127,6 @@ function roundTokenAmount(amount) {
 export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTx, executeTx, refundTxs, cryptoPaymentMethod, onBack, disableUrlParamManagement = false, }) {
     const router = useRouter();
     const searchParams = useSearchParams();
-    // Get theme from B3Provider context
-    const { theme } = useB3();
-    const colorMode = theme || "light";
     // Read crypto payment method from URL parameters
     const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod");
     const effectiveCryptoPaymentMethod = cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
@@ -145,6 +143,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     const [showQRCode, setShowQRCode] = useState(false);
     const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
     const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
+    const { colorMode } = useColorMode();
     const roundedUpSrcAmount = useMemo(() => {
         // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
         // Use 21 significant digits (max allowed by Intl.NumberFormat)