@b3dotfun/sdk 0.0.64 → 0.0.65-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/dist/cjs/anyspend/react/components/AnySpend.js +37 -23
  2. package/dist/cjs/anyspend/react/components/AnySpendCustom.js +22 -9
  3. package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.js +7 -11
  4. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +1 -5
  5. package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +0 -4
  6. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +5 -1
  7. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +15 -9
  8. package/dist/cjs/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts +7 -5
  9. package/dist/cjs/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.js +13 -9
  10. package/dist/cjs/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts +42 -0
  11. package/dist/cjs/anyspend/react/hooks/useCryptoPaymentMethodState.js +51 -0
  12. package/dist/cjs/anyspend/utils/index.d.ts +0 -1
  13. package/dist/cjs/anyspend/utils/index.js +0 -1
  14. package/dist/cjs/global-account/react/components/B3DynamicModal.js +4 -7
  15. package/dist/cjs/global-account/react/hooks/useAuthentication.js +0 -11
  16. package/dist/cjs/global-account/react/hooks/useGlobalAccount.d.ts +1 -0
  17. package/dist/cjs/global-account/react/hooks/useGlobalAccount.js +3 -0
  18. package/dist/esm/anyspend/react/components/AnySpend.js +37 -23
  19. package/dist/esm/anyspend/react/components/AnySpendCustom.js +22 -9
  20. package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.js +8 -12
  21. package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +2 -6
  22. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +1 -5
  23. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +5 -1
  24. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +15 -9
  25. package/dist/esm/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts +7 -5
  26. package/dist/esm/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.js +13 -9
  27. package/dist/esm/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts +42 -0
  28. package/dist/esm/anyspend/react/hooks/useCryptoPaymentMethodState.js +48 -0
  29. package/dist/esm/anyspend/utils/index.d.ts +0 -1
  30. package/dist/esm/anyspend/utils/index.js +0 -1
  31. package/dist/esm/global-account/react/components/B3DynamicModal.js +5 -8
  32. package/dist/esm/global-account/react/hooks/useAuthentication.js +0 -11
  33. package/dist/esm/global-account/react/hooks/useGlobalAccount.d.ts +1 -0
  34. package/dist/esm/global-account/react/hooks/useGlobalAccount.js +3 -0
  35. package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +5 -1
  36. package/dist/types/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.d.ts +7 -5
  37. package/dist/types/anyspend/react/hooks/useCryptoPaymentMethodState.d.ts +42 -0
  38. package/dist/types/anyspend/utils/index.d.ts +0 -1
  39. package/dist/types/global-account/react/hooks/useGlobalAccount.d.ts +1 -0
  40. package/package.json +1 -1
  41. package/src/anyspend/react/components/AnySpend.tsx +49 -28
  42. package/src/anyspend/react/components/AnySpendCustom.tsx +28 -15
  43. package/src/anyspend/react/components/AnySpendCustomExactIn.tsx +9 -12
  44. package/src/anyspend/react/components/AnyspendDepositHype.tsx +2 -6
  45. package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +1 -6
  46. package/src/anyspend/react/hooks/useAnyspendFlow.ts +23 -11
  47. package/src/anyspend/react/hooks/useAutoSelectCryptoPaymentMethod.ts +20 -12
  48. package/src/anyspend/react/hooks/useCryptoPaymentMethodState.ts +71 -0
  49. package/src/anyspend/utils/index.ts +0 -1
  50. package/src/global-account/react/components/B3DynamicModal.tsx +5 -9
  51. package/src/global-account/react/hooks/useAuthentication.ts +0 -12
  52. package/src/global-account/react/hooks/useGlobalAccount.tsx +3 -1
  53. package/dist/cjs/anyspend/utils/accountStore.d.ts +0 -7
  54. package/dist/cjs/anyspend/utils/accountStore.js +0 -8
  55. package/dist/esm/anyspend/utils/accountStore.d.ts +0 -7
  56. package/dist/esm/anyspend/utils/accountStore.js +0 -5
  57. package/dist/types/anyspend/utils/accountStore.d.ts +0 -7
  58. package/src/anyspend/utils/accountStore.ts +0 -12
@@ -21,6 +21,7 @@ const viem_1 = require("viem");
21
21
  const chains_1 = require("viem/chains");
