@b3dotfun/sdk 0.0.30 → 0.0.31

package/dist/cjs/shared/generated/chain-networks.json

@@ -29,7 +29,7 @@
     "testnetConfigID": "66b380b0fae0f6d8266798d0",
     "badge": "https://cdn.b3.fun/b3_logo.svg",
     "color": "#3368ef",
-    "enabledFeatures": ["explorer.all", "basement.all"]
+    "enabledFeatures": ["basement", "explorer"]
   },
   {
     "_id": "66b380b0fae0f6d8266798d0",
@@ -49,7 +49,7 @@
       "format": "svg"
     },
     "blockExplorers": {
-      "default": "https://sepolia-explorer.b3.fun",
+      "default": "https://sepolia.explorer.b3.fun",
       "explorerTitle": "B3 Sepolia Explorer"
     },
     "nativeCurrency": {
@@ -59,7 +59,8 @@
     },
     "testnet": true,
     "badge": "https://cdn.b3.fun/b3_logo.svg",
-    "color": "#3368ef"
+    "color": "#3368ef",
+    "enabledFeatures": ["basement", "explorer"]
   },
   {
     "_id": "66f2044afe5a3ac32a1de9ff",
@@ -89,7 +90,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/base-badge.svg",
-    "color": "#004ae7"
+    "color": "#004ae7",
+    "enabledFeatures": ["basement", "explorer"]
   },
   {
     "_id": "66f3221afe5a3ac32a1dea00",
@@ -119,7 +121,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/base-badge.svg",
-    "color": "#004ae7"
+    "color": "#004ae7",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "6706b240d442b7a2f8cb9efa",
@@ -149,7 +152,8 @@
     },
     "testnet": true,
     "badge": "https://cdn.b3.fun/eth-badge.svg",
-    "color": "#B38DF0"
+    "color": "#B38DF0",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "671945d9d442b7a2f8cb9efe",
@@ -178,7 +182,8 @@
     },
     "testnet": true,
     "badge": "https://cdn.b3.fun/eth-badge.svg",
-    "color": "#B38DF0"
+    "color": "#B38DF0",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "679a4a91703428bb5bb2f1ba",
@@ -208,7 +213,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/avalanche-badge.svg",
-    "color": "#c33738"
+    "color": "#c33738",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "679be46ca0f78fd619f6954b",
@@ -238,7 +244,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/geist-logo.svg",
-    "color": "#808080"
+    "color": "#808080",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "679be960a0f78fd619f6954d",
@@ -268,7 +275,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/arbitrum-badge.svg",
-    "color": "#4a5c7e"
+    "color": "#4a5c7e",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "679be9eba0f78fd619f6954f",
@@ -298,7 +306,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/ronin-logo.svg",
-    "color": "#004de5"
+    "color": "#004de5",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "679beabca0f78fd619f69551",
@@ -328,7 +337,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/solana-logo.png",
-    "color": "#9945FF"
+    "color": "#9945FF",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "67a452dda0f78fd619f69558",
@@ -358,7 +368,8 @@
     },
     "testnet": true,
     "badge": "https://cdn.b3.fun/gunz-logo.svg",
-    "color": "#c8edfa"
+    "color": "#c8edfa",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "67aede9db3ba503f51eeaff7",
@@ -388,7 +399,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/ton-logo.svg",
-    "color": "#0088cc"
+    "color": "#0088cc",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "67b7895fb3ba503f51eeaffc",
@@ -418,7 +430,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/optimism-badge.svg",
-    "color": "#d6031b"
+    "color": "#d6031b",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "67bcbdb782f62aa6dc1efa60",
@@ -448,7 +461,8 @@
     },
     "testnet": false,
     "badge": "https://cdn.b3.fun/polygon-badge.svg",
-    "color": "#7540cf"
+    "color": "#7540cf",
+    "enabledFeatures": ["basement"]
   },
   {
     "_id": "6837258b25c59b8e08f806bf",
@@ -478,6 +492,160 @@
     },
     "testnet": false,
     "badge": "https://avatars.githubusercontent.com/u/45615063?s=280&v=4",
