@b3dotfun/sdk 0.0.30-alpha.0 → 0.0.30-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 (40) hide show
  1. package/dist/cjs/anyspend/react/components/AnySpend.js +1 -1
  2. package/dist/cjs/anyspend/react/components/AnySpendBuySpin.js +2 -1
  3. package/dist/cjs/anyspend/react/components/AnySpendStakeB3.js +2 -1
  4. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +1 -1
  5. package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +15 -21
  6. package/dist/cjs/anyspend/react/components/common/OrderTokenAmount.js +1 -1
  7. package/dist/cjs/anyspend/react/components/common/PanelOnramp.d.ts +2 -1
  8. package/dist/cjs/anyspend/react/components/common/PanelOnramp.js +2 -2
  9. package/dist/cjs/anyspend/react/components/common/PaySection.js +1 -1
  10. package/dist/cjs/global-account/react/hooks/useB3BalanceFromAddresses.js +2 -1
  11. package/dist/cjs/global-account/react/hooks/useNativeBalance.js +2 -1
  12. package/dist/cjs/shared/constants/index.d.ts +1 -0
  13. package/dist/cjs/shared/constants/index.js +2 -1
  14. package/dist/esm/anyspend/react/components/AnySpend.js +1 -1
  15. package/dist/esm/anyspend/react/components/AnySpendBuySpin.js +2 -1
  16. package/dist/esm/anyspend/react/components/AnySpendStakeB3.js +2 -1
  17. package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +1 -1
  18. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +16 -22
  19. package/dist/esm/anyspend/react/components/common/OrderTokenAmount.js +1 -1
  20. package/dist/esm/anyspend/react/components/common/PanelOnramp.d.ts +2 -1
  21. package/dist/esm/anyspend/react/components/common/PanelOnramp.js +2 -2
  22. package/dist/esm/anyspend/react/components/common/PaySection.js +1 -1
  23. package/dist/esm/global-account/react/hooks/useB3BalanceFromAddresses.js +2 -1
  24. package/dist/esm/global-account/react/hooks/useNativeBalance.js +2 -1
  25. package/dist/esm/shared/constants/index.d.ts +1 -0
  26. package/dist/esm/shared/constants/index.js +1 -0
  27. package/dist/types/anyspend/react/components/common/PanelOnramp.d.ts +2 -1
  28. package/dist/types/shared/constants/index.d.ts +1 -0
  29. package/package.json +1 -1
  30. package/src/anyspend/react/components/AnySpend.tsx +1 -0
  31. package/src/anyspend/react/components/AnySpendBuySpin.tsx +2 -1
  32. package/src/anyspend/react/components/AnySpendStakeB3.tsx +2 -1
  33. package/src/anyspend/react/components/AnyspendDepositHype.tsx +1 -0
  34. package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +55 -102
  35. package/src/anyspend/react/components/common/OrderTokenAmount.tsx +2 -2
  36. package/src/anyspend/react/components/common/PanelOnramp.tsx +3 -1
  37. package/src/anyspend/react/components/common/PaySection.tsx +1 -1
  38. package/src/global-account/react/hooks/useB3BalanceFromAddresses.ts +2 -1
  39. package/src/global-account/react/hooks/useNativeBalance.tsx +2 -1
  40. package/src/shared/constants/index.ts +2 -0
package/dist/cjs/anyspend/react/components/AnySpend.js CHANGED
@@ -662,7 +662,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
662
662
  setActivePanel(PanelView.MAIN);
663
663
  setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
664
664
  } })] })) }) }));
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 }) })), (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: () => {
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 }) })), (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
666
  if (activeTab === "fiat" || isBuyMode) {
667
667
  return;
668
668
  }
package/dist/cjs/anyspend/react/components/AnySpendBuySpin.js CHANGED
@@ -7,6 +7,7 @@ exports.AnySpendBuySpin = AnySpendBuySpin;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const anyspend_1 = require("../../../anyspend");
9
9
  const react_1 = require("../../../global-account/react");
10
+ const constants_1 = require("../../../shared/constants");
10
11
  const supported_1 = require("../../../shared/constants/chains/supported");
11
12
  const invariant_1 = __importDefault(require("invariant"));
12
13
  const lucide_react_1 = require("lucide-react");
@@ -88,7 +89,7 @@ function generateEncodedDataForBuyEntriesAndSpin(user, quantity) {
88
89
  }
89
90
  const basePublicClient = (0, viem_1.createPublicClient)({
90
91
  chain: supported_1.baseMainnet,
91
- transport: (0, viem_1.http)(),
92
+ transport: (0, viem_1.http)(constants_1.PUBLIC_BASE_RPC_URL),
92
93
  });
93
94
  function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }) {
94
95
  const hasMounted = (0, react_1.useHasMounted)();
package/dist/cjs/anyspend/react/components/AnySpendStakeB3.js CHANGED
@@ -7,6 +7,7 @@ exports.AnySpendStakeB3 = AnySpendStakeB3;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const anyspend_1 = require("../../../anyspend");
9
9
  const react_1 = require("../../../global-account/react");
10
+ const constants_1 = require("../../../shared/constants");
10
11
  const number_1 = require("../../../shared/utils/number");
11
12
  const invariant_1 = __importDefault(require("invariant"));
12
13
  const lucide_react_1 = require("lucide-react");
@@ -22,7 +23,7 @@ const SolIcon_1 = require("./icons/SolIcon");
22
23
  const USDCIcon_1 = require("./icons/USDCIcon");
23
24
  const basePublicClient = (0, viem_1.createPublicClient)({
24
25
  chain: chains_1.base,
25
- transport: (0, viem_1.http)(),
26
+ transport: (0, viem_1.http)(constants_1.PUBLIC_BASE_RPC_URL),
26
27
  });
27
28
  const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
28
29
  function generateEncodedDataForStakingB3(amount, beneficiary) {
package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js CHANGED
@@ -124,7 +124,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
124
124
  await handleFiatOrder();
125
125
  }
126
126
  };
