refactor: consolidate ecosystem auth and smart account options

Author: joaquim-verges

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/auth-options-form.client.tsx

@@ -1,4 +1,3 @@
-import { Skeleton } from "@/components/ui/skeleton";
 import type { Ecosystem } from "../../../../types";
 import {
   AuthOptionsForm,
@@ -10,15 +9,11 @@ export function AuthOptionsSection({ ecosystem }: { ecosystem?: Ecosystem }) {
     <section className="flex flex-col gap-4 md:gap-8">
       <div className="flex flex-col gap-1">
         <h4 className="font-semibold text-2xl text-foreground">
-          Authentication Options
+          Authentication
         </h4>
-        {ecosystem ? (
-          <p className="text-muted-foreground text-sm">
-            Configure the authentication options your ecosystem supports.
-          </p>
-        ) : (
-          <Skeleton className="h-6 w-[300px]" />
-        )}
+        <p className="text-muted-foreground text-sm">
+          Configure the authentication options your ecosystem supports.
+        </p>
       </div>
       {ecosystem ? (
         <AuthOptionsForm ecosystem={ecosystem} />

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/server/auth-options-section.tsx

@@ -1,4 +1,6 @@
 export const authOptions = [
+  "email",
+  "phone",
   "google",
   "facebook",
   "x",
@@ -7,12 +9,10 @@ export const authOptions = [
   "telegram",
   "github",
   "twitch",
-  "phone",
-  "email",
-  "guest",
   "apple",
   "coinbase",
   "line",
+  "guest",
 ] as const;
 
 export type Ecosystem = {
@@ -31,12 +31,12 @@ export type Ecosystem = {
       jwksUri: string;
       aud: string;
     };
-  };
+  } | null;
   smartAccountOptions?: {
     chainIds: number[];
     sponsorGas: boolean;
     accountFactoryAddress: string;
-  };
+  } | null;
   url: string;
   status: "active" | "requested" | "paymentFailed";
   createdAt: string;

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/types.ts

@@ -21,4 +21,7 @@ export type {
 
 export { hasStoredPasskey } from "../../wallets/in-app/web/lib/auth/passkeys.js";
 
-export { socialIcons } from "../../react/core/utils/walletIcon.js";
+export {
+  socialIcons,
+  getSocialIcon,
+} from "../../react/core/utils/walletIcon.js";

packages/thirdweb/src/exports/wallets/in-app.ts

@@ -1,3 +1,5 @@
+import type { AuthOption } from "../../../wallets/types.js";
+
 // TODO make the social icons usable in RN too
 const googleIconUri =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDUuNiIgaGVpZ2h0PSI3MjAiIHZpZXdCb3g9IjAgMCAxODYuNjkgMTkwLjUiIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE4NC41ODMgNzY1LjE3MSkiPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMDg5LjMzMy02ODcuMjM5djM2Ljg4OGg1MS4yNjJjLTIuMjUxIDExLjg2My05LjAwNiAyMS45MDgtMTkuMTM3IDI4LjY2MmwzMC45MTMgMjMuOTg2YzE4LjAxMS0xNi42MjUgMjguNDAyLTQxLjA0NCAyOC40MDItNzAuMDUyIDAtNi43NTQtLjYwNi0xMy4yNDktMS43MzItMTkuNDgzeiIgZmlsbD0iIzQyODVmNCIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTQyLjcxNC02NTEuNzkxbC02Ljk3MiA1LjMzNy0yNC42NzkgMTkuMjIzaDBjMTUuNjczIDMxLjA4NiA0Ny43OTYgNTIuNTYxIDg1LjAzIDUyLjU2MSAyNS43MTcgMCA0Ny4yNzgtOC40ODYgNjMuMDM4LTIzLjAzM2wtMzAuOTEzLTIzLjk4NmMtOC40ODYgNS43MTUtMTkuMzEgOS4xNzktMzIuMTI1IDkuMTc5LTI0Ljc2NSAwLTQ1LjgwNi0xNi43MTItNTMuMzQtMzkuMjI2eiIgZmlsbD0iIzM0YTg1MyIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTc0LjM2NS03MTIuNjFjLTYuNDk0IDEyLjgxNS0xMC4yMTcgMjcuMjc2LTEwLjIxNyA0Mi42ODlzMy43MjMgMjkuODc0IDEwLjIxNyA0Mi42ODljMCAuMDg2IDMxLjY5My0yNC41OTIgMzEuNjkzLTI0LjU5Mi0xLjkwNS01LjcxNS0zLjAzMS0xMS43NzYtMy4wMzEtMTguMDk4czEuMTI2LTEyLjM4MyAzLjAzMS0xOC4wOTh6IiBmaWxsPSIjZmJiYzA1Ii8+PHBhdGggZD0iTS0xMDg5LjMzMy03MjcuMjQ0YzE0LjAyOCAwIDI2LjQ5NyA0Ljg0OSAzNi40NTUgMTQuMjAxbDI3LjI3Ni0yNy4yNzZjLTE2LjUzOS0xNS40MTMtMzguMDEzLTI0Ljg1Mi02My43MzEtMjQuODUyLTM3LjIzNCAwLTY5LjM1OSAyMS4zODgtODUuMDMyIDUyLjU2MWwzMS42OTIgMjQuNTkyYzcuNTMzLTIyLjUxNCAyOC41NzUtMzkuMjI2IDUzLjM0LTM5LjIyNnoiIGZpbGw9IiNlYTQzMzUiIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIvPjwvZz48L3N2Zz4=";
@@ -49,7 +51,7 @@ export const socialIcons = {
 };
 
 // TODO: this should return actual <svg> elements so they can be themed
-export function getWalletIcon(provider: string) {
+export function getSocialIcon(provider: AuthOption | ({} & string)) {
   switch (provider) {
     case "google":
       return googleIconUri;

packages/thirdweb/src/react/core/utils/walletIcon.ts

@@ -4,7 +4,7 @@ import { shortenAddress } from "../../../../../utils/address.js";
 import type { Profile } from "../../../../../wallets/in-app/core/authentication/types.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
 import { useSocialProfiles } from "../../../../core/social/useSocialProfiles.js";
-import { getWalletIcon } from "../../../../core/utils/walletIcon.js";
+import { getSocialIcon } from "../../../../core/utils/walletIcon.js";
 import { useProfiles } from "../../../hooks/wallets/useProfiles.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { Img } from "../../components/Img.js";
@@ -149,7 +149,7 @@ function LinkedProfile({
         </Container>
       ) : (
         <Img
-          src={getWalletIcon(profile.type)}
+          src={getSocialIcon(profile.type)}
           width={iconSize.lg}
           height={iconSize.lg}
           loading="eager"

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx

@@ -11,7 +11,7 @@ import { getLastAuthProvider } from "../../../core/utils/storage.js";
 import { useWalletImage } from "../../../core/utils/wallet.js";
 import {
   genericWalletIcon,
-  getWalletIcon,
+  getSocialIcon,
 } from "../../../core/utils/walletIcon.js";
 import { Img } from "./Img.js";
 
@@ -43,7 +43,7 @@ export function WalletImage(props: {
         // when showing an active wallet icon - check last auth provider and override the IAW icon
         const lastAuthProvider = await getLastAuthProvider(storage);
         image = lastAuthProvider
-          ? getWalletIcon(lastAuthProvider)
+          ? getSocialIcon(lastAuthProvider)
           : genericWalletIcon;
       } else {
         const mipdImage = getInstalledWalletProviders().find(

packages/thirdweb/src/react/web/ui/components/WalletImage.tsx

@@ -26,7 +26,7 @@ import {
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
 import {
   emailIcon,
-  getWalletIcon,
+  getSocialIcon,
   passkeyIcon,
   phoneIcon,
   socialIcons,
@@ -471,7 +471,7 @@ export const ConnectWalletSocialOptions = (
       {guestEnabled && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getWalletIcon("guest")}
+          icon={getSocialIcon("guest")}
           onClick={() => {
             handleGuestLogin();
           }}
@@ -483,7 +483,7 @@ export const ConnectWalletSocialOptions = (
       {props.isLinking && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getWalletIcon("")}
+          icon={getSocialIcon("")}
           onClick={() => {
             handleWalletLogin();
           }}