@b3dotfun/sdk 0.0.34 → 0.0.35-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 (79) 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/cjs/global-account/react/components/B3DynamicModal.js +1 -1
  15. package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.js +6 -3
  16. package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3.js +3 -3
  17. package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +13 -1
  18. package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Privy.js +3 -1
  19. package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStep.js +4 -1
  20. package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +3 -0
  21. package/dist/cjs/global-account/react/hooks/useAuthentication.d.ts +1 -0
  22. package/dist/cjs/global-account/react/hooks/useAuthentication.js +20 -0
  23. package/dist/cjs/global-account/react/stores/useAuthStore.d.ts +4 -0
  24. package/dist/cjs/global-account/react/stores/useAuthStore.js +4 -0
  25. package/dist/cjs/global-account/react/stores/useModalStore.d.ts +2 -0
  26. package/dist/esm/anyspend/react/components/AnySpend.js +5 -3
  27. package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +2 -2
  28. package/dist/esm/anyspend/react/components/common/ConnectWalletPayment.d.ts +3 -1
  29. package/dist/esm/anyspend/react/components/common/ConnectWalletPayment.js +5 -2
  30. package/dist/esm/anyspend/react/components/common/CryptoPaySection.d.ts +16 -0
  31. package/dist/esm/anyspend/react/components/common/CryptoPaySection.js +55 -0
  32. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.d.ts +1 -0
  33. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +22 -15
  34. package/dist/esm/anyspend/react/components/common/OrderDetails.js +12 -4
  35. package/dist/esm/anyspend/react/components/common/PaySection.d.ts +2 -6
  36. package/dist/esm/anyspend/react/components/common/PaySection.js +10 -15
  37. package/dist/esm/anyspend/react/components/index.d.ts +2 -2
  38. package/dist/esm/anyspend/react/components/index.js +2 -2
  39. package/dist/esm/global-account/react/components/B3DynamicModal.js +1 -1
  40. package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js +6 -3
  41. package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3.js +3 -3
  42. package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +13 -1
  43. package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Privy.js +3 -1
  44. package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.js +4 -1
  45. package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +3 -0
  46. package/dist/esm/global-account/react/hooks/useAuthentication.d.ts +1 -0
  47. package/dist/esm/global-account/react/hooks/useAuthentication.js +21 -1
  48. package/dist/esm/global-account/react/stores/useAuthStore.d.ts +4 -0
  49. package/dist/esm/global-account/react/stores/useAuthStore.js +4 -0
  50. package/dist/esm/global-account/react/stores/useModalStore.d.ts +2 -0
  51. package/dist/styles/index.css +1 -1
  52. package/dist/types/anyspend/react/components/common/ConnectWalletPayment.d.ts +3 -1
  53. package/dist/types/anyspend/react/components/common/CryptoPaySection.d.ts +16 -0
  54. package/dist/types/anyspend/react/components/common/CryptoPaymentMethod.d.ts +1 -0
  55. package/dist/types/anyspend/react/components/common/PaySection.d.ts +2 -6
  56. package/dist/types/anyspend/react/components/index.d.ts +2 -2
  57. package/dist/types/global-account/react/hooks/useAuthentication.d.ts +1 -0
  58. package/dist/types/global-account/react/stores/useAuthStore.d.ts +4 -0
  59. package/dist/types/global-account/react/stores/useModalStore.d.ts +2 -0
  60. package/package.json +1 -1
  61. package/src/anyspend/react/components/AnySpend.tsx +7 -6
  62. package/src/anyspend/react/components/AnyspendDepositHype.tsx +2 -5
  63. package/src/anyspend/react/components/common/ConnectWalletPayment.tsx +6 -1
  64. package/src/anyspend/react/components/common/CryptoPaySection.tsx +153 -0
  65. package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +80 -43
  66. package/src/anyspend/react/components/common/OrderDetails.tsx +13 -4
  67. package/src/anyspend/react/components/common/PaySection.tsx +64 -140
  68. package/src/anyspend/react/components/index.ts +2 -2
  69. package/src/global-account/react/components/B3DynamicModal.tsx +1 -6
  70. package/src/global-account/react/components/ManageAccount/ManageAccount.tsx +92 -82
  71. package/src/global-account/react/components/SignInWithB3/SignInWithB3.tsx +3 -3
  72. package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx +13 -1
  73. package/src/global-account/react/components/SignInWithB3/SignInWithB3Privy.tsx +3 -1
  74. package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx +5 -2
  75. package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx +3 -0
  76. package/src/global-account/react/hooks/useAuthentication.ts +24 -1
  77. package/src/global-account/react/stores/useAuthStore.ts +8 -0
  78. package/src/global-account/react/stores/useModalStore.ts +2 -0
  79. package/src/styles/index.css +5 -2
