feat: add alias for inApp wallet, show ENS in Connect (#2748)

Author: MananTank

.changeset/chilly-poets-tap.md

@@ -0,0 +1,13 @@
+---
+"thirdweb": patch
+---
+
+- Show ENS name and avatar in ConnectButton's Details Modal
+
+- Add wallet ID alias `"embedded"` for `"inApp"` to avoid breaking change
+
+```ts
+createWallet("embedded") // supported but deprecated
+
+createWallet("inApp") // recommended
+````

.changeset/sour-kids-run.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+Increase max-height for Connect Modal

.vscode/settings.json

@@ -5,5 +5,8 @@
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"
   },
-  "typescript.preferences.importModuleSpecifier": "relative"
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
 }

legacy_packages/react/src/wallet/ConnectWallet/constants.ts

@@ -11,7 +11,7 @@ export const modalMaxWidthWide = wideModalWidth + "px";
 export const wideModalScreenThreshold = wideModalWidth + 40;
 
 export const wideModalMaxHeight = "570px";
-export const compactModalMaxHeight = "600px";
+export const compactModalMaxHeight = "650px";
 
 export const defaultTheme = "dark";
 

packages/thirdweb/scripts/wallets/generate.ts

@@ -100,6 +100,10 @@ const customWalletInfos = [
     id: "inApp",
     name: "In-App Wallet",
   },
+  {
+    id: "embedded",
+    name: "In-App Wallet",
+  },
   {
     id: "walletConnect",
     name: "WalletConnect",
@@ -243,7 +247,7 @@ const walletImports = allSupportedWallets
   )
   .join("\n");
 
-const customWalletImports = ["smart", "inApp", "walletConnect"]
+const customWalletImports = ["smart", "inApp", "walletConnect", "embedded"]
   .map(
     (walletId) =>
       `case "${walletId}": {

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

@@ -12,6 +12,9 @@ import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState, useSyncExternalStore } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import { getContract } from "../../../../contract/contract.js";
+import { ethereum } from "../../../../exports/chains.js";
+import { resolveAvatar } from "../../../../extensions/ens/resolve-avatar.js";
+import { resolveName } from "../../../../extensions/ens/resolve-name.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
 import { getUserEmail } from "../../../../wallets/in-app/core/authentication/index.js";
 import {
@@ -30,6 +33,7 @@ import {
 import { shortenString } from "../../../core/utils/addresses.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { CopyIcon } from "../components/CopyIcon.js";
+import { Img } from "../components/Img.js";
 import { Modal } from "../components/Modal.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { Spacer } from "../components/Spacer.js";
@@ -56,6 +60,7 @@ import { NetworkSelectorContent } from "./NetworkSelector.js";
 import { onModalUnmount } from "./constants.js";
 import type { SupportedTokens } from "./defaultTokens.js";
 import { FundsIcon } from "./icons/FundsIcon.js";
+import { WalletIcon } from "./icons/WalletIcon.js";
 import { SwapScreen } from "./screens/Buy/SwapScreen.js";
 import { swapTransactionsStore } from "./screens/Buy/swap/pendingSwapTx.js";
 import { ReceiveFunds } from "./screens/ReceiveFunds.js";
@@ -115,7 +120,26 @@ export const ConnectedWalletDetails: React.FC<{
   const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
   const [isOpen, setIsOpen] = useState(false);
 
-  // const ensQuery = useENS();
+  const ensNameQuery = useQuery({
+    queryKey: ["ens-name", activeAccount?.address],
+    enabled: !!activeAccount?.address,
+    queryFn: () =>
+      resolveName({
+        client,
+        address: activeAccount?.address || "",
+        resolverChain: ethereum,
+      }),
+  });
+
+  const ensAvatarQuery = useQuery({
+    queryKey: ["ens-avatar", ensNameQuery.data],
+    enabled: !!ensNameQuery.data,
+    queryFn: async () =>
+      resolveAvatar({
+        client,
+        name: ensNameQuery.data || "",
+      }),
+  });
 
   // const [overrideWalletIconUrl, setOverrideWalletIconUrl] = useState<
   //   string | undefined
@@ -138,7 +162,7 @@ export const ConnectedWalletDetails: React.FC<{
     ? shortenString(activeAccount.address, false)
     : "";
 
-  const addressOrENS = shortAddress;
+  const addressOrENS = ensNameQuery.data || shortAddress;
 
   useEffect(() => {
     if (!isOpen) {
@@ -165,9 +189,19 @@ export const ConnectedWalletDetails: React.FC<{
       style={props.detailsButton?.style}
       data-test="connected-wallet-details"
     >
-      {/* TODO: render a placeholder if we don't have an active wallet? */}
-      {activeWallet?.id && (
+      {ensAvatarQuery.data ? (
+        <Img
+          src={ensAvatarQuery.data}
+          width={iconSize.lg}
+          height={iconSize.lg}
+          style={{
+            borderRadius: radius.sm,
+          }}
+        />
+      ) : activeWallet?.id ? (
         <WalletImage size={iconSize.lg} id={activeWallet.id} />
+      ) : (
+        <WalletIcon size={iconSize.lg} />
       )}
 
       <Container flex="column" gap="xxs">
@@ -260,9 +294,19 @@ export const ConnectedWalletDetails: React.FC<{
     <div>
       <Spacer y="xl" />
       <Container px="lg" flex="column" center="x">
-        {/* TODO: render a placeholder if we don't have an active wallet? */}
-        {activeWallet?.id && (
-          <WalletImage id={activeWallet.id} size={iconSize.xxl} />
+        {ensAvatarQuery.data ? (
+          <Img
+            src={ensAvatarQuery.data}
+            width={iconSize.xxl}
+            height={iconSize.xxl}
+            style={{
+              borderRadius: radius.lg,
+            }}
+          />
+        ) : activeWallet?.id ? (
+          <WalletImage size={iconSize.xxl} id={activeWallet.id} />
+        ) : (
+          <WalletIcon size={iconSize.xxl} />
         )}
 
         <Spacer y="md" />

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx

@@ -132,7 +132,7 @@ export function AnyWalletConnectUI(props: {
     );
   }
 
-  if (props.wallet.id === "inApp") {
+  if (props.wallet.id === "inApp" || props.wallet.id === "embedded") {
     return (
       <Suspense fallback={<LoadingScreen />}>
         <InAppWalletConnectUI

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/screen.tsx

@@ -1,15 +1,12 @@
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useWalletConnectionCtx } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
-// import type { WalletConfig } from "../../../../core/types/wallets.js";
 import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js";
 import { ModalConfigCtx } from "../../../providers/wallet-ui-states-provider.js";
 import { reservedScreens } from "../constants.js";
 
 type Screen = string | Wallet;
 
-const inAppWalletId = "inApp";
-
 export type ScreenSetup = {
   screen: Screen;
   setScreen: (newSreen: Screen) => void;
@@ -29,7 +26,9 @@ export function useSetupScreen() {
 
   let initialScreen: Screen = reservedScreens.main;
 
-  const socialLogin = wallets.find((w) => w.id === inAppWalletId);
+  const socialLogin = wallets.find(
+    (w) => w.id === "embedded" || w.id === "inApp",
+  );
 
   if (wallets.length === 1 && wallets[0]) {
     initialScreen = wallets[0];

packages/thirdweb/src/react/web/utils/sortWallets.ts

@@ -40,8 +40,8 @@ export function sortWallets<T extends { id: string }>(
       })
       // show wallets with select ui first ( currently only in-app )
       .sort((a, b) => {
-        const aIsInApp = a.id === "inApp";
-        const bIsInApp = b.id === "inApp";
+        const aIsInApp = a.id === "inApp" || a.id === "embedded";
+        const bIsInApp = b.id === "inApp" || b.id === "embedded";
         if (aIsInApp && !bIsInApp) {
           return -1;
         }

packages/thirdweb/src/wallets/__generated__/getWalletInfo.ts

@@ -50,6 +50,7 @@ export function createWallet<const ID extends WalletId>(
     /**
      * IN-APP WALLET
      */
+    case "embedded":
     case "inApp": {
       return inAppWallet(
         creationOptions as CreateWalletArgs<"inApp">[1],

packages/thirdweb/src/wallets/__generated__/wallet-infos.ts

@@ -0,0 +1,27 @@
+export const wallet = {
+  id: "embedded",
+  name: "Social Login",
+  homepage: "https://thirdweb.com",
+  app: {
+    browser: null,
+    ios: null,
+    android: null,
+    mac: null,
+    windows: null,
+    linux: null,
+    chrome: null,
+    firefox: null,
+    safari: null,
+    edge: null,
+    opera: null,
+  },
+  rdns: null,
+  mobile: {
+    native: null,
+    universal: null,
+  },
+  desktop: {
+    native: null,
+    universal: null,
+  },
+} as const;

packages/thirdweb/src/wallets/__generated__/wallet/io.ozonewallet/image.ts

@@ -0,0 +1,4 @@
+const image =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM1ODlfODY0OSkiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzU4OV84NjQ5KSIvPgo8cmVjdCB4PSItMSIgeT0iLTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcng9IjkuOCIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzM1ODlfODY0OSkiLz4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAxXzM1ODlfODY0OSkiPgo8cGF0aCBkPSJNMjQgMTQuMjVDMTguNjE3MiAxNC4yNSAxNC4yNSAxOC42MTcyIDE0LjI1IDI0QzE0LjI1IDI5LjM4MjggMTguNjE3MiAzMy43NSAyNCAzMy43NUMyNC44OTg4IDMzLjc1IDI1LjYyNSAzNC40NzYyIDI1LjYyNSAzNS4zNzVDMjUuNjI1IDM2LjI3MzggMjQuODk4OCAzNyAyNCAzN0MxNi44MTk1IDM3IDExIDMxLjE4MDUgMTEgMjRDMTEgMTYuODE5NSAxNi44MTk1IDExIDI0IDExQzMxLjE4MDUgMTEgMzcgMTYuODE5NSAzNyAyNFYyNS42MjVDMzcgMjguMzE2NCAzNC44MTY0IDMwLjUgMzIuMTI1IDMwLjVDMzAuNjM3MSAzMC41IDI5LjMwMTYgMjkuODI5NyAyOC40MDc4IDI4Ljc3ODVDMjcuMjUgMjkuODQ0OSAyNS43MDEyIDMwLjUgMjQgMzAuNUMyMC40MDk4IDMwLjUgMTcuNSAyNy41OTAyIDE3LjUgMjRDMTcuNSAyMC40MDk4IDIwLjQwOTggMTcuNSAyNCAxNy41QzI1LjQxNjggMTcuNSAyNi43MjcgMTcuOTUyIDI3Ljc5MzQgMTguNzIzOEMyOC4wODI4IDE4LjQ2OTkgMjguNDU4NiAxOC4zMTI1IDI4Ljg3NSAxOC4zMTI1QzI5Ljc3MzggMTguMzEyNSAzMC41IDE5LjAzODcgMzAuNSAxOS45Mzc1VjI1LjYyNUMzMC41IDI2LjUyMzggMzEuMjI2MiAyNy4yNSAzMi4xMjUgMjcuMjVDMzMuMDIzOCAyNy4yNSAzMy43NSAyNi41MjM4IDMzLjc1IDI1LjYyNVYyNEMzMy43NSAxOC42MTcyIDI5LjM4MjggMTQuMjUgMjQgMTQuMjVaTTI3LjI1IDI0QzI3LjI1IDIzLjEzOCAyNi45MDc2IDIyLjMxMTQgMjYuMjk4MSAyMS43MDE5QzI1LjY4ODYgMjEuMDkyNCAyNC44NjIgMjAuNzUgMjQgMjAuNzVDMjMuMTM4IDIwLjc1IDIyLjMxMTQgMjEuMDkyNCAyMS43MDE5IDIxLjcwMTlDMjEuMDkyNCAyMi4zMTE0IDIwLjc1IDIzLjEzOCAyMC43NSAyNEMyMC43NSAyNC44NjIgMjEuMDkyNCAyNS42ODg2IDIxLjcwMTkgMjYuMjk4MUMyMi4zMTE0IDI2LjkwNzYgMjMuMTM4IDI3LjI1IDI0IDI3LjI1QzI0Ljg2MiAyNy4yNSAyNS42ODg2IDI2LjkwNzYgMjYuMjk4MSAyNi4yOTgxQzI2LjkwNzYgMjUuNjg4NiAyNy4yNSAyNC44NjIgMjcuMjUgMjRaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8zNTg5Xzg2NDkiIHgxPSIyNS41IiB5MT0iLTYuMjk1NzJlLTA2IiB4Mj0iMzAuMjAxNiIgeTI9IjQ3LjUzNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjODM1OEJBIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdCMUNGNyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMzU4OV84NjQ5IiB4MT0iMjUuNTYyNSIgeTE9Ii0xLjAwMDAxIiB4Mj0iMzAuNDYiIHkyPSI0OC41MTU2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzU4QkEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0IxQ0Y3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzU4OV84NjQ5Ij4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiByeD0iOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMV8zNTg5Xzg2NDkiPgo8cmVjdCB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMSAxMSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K";
+
+export default image;

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

@@ -22,6 +22,7 @@ import type {
 export type WalletId =
   | "walletConnect"
   | "inApp"
+  | "embedded" // deprecated
   | "smart"
   | WCSupportedWalletIds
   | InjectedSupportedWalletIds;
@@ -67,7 +68,7 @@ export type WalletConnectionOption<T extends WalletId> =
     : T extends "smart"
       ? SmartWalletConnectionOptions
       : // inApp wallet
-        T extends "inApp"
+        T extends "inApp" | "embedded"
         ? InAppWalletConnectionOptions
         : // coinbase wallet (inhected + coinbaseWallet)
           T extends "com.coinbase.wallet"
@@ -93,7 +94,7 @@ export type WalletAutoConnectionOption<T extends WalletId> =
     ? WCAutoConnectOptions
     : T extends "smart"
       ? SmartWalletConnectionOptions
-      : T extends "inApp"
+      : T extends "inApp" | "embedded"
         ? InAppWalletAutoConnectOptions
         : // coinbase wallet (inhected + coinbaseWallet)
           T extends "com.coinbase.wallet"
@@ -115,7 +116,7 @@ export type WalletAutoConnectionOption<T extends WalletId> =
  */
 export type WalletCreationOptions<T extends WalletId> = T extends "smart"
   ? SmartWalletOptions
-  : T extends "inApp"
+  : T extends "inApp" | "embedded"
     ? InAppWalletCreationOptions
     : undefined;