From 83d83447b6f241740d3fdd1c3b78f99a01b3f5c9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 13 Oct 2022 07:42:10 +0100
Subject: [PATCH] space saving tweaks for asset teaser (#1742)

---
 src/@hooks/useNetworkMetadata/utils.ts              | 11 +++++++----
 src/components/@shared/AssetTeaser/index.module.css |  2 +-
 src/components/@shared/AssetTeaser/index.tsx        |  4 +++-
 src/components/@shared/NetworkName/NetworkIcon.tsx  |  2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/@hooks/useNetworkMetadata/utils.ts b/src/@hooks/useNetworkMetadata/utils.ts
index f3ec518f1..c97dcdc2e 100644
--- a/src/@hooks/useNetworkMetadata/utils.ts
+++ b/src/@hooks/useNetworkMetadata/utils.ts
@@ -32,22 +32,25 @@ export function getNetworkDisplayName(
       displayName = 'Polygon'
       break
     case 1287:
-      displayName = 'Moonbase Alpha'
+      displayName = 'Moonbase'
       break
     case 1285:
       displayName = 'Moonriver'
       break
     case 80001:
-      displayName = 'Polygon Mumbai'
+      displayName = 'Mumbai'
       break
     case 8996:
       displayName = 'Development'
       break
     case 3:
-      displayName = 'ETH Ropsten'
+      displayName = 'Ropsten'
+      break
+    case 5:
+      displayName = 'Görli'
       break
     case 2021000:
-      displayName = 'GAIA-X Testnet'
+      displayName = 'GAIA-X'
       break
     default:
       displayName = data
diff --git a/src/components/@shared/AssetTeaser/index.module.css b/src/components/@shared/AssetTeaser/index.module.css
index 9069d7647..ca468094f 100644
--- a/src/components/@shared/AssetTeaser/index.module.css
+++ b/src/components/@shared/AssetTeaser/index.module.css
@@ -51,7 +51,7 @@
   font-size: var(--font-size-mini);
   display: inline-block;
   border-left: 1px solid var(--border-color);
-  padding-left: calc(var(--spacer) / 3.5);
+  padding-left: calc(var(--spacer) / 4);
   margin-left: calc(var(--spacer) / 4);
 }
 
diff --git a/src/components/@shared/AssetTeaser/index.tsx b/src/components/@shared/AssetTeaser/index.tsx
index 4099b4137..f0db24936 100644
--- a/src/components/@shared/AssetTeaser/index.tsx
+++ b/src/components/@shared/AssetTeaser/index.tsx
@@ -39,7 +39,9 @@ export default function AssetTeaser({
               type={type}
               accessType={accessType}
             />
-            <span className={styles.typeLabel}>{datatokens[0]?.symbol}</span>
+            <span className={styles.typeLabel}>
+              {datatokens[0]?.symbol.substring(0, 9)}
+            </span>
             <NetworkName
               networkId={asset.chainId}
               className={styles.typeLabel}
diff --git a/src/components/@shared/NetworkName/NetworkIcon.tsx b/src/components/@shared/NetworkName/NetworkIcon.tsx
index 5af785ca9..55dc360e1 100644
--- a/src/components/@shared/NetworkName/NetworkIcon.tsx
+++ b/src/components/@shared/NetworkName/NetworkIcon.tsx
@@ -9,7 +9,7 @@ import styles from './index.module.css'
 export function NetworkIcon({ name }: { name: string }): ReactElement {
   const IconMapped = name.includes('ETH')
     ? EthIcon
-    : name.includes('Polygon')
+    : name.includes('Polygon') || name.includes('Mumbai')
     ? PolygonIcon
     : name.includes('Moon')
     ? MoonbeamIcon