@b3dotfun/sdk 0.0.33-alpha.0 → 0.0.33-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.33-alpha.0",
+  "version": "0.0.33-alpha.1",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -239,7 +239,6 @@
   "dependencies": {
     "@b3dotfun/b3-api": "0.0.45",
     "@b3dotfun/basement-api": "0.0.11",
-    "@chakra-ui/react": "2.10.7",
     "@feathersjs/authentication-client": "5.0.33",
     "@feathersjs/feathers": "5.0.33",
     "@feathersjs/socketio-client": "5.0.33",
@@ -261,7 +260,6 @@
     "@solana/web3.js": "^1.98.2",
     "@stripe/react-stripe-js": "^3.7.0",
     "@stripe/stripe-js": "^7.3.1",
-    "@transak/transak-sdk": "3.1.3",
     "@web3icons/react": "3.16.0",
     "big.js": "^7.0.1",
     "class-variance-authority": "0.7.0",

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

@@ -22,6 +22,7 @@ import {
   TextLoop,
   TextShimmer,
   useAccountWallet,
+  useB3,
   useModalStore,
   useProfile,
   useUnifiedChainSwitchAndExecute,
@@ -30,7 +31,7 @@ import { useRouter, useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
-import { useColorMode } from "@chakra-ui/react";
+
 import {
   createAssociatedTokenAccountInstruction,
   createTransferCheckedInstruction,
@@ -208,6 +209,10 @@ export const OrderDetails = memo(function OrderDetails({
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  // Get theme from B3Provider context
+  const { theme } = useB3();
+  const colorMode = theme || "light";
+
   // Read crypto payment method from URL parameters
   const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod") as CryptoPaymentMethodType | null;
   const effectiveCryptoPaymentMethod =
@@ -233,8 +238,6 @@ export const OrderDetails = memo(function OrderDetails({
 
   const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
 
-  const { colorMode } = useColorMode();
-
   const roundedUpSrcAmount = useMemo(() => {
     // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
     // Use 21 significant digits (max allowed by Intl.NumberFormat)

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

@@ -17,7 +17,6 @@ import { LinkAccount } from "./LinkAccount/LinkAccount";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
-import { TransakModal } from "./Transak/TransakModal";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer";
 
@@ -66,7 +65,6 @@ export function B3DynamicModal() {
     isFreestyleType && "b3-modal-freestyle",
     contentType?.type === "signInWithB3" && "p-0",
     contentType?.type === "anySpend" && "md:px-6",
-    contentType?.type === "transak" && "transak-modal",
   );
 
   debug("contentType", contentType);
@@ -90,8 +88,6 @@ export function B3DynamicModal() {
         return <AnySpendTournament {...contentType} mode="modal" action="join" />;
       case "anySpendFundTournament":
         return <AnySpendTournament {...contentType} mode="modal" action="fund" />;
-      case "transak":
-        return <TransakModal />;
       case "anySpendOrderHistory":
         return <OrderHistory onBack={() => {}} mode="modal" />;
       case "anySpendStakeB3":

package/src/global-account/react/components/index.ts

@@ -1,18 +1,18 @@
 // Core Components
-export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
 export { B3DynamicModal } from "./B3DynamicModal";
 export { B3Provider, InnerProvider } from "./B3Provider/B3Provider";
+export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper";
 export { B3Context, type B3ContextType } from "./B3Provider/types";
 export { useB3 } from "./B3Provider/useB3";
 export { StyleRoot } from "./StyleRoot";
 
 // SignInWithB3 Components
-export { AuthButton } from "./SignInWithB3/components/AuthButton";
-export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
-export { WalletRow } from "./SignInWithB3/components/WalletRow";
 export { SignInWithB3 } from "./SignInWithB3/SignInWithB3";
 export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
 export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
+export { AuthButton } from "./SignInWithB3/components/AuthButton";
+export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
+export { WalletRow } from "./SignInWithB3/components/WalletRow";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 
@@ -35,9 +35,6 @@ export { SendETHButton } from "./SendETHButton/SendETHButton";
 // SendERC20Button Components
 export { SendERC20Button } from "./SendERC20Button/SendERC20Button";
 
-// Transak Components
-export { TransakModal } from "./Transak/TransakModal";
-
 // Custom Components
 export { Button as CustomButton, buttonVariants as customButtonVariants } from "./custom/Button";
 export { ClientOnly } from "./custom/ClientOnly";
@@ -46,6 +43,15 @@ export { StaggeredFadeLoader } from "./custom/StaggeredFadeLoader";
 export { WalletConnectorIcon } from "./custom/WalletConnectorIcon";
 
 // UI Components
+export { Loading } from "./ui/Loading";
+export { ShinyButton } from "./ui/ShinyButton";
+export { TabTrigger, Tabs, TabsContent, TabsList, TabsTransitionWrapper } from "./ui/TabSystem";
+export {
+  TabTrigger as TabTriggerPrimitive,
+  TabsContent as TabsContentPrimitive,
+  TabsList as TabsListPrimitive,
+  Tabs as TabsPrimitive,
+} from "./ui/Tabs";
 export { Badge, badgeVariants } from "./ui/badge";
 export { Button, buttonVariants } from "./ui/button";
 export {
@@ -86,18 +92,9 @@ export {
 export { GlareCard } from "./ui/glare-card";
 export { GlareCardRounded } from "./ui/glare-card-rounded";
 export { Input } from "./ui/input";
-export { Loading } from "./ui/Loading";
 export { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 export { ScrollArea, ScrollBar } from "./ui/scroll-area";
-export { ShinyButton } from "./ui/ShinyButton";
 export { Skeleton } from "./ui/skeleton";
-export {
-  TabsContent as TabsContentPrimitive,
-  TabsList as TabsListPrimitive,
-  Tabs as TabsPrimitive,
-  TabTrigger as TabTriggerPrimitive,
-} from "./ui/Tabs";
-export { Tabs, TabsContent, TabsList, TabsTransitionWrapper, TabTrigger } from "./ui/TabSystem";
 export { TextLoop } from "./ui/text-loop";
 export { TextShimmer } from "./ui/text-shimmer";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";

package/src/global-account/react/stores/index.ts

@@ -7,12 +7,11 @@ export type {
   AnySpendJoinTournamentProps,
   AnySpendModalProps,
   AnySpendNftProps,
-  AnyspendOrderDetailsProps,
   AnySpendOrderHistoryProps,
   AnySpendStakeB3Props,
+  AnyspendOrderDetailsProps,
   ManageAccountModalProps,
   ModalContentType,
   RequestPermissionsModalProps,
   SignInWithB3ModalProps,
-  TransakProps,
 } from "./useModalStore";

package/src/global-account/react/stores/useModalStore.ts

@@ -194,25 +194,6 @@ export interface AnyspendOrderDetailsProps extends BaseModalProps {
   showBackButton?: boolean;
 }
 
-/**
- * Props for the Transak modal
- * Handles Transak-specific on-ramping
- */
-export interface TransakProps extends BaseModalProps {
-  /** Modal type identifier */
-  type: "transak";
-  /** Wallet address to receive the purchased crypto */
-  destinationWalletAddress?: string;
-  /** Default amount of crypto to purchase */
-  defaultCryptoAmount?: number;
-  /** Amount of fiat currency to spend */
-  fiatAmount?: number;
-  /** ISO country code for KYC and available payment methods */
-  countryCode?: string;
-  /** Callback function called when the purchase is successful */
-  onSuccess?: () => void;
-}
-
 /**
  * Props for the AnySpend order history modal
  */
@@ -336,7 +317,6 @@ export type ModalContentType =
   | AnySpendNftProps
   | AnySpendJoinTournamentProps
   | AnySpendFundTournamentProps
-  | TransakProps
   | AnySpendOrderHistoryProps
   | AnySpendStakeB3Props
   | AnySpendBuySpinProps

package/dist/cjs/global-account/react/components/Transak/TransakModal.d.ts

@@ -1 +0,0 @@
-export declare function TransakModal(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/global-account/react/components/Transak/TransakModal.js

@@ -1,110 +0,0 @@
-"use strict";
-"use client";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TransakModal = TransakModal;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("../../../../global-account/react");
-const debug_1 = __importDefault(require("../../../../shared/utils/debug"));
-const transak_sdk_1 = require("@transak/transak-sdk");
-const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
-const sonner_1 = require("sonner");
-function TransakModal() {
-    const [isLoading, setIsLoading] = (0, react_2.useState)(true);
-    const [_error, setError] = (0, react_2.useState)(null);
-    const account = (0, react_1.useAccountWallet)();
-    const { environment } = (0, react_1.useB3)();
-    console.log(`process.env.NEXT_PUBLIC_TRANSAK_API_KEY`, process.env.NEXT_PUBLIC_TRANSAK_API_KEY); // d1f4e8be-cacb-4cfa-b2cd-c591084b5ef6
-    const transakConfig = (0, react_2.useMemo)(() => {
-        return {
-            apiKey: process.env.NEXT_PUBLIC_TRANSAK_API_KEY || "", // (Required)
-            // Yes, I know it looks weird to use isDevelopment for staging, but this is how this was done on Basement. Leaving till confirming difference
-            environment: environment === "development" ? transak_sdk_1.Transak.ENVIRONMENTS.STAGING : transak_sdk_1.Transak.ENVIRONMENTS.PRODUCTION, // (Required)
-            containerId: "transakMount", // Id of the element where you want to initialize the iframe
-            themeColor: "0c68e9",
-            widgetHeight: "650px",
-            productsAvailed: "BUY",
-            hideMenu: true,
-            colorMode: "DARK",
-            backgroundColors: "000000", // TODO: figure out why this doesn't work
-            exchangeScreenTitle: "Buy ETH on B3",
-            isFeeCalculationHidden: true,
-            cryptoCurrencyCode: "ETH",
-            network: "b3",
-        };
-    }, [environment]);
-    const { ready } = (0, react_1.useB3)();
-    const modalOptions = (0, react_1.useModalStore)(state => state.contentType);
-    const isOnRamp = modalOptions?.type === "transak";
-    const destinationWalletAddress = isOnRamp ? modalOptions?.destinationWalletAddress : undefined;
-    const defaultCryptoAmount = isOnRamp ? modalOptions?.defaultCryptoAmount : undefined;
-    const onSuccess = isOnRamp ? modalOptions?.onSuccess : undefined;
-    const fiatAmount = isOnRamp ? modalOptions?.fiatAmount : undefined;
-    const countryCode = isOnRamp ? modalOptions?.countryCode : undefined;
-    (0, react_2.useEffect)(() => {
-        if (!ready || !isOnRamp)
-            return;
-        const config = {
-            ...transakConfig,
-            walletAddress: destinationWalletAddress || account?.address, // In the future, this should be set to the new global B3 SCW address
-            defaultCryptoAmount,
-            disableWalletAddressForm: !!destinationWalletAddress || !!account?.address, // Only disable the form if we have an address
-            fiatAmount: fiatAmount,
-            countryCode: countryCode,
-        };
-        const transak = new transak_sdk_1.Transak(config);
-        try {
-            transak.init();
-            // Add event listeners
-            transak_sdk_1.Transak.on("*", data => {
-                (0, debug_1.default)("@@transak", data);
-            });
-            transak_sdk_1.Transak.on(transak_sdk_1.Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
-                setIsLoading(false);
-                (0, debug_1.default)("@@transak", "Transak SDK closed!");
-            });
-            transak_sdk_1.Transak.on(transak_sdk_1.Transak.EVENTS.TRANSAK_WIDGET_INITIALISED, () => {
-                (0, debug_1.default)("@@transak", "Transak SDK initialized!");
-                setIsLoading(false);
-            });
-            transak_sdk_1.Transak.on(transak_sdk_1.Transak.EVENTS.TRANSAK_ORDER_FAILED, orderData => {
-                (0, debug_1.default)("@@transak", orderData);
-                sonner_1.toast.error("Oh no! Something went wrong. Please try again.");
-            });
-            transak_sdk_1.Transak.on(transak_sdk_1.Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, orderData => {
-                (0, debug_1.default)("@@transak", orderData);
-                sonner_1.toast.success("Successfully purchased ETH with credit card!");
-                onSuccess?.();
-            });
-        }
-        catch (err) {
-            setError(err instanceof Error ? err : new Error("Failed to initialize Transak"));
-            sonner_1.toast.error("Oh no! Something went wrong. Please try again.");
-            setIsLoading(false);
-        }
-        // Cleanup code
-        return () => {
-            transak.close();
-        };
-    }, [
-        ready,
-        account?.address,
-        destinationWalletAddress,
-        defaultCryptoAmount,
-        isOnRamp,
-        onSuccess,
-        fiatAmount,
-        transakConfig,
-        countryCode,
-    ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading && ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full min-h-[650px] flex-col items-center justify-center gap-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-24 w-24 animate-spin opacity-10" }), (0, jsx_runtime_1.jsx)(react_1.TextShimmer, { children: "Powering up our credit card processor..." })] })), (0, jsx_runtime_1.jsx)("div", { id: "transakMount", style: {
-                    display: isLoading ? "none" : "block",
-                    width: "100%",
-                    height: "650px",
-                    borderRadius: "25px",
-                    overflow: "hidden",
-                } })] }));
-}

package/dist/esm/global-account/react/components/Transak/TransakModal.d.ts

@@ -1 +0,0 @@
-export declare function TransakModal(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/Transak/TransakModal.js

@@ -1,104 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TextShimmer, useAccountWallet, useB3, useModalStore } from "../../../../global-account/react/index.js";
-import debug from "../../../../shared/utils/debug.js";
-import { Transak } from "@transak/transak-sdk";
-import { Loader2 } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
-export function TransakModal() {
-    const [isLoading, setIsLoading] = useState(true);
-    const [_error, setError] = useState(null);
-    const account = useAccountWallet();
-    const { environment } = useB3();
-    console.log(`process.env.NEXT_PUBLIC_TRANSAK_API_KEY`, process.env.NEXT_PUBLIC_TRANSAK_API_KEY); // d1f4e8be-cacb-4cfa-b2cd-c591084b5ef6
-    const transakConfig = useMemo(() => {
-        return {
-            apiKey: process.env.NEXT_PUBLIC_TRANSAK_API_KEY || "", // (Required)
-            // Yes, I know it looks weird to use isDevelopment for staging, but this is how this was done on Basement. Leaving till confirming difference
-            environment: environment === "development" ? Transak.ENVIRONMENTS.STAGING : Transak.ENVIRONMENTS.PRODUCTION, // (Required)
-            containerId: "transakMount", // Id of the element where you want to initialize the iframe
-            themeColor: "0c68e9",
-            widgetHeight: "650px",
-            productsAvailed: "BUY",
-            hideMenu: true,
-            colorMode: "DARK",
-            backgroundColors: "000000", // TODO: figure out why this doesn't work
-            exchangeScreenTitle: "Buy ETH on B3",
-            isFeeCalculationHidden: true,
-            cryptoCurrencyCode: "ETH",
-            network: "b3",
-        };
-    }, [environment]);
-    const { ready } = useB3();
-    const modalOptions = useModalStore(state => state.contentType);
-    const isOnRamp = modalOptions?.type === "transak";
-    const destinationWalletAddress = isOnRamp ? modalOptions?.destinationWalletAddress : undefined;
-    const defaultCryptoAmount = isOnRamp ? modalOptions?.defaultCryptoAmount : undefined;
-    const onSuccess = isOnRamp ? modalOptions?.onSuccess : undefined;
-    const fiatAmount = isOnRamp ? modalOptions?.fiatAmount : undefined;
-    const countryCode = isOnRamp ? modalOptions?.countryCode : undefined;
-    useEffect(() => {
-        if (!ready || !isOnRamp)
-            return;
-        const config = {
-            ...transakConfig,
-            walletAddress: destinationWalletAddress || account?.address, // In the future, this should be set to the new global B3 SCW address
-            defaultCryptoAmount,
-            disableWalletAddressForm: !!destinationWalletAddress || !!account?.address, // Only disable the form if we have an address
-            fiatAmount: fiatAmount,
-            countryCode: countryCode,
-        };
-        const transak = new Transak(config);
-        try {
-            transak.init();
-            // Add event listeners
-            Transak.on("*", data => {
-                debug("@@transak", data);
-            });
-            Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
-                setIsLoading(false);
-                debug("@@transak", "Transak SDK closed!");
-            });
-            Transak.on(Transak.EVENTS.TRANSAK_WIDGET_INITIALISED, () => {
-                debug("@@transak", "Transak SDK initialized!");
-                setIsLoading(false);
-            });
-            Transak.on(Transak.EVENTS.TRANSAK_ORDER_FAILED, orderData => {
-                debug("@@transak", orderData);
-                toast.error("Oh no! Something went wrong. Please try again.");
-            });
-            Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, orderData => {
-                debug("@@transak", orderData);
-                toast.success("Successfully purchased ETH with credit card!");
-                onSuccess?.();
-            });
-        }
-        catch (err) {
-            setError(err instanceof Error ? err : new Error("Failed to initialize Transak"));
-            toast.error("Oh no! Something went wrong. Please try again.");
-            setIsLoading(false);
-        }
-        // Cleanup code
-        return () => {
-            transak.close();
-        };
-    }, [
-        ready,
-        account?.address,
-        destinationWalletAddress,
-        defaultCryptoAmount,
-        isOnRamp,
-        onSuccess,
-        fiatAmount,
-        transakConfig,
-        countryCode,
-    ]);
-    return (_jsxs(_Fragment, { children: [isLoading && (_jsxs("div", { className: "flex h-full min-h-[650px] flex-col items-center justify-center gap-4", children: [_jsx(Loader2, { className: "h-24 w-24 animate-spin opacity-10" }), _jsx(TextShimmer, { children: "Powering up our credit card processor..." })] })), _jsx("div", { id: "transakMount", style: {
-                    display: isLoading ? "none" : "block",
-                    width: "100%",
-                    height: "650px",
-                    borderRadius: "25px",
-                    overflow: "hidden",
-                } })] }));
-}

package/dist/types/global-account/react/components/Transak/TransakModal.d.ts

@@ -1 +0,0 @@
-export declare function TransakModal(): import("react/jsx-runtime").JSX.Element;

package/src/global-account/react/components/Transak/TransakModal.tsx

@@ -1,131 +0,0 @@
-"use client";
-
-import { TextShimmer, useAccountWallet, useB3, useModalStore } from "@b3dotfun/sdk/global-account/react";
-import debug from "@b3dotfun/sdk/shared/utils/debug";
-import { Transak, TransakConfig } from "@transak/transak-sdk";
-import { Loader2 } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
-
-export function TransakModal() {
-  const [isLoading, setIsLoading] = useState(true);
-  const [_error, setError] = useState<Error | null>(null);
-
-  const account = useAccountWallet();
-  const { environment } = useB3();
-
-  console.log(`process.env.NEXT_PUBLIC_TRANSAK_API_KEY`, process.env.NEXT_PUBLIC_TRANSAK_API_KEY); // d1f4e8be-cacb-4cfa-b2cd-c591084b5ef6
-
-  const transakConfig = useMemo((): TransakConfig => {
-    return {
-      apiKey: process.env.NEXT_PUBLIC_TRANSAK_API_KEY || "", // (Required)
-      // Yes, I know it looks weird to use isDevelopment for staging, but this is how this was done on Basement. Leaving till confirming difference
-      environment: environment === "development" ? Transak.ENVIRONMENTS.STAGING : Transak.ENVIRONMENTS.PRODUCTION, // (Required)
-      containerId: "transakMount", // Id of the element where you want to initialize the iframe
-      themeColor: "0c68e9",
-      widgetHeight: "650px",
-      productsAvailed: "BUY",
-      hideMenu: true,
-      colorMode: "DARK",
-      backgroundColors: "000000", // TODO: figure out why this doesn't work
-      exchangeScreenTitle: "Buy ETH on B3",
-      isFeeCalculationHidden: true,
-      cryptoCurrencyCode: "ETH",
-      network: "b3",
-    };
-  }, [environment]);
-
-  const { ready } = useB3();
-  const modalOptions = useModalStore(state => state.contentType);
-  const isOnRamp = modalOptions?.type === "transak";
-  const destinationWalletAddress = isOnRamp ? modalOptions?.destinationWalletAddress : undefined;
-  const defaultCryptoAmount = isOnRamp ? modalOptions?.defaultCryptoAmount : undefined;
-  const onSuccess = isOnRamp ? modalOptions?.onSuccess : undefined;
-  const fiatAmount = isOnRamp ? modalOptions?.fiatAmount : undefined;
-  const countryCode = isOnRamp ? modalOptions?.countryCode : undefined;
-
-  useEffect(() => {
-    if (!ready || !isOnRamp) return;
-
-    const config = {
-      ...transakConfig,
-      walletAddress: destinationWalletAddress || account?.address, // In the future, this should be set to the new global B3 SCW address
-      defaultCryptoAmount,
-      disableWalletAddressForm: !!destinationWalletAddress || !!account?.address, // Only disable the form if we have an address
-      fiatAmount: fiatAmount,
-      countryCode: countryCode,
-    };
-
-    const transak = new Transak(config);
-
-    try {
-      transak.init();
-
-      // Add event listeners
-      Transak.on("*", data => {
-        debug("@@transak", data);
-      });
-
-      Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
-        setIsLoading(false);
-        debug("@@transak", "Transak SDK closed!");
-      });
-
-      Transak.on(Transak.EVENTS.TRANSAK_WIDGET_INITIALISED, () => {
-        debug("@@transak", "Transak SDK initialized!");
-        setIsLoading(false);
-      });
-
-      Transak.on(Transak.EVENTS.TRANSAK_ORDER_FAILED, orderData => {
-        debug("@@transak", orderData);
-        toast.error("Oh no! Something went wrong. Please try again.");
-      });
-
-      Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, orderData => {
-        debug("@@transak", orderData);
-        toast.success("Successfully purchased ETH with credit card!");
-        onSuccess?.();
-      });
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error("Failed to initialize Transak"));
-      toast.error("Oh no! Something went wrong. Please try again.");
-      setIsLoading(false);
-    }
-
-    // Cleanup code
-    return () => {
-      transak.close();
-    };
-  }, [
-    ready,
-    account?.address,
-    destinationWalletAddress,
-    defaultCryptoAmount,
-    isOnRamp,
-    onSuccess,
-    fiatAmount,
-    transakConfig,
-    countryCode,
-  ]);
-
-  return (
-    <>
-      {isLoading && (
-        <div className="flex h-full min-h-[650px] flex-col items-center justify-center gap-4">
-          <Loader2 className="h-24 w-24 animate-spin opacity-10" />
-          <TextShimmer>Powering up our credit card processor...</TextShimmer>
-        </div>
-      )}
-      <div
-        id="transakMount"
-        style={{
-          display: isLoading ? "none" : "block",
-          width: "100%",
-          height: "650px",
-          borderRadius: "25px",
-          overflow: "hidden",
-        }}
-      />
-    </>
-  );
-}