Price & token sources: list, order and extend where Sage reads prices

src/components/AdvancedTransactionSummary.tsx

@@ -1,10 +1,11 @@
 import { fromMojos, toDecimal } from '@/lib/utils';
+import { useAssetLabel } from '@/hooks/useAssetLabel';
 import { useWalletState } from '@/state';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import BigNumber from 'bignumber.js';
 import { BadgeMinus, BadgePlus, BoxIcon, ForwardIcon } from 'lucide-react';
-import { TransactionSummary, Unit } from '../bindings';
+import { Asset, TransactionSummary, Unit } from '../bindings';
 import { formatNumber } from '../i18n';
 import { AddressLabels } from './AddressLabels';
 import { Badge } from './ui/badge';
@@ -33,10 +34,12 @@ export function AdvancedTransactionSummary({
   summary,
 }: AdvancedTransactionSummaryProps) {
   const walletState = useWalletState();
+  const label = useAssetLabel();
 
   const { spent, created } = calculateTransaction(
     walletState.sync.unit,
     summary,
+    label,
   );
 
   return (
@@ -135,11 +138,16 @@ export interface CalculatedTransaction {
 export function calculateTransaction(
   xch: Unit,
   summary: TransactionSummary,
+  // Shows an unnamed CAT with a token index's suggested label (useAssetLabel).
+  label?: (asset: Asset) => Asset,
 ): CalculatedTransaction {
   const spent: SpentCoin[] = [];
   const created: CreatedCoin[] = [];
+  const inputs = (summary.inputs || []).map((input) =>
+    input.asset && label ? { ...input, asset: label(input.asset) } : input,
+  );
 
-  for (const input of summary.inputs || []) {
+  for (const input of inputs) {
     if (input.asset && !input.asset.asset_id) {
       spent.push({
         badge: 'Chia',
@@ -153,7 +161,7 @@ export function calculateTransaction(
       });
 
       for (const output of input.outputs) {
-        if (summary.inputs.find((i) => i.coin_id === output.coin_id)) {
+        if (inputs.find((i) => i.coin_id === output.coin_id)) {
           continue;
         }
 
@@ -189,7 +197,7 @@ export function calculateTransaction(
       });
 
       for (const output of input.outputs) {
-        if (summary.inputs.find((i) => i.coin_id === output.coin_id)) {
+        if (inputs.find((i) => i.coin_id === output.coin_id)) {
           continue;
         }
 
@@ -212,7 +220,7 @@ export function calculateTransaction(
 
     if (input.asset?.kind === 'did') {
       if (
-        !summary.inputs
+        !inputs
           .map((i) => i.outputs)
           .flat()
           .find((o) => o.coin_id === input.coin_id)
@@ -226,7 +234,7 @@ export function calculateTransaction(
       }
 
       for (const output of input.outputs) {
-        if (summary.inputs.find((i) => i.coin_id === output.coin_id)) {
+        if (inputs.find((i) => i.coin_id === output.coin_id)) {
           continue;
         }
 
@@ -247,7 +255,7 @@ export function calculateTransaction(
 
     if (input.asset?.kind === 'nft') {
       if (
-        !summary.inputs
+        !inputs
           .map((i) => i.outputs)
           .flat()
           .find((o) => o.coin_id === input.coin_id)
@@ -261,7 +269,7 @@ export function calculateTransaction(
       }
 
       for (const output of input.outputs) {
-        if (summary.inputs.find((i) => i.coin_id === output.coin_id)) {
+        if (inputs.find((i) => i.coin_id === output.coin_id)) {
           continue;
         }
 
@@ -282,7 +290,7 @@ export function calculateTransaction(
 
     if (input.asset?.kind === 'option') {
       if (
-        !summary.inputs
+        !inputs
           .map((i) => i.outputs)
           .flat()
           .find((o) => o.coin_id === input.coin_id)
@@ -296,7 +304,7 @@ export function calculateTransaction(
       }
 
       for (const output of input.outputs) {
-        if (summary.inputs.find((i) => i.coin_id === output.coin_id)) {
+        if (inputs.find((i) => i.coin_id === output.coin_id)) {
           continue;
         }
 

src/components/AssetCoin.tsx

@@ -3,6 +3,7 @@ import { AddressLabels } from '@/components/AddressLabels';
 import { AssetIcon } from '@/components/AssetIcon';
 import { CopyButton } from '@/components/CopyButton';
 import { NumberFormat } from '@/components/NumberFormat';
+import { useAssetLabel } from '@/hooks/useAssetLabel';
 import { useNetwork } from '@/hooks/useNetwork';
 import { spacescanCoinUrl } from '@/lib/urls';
 import { formatAddress, fromMojos, getAssetDisplayName } from '@/lib/utils';
@@ -53,7 +54,9 @@ interface AssetAmountProps {
   amount: Amount;
 }
 
-function AssetAmount({ asset, amount }: AssetAmountProps) {
+function AssetAmount({ asset: walletAsset, amount }: AssetAmountProps) {
+  // An unnamed CAT shows a token index's suggested label, as on the token list.
+  const asset = useAssetLabel()(walletAsset);
   const name = getAssetDisplayName(asset.name, asset.ticker, asset.kind);
 
   return (

src/components/Assets.tsx

@@ -1,5 +1,6 @@
 import { OfferAsset } from '@/bindings';
 import { NumberFormat } from '@/components/NumberFormat';
+import { useAssetLabel } from '@/hooks/useAssetLabel';
 import { formatTimestamp, fromMojos } from '@/lib/utils';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
@@ -28,9 +29,15 @@ export interface AssetsProps {
 }
 
 export function Assets({ assets, catPresence = {} }: AssetsProps) {
+  // Unnamed CATs show a token index's suggested label, as on the token list.
+  const label = useAssetLabel();
+  const shown = assets.map((entry) => ({
+    ...entry,
+    asset: label(entry.asset),
+  }));
   return (
     <div className='flex flex-col gap-3'>
-      {assets.map(
+      {shown.map(
         ({
           asset,
           amount,

src/components/ConfirmationDialog.tsx

@@ -8,6 +8,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { LoadingButton } from '@/components/ui/loading-button';
+import { useAssetLabel } from '@/hooks/useAssetLabel';
 import { useBiometric } from '@/hooks/useBiometric';
 import { useErrors } from '@/hooks/useErrors';
 import { useWallet } from '@/contexts/WalletContext';
@@ -67,6 +68,7 @@ export default function ConfirmationDialog({
   showRecipientDetails = true,
 }: ConfirmationDialogProps) {
   const walletState = useWalletState();
+  const label = useAssetLabel();
   const ticker = walletState.sync.unit.ticker;
 
   const { addError } = useErrors();
@@ -99,7 +101,7 @@ export default function ConfirmationDialog({
   };
 
   const { spent, created } = response
-    ? calculateTransaction(walletState.sync.unit, response.summary)
+    ? calculateTransaction(walletState.sync.unit, response.summary, label)
     : { spent: [], created: [] };
   const fee = BigNumber(response?.summary.fee || 0);
   const handles = response?.summary.handles ?? [];

src/components/OfferSummaryCard.tsx

@@ -1,5 +1,6 @@
 import { OfferAsset, OfferRecord } from '@/bindings';
 import { NumberFormat } from '@/components/NumberFormat';
+import { useAssetLabel } from '@/hooks/useAssetLabel';
 import { formatTimestamp, fromMojos, getOfferStatus } from '@/lib/utils';
 import { t } from '@lingui/core/macro';
 import BigNumber from 'bignumber.js';
@@ -71,10 +72,16 @@ interface AssetPreviewProps {
 }
 
 function AssetPreview({ label, assets }: AssetPreviewProps) {
+  // Unnamed CATs show a token index's suggested label, as on the token list.
+  const suggest = useAssetLabel();
+  const shown = assets.map((entry) => ({
+    ...entry,
+    asset: suggest(entry.asset),
+  }));
   return (
     <div className='flex flex-col gap-1 w-[125px] lg:w-[200px] xl:w-[300px]'>
       <div>{label}</div>
-      {assets.map(({ amount, royalty, asset, nft_metadata_updater_kind }) => (
+      {shown.map(({ amount, royalty, asset, nft_metadata_updater_kind }) => (
         <div className='flex items-center gap-2' key={asset.asset_id ?? 'xch'}>
           <AssetIcon asset={asset} size='md' />
           <div className='text-sm text-muted-foreground truncate'>

src/components/TokenCard.tsx

@@ -49,6 +49,11 @@ import { Separator } from './ui/separator';
 
 interface TokenCardProps {
   asset: TokenRecord;
+  /**
+   * What to show for the ticker and icon, such as a token index's suggestion.
+   * Edits always start from, and save, `asset`, the wallet's own record.
+   */
+  display?: TokenRecord;
   balanceInUsd: string;
   onRedownload: () => void;
   onVisibilityChange: (visible: boolean) => void;
@@ -57,11 +62,13 @@ interface TokenCardProps {
 
 export function TokenCard({
   asset,
+  display,
   balanceInUsd,
   onRedownload,
   onVisibilityChange,
   onUpdate,
 }: TokenCardProps) {
+  const shown = display ?? asset;
   const walletState = useWalletState();
   const navigate = useNavigate();
   const { isTestnet } = useNetwork();
@@ -103,10 +110,10 @@ export function TokenCard({
                 />
                  
               </span>
-              {asset?.ticker ?? 'CAT'}
+              {shown?.ticker ?? 'CAT'}
             </div>
             <div className='flex-shrink-0'>
-              <AssetIcon asset={{ ...asset, kind: 'token' }} size='md' />
+              <AssetIcon asset={{ ...shown, kind: 'token' }} size='md' />
             </div>
           </div>
           <div className='text-base text-muted-foreground'>