@coinlist-co/react 0.12.1-rc.14ac67e → 0.12.1-rc.a230abc

package/dist/client/index.cjs

@@ -109,7 +109,9 @@ __export(client_exports, {
   formatCountdown: () => formatCountdown,
   formatMonthYear: () => formatMonthYear,
   formatSaleCardCountdown: () => formatSaleCardCountdown,
+  offerAssetIconUrl: () => offerAssetIconUrl,
   offerIconUrl: () => offerIconUrl,
+  offerTokenIdentifier: () => offerTokenIdentifier,
   ondoLoadErrorReason: () => ondoLoadErrorReason,
   pinoClientLogger: () => pinoClientLogger,
   prepareOndoBuy: () => prepareOndoBuy,
@@ -118,6 +120,9 @@ __export(client_exports, {
   quoteOverAsks: () => quoteOverAsks,
   stablecoinIconUrl: () => stablecoinIconUrl,
   submitErc20Approval: () => submitErc20Approval,
+  tokenLogoUrl: () => tokenLogoUrl,
+  tokenMetadataOf: () => tokenMetadataOf,
+  useCheckoutOfferTokenMetadata: () => useCheckoutOfferTokenMetadata,
   useCoinList: () => useCoinList,
   useCoinListSignInCardViewModel: () => useCoinListSignInCardViewModel,
   useCompleteOAuth: () => useCompleteOAuth,
@@ -1299,8 +1304,9 @@ var SOLANA_CHAINS = {
   solana_mainnet: true,
   solana_devnet: true
 };
+var isChain = (value) => Object.keys(ETHEREUM_CHAINS).includes(value) || Object.keys(SOLANA_CHAINS).includes(value);
 var Chain = (value) => {
-  if (!Object.keys(ETHEREUM_CHAINS).includes(value) && !Object.keys(SOLANA_CHAINS).includes(value)) {
+  if (!isChain(value)) {
     throw new ValidationError(`Unsupported chain: "${value}"`);
   }
   return value;
@@ -1875,7 +1881,7 @@ var Offer = {
       logoUrl: dto.logo_url,
       startsAt: new Date(dto.starts_at),
       endsAt: dto.ends_at ? new Date(dto.ends_at) : null,
-      tokens: dto.tokens.map(OfferToken.fromDto)
+      tokens: OfferToken.listFromDto(dto.tokens)
     };
   }
 };
@@ -1884,7 +1890,19 @@ var OfferToken = {
     role: dto.role,
     chain: Chain(dto.chain),
     address: EvmContractAddress(dto.address)
-  })
+  }),
+  /**
+   * Maps an offer's token list, dropping every token on a chain this SDK does
+   * not name. Frontline's chain registry runs ahead of {@link Chain}, and a
+   * plain `.map` would throw out of `Offer.fromDto` and, through
+   * `PaginatedResponse.fromDto`, reject the whole offers page - which is how
+   * one Base token blanked production's offers list. Dropping costs that
+   * token's metadata alone: `coinlist.tokens.get` takes an `EthereumChain`,
+   * so nobody could have looked it up anyway.
+   *
+   * Same shape as `TokenMetadata.fromRegistryDto`.
+   */
+  listFromDto: (dtos) => dtos.filter((dto) => isChain(dto.chain)).map(OfferToken.fromDto)
 };
 
 // src/shared/types/offer-detail.ts
