@b3dotfun/sdk 0.0.35 → 0.0.36

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

@@ -42,6 +42,8 @@ interface ManageAccountProps {
   chain: Chain;
   partnerId: string;
   containerClassName?: string;
+  showSwap?: boolean;
+  showDeposit?: boolean;
 }
 
 export function ManageAccount({
@@ -50,6 +52,8 @@ export function ManageAccount({
   onDeposit: _onDeposit,
   chain,
   partnerId,
+  showSwap,
+  showDeposit,
 }: ManageAccountProps) {
   const [revokingSignerId, setRevokingSignerId] = useState<string | null>(null);
   const account = useActiveAccount();
@@ -89,7 +93,6 @@ export function ManageAccount({
     setB3ModalOpen(false);
     setLogoutLoading(false);
   };
-
   const AppsContent = () => (
     <div className="space-y-4">
       {signers?.map((signer: TWSignerWithMetadata) => (
@@ -234,53 +237,64 @@ export function ManageAccount({
     };
 
     return (
-      <div className="space-y-8">
+      <div className="linked-accounts-settings space-y-8">
         {/* Linked Accounts Section */}
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Linked Accounts</h3>
+        <div className="linked-accounts-section space-y-4">
+          <div className="linked-accounts-header flex items-center justify-between">
+            <h3 className="text-b3-grey font-neue-montreal-semibold linked-accounts-settings-title text-xl">
+              Linked Accounts
+            </h3>
             <Button
-              className="bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2"
+              className="linked-accounts-settings-button linked-accounts-link-button bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2"
               onClick={handleOpenLinkModal}
               disabled={isLinking}
             >
               {isLinking ? (
-                <Loader2 className="text-b3-primary-blue animate-spin" size={16} />
+                <Loader2 className="linked-accounts-link-loading text-b3-primary-blue animate-spin" size={16} />
               ) : (
-                <LinkIcon size={16} className="text-b3-primary-blue" />
+                <LinkIcon size={16} className="linked-accounts-link-icon text-b3-primary-blue" />
               )}
-              <span className="text-b3-grey font-neue-montreal-semibold">
+              <span className="linked-accounts-link-text text-b3-grey font-neue-montreal-semibold">
                 {isLinking ? "Linking..." : "Link New Account"}
               </span>
             </Button>
           </div>
 
           {isLoadingProfiles ? (
-            <div className="flex justify-center py-8">
+            <div className="linked-accounts-loading flex justify-center py-8">
               <Loader2 className="text-b3-grey animate-spin" />
             </div>
           ) : profiles.length > 0 ? (
-            <div className="space-y-4">
+            <div className="linked-accounts-list space-y-4">
               {profiles.map(profile => (
-                <div key={profile.title} className="bg-b3-line flex items-center justify-between rounded-xl p-4">
-                  <div className="flex items-center gap-3">
+                <div
+                  key={profile.title}
+                  className="linked-account-item bg-b3-line flex items-center justify-between rounded-xl p-4"
+                >
+                  <div className="linked-account-info flex items-center gap-3">
                     {profile.imageUrl ? (
-                      <img src={profile.imageUrl} alt={profile.title} className="size-10 rounded-full" />
+                      <img
+                        src={profile.imageUrl}
+                        alt={profile.title}
+                        className="linked-account-avatar linked-account-avatar-image size-10 rounded-full"
+                      />
                     ) : (
-                      <div className="bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full">
-                        <span className="text-b3-grey font-neue-montreal-semibold text-sm uppercase">
+                      <div className="linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full">
+                        <span className="linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase">
                           {profile.initial}
                         </span>
                       </div>
                     )}
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <span className="text-b3-grey font-neue-montreal-semibold">{profile.title}</span>
-                        <span className="text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs">
+                    <div className="linked-account-details">
+                      <div className="linked-account-title-row flex items-center gap-2">
+                        <span className="linked-account-title text-b3-grey font-neue-montreal-semibold">
+                          {profile.title}
+                        </span>
+                        <span className="linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs">
                           {profile.type.toUpperCase()}
                         </span>
                       </div>
-                      <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                      <div className="linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm">
                         {profile.subtitle}
                       </div>
                     </div>
@@ -288,69 +302,79 @@ export function ManageAccount({
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="text-b3-grey hover:text-b3-negative"
+                    className="linked-account-unlink-button text-b3-grey hover:text-b3-negative"
                     onClick={() => handleUnlink(profile)}
                     disabled={unlinkingAccountId === profile.title || isUnlinking}
                   >
                     {unlinkingAccountId === profile.title || isUnlinking ? (
-                      <Loader2 className="animate-spin" />
+                      <Loader2 className="linked-account-unlink-loading animate-spin" />
                     ) : (
-                      <UnlinkIcon size={16} />
+                      <UnlinkIcon size={16} className="linked-account-unlink-icon" />
                     )}
                   </Button>
                 </div>
               ))}
             </div>
           ) : (
-            <div className="text-b3-foreground-muted py-8 text-center">No linked accounts found</div>
+            <div className="linked-accounts-empty text-b3-foreground-muted py-8 text-center">
+              No linked accounts found
+            </div>
           )}
         </div>
 
         {showReferralInfo && (
           /* Referral Section */
-          <div className="space-y-4">
-            <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Referrals</h3>
+          <div className="referrals-section space-y-4">
+            <h3 className="referrals-title text-b3-grey font-neue-montreal-semibold text-xl">Referrals</h3>
 
             {/* Referral Code */}
-            <div className="bg-b3-line rounded-xl p-4">
+            <div className="referral-code-container bg-b3-line rounded-xl p-4">
               {isEditingCode && (
-                <div>
-                  <div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
-                  <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                <div className="referral-code-header-editing">
+                  <div className="referral-code-title text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
+                  <div className="referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm">
                     Share this code with friends to earn rewards
                   </div>
                 </div>
               )}
-              <div className="flex items-center justify-between">
+              <div className="referral-code-content flex items-center justify-between">
                 {!isEditingCode && (
-                  <div>
-                    <div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
-                    <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                  <div className="referral-code-header">
+                    <div className="referral-code-title text-b3-grey font-neue-montreal-semibold">
+                      Your Referral Code
+                    </div>
+                    <div className="referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm">
                       Share this code with friends to earn rewards
                     </div>
                   </div>
                 )}
-                <div className="flex items-center gap-2">
+                <div className="referral-code-actions flex items-center gap-2">
                   {isEditingCode ? (
-                    <div className="flex items-center gap-2">
+                    <div className="referral-code-edit-form flex items-center gap-2">
                       <input
                         type="text"
                         value={newReferralCode}
                         onChange={e => setNewReferralCode(e.target.value)}
-                        className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm"
+                        className="referral-code-input rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm"
                         placeholder="Enter new code"
                         ref={referallCodeRef}
                       />
                       <Button
                         size="sm"
+                        className="referral-code-save-button"
                         onClick={handleUpdateReferralCode}
                         disabled={isUpdatingCode || !newReferralCode}
                       >
-                        {isUpdatingCode ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
+                        {isUpdatingCode ? (
+                          <Loader2 className="referral-code-save-loading h-4 w-4 animate-spin" />
+                        ) : (
+                          "Save"
+                        )}
                       </Button>
                       <Button
                         size="sm"
                         variant="ghost"
+                        className="referral-code-cancel-button"
                         onClick={() => {
                           setIsEditingCode(false);
                           setNewReferralCode("");
@@ -361,15 +385,21 @@ export function ManageAccount({
                     </div>
                   ) : (
                     <>
-                      <div className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm">
+                      <div className="referral-code-display rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm">
                         {currentReferralCode}
                       </div>
-                      <Button size="icon" variant="ghost" onClick={handleCopyCode}>
-                        <Copy className="h-4 w-4" />
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="referral-code-copy-button"
+                        onClick={handleCopyCode}
+                      >
+                        <Copy className="referral-code-copy-icon h-4 w-4" />
                       </Button>
                       <Button
                         size="icon"
                         variant="ghost"
+                        className="referral-code-edit-button"
                         onClick={() => {
                           setIsEditingCode(true);
                           setTimeout(() => {
@@ -377,7 +407,7 @@ export function ManageAccount({
                           }, 100);
                         }}
                       >
-                        <Pencil className="h-4 w-4" />
+                        <Pencil className="referral-code-edit-icon h-4 w-4" />
                       </Button>
                     </>
                   )}
@@ -386,67 +416,65 @@ export function ManageAccount({
             </div>
 
             {/* Referred Users */}
-            <div className="bg-b3-line rounded-xl p-4">
-              <div className="text-b3-grey font-neue-montreal-semibold mb-4">Referred Users</div>
+            <div className="referred-users-container bg-b3-line rounded-xl p-4">
+              <div className="referred-users-title text-b3-grey font-neue-montreal-semibold mb-4">Referred Users</div>
               {isLoadingReferrals ? (
-                <div className="flex justify-center py-4">
+                <div className="referred-users-loading flex justify-center py-4">
                   <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
                 </div>
               ) : referrals?.data?.length ? (
-                <div className="space-y-3">
+                <div className="referred-users-list space-y-3">
                   {referrals.data.map((referral: Referrals) => (
                     <div
                       key={String(referral._id)}
-                      className="flex items-center justify-between rounded-lg bg-white p-3"
+                      className="referred-user-item flex items-center justify-between rounded-lg bg-white p-3"
                     >
-                      <div className="text-sm font-medium">{referral.referreeId}</div>
-                      <div className="text-sm text-gray-500">{new Date(referral.createdAt).toLocaleDateString()}</div>
+                      <div className="referred-user-id text-sm font-medium">{referral.referreeId}</div>
+                      <div className="referred-user-date text-sm text-gray-500">
+                        {new Date(referral.createdAt).toLocaleDateString()}
+                      </div>
                     </div>
                   ))}
                 </div>
               ) : (
-                <div className="py-4 text-center text-gray-500">No referred users yet</div>
+                <div className="referred-users-empty py-4 text-center text-gray-500">No referred users yet</div>
               )}
             </div>
           </div>
         )}
 
         {/* Additional Settings Sections */}
-        <div className="space-y-4">
-          <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Account Preferences</h3>
-          <div className="bg-b3-line rounded-xl p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <div className="text-b3-grey font-neue-montreal-semibold">Dark Mode</div>
-                <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+        <div className="account-preferences-section space-y-4">
+          <h3 className="account-preferences-title text-b3-grey font-neue-montreal-semibold text-xl">
+            Account Preferences
+          </h3>
+          <div className="account-preferences-container bg-b3-line rounded-xl p-4">
+            <div className="account-preference-item flex items-center justify-between">
+              <div className="account-preference-info">
+                <div className="account-preference-title text-b3-grey font-neue-montreal-semibold">Dark Mode</div>
+                <div className="account-preference-description text-b3-foreground-muted font-neue-montreal-medium text-sm">
                   Switch between light and dark theme
                 </div>
               </div>
               {/* Theme toggle placeholder - can be implemented later */}
-              <div className="bg-b3-primary-wash h-6 w-12 rounded-full"></div>
+              <div className="account-preference-toggle theme-toggle-placeholder bg-b3-primary-wash h-6 w-12 rounded-full"></div>
             </div>
           </div>
         </div>
 
-        {/* Global Account Info */}
-        <div className="border-b3-line flex items-center justify-between rounded-2xl border p-4">
-          <div>
-            <div className="flex items-center gap-2">
-              <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-4" />
-              <h3 className="font-neue-montreal-semibold text-b3-grey">Global Account</h3>
-            </div>
-
-            <p className="text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm">
-              Your universal account for all B3 apps
-            </p>
+        <button
+          className="logout-button logout-section border-b3-line hover:bg-b3-line relative flex w-full items-center justify-center rounded-2xl border p-4 transition-colors"
+          onClick={onLogoutEnhanced}
+        >
+          <span className="logout-text font-neue-montreal-semibold text-b3-grey">Sign out</span>
+          <div className="logout-icon-container absolute right-4">
+            {logoutLoading ? (
+              <Loader2 className="logout-loading animate-spin" size={16} />
+            ) : (
+              <SignOutIcon size={16} className="logout-icon text-b3-grey" />
+            )}
           </div>
-          <button
-            className="text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border"
-            onClick={onLogoutEnhanced}
-          >
-            {logoutLoading ? <Loader2 className="animate-spin" /> : <SignOutIcon size={16} className="text-b3-grey" />}
-          </button>
-        </div>
+        </button>
       </div>
     );
   };
@@ -521,7 +549,7 @@ export function ManageAccount({
           </div>
 
           <TabsContentPrimitive value="overview" className="px-4 pb-4 pt-2">
-            <BalanceContent onLogout={onLogout} partnerId={partnerId} />
+            <BalanceContent onLogout={onLogout} partnerId={partnerId} showDeposit={showDeposit} showSwap={showSwap} />
           </TabsContentPrimitive>
 
           <TabsContentPrimitive value="tokens" className="px-4 pb-4 pt-2">

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

@@ -21,7 +21,7 @@ export type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackB
 export function SignInWithB3(props: SignInWithB3Props) {
   const { setB3ModalOpen, setB3ModalContentType, setEcoSystemAccountAddress } = useModalStore();
   const { account } = useB3();
-  const { isAuthenticatingV2, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
+  const { isAuthenticating, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
   const isMobile = useIsMobile();
 
   useEffect(() => {
@@ -43,7 +43,7 @@ export function SignInWithB3(props: SignInWithB3Props) {
     return <ManageAccountButton {...props} />;
   }
 
-  if (isAuthenticatingV2) {
+  if (isAuthenticating) {
     return (
       <StyleRoot>
         <Button disabled style={{ backgroundColor: "#3368ef" }} className="flex items-center gap-2 text-white">

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

@@ -41,7 +41,6 @@ export function SignInWithB3Flow({
   const { setB3ModalContentType, setB3ModalOpen, isOpen } = useModalStore();
   const account = useActiveAccount();
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
-  const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
   const isAuthenticating = useAuthStore(state => state.isAuthenticating);
   const isConnected = useAuthStore(state => state.isConnected);
   const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -199,7 +198,6 @@ export function SignInWithB3Flow({
       if (loginWithSiwe) {
         debug("setIsAuthenticating:true:1");
         setIsAuthenticating(true);
-        setIsAuthenticatingV2(true);
         const userAuth = await authenticate(account, partnerId);
         setUser(userAuth.user);
       }
@@ -207,18 +205,8 @@ export function SignInWithB3Flow({
       onLoginSuccess?.(account);
       debug("setIsAuthenticating:false:1");
       setIsAuthenticating(false);
-      setIsAuthenticatingV2(false);
     },
-    [
-      loginWithSiwe,
-      onLoginSuccess,
-      setIsAuthenticating,
-      authenticate,
-      partnerId,
-      setUser,
-      setIsConnected,
-      setIsAuthenticatingV2,
-    ],
+    [loginWithSiwe, onLoginSuccess, authenticate, partnerId, setUser, setIsConnected, setIsAuthenticating],
   );
 
   useEffect(() => {

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

@@ -21,7 +21,6 @@ interface SignInWithB3PrivyProps {
 export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: SignInWithB3PrivyProps) {
   const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(partnerId, chain, onSuccess);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
-  const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const { logout } = useAuthentication(partnerId);
 
@@ -49,11 +48,10 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: Sign
       } finally {
         debug("setIsAuthenticating:false:7");
         setIsAuthenticating(false);
-        setIsAuthenticatingV2(false);
       }
     }
     autoConnect();
-  }, [connectTw, onSuccess, onError, setIsAuthenticating, setIsAuthenticated, logout, setIsAuthenticatingV2]);
+  }, [connectTw, onSuccess, onError, setIsAuthenticated, logout, setIsAuthenticating]);
 
   // Currently we auto login, so we can show loading immediately and the onSuccess will proceed to the next modal
   return (

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

@@ -63,7 +63,6 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
 
   const { theme } = useB3();
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
-  const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const { logout } = useAuthentication(partnerId);
 
@@ -118,7 +117,6 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
         onConnect={async wallet => {
           try {
             setIsAuthenticating(true);
-            setIsAuthenticatingV2(true);
             debug("setIsAuthenticating:true:6");
 
             const account = wallet.getAccount();
@@ -135,7 +133,6 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
           } finally {
             debug("setIsAuthenticating:false:6");
             setIsAuthenticating(false);
-            setIsAuthenticatingV2(false);
           }
         }}
       />

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

@@ -40,7 +40,6 @@ export function LoginStepCustom({
   const [showAllWallets, setShowAllWallets] = useState(false);
   const { connect } = useConnect(partnerId, chain);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
-  const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const { logout } = useAuthentication(partnerId);
   const { connect: connectTW } = useConnectTW();
@@ -56,7 +55,6 @@ export function LoginStepCustom({
       setIsLoading(true);
       debug("setIsAuthenticating:true:3");
       setIsAuthenticating(true);
-      setIsAuthenticatingV2(true);
       const options = getConnectOptionsFromStrategy(strategy);
       let connectResult: Wallet | null;
 
@@ -90,7 +88,6 @@ export function LoginStepCustom({
       setIsLoading(false);
       debug("setIsAuthenticating:false:3");
       setIsAuthenticating(false);
-      setIsAuthenticatingV2(false);
     }
   };
 

package/src/global-account/react/components/icons/AppleIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+export interface AppleIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function AppleIcon({ className, size = 24, color = "currentColor", style }: AppleIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 41.5 51"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <g>
+        <path
+          fill={color}
+          d="M40.2,17.4c-3.4,2.1-5.5,5.7-5.5,9.7c0,4.5,2.7,8.6,6.8,10.3c-0.8,2.6-2,5-3.5,7.2c-2.2,3.1-4.5,6.3-7.9,6.3s-4.4-2-8.4-2
+		c-3.9,0-5.3,2.1-8.5,2.1s-5.4-2.9-7.9-6.5C2,39.5,0.1,33.7,0,27.6c0-9.9,6.4-15.2,12.8-15.2c3.4,0,6.2,2.2,8.3,2.2
+		c2,0,5.2-2.3,9-2.3C34.1,12.2,37.9,14.1,40.2,17.4z M28.3,8.1C30,6.1,30.9,3.6,31,1c0-0.3,0-0.7-0.1-1c-2.9,0.3-5.6,1.7-7.5,3.9
+		c-1.7,1.9-2.7,4.3-2.8,6.9c0,0.3,0,0.6,0.1,0.9c0.2,0,0.5,0.1,0.7,0.1C24.1,11.6,26.6,10.2,28.3,8.1z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default AppleIcon;

package/src/global-account/react/components/icons/DiscordIcon.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export interface DiscordIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function DiscordIcon({ className, size = 24, color = "#5865F2", style }: DiscordIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 -28.5 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+      preserveAspectRatio="xMidYMid"
+    >
+      <g>
+        <path
+          d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+          fill={color}
+          fillRule="nonzero"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default DiscordIcon;

package/src/global-account/react/components/icons/FarcasterIcon.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+export interface FarcasterIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function FarcasterIcon({ className, size = 24, color = "#855DCD", style }: FarcasterIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 1000 1000"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <rect width="1000" height="1000" rx="200" fill={color} />
+      <path
+        d="M257.778 155.556H742.222V844.444H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.444H257.778V155.556Z"
+        fill="white"
+      />
+      <path
+        d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.444H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z"
+        fill="white"
+      />
+      <path
+        d="M675.556 746.667C663.283 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.444H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export default FarcasterIcon;

package/src/global-account/react/components/icons/GoogleIcon.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+export interface GoogleIconProps {
+  className?: string;
+  size?: number;
+  style?: React.CSSProperties;
+}
+
+export function GoogleIcon({ className, size = 24, style }: GoogleIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 48 48"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path
+        fill="#EA4335"
+        d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+      />
+      <path
+        fill="#4285F4"
+        d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+      />
+      <path
+        fill="#34A853"
+        d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+      />
+      <path fill="none" d="M0 0h48v48H0z" />
+    </svg>
+  );
+}
+
+export default GoogleIcon;

package/src/global-account/react/components/icons/XIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface XIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function XIcon({ className, size = 24, color = "currentColor", style }: XIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 300 300.251"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path
+        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66"
+        fill={color}
+      />
+    </svg>
+  );
+}
+
+export default XIcon;