@b3dotfun/sdk 0.0.35-alpha.0 → 0.0.35-alpha.2

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.
Files changed (41) hide show
  1. package/dist/cjs/anyspend/react/components/AnySpend.js +5 -3
  2. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +2 -2
  3. package/dist/cjs/anyspend/react/components/common/ConnectWalletPayment.d.ts +3 -1
  4. package/dist/cjs/anyspend/react/components/common/ConnectWalletPayment.js +5 -2
  5. package/dist/cjs/anyspend/react/components/common/CryptoPaySection.d.ts +16 -0
  6. package/dist/cjs/anyspend/react/components/common/CryptoPaySection.js +58 -0
  7. package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.d.ts +1 -0
  8. package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +22 -15
  9. package/dist/cjs/anyspend/react/components/common/OrderDetails.js +12 -4
  10. package/dist/cjs/anyspend/react/components/common/PaySection.d.ts +2 -6
  11. package/dist/cjs/anyspend/react/components/common/PaySection.js +10 -15
  12. package/dist/cjs/anyspend/react/components/index.d.ts +2 -2
  13. package/dist/cjs/anyspend/react/components/index.js +5 -5
  14. package/dist/esm/anyspend/react/components/AnySpend.js +5 -3
  15. package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +2 -2
  16. package/dist/esm/anyspend/react/components/common/ConnectWalletPayment.d.ts +3 -1
  17. package/dist/esm/anyspend/react/components/common/ConnectWalletPayment.js +5 -2
  18. package/dist/esm/anyspend/react/components/common/CryptoPaySection.d.ts +16 -0
  19. package/dist/esm/anyspend/react/components/common/CryptoPaySection.js +55 -0
  20. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.d.ts +1 -0
  21. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +22 -15
  22. package/dist/esm/anyspend/react/components/common/OrderDetails.js +12 -4
  23. package/dist/esm/anyspend/react/components/common/PaySection.d.ts +2 -6
  24. package/dist/esm/anyspend/react/components/common/PaySection.js +10 -15
  25. package/dist/esm/anyspend/react/components/index.d.ts +2 -2
  26. package/dist/esm/anyspend/react/components/index.js +2 -2
  27. package/dist/styles/index.css +1 -1
  28. package/dist/types/anyspend/react/components/common/ConnectWalletPayment.d.ts +3 -1
  29. package/dist/types/anyspend/react/components/common/CryptoPaySection.d.ts +16 -0
  30. package/dist/types/anyspend/react/components/common/CryptoPaymentMethod.d.ts +1 -0
  31. package/dist/types/anyspend/react/components/common/PaySection.d.ts +2 -6
  32. package/dist/types/anyspend/react/components/index.d.ts +2 -2
  33. package/package.json +3 -3
  34. package/src/anyspend/react/components/AnySpend.tsx +7 -6
  35. package/src/anyspend/react/components/AnyspendDepositHype.tsx +2 -5
  36. package/src/anyspend/react/components/common/ConnectWalletPayment.tsx +6 -1
  37. package/src/anyspend/react/components/common/CryptoPaySection.tsx +153 -0
  38. package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +80 -43
  39. package/src/anyspend/react/components/common/OrderDetails.tsx +13 -4
  40. package/src/anyspend/react/components/common/PaySection.tsx +64 -140
  41. package/src/anyspend/react/components/index.ts +2 -2
@@ -9,13 +9,13 @@ import { toast } from "sonner";
9
9
  import { base } from "viem/chains";
10
10
  import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow.js";
11
11
  import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
12
+ import { CryptoPaySection } from "./common/CryptoPaySection.js";
12
13
  import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
13
14
  import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
14
15
  import { ErrorSection } from "./common/ErrorSection.js";
15
16
  import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
16
17
  import { OrderDetails } from "./common/OrderDetails.js";
17
18
  import { OrderStatus } from "./common/OrderStatus.js";
18
- import { PaySection } from "./common/PaySection.js";
19
19
  import { RecipientSelection } from "./common/RecipientSelection.js";
20
20
  import { ArrowDown } from "lucide-react";
21
21
  import { PanelOnramp } from "./common/PanelOnramp.js";
@@ -112,7 +112,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
112
112
  await handleFiatOrder();
113
113
  }
114
114
  };
