@b3dotfun/sdk 0.0.88 → 0.0.89-alpha.0

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

@@ -14,6 +14,7 @@ import {
   useAnyspendCreateOrder,
   useAnyspendOrderAndTransactions,
   useAnyspendQuote,
+  useGasPrice,
   useGeoOnrampOptions,
 } from "@b3dotfun/sdk/anyspend/react";
 import {
@@ -24,7 +25,7 @@ import {
   toast,
   TransitionPanel,
   useAccountWallet,
-  useB3,
+  useB3Config,
   useModalStore,
   useProfile,
   useRouter,
@@ -55,6 +56,7 @@ import { CryptoPaySection } from "./common/CryptoPaySection";
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { FeeDetailPanel } from "./common/FeeDetailPanel";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
+import { GasIndicator } from "./common/GasIndicator";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { PanelOnramp } from "./common/PanelOnramp";
@@ -107,6 +109,12 @@ export function AnySpend(props: {
   hideBottomNavigation?: boolean;
   /** When true, disables URL parameter management for swap configuration */
   disableUrlParamManagement?: boolean;
+  /** Custom URL to redirect to when clicking "Return to Home" on complete order screen */
+  returnToHomeUrl?: string;
+  /** Custom label for recipient display (e.g., "OBSN Telegram Bot") */
+  customRecipientLabel?: string;
+  /** Custom label for the return home button (overrides "Return to Home" / "Close") */
+  returnHomeLabel?: string;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -132,6 +140,9 @@ function AnySpendInner({
   hideHeader,
   hideBottomNavigation = false,
   disableUrlParamManagement = false,
+  returnToHomeUrl,
+  customRecipientLabel,
+  returnHomeLabel,
 }: {
   sourceChainId?: number;
   destinationTokenAddress?: string;
@@ -147,11 +158,14 @@ function AnySpendInner({
   hideHeader?: boolean;
   hideBottomNavigation?: boolean;
   disableUrlParamManagement?: boolean;
+  returnToHomeUrl?: string;
+  customRecipientLabel?: string;
+  returnHomeLabel?: string;
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
 
   // Determine if we're in "buy mode" based on whether destination token props are provided
@@ -545,6 +559,9 @@ function AnySpendInner({
   const { geoData, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } =
     useGeoOnrampOptions(srcAmountOnRamp);
 
+  // Get gas price for source chain (where the user pays from)
+  const { gasPrice: gasPriceData, isLoading: isLoadingGas } = useGasPrice(selectedSrcChainId);
+
   // Helper function to map payment method to onramp vendor
   const getOnrampVendor = (paymentMethod: FiatPaymentMethod): "coinbase" | "stripe" | "stripe-web2" | undefined => {
     switch (paymentMethod) {
@@ -1066,6 +1083,8 @@ function AnySpendInner({
               // Reset payment methods when going back
               resetPaymentMethods();
             }}
+            returnToHomeUrl={returnToHomeUrl}
+            returnHomeLabel={returnHomeLabel}
           />
         )}
         {/* {mode === "page" && <div className="h-12" />} */}
@@ -1157,6 +1176,7 @@ function AnySpendInner({
                 onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
                 onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
                 customUsdInputValues={customUsdInputValues}
+                customRecipientLabel={customRecipientLabel}
               />
             </motion.div>
           )}
@@ -1209,6 +1229,7 @@ function AnySpendInner({
               isBuyMode={isBuyMode}
               effectiveRecipientAddress={effectiveRecipientAddress}
               recipientName={recipientName || undefined}
+              customRecipientLabel={customRecipientLabel}
               onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
               dstAmount={dstAmount}
               dstToken={selectedDstToken}
@@ -1227,6 +1248,11 @@ function AnySpendInner({
           )}
         </div>
 
+        {/* Gas indicator - show when source chain has gas data */}
+        {gasPriceData && !isLoadingGas && activeTab === "crypto" && (
+          <GasIndicator gasPrice={gasPriceData} className="mt-2 w-full" />
+        )}
+
         {/* Main button section */}
         <motion.div
           initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}

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

@@ -109,6 +109,10 @@ export interface AnySpendCollectorClubPurchaseProps {
    * The partner ID
    */
   packType: string;
+  /**
+   * Force fiat payment
+   */
+  forceFiatPayment?: boolean;
 }
 
 export function AnySpendCollectorClubPurchase({
@@ -126,6 +130,7 @@ export function AnySpendCollectorClubPurchase({
   showRecipient = true,
   vendingMachineId,
   packType,
+  forceFiatPayment,
 }: AnySpendCollectorClubPurchaseProps) {
   // Calculate total amount needed (pricePerPack * packAmount)
   const totalAmount = useMemo(() => {
@@ -193,6 +198,7 @@ export function AnySpendCollectorClubPurchase({
       onSuccess={onSuccess}
       showRecipient={showRecipient}
       srcFiatAmount={srcFiatAmount}
+      forceFiatPayment={forceFiatPayment}
     />
   );
 }

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

@@ -174,6 +174,7 @@ export function AnySpendCustom(props: {
   dstChainId: number;
   dstToken: components["schemas"]["Token"];
   dstAmount: string;
+  forceFiatPayment?: boolean;
   contractAddress: string;
   encodedData: string;
   metadata: any;
@@ -217,6 +218,7 @@ function AnySpendCustomInner({
   showRecipient = true,
   onShowPointsDetail,
   srcFiatAmount: srcFiatAmountProps,
+  forceFiatPayment,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -241,6 +243,7 @@ function AnySpendCustomInner({
   showRecipient?: boolean;
   onShowPointsDetail?: () => void;
   srcFiatAmount?: string;
+  forceFiatPayment?: boolean;
 }) {
   const hasMounted = useHasMounted();
 
@@ -861,65 +864,67 @@ function AnySpendCustomInner({
         onValueChange={value => setActiveTab(value as "crypto" | "fiat")}
         className="bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5"
       >
-        <div className="w-full">
-          <div className="bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl">
-            <div
-              className={cn(
-                "bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100",
-                "h-full w-1/2",
-                activeTab === "fiat" ? "translate-x-full" : "translate-x-0",
-              )}
-              style={{ willChange: "transform" }}
-            />
-            <button
-              className={cn(
-                "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
-                activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
-              )}
-              onClick={() => {
-                setActiveTab("crypto");
-                // Reset payment methods when switching tabs
-                resetPaymentMethods();
-                setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
-              }}
-            >
-              Pay with crypto
-            </button>
-            {isOnrampSupported ? (
+        {!forceFiatPayment && (
+          <div className="w-full">
+            <div className="bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl">
+              <div
+                className={cn(
+                  "bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100",
+                  "h-full w-1/2",
+                  activeTab === "fiat" ? "translate-x-full" : "translate-x-0",
+                )}
+                style={{ willChange: "transform" }}
+              />
               <button
                 className={cn(
                   "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
-                  activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
+                  activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
                 )}
                 onClick={() => {
-                  setActiveTab("fiat");
+                  setActiveTab("crypto");
                   // Reset payment methods when switching tabs
                   resetPaymentMethods();
                   setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
                 }}
               >
-                Pay with fiat
+                Pay with crypto
               </button>
-            ) : (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    className={cn(
-                      "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
-                      "text-as-primary/50 cursor-not-allowed bg-transparent",
-                    )}
-                    disabled
-                  >
-                    Pay with fiat
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <span className="text-as-primary w-[140px]">Fiat payments are not supported for this amount</span>
-                </TooltipContent>
-              </Tooltip>
-            )}
+              {isOnrampSupported ? (
+                <button
+                  className={cn(
+                    "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
+                    activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
+                  )}
+                  onClick={() => {
+                    setActiveTab("fiat");
+                    // Reset payment methods when switching tabs
+                    resetPaymentMethods();
+                    setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+                  }}
+                >
+                  Pay with fiat
+                </button>
+              ) : (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      className={cn(
+                        "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
+                        "text-as-primary/50 cursor-not-allowed bg-transparent",
+                      )}
+                      disabled
+                    >
+                      Pay with fiat
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <span className="text-as-primary w-[140px]">Fiat payments are not supported for this amount</span>
+                  </TooltipContent>
+                </Tooltip>
+              )}
+            </div>
           </div>
-        </div>
+        )}
 
         {/* Warning */}
         {/* {srcChainId === base.id || dstChainId === base.id || activeTab === "fiat" ? (

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

@@ -1,3 +1,4 @@
+import { useGasPrice } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
@@ -25,6 +26,7 @@ import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPay
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { FeeDetailPanel } from "./common/FeeDetailPanel";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
+import { GasIndicator } from "./common/GasIndicator";
 import { OrderDetails } from "./common/OrderDetails";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
@@ -66,6 +68,12 @@ export interface AnySpendCustomExactInProps {
     anyspendPrice: GetQuoteResponse | undefined;
     isLoadingAnyspendPrice: boolean;
   }) => React.JSX.Element;
+  /** Custom URL to redirect to when clicking "Return to Home" on complete order screen */
+  returnToHomeUrl?: string;
+  /** Custom label for recipient display (e.g., "OBSN Telegram Bot") */
+  customRecipientLabel?: string;
+  /** Custom label for the return home button (overrides "Return to Home" / "Close") */
+  returnHomeLabel?: string;
 }
 
 export function AnySpendCustomExactIn(props: AnySpendCustomExactInProps) {
@@ -97,6 +105,9 @@ function AnySpendCustomExactInInner({
   orderType = "custom_exact_in",
   minDestinationAmount,
   header,
+  returnToHomeUrl,
+  customRecipientLabel,
+  returnHomeLabel,
 }: AnySpendCustomExactInProps) {
   const actionLabel = customExactInConfig?.action ?? "Custom Execution";
 
@@ -159,6 +170,9 @@ function AnySpendCustomExactInInner({
 
   const { connectedEOAWallet } = useAccountWallet();
   const setActiveWallet = useSetActiveWallet();
+
+  // Get gas price for source chain (where the user pays from)
+  const { gasPrice: gasPriceData, isLoading: isLoadingGas } = useGasPrice(selectedSrcChainId);
   const appliedPreferEoa = useRef(false);
 
   useEffect(() => {
@@ -358,6 +372,7 @@ function AnySpendCustomExactInInner({
                 onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
                 onShowFeeDetail={() => setActivePanel(PanelView.FEE_DETAIL)}
                 customUsdInputValues={customUsdInputValues}
+                customRecipientLabel={customRecipientLabel}
               />
             </motion.div>
           )}
@@ -383,6 +398,7 @@ function AnySpendCustomExactInInner({
               isBuyMode={true}
               effectiveRecipientAddress={selectedRecipientOrDefault}
               recipientName={recipientName || undefined}
+              customRecipientLabel={customRecipientLabel}
               onSelectRecipient={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
               dstAmount={dstAmount}
               dstToken={selectedDstToken}
@@ -427,6 +443,11 @@ function AnySpendCustomExactInInner({
         </ShinyButton>
       </motion.div>
 
+      {/* Gas indicator - show when source chain has gas data */}
+      {gasPriceData && !isLoadingGas && paymentType === "crypto" && (
+        <GasIndicator gasPrice={gasPriceData} className="mt-2 w-full" />
+      )}
+
       {mainFooter ? mainFooter : null}
     </div>
   );
@@ -532,6 +553,8 @@ function AnySpendCustomExactInInner({
             }}
             disableUrlParamManagement
             points={oat.data.points || undefined}
+            returnToHomeUrl={returnToHomeUrl}
+            returnHomeLabel={returnHomeLabel}
           />
         )}
       </div>

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

@@ -106,6 +106,12 @@ export interface AnySpendDepositProps {
   topChainsCount?: number;
   /** Callback when close button is clicked */
   onClose?: () => void;
+  /** Custom URL to redirect to when clicking "Return to Home" on complete order screen */
+  returnToHomeUrl?: string;
+  /** Custom label for recipient display (e.g., "OBSN Telegram Bot") */
+  customRecipientLabel?: string;
+  /** Custom label for the return home button (overrides "Return to Home" / "Close") */
+  returnHomeLabel?: string;
 }
 
 // Default supported chains
@@ -224,6 +230,9 @@ export function AnySpendDeposit({
   minPoolSize = DEFAULT_MIN_POOL_SIZE,
   topChainsCount = 3,
   onClose,
+  returnToHomeUrl,
+  customRecipientLabel,
+  returnHomeLabel,
 }: AnySpendDepositProps) {
   const { connectedEOAWallet } = useAccountWallet();
   const eoaAddress = connectedEOAWallet?.getAccount()?.address;
@@ -354,28 +363,20 @@ export function AnySpendDeposit({
             </svg>
           </button>
         )}
-        <div className="anyspend-deposit-balance-header border-secondary border-b p-5">
-          {/* Balance header */}
-          {!isBalanceLoading && totalBalance > 0 && (
-            <div className="anyspend-deposit-balance">
-              <p className="anyspend-deposit-balance-label text-as-secondary text-sm">Your Balance</p>
-              <p className="anyspend-deposit-balance-value text-as-primary text-3xl font-semibold">
-                {formatDecimal(totalBalance)} <span className="text-sm">USD</span>
-              </p>
-            </div>
-          )}
-          {isBalanceLoading && (
-            <div className="anyspend-deposit-balance-skeleton">
-              <Skeleton className="mb-2 h-4 w-24" />
-              <Skeleton className="h-8 w-32" />
-            </div>
-          )}
-        </div>
+        {/* Balance header */}
+        {!isBalanceLoading && totalBalance > 0 && (
+          <div className="anyspend-deposit-balance border-theme-border-secondary border-b p-5">
+            <p className="anyspend-deposit-balance-label text-as-secondary text-sm">Your Balance</p>
+            <p className="anyspend-deposit-balance-value text-as-primary text-3xl font-semibold">
+              {formatDecimal(totalBalance)} <span className="text-sm">USD</span>
+            </p>
+          </div>
+        )}
         <div className="anyspend-deposit-options flex flex-col gap-2 p-6">
           {/* Loading state */}
           {isBalanceLoading && (
             <div className="anyspend-deposit-chains-skeleton flex flex-col gap-2">
-              {[...Array(topChainsCount)].map((_, i) => (
+              {[1, 2].map((_, i) => (
                 <div key={i} className="border-border-primary flex items-center justify-between rounded-xl border p-4">
                   <div className="flex items-center gap-3">
                     <Skeleton className="h-6 w-6 rounded-full" />
@@ -533,6 +534,7 @@ export function AnySpendDeposit({
       <div className={cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8")}>
         {isHyperliquidDeposit ? (
           <AnySpend
+            key={selectedChainId}
             loadOrder={loadOrder}
             mode={mode}
             defaultActiveTab={paymentType}
@@ -546,9 +548,13 @@ export function AnySpendDeposit({
             hideHeader
             hideBottomNavigation
             disableUrlParamManagement
+            returnToHomeUrl={returnToHomeUrl}
+            customRecipientLabel={customRecipientLabel}
+            returnHomeLabel={returnHomeLabel}
           />
         ) : (
           <AnySpendCustomExactIn
+            key={selectedChainId}
             loadOrder={loadOrder}
             mode={mode}
             recipientAddress={recipientAddress}
@@ -567,6 +573,9 @@ export function AnySpendDeposit({
             customUsdInputValues={customUsdInputValues}
             preferEoa={preferEoa}
             customExactInConfig={depositContractConfig}
+            returnToHomeUrl={returnToHomeUrl}
+            customRecipientLabel={customRecipientLabel}
+            returnHomeLabel={returnHomeLabel}
           />
         )}
       </div>

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

@@ -25,6 +25,10 @@ export interface AnySpendDepositHypeProps {
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   customUsdInputValues?: string[];
   preferEoa?: boolean;
+  /** Custom URL to redirect to when clicking "Return to Home" on complete order screen */
+  returnToHomeUrl?: string;
+  /** Custom label for recipient display (e.g., "OBSN Telegram Bot") */
+  customRecipientLabel?: string;
 }
 
 export function AnySpendDepositHype({

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

@@ -6,6 +6,7 @@ import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useConnectModal, useDisconnect, useWalletInfo } from "thirdweb/react";
+import { createWallet } from "thirdweb/wallets";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
 
 export enum CryptoPaymentMethodType {
@@ -15,6 +16,13 @@ export enum CryptoPaymentMethodType {
   TRANSFER_CRYPTO = "transfer_crypto",
 }
 
+const recommendWallets = [
+  createWallet("io.metamask"),
+  createWallet("com.coinbase.wallet"),
+  createWallet("me.rainbow"),
+  createWallet("io.rabby"),
+];
+
 interface CryptoPaymentMethodProps {
   selectedPaymentMethod: CryptoPaymentMethodType;
   setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
@@ -47,7 +55,13 @@ export function CryptoPaymentMethod({
       if (connectedEOAWallet) {
         await disconnect(connectedEOAWallet);
       }
-      const wallet = await openConnectModal({ client, setActive: false });
+      const wallet = await openConnectModal({
+        client,
+        setActive: false,
+        size: "compact",
+        showThirdwebBranding: false,
+        wallets: recommendWallets,
+      });
       if (wallet) {
         // setActiveWallet(wallet);
         setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);

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

@@ -15,6 +15,8 @@ interface CryptoReceiveSectionProps {
   // Recipient data
   effectiveRecipientAddress?: string;
   recipientName?: string;
+  /** Custom label for recipient display (overrides recipientName) */
+  customRecipientLabel?: string;
   onSelectRecipient: () => void;
   // Token data
   dstAmount: string;
@@ -41,6 +43,7 @@ export function CryptoReceiveSection({
   isBuyMode = false,
   effectiveRecipientAddress,
   recipientName,
+  customRecipientLabel,
   onSelectRecipient,
   dstAmount,
   dstToken,
@@ -78,7 +81,8 @@ export function CryptoReceiveSection({
           >
             <>
               <span className="text-as-tertiarry flex items-center gap-1 text-sm">
-                {recipientName ? formatUsername(recipientName) : shortenAddress(effectiveRecipientAddress || "")}
+                {customRecipientLabel ||
+                  (recipientName ? formatUsername(recipientName) : shortenAddress(effectiveRecipientAddress || ""))}
               </span>
               <ChevronRight className="h-4 w-4" />
             </>

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { motion } from "motion/react";
+import type { GasPriceData } from "../../../types/gas";
+
+export interface GasIndicatorProps {
+  gasPrice: GasPriceData;
+  className?: string;
+}
+
+const LEVEL_LABELS: Record<GasPriceData["level"], string> = {
+  low: "Low",
+  normal: "Normal",
+  elevated: "Elevated",
+  high: "High",
+  spike: "Spike",
+};
+
+const LEVEL_STYLES: Record<GasPriceData["level"], string> = {
+  low: "bg-green-500/20 text-green-500",
+  normal: "bg-as-surface-tertiary text-as-secondary",
+  elevated: "bg-yellow-500/20 text-yellow-600",
+  high: "bg-orange-500/20 text-orange-500",
+  spike: "bg-red-500/20 text-red-500",
+};
+
+function formatGasPrice(gweiString: string): string {
+  const gwei = parseFloat(gweiString);
+  if (gwei < 0.001) return "<0.001";
+  if (gwei < 1) return gwei.toFixed(3);
+  if (gwei < 10) return gwei.toFixed(2);
+  return gwei.toFixed(1);
+}
+
+export function GasIndicator({ gasPrice, className }: GasIndicatorProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2 }}
+      className={cn(
+        "flex items-center justify-between rounded-lg px-3 py-2",
+        gasPrice.isSpike ? "bg-yellow-500/10" : "bg-as-surface-secondary",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <span className="text-as-secondary text-xs">Gas on {gasPrice.chainName}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className={cn("rounded px-1.5 py-0.5 text-xs font-medium", LEVEL_STYLES[gasPrice.level])}>
+          {LEVEL_LABELS[gasPrice.level]}
+        </span>
+        <span className="text-as-primary text-xs font-medium">{formatGasPrice(gasPrice.gasPriceGwei)} Gwei</span>
+      </div>
+    </motion.div>
+  );
+}