@b3dotfun/sdk 0.0.33-alpha.1 → 0.0.33

package/dist/esm/global-account/react/components/B3DynamicModal.js

@@ -9,6 +9,7 @@ import { LinkAccount } from "./LinkAccount/LinkAccount.js";
 import { ManageAccount } from "./ManageAccount/ManageAccount.js";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions.js";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
+import { TransakModal } from "./Transak/TransakModal.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog.js";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer.js";
 const debug = debugB3React("B3DynamicModal");
@@ -44,7 +45,7 @@ export function B3DynamicModal() {
     const hideCloseButton = isFreestyleType;
     // 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) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:px-6");
+    const contentClass = cn("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "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 = () => {
         if (!contentType)
@@ -66,6 +67,8 @@ export function B3DynamicModal() {
                 return _jsx(AnySpendTournament, { ...contentType, mode: "modal", action: "join" });
             case "anySpendFundTournament":
                 return _jsx(AnySpendTournament, { ...contentType, mode: "modal", action: "fund" });
+            case "transak":
+                return _jsx(TransakModal, {});
             case "anySpendOrderHistory":
                 return _jsx(OrderHistory, { onBack: () => { }, mode: "modal" });
             case "anySpendStakeB3":

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

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

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

@@ -0,0 +1,104 @@
+"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/esm/global-account/react/components/index.d.ts

@@ -1,15 +1,15 @@
+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";
-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";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
@@ -19,15 +19,12 @@ export { AccountAssets } from "./AccountAssets/AccountAssets";
 export { MintButton } from "./MintButton/MintButton";
 export { SendETHButton } from "./SendETHButton/SendETHButton";
 export { SendERC20Button } from "./SendERC20Button/SendERC20Button";
+export { TransakModal } from "./Transak/TransakModal";
 export { Button as CustomButton, buttonVariants as customButtonVariants } from "./custom/Button";
 export { ClientOnly } from "./custom/ClientOnly";
 export { CopyToClipboard } from "./custom/CopyToClipboard";
 export { StaggeredFadeLoader } from "./custom/StaggeredFadeLoader";
 export { WalletConnectorIcon } from "./custom/WalletConnectorIcon";
-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 { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "./ui/command";
@@ -36,9 +33,13 @@ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
 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/dist/esm/global-account/react/components/index.js

@@ -1,17 +1,17 @@
 // Core Components
+export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper.js";
 export { B3DynamicModal } from "./B3DynamicModal.js";
 export { B3Provider, InnerProvider } from "./B3Provider/B3Provider.js";
-export { RelayKitProviderWrapper } from "./B3Provider/RelayKitProviderWrapper.js";
 export { B3Context } from "./B3Provider/types.js";
 export { useB3 } from "./B3Provider/useB3.js";
 export { StyleRoot } from "./StyleRoot.js";
 // SignInWithB3 Components
-export { SignInWithB3 } from "./SignInWithB3/SignInWithB3.js";
-export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
-export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy.js";
 export { AuthButton } from "./SignInWithB3/components/AuthButton.js";
 export { PermissionItem } from "./SignInWithB3/components/PermissionItem.js";
 export { WalletRow } from "./SignInWithB3/components/WalletRow.js";
+export { SignInWithB3 } from "./SignInWithB3/SignInWithB3.js";
+export { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
+export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy.js";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep.js";
 export { getConnectOptionsFromStrategy, isWalletType } from "./SignInWithB3/utils/signInUtils.js";
 // ManageAccount Components
@@ -27,6 +27,8 @@ export { MintButton } from "./MintButton/MintButton.js";
 export { SendETHButton } from "./SendETHButton/SendETHButton.js";
 // SendERC20Button Components
 export { SendERC20Button } from "./SendERC20Button/SendERC20Button.js";
+// Transak Components
+export { TransakModal } from "./Transak/TransakModal.js";
 // Custom Components
 export { Button as CustomButton, buttonVariants as customButtonVariants } from "./custom/Button.js";
 export { ClientOnly } from "./custom/ClientOnly.js";
@@ -34,10 +36,6 @@ export { CopyToClipboard } from "./custom/CopyToClipboard.js";
 export { StaggeredFadeLoader } from "./custom/StaggeredFadeLoader.js";
 export { WalletConnectorIcon } from "./custom/WalletConnectorIcon.js";
 // UI Components
-export { Loading } from "./ui/Loading.js";
-export { ShinyButton } from "./ui/ShinyButton.js";
-export { TabTrigger, Tabs, TabsContent, TabsList, TabsTransitionWrapper } from "./ui/TabSystem.js";
-export { TabTrigger as TabTriggerPrimitive, TabsContent as TabsContentPrimitive, TabsList as TabsListPrimitive, Tabs as TabsPrimitive, } from "./ui/Tabs.js";
 export { Badge, badgeVariants } from "./ui/badge.js";
 export { Button, buttonVariants } from "./ui/button.js";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "./ui/command.js";
@@ -46,9 +44,13 @@ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
 export { GlareCard } from "./ui/glare-card.js";
 export { GlareCardRounded } from "./ui/glare-card-rounded.js";
 export { Input } from "./ui/input.js";
+export { Loading } from "./ui/Loading.js";
 export { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 export { ScrollArea, ScrollBar } from "./ui/scroll-area.js";
+export { ShinyButton } from "./ui/ShinyButton.js";
 export { Skeleton } from "./ui/skeleton.js";
+export { TabsContent as TabsContentPrimitive, TabsList as TabsListPrimitive, Tabs as TabsPrimitive, TabTrigger as TabTriggerPrimitive, } from "./ui/Tabs.js";
+export { Tabs, TabsContent, TabsList, TabsTransitionWrapper, TabTrigger } from "./ui/TabSystem.js";
 export { TextLoop } from "./ui/text-loop.js";
 export { TextShimmer } from "./ui/text-shimmer.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip.js";

package/dist/esm/global-account/react/stores/index.d.ts

@@ -1,3 +1,3 @@
 export { useAuthStore } from "./useAuthStore";
 export { useModalStore } from "./useModalStore";
-export type { AnySpendBuySpinProps, AnySpendFundTournamentProps, AnySpendJoinTournamentProps, AnySpendModalProps, AnySpendNftProps, AnySpendOrderHistoryProps, AnySpendStakeB3Props, AnyspendOrderDetailsProps, ManageAccountModalProps, ModalContentType, RequestPermissionsModalProps, SignInWithB3ModalProps, } from "./useModalStore";
+export type { AnySpendBuySpinProps, AnySpendFundTournamentProps, AnySpendJoinTournamentProps, AnySpendModalProps, AnySpendNftProps, AnyspendOrderDetailsProps, AnySpendOrderHistoryProps, AnySpendStakeB3Props, ManageAccountModalProps, ModalContentType, RequestPermissionsModalProps, SignInWithB3ModalProps, TransakProps, } from "./useModalStore";

package/dist/esm/global-account/react/stores/useModalStore.d.ts

@@ -183,6 +183,24 @@ export interface AnyspendOrderDetailsProps extends BaseModalProps {
     /** Whether to show the back button */
     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
  */
@@ -290,7 +308,7 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | TransakProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps;
 /**
  * State interface for the modal store
  */