Small fix to asset display

src/components/common/AssetDisplay.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Address } from 'viem';
+import { shortenAddress } from '../../lib/utils/formatting';
+import { useTranslations } from '../../i18n';
+
+interface Props {
+  name?: string;
+  symbol?: string;
+  address?: Address;
+}
+
+export const AssetDisplay = ({ name, symbol, address }: Props) => {
+  const t = useTranslations();
+
+  const primaryDisplay = name || symbol || t('common.unknown_asset');
+  const secondaryDisplay = name ? symbol : symbol ? undefined : shortenAddress(address);
+
+  return (
+    <div className="flex gap-2">
+      <div>{primaryDisplay}</div>
+      <div className="text-neutral-400 dark:text-neutral-500">{secondaryDisplay}</div>
+    </div>
+  );
+};

src/components/confirm/common/BypassWarning.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslations } from 'use-intl';
+import { useTranslations } from '../../../i18n';
 import InfoBlock from './InfoBlock';
 
 const BypassWarning = () => {

src/components/confirm/warning-types/allowance/AllowanceAsset.tsx

@@ -4,6 +4,7 @@ import { Address } from 'viem';
 import { getTokenData } from '../../../../lib/utils/tokens';
 import { AddressOrDisplay } from '../../../common/AddressOrDisplay';
 import Loadable from '../../../common/Loadable';
+import { AssetDisplay } from '../../../common/AssetDisplay';
 
 interface Props {
   chainId: number;
@@ -14,18 +15,12 @@ interface Props {
 const AllowanceAsset = ({ address, chainId }: Props) => {
   const { result, loading, error } = useAsync(() => getTokenData(address, chainId), []);
 
-  const { name, symbol } = result ?? {};
-  const fullDisplay = (
-    <div className="flex gap-2">
-      <div>{name}</div>
-      <div className="text-neutral-400 dark:text-neutral-500">{symbol}</div>
-    </div>
-  );
-  const assetDisplay = name && symbol ? fullDisplay : name || symbol;
-
   return (
     <Loadable loading={loading} error={error}>
-      <AddressOrDisplay address={address} display={assetDisplay} />
+      <AddressOrDisplay
+        address={address}
+        display={<AssetDisplay name={result?.name} symbol={result?.symbol} address={address} />}
+      />
     </Loadable>
   );
 };

src/components/confirm/warning-types/listing/ListingAsset.tsx

@@ -5,6 +5,7 @@ import { getNftListingItemTokenData } from '../../../../lib/utils/tokens';
 import { AddressOrDisplay } from '../../../common/AddressOrDisplay';
 import KeyValue from '../../../common/KeyValue';
 import Loadable from '../../../common/Loadable';
+import { AssetDisplay } from '../../../common/AssetDisplay';
 
 interface Props {
   chainId: number;
@@ -13,22 +14,16 @@ interface Props {
 
 const ListingAsset = ({ item, chainId }: Props) => {
   const { result, loading, error } = useAsync(() => getNftListingItemTokenData(item, chainId), []);
-
-  const { name, symbol } = result?.asset ?? {};
-  const fullDisplay = (
-    <div className="flex gap-2">
-      <div>{name}</div>
-      <div className="text-neutral-400 dark:text-neutral-500">{symbol}</div>
-    </div>
-  );
-
-  const assetDisplay = name && symbol ? fullDisplay : name || symbol;
+  const { asset, specification } = result ?? {};
 
   return (
     <Loadable loading={loading} error={error}>
       <KeyValue>
-        <AddressOrDisplay address={result?.asset?.address} display={assetDisplay} />
-        {result?.specification}
+        <AddressOrDisplay
+          address={asset?.address}
+          display={<AssetDisplay name={asset?.name} symbol={asset?.symbol} address={asset?.address} />}
+        />
+        {specification}
       </KeyValue>
     </Loadable>
   );

src/components/popup/routes/AboutPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslations } from 'use-intl';
+import { useTranslations } from '../../../i18n';
 import Browser from 'webextension-polyfill';
 import { Urls } from '../../../lib/constants';
 import ExternalLink from '../../common/ExternalLink';

src/i18n/locales/en/translation.json

@@ -5,7 +5,8 @@
     "continue": "Continue",
     "dismiss": "Dismiss",
     "error_occurred": "An error occurred while trying to create a Revoke.cash popup. Please reach out about this in our <discord-link>Discord</discord-link>.",
-    "reject": "Reject"
+    "reject": "Reject",
+    "unknown_asset": "Unknown Asset"
   },
   "confirm_allowance": {
     "spender": "Spender",

src/i18n/locales/es/translation.json

@@ -5,7 +5,8 @@
     "continue": "Continuar",
     "dismiss": "Descartar",
     "error_occurred": "Se ha producido un error al intentar crear una ventana emergente de Revoke.cash. Por favor comunícate con nosotros en nuestro <discord-link>Discord</discord-link>.",
-    "reject": "Rechazar"
+    "reject": "Rechazar",
+    "unknown_asset": "Activo desconocido"
   },
   "confirm_allowance": {
     "spender": "Gastador",

src/i18n/locales/ja/translation.json

@@ -5,7 +5,8 @@
     "continue": "続ける",
     "dismiss": "却下する",
     "error_occurred": "Revoke.cashのポップアップを作成しようとした際にエラーが発生しました。私たちの<discord-link>Discord</discord-link>を参照ください。",
-    "reject": "却下"
+    "reject": "却下",
+    "unknown_asset": "不明な資産"
   },
   "confirm_allowance": {
     "spender": "スペンダー",

src/i18n/locales/ru/translation.json

@@ -5,7 +5,8 @@
     "continue": "Продолжить",
     "dismiss": "ОК",
     "error_occurred": "Произошла ошибка при попытке создать всплывающее окно Revoke.cash. Пожалуйста, расскажите об этом в нашем <discord-link>Discord</discord-link>.",
-    "reject": "Отклонить"
+    "reject": "Отклонить",
+    "unknown_asset": "Неизвестный актив"
   },
   "confirm_allowance": {
     "spender": "Spender",

src/i18n/locales/zh_CN/translation.json

@@ -5,7 +5,8 @@
     "continue": "继续",
     "dismiss": "取消",
     "error_occurred": "如果你在尝试创建 Revoke.cash 弹出窗口时出错。请在 <discord-link>Discord</discord-link> 中联系我们。",
-    "reject": "拒绝"
+    "reject": "拒绝",
+    "unknown_asset": "未知资产"
   },
   "confirm_allowance": {
     "spender": "支出者",