thirdweb 5.86.7-nightly-f5f8a40320d5d768d5866813f53ee4880bdf7851-20250129000319 → 5.87.0

package/dist/esm/react/{web/ui/prebuilt/Account → core/account}/provider.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+import { isAddress } from "../../../utils/address.js";
 const AccountProviderContext = /* @__PURE__ */ createContext(undefined);
 /**
  * A React context provider component that supplies Account-related data to its child components.
@@ -12,7 +13,7 @@ const AccountProviderContext = /* @__PURE__ */ createContext(undefined);
  * ```tsx
  * import { AccountProvider, AccountAvatar, AccountName, AccountAddress  } from "thirdweb/react";
  *
- * <AccountProvider>
+ * <AccountProvider address="0x..." client={client}>
  *   <AccountAvatar />
  *   <AccountName />
  *   <AccountAddress />
@@ -27,6 +28,9 @@ export function AccountProvider(props) {
     if (!props.address) {
         throw new Error("AccountProvider: No address passed. Ensure an address is always provided to the AccountProvider");
     }
+    if (!isAddress(props.address)) {
+        throw new Error(`AccountProvider: Invalid address: ${props.address}`);
+    }
     return (_jsx(AccountProviderContext.Provider, { value: props, children: props.children }));
 }
 /**

package/dist/esm/react/core/account/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../src/react/core/account/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAiBtD,MAAM,sBAAsB,GAAG,eAAe,CAAC,aAAa,CAE1D,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,eAAe,CAC7B,KAAoD;IAEpD,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CACb,iGAAiG,CAClG,CAAC;IACJ,CAAC;IACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;QAC9B,MAAM,IAAI,KAAK,CAAC,qCAAqC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IACxE,CAAC;IACD,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC1C,KAAK,CAAC,QAAQ,GACiB,CACnC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB;IAC/B,MAAM,GAAG,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAC/C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,oIAAoI,CACrI,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/esm/react/core/utils/account.js

@@ -0,0 +1,99 @@
+import { NATIVE_TOKEN_ADDRESS } from "../../../constants/addresses.js";
+import { convertCryptoToFiat } from "../../../pay/convert/cryptoToFiat.js";
+import { isAddress } from "../../../utils/address.js";
+import { formatNumber } from "../../../utils/formatNumber.js";
+import { shortenLargeNumber } from "../../../utils/shortenLargeNumber.js";
+import { getWalletBalance } from "../../../wallets/utils/getWalletBalance.js";
+export const COLOR_OPTIONS = [
+    ["#fca5a5", "#b91c1c"],
+    ["#fdba74", "#c2410c"],
+    ["#fcd34d", "#b45309"],
+    ["#fde047", "#a16207"],
+    ["#a3e635", "#4d7c0f"],
+    ["#86efac", "#15803d"],
+    ["#67e8f9", "#0e7490"],
+    ["#7dd3fc", "#0369a1"],
+    ["#93c5fd", "#1d4ed8"],
+    ["#a5b4fc", "#4338ca"],
+    ["#c4b5fd", "#6d28d9"],
+    ["#d8b4fe", "#7e22ce"],
+    ["#f0abfc", "#a21caf"],
+    ["#f9a8d4", "#be185d"],
+    ["#fda4af", "#be123c"],
+];
+/**
+ * @internal Exported for tests
+ */
+export async function loadAccountBalance(props) {
+    const { chain, client, address, tokenAddress, showBalanceInFiat } = props;
+    if (!chain) {
+        throw new Error("chain is required");
+    }
+    if (tokenAddress &&
+        tokenAddress?.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()) {
+        throw new Error(`Invalid tokenAddress - cannot be ${NATIVE_TOKEN_ADDRESS}`);
+    }
+    if (!isAddress(address)) {
+        throw new Error("Invalid wallet address. Expected an EVM address");
+    }
+    if (tokenAddress && !isAddress(tokenAddress)) {
+        throw new Error("Invalid tokenAddress. Expected an EVM contract address");
+    }
+    const tokenBalanceData = await getWalletBalance({
+        chain,
+        client,
+        address,
+        tokenAddress,
+    }).catch(() => undefined);
+    if (!tokenBalanceData) {
+        throw new Error(`Failed to retrieve ${tokenAddress ? `token: ${tokenAddress}` : "native token"} balance for address: ${address} on chainId:${chain.id}`);
+    }
+    if (showBalanceInFiat) {
+        const fiatData = await convertCryptoToFiat({
+            fromAmount: Number(tokenBalanceData.displayValue),
+            fromTokenAddress: tokenAddress || NATIVE_TOKEN_ADDRESS,
+            to: showBalanceInFiat,
+            chain,
+            client,
+        }).catch(() => undefined);
+        if (fiatData === undefined) {
+            throw new Error(`Failed to resolve fiat value for ${tokenAddress ? `token: ${tokenAddress}` : "native token"} on chainId: ${chain.id}`);
+        }
+        const result = {
+            balance: fiatData?.result,
+            symbol: getFiatSymbol(showBalanceInFiat),
+        };
+        return result;
+    }
+    return {
+        balance: Number(tokenBalanceData.displayValue),
+        symbol: tokenBalanceData.symbol,
+    };
+}
+function getFiatSymbol(showBalanceInFiat) {
+    switch (showBalanceInFiat) {
+        case "USD":
+            return "$";
+    }
+}
+/**
+ * Format the display balance for both crypto and fiat, in the Details button and Modal
+ * If both crypto balance and fiat balance exist, we have to keep the string very short to avoid UI issues.
+ * @internal
+ * Used internally for the Details button and the Details Modal
+ */
+export function formatAccountTokenBalance(props) {
+    const formattedTokenBalance = formatNumber(props.balance, props.decimals);
+    return `${formattedTokenBalance} ${props.symbol}`;
+}
+/**
+ * Used internally for the Details button and Details Modal
+ * @internal
+ */
+export function formatAccountFiatBalance(props) {
+    const num = formatNumber(props.balance, props.decimals);
+    // Need to keep them short to avoid UI overflow issues
+    const formattedFiatBalance = shortenLargeNumber(num);
+    return `${props.symbol}${formattedFiatBalance}`;
+}
+//# sourceMappingURL=account.js.map

package/dist/esm/react/core/utils/account.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"account.js","sourceRoot":"","sources":["../../../../../src/react/core/utils/account.ts"],"names":[],"mappings":"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"}

package/dist/esm/react/core/utils/walletIcon.js

@@ -1,3 +1,6 @@
+import { useQuery } from "@tanstack/react-query";
+import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
+import { useWalletContext } from "../wallet/provider.js";
 // TODO make the social icons usable in RN too
 const googleIconUri = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDUuNiIgaGVpZ2h0PSI3MjAiIHZpZXdCb3g9IjAgMCAxODYuNjkgMTkwLjUiIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE4NC41ODMgNzY1LjE3MSkiPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMDg5LjMzMy02ODcuMjM5djM2Ljg4OGg1MS4yNjJjLTIuMjUxIDExLjg2My05LjAwNiAyMS45MDgtMTkuMTM3IDI4LjY2MmwzMC45MTMgMjMuOTg2YzE4LjAxMS0xNi42MjUgMjguNDAyLTQxLjA0NCAyOC40MDItNzAuMDUyIDAtNi43NTQtLjYwNi0xMy4yNDktMS43MzItMTkuNDgzeiIgZmlsbD0iIzQyODVmNCIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTQyLjcxNC02NTEuNzkxbC02Ljk3MiA1LjMzNy0yNC42NzkgMTkuMjIzaDBjMTUuNjczIDMxLjA4NiA0Ny43OTYgNTIuNTYxIDg1LjAzIDUyLjU2MSAyNS43MTcgMCA0Ny4yNzgtOC40ODYgNjMuMDM4LTIzLjAzM2wtMzAuOTEzLTIzLjk4NmMtOC40ODYgNS43MTUtMTkuMzEgOS4xNzktMzIuMTI1IDkuMTc5LTI0Ljc2NSAwLTQ1LjgwNi0xNi43MTItNTMuMzQtMzkuMjI2eiIgZmlsbD0iIzM0YTg1MyIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTc0LjM2NS03MTIuNjFjLTYuNDk0IDEyLjgxNS0xMC4yMTcgMjcuMjc2LTEwLjIxNyA0Mi42ODlzMy43MjMgMjkuODc0IDEwLjIxNyA0Mi42ODljMCAuMDg2IDMxLjY5My0yNC41OTIgMzEuNjkzLTI0LjU5Mi0xLjkwNS01LjcxNS0zLjAzMS0xMS43NzYtMy4wMzEtMTguMDk4czEuMTI2LTEyLjM4MyAzLjAzMS0xOC4wOTh6IiBmaWxsPSIjZmJiYzA1Ii8+PHBhdGggZD0iTS0xMDg5LjMzMy03MjcuMjQ0YzE0LjAyOCAwIDI2LjQ5NyA0Ljg0OSAzNi40NTUgMTQuMjAxbDI3LjI3Ni0yNy4yNzZjLTE2LjUzOS0xNS40MTMtMzguMDEzLTI0Ljg1Mi02My43MzEtMjQuODUyLTM3LjIzNCAwLTY5LjM1OSAyMS4zODgtODUuMDMyIDUyLjU2MWwzMS42OTIgMjQuNTkyYzcuNTMzLTIyLjUxNCAyOC41NzUtMzkuMjI2IDUzLjM0LTM5LjIyNnoiIGZpbGw9IiNlYTQzMzUiIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIvPjwvZz48L3N2Zz4=";
 const facebookIconUri = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iRWJlbmUgMSIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgaWQ9ImZhY2Vib29rLWxvZ28tMjAxOSI+PHBhdGggZmlsbD0iIzE4NzdmMiIgZD0iTTEwMjQsNTEyQzEwMjQsMjI5LjIzMDE2LDc5NC43Njk3OCwwLDUxMiwwUzAsMjI5LjIzMDE2LDAsNTEyYzAsMjU1LjU1NCwxODcuMjMxLDQ2Ny4zNzAxMiw0MzIsNTA1Ljc3Nzc3VjY2MEgzMDJWNTEySDQzMlYzOTkuMkM0MzIsMjcwLjg3OTgyLDUwOC40Mzg1NCwyMDAsNjI1LjM4OTIyLDIwMCw2ODEuNDA3NjUsMjAwLDc0MCwyMTAsNzQwLDIxMFYzMzZINjc1LjQzNzEzQzYxMS44MzUwOCwzMzYsNTkyLDM3NS40NjY2Nyw1OTIsNDE1Ljk1NzI4VjUxMkg3MzRMNzExLjMsNjYwSDU5MnYzNTcuNzc3NzdDODM2Ljc2OSw5NzkuMzcwMTIsMTAyNCw3NjcuNTU0LDEwMjQsNTEyWiI+PC9wYXRoPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MTEuMyw2NjAsNzM0LDUxMkg1OTJWNDE1Ljk1NzI4QzU5MiwzNzUuNDY2NjcsNjExLjgzNTA4LDMzNiw2NzUuNDM3MTMsMzM2SDc0MFYyMTBzLTU4LjU5MjM1LTEwLTExNC42MTA3OC0xMEM1MDguNDM4NTQsMjAwLDQzMiwyNzAuODc5ODIsNDMyLDM5OS4yVjUxMkgzMDJWNjYwSDQzMnYzNTcuNzc3NzdhNTE3LjM5NjE5LDUxNy4zOTYxOSwwLDAsMCwxNjAsMFY2NjBaIj48L3BhdGg+PC9zdmc+";
@@ -84,4 +87,22 @@ export function getSocialIcon(provider) {
             return genericWalletIcon;
     }
 }
+/**
+ * @internal
+ */
+export function useWalletIcon(props) {
+    const { id } = useWalletContext();
+    const imageQuery = useQuery({
+        queryKey: ["walletIcon", id],
+        queryFn: async () => fetchWalletImage({ id }),
+        ...props.queryOptions,
+    });
+    return imageQuery;
+}
+/**
+ * @internal Exported for tests only
+ */
+export async function fetchWalletImage(props) {
+    return getWalletInfo(props.id, true);
+}
 //# sourceMappingURL=walletIcon.js.map

package/dist/esm/react/core/utils/walletIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"walletIcon.js","sourceRoot":"","sources":["../../../../../src/react/core/utils/walletIcon.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C,MAAM,aAAa,GACjB,ojDAAojD,CAAC;AACvjD,MAAM,eAAe,GACnB,g9BAAg9B,CAAC;AACn9B,MAAM,YAAY,GAChB,w5BAAw5B,CAAC;AAC35B,MAAM,cAAc,GAClB,w1CAAw1C,CAAC;AAC31C,MAAM,eAAe,GACnB,oiCAAoiC,CAAC;AACviC,MAAM,WAAW,GACf,g8DAAg8D,CAAC;AACn8D,MAAM,gBAAgB,GACpB,45CAA45C,CAAC;AAC/5C,MAAM,eAAe,GACnB,4sFAA4sF,CAAC;AAC/sF,MAAM,aAAa,GACjB,gkCAAgkC,CAAC;AACnkC,MAAM,YAAY,GAChB,omEAAomE,CAAC;AACvmE,MAAM,aAAa,GACjB,4pDAA4pD,CAAC;AAC/pD,MAAM,KAAK,GACT,opBAAopB,CAAC;AACvpB,MAAM,SAAS,GACb,o2BAAo2B,CAAC;AACv2B,MAAM,SAAS,GACb,w7DAAw7D,CAAC;AAC37D,MAAM,CAAC,MAAM,gBAAgB,GAC3B,42EAA42E,CAAC;AAC/2E,MAAM,SAAS,GACb,gxBAAgxB,CAAC;AACnxB,MAAM,CAAC,MAAM,iBAAiB,GAC5B,4mDAA4mD,CAAC;AAC/mD,MAAM,WAAW,GACf,ovFAAovF,CAAC;AAEvvF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,eAAe;IACzB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,cAAc;IACvB,IAAI,EAAE,WAAW;IACjB,CAAC,EAAE,KAAK;IACR,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,QAAoC;IAChE,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,QAAQ;YACX,OAAO,aAAa,CAAC;QACvB,KAAK,UAAU;YACb,OAAO,eAAe,CAAC;QACzB,KAAK,OAAO;YACV,OAAO,YAAY,CAAC;QACtB,KAAK,UAAU;YACb,OAAO,eAAe,CAAC;QACzB,KAAK,OAAO;YACV,OAAO,SAAS,CAAC;QACnB,KAAK,OAAO;YACV,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;YACZ,OAAO,WAAW,CAAC;QACrB,KAAK,SAAS;YACZ,OAAO,cAAc,CAAC;QACxB,KAAK,MAAM;YACT,OAAO,WAAW,CAAC;QACrB,KAAK,GAAG;YACN,OAAO,KAAK,CAAC;QACf,KAAK,WAAW;YACd,OAAO,gBAAgB,CAAC;QAC1B,KAAK,UAAU;YACb,OAAO,eAAe,CAAC;QACzB,KAAK,QAAQ;YACX,OAAO,aAAa,CAAC;QACvB,KAAK,QAAQ;YACX,OAAO,aAAa,CAAC;QACvB,KAAK,OAAO;YACV,OAAO,YAAY,CAAC;QACtB,KAAK,OAAO;YACV,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,iBAAiB,CAAC;IAC7B,CAAC;AACH,CAAC"}
+{"version":3,"file":"walletIcon.js","sourceRoot":"","sources":["../../../../../src/react/core/utils/walletIcon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAGhF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,8CAA8C;AAC9C,MAAM,aAAa,GACjB,ojDAAojD,CAAC;AACvjD,MAAM,eAAe,GACnB,g9BAAg9B,CAAC;AACn9B,MAAM,YAAY,GAChB,w5BAAw5B,CAAC;AAC35B,MAAM,cAAc,GAClB,w1CAAw1C,CAAC;AAC31C,MAAM,eAAe,GACnB,oiCAAoiC,CAAC;AACviC,MAAM,WAAW,GACf,g8DAAg8D,CAAC;AACn8D,MAAM,gBAAgB,GACpB,45CAA45C,CAAC;AAC/5C,MAAM,eAAe,GACnB,4sFAA4sF,CAAC;AAC/sF,MAAM,aAAa,GACjB,gkCAAgkC,CAAC;AACnkC,MAAM,YAAY,GAChB,omEAAomE,CAAC;AACvmE,MAAM,aAAa,GACjB,4pDAA4pD,CAAC;AAC/pD,MAAM,KAAK,GACT,opBAAopB,CAAC;AACvpB,MAAM,SAAS,GACb,o2BAAo2B,CAAC;AACv2B,MAAM,SAAS,GACb,w7DAAw7D,CAAC;AAC37D,MAAM,CAAC,MAAM,gBAAgB,GAC3B,42EAA42E,CAAC;AAC/2E,MAAM,SAAS,GACb,gxBAAgxB,CAAC;AACnxB,MAAM,CAAC,MAAM,iBAAiB,GAC5B,4mDAA4mD,CAAC;AAC/mD,MAAM,WAAW,GACf,ovFAAovF,CAAC;AAEvvF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,eAAe;IACzB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,cAAc;IACvB,IAAI,EAAE,WAAW;IACjB,CAAC,EAAE,KAAK;IACR,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,QAAoC;IAChE,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,QAAQ;YACX,OAAO,aAAa,CAAC;QACvB,KAAK,UAAU;YACb,OAAO,eAAe,CAAC;QACzB,KAAK,OAAO;YACV,OAAO,YAAY,CAAC;QACtB,KAAK,UAAU;YACb,OAAO,eAAe,CAAC;QACzB,KAAK,OAAO;YACV,OAAO,SAAS,CAAC;QACnB,KAAK,OAAO;YACV,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;YACZ,OAAO,WAAW,CAAC;QACrB,KAAK,SAAS;YACZ,OAAO,cAAc,CAAC;QACxB,KAAK,MAAM;YACT,OAAO,WAAW,CAAC;QACrB,KAAK,GAAG;YACN,OAAO,KAAK,CAAC;QACf,KAAK,WAAW;YACd,OAAO,gBAAgB,CAAC;QAC1B,KAAK,UAAU;YACb,OAAO,eAAe,CAAC;QACzB,KAAK,QAAQ;YACX,OAAO,aAAa,CAAC;QACvB,KAAK,QAAQ;YACX,OAAO,aAAa,CAAC;QACvB,KAAK,OAAO;YACV,OAAO,YAAY,CAAC;QACtB,KAAK,OAAO;YACV,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,iBAAiB,CAAC;IAC7B,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,KAE7B;IACC,MAAM,EAAE,EAAE,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAClC,MAAM,UAAU,GAAG,QAAQ,CAAC;QAC1B,QAAQ,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC;QAC5B,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,EAAE,EAAE,EAAE,CAAC;QAC7C,GAAG,KAAK,CAAC,YAAY;KACtB,CAAC,CAAC;IACH,OAAO,UAAU,CAAC;AACpB,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,KAEtC;IACC,OAAO,aAAa,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AACvC,CAAC"}

package/dist/esm/react/core/utils/walletname.js

@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+import { getFunctionId } from "../../../utils/function-id.js";
+import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
+import { useWalletContext } from "../wallet/provider.js";
+/**
+ * @internal
+ */
+export function useWalletName(props) {
+    const { id } = useWalletContext();
+    const nameQuery = useQuery({
+        queryKey: getQueryKeys({ id, formatFn: props.formatFn }),
+        queryFn: async () => fetchWalletName({ id, formatFn: props.formatFn }),
+        ...props.queryOptions,
+    });
+    return nameQuery;
+}
+/**
+ * @internal Exported for tests only
+ */
+function getQueryKeys(props) {
+    if (typeof props.formatFn === "function") {
+        return [
+            "walletName",
+            props.id,
+            { resolver: getFunctionId(props.formatFn) },
+        ];
+    }
+    return ["walletName", props.id];
+}
+/**
+ * @internal Exported for tests only
+ */
+async function fetchWalletName(props) {
+    const info = await getWalletInfo(props.id);
+    if (typeof props.formatFn === "function") {
+        return props.formatFn(info.name);
+    }
+    return info.name;
+}
+//# sourceMappingURL=walletname.js.map

package/dist/esm/react/core/utils/walletname.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"walletname.js","sourceRoot":"","sources":["../../../../../src/react/core/utils/walletname.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAEhF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EAAE,EAAE,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAClC,MAAM,SAAS,GAAG,QAAQ,CAAC;QACzB,QAAQ,EAAE,YAAY,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC;QACxD,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC;QACtE,GAAG,KAAK,CAAC,YAAY;KACtB,CAAC,CAAC;IACH,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;GAEG;AACH,SAAS,YAAY,CAAC,KAGrB;IACC,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;QACzC,OAAO;YACL,YAAY;YACZ,KAAK,CAAC,EAAE;YACR,EAAE,QAAQ,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;SACnC,CAAC;IACb,CAAC;IACD,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,CAAU,CAAC;AAC3C,CAAC;AAED;;GAEG;AACH,KAAK,UAAU,eAAe,CAAC,KAG9B;IACC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC3C,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;QACzC,OAAO,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IACD,OAAO,IAAI,CAAC,IAAI,CAAC;AACnB,CAAC"}

package/dist/esm/react/core/wallet/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../src/react/core/wallet/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAYlD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,eAAe,CAAC,aAAa,CAEhE,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAmD;IAEnD,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACzC,KAAK,CAAC,QAAQ,GACgB,CAClC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,GAAG,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC9C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,6HAA6H,CAC9H,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/esm/react/native/ui/prebuilt/Account/address.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "react-native";
+import { useAccountContext } from "../../../../core/account/provider.js";
+/**
+ *
+ * @returns a <span> containing the full wallet address of the account
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountAddress } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x12345674b599ce99958242b3D3741e7b01841DF3" client={TW_CLIENT}>
+ *   <AccountAddress />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>0x12345674b599ce99958242b3D3741e7b01841DF3</span>
+ * ```
+ *
+ *
+ * ### Shorten the address
+ * ```tsx
+ * import { AccountProvider, AccountAddress } from "thirdweb/react";
+ * import { shortenAddress } from "thirdweb/utils";
+ *
+ * <AccountProvider address="0x12345674b599ce99958242b3D3741e7b01841DF3" client={TW_CLIENT}>
+ *   <AccountAddress formatFn={shortenAddress} />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>0x1234...1DF3</span>
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountAddress({ formatFn, ...restProps }) {
+    const { address } = useAccountContext();
+    const value = formatFn ? formatFn(address) : address;
+    return _jsx(Text, { ...restProps, children: value });
+}
+//# sourceMappingURL=address.js.map

package/dist/esm/react/native/ui/prebuilt/Account/address.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"address.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/address.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAiBzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,GAAG,SAAS,EACQ;IACpB,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACrD,OAAO,KAAC,IAAI,OAAK,SAAS,YAAG,KAAK,GAAQ,CAAC;AAC7C,CAAC"}

package/dist/esm/react/native/ui/prebuilt/Account/avatar.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "react-native";
+import { resolveAvatar } from "../../../../../extensions/ens/resolve-avatar.js";
+import { resolveName, } from "../../../../../extensions/ens/resolve-name.js";
+import { getSocialProfiles } from "../../../../../social/profiles.js";
+import { parseAvatarRecord } from "../../../../../utils/ens/avatar.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+/**
+ * The component for showing the avatar of the account.
+ * If fetches all the social profiles linked to your wallet, including: Farcaster, ENS, Lens (more to be added)
+ * You can choose which social profile you want to display. Defaults to the first item in the list.
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar />
+ * </AccountProvider>
+ * ```
+ * Result: An <img /> component, if the avatar is resolved successfully
+ * ```html
+ * <img alt="" src="resolved-url-for-the-avatar" />
+ * ```
+ *
+ * ### Show a loading sign when the avatar is being resolved
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     loadingComponent={<YourLoadingComponent />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Fallback to something when the avatar fails to resolve
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     fallbackComponent={<DummyImage />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Select a social profile to display
+ * If you wallet associates with more than one social profiles (Lens, Farcaster, ENS, etc.)
+ * You can specify which service you want to prioritize using the `socialType` props
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     // Choose between: "farcaster" | "lens" | "ens"
+ *     socialType={"ens"}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom ENS resolver chain
+ * This component shares the same props with the ENS extension `resolveAvatar`
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ * import { base } from "thirdweb/chains";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     resolverAddress={"0x..."}
+ *     resolverChain={base}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <AccountAvatar
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 3,
+ *   }}
+ * />
+ * ```
+ * @returns An <img /> if the avatar is resolved successfully
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountAvatar({ socialType, resolverAddress, resolverChain, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {
+    const { address, client } = useAccountContext();
+    const avatarQuery = useQuery({
+        queryKey: [
+            "account-avatar",
+            address,
+            { socialType },
+            { resolverAddress, resolverChain },
+        ],
+        queryFn: async () => {
+            const [socialData, ensName] = await Promise.all([
+                getSocialProfiles({ address, client }),
+                resolveName({
+                    client,
+                    address: address || "",
+                    resolverAddress,
+                    resolverChain,
+                }),
+            ]);
+            const uri = socialData?.filter((p) => p.avatar && (socialType ? p.type === socialType : true))[0]?.avatar;
+            const [resolvedSocialAvatar, resolvedENSAvatar] = await Promise.all([
+                uri ? parseAvatarRecord({ client, uri }) : undefined,
+                ensName
+                    ? resolveAvatar({
+                        client,
+                        name: ensName,
+                    })
+                    : undefined,
+            ]);
+            // If no social image + ens name found -> exit and show <Blobbie />
+            if (!resolvedSocialAvatar && !resolvedENSAvatar) {
+                throw new Error("Failed to resolve social + ens avatar");
+            }
+            // else, prioritize the social image first
+            if (resolvedSocialAvatar) {
+                return resolvedSocialAvatar;
+            }
+            if (resolvedENSAvatar) {
+                return resolvedENSAvatar;
+            }
+            throw new Error("Failed to resolve social + ens avatar");
+        },
+        retry: false,
+        ...queryOptions,
+    });
+    if (avatarQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (!avatarQuery.data) {
+        return fallbackComponent || null;
+    }
+    return _jsx(Image, { source: { uri: avatarQuery.data }, ...restProps });
+}
+//# sourceMappingURL=avatar.js.map

package/dist/esm/react/native/ui/prebuilt/Account/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/avatar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/react/native/ui/prebuilt/Account/balance.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { Text } from "react-native";
+import { useActiveWalletChain } from "../../../../../react/core/hooks/wallets/useActiveWalletChain.js";
+import { getAddress } from "../../../../../utils/address.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+import { formatAccountFiatBalance, loadAccountBalance, } from "../../../../core/utils/account.js";
+import { formatAccountTokenBalance } from "../../../../core/utils/account.js";
+/**
+ * This component fetches and shows the balance of the wallet address on a given chain.
+ * It inherits all the attributes of a HTML <span> component, hence you can style it just like how you would style a normal <span>
+ *
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountBalance } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountBalance chain={ethereum} />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>1.091435 ETH</span>
+ * ```
+ *
+ *
+ * ### Format the balance (round up, shorten etc.)
+ * The AccountBalance component accepts a `formatFn` which takes in an object of type `AccountBalanceInfo` and outputs a string
+ * The function is used to modify the display value of the wallet balance (either in crypto or fiat)
+ *
+ * ```tsx
+ * import type { AccountBalanceInfo } from "thirdweb/react";
+ * import { formatNumber } from "thirdweb/utils";
+ *
+ * const format = (props: AccountInfoBalance):string => `${formatNumber(props.balance, 1)} ${props.symbol.toLowerCase()}`
+ *
+ * <AccountBalance formatFn={format} />
+ * ```
+ *
+ * Result:
+ * ```html
+ * <span>1.1 eth</span> // the balance is rounded up to 1 decimal and the symbol is lowercased
+ * ```
+ *
+ * ### Show a loading sign when the balance is being fetched
+ * ```tsx
+ * import { AccountProvider, AccountBalance } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountBalance
+ *     chain={ethereum}
+ *     loadingComponent={<Spinner />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Fallback to something when the balance fails to resolve
+ * ```tsx
+ * <AccountProvider address="0x...">
+ *   <AccountBalance
+ *     chain={nonExistentChain}
+ *     fallbackComponent={"Failed to load"}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <AccountBalance
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function AccountBalance({ chain, tokenAddress, loadingComponent, fallbackComponent, queryOptions, formatFn, showBalanceInFiat, ...restProps }) {
+    const { address, client } = useAccountContext();
+    const walletChain = useActiveWalletChain();
+    const chainToLoad = chain || walletChain;
+    const balanceQuery = useQuery({
+        queryKey: [
+            "internal_account_balance",
+            chainToLoad?.id || -1,
+            address,
+            { tokenAddress },
+            showBalanceInFiat,
+        ],
+        queryFn: async () => loadAccountBalance({
+            chain: chainToLoad,
+            client,
+            address: getAddress(address),
+            tokenAddress: tokenAddress ? getAddress(tokenAddress) : undefined,
+            showBalanceInFiat,
+        }),
+        retry: false,
+        ...queryOptions,
+    });
+    if (balanceQuery.isLoading) {
+        return loadingComponent || null;
+    }
+    if (balanceQuery.data === undefined) {
+        return fallbackComponent || null;
+    }
+    // Prioritize using the formatFn from users
+    if (formatFn) {
+        return _jsx(Text, { ...restProps, children: formatFn(balanceQuery.data) });
+    }
+    if (showBalanceInFiat) {
+        return (_jsx(Text, { ...restProps, children: formatAccountFiatBalance({ ...balanceQuery.data, decimals: 2 }) }));
+    }
+    return (_jsx(Text, { ...restProps, children: formatAccountTokenBalance({
+            ...balanceQuery.data,
+            decimals: balanceQuery.data.balance < 1 ? 3 : 2,
+        }) }));
+}
+//# sourceMappingURL=balance.js.map

