thirdweb 5.54.0 → 5.55.0

package/src/exports/extensions/ens.ts

@@ -8,6 +8,11 @@ export {
   resolveAvatar,
 } from "../../extensions/ens/resolve-avatar.js";
 
+export {
+  parseAvatarRecord,
+  type ParseAvatarOptions,
+} from "../../utils/ens/avatar.js";
+
 export {
   type ResolveTextOptions,
   resolveText,

package/src/pay/buyWithFiat/getQuote.ts

@@ -1,5 +1,6 @@
 import type { ThirdwebClient } from "../../client/client.js";
 import { getClientFetch } from "../../utils/fetch.js";
+import type { FiatProvider } from "../utils/commonTypes.js";
 import { getPayBuyWithFiatQuoteEndpoint } from "../utils/definitions.js";
 
 /**
@@ -82,6 +83,13 @@ export type GetBuyWithFiatQuoteParams = {
    * If erc20, will onramp native token + erc20
    */
   toGasAmountWei?: string;
+
+  /**
+   * Optional parameter to specify the preferred onramp provider.
+   *
+   * By default, we choose a recommended provider based on the location of the user, KYC status, and currency.
+   */
+  preferredProvider?: FiatProvider;
 };
 
 /**
@@ -303,6 +311,7 @@ export async function getBuyWithFiatQuote(
         purchaseData: params.purchaseData,
         fromAddress: params.fromAddress,
         toGasAmountWei: params.toGasAmountWei,
+        preferredProvider: params.preferredProvider,
       }),
     });
 

package/src/pay/utils/commonTypes.ts

@@ -16,3 +16,5 @@ export type PayOnChainTransactionDetails = {
   completedAt?: string; // ISO DATE
   explorerLink?: string;
 };
+
+export type FiatProvider = "STRIPE" | "TRANSAK" | "KADO";

package/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -2,11 +2,13 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
+import type { FiatProvider } from "../../../../pay/utils/commonTypes.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
+import type { WalletId } from "../../../../wallets/wallet-types.js";
 import type { NetworkSelectorProps } from "../../../web/ui/ConnectWallet/NetworkSelector.js";
 import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js";
 import type { LocaleId } from "../../../web/ui/types.js";
@@ -86,6 +88,7 @@ export type PayUIOptions = Prettify<
           prefillSource?: {
             currency?: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
           };
+          preferredProvider?: FiatProvider;
         }
       | false;
 
@@ -310,6 +313,11 @@ export type ConnectButton_detailsModalOptions = {
    * By default the "Buy Funds" button is shown.
    */
   hideBuyFunds?: boolean;