127
- 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, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD }) })), (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, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
127
+ 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, 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, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
128
128
  setIsSrcInputDirty(false);
129
129
  setSrcAmount(value);
130
130
  }, 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] }));
package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js CHANGED
@@ -25,8 +25,6 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
25
25
  const { disconnect } = (0, wagmi_1.useDisconnect)();
26
26
  const { data: walletClient } = (0, wagmi_1.useWalletClient)();
27
27
  const [showWalletModal, setShowWalletModal] = (0, react_2.useState)(false);
28
- const [selectedWalletConnector, setSelectedWalletConnector] = (0, react_2.useState)(null);
29
- const [modalStep, setModalStep] = (0, react_2.useState)("wallet-selection");
30
28
  // Define available wallet connectors
31
29
  const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name));
32
30
  // Define wallet options with icons and info
@@ -59,12 +57,17 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
59
57
  description: "Connect using WalletConnect protocol",
60
58
  connector: availableConnectors.find(c => c.name === "WalletConnect"),
61
59
  },
60
+ {
61
+ id: "phantom",
62
+ name: "Phantom",
63
+ icon: "https://phantom.app/favicon.ico",
64
+ description: "Connect using Phantom wallet",
65
+ connector: availableConnectors.find(c => c.name === "Phantom"),
66
+ },
62
67
  ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
63
68
  // Reset modal state when closing
64
69
  const handleCloseModal = () => {
65
70
  setShowWalletModal(false);
66
- setModalStep("wallet-selection");
67
- setSelectedWalletConnector(null);
68
71
  };
69
72
  // Function to request wallet permissions for specific wallet
70
73
  const requestWalletPermissions = async (walletConnector) => {
@@ -136,22 +139,13 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
136
139
  setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
137
140
  }
138
141
  }, 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 &&
139
- (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: "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.jsxs)("div", { className: "flex items-center gap-2", children: [modalStep === "account-selection" && ((0, jsx_runtime_1.jsx)("button", { onClick: () => setModalStep("wallet-selection"), 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.ChevronLeft, { className: "h-5 w-5" }) })), (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: modalStep === "wallet-selection"
140
- ? "Select a payment method"
141
- : `Connect ${selectedWalletConnector?.name}` })] }), (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: modalStep === "wallet-selection" ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), walletOptions.map(walletOption => {
142
- const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
143
- return ((0, jsx_runtime_1.jsx)("button", { onClick: async () => {
144
- setSelectedWalletConnector(walletOption.connector);
145
- setModalStep("account-selection");
146
- }, disabled: isPending, className: `w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
147
- ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
148
- : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, 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: `flex h-12 w-12 items-center justify-center rounded-xl text-xl ${isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"}`, children: walletOption.icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && ((0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
149
- })] }) })) : (
150
- /* Account Selection Step */
151
- (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: ["Connect to ", selectedWalletConnector?.name, " to view available accounts"] }), (0, jsx_runtime_1.jsx)("button", { onClick: async () => {
142
+ (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 => {
143
+ const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
144
+ return ((0, jsx_runtime_1.jsx)("button", { onClick: async () => {
152
145
  handleCloseModal();
153
- await requestWalletPermissions(selectedWalletConnector);
154
- }, disabled: isPending, className: "w-full rounded-lg border border-gray-200 bg-white p-4 text-center transition-all hover:border-gray-300 hover:shadow-md disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-gray-600 dark:text-gray-400" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: isPending
155
- ? `Connecting to ${selectedWalletConnector?.name}...`
156
- : `Connect ${selectedWalletConnector?.name}` }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isPending ? "Please check your wallet" : "Click to connect and select account" })] })] }) })] })) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
146
+ await requestWalletPermissions(walletOption.connector);
147
+ }, disabled: isPending, className: `wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
148
+ ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
149
+ : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, 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: `flex h-12 w-12 items-center justify-center rounded-xl text-xl ${isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"}`, children: walletOption.icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && ((0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
150
+ }) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
157
151
  }
package/dist/cjs/anyspend/react/components/common/OrderTokenAmount.js CHANGED
@@ -46,5 +46,5 @@ function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, addres
46
46
  onChangeInput("0.01");
47
47
  }
48
48
  };
