@b3dotfun/sdk 0.0.73-alpha.0 → 0.0.73-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -483,7 +483,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
483
483
|
? "Receive NFT at"
|
|
484
484
|
: orderType === "join_tournament"
|
|
485
485
|
? "Join for"
|
|
486
|
-
: "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex
|
|
486
|
+
: "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: (0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress) }) }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-nowrap text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })] }, recipientAddress)) : null;
|
|
487
487
|
const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
|
|
488
488
|
setActivePanel(PanelView.HISTORY);
|
|
489
489
|
}, onSelectOrder: onSelectOrder }) }));
|
|
@@ -526,7 +526,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
526
526
|
opacity: hasMounted ? 1 : 0,
|
|
527
527
|
y: hasMounted ? 0 : 20,
|
|
528
528
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
529
|
-
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex
|
|
529
|
+
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ((0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Connect wallet" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
|
|
530
530
|
opacity: hasMounted ? 1 : 0,
|
|
531
531
|
y: hasMounted ? 0 : 20,
|
|
532
532
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
@@ -537,7 +537,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
537
537
|
opacity: hasMounted ? 1 : 0,
|
|
538
538
|
y: hasMounted ? 0 : 20,
|
|
539
539
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
540
|
-
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("
|
|
540
|
+
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary whitespace-nowrap font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
|
|
541
541
|
10000).toFixed(2), " ", "fee"] }))] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
|
|
542
542
|
opacity: hasMounted ? 1 : 0,
|
|
543
543
|
y: hasMounted ? 0 : 20,
|
|
@@ -546,11 +546,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
546
546
|
opacity: hasMounted ? 1 : 0,
|
|
547
547
|
y: hasMounted ? 0 : 20,
|
|
548
548
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
549
|
-
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex
|
|
549
|
+
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
|
|
550
550
|
opacity: hasMounted ? 1 : 0,
|
|
551
551
|
y: hasMounted ? 0 : 20,
|
|
552
552
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
553
|
-
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("
|
|
553
|
+
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] }), anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
|
|
554
554
|
1e6).toFixed(2), " ", "fee"] }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
|
|
555
555
|
opacity: hasMounted ? 1 : 0,
|
|
556
556
|
y: hasMounted ? 0 : 20,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { eqci, getDefaultToken, roundUpUSDCBaseAmountToNearest } from "../../../anyspend/index.js";
|
|
3
3
|
import { RELAY_ETH_ADDRESS, USDC_BASE } from "../../../anyspend/constants/index.js";
|
|
4
4
|
import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useAnyspendTokenList, useConnectedUserProfile, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
|
|
@@ -444,7 +444,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
444
444
|
? "Receive NFT at"
|
|
445
445
|
: orderType === "join_tournament"
|
|
446
446
|
? "Join for"
|
|
447
|
-
: "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex
|
|
447
|
+
: "Recipient" }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: _jsx("span", { className: "whitespace-nowrap", children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress) }) }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "whitespace-nowrap text-sm font-medium", children: "Select recipient" }) })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })] }, recipientAddress)) : null;
|
|
448
448
|
const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
|
|
449
449
|
setActivePanel(PanelView.HISTORY);
|
|
450
450
|
}, onSelectOrder: onSelectOrder }) }));
|
|
@@ -487,7 +487,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
487
487
|
opacity: hasMounted ? 1 : 0,
|
|
488
488
|
y: hasMounted ? 0 : 20,
|
|
489
489
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
490
|
-
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex
|
|
490
|
+
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : (_jsx("span", { className: "whitespace-nowrap", children: "Connect wallet" })), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
|
|
491
491
|
opacity: hasMounted ? 1 : 0,
|
|
492
492
|
y: hasMounted ? 0 : 20,
|
|
493
493
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
@@ -498,7 +498,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
498
498
|
opacity: hasMounted ? 1 : 0,
|
|
499
499
|
y: hasMounted ? 0 : 20,
|
|
500
500
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
501
|
-
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsxs("
|
|
501
|
+
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), _jsxs("span", { className: "text-as-primary whitespace-nowrap font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
|
|
502
502
|
10000).toFixed(2), " ", "fee"] }))] })] })] })] }), _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(motion.div, { initial: false, animate: {
|
|
503
503
|
opacity: hasMounted ? 1 : 0,
|
|
504
504
|
y: hasMounted ? 0 : 20,
|
|
@@ -507,11 +507,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
507
507
|
opacity: hasMounted ? 1 : 0,
|
|
508
508
|
y: hasMounted ? 0 : 20,
|
|
509
509
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
510
|
-
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex
|
|
510
|
+
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
|
|
511
511
|
opacity: hasMounted ? 1 : 0,
|
|
512
512
|
y: hasMounted ? 0 : 20,
|
|
513
513
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
514
|
-
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsxs("
|
|
514
|
+
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [_jsxs("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [_jsxs("span", { className: "whitespace-nowrap", children: ["Total ", _jsx("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: _jsx(FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), _jsxs("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] }), anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && (_jsxs("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
|
|
515
515
|
1e6).toFixed(2), " ", "fee"] }))] })] })] }), _jsx("div", { className: cn("flex w-full flex-col items-center justify-between gap-2"), children: _jsx(motion.div, { initial: false, animate: {
|
|
516
516
|
opacity: hasMounted ? 1 : 0,
|
|
517
517
|
y: hasMounted ? 0 : 20,
|
package/package.json
CHANGED
|
@@ -643,27 +643,27 @@ function AnySpendCustomInner({
|
|
|
643
643
|
? "Join for"
|
|
644
644
|
: "Recipient"}
|
|
645
645
|
</div>
|
|
646
|
-
<div className="flex items-center gap-2">
|
|
646
|
+
<div className="flex flex-wrap items-center justify-end gap-2">
|
|
647
647
|
{recipientAddress ? (
|
|
648
648
|
<button
|
|
649
|
-
className={cn("text-as-tertiarry flex
|
|
649
|
+
className={cn("text-as-tertiarry flex items-center gap-2 rounded-lg")}
|
|
650
650
|
onClick={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
|
|
651
651
|
>
|
|
652
|
-
|
|
653
|
-
<
|
|
654
|
-
|
|
655
|
-
</
|
|
656
|
-
|
|
652
|
+
<div className="text-as-tertiarry flex items-center gap-1 text-sm">
|
|
653
|
+
<span className="whitespace-nowrap">
|
|
654
|
+
{recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress)}
|
|
655
|
+
</span>
|
|
656
|
+
</div>
|
|
657
657
|
</button>
|
|
658
658
|
) : (
|
|
659
659
|
<button
|
|
660
660
|
className="text-as-primary/70 flex items-center gap-1 rounded-lg"
|
|
661
661
|
onClick={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
|
|
662
662
|
>
|
|
663
|
-
<div className="text-sm font-medium">Select recipient</div>
|
|
663
|
+
<div className="whitespace-nowrap text-sm font-medium">Select recipient</div>
|
|
664
664
|
</button>
|
|
665
665
|
)}
|
|
666
|
-
<ChevronRight className="h-4 w-4" />
|
|
666
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
667
667
|
</div>
|
|
668
668
|
</motion.div>
|
|
669
669
|
) : null;
|
|
@@ -913,31 +913,29 @@ function AnySpendCustomInner({
|
|
|
913
913
|
>
|
|
914
914
|
<div className="text-as-tertiarry flex h-7 items-center text-sm">Pay</div>
|
|
915
915
|
<button
|
|
916
|
-
className="text-as-tertiarry flex
|
|
916
|
+
className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
|
|
917
917
|
onClick={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
|
|
918
918
|
>
|
|
919
919
|
{effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
|
|
920
920
|
<>
|
|
921
921
|
{connectedAddress ? (
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
</span>
|
|
926
|
-
</>
|
|
922
|
+
<span className="text-as-tertiarry whitespace-nowrap">
|
|
923
|
+
{connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
|
|
924
|
+
</span>
|
|
927
925
|
) : (
|
|
928
|
-
"Connect wallet
|
|
926
|
+
<span className="whitespace-nowrap">Connect wallet</span>
|
|
929
927
|
)}
|
|
930
|
-
<ChevronRight className="h-4 w-4" />
|
|
928
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
931
929
|
</>
|
|
932
930
|
) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
|
|
933
931
|
<>
|
|
934
|
-
Transfer crypto
|
|
935
|
-
<ChevronRight className="h-4 w-4" />
|
|
932
|
+
<span className="whitespace-nowrap">Transfer crypto</span>
|
|
933
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
936
934
|
</>
|
|
937
935
|
) : (
|
|
938
936
|
<>
|
|
939
|
-
Select payment method
|
|
940
|
-
<ChevronRight className="h-4 w-4" />
|
|
937
|
+
<span className="whitespace-nowrap">Select payment method</span>
|
|
938
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
941
939
|
</>
|
|
942
940
|
)}
|
|
943
941
|
</button>
|
|
@@ -985,32 +983,34 @@ function AnySpendCustomInner({
|
|
|
985
983
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
986
984
|
}}
|
|
987
985
|
transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
|
|
988
|
-
className="relative flex w-full items-center justify-between"
|
|
986
|
+
className="relative flex w-full items-center justify-between gap-4"
|
|
989
987
|
>
|
|
990
|
-
<
|
|
991
|
-
<span className="
|
|
988
|
+
<span className="text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm">
|
|
989
|
+
<span className="whitespace-nowrap">
|
|
992
990
|
Total <span className="text-as-tertiarry">(with fee)</span>
|
|
993
|
-
{anyspendQuote?.data?.fee && (
|
|
994
|
-
<TooltipProvider>
|
|
995
|
-
<Tooltip>
|
|
996
|
-
<TooltipTrigger asChild>
|
|
997
|
-
<button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
|
|
998
|
-
<Info className="h-4 w-4" />
|
|
999
|
-
</button>
|
|
1000
|
-
</TooltipTrigger>
|
|
1001
|
-
<TooltipContent side="top">
|
|
1002
|
-
<FeeBreakDown fee={anyspendQuote.data.fee} />
|
|
1003
|
-
</TooltipContent>
|
|
1004
|
-
</Tooltip>
|
|
1005
|
-
</TooltipProvider>
|
|
1006
|
-
)}
|
|
1007
991
|
</span>
|
|
1008
|
-
{
|
|
1009
|
-
|
|
992
|
+
{anyspendQuote?.data?.fee && (
|
|
993
|
+
<TooltipProvider>
|
|
994
|
+
<Tooltip>
|
|
995
|
+
<TooltipTrigger asChild>
|
|
996
|
+
<button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
|
|
997
|
+
<Info className="h-4 w-4" />
|
|
998
|
+
</button>
|
|
999
|
+
</TooltipTrigger>
|
|
1000
|
+
<TooltipContent side="top">
|
|
1001
|
+
<FeeBreakDown fee={anyspendQuote.data.fee} />
|
|
1002
|
+
</TooltipContent>
|
|
1003
|
+
</Tooltip>
|
|
1004
|
+
</TooltipProvider>
|
|
1005
|
+
)}
|
|
1006
|
+
</span>
|
|
1010
1007
|
<div className="flex flex-col items-end gap-0.5">
|
|
1011
|
-
<
|
|
1012
|
-
{
|
|
1013
|
-
|
|
1008
|
+
<div className="flex flex-wrap items-center justify-end gap-2">
|
|
1009
|
+
{renderPointsBadge()}
|
|
1010
|
+
<span className="text-as-primary whitespace-nowrap font-semibold">
|
|
1011
|
+
{formattedSrcAmount || "--"} {srcToken.symbol}
|
|
1012
|
+
</span>
|
|
1013
|
+
</div>
|
|
1014
1014
|
{anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (
|
|
1015
1015
|
<span className="text-as-secondary text-xs">
|
|
1016
1016
|
incl. $
|
|
@@ -1090,33 +1090,33 @@ function AnySpendCustomInner({
|
|
|
1090
1090
|
>
|
|
1091
1091
|
<div className="text-as-tertiarry flex h-7 items-center text-sm">Pay with</div>
|
|
1092
1092
|
<button
|
|
1093
|
-
className="text-as-tertiarry flex
|
|
1093
|
+
className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
|
|
1094
1094
|
onClick={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
|
|
1095
1095
|
>
|
|
1096
1096
|
{selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
|
|
1097
1097
|
<>
|
|
1098
|
-
<div className="flex items-center gap-2">
|
|
1099
|
-
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
|
|
1098
|
+
<div className="flex items-center gap-2 whitespace-nowrap">
|
|
1099
|
+
<div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
|
|
1100
1100
|
<span className="text-xs font-bold text-white">C</span>
|
|
1101
1101
|
</div>
|
|
1102
1102
|
Coinbase Pay
|
|
1103
1103
|
</div>
|
|
1104
|
-
<ChevronRight className="h-4 w-4" />
|
|
1104
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
1105
1105
|
</>
|
|
1106
1106
|
) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
|
|
1107
1107
|
<>
|
|
1108
|
-
<div className="flex items-center gap-2">
|
|
1109
|
-
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
|
|
1108
|
+
<div className="flex items-center gap-2 whitespace-nowrap">
|
|
1109
|
+
<div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
|
|
1110
1110
|
<span className="text-xs font-bold text-white">S</span>
|
|
1111
1111
|
</div>
|
|
1112
1112
|
Credit/Debit Card
|
|
1113
1113
|
</div>
|
|
1114
|
-
<ChevronRight className="h-4 w-4" />
|
|
1114
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
1115
1115
|
</>
|
|
1116
1116
|
) : (
|
|
1117
1117
|
<>
|
|
1118
|
-
Select payment method
|
|
1119
|
-
<ChevronRight className="h-4 w-4" />
|
|
1118
|
+
<span className="whitespace-nowrap">Select payment method</span>
|
|
1119
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
1120
1120
|
</>
|
|
1121
1121
|
)}
|
|
1122
1122
|
</button>
|
|
@@ -1137,30 +1137,34 @@ function AnySpendCustomInner({
|
|
|
1137
1137
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
1138
1138
|
}}
|
|
1139
1139
|
transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
|
|
1140
|
-
className="relative flex w-full items-center justify-between"
|
|
1140
|
+
className="relative flex w-full items-center justify-between gap-4"
|
|
1141
1141
|
>
|
|
1142
|
-
<
|
|
1143
|
-
<span className="
|
|
1142
|
+
<span className="text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm">
|
|
1143
|
+
<span className="whitespace-nowrap">
|
|
1144
1144
|
Total <span className="text-as-tertiarry">(USD)</span>
|
|
1145
|
-
{anyspendQuote?.data?.fee && (
|
|
1146
|
-
<TooltipProvider>
|
|
1147
|
-
<Tooltip>
|
|
1148
|
-
<TooltipTrigger asChild>
|
|
1149
|
-
<button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
|
|
1150
|
-
<Info className="h-4 w-4" />
|
|
1151
|
-
</button>
|
|
1152
|
-
</TooltipTrigger>
|
|
1153
|
-
<TooltipContent side="top">
|
|
1154
|
-
<FeeBreakDown fee={anyspendQuote.data.fee} />
|
|
1155
|
-
</TooltipContent>
|
|
1156
|
-
</Tooltip>
|
|
1157
|
-
</TooltipProvider>
|
|
1158
|
-
)}
|
|
1159
1145
|
</span>
|
|
1160
|
-
{
|
|
1161
|
-
|
|
1146
|
+
{anyspendQuote?.data?.fee && (
|
|
1147
|
+
<TooltipProvider>
|
|
1148
|
+
<Tooltip>
|
|
1149
|
+
<TooltipTrigger asChild>
|
|
1150
|
+
<button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
|
|
1151
|
+
<Info className="h-4 w-4" />
|
|
1152
|
+
</button>
|
|
1153
|
+
</TooltipTrigger>
|
|
1154
|
+
<TooltipContent side="top">
|
|
1155
|
+
<FeeBreakDown fee={anyspendQuote.data.fee} />
|
|
1156
|
+
</TooltipContent>
|
|
1157
|
+
</Tooltip>
|
|
1158
|
+
</TooltipProvider>
|
|
1159
|
+
)}
|
|
1160
|
+
</span>
|
|
1162
1161
|
<div className="flex flex-col items-end gap-0.5">
|
|
1163
|
-
<
|
|
1162
|
+
<div className="flex flex-wrap items-center justify-end gap-2">
|
|
1163
|
+
{renderPointsBadge()}
|
|
1164
|
+
<span className="text-as-primary whitespace-nowrap text-xl font-semibold">
|
|
1165
|
+
${srcFiatAmount || "0.00"}
|
|
1166
|
+
</span>
|
|
1167
|
+
</div>
|
|
1164
1168
|
{anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && (
|
|
1165
1169
|
<span className="text-as-secondary text-xs">
|
|
1166
1170
|
incl. $
|