22
22
  const useAutoSelectCryptoPaymentMethod_1 = require("../hooks/useAutoSelectCryptoPaymentMethod");
23
23
  const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
24
+ const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodState");
24
25
  const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
25
26
  const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
26
27
  const CryptoPaySection_1 = require("./common/CryptoPaySection");
@@ -84,9 +85,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
84
85
  setActivePanel(targetPanel);
85
86
  }, [activePanel]);
86
87
  const [customRecipients, setCustomRecipients] = (0, react_4.useState)([]);
87
- // Add state for selected payment method
88
- const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = (0, react_4.useState)(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
89
- // Add state for selected fiat payment method
88
+ // Payment method state with dual-state system (auto + explicit user selection)
89
+ const { cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods, } = (0, useCryptoPaymentMethodState_1.useCryptoPaymentMethodState)();
90
90
  const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
91
91
  // const [newRecipientAddress, setNewRecipientAddress] = useState("");
92
92
  // const recipientInputRef = useRef<HTMLInputElement>(null);
@@ -338,8 +338,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
338
338
  // Auto-select crypto payment method based on available wallets and balance
339
339
  (0, useAutoSelectCryptoPaymentMethod_1.useAutoSelectCryptoPaymentMethod)({
340
340
  paymentType: activeTab,
341
+ cryptoPaymentMethod,
342
+ setCryptoPaymentMethod,
341
343
  selectedCryptoPaymentMethod,
342
- setSelectedCryptoPaymentMethod,
343
344
  hasEnoughBalance,
344
345
  isBalanceLoading,
345
346
  });
@@ -460,9 +461,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
460
461
  // Add orderId and payment method to URL for persistence
461
462
  const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
462
463
  params.set("orderId", orderId);
463
- if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
464
- console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
465
- params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
464
+ if (effectiveCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
465
+ console.log("Setting cryptoPaymentMethod in URL:", effectiveCryptoPaymentMethod);
466
+ params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
466
467
  }
467
468
  else {
468
469
  console.log("Payment method is NONE, not setting in URL");
@@ -524,18 +525,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
524
525
  if (activeTab === "crypto") {
525
526
  // For crypto: check payment method first, then recipient
526
527
  // If no payment method selected, show "Choose payment method"
527
- if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
528
+ if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
528
529
  return { text: "Choose payment method", disable: false, error: false, loading: false };
529
530
  }
530
531
  // Check recipient after payment method
531
532
  if (!recipientAddress)
532
533
  return { text: "Select recipient", disable: false, error: false, loading: false };
533
534
  // If payment method selected, show appropriate action
534
- if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
535
- selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
535
+ if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
536
+ effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
536
537
  return { text: "Swap", disable: false, error: false, loading: false };
537
538
  }
538
- if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
539
+ if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
539
540
  return { text: "Continue to payment", disable: false, error: false, loading: false };
540
541
  }
541
542
  }
@@ -549,7 +550,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
549
550
  isCreatingOnrampOrder,
550
551
  anyspendQuote,
551
552
  activeTab,
552
- selectedCryptoPaymentMethod,
553
+ effectiveCryptoPaymentMethod,
553
554
  selectedFiatPaymentMethod,
554
555
  ]);
555
556
  // Handle main button click
@@ -577,7 +578,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
577
578
  if (activeTab === "crypto") {
578
579
  // For crypto: check payment method first, then recipient
579
580
  // If no payment method selected, show payment method selection
580
- if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
581
+ if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
581
582
  console.log("No payment method selected, showing selection panel");
582
583
  navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward");
583
584
  return;
@@ -589,11 +590,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
589
590
  }
590
591
  (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
591
592
  // If payment method is selected, create order with payment method info
592
- if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
593
- selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ||
594
- selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
595
- console.log("Creating crypto order with payment method:", selectedCryptoPaymentMethod);
596
- await handleCryptoSwap(selectedCryptoPaymentMethod);
593
+ if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
594
+ effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ||
595
+ effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
596
+ console.log("Creating crypto order with payment method:", effectiveCryptoPaymentMethod);
597
+ await handleCryptoSwap(effectiveCryptoPaymentMethod);
597
598
  return;
598
599
  }
599
600
  }
@@ -767,12 +768,21 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
767
768
  };