package/dist/esm/react/native/ui/prebuilt/Account/balance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"balance.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/balance.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAwB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iEAAiE,CAAC;AACvG,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAEL,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAmE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,GAAG,SAAS,EACQ;IACpB,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAChD,MAAM,WAAW,GAAG,oBAAoB,EAAE,CAAC;IAC3C,MAAM,WAAW,GAAG,KAAK,IAAI,WAAW,CAAC;IACzC,MAAM,YAAY,GAAG,QAAQ,CAAC;QAC5B,QAAQ,EAAE;YACR,0BAA0B;YAC1B,WAAW,EAAE,EAAE,IAAI,CAAC,CAAC;YACrB,OAAO;YACP,EAAE,YAAY,EAAE;YAChB,iBAAiB;SACT;QACV,OAAO,EAAE,KAAK,IAAiC,EAAE,CAC/C,kBAAkB,CAAC;YACjB,KAAK,EAAE,WAAW;YAClB,MAAM;YACN,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;YAC5B,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS;YACjE,iBAAiB;SAClB,CAAC;QACJ,KAAK,EAAE,KAAK;QACZ,GAAG,YAAY;KAChB,CAAC,CAAC;IAEH,IAAI,YAAY,CAAC,SAAS,EAAE,CAAC;QAC3B,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;IAED,IAAI,YAAY,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QACpC,OAAO,iBAAiB,IAAI,IAAI,CAAC;IACnC,CAAC;IAED,2CAA2C;IAC3C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,KAAC,IAAI,OAAK,SAAS,YAAG,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,GAAQ,CAAC;IACnE,CAAC;IAED,IAAI,iBAAiB,EAAE,CAAC;QACtB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,YAChB,wBAAwB,CAAC,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,GAC3D,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,YAChB,yBAAyB,CAAC;YACzB,GAAG,YAAY,CAAC,IAAI;YACpB,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAChD,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}