49
- return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? ((0, jsx_runtime_1.jsx)("h2", { className: (0, utils_1.cn)("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: (0, utils_1.cn)("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", role: "combobox", className: (0, utils_1.cn)("bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[chainId].name })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
49
+ return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? ((0, jsx_runtime_1.jsx)("h2", { className: (0, utils_1.cn)("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: (0, utils_1.cn)("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(anyspend_1.ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "outline", role: "combobox", className: (0, utils_1.cn)("token-selector-button bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary font-semibold", children: token.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/70 text-xs", children: anyspend_1.ALL_CHAINS[chainId].name })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
50
50
  }
package/dist/cjs/anyspend/react/components/common/PanelOnramp.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { components } from "../../../../anyspend/types/api";
2
2
  import { FiatPaymentMethod } from "./FiatPaymentMethod";
3
- export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }: {
3
+ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, }: {
4
4
  srcAmountOnRamp: string;
5
5
  setSrcAmountOnRamp: (amount: string) => void;
6
6
  selectedPaymentMethod?: FiatPaymentMethod;
@@ -12,4 +12,5 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
12
12
  onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
13
13
  onDestinationChainChange?: (chainId: number) => void;
14
14
  fiatPaymentMethodIndex: number;
15
+ recipientSelectionPanelIndex: number;
15
16
  }): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/anyspend/react/components/common/PanelOnramp.js CHANGED
@@ -12,7 +12,7 @@ const react_3 = require("react");
12
12
  const sonner_1 = require("sonner");
13
13
  const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
14
14
  const OrderTokenAmountFiat_1 = require("./OrderTokenAmountFiat");
15
- function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }) {
15
+ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, }) {
16
16
  // Get geo-based onramp options to access fee information
17
17
  const { stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
18
18
  // Helper function to get fees from API data
@@ -73,7 +73,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
73
73
  width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
74
74
  } })] }) }), (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: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
75
75
  ? "border-as-border-secondary bg-as-surface-secondary"
76
- : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (() => {
76
+ : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (() => {
77
77
  const currentPaymentMethod = selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE;
78
78
  const fee = getFeeFromApi(currentPaymentMethod);
79
79
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(currentPaymentMethod).toFixed(2)] })] }));
package/dist/cjs/anyspend/react/components/common/PaySection.js CHANGED
@@ -43,7 +43,7 @@ function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, se
43
43
  (0, react_3.useEffect)(() => {
44
44
  appliedSrcMetadataRef.current = false;
45
45
  }, [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: "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 => {
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 => {
47
47
  setIsSrcInputDirty(true);
48
48
  setSrcAmount(value);
49
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, {
package/dist/cjs/global-account/react/hooks/useB3BalanceFromAddresses.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useB3BalanceFromAddresses = useB3BalanceFromAddresses;
4
4
  const anyspend_1 = require("../../../anyspend");
5
+ const constants_1 = require("../../../shared/constants");
5
6
  const formatNumber_1 = require("../../../shared/utils/formatNumber");
6
7
  const react_query_1 = require("@tanstack/react-query");
7
8
  const viem_1 = require("viem");
@@ -20,7 +21,7 @@ const abi = [
20
21
  // Create a public client for Base
21
22
  const client = (0, viem_1.createPublicClient)({
22
23
  chain: chains_1.base,
23
- transport: (0, viem_1.http)(),
24
+ transport: (0, viem_1.http)(constants_1.PUBLIC_BASE_RPC_URL),
24
25
  });
25
26
  async function fetchB3Balances(addresses) {
26
27
  try {
package/dist/cjs/global-account/react/hooks/useNativeBalance.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useNativeBalance = useNativeBalance;
4
4
  exports.useNativeBalanceFromRPC = useNativeBalanceFromRPC;
5
+ const constants_1 = require("../../../shared/constants");
5
6
  const supported_1 = require("../../../shared/constants/chains/supported");
6
7
  const formatNumber_1 = require("../../../shared/utils/formatNumber");
7
8
  const react_query_1 = require("@tanstack/react-query");
@@ -90,7 +91,7 @@ function useNativeBalanceFromRPC(address, chainId) {
90
91
  try {
91
92
  const publicClient = (0, viem_1.createPublicClient)({
92
93
  chain: chainId === 8333 ? supported_1.b3Mainnet : supported_1.b3Testnet,
93
- transport: (0, viem_1.http)(),
94
+ transport: (0, viem_1.http)(chainId === 8333 ? constants_1.PUBLIC_BASE_RPC_URL : undefined),
94
95
  });
95
96
  const balance = await publicClient.getBalance({
96
97
  address: address,
package/dist/cjs/shared/constants/index.d.ts CHANGED
@@ -14,3 +14,4 @@ export declare const THIRDWEB_CLIENT_ID: string;
14
14
  export declare const CLIENT_APP_BUNDLE_ID: string;
15
15
  export declare const B3_AUTH_COOKIE_NAME = "b3-auth";
16
16
  export declare const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
17
+ export declare const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
package/dist/cjs/shared/constants/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ENS_GATEWAY_URL = exports.B3_AUTH_COOKIE_NAME = exports.CLIENT_APP_BUNDLE_ID = exports.THIRDWEB_CLIENT_ID = exports.THIRDWEB_SECRET_KEY = exports.tokenIcons = exports.ecosystemWalletId = exports.b3CoinIcon = exports.siteURL = void 0;
3
+ exports.PUBLIC_BASE_RPC_URL = exports.ENS_GATEWAY_URL = exports.B3_AUTH_COOKIE_NAME = exports.CLIENT_APP_BUNDLE_ID = exports.THIRDWEB_CLIENT_ID = exports.THIRDWEB_SECRET_KEY = exports.tokenIcons = exports.ecosystemWalletId = exports.b3CoinIcon = exports.siteURL = void 0;
4
4
  exports.siteURL = "https://basement.fun";
5
5
  exports.b3CoinIcon = "https://cdn.b3.fun/b3-coin-3d.png";
6
6
  exports.ecosystemWalletId = (process.env.NEXT_PUBLIC_THIRDWEB_ECOSYSTEM_ID ||
@@ -22,3 +22,4 @@ exports.THIRDWEB_CLIENT_ID = process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID ||
22
22
  exports.CLIENT_APP_BUNDLE_ID = process.env.EXPO_PUBLIC_B3_BUNDLE_ID || "";
23
23
  exports.B3_AUTH_COOKIE_NAME = "b3-auth";
24
24
  exports.ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
25
+ exports.PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
package/dist/esm/anyspend/react/components/AnySpend.js CHANGED
@@ -655,7 +655,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
655
655
  setActivePanel(PanelView.MAIN);
656
656
  setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
657
657
  } })] })) }) }));