115
- const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(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: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: 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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
115
+ const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(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 })) : (_jsx(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: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: 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: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
116
116
  setIsSrcInputDirty(false);
117
117
  setSrcAmount(value);
118
118
  }, anyspendQuote: anyspendQuote }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsx(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: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
@@ -1,4 +1,5 @@
1
1
  import { components } from "../../../../anyspend/types/api";
2
+ import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
2
3
  type Tournament = components["schemas"]["Tournament"];
3
4
  type NFT = components["schemas"]["NFT"];
4
5
  interface ConnectWalletPaymentProps {
@@ -10,6 +11,7 @@ interface ConnectWalletPaymentProps {
10
11
  phantomWalletAddress?: string | null;
11
12
  tournament?: Tournament;
12
13
  nft?: NFT;
14
+ cryptoPaymentMethod: CryptoPaymentMethodType;
13
15
  }
14
- export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, }: ConnectWalletPaymentProps): import("react/jsx-runtime").JSX.Element;
16
+ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, cryptoPaymentMethod, }: ConnectWalletPaymentProps): import("react/jsx-runtime").JSX.Element;
15
17
  export {};
@@ -7,8 +7,9 @@ import { formatTokenAmount } from "../../../../shared/utils/number.js";
7
7
  import { motion } from "framer-motion";
8
8
  import { ChevronRight, Loader2 } from "lucide-react";
9
9
  import { useAccount } from "wagmi";
10
+ import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
10
11
  import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
11
- export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, }) {
12
+ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, cryptoPaymentMethod, }) {
12
13
  const profile = useProfile({ address: order.recipientAddress });
13
14
  const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
14
15
  const { address: connectedAddress } = useAccount();
@@ -26,7 +27,9 @@ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSw
26
27
  }
27
28
  return (_jsx("div", { className: "flex w-full flex-col items-center gap-6", children: _jsxs(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, className: "flex w-full flex-col items-center gap-2", children: [_jsx(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 ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
28
29
  ? "Pay from Phantom Wallet"
29
- : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsxs("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
30
+ : cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
31
+ ? "Pay from Global Account"
32
+ : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsxs("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
30
33
  ? centerTruncate(phantomWalletAddress, 6)
31
34
  : centerTruncate(connectedAddress || "")] }), _jsx("div", { className: "mt-4", children: _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
32
35
  }
@@ -0,0 +1,16 @@
1
+ import { components } from "../../../types/api";
2
+ import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
3
+ interface CryptoPaySectionProps {
4
+ selectedSrcChainId: number;
5
+ setSelectedSrcChainId: (chainId: number) => void;
6
+ selectedSrcToken: components["schemas"]["Token"];
7
+ setSelectedSrcToken: (token: components["schemas"]["Token"]) => void;
8
+ srcAmount: string;
9
+ setSrcAmount: (amount: string) => void;
10
+ setIsSrcInputDirty: (dirty: boolean) => void;
11
+ selectedCryptoPaymentMethod: CryptoPaymentMethodType;
12
+ onSelectCryptoPaymentMethod: () => void;
13
+ anyspendQuote?: any;
14
+ }
15
+ export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
16
+ export {};
@@ -0,0 +1,55 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useAccountWallet, useProfile, useTokenData } from "../../../../global-account/react/index.js";
3
+ import { formatUsername } from "../../../../shared/utils/index.js";
4
+ import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
5
+ import { formatDisplayNumber } from "../../../../shared/utils/number.js";
6
+ import { ChevronRight } from "lucide-react";
7
+ import { motion } from "motion/react";
8
+ import { useEffect, useRef } from "react";
9
+ import { useAccount } from "wagmi";
10
+ import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
11
+ import { OrderTokenAmount } from "./OrderTokenAmount.js";
12
+ import { TokenBalance } from "./TokenBalance.js";
13
+ export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }) {
14
+ const { address: connectedAddress, isConnected } = useAccount();
15
+ const { data: profileData } = useProfile({ address: connectedAddress });
16
+ const connectedName = profileData?.displayName;
17
+ const { address: globalAddress } = useAccountWallet();
18
+ const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
19
+ // Determine which address to use based on payment method
20
+ const walletAddress = selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? globalAddress : connectedAddress;
21
+ // Add ref to track if we've applied metadata
22
+ const appliedSrcMetadataRef = useRef(false);
23
+ // Update source token with metadata
24
+ useEffect(() => {
25
+ if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
26
+ // Mark as applied
27
+ appliedSrcMetadataRef.current = true;
28
+ const enhancedToken = {
29
+ ...selectedSrcToken,
30
+ decimals: srcTokenMetadata.decimals || selectedSrcToken.decimals,
31
+ symbol: srcTokenMetadata.symbol || selectedSrcToken.symbol,
32
+ name: srcTokenMetadata.name || selectedSrcToken.name,
33
+ metadata: {
34
+ ...selectedSrcToken.metadata,
35
+ logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
36
+ },
37
+ };
38
+ setSelectedSrcToken(enhancedToken);
39
+ }
40
+ }, [srcTokenMetadata, selectedSrcToken, setSelectedSrcToken]);
41
+ // Reset source token ref when address/chain changes
42
+ useEffect(() => {
43
+ appliedSrcMetadataRef.current = false;
44
+ }, [selectedSrcToken.address, selectedSrcToken.chainId]);
45
+ return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsxs(_Fragment, { children: ["Global Account", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
46
+ setIsSrcInputDirty(true);
47
+ setSrcAmount(value);
48
+ }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
49
+ style: "currency",
50
+ fallback: "",
51
+ }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: walletAddress, onChangeInput: value => {
52
+ setIsSrcInputDirty(true);
53
+ setSrcAmount(value);
54
+ } })] })] }));
55
+ }
@@ -1,6 +1,7 @@
1
1
  export declare enum CryptoPaymentMethodType {
2
2
  NONE = "none",
3
3
  CONNECT_WALLET = "connect_wallet",
4
+ GLOBAL_WALLET = "global_wallet",
4
5
  TRANSFER_CRYPTO = "transfer_crypto"
5
6
  }