@@ -21,6 +21,7 @@ const viem_1 = require("viem");
21
21
  const chains_1 = require("viem/chains");
22
22
  const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
23
23
  const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
24
+ const CryptoPaySection_1 = require("./common/CryptoPaySection");
24
25
  const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
25
26
  const ErrorSection_1 = require("./common/ErrorSection");
26
27
  const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
@@ -29,7 +30,6 @@ const OrderHistory_1 = require("./common/OrderHistory");
29
30
  const OrderStatus_1 = require("./common/OrderStatus");
30
31
  const PanelOnramp_1 = require("./common/PanelOnramp");
31
32
  const PanelOnrampPayment_1 = require("./common/PanelOnrampPayment");
32
- const PaySection_1 = require("./common/PaySection");
33
33
  const RecipientSelection_1 = require("./common/RecipientSelection");
34
34
  const TabSection_1 = require("./common/TabSection");
35
35
  var PanelView;
@@ -451,7 +451,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
451
451
  return { text: "Choose payment method", disable: false, error: false };
452
452
  }
453
453
  // If payment method selected, show appropriate action
454
- if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET) {
454
+ if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
455
+ selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
455
456
  return { text: "Swap", disable: false, error: false };
456
457
  }
457
458
  if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
@@ -508,6 +509,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
508
509
  }
509
510
  // If payment method is selected, create order with payment method info
510
511
  if (selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
512
+ selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ||
511
513
  selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO) {
512
514
  console.log("Creating crypto order with payment method:", selectedCryptoPaymentMethod);
513
515
  await handleCryptoSwap(selectedCryptoPaymentMethod);
@@ -662,7 +664,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
662
664
  setActivePanel(PanelView.MAIN);
663
665
  setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
664
666
  } })] })) }) }));
665
- 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)(PaySection_1.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 })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
667
+ const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
666
668
  if (activeTab === "fiat" || isBuyMode) {
667
669
  return;
668
670
  }
@@ -16,13 +16,13 @@ const sonner_1 = require("sonner");
16
16
  const chains_1 = require("viem/chains");
17
17
  const useAnyspendFlow_1 = require("../hooks/useAnyspendFlow");
18
18
  const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
19
+ const CryptoPaySection_1 = require("./common/CryptoPaySection");
19
20
  const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
20
21
  const CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
21
22
  const ErrorSection_1 = require("./common/ErrorSection");
22
23
  const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
23
24
  const OrderDetails_1 = require("./common/OrderDetails");
24
25
  const OrderStatus_1 = require("./common/OrderStatus");
25
- const PaySection_1 = require("./common/PaySection");
26
26
  const RecipientSelection_1 = require("./common/RecipientSelection");
27
27
  const lucide_react_1 = require("lucide-react");
28
28
  const PanelOnramp_1 = require("./common/PanelOnramp");
@@ -119,7 +119,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
119
119
  await handleFiatOrder();
120
120
  }
121
121
  };
122
- const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(PaySection_1.PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
122
+ const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
123
123
  setIsSrcInputDirty(false);
124
124
  setSrcAmount(value);
125
125
  }, anyspendQuote: anyspendQuote }))] }) }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
@@ -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 {};
@@ -13,8 +13,9 @@ const number_1 = require("../../../../shared/utils/number");
13
13
  const framer_motion_1 = require("framer-motion");
14
14
  const lucide_react_1 = require("lucide-react");