768
769
  }, [activePanel, navigateBack]);
769
770
  const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: navigateBack, onSelectOrder: onSelectOrder }) }));
770
- const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, points: oat.data.points || undefined, onBack: () => {
771
+ const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
772
+ // When user explicitly changes payment method, set it as selected
773
+ setSelectedCryptoPaymentMethod(method);
774
+ }, points: oat.data.points || undefined, onBack: () => {
771
775
  setOrderId(undefined);
772
776
  navigateBack();
773
- setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
777
+ // Reset payment methods when going back
778
+ resetPaymentMethods();
774
779
  } })) }) }));
775
- const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
780
+ const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: tab => {
781
+ setActiveTab(tab);
782
+ // Reset payment methods when switching tabs
783
+ resetPaymentMethods();
784
+ setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
785
+ }, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
776
786
  // Map panel index to navigation with direction
777
787
  const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
778
788
  if (panelsWithForwardNav.includes(panelIndex)) {
@@ -803,7 +813,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
803
813
  }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), setRecipientAddress: setRecipientAddress, recipientAddressFromProps: recipientAddressFromProps, globalAddress: globalAddress, dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
804
814
  setIsSrcInputDirty(false);
805
815
  setDstAmount(value);
806
- }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }))] }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
816
+ }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod }))] }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [(0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HistoryIcon, { className: "h-4 w-4" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
807
817
  const onrampPaymentView = ((0, jsx_runtime_1.jsx)(PanelOnrampPayment_1.PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
808
818
  setOrderId(orderId);
809
819
  navigateToPanel(PanelView.ORDER_DETAILS, "forward");
@@ -823,7 +833,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
823
833
  setRecipientAddress(address);
824
834
  navigateBack();
825
835
  } }));
826
- const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: navigateBack, onSelectPaymentMethod: (method) => {
836
+ const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: globalWallet, selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
837
+ // When user explicitly selects a payment method, save it
838
+ setSelectedCryptoPaymentMethod(method);
839
+ }, isCreatingOrder: isCreatingOrder, onBack: navigateBack, onSelectPaymentMethod: (method) => {
840
+ // When user explicitly selects a payment method, save it and go back
827
841
  setSelectedCryptoPaymentMethod(method);
828
842
  navigateBack();
829
843
  } }));
@@ -54,6 +54,7 @@ const sonner_1 = require("sonner");
54
54
  const chains_1 = require("viem/chains");
55
55
  const FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
56
56
  const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
57
+ const useCryptoPaymentMethodState_1 = require("../hooks/useCryptoPaymentMethodState");
57
58
  const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
58
59
  const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
59
60
  const FeeBreakDown_1 = require("./common/FeeBreakDown");
@@ -154,8 +155,9 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
154
155
  (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
155
156
  const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
156
157
  const [activeTab, setActiveTab] = (0, react_4.useState)(activeTabProps);
157
- // Add state for selected payment methods
158
- const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = (0, react_4.useState)(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
158
+ // Payment method state with dual-state system (auto + explicit user selection)
159
+ // Note: AnySpendCustom doesn't use auto-selection, only explicit user selection
160
+ const { setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods } = (0, useCryptoPaymentMethodState_1.useCryptoPaymentMethodState)();
159
161
  const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
160
162
  // Get current user's wallet
161
163
  const currentWallet = (0, react_2.useAccountWallet)();
@@ -404,7 +406,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
404
406
  return;
405
407
  }
406
408
  // Check payment method selection for crypto tab
407
- if (activeTab === "crypto" && selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
409
+ if (activeTab === "crypto" && effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
408
410
  setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
409
411
  return;
410
412
  }
@@ -479,9 +481,14 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
479
481
  const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
480
482
  setActivePanel(PanelView.HISTORY);
481
483
  }, onSelectOrder: onSelectOrder }) }));
482
- const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
484
+ const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
485
+ // When user explicitly changes payment method, set it as selected
486
+ setSelectedCryptoPaymentMethod(method);
487
+ }, onBack: () => {
483
488
  setOrderId(undefined);
484
489
  setActivePanel(PanelView.CONFIRM_ORDER);
490
+ // Reset payment methods when going back
491
+ resetPaymentMethods();
485
492
  // Remove orderId from URL when canceling
486
493
  const params = new URLSearchParams(searchParams.toString());
487
494
  params.delete("orderId");
@@ -501,17 +508,19 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
501
508
  // Confirm order view.
502
509
  const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsxs)(react_2.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
503
510
  setActiveTab("crypto");
504
- setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
511
+ // Reset payment methods when switching tabs
512
+ resetPaymentMethods();
505
513
  setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
506
514
  }, children: "Pay with crypto" }), isOnrampSupported ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
