From 24207a825ad1e6431c407590e1b2e64e2e2699d9 Mon Sep 17 00:00:00 2001
From: Rosco Kalis <roscokalis@gmail.com>
Date: Sun, 14 Jul 2024 13:00:02 +0300
Subject: [PATCH] Small fix to asset display

---
 src/components/common/AssetDisplay.tsx        | 24 +++++++++++++++++++
 .../confirm/common/BypassWarning.tsx          |  2 +-
 .../allowance/AllowanceAsset.tsx              | 15 ++++--------
 .../warning-types/listing/ListingAsset.tsx    | 19 ++++++---------
 src/components/popup/routes/AboutPage.tsx     |  2 +-
 src/i18n/locales/en/translation.json          |  3 ++-
 src/i18n/locales/es/translation.json          |  3 ++-
 src/i18n/locales/ja/translation.json          |  3 ++-
 src/i18n/locales/ru/translation.json          |  3 ++-
 src/i18n/locales/zh_CN/translation.json       |  3 ++-
 10 files changed, 48 insertions(+), 29 deletions(-)
 create mode 100644 src/components/common/AssetDisplay.tsx

diff --git a/src/components/common/AssetDisplay.tsx b/src/components/common/AssetDisplay.tsx
new file mode 100644
index 0000000..f947ab1
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/confirm/common/BypassWarning.tsx b/src/components/confirm/common/BypassWarning.tsx
index 2b579d5..bc57537 100644
--- a/src/components/confirm/common/BypassWarning.tsx
+++ b/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 = () => {
diff --git a/src/components/confirm/warning-types/allowance/AllowanceAsset.tsx b/src/components/confirm/warning-types/allowance/AllowanceAsset.tsx
index 6417532..efb58cf 100644
--- a/src/components/confirm/warning-types/allowance/AllowanceAsset.tsx
+++ b/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>
   );
 };
diff --git a/src/components/confirm/warning-types/listing/ListingAsset.tsx b/src/components/confirm/warning-types/listing/ListingAsset.tsx
index 2ad7f36..1c76173 100644
--- a/src/components/confirm/warning-types/listing/ListingAsset.tsx
+++ b/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>
   );
diff --git a/src/components/popup/routes/AboutPage.tsx b/src/components/popup/routes/AboutPage.tsx
index 0e0ef0a..80906aa 100644
--- a/src/components/popup/routes/AboutPage.tsx
+++ b/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';
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index e54107c..7cedcae 100644
--- a/src/i18n/locales/en/translation.json
+++ b/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",
diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
index f06d457..73eae58 100644
--- a/src/i18n/locales/es/translation.json
+++ b/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",
diff --git a/src/i18n/locales/ja/translation.json b/src/i18n/locales/ja/translation.json
index ef01d65..4e72abc 100644
--- a/src/i18n/locales/ja/translation.json
+++ b/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": "スペンダー",
diff --git a/src/i18n/locales/ru/translation.json b/src/i18n/locales/ru/translation.json
index 8631004..f768358 100644
--- a/src/i18n/locales/ru/translation.json
+++ b/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",
diff --git a/src/i18n/locales/zh_CN/translation.json b/src/i18n/locales/zh_CN/translation.json
index 90608b3..7db356f 100644
--- a/src/i18n/locales/zh_CN/translation.json
+++ b/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": "支出者",