658
- const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD }) })), _jsx(Button, { variant: "ghost", className: 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: () => {
658
+ const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: 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 }) })), _jsx(Button, { variant: "ghost", className: 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: () => {
659
659
  if (activeTab === "fiat" || isBuyMode) {
660
660
  return;
661
661
  }
package/dist/esm/anyspend/react/components/AnySpendBuySpin.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { B3_TOKEN } from "../../../anyspend/index.js";
3
3
  import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
4
+ import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
4
5
  import { baseMainnet } from "../../../shared/constants/chains/supported.js";
5
6
  import invariant from "invariant";
6
7
  import { ArrowRight, Loader2 } from "lucide-react";
@@ -82,7 +83,7 @@ function generateEncodedDataForBuyEntriesAndSpin(user, quantity) {
82
83
  }
83
84
  const basePublicClient = createPublicClient({
84
85
  chain: baseMainnet,
85
- transport: http(),
86
+ transport: http(PUBLIC_BASE_RPC_URL),
86
87
  });
87
88
  export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }) {
88
89
  const hasMounted = useHasMounted();
package/dist/esm/anyspend/react/components/AnySpendStakeB3.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { ABI_ERC20_STAKING, B3_TOKEN } from "../../../anyspend/index.js";
3
3
  import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
4
+ import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
4
5
  import { formatTokenAmount } from "../../../shared/utils/number.js";
5
6
  import invariant from "invariant";
6
7
  import { ArrowRight, Loader2 } from "lucide-react";
@@ -16,7 +17,7 @@ import { SolIcon } from "./icons/SolIcon.js";
16
17
  import { UsdcIcon } from "./icons/USDCIcon.js";
17
18
  const basePublicClient = createPublicClient({
18
19
  chain: base,
19
- transport: http(),
20
+ transport: http(PUBLIC_BASE_RPC_URL),
20
21
  });
21
22
  const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
22
23
  function generateEncodedDataForStakingB3(amount, beneficiary) {
package/dist/esm/anyspend/react/components/AnyspendDepositHype.js CHANGED
@@ -118,7 +118,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
118
118
  await handleFiatOrder();
119
119
  }
120
120
  };
121
- const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
121
+ const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
122
122
  setIsSrcInputDirty(false);
123
123
  setSrcAmount(value);
124
124
  }, anyspendQuote: anyspendQuote }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useAccountWallet } from "../../../../global-account/react/index.js";
4
4
  import { cn } from "../../../../shared/utils/cn.js";
5
5
  import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
@@ -21,8 +21,6 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
21
21
  const { disconnect } = useDisconnect();
22
22
  const { data: walletClient } = useWalletClient();
23
23
  const [showWalletModal, setShowWalletModal] = useState(false);
24
- const [selectedWalletConnector, setSelectedWalletConnector] = useState(null);
25
- const [modalStep, setModalStep] = useState("wallet-selection");
26
24
  // Define available wallet connectors
27
25
  const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name));
28
26
  // Define wallet options with icons and info
@@ -55,12 +53,17 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
55
53
  description: "Connect using WalletConnect protocol",
56
54
  connector: availableConnectors.find(c => c.name === "WalletConnect"),
57
55
  },
56
+ {
57
+ id: "phantom",
58
+ name: "Phantom",
59
+ icon: "https://phantom.app/favicon.ico",
60
+ description: "Connect using Phantom wallet",
61
+ connector: availableConnectors.find(c => c.name === "Phantom"),
62
+ },
58
63
  ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
59
64
  // Reset modal state when closing
60
65
  const handleCloseModal = () => {
61
66
  setShowWalletModal(false);
62
- setModalStep("wallet-selection");
63
- setSelectedWalletConnector(null);
64
67
  };
65
68
  // Function to request wallet permissions for specific wallet
66
69
  const requestWalletPermissions = async (walletConnector) => {
@@ -132,22 +135,13 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
132
135
  setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
133
136
  }
134
137
  }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] })] }) }) })] }))] })] }), showWalletModal &&
135
- createPortal(_jsx("div", { className: "pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [modalStep === "account-selection" && (_jsx("button", { onClick: () => setModalStep("wallet-selection"), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(ChevronLeft, { className: "h-5 w-5" }) })), _jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: modalStep === "wallet-selection"
136
- ? "Select a payment method"
137
- : `Connect ${selectedWalletConnector?.name}` })] }), _jsx("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "space-y-4", children: modalStep === "wallet-selection" ? (_jsx(_Fragment, { children: _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), walletOptions.map(walletOption => {
138
- const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
139
- return (_jsx("button", { onClick: async () => {
140
- setSelectedWalletConnector(walletOption.connector);
141
- setModalStep("account-selection");
142
- }, disabled: isPending, className: `w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
143
- ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
144
- : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-12 w-12 items-center justify-center rounded-xl text-xl ${isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"}`, children: walletOption.icon }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && (_jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), _jsx(ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
145
- })] }) })) : (
146
- /* Account Selection Step */
147
- _jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: ["Connect to ", selectedWalletConnector?.name, " to view available accounts"] }), _jsx("button", { onClick: async () => {
138
+ createPortal(_jsx("div", { className: "wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), _jsx("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-3", children: walletOptions.map(walletOption => {
139
+ const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
140
+ return (_jsx("button", { onClick: async () => {
148
141
  handleCloseModal();
149
- await requestWalletPermissions(selectedWalletConnector);
150
- }, disabled: isPending, className: "w-full rounded-lg border border-gray-200 bg-white p-4 text-center transition-all hover:border-gray-300 hover:shadow-md disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500", children: _jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700", children: _jsx(Wallet, { className: "h-5 w-5 text-gray-600 dark:text-gray-400" }) }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: isPending
151
- ? `Connecting to ${selectedWalletConnector?.name}...`
152
- : `Connect ${selectedWalletConnector?.name}` }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isPending ? "Please check your wallet" : "Click to connect and select account" })] })] }) })] })) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
142
+ await requestWalletPermissions(walletOption.connector);
143
+ }, disabled: isPending, className: `wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
144
+ ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
145
+ : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-12 w-12 items-center justify-center rounded-xl text-xl ${isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"}`, children: walletOption.icon }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && (_jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), _jsx(ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
146
+ }) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
153
147
  }