6
7
  interface CryptoPaymentMethodProps {
@@ -13,10 +13,11 @@ export var CryptoPaymentMethodType;
13
13
  (function (CryptoPaymentMethodType) {
14
14
  CryptoPaymentMethodType["NONE"] = "none";
15
15
  CryptoPaymentMethodType["CONNECT_WALLET"] = "connect_wallet";
16
+ CryptoPaymentMethodType["GLOBAL_WALLET"] = "global_wallet";
16
17
  CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
17
18
  })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
18
19
  export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
19
- const { wallet: globalWallet } = useAccountWallet();
20
+ const { wallet: globalWallet, address: globalAddress } = useAccountWallet();
20
21
  const { address, isConnected, connector } = useAccount();
21
22
  const { connect, connectors, isPending } = useConnect();
22
23
  const { disconnect } = useDisconnect();
@@ -122,20 +123,26 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
122
123
  }, className: "crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), _jsxs("button", { onClick: () => {
123
124
  setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
124
125
  onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
125
- }, disabled: isCreatingOrder, className: "crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: _jsx(ZapIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), isConnected && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsx("div", { className: "space-y-2", children: _jsx("button", { onClick: () => {
126
- setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
127
- onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
128
- toast.success(`Selected ${connector?.name || "wallet"}`);
129
- }, className: cn("crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
130
- ? "connected-wallet border-as-brand bg-as-brand/5"
131
- : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Wallet", className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
132
- e.stopPropagation();
133
- disconnect();
134
- toast.success("Wallet disconnected");
135
- if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
136
- setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
137
- }
138
- }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] })] }) }) })] }))] })] }), showWalletModal &&
126
+ }, disabled: isCreatingOrder, className: "crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: _jsx(ZapIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), (isConnected || globalAddress) && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsxs("div", { className: "space-y-2", children: [isConnected && (_jsx("button", { onClick: () => {
127
+ setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
128
+ onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
129
+ toast.success(`Selected ${connector?.name || "wallet"}`);
130
+ }, className: cn("crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
131
+ ? "connected-wallet border-as-brand bg-as-brand/5"
132
+ : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
133
+ e.stopPropagation();
134
+ disconnect();
135
+ toast.success("Wallet disconnected");
136
+ if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
137
+ setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
138
+ }
139
+ }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] })] }) })), globalAddress && (_jsx("button", { onClick: () => {
140
+ setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
141
+ onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
142
+ toast.success("Selected B3 Account");
143
+ }, className: cn("crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
144
+ ? "connected-wallet border-as-brand bg-as-brand/5"
145
+ : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Global Account", className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: _jsx(Wallet, { className: "h-5 w-5 text-purple-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Global Account" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(globalAddress || "") })] })] }), _jsx("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] }))] })] }), showWalletModal &&
139
146
  createPortal(_jsx("div", { className: "wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), _jsx("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-3", children: walletOptions.map(walletOption => {
140
147
  const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
141
148
  return (_jsx("button", { onClick: async () => {
@@ -148,7 +148,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
148
148
  const [txHash, setTxHash] = useState();
149
149
  const [showQRCode, setShowQRCode] = useState(false);
150
150
  const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
151
- const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
151
+ const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
152
152
  const roundedUpSrcAmount = useMemo(() => {
153
153
  // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
154
154
  // Use 21 significant digits (max allowed by Intl.NumberFormat)
@@ -192,11 +192,18 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
192
192
  to = order.srcTokenAddress;
193
193
  value = BigInt(0);
194
194
  }
195
- const txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
195
+ // Use appropriate execution method based on payment method
196
+ let txHash;
197
+ if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
198
+ txHash = await switchChainAndExecute(order.srcChain, { to, data: txData, value });
199
+ }
200
+ else {
201
+ txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
202
+ }
196
203
  if (txHash) {
197
204
  setTxHash(txHash);
198
205
  }
199
- }, [order, switchChainAndExecuteWithEOA, depositDeficit]);
206
+ }, [order, switchChainAndExecuteWithEOA, switchChainAndExecute, depositDeficit, effectiveCryptoPaymentMethod]);
200
207
  // Main payment handler that triggers chain switch and payment
201
208
  const handlePayment = async () => {
202
209
  console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
@@ -475,7 +482,8 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
475
482
  ? `Waiting for payment`
476
483
  : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) }), !depositEnoughAmount && order.status !== "expired" && (_jsx(InsufficientDepositPayment, { order: order, srcToken: srcToken, depositDeficit: depositDeficit, phantomWalletAddress: phantomWalletAddress, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, onPayment: handlePayment }))] }));
