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

2024-04-11 16:47:39 +00:00
parent a92311a53d
commit 007770cd63
18 changed files with 135 additions and 23 deletions
@@ -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
+````
@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+Increase max-height for Connect Modal
@@ -5,5 +5,8 @@
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
-  "typescript.preferences.importModuleSpecifier": "relative"
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
 }
@@ -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";

@@ -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}": {
@@ -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" />
@@ -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
@@ -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];
@@ -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;
        }
@@ -24,8 +24,8 @@ export async function getWalletInfo<TImage extends boolean>(
    case "inApp": {
      return (
        image
-          ? import("../custom/in-app/image.js").then((img) => img.default)
-          : import("../custom/in-app/index.js").then((w) => w.wallet)
+          ? import("../custom/inApp/image.js").then((img) => img.default)
+          : import("../custom/inApp/index.js").then((w) => w.wallet)
      ) as Promise<[TImage] extends [true] ? string : any>;
    }
    case "walletConnect": {
@@ -37,6 +37,13 @@ export async function getWalletInfo<TImage extends boolean>(
          : import("../custom/walletConnect/index.js").then((w) => w.wallet)
      ) as Promise<[TImage] extends [true] ? string : any>;
    }
+    case "embedded": {
+      return (
+        image
+          ? import("../custom/embedded/image.js").then((img) => img.default)
+          : import("../custom/embedded/index.js").then((w) => w.wallet)
+      ) as Promise<[TImage] extends [true] ? string : any>;
+    }
    case "io.metamask": {
      return (
        image
@@ -1321,6 +1321,10 @@ const ALL_MINIMAL_WALLET_INFOS = (<const>[
    id: "inApp",
    name: "In-App Wallet",
  },
+  {
+    id: "embedded",
+    name: "In-App Wallet",
+  },
  {
    id: "walletConnect",
    name: "WalletConnect",
@@ -2,6 +2,6 @@
 // Do not modify this file manually.

 const image =
-  "data:image/webp;base64,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";
+  "data:image/webp;base64,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";

 export default image;
@@ -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],
@@ -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;
@@ -0,0 +1,4 @@
+const image =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM1ODlfODY0OSkiPgo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSI4IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMzU4OV84NjQ5KSIvPgo8cmVjdCB4PSItMSIgeT0iLTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcng9IjkuOCIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzM1ODlfODY0OSkiLz4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAxXzM1ODlfODY0OSkiPgo8cGF0aCBkPSJNMjQgMTQuMjVDMTguNjE3MiAxNC4yNSAxNC4yNSAxOC42MTcyIDE0LjI1IDI0QzE0LjI1IDI5LjM4MjggMTguNjE3MiAzMy43NSAyNCAzMy43NUMyNC44OTg4IDMzLjc1IDI1LjYyNSAzNC40NzYyIDI1LjYyNSAzNS4zNzVDMjUuNjI1IDM2LjI3MzggMjQuODk4OCAzNyAyNCAzN0MxNi44MTk1IDM3IDExIDMxLjE4MDUgMTEgMjRDMTEgMTYuODE5NSAxNi44MTk1IDExIDI0IDExQzMxLjE4MDUgMTEgMzcgMTYuODE5NSAzNyAyNFYyNS42MjVDMzcgMjguMzE2NCAzNC44MTY0IDMwLjUgMzIuMTI1IDMwLjVDMzAuNjM3MSAzMC41IDI5LjMwMTYgMjkuODI5NyAyOC40MDc4IDI4Ljc3ODVDMjcuMjUgMjkuODQ0OSAyNS43MDEyIDMwLjUgMjQgMzAuNUMyMC40MDk4IDMwLjUgMTcuNSAyNy41OTAyIDE3LjUgMjRDMTcuNSAyMC40MDk4IDIwLjQwOTggMTcuNSAyNCAxNy41QzI1LjQxNjggMTcuNSAyNi43MjcgMTcuOTUyIDI3Ljc5MzQgMTguNzIzOEMyOC4wODI4IDE4LjQ2OTkgMjguNDU4NiAxOC4zMTI1IDI4Ljg3NSAxOC4zMTI1QzI5Ljc3MzggMTguMzEyNSAzMC41IDE5LjAzODcgMzAuNSAxOS45Mzc1VjI1LjYyNUMzMC41IDI2LjUyMzggMzEuMjI2MiAyNy4yNSAzMi4xMjUgMjcuMjVDMzMuMDIzOCAyNy4yNSAzMy43NSAyNi41MjM4IDMzLjc1IDI1LjYyNVYyNEMzMy43NSAxOC42MTcyIDI5LjM4MjggMTQuMjUgMjQgMTQuMjVaTTI3LjI1IDI0QzI3LjI1IDIzLjEzOCAyNi45MDc2IDIyLjMxMTQgMjYuMjk4MSAyMS43MDE5QzI1LjY4ODYgMjEuMDkyNCAyNC44NjIgMjAuNzUgMjQgMjAuNzVDMjMuMTM4IDIwLjc1IDIyLjMxMTQgMjEuMDkyNCAyMS43MDE5IDIxLjcwMTlDMjEuMDkyNCAyMi4zMTE0IDIwLjc1IDIzLjEzOCAyMC43NSAyNEMyMC43NSAyNC44NjIgMjEuMDkyNCAyNS42ODg2IDIxLjcwMTkgMjYuMjk4MUMyMi4zMTE0IDI2LjkwNzYgMjMuMTM4IDI3LjI1IDI0IDI3LjI1QzI0Ljg2MiAyNy4yNSAyNS42ODg2IDI2LjkwNzYgMjYuMjk4MSAyNi4yOTgxQzI2LjkwNzYgMjUuNjg4NiAyNy4yNSAyNC44NjIgMjcuMjUgMjRaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8zNTg5Xzg2NDkiIHgxPSIyNS41IiB5MT0iLTYuMjk1NzJlLTA2IiB4Mj0iMzAuMjAxNiIgeTI9IjQ3LjUzNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjODM1OEJBIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdCMUNGNyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMzU4OV84NjQ5IiB4MT0iMjUuNTYyNSIgeTE9Ii0xLjAwMDAxIiB4Mj0iMzAuNDYiIHkyPSI0OC41MTU2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MzU4QkEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjN0IxQ0Y3Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzU4OV84NjQ5Ij4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiByeD0iOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMV8zNTg5Xzg2NDkiPgo8cmVjdCB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMSAxMSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K";
+
+export default image;
@@ -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;