Adds custom logo to social login modal (#3034)

Author: gregfromstl

.changeset/new-games-prove.md

@@ -0,0 +1,19 @@
+---
+"thirdweb": minor
+---
+
+Adds the ability to set a custom logo for the social login modal
+
+```ts
+import { inAppWallet } from "thirdweb/wallets";
+const wallet = inAppWallet({
+  metadata: {
+    image: {
+      src: "https://example.com/logo.png",
+      alt: "My logo",
+      width: 100,
+      height: 100,
+    },
+  },
+});
+```

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

@@ -32,6 +32,7 @@ import { TOS } from "./Modal/TOS.js";
 import { PoweredByThirdweb } from "./PoweredByTW.js";
 import { WalletButton, WalletEntryButton } from "./WalletEntryButton.js";
 import { WalletTypeRowButton } from "./WalletTypeRowButton.js";
+import { compactModalMaxHeight } from "./constants.js";
 import { genericWalletIcon } from "./icons/dataUris.js";
 
 const InAppWalletSelectionUI = /* @__PURE__ */ lazy(
@@ -311,7 +312,13 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
           // social login + More than 1 eoa wallets
           if (eoaWallets.length > 1) {
             bottomSection = (
-              <Container flex="column" gap="sm">
+              <Container
+                flex="column"
+                style={{ position: "relative" }}
+                gap="sm"
+              >
+                <GradientDiv />
+
                 <Container px="lg" flex="column" gap="md">
                   {connectAWallet}
                   {continueAsGuest}
@@ -386,7 +393,8 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
       animate="fadein"
       fullHeight
       style={{
-        maxHeight: connectModal.size === "compact" ? "550px" : undefined,
+        maxHeight:
+          connectModal.size === "compact" ? compactModalMaxHeight : undefined,
       }}
     >
       {/* Header */}
@@ -604,3 +612,17 @@ const WalletList = /* @__PURE__ */ StyledUl({
   marginBottom: 0,
   paddingBottom: spacing.lg,
 });
+
+const GradientDiv = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  theme.colors.modalBg;
+  return {
+    height: spacing.lg,
+    position: "absolute",
+    top: `-${spacing.lg}`,
+    left: 0,
+    width: "100%",
+    background: `linear-gradient(to bottom, transparent 0%, ${theme.colors.modalBg} 80%)`,
+    pointerEvents: "none",
+  };
+});

packages/thirdweb/src/react/web/ui/ConnectWallet/constants.ts

@@ -12,7 +12,7 @@ export const modalMaxWidthWide = `${wideModalWidth}px`;
 export const wideModalScreenThreshold = wideModalWidth + 40;
 
 export const wideModalMaxHeight = "570px";
-export const compactModalMaxHeight = "650px";
+export const compactModalMaxHeight = "660px";
 
 export const defaultTheme = "dark";
 

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

@@ -3,6 +3,7 @@ import { useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { resolveScheme } from "../../../../utils/ipfs.js";
 import { Skeleton } from "./Skeleton.js";
+import { Container } from "./basic.js";
 
 // Note: Must not use useConnectUI here
 
@@ -28,7 +29,11 @@ export const Img: React.FC<{
   const heightPx = `${props.height || props.width}px`;
 
   if (propSrc === undefined) {
-    return <Skeleton width={widthPx} height={heightPx} />;
+    return (
+      <Container style={{ margin: "auto" }}>
+        <Skeleton width={widthPx} height={heightPx} />
+      </Container>
+    );
   }
 
   const getSrc = () => {
@@ -51,9 +56,14 @@ export const Img: React.FC<{
         display: "inline-flex",
         flexShrink: 0,
         alignItems: "center",
+        justifyItems: "center",
       }}
     >
-      {!isLoaded && <Skeleton width={widthPx} height={heightPx} />}
+      {!isLoaded && (
+        <Container style={{ margin: "auto" }}>
+          <Skeleton width={widthPx} height={heightPx} />
+        </Container>
+      )}
       <img
         onLoad={() => {
           setIsLoaded(true);
@@ -66,6 +76,7 @@ export const Img: React.FC<{
         loading={props.loading}
         decoding="async"
         style={{
+          display: isLoaded ? "block" : "none",
           objectFit: "contain",
           height: !isLoaded
             ? 0

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

@@ -152,6 +152,16 @@ export const InAppWalletFormUI = (props: InAppWalletFormUIProps) => {
 
   const showOnlyIcons = socialLogins.length > 1;
 
+  if (
+    config?.metadata?.image &&
+    (!config.metadata.image.height || !config.metadata.image.width)
+  ) {
+    console.warn(
+      "Image is not properly configured. Please set height and width.",
+      config.metadata.image,
+    );
+  }
+
   return (
     <Container
       flex="column"
@@ -160,6 +170,25 @@ export const InAppWalletFormUI = (props: InAppWalletFormUIProps) => {
         position: "relative",
       }}
     >
+      {config?.metadata?.image && (
+        <Img
+          loading="eager"
+          client={client}
+          style={{
+            maxHeight: "100px",
+            maxWidth: "300px",
+            margin: "auto",
+          }}
+          src={config.metadata.image.src}
+          alt={config.metadata.image.alt}
+          width={Math.min(config.metadata.image.width ?? 300, 300)?.toString()}
+          height={Math.min(
+            config.metadata.image.height ?? 100,
+            100,
+          )?.toString()}
+        />
+      )}
+
       {/* Social Login */}
       {hasSocialLogins && (
         <Container
@@ -320,7 +349,7 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
       {isCompact ? (
         <>
           <ModalHeader onBack={onBack} title={locale.title} />
-          <Spacer y="xl" />
+          <Spacer y="sm" />
         </>
       ) : null}
 

packages/thirdweb/src/wallets/create-wallet.ts

@@ -420,6 +420,21 @@ export function smartWallet(
  * },
  * });
  * ```
+ *
+ * Specify a logo for your login page
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ * const wallet = inAppWallet({
+ *  metadata: {
+ *   image: {
+ *    src: "https://example.com/logo.png",
+ *    alt: "My logo",
+ *    width: 100,
+ *    height: 100,
+ *   },
+ *  },
+ * });
+ * ```
  * @wallet
  */
 export function inAppWallet(

packages/thirdweb/src/wallets/in-app/core/wallet/types.ts

@@ -32,6 +32,14 @@ export type InAppWalletCreationOptions =
       auth?: {
         options: InAppWalletAuth[];
       };
+      metadata?: {
+        image?: {
+          src: string;
+          width?: number;
+          height?: number;
+          alt?: string;
+        };
+      };
       smartAccount?: SmartWalletOptions;
     }
   | undefined;