15
15
  const wagmi_1 = require("wagmi");
16
+ const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
16
17
  const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
17
- function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, }) {
18
+ function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, cryptoPaymentMethod, }) {
18
19
  const profile = (0, react_1.useProfile)({ address: order.recipientAddress });
19
20
  const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
20
21
  const { address: connectedAddress } = (0, wagmi_1.useAccount)();
@@ -32,7 +33,9 @@ function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecut
32
33
  }
33
34
  return ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col items-center gap-6", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.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: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
34
35
  ? "Pay from Phantom Wallet"
35
- : "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsxs)("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
36
+ : cryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET
37
+ ? "Pay from Global Account"
38
+ : "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsxs)("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
36
39
  ? (0, centerTruncate_1.default)(phantomWalletAddress, 6)
37
40
  : (0, centerTruncate_1.default)(connectedAddress || "")] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
38
41
  }
@@ -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,58 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.CryptoPaySection = CryptoPaySection;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("../../../../global-account/react");
6
+ const utils_1 = require("../../../../shared/utils");
7
+ const formatAddress_1 = require("../../../../shared/utils/formatAddress");
8
+ const number_1 = require("../../../../shared/utils/number");
9
+ const lucide_react_1 = require("lucide-react");
10
+ const react_2 = require("motion/react");
11
+ const react_3 = require("react");
12
+ const wagmi_1 = require("wagmi");
13
+ const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
14
+ const OrderTokenAmount_1 = require("./OrderTokenAmount");
15
+ const TokenBalance_1 = require("./TokenBalance");
16
+ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }) {
17
+ const { address: connectedAddress, isConnected } = (0, wagmi_1.useAccount)();
18
+ const { data: profileData } = (0, react_1.useProfile)({ address: connectedAddress });
19
+ const connectedName = profileData?.displayName;
20
+ const { address: globalAddress } = (0, react_1.useAccountWallet)();
21
+ const { data: srcTokenMetadata } = (0, react_1.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
22
+ // Determine which address to use based on payment method
23
+ const walletAddress = selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? globalAddress : connectedAddress;
24
+ // Add ref to track if we've applied metadata
25
+ const appliedSrcMetadataRef = (0, react_3.useRef)(false);
26
+ // Update source token with metadata
27
+ (0, react_3.useEffect)(() => {
28
+ if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
29
+ // Mark as applied
30
+ appliedSrcMetadataRef.current = true;
31
+ const enhancedToken = {
32
+ ...selectedSrcToken,
33
+ decimals: srcTokenMetadata.decimals || selectedSrcToken.decimals,
34
+ symbol: srcTokenMetadata.symbol || selectedSrcToken.symbol,
35
+ name: srcTokenMetadata.name || selectedSrcToken.name,
36
+ metadata: {
37
+ ...selectedSrcToken.metadata,
38
+ logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
39
+ },
40
+ };
41
+ setSelectedSrcToken(enhancedToken);
42
+ }
43
+ }, [srcTokenMetadata, selectedSrcToken, setSelectedSrcToken]);
44
+ // Reset source token ref when address/chain changes
45
+ (0, react_3.useEffect)(() => {
46
+ appliedSrcMetadataRef.current = false;
47
+ }, [selectedSrcToken.address, selectedSrcToken.chainId]);
48
+ return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isConnected ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
49
+ setIsSrcInputDirty(true);
50
+ setSrcAmount(value);
51
+ }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {
52
+ style: "currency",
53
+ fallback: "",
54
+ }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: walletAddress, onChangeInput: value => {
55
+ setIsSrcInputDirty(true);
56
+ setSrcAmount(value);
57
+ } })] })] }));
58
+ }
@@ -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 {
@@ -17,10 +17,11 @@ var CryptoPaymentMethodType;
17
17
  (function (CryptoPaymentMethodType) {
18
18
  CryptoPaymentMethodType["NONE"] = "none";
19
19
  CryptoPaymentMethodType["CONNECT_WALLET"] = "connect_wallet";
20
+ CryptoPaymentMethodType["GLOBAL_WALLET"] = "global_wallet";
20
21
  CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
21
22
  })(CryptoPaymentMethodType || (exports.CryptoPaymentMethodType = CryptoPaymentMethodType = {}));
22
23
  function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
23
- const { wallet: globalWallet } = (0, react_1.useAccountWallet)();
24
+ const { wallet: globalWallet, address: globalAddress } = (0, react_1.useAccountWallet)();
24
25
  const { address, isConnected, connector } = (0, wagmi_1.useAccount)();
25
26
  const { connect, connectors, isPending } = (0, wagmi_1.useConnect)();
26
27
  const { disconnect } = (0, wagmi_1.useDisconnect)();
@@ -126,20 +127,26 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
126
127
  }, 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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
