@b3dotfun/sdk 0.0.33-alpha.1 → 0.0.33

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

@@ -0,0 +1,131 @@
+"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",
+        }}
+      />
+    </>
+  );
+}

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 { 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 { SignInWithB3 } from "./SignInWithB3/SignInWithB3";
+export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
+export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 
@@ -35,6 +35,9 @@ 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";
@@ -43,15 +46,6 @@ 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 {
@@ -92,9 +86,18 @@ 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,11 +7,12 @@ 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,6 +194,25 @@ 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
  */
@@ -317,6 +336,7 @@ export type ModalContentType =
   | AnySpendNftProps
   | AnySpendJoinTournamentProps
   | AnySpendFundTournamentProps
+  | TransakProps
   | AnySpendOrderHistoryProps
   | AnySpendStakeB3Props
   | AnySpendBuySpinProps