+
+  /**
+   * All wallet IDs included in this array will be hidden from wallet selection when connected.
+   */
+  hiddenWallets?: WalletId[];
 };
 
 /**

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -3,6 +3,7 @@ import type { Chain } from "../../../../chains/types.js";
 import { getGasPrice } from "../../../../gas/get-gas-price.js";
 import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
+import type { FiatProvider } from "../../../../pay/utils/commonTypes.js";
 import { estimateGasCost } from "../../../../transaction/actions/estimate-gas-cost.js";
 import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import { sendTransaction } from "../../../../transaction/actions/send-transaction.js";
@@ -58,6 +59,7 @@ export type SendTransactionPayModalConfig =
               currency?: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
             };
             testMode?: boolean;
+            preferredProvider?: FiatProvider;
           };
       purchaseData?: object;
       /**

package/src/react/core/utils/walletIcon.ts

@@ -28,6 +28,9 @@ export const telegramIconUri =
 export const microsoftIconUri =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxwYXRoIGZpbGw9IiNmZjU3MjIiIGQ9Ik02IDZIMjJWMjJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMTQpIi8+PHBhdGggZmlsbD0iIzRjYWY1MCIgZD0iTTI2IDZINDJWMjJIMjZ6IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDM0IDE0KSIvPjxwYXRoIGZpbGw9IiNmZmMxMDciIGQ9Ik0yNiAyNkg0MlY0MkgyNnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMzQgMzQpIi8+PHBhdGggZmlsbD0iIzAzYTlmNCIgZD0iTTYgMjZIMjJWNDJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMzQpIi8+PC9zdmc+";
 
+export const xIcon =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgdmlld0JveD0iMCAwIDMyMCAzMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIiByeD0iMjQiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNzcuMzE1IDE0NS4zMzVMMjQ1LjA2OCA2N0gyMjkuMDEzTDE3MC4xODIgMTM1LjAxN0wxMjMuMTk1IDY3SDY5TDE0MC4wNTUgMTY5Ljg1NEw2OSAyNTJIODUuMDU2M0wxNDcuMTgzIDE4MC4xNzJMMTk2LjgwNSAyNTJIMjUxTDE3Ny4zMTEgMTQ1LjMzNUgxNzcuMzE1Wk0xNTUuMzIzIDE3MC43NkwxNDguMTI0IDE2MC41MThMOTAuODQxNyA3OS4wMjJIMTE1LjUwM0wxNjEuNzMxIDE0NC43OTJMMTY4LjkzIDE1NS4wMzRMMjI5LjAyIDI0MC41MjVIMjA0LjM1OUwxNTUuMzIzIDE3MC43NjRWMTcwLjc2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
+
 export const emailIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjMzMzUgMi42NjY1SDIuNjY2ODNDMS45MzA0NSAyLjY2NjUgMS4zMzM1IDMuMjYzNDYgMS4zMzM1IDMuOTk5ODRWMTEuOTk5OEMxLjMzMzUgMTIuNzM2MiAxLjkzMDQ1IDEzLjMzMzIgMi42NjY4MyAxMy4zMzMySDEzLjMzMzVDMTQuMDY5OSAxMy4zMzMyIDE0LjY2NjggMTIuNzM2MiAxNC42NjY4IDExLjk5OThWMy45OTk4NEMxNC42NjY4IDMuMjYzNDYgMTQuMDY5OSAyLjY2NjUgMTMuMzMzNSAyLjY2NjVaIiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQuNjY2OCA0LjY2NjVMOC42ODY4MyA4LjQ2NjVDOC40ODEwMSA4LjU5NTQ1IDguMjQzMDQgOC42NjM4NCA4LjAwMDE2IDguNjYzODRDNy43NTcyOCA4LjY2Mzg0IDcuNTE5MzEgOC41OTU0NSA3LjMxMzUgOC40NjY1TDEuMzMzNSA0LjY2NjUiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=";
 
@@ -49,6 +52,7 @@ export const socialIcons = {
   facebook: facebookIconUri,
   discord: discordIconUri,
   line: lineIconUri,
+  x: xIcon,
   farcaster: farcasterIconUri,
   telegram: telegramIconUri,
 };
@@ -72,6 +76,8 @@ export function getWalletIcon(provider: string) {
       return discordIconUri;
     case "line":
       return lineIconUri;
+    case "x":
+      return xIcon;
     case "farcaster":
       return farcasterIconUri;
     case "telegram":

package/src/react/native/ui/components/WalletImage.tsx

@@ -17,6 +17,7 @@ import {
   PHONE_ICON,
   TELEGRAM_ICON,
   WALLET_ICON,
+  X_ICON,
 } from "../icons/svgs.js";
 import { RNImage } from "./RNImage.js";
 
@@ -84,6 +85,8 @@ export function getAuthProviderImage(authProvider: string | null): string {
       return DISCORD_ICON;
     case "line":
       return LINE_ICON;
+    case "x":
+      return X_ICON;
     case "farcaster":
       return FARCASTER_ICON;
     case "telegram":

package/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -36,6 +36,7 @@ import {
   GOOGLE_ICON,
   LINE_ICON,
   TELEGRAM_ICON,
+  X_ICON,
 } from "../icons/svgs.js";
 import type { ModalState } from "./ConnectModal.js";
 import { LoadingView } from "./LoadingView.js";
@@ -55,6 +56,7 @@ const socialIcons = {
   apple: APPLE_ICON,
   discord: DISCORD_ICON,
   line: LINE_ICON,
+  x: X_ICON,
   farcaster: FARCASTER_ICON,
   telegram: TELEGRAM_ICON,
 };

package/src/react/native/ui/icons/svgs.ts

@@ -93,6 +93,11 @@ export const RIGHT_ARROW = `<svg width="20" height="20" viewBox="0 0 20 20" fill
 </svg>
 `;
 
+export const X_ICON = `<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="320" height="320" rx="24" fill="black"/>
+<path d="M177.315 145.335L245.068 67H229.013L170.182 135.017L123.195 67H69L140.055 169.854L69 252H85.0563L147.183 180.172L196.805 252H251L177.311 145.335H177.315ZM155.323 170.76L148.124 160.518L90.8417 79.022H115.503L161.731 144.792L168.93 155.034L229.02 240.525H204.359L155.323 170.764V170.76Z" fill="white"/>
+</svg>`;
+
 export const WALLET_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.6667 4.66667V2.66667C12.6667 2.48986 12.5964 2.32029 12.4714 2.19526C12.3464 2.07024 12.1768 2 12 2H3.33333C2.97971 2 2.64057 2.14048 2.39052 2.39052C2.14048 2.64057 2 2.97971 2 3.33333C2 3.68696 2.14048 4.02609 2.39052 4.27614C2.64057 4.52619 2.97971 4.66667 3.33333 4.66667H13.3333C13.5101 4.66667 13.6797 4.7369 13.8047 4.86193C13.9298 4.98695 14 5.15652 14 5.33333V8M14 8H12C11.6464 8 11.3072 8.14048 11.0572 8.39052C10.8071 8.64057 10.6667 8.97971 10.6667 9.33333C10.6667 9.68696 10.8071 10.0261 11.0572 10.2761C11.3072 10.5262 11.6464 10.6667 12 10.6667H14C14.1768 10.6667 14.3464 10.5964 14.4714 10.4714C14.5964 10.3464 14.6667 10.1768 14.6667 10V8.66667C14.6667 8.48986 14.5964 8.32029 14.4714 8.19526C14.3464 8.07024 14.1768 8 14 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M2 3.3335V12.6668C2 13.0205 2.14048 13.3596 2.39052 13.6096C2.64057 13.8597 2.97971 14.0002 3.33333 14.0002H13.3333C13.5101 14.0002 13.6797 13.9299 13.8047 13.8049C13.9298 13.6799 14 13.5103 14 13.3335V10.6668" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -544,6 +544,7 @@ function ConnectButtonInner(
         showAllWallets: props.showAllWallets,
         walletConnect: props.walletConnect,
         wallets: props.wallets,
+        hiddenWallets: props.detailsModal?.hiddenWallets,
       }}
     />
   );

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -19,6 +19,7 @@ import { formatNumber } from "../../../../utils/formatNumber.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
+import type { WalletId } from "../../../../wallets/wallet-types.js";
 import {
   CustomThemeProvider,
   parseTheme,
@@ -744,6 +745,7 @@ function DetailsModal(props: {
         chain={props.connectOptions?.chain}
         chains={props.connectOptions?.chains}
         client={client}
+        hiddenWallets={props.connectOptions?.hiddenWallets}
         connectLocale={locale}
         recommendedWallets={props.connectOptions?.recommendedWallets}
         showAllWallets={!!props.connectOptions?.showAllWallets}
@@ -924,6 +926,7 @@ function DetailsModal(props: {
             mode: "fund_wallet",
           }
         }
+        hiddenWallets={props.detailsModal?.hiddenWallets}
         theme={typeof props.theme === "string" ? props.theme : props.theme.type}
         onDone={closeModal}
         connectOptions={undefined}
@@ -1156,6 +1159,7 @@ export type DetailsModalConnectOptions = {
   chain?: Chain;
   chains?: Chain[];
   recommendedWallets?: Wallet[];
+  hiddenWallets?: WalletId[];
   showAllWallets?: boolean;
 };
 

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -10,6 +10,7 @@ import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getSta
 import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
+import type { WalletId } from "../../../../../../wallets/wallet-types.js";
 import {
   type Theme,
   iconSize,
@@ -91,6 +92,7 @@ export type BuyScreenProps = {
   theme: "light" | "dark" | Theme;
   onDone: () => void;
   connectOptions: PayEmbedConnectOptions | undefined;
+  hiddenWallets?: WalletId[];
   isEmbed: boolean;
 };
 
@@ -128,6 +130,7 @@ type BuyScreenContentProps = {
   theme: "light" | "dark" | Theme;
   payOptions: PayUIOptions;
   onDone: () => void;
+  hiddenWallets?: WalletId[];
   connectOptions: PayEmbedConnectOptions | undefined;
   isEmbed: boolean;
 };
@@ -265,6 +268,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
             });
           }
         }}
+        hiddenWallets={props.hiddenWallets}
         recommendedWallets={props.connectOptions?.recommendedWallets}
         showAllWallets={
           props.connectOptions?.showAllWallets === undefined
@@ -541,6 +545,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               {screen.id === "select-wallet" && (
                 <WalletSwitcherDrawerContent
                   client={client}
+                  hiddenWallets={props.hiddenWallets}
                   onSelect={(w) => {
                     const chain = w.getChain();
                     const account = w.getAccount();
@@ -1352,6 +1357,7 @@ function FiatScreenContent(props: {
           isTestMode: buyWithFiatOptions?.testMode,
           purchaseData: props.payOptions.purchaseData,
           fromAddress: payer.account.address,
+          preferredProvider: buyWithFiatOptions?.preferredProvider,
         }
       : undefined,
   );

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx

@@ -1,6 +1,7 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
+import type { WalletId } from "../../../../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import {
   iconSize,
@@ -22,6 +23,7 @@ export function WalletSwitcherDrawerContent(props: {
   onBack: () => void;
   onConnect: () => void;
   selectedAddress: string;
+  hiddenWallets?: WalletId[];
 }) {
   const theme = useCustomTheme();
   const connectedWallets = useConnectedWallets();
@@ -34,23 +36,25 @@ export function WalletSwitcherDrawerContent(props: {
   return (
     <Container>
       <Container flex="column" gap="xs">
-        {connectedWallets.map((w) => {
-          const address = w.getAccount()?.address;
-          return (
-            <WalletSelectorButton
-              key={w.id}
-              walletId={w.id}
-              client={props.client}
-              address={address || ""}
-              onClick={() => {
-                props.onSelect(w);
-                props.onBack();
-              }}
-              disableChevron
-              checked={false}
-            />
-          );
-        })}
+        {connectedWallets
+          .filter((w) => !props.hiddenWallets?.includes(w.id))
+          .map((w) => {
+            const address = w.getAccount()?.address;
+            return (
+              <WalletSelectorButton
+                key={w.id}
+                walletId={w.id}
+                client={props.client}
+                address={address || ""}
+                onClick={() => {
+                  props.onSelect(w);
+                  props.onBack();
+                }}
+                disableChevron
+                checked={false}
+              />
+            );
+          })}
         {!hideConnectButton && (
           <Button
             variant="secondary"

package/src/react/web/ui/ConnectWallet/screens/Details/WalletManagerScreen.tsx

@@ -80,21 +80,23 @@ export function WalletManagerScreen(
         }}
       >
         <Container flex="column" gap="xs">
-          {connectedWallets.map((w) => {
-            return (
-              <WalletManangerButton
-                key={w.id}
-                client={props.client}
-                // address={address || ""}
-                onClick={() => {
-                  setActive(w);
-                  props.onBack();
-                }}
-                chain={props.activeChain}
-                wallet={w}
-              />
-            );
-          })}
+          {connectedWallets
+            .filter((w) => !props.hiddenWallets?.includes(w.id))
+            .map((w) => {
+              return (
+                <WalletManangerButton
+                  key={w.id}
+                  client={props.client}
+                  // address={address || ""}
+                  onClick={() => {
+                    setActive(w);
+                    props.onBack();
+                  }}
+                  chain={props.activeChain}
+                  wallet={w}
+                />
+              );
+            })}
         </Container>
       </Container>
 

package/src/react/web/ui/ConnectWallet/screens/WalletSwitcherConnectionScreen.tsx

@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../../wallets/types.js";
+import type { WalletId } from "../../../../../wallets/wallet-types.js";
 import { useConnectedWallets } from "../../../../core/hooks/wallets/useConnectedWallets.js";
 import { getDefaultWallets } from "../../../wallets/defaultWallets.js";
 import { ConnectModalContent } from "../Modal/ConnectModalContent.js";
@@ -21,6 +22,7 @@ export type WalletSwitcherConnectionScreenProps = {
   onSelect: (wallet: Wallet) => void;
   recommendedWallets: Wallet[] | undefined;
   showAllWallets: boolean;
+  hiddenWallets?: WalletId[];
   walletConnect:
     | {
         projectId?: string;

package/src/react/web/ui/PayEmbed.tsx

@@ -6,6 +6,7 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../wallets/types.js";
+import type { WalletId } from "../../../wallets/wallet-types.js";
 import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
@@ -119,12 +120,17 @@ export type PayEmbedProps = {
   theme?: "light" | "dark" | Theme;
 
   /**
-   * Customize the options for "Connect" Button showin in the PayEmbed UI when the user is not connected to a wallet.
+   * Customize the options for "Connect" Button showing in the PayEmbed UI when the user is not connected to a wallet.
    *
    * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
    */
   connectOptions?: PayEmbedConnectOptions;
 