package/dist/esm/react/native/ui/prebuilt/Account/blobbie.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { hexToNumber } from "@noble/curves/abstract/utils";
+import { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { Defs, LinearGradient, Rect, Stop, Svg } from "react-native-svg";
+import { useAccountContext } from "../../../../core/account/provider.js";
+import { COLOR_OPTIONS } from "../../../../core/utils/account.js";
+/**
+ * A wrapper for the Blobbie component
+ * @param props BlobbieProps
+ * @beta
+ * @wallet
+ */
+export function AccountBlobbie(props) {
+    const { address } = useAccountContext();
+    return _jsx(Blobbie, { ...props, address: address });
+}
+/**
+ * A unique gradient avatar based on the provided address.
+ * @param props The component props.
+ * @param props.address The address to generate the gradient with.
+ * @param props.style The style for the component
+ * @param props.size The size of each side of the square avatar (in pixels)
+ * @component
+ * @wallet
+ * @example
+ * ```tsx
+ * import { Blobbie } from "thirdweb/react";
+ *
+ * <Blobbie address="0x...." style={{ width: 40, height: 40 }} />
+ * ```
+ */
+export function Blobbie(props) {
+    const colors = useMemo(() => COLOR_OPTIONS[Number(hexToNumber(props.address.slice(2, 4))) % COLOR_OPTIONS.length], [props.address]);
+    const containerStyle = useMemo(() => {
+        const baseStyle = props.style || {};
+        if (props.size) {
+            return {
+                ...baseStyle,
+                width: props.size,
+                height: props.size,
+            };
+        }
+        return baseStyle;
+    }, [props.style, props.size]);
+    const gradientUniqueId = `grad${colors[0]}+${colors[1]}`.replace(/[^a-zA-Z0-9 ]/g, "");
+    return (_jsx(View, { style: [styles.container, containerStyle], children: _jsxs(Svg, { height: "100%", width: "100%", style: StyleSheet.absoluteFillObject, children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: gradientUniqueId, x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [_jsx(Stop, { offset: "0", stopColor: colors[0] }), _jsx(Stop, { offset: "1", stopColor: colors[1] })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientUniqueId})` })] }) }));
+}
+const styles = StyleSheet.create({
+    container: {
+        overflow: "hidden",
+    },
+});
+//# sourceMappingURL=blobbie.js.map

package/dist/esm/react/native/ui/prebuilt/Account/blobbie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blobbie.js","sourceRoot":"","sources":["../../../../../../../src/react/native/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAWlE;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,KAAoC;IACjE,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAClD,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CACH,aAAa,CACX,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,MAAM,CAClD,EACvB,CAAC,KAAK,CAAC,OAAO,CAAC,CAChB,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QACpC,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;gBACL,GAAG,SAAS;gBACZ,KAAK,EAAE,KAAK,CAAC,IAAI;gBACjB,MAAM,EAAE,KAAK,CAAC,IAAI;aACnB,CAAC;QACJ,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAE9B,MAAM,gBAAgB,GAAG,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAC9D,gBAAgB,EAChB,EAAE,CACH,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,YAC7C,MAAC,GAAG,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,aAClE,KAAC,IAAI,cACH,MAAC,cAAc,IACb,EAAE,EAAE,gBAAgB,EACpB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,IAAI,aAEP,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,GAAI,EACzC,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,GAAI,IAC1B,GACZ,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,gBAAgB,GAAG,GAAI,IAClE,GACD,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC"}