Handle smart account detection for inApp and ecosystem wallets

Author: joaquim-verges

.changeset/two-bugs-rescue.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Handle smart account detection for inApp and ecosystem wallets

packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -13,12 +13,12 @@ import { getTransactionGasCost } from "../../../../transaction/utils.js";
 import type { Hex } from "../../../../utils/encoding/hex.js";
 import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised-value.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { hasSponsoredTransactionsEnabled } from "../../../../wallets/smart/is-smart-wallet.js";
 import { getTokenBalance } from "../../../../wallets/utils/getTokenBalance.js";
 import { getWalletBalance } from "../../../../wallets/utils/getWalletBalance.js";
 import type { LocaleId } from "../../../web/ui/types.js";
 import type { Theme } from "../../design-system/index.js";
 import type { SupportedTokens } from "../../utils/defaultTokens.js";
-import { hasSponsoredTransactionsEnabled } from "../../utils/wallet.js";
 
 /**
  * Configuration for the "Pay Modal" that opens when the user doesn't have enough funds to send a transaction.

packages/thirdweb/src/react/core/utils/isSmartWallet.test.ts

@@ -7,8 +7,7 @@ import { resolveName } from "../../../extensions/ens/resolve-name.js";
 import { shortenAddress } from "../../../utils/address.js";
 import { parseAvatarRecord } from "../../../utils/ens/avatar.js";
 import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
-import { isEcosystemWallet } from "../../../wallets/ecosystem/is-ecosystem-wallet.js";
-import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
+import type { Account } from "../../../wallets/interfaces/wallet.js";
 import type { WalletInfo } from "../../../wallets/wallet-info.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
 import { useWalletBalance } from "../hooks/others/useWalletBalance.js";
@@ -215,50 +214,3 @@ export function useWalletImage(id: WalletId | undefined) {
     enabled: !!id,
   });
 }
-
-/**
- * @internal
- */
-export function hasSponsoredTransactionsEnabled(wallet: Wallet | undefined) {
-  if (!wallet) {
-    return false;
-  }
-  let sponsoredTransactionsEnabled = false;
-  if (wallet && wallet.id === "smart") {
-    const options = (wallet as Wallet<"smart">).getConfig();
-    if ("sponsorGas" in options) {
-      sponsoredTransactionsEnabled = options.sponsorGas;
-    }
-    if ("gasless" in options) {
-      sponsoredTransactionsEnabled = options.gasless;
-    }
-  }
-  if (wallet && (wallet.id === "inApp" || isEcosystemWallet(wallet))) {
-    const options = (wallet as Wallet<"inApp">).getConfig();
-    if (options && "smartAccount" in options && options.smartAccount) {
-      const smartOptions = options.smartAccount;
-      if ("sponsorGas" in smartOptions) {
-        sponsoredTransactionsEnabled = smartOptions.sponsorGas;
-      }
-      if ("gasless" in smartOptions) {
-        sponsoredTransactionsEnabled = smartOptions.gasless;
-      }
-    }
-    if (options?.executionMode) {
-      const execMode = options.executionMode;
-      if (execMode.mode === "EIP4337") {
-        const smartOptions = execMode.smartAccount;
-        if (smartOptions && "sponsorGas" in smartOptions) {
-          sponsoredTransactionsEnabled = smartOptions.sponsorGas;
-        }
-        if (smartOptions && "gasless" in smartOptions) {
-          sponsoredTransactionsEnabled = smartOptions.gasless;
-        }
-      }
-      if (execMode.mode === "EIP7702") {
-        sponsoredTransactionsEnabled = execMode.sponsorGas || false;
-      }
-    }
-  }
-  return sponsoredTransactionsEnabled;
-}

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

@@ -5,6 +5,7 @@ import { getContract } from "../../../../contract/contract.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
 import { formatNumber } from "../../../../utils/formatNumber.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { isSmartWallet } from "../../../../wallets/smart/is-smart-wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -13,7 +14,6 @@ import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.j
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
 import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
-import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
 import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
 import { fontSize, radius, spacing } from "../../design-system/index.js";
 import { Address } from "../components/Address.js";
