@b3dotfun/sdk 0.0.83 → 0.0.84-alpha.0
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/constants/index.d.ts +1 -1
- package/dist/cjs/anyspend/constants/index.js +2 -2
- package/dist/cjs/anyspend/react/components/AnySpend.js +21 -9
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +4 -3
- package/dist/cjs/anyspend/react/components/common/CryptoPaySection.js +2 -4
- package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethodDisplay.d.ts +15 -0
- package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethodDisplay.js +28 -0
- package/dist/cjs/anyspend/react/components/common/InsufficientDepositPayment.js +1 -1
- package/dist/cjs/anyspend/react/components/common/OrderDetails.js +5 -4
- package/dist/cjs/anyspend/react/components/common/OrderToken.js +2 -2
- package/dist/cjs/anyspend/react/components/common/OrderTokenAmount.js +1 -1
- package/dist/cjs/anyspend/react/components/common/OrderTokenAmountFiat.js +1 -1
- package/dist/cjs/anyspend/react/components/common/OrderTokenAmountNew.js +2 -2
- package/dist/cjs/anyspend/react/components/common/PaymentStripeWeb2.js +4 -6
- package/dist/cjs/anyspend/react/components/common/PaymentVendorUI.js +41 -2
- package/dist/cjs/anyspend/react/components/common/TransferCryptoDetails.js +1 -1
- package/dist/cjs/anyspend/react/components/webview/WebviewOnrampPayment.js +2 -3
- package/dist/cjs/anyspend/react/hooks/index.d.ts +1 -0
- package/dist/cjs/anyspend/react/hooks/index.js +1 -0
- package/dist/cjs/anyspend/react/hooks/useConnectedUserProfile.d.ts +2 -1
- package/dist/cjs/anyspend/react/hooks/useConnectedUserProfile.js +5 -8
- package/dist/cjs/anyspend/react/hooks/useConnectedWalletDisplay.d.ts +0 -2
- package/dist/cjs/anyspend/react/hooks/useConnectedWalletDisplay.js +2 -12
- package/dist/cjs/anyspend/react/hooks/useHyperliquidTransfer.d.ts +37 -0
- package/dist/cjs/anyspend/react/hooks/useHyperliquidTransfer.js +133 -0
- package/dist/cjs/anyspend/react/providers/AnyspendProvider.js +1 -13
- package/dist/cjs/anyspend/types/chain.d.ts +10 -2
- package/dist/cjs/anyspend/types/chain.js +1 -0
- package/dist/cjs/anyspend/utils/address.d.ts +11 -0
- package/dist/cjs/anyspend/utils/address.js +15 -0
- package/dist/cjs/anyspend/utils/chain.d.ts +20 -1
- package/dist/cjs/anyspend/utils/chain.js +73 -4
- package/dist/cjs/anyspend/utils/token.d.ts +1 -0
- package/dist/cjs/anyspend/utils/token.js +19 -6
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js +1 -1
- package/dist/cjs/global-account/react/components/SignInWithB3/SignIn.js +3 -4
- package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStep.js +1 -1
- package/dist/cjs/global-account/react/hooks/index.d.ts +0 -1
- package/dist/cjs/global-account/react/hooks/index.js +1 -3
- package/dist/cjs/global-account/react/hooks/useAccountWallet.js +11 -10
- package/dist/cjs/shared/utils/payment.utils.d.ts +1 -0
- package/dist/cjs/shared/utils/payment.utils.js +9 -0
- package/dist/esm/anyspend/constants/index.d.ts +1 -1
- package/dist/esm/anyspend/constants/index.js +1 -1
- package/dist/esm/anyspend/react/components/AnySpend.js +22 -10
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +5 -4
- package/dist/esm/anyspend/react/components/common/CryptoPaySection.js +4 -6
- package/dist/esm/anyspend/react/components/common/CryptoPaymentMethodDisplay.d.ts +15 -0
- package/dist/esm/anyspend/react/components/common/CryptoPaymentMethodDisplay.js +25 -0
- package/dist/esm/anyspend/react/components/common/InsufficientDepositPayment.js +2 -2
- package/dist/esm/anyspend/react/components/common/OrderDetails.js +6 -5
- package/dist/esm/anyspend/react/components/common/OrderToken.js +3 -3
- package/dist/esm/anyspend/react/components/common/OrderTokenAmount.js +2 -2
- package/dist/esm/anyspend/react/components/common/OrderTokenAmountFiat.js +2 -2
- package/dist/esm/anyspend/react/components/common/OrderTokenAmountNew.js +3 -3
- package/dist/esm/anyspend/react/components/common/PaymentStripeWeb2.js +2 -4
- package/dist/esm/anyspend/react/components/common/PaymentVendorUI.js +9 -3
- package/dist/esm/anyspend/react/components/common/TransferCryptoDetails.js +2 -2
- package/dist/esm/anyspend/react/components/webview/WebviewOnrampPayment.js +3 -4
- package/dist/esm/anyspend/react/hooks/index.d.ts +1 -0
- package/dist/esm/anyspend/react/hooks/index.js +1 -0
- package/dist/esm/anyspend/react/hooks/useConnectedUserProfile.d.ts +2 -1
- package/dist/esm/anyspend/react/hooks/useConnectedUserProfile.js +6 -9
- package/dist/esm/anyspend/react/hooks/useConnectedWalletDisplay.d.ts +0 -2
- package/dist/esm/anyspend/react/hooks/useConnectedWalletDisplay.js +2 -12
- package/dist/esm/anyspend/react/hooks/useHyperliquidTransfer.d.ts +37 -0
- package/dist/esm/anyspend/react/hooks/useHyperliquidTransfer.js +127 -0
- package/dist/esm/anyspend/react/providers/AnyspendProvider.js +1 -13
- package/dist/esm/anyspend/types/chain.d.ts +10 -2
- package/dist/esm/anyspend/types/chain.js +1 -0
- package/dist/esm/anyspend/utils/address.d.ts +11 -0
- package/dist/esm/anyspend/utils/address.js +14 -0
- package/dist/esm/anyspend/utils/chain.d.ts +20 -1
- package/dist/esm/anyspend/utils/chain.js +70 -4
- package/dist/esm/anyspend/utils/token.d.ts +1 -0
- package/dist/esm/anyspend/utils/token.js +19 -7
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.js +2 -2
- package/dist/esm/global-account/react/components/SignInWithB3/SignIn.js +4 -5
- package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.js +1 -1
- package/dist/esm/global-account/react/hooks/index.d.ts +0 -1
- package/dist/esm/global-account/react/hooks/index.js +0 -1
- package/dist/esm/global-account/react/hooks/useAccountWallet.js +11 -10
- package/dist/esm/shared/utils/payment.utils.d.ts +1 -0
- package/dist/esm/shared/utils/payment.utils.js +9 -1
- package/dist/types/anyspend/constants/index.d.ts +1 -1
- package/dist/types/anyspend/react/components/common/CryptoPaymentMethodDisplay.d.ts +15 -0
- package/dist/types/anyspend/react/hooks/index.d.ts +1 -0
- package/dist/types/anyspend/react/hooks/useConnectedUserProfile.d.ts +2 -1
- package/dist/types/anyspend/react/hooks/useConnectedWalletDisplay.d.ts +0 -2
- package/dist/types/anyspend/react/hooks/useHyperliquidTransfer.d.ts +37 -0
- package/dist/types/anyspend/types/chain.d.ts +10 -2
- package/dist/types/anyspend/utils/address.d.ts +11 -0
- package/dist/types/anyspend/utils/chain.d.ts +20 -1
- package/dist/types/anyspend/utils/token.d.ts +1 -0
- package/dist/types/global-account/react/hooks/index.d.ts +0 -1
- package/dist/types/shared/utils/payment.utils.d.ts +1 -0
- package/package.json +1 -1
- package/src/anyspend/constants/index.ts +1 -1
- package/src/anyspend/react/components/AnySpend.tsx +31 -9
- package/src/anyspend/react/components/AnySpendCustom.tsx +9 -25
- package/src/anyspend/react/components/common/CryptoPaySection.tsx +7 -30
- package/src/anyspend/react/components/common/CryptoPaymentMethodDisplay.tsx +64 -0
- package/src/anyspend/react/components/common/InsufficientDepositPayment.tsx +2 -2
- package/src/anyspend/react/components/common/OrderDetails.tsx +6 -5
- package/src/anyspend/react/components/common/OrderToken.tsx +5 -5
- package/src/anyspend/react/components/common/OrderTokenAmount.tsx +3 -3
- package/src/anyspend/react/components/common/OrderTokenAmountFiat.tsx +3 -3
- package/src/anyspend/react/components/common/OrderTokenAmountNew.tsx +6 -6
- package/src/anyspend/react/components/common/PaymentStripeWeb2.tsx +3 -5
- package/src/anyspend/react/components/common/PaymentVendorUI.tsx +26 -2
- package/src/anyspend/react/components/common/TransferCryptoDetails.tsx +2 -2
- package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx +3 -5
- package/src/anyspend/react/hooks/index.ts +1 -0
- package/src/anyspend/react/hooks/useConnectedUserProfile.ts +7 -10
- package/src/anyspend/react/hooks/useConnectedWalletDisplay.ts +2 -15
- package/src/anyspend/react/hooks/useHyperliquidTransfer.ts +152 -0
- package/src/anyspend/react/providers/AnyspendProvider.tsx +7 -22
- package/src/anyspend/types/chain.ts +10 -1
- package/src/anyspend/utils/address.ts +15 -0
- package/src/anyspend/utils/chain.ts +84 -4
- package/src/anyspend/utils/token.ts +20 -7
- package/src/global-account/react/components/B3Provider/B3Provider.tsx +6 -2
- package/src/global-account/react/components/SignInWithB3/SignIn.tsx +4 -6
- package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx +1 -1
- package/src/global-account/react/hooks/index.ts +0 -1
- package/src/global-account/react/hooks/useAccountWallet.tsx +12 -11
- package/src/shared/utils/payment.utils.ts +10 -1
- package/dist/cjs/global-account/react/hooks/useBestTransactionPath.d.ts +0 -41
- package/dist/cjs/global-account/react/hooks/useBestTransactionPath.js +0 -148
- package/dist/esm/global-account/react/hooks/useBestTransactionPath.d.ts +0 -41
- package/dist/esm/global-account/react/hooks/useBestTransactionPath.js +0 -145
- package/dist/types/global-account/react/hooks/useBestTransactionPath.d.ts +0 -41
- package/src/global-account/react/hooks/useBestTransactionPath.tsx +0 -201
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { components } from "../types/api";
|
|
2
2
|
export declare const ANYSPEND_MAINNET_BASE_URL: string;
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
|
|
4
4
|
export declare const RELAY_SOL_ADDRESS = "11111111111111111111111111111111";
|
|
5
5
|
export declare const RELAY_SOLANA_MAINNET_CHAIN_ID = 792703809;
|
|
6
6
|
export declare const SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = "ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.VENDOR_DISPLAY_NAMES = exports.PAYMENT_METHOD_ICONS = exports.STRIPE_CONFIG = exports.DEFAULT_NFT_CONTRACT = exports.NFT_CONTRACTS = exports.ETH_BASE = exports.USDC_BASE = exports.ANYSPEND_TOKEN = exports.B3_TOKEN = exports.SOLANA_TOKEN_2022_PROGRAM_ID = exports.SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = exports.RELAY_SOLANA_MAINNET_CHAIN_ID = exports.RELAY_SOL_ADDRESS = exports.
|
|
3
|
+
exports.VENDOR_DISPLAY_NAMES = exports.PAYMENT_METHOD_ICONS = exports.STRIPE_CONFIG = exports.DEFAULT_NFT_CONTRACT = exports.NFT_CONTRACTS = exports.ETH_BASE = exports.USDC_BASE = exports.ANYSPEND_TOKEN = exports.B3_TOKEN = exports.SOLANA_TOKEN_2022_PROGRAM_ID = exports.SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = exports.RELAY_SOLANA_MAINNET_CHAIN_ID = exports.RELAY_SOL_ADDRESS = exports.ZERO_ADDRESS = exports.ANYSPEND_MAINNET_BASE_URL = void 0;
|
|
4
4
|
const chains_1 = require("viem/chains");
|
|
5
5
|
exports.ANYSPEND_MAINNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://mainnet.anyspend.com";
|
|
6
|
-
exports.
|
|
6
|
+
exports.ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
|
|
7
7
|
exports.RELAY_SOL_ADDRESS = "11111111111111111111111111111111";
|
|
8
8
|
exports.RELAY_SOLANA_MAINNET_CHAIN_ID = 792703809;
|
|
9
9
|
exports.SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = "ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL";
|
|
@@ -114,14 +114,17 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
114
114
|
// State for destination chain/token selection
|
|
115
115
|
const [selectedDstChainId, setSelectedDstChainId] = (0, react_4.useState)(initialDstChainId);
|
|
116
116
|
const defaultDstToken = isBuyMode
|
|
117
|
-
?
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
117
|
+
? // Special case: Hyperliquid uses zero address for USDC
|
|
118
|
+
destinationTokenChainId === anyspend_1.HYPERLIQUID_CHAIN_ID && (0, anyspend_1.eqci)(destinationTokenAddress, anyspend_1.ZERO_ADDRESS)
|
|
119
|
+
? (0, anyspend_1.getHyperliquidUSDCToken)()
|
|
120
|
+
: {
|
|
121
|
+
symbol: "",
|
|
122
|
+
chainId: destinationTokenChainId,
|
|
123
|
+
address: destinationTokenAddress,
|
|
124
|
+
name: "",
|
|
125
|
+
decimals: 18,
|
|
126
|
+
metadata: {},
|
|
127
|
+
}
|
|
125
128
|
: (0, anyspend_1.getDefaultToken)(selectedDstChainId);
|
|
126
129
|
const dstTokenFromUrl = (0, react_2.useTokenFromUrl)({
|
|
127
130
|
defaultToken: defaultDstToken,
|
|
@@ -159,6 +162,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
159
162
|
// Update destination token with metadata
|
|
160
163
|
(0, react_4.useEffect)(() => {
|
|
161
164
|
if (selectedDstToken && dstTokenMetadata && !appliedDstMetadataRef.current) {
|
|
165
|
+
// Skip metadata enhancement for Hyperliquid USDC - we already have correct metadata from getHyperliquidUSDCToken()
|
|
166
|
+
if (selectedDstToken.chainId === anyspend_1.HYPERLIQUID_CHAIN_ID && (0, anyspend_1.eqci)(selectedDstToken.address, anyspend_1.ZERO_ADDRESS)) {
|
|
167
|
+
appliedDstMetadataRef.current = true;
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
162
170
|
// Mark as applied
|
|
163
171
|
appliedDstMetadataRef.current = true;
|
|
164
172
|
const enhancedToken = {
|
|
@@ -822,10 +830,14 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
822
830
|
else {
|
|
823
831
|
setActivePanel(panelIndex);
|
|
824
832
|
}
|
|
825
|
-
}, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), (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: () => {
|
|
833
|
+
}, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues }) })), (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", selectedDstChainId === anyspend_1.HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50"), onClick: () => {
|
|
826
834
|
if (activeTab === "fiat" || isBuyMode) {
|
|
827
835
|
return;
|
|
828
836
|
}
|
|
837
|
+
// Prevent swapping if destination is Hyperliquid (only supported as destination, not source)
|
|
838
|
+
if (selectedDstChainId === anyspend_1.HYPERLIQUID_CHAIN_ID) {
|
|
839
|
+
return;
|
|
840
|
+
}
|
|
829
841
|
// Swap chain selections
|
|
830
842
|
const tempSrcChainId = selectedSrcChainId;
|
|
831
843
|
const tempDstChainId = selectedDstChainId;
|
|
@@ -56,6 +56,7 @@ const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodSt
|
|
|
56
56
|
const useRecipientAddressState_1 = require("../hooks/useRecipientAddressState");
|
|
57
57
|
const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
|
|
58
58
|
const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
|
|
59
|
+
const CryptoPaymentMethodDisplay_1 = require("./common/CryptoPaymentMethodDisplay");
|
|
59
60
|
const FeeBreakDown_1 = require("./common/FeeBreakDown");
|
|
60
61
|
const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
|
|
61
62
|
const OrderDetails_1 = require("./common/OrderDetails");
|
|
@@ -184,7 +185,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
184
185
|
// First check native tokens (ETH, etc.)
|
|
185
186
|
const nativeToken = nativeTokens?.find(t => t.chainId === srcChainId && Number(t.displayValue) > 0);
|
|
186
187
|
if (nativeToken) {
|
|
187
|
-
const matchingToken = tokenList.find(t => t.address === constants_1.
|
|
188
|
+
const matchingToken = tokenList.find(t => t.address === constants_1.ZERO_ADDRESS);
|
|
188
189
|
if (matchingToken)
|
|
189
190
|
return matchingToken;
|
|
190
191
|
}
|
|
@@ -337,7 +338,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
337
338
|
},
|
|
338
339
|
});
|
|
339
340
|
const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
|
|
340
|
-
const { address: connectedAddress, name: connectedName } = (0, react_1.useConnectedUserProfile)();
|
|
341
|
+
const { address: connectedAddress, name: connectedName } = (0, react_1.useConnectedUserProfile)(effectiveCryptoPaymentMethod);
|
|
341
342
|
const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress });
|
|
342
343
|
const recipientName = recipientProfile.data?.name;
|
|
343
344
|
const handleCreateOrder = async (recipientAddress, onramp) => {
|
|
@@ -559,7 +560,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
559
560
|
opacity: hasMounted ? 1 : 0,
|
|
560
561
|
y: hasMounted ? 0 : 20,
|
|
561
562
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
562
|
-
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children:
|
|
563
|
+
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethodDisplay_1.CryptoPaymentMethodDisplay, { paymentMethod: effectiveCryptoPaymentMethod, connectedAddress: connectedAddress, connectedName: connectedName }) })] }), (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_4.motion.div, { initial: false, animate: {
|
|
563
564
|
opacity: hasMounted ? 1 : 0,
|
|
564
565
|
y: hasMounted ? 0 : 20,
|
|
565
566
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
@@ -3,14 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.CryptoPaySection = CryptoPaySection;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("../../../../global-account/react");
|
|
6
|
-
const utils_1 = require("../../../../shared/utils");
|
|
7
|
-
const formatAddress_1 = require("../../../../shared/utils/formatAddress");
|
|
8
6
|
const number_1 = require("../../../../shared/utils/number");
|
|
9
7
|
const lucide_react_1 = require("lucide-react");
|
|
10
8
|
const react_2 = require("motion/react");
|
|
11
9
|
const react_3 = require("react");
|
|
12
10
|
const useConnectedWalletDisplay_1 = require("../../hooks/useConnectedWalletDisplay");
|
|
13
|
-
const
|
|
11
|
+
const CryptoPaymentMethodDisplay_1 = require("./CryptoPaymentMethodDisplay");
|
|
14
12
|
const OrderTokenAmount_1 = require("./OrderTokenAmount");
|
|
15
13
|
const TokenBalance_1 = require("./TokenBalance");
|
|
16
14
|
function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, onShowFeeDetail, }) {
|
|
@@ -43,7 +41,7 @@ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedS
|
|
|
43
41
|
(0, react_3.useEffect)(() => {
|
|
44
42
|
appliedSrcMetadataRef.current = false;
|
|
45
43
|
}, [selectedSrcToken.address, selectedSrcToken.chainId]);
|
|
46
|
-
return ((0, jsx_runtime_1.jsxs)(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" }, className: "pay-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 items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children:
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)(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" }, className: "pay-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 items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm", children: ["Pay", !isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }))] }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethodDisplay_1.CryptoPaymentMethodDisplay, { paymentMethod: selectedCryptoPaymentMethod, connectedAddress: walletAddress, connectedName: connectedName }) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: walletAddress, walletAddress: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
|
|
47
45
|
setIsSrcInputDirty(true);
|
|
48
46
|
setSrcAmount(value);
|
|
49
47
|
}, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }), (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, {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
|
|
2
|
+
interface CryptoPaymentMethodDisplayProps {
|
|
3
|
+
paymentMethod: CryptoPaymentMethodType;
|
|
4
|
+
connectedAddress?: string | null;
|
|
5
|
+
connectedName?: string | null;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Displays the selected crypto payment method with appropriate label
|
|
9
|
+
* - CONNECT_WALLET: Shows wallet address/name or "Connect wallet"
|
|
10
|
+
* - GLOBAL_WALLET: Shows "Global Account"
|
|
11
|
+
* - TRANSFER_CRYPTO: Shows "Transfer crypto"
|
|
12
|
+
* - NONE: Shows "Select payment method"
|
|
13
|
+
*/
|
|
14
|
+
export declare function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }: CryptoPaymentMethodDisplayProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CryptoPaymentMethodDisplay = CryptoPaymentMethodDisplay;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const utils_1 = require("../../../../shared/utils");
|
|
6
|
+
const formatAddress_1 = require("../../../../shared/utils/formatAddress");
|
|
7
|
+
const lucide_react_1 = require("lucide-react");
|
|
8
|
+
const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
|
|
9
|
+
/**
|
|
10
|
+
* Displays the selected crypto payment method with appropriate label
|
|
11
|
+
* - CONNECT_WALLET: Shows wallet address/name or "Connect wallet"
|
|
12
|
+
* - GLOBAL_WALLET: Shows "Global Account"
|
|
13
|
+
* - TRANSFER_CRYPTO: Shows "Transfer crypto"
|
|
14
|
+
* - NONE: Shows "Select payment method"
|
|
15
|
+
*/
|
|
16
|
+
function CryptoPaymentMethodDisplay({ paymentMethod, connectedAddress, connectedName, }) {
|
|
17
|
+
if (paymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
18
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress) })) : ((0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Connect wallet" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
|
|
19
|
+
}
|
|
20
|
+
if (paymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Global Account" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
|
|
22
|
+
}
|
|
23
|
+
if (paymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
|
|
25
|
+
}
|
|
26
|
+
// NONE or any other case
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
|
|
28
|
+
}
|
|
@@ -21,5 +21,5 @@ function InsufficientDepositPayment({ order, srcToken, depositDeficit, phantomWa
|
|
|
21
21
|
react_2.toast.success("Copied to clipboard");
|
|
22
22
|
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "payment-address bg-b3-react-background border-b3-react-border hover:border-as-brand group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm", children: order.globalAddress }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "payment-buttons mt-4 flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
|
|
23
23
|
? "Pay from Phantom Wallet"
|
|
24
|
-
: "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsx)("div", { children: "Or" }), (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: "qr-code flex flex-col items-center rounded-lg pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(depositDeficit), order.srcTokenAddress === anyspend_1.
|
|
24
|
+
: "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsx)("div", { children: "Or" }), (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: "qr-code flex flex-col items-center rounded-lg pb-3", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(depositDeficit), order.srcTokenAddress === anyspend_1.ZERO_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" })] })] })] }) })] })] }));
|
|
25
25
|
}
|
|
@@ -224,9 +224,9 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
|
|
|
224
224
|
// Main payment handler that triggers chain switch and payment
|
|
225
225
|
const handlePayment = (0, react_5.useCallback)(async () => {
|
|
226
226
|
console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
|
|
227
|
+
const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
|
|
227
228
|
if (order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID) {
|
|
228
|
-
//
|
|
229
|
-
const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
|
|
229
|
+
// Solana payment flow
|
|
230
230
|
await initiatePhantomTransfer({
|
|
231
231
|
amountLamports: amountToSend,
|
|
232
232
|
tokenAddress: order.srcTokenAddress,
|
|
@@ -234,7 +234,8 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
|
|
|
234
234
|
});
|
|
235
235
|
}
|
|
236
236
|
else {
|
|
237
|
-
//
|
|
237
|
+
// EVM payment flow (EOA and AA wallets)
|
|
238
|
+
// Note: Hyperliquid is NOT supported as source chain, only as destination chain
|
|
238
239
|
await handleUnifiedPaymentProcess();
|
|
239
240
|
}
|
|
240
241
|
}, [order, walletClient?.chain?.id, depositDeficit, handleUnifiedPaymentProcess, initiatePhantomTransfer]);
|
|
@@ -416,7 +417,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
|
|
|
416
417
|
? (0, centerTruncate_1.default)(phantomWalletAddress, 6)
|
|
417
418
|
: (0, centerTruncate_1.default)(account?.address || "", 6)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: colorMode === "dark" ? "#ffffff" : "#000000", className: "flex w-5/6 items-center gap-2 sm:px-0", onClick: () => setShowQRCode(true), children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4 text-lg md:text-sm", children: "Pay from a different wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_3.WalletMetamask, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletPhantom, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletTrust, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_3.WalletWalletConnect, { className: "h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)("span", { className: "label-style text-as-primary/30 text-xs", children: "& more" })] })] })] }) })) : (
|
|
418
419
|
// Default case - existing QR code flow
|
|
419
|
-
(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: "order-details-qr-container 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.
|
|
420
|
+
(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: "order-details-qr-container 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.ZERO_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-details-qr-code max-w-[200px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-details-qr-wallets 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: "order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/30 order-details-time-label", children: "Time remaining:" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary order-details-time-value", 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, points: points })), (0, jsx_runtime_1.jsxs)("button", { className: "text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline", onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCcw, { className: "ml-2 h-4 w-4" }), " Cancel and start over"] })] }));
|
|
420
421
|
});
|
|
421
422
|
function TransactionDetails({ title, chainId, tx, isProcessing, delay, }) {
|
|
422
423
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-details-transaction-content 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 })] }));
|
|
@@ -24,7 +24,7 @@ function OrderToken({ context, address, chainId, setChainId, token, setToken, re
|
|
|
24
24
|
// Get balance for the selected token
|
|
25
25
|
let balance = null;
|
|
26
26
|
if (token && wallet?.address) {
|
|
27
|
-
if (token.address === anyspend_1.
|
|
27
|
+
if (token.address === anyspend_1.ZERO_ADDRESS) {
|
|
28
28
|
// Native token
|
|
29
29
|
const nativeToken = nativeTokens?.find(t => t.chainId === chainId);
|
|
30
30
|
balance = nativeToken?.value ?? null;
|
|
@@ -43,7 +43,7 @@ function OrderToken({ context, address, chainId, setChainId, token, setToken, re
|
|
|
43
43
|
hasEnoughBalance,
|
|
44
44
|
};
|
|
45
45
|
}, [chainId, fungibleTokens, nativeTokens, requiredAmount, token, wallet?.address]);
|
|
46
|
-
return ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter:
|
|
46
|
+
return ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: (0, anyspend_1.getAvailableChainIds)(context), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)(context), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: token => {
|
|
47
47
|
setChainId(token.chainId);
|
|
48
48
|
setToken({
|
|
49
49
|
address: token.address,
|
|
@@ -76,5 +76,5 @@ function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, addres
|
|
|
76
76
|
// Then set the new token - the useEffect will handle setting the max balance
|
|
77
77
|
setToken(token);
|
|
78
78
|
};
|
|
79
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? ((0, jsx_runtime_1.jsx)("h2", { className: (0, utils_1.cn)("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: (0, utils_1.cn)("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter:
|
|
79
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? ((0, jsx_runtime_1.jsx)("h2", { className: (0, utils_1.cn)("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: (0, utils_1.cn)("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: (0, anyspend_1.getAvailableChainIds)(context), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)(context), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", role: "combobox", className: (0, utils_1.cn)("token-selector-button bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[chainId].name })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
|
|
80
80
|
}
|
|
@@ -46,5 +46,5 @@ function OrderTokenAmountFiat({ disabled, inputValue, onChangeInput, context, ad
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
// Original token amount input design for other contexts
|
|
49
|
-
return ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter:
|
|
49
|
+
return ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: (0, anyspend_1.getAvailableChainIds)(context), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)(context), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("border-as-border-secondary bg-as-surface-primary flex cursor-pointer items-center justify-between rounded-xl border px-3 py-2", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [token.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId]?.logoUrl, tokenUrl: token.metadata.logoURI, className: "h-10 w-10" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "font-bold text-white", children: token.symbol?.substring(0, 2) || "??" }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 text-sm", children: anyspend_1.ALL_CHAINS[chainId]?.name || "Unknown" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-600", children: "\u2248" }), (0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 20, spellCheck: "false", className: "text-as-primary bg-as-surface-primary w-[100px]", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, "aria-disabled": true, readOnly: true }, `input-${token.address}-${chainId}`), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 cursor-pointer text-gray-400" })] })] }) }, `selector-${context}-${token.address}-${chainId}`));
|
|
50
50
|
}
|
|
@@ -56,8 +56,8 @@ function OrderTokenAmountFiat({ disabled, inputValue, onChangeInput, context, ad
|
|
|
56
56
|
};
|
|
57
57
|
if (showAsReceiveAmount) {
|
|
58
58
|
// Design-matched token display for receive amounts (like in PanelOnramp)
|
|
59
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center justify-between rounded-xl bg-gray-50 p-4", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [token.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId]?.logoUrl, tokenUrl: token.metadata.logoURI, className: "h-10 w-10" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "font-bold text-white", children: token.symbol?.substring(0, 2) || "??" }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-base font-semibold text-gray-900", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: anyspend_1.ALL_CHAINS[chainId]?.name || "Unknown" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-600", children: "\u2248" }), (0, jsx_runtime_1.jsx)("span", { className: "text-lg font-semibold text-gray-900", children: formatAmount(inputValue) }), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter:
|
|
59
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center justify-between rounded-xl bg-gray-50 p-4", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [token.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId]?.logoUrl, tokenUrl: token.metadata.logoURI, className: "h-10 w-10" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "font-bold text-white", children: token.symbol?.substring(0, 2) || "??" }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-base font-semibold text-gray-900", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: anyspend_1.ALL_CHAINS[chainId]?.name || "Unknown" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-600", children: "\u2248" }), (0, jsx_runtime_1.jsx)("span", { className: "text-lg font-semibold text-gray-900", children: formatAmount(inputValue) }), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: (0, anyspend_1.getAvailableChainIds)(context), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)(context), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 cursor-pointer text-gray-400" }) }, `selector-${context}-${token.address}-${chainId}`))] })] }));
|
|
60
60
|
}
|
|
61
61
|
// Original token amount input design for other contexts
|
|
62
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [!canEditAmount ? ((0, jsx_runtime_1.jsx)("h2", { className: "text-3xl font-medium text-white", children: inputValue || "--" })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: "placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter:
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [!canEditAmount ? ((0, jsx_runtime_1.jsx)("h2", { className: "text-3xl font-medium text-white", children: inputValue || "--" })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: "placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: (0, anyspend_1.getAvailableChainIds)(context), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: (0, anyspend_1.getAvailableChainIds)(context), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", role: "combobox", className: "bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", children: [token.metadata?.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId]?.logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[chainId]?.name })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
|
|
63
63
|
}
|
|
@@ -5,19 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.default = PaymentStripeWeb2;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const
|
|
8
|
+
const payment_utils_1 = require("../../../../shared/utils/payment.utils");
|
|
9
9
|
const react_1 = require("../../../../anyspend/react");
|
|
10
10
|
const react_2 = require("../../../../global-account/react");
|
|
11
11
|
const number_1 = require("../../../../shared/utils/number");
|
|
12
|
-
const
|
|
12
|
+
const payment_utils_2 = require("../../../../shared/utils/payment.utils");
|
|
13
13
|
const react_stripe_js_1 = require("@stripe/react-stripe-js");
|
|
14
|
-
const stripe_js_1 = require("@stripe/stripe-js");
|
|
15
14
|
const lucide_react_1 = require("lucide-react");
|
|
16
15
|
const react_3 = require("react");
|
|
17
16
|
const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
|
|
18
17
|
const HowItWorks_1 = __importDefault(require("./HowItWorks"));
|
|
19
18
|
const PaymentMethodIcons_1 = __importDefault(require("./PaymentMethodIcons"));
|
|
20
|
-
const stripePromise = (0, stripe_js_1.loadStripe)(constants_1.STRIPE_CONFIG.publishableKey);
|
|
21
19
|
function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
|
|
22
20
|
const { theme } = (0, react_2.useB3)();
|
|
23
21
|
const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
|
|
@@ -28,7 +26,7 @@ function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
|
|
|
28
26
|
if (stripeClientSecretError) {
|
|
29
27
|
return (0, jsx_runtime_1.jsx)(StripeErrorState, { error: stripeClientSecretError.message });
|
|
30
28
|
}
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe:
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: (0, payment_utils_1.getStripePromise)(), options: {
|
|
32
30
|
clientSecret: clientSecret || undefined,
|
|
33
31
|
appearance: { theme: theme === "light" ? "stripe" : "night" },
|
|
34
32
|
}, children: (0, jsx_runtime_1.jsx)(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }) }));
|
|
@@ -61,7 +59,7 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
|
|
|
61
59
|
try {
|
|
62
60
|
const paymentIntent = await stripe.retrievePaymentIntent(clientSecret);
|
|
63
61
|
const amount = paymentIntent.paymentIntent?.amount
|
|
64
|
-
? (0,
|
|
62
|
+
? (0, payment_utils_2.formatStripeAmount)(paymentIntent.paymentIntent.amount)
|
|
65
63
|
: null;
|
|
66
64
|
setAmount(amount);
|
|
67
65
|
}
|
|
@@ -1,12 +1,51 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
2
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
37
|
};
|
|
5
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
39
|
exports.default = PaymentVendorUI;
|
|
7
40
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
|
+
const react_1 = require("react");
|
|
8
42
|
const PaymentOneClick_1 = __importDefault(require("./PaymentOneClick"));
|
|
9
|
-
|
|
43
|
+
// Lazy load Stripe component to prevent loadStripe() from running at module level
|
|
44
|
+
// This prevents EIP-6963 wallet detection events when Stripe is not used
|
|
45
|
+
const PaymentStripeWeb2 = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require("./PaymentStripeWeb2"))));
|
|
46
|
+
function StripeLoadingFallback() {
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/70 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg font-medium", children: "Loading payment" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 mt-2 text-sm", children: "Initializing secure payment form..." })] })] }) }));
|
|
48
|
+
}
|
|
10
49
|
function PaymentVendorUI({ order, dstTokenSymbol }) {
|
|
11
50
|
const vendor = order.onrampMetadata?.vendor;
|
|
12
51
|
// Handle one-click payment flows (Coinbase, Stripe redirect)
|
|
@@ -15,7 +54,7 @@ function PaymentVendorUI({ order, dstTokenSymbol }) {
|
|
|
15
54
|
}
|
|
16
55
|
// Handle Stripe Web2 payment flow
|
|
17
56
|
if (vendor === "stripe-web2" && order.stripePaymentIntentId) {
|
|
18
|
-
return (0, jsx_runtime_1.jsx)(
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(StripeLoadingFallback, {}), children: (0, jsx_runtime_1.jsx)(PaymentStripeWeb2, { order: order, stripePaymentIntentId: order.stripePaymentIntentId }) }));
|
|
19
58
|
}
|
|
20
59
|
// Return null for unsupported vendors
|
|
21
60
|
return null;
|
|
@@ -70,5 +70,5 @@ exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails
|
|
|
70
70
|
transition: "stroke-dashoffset 1s linear",
|
|
71
71
|
} })] }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
|
|
72
72
|
react_1.toast.success("Amount copied to clipboard");
|
|
73
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") }), (0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: (0, anyspend_1.getChainName)(order.srcChain) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.
|
|
73
|
+
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") }), (0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: (0, anyspend_1.getChainName)(order.srcChain) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.ZERO_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-transfer-crypto-qr-code bg-as-surface-secondary max-h-48 max-w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" }) })] })] })] }), (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: "order-transfer-crypto-actions flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "order-transfer-crypto-copy-btn w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }), (0, jsx_runtime_1.jsx)(PaymentMethodSwitch_1.PaymentMethodSwitch, { currentMethod: CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
|
|
74
74
|
});
|
|
@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.WebviewOnrampPayment = WebviewOnrampPayment;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
const anyspend_1 = require("../../../../anyspend");
|
|
9
|
+
const payment_utils_1 = require("../../../../shared/utils/payment.utils");
|
|
9
10
|
const react_1 = require("../../../../anyspend/react");
|
|
10
11
|
const react_2 = require("../../../../global-account/react");
|
|
11
12
|
const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
|
|
12
13
|
const react_stripe_js_1 = require("@stripe/react-stripe-js");
|
|
13
|
-
const stripe_js_1 = require("@stripe/stripe-js");
|
|
14
14
|
const lucide_react_1 = require("lucide-react");
|
|
15
15
|
const react_3 = require("motion/react");
|
|
16
16
|
const react_4 = require("react");
|
|
17
17
|
const viem_1 = require("viem");
|
|
18
18
|
const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
|
|
19
|
-
const stripePromise = (0, stripe_js_1.loadStripe)(anyspend_1.STRIPE_CONFIG.publishableKey);
|
|
20
19
|
function WebviewOnrampPayment(props) {
|
|
21
20
|
const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
|
|
22
21
|
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(WebviewOnrampPaymentInner, { ...props }) }));
|
|
@@ -169,7 +168,7 @@ function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinat
|
|
|
169
168
|
if (createdOrder && clientSecret) {
|
|
170
169
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col divide-y", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Receiving" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-5 w-5 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [anyspendQuote?.data?.currencyOut?.amount
|
|
171
170
|
? Number((0, viem_1.formatUnits)(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)).toFixed(4)
|
|
172
|
-
: "0", " ", destinationToken.symbol] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Network" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, anyspend_1.getChainName)(destinationToken.chainId) })] }), recipientAddress && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Recipient" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, centerTruncate_1.default)(recipientAddress) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "You Pay" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe:
|
|
171
|
+
: "0", " ", destinationToken.symbol] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Network" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, anyspend_1.getChainName)(destinationToken.chainId) })] }), recipientAddress && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Recipient" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, centerTruncate_1.default)(recipientAddress) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "You Pay" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: (0, payment_utils_1.getStripePromise)(), options: {
|
|
173
172
|
clientSecret,
|
|
174
173
|
appearance: {
|
|
175
174
|
theme: "flat",
|
|
@@ -8,6 +8,7 @@ export * from "./useCoinbaseOnrampOptions";
|
|
|
8
8
|
export * from "./useConnectedUserProfile";
|
|
9
9
|
export * from "./useGeoOnrampOptions";
|
|
10
10
|
export * from "./useGetGeo";
|
|
11
|
+
export * from "./useHyperliquidTransfer";
|
|
11
12
|
export * from "./useRecipientAddressState";
|
|
12
13
|
export * from "./useSigMint";
|
|
13
14
|
export * from "./useStripeClientSecret";
|
|
@@ -24,6 +24,7 @@ __exportStar(require("./useCoinbaseOnrampOptions"), exports);
|
|
|
24
24
|
__exportStar(require("./useConnectedUserProfile"), exports);
|
|
25
25
|
__exportStar(require("./useGeoOnrampOptions"), exports);
|
|
26
26
|
__exportStar(require("./useGetGeo"), exports);
|
|
27
|
+
__exportStar(require("./useHyperliquidTransfer"), exports);
|
|
27
28
|
__exportStar(require("./useRecipientAddressState"), exports);
|
|
28
29
|
__exportStar(require("./useSigMint"), exports);
|
|
29
30
|
__exportStar(require("./useStripeClientSecret"), exports);
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
|
|
1
2
|
/**
|
|
2
3
|
* Hook that provides connected user's address, profile, and cleaned display name
|
|
3
4
|
* Combines logic for getting connected address from either global account or thirdweb wallets
|
|
4
5
|
*/
|
|
5
|
-
export declare function useConnectedUserProfile(): {
|
|
6
|
+
export declare function useConnectedUserProfile(selectedCryptoPaymentMethod?: CryptoPaymentMethodType): {
|
|
6
7
|
address: string | undefined;
|
|
7
8
|
profile: import("@tanstack/react-query").UseQueryResult<import("../../../global-account/react").CombinedProfile, Error>;
|
|
8
9
|
name: string | null | undefined;
|