@embarkai/ui-kit 0.4.13 → 0.4.17

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>EmbarkAI Secure Wallet - iframe version 0.4.13</title>
+    <title>EmbarkAI Secure Wallet - iframe version 0.4.17</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -4592,7 +4592,7 @@ var BinanceOnrampAPI = class {
     this.disconnectSse();
     const controller = new AbortController();
     this.sseAbortController = controller;
-    const url = `${API_DOMAIN}/sse/onramp/events?walletAddress=${encodeURIComponent(walletAddress)}`;
+    const url = `${API_DOMAIN}/sse/events?walletAddress=${encodeURIComponent(walletAddress)}`;
     const start = async () => {
       try {
         const response = await fetch(url, {
@@ -4780,7 +4780,7 @@ var FinchPayRampAPI = class {
     this.disconnectSse();
     const controller = new AbortController();
     this.sseAbortController = controller;
-    const url = `${API_DOMAIN2}/sse/onramp/events?walletAddress=${encodeURIComponent(walletAddress)}`;
+    const url = `${API_DOMAIN2}/sse/events?walletAddress=${encodeURIComponent(walletAddress)}`;
     const start = async () => {
       try {
         const response = await fetch(url, {
@@ -6262,7 +6262,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "0.4.13";
+var IFRAME_VERSION = "0.4.17";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));

package/dist/index.cjs

@@ -15170,6 +15170,7 @@ function useWatchTokens(options) {
     // 30 seconds
     gcTime: 5 * 60 * 1e3,
     // 5 minutes
+    refetchOnMount: "always",
     retry: 2,
     retryDelay: 1e3
   });
@@ -15235,6 +15236,7 @@ function mapBlockscoutToAsset(balance) {
     balance: value,
     formattedBalance,
     decimals,
+    exchangeRateUsd: token.exchange_rate || void 0,
     logo: token.icon_url || void 0
   };
   if (type === "erc721" || type === "erc1155") {
@@ -15320,6 +15322,9 @@ function useBlockscoutAssets(options) {
   const publicClient = useSession((st) => st.publicClient);
   const activeChainId = useSession((st) => st.activeChainId);
   const chainConfig = useSession((st) => st.chainConfig);
+  const portfolioConfig = useProviderConfig().config.current.portfolio;
+  const customTokenBalancesQuery = portfolioConfig?.tokenBalancesQuery;
+  const customTokenBalancesQueryKey = portfolioConfig?.tokenBalancesQueryKey;
   const blockscoutApiUrl = getBlockscoutApiUrl(chainConfig);
   const blockscoutClient = (0, import_react57.useMemo)(
     () => blockscoutApiUrl ? (0, import_clients2.createBlockscoutClient)({ baseUrl: blockscoutApiUrl }) : null,
@@ -15350,8 +15355,9 @@ function useBlockscoutAssets(options) {
     enabled: !!publicClient && !!address && enabled,
     staleTime: 30 * 1e3,
     // 30 seconds
-    gcTime: 5 * 60 * 1e3
+    gcTime: 5 * 60 * 1e3,
     // 5 minutes
+    refetchOnMount: "always"
   });
   const {
     data: tokenBalances,
@@ -15360,11 +15366,22 @@ function useBlockscoutAssets(options) {
     refetch: refetchTokens,
     dataUpdatedAt
   } = (0, import_react_query39.useQuery)({
-    queryKey: [BLOCKSCOUT_QUERY_KEY, address, blockscoutApiUrl],
-    queryFn: () => blockscoutClient.getTokenBalances(address),
-    enabled: !!address && enabled && !!blockscoutClient,
-    // staleTime: BLOCKSCOUT_QUERY_STALE_TIME,
+    queryKey: [BLOCKSCOUT_QUERY_KEY, address, blockscoutApiUrl, customTokenBalancesQueryKey],
+    queryFn: async () => {
+      if (customTokenBalancesQuery) {
+        try {
+          return await customTokenBalancesQuery(address);
+        } catch (error2) {
+          console.warn("[useBlockscoutAssets] Custom token balances query failed:", error2);
+          if (!blockscoutClient) throw error2;
+        }
+      }
+      return await blockscoutClient.getTokenBalances(address);
+    },
+    enabled: !!address && enabled && (!!customTokenBalancesQuery || !!blockscoutClient),
+    staleTime: 0,
     gcTime: BLOCKSCOUT_QUERY_GC_TIME,
+    refetchOnMount: "always",
     retry: 2,
     retryDelay: 1e3
   });
@@ -15378,6 +15395,7 @@ function useBlockscoutAssets(options) {
     enabled: !!address && enabled && !!blockscoutClient,
     staleTime: BLOCKSCOUT_QUERY_STALE_TIME,
     gcTime: BLOCKSCOUT_QUERY_GC_TIME,
+    refetchOnMount: "always",
     retry: 2,
     retryDelay: 1e3
   });
@@ -15512,6 +15530,7 @@ function useBlockscoutAssets(options) {
 var import_clients2, import_react_query39, import_react57, import_viem7, BLOCKSCOUT_QUERY_KEY, ERC3643_DETECTION_QUERY_KEY, ERC3643_ABI;
 var init_useBlockscoutAssets = __esm({
   "src/internal/hooks/useBlockscoutAssets.ts"() {
+    init_ProviderContext();
     init_SessionContext();
     import_clients2 = require("@embarkai/core/clients");
     import_react_query39 = require("@tanstack/react-query");
@@ -15614,6 +15633,21 @@ async function getAssetRate2(symbol) {
   const response = await fetch(assetURL);
   return await response.json();
 }
+async function resolveAssetRate(symbol, address, customAssetRateQuery) {
+  if (customAssetRateQuery) {
+    try {
+      const customRate = await customAssetRateQuery({ symbol, address });
+      const numeric = Number(customRate?.price || 0);
+      if (customRate && Number.isFinite(numeric) && numeric > 0) {
+        return customRate;
+      }
+    } catch (error) {
+      console.warn("[PortfolioItem] Custom asset rate query failed:", error);
+    }
+  }
+  if (!isAssetRateAvailable(symbol)) return null;
+  return getAssetRate2(symbol);
+}
 function PortfolioItemImage(props) {
   const { asset } = props;
   const [nftImageError, setNftImageError] = (0, import_react58.useState)(false);
@@ -15660,22 +15694,29 @@ function PortfolioItemImage(props) {
 }
 function PortfolioItem(props) {
   const { address, asset, isProjectAsset } = props;
-  const { assets: projectAssets, showBalanceAs: showBalanceAsSymbol } = useProviderConfig().config.current.projectAssets || {};
+  const providerConfig = useProviderConfig().config.current;
+  const { assets: projectAssets, showBalanceAs: showBalanceAsSymbol } = providerConfig.projectAssets || {};
+  const customAssetRateQuery = providerConfig.portfolio?.assetRateQuery;
+  const customAssetRateQueryKey = providerConfig.portfolio?.assetRateQueryKey;
   const qc = (0, import_react_query40.useQueryClient)();
   const { balanceQueryKey } = projectAssets?.find((a) => a.symbol === showBalanceAsSymbol) || {};
   const projectAssetBalance = !!balanceQueryKey ? qc.getQueryData(balanceQueryKey) : null;
   const isNft = isNftAsset(asset);
   const isSecurity = isSecurityToken(asset);
+  const embeddedRate = Number(asset.exchangeRateUsd || 0);
+  const hasEmbeddedRate = Number.isFinite(embeddedRate) && embeddedRate > 0;
   const { data: assetRate, isLoading: isRateLoading } = (0, import_react_query40.useQuery)({
     retry: false,
     staleTime: 4 * 60 * 1e3,
-    enabled: !!address && !!isAssetRateAvailable(asset.symbol) && !isProjectAsset && !isNft && !isSecurity,
-    queryKey: [ASSETS_RATES_QUERY_KEY, address, asset.symbol],
-    queryFn: async () => await getAssetRate2(asset.symbol)
+    enabled: !!address && !hasEmbeddedRate && !isProjectAsset && !isNft && !isSecurity && (!!customAssetRateQuery || !!isAssetRateAvailable(asset.symbol)),
+    queryKey: [ASSETS_RATES_QUERY_KEY, address, asset.address, asset.symbol, customAssetRateQueryKey],
+    queryFn: async () => await resolveAssetRate(asset.symbol, asset.address, customAssetRateQuery)
   });
   const showProjectFiatBalance = isProjectAsset && !!projectAssetBalance?.fiatFormatted;
   const renderBalance = showProjectFiatBalance ? projectAssetBalance?.fiatFormatted || 0 : Number((0, import_viem9.formatUnits)(BigInt(asset?.balance || "0"), asset?.decimals || 18));
-  const usdRenderBalance = !!assetRate?.price ? renderBalance * Number(assetRate.price) : 0;
+  const resolvedRate = hasEmbeddedRate ? embeddedRate : Number(assetRate?.price || 0);
+  const usdRenderBalance = resolvedRate > 0 ? renderBalance * resolvedRate : 0;
+  const shortContractAddress = asset.address ? truncateMiddle(asset.address, 6, 4) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
     "div",
     {
@@ -15689,15 +15730,22 @@ function PortfolioItem(props) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PortfolioItemImage, { asset }),
         /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "w-full flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "w-full flex items-center justify-between text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-              "span",
-              {
-                className: "truncate max-w-[150px]",
-                title: isNft ? asset.nftMetadata?.collectionName || asset.name : asset.name,
-                children: isNft ? asset.nftMetadata?.collectionName || asset.name || (asset.address ? `${asset.address.slice(0, 6)}...${asset.address.slice(-4)}` : "Unknown") : asset.name || (asset.address ? `${asset.address.slice(0, 6)}...${asset.address.slice(-4)}` : "Unknown")
-              }
-            ),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "w-full flex items-center justify-between text-xs gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "min-w-0 flex flex-col", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                "span",
+                {
+                  className: "truncate max-w-[150px]",
+                  title: isNft ? asset.nftMetadata?.collectionName || asset.name : asset.name,
+                  children: isNft ? asset.nftMetadata?.collectionName || asset.name || shortContractAddress || "Unknown" : asset.name || shortContractAddress || "Unknown"
+                }
+              ),
+              !isNft && shortContractAddress && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "text-[10px] text-[var(--ui-kit-fg-muted)] font-mono truncate", title: asset.address, children: [
+                asset.symbol,
+                " \xB7 ",
+                shortContractAddress
+              ] })
+            ] }),
             !!usdRenderBalance && !isProjectAsset && !isNft && !isSecurity && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-[var(--ui-kit-fg-muted)]", children: "USD" }),
             !isSecurity && isNft && "type" in asset && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "uppercase text-[10px] px-1 bg-[var(--ui-kit-bg-info)] rounded-full", children: asset.type === "erc721" ? "ERC-721" : "ERC-1155" }),
             isSecurity && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "uppercase text-[10px] px-1 bg-[var(--ui-kit-bg-warning)] rounded-full", children: "Security Token" })
@@ -15741,6 +15789,7 @@ var init_PortfolioItem = __esm({
     init_base();
     init_priceFormatter();
     init_utils2();
+    init_truncateMiddle();
     init_BalanceView2();
     import_jsx_runtime80 = require("react/jsx-runtime");
     SKIP_SYMBOLS2 = ["TEST"];
@@ -16982,6 +17031,11 @@ function AssetListItem(props) {
         /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(AssetInputIcon, { asset, size: "large" }),
         /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex-1 flex flex-col items-start", children: [
           /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "text-[10px] truncate leading-4", children: isNft ? asset.nftMetadata?.name || asset.name : asset.name }),
+          !isNft && asset.address && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "text-[10px] text-[var(--ui-kit-fg-muted)] font-mono truncate leading-4", title: asset.address, children: [
+            asset.symbol,
+            " \xB7 ",
+            truncateMiddle(asset.address, 6, 4)
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "block text-lg font-bold", children: isNft ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
             asset.symbol,
             asset.tokenId && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("span", { className: "ml-1", children: [
@@ -17039,6 +17093,7 @@ var init_AssetList = __esm({
     import_viem13 = require("viem");
     init_priceFormatter();
     init_utils2();
+    init_truncateMiddle();
     init_BalanceView2();
     init_useSendStore();
     init_utils8();
@@ -19296,7 +19351,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.13",
+      version: "0.4.17",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -19312,8 +19367,9 @@ var init_package = __esm({
         clean: "rm -rf dist",
         "build:css": "tailwindcss -c tailwind.config.cjs -i src/styles/index.css -o src/styles/built.css --minify",
         "build:iframe-html": "node scripts/copy-iframe-html.js",
-        "build:copy-css": "cp src/styles/built.css dist/styles.css",
+        "build:copy-css": "node scripts/copy-styles-css.js",
         build: "pnpm build:css && tsup && pnpm build:iframe-html && pnpm build:copy-css",
+        prepack: "pnpm build",
         dev: "pnpm build:css && tsup --watch",
         "dev:iframe": "vite --config iframe/vite.config.ts",
         csv: "npx tsx src/i18n/utils/prepareCsvProofread.ts --origin en --target zh",
@@ -23285,6 +23341,7 @@ function Provider(props) {
     if (updates.warnings) next.warnings = { ...next.warnings, ...updates.warnings };
     if (updates.kyc) next.kyc = { ...next.kyc, ...updates.kyc };
     if (updates.watchTokens) next.watchTokens = { ...next.watchTokens, ...updates.watchTokens };
+    if (updates.portfolio) next.portfolio = { ...next.portfolio, ...updates.portfolio };
     if (updates.services && typeof window !== "undefined") {
       try {
         window.__EMBARK_SERVICES__ = next.services;

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ReactNode, MutableRefObject, FC, HTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { BlockscoutTokenBalance } from '@embarkai/core/clients';
 import * as viem from 'viem';
 import { Address as Address$1, Hex, PublicClient, Chain, Hash as Hash$1, TransactionReceipt } from 'viem';
 import * as _tanstack_react_query from '@tanstack/react-query';
@@ -89,6 +90,8 @@ interface Asset {
     formattedBalance: string;
     /** Decimal precision (undefined for NFTs) */
     decimals?: number;
+    /** USD rate reported by explorer when available */
+    exchangeRateUsd?: string;
     /** NFT token ID (only for ERC721/ERC1155) */
     tokenId?: string;
     /** Token logo URL */
@@ -178,6 +181,14 @@ interface ProjectAsset extends Omit<Asset, 'type'> {
     }>;
     hideInPortfolio?: boolean;
 }
+interface AssetRateQueryInput {
+    symbol: string;
+    address?: `0x${string}`;
+}
+interface AssetRateQueryResult {
+    symbol: string;
+    price: string;
+}
 /**
  * Token configuration for custom token watching.
  * Used when chain doesn't have Blockscout API or for project-specific tokens.
@@ -228,6 +239,17 @@ interface ProviderConfig {
         assets: ProjectAsset[];
         showBalanceAs?: ProjectAsset['symbol'];
     };
+    /**
+     * Host-provided portfolio data overrides.
+     * If tokenBalancesQuery is provided, SDK uses it instead of Blockscout
+     * for ERC-20 portfolio balances and keeps the legacy Blockscout path as fallback.
+     */
+    portfolio?: {
+        tokenBalancesQuery?: (address: `0x${string}`) => Promise<BlockscoutTokenBalance[]>;
+        tokenBalancesQueryKey?: readonly unknown[];
+        assetRateQuery?: (input: AssetRateQueryInput) => Promise<AssetRateQueryResult | null>;
+        assetRateQueryKey?: readonly unknown[];
+    };
     /**
      * Custom tokens to monitor per chain.
      * SDK will fetch balances via RPC multicall.

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ReactNode, MutableRefObject, FC, HTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { BlockscoutTokenBalance } from '@embarkai/core/clients';
 import * as viem from 'viem';
 import { Address as Address$1, Hex, PublicClient, Chain, Hash as Hash$1, TransactionReceipt } from 'viem';
 import * as _tanstack_react_query from '@tanstack/react-query';
@@ -89,6 +90,8 @@ interface Asset {
     formattedBalance: string;
     /** Decimal precision (undefined for NFTs) */
     decimals?: number;
+    /** USD rate reported by explorer when available */
+    exchangeRateUsd?: string;
     /** NFT token ID (only for ERC721/ERC1155) */
     tokenId?: string;
     /** Token logo URL */
@@ -178,6 +181,14 @@ interface ProjectAsset extends Omit<Asset, 'type'> {
     }>;
     hideInPortfolio?: boolean;
 }
+interface AssetRateQueryInput {
+    symbol: string;
+    address?: `0x${string}`;
+}
+interface AssetRateQueryResult {
+    symbol: string;
+    price: string;
+}
 /**
  * Token configuration for custom token watching.
  * Used when chain doesn't have Blockscout API or for project-specific tokens.
@@ -228,6 +239,17 @@ interface ProviderConfig {
         assets: ProjectAsset[];
         showBalanceAs?: ProjectAsset['symbol'];
     };
+    /**
+     * Host-provided portfolio data overrides.
+     * If tokenBalancesQuery is provided, SDK uses it instead of Blockscout
+     * for ERC-20 portfolio balances and keeps the legacy Blockscout path as fallback.
+     */
+    portfolio?: {
+        tokenBalancesQuery?: (address: `0x${string}`) => Promise<BlockscoutTokenBalance[]>;
+        tokenBalancesQueryKey?: readonly unknown[];
+        assetRateQuery?: (input: AssetRateQueryInput) => Promise<AssetRateQueryResult | null>;
+        assetRateQueryKey?: readonly unknown[];
+    };
     /**
      * Custom tokens to monitor per chain.
      * SDK will fetch balances via RPC multicall.

package/dist/index.js

@@ -15106,6 +15106,7 @@ function useWatchTokens(options) {
     // 30 seconds
     gcTime: 5 * 60 * 1e3,
     // 5 minutes
+    refetchOnMount: "always",
     retry: 2,
     retryDelay: 1e3
   });
@@ -15172,6 +15173,7 @@ function mapBlockscoutToAsset(balance) {
     balance: value,
     formattedBalance,
     decimals,
+    exchangeRateUsd: token.exchange_rate || void 0,
     logo: token.icon_url || void 0
   };
   if (type === "erc721" || type === "erc1155") {
@@ -15257,6 +15259,9 @@ function useBlockscoutAssets(options) {
   const publicClient = useSession((st) => st.publicClient);
   const activeChainId = useSession((st) => st.activeChainId);
   const chainConfig = useSession((st) => st.chainConfig);
+  const portfolioConfig = useProviderConfig().config.current.portfolio;
+  const customTokenBalancesQuery = portfolioConfig?.tokenBalancesQuery;
+  const customTokenBalancesQueryKey = portfolioConfig?.tokenBalancesQueryKey;
   const blockscoutApiUrl = getBlockscoutApiUrl(chainConfig);
   const blockscoutClient = useMemo5(
     () => blockscoutApiUrl ? createBlockscoutClient({ baseUrl: blockscoutApiUrl }) : null,
@@ -15287,8 +15292,9 @@ function useBlockscoutAssets(options) {
     enabled: !!publicClient && !!address && enabled,
     staleTime: 30 * 1e3,
     // 30 seconds
-    gcTime: 5 * 60 * 1e3
+    gcTime: 5 * 60 * 1e3,
     // 5 minutes
+    refetchOnMount: "always"
   });
   const {
     data: tokenBalances,
@@ -15297,11 +15303,22 @@ function useBlockscoutAssets(options) {
     refetch: refetchTokens,
     dataUpdatedAt
   } = useQuery16({
-    queryKey: [BLOCKSCOUT_QUERY_KEY, address, blockscoutApiUrl],
-    queryFn: () => blockscoutClient.getTokenBalances(address),
-    enabled: !!address && enabled && !!blockscoutClient,
-    // staleTime: BLOCKSCOUT_QUERY_STALE_TIME,
+    queryKey: [BLOCKSCOUT_QUERY_KEY, address, blockscoutApiUrl, customTokenBalancesQueryKey],
+    queryFn: async () => {
+      if (customTokenBalancesQuery) {
+        try {
+          return await customTokenBalancesQuery(address);
+        } catch (error2) {
+          console.warn("[useBlockscoutAssets] Custom token balances query failed:", error2);
+          if (!blockscoutClient) throw error2;
+        }
+      }
+      return await blockscoutClient.getTokenBalances(address);
+    },
+    enabled: !!address && enabled && (!!customTokenBalancesQuery || !!blockscoutClient),
+    staleTime: 0,
     gcTime: BLOCKSCOUT_QUERY_GC_TIME,
+    refetchOnMount: "always",
     retry: 2,
     retryDelay: 1e3
   });
@@ -15315,6 +15332,7 @@ function useBlockscoutAssets(options) {
     enabled: !!address && enabled && !!blockscoutClient,
     staleTime: BLOCKSCOUT_QUERY_STALE_TIME,
     gcTime: BLOCKSCOUT_QUERY_GC_TIME,
+    refetchOnMount: "always",
     retry: 2,
     retryDelay: 1e3
   });
@@ -15449,6 +15467,7 @@ function useBlockscoutAssets(options) {
 var BLOCKSCOUT_QUERY_KEY, ERC3643_DETECTION_QUERY_KEY, ERC3643_ABI;
 var init_useBlockscoutAssets = __esm({
   "src/internal/hooks/useBlockscoutAssets.ts"() {
+    init_ProviderContext();
     init_SessionContext();
     init_initial();
     init_constants();
@@ -15552,6 +15571,21 @@ async function getAssetRate2(symbol) {
   const response = await fetch(assetURL);
   return await response.json();
 }
+async function resolveAssetRate(symbol, address, customAssetRateQuery) {
+  if (customAssetRateQuery) {
+    try {
+      const customRate = await customAssetRateQuery({ symbol, address });
+      const numeric = Number(customRate?.price || 0);
+      if (customRate && Number.isFinite(numeric) && numeric > 0) {
+        return customRate;
+      }
+    } catch (error) {
+      console.warn("[PortfolioItem] Custom asset rate query failed:", error);
+    }
+  }
+  if (!isAssetRateAvailable(symbol)) return null;
+  return getAssetRate2(symbol);
+}
 function PortfolioItemImage(props) {
   const { asset } = props;
   const [nftImageError, setNftImageError] = useState22(false);
@@ -15598,22 +15632,29 @@ function PortfolioItemImage(props) {
 }
 function PortfolioItem(props) {
   const { address, asset, isProjectAsset } = props;
-  const { assets: projectAssets, showBalanceAs: showBalanceAsSymbol } = useProviderConfig().config.current.projectAssets || {};
+  const providerConfig = useProviderConfig().config.current;
+  const { assets: projectAssets, showBalanceAs: showBalanceAsSymbol } = providerConfig.projectAssets || {};
+  const customAssetRateQuery = providerConfig.portfolio?.assetRateQuery;
+  const customAssetRateQueryKey = providerConfig.portfolio?.assetRateQueryKey;
   const qc = useQueryClient20();
   const { balanceQueryKey } = projectAssets?.find((a) => a.symbol === showBalanceAsSymbol) || {};
   const projectAssetBalance = !!balanceQueryKey ? qc.getQueryData(balanceQueryKey) : null;
   const isNft = isNftAsset(asset);
   const isSecurity = isSecurityToken(asset);
+  const embeddedRate = Number(asset.exchangeRateUsd || 0);
+  const hasEmbeddedRate = Number.isFinite(embeddedRate) && embeddedRate > 0;
   const { data: assetRate, isLoading: isRateLoading } = useQuery17({
     retry: false,
     staleTime: 4 * 60 * 1e3,
-    enabled: !!address && !!isAssetRateAvailable(asset.symbol) && !isProjectAsset && !isNft && !isSecurity,
-    queryKey: [ASSETS_RATES_QUERY_KEY, address, asset.symbol],
-    queryFn: async () => await getAssetRate2(asset.symbol)
+    enabled: !!address && !hasEmbeddedRate && !isProjectAsset && !isNft && !isSecurity && (!!customAssetRateQuery || !!isAssetRateAvailable(asset.symbol)),
+    queryKey: [ASSETS_RATES_QUERY_KEY, address, asset.address, asset.symbol, customAssetRateQueryKey],
+    queryFn: async () => await resolveAssetRate(asset.symbol, asset.address, customAssetRateQuery)
   });
   const showProjectFiatBalance = isProjectAsset && !!projectAssetBalance?.fiatFormatted;
   const renderBalance = showProjectFiatBalance ? projectAssetBalance?.fiatFormatted || 0 : Number(formatUnits5(BigInt(asset?.balance || "0"), asset?.decimals || 18));
-  const usdRenderBalance = !!assetRate?.price ? renderBalance * Number(assetRate.price) : 0;
+  const resolvedRate = hasEmbeddedRate ? embeddedRate : Number(assetRate?.price || 0);
+  const usdRenderBalance = resolvedRate > 0 ? renderBalance * resolvedRate : 0;
+  const shortContractAddress = asset.address ? truncateMiddle(asset.address, 6, 4) : null;
   return /* @__PURE__ */ jsxs73(
     "div",
     {
@@ -15627,15 +15668,22 @@ function PortfolioItem(props) {
       children: [
         /* @__PURE__ */ jsx80(PortfolioItemImage, { asset }),
         /* @__PURE__ */ jsxs73("div", { className: "w-full flex-1", children: [
-          /* @__PURE__ */ jsxs73("div", { className: "w-full flex items-center justify-between text-xs", children: [
-            /* @__PURE__ */ jsx80(
-              "span",
-              {
-                className: "truncate max-w-[150px]",
-                title: isNft ? asset.nftMetadata?.collectionName || asset.name : asset.name,
-                children: isNft ? asset.nftMetadata?.collectionName || asset.name || (asset.address ? `${asset.address.slice(0, 6)}...${asset.address.slice(-4)}` : "Unknown") : asset.name || (asset.address ? `${asset.address.slice(0, 6)}...${asset.address.slice(-4)}` : "Unknown")
-              }
-            ),
+          /* @__PURE__ */ jsxs73("div", { className: "w-full flex items-center justify-between text-xs gap-2", children: [
+            /* @__PURE__ */ jsxs73("div", { className: "min-w-0 flex flex-col", children: [
+              /* @__PURE__ */ jsx80(
+                "span",
+                {
+                  className: "truncate max-w-[150px]",
+                  title: isNft ? asset.nftMetadata?.collectionName || asset.name : asset.name,
+                  children: isNft ? asset.nftMetadata?.collectionName || asset.name || shortContractAddress || "Unknown" : asset.name || shortContractAddress || "Unknown"
+                }
+              ),
+              !isNft && shortContractAddress && /* @__PURE__ */ jsxs73("span", { className: "text-[10px] text-[var(--ui-kit-fg-muted)] font-mono truncate", title: asset.address, children: [
+                asset.symbol,
+                " \xB7 ",
+                shortContractAddress
+              ] })
+            ] }),
             !!usdRenderBalance && !isProjectAsset && !isNft && !isSecurity && /* @__PURE__ */ jsx80("span", { className: "text-[var(--ui-kit-fg-muted)]", children: "USD" }),
             !isSecurity && isNft && "type" in asset && /* @__PURE__ */ jsx80("span", { className: "uppercase text-[10px] px-1 bg-[var(--ui-kit-bg-info)] rounded-full", children: asset.type === "erc721" ? "ERC-721" : "ERC-1155" }),
             isSecurity && /* @__PURE__ */ jsx80("span", { className: "uppercase text-[10px] px-1 bg-[var(--ui-kit-bg-warning)] rounded-full", children: "Security Token" })
@@ -15675,6 +15723,7 @@ var init_PortfolioItem = __esm({
     init_base();
     init_priceFormatter();
     init_utils2();
+    init_truncateMiddle();
     init_BalanceView2();
     SKIP_SYMBOLS2 = ["TEST"];
     ASSETS_RATES_QUERY_KEY = "lumia-passport-assets-rates-query-key";
@@ -16907,6 +16956,11 @@ function AssetListItem(props) {
         /* @__PURE__ */ jsx91(AssetInputIcon, { asset, size: "large" }),
         /* @__PURE__ */ jsxs84("div", { className: "flex-1 flex flex-col items-start", children: [
           /* @__PURE__ */ jsx91("div", { className: "text-[10px] truncate leading-4", children: isNft ? asset.nftMetadata?.name || asset.name : asset.name }),
+          !isNft && asset.address && /* @__PURE__ */ jsxs84("div", { className: "text-[10px] text-[var(--ui-kit-fg-muted)] font-mono truncate leading-4", title: asset.address, children: [
+            asset.symbol,
+            " \xB7 ",
+            truncateMiddle(asset.address, 6, 4)
+          ] }),
           /* @__PURE__ */ jsx91("span", { className: "block text-lg font-bold", children: isNft ? /* @__PURE__ */ jsxs84(Fragment35, { children: [
             asset.symbol,
             asset.tokenId && /* @__PURE__ */ jsxs84("span", { className: "ml-1", children: [
@@ -16962,6 +17016,7 @@ var init_AssetList = __esm({
   "src/internal/components/SendRecieveMenu/components/AssetList.tsx"() {
     init_priceFormatter();
     init_utils2();
+    init_truncateMiddle();
     init_BalanceView2();
     init_useSendStore();
     init_utils8();
@@ -19214,7 +19269,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.13",
+      version: "0.4.17",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -19230,8 +19285,9 @@ var init_package = __esm({
         clean: "rm -rf dist",
         "build:css": "tailwindcss -c tailwind.config.cjs -i src/styles/index.css -o src/styles/built.css --minify",
         "build:iframe-html": "node scripts/copy-iframe-html.js",
-        "build:copy-css": "cp src/styles/built.css dist/styles.css",
+        "build:copy-css": "node scripts/copy-styles-css.js",
         build: "pnpm build:css && tsup && pnpm build:iframe-html && pnpm build:copy-css",
+        prepack: "pnpm build",
         dev: "pnpm build:css && tsup --watch",
         "dev:iframe": "vite --config iframe/vite.config.ts",
         csv: "npx tsx src/i18n/utils/prepareCsvProofread.ts --origin en --target zh",
@@ -23228,6 +23284,7 @@ function Provider(props) {
     if (updates.warnings) next.warnings = { ...next.warnings, ...updates.warnings };
     if (updates.kyc) next.kyc = { ...next.kyc, ...updates.kyc };
     if (updates.watchTokens) next.watchTokens = { ...next.watchTokens, ...updates.watchTokens };
+    if (updates.portfolio) next.portfolio = { ...next.portfolio, ...updates.portfolio };
     if (updates.services && typeof window !== "undefined") {
       try {
         window.__EMBARK_SERVICES__ = next.services;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embarkai/ui-kit",
-  "version": "0.4.13",
+  "version": "0.4.17",
   "description": "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -87,7 +87,7 @@
     "clean": "rm -rf dist",
     "build:css": "tailwindcss -c tailwind.config.cjs -i src/styles/index.css -o src/styles/built.css --minify",
     "build:iframe-html": "node scripts/copy-iframe-html.js",
-    "build:copy-css": "cp src/styles/built.css dist/styles.css",
+    "build:copy-css": "node scripts/copy-styles-css.js",
     "build": "pnpm build:css && tsup && pnpm build:iframe-html && pnpm build:copy-css",
     "dev": "pnpm build:css && tsup --watch",
     "dev:iframe": "vite --config iframe/vite.config.ts",