477
484
  }
478
- return (_jsxs(_Fragment, { children: [statusDisplay === "processing" && (_jsx(_Fragment, { children: order.onrampMetadata ? (_jsx(PaymentVendorUI, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsx(ConnectWalletPayment, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
485
+ return (_jsxs(_Fragment, { children: [statusDisplay === "processing" && (_jsx(_Fragment, { children: order.onrampMetadata ? (_jsx(PaymentVendorUI, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
486
+ effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsx(ConnectWalletPayment, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft, cryptoPaymentMethod: effectiveCryptoPaymentMethod })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
479
487
  // Transfer Crypto Payment Method - Show new card-based UI
480
488
  _jsx(TransferCryptoDetails, { order: order, recipientName: recipientName, srcToken: srcToken, dstToken: dstToken, tournament: tournament, nft: nft, onBack: handleBack })) : (_jsxs("div", { className: "relative flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-as-primary/50", children: "Please send" }), _jsxs("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [_jsx(CopyToClipboard, { text: roundedUpSrcAmount, onCopy: () => {
481
489
  toast.success("Copied to clipboard");
@@ -1,8 +1,6 @@
1
1
  import { components } from "../../../types/api";
2
2
  import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
3
- import { FiatPaymentMethod } from "./FiatPaymentMethod";
4
- interface PaySectionProps {
5
- paymentType: "crypto" | "fiat";
3
+ interface CryptoPaySectionProps {
6
4
  selectedSrcChainId: number;
7
5
  setSelectedSrcChainId: (chainId: number) => void;
8
6
  selectedSrcToken: components["schemas"]["Token"];
@@ -11,10 +9,8 @@ interface PaySectionProps {
11
9
  setSrcAmount: (amount: string) => void;
12
10
  setIsSrcInputDirty: (dirty: boolean) => void;
13
11
  selectedCryptoPaymentMethod: CryptoPaymentMethodType;
14
- selectedFiatPaymentMethod: FiatPaymentMethod;
15
12
  onSelectCryptoPaymentMethod: () => void;
16
- onSelectFiatPaymentMethod: () => void;
17
13
  anyspendQuote?: any;
18
14
  }
19
- export declare function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }: PaySectionProps): import("react/jsx-runtime").JSX.Element;
15
+ export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
20
16
  export {};
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Input, useProfile, useTokenData } from "../../../../global-account/react/index.js";
2
+ import { useProfile, useTokenData } from "../../../../global-account/react/index.js";
3
3
  import { formatUsername } from "../../../../shared/utils/index.js";
4
4
  import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
5
5
  import { formatDisplayNumber } from "../../../../shared/utils/number.js";
@@ -8,10 +8,9 @@ import { motion } from "motion/react";
8
8
  import { useEffect, useRef } from "react";
9
9
  import { useAccount } from "wagmi";
10
10
  import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
11
- import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
12
11
  import { OrderTokenAmount } from "./OrderTokenAmount.js";
13
12
  import { TokenBalance } from "./TokenBalance.js";
14
- export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }) {
13
+ export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }) {
15
14
  const { address: connectedAddress, isConnected } = useAccount();
16
15
  const { data: profileData } = useProfile({ address: connectedAddress });
17
16
  const connectedName = profileData?.displayName;
@@ -40,18 +39,14 @@ export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChai
40
39
  useEffect(() => {
41
40
  appliedSrcMetadataRef.current = false;
42
41
  }, [selectedSrcToken.address, selectedSrcToken.chainId]);
43
- return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })) : (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
42
+ return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsxs(_Fragment, { children: ["Global Account", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
43
+ setIsSrcInputDirty(true);
44
+ setSrcAmount(value);
45
+ }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
46
+ style: "currency",
47
+ fallback: "",
48
+ }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: connectedAddress, onChangeInput: value => {
44
49
  setIsSrcInputDirty(true);
45
50
  setSrcAmount(value);
46
- }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
47
- style: "currency",
48
- fallback: "",
49
- }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: connectedAddress, onChangeInput: value => {
50
- setIsSrcInputDirty(true);
51
- setSrcAmount(value);
52
- } })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { type: "text", value: srcAmount, onChange: e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, "")), placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
53
- width: `${Math.max(50, srcAmount.length * 34)}px`,
54
- } })] }) }), _jsx("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => setSrcAmount(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 ${srcAmount === value
55
- ? "border-as-border-secondary bg-as-surface-secondary"
56
- : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) })] }))] }));
51
+ } })] })] }));
57
52
  }
