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;
         }