@b3dotfun/sdk 0.0.30 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -237,8 +237,7 @@
     "constants"
   ],
   "dependencies": {
-    "@amplitude/analytics-browser": "2.14.0",
-    "@b3dotfun/b3-api": "0.0.42",
+    "@b3dotfun/b3-api": "0.0.43",
     "@b3dotfun/basement-api": "0.0.11",
     "@chakra-ui/react": "2.10.7",
     "@feathersjs/authentication-client": "5.0.33",
@@ -258,7 +257,6 @@
     "@radix-ui/react-tooltip": "1.1.8",
     "@reservoir0x/relay-kit-ui": "2.15.11",
     "@reservoir0x/relay-sdk": "2.3.1",
-    "@reservoir0x/reservoir-kit-ui": "2.8.7",
     "@solana/spl-token": "^0.4.13",
     "@solana/web3.js": "^1.98.2",
     "@stripe/react-stripe-js": "^3.7.0",
@@ -270,26 +268,20 @@
     "clsx": "2.0.0",
     "cmdk": "1.0.0",
     "cssnano": "^7.0.7",
+    "debug": "^4.4.1",
     "invariant": "2.2.4",
     "js-cookie": "3.0.5",
-    "lodash": "4.17.21",
     "lucide-react": "0.424.0",
     "motion": "^12.23.11",
-    "motion-number": "0.1.7",
     "qrcode.react": "4.2.0",
     "react-intersection-observer": "9.16.0",
     "react-number-format": "5.4.3",
     "react-timeago": "8.2.0",
     "socket.io-client": "4.7.5",
     "sonner": "1.7.4",
-    "stripe": "18.2.1",
     "tailwind-merge": "2.6.0",
-    "thirdweb": "5.105.20",
     "typescript": "5.8.2",
     "vaul": "^1.1.2",
-    "viem": "2.28.1",
-    "wagmi": "2.14.15",
-    "zod": "3.25.51",
     "zustand": "4.5.6"
   },
   "devDependencies": {
@@ -300,7 +292,6 @@
     "@types/big.js": "^6.2.2",
     "@types/invariant": "2.2.37",
     "@types/js-cookie": "3.0.6",
-    "@types/lodash": "4",
     "@types/node": "22.14.0",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.1",
@@ -313,7 +304,6 @@
     "eslint-plugin-import": "2.x.x",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-tailwindcss": "3.18.0",
-    "openapi-typescript": "7.4.2",
     "postcss": "8.5.3",
     "postcss-cli": "11.0.1",
     "postcss-nesting": "^13.0.2",
@@ -333,14 +323,16 @@
   "peerDependencies": {
     "@fingerprintjs/fingerprintjs-pro-react": "^2.7.0",
     "@privy-io/react-auth": "^2.8.0",
-    "@react-three/postprocessing": "2.16.6",
-    "@readyplayerme/visage": "6.10.0",
-    "@tanstack/react-query": "5.55.0",
+    "@react-three/postprocessing": "^2.16.6",
+    "@readyplayerme/visage": "^6.10.0",
+    "@tanstack/react-query": ">=5.55.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-native-mmkv": "^3.2.0",
-    "thirdweb": "5.105.20",
-    "three": "0.175.0"
+    "thirdweb": "^5.105.20",
+    "three": "^0.175.0",
+    "wagmi": "^2.14.15",
+    "viem": "^2.28.1"
   },
   "peerDependenciesMeta": {
     "@react-three/postprocessing": {

package/src/anyspend/react/components/AnySpend.tsx

@@ -889,6 +889,7 @@ function AnySpendInner({
               onDestinationTokenChange={setSelectedDstToken}
               onDestinationChainChange={setSelectedDstChainId}
               fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
+              recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
             />
           </motion.div>
         )}

package/src/anyspend/react/components/AnySpendBuySpin.tsx

@@ -10,6 +10,7 @@ import {
   useTokenBalance,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
+import { PUBLIC_BASE_RPC_URL } from "@b3dotfun/sdk/shared/constants";
 import { baseMainnet } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -117,7 +118,7 @@ function generateEncodedDataForBuyEntriesAndSpin(user: string, quantity: string)
 
 const basePublicClient = createPublicClient({
   chain: baseMainnet,
-  transport: http(),
+  transport: http(PUBLIC_BASE_RPC_URL),
 });
 
 export function AnySpendBuySpin({

package/src/anyspend/react/components/AnySpendStakeB3.tsx

@@ -10,6 +10,7 @@ import {
   useTokenBalance,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
+import { PUBLIC_BASE_RPC_URL } from "@b3dotfun/sdk/shared/constants";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -26,7 +27,7 @@ import { UsdcIcon } from "./icons/USDCIcon";
 
 const basePublicClient = createPublicClient({
   chain: base,
-  transport: http(),
+  transport: http(PUBLIC_BASE_RPC_URL),
 });
 
 const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
@@ -36,7 +37,7 @@ function generateEncodedDataForStakingB3(amount: string, beneficiary: string): s
   const encodedData = encodeFunctionData({
     abi: ABI_ERC20_STAKING,
     functionName: "stake",
-    args: [BigInt(amount), beneficiary],
+    args: [BigInt(amount), beneficiary as `0x${string}`],
   });
   return encodedData;
 }

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -24,6 +24,11 @@ import { PanelOnramp } from "./common/PanelOnramp";
 
 const SLIPPAGE_PERCENT = 3;
 
+export const HYPE_TOKEN_DETAILS = {
+  SYMBOL: "HYPE",
+  LOGO_URI: "https://cdn.hypeduel.com/hypes-coin.svg",
+};
+
 function generateEncodedDataForDepositHype(amount: string, beneficiary: string): string {
   invariant(BigInt(amount) > 0, "Amount must be greater than zero");
   const encodedData = encodeFunctionData({
@@ -228,10 +233,13 @@ function AnySpendDepositHypeInner({
                 _recipientAddress={recipientAddress}
                 destinationToken={B3_TOKEN}
                 destinationChainId={base.id}
+                dstTokenSymbol={HYPE_TOKEN_DETAILS.SYMBOL}
+                hideDstToken
                 destinationAmount={dstAmount}
                 onDestinationTokenChange={() => {}}
                 onDestinationChainChange={() => {}}
                 fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
+                recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
               />
             </motion.div>
           )}
@@ -262,6 +270,8 @@ function AnySpendDepositHypeInner({
               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={() => {}}

package/src/anyspend/react/components/AnyspendSignatureMint.tsx

@@ -18,15 +18,15 @@ function generateEncodedDataForSignatureMint(signatureData: GenerateSigMintRespo
   invariant(payload, "Payload is required");
 
   const mintRequest = {
-    to: payload.to,
-    royaltyRecipient: payload.royaltyRecipient,
+    to: payload.to as `0x${string}`,
+    royaltyRecipient: payload.royaltyRecipient as `0x${string}`,
     royaltyBps: BigInt(payload.royaltyBps || 0),
-    primarySaleRecipient: payload.primarySaleRecipient,
+    primarySaleRecipient: payload.primarySaleRecipient as `0x${string}`,
     tokenId: BigInt(payload.tokenId || 0),
     uri: payload.uri,
     quantity: BigInt(payload.quantity || 1),
     pricePerToken: parseEther(payload.price?.toString() || "0"),
-    currency: payload.currencyAddress,
+    currency: payload.currencyAddress as `0x${string}`,
     validityStartTimestamp: BigInt(payload.mintStartTime || 0),
     validityEndTimestamp: BigInt(payload.mintEndTime || 0),
     uid: payload.uid as `0x${string}`,

package/src/anyspend/react/components/common/ChainTokenIcon.tsx

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

package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx

@@ -3,6 +3,7 @@
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+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";
@@ -42,12 +43,10 @@ export function CryptoPaymentMethod({
   const { disconnect } = useDisconnect();
   const { data: walletClient } = useWalletClient();
   const [showWalletModal, setShowWalletModal] = useState(false);
-  const [selectedWalletConnector, setSelectedWalletConnector] = useState<any>(null);
-  const [modalStep, setModalStep] = useState<"wallet-selection" | "account-selection">("wallet-selection");
 
   // Define available wallet connectors
   const availableConnectors = connectors.filter(connector =>
-    ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name),
+    ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name),
   );
 
   // Define wallet options with icons and info
@@ -55,38 +54,43 @@ export function CryptoPaymentMethod({
     {
       id: "metamask",
       name: "MetaMask",
-      icon: "🦊",
+      icon: <WalletMetamask size={48} />,
       description: "Connect using MetaMask browser extension",
       connector: availableConnectors.find(c => c.name === "MetaMask"),
     },
     {
       id: "coinbase",
       name: "Coinbase Wallet",
-      icon: "🔵",
+      icon: <WalletCoinbase size={48} />,
       description: "Connect using Coinbase Wallet",
       connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
     },
     {
       id: "rainbow",
       name: "Rainbow",
-      icon: "🌈",
+      icon: <WalletRainbow size={48} />,
       description: "Connect using Rainbow wallet",
       connector: availableConnectors.find(c => c.name === "Rainbow"),
     },
     {
       id: "walletconnect",
       name: "WalletConnect",
-      icon: "🔗",
+      icon: <WalletWalletConnect size={48} />,
       description: "Connect using WalletConnect protocol",
       connector: availableConnectors.find(c => c.name === "WalletConnect"),
     },
+    {
+      id: "phantom",
+      name: "Phantom",
+      icon: <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
@@ -258,24 +262,12 @@ export function CryptoPaymentMethod({
       {/* Wallet Connection Modal */}
       {showWalletModal &&
         createPortal(
-          <div className="pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
+          <div className="wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
             <div className="max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900">
               <div className="mb-4 flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  {modalStep === "account-selection" && (
-                    <button
-                      onClick={() => setModalStep("wallet-selection")}
-                      className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-                    >
-                      <ChevronLeft className="h-5 w-5" />
-                    </button>
-                  )}
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                    {modalStep === "wallet-selection"
-                      ? "Select a payment method"
-                      : `Connect ${selectedWalletConnector?.name}`}
-                  </h3>
-                </div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  {isConnected ? "Switch wallet or account" : "Choose wallet to connect"}
+                </h3>
                 <button
                   onClick={handleCloseModal}
                   className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
@@ -285,94 +277,51 @@ export function CryptoPaymentMethod({
               </div>
 
               <div className="space-y-4">
-                {modalStep === "wallet-selection" ? (
-                  <>
-                    {/* Custom wallet options */}
-                    <div className="space-y-3">
-                      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                        {isConnected ? "Switch wallet or account" : "Choose wallet to connect"}
-                      </h4>
-                      {walletOptions.map(walletOption => {
-                        const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
+                {/* Custom wallet options */}
+                <div className="space-y-3">
+                  {walletOptions.map(walletOption => {
+                    const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
 
-                        return (
-                          <button
-                            key={walletOption.id}
-                            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"
-                            }`}
-                          >
-                            <div className="flex items-center justify-between">
-                              <div className="flex items-center gap-3">
-                                <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"
-                                  }`}
-                                >
-                                  {walletOption.icon}
-                                </div>
-                                <div>
-                                  <div className="flex items-center gap-2">
-                                    <div className="text-sm font-semibold text-gray-900 dark:text-white">
-                                      {walletOption.name}
-                                    </div>
-                                    {isCurrentWallet && (
-                                      <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">
-                                        Connected
-                                      </span>
-                                    )}
-                                  </div>
-                                  <div className="text-xs text-gray-500 dark:text-gray-400">
-                                    {isCurrentWallet ? "Switch account or reconnect" : walletOption.description}
-                                  </div>
+                    return (
+                      <button
+                        key={walletOption.id}
+                        onClick={async () => {
+                          handleCloseModal();
+                          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"
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            {walletOption.icon}
+
+                            <div>
+                              <div className="wallet-option-name flex items-center gap-2">
+                                <div className="text-sm font-semibold text-gray-900 dark:text-white">
+                                  {walletOption.name}
                                 </div>
+                                {isCurrentWallet && (
+                                  <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">
+                                    Connected
+                                  </span>
+                                )}
+                              </div>
+                              <div className="text-xs text-gray-500 dark:text-gray-400">
+                                {isCurrentWallet ? "Switch account or reconnect" : walletOption.description}
                               </div>
-                              <ChevronRightCircle className="h-5 w-5 text-gray-400" />
                             </div>
-                          </button>
-                        );
-                      })}
-                    </div>
-                  </>
-                ) : (
-                  /* Account Selection Step */
-                  <div className="space-y-4">
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                      Connect to {selectedWalletConnector?.name} to view available accounts
-                    </p>
-                    <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"
-                    >
-                      <div className="flex items-center justify-center gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700">
-                          <Wallet className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-                        </div>
-                        <div>
-                          <div className="text-sm font-medium text-gray-900 dark:text-white">
-                            {isPending
-                              ? `Connecting to ${selectedWalletConnector?.name}...`
-                              : `Connect ${selectedWalletConnector?.name}`}
-                          </div>
-                          <div className="text-xs text-gray-500 dark:text-gray-400">
-                            {isPending ? "Please check your wallet" : "Click to connect and select account"}
                           </div>
+                          <ChevronRightCircle className="h-5 w-5 text-gray-400" />
                         </div>
-                      </div>
-                    </button>
-                  </div>
-                )}
+                      </button>
+                    );
+                  })}
+                </div>
               </div>
             </div>
           </div>,

package/src/anyspend/react/components/common/CryptoReceiveSection.tsx

@@ -24,6 +24,9 @@ interface CryptoReceiveSectionProps {
   onChangeDstAmount?: (value: string) => void;
   // Quote data
   anyspendQuote?: any;
+  // custom dst token data
+  dstTokenSymbol?: string;
+  dstTokenLogoURI?: string;
 }
 
 export function CryptoReceiveSection({
@@ -39,6 +42,8 @@ export function CryptoReceiveSection({
   setSelectedDstToken,
   onChangeDstAmount,
   anyspendQuote,
+  dstTokenSymbol,
+  dstTokenLogoURI,
 }: CryptoReceiveSectionProps) {
   return (
     <motion.div
@@ -72,10 +77,14 @@ export function CryptoReceiveSection({
         <div className="flex items-center justify-between">
           <div className="text-as-primary text-2xl font-bold">{dstAmount || "0"}</div>
           <div className="bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3">
-            {dstToken.metadata?.logoURI && (
-              <img src={dstToken.metadata.logoURI} alt={dstToken.symbol} className="h-8 w-8 rounded-full" />
+            {(dstTokenLogoURI || dstToken.metadata?.logoURI) && (
+              <img
+                src={dstTokenLogoURI || dstToken.metadata?.logoURI}
+                alt={dstTokenSymbol || dstToken.symbol}
+                className="h-8 w-8 rounded-full"
+              />
             )}
-            <span className="text-as-brand text-lg font-bold">{dstToken.symbol}</span>
+            <span className="text-as-brand text-lg font-bold">{dstTokenSymbol || dstToken.symbol}</span>
           </div>
         </div>
       ) : (

package/src/anyspend/react/components/common/OrderDetails.tsx

@@ -595,7 +595,7 @@ export const OrderDetails = memo(function OrderDetails({
           </div>
         )}
         <button
-          className="bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
+          className="order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
           onClick={mode === "page" ? handleBack : handleCloseModal}
         >
           {mode === "page" ? (
@@ -682,7 +682,7 @@ export const OrderDetails = memo(function OrderDetails({
             <a
               href={getExplorerTxUrl(order.dstChain, executeTx.txHash)}
               target="_blank"
-              className="text-as-primary/70 hover:text-as-primary"
+              className="order-success-text text-as-primary/70 hover:text-as-primary"
               style={{ whiteSpace: "normal" }} // Don't know why but class can't override.
             >
               {getOrderSuccessText({
@@ -713,7 +713,7 @@ export const OrderDetails = memo(function OrderDetails({
 
         {order.status === "executed" && (
           <button
-            className="bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
+            className="order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
             onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (
@@ -825,7 +825,7 @@ export const OrderDetails = memo(function OrderDetails({
             <a
               href={getExplorerTxUrl(order.dstChain, relayTx.txHash)}
               target="_blank"
-              className="text-as-primary/70 hover:text-as-primary"
+              className="order-success-text text-as-primary/70 hover:text-as-primary"
               style={{ whiteSpace: "normal" }}
             >
               {getOrderSuccessText({
@@ -856,7 +856,7 @@ export const OrderDetails = memo(function OrderDetails({
 
         {order.status === "executed" && (
           <button
-            className="bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
+            className="order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
             onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (

package/src/anyspend/react/components/common/OrderTokenAmount.tsx

@@ -5,11 +5,11 @@ import { useEffect, useRef } from "react";
 import { NumericFormat } from "react-number-format";
 
 import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Button } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { TokenSelector } from "@reservoir0x/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 export function OrderTokenAmount({
   disabled,
@@ -140,7 +140,7 @@ export function OrderTokenAmount({
                 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",
+                  "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,
                 )}
               >

package/src/anyspend/react/components/common/PanelOnramp.tsx

@@ -2,7 +2,7 @@ import { useCoinbaseOnrampOptions, useGeoOnrampOptions } from "@b3dotfun/sdk/any
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { ALL_CHAINS } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { Input, useGetGeo, useProfile } from "@b3dotfun/sdk/global-account/react";
-import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { cn, formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { ChevronRight, Wallet } from "lucide-react";
 import { useRef } from "react";
@@ -22,6 +22,9 @@ export function PanelOnramp({
   onDestinationTokenChange,
   onDestinationChainChange,
   fiatPaymentMethodIndex,
+  recipientSelectionPanelIndex,
+  dstTokenSymbol,
+  hideDstToken = false,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -34,6 +37,9 @@ export function PanelOnramp({
   onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
   onDestinationChainChange?: (chainId: number) => void;
   fiatPaymentMethodIndex: number;
+  recipientSelectionPanelIndex: number;
+  dstTokenSymbol?: string;
+  hideDstToken?: boolean;
 }) {
   // Get geo-based onramp options to access fee information
   const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -161,7 +167,7 @@ export function PanelOnramp({
         </div>
 
         {/* Quick Amount Buttons */}
-        <div className="mx-auto mb-6 inline-grid grid-cols-4 gap-2">
+        <div className={cn("mx-auto mb-6 inline-grid grid-cols-4 gap-2", hideDstToken && "mb-0")}>
           {["5", "10", "20", "25"].map(value => (
             <button
               key={value}
@@ -178,7 +184,7 @@ export function PanelOnramp({
         </div>
 
         {/* Token Display */}
-        {destinationToken && destinationChainId && (
+        {destinationToken && destinationChainId && !hideDstToken && (
           <OrderTokenAmountFiat
             address={_recipientAddress}
             context="to"
@@ -199,7 +205,7 @@ export function PanelOnramp({
           {_recipientAddress ? (
             <button
               className="text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700"
-              onClick={() => setActivePanel(5)} // Recipient selection panel
+              onClick={() => setActivePanel(recipientSelectionPanelIndex)} // Recipient selection panel
             >
               <span className="text-sm">
                 {recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress)}
@@ -224,7 +230,7 @@ export function PanelOnramp({
           <span className="text-as-tertiarry text-sm">Expected to receive</span>
           <div className="flex items-center gap-2">
             <span className="text-as-primary font-semibold">
-              {destinationAmount || "0"} {destinationToken?.symbol || ""}
+              {destinationAmount || "0"} {dstTokenSymbol || destinationToken?.symbol || ""}
             </span>
             <span className="text-as-tertiarry text-sm">
               on {destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""}

package/src/anyspend/react/components/common/PaySection.tsx

@@ -84,7 +84,7 @@ export function PaySection({
       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"
+      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"
     >
       <div className="flex items-center justify-between">
         <div className="text-as-primary/50 flex h-7 items-center text-sm">Pay</div>