127
128
  setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
128
129
  onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
129
- }, 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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ZapIcon, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), isConnected && ((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.jsx)("div", { className: "space-y-2", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => {
130
- setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
131
- onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
132
- sonner_1.toast.success(`Selected ${connector?.name || "wallet"}`);
133
- }, className: (0, cn_1.cn)("crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
134
- ? "connected-wallet border-as-brand bg-as-brand/5"
135
- : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Wallet", className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
136
- e.stopPropagation();
137
- disconnect();
138
- sonner_1.toast.success("Wallet disconnected");
139
- if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
140
- setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
141
- }
142
- }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) }) })] }))] })] }), showWalletModal &&
130
+ }, 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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ZapIcon, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), (isConnected || 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: [isConnected && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
131
+ setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
132
+ onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
133
+ sonner_1.toast.success(`Selected ${connector?.name || "wallet"}`);
134
+ }, className: (0, cn_1.cn)("crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
135
+ ? "connected-wallet border-as-brand bg-as-brand/5"
136
+ : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
137
+ e.stopPropagation();
138
+ disconnect();
139
+ sonner_1.toast.success("Wallet disconnected");
140
+ if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
141
+ setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
142
+ }
143
+ }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), globalAddress && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
144
+ setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
145
+ onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
146
+ sonner_1.toast.success("Selected B3 Account");
147
+ }, className: (0, cn_1.cn)("crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
148
+ ? "connected-wallet border-as-brand bg-as-brand/5"
149
+ : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Global Account", className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-purple-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Global Account" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress || "") })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] }))] })] }), showWalletModal &&
143
150
  (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: "wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: walletOptions.map(walletOption => {
144
151
  const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
145
152
  return ((0, jsx_runtime_1.jsx)("button", { onClick: async () => {
@@ -154,7 +154,7 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
154
154
  const [txHash, setTxHash] = (0, react_4.useState)();
155
155
  const [showQRCode, setShowQRCode] = (0, react_4.useState)(false);
156
156
  const { isLoading: txLoading, isSuccess: txSuccess } = (0, wagmi_1.useWaitForTransactionReceipt)({ hash: txHash });
157
- const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
157
+ const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
158
158
  const roundedUpSrcAmount = (0, react_4.useMemo)(() => {
159
159
  // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
160
160
  // Use 21 significant digits (max allowed by Intl.NumberFormat)
@@ -198,11 +198,18 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
198
198
  to = order.srcTokenAddress;
199
199
  value = BigInt(0);
200
200
  }
201
- const txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
201
+ // Use appropriate execution method based on payment method
202
+ let txHash;
203
+ if (effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET) {
204
+ txHash = await switchChainAndExecute(order.srcChain, { to, data: txData, value });
205
+ }
206
+ else {
207
+ txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
208
+ }
202
209
  if (txHash) {
203
210
  setTxHash(txHash);
204
211
  }
205
- }, [order, switchChainAndExecuteWithEOA, depositDeficit]);
212
+ }, [order, switchChainAndExecuteWithEOA, switchChainAndExecute, depositDeficit, effectiveCryptoPaymentMethod]);
206
213
  // Main payment handler that triggers chain switch and payment
207
214
  const handlePayment = async () => {
208
215
  console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
@@ -481,7 +488,8 @@ exports.OrderDetails = (0, react_4.memo)(function OrderDetails({ mode = "modal",
481
488
  ? `Waiting for payment`
482
489
  : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) }), !depositEnoughAmount && order.status !== "expired" && ((0, jsx_runtime_1.jsx)(InsufficientDepositPayment_1.InsufficientDepositPayment, { order: order, srcToken: srcToken, depositDeficit: depositDeficit, phantomWalletAddress: phantomWalletAddress, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, onPayment: handlePayment }))] }));