-    "color": "#F3BA2F"
+    "color": "#F3BA2F",
+    "enabledFeatures": ["basement"]
+  },
+  {
+    "_id": "684afd314a478ffb44a4f83e",
+    "id": 19934,
+    "name": "B4 Testnet",
+    "rpcUrls": {
+      "default": {
+        "http": "https://b4-testnet.rpc.caldera.xyz/http",
+        "ws": "wss://b4-testnet.rpc.caldera.xyz/ws"
+      },
+      "backups": []
+    },
+    "icon": {
+      "url": "https://cdn.b3.fun/b4-logo.png",
+      "width": 32,
+      "height": 32,
+      "format": "svg"
+    },
+    "blockExplorers": {
+      "default": "https://b4-testnet.explorer.caldera.xyz",
+      "explorerTitle": "B4 Testnet Explorer"
+    },
+    "nativeCurrency": {
+      "name": "Ether",
+      "symbol": "ETH",
+      "decimals": 18
+    },
+    "testnet": true,
+    "badge": "https://cdn.b3.fun/b4-logo.png",
+    "color": "#3368ef",
+    "enabledFeatures": ["explorer"]
+  },
+  {
+    "_id": "684afdec4a478ffb44a4f83f",
+    "id": 243,
+    "name": "Reach Testnet",
+    "rpcUrls": {
+      "default": {
+        "http": "https://reach-testnet.rpc.caldera.xyz/http",
+        "ws": "wss://reach-testnet.rpc.caldera.xyz/ws"
+      },
+      "backups": []
+    },
+    "icon": {
+      "url": "https://cdn.b3.fun/reach-logo.png",
+      "width": 32,
+      "height": 32,
+      "format": "png"
+    },
+    "blockExplorers": {
+      "default": "https://reach-testnet.explorer.caldera.xyz",
+      "explorerTitle": "Reach Testnet Explorer"
+    },
+    "nativeCurrency": {
+      "name": "Ether",
+      "symbol": "ETH",
+      "decimals": 18
+    },
+    "testnet": true,
+    "badge": "https://cdn.b3.fun/reach-logo.png",
+    "color": "#3368ef",
+    "enabledFeatures": ["explorer"]
+  },
+  {
+    "_id": "684afed04a478ffb44a4f840",
+    "id": 10211403,
+    "name": "GLHF Testnet",
+    "rpcUrls": {
+      "default": {
+        "http": "https://glhf-testnet.rpc.caldera.xyz/http",
+        "ws": "wss://glhf-testnet.rpc.caldera.xyz/ws"
+      },
+      "backups": []
+    },
+    "icon": {
+      "url": "https://cdn.b3.fun/supergaming-logo.png",
+      "width": 62,
+      "height": 48,
+      "format": "png"
+    },
+    "blockExplorers": {
+      "default": "https://glhf-testnet.explorer.caldera.xyz",
+      "explorerTitle": "SuperGaming Testnet Explorer"
+    },
+    "nativeCurrency": {
+      "name": "Ether",
+      "symbol": "ETH",
+      "decimals": 18
+    },
+    "testnet": true,
+    "badge": "https://cdn.b3.fun/supergaming-logo.png",
+    "color": "#000000",
+    "enabledFeatures": ["explorer"]
+  },
+  {
+    "_id": "685341f5ac22b8c3faae86ae",
+    "id": 4224,
+    "name": "Arpa Testnet",
+    "rpcUrls": {
+      "default": {
+        "http": "https://arpachain.calderachain.xyz/http",
+        "ws": "wss://arpachain.calderachain.xyz/ws"
+      },
+      "backups": []
+    },
+    "icon": {
+      "url": "https://cdn.b3.fun/arpa-logo.png",
+      "width": 175,
+      "height": 158,
+      "format": "png"
+    },
+    "blockExplorers": {
+      "default": "https://arpachain.calderaexplorer.xyz/",
+      "explorerTitle": "ArpaChain Testnet Explorer"
+    },
+    "nativeCurrency": {
+      "name": "Ether",
+      "symbol": "ETH",
+      "decimals": 18
+    },
+    "testnet": true,
+    "badge": "https://cdn.b3.fun/arpa-logo.png",
+    "color": "#3368ef",
+    "enabledFeatures": ["explorer"]
+  },
+  {
+    "_id": "68a351c603e65c07b7645581",
+    "id": 1448000,
+    "name": "XRPLT",
+    "rpcUrls": {
+      "default": {
+        "http": "https://xrplt.rpc.caldera.xyz/http",
+        "ws": "wss://xrplt.rpc.caldera.xyz/ws"
+      },
+      "backups": []
+    },
+    "icon": {
+      "url": "https://cdn.b3.fun/xrpl_logo.svg",
+      "width": 32,
+      "height": 32,
+      "format": "svg"
+    },
+    "blockExplorers": {
+      "default": "https://xrplt.explorer.caldera.xyz/",
+      "explorerTitle": "XRPLT Explorer"
+    },
+    "nativeCurrency": {
+      "name": "XRP",
+      "symbol": "XRP",
+      "decimals": 18
+    },
+    "testnet": true,
+    "enabledFeatures": ["xcade", "explorer"]
   }
 ]

