feat: show auth provider icon when connected to inapp wallet (#2944)

Co-authored-by: Manan Tank <manantankm@gmail.com>

Author: joaquim-verges

.changeset/shiny-bananas-juggle.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Show auth provider icon in connect UI when connected to in app wallet

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -145,10 +145,6 @@ export const ConnectedWalletDetails: React.FC<{
       }),
   });
 
-  // const [overrideWalletIconUrl, setOverrideWalletIconUrl] = useState<
-  //   string | undefined
-  // >(undefined);
-
   // const personalAccount = (activeWallet as WalletWithPersonalAccount)
   //   ?.personalAccount;
 
@@ -161,7 +157,6 @@ export const ConnectedWalletDetails: React.FC<{
   // const isActuallyMetaMask =
   //   activeWallet && activeWallet instanceof MetaMaskWallet;
 
-  // const shortAddress = "<address>";
   const shortAddress = activeAccount?.address
     ? shortenString(activeAccount.address, false)
     : "";
@@ -217,7 +212,12 @@ export const ConnectedWalletDetails: React.FC<{
           client={client}
         />
       ) : activeWallet?.id ? (
-        <WalletImage size={iconSize.lg} id={activeWallet.id} client={client} />
+        <WalletImage
+          size={iconSize.lg}
+          id={activeWallet.id}
+          client={client}
+          allowOverrides
+        />
       ) : (
         <WalletIcon size={iconSize.lg} />
       )}
@@ -332,6 +332,7 @@ export const ConnectedWalletDetails: React.FC<{
             size={iconSize.xxl}
             id={activeWallet.id}
             client={client}
+            allowOverrides
           />
         ) : (
           <WalletIcon size={iconSize.xxl} />

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/AccountSelectorButton.tsx

@@ -31,6 +31,7 @@ export function AccountSelectorButton(props: {
           id={props.activeWallet.id}
           size={iconSize.md}
           client={props.client}
+          allowOverrides
         />
       ) : (
         <Container color="secondaryText" flex="row" center="both">

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

@@ -43,6 +43,7 @@ export function ReceiveFunds(props: {
                 id={props.walletId}
                 size={iconSize.xxl}
                 client={client}
+                allowOverrides
               />
             )
           }

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

@@ -1,7 +1,15 @@
 "use client";
+import { useEffect, useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
+import { getLastAuthProvider } from "../../wallets/in-app/storage.js";
+import { emailIcon, phoneIcon } from "../ConnectWallet/icons/dataUris.js";
+import {
+  appleIconUri,
+  facebookIconUri,
+  googleIconUri,
+} from "../ConnectWallet/icons/socialLogins.js";
 import { radius } from "../design-system/index.js";
 import { useWalletImage } from "../hooks/useWalletInfo.js";
 import { Img } from "./Img.js";
@@ -15,15 +23,46 @@ export function WalletImage(props: {
   id: WalletId;
   size: string;
   client: ThirdwebClient;
+  allowOverrides?: boolean;
 }) {
-  const mipdImage = getInstalledWalletProviders().find(
-    (provider) => provider.info.rdns === props.id,
-  )?.info.icon;
+  const [image, setImage] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    async function fetchImage() {
+      let mipdImage = getInstalledWalletProviders().find(
+        (provider) => provider.info.rdns === props.id,
+      )?.info.icon;
 
-  if (mipdImage) {
+      if (props.allowOverrides && props.id === "inApp") {
+        // check last auth provider and override the IAW icon
+        const lastAuthProvider = await getLastAuthProvider();
+        switch (lastAuthProvider) {
+          case "google":
+            mipdImage = googleIconUri;
+            break;
+          case "apple":
+            mipdImage = appleIconUri;
+            break;
+          case "facebook":
+            mipdImage = facebookIconUri;
+            break;
+          case "phone":
+            mipdImage = phoneIcon;
+            break;
+          case "email":
+            mipdImage = emailIcon;
+            break;
+        }
+      }
+
+      setImage(mipdImage);
+    }
+    fetchImage();
+  }, [props.id, props.allowOverrides]);
+
+  if (image) {
     return (
       <Img
-        src={mipdImage}
+        src={image}
         width={props.size}
         height={props.size}
         loading="eager"

packages/thirdweb/src/react/web/wallets/in-app/InAppWalletFormUI.tsx

@@ -23,6 +23,7 @@ import { LinkButton } from "./LinkButton.js";
 import type { InAppWalletLocale } from "./locale/types.js";
 import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
 import { socialIcons } from "./socialIcons.js";
+import { setLastAuthProvider } from "./storage.js";
 import type { InAppWalletSelectUIState } from "./types.js";
 import { validateEmail } from "./validateEmail.js";
 
@@ -126,6 +127,8 @@ export const InAppWalletFormUI = (props: InAppWalletFormUIProps) => {
         },
       });
 
+      await setLastAuthProvider(strategy);
+
       setData({
         socialLogin: {
           type: strategy,

packages/thirdweb/src/react/web/wallets/in-app/InAppWalletOTPLoginUI.tsx

@@ -15,6 +15,7 @@ import { useCustomTheme } from "../../ui/design-system/CustomThemeProvider.js";
 import { StyledButton } from "../../ui/design-system/elements.js";
 import { fontSize } from "../../ui/design-system/index.js";
 import type { InAppWalletLocale } from "./locale/types.js";
+import { setLastAuthProvider } from "./storage.js";
 
 type VerificationStatus =
   | "verifying"
@@ -84,6 +85,7 @@ export function InAppWalletOTPLoginUI(props: {
         verificationCode: otp,
         client,
       });
+      await setLastAuthProvider("email");
     } else if ("phone" in userInfo) {
       await wallet.connect({
         chain,
@@ -92,6 +94,7 @@ export function InAppWalletOTPLoginUI(props: {
         verificationCode: otp,
         client,
       });
+      await setLastAuthProvider("phone");
     } else {
       throw new Error("Invalid userInfo");
     }

packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSocialLogin.tsx

@@ -11,6 +11,7 @@ import { Text } from "../../ui/components/text.js";
 import { useCustomTheme } from "../../ui/design-system/CustomThemeProvider.js";
 import type { InAppWalletLocale } from "./locale/types.js";
 import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
+import { setLastAuthProvider } from "./storage.js";
 import type { InAppWalletSelectUIState } from "./types.js";
 
 /**
@@ -53,6 +54,7 @@ export function InAppWalletSocialLogin(props: {
         },
         client,
       });
+      await setLastAuthProvider(props.socialAuth);
       setStatus("connected");
       done();
     } catch (e) {

packages/thirdweb/src/react/web/wallets/in-app/storage.ts

@@ -0,0 +1,16 @@
+import type { AuthArgsType } from "../../../../wallets/in-app/core/authentication/type.js";
+import { getStorage } from "../../../core/storage.js";
+
+const LAST_AUTH_PROVIDER_STORAGE_KEY = "lastAuthProvider";
+
+export async function setLastAuthProvider(
+  authProvider: AuthArgsType["strategy"],
+) {
+  await getStorage().setItem(LAST_AUTH_PROVIDER_STORAGE_KEY, authProvider);
+}
+
+export async function getLastAuthProvider() {
+  return (await getStorage().getItem(LAST_AUTH_PROVIDER_STORAGE_KEY)) as
+    | AuthArgsType["strategy"]
+    | null;
+}