483
490
  }
484
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusDisplay === "processing" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: order.onrampMetadata ? ((0, jsx_runtime_1.jsx)(PaymentVendorUI_1.default, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsx)(ConnectWalletPayment_1.default, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
491
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusDisplay === "processing" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: order.onrampMetadata ? ((0, jsx_runtime_1.jsx)(PaymentVendorUI_1.default, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ||
492
+ effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsx)(ConnectWalletPayment_1.default, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft, cryptoPaymentMethod: effectiveCryptoPaymentMethod })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
485
493
  // Transfer Crypto Payment Method - Show new card-based UI
486
494
  (0, jsx_runtime_1.jsx)(TransferCryptoDetails_1.TransferCryptoDetails, { order: order, recipientName: recipientName, srcToken: srcToken, dstToken: dstToken, tournament: tournament, nft: nft, onBack: handleBack })) : ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50", children: "Please send" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [(0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount, onCopy: () => {
487
495
  sonner_1.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,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PaySection = PaySection;
3
+ exports.CryptoPaySection = CryptoPaySection;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("../../../../global-account/react");
6
6
  const utils_1 = require("../../../../shared/utils");
@@ -11,10 +11,9 @@ const react_2 = require("motion/react");
11
11
  const react_3 = require("react");
12
12
  const wagmi_1 = require("wagmi");
13
13
  const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
14
- const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
15
14
  const OrderTokenAmount_1 = require("./OrderTokenAmount");
16
15
  const TokenBalance_1 = require("./TokenBalance");
17
- function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }) {
16
+ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }) {
18
17
  const { address: connectedAddress, isConnected } = (0, wagmi_1.useAccount)();
19
18
  const { data: profileData } = (0, react_1.useProfile)({ address: connectedAddress });
20
19
  const connectedName = profileData?.displayName;
@@ -43,18 +42,14 @@ function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, se
43
42
  (0, react_3.useEffect)(() => {
44
43
  appliedSrcMetadataRef.current = false;
45
44
  }, [selectedSrcToken.address, selectedSrcToken.chainId]);
46
- return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isConnected ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (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" })] })) }))] }), paymentType === "crypto" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
45
+ return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isConnected ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
46
+ setIsSrcInputDirty(true);
47
+ setSrcAmount(value);
48
+ }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {
49
+ style: "currency",
50
+ fallback: "",
51
+ }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: connectedAddress, onChangeInput: value => {
47
52
  setIsSrcInputDirty(true);
48
53
  setSrcAmount(value);
49
- }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {
50
- style: "currency",
51
- fallback: "",
52
- }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: connectedAddress, onChangeInput: value => {
53
- setIsSrcInputDirty(true);
54
- setSrcAmount(value);
55
- } })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_1.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: {
56
- width: `${Math.max(50, srcAmount.length * 34)}px`,
57
- } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => 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
58
- ? "border-as-border-secondary bg-as-surface-secondary"
59
- : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) })] }))] }));
54
+ } })] })] }));
60
55
  }
@@ -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";
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.PaySection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.CryptoReceiveSection = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
17
+ exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.CryptoReceiveSection = exports.CryptoPaySection = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnyspendSignatureMint = exports.AnySpendTournament = exports.AnySpendStakeB3 = exports.AnySpendNFT = exports.AnySpendCustom = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
18
18
  // Components
19
19
  var AnySpend_1 = require("./AnySpend");
20
20
  Object.defineProperty(exports, "AnySpend", { enumerable: true, get: function () { return AnySpend_1.AnySpend; } });