package/dist/esm/anyspend/react/components/AnySpend.js

@@ -655,7 +655,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                             setActivePanel(PanelView.MAIN);
                             setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
                         } })] })) }) }));
-    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: () => {
+    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: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }

package/dist/esm/anyspend/react/components/AnySpendBuySpin.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { B3_TOKEN } from "../../../anyspend/index.js";
 import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
+import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
 import { baseMainnet } from "../../../shared/constants/chains/supported.js";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -82,7 +83,7 @@ function generateEncodedDataForBuyEntriesAndSpin(user, quantity) {
 }
 const basePublicClient = createPublicClient({
     chain: baseMainnet,
-    transport: http(),
+    transport: http(PUBLIC_BASE_RPC_URL),
 });
 export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }) {
     const hasMounted = useHasMounted();

package/dist/esm/anyspend/react/components/AnySpendStakeB3.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ABI_ERC20_STAKING, B3_TOKEN } from "../../../anyspend/index.js";
 import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
+import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -16,7 +17,7 @@ import { SolIcon } from "./icons/SolIcon.js";
 import { UsdcIcon } from "./icons/USDCIcon.js";
 const basePublicClient = createPublicClient({
     chain: base,
-    transport: http(),
+    transport: http(PUBLIC_BASE_RPC_URL),
 });
 const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
 function generateEncodedDataForStakingB3(amount, beneficiary) {

package/dist/esm/anyspend/react/components/AnyspendDepositHype.d.ts

@@ -1,3 +1,7 @@
+export declare const HYPE_TOKEN_DETAILS: {
+    SYMBOL: string;
+    LOGO_URI: string;
+};
 export interface AnySpendDepositHypeProps {
     loadOrder?: string;
     mode?: "modal" | "page";

package/dist/esm/anyspend/react/components/AnyspendDepositHype.js

@@ -22,6 +22,10 @@ import { ESCROW_ABI } from "../../../anyspend/abis/escrow.js";
 import { ArrowDown } from "lucide-react";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 const SLIPPAGE_PERCENT = 3;
+export const HYPE_TOKEN_DETAILS = {
+    SYMBOL: "HYPE",
+    LOGO_URI: "https://cdn.hypeduel.com/hypes-coin.svg",
+};
 function generateEncodedDataForDepositHype(amount, beneficiary) {
     invariant(BigInt(amount) > 0, "Amount must be greater than zero");
     const encodedData = encodeFunctionData({
@@ -118,7 +122,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             await handleFiatOrder();
         }
     };
-    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 => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
                             }, 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/ChainTokenIcon.d.ts

@@ -1,5 +1,5 @@
 export declare function ChainTokenIcon({ chainUrl, tokenUrl, className, }: {
     chainUrl: string;
-    tokenUrl: string;
+    tokenUrl?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/common/ChainTokenIcon.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpCircle } from "lucide-react";
 export function ChainTokenIcon({ chainUrl, tokenUrl, className = "", }) {
-    return (_jsxs("div", { className: `relative ${className}`, children: [_jsx("img", { src: tokenUrl, alt: "Token", className: "h-full w-full rounded-full" }), _jsx("div", { className: "bg-as-on-surface-1 border-as-stroke absolute bottom-0 right-0 h-[45%] w-[45%] rounded border", children: _jsx("img", { src: chainUrl, alt: "Chain", className: "h-full w-full rounded" }) })] }));
+    return (_jsxs("div", { className: `relative ${className}`, children: [tokenUrl ? (_jsx("img", { src: tokenUrl, alt: "Token", className: "h-full w-full rounded-full" })) : (_jsx(HelpCircle, { className: "text-b3-react-foreground h-full w-full" })), _jsx("div", { className: "bg-as-on-surface-1 border-as-stroke absolute bottom-0 right-0 h-[45%] w-[45%] rounded border", children: _jsx("img", { src: chainUrl, alt: "Chain", className: "h-full w-full rounded" }) })] }));
 }

package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAccountWallet } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
+import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
@@ -21,46 +22,49 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
     const { disconnect } = useDisconnect();
     const { data: walletClient } = useWalletClient();
     const [showWalletModal, setShowWalletModal] = useState(false);
-    const [selectedWalletConnector, setSelectedWalletConnector] = useState(null);
-    const [modalStep, setModalStep] = useState("wallet-selection");
     // Define available wallet connectors
-    const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name));
+    const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name));
     // Define wallet options with icons and info
     const walletOptions = [
         {
             id: "metamask",
             name: "MetaMask",
-            icon: "🦊",
+            icon: _jsx(WalletMetamask, { size: 48 }),
             description: "Connect using MetaMask browser extension",
             connector: availableConnectors.find(c => c.name === "MetaMask"),
         },
         {
             id: "coinbase",
             name: "Coinbase Wallet",
-            icon: "🔵",
+            icon: _jsx(WalletCoinbase, { size: 48 }),
             description: "Connect using Coinbase Wallet",
             connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
         },
         {
             id: "rainbow",
             name: "Rainbow",
-            icon: "🌈",
+            icon: _jsx(WalletRainbow, { size: 48 }),
             description: "Connect using Rainbow wallet",
             connector: availableConnectors.find(c => c.name === "Rainbow"),
         },
         {
             id: "walletconnect",
             name: "WalletConnect",
-            icon: "🔗",
+            icon: _jsx(WalletWalletConnect, { size: 48 }),
             description: "Connect using WalletConnect protocol",
             connector: availableConnectors.find(c => c.name === "WalletConnect"),
         },
+        {
+            id: "phantom",
+            name: "Phantom",
+            icon: _jsx(WalletPhantom, { size: 48 }),
+            description: "Connect using Phantom wallet",
+            connector: availableConnectors.find(c => c.name === "Phantom"),
+        },
     ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
     // Reset modal state when closing
     const handleCloseModal = () => {
         setShowWalletModal(false);
-        setModalStep("wallet-selection");
-        setSelectedWalletConnector(null);
     };
     // Function to request wallet permissions for specific wallet
     const requestWalletPermissions = async (walletConnector) => {
@@ -132,22 +136,13 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
                                                                         setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
                                                                     }
                                                                 }, 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 &&
