@b3dotfun/sdk 0.0.40-alpha.1 → 0.0.40-alpha.11
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.d.ts +2 -1
- package/dist/cjs/anyspend/react/components/AnySpend.js +6 -2
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +5 -2
- package/dist/cjs/anyspend/react/components/common/CryptoReceiveSection.d.ts +2 -1
- package/dist/cjs/anyspend/react/components/common/CryptoReceiveSection.js +39 -37
- package/dist/cjs/anyspend/react/components/common/OrderDetails.js +1 -4
- package/dist/cjs/anyspend/react/components/common/PanelOnramp.d.ts +4 -1
- package/dist/cjs/anyspend/react/components/common/PanelOnramp.js +7 -6
- package/dist/cjs/anyspend/react/components/common/PointsDetailPanel.d.ts +6 -0
- package/dist/cjs/anyspend/react/components/common/PointsDetailPanel.js +14 -0
- package/dist/cjs/anyspend/react/contexts/FeatureFlagsContext.d.ts +11 -0
- package/dist/cjs/anyspend/react/contexts/FeatureFlagsContext.js +21 -0
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +4 -1
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +13 -5
- package/dist/cjs/anyspend/react/providers/AnyspendProvider.d.ts +5 -2
- package/dist/cjs/anyspend/react/providers/AnyspendProvider.js +5 -3
- package/dist/cjs/anyspend/react/providers/index.d.ts +1 -0
- package/dist/cjs/anyspend/react/providers/index.js +3 -0
- package/dist/cjs/anyspend/types/api.d.ts +10 -0
- package/dist/cjs/bondkit/bondkitToken.d.ts +37 -2
- package/dist/cjs/bondkit/bondkitToken.js +268 -2
- package/dist/cjs/bondkit/bondkitTokenFactory.d.ts +1 -1
- package/dist/cjs/bondkit/bondkitTokenFactory.js +2 -2
- package/dist/cjs/bondkit/config.d.ts +1 -1
- package/dist/cjs/bondkit/config.js +5 -2
- package/dist/cjs/bondkit/constants.d.ts +4 -0
- package/dist/cjs/bondkit/constants.js +6 -1
- package/dist/cjs/bondkit/index.d.ts +1 -0
- package/dist/cjs/bondkit/index.js +4 -1
- package/dist/cjs/bondkit/swapService.d.ts +43 -0
- package/dist/cjs/bondkit/swapService.js +373 -0
- package/dist/cjs/bondkit/types.d.ts +10 -4
- package/dist/cjs/bondkit/types.js +4 -5
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.d.ts +4 -3
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js +35 -9
- package/dist/cjs/global-account/react/components/LinkAccount/LinkAccount.js +63 -3
- package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.js +35 -2
- package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +4 -3
- package/dist/cjs/global-account/react/hooks/useAuthentication.js +1 -2
- package/dist/esm/anyspend/react/components/AnySpend.d.ts +2 -1
- package/dist/esm/anyspend/react/components/AnySpend.js +6 -2
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +5 -2
- package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.d.ts +2 -1
- package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.js +39 -37
- package/dist/esm/anyspend/react/components/common/OrderDetails.js +1 -4
- package/dist/esm/anyspend/react/components/common/PanelOnramp.d.ts +4 -1
- package/dist/esm/anyspend/react/components/common/PanelOnramp.js +7 -6
- package/dist/esm/anyspend/react/components/common/PointsDetailPanel.d.ts +6 -0
- package/dist/esm/anyspend/react/components/common/PointsDetailPanel.js +8 -0
- package/dist/esm/anyspend/react/contexts/FeatureFlagsContext.d.ts +11 -0
- package/dist/esm/anyspend/react/contexts/FeatureFlagsContext.js +17 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +4 -1
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +13 -5
- package/dist/esm/anyspend/react/providers/AnyspendProvider.d.ts +5 -2
- package/dist/esm/anyspend/react/providers/AnyspendProvider.js +5 -3
- package/dist/esm/anyspend/react/providers/index.d.ts +1 -0
- package/dist/esm/anyspend/react/providers/index.js +1 -0
- package/dist/esm/anyspend/types/api.d.ts +10 -0
- package/dist/esm/bondkit/bondkitToken.d.ts +37 -2
- package/dist/esm/bondkit/bondkitToken.js +268 -2
- package/dist/esm/bondkit/bondkitTokenFactory.d.ts +1 -1
- package/dist/esm/bondkit/bondkitTokenFactory.js +2 -2
- package/dist/esm/bondkit/config.d.ts +1 -1
- package/dist/esm/bondkit/config.js +5 -2
- package/dist/esm/bondkit/constants.d.ts +4 -0
- package/dist/esm/bondkit/constants.js +5 -0
- package/dist/esm/bondkit/index.d.ts +1 -0
- package/dist/esm/bondkit/index.js +2 -0
- package/dist/esm/bondkit/swapService.d.ts +43 -0
- package/dist/esm/bondkit/swapService.js +369 -0
- package/dist/esm/bondkit/types.d.ts +10 -4
- package/dist/esm/bondkit/types.js +4 -5
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.d.ts +4 -3
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.js +36 -9
- package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.js +65 -5
- package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js +35 -2
- package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +3 -2
- package/dist/esm/global-account/react/hooks/useAuthentication.js +1 -2
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/react/components/AnySpend.d.ts +2 -1
- package/dist/types/anyspend/react/components/common/CryptoReceiveSection.d.ts +2 -1
- package/dist/types/anyspend/react/components/common/PanelOnramp.d.ts +4 -1
- package/dist/types/anyspend/react/components/common/PointsDetailPanel.d.ts +6 -0
- package/dist/types/anyspend/react/contexts/FeatureFlagsContext.d.ts +11 -0
- package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +4 -1
- package/dist/types/anyspend/react/providers/AnyspendProvider.d.ts +5 -2
- package/dist/types/anyspend/react/providers/index.d.ts +1 -0
- package/dist/types/anyspend/types/api.d.ts +10 -0
- package/dist/types/bondkit/bondkitToken.d.ts +37 -2
- package/dist/types/bondkit/bondkitTokenFactory.d.ts +1 -1
- package/dist/types/bondkit/config.d.ts +1 -1
- package/dist/types/bondkit/constants.d.ts +4 -0
- package/dist/types/bondkit/index.d.ts +1 -0
- package/dist/types/bondkit/swapService.d.ts +43 -0
- package/dist/types/bondkit/types.d.ts +10 -4
- package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts +4 -3
- package/package.json +6 -5
- package/src/anyspend/react/components/AnySpend.tsx +15 -0
- package/src/anyspend/react/components/AnyspendDepositHype.tsx +14 -0
- package/src/anyspend/react/components/common/CryptoReceiveSection.tsx +63 -45
- package/src/anyspend/react/components/common/OrderDetails.tsx +2 -5
- package/src/anyspend/react/components/common/PanelOnramp.tsx +28 -15
- package/src/anyspend/react/components/common/PointsDetailPanel.tsx +55 -0
- package/src/anyspend/react/contexts/FeatureFlagsContext.tsx +34 -0
- package/src/anyspend/react/hooks/useAnyspendFlow.ts +13 -5
- package/src/anyspend/react/providers/AnyspendProvider.tsx +11 -6
- package/src/anyspend/react/providers/index.ts +1 -0
- package/src/anyspend/types/api.ts +10 -0
- package/src/anyspend/types/api_req_res.ts +6 -10
- package/src/bondkit/bondkitToken.ts +323 -3
- package/src/bondkit/bondkitTokenFactory.ts +2 -2
- package/src/bondkit/config.ts +5 -2
- package/src/bondkit/constants.ts +7 -0
- package/src/bondkit/index.ts +3 -0
- package/src/bondkit/swapService.ts +461 -0
- package/src/bondkit/types.ts +12 -5
- package/src/global-account/react/components/B3Provider/B3Provider.tsx +51 -15
- package/src/global-account/react/components/LinkAccount/LinkAccount.tsx +106 -32
- package/src/global-account/react/components/ManageAccount/ManageAccount.tsx +60 -5
- package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx +4 -2
- package/src/global-account/react/hooks/useAuthentication.ts +1 -2
|
@@ -12,7 +12,8 @@ export declare enum PanelView {
|
|
|
12
12
|
FIAT_PAYMENT = 4,
|
|
13
13
|
RECIPIENT_SELECTION = 5,
|
|
14
14
|
CRYPTO_PAYMENT_METHOD = 6,
|
|
15
|
-
FIAT_PAYMENT_METHOD = 7
|
|
15
|
+
FIAT_PAYMENT_METHOD = 7,
|
|
16
|
+
POINTS_DETAIL = 8
|
|
16
17
|
}
|
|
17
18
|
export declare function AnySpend(props: {
|
|
18
19
|
mode?: "page" | "modal";
|
|
@@ -29,6 +29,7 @@ const OrderDetails_1 = require("./common/OrderDetails");
|
|
|
29
29
|
const OrderHistory_1 = require("./common/OrderHistory");
|
|
30
30
|
const PanelOnramp_1 = require("./common/PanelOnramp");
|
|
31
31
|
const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
|
|
32
|
+
const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
|
|
32
33
|
const RecipientSelection_1 = require("./common/RecipientSelection");
|
|
33
34
|
const TabSection_1 = require("./common/TabSection");
|
|
34
35
|
var PanelView;
|
|
@@ -41,6 +42,7 @@ var PanelView;
|
|
|
41
42
|
PanelView[PanelView["RECIPIENT_SELECTION"] = 5] = "RECIPIENT_SELECTION";
|
|
42
43
|
PanelView[PanelView["CRYPTO_PAYMENT_METHOD"] = 6] = "CRYPTO_PAYMENT_METHOD";
|
|
43
44
|
PanelView[PanelView["FIAT_PAYMENT_METHOD"] = 7] = "FIAT_PAYMENT_METHOD";
|
|
45
|
+
PanelView[PanelView["POINTS_DETAIL"] = 8] = "POINTS_DETAIL";
|
|
44
46
|
})(PanelView || (exports.PanelView = PanelView = {}));
|
|
45
47
|
const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
|
|
46
48
|
function AnySpend(props) {
|
|
@@ -663,7 +665,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
663
665
|
setActivePanel(PanelView.MAIN);
|
|
664
666
|
setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
|
|
665
667
|
} })) }) }));
|
|
666
|
-
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (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.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(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" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
|
|
668
|
+
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (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.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(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" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
|
|
667
669
|
if (activeTab === "fiat" || isBuyMode) {
|
|
668
670
|
return;
|
|
669
671
|
}
|
|
@@ -685,7 +687,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
685
687
|
}, 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 === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, onChangeDstAmount: value => {
|
|
686
688
|
setIsSrcInputDirty(false);
|
|
687
689
|
setDstAmount(value);
|
|
688
|
-
}, anyspendQuote: anyspendQuote }))] }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (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.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
|
|
690
|
+
}, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }))] }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (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.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
|
|
689
691
|
const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
|
|
690
692
|
setOrderId(orderId);
|
|
691
693
|
setActivePanel(PanelView.ORDER_DETAILS);
|
|
@@ -713,6 +715,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
713
715
|
setSelectedFiatPaymentMethod(method);
|
|
714
716
|
setActivePanel(PanelView.MAIN); // Go back to main panel to show updated pricing
|
|
715
717
|
}, srcAmountOnRamp: srcAmountOnRamp }));
|
|
718
|
+
const pointsDetailView = ((0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.MAIN) }));
|
|
716
719
|
// Add tabs to the main component when no order is loaded
|
|
717
720
|
return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
|
|
718
721
|
"bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
|
|
@@ -736,5 +739,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
736
739
|
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
|
|
737
740
|
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
|
|
738
741
|
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
|
|
742
|
+
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
|
|
739
743
|
] }) }) }));
|
|
740
744
|
}
|
|
@@ -22,6 +22,7 @@ const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
|
|
|
22
22
|
const ErrorSection_1 = require("./common/ErrorSection");
|
|
23
23
|
const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
|
|
24
24
|
const OrderDetails_1 = require("./common/OrderDetails");
|
|
25
|
+
const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
|
|
25
26
|
const RecipientSelection_1 = require("./common/RecipientSelection");
|
|
26
27
|
const lucide_react_1 = require("lucide-react");
|
|
27
28
|
const PanelOnramp_1 = require("./common/PanelOnramp");
|
|
@@ -118,10 +119,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
118
119
|
await handleFiatOrder();
|
|
119
120
|
}
|
|
120
121
|
};
|
|
121
|
-
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_2.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" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), 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" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
|
|
122
|
+
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_2.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" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), 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" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
|
|
122
123
|
setIsSrcInputDirty(false);
|
|
123
124
|
setSrcAmount(value);
|
|
124
|
-
}, anyspendQuote: anyspendQuote }))] }) }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
|
|
125
|
+
}, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
|
|
125
126
|
// Handle crypto order creation
|
|
126
127
|
const handleCryptoOrder = async () => {
|
|
127
128
|
try {
|
|
@@ -218,6 +219,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
218
219
|
setSelectedFiatPaymentMethod(method);
|
|
219
220
|
setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
|
|
220
221
|
}, srcAmountOnRamp: srcAmount }));
|
|
222
|
+
const pointsDetailView = ((0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN) }));
|
|
221
223
|
// If showing token selection, render with panel transitions
|
|
222
224
|
return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
|
|
223
225
|
"bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_1.TransitionPanel, { activeIndex: orderId
|
|
@@ -239,5 +241,6 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
239
241
|
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
|
|
240
242
|
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: orderDetailsView }, "order-details-view"),
|
|
241
243
|
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: loadingView }, "loading-view"),
|
|
244
|
+
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: pointsDetailView }, "points-detail-view"),
|
|
242
245
|
] }) }) }));
|
|
243
246
|
}
|
|
@@ -14,6 +14,7 @@ interface CryptoReceiveSectionProps {
|
|
|
14
14
|
anyspendQuote?: any;
|
|
15
15
|
dstTokenSymbol?: string;
|
|
16
16
|
dstTokenLogoURI?: string;
|
|
17
|
+
onShowPointsDetail?: () => void;
|
|
17
18
|
}
|
|
18
|
-
export declare function CryptoReceiveSection({ isDepositMode, isBuyMode, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, }: CryptoReceiveSectionProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare function CryptoReceiveSection({ isDepositMode, isBuyMode, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, }: CryptoReceiveSectionProps): import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
export {};
|
|
@@ -8,46 +8,48 @@ const formatAddress_1 = require("../../../../shared/utils/formatAddress");
|
|
|
8
8
|
const number_1 = require("../../../../shared/utils/number");
|
|
9
9
|
const lucide_react_1 = require("lucide-react");
|
|
10
10
|
const react_1 = require("motion/react");
|
|
11
|
+
const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
|
|
11
12
|
const OrderTokenAmount_1 = require("./OrderTokenAmount");
|
|
12
|
-
function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, }) {
|
|
13
|
+
function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, }) {
|
|
14
|
+
const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
|
|
13
15
|
return ((0, jsx_runtime_1.jsxs)(react_1.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: "receive-section 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: isDepositMode ? "Deposit" : "Receive" }), selectedRecipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsxs)(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)(selectedRecipientAddress || "") }), (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: onSelectRecipient, children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
|
|
14
16
|
// Fixed destination token display for buy mode and deposit mode
|
|
15
17
|
(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: [(dstTokenLogoURI || dstToken.metadata?.logoURI) && ((0, jsx_runtime_1.jsx)("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (
|
|
16
18
|
// Token selection for regular swap mode
|
|
17
|
-
(0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: [(0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyOut?.amountUsd, {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
19
|
+
(0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyOut?.amountUsd, {
|
|
20
|
+
style: "currency",
|
|
21
|
+
fallback: "",
|
|
22
|
+
}), anyspendQuote?.data?.currencyIn?.amountUsd &&
|
|
23
|
+
anyspendQuote?.data?.currencyOut?.amountUsd &&
|
|
24
|
+
(() => {
|
|
25
|
+
const calculatePriceImpact = (inputUsd, outputUsd) => {
|
|
26
|
+
if (!inputUsd || !outputUsd) {
|
|
27
|
+
return { percentage: "0.00", isNegative: false };
|
|
28
|
+
}
|
|
29
|
+
const input = Number(inputUsd);
|
|
30
|
+
const output = Number(outputUsd);
|
|
31
|
+
// Handle edge cases
|
|
32
|
+
if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
|
|
33
|
+
return { percentage: "0.00", isNegative: false };
|
|
34
|
+
}
|
|
35
|
+
const percentageValue = ((output - input) / input) * 100;
|
|
36
|
+
// Handle the -0.00% case
|
|
37
|
+
if (percentageValue > -0.005 && percentageValue < 0) {
|
|
38
|
+
return { percentage: "0.00", isNegative: false };
|
|
39
|
+
}
|
|
40
|
+
return {
|
|
41
|
+
percentage: Math.abs(percentageValue).toFixed(2),
|
|
42
|
+
isNegative: percentageValue < 0,
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
const { percentage, isNegative } = calculatePriceImpact(anyspendQuote.data.currencyIn.amountUsd, anyspendQuote.data.currencyOut.amountUsd);
|
|
46
|
+
// Parse the percentage as a number for comparison
|
|
47
|
+
const percentageNum = parseFloat(percentage);
|
|
48
|
+
// Don't show if less than 1%
|
|
49
|
+
if (percentageNum < 1) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
// Using inline style to ensure color displays
|
|
53
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
|
|
54
|
+
})()] }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: "bg-as-brand hover:scale-102 active:scale-98 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all", onClick: () => onShowPointsDetail?.(), children: [(0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-white", children: ["+", anyspendQuote.data.pointsAmount.toLocaleString(), " pts"] })] }, `points-${anyspendQuote.data.pointsAmount}`))] })] }));
|
|
53
55
|
}
|
|
@@ -55,9 +55,6 @@ function getOrderSuccessText({ order, tournament, formattedActualDstAmount, form
|
|
|
55
55
|
case "custom":
|
|
56
56
|
actionText = order.metadata.action || `executed contract`;
|
|
57
57
|
return `Successfully ${actionText}`;
|
|
58
|
-
case "hype_duel":
|
|
59
|
-
actionText = `deposited ${formattedActualDstAmount || "--"} HYPE`;
|
|
60
|
-
return `Successfully ${actionText} to ${recipient}`;
|
|
61
58
|
default:
|
|
62
59
|
throw new Error("Invalid order type");
|
|
63
60
|
}
|
|
@@ -434,7 +431,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
|
|
|
434
431
|
: null] }) })] }) }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "order-close-button order-details-close-btn 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") })] }));
|
|
435
432
|
}
|
|
436
433
|
if (executeTx) {
|
|
437
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: orderStatusPaymentMethod }), (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: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "
|
|
434
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: order, selectedCryptoPaymentMethod: orderStatusPaymentMethod }), (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: "order-details-accordion w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "execute-details", className: "order-details-execute-item", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { className: "accordion-trigger", children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { className: "accordion-content pl-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
|
|
438
435
|
? depositTxs.map(dTxs => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: order.onrampMetadata?.vendor === "stripe-web2"
|
|
439
436
|
? `Received payment`
|
|
440
437
|
: `Received ${(0, number_1.formatTokenAmount)(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTxs, isProcessing: false }, dTxs.txHash)))
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { components } from "../../../../anyspend/types/api";
|
|
2
|
+
import { GetQuoteResponse } from "../../../../anyspend/types/api_req_res";
|
|
2
3
|
import { FiatPaymentMethod } from "./FiatPaymentMethod";
|
|
3
|
-
export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, }: {
|
|
4
|
+
export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, anyspendQuote, onShowPointsDetail, }: {
|
|
4
5
|
srcAmountOnRamp: string;
|
|
5
6
|
setSrcAmountOnRamp: (amount: string) => void;
|
|
6
7
|
selectedPaymentMethod?: FiatPaymentMethod;
|
|
@@ -15,4 +16,6 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
|
|
|
15
16
|
recipientSelectionPanelIndex: number;
|
|
16
17
|
dstTokenSymbol?: string;
|
|
17
18
|
hideDstToken?: boolean;
|
|
19
|
+
anyspendQuote?: GetQuoteResponse;
|
|
20
|
+
onShowPointsDetail?: () => void;
|
|
18
21
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -10,9 +10,11 @@ const formatAddress_1 = require("../../../../shared/utils/formatAddress");
|
|
|
10
10
|
const lucide_react_1 = require("lucide-react");
|
|
11
11
|
const react_3 = require("react");
|
|
12
12
|
const sonner_1 = require("sonner");
|
|
13
|
+
const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
|
|
13
14
|
const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
|
|
14
15
|
const OrderTokenAmountFiat_1 = require("./OrderTokenAmountFiat");
|
|
15
|
-
function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, }) {
|
|
16
|
+
function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, onShowPointsDetail, }) {
|
|
17
|
+
const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
|
|
16
18
|
// Get geo-based onramp options to access fee information
|
|
17
19
|
const { stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
|
|
18
20
|
// Helper function to get fees from API data
|
|
@@ -73,9 +75,8 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
|
|
|
73
75
|
width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
|
|
74
76
|
} })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto mb-6 inline-grid grid-cols-4 gap-2", hideDstToken && "mb-0"), 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
|
|
75
77
|
? "border-as-border-secondary bg-as-surface-secondary"
|
|
76
|
-
: "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && ((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(recipientSelectionPanelIndex), 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", " ", dstTokenSymbol || 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.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
})() }) })] })] }));
|
|
78
|
+
: "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && ((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(recipientSelectionPanelIndex), 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", " ", dstTokenSymbol || 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.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: (() => {
|
|
79
|
+
const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE);
|
|
80
|
+
return fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total";
|
|
81
|
+
})() }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && ((0, jsx_runtime_1.jsxs)("button", { className: "bg-as-brand hover:scale-102 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all", onClick: () => onShowPointsDetail?.(), children: [(0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-white", children: ["+", anyspendQuote.data.pointsAmount.toLocaleString(), " pts"] })] }, `points-${anyspendQuote.data.pointsAmount}`))] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] })] }) })] })] }));
|
|
81
82
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.PointsDetailPanel = PointsDetailPanel;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const react_1 = require("../../../../global-account/react");
|
|
9
|
+
const cn_1 = require("../../../../shared/utils/cn");
|
|
10
|
+
const lucide_react_1 = require("lucide-react");
|
|
11
|
+
const link_1 = __importDefault(require("next/link"));
|
|
12
|
+
function PointsDetailPanel({ pointsAmount = 0, onBack }) {
|
|
13
|
+
return ((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.jsx)("div", { className: "flex w-full items-center justify-between", children: (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "ghost", onClick: onBack, className: "text-as-primary/70 hover:text-as-primary flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "h-4 w-4 rotate-90" }), "Back"] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", (0, jsx_runtime_1.jsxs)("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", (0, jsx_runtime_1.jsx)(link_1.default, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [(0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points are earned based on transaction volume" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Higher volume = more points" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points contribute to future airdrops" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: (0, cn_1.cn)("as-main-button !bg-as-brand relative w-full"), textClassName: (0, cn_1.cn)("text-white"), children: "Back to Swap" })] })] }));
|
|
14
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
export interface FeatureFlags {
|
|
3
|
+
showPoints?: boolean;
|
|
4
|
+
}
|
|
5
|
+
interface FeatureFlagsProviderProps {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
featureFlags?: FeatureFlags;
|
|
8
|
+
}
|
|
9
|
+
export declare function FeatureFlagsProvider({ children, featureFlags }: FeatureFlagsProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function useFeatureFlags(): FeatureFlags;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.FeatureFlagsProvider = FeatureFlagsProvider;
|
|
5
|
+
exports.useFeatureFlags = useFeatureFlags;
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const FeatureFlagsContext = (0, react_1.createContext)(undefined);
|
|
9
|
+
const defaultFeatureFlags = {
|
|
10
|
+
showPoints: false,
|
|
11
|
+
};
|
|
12
|
+
function FeatureFlagsProvider({ children, featureFlags = defaultFeatureFlags }) {
|
|
13
|
+
return (0, jsx_runtime_1.jsx)(FeatureFlagsContext.Provider, { value: { featureFlags }, children: children });
|
|
14
|
+
}
|
|
15
|
+
function useFeatureFlags() {
|
|
16
|
+
const context = (0, react_1.useContext)(FeatureFlagsContext);
|
|
17
|
+
if (!context) {
|
|
18
|
+
return defaultFeatureFlags;
|
|
19
|
+
}
|
|
20
|
+
return context.featureFlags;
|
|
21
|
+
}
|
|
@@ -7,7 +7,8 @@ export declare enum PanelView {
|
|
|
7
7
|
FIAT_PAYMENT_METHOD = 2,
|
|
8
8
|
RECIPIENT_SELECTION = 3,
|
|
9
9
|
ORDER_DETAILS = 4,
|
|
10
|
-
LOADING = 5
|
|
10
|
+
LOADING = 5,
|
|
11
|
+
POINTS_DETAIL = 6
|
|
11
12
|
}
|
|
12
13
|
interface UseAnyspendFlowProps {
|
|
13
14
|
paymentType?: "crypto" | "fiat";
|
|
@@ -140,6 +141,8 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
|
|
|
140
141
|
};
|
|
141
142
|
timeEstimate?: number;
|
|
142
143
|
userBalance?: string;
|
|
144
|
+
pointsAmount?: number;
|
|
145
|
+
pointsMultiplier?: number;
|
|
143
146
|
};
|
|
144
147
|
statusCode: number;
|
|
145
148
|
} | undefined;
|
|
@@ -22,6 +22,7 @@ var PanelView;
|
|
|
22
22
|
PanelView[PanelView["RECIPIENT_SELECTION"] = 3] = "RECIPIENT_SELECTION";
|
|
23
23
|
PanelView[PanelView["ORDER_DETAILS"] = 4] = "ORDER_DETAILS";
|
|
24
24
|
PanelView[PanelView["LOADING"] = 5] = "LOADING";
|
|
25
|
+
PanelView[PanelView["POINTS_DETAIL"] = 6] = "POINTS_DETAIL";
|
|
25
26
|
})(PanelView || (exports.PanelView = PanelView = {}));
|
|
26
27
|
function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, disableUrlParamManagement = false, }) {
|
|
27
28
|
const searchParams = (0, react_2.useSearchParamsSSR)();
|
|
@@ -189,12 +190,19 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
|
|
|
189
190
|
// Handle order completion
|
|
190
191
|
(0, react_3.useEffect)(() => {
|
|
191
192
|
if (oat?.data?.order.status === "executed") {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
const
|
|
195
|
-
|
|
193
|
+
// get the actualDstAmount if available from custompayload
|
|
194
|
+
const amount = oat.data.order.payload?.actualDstAmount;
|
|
195
|
+
const formattedActualDstAmount = amount
|
|
196
|
+
? (0, number_1.formatTokenAmount)(BigInt(amount), oat.data.order.metadata.dstToken.decimals)
|
|
197
|
+
: undefined;
|
|
198
|
+
onTransactionSuccess?.(formattedActualDstAmount);
|
|
196
199
|
}
|
|
197
|
-
}, [
|
|
200
|
+
}, [
|
|
201
|
+
oat?.data?.order.status,
|
|
202
|
+
oat?.data?.order.payload,
|
|
203
|
+
onTransactionSuccess,
|
|
204
|
+
oat?.data?.order.metadata.dstToken.decimals,
|
|
205
|
+
]);
|
|
198
206
|
return {
|
|
199
207
|
// State
|
|
200
208
|
activePanel,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
+
import { FeatureFlags } from "../contexts/FeatureFlagsContext";
|
|
2
3
|
interface AnyspendProviderProps {
|
|
3
4
|
children: ReactNode;
|
|
5
|
+
featureFlags?: FeatureFlags;
|
|
4
6
|
}
|
|
5
7
|
/**
|
|
6
8
|
* AnyspendProvider is a top-level provider that wraps your application to provide
|
|
@@ -12,17 +14,18 @@ interface AnyspendProviderProps {
|
|
|
12
14
|
* - Safe to use at the application root
|
|
13
15
|
* - Configures sensible defaults for query caching
|
|
14
16
|
* - Handles Stripe payment redirects and modal state
|
|
17
|
+
* - Provides feature flags configuration
|
|
15
18
|
*
|
|
16
19
|
* @example
|
|
17
20
|
* ```tsx
|
|
18
21
|
* function App() {
|
|
19
22
|
* return (
|
|
20
|
-
* <AnyspendProvider>
|
|
23
|
+
* <AnyspendProvider featureFlags={{ showPoints: true }}>
|
|
21
24
|
* <YourApp />
|
|
22
25
|
* </AnyspendProvider>
|
|
23
26
|
* );
|
|
24
27
|
* }
|
|
25
28
|
* ```
|
|
26
29
|
*/
|
|
27
|
-
export declare const AnyspendProvider: ({ children }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const AnyspendProvider: ({ children, featureFlags }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
31
|
export {};
|
|
@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
const react_1 = require("../../../global-account/react");
|
|
7
7
|
const react_query_1 = require("@tanstack/react-query");
|
|
8
8
|
const react_2 = require("react");
|
|
9
|
+
const FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
|
|
9
10
|
const StripeRedirectHandler_1 = require("./StripeRedirectHandler");
|
|
10
11
|
const defaultQueryClientConfig = {
|
|
11
12
|
defaultOptions: {
|
|
@@ -26,20 +27,21 @@ const defaultQueryClientConfig = {
|
|
|
26
27
|
* - Safe to use at the application root
|
|
27
28
|
* - Configures sensible defaults for query caching
|
|
28
29
|
* - Handles Stripe payment redirects and modal state
|
|
30
|
+
* - Provides feature flags configuration
|
|
29
31
|
*
|
|
30
32
|
* @example
|
|
31
33
|
* ```tsx
|
|
32
34
|
* function App() {
|
|
33
35
|
* return (
|
|
34
|
-
* <AnyspendProvider>
|
|
36
|
+
* <AnyspendProvider featureFlags={{ showPoints: true }}>
|
|
35
37
|
* <YourApp />
|
|
36
38
|
* </AnyspendProvider>
|
|
37
39
|
* );
|
|
38
40
|
* }
|
|
39
41
|
* ```
|
|
40
42
|
*/
|
|
41
|
-
const AnyspendProvider = function AnyspendProvider({ children }) {
|
|
43
|
+
const AnyspendProvider = function AnyspendProvider({ children, featureFlags }) {
|
|
42
44
|
const [queryClient] = (0, react_2.useState)(() => new react_query_1.QueryClient(defaultQueryClientConfig));
|
|
43
|
-
return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsxs)(react_1.TooltipProvider, { children: [(0, jsx_runtime_1.jsx)(StripeRedirectHandler_1.StripeRedirectHandler, {}), children] }) }));
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(FeatureFlagsContext_1.FeatureFlagsProvider, { featureFlags: featureFlags, children: (0, jsx_runtime_1.jsxs)(react_1.TooltipProvider, { children: [(0, jsx_runtime_1.jsx)(StripeRedirectHandler_1.StripeRedirectHandler, {}), children] }) }) }));
|
|
44
46
|
};
|
|
45
47
|
exports.AnyspendProvider = AnyspendProvider;
|
|
@@ -14,5 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.useFeatureFlags = void 0;
|
|
17
18
|
__exportStar(require("./AnyspendProvider"), exports);
|
|
18
19
|
__exportStar(require("./StripeRedirectHandler"), exports);
|
|
20
|
+
var FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
|
|
21
|
+
Object.defineProperty(exports, "useFeatureFlags", { enumerable: true, get: function () { return FeatureFlagsContext_1.useFeatureFlags; } });
|
|
@@ -798,6 +798,16 @@ export interface paths {
|
|
|
798
798
|
* @example 0
|
|
799
799
|
*/
|
|
800
800
|
userBalance?: string;
|
|
801
|
+
/**
|
|
802
|
+
* @description Anyspend points that will be awarded for the order
|
|
803
|
+
* @example 100
|
|
804
|
+
*/
|
|
805
|
+
pointsAmount?: number;
|
|
806
|
+
/**
|
|
807
|
+
* @description Multiplier applied to points that will be awarded for the order
|
|
808
|
+
* @example 1.5
|
|
809
|
+
*/
|
|
810
|
+
pointsMultiplier?: number;
|
|
801
811
|
};
|
|
802
812
|
/** @example 200 */
|
|
803
813
|
statusCode: number;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Address, EIP1193Provider, GetContractReturnType, Hex, PublicClient, WalletClient } from "viem";
|
|
2
2
|
import { BondkitTokenABI } from "./abis";
|
|
3
|
-
import type { BondkitTokenInitializationConfig, GetTransactionHistoryOptions,
|
|
3
|
+
import type { BondkitTokenInitializationConfig, GetTransactionHistoryOptions, SwapQuote, TokenDetails, TransactionResponse } from "./types";
|
|
4
|
+
import { TokenStatus } from "./types";
|
|
4
5
|
type ExecuteWriteOptions = {
|
|
5
6
|
value?: bigint;
|
|
6
7
|
gas?: bigint;
|
|
@@ -18,7 +19,8 @@ export declare class BondkitToken {
|
|
|
18
19
|
private walletClientInstance;
|
|
19
20
|
private connectedProvider?;
|
|
20
21
|
private tradingToken?;
|
|
21
|
-
|
|
22
|
+
private swapService?;
|
|
23
|
+
constructor(contractAddress: string, walletKey?: string, rpcUrl?: string);
|
|
22
24
|
connect(provider?: EIP1193Provider): boolean;
|
|
23
25
|
/**
|
|
24
26
|
* Connects using an EIP-1193 provider and requests accounts, selecting the first one.
|
|
@@ -69,5 +71,38 @@ export declare class BondkitToken {
|
|
|
69
71
|
migrateToDex(options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
70
72
|
transferTokenOwnership(newOwner: Address, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
71
73
|
renounceTokenOwnership(options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
74
|
+
/**
|
|
75
|
+
* Get the swap service instance (lazy initialization)
|
|
76
|
+
*/
|
|
77
|
+
private getSwapService;
|
|
78
|
+
/**
|
|
79
|
+
* Check if DEX swapping is available (token must be in Dex phase)
|
|
80
|
+
*/
|
|
81
|
+
isSwapAvailable(): Promise<boolean | undefined>;
|
|
82
|
+
/**
|
|
83
|
+
* Get swap quote for trading token → bondkit token
|
|
84
|
+
*/
|
|
85
|
+
getSwapQuoteForBondkitToken(amountTradingTokenIn: string, slippageTolerance?: number): Promise<SwapQuote | undefined>;
|
|
86
|
+
/**
|
|
87
|
+
* Get swap quote for bondkit token → trading token
|
|
88
|
+
*/
|
|
89
|
+
getSwapQuoteForTradingToken(amountBondkitTokenIn: string, slippageTolerance?: number): Promise<SwapQuote | undefined>;
|
|
90
|
+
/**
|
|
91
|
+
* Swap trading token for bondkit token
|
|
92
|
+
*/
|
|
93
|
+
swapTradingTokenForBondkitToken(amountTradingTokenIn: string, slippageTolerance?: number, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
94
|
+
/**
|
|
95
|
+
* Swap bondkit token for trading token
|
|
96
|
+
*/
|
|
97
|
+
swapBondkitTokenForTradingToken(amountBondkitTokenIn: string, slippageTolerance?: number, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
|
|
98
|
+
/**
|
|
99
|
+
* Helper method to get trading token decimals
|
|
100
|
+
*/
|
|
101
|
+
private getTradingTokenDecimals;
|
|
102
|
+
/**
|
|
103
|
+
* Get trading token symbol
|
|
104
|
+
* @param tradingTokenAddress Optional trading token address to avoid fetching it again
|
|
105
|
+
*/
|
|
106
|
+
getTradingTokenSymbol(tradingTokenAddress?: Address): Promise<string | undefined>;
|
|
72
107
|
}
|
|
73
108
|
export {};
|