@@ -4,11 +4,12 @@ export { AnySpendBuySpin } from "./AnySpendBuySpin";
4
4
  export { AnySpendCustom } from "./AnySpendCustom";
5
5
  export * from "./AnySpendFingerprintWrapper";
6
6
  export { AnySpendNFT } from "./AnySpendNFT";
7
- export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
8
7
  export { AnySpendStakeB3 } from "./AnySpendStakeB3";
9
8
  export { AnySpendTournament } from "./AnySpendTournament";
9
+ export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
10
10
  export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
11
11
  export { ChainTokenIcon } from "./common/ChainTokenIcon";
12
+ export { CryptoPaySection } from "./common/CryptoPaySection";
12
13
  export { CryptoReceiveSection } from "./common/CryptoReceiveSection";
13
14
  export { OrderDetails } from "./common/OrderDetails";
14
15
  export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible";
@@ -17,7 +18,6 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
17
18
  export { OrderStatus } from "./common/OrderStatus";
18
19
  export { OrderToken } from "./common/OrderToken";
19
20
  export { OrderTokenAmount } from "./common/OrderTokenAmount";
20
- export { PaySection } from "./common/PaySection";
21
21
  export { RecipientSelection } from "./common/RecipientSelection";
22
22
  export { StepProgress } from "./common/StepProgress";
23
23
  export { TokenBalance } from "./common/TokenBalance";
@@ -5,12 +5,13 @@ export { AnySpendBuySpin } from "./AnySpendBuySpin.js";
5
5
  export { AnySpendCustom } from "./AnySpendCustom.js";
6
6
  export * from "./AnySpendFingerprintWrapper.js";
7
7
  export { AnySpendNFT } from "./AnySpendNFT.js";
8
- export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
9
8
  export { AnySpendStakeB3 } from "./AnySpendStakeB3.js";
10
9
  export { AnySpendTournament } from "./AnySpendTournament.js";
10
+ export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
11
11
  export { AnySpendNFTButton } from "./common/AnySpendNFTButton.js";
12
12
  // Common Components
13
13
  export { ChainTokenIcon } from "./common/ChainTokenIcon.js";
14
+ export { CryptoPaySection } from "./common/CryptoPaySection.js";
14
15
  export { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
15
16
  export { OrderDetails } from "./common/OrderDetails.js";
16
17
  export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible.js";
@@ -19,7 +20,6 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem.js";
19
20
  export { OrderStatus } from "./common/OrderStatus.js";
20
21
  export { OrderToken } from "./common/OrderToken.js";
21
22
  export { OrderTokenAmount } from "./common/OrderTokenAmount.js";
22
- export { PaySection } from "./common/PaySection.js";
23
23
  export { RecipientSelection } from "./common/RecipientSelection.js";
24
24
  export { StepProgress } from "./common/StepProgress.js";
25
25
  export { TokenBalance } from "./common/TokenBalance.js";