-                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"
-                                                    ? "Select a payment method"
-                                                    : `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 => {
-                                                const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
-                                                return (_jsx("button", { onClick: async () => {
-                                                        setSelectedWalletConnector(walletOption.connector);
-                                                        setModalStep("account-selection");
-                                                    }, disabled: isPending, className: `w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
-                                                        ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
-                                                        : "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));
-                                            })] }) })) : (
-                                /* Account Selection Step */
-                                _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 () => {
+                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 => {
+                                        const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
+                                        return (_jsx("button", { onClick: async () => {
                                                 handleCloseModal();
-                                                await requestWalletPermissions(selectedWalletConnector);
-                                            }, 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
-                                                                    ? `Connecting to ${selectedWalletConnector?.name}...`
-                                                                    : `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)] }));
+                                                await requestWalletPermissions(walletOption.connector);
+                                            }, disabled: isPending, className: `wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
+                                                ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+                                                : "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: [walletOption.icon, _jsxs("div", { children: [_jsxs("div", { className: "wallet-option-name 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));
+                                    }) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
 }

package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.d.ts

@@ -12,6 +12,8 @@ interface CryptoReceiveSectionProps {
     setSelectedDstToken?: (token: components["schemas"]["Token"]) => void;
     onChangeDstAmount?: (value: string) => void;
     anyspendQuote?: any;
+    dstTokenSymbol?: string;
+    dstTokenLogoURI?: string;
 }
-export declare function CryptoReceiveSection({ isDepositMode, isBuyMode, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, }: CryptoReceiveSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CryptoReceiveSection({ isDepositMode, isBuyMode, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, }: CryptoReceiveSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.js

@@ -6,10 +6,10 @@ import { formatDisplayNumber } from "../../../../shared/utils/number.js";
 import { ChevronRight } from "lucide-react";
 import { motion } from "motion/react";
 import { OrderTokenAmount } from "./OrderTokenAmount.js";
-export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, }) {
+export function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, }) {
     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.1, ease: "easeInOut" }, className: "receive-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 w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: isDepositMode ? "Deposit" : "Receive" }), selectedRecipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? formatUsername(recipientName) : shortenAddress(selectedRecipientAddress || "") }), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
             // Fixed destination token display for buy mode and deposit mode
-            _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [dstToken.metadata?.logoURI && (_jsx("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: dstToken.symbol })] })] })) : (
+            _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [(dstTokenLogoURI || dstToken.metadata?.logoURI) && (_jsx("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (
             // Token selection for regular swap mode
             _jsx(OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), _jsxs("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: [formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
                         style: "currency",