@@ -27,17 +27,19 @@ Object.defineProperty(exports, "AnySpendCustom", { enumerable: true, get: functi
27
27
  __exportStar(require("./AnySpendFingerprintWrapper"), exports);
28
28
  var AnySpendNFT_1 = require("./AnySpendNFT");
29
29
  Object.defineProperty(exports, "AnySpendNFT", { enumerable: true, get: function () { return AnySpendNFT_1.AnySpendNFT; } });
30
- var AnyspendSignatureMint_1 = require("./AnyspendSignatureMint");
31
- Object.defineProperty(exports, "AnyspendSignatureMint", { enumerable: true, get: function () { return AnyspendSignatureMint_1.AnyspendSignatureMint; } });
32
30
  var AnySpendStakeB3_1 = require("./AnySpendStakeB3");
33
31
  Object.defineProperty(exports, "AnySpendStakeB3", { enumerable: true, get: function () { return AnySpendStakeB3_1.AnySpendStakeB3; } });
34
32
  var AnySpendTournament_1 = require("./AnySpendTournament");
35
33
  Object.defineProperty(exports, "AnySpendTournament", { enumerable: true, get: function () { return AnySpendTournament_1.AnySpendTournament; } });
34
+ var AnyspendSignatureMint_1 = require("./AnyspendSignatureMint");
35
+ Object.defineProperty(exports, "AnyspendSignatureMint", { enumerable: true, get: function () { return AnyspendSignatureMint_1.AnyspendSignatureMint; } });
36
36
  var AnySpendNFTButton_1 = require("./common/AnySpendNFTButton");
37
37
  Object.defineProperty(exports, "AnySpendNFTButton", { enumerable: true, get: function () { return AnySpendNFTButton_1.AnySpendNFTButton; } });
38
38
  // Common Components
39
39
  var ChainTokenIcon_1 = require("./common/ChainTokenIcon");
40
40
  Object.defineProperty(exports, "ChainTokenIcon", { enumerable: true, get: function () { return ChainTokenIcon_1.ChainTokenIcon; } });
41
+ var CryptoPaySection_1 = require("./common/CryptoPaySection");
42
+ Object.defineProperty(exports, "CryptoPaySection", { enumerable: true, get: function () { return CryptoPaySection_1.CryptoPaySection; } });
41
43
  var CryptoReceiveSection_1 = require("./common/CryptoReceiveSection");
42
44
  Object.defineProperty(exports, "CryptoReceiveSection", { enumerable: true, get: function () { return CryptoReceiveSection_1.CryptoReceiveSection; } });
43
45
  var OrderDetails_1 = require("./common/OrderDetails");
@@ -54,8 +56,6 @@ var OrderToken_1 = require("./common/OrderToken");
54
56
  Object.defineProperty(exports, "OrderToken", { enumerable: true, get: function () { return OrderToken_1.OrderToken; } });
55
57
  var OrderTokenAmount_1 = require("./common/OrderTokenAmount");
56
58
  Object.defineProperty(exports, "OrderTokenAmount", { enumerable: true, get: function () { return OrderTokenAmount_1.OrderTokenAmount; } });
57
- var PaySection_1 = require("./common/PaySection");
58
- Object.defineProperty(exports, "PaySection", { enumerable: true, get: function () { return PaySection_1.PaySection; } });
59
59
  var RecipientSelection_1 = require("./common/RecipientSelection");
60
60
  Object.defineProperty(exports, "RecipientSelection", { enumerable: true, get: function () { return RecipientSelection_1.RecipientSelection; } });
61
61
  var StepProgress_1 = require("./common/StepProgress");
@@ -92,5 +92,5 @@ function B3DynamicModal() {
92
92
  const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
93
93
  const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
94
94
  const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
95
- return ((0, jsx_runtime_1.jsx)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: (0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", "mx-auto w-full max-w-md", "sm:max-w-lg sm:rounded-b-none"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", contentType?.type === "manageAccount" && "h-[90dvh]"), children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
95
+ return ((0, jsx_runtime_1.jsx)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: (0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", "mx-auto w-full max-w-md", "sm:max-w-lg sm:rounded-b-none"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
96
96
  }