+  /**
+   * All wallet IDs included in this array will be hidden from wallet selection when connected.
+   */
+  hiddenWallets?: WalletId[];
+
   style?: React.CSSProperties;
 
   className?: string;
@@ -201,6 +207,7 @@ export function PayEmbed(props: PayEmbedProps) {
             theme={theme}
             client={props.client}
             connectLocale={localeQuery.data}
+            hiddenWallets={props.hiddenWallets}
             payOptions={
               props.payOptions || {
                 mode: "fund_wallet",

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -107,6 +107,7 @@ export const ConnectWalletSocialOptions = (
     apple: locale.signInWithApple,
     discord: locale.signInWithDiscord,
     line: "LINE",
+    x: "X",
     farcaster: "Farcaster",
     telegram: "Telegram",
   };

package/src/react/web/wallets/shared/oauthSignIn.ts

@@ -36,6 +36,7 @@ function getOauthLoginPath(
     case "farcaster":
     case "telegram":
     case "line":
+    case "x":
     case "discord":
       return getLoginUrl({ authOption, client, ecosystem });
     default:

package/src/utils/bytecode/resolveImplementation.test.ts

@@ -57,7 +57,7 @@ describe("Resolve implementation", async () => {
       abi: ERC1967_PROXY_CONSTRUCTOR_ABI as Abi,
       constructorParams: {
         logic: implementationAddress,
-        data: "",
+        data: "0x",
       },
     });
 

package/src/utils/ens/avatar.ts

@@ -1,20 +1,40 @@
-import { getCachedChain } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
-import { getContract } from "../../contract/contract.js";
-import { isAddress } from "../address.js";
 import { getClientFetch } from "../fetch.js";
 import { resolveScheme } from "../ipfs.js";
+import { parseNftUri } from "../nft/parseNft.js";
 
-type AvatarOptions = {
+export type ParseAvatarOptions = {
   client: ThirdwebClient;
   uri: string;
 };
 
 /**
- * @internal
+ * Parses an ENS or similar avatar record. Supports NFT URIs, IPFS scheme, and HTTPS URIs.
+ * @param options - The options for parsing an ENS avatar record.
+ * @param options.client - The Thirdweb client.
+ * @param options.uri - The URI to parse.
+ * @returns A promise that resolves to the avatar URL, or null if the URI could not be parsed.
+ * @example
+ * ```ts
+ * import { parseAvatarRecord } from "thirdweb/utils/ens";
+ * const avatarUrl = await parseAvatarRecord({
+ *    client,
+ *    uri: "ipfs://bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/",
+ * });
+ *
+ * console.log(avatarUrl); // "https://ipfs.io/ipfs/bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/"
+ *
+ * const avatarUrl2 = await parseAvatarRecord({
+ *    client,
+ *    uri: "eip155:1/erc1155:0xb32979486938aa9694bfc898f35dbed459f44424/10063",
+ * });
+ *
+ * console.log(avatarUrl2); // "https://opensea.io/assets/0xb32979486938aa9694bfc898f35dbed459f44424/10063"
+ * ```
+ * @extension ENS
  */
 export async function parseAvatarRecord(
-  options: AvatarOptions,
+  options: ParseAvatarOptions,
 ): Promise<string | null> {
   let uri: string | null = options.uri;
   if (/eip155:/i.test(options.uri)) {
@@ -36,71 +56,7 @@ export async function parseAvatarRecord(
   return null;
 }
 
-/**
- * @internal
- */
-async function parseNftUri(options: AvatarOptions): Promise<string | null> {
-  let uri = options.uri;
-  // parse valid nft spec (CAIP-22/CAIP-29)
-  // @see: https://github.com/ChainAgnostic/CAIPs/tree/master/CAIPs
-  if (uri.startsWith("did:nft:")) {
-    // convert DID to CAIP
-    uri = uri.replace("did:nft:", "").replace(/_/g, "/");
-  }
-
-  const [reference = "", asset_namespace = "", tokenID = ""] = uri.split("/");
-  const [eip_namespace, chainID] = reference.split(":");
-  const [erc_namespace, contractAddress] = asset_namespace.split(":");
-
-  if (!eip_namespace || eip_namespace.toLowerCase() !== "eip155") {
-    throw new Error(
-      `Invalid EIP namespace, expected EIP155, got: "${eip_namespace}"`,
-    );
-  }
-  if (!chainID) {
-    throw new Error("Chain ID not found");
-  }
-  if (!contractAddress || !isAddress(contractAddress)) {
-    throw new Error("Contract address not found");
-  }
-  if (!tokenID) {
-    throw new Error("Token ID not found");
-  }
-  const chain = getCachedChain(Number(chainID));
-  const contract = getContract({
-    client: options.client,
-    chain,
-    address: contractAddress,
-  });
-  switch (erc_namespace) {
-    case "erc721": {
-      const { getNFT } = await import("../../extensions/erc721/read/getNFT.js");
-      const nft = await getNFT({
-        contract,
-        tokenId: BigInt(tokenID),
-      });
-      return nft.metadata.image ?? null;
-    }
-    case "erc1155": {
-      const { getNFT } = await import(
-        "../../extensions/erc1155/read/getNFT.js"
-      );
-      const nft = await getNFT({
-        contract,
-        tokenId: BigInt(tokenID),
-      });
-      return nft.metadata.image ?? null;
-    }
-
-    default: {
-      throw new Error(
-        `Invalid ERC namespace, expected ERC721 or ERC1155, got: "${erc_namespace}"`,
-      );
-    }
-  }
-}
-
-async function isImageUri(options: AvatarOptions): Promise<boolean> {
+async function isImageUri(options: ParseAvatarOptions): Promise<boolean> {
   try {
     const res = await getClientFetch(options.client)(options.uri, {
       method: "HEAD",

package/src/utils/nft/parseNft.ts

@@ -1,4 +1,8 @@
+import { getCachedChain } from "../../chains/utils.js";
+import type { ThirdwebClient } from "../../client/client.js";
+import { getContract } from "../../contract/contract.js";
 import type { FileOrBufferOrString } from "../../storage/upload/types.js";
+import { isAddress } from "../address.js";
 import type { Prettify } from "../type-utils.js";
 
 /**
@@ -95,3 +99,88 @@ export function parseNFT(base: NFTMetadata, options: ParseNFTOptions): NFT {
       throw new Error("Invalid NFT type");
   }
 }
+
+/**
+ * Parses an NFT URI.
+ * @param options - The options for parsing an NFT URI.
+ * @param options.client - The Thirdweb client.
+ * @param options.uri - The NFT URI to parse.
+ * @returns A promise that resolves to the NFT URI, or null if the URI could not be parsed.
+ *
+ * @example
+ * ```ts
+ * import { parseNftUri } from "thirdweb/utils/ens";
+ * const nftUri = await parseNftUri({
+ *    client,
+ *    uri: "eip155:1/erc1155:0xb32979486938aa9694bfc898f35dbed459f44424/10063",
+ * });
+ *
+ * console.log(nftUri); // ipfs://bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/
+ * ```
+ *
+ * @extension ENS
+ *
+ */
+export async function parseNftUri(options: {
+  client: ThirdwebClient;
+  uri: string;
+}): Promise<string | null> {
+  let uri = options.uri;
+  // parse valid nft spec (CAIP-22/CAIP-29)
+  // @see: https://github.com/ChainAgnostic/CAIPs/tree/master/CAIPs
+  if (uri.startsWith("did:nft:")) {
+    // convert DID to CAIP
+    uri = uri.replace("did:nft:", "").replace(/_/g, "/");
+  }
+
+  const [reference = "", asset_namespace = "", tokenID = ""] = uri.split("/");
+  const [eip_namespace, chainID] = reference.split(":");
+  const [erc_namespace, contractAddress] = asset_namespace.split(":");
+
+  if (!eip_namespace || eip_namespace.toLowerCase() !== "eip155") {
+    throw new Error(
+      `Invalid EIP namespace, expected EIP155, got: "${eip_namespace}"`,
+    );
+  }
+  if (!chainID) {
+    throw new Error("Chain ID not found");
+  }
+  if (!contractAddress || !isAddress(contractAddress)) {
+    throw new Error("Contract address not found");
+  }
+  if (!tokenID) {
+    throw new Error("Token ID not found");
+  }
+  const chain = getCachedChain(Number(chainID));
+  const contract = getContract({
+    client: options.client,
+    chain,
+    address: contractAddress,
+  });
+  switch (erc_namespace) {
+    case "erc721": {
+      const { getNFT } = await import("../../extensions/erc721/read/getNFT.js");
+      const nft = await getNFT({
+        contract,
+        tokenId: BigInt(tokenID),
+      });
+      return nft.metadata.image ?? null;
+    }
+    case "erc1155": {
+      const { getNFT } = await import(
+        "../../extensions/erc1155/read/getNFT.js"
+      );
+      const nft = await getNFT({
+        contract,
+        tokenId: BigInt(tokenID),
+      });
+      return nft.metadata.image ?? null;
+    }
+
+    default: {
+      throw new Error(
+        `Invalid ERC namespace, expected ERC721 or ERC1155, got: "${erc_namespace}"`,
+      );
+    }
+  }
+}