feat: smartAccount option for in-app wallets (#2931)

Co-authored-by: Manan Tank <manantankm@gmail.com>
Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>

Author: 3 people

.changeset/cuddly-news-flow.md

@@ -0,0 +1,23 @@
+---
+"thirdweb": minor
+---
+
+New `smartAccount` prop for `inAppWallet()`
+
+You can now convert an inAppWallet to a smart account simply by passing the `smartAccount` prop.
+
+```ts
+const wallet = inAppWallet({
+  smartAccount: {
+    chain: sepolia,
+    sponsorGas: true,
+  },
+});
+
+await wallet.connect({
+  client,
+  strategy: "google",
+});
+```
+
+Note: beware that when toggling this flag on and off, you will get a different address (admin EOA vs smart account).

packages/thirdweb/src/exports/utils.ts

@@ -132,6 +132,7 @@ export {
 // abi
 // ------------------------------------------------
 export { encodeAbiParameters } from "../utils/abi/encodeAbiParameters.js";
+export { encodePacked } from "viem";
 
 // Useful helpers
 export { setThirdwebDomains } from "../utils/domains.js";

packages/thirdweb/src/exports/wallets.ts

@@ -43,11 +43,6 @@ export { injectedProvider } from "../wallets/injected/mipdStore.js";
 
 export type {
   WalletId,
-  InAppWalletCreationOptions,
-  /**
-   * @deprecated use InAppWalletCreationOptions instead
-   */
-  InAppWalletCreationOptions as EmbeddedWalletCreationOptions,
   WalletAutoConnectionOption,
   WalletCreationOptions,
   WalletConnectionOption,
@@ -90,7 +85,7 @@ export type {
    * @deprecated use InAppWalletSocialAuth instead
    */
   InAppWalletSocialAuth as EmbeddedWalletSocialAuth,
-} from "../wallets/in-app/core/wallet/index.js";
+} from "../wallets/in-app/core/wallet/types.js";
 
 export type { CoinbaseSDKWalletConnectionOptions } from "../wallets/coinbase/coinbaseSDKWallet.js";
 

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

@@ -30,6 +30,7 @@ import {
   useSwitchActiveWalletChain,
 } from "../../../core/hooks/wallets/wallet-hooks.js";
 import { shortenString } from "../../../core/utils/addresses.js";
+import { hasSmartAccount } from "../../utils/isSmartWallet.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { CopyIcon } from "../components/CopyIcon.js";
 import { Img } from "../components/Img.js";
@@ -61,6 +62,7 @@ import { NetworkSelectorContent } from "./NetworkSelector.js";
 import { onModalUnmount } from "./constants.js";
 import type { SupportedTokens } from "./defaultTokens.js";
 import { FundsIcon } from "./icons/FundsIcon.js";
+import { SmartWalletBadgeIcon } from "./icons/SmartAccountBadgeIcon.js";
 import { WalletIcon } from "./icons/WalletIcon.js";
 import { BuyScreen } from "./screens/Buy/SwapScreen.js";
 import { swapTransactionsStore } from "./screens/Buy/swap/pendingSwapTx.js";
@@ -213,12 +215,7 @@ export const ConnectedWalletDetails: React.FC<{
           client={client}
         />
       ) : activeWallet?.id ? (
-        <WalletImage
-          size={iconSize.lg}
-          id={activeWallet.id}
-          client={client}
-          allowOverrides
-        />
+        <WalletImage size={iconSize.lg} id={activeWallet.id} client={client} />
       ) : (
         <WalletIcon size={iconSize.lg} />
       )}
@@ -333,7 +330,6 @@ export const ConnectedWalletDetails: React.FC<{
             size={iconSize.xxl}
             id={activeWallet.id}
             client={client}
-            allowOverrides
           />
         ) : (
           <WalletIcon size={iconSize.xxl} />
@@ -386,9 +382,7 @@ export const ConnectedWalletDetails: React.FC<{
           {balanceQuery.data?.symbol}{" "}
         </Text>
       </Container>
-
       <Spacer y="lg" />
-
       <Container px="lg">
         {/* Send, Receive, Swap */}
         <Container
@@ -463,9 +457,7 @@ export const ConnectedWalletDetails: React.FC<{
           </Button>
         </Container>
       </Container>
-
       <Spacer y="md" />
-
       <Container px="md">
         {/* Network Switcher */}
         <Container
@@ -814,21 +806,11 @@ const StyledChevronRightIcon = /* @__PURE__ */ styled(
 //   );
 // }
 
-const ActiveDot = /* @__PURE__ */ StyledDiv(() => {
-  const theme = useCustomTheme();
-  return {
-    width: "8px",
-    height: "8px",
-    borderRadius: "50%",
-    backgroundColor: theme.colors.success,
-  };
-});
-
 function ConnectedToSmartWallet() {
   const activeAccount = useActiveAccount();
   const activeWallet = useActiveWallet();
+  const isSmartWallet = hasSmartAccount(activeWallet);
   const chain = useActiveWalletChain();
-  const isSmartWallet = activeWallet?.id === "smart";
   const { client, connectLocale: locale } = useConnectUI();
 
   const [isSmartWalletDeployed, setIsSmartWalletDeployed] = useState(false);
@@ -850,9 +832,22 @@ function ConnectedToSmartWallet() {
   }, [activeAccount, chain, client, isSmartWallet]);
 
   const content = (
-    <Container flex="row" gap="xxs" center="both">
-      <ActiveDot />
-      {locale.connectedToSmartWallet}
+    <Container
+      flex="row"
+      bg="secondaryButtonBg"
+      gap="xxs"
+      style={{
+        borderRadius: radius.md,
+        padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xs}`,
+      }}
+      center="y"
+    >
+      <Container flex="row" color="accentText" center="both">
+        <SmartWalletBadgeIcon size={iconSize.xs} />
+      </Container>
+      <Text size="xs" color="secondaryButtonText">
+        {locale.connectedToSmartWallet}
+      </Text>
     </Container>
   );
 

packages/thirdweb/src/react/web/ui/ConnectWallet/icons/SmartAccountBadgeIcon.tsx

@@ -0,0 +1,42 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const SmartWalletBadgeIcon: IconFC = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 12 12"
+      width={props.size}
+      height={props.size}
+      role="presentation"
+    >
+      <g clipPath="url(#clip0_5539_26604)">
+        <path
+          d="M10 6.85691C10 9.35691 8.25 10.6069 6.17 11.3319C6.06108 11.3688 5.94277 11.3671 5.835 11.3269C3.75 10.6069 2 9.35691 2 6.85691V3.35691C2 3.22431 2.05268 3.09713 2.14645 3.00336C2.24021 2.90959 2.36739 2.85691 2.5 2.85691C3.5 2.85691 4.75 2.25691 5.62 1.49691C5.72593 1.40641 5.86068 1.35669 6 1.35669C6.13932 1.35669 6.27407 1.40641 6.38 1.49691C7.255 2.26191 8.5 2.85691 9.5 2.85691C9.63261 2.85691 9.75979 2.90959 9.85355 3.00336C9.94732 3.09713 10 3.22431 10 3.35691V6.85691Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M4.5 6.35693L5.5 7.35693L7.5 5.35693"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5539_26604">
+          <rect
+            width="12"
+            height="12"
+            fill="white"
+            transform="translate(0 0.356934)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/AccountSelectorButton.tsx

@@ -31,7 +31,6 @@ export function AccountSelectorButton(props: {
           id={props.activeWallet.id}
           size={iconSize.md}
           client={props.client}
-          allowOverrides
         />
       ) : (
         <Container color="secondaryText" flex="row" center="both">

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx

@@ -43,7 +43,6 @@ export function ReceiveFunds(props: {
                 id={props.walletId}
                 size={iconSize.xxl}
                 client={client}
-                allowOverrides
               />
             )
           }

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

@@ -1,8 +1,11 @@
 "use client";
 import { useEffect, useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import { useActiveWallet } from "../../../../exports/react-native.js";
 import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
+import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
+import { getStorage } from "../../../core/storage.js";
 import { getLastAuthProvider } from "../../wallets/in-app/storage.js";
 import { emailIcon, phoneIcon } from "../ConnectWallet/icons/dataUris.js";
 import {
@@ -23,18 +26,33 @@ export function WalletImage(props: {
   id: WalletId;
   size: string;
   client: ThirdwebClient;
-  allowOverrides?: boolean;
 }) {
   const [image, setImage] = useState<string | undefined>(undefined);
+  const activeWallet = useActiveWallet();
   useEffect(() => {
     async function fetchImage() {
+      // show EOA icon for external wallets
+      // show auth provider icon for in-app wallets
+      // show the admin EOA icon for smart
+      const storage = getStorage();
+      let activeEOAId = props.id;
+      if (props.id === "smart") {
+        const storedId = await getStoredActiveWalletId(storage);
+        if (storedId) {
+          activeEOAId = storedId;
+        }
+      }
       let mipdImage = getInstalledWalletProviders().find(
-        (provider) => provider.info.rdns === props.id,
+        (provider) => provider.info.rdns === activeEOAId,
       )?.info.icon;
 
-      if (props.allowOverrides && props.id === "inApp") {
-        // check last auth provider and override the IAW icon
-        const lastAuthProvider = await getLastAuthProvider();
+      if (
+        activeEOAId === "inApp" &&
+        activeWallet &&
+        (activeWallet.id === "inApp" || activeWallet.id === "smart")
+      ) {
+        // when showing an active wallet icon - check last auth provider and override the IAW icon
+        const lastAuthProvider = await getLastAuthProvider(storage);
         switch (lastAuthProvider) {
           case "google":
             mipdImage = googleIconUri;
@@ -57,7 +75,7 @@ export function WalletImage(props: {
       setImage(mipdImage);
     }
     fetchImage();
-  }, [props.id, props.allowOverrides]);
+  }, [props.id, activeWallet]);
 
   if (image) {
     return (

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

@@ -0,0 +1,10 @@
+import type { Wallet } from "../../../wallets/interfaces/wallet.js";
+
+export function hasSmartAccount(activeWallet?: Wallet): boolean {
+  const config = activeWallet?.getConfig();
+  return (
+    !!activeWallet &&
+    (activeWallet.id === "smart" ||
+      (activeWallet.id === "inApp" && !!config && "smartAccount" in config))
+  );
+}

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

@@ -4,7 +4,7 @@ import { useCallback, useState } from "react";
 import type {
   InAppWalletAuth,
   InAppWalletSocialAuth,
-} from "../../../../wallets/in-app/core/wallet/index.js";
+} from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";