@@ -1946,7 +1964,7 @@ var OfferDetail = {
       name: dto.name,
       asset: Asset.fromDto(dto.asset),
       fundingAssets: dto.funding_assets.map(Asset.fromDto),
-      tokens: dto.tokens.map(OfferToken.fromDto),
+      tokens: OfferToken.listFromDto(dto.tokens),
       swapContracts: swapContracts.map(OfferSwapContract.fromDto),
       about: notBlankStringOrNull(dto.about),
       tagline: dto.tagline,
@@ -4647,7 +4665,7 @@ function CoinListSignInCardContainer({
 }
 
 // src/client/components/checkout/CheckoutContainer.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/client/components/checkout/shared/amount/CheckoutAmountInput.tsx
 var import_react8 = require("react");
@@ -8445,7 +8463,7 @@ function ErrorView4({
 }
 
 // src/client/hooks/checkout/ondo/buy/useOndoBuyCheckoutViewModel.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/client/hooks/checkout/ondo/buy/amount/useOndoBuyAmountViewModel.ts
 var import_react15 = require("react");
@@ -8472,6 +8490,26 @@ function stablecoinIconUrl(symbol) {
 function offerIconUrl(offer) {
   return offer.logoUrl === "" ? null : AssetIconUrl(offer.logoUrl);
 }
+function tokenLogoUrl(logo, minWidth = 40) {
+  switch (logo.kind) {
+    case "VECTOR":
+      return AssetIconUrl(logo.url);
+    case "RASTER": {
+      const chosen = logo.variants.reduce(
+        (smallest, variant) => variant.width >= minWidth && (smallest === null || variant.width < smallest.width) ? variant : smallest,
+        null
+      );
+      return AssetIconUrl((chosen ?? logo.original).url);
+    }
+    default: {
+      const exhaustive = logo;
+      return exhaustive;
+    }
+  }
+}
+function offerAssetIconUrl(offer, tokenMetadata) {
+  return (tokenMetadata ? tokenLogoUrl(tokenMetadata.logo) : null) ?? offerIconUrl(offer);
+}
 
 // src/client/hooks/checkout/shared/checkout-ui.types.ts
 var CheckoutAssetUi = {
@@ -8480,10 +8518,10 @@ var CheckoutAssetUi = {
    * name and symbol, the caller supplies the chain it is being traded on and
    * whatever icon it has for it.
    *
-   * `iconUrl` is a caller's parameter rather than the token's own because a
-   * token does not carry one - the SDK ships no icon registry, and the only
-   * source is the offer being bought. Which is also why it defaults to `null`:
-   * the input asset a user pays with has no offer behind it.
+   * `iconUrl` is a caller's parameter rather than the token's own because an
+   * `Erc20Asset` does not carry one, and which source supplies it is the
+   * caller's to decide. Which is also why it defaults to `null`: the input
+   * asset a user pays with has no offer behind it.
    *
    * An asset sourced from the offer rather than from a token has its own
    * companion, {@link fromOffer}. One companion per source, not one per call
@@ -8500,7 +8538,7 @@ var CheckoutAssetUi = {
   }),
   /**
    * The view of the asset an offer sells: the offer supplies its name and the
-   * only icon the SDK has, the caller supplies the symbol and the chain.
+   * fallback artwork, the caller supplies the symbol and the chain.
    *
    * `symbol` is a parameter rather than `offer.asset.code` because the symbol a
    * provider trades under is the provider's, not the catalogue's - Ondo's
@@ -8508,14 +8546,26 @@ var CheckoutAssetUi = {
    * asset stands in. Keeping it out here is what lets one companion serve every
    * provider instead of forking per provider.
    *
+   * The icon is resolved from the public token registry when `tokenMetadata`
+   * carries a listed token — `useCheckoutOfferTokenMetadata` fetches it,
+   * keyed by the token `OfferDetail.tokens` lists for this chain — and falls
+   * back to the offer's own logo otherwise. `null` covers every way the
+   * registry answer can be absent (unlisted, not settled, lookup failed);
+   * which one it is stays the concern of the hook's state machine, not of
+   * this model, because the icon is the same either way.
+   *
    * Deliberately no decimals. An offer names an asset; it does not answer for
    * the scale of any particular quantity, and every amount a checkout renders
    * arrives as a `BlockchainAmount` carrying its own.
    */
-  fromOffer: (offer, { symbol, networkName }) => ({
+  fromOffer: (offer, {
+    symbol,
+    networkName,
+    tokenMetadata
+  }) => ({
     name: offer.name,
     symbol,
-    iconUrl: offerIconUrl(offer),
+    iconUrl: offerAssetIconUrl(offer, tokenMetadata),
     network: { name: networkName, iconUrl: null }
   })
 };
@@ -9036,6 +9086,7 @@ function useOndoBuyReviewViewModel({
   ondoSymbol,
   chain,
   offer,
+  outputTokenMetadata,
   enabled = true,
   onComplete
 }) {
@@ -9088,7 +9139,8 @@ function useOndoBuyReviewViewModel({
       type: "active",
       outputAsset: CheckoutAssetUi.fromOffer(offer, {
         symbol: ondoSymbol,
-        networkName: getNetworkName(chain)
+        networkName: getNetworkName(chain),
+        tokenMetadata: outputTokenMetadata
       }),
       outputAmount: assetAmount(
         formatAmount(built.receiveOutputAmount, locale),
@@ -9419,6 +9471,7 @@ function useOndoSidebarViewModel({
   offer,
   ondoSymbol,
   chain,
+  tokenMetadata,
   priceState,
   tradingStatusState
 }) {
@@ -9426,7 +9479,8 @@ function useOndoSidebarViewModel({
   const state = {
     asset: CheckoutAssetUi.fromOffer(offer, {
       symbol: ondoSymbol,
-      networkName: getNetworkName(chain)
+      networkName: getNetworkName(chain),
+      tokenMetadata
     }),
     // No frontline endpoint carries any of these today, and the detail list
     // drops a null row rather than dashing it.
@@ -9616,6 +9670,99 @@ function toConfirmedWalletUi(wallets, wallet) {
   };
 }
 
+// src/client/hooks/shared/useTokenMetadata.ts
+var import_react22 = require("react");
+var DISABLED_STATE = { type: "DISABLED" };
+var LOADING_STATE = { type: "LOADING" };
+function useTokenMetadata(options) {
+  const { chain, address, data, enabled = true } = options;
+  const { coinlist, isReady } = useCoinList();
+  const log = useLogger("useTokenMetadata");
+  const [state, setState] = (0, import_react22.useState)(
+    () => data !== void 0 ? { type: "CONTENT", tokenMetadata: data } : LOADING_STATE
+  );
+  const [refetchCount, setRefetchCount] = (0, import_react22.useState)(0);
+  const refetch = (0, import_react22.useCallback)(() => {
+    setRefetchCount((count) => count + 1);
+  }, []);
+  (0, import_react22.useEffect)(() => {
+    let isCancelled = false;
+    const seedActive = data !== void 0 && refetchCount === 0;
+    if (!isReady || !enabled || seedActive) {
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setState(LOADING_STATE);
+    coinlist.tokens.get({ chain, address }).then((tokenMetadata) => {
+      if (!isCancelled) {
+        log.debug(() => ({
+          msg: "settled",
+          fields: {
+            state: "CONTENT",
+            listed: tokenMetadata !== null,
+            symbol: tokenMetadata?.symbol ?? null
+          }
+        }));
+        setState({ type: "CONTENT", tokenMetadata });
+      }
+    }).catch((error) => {
+      if (!isCancelled) {
+        log.failure(
+          () => ({
+            msg: "settled",
+            fields: { state: "ERROR", reason: "generic-error" }
+          }),
+          error
+        );
+        setState({ type: "ERROR", reason: "generic-error" });
+      }
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [coinlist, isReady, enabled, chain, address, data, refetchCount, log]);
+  return {
+    // LOADING would be a lie while disabled: nothing is in flight and nothing
+    // will replace it. Settled states (a seed, a previous answer) survive.
+    state: !enabled && state.type === "LOADING" ? DISABLED_STATE : state,
+    refetch
+  };
+}
+
+// src/client/hooks/checkout/shared/data/useCheckoutOfferTokenMetadata.ts
+var NO_TOKEN_ADDRESS = EvmContractAddress(
+  "0x0000000000000000000000000000000000000000"
+);
+function offerTokenIdentifier(offer, chain) {
+  const byChain = offer.tokens.filter((token) => token.chain === chain);
+  const asset = byChain.find((token) => token.role === "swap") ?? byChain.find((token) => token.role === "distribution");
+  return asset === void 0 ? null : { chain, address: asset.address };
+}
+function tokenMetadataOf(state) {
+  return state.type === "CONTENT" ? state.tokenMetadata : null;
+}
+function useCheckoutOfferTokenMetadata({
+  offer,
+  chain,
+  data,
+  enabled = true
+}) {
+  const identifier = offerTokenIdentifier(offer, chain);
+  const { state } = useTokenMetadata({
+    // Primitive keys, not the identifier object: the underlying hook re-fetches
+    // only when `(chain, address)` changes, so a host that rebuilds the offer
+    // object per render does not refetch the registry per render.
+    chain: identifier?.chain ?? chain,
+    address: identifier?.address ?? NO_TOKEN_ADDRESS,
+    // Nothing to look up when the offer lists no token here: seed "not
+    // listed" and never fire a request against the placeholder address.
+    enabled: enabled && identifier !== null,
+    data: data !== void 0 ? data : identifier === null ? null : void 0
+  });
+  return { state };
+}
+
 // src/client/hooks/checkout/ondo/buy/useOndoBuyCheckoutViewModel.ts
 function useOndoBuyCheckoutViewModel({
   offer,
@@ -9626,8 +9773,8 @@ function useOndoBuyCheckoutViewModel({
   onOrderConfirmed
 }) {
   const locale = useLocale();
-  const [step, setStep] = (0, import_react22.useState)({ type: "wallet" });
-  const [orderConfirmed, setOrderConfirmed] = (0, import_react22.useState)({ type: "hidden" });
+  const [step, setStep] = (0, import_react23.useState)({ type: "wallet" });
+  const [orderConfirmed, setOrderConfirmed] = (0, import_react23.useState)(null);
   const swappableHere = swapSpender(offer.swapContracts, chain) !== null;
   const live = enabled && swappableHere;
   const { state: priceState } = useOndoPrice({
@@ -9643,6 +9790,20 @@ function useOndoBuyCheckoutViewModel({
     pollIntervalMs: ONDO_POLL_INTERVAL_MS,
     enabled: live
   });
+  const { state: outputTokenMetadataState } = useCheckoutOfferTokenMetadata({
+    offer,
+    chain,
+    enabled: live
+  });
+  const outputTokenMetadata = tokenMetadataOf(outputTokenMetadataState);
+  const orderConfirmedUi = (order) => order === null ? { type: "hidden" } : toOrderConfirmedUi({
+    order,
+    chain,
+    locale,
+    offer,
+    ondoSymbol,
+    outputTokenMetadata
+  });
   const { state: walletState, onEvent: onWalletEvent } = useOndoWalletSelectViewModel({
     stepInput: walletStepInput(step),
     wallets,
@@ -9689,11 +9850,10 @@ function useOndoBuyCheckoutViewModel({
     ondoSymbol,
     chain,
     offer,
+    outputTokenMetadata,
     enabled: live,
     onComplete: (order) => {
-      setOrderConfirmed(
-        toOrderConfirmedUi({ order, chain, locale, offer, ondoSymbol })
-      );
+      setOrderConfirmed(order);
       setStep({ type: "wallet" });
       onOrderConfirmed?.(order);
     }
@@ -9702,6 +9862,7 @@ function useOndoBuyCheckoutViewModel({
     offer,
     ondoSymbol,
     chain,
+    tokenMetadata: outputTokenMetadata,
     priceState,
     tradingStatusState
   });
@@ -9711,7 +9872,7 @@ function useOndoBuyCheckoutViewModel({
     amount: amountState,
     review: reviewState,
     sidebar: sidebarState,
-    orderConfirmed
+    orderConfirmed: orderConfirmedUi(orderConfirmed)
   };
   const onEvent = (event) => {
     switch (event.type) {
@@ -9735,7 +9896,7 @@ function useOndoBuyCheckoutViewModel({
         onReviewEvent(event);
         return;
       case "ON_CLOSE_ORDER_CONFIRMED":
-        setOrderConfirmed({ type: "hidden" });
+        setOrderConfirmed(null);
         return;
       default: {
         const exhaustive = event;
@@ -9789,14 +9950,16 @@ function toOrderConfirmedUi({
   chain,
   locale,
   offer,
-  ondoSymbol
+  ondoSymbol,
+  outputTokenMetadata
 }) {
   const inputSymbol = TOKEN_REGISTRY.erc20(order.inputAsset).symbol;
   return {
     type: "visible",
     outputAsset: CheckoutAssetUi.fromOffer(offer, {
       symbol: ondoSymbol,
-      networkName: getNetworkName(chain)
+      networkName: getNetworkName(chain),
+      tokenMetadata: outputTokenMetadata
     }),
     outputAmount: assetAmount(
       formatAmount(order.transaction.receiveOutputAmount, locale),
@@ -9816,13 +9979,13 @@ function toOrderConfirmedUi({
 }
 
 // src/client/hooks/checkout/ondo/sell/useOndoSellCheckoutViewModel.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/client/hooks/checkout/ondo/sell/amount/useOndoSellAmountViewModel.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/client/hooks/shared/erc20/useErc20Balance.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function useErc20Balance(options) {
   const {
     tokenAddress,
@@ -9833,12 +9996,12 @@ function useErc20Balance(options) {
   } = options;
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useErc20Balance");
-  const [balance, setBalance] = (0, import_react23.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react23.useState)(true);
-  const fetchIdRef = (0, import_react23.useRef)(0);
-  const isFetchingRef = (0, import_react23.useRef)(false);
-  const hasReadRef = (0, import_react23.useRef)(false);
-  (0, import_react23.useEffect)(() => {
+  const [balance, setBalance] = (0, import_react24.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react24.useState)(true);
+  const fetchIdRef = (0, import_react24.useRef)(0);
+  const isFetchingRef = (0, import_react24.useRef)(false);
+  const hasReadRef = (0, import_react24.useRef)(false);
+  (0, import_react24.useEffect)(() => {
     if (!isReady) return;
     setBalance(null);
     hasReadRef.current = false;
@@ -9915,16 +10078,17 @@ function useOndoSellAmountViewModel({
   ondoSymbol,
   chain,
   offer,
+  inputTokenMetadata,
   enabled = true,
   onComplete,
   onEdit
 }) {
   const { coinlist } = useCoinList();
   const locale = useLocale();
-  const [amountInput, setAmountInput] = (0, import_react24.useState)("");
-  const [error, setError] = (0, import_react24.useState)(null);
-  const [phase, setPhase] = (0, import_react24.useState)(null);
-  const preparationIdRef = (0, import_react24.useRef)(0);
+  const [amountInput, setAmountInput] = (0, import_react25.useState)("");
+  const [error, setError] = (0, import_react25.useState)(null);
+  const [phase, setPhase] = (0, import_react25.useState)(null);
+  const preparationIdRef = (0, import_react25.useRef)(0);
   const isActive = stepInput.type === "active";
   const networkName = getNetworkName(chain);
   const sellAsset2 = isActive ? stepInput.sellAsset : null;
@@ -9935,7 +10099,7 @@ function useOndoSellAmountViewModel({
     chain,
     enabled: enabled && isActive && sellAsset2 !== null
   });
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (stepInput.type === "incomplete") {
       ++preparationIdRef.current;
       setAmountInput("");
@@ -9961,7 +10125,8 @@ function useOndoSellAmountViewModel({
           type: "complete",
           asset: CheckoutAssetUi.fromOffer(offer, {
             symbol: stepInput.inputAsset,
-            networkName
+            networkName,
+            tokenMetadata: inputTokenMetadata
           }),
           amountFormatted: assetAmount(
             formatAmount(stepInput.amount, locale),
@@ -9983,7 +10148,8 @@ function useOndoSellAmountViewModel({
     return {
       asset: CheckoutAssetUi.fromOffer(offer, {
         symbol: ondoSymbol,
-        networkName
+        networkName,
+        tokenMetadata: inputTokenMetadata
       }),
       balance: assetAmount(formatAmount(amount, locale), ondoSymbol),
       rawBalance: balance
@@ -10170,15 +10336,15 @@ function preparationErrorMessage2(error) {
 }
 
 // src/client/hooks/checkout/ondo/sell/review/useOndoSellReviewViewModel.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/client/hooks/checkout/ondo/sell/data/useOndoSellTransaction.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 function useOndoSellTransaction(options) {
   const { request, data, enabled } = options;
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useOndoSellTransaction");
-  const [state, setState] = (0, import_react25.useState)(
+  const [state, setState] = (0, import_react26.useState)(
     () => data === void 0 ? { type: "LOADING" } : {
       type: "CONTENT",
       transaction: data,
@@ -10186,12 +10352,12 @@ function useOndoSellTransaction(options) {
       refreshError: null
     }
   );
-  const fetchIdRef = (0, import_react25.useRef)(0);
-  const isFetchingRef = (0, import_react25.useRef)(false);
+  const fetchIdRef = (0, import_react26.useRef)(0);
+  const isFetchingRef = (0, import_react26.useRef)(false);
   const requestKey = request === null ? null : stableKey2(request);
-  const requestRef = (0, import_react25.useRef)(request);
+  const requestRef = (0, import_react26.useRef)(request);
   requestRef.current = request;
-  const build = (0, import_react25.useCallback)(async () => {
+  const build = (0, import_react26.useCallback)(async () => {
     const params = requestRef.current;
     if (!isReady || !enabled || params === null) return;
     if (isFetchingRef.current) return;
@@ -10227,7 +10393,7 @@ function useOndoSellTransaction(options) {
       isFetchingRef.current = false;
     }
   }, [coinlist, isReady, enabled, log]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (data === void 0) return;
     ++fetchIdRef.current;
     setState({
@@ -10238,14 +10404,14 @@ function useOndoSellTransaction(options) {
     });
   }, [data]);
   const hasSeed = data !== void 0;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (hasSeed || requestKey === null) return;
     build();
     return () => {
       ++fetchIdRef.current;
     };
   }, [build, requestKey, hasSeed]);
-  const refetch = (0, import_react25.useCallback)(() => {
+  const refetch = (0, import_react26.useCallback)(() => {
     build();
   }, [build]);
   return { state, refetch };
@@ -10270,8 +10436,8 @@ function useOndoSellReviewViewModel({
 }) {
   const { coinlist } = useCoinList();
   const locale = useLocale();
-  const [phase, setPhase] = (0, import_react26.useState)(null);
-  const [error, setError] = (0, import_react26.useState)(null);
+  const [phase, setPhase] = (0, import_react27.useState)(null);
+  const [error, setError] = (0, import_react27.useState)(null);
   const isActive = stepInput.type === "active";
   const { state: transactionState, refetch } = useOndoSellTransaction({
     request: isActive ? {
@@ -10283,8 +10449,8 @@ function useOndoSellReviewViewModel({
     data: isActive ? stepInput.transaction : void 0,
     enabled: enabled && isActive
   });
-  const executionIdRef = (0, import_react26.useRef)(0);
-  (0, import_react26.useEffect)(() => {
+  const executionIdRef = (0, import_react27.useRef)(0);
+  (0, import_react27.useEffect)(() => {
     if (stepInput.type === "incomplete") {
       ++executionIdRef.current;
       setError(null);
@@ -10494,12 +10660,12 @@ function useOndoSellCheckoutViewModel({
   onOrderConfirmed
 }) {
   const locale = useLocale();
-  const [initialStep] = (0, import_react27.useState)(
+  const [initialStep] = (0, import_react28.useState)(
     () => wallets.preselected === null ? { type: "wallet" } : { type: "amount", wallet: wallets.preselected }
   );
-  const [step, setStep] = (0, import_react27.useState)(initialStep);
+  const [step, setStep] = (0, import_react28.useState)(initialStep);
   const hasWalletStep = initialStep.type === "wallet";
-  const [orderConfirmed, setOrderConfirmed] = (0, import_react27.useState)({ type: "hidden" });
+  const [orderConfirmed, setOrderConfirmed] = (0, import_react28.useState)(null);
   const swappableHere = swapSpender(offer.swapContracts, chain) !== null;
   const live = enabled && swappableHere;
   const { state: priceState } = useOndoPrice({
@@ -10515,6 +10681,20 @@ function useOndoSellCheckoutViewModel({
     pollIntervalMs: ONDO_POLL_INTERVAL_MS,
     enabled: live
   });
+  const { state: inputTokenMetadataState } = useCheckoutOfferTokenMetadata({
+    offer,
+    chain,
+    enabled: live
+  });
+  const inputTokenMetadata = tokenMetadataOf(inputTokenMetadataState);
+  const orderConfirmedUi = (order) => order === null ? { type: "hidden" } : toOrderConfirmedUi2({
+    order,
+    chain,
+    locale,
+    offer,
+    ondoSymbol,
+    inputTokenMetadata
+  });
   const { state: walletState, onEvent: onWalletEvent } = useOndoWalletSelectViewModel({
     stepInput: walletStepInput2(step),
     wallets,
@@ -10531,6 +10711,7 @@ function useOndoSellCheckoutViewModel({
     ondoSymbol,
     chain,
     offer,
+    inputTokenMetadata,
     enabled: live,
     // Both transitions read the step through the updater rather than the one
     // this render closed over. Preparing an amount takes an approval to mine,
@@ -10563,9 +10744,7 @@ function useOndoSellCheckoutViewModel({
     chain,
     enabled: live,
     onComplete: (order) => {
-      setOrderConfirmed(
-        toOrderConfirmedUi2({ order, chain, locale, offer, ondoSymbol })
-      );
+      setOrderConfirmed(order);
       setStep(initialStep);
       onOrderConfirmed?.(order);
     }
@@ -10574,6 +10753,7 @@ function useOndoSellCheckoutViewModel({
     offer,
     ondoSymbol,
     chain,
+    tokenMetadata: inputTokenMetadata,
     priceState,
     tradingStatusState
   });
@@ -10583,7 +10763,7 @@ function useOndoSellCheckoutViewModel({
     amount: amountState,
     review: reviewState,
     sidebar: sidebarState,
-    orderConfirmed
+    orderConfirmed: orderConfirmedUi(orderConfirmed)
   };
   const onEvent = (event) => {
     switch (event.type) {
@@ -10607,7 +10787,7 @@ function useOndoSellCheckoutViewModel({
         onReviewEvent(event);
         return;
       case "ON_CLOSE_SELL_ORDER_CONFIRMED":
-        setOrderConfirmed({ type: "hidden" });
+        setOrderConfirmed(null);
         return;
       default: {
         const exhaustive = event;
@@ -10675,14 +10855,16 @@ function toOrderConfirmedUi2({
   chain,
   locale,
   offer,
-  ondoSymbol
+  ondoSymbol,
+  inputTokenMetadata
 }) {
   const settlementSymbol = TOKEN_REGISTRY.erc20(ONDO_SETTLEMENT_ASSET).symbol;
   return {
     type: "visible",
     soldAsset: CheckoutAssetUi.fromOffer(offer, {
       symbol: ondoSymbol,
-      networkName: getNetworkName(chain)
+      networkName: getNetworkName(chain),
+      tokenMetadata: inputTokenMetadata
     }),
     soldAmount: assetAmount(
       formatAmount(order.transaction.spendInputAmount, locale),
@@ -10706,10 +10888,10 @@ function toOrderConfirmedUi2({
 }
 
 // src/client/hooks/checkout/superstate/swap/useSuperstateSwapCheckoutViewModel.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/client/hooks/checkout/superstate/swap/amount/useSuperstateAmountViewModel.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 var NO_WALLET3 = EvmWalletAddress(
   "0x0000000000000000000000000000000000000000"
 );
@@ -10723,11 +10905,11 @@ function useSuperstateAmountViewModel({
   enabled = true
 }) {
   const locale = useLocale();
-  const [amountInput, setAmountInput] = (0, import_react28.useState)("");
-  const [selectedAsset, setSelectedAsset] = (0, import_react28.useState)(
+  const [amountInput, setAmountInput] = (0, import_react29.useState)("");
+  const [selectedAsset, setSelectedAsset] = (0, import_react29.useState)(
     SUPERSTATE_SUPPORTED_INPUT_ASSETS[0]
   );
-  const [error, setError] = (0, import_react28.useState)(null);
+  const [error, setError] = (0, import_react29.useState)(null);
   const isActive = stepInput.type === "active";
   const networkName = getNetworkName(chain);
   const { balances, isLoading: balancesLoading } = useErc20TokenBalances({
@@ -10740,7 +10922,7 @@ function useSuperstateAmountViewModel({
     // on this step satisfies the first and not the second.
     enabled: enabled && isActive
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (stepInput.type === "incomplete") {
       setAmountInput("");
       setSelectedAsset(SUPERSTATE_SUPPORTED_INPUT_ASSETS[0]);
@@ -10911,20 +11093,20 @@ function toInputAssetUi2({
 }
 
 // src/client/hooks/checkout/superstate/swap/data/useSwapOutputToken.ts
-var import_react29 = require("react");
-var LOADING_STATE = { type: "LOADING" };
+var import_react30 = require("react");
+var LOADING_STATE2 = { type: "LOADING" };
 function useSwapOutputToken(options) {
   const { contractAddress, chain, enabled } = options;
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useSwapOutputToken");
-  const [outputTokenState, setOutputTokenState] = (0, import_react29.useState)(LOADING_STATE);
-  const [retryCount, setRetryCount] = (0, import_react29.useState)(0);
-  const fetchIdRef = (0, import_react29.useRef)(0);
-  const refetch = (0, import_react29.useCallback)(() => {
-    setOutputTokenState(LOADING_STATE);
+  const [outputTokenState, setOutputTokenState] = (0, import_react30.useState)(LOADING_STATE2);
+  const [retryCount, setRetryCount] = (0, import_react30.useState)(0);
+  const fetchIdRef = (0, import_react30.useRef)(0);
+  const refetch = (0, import_react30.useCallback)(() => {
+    setOutputTokenState(LOADING_STATE2);
     setRetryCount((count) => count + 1);
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!enabled || !isReady) return;
     const currentFetchId = ++fetchIdRef.current;
     const load = async () => {
@@ -10957,7 +11139,7 @@ function useSwapOutputToken(options) {
 }
 
 // src/client/hooks/checkout/superstate/swap/data/useSwapQuote.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 function useSwapQuote(options) {
   const {
     contractAddress,
@@ -10970,13 +11152,13 @@ function useSwapQuote(options) {
   } = options;
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useSwapQuote");
-  const [quote, setQuote] = (0, import_react30.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react30.useState)(true);
-  const [isRefreshing, setIsRefreshing] = (0, import_react30.useState)(false);
-  const isFetchingRef = (0, import_react30.useRef)(false);
-  const hasQuoteRef = (0, import_react30.useRef)(false);
-  const fetchIdRef = (0, import_react30.useRef)(0);
-  (0, import_react30.useEffect)(() => {
+  const [quote, setQuote] = (0, import_react31.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react31.useState)(true);
+  const [isRefreshing, setIsRefreshing] = (0, import_react31.useState)(false);
+  const isFetchingRef = (0, import_react31.useRef)(false);
+  const hasQuoteRef = (0, import_react31.useRef)(false);
+  const fetchIdRef = (0, import_react31.useRef)(0);
+  (0, import_react31.useEffect)(() => {
     if (!isReady) return;
     if (!enabled) {
       setIsLoading(false);
@@ -11046,7 +11228,7 @@ function useSwapQuote(options) {
 }
 
 // src/client/hooks/checkout/superstate/swap/review/useSuperstateReviewViewModel.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 function useSuperstateReviewViewModel({
   stepInput,
   contractAddress,
@@ -11056,11 +11238,11 @@ function useSuperstateReviewViewModel({
 }) {
   const { coinlist, isReady } = useCoinList();
   const locale = useLocale();
-  const [slippageBps, setSlippageBps] = (0, import_react31.useState)(DEFAULT_SLIPPAGE_BPS);
-  const [slippageExpanded, setSlippageExpanded] = (0, import_react31.useState)(false);
-  const [phase, setPhase] = (0, import_react31.useState)(null);
-  const [error, setError] = (0, import_react31.useState)(null);
-  (0, import_react31.useEffect)(() => {
+  const [slippageBps, setSlippageBps] = (0, import_react32.useState)(DEFAULT_SLIPPAGE_BPS);
+  const [slippageExpanded, setSlippageExpanded] = (0, import_react32.useState)(false);
+  const [phase, setPhase] = (0, import_react32.useState)(null);
+  const [error, setError] = (0, import_react32.useState)(null);
+  (0, import_react32.useEffect)(() => {
     if (stepInput.type === "incomplete") {
       setSlippageBps(DEFAULT_SLIPPAGE_BPS);
       setSlippageExpanded(false);
@@ -11389,7 +11571,7 @@ function priceUi(quote, outputToken, locale) {
 }
 
 // src/client/hooks/checkout/superstate/swap/wallet/useSuperstateWalletViewModel.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 var CONNECT_FAILED2 = "Could not connect that wallet. Please try again.";
 function useSuperstateWalletViewModel({
   stepInput,
@@ -11402,12 +11584,12 @@ function useSuperstateWalletViewModel({
 }) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useSuperstateWalletViewModel");
-  const [selected, setSelected] = (0, import_react32.useState)(null);
-  const [phase, setPhase] = (0, import_react32.useState)(null);
-  const [error, setError] = (0, import_react32.useState)(null);
+  const [selected, setSelected] = (0, import_react33.useState)(null);
+  const [phase, setPhase] = (0, import_react33.useState)(null);
+  const [error, setError] = (0, import_react33.useState)(null);
   const networkName = getNetworkName(chain);
   const selectedWallet = resolveWallet2(wallets, selected);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (stepInput.type === "completed") {
       setPhase(null);
       setError(null);
@@ -11626,12 +11808,20 @@ function useSuperstateSwapCheckoutViewModel({
 }) {
   const locale = useLocale();
   const contractAddress = superstateSwapContractAddress(chain);
-  const assetIconUrl = offerIconUrl(offer);
-  const [step, setStep] = (0, import_react33.useState)({ type: "wallet" });
-  const [orderConfirmed, setOrderConfirmed] = (0, import_react33.useState)({ type: "hidden" });
+  const [step, setStep] = (0, import_react34.useState)({ type: "wallet" });
+  const [orderConfirmed, setOrderConfirmed] = (0, import_react34.useState)(null);
   const { inputAmount, inputTokenAddress } = quoteInput(step, chain);
   const live = enabled && contractAddress !== null;
   const contract = contractAddress ?? NO_CONTRACT;
+  const { state: offerTokenMetadataState } = useCheckoutOfferTokenMetadata({
+    offer,
+    chain,
+    enabled: live
+  });
+  const assetIconUrl = offerAssetIconUrl(
+    offer,
+    tokenMetadataOf(offerTokenMetadataState)
+  );
   const { outputTokenState, refetch: refetchOutputToken } = useSwapOutputToken({
     contractAddress: contract,
     chain,
@@ -11688,9 +11878,7 @@ function useSuperstateSwapCheckoutViewModel({
     chain,
     assetIconUrl,
     onComplete: (order) => {
-      setOrderConfirmed(
-        toOrderConfirmedUi3({ order, chain, locale, assetIconUrl })
-      );
+      setOrderConfirmed(order);
       setStep({ type: "wallet" });
       onOrderConfirmed?.(order);
     }
@@ -11716,7 +11904,15 @@ function useSuperstateSwapCheckoutViewModel({
       amount: amountState,
       review: reviewState,
       sidebar: sidebarState,
-      orderConfirmed
+      // Derived here rather than in the review completion callback, so a
+      // registry lookup that settles while the order is being placed still
+      // reaches the dialog instead of the fallback icon that closure captured.
+      orderConfirmed: orderConfirmed === null ? { type: "hidden" } : toOrderConfirmedUi3({
+        order: orderConfirmed,
+        chain,
+        locale,
+        assetIconUrl
+      })
     };
   };
   const onEvent = (event) => {
@@ -11741,7 +11937,7 @@ function useSuperstateSwapCheckoutViewModel({
         onReviewEvent(event);
         return;
       case "ON_CLOSE_ORDER_CONFIRMED":
-        setOrderConfirmed({ type: "hidden" });
+        setOrderConfirmed(null);
         return;
       case "ON_RETRY_LOAD":
         refetchOutputToken();
@@ -11856,7 +12052,7 @@ function CheckoutContainer({
   enabled = true,
   className
 }) {
-  const [side] = (0, import_react34.useState)(() => config["ondo::swap"].side());
+  const [side] = (0, import_react35.useState)(() => config["ondo::swap"].side());
   const isOndo = offer.type === "ondo::swap";
   const ondoSymbol = config["ondo::swap"].symbol(offer);
   const ondoBuy = useOndoBuyCheckoutViewModel({
@@ -12429,23 +12625,23 @@ function EmptyState() {
 }
 
 // src/client/hooks/offers/grid/useOffersGridViewModel.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/client/hooks/offers/data/useOffers.ts
-var import_react35 = require("react");
-var LOADING_STATE2 = { type: "LOADING" };
+var import_react36 = require("react");
+var LOADING_STATE3 = { type: "LOADING" };
 function useOffers(options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useOffers");
   const { data: serverOffers } = options;
-  const [offersState, setOffersState] = (0, import_react35.useState)(
-    serverOffers !== void 0 ? { type: "CONTENT", offers: serverOffers } : LOADING_STATE2
+  const [offersState, setOffersState] = (0, import_react36.useState)(
+    serverOffers !== void 0 ? { type: "CONTENT", offers: serverOffers } : LOADING_STATE3
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     let isCancelled = false;
     if (!isReady) {
       if (serverOffers === void 0) {
-        setOffersState(LOADING_STATE2);
+        setOffersState(LOADING_STATE3);
       }
       return () => {
         isCancelled = true;
@@ -12456,7 +12652,7 @@ function useOffers(options = {}) {
         isCancelled = true;
       };
     }
-    setOffersState(LOADING_STATE2);
+    setOffersState(LOADING_STATE3);
     coinlist.offers.list().then((offers) => {
       if (!isCancelled) {
         log.debug(() => ({
@@ -12507,11 +12703,11 @@ var GENERIC_ERROR_MESSAGE = "Unable to load offers right now. Please try again."
 function useOffersGridViewModel(options = {}) {
   const { data, onOfferClick } = options;
   const { offersState } = useOffers({ data });
-  const state = (0, import_react36.useMemo)(
+  const state = (0, import_react37.useMemo)(
     () => toUiState(offersState, onOfferClick !== void 0),
     [offersState, onOfferClick]
   );
-  const onEvent = (0, import_react36.useCallback)(
+  const onEvent = (0, import_react37.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_OFFER_CLICK": {
@@ -12572,13 +12768,13 @@ function OffersGridContainer({
 }
 
 // src/client/components/requirements/checklist/ConnectedWalletList.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function ConnectedWalletRow({
   wallet,
   onRemove
 }) {
-  const [state, setState] = (0, import_react37.useState)("idle");
+  const [state, setState] = (0, import_react38.useState)("idle");
   const remove = async () => {
     if (!onRemove) return;
     setState("removing");
@@ -13148,25 +13344,25 @@ function toError(error) {
 }
 
 // src/client/hooks/requirements/identity-verification/useIdentityVerificationViewModel.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/client/hooks/requirements/data/useKycToken.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 var IDLE_STATE = { type: "IDLE" };
-var LOADING_STATE3 = { type: "LOADING" };
+var LOADING_STATE4 = { type: "LOADING" };
 function useKycToken(levelName, reset) {
   const { coinlist } = useCoinList();
   const log = useLogger("useKycToken");
-  const [kycTokenState, setKycTokenState] = (0, import_react38.useState)(IDLE_STATE);
-  const resetPendingRef = (0, import_react38.useRef)(reset === true);
-  const tokenIssuedRef = (0, import_react38.useRef)(false);
-  (0, import_react38.useEffect)(() => {
+  const [kycTokenState, setKycTokenState] = (0, import_react39.useState)(IDLE_STATE);
+  const resetPendingRef = (0, import_react39.useRef)(reset === true);
+  const tokenIssuedRef = (0, import_react39.useRef)(false);
+  (0, import_react39.useEffect)(() => {
     if (!tokenIssuedRef.current) {
       resetPendingRef.current = reset === true;
     }
   }, [reset]);
-  const fetchToken = (0, import_react38.useCallback)(async () => {
-    setKycTokenState(LOADING_STATE3);
+  const fetchToken = (0, import_react39.useCallback)(async () => {
+    setKycTokenState(LOADING_STATE4);
     try {
       const kycToken = await coinlist.requirements.createKycToken({
         levelName,
@@ -13199,8 +13395,8 @@ var GENERIC_ERROR_MESSAGE2 = "Unable to start identity verification right now. P
 function useIdentityVerificationViewModel(options = {}) {
   const { levelName, reset, locale, onSubmitted, onError } = options;
   const { kycTokenState, fetchToken } = useKycToken(levelName, reset);
-  const fetchedRef = (0, import_react39.useRef)(false);
-  (0, import_react39.useEffect)(() => {
+  const fetchedRef = (0, import_react40.useRef)(false);
+  (0, import_react40.useEffect)(() => {
     if (fetchedRef.current) {
       return;
     }
@@ -13208,7 +13404,7 @@ function useIdentityVerificationViewModel(options = {}) {
     fetchToken().catch(() => {
     });
   }, [fetchToken]);
-  const state = (0, import_react39.useMemo)(() => {
+  const state = (0, import_react40.useMemo)(() => {
     switch (kycTokenState.type) {
       case "IDLE":
       case "LOADING":
@@ -13234,7 +13430,7 @@ function useIdentityVerificationViewModel(options = {}) {
       }
     }
   }, [kycTokenState, locale, fetchToken]);
-  const onEvent = (0, import_react39.useCallback)(
+  const onEvent = (0, import_react40.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_RETRY":
@@ -13496,12 +13692,12 @@ function SignOnlyScreen({
 }
 
 // src/client/hooks/requirements/tax-document/useTaxDocumentModalViewModel.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/client/hooks/requirements/data/useTaxDocument.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 var IDLE_SIGN = { type: "idle", error: null };
-var LOADING_STATE4 = { type: "LOADING" };
+var LOADING_STATE5 = { type: "LOADING" };
 var SIGN_FAILED_MESSAGE = "Unable to sign document. Please try again.";
 var DOB_INVALID_MESSAGE = "Enter your date of birth as MM/DD/YYYY.";
 var FIELD_KEYS = {
@@ -13574,8 +13770,8 @@ function useTaxDocument({
 }) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useTaxDocument");
-  const [state, setState] = (0, import_react40.useState)(LOADING_STATE4);
-  (0, import_react40.useEffect)(() => {
+  const [state, setState] = (0, import_react41.useState)(LOADING_STATE5);
+  (0, import_react41.useEffect)(() => {
     let isCancelled = false;
     if (!isOpen) {
       return () => {
@@ -13583,12 +13779,12 @@ function useTaxDocument({
       };
     }
     if (!isReady) {
-      setState(LOADING_STATE4);
+      setState(LOADING_STATE5);
       return () => {
         isCancelled = true;
       };
     }
-    setState(LOADING_STATE4);
+    setState(LOADING_STATE5);
     coinlist.requirements.getPii().then((pii) => {
       if (isCancelled) return;
       if (pii.kind === "company") {
@@ -13616,7 +13812,7 @@ function useTaxDocument({
       isCancelled = true;
     };
   }, [coinlist, isReady, isOpen, log]);
-  const onEditField = (0, import_react40.useCallback)(
+  const onEditField = (0, import_react41.useCallback)(
     (field, value) => {
       setState(
         (prev) => prev.type === "EDITING" ? { ...prev, fields: { ...prev.fields, [field]: value } } : prev
@@ -13624,7 +13820,7 @@ function useTaxDocument({
     },
     []
   );
-  const onStartEdit = (0, import_react40.useCallback)(() => {
+  const onStartEdit = (0, import_react41.useCallback)(() => {
     setState(
       (prev) => prev.type === "REVIEW" ? {
         type: "EDITING",
@@ -13635,7 +13831,7 @@ function useTaxDocument({
       } : prev
     );
   }, []);
-  const onSaveEdit = (0, import_react40.useCallback)(() => {
+  const onSaveEdit = (0, import_react41.useCallback)(() => {
     setState(
       (prev) => prev.type === "EDITING" ? {
         type: "REVIEW",
@@ -13646,7 +13842,7 @@ function useTaxDocument({
       } : prev
     );
   }, []);
-  const onCancelEdit = (0, import_react40.useCallback)(() => {
+  const onCancelEdit = (0, import_react41.useCallback)(() => {
     setState(
       (prev) => prev.type === "EDITING" ? {
         type: "REVIEW",
@@ -13657,7 +13853,7 @@ function useTaxDocument({
       } : prev
     );
   }, []);
-  const onSign = (0, import_react40.useCallback)(() => {
+  const onSign = (0, import_react41.useCallback)(() => {
     if (state.type !== "REVIEW" && state.type !== "SIGN_ONLY") return;
     if (state.type === "REVIEW" && state.fields.dob.trim() !== "" && !isValidUsDate(state.fields.dob)) {
       setState({
@@ -13699,19 +13895,19 @@ function useTaxDocumentModalViewModel({
   onSubmitted
 }) {
   const { state, onEditField, onStartEdit, onSaveEdit, onCancelEdit, onSign } = useTaxDocument({ isOpen });
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (state.type === "SUBMITTED") {
       onSubmitted?.(state.submission);
       onClose();
     }
   }, [state]);
-  const uiState = (0, import_react41.useMemo)(() => {
+  const uiState = (0, import_react42.useMemo)(() => {
     if (!isOpen || state.type === "SUBMITTED") {
       return { type: "hidden" };
     }
     return { type: "content", title: toTitle(state), screen: toScreen(state) };
   }, [isOpen, state]);
-  const onEvent = (0, import_react41.useCallback)(
+  const onEvent = (0, import_react42.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_CLOSE":
@@ -13817,14 +14013,14 @@ function TaxDocumentModalContainer({
 }
 
 // src/client/components/requirements/wallet/ConnectWalletModalView.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function ConnectWalletModalView({
   state,
   onEvent,
   className
 }) {
-  const titleId = (0, import_react42.useId)();
+  const titleId = (0, import_react43.useId)();
   if (state.type === "hidden") {
     return null;
   }
@@ -13927,10 +14123,10 @@ function Screen2({
 }
 
 // src/client/hooks/requirements/wallet/useConnectWalletModalViewModel.ts
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/client/hooks/requirements/data/useConnectWallet.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/client/core/wallets/connect-external-wallet.ts
 var DEFAULT_STATEMENT = "Sign this message to prove you own this wallet. This does not cost gas or move funds.";
@@ -14061,24 +14257,24 @@ function useConnectWallet({
   statement
 }) {
   const { coinlist } = useCoinList();
-  const [state, setState] = (0, import_react43.useState)(
+  const [state, setState] = (0, import_react44.useState)(
     () => wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN2 } : { type: "NEEDS_WALLET" }
   );
-  const attempt = (0, import_react43.useRef)(0);
-  (0, import_react43.useEffect)(() => {
+  const attempt = (0, import_react44.useRef)(0);
+  (0, import_react44.useEffect)(() => {
     attempt.current += 1;
     if (!isOpen) return;
     setState(
       wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN2 } : { type: "NEEDS_WALLET" }
     );
   }, [isOpen, wallet?.address]);
-  (0, import_react43.useEffect)(
+  (0, import_react44.useEffect)(
     () => () => {
       attempt.current += 1;
     },
     []
   );
-  const onSign = (0, import_react43.useCallback)(() => {
+  const onSign = (0, import_react44.useCallback)(() => {
     if (!wallet || state.type !== "READY") return;
     attempt.current += 1;
     const gen = attempt.current;
@@ -14140,13 +14336,13 @@ function useConnectWalletModalViewModel({
     challengeType,
     statement
   });
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (state.type === "CONNECTED") {
       onConnected?.(state.binding);
       onClose();
     }
   }, [state]);
-  const uiState = (0, import_react44.useMemo)(() => {
+  const uiState = (0, import_react45.useMemo)(() => {
     if (!isOpen || state.type === "CONNECTED") {
       return { type: "hidden" };
     }
@@ -14171,7 +14367,7 @@ function useConnectWalletModalViewModel({
       canRequestConnect
     };
   }, [isOpen, state, onRequestConnect]);
-  const onEvent = (0, import_react44.useCallback)(
+  const onEvent = (0, import_react45.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_CLOSE":
@@ -14212,7 +14408,7 @@ function ConnectWalletModalContainer({
 }
 
 // src/client/hooks/requirements/checklist/useRequirementsChecklistViewModel.ts
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/client/hooks/requirements/checklist/useRequirementsChecklistViewModel.types.ts
 var RequirementItemUi = {
@@ -14266,8 +14462,8 @@ var ChecklistStatus = {
 };
 
 // src/client/hooks/requirements/data/useOptionAddresses.ts
-var import_react45 = require("react");
-var LOADING_STATE5 = { type: "LOADING" };
+var import_react46 = require("react");
+var LOADING_STATE6 = { type: "LOADING" };
 var EMPTY_STATE = {
   type: "CONTENT",
   addresses: []
@@ -14276,19 +14472,19 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useOptionAddresses");
   const { data, enabled = true } = options;
-  const [addressesState, setAddressesState] = (0, import_react45.useState)(
-    data !== void 0 ? { type: "CONTENT", addresses: data } : LOADING_STATE5
+  const [addressesState, setAddressesState] = (0, import_react46.useState)(
+    data !== void 0 ? { type: "CONTENT", addresses: data } : LOADING_STATE6
   );
-  const [fetchKey, setFetchKey] = (0, import_react45.useState)(0);
-  const refetch = (0, import_react45.useCallback)(() => setFetchKey((k) => k + 1), []);
-  const disconnect = (0, import_react45.useCallback)(
+  const [fetchKey, setFetchKey] = (0, import_react46.useState)(0);
+  const refetch = (0, import_react46.useCallback)(() => setFetchKey((k) => k + 1), []);
+  const disconnect = (0, import_react46.useCallback)(
     async (addressId) => {
       await coinlist.wallets.remove({ offerId, addressId });
       refetch();
     },
     [coinlist, offerId, refetch]
   );
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     let isCancelled = false;
     if (!enabled) {
       setAddressesState(
@@ -14300,7 +14496,7 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
     }
     if (!isReady) {
       if (data === void 0) {
-        setAddressesState(LOADING_STATE5);
+        setAddressesState(LOADING_STATE6);
       }
       return () => {
         isCancelled = true;
@@ -14317,7 +14513,7 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
         isCancelled = true;
       };
     }
-    setAddressesState(LOADING_STATE5);
+    setAddressesState(LOADING_STATE6);
     coinlist.wallets.list({ offerId, offerOptionId }).then((addresses) => {
       if (!isCancelled) {
         log.debug(() => ({
@@ -14344,22 +14540,22 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
 }
 
 // src/client/hooks/requirements/data/useRequirements.ts
-var import_react46 = require("react");
-var LOADING_STATE6 = { type: "LOADING" };
+var import_react47 = require("react");
+var LOADING_STATE7 = { type: "LOADING" };
 function useRequirements(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useRequirements");
   const { data } = options;
-  const [requirementsState, setRequirementsState] = (0, import_react46.useState)(
-    data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE6
+  const [requirementsState, setRequirementsState] = (0, import_react47.useState)(
+    data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE7
   );
-  const [fetchKey, setFetchKey] = (0, import_react46.useState)(0);
-  const refetch = (0, import_react46.useCallback)(() => setFetchKey((k) => k + 1), []);
-  (0, import_react46.useEffect)(() => {
+  const [fetchKey, setFetchKey] = (0, import_react47.useState)(0);
+  const refetch = (0, import_react47.useCallback)(() => setFetchKey((k) => k + 1), []);
+  (0, import_react47.useEffect)(() => {
     let isCancelled = false;
     if (!isReady) {
       if (data === void 0) {
-        setRequirementsState(LOADING_STATE6);
+        setRequirementsState(LOADING_STATE7);
       }
       return () => {
         isCancelled = true;
@@ -14376,7 +14572,7 @@ function useRequirements(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setRequirementsState(LOADING_STATE6);
+    setRequirementsState(LOADING_STATE7);
     Promise.all([
       coinlist.requirements.forOffer(offerId),
       coinlist.requirements.statuses(offerId)
@@ -14455,19 +14651,19 @@ function useRequirementsChecklistViewModel(options) {
   const log = useLogger("useRequirementsChecklistViewModel");
   const { coinlist } = useCoinList();
   const { requirementsState, refetch } = useRequirements(offerId, { data });
-  const [expandedId, setExpandedId] = (0, import_react47.useState)(null);
-  const [taxDocumentOpen, setTaxDocumentOpen] = (0, import_react47.useState)(false);
-  const [connectWalletOpen, setConnectWalletOpen] = (0, import_react47.useState)(false);
-  const [verifyingRequirementId, setVerifyingRequirementId] = (0, import_react47.useState)(null);
-  const isMountedRef = (0, import_react47.useRef)(true);
-  (0, import_react47.useEffect)(() => {
+  const [expandedId, setExpandedId] = (0, import_react48.useState)(null);
+  const [taxDocumentOpen, setTaxDocumentOpen] = (0, import_react48.useState)(false);
+  const [connectWalletOpen, setConnectWalletOpen] = (0, import_react48.useState)(false);
+  const [verifyingRequirementId, setVerifyingRequirementId] = (0, import_react48.useState)(null);
+  const isMountedRef = (0, import_react48.useRef)(true);
+  (0, import_react48.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  const [hasWalletRequirement, setHasWalletRequirement] = (0, import_react47.useState)(false);
-  (0, import_react47.useEffect)(() => {
+  const [hasWalletRequirement, setHasWalletRequirement] = (0, import_react48.useState)(false);
+  (0, import_react48.useEffect)(() => {
     if (requirementsState.type === "CONTENT") {
       setHasWalletRequirement(
         (requirementsState.requirements[optionId] ?? []).some(
@@ -14483,14 +14679,14 @@ function useRequirementsChecklistViewModel(options) {
   } = useOptionAddresses(offerId, optionId, {
     enabled: hasWalletRequirement
   });
-  const removeWallet = (0, import_react47.useCallback)(
+  const removeWallet = (0, import_react48.useCallback)(
     async (addressId) => {
       await disconnect(OfferOptionAddressId(addressId));
       refetch();
     },
     [disconnect, refetch]
   );
-  const awaitVerificationResult = (0, import_react47.useCallback)(
+  const awaitVerificationResult = (0, import_react48.useCallback)(
     (requirementId, statusBeforeSubmit) => {
       void (async () => {
         const deadline = Date.now() + VERIFICATION_POLL_TIMEOUT_MS;
@@ -14517,11 +14713,11 @@ function useRequirementsChecklistViewModel(options) {
     },
     [coinlist, offerId, refetch, log]
   );
-  const requirements = (0, import_react47.useMemo)(
+  const requirements = (0, import_react48.useMemo)(
     () => requirementsState.type === "CONTENT" ? requirementsState.requirements[optionId] ?? [] : [],
     [requirementsState, optionId]
   );
-  const statusById = (0, import_react47.useMemo)(() => {
+  const statusById = (0, import_react48.useMemo)(() => {
     if (requirementsState.type !== "CONTENT") {
       return /* @__PURE__ */ new Map();
     }
@@ -14530,7 +14726,7 @@ function useRequirementsChecklistViewModel(options) {
       requirementsState.statuses.filter((s) => ids.has(s.id)).map((s) => [s.id, s])
     );
   }, [requirementsState, requirements]);
-  const state = (0, import_react47.useMemo)(() => {
+  const state = (0, import_react48.useMemo)(() => {
     switch (requirementsState.type) {
       case "LOADING":
         return { type: "loading" };
@@ -14599,7 +14795,7 @@ function useRequirementsChecklistViewModel(options) {
     identityVerificationOptions,
     removeWallet
   ]);
-  const handleRequirementAction = (0, import_react47.useCallback)(
+  const handleRequirementAction = (0, import_react48.useCallback)(
     (requirement) => {
       const inlineVerification = statusById.get(requirement.id)?.kycLevel !== void 0 && onRequirementActionOverride === void 0;
       if (inlineVerification) {
@@ -14631,7 +14827,7 @@ function useRequirementsChecklistViewModel(options) {
       coinlist
     ]
   );
-  const onEvent = (0, import_react47.useCallback)(
+  const onEvent = (0, import_react48.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_TOGGLE_ITEM":
@@ -14939,18 +15135,18 @@ function pinoClientLogger(options) {
 }
 
 // src/client/hooks/auth/useCompleteOAuth.ts
-var import_react48 = require("react");
+var import_react49 = require("react");
 function useCompleteOAuth(options) {
   const { coinlist } = useCoinList();
   const log = useLogger("useCompleteOAuth");
-  const postOAuthCompleteRef = (0, import_react48.useRef)(options.postOAuthComplete);
-  const onFailureRef = (0, import_react48.useRef)(options.onFailure);
-  const onSuccessRef = (0, import_react48.useRef)(options.onSuccess);
+  const postOAuthCompleteRef = (0, import_react49.useRef)(options.postOAuthComplete);
+  const onFailureRef = (0, import_react49.useRef)(options.onFailure);
+  const onSuccessRef = (0, import_react49.useRef)(options.onSuccess);
   postOAuthCompleteRef.current = options.postOAuthComplete;
   onFailureRef.current = options.onFailure;
   onSuccessRef.current = options.onSuccess;
-  const hasStartedExchangeRef = (0, import_react48.useRef)(false);
-  (0, import_react48.useEffect)(() => {
+  const hasStartedExchangeRef = (0, import_react49.useRef)(false);
+  (0, import_react49.useEffect)(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.search);
     if (!params.has("code") && !params.has("error")) return;
@@ -15014,20 +15210,20 @@ function useCompleteOAuth(options) {
 }
 
 // src/client/hooks/checkout/coin-list/token-sale/data/useParticipations.ts
-var import_react49 = require("react");
-var LOADING_STATE7 = { type: "LOADING" };
+var import_react50 = require("react");
+var LOADING_STATE8 = { type: "LOADING" };
 function useParticipations(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useParticipations");
   const { data } = options;
-  const [participationsState, setParticipationsState] = (0, import_react49.useState)(
-    data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE7
+  const [participationsState, setParticipationsState] = (0, import_react50.useState)(
+    data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE8
   );
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     let isCancelled = false;
     if (!isReady) {
       if (data === void 0) {
-        setParticipationsState(LOADING_STATE7);
+        setParticipationsState(LOADING_STATE8);
       }
       return () => {
         isCancelled = true;
@@ -15038,7 +15234,7 @@ function useParticipations(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setParticipationsState(LOADING_STATE7);
+    setParticipationsState(LOADING_STATE8);
     coinlist.tokenSale.list(offerId).then((participations) => {
       if (!isCancelled) {
         log.debug(() => ({
@@ -15065,20 +15261,20 @@ function useParticipations(offerId, options = {}) {
 }
 
 // src/client/hooks/offers/data/useOfferDetails.ts
-var import_react50 = require("react");
-var LOADING_STATE8 = { type: "LOADING" };
+var import_react51 = require("react");
+var LOADING_STATE9 = { type: "LOADING" };
 function useOfferDetails(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useOfferDetails");
   const { data } = options;
-  const [offerDetailsState, setOfferDetailsState] = (0, import_react50.useState)(
-    data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE8
+  const [offerDetailsState, setOfferDetailsState] = (0, import_react51.useState)(
+    data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE9
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let isCancelled = false;
     if (!isReady) {
       if (data === void 0) {
-        setOfferDetailsState(LOADING_STATE8);
+        setOfferDetailsState(LOADING_STATE9);
       }
       return () => {
         isCancelled = true;
@@ -15089,7 +15285,7 @@ function useOfferDetails(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setOfferDetailsState(LOADING_STATE8);
+    setOfferDetailsState(LOADING_STATE9);
     coinlist.offers.get(offerId).then((offerDetail) => {
       if (!isCancelled) {
         log.debug(() => ({
@@ -15129,66 +15325,6 @@ var OfferAssetCardUi = {
   })
 };
 
-// src/client/hooks/tokens/data/useTokenMetadata.ts
-var import_react51 = require("react");
-var DISABLED_STATE = { type: "DISABLED" };
-var LOADING_STATE9 = { type: "LOADING" };
-function useTokenMetadata(options) {
-  const { chain, address, data, enabled = true } = options;
-  const { coinlist, isReady } = useCoinList();
-  const log = useLogger("useTokenMetadata");
-  const [state, setState] = (0, import_react51.useState)(
-    () => data !== void 0 ? { type: "CONTENT", tokenMetadata: data } : LOADING_STATE9
-  );
-  const [refetchCount, setRefetchCount] = (0, import_react51.useState)(0);
-  const refetch = (0, import_react51.useCallback)(() => {
-    setRefetchCount((count) => count + 1);
-  }, []);
-  (0, import_react51.useEffect)(() => {
-    let isCancelled = false;
-    const seedActive = data !== void 0 && refetchCount === 0;
-    if (!isReady || !enabled || seedActive) {
-      return () => {
-        isCancelled = true;
-      };
-    }
-    setState(LOADING_STATE9);
-    coinlist.tokens.get({ chain, address }).then((tokenMetadata) => {
-      if (!isCancelled) {
-        log.debug(() => ({
-          msg: "settled",
-          fields: {
-            state: "CONTENT",
-            listed: tokenMetadata !== null,
-            symbol: tokenMetadata?.symbol ?? null
-          }
-        }));
-        setState({ type: "CONTENT", tokenMetadata });
-      }
-    }).catch((error) => {
-      if (!isCancelled) {
-        log.failure(
-          () => ({
-            msg: "settled",
-            fields: { state: "ERROR", reason: "generic-error" }
-          }),
-          error
-        );
-        setState({ type: "ERROR", reason: "generic-error" });
-      }
-    });
-    return () => {
-      isCancelled = true;
-    };
-  }, [coinlist, isReady, enabled, chain, address, data, refetchCount, log]);
-  return {
-    // LOADING would be a lie while disabled: nothing is in flight and nothing
-    // will replace it. Settled states (a seed, a previous answer) survive.
-    state: !enabled && state.type === "LOADING" ? DISABLED_STATE : state,
-    refetch
-  };
-}
-
 // src/client/ui/format/date.ts
 function formatMonthYear(date, locale) {
   return new Intl.DateTimeFormat(locale, {
@@ -15278,7 +15414,9 @@ function formatMonthYear(date, locale) {
   formatCountdown,
   formatMonthYear,
   formatSaleCardCountdown,
+  offerAssetIconUrl,
   offerIconUrl,
+  offerTokenIdentifier,
   ondoLoadErrorReason,
   pinoClientLogger,
   prepareOndoBuy,
@@ -15287,6 +15425,9 @@ function formatMonthYear(date, locale) {
   quoteOverAsks,
   stablecoinIconUrl,
   submitErc20Approval,
+  tokenLogoUrl,
+  tokenMetadataOf,
+  useCheckoutOfferTokenMetadata,
   useCoinList,
   useCoinListSignInCardViewModel,
   useCompleteOAuth,