package/dist/esm/anyspend/react/components/common/OrderTokenAmount.js CHANGED
@@ -43,5 +43,5 @@ export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context,
43
43
  onChangeInput("0.01");
44
44
  }
45
45
  };
46
- return (_jsx("div", { className: cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: _jsxs("div", { className: cn("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? (_jsx("h2", { className: cn("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : (_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: cn("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[chainId].name })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
46
+ return (_jsx("div", { className: cn("border-as-stroke flex w-full flex-col gap-2 rounded-xl", className), children: _jsxs("div", { className: cn("flex items-center justify-between gap-3", innerClassName), children: [!canEditAmount ? (_jsx("h2", { className: cn("text-3xl font-medium text-white", amountClassName), children: inputValue || "--" })) : (_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: cn("placeholder:text-as-primary/70 disabled:text-as-primary/70 text-as-primary w-full bg-transparent text-4xl font-semibold leading-[42px] outline-none sm:text-[30px]", amountClassName), pattern: "^[0-9]*[.,]?[0-9]*$", disabled: disabled, value: inputValue, allowNegative: false, onChange: e => onChangeInput(e.currentTarget.value) }, `input-${token.address}-${chainId}`)), !hideTokenSelect && (_jsx(TokenSelector, { address: address, chainIdsFilter: Object.values(ALL_CHAINS).map(chain => chain.id), context: context, fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: Object.values(ALL_CHAINS).map(chain => chain.id), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("token-selector-button bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center", tokenSelectClassName), children: [token.metadata.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[chainId].logoUrl, tokenUrl: token.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: token.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[chainId].name })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) }, `selector-${context}-${token.address}-${chainId}`))] }) }, `${context}-${token.address}-${chainId}`));
47
47
  }
package/dist/esm/anyspend/react/components/common/PanelOnramp.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { components } from "../../../../anyspend/types/api";
2
2
  import { FiatPaymentMethod } from "./FiatPaymentMethod";
3
- export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }: {
3
+ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, }: {
4
4
  srcAmountOnRamp: string;
5
5
  setSrcAmountOnRamp: (amount: string) => void;
6
6
  selectedPaymentMethod?: FiatPaymentMethod;
@@ -12,4 +12,5 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
12
12
  onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
13
13
  onDestinationChainChange?: (chainId: number) => void;
14
14
  fiatPaymentMethodIndex: number;
15
+ recipientSelectionPanelIndex: number;
15
16
  }): import("react/jsx-runtime").JSX.Element;
package/dist/esm/anyspend/react/components/common/PanelOnramp.js CHANGED
@@ -9,7 +9,7 @@ import { useRef } from "react";
9
9
  import { toast } from "sonner";
10
10
  import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
11
11
  import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
12
- export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }) {
12
+ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, }) {
13
13
  // Get geo-based onramp options to access fee information
14
14
  const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
15
15
  // Helper function to get fees from API data
@@ -70,7 +70,7 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
70
70
  width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
71
71
  } })] }) }), _jsx("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
72
72
  ? "border-as-border-secondary bg-as-surface-secondary"
73
- : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsx("div", { className: "flex items-center justify-between", children: (() => {
73
+ : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsx("div", { className: "flex items-center justify-between", children: (() => {
74
74
  const currentPaymentMethod = selectedPaymentMethod || FiatPaymentMethod.NONE;
75
75
  const fee = getFeeFromApi(currentPaymentMethod);
76
76
  return (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total" }), _jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(currentPaymentMethod).toFixed(2)] })] }));
package/dist/esm/anyspend/react/components/common/PaySection.js CHANGED
@@ -40,7 +40,7 @@ export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChai
40
40
  useEffect(() => {
41
41
  appliedSrcMetadataRef.current = false;
42
42
  }, [selectedSrcToken.address, selectedSrcToken.chainId]);
43
- return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })) : (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
43
+ return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })) : (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
44
44
  setIsSrcInputDirty(true);
45
45
  setSrcAmount(value);
46
46
  }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
package/dist/esm/global-account/react/hooks/useB3BalanceFromAddresses.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { B3_TOKEN } from "../../../anyspend/index.js";
2
+ import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
2
3
  import { formatNumber } from "../../../shared/utils/formatNumber.js";
3
4
  import { useQuery } from "@tanstack/react-query";
4
5
  import { createPublicClient, formatUnits, http } from "viem";
@@ -17,7 +18,7 @@ const abi = [
17
18
  // Create a public client for Base
18
19
  const client = createPublicClient({
19
20
  chain: base,
20
- transport: http(),
21
+ transport: http(PUBLIC_BASE_RPC_URL),
21
22
  });
22
23
  async function fetchB3Balances(addresses) {
23
24
  try {
package/dist/esm/global-account/react/hooks/useNativeBalance.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
1
2
  import { b3Mainnet, b3Testnet } from "../../../shared/constants/chains/supported.js";
2
3
  import { formatNumber } from "../../../shared/utils/formatNumber.js";
3
4
  import { useQuery } from "@tanstack/react-query";
@@ -86,7 +87,7 @@ export function useNativeBalanceFromRPC(address, chainId) {
86
87
  try {
87
88
  const publicClient = createPublicClient({
88
89
  chain: chainId === 8333 ? b3Mainnet : b3Testnet,
89
- transport: http(),
90
+ transport: http(chainId === 8333 ? PUBLIC_BASE_RPC_URL : undefined),
90
91
  });
91
92
  const balance = await publicClient.getBalance({
92
93
  address: address,
package/dist/esm/shared/constants/index.d.ts CHANGED
@@ -14,3 +14,4 @@ export declare const THIRDWEB_CLIENT_ID: string;
14
14
  export declare const CLIENT_APP_BUNDLE_ID: string;
15
15
  export declare const B3_AUTH_COOKIE_NAME = "b3-auth";
16
16
  export declare const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
17
+ export declare const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
package/dist/esm/shared/constants/index.js CHANGED
@@ -19,3 +19,4 @@ export const THIRDWEB_CLIENT_ID = process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID ||
19
19
  export const CLIENT_APP_BUNDLE_ID = process.env.EXPO_PUBLIC_B3_BUNDLE_ID || "";
20
20
  export const B3_AUTH_COOKIE_NAME = "b3-auth";
21
21
  export const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
22
+ export const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
package/dist/types/anyspend/react/components/common/PanelOnramp.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { components } from "@b3dotfun/sdk/anyspend/types/api";
2
2
  import { FiatPaymentMethod } from "./FiatPaymentMethod";
3
- export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, }: {
3
+ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, }: {
4
4
  srcAmountOnRamp: string;
5
5
  setSrcAmountOnRamp: (amount: string) => void;
6
6
  selectedPaymentMethod?: FiatPaymentMethod;
@@ -12,4 +12,5 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
12
12
  onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
13
13
  onDestinationChainChange?: (chainId: number) => void;
14
14
  fiatPaymentMethodIndex: number;
15
+ recipientSelectionPanelIndex: number;
15
16
  }): import("react/jsx-runtime").JSX.Element;
package/dist/types/shared/constants/index.d.ts CHANGED
@@ -14,3 +14,4 @@ export declare const THIRDWEB_CLIENT_ID: string;
14
14
  export declare const CLIENT_APP_BUNDLE_ID: string;
15
15
  export declare const B3_AUTH_COOKIE_NAME = "b3-auth";
16
16
  export declare const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
17
+ export declare const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@b3dotfun/sdk",
3
- "version": "0.0.30-alpha.0",
3
+ "version": "0.0.30-alpha.1",
4
4
  "source": "src/index.ts",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "react-native": "./dist/cjs/index.native.js",
package/src/anyspend/react/components/AnySpend.tsx CHANGED
@@ -889,6 +889,7 @@ function AnySpendInner({
889
889
  onDestinationTokenChange={setSelectedDstToken}
890
890
  onDestinationChainChange={setSelectedDstChainId}
891
891
  fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
892
+ recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
892
893
  />
893
894
  </motion.div>
894
895
  )}
package/src/anyspend/react/components/AnySpendBuySpin.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  useTokenBalance,
11
11
  useUnifiedChainSwitchAndExecute,
12
12
  } from "@b3dotfun/sdk/global-account/react";
13
+ import { PUBLIC_BASE_RPC_URL } from "@b3dotfun/sdk/shared/constants";
13
14
  import { baseMainnet } from "@b3dotfun/sdk/shared/constants/chains/supported";
14
15
  import invariant from "invariant";
15
16
  import { ArrowRight, Loader2 } from "lucide-react";
@@ -117,7 +118,7 @@ function generateEncodedDataForBuyEntriesAndSpin(user: string, quantity: string)
117
118
 
118
119
  const basePublicClient = createPublicClient({
119
120
  chain: baseMainnet,
120
- transport: http(),
121
+ transport: http(PUBLIC_BASE_RPC_URL),
121
122
  });
122
123
 
123
124
  export function AnySpendBuySpin({
package/src/anyspend/react/components/AnySpendStakeB3.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  useTokenBalance,
11
11
  useUnifiedChainSwitchAndExecute,
12
12
  } from "@b3dotfun/sdk/global-account/react";
13
+ import { PUBLIC_BASE_RPC_URL } from "@b3dotfun/sdk/shared/constants";
13
14
  import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
14
15
  import invariant from "invariant";
15
16
  import { ArrowRight, Loader2 } from "lucide-react";
@@ -26,7 +27,7 @@ import { UsdcIcon } from "./icons/USDCIcon";
26
27
 
27
28
  const basePublicClient = createPublicClient({
28
29
  chain: base,
29
- transport: http(),
30
+ transport: http(PUBLIC_BASE_RPC_URL),
30
31
  });
31
32
 
32
33
  const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
package/src/anyspend/react/components/AnyspendDepositHype.tsx CHANGED
@@ -232,6 +232,7 @@ function AnySpendDepositHypeInner({
232
232
  onDestinationTokenChange={() => {}}
233
233
  onDestinationChainChange={() => {}}
234
234
  fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
235
+ recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
235
236
  />
236
237
  </motion.div>
237
238
  )}
package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx CHANGED
@@ -42,8 +42,6 @@ export function CryptoPaymentMethod({
42
42
  const { disconnect } = useDisconnect();
43
43
  const { data: walletClient } = useWalletClient();
44
44
  const [showWalletModal, setShowWalletModal] = useState(false);
45
- const [selectedWalletConnector, setSelectedWalletConnector] = useState<any>(null);
46
- const [modalStep, setModalStep] = useState<"wallet-selection" | "account-selection">("wallet-selection");
47
45
 
48
46
  // Define available wallet connectors
49
47
  const availableConnectors = connectors.filter(connector =>
@@ -80,13 +78,18 @@ export function CryptoPaymentMethod({
80
78
  description: "Connect using WalletConnect protocol",
81
79
  connector: availableConnectors.find(c => c.name === "WalletConnect"),
82
80
  },
81
+ {
82
+ id: "phantom",
83
+ name: "Phantom",
84
+ icon: "https://phantom.app/favicon.ico",
85
+ description: "Connect using Phantom wallet",
86
+ connector: availableConnectors.find(c => c.name === "Phantom"),
87
+ },
83
88
  ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
84
89
 
85
90
  // Reset modal state when closing
86
91
  const handleCloseModal = () => {
87
92
  setShowWalletModal(false);
88
- setModalStep("wallet-selection");
89
- setSelectedWalletConnector(null);
90
93
  };
91
94
 
92
95
  // Function to request wallet permissions for specific wallet
@@ -258,24 +261,12 @@ export function CryptoPaymentMethod({
258
261
  {/* Wallet Connection Modal */}
259
262
  {showWalletModal &&
260
263
  createPortal(
261
- <div className="pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
264
+ <div className="wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
262
265
  <div className="max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900">
263
266
  <div className="mb-4 flex items-center justify-between">
264
- <div className="flex items-center gap-2">
265
- {modalStep === "account-selection" && (
266
- <button
267
- onClick={() => setModalStep("wallet-selection")}
268
- className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
269
- >
270
- <ChevronLeft className="h-5 w-5" />
271
- </button>
272
- )}
273
- <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
274
- {modalStep === "wallet-selection"
275
- ? "Select a payment method"
276
- : `Connect ${selectedWalletConnector?.name}`}
277
- </h3>
278
- </div>
267
+ <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
268
+ {isConnected ? "Switch wallet or account" : "Choose wallet to connect"}
269
+ </h3>
279
270
  <button
280
271
  onClick={handleCloseModal}
281
272
  className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
@@ -285,94 +276,56 @@ export function CryptoPaymentMethod({
285
276
  </div>
286
277
 
287
278
  <div className="space-y-4">
288
- {modalStep === "wallet-selection" ? (
289
- <>
290
- {/* Custom wallet options */}
291
- <div className="space-y-3">
292
- <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
293
- {isConnected ? "Switch wallet or account" : "Choose wallet to connect"}
294
- </h4>
295
- {walletOptions.map(walletOption => {
296
- const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
279
+ {/* Custom wallet options */}
280
+ <div className="space-y-3">
281
+ {walletOptions.map(walletOption => {
282
+ const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
297
283
 
298
- return (
299
- <button
300
- key={walletOption.id}
301
- onClick={async () => {
302
- setSelectedWalletConnector(walletOption.connector);
303
- setModalStep("account-selection");
304
- }}
305
- disabled={isPending}
306
- className={`w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${
307
- isCurrentWallet
308
- ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
309
- : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"
310
- }`}
311
- >
312
- <div className="flex items-center justify-between">
313
- <div className="flex items-center gap-3">
314
- <div
315
- className={`flex h-12 w-12 items-center justify-center rounded-xl text-xl ${
316
- isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"
317
- }`}
318
- >
319
- {walletOption.icon}
320
- </div>
321
- <div>
322
- <div className="flex items-center gap-2">
323
- <div className="text-sm font-semibold text-gray-900 dark:text-white">
324
- {walletOption.name}
325
- </div>
326
- {isCurrentWallet && (
327
- <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200">
328
- Connected
329
- </span>
330
- )}
331
- </div>
332
- <div className="text-xs text-gray-500 dark:text-gray-400">
333
- {isCurrentWallet ? "Switch account or reconnect" : walletOption.description}
334
- </div>
284
+ return (
285
+ <button
286
+ key={walletOption.id}
287
+ onClick={async () => {
288
+ handleCloseModal();
289
+ await requestWalletPermissions(walletOption.connector);
290
+ }}
291
+ disabled={isPending}
292
+ className={`wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${
293
+ isCurrentWallet
294
+ ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
295
+ : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"
296
+ }`}
297
+ >
298
+ <div className="flex items-center justify-between">
299
+ <div className="flex items-center gap-3">
300
+ <div
301
+ className={`flex h-12 w-12 items-center justify-center rounded-xl text-xl ${
302
+ isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"
303
+ }`}
304
+ >
305
+ {walletOption.icon}
306
+ </div>
307
+ <div>
308
+ <div className="flex items-center gap-2">
309
+ <div className="text-sm font-semibold text-gray-900 dark:text-white">
310
+ {walletOption.name}
335
311
  </div>
312
+ {isCurrentWallet && (
313
+ <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200">
314
+ Connected
315
+ </span>
316
+ )}
317
+ </div>
318
+ <div className="text-xs text-gray-500 dark:text-gray-400">
319
+ {isCurrentWallet ? "Switch account or reconnect" : walletOption.description}
336
320
  </div>
337
- <ChevronRightCircle className="h-5 w-5 text-gray-400" />
338
321
  </div>
339
- </button>
340
- );
341
- })}
342
- </div>
343
- </>
344
- ) : (
345
- /* Account Selection Step */
346
- <div className="space-y-4">
347
- <p className="text-sm text-gray-600 dark:text-gray-400">
348
- Connect to {selectedWalletConnector?.name} to view available accounts
349
- </p>
350
- <button
351
- onClick={async () => {
352
- handleCloseModal();
353
- await requestWalletPermissions(selectedWalletConnector);
354
- }}
355
- disabled={isPending}
356
- className="w-full rounded-lg border border-gray-200 bg-white p-4 text-center transition-all hover:border-gray-300 hover:shadow-md disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"
357
- >
358
- <div className="flex items-center justify-center gap-3">
359
- <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700">
360
- <Wallet className="h-5 w-5 text-gray-600 dark:text-gray-400" />
361
- </div>
362
- <div>
363
- <div className="text-sm font-medium text-gray-900 dark:text-white">
364
- {isPending
365
- ? `Connecting to ${selectedWalletConnector?.name}...`
366
- : `Connect ${selectedWalletConnector?.name}`}
367
- </div>
368
- <div className="text-xs text-gray-500 dark:text-gray-400">
369
- {isPending ? "Please check your wallet" : "Click to connect and select account"}
370
322
  </div>
323
+ <ChevronRightCircle className="h-5 w-5 text-gray-400" />
371
324
  </div>
372
- </div>
373
- </button>
374
- </div>
375
- )}
325
+ </button>
326
+ );
327
+ })}
328
+ </div>
376
329
  </div>
377
330
  </div>
378
331
  </div>,
package/src/anyspend/react/components/common/OrderTokenAmount.tsx CHANGED
@@ -5,11 +5,11 @@ import { useEffect, useRef } from "react";
5
5
  import { NumericFormat } from "react-number-format";
6
6
 
7
7
  import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
8
+ import { components } from "@b3dotfun/sdk/anyspend/types/api";
8
9
  import { Button } from "@b3dotfun/sdk/global-account/react";
9
10
  import { cn } from "@b3dotfun/sdk/shared/utils";
10
11
  import { TokenSelector } from "@reservoir0x/relay-kit-ui";
11
12
  import { ChainTokenIcon } from "./ChainTokenIcon";
12
- import { components } from "@b3dotfun/sdk/anyspend/types/api";
13
13
 
14
14
  export function OrderTokenAmount({
15
15
  disabled,
@@ -140,7 +140,7 @@ export function OrderTokenAmount({
140
140
  variant="outline"
141
141
  role="combobox"
142
142
  className={cn(
143
- "bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center",
143
+ "token-selector-button bg-b3-react-background border-as-stroke flex h-auto w-fit shrink-0 items-center justify-center gap-2 rounded-xl border-2 px-2 py-1 pr-2 text-center",
144
144
  tokenSelectClassName,
145
145
  )}
146
146
  >
package/src/anyspend/react/components/common/PanelOnramp.tsx CHANGED
@@ -22,6 +22,7 @@ export function PanelOnramp({
22
22
  onDestinationTokenChange,
23
23
  onDestinationChainChange,
24
24
  fiatPaymentMethodIndex,
25
+ recipientSelectionPanelIndex,
25
26
  }: {
26
27
  srcAmountOnRamp: string;
27
28
  setSrcAmountOnRamp: (amount: string) => void;
@@ -34,6 +35,7 @@ export function PanelOnramp({
34
35
  onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
35
36
  onDestinationChainChange?: (chainId: number) => void;
36
37
  fiatPaymentMethodIndex: number;
38
+ recipientSelectionPanelIndex: number;
37
39
  }) {
38
40
  // Get geo-based onramp options to access fee information
39
41
  const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -199,7 +201,7 @@ export function PanelOnramp({
199
201
  {_recipientAddress ? (
200
202
  <button
201
203
  className="text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700"
202
- onClick={() => setActivePanel(5)} // Recipient selection panel
204
+ onClick={() => setActivePanel(recipientSelectionPanelIndex)} // Recipient selection panel
203
205
  >
204
206
  <span className="text-sm">
205
207
  {recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress)}
package/src/anyspend/react/components/common/PaySection.tsx CHANGED
@@ -84,7 +84,7 @@ export function PaySection({
84
84
  initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
85
85
  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
86
86
  transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
87
- className="bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
87
+ 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"
88
88
  >
89
89
  <div className="flex items-center justify-between">
90
90
  <div className="text-as-primary/50 flex h-7 items-center text-sm">Pay</div>
package/src/global-account/react/hooks/useB3BalanceFromAddresses.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { B3_TOKEN } from "@b3dotfun/sdk/anyspend";
2
+ import { PUBLIC_BASE_RPC_URL } from "@b3dotfun/sdk/shared/constants";
2
3
  import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
3
4
  import { useQuery } from "@tanstack/react-query";
4
5
  import { createPublicClient, formatUnits, http } from "viem";
@@ -19,7 +20,7 @@ const abi = [
19
20
  // Create a public client for Base
20
21
  const client = createPublicClient({
21
22
  chain: base,
22
- transport: http(),
23
+ transport: http(PUBLIC_BASE_RPC_URL),
23
24
  });
24
25
 
25
26
  async function fetchB3Balances(addresses: string[]): Promise<{
package/src/global-account/react/hooks/useNativeBalance.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { PUBLIC_BASE_RPC_URL } from "@b3dotfun/sdk/shared/constants";
1
2
  import { b3Mainnet, b3Testnet } from "@b3dotfun/sdk/shared/constants/chains/supported";
2
3
  import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
3
4
  import { useQuery } from "@tanstack/react-query";
@@ -114,7 +115,7 @@ export function useNativeBalanceFromRPC(address: string, chainId: number) {
114
115
  try {
115
116
  const publicClient = createPublicClient({
116
117
  chain: chainId === 8333 ? b3Mainnet : b3Testnet,
117
- transport: http(),
118
+ transport: http(chainId === 8333 ? PUBLIC_BASE_RPC_URL : undefined),
118
119
  });
119
120
 
120
121
  const balance = await publicClient.getBalance({
package/src/shared/constants/index.ts CHANGED
@@ -28,3 +28,5 @@ export const CLIENT_APP_BUNDLE_ID = process.env.EXPO_PUBLIC_B3_BUNDLE_ID || "";
28
28
  export const B3_AUTH_COOKIE_NAME = "b3-auth";
29
29
 
30
30
  export const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
31
+
32
+ export const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";