@@ -326,14 +326,14 @@ function SmartAccountBadge(props: {
 }) {
   const activeAccount = useActiveAccount();
   const activeWallet = useActiveWallet();
-  const isSmartWallet = hasSmartAccount(activeWallet);
+  const isSW = isSmartWallet(activeWallet);
   const chain = useActiveWalletChain();
   const { client, theme } = props;
 
   const [isSmartWalletDeployed, setIsSmartWalletDeployed] = useState(false);
 
   useEffect(() => {
-    if (activeAccount && isSmartWallet && activeAccount.address && chain) {
+    if (activeAccount && isSW && activeAccount.address && chain) {
       const contract = getContract({
         address: activeAccount.address,
         chain,
@@ -346,7 +346,7 @@ function SmartAccountBadge(props: {
     } else {
       setIsSmartWalletDeployed(false);
     }
-  }, [activeAccount, chain, client, isSmartWallet]);
+  }, [activeAccount, chain, client, isSW]);
 
   const content = (
     <View
@@ -377,7 +377,7 @@ function SmartAccountBadge(props: {
     </View>
   );
 
-  if (chain && activeAccount && isSmartWallet) {
+  if (chain && activeAccount && isSW) {
     return (
       <>
         <Spacer size="smd" />

packages/thirdweb/src/react/core/utils/wallet.test.ts

@@ -30,6 +30,7 @@ import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { Ecosystem } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { isSmartWallet } from "../../../../wallets/smart/is-smart-wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import {
   type AppMetadata,
@@ -77,7 +78,6 @@ import type {
   SupportedNFTs,
   SupportedTokens,
 } from "../../../core/utils/defaultTokens.js";
-import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
 import { ChainActiveDot } from "../components/ChainActiveDot.js";
@@ -1186,14 +1186,14 @@ export function ConnectedToSmartWallet(props: {
 }) {
   const activeAccount = useActiveAccount();
   const activeWallet = useActiveWallet();
-  const isSmartWallet = hasSmartAccount(activeWallet);
+  const isSW = isSmartWallet(activeWallet);
   const chain = useActiveWalletChain();
   const { client, connectLocale: locale } = props;
 
   const [isSmartWalletDeployed, setIsSmartWalletDeployed] = useState(false);
 
   useEffect(() => {
-    if (activeAccount && isSmartWallet && activeAccount.address && chain) {
+    if (activeAccount && isSW && activeAccount.address && chain) {
       const contract = getContract({
         address: activeAccount.address,
         chain,
@@ -1206,7 +1206,7 @@ export function ConnectedToSmartWallet(props: {
     } else {
       setIsSmartWalletDeployed(false);
     }
-  }, [activeAccount, chain, client, isSmartWallet]);
+  }, [activeAccount, chain, client, isSW]);
 
   const content = (
     <Container flex="row" gap="3xs" center="y">
@@ -1216,7 +1216,7 @@ export function ConnectedToSmartWallet(props: {
     </Container>
   );
 
-  if (chain && activeAccount && isSmartWallet) {
+  if (chain && activeAccount && isSW) {
     return (
       <>
         {isSmartWalletDeployed ? (
@@ -1251,7 +1251,7 @@ export function InAppWalletUserInfo(props: {
   const activeWallet = useActiveWallet();
   const adminWallet = useAdminWallet();
   const { data: walletInfo } = useWalletInfo(activeWallet?.id);
-  const isSmartWallet = hasSmartAccount(activeWallet);
+  const isSW = isSmartWallet(activeWallet);
   const { data: walletName } = useQuery({
     queryKey: [
       "wallet-name",
@@ -1317,7 +1317,7 @@ export function InAppWalletUserInfo(props: {
     enabled: !!adminWallet,
   });
 
-  if (!userInfoQuery.data && isSmartWallet) {
+  if (!userInfoQuery.data && isSW) {
     return <ConnectedToSmartWallet client={client} connectLocale={locale} />;
   }
 

packages/thirdweb/src/react/core/utils/wallet.ts

@@ -5,6 +5,7 @@ import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
 import { toTokens } from "../../../../../../utils/units.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
+import { hasSponsoredTransactionsEnabled } from "../../../../../../wallets/smart/is-smart-wallet.js";
 import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
@@ -16,7 +17,6 @@ import { useChainMetadata } from "../../../../../core/hooks/others/useChainQuery
 import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBalance.js";
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
-import { hasSponsoredTransactionsEnabled } from "../../../../../core/utils/wallet.js";
 import { ErrorState } from "../../../../wallets/shared/ErrorState.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";

packages/thirdweb/src/react/native/ui/connect/ConnectedModal.tsx

@@ -4,6 +4,7 @@ import type { PreparedTransaction } from "../../../../transaction/prepare-transa
 import { shortenAddress } from "../../../../utils/address.js";
 import { formatNumber } from "../../../../utils/formatNumber.js";
 import { toTokens } from "../../../../utils/units.js";
+import { hasSponsoredTransactionsEnabled } from "../../../../wallets/smart/is-smart-wallet.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
@@ -13,7 +14,6 @@ import {
 } from "../../../core/design-system/index.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
-import { hasSponsoredTransactionsEnabled } from "../../../core/utils/wallet.js";
 import { ErrorState } from "../../wallets/shared/ErrorState.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
 import { CoinsIcon } from "../ConnectWallet/icons/CoinsIcon.js";