@b3dotfun/sdk 0.0.7-alpha.2 → 0.0.7-alpha.21

package/src/global-account/react/components/SignInWithB3/SignIn.tsx

@@ -0,0 +1,190 @@
+import {
+  SignInWithB3,
+  SignInWithB3ModalProps,
+  StyleRoot,
+  useAccountWallet,
+  useAuthentication,
+  useB3,
+  useIsMobile,
+} from "@b3dotfun/sdk/global-account/react";
+import Icon from "@b3dotfun/sdk/global-account/react/components/custom/Icon";
+import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
+import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
+import { ReactNode, useEffect } from "react";
+import { useConnectedWallets, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { ManageAccountButton } from "../custom/ManageAccountButton";
+
+type SignInProps = {
+  className?: string;
+  isMobile?: boolean;
+};
+
+type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton"> & {
+  buttonText?: string | ReactNode;
+  loggedInButtonText?: string | ReactNode;
+  loadingButtonText?: string | ReactNode;
+  withLogo?: boolean;
+} & SignInProps;
+
+export function SignIn(props: SignInWithB3Props) {
+  const { className } = props;
+  const { automaticallySetFirstEoa } = useB3();
+  const {
+    wallet,
+    address: globalAddress,
+    ensName,
+    connectedSmartWallet,
+    connectedEOAWallet,
+    isActiveSmartWallet,
+    isActiveEOAWallet,
+    smartWalletIcon,
+    eoaWalletIcon,
+  } = useAccountWallet();
+
+  const isMobile = useIsMobile();
+  const { logout } = useAuthentication(String(process.env.NEXT_PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID));
+  const onDisconnect = async () => {
+    await logout();
+  };
+
+  const connectedWallets = useConnectedWallets();
+
+  const { data: walletInfo } = useWalletInfo(isActiveSmartWallet ? connectedSmartWallet?.id : connectedEOAWallet?.id);
+
+  const setActiveWallet = useSetActiveWallet();
+
+  const handleSetActiveAccount = (selectedWalletId: string | undefined) => {
+    if (
+      !selectedWalletId ||
+      !connectedWallets ||
+      !connectedEOAWallet ||
+      !connectedSmartWallet ||
+      !automaticallySetFirstEoa
+    )
+      return;
+    setActiveWallet(selectedWalletId === ecosystemWalletId ? connectedSmartWallet : connectedEOAWallet);
+  };
+
+  // Automatically set EOA wallet as active when available
+  useEffect(() => {
+    if (connectedEOAWallet && automaticallySetFirstEoa) {
+      setActiveWallet(connectedEOAWallet);
+    }
+  }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
+
+  // Desktop version - original dropdown menu
+  return (
+    <StyleRoot>
+      <Menu className={`relative flex items-center ${className || ""}`} as="div">
+        {globalAddress ? (
+          <>
+            <MenuButton className="bg-theme-on-surface-2 group flex h-10 items-center gap-1 rounded-xl px-3">
+              {!!wallet.meta?.icon && (
+                <img
+                  src={wallet.meta.icon}
+                  alt={wallet.meta.icon}
+                  className="bg-theme-primary h-6 w-6 rounded-full object-cover opacity-100"
+                />
+              )}
+              <div className="text-body-1m text-theme-secondary">
+                {ensName ? ensName : truncateAddress(globalAddress)}
+              </div>
+            </MenuButton>
+            <Transition
+              enter="duration-200 ease-out"
+              enterFrom="scale-95 opacity-0"
+              enterTo="scale-100 opacity-100"
+              leave="duration-300 ease-out"
+              leaveFrom="scale-100 opacity-100"
+              leaveTo="scale-95 opacity-0"
+            >
+              <MenuItems
+                className="b3-root shadow-depth-1 absolute -right-4 top-full min-w-64 rounded-2xl border lg:right-0"
+                modal={false}
+                // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
+                anchor={isMobile ? "top end" : undefined}
+              >
+                <div className="bg-b3-react-background">
+                  {connectedEOAWallet ? (
+                    <div
+                      className={cn(
+                        "border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3",
+                        "hover:bg-theme-on-surface-2",
+                      )}
+                      onClick={() => handleSetActiveAccount(connectedEOAWallet?.id)}
+                    >
+                      <div className="flex items-center">
+                        <img
+                          className="bg-theme-primary h-16 w-16 rounded-full opacity-100"
+                          src={eoaWalletIcon}
+                          alt={connectedEOAWallet?.id}
+                        />
+                        <div className="ml-4 grow">
+                          {ensName && <div className="text-title-1s">{ensName}</div>}
+                          <div className="text-title-1s">{truncateAddress(globalAddress)}</div>
+                          <div className="text-body-1m text-theme-secondary">{walletInfo?.name}</div>
+                        </div>
+                      </div>
+                      {isActiveEOAWallet && <Icon className="fill-theme-primary" name="check" />}
+                    </div>
+                  ) : (
+                    connectedSmartWallet && (
+                      <div
+                        className={cn(
+                          "mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3",
+                          isActiveSmartWallet ? "bg-theme-n-8" : "bg-b3-react-background hover:bg-theme-on-surface-2",
+                        )}
+                        onClick={() => handleSetActiveAccount(connectedSmartWallet?.id)}
+                      >
+                        <div className="flex items-center">
+                          <img
+                            className="bg-theme-primary h-16 w-16 rounded-full opacity-100"
+                            src={smartWalletIcon}
+                            alt={connectedSmartWallet?.id}
+                          />
+                          <div className="pl-4.5 grow">
+                            {ensName && <div className="text-title-1s">{ensName}</div>}
+                            <div className="text-title-1s">{truncateAddress(globalAddress)}</div>
+                            <div className="text-body-1m text-theme-secondary">Smart wallet</div>
+                          </div>
+                        </div>
+                        {isActiveSmartWallet && <Icon className="fill-theme-primary" name="check" />}
+                      </div>
+                    )
+                  )}
+
+                  <div className="ml-3">
+                    <ManageAccountButton {...props} className="w-[calc(100%-12px)]" />
+                  </div>
+
+                  <button className="mb-2 w-full space-y-1" onClick={onDisconnect}>
+                    <div className="hover:bg-theme-on-surface-2 group flex h-12 items-center rounded-xl px-4 transition-colors">
+                      <Icon
+                        className="fill-theme-secondary group-hover:fill-theme-primary mr-4 shrink-0 transition-colors"
+                        name="logout"
+                      />
+                      <div className="text-base-1s text-theme-secondary group-hover:text-theme-primary mr-auto transition-colors">
+                        Disconnect
+                      </div>
+                    </div>
+                  </button>
+                </div>
+              </MenuItems>
+            </Transition>
+          </>
+        ) : (
+          <SignInWithB3
+            closeAfterLogin={true}
+            onLoginSuccess={async globalAccount => {
+              console.log("User authenticated with Global Account!", globalAccount);
+            }}
+            {...props}
+          />
+        )}
+      </Menu>
+    </StyleRoot>
+  );
+}
+
+export default SignIn;

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

@@ -1,9 +1,17 @@
-import { useAuthentication } from "@b3dotfun/sdk/global-account/react";
-import { Button, StyleRoot, SignInWithB3ModalProps, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import {
+  Button,
+  SignInWithB3ModalProps,
+  StyleRoot,
+  useAuthentication,
+  useIsMobile,
+  useModalStore,
+} from "@b3dotfun/sdk/global-account/react";
 import { ReactNode, useEffect } from "react";
 import { useActiveAccount } from "thirdweb/react";
+import { ManageAccountButton } from "../custom/ManageAccountButton";
+import { Loading } from "../ui/Loading";
 
-type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton"> & {
+export type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton"> & {
   buttonText?: string | ReactNode;
   loggedInButtonText?: string | ReactNode;
   loadingButtonText?: string | ReactNode;
@@ -14,6 +22,7 @@ export function SignInWithB3(props: SignInWithB3Props) {
   const { setB3ModalOpen, setB3ModalContentType, setEcoSystemAccountAddress } = useModalStore();
   const account = useActiveAccount();
   const { isAuthenticating, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (account) {
@@ -25,34 +34,13 @@ export function SignInWithB3(props: SignInWithB3Props) {
     setB3ModalContentType({
       ...props,
       type: "signInWithB3",
-      showBackButton: false
-    });
-    setB3ModalOpen(true);
-  };
-
-  const handleClickManageAccount = () => {
-    setB3ModalContentType({
-      ...props,
-      type: "manageAccount"
+      showBackButton: false,
     });
     setB3ModalOpen(true);
   };
 
   if (isAuthenticated) {
-    return (
-      <StyleRoot>
-        <Button
-          onClick={handleClickManageAccount}
-          style={{ backgroundColor: "#3368ef" }}
-          className="flex items-center gap-2 text-white"
-        >
-          {props.withLogo !== false && (
-            <img src="https://cdn.b3.fun/b3_logo_white.svg" alt="B3 Logo" className="h-5 w-5" />
-          )}
-          {props.loggedInButtonText || "Manage Account"}
-        </Button>
-      </StyleRoot>
-    );
+    return <ManageAccountButton {...props} />;
   }
 
   if (isAuthenticating) {
@@ -62,7 +50,7 @@ export function SignInWithB3(props: SignInWithB3Props) {
           {props.withLogo !== false && (
             <img src="https://cdn.b3.fun/b3_logo_white.svg" alt="B3 Logo" className="h-5 w-5" />
           )}
-          {props.loadingButtonText || "Signing in..."}
+          {props.loadingButtonText || (isMobile ? <Loading size="sm" /> : "Signing in…")}
         </Button>
       </StyleRoot>
     );
@@ -73,7 +61,7 @@ export function SignInWithB3(props: SignInWithB3Props) {
       <Button
         onClick={handleClick}
         style={{ backgroundColor: "#3368ef" }}
-        className="flex items-center gap-2 font-medium text-white"
+        className="b3-sign-in-button flex items-center gap-2 font-medium text-white"
       >
         {props.buttonText ? (
           props.buttonText

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -4,7 +4,7 @@ import {
   useGetAllTWSigners,
   useSiwe,
   SignInWithB3ModalProps,
-  useModalStore
+  useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useCallback, useEffect, useState } from "react";
@@ -32,7 +32,7 @@ export function SignInWithB3Flow({
   closeAfterLogin = false,
   loginWithSiwe = false,
   source = "signInWithB3Button",
-  signersEnabled = false
+  signersEnabled = false,
 }: SignInWithB3ModalProps) {
   const { setUser, automaticallySetFirstEoa } = useB3();
   const [step, setStep] = useState<"login" | "permissions" | null>(source === "requestPermissions" ? null : "login");
@@ -45,13 +45,13 @@ export function SignInWithB3Flow({
   const {
     data: signers,
     refetch: refetchSigners,
-    isFetching: isFetchingSigners
+    isFetching: isFetchingSigners,
   } = useGetAllTWSigners({
     chain,
     accountAddress: account?.address,
     queryOptions: {
-      enabled: signersEnabled
-    }
+      enabled: signersEnabled,
+    },
   });
   const { authenticate } = useSiwe();
   const [authenticatingWithB3, setAuthenticatingWithB3] = useState(false);
@@ -88,7 +88,7 @@ export function SignInWithB3Flow({
     debug("@@SignInWithB3Flow:useEffect", {
       loginComplete,
       isFetchingSigners,
-      source
+      source,
     });
 
     if (loginComplete && !isFetchingSigners) {
@@ -103,7 +103,7 @@ export function SignInWithB3Flow({
           setB3ModalContentType({
             type: "manageAccount",
             chain,
-            partnerId
+            partnerId,
           });
         }
       } else if (source !== "requestPermissions") {
@@ -121,7 +121,7 @@ export function SignInWithB3Flow({
       setB3ModalContentType({
         type: "manageAccount",
         chain,
-        partnerId
+        partnerId,
       });
     }
   }, [
@@ -136,7 +136,7 @@ export function SignInWithB3Flow({
     chain,
     onSessionKeySuccess,
     setB3ModalOpen,
-    signersEnabled
+    signersEnabled,
   ]);
 
   debug("render", {
@@ -145,7 +145,7 @@ export function SignInWithB3Flow({
     account,
     signers,
     refetchCount,
-    refetchError
+    refetchError,
   });
 
   // Keep this effect for handling closeAfterLogin when adding new session keys
@@ -168,7 +168,7 @@ export function SignInWithB3Flow({
       partnerId,
       closeAfterLogin,
       loginWithSiwe,
-      source: "requestPermissions"
+      source: "requestPermissions",
     });
   }, [
     chain,
@@ -180,7 +180,7 @@ export function SignInWithB3Flow({
     partnerId,
     sessionKeyAddress,
     setB3ModalContentType,
-    strategies
+    strategies,
   ]);
 
   const handleLoginSuccess = useCallback(
@@ -196,7 +196,7 @@ export function SignInWithB3Flow({
       setLoginComplete(true);
       setAuthenticatingWithB3(false);
     },
-    [authenticate, loginWithSiwe, onLoginSuccess, setUser]
+    [authenticate, loginWithSiwe, onLoginSuccess, setUser],
   );
 
   useEffect(() => {
@@ -206,7 +206,7 @@ export function SignInWithB3Flow({
         chain,
         sessionKeyAddress,
         onSuccess: onSessionKeySuccessEnhanced,
-        onError
+        onError,
       });
     }
   }, [chain, onError, onSessionKeySuccessEnhanced, sessionKeyAddress, setB3ModalContentType, step]);

package/src/global-account/react/components/SignInWithB3/SignInWithB3Privy.tsx

@@ -2,7 +2,7 @@ import {
   Loading,
   useAuthentication,
   useHandleConnectWithPrivy,
-  useAuthStore
+  useAuthStore,
 } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useEffect } from "react";
@@ -26,7 +26,7 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: Sign
 
   debug("@@SignInWithB3Privy", {
     isLoading,
-    fullToken
+    fullToken,
   });
 
   useEffect(() => {

package/src/global-account/react/components/SignInWithB3/components/AuthButton.tsx

@@ -4,7 +4,7 @@ import { strategyIcons } from "../utils/signInUtils";
 export function AuthButton({
   strategy,
   onClick,
-  isLoading
+  isLoading,
 }: {
   strategy: string;
   onClick: () => void;

package/src/global-account/react/components/SignInWithB3/components/WalletRow.tsx

@@ -5,7 +5,7 @@ import { Button } from "../../custom/Button";
 export function WalletRow({
   walletId,
   onClick,
-  isLoading
+  isLoading,
 }: {
   walletId: WalletId;
   onClick: () => void;

package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx

@@ -32,10 +32,10 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
     {
       query: {
         partnerId,
-        $limit: 1
-      }
+        $limit: 1,
+      },
     },
-    !!partnerId
+    !!partnerId,
   );
 
   const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
@@ -55,7 +55,7 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
 
 export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepProps) {
   const wallet = ecosystemWallet(ecosystemWalletId, {
-    partnerId: partnerId
+    partnerId: partnerId,
   });
 
   const { theme } = useB3();
@@ -74,20 +74,20 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
           theme === "light"
             ? lightTheme({
                 colors: {
-                  modalBg: "hsl(var(--b3-react-background))"
-                }
+                  modalBg: "hsl(var(--b3-react-background))",
+                },
               })
             : darkTheme({
                 colors: {
-                  modalBg: "hsl(var(--b3-react-background))"
-                }
+                  modalBg: "hsl(var(--b3-react-background))",
+                },
               })
         }
         autoConnect
         style={{
           width: "100%",
           height: "100%",
-          border: 0
+          border: 0,
         }}
         // TODO: Integrate with SIWE in useSIWE
         // auth={{
@@ -108,7 +108,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
         // }}
         header={{
           title: "Sign in with B3",
-          titleIcon: "https://cdn.b3.fun/b3_logo.svg"
+          titleIcon: "https://cdn.b3.fun/b3_logo.svg",
         }}
         onConnect={async wallet => {
           try {

package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx

@@ -8,7 +8,7 @@ import {
   useAuthStore,
   AllowedStrategy,
   getConnectOptionsFromStrategy,
-  isWalletType
+  isWalletType,
 } from "@b3dotfun/sdk/global-account/react";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { useState } from "react";
@@ -33,7 +33,7 @@ export function LoginStepCustom({
   chain,
   strategies,
   maxInitialWallets = 2,
-  automaticallySetFirstEoa
+  automaticallySetFirstEoa,
 }: LoginStepCustomProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [showAllWallets, setShowAllWallets] = useState(false);
@@ -63,7 +63,7 @@ export function LoginStepCustom({
         connectResult = await connectTW(async () => {
           const wallet = createWallet(options.wallet?.id as WalletId);
           await wallet.connect({
-            client
+            client,
           });
 
           return wallet;

package/src/global-account/react/components/SignInWithB3/utils/signInUtils.ts

@@ -25,7 +25,7 @@ export const allowedStrategies = [
 
   // Custom strategies
   // TODO: Audit we don't use "privy" directly anymore
-  ...customStrategies
+  ...customStrategies,
 ] as const;
 
 export type AllowedStrategy = (typeof allowedStrategies)[number];
@@ -62,7 +62,7 @@ export const strategyIcons: Record<string, string> = {
   x: "https://cdn.b3.fun/x.svg?1",
   discord: "https://cdn.b3.fun/discord.svg",
   apple: "https://cdn.b3.fun/apple.svg",
-  guest: "https://cdn.b3.fun/incognito.svg"
+  guest: "https://cdn.b3.fun/incognito.svg",
   // Add more strategies as needed
 };
 // Test it

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

@@ -3,7 +3,6 @@ import { useB3 } from "./B3Provider/useB3";
 
 export function StyleRoot({ children, id }: PropsWithChildren<{ id?: string }>) {
   const { theme: b3Theme } = useB3();
-  // eslint-disable-next-line tailwindcss/no-custom-classname
   return (
     <div className="b3-root" id={id} data-theme={b3Theme}>
       {children}

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

@@ -31,7 +31,7 @@ export function TransakModal() {
       exchangeScreenTitle: "Buy ETH on B3",
       isFeeCalculationHidden: true,
       cryptoCurrencyCode: "ETH",
-      network: "b3"
+      network: "b3",
     };
   }, [environment]);
 
@@ -53,7 +53,7 @@ export function TransakModal() {
       defaultCryptoAmount,
       disableWalletAddressForm: !!destinationWalletAddress || !!account?.address, // Only disable the form if we have an address
       fiatAmount: fiatAmount,
-      countryCode: countryCode
+      countryCode: countryCode,
     };
 
     const transak = new Transak(config);
@@ -105,7 +105,7 @@ export function TransakModal() {
     onSuccess,
     fiatAmount,
     transakConfig,
-    countryCode
+    countryCode,
   ]);
 
   return (
@@ -123,7 +123,7 @@ export function TransakModal() {
           width: "100%",
           height: "650px",
           borderRadius: "25px",
-          overflow: "hidden"
+          overflow: "hidden",
         }}
       />
     </>

package/src/global-account/react/components/custom/Button.tsx

@@ -14,20 +14,20 @@ const buttonVariants = cva(
         secondary: "bg-secondary text-secondary-b3-react-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-b3-react-foreground",
         link: "text-b3-react-primary underline-offset-4 hover:underline",
-        b3: "bg-[#3368ef] text-white hover:bg-[#3368ef]/90"
+        b3: "bg-[#3368ef] text-white hover:bg-[#3368ef]/90",
       },
       size: {
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
-      }
+        icon: "h-9 w-9",
+      },
     },
     defaultVariants: {
       variant: "default",
-      size: "default"
-    }
-  }
+      size: "default",
+    },
+  },
 );
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -44,7 +44,7 @@ export function Button({ variant = "default", className, ...props }: ButtonProps
         variant === "default" && "bg-b3-react-primary text-b3-react-primary-foreground hover:bg-b3-react-primary/90",
         variant === "outline" &&
           "border-input bg-b3-react-background hover:bg-accent hover:text-accent-b3-react-foreground border",
-        className
+        className,
       )}
       {...props}
     />