thirdweb 5.64.0 → 5.64.1

package/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx

@@ -15,14 +15,14 @@ export const OutlineWalletIcon: IconFC = (props) => {
     >
       <path
         d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21C21.2652 16 21.5196 15.8946 21.7071 15.7071C21.8946 15.5196 22 15.2652 22 15V13C22 12.7348 21.8946 12.4804 21.7071 12.2929C21.5196 12.1054 21.2652 12 21 12Z"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

package/src/react/web/ui/ConnectWallet/icons/PhoneIcon.tsx

@@ -0,0 +1,32 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const PhoneIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+    >
+      <g clipPath="url(#clip0_5639_632)">
+        <path
+          d="M14.6669 11.2802V13.2802C14.6677 13.4659 14.6297 13.6497 14.5553 13.8198C14.4809 13.9899 14.3718 14.1426 14.235 14.2681C14.0982 14.3937 13.9367 14.4892 13.7608 14.5487C13.5849 14.6082 13.3985 14.6303 13.2136 14.6136C11.1622 14.3907 9.19161 13.6897 7.46028 12.5669C5.8495 11.5433 4.48384 10.1777 3.46028 8.56689C2.3336 6.8277 1.63244 4.84756 1.41361 2.78689C1.39695 2.60254 1.41886 2.41673 1.47795 2.24131C1.53703 2.06589 1.63199 1.90469 1.75679 1.76797C1.88159 1.63126 2.03348 1.52203 2.20281 1.44724C2.37213 1.37245 2.55517 1.33374 2.74028 1.33356H4.74028C5.06382 1.33038 5.37748 1.44495 5.62279 1.65592C5.8681 1.86689 6.02833 2.15986 6.07361 2.48023C6.15803 3.12027 6.31458 3.74871 6.54028 4.35356C6.62998 4.59218 6.64939 4.8515 6.59622 5.10081C6.54305 5.35012 6.41952 5.57897 6.24028 5.76023L5.39361 6.60689C6.34265 8.27592 7.72458 9.65786 9.39361 10.6069L10.2403 9.76023C10.4215 9.58099 10.6504 9.45746 10.8997 9.40429C11.149 9.35112 11.4083 9.37053 11.6469 9.46023C12.2518 9.68593 12.8802 9.84248 13.5203 9.92689C13.8441 9.97258 14.1399 10.1357 14.3513 10.3852C14.5627 10.6348 14.6751 10.9533 14.6669 11.2802Z"
+          stroke={props.color ?? "currentColor"}
+          strokeWidth="1.33333"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5639_632">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/types.ts

@@ -1 +1 @@
-export type IconFC = React.FC<{ size: string }>;
+export type IconFC = React.FC<{ size: string; color?: string }>;

package/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx

@@ -14,6 +14,9 @@ import { Text } from "../../components/text.js";
 import { Blobbie } from "../Blobbie.js";
 import { MenuButton } from "../MenuButton.js";
 import { AddUserIcon } from "../icons/AddUserIcon.js";
+import { EmailIcon } from "../icons/EmailIcon.js";
+import { FingerPrintIcon } from "../icons/FingerPrintIcon.js";
+import { PhoneIcon } from "../icons/PhoneIcon.js";
 import type { ConnectLocale } from "../locale/types.js";
 import type { WalletDetailsModalScreen } from "./types.js";
 
@@ -84,7 +87,7 @@ export function LinkedProfilesScreen(props: {
                 fontSize: fontSize.sm,
               }}
             >
-              <AddUserIcon size={iconSize.md} />
+              <AddUserIcon size={iconSize.lg} />
               <Text color="primaryText">
                 {props.locale.manageWallet.linkProfile}
               </Text>
@@ -147,6 +150,12 @@ function LinkedProfile({
         >
           <Blobbie address={profile.details.address} size={32} />
         </Container>
+      ) : profile.type === "passkey" ? (
+        <FingerPrintIcon size={iconSize.lg} />
+      ) : profile.type === "email" ? (
+        <EmailIcon size={iconSize.lg} />
+      ) : profile.type === "phone" ? (
+        <PhoneIcon size={iconSize.lg} />
       ) : (
         <Img
           src={getSocialIcon(profile.type)}

package/src/react/web/ui/components/WalletImage.tsx

@@ -4,7 +4,9 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getWalletInfo } from "../../../../wallets/__generated__/getWalletInfo.js";
 import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
+import type { AuthOption } from "../../../../wallets/types.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { radius } from "../../../core/design-system/index.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { getLastAuthProvider } from "../../../core/utils/storage.js";
@@ -13,8 +15,15 @@ import {
   genericWalletIcon,
   getSocialIcon,
 } from "../../../core/utils/walletIcon.js";
+import { EmailIcon } from "../ConnectWallet/icons/EmailIcon.js";
+import { FingerPrintIcon } from "../ConnectWallet/icons/FingerPrintIcon.js";
+import { GuestIcon } from "../ConnectWallet/icons/GuestIcon.js";
+import { OutlineWalletIcon } from "../ConnectWallet/icons/OutlineWalletIcon.js";
+import { PhoneIcon } from "../ConnectWallet/icons/PhoneIcon.js";
 import { Img } from "./Img.js";
 
+type WalletImageState = { uri: string; authProvider?: AuthOption };
+
 /**
  * @internal
  */
@@ -24,7 +33,8 @@ export function WalletImage(props: {
   client: ThirdwebClient;
   style?: React.CSSProperties;
 }) {
-  const [image, setImage] = useState<string | undefined>(undefined);
+  const theme = useCustomTheme();
+  const [image, setImage] = useState<WalletImageState | undefined>(undefined);
   const activeWallet = useActiveWallet();
   useEffect(() => {
     async function fetchImage() {
@@ -33,7 +43,7 @@ export function WalletImage(props: {
       // show the admin EOA icon for smart
       const storage = webLocalStorage;
       const activeEOAId = props.id;
-      let image: string | undefined;
+      let image: WalletImageState | undefined;
 
       if (
         activeEOAId === "inApp" &&
@@ -43,17 +53,22 @@ 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
-          ? getSocialIcon(lastAuthProvider)
-          : genericWalletIcon;
+          ? {
+              uri: getSocialIcon(lastAuthProvider),
+              authProvider: lastAuthProvider as AuthOption,
+            }
+          : { uri: "", authProvider: "wallet" };
       } else {
         const mipdImage = getInstalledWalletProviders().find(
           (x) => x.info.rdns === activeEOAId,
         )?.info.icon;
 
         if (mipdImage) {
-          image = mipdImage;
+          image = { uri: mipdImage };
         } else {
-          image = await getWalletInfo(activeEOAId, true);
+          image = {
+            uri: await getWalletInfo(activeEOAId, true),
+          };
         }
       }
 
@@ -62,10 +77,34 @@ export function WalletImage(props: {
     fetchImage();
   }, [props.id, activeWallet]);
 
-  if (image) {
+  if (image?.authProvider === "email") {
+    return <EmailIcon size={props.size} color={theme.colors.accentText} />;
+  }
+
+  if (image?.authProvider === "phone") {
+    return <PhoneIcon size={props.size} color={theme.colors.accentText} />;
+  }
+
+  if (image?.authProvider === "passkey") {
+    return (
+      <FingerPrintIcon size={props.size} color={theme.colors.accentText} />
+    );
+  }
+
+  if (image?.authProvider === "wallet") {
+    return (
+      <OutlineWalletIcon size={props.size} color={theme.colors.accentText} />
+    );
+  }
+
+  if (image?.authProvider === "guest") {
+    return <GuestIcon size={props.size} color={theme.colors.accentText} />;
+  }
+
+  if (image?.uri) {
     return (
       <Img
-        src={image}
+        src={image.uri}
         width={props.size}
         height={props.size}
         loading="eager"
@@ -101,17 +140,5 @@ function WalletImageQuery(props: {
     );
   }
 
-  return (
-    <Img
-      client={props.client}
-      src={walletImage.isLoading ? undefined : walletImage.data}
-      fallbackImage={genericWalletIcon}
-      width={props.size}
-      height={props.size}
-      loading="eager"
-      style={{
-        borderRadius: radius.md,
-      }}
-    />
-  );
+  return <OutlineWalletIcon size={props.size} />;
 }

package/src/react/web/wallets/in-app/WalletAuth.tsx

@@ -131,7 +131,12 @@ export function WalletAuth(props: {
         size={props.size}
         meta={props.meta || {}}
         walletConnect={props.walletConnect}
-        modalHeader={{ title: props.inAppLocale.linkWallet, onBack: back }}
+        modalHeader={{
+          title: props.isLinking
+            ? props.inAppLocale.linkWallet
+            : props.inAppLocale.signInWithWallet,
+          onBack: back,
+        }}
         walletIdsToHide={["inApp"]}
         disableSelectionDataReset={true}
       />
@@ -141,7 +146,14 @@ export function WalletAuth(props: {
   return (
     <Container animate="fadein" fullHeight flex="column">
       <Container p="lg">
-        <ModalHeader title={props.inAppLocale.linkWallet} onBack={back} />
+        <ModalHeader
+          title={
+            props.isLinking
+              ? props.inAppLocale.linkWallet
+              : props.inAppLocale.signInWithWallet
+          }
+          onBack={back}
+        />
       </Container>
 
       <Container

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -24,15 +24,14 @@ import {
   spacing,
 } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
-import {
-  emailIcon,
-  getSocialIcon,
-  passkeyIcon,
-  phoneIcon,
-  socialIcons,
-} from "../../../core/utils/walletIcon.js";
+import { socialIcons } from "../../../core/utils/walletIcon.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { WalletTypeRowButton } from "../../ui/ConnectWallet/WalletTypeRowButton.js";
+import { EmailIcon } from "../../ui/ConnectWallet/icons/EmailIcon.js";
+import { FingerPrintIcon } from "../../ui/ConnectWallet/icons/FingerPrintIcon.js";
+import { GuestIcon } from "../../ui/ConnectWallet/icons/GuestIcon.js";
+import { OutlineWalletIcon } from "../../ui/ConnectWallet/icons/OutlineWalletIcon.js";
+import { PhoneIcon } from "../../ui/ConnectWallet/icons/PhoneIcon.js";
 import { Img } from "../../ui/components/Img.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { TextDivider } from "../../ui/components/TextDivider.js";
@@ -413,7 +412,7 @@ export const ConnectWalletSocialOptions = (
         ) : (
           <WalletTypeRowButton
             client={props.client}
-            icon={emailIcon}
+            icon={EmailIcon}
             onClick={() => {
               setManualInputMode("email");
             }}
@@ -451,7 +450,7 @@ export const ConnectWalletSocialOptions = (
         ) : (
           <WalletTypeRowButton
             client={props.client}
-            icon={phoneIcon}
+            icon={PhoneIcon}
             onClick={() => {
               setManualInputMode("phone");
             }}
@@ -463,7 +462,7 @@ export const ConnectWalletSocialOptions = (
       {passKeyEnabled && (
         <WalletTypeRowButton
           client={props.client}
-          icon={passkeyIcon}
+          icon={FingerPrintIcon}
           onClick={() => {
             handlePassKeyLogin();
           }}
@@ -476,7 +475,7 @@ export const ConnectWalletSocialOptions = (
       {siweEnabled && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getSocialIcon("")}
+          icon={OutlineWalletIcon}
           onClick={() => {
             handleWalletLogin();
           }}
@@ -488,7 +487,7 @@ export const ConnectWalletSocialOptions = (
       {guestEnabled && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getSocialIcon("guest")}
+          icon={GuestIcon}
           onClick={() => {
             handleGuestLogin();
           }}
@@ -500,7 +499,7 @@ export const ConnectWalletSocialOptions = (
       {props.isLinking && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getSocialIcon("")}
+          icon={OutlineWalletIcon}
           onClick={() => {
             handleWalletLogin();
           }}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.64.0";
+export const version = "5.64.1";