@b3dotfun/sdk 0.0.23-alpha.8 → 0.0.23-alpha.9
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.
- package/dist/cjs/anyspend/react/components/AnySpend.js +2 -2
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +2 -2
- package/dist/cjs/anyspend/react/components/common/Accordion.d.ts +7 -0
- package/dist/cjs/anyspend/react/components/common/Accordion.js +53 -0
- package/dist/cjs/anyspend/react/components/common/OrderDetails.js +56 -55
- package/dist/cjs/anyspend/react/components/common/PanelOnramp.js +3 -2
- package/dist/cjs/anyspend/react/components/common/TokenBalance.js +1 -1
- package/dist/esm/anyspend/react/components/AnySpend.js +2 -2
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +2 -2
- package/dist/esm/anyspend/react/components/common/Accordion.d.ts +7 -0
- package/dist/esm/anyspend/react/components/common/Accordion.js +14 -0
- package/dist/esm/anyspend/react/components/common/OrderDetails.js +56 -55
- package/dist/esm/anyspend/react/components/common/PanelOnramp.js +4 -3
- package/dist/esm/anyspend/react/components/common/TokenBalance.js +1 -1
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/react/components/common/Accordion.d.ts +7 -0
- package/package.json +2 -1
- package/src/anyspend/react/components/AnySpend.tsx +2 -18
- package/src/anyspend/react/components/AnySpendCustom.tsx +2 -10
- package/src/anyspend/react/components/common/Accordion.tsx +56 -0
- package/src/anyspend/react/components/common/OrderDetails.tsx +263 -218
- package/src/anyspend/react/components/common/PanelOnramp.tsx +6 -6
- package/src/anyspend/react/components/common/TokenBalance.tsx +3 -3
- package/src/styles/index.css +27 -0
|
@@ -804,7 +804,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
804
804
|
setActiveTab("fiat");
|
|
805
805
|
setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
|
|
806
806
|
setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
|
|
807
|
-
}, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.
|
|
807
|
+
}, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") }) })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
|
|
808
808
|
setIsSrcInputDirty(true);
|
|
809
809
|
setSrcAmount(value);
|
|
810
810
|
}, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
|
|
@@ -829,7 +829,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
829
829
|
const tempDstAmount = dstAmount;
|
|
830
830
|
setSrcAmount(tempDstAmount);
|
|
831
831
|
setDstAmount(tempSrcAmount);
|
|
832
|
-
}, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [recipientAddress ? ((0, jsx_runtime_1.
|
|
832
|
+
}, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [recipientAddress ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress || "") }) })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }) })) : ((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: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
|
|
833
833
|
// Fixed destination token display in buy mode
|
|
834
834
|
(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : ((0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
|
|
835
835
|
setIsSrcInputDirty(false);
|
|
@@ -251,7 +251,7 @@ function AnySpendCustomInner({ isMainnet = true, loadOrder, mode = "modal", reci
|
|
|
251
251
|
},
|
|
252
252
|
});
|
|
253
253
|
const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
|
|
254
|
-
const { address: connectedAddress, name: connectedName
|
|
254
|
+
const { address: connectedAddress, name: connectedName } = (0, react_1.useConnectedUserProfile)();
|
|
255
255
|
const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress });
|
|
256
256
|
const recipientName = recipientProfile.data?.name;
|
|
257
257
|
const handleCreateOrder = async (recipientAddress, onramp) => {
|
|
@@ -441,7 +441,7 @@ function AnySpendCustomInner({ isMainnet = true, loadOrder, mode = "modal", reci
|
|
|
441
441
|
opacity: hasMounted ? 1 : 0,
|
|
442
442
|
y: hasMounted ? 0 : 20,
|
|
443
443
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
444
|
-
}, 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 h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.
|
|
444
|
+
}, 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 h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") }) })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (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: {
|
|
445
445
|
opacity: hasMounted ? 1 : 0,
|
|
446
446
|
y: hasMounted ? 0 : 20,
|
|
447
447
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.AccordionTrigger = exports.AccordionItem = exports.AccordionContent = exports.Accordion = void 0;
|
|
38
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
|
+
const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
|
|
40
|
+
const lucide_react_1 = require("lucide-react");
|
|
41
|
+
const React = __importStar(require("react"));
|
|
42
|
+
const utils_1 = require("../../../../shared/utils");
|
|
43
|
+
const Accordion = AccordionPrimitive.Root;
|
|
44
|
+
exports.Accordion = Accordion;
|
|
45
|
+
const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (0, jsx_runtime_1.jsx)(AccordionPrimitive.Item, { ref: ref, className: (0, utils_1.cn)("", className), ...props }));
|
|
46
|
+
exports.AccordionItem = AccordionItem;
|
|
47
|
+
AccordionItem.displayName = "AccordionItem";
|
|
48
|
+
const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("border-as-border-secondary bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border px-4 py-3 text-left transition-colors hover:bg-gray-100/50 data-[state=open]:rounded-b-none dark:border-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-700/50", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: children }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 text-gray-500 transition-transform duration-200 data-[state=open]:rotate-180 dark:text-gray-400" })] })));
|
|
49
|
+
exports.AccordionTrigger = AccordionTrigger;
|
|
50
|
+
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
51
|
+
const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { ref: ref, className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", ...props, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-border-secondary bg-as-surface-secondary w-full rounded-b-xl border-x border-b py-2 pr-4", className), children: children }) })));
|
|
52
|
+
exports.AccordionContent = AccordionContent;
|
|
53
|
+
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
|
@@ -25,6 +25,7 @@ const sonner_1 = require("sonner");
|
|
|
25
25
|
const viem_1 = require("viem");
|
|
26
26
|
const chains_1 = require("viem/chains");
|
|
27
27
|
const wagmi_1 = require("wagmi");
|
|
28
|
+
const Accordion_1 = require("./Accordion");
|
|
28
29
|
const ConnectWalletPayment_1 = __importDefault(require("./ConnectWalletPayment"));
|
|
29
30
|
const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
|
|
30
31
|
const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
|
|
@@ -399,28 +400,28 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
|
|
|
399
400
|
}
|
|
400
401
|
};
|
|
401
402
|
if (refundTxs) {
|
|
402
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
403
|
+
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
|
|
404
|
+
? depositTxs.map(dTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
|
|
405
|
+
? `Received payment`
|
|
406
|
+
: `Received ${(0, number_1.formatTokenAmount)(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
|
|
407
|
+
: null, refundTxs
|
|
408
|
+
? refundTxs.map(rTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: `Refunded ${(0, number_1.formatTokenAmount)(BigInt(rTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: rTx, isProcessing: false }, rTx.txHash)))
|
|
409
|
+
: 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: "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") })] }));
|
|
409
410
|
}
|
|
410
411
|
if (executeTx) {
|
|
411
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
412
|
+
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
|
|
413
|
+
? depositTxs.map(dTxs => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
|
|
414
|
+
? `Received payment`
|
|
415
|
+
: `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
|
|
416
|
+
: null, (0, jsx_runtime_1.jsx)(TransactionDetails, { title: "Processed Transaction", chainId: order.srcChain, tx: relayTx, delay: 0.5, isProcessing: false }), (0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap"
|
|
417
|
+
? "Processed Swap"
|
|
418
|
+
: order.type === "mint_nft"
|
|
419
|
+
? "Minted NFT"
|
|
420
|
+
: order.type === "join_tournament"
|
|
421
|
+
? "Joined Tournament"
|
|
422
|
+
: order.type === "fund_tournament"
|
|
423
|
+
? "Funded Tournament"
|
|
424
|
+
: "Processed Order", chainId: order.dstChain, tx: executeTx, isProcessing: false, delay: 1 })] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, executeTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
|
|
424
425
|
order,
|
|
425
426
|
tournament,
|
|
426
427
|
formattedActualDstAmount: formattedActualDstAmount,
|
|
@@ -430,27 +431,27 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
|
|
|
430
431
|
}), (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: "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") }))] }));
|
|
431
432
|
}
|
|
432
433
|
if (relayTx && relayTx.status === "success") {
|
|
433
|
-
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.jsxs)("div", { className: "relative
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
434
|
+
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
|
|
435
|
+
? depositTxs.map(dTxs => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
|
|
436
|
+
? `Received payment`
|
|
437
|
+
: `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
|
|
438
|
+
: null, order.srcChain === order.dstChain ? ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap"
|
|
439
|
+
? "Processed Swap"
|
|
440
|
+
: order.type === "mint_nft"
|
|
441
|
+
? "Minted NFT"
|
|
442
|
+
: order.type === "join_tournament"
|
|
443
|
+
? "Joined Tournament"
|
|
444
|
+
: order.type === "fund_tournament"
|
|
445
|
+
? "Funded Tournament"
|
|
446
|
+
: "Processed Transaction", chainId: order.srcChain, isProcessing: false, tx: relayTx, delay: 0.5 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TransactionDetails, { title: "Processed Transaction", chainId: order.srcChain, isProcessing: false, tx: relayTx, delay: 0.5 }), (0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.type === "swap"
|
|
447
|
+
? "Processing Swap"
|
|
448
|
+
: order.type === "mint_nft"
|
|
449
|
+
? "Minting NFT"
|
|
450
|
+
: order.type === "join_tournament"
|
|
451
|
+
? "Joining Tournament"
|
|
452
|
+
: order.type === "fund_tournament"
|
|
453
|
+
? "Funding Tournament"
|
|
454
|
+
: "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, relayTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
|
|
454
455
|
order,
|
|
455
456
|
tournament,
|
|
456
457
|
formattedActualDstAmount,
|
|
@@ -462,19 +463,19 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
|
|
|
462
463
|
// This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
|
|
463
464
|
const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
|
|
464
465
|
if (depositTxs?.length || waitingForDeposit) {
|
|
465
|
-
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.jsxs)("div", { className: "relative
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
466
|
+
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"
|
|
467
|
+
? `Received payment`
|
|
468
|
+
: `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"
|
|
469
|
+
? "Processing Swap"
|
|
470
|
+
: order.type === "mint_nft"
|
|
471
|
+
? "Minting NFT"
|
|
472
|
+
: order.type === "join_tournament"
|
|
473
|
+
? "Joining Tournament"
|
|
474
|
+
: order.type === "fund_tournament"
|
|
475
|
+
? "Funding Tournament"
|
|
476
|
+
: "Processing Transaction", chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 })) : ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
|
|
477
|
+
? `Waiting for payment`
|
|
478
|
+
: `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) })] }));
|
|
478
479
|
}
|
|
479
480
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusDisplay === "processing" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: order.onrampMetadata ? ((0, jsx_runtime_1.jsx)(PaymentVendorUI_1.default, { isMainnet: isMainnet, order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsx)(ConnectWalletPayment_1.default, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
|
|
480
481
|
// Transfer Crypto Payment Method - Show new card-based UI
|
|
@@ -491,6 +492,6 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ isMainnet, mode
|
|
|
491
492
|
(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"] })] }));
|
|
492
493
|
});
|
|
493
494
|
function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
|
|
494
|
-
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-
|
|
495
|
+
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 })] }));
|
|
495
496
|
}
|
|
496
497
|
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" })] }));
|
|
@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const react_1 = require("../../../../anyspend/react");
|
|
6
6
|
const chain_1 = require("../../../../anyspend/utils/chain");
|
|
7
7
|
const react_2 = require("../../../../global-account/react");
|
|
8
|
+
const utils_1 = require("../../../../shared/utils");
|
|
8
9
|
const formatAddress_1 = require("../../../../shared/utils/formatAddress");
|
|
9
10
|
const lucide_react_1 = require("lucide-react");
|
|
10
11
|
const react_3 = require("react");
|
|
@@ -50,7 +51,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
|
|
|
50
51
|
const { coinbaseOnrampOptions } = (0, react_1.useCoinbaseOnrampOptions)(true, geoData?.country || "US");
|
|
51
52
|
// Get recipient profile for displaying name
|
|
52
53
|
const recipientProfile = (0, react_2.useProfile)({ address: _recipientAddress });
|
|
53
|
-
const recipientName = recipientProfile.data?.name
|
|
54
|
+
const recipientName = recipientProfile.data?.name;
|
|
54
55
|
const amountInputRef = (0, react_3.useRef)(null);
|
|
55
56
|
const handleAmountChange = (e) => {
|
|
56
57
|
// Only allow numbers and decimal points
|
|
@@ -72,7 +73,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
|
|
|
72
73
|
width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
|
|
73
74
|
} })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
|
|
74
75
|
? "border-as-border-secondary bg-as-surface-secondary"
|
|
75
|
-
: "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)("
|
|
76
|
+
: "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (() => {
|
|
76
77
|
const currentPaymentMethod = selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE;
|
|
77
78
|
const fee = getFeeFromApi(currentPaymentMethod);
|
|
78
79
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(currentPaymentMethod).toFixed(2)] })] }));
|
|
@@ -17,5 +17,5 @@ function TokenBalance({ token, walletAddress, onChangeInput, }) {
|
|
|
17
17
|
const amount = percentage === 100 ? rawBalance : (rawBalance * BigInt(percentage)) / BigInt(100);
|
|
18
18
|
onChangeInput((0, viem_1.formatUnits)(amount, token.decimals));
|
|
19
19
|
};
|
|
20
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-7 items-center justify-end gap-1", children: !isLoading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 inline-flex rounded-lg text-sm", children: rawBalance ? `Balance: ${formattedBalance}` : `Balance: 0` }), !!rawBalance && ((0, jsx_runtime_1.
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-7 items-center justify-end gap-1", children: !isLoading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 inline-flex rounded-lg text-sm", children: rawBalance ? `Balance: ${formattedBalance}` : `Balance: 0` }), !!rawBalance && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("button", { onClick: () => handlePercentageClick(100), className: "text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex cursor-pointer rounded-lg px-2 py-1 text-xs transition-colors", children: "MAX" }) }))] })) }, `balance-${token.address}-${token.chainId}`));
|
|
21
21
|
}
|
|
@@ -797,7 +797,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
797
797
|
setActiveTab("fiat");
|
|
798
798
|
setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
|
|
799
799
|
setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
|
|
800
|
-
}, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (
|
|
800
|
+
}, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx(_Fragment, { children: _jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
|
|
801
801
|
setIsSrcInputDirty(true);
|
|
802
802
|
setSrcAmount(value);
|
|
803
803
|
}, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
|
|
@@ -822,7 +822,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
822
822
|
const tempDstAmount = dstAmount;
|
|
823
823
|
setSrcAmount(tempDstAmount);
|
|
824
824
|
setDstAmount(tempSrcAmount);
|
|
825
|
-
}, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [recipientAddress ? (
|
|
825
|
+
}, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [recipientAddress ? (_jsx(_Fragment, { children: _jsx("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
|
|
826
826
|
// Fixed destination token display in buy mode
|
|
827
827
|
_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && (_jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : (_jsx(OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
|
|
828
828
|
setIsSrcInputDirty(false);
|
|
@@ -245,7 +245,7 @@ function AnySpendCustomInner({ isMainnet = true, loadOrder, mode = "modal", reci
|
|
|
245
245
|
},
|
|
246
246
|
});
|
|
247
247
|
const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
|
|
248
|
-
const { address: connectedAddress, name: connectedName
|
|
248
|
+
const { address: connectedAddress, name: connectedName } = useConnectedUserProfile();
|
|
249
249
|
const recipientProfile = useProfile({ address: recipientAddress });
|
|
250
250
|
const recipientName = recipientProfile.data?.name;
|
|
251
251
|
const handleCreateOrder = async (recipientAddress, onramp) => {
|
|
@@ -435,7 +435,7 @@ function AnySpendCustomInner({ isMainnet = true, loadOrder, mode = "modal", reci
|
|
|
435
435
|
opacity: hasMounted ? 1 : 0,
|
|
436
436
|
y: hasMounted ? 0 : 20,
|
|
437
437
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
438
|
-
}, 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 h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (
|
|
438
|
+
}, 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 h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx(_Fragment, { children: _jsx("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _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: {
|
|
439
439
|
opacity: hasMounted ? 1 : 0,
|
|
440
440
|
y: hasMounted ? 0 : 20,
|
|
441
441
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
4
|
+
import { ChevronDown } from "lucide-react";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { cn } from "../../../../shared/utils/index.js";
|
|
7
|
+
const Accordion = AccordionPrimitive.Root;
|
|
8
|
+
const AccordionItem = React.forwardRef(({ className, ...props }, ref) => _jsx(AccordionPrimitive.Item, { ref: ref, className: cn("", className), ...props }));
|
|
9
|
+
AccordionItem.displayName = "AccordionItem";
|
|
10
|
+
const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("border-as-border-secondary bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border px-4 py-3 text-left transition-colors hover:bg-gray-100/50 data-[state=open]:rounded-b-none dark:border-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-700/50", className), ...props, children: [_jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: children }), _jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 transition-transform duration-200 data-[state=open]:rotate-180 dark:text-gray-400" })] })));
|
|
11
|
+
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
12
|
+
const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", ...props, children: _jsx("div", { className: cn("border-as-border-secondary bg-as-surface-secondary w-full rounded-b-xl border-x border-b py-2 pr-4", className), children: children }) })));
|
|
13
|
+
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
|
14
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|