@b3dotfun/sdk 0.0.24 → 0.0.25

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

@@ -3,12 +3,11 @@ import PaymentOneClick from "./PaymentOneClick";
 import PaymentStripeWeb2 from "./PaymentStripeWeb2";
 
 interface PaymentVendorUIProps {
-  isMainnet: boolean;
   order: components["schemas"]["Order"];
   dstTokenSymbol: string;
 }
 
-export default function PaymentVendorUI({ isMainnet, order, dstTokenSymbol }: PaymentVendorUIProps) {
+export default function PaymentVendorUI({ order, dstTokenSymbol }: PaymentVendorUIProps) {
   const vendor = order.onrampMetadata?.vendor;
 
   // Handle one-click payment flows (Coinbase, Stripe redirect)
@@ -18,7 +17,7 @@ export default function PaymentVendorUI({ isMainnet, order, dstTokenSymbol }: Pa
 
   // Handle Stripe Web2 payment flow
   if (vendor === "stripe-web2") {
-    return <PaymentStripeWeb2 isMainnet={isMainnet} order={order} />;
+    return <PaymentStripeWeb2 order={order} />;
   }
 
   // Return null for unsupported vendors

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

@@ -88,7 +88,7 @@ export function RecipientSelection({
   const canConfirm = recipientAddress && isAddressValid;
 
   return (
-    <div className="mx-auto w-[460px] max-w-full">
+    <div className="recipient-selection mx-auto w-[460px] max-w-full">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex justify-around">

package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx

@@ -162,7 +162,7 @@ function WebviewOnrampPaymentInner({
   const [createdOrder, setCreatedOrder] = useState<components["schemas"]["Order"] | null>(null);
   const orderCreationAttempted = useRef(false);
 
-  const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(true, srcAmountOnRamp);
+  const { geoData, stripeWeb2Support, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(srcAmountOnRamp);
 
   const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
     onSuccess: data => {
@@ -175,7 +175,6 @@ function WebviewOnrampPaymentInner({
   });
 
   const { clientSecret, isLoadingStripeClientSecret } = useStripeClientSecret(
-    true,
     createdOrder?.stripePaymentIntentId || "",
   );
 
@@ -203,7 +202,6 @@ function WebviewOnrampPaymentInner({
           };
 
           createOrder({
-            isMainnet: true,
             recipientAddress,
             orderType: "swap",
             dstChain: getDstToken().chainId,

package/src/anyspend/react/hooks/useAnyspendCreateOnrampOrder.ts

@@ -43,7 +43,6 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
   const { mutate: createOrder, isPending } = useMutation({
     mutationFn: async (params: CreateOnrampOrderParams) => {
       const {
-        isMainnet,
         recipientAddress,
         orderType,
         dstChain,
@@ -71,7 +70,6 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
         const srcAmountOnRampInWei = parseUnits(srcFiatAmount, USDC_BASE.decimals);
 
         return await anyspendService.createOrder({
-          isMainnet,
           recipientAddress: normalizeAddress(recipientAddress),
           type: orderType,
           srcChain,

package/src/anyspend/react/hooks/useAnyspendCreateOrder.ts

@@ -7,7 +7,6 @@ import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 
 export type CreateOrderParams = {
-  isMainnet: boolean;
   recipientAddress: string;
   orderType: components["schemas"]["Order"]["type"];
   srcChain: number;
@@ -42,21 +41,10 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
   };
   const { mutate: createOrder, isPending } = useMutation({
     mutationFn: async (params: CreateOrderParams) => {
-      const {
-        isMainnet,
-        recipientAddress,
-        orderType,
-        srcChain,
-        dstChain,
-        srcToken,
-        dstToken,
-        srcAmount,
-        creatorAddress,
-      } = params;
+      const { recipientAddress, orderType, srcChain, dstChain, srcToken, dstToken, srcAmount, creatorAddress } = params;
 
       try {
         return await anyspendService.createOrder({
-          isMainnet,
           recipientAddress: normalizeAddress(recipientAddress),
           type: orderType,
           srcChain,

package/src/anyspend/react/hooks/useAnyspendOrderAndTransactions.ts

@@ -27,7 +27,7 @@ function customDeepEqual(oldData: any, newData: any): boolean {
 }
 
 // Hook to fetch and auto-refresh order status and transaction details
-export function useAnyspendOrderAndTransactions(isMainnet: boolean, orderId: string | undefined) {
+export function useAnyspendOrderAndTransactions(orderId: string | undefined) {
   const selectFn = useCallback((data: any) => {
     if (!data) return undefined;
     return data;
@@ -35,7 +35,7 @@ export function useAnyspendOrderAndTransactions(isMainnet: boolean, orderId: str
 
   const { data, isLoading, refetch, error } = useQuery<GetOrderAndTxsResponse>({
     queryKey: ["getAnyspendOrderAndTransactions", orderId],
-    queryFn: () => anyspendService.getOrderAndTransactions(isMainnet, orderId!),
+    queryFn: () => anyspendService.getOrderAndTransactions(orderId!),
     enabled: !!orderId,
     refetchInterval: 3000,
     staleTime: 1000,

package/src/anyspend/react/hooks/useAnyspendOrderHistory.ts

@@ -2,12 +2,7 @@ import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-export function useAnyspendOrderHistory(
-  isMainnet: boolean,
-  creatorAddress: string | undefined,
-  limit = 100,
-  offset = 0,
-) {
+export function useAnyspendOrderHistory(creatorAddress: string | undefined, limit = 100, offset = 0) {
   const {
     data: rawData = [],
     isLoading,
@@ -16,7 +11,7 @@ export function useAnyspendOrderHistory(
   } = useQuery({
     queryKey: ["getOrderHistory", creatorAddress, limit, offset],
     queryFn: async () => {
-      const response = await anyspendService.getOrderHistory(isMainnet, creatorAddress, limit, offset);
+      const response = await anyspendService.getOrderHistory(creatorAddress, limit, offset);
       return response.data;
     },
   });

package/src/anyspend/react/hooks/useAnyspendQuote.ts

@@ -6,7 +6,6 @@ import { GetQuoteRequest, GetQuoteResponse } from "../../types/api_req_res";
 /**
  * React hook to fetch the price or rate for a relay swap using Anyspend.
  *
- * @param isMainnet - Whether to use mainnet or testnet endpoints.
  * @param req - The request object containing source/destination chain, token addresses, and amount/price.
  * @remarks The query is enabled only if all required fields in `req` are present and the amount/price is non-zero.
  */
@@ -16,11 +15,11 @@ export type UseAnyspendQuoteResult = {
   getAnyspendQuoteError: Error | null;
   refetchAnyspendQuote: () => void;
 };
-export function useAnyspendQuote(isMainnet: boolean, req: GetQuoteRequest): UseAnyspendQuoteResult {
+export function useAnyspendQuote(req: GetQuoteRequest): UseAnyspendQuoteResult {
   const { data, isLoading, refetch, error } = useQuery({
-    queryKey: ["useAnyspendQuote", isMainnet, JSON.stringify(req)],
+    queryKey: ["useAnyspendQuote", JSON.stringify(req)],
     queryFn: (): Promise<GetQuoteResponse> => {
-      return anyspendService.getQuote(isMainnet, req);
+      return anyspendService.getQuote(req);
     },
     enabled: Boolean(
       req.srcChain &&

package/src/anyspend/react/hooks/useAnyspendTokens.ts

@@ -2,14 +2,14 @@ import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-export function useAnyspendTokenList(isMainnet: boolean, chainId: number, query: string) {
+export function useAnyspendTokenList(chainId: number, query: string) {
   const {
     data = [],
     isLoading,
     refetch,
   } = useQuery({
     queryKey: ["getAnyspendTokenList", chainId, query],
-    queryFn: () => anyspendService.getTokenList(isMainnet, chainId, query),
+    queryFn: () => anyspendService.getTokenList(chainId, query),
     enabled: true,
   });
 

package/src/anyspend/react/hooks/useCoinbaseOnrampOptions.ts

@@ -3,15 +3,10 @@ import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-export function useCoinbaseOnrampOptions(
-  isMainnet: boolean,
-  country?: string,
-  visitorData?: VisitorData,
-  isLoadingVisitorData?: boolean,
-) {
+export function useCoinbaseOnrampOptions(country?: string, visitorData?: VisitorData, isLoadingVisitorData?: boolean) {
   const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["getCoinbaseOnrampOptions", isMainnet, country, visitorData],
-    queryFn: () => anyspendService.getCoinbaseOnrampOptions(isMainnet, country!, visitorData),
+    queryKey: ["getCoinbaseOnrampOptions", country, visitorData],
+    queryFn: () => anyspendService.getCoinbaseOnrampOptions(country!, visitorData),
     enabled: Boolean(country) && !isLoadingVisitorData,
   });
 

package/src/anyspend/react/hooks/useGeoOnrampOptions.ts

@@ -5,7 +5,7 @@ import { useCoinbaseOnrampOptions } from "./useCoinbaseOnrampOptions";
 import { useGetGeo } from "./useGetGeo";
 import { useStripeSupport } from "./useStripeSupport";
 
-export function useGeoOnrampOptions(isMainnet: boolean, srcFiatAmount: string) {
+export function useGeoOnrampOptions(srcFiatAmount: string) {
   // Get fingerprint data
   const { data: fpData, isLoading: isLoadingVisitorData } = useVisitorData(
     { extendedResult: true },
@@ -19,9 +19,8 @@ export function useGeoOnrampOptions(isMainnet: boolean, srcFiatAmount: string) {
   // Use existing hooks
   const { geoData, loading: isLoadingGeo, error: geoError } = useGetGeo();
   const { coinbaseOnrampOptions, isLoadingCoinbaseOnrampOptions, coinbaseOnrampOptionsError } =
-    useCoinbaseOnrampOptions(isMainnet, geoData?.country, visitorData);
+    useCoinbaseOnrampOptions(geoData?.country, visitorData);
   const { stripeWeb2Support, isLoadingStripeSupport, stripeSupportError } = useStripeSupport(
-    isMainnet,
     srcFiatAmount,
     visitorData,
   );

package/src/anyspend/react/hooks/useStripeClientSecret.ts

@@ -2,10 +2,10 @@ import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 
-export function useStripeClientSecret(isMainnet: boolean, paymentIntentId: string) {
+export function useStripeClientSecret(paymentIntentId: string) {
   const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["stripeClientSecret", isMainnet, paymentIntentId],
-    queryFn: () => anyspendService.getStripeClientSecret(isMainnet, paymentIntentId),
+    queryKey: ["stripeClientSecret", paymentIntentId],
+    queryFn: () => anyspendService.getStripeClientSecret(paymentIntentId),
   });
 
   return useMemo(

package/src/anyspend/react/hooks/useStripeSupport.ts

@@ -3,15 +3,10 @@ import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-export function useStripeSupport(
-  isMainnet: boolean,
-  usdAmount?: string,
-  visitorData?: VisitorData,
-  isLoadingVisitorData?: boolean,
-) {
+export function useStripeSupport(usdAmount?: string, visitorData?: VisitorData, isLoadingVisitorData?: boolean) {
   const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["useStripeSupport", isMainnet, usdAmount, visitorData?.requestId, visitorData?.visitorId],
-    queryFn: () => anyspendService.checkStripeSupport(isMainnet, usdAmount, visitorData),
+    queryKey: ["useStripeSupport", usdAmount, visitorData?.requestId, visitorData?.visitorId],
+    queryFn: () => anyspendService.checkStripeSupport(usdAmount, visitorData),
     enabled: !isLoadingVisitorData,
   });
 

package/src/anyspend/services/anyspend.ts

@@ -1,4 +1,4 @@
-import { ANYSPEND_MAINNET_BASE_URL, ANYSPEND_TESTNET_BASE_URL } from "@b3dotfun/sdk/anyspend/constants";
+import { ANYSPEND_MAINNET_BASE_URL } from "@b3dotfun/sdk/anyspend/constants";
 import { OnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { getNativeToken, isNativeToken } from "@b3dotfun/sdk/anyspend/utils";
 import invariant from "invariant";
@@ -18,28 +18,18 @@ import { VisitorData } from "../types/fingerprint";
 
 // Service functions
 export const anyspendService = {
-  getTokenList: async (
-    isMainnet: boolean,
-    chainId: number,
-    query: string,
-  ): Promise<components["schemas"]["Token"][]> => {
-    const response = await fetch(
-      `${isMainnet ? ANYSPEND_MAINNET_BASE_URL : ANYSPEND_TESTNET_BASE_URL}/chains/${chainId}/tokens?limit=100&term=${query}`,
-    );
+  getTokenList: async (chainId: number, query: string): Promise<components["schemas"]["Token"][]> => {
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/chains/${chainId}/tokens?limit=100&term=${query}`);
     const body: GetTokenListResponse = await response.json();
     invariant(response.status === 200, `Failed to fetch token list for chain ${chainId}`);
     return body.data;
   },
 
-  getToken: async (
-    isMainnet: boolean,
-    chainId: number,
-    tokenAddress: string,
-  ): Promise<components["schemas"]["Token"]> => {
+  getToken: async (chainId: number, tokenAddress: string): Promise<components["schemas"]["Token"]> => {
     if (isNativeToken(tokenAddress)) {
       return getNativeToken(chainId);
     }
-    const tokenList = await anyspendService.getTokenList(isMainnet, chainId, tokenAddress);
+    const tokenList = await anyspendService.getTokenList(chainId, tokenAddress);
     const token = tokenList.find(
       (t: components["schemas"]["Token"]) => t.address.toLowerCase() === tokenAddress.toLowerCase(),
     );
@@ -49,8 +39,8 @@ export const anyspendService = {
     return token;
   },
 
-  getQuote: async (isMainnet: boolean, req: GetQuoteRequest): Promise<GetQuoteResponse> => {
-    const url = `${isMainnet ? ANYSPEND_MAINNET_BASE_URL : ANYSPEND_TESTNET_BASE_URL}/orders/quote`;
+  getQuote: async (req: GetQuoteRequest): Promise<GetQuoteResponse> => {
+    const url = `${ANYSPEND_MAINNET_BASE_URL}/orders/quote`;
     const response = await fetch(url, {
       method: "POST",
       headers: {
@@ -65,7 +55,6 @@ export const anyspendService = {
 
   // Order related
   createOrder: async ({
-    isMainnet,
     recipientAddress,
     type,
     srcChain,
@@ -80,7 +69,6 @@ export const anyspendService = {
     partnerId,
     visitorData,
   }: {
-    isMainnet: boolean;
     recipientAddress: string;
     type: string;
     srcChain: number;
@@ -95,7 +83,7 @@ export const anyspendService = {
     partnerId?: string;
     visitorData?: VisitorData;
   }) => {
-    const response = await fetch(`${isMainnet ? ANYSPEND_MAINNET_BASE_URL : ANYSPEND_TESTNET_BASE_URL}/orders`, {
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -122,16 +110,13 @@ export const anyspendService = {
     return data;
   },
 
-  getOrderAndTransactions: async (isMainnet: boolean, orderId: string | undefined): Promise<GetOrderAndTxsResponse> => {
-    const response = await fetch(
-      `${isMainnet ? ANYSPEND_MAINNET_BASE_URL : ANYSPEND_TESTNET_BASE_URL}/orders/${orderId}`,
-    );
+  getOrderAndTransactions: async (orderId: string | undefined): Promise<GetOrderAndTxsResponse> => {
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders/${orderId}`);
     const data: GetOrderAndTxsResponse = await response.json();
     return data;
   },
 
   getOrderHistory: async (
-    isMainnet: boolean,
     creatorAddress: string | undefined,
     limit = 100,
     offset = 0,
@@ -143,15 +128,12 @@ export const anyspendService = {
     if (creatorAddress) {
       params.append("creatorAddress", creatorAddress);
     }
-    const response = await fetch(
-      `${isMainnet ? ANYSPEND_MAINNET_BASE_URL : ANYSPEND_TESTNET_BASE_URL}/orders?${params.toString()}`,
-    );
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders?${params.toString()}`);
     const data: GetOrderHistoryResponse = await response.json();
     return data;
   },
 
   getCoinbaseOnrampOptions: async (
-    isMainnet: boolean,
     country: string,
     visitorData?: VisitorData,
   ): Promise<GetCoinbaseOnrampOptionsResponse> => {
@@ -161,39 +143,31 @@ export const anyspendService = {
       ...(visitorData?.requestId && { requestId: visitorData.requestId }),
       ...(visitorData?.visitorId && { fingerprintId: visitorData.visitorId }),
     });
-    const response = await fetch(
-      `${isMainnet ? ANYSPEND_MAINNET_BASE_URL : ANYSPEND_TESTNET_BASE_URL}/onramp/coinbase/options?${params.toString()}`,
-    );
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/onramp/coinbase/options?${params.toString()}`);
     const data: GetCoinbaseOnrampOptionsResponse = await response.json();
     return data;
   },
 
   checkStripeSupport: async (
-    isMainnet: boolean,
     usdAmount?: string,
     visitorData?: VisitorData,
   ): Promise<{ stripeOnramp: boolean; stripeWeb2: components["schemas"]["StripeWeb2Support"] }> => {
     const params = new URLSearchParams({
       usdAmount: usdAmount || "",
     });
-    const response = await fetch(
-      `${isMainnet ? ANYSPEND_MAINNET_BASE_URL : ANYSPEND_TESTNET_BASE_URL}/onramp/stripe/supported?${params.toString()}`,
-      {
-        headers: {
-          ...(visitorData?.requestId && { "X-Fingerprint-Request-Id": visitorData.requestId }),
-          ...(visitorData?.visitorId && { "X-Fingerprint-Visitor-Id": visitorData.visitorId }),
-        },
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/onramp/stripe/supported?${params.toString()}`, {
+      headers: {
+        ...(visitorData?.requestId && { "X-Fingerprint-Request-Id": visitorData.requestId }),
+        ...(visitorData?.visitorId && { "X-Fingerprint-Visitor-Id": visitorData.visitorId }),
       },
-    );
+    });
     const data: GetStripeSupportedResponse = await response.json();
     invariant(response.status === 200, "Failed to check Stripe support");
     return data.data;
   },
 
-  getStripeClientSecret: async (isMainnet: boolean, paymentIntentId: string): Promise<string | null> => {
-    const response = await fetch(
-      `${isMainnet ? ANYSPEND_MAINNET_BASE_URL : ANYSPEND_TESTNET_BASE_URL}/stripe/clientSecret?paymentIntentId=${paymentIntentId}`,
-    );
+  getStripeClientSecret: async (paymentIntentId: string): Promise<string | null> => {
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/stripe/clientSecret?paymentIntentId=${paymentIntentId}`);
     const data: GetStripeClientSecret = await response.json();
     invariant(response.status === 200, "Failed to get Stripe client secret");
     return data.data;

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -9,6 +9,7 @@ import {
   OrderHistory,
 } from "@b3dotfun/sdk/anyspend/react";
 import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useB3 } from "./B3Provider/useB3";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
@@ -25,47 +26,49 @@ export function B3DynamicModal() {
   const { theme } = useB3();
   const isMobile = useIsMobile();
 
-  let contentClass = `b3-modal ${theme === "dark" ? "dark" : ""}`;
   let hideCloseButton = false;
 
-  if (
-    [
-      "anySpend",
-      "anySpendNft",
-      "anySpendJoinTournament",
-      "anySpendFundTournament",
-      "anySpendStakeB3",
-      "anySpendBuySpin",
-      "anySpendOrderHistory",
-      "signInWithB3",
-      "anySpendSignatureMint",
-      "anySpendBondKit",
-    ].find(type => contentType?.type === type)
-  ) {
-    contentClass += " w-full";
-  }
+  // Define arrays for different modal type groups
+  const fullWidthTypes = [
+    "anySpend",
+    "anySpendNft",
+    "anySpendJoinTournament",
+    "anySpendFundTournament",
+    "anySpendStakeB3",
+    "anySpendBuySpin",
+    "anySpendOrderHistory",
+    "signInWithB3",
+    "anySpendSignatureMint",
+    "anySpendBondKit",
+  ];
+
+  const freestyleTypes = [
+    "anySpendNft",
+    "anySpendJoinTournament",
+    "anySpendFundTournament",
+    "anySpendStakeB3",
+    "anySpendBuySpin",
+    "anySpendSignatureMint",
+    "anySpendBondKit",
+  ];
 
-  if (
-    [
-      "anySpendNft",
-      "anySpendJoinTournament",
-      "anySpendFundTournament",
-      "anySpendStakeB3",
-      "anySpendBuySpin",
-      "anySpendSignatureMint",
-      "anySpendBondKit",
-    ].find(type => contentType?.type === type)
-  ) {
-    // Due to the dynamic of (Pay with crypto),(Pay with fiat), we want the height fixed to 90dvh but still scrollable.
-    // NOTE: Just leave it here in case we want the fixed height
-    // contentClass += " min-h-[90dvh] b3-modal-freestyle";
-    contentClass += " b3-modal-freestyle";
+  // Check if current content type is in freestyle types
+  const isFreestyleType = freestyleTypes.includes(contentType?.type as string);
+  if (isFreestyleType) {
     hideCloseButton = true;
   }
 
-  if (contentType?.type === "transak") {
-    contentClass += " transak-modal";
-  }
+  // Build content class using cn utility
+  // eslint-disable-next-line tailwindcss/no-custom-classname
+  const contentClass = cn(
+    "b3-modal",
+    theme === "dark" && "dark",
+    fullWidthTypes.includes(contentType?.type as string) && "w-full",
+    isFreestyleType && "b3-modal-freestyle",
+    contentType?.type === "signInWithB3" && "p-0",
+    contentType?.type === "anySpend" && "md:px-6",
+    contentType?.type === "transak" && "transak-modal",
+  );
 
   debug("contentType", contentType);
   const renderContent = () => {
@@ -113,17 +116,41 @@ export function B3DynamicModal() {
 
   return (
     <ModalComponent open={isOpen} onOpenChange={setB3ModalOpen}>
-      <ModalContent className={contentClass} hideCloseButton={hideCloseButton}>
+      <ModalContent
+        className={cn(
+          contentClass,
+          "rounded-2xl bg-white shadow-xl dark:bg-gray-900",
+          "border border-gray-200 dark:border-gray-800",
+          "mx-auto w-full max-w-md",
+          "sm:max-w-lg",
+        )}
+        hideCloseButton={hideCloseButton}
+      >
         <ModalTitle className="sr-only hidden">{contentType?.type || "Modal"}</ModalTitle>
         <ModalDescription className="sr-only hidden">{contentType?.type || "Modal Body"}</ModalDescription>
         <div className="no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]">
           {history.length > 0 && contentType?.showBackButton && (
             <button
               onClick={navigateBack}
-              className="b3-modal-back-button mb-4 flex items-center gap-2 transition-colors hover:text-white"
+              className="flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
             >
-              <span>←</span>
-              <span className="text-sm">Back</span>
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M15.8337 10H4.16699"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  d="M10.0003 15.8334L4.16699 10L10.0003 4.16669"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+              <span className="text-sm font-medium">Back</span>
             </button>
           )}
           {renderContent()}

package/src/global-account/react/components/B3Provider/B3Provider.native.tsx

@@ -24,14 +24,11 @@ const queryClient = new QueryClient();
  * Main B3Provider component
  */
 export function B3Provider({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  isMainnetAnySpend = true,
   theme = "light",
   children,
   accountOverride,
   environment,
 }: {
-  isMainnetAnySpend?: boolean;
   theme: "light" | "dark";
   children: React.ReactNode;
   accountOverride?: Account;
@@ -41,7 +38,7 @@ export function B3Provider({
     <QueryClientProvider client={queryClient}>
       <ThirdwebProvider>
         <InnerProvider accountOverride={accountOverride} environment={environment} theme={theme}>
-          {/* <RelayKitProviderWrapper isMainnet={isMainnetAnySpend}> */}
+          {/* <RelayKitProviderWrapper> */}
           {children}
           {/* </RelayKitProviderWrapper> */}
         </InnerProvider>

package/src/global-account/react/components/B3Provider/B3Provider.tsx

@@ -41,7 +41,6 @@ const queryClient = new QueryClient();
  * Main B3Provider component
  */
 export function B3Provider({
-  isMainnetAnySpend = true,
   theme = "light",
   children,
   accountOverride,
@@ -50,7 +49,6 @@ export function B3Provider({
   simDuneApiKey,
   toaster,
 }: {
-  isMainnetAnySpend?: boolean;
   theme: "light" | "dark";
   children: React.ReactNode;
   accountOverride?: Account;
@@ -73,7 +71,7 @@ export function B3Provider({
               theme={theme}
               automaticallySetFirstEoa={!!automaticallySetFirstEoa}
             >
-              <RelayKitProviderWrapper isMainnet={isMainnetAnySpend} simDuneApiKey={simDuneApiKey}>
+              <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
                 {children}
                 {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
                 <StyleRoot id="b3-root" />

package/src/global-account/react/components/B3Provider/RelayKitProviderWrapper.tsx

@@ -1,13 +1,11 @@
 import { RelayKitProvider } from "@reservoir0x/relay-kit-ui";
-import { fetchChainConfigs, MAINNET_RELAY_API, RelayChain, TESTNET_RELAY_API } from "@reservoir0x/relay-sdk";
+import { fetchChainConfigs, MAINNET_RELAY_API, RelayChain } from "@reservoir0x/relay-sdk";
 import { useEffect, useState } from "react";
 
 export function RelayKitProviderWrapper({
-  isMainnet,
   children,
   simDuneApiKey,
 }: {
-  isMainnet: boolean;
   children: React.ReactNode;
   simDuneApiKey?: string;
 }) {
@@ -15,16 +13,16 @@ export function RelayKitProviderWrapper({
 
   useEffect(() => {
     const fetchChains = async () => {
-      const chains = await fetchChainConfigs(isMainnet ? MAINNET_RELAY_API : TESTNET_RELAY_API);
+      const chains = await fetchChainConfigs(MAINNET_RELAY_API);
       setRelayChains(chains);
     };
     fetchChains();
-  }, [isMainnet]);
+  }, []);
 
   return (
     <RelayKitProvider
       options={{
-        baseApiUrl: isMainnet ? MAINNET_RELAY_API : TESTNET_RELAY_API,
+        baseApiUrl: MAINNET_RELAY_API,
         source: "anyspend",
         duneConfig: {
           apiKey: simDuneApiKey,