507
515
  setActiveTab("fiat");
508
- setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
516
+ // Reset payment methods when switching tabs
517
+ resetPaymentMethods();
509
518
  setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
510
519
  }, children: "Pay with fiat" })) : ((0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", "text-as-primary/50 cursor-not-allowed bg-transparent"), disabled: true, children: "Pay with fiat" }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
511
520
  opacity: hasMounted ? 1 : 0,
512
521
  y: hasMounted ? 0 : 20,
513
522
  filter: hasMounted ? "blur(0px)" : "blur(10px)",
514
- }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") }) })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
523
+ }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") }) })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
515
524
  opacity: hasMounted ? 1 : 0,
516
525
  y: hasMounted ? 0 : 20,
517
526
  filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -527,7 +536,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
527
536
  opacity: hasMounted ? 1 : 0,
528
537
  y: hasMounted ? 0 : 20,
529
538
  filter: hasMounted ? "blur(0px)" : "blur(10px)",
530
- }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE ? ("Choose payment method") : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
539
+ }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE ? ("Choose payment method") : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
531
540
  opacity: hasMounted ? 1 : 0,
532
541
  y: hasMounted ? 0 : 20,
533
542
  filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -554,7 +563,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
554
563
  setActivePanel(PanelView.CONFIRM_ORDER);
555
564
  } }) }));
556
565
  // Crypto payment method view
557
- const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: currentWallet?.wallet?.address, globalWallet: currentWallet?.wallet, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
566
+ const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: currentWallet?.wallet?.address, globalWallet: currentWallet?.wallet, selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
567
+ // When user explicitly selects a payment method, save it
568
+ setSelectedCryptoPaymentMethod(method);
569
+ }, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
570
+ // When user explicitly selects a payment method, save it and go back
558
571
  setSelectedCryptoPaymentMethod(method);
559
572
  setActivePanel(PanelView.CONFIRM_ORDER);
560
573
  } }) }));
@@ -14,7 +14,6 @@ const react_2 = require("motion/react");
14
14
  const react_3 = require("react");
15
15
  const sonner_1 = require("sonner");
16
16
  const react_4 = require("thirdweb/react");
17
- const utils_2 = require("../../utils");
18
17
  const useAnyspendFlow_1 = require("../hooks/useAnyspendFlow");
19
18
  const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
20
19
  const CryptoPaySection_1 = require("./common/CryptoPaySection");
@@ -37,7 +36,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
37
36
  SYMBOL: destinationToken.symbol ?? "TOKEN",
38
37
  LOGO_URI: destinationToken.metadata?.logoURI ?? "",
39
38
  };
40
- const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
39
+ const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, selectedDstToken, selectedDstChainId, srcAmount, setSrcAmount, dstAmount, isSrcInputDirty, setIsSrcInputDirty, selectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, hasEnoughBalance, isBalanceLoading, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
41
40
  paymentType,
42
41
  recipientAddress,
43
42
  loadOrder,
@@ -53,18 +52,15 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
53
52
  });
54
53
  const { connectedEOAWallet } = (0, react_1.useAccountWallet)();
55
54
  const setActiveWallet = (0, react_4.useSetActiveWallet)();
56
- const activeWallet = (0, react_4.useActiveWallet)();
57
- const setGlobalAccountWallet = (0, utils_2.useGlobalWalletState)(state => state.setGlobalAccountWallet);
58
55
  const appliedPreferEoa = (0, react_3.useRef)(false);
59
56
  (0, react_3.useEffect)(() => {
60
57
  if (preferEoa && !appliedPreferEoa.current) {
61
58
  if (connectedEOAWallet) {
62
59
  appliedPreferEoa.current = true;
63
- setGlobalAccountWallet(activeWallet);
64
60
  setActiveWallet(connectedEOAWallet);
65
61
  }
66
62
  }
67
- }, [preferEoa, connectedEOAWallet, setActiveWallet, activeWallet, setGlobalAccountWallet]);
63
+ }, [preferEoa, connectedEOAWallet, setActiveWallet]);
68
64
  const selectedRecipientOrDefault = selectedRecipientAddress ?? recipientAddress;
69
65
  const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
70
66
  const buildCustomPayload = (_recipient) => {
@@ -93,12 +89,12 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
93
89
  if (!anyspendQuote || !anyspendQuote.success)
94
90
  return { text: "Get quote error", disable: true, error: true, loading: false };
95
91
  if (paymentType === "crypto") {
96
- if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
92
+ if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
97
93
  return { text: "Choose payment method", disable: false, error: false, loading: false };
98
94
  }
99
95
  if (!hasEnoughBalance &&
100
96
  !isBalanceLoading &&
101
- selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
97
+ effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
102
98
  return { text: "Insufficient balance", disable: true, error: true, loading: false };
103
99
  }
104
100
  return { text: `Execute ${actionLabel}`, disable: false, error: false, loading: false };
@@ -118,7 +114,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
118
114
  selectedRecipientOrDefault,
119
115
  anyspendQuote,
120
116
  paymentType,
121
- selectedCryptoPaymentMethod,
117
+ effectiveCryptoPaymentMethod,
122
118
  selectedFiatPaymentMethod,
123
119
  hasEnoughBalance,
124
120
  isBalanceLoading,
@@ -147,7 +143,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
147
143
  }
148
144
  };
149
145
  const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
150
- const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
146
+ const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
151
147
  setIsSrcInputDirty(false);
152
148
  setSrcAmount(value);
153
149
  }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.FEE_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
@@ -227,7 +223,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
227
223
  sonner_1.toast.error("Failed to create order: " + err.message);
228
224
  }
229
225
  };
230
- const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
226
+ const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
231
227
  setOrderId(undefined);
232
228
  setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
233
229
  }, disableUrlParamManagement: true, points: oat.data.points || undefined })) }) }));
@@ -26,7 +26,6 @@ const OrderDetails_1 = require("./common/OrderDetails");
26
26
  const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
27
27
  const RecipientSelection_1 = require("./common/RecipientSelection");
28
28
  const lucide_react_1 = require("lucide-react");
29
- const utils_1 = require("../../utils");
30
29
  const PanelOnramp_1 = require("./common/PanelOnramp");
31
30
  const SLIPPAGE_PERCENT = 3;
32
31
  exports.HYPE_TOKEN_DETAILS = {
@@ -52,18 +51,15 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
52
51
  });
53
52
  const { connectedEOAWallet: connectedEOAWallet } = (0, react_1.useAccountWallet)();
54
53
  const setActiveWallet = (0, react_4.useSetActiveWallet)();
55
- const activeWallet = (0, react_4.useActiveWallet)();
56
- const setGlobalAccountWallet = (0, utils_1.useGlobalWalletState)(state => state.setGlobalAccountWallet);
57
54
  const appliedPreferEoa = (0, react_3.useRef)(false);
58
55
  (0, react_3.useEffect)(() => {
59
56
  if (preferEoa && !appliedPreferEoa.current) {
60
57
  if (connectedEOAWallet) {
61
58
  appliedPreferEoa.current = true;
62
- setGlobalAccountWallet(activeWallet);
63
59
  setActiveWallet(connectedEOAWallet);
64
60
  }
65
61
  }
66
- }, [preferEoa, connectedEOAWallet, setActiveWallet, activeWallet, setGlobalAccountWallet]);
62
+ }, [preferEoa, connectedEOAWallet, setActiveWallet]);
67
63
  // Button state logic
68
64
  const btnInfo = (0, react_3.useMemo)(() => {
69
65
  if (activeInputAmountInWei === "0")
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
4
4
  exports.CryptoPaymentMethodType = void 0;
5
5
  exports.CryptoPaymentMethod = CryptoPaymentMethod;
6
6
  const jsx_runtime_1 = require("react/jsx-runtime");
7
- const utils_1 = require("../../../../anyspend/utils");
8
7
  const react_1 = require("../../../../global-account/react");
9
8
  const cn_1 = require("../../../../shared/utils/cn");
10
9
  const formatAddress_1 = require("../../../../shared/utils/formatAddress");
@@ -34,8 +33,6 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
34
33
  const [showWalletModal, setShowWalletModal] = (0, react_3.useState)(false);
35
34
  const setActiveWallet = (0, react_4.useSetActiveWallet)();
36
35
  const { data: eoaWalletInfo } = (0, react_4.useWalletInfo)(connectedEOAWallet?.id);
37
- const activeWallet = (0, react_4.useActiveWallet)();
38
- const setGlobalAccountWallet = (0, utils_1.useGlobalWalletState)(state => state.setGlobalAccountWallet);
39
36
  const isConnected = !!connectedEOAWallet;
40
37
  const globalAddress = connectedSmartWallet?.getAccount()?.address;
41
38
  // Use custom hook to determine wallet display logic
@@ -166,7 +163,6 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
166
163
  return ((0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "installed-wallets", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [shouldShowConnectedEOA && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
167
164
  setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
168
165
  onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
169
- setGlobalAccountWallet(activeWallet);
170
166
  if (connectedEOAWallet) {
171
167
  setActiveWallet(connectedEOAWallet);
172
168
  }
@@ -93,8 +93,12 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
93
93
  setDstAmount: import("react").Dispatch<import("react").SetStateAction<string>>;
94
94
  isSrcInputDirty: boolean;
95
95
  setIsSrcInputDirty: import("react").Dispatch<import("react").SetStateAction<boolean>>;
96
+ cryptoPaymentMethod: CryptoPaymentMethodType;
97
+ setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
96
98
  selectedCryptoPaymentMethod: CryptoPaymentMethodType;
97
- setSelectedCryptoPaymentMethod: import("react").Dispatch<import("react").SetStateAction<CryptoPaymentMethodType>>;
99
+ setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
100
+ effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
101
+ resetPaymentMethods: () => void;
98
102
  selectedFiatPaymentMethod: FiatPaymentMethod;
99
103
  setSelectedFiatPaymentMethod: import("react").Dispatch<import("react").SetStateAction<FiatPaymentMethod>>;
100
104
  selectedRecipientAddress: string | undefined;
@@ -11,11 +11,12 @@ const react_3 = require("react");
11
11
  const sonner_1 = require("sonner");
12
12
  const viem_1 = require("viem");
13
13
  const chains_1 = require("viem/chains");
14
- const wagmi_1 = require("wagmi");
15
14
  const CryptoPaymentMethod_1 = require("../components/common/CryptoPaymentMethod");
16
15
  const FiatPaymentMethod_1 = require("../components/common/FiatPaymentMethod");
17
16
  const useAutoSelectCryptoPaymentMethod_1 = require("./useAutoSelectCryptoPaymentMethod");
18
17
  const useAutoSetActiveWalletFromWagmi_1 = require("./useAutoSetActiveWalletFromWagmi");
18
+ const useConnectedWalletDisplay_1 = require("./useConnectedWalletDisplay");
19
+ const useCryptoPaymentMethodState_1 = require("./useCryptoPaymentMethodState");
19
20
  var PanelView;
20
21
  (function (PanelView) {
21
22
  PanelView[PanelView["MAIN"] = 0] = "MAIN";
@@ -46,12 +47,12 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
46
47
  const [isSrcInputDirty, setIsSrcInputDirty] = (0, react_3.useState)(true);
47
48
  // Derive destination chain ID from token or prop (cannot change)
48
49
  const selectedDstChainId = destinationTokenChainId || selectedDstToken.chainId;
49
- // Payment method state
50
- const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = (0, react_3.useState)(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
50
+ // Payment method state with dual-state system (auto + explicit user selection)
51
+ const { cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods, } = (0, useCryptoPaymentMethodState_1.useCryptoPaymentMethodState)();
51
52
  const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_3.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
52
53
  // Recipient state
53
54
  const { address: globalAddress } = (0, react_2.useAccountWallet)();
54
- const { address: wagmiAddress } = (0, wagmi_1.useAccount)();
55
+ const { walletAddress } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(effectiveCryptoPaymentMethod);
55
56
  const [selectedRecipientAddress, setSelectedRecipientAddress] = (0, react_3.useState)(recipientAddress);
56
57
  const recipientProfile = (0, react_2.useProfile)({ address: selectedRecipientAddress, fresh: true });
57
58
  const recipientName = recipientProfile.data?.name;
@@ -66,7 +67,7 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
66
67
  // Check token balance for crypto payments
67
68
  const { rawBalance, isLoading: isBalanceLoading } = (0, react_2.useTokenBalance)({
68
69
  token: selectedSrcToken,
69
- address: wagmiAddress,
70
+ address: walletAddress,
70
71
  });
71
72
  // Check if user has enough balance
72
73
  const hasEnoughBalance = (0, react_3.useMemo)(() => {
@@ -83,8 +84,9 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
83
84
  // Auto-select crypto payment method based on available wallets and balance
84
85
  (0, useAutoSelectCryptoPaymentMethod_1.useAutoSelectCryptoPaymentMethod)({
85
86
  paymentType,
87
+ cryptoPaymentMethod,
88
+ setCryptoPaymentMethod,
86
89
  selectedCryptoPaymentMethod,
87
- setSelectedCryptoPaymentMethod,
88
90
  hasEnoughBalance,
89
91
  isBalanceLoading,
90
92
  });
@@ -184,9 +186,9 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
184
186
  if (!disableUrlParamManagement) {
185
187
  const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
186
188
  params.set("orderId", newOrderId);
187
- if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
188
- console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
189
- params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
189
+ if (effectiveCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
190
+ console.log("Setting cryptoPaymentMethod in URL:", effectiveCryptoPaymentMethod);
191
+ params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
190
192
  }
191
193
  else {
192
194
  console.log("Payment method is NONE, not setting in URL");
@@ -250,8 +252,12 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
250
252
  isSrcInputDirty,
251
253
  setIsSrcInputDirty,
252
254
  // Payment methods
255
+ cryptoPaymentMethod,
256
+ setCryptoPaymentMethod,
253
257
  selectedCryptoPaymentMethod,
254
258
  setSelectedCryptoPaymentMethod,
259
+ effectiveCryptoPaymentMethod,
260
+ resetPaymentMethods,
255
261
  selectedFiatPaymentMethod,
256
262
  setSelectedFiatPaymentMethod,
257
263
  // Recipient
@@ -2,10 +2,12 @@ import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMetho
2
2
  interface UseAutoSelectCryptoPaymentMethodParams {
3
3
  /** Current payment type (crypto or fiat) */
4
4
  paymentType?: "crypto" | "fiat";
5
- /** Currently selected payment method */
5
+ /** Auto-selected payment method based on balance (not used in hook logic, but part of state management) */
6
+ cryptoPaymentMethod: CryptoPaymentMethodType;
7
+ /** Function to update the auto-selected payment method */
8
+ setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
9
+ /** User explicitly selected payment method (NONE means no explicit selection) */
6
10
  selectedCryptoPaymentMethod: CryptoPaymentMethodType;
7
- /** Function to update the selected payment method */
8
- setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
9
11
  /** Whether user has enough balance to pay */
10
12
  hasEnoughBalance: boolean;
11
13
  /** Whether balance is still loading */
@@ -16,11 +18,11 @@ interface UseAutoSelectCryptoPaymentMethodParams {
16
18
  * based on available wallets and balance.
17
19
  *
18
20
  * Auto-selection logic:
19
- * - Only auto-selects when payment method is NONE (doesn't override user choices)
21
+ * - Only auto-selects when selectedCryptoPaymentMethod is NONE (user hasn't explicitly chosen)
20
22
  * - If EOA/Wagmi wallet connected + has balance → CONNECT_WALLET
21
23
  * - If EOA/Wagmi wallet connected + insufficient balance → TRANSFER_CRYPTO
22
24
  * - If only Global wallet available → GLOBAL_WALLET
23
25
  * - If no wallets → remains NONE
24
26
  */
25
- export declare function useAutoSelectCryptoPaymentMethod({ paymentType, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }: UseAutoSelectCryptoPaymentMethodParams): void;
27
+ export declare function useAutoSelectCryptoPaymentMethod({ paymentType, cryptoPaymentMethod: _cryptoPaymentMethod, setCryptoPaymentMethod, selectedCryptoPaymentMethod, hasEnoughBalance, isBalanceLoading, }: UseAutoSelectCryptoPaymentMethodParams): void;
26
28
  export {};