From 4b8a1097c0a9be4fbe08c1bf406ad604a8c83607 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Riquelme=20Guzm=C3=A1n?=
 <nrriquelme@gmail.com>
Date: Fri, 29 Sep 2023 20:17:06 -0300
Subject: [PATCH] chore: chronos and base icons and minor fixes for this
 networks

---
 .github/workflows/cf-deploy-test.yml |  2 +-
 public/assets/icons/base.svg         |  4 ++++
 public/assets/icons/cronos.svg       | 16 ++++++++++++++++
 src/pages/DetailView/DetailView.tsx  |  8 ++++----
 src/types/explorer.ts                |  1 +
 src/utils/Helpers.tsx                |  8 ++++++++
 6 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 public/assets/icons/base.svg
 create mode 100644 public/assets/icons/cronos.svg

diff --git a/.github/workflows/cf-deploy-test.yml b/.github/workflows/cf-deploy-test.yml
index 102321a..1c5e2bf 100644
--- a/.github/workflows/cf-deploy-test.yml
+++ b/.github/workflows/cf-deploy-test.yml
@@ -20,7 +20,7 @@ jobs:
         env:
           VITE_INDEXER_URL: "https://api.test.buildwithsygma.com"
           VITE_SHARED_CONFIG_URL: "https://chainbridge-assets-stage.s3.us-east-2.amazonaws.com/shared-config-test.json"
-          VITE_EXPLORER_URLS: '[{ "id": 1, "url": "https://goerli.etherscan.io" }, { "id": 2, "url": "https://sepolia.etherscan.io" }]'
+          VITE_EXPLORER_URLS: '[{ "id": 1, "url": "https://goerli.etherscan.io" }, { "id": 2, "url": "https://sepolia.etherscan.io" }, { "id": 4, "url": "https://base-goerli.blockscout.com" }, { "id": 5,  "url": "https://explorer.cronos.org/testnet" }]'
       - name: Publish to Cloudflare Pages
         uses: cloudflare/pages-action@1
         with:
diff --git a/public/assets/icons/base.svg b/public/assets/icons/base.svg
new file mode 100644
index 0000000..9fc6d5b
--- /dev/null
+++ b/public/assets/icons/base.svg
@@ -0,0 +1,4 @@
+<svg width="146" height="146" viewBox="0 0 146 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="73" cy="73" r="73" fill="#0052FF"/>
+<path d="M73.323 123.729C101.617 123.729 124.553 100.832 124.553 72.5875C124.553 44.343 101.617 21.4463 73.323 21.4463C46.4795 21.4463 24.4581 42.0558 22.271 68.2887H89.9859V76.8864H22.271C24.4581 103.119 46.4795 123.729 73.323 123.729Z" fill="white"/>
+</svg>
diff --git a/public/assets/icons/cronos.svg b/public/assets/icons/cronos.svg
new file mode 100644
index 0000000..2aa366b
--- /dev/null
+++ b/public/assets/icons/cronos.svg
@@ -0,0 +1,16 @@
+<svg width="52" height="60" viewBox="0 0 52 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.84 1.90735e-06L-1.52588e-05 14.92V44.75L25.84 59.66L51.66 44.75V14.92L25.84 1.90735e-06ZM44.01 40.33L25.84 50.82L7.65999 40.33V19.33L25.84 8.84L44.01 19.33V40.33Z" fill="#002D74"/>
+<path style="mix-blend-mode:multiply" d="M25.84 59.66L51.66 44.75V14.92L25.84 1.90735e-06V8.84999L44.01 19.34V40.34L25.84 50.82V59.66Z" fill="url(#paint0_linear)"/>
+<path style="mix-blend-mode:multiply" d="M25.82 0L0 14.91L0 44.74L25.82 59.66V50.81L7.64999 40.32V19.32L25.82 8.84V0Z" fill="url(#paint1_linear)"/>
+<path d="M37.89 36.8L25.83 43.76L13.76 36.8V22.87L25.83 15.9L37.89 22.87L32.87 25.77L25.83 21.7L18.79 25.77V33.89L25.83 37.96L32.87 33.89L37.89 36.8Z" fill="#002D74"/>
+<defs>
+<linearGradient id="paint0_linear" x1="38.75" y1="59.66" x2="38.75" y2="29.83" gradientUnits="userSpaceOnUse">
+<stop stop-color="#002D74"/>
+<stop offset="1" stop-color="#002D74" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="12.91" y1="0" x2="12.91" y2="29.83" gradientUnits="userSpaceOnUse">
+<stop stop-color="#002D74"/>
+<stop offset="1" stop-color="#002D74" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/pages/DetailView/DetailView.tsx b/src/pages/DetailView/DetailView.tsx
index 497a478..b51e5e2 100644
--- a/src/pages/DetailView/DetailView.tsx
+++ b/src/pages/DetailView/DetailView.tsx
@@ -168,14 +168,14 @@ export default function DetailView() {
                 }}
                 to={
                   fromDomainInfo!.type !== "evm"
-                    ? `${fromDomainExplorerUrl?.url}/account/${transfer?.sender}`
-                    : `${fromDomainExplorerUrl?.url}/address/${transfer?.sender}`
+                    ? `${fromDomainExplorerUrl?.url}/account/${transfer?.accountId}`
+                    : `${fromDomainExplorerUrl?.url}/address/${transfer?.accountId}`
                 }
               >
-                {transfer?.sender}
+                {transfer?.accountId}
               </Link>
             ) : (
-              <>{transfer?.sender}</>
+              <>{transfer?.accountId}</>
             )}
           </span>
         </div>
diff --git a/src/types/explorer.ts b/src/types/explorer.ts
index 82294d4..a9a67a6 100644
--- a/src/types/explorer.ts
+++ b/src/types/explorer.ts
@@ -102,6 +102,7 @@ export type Transfer = {
   fee: { amount: string; tokenAddress: string; tokenSymbol: string }
   resourceID: string
   usdValue: number
+  accountId: string
 }
 
 export type ExplorerState = {
diff --git a/src/utils/Helpers.tsx b/src/utils/Helpers.tsx
index 7e45f7a..841f0ee 100644
--- a/src/utils/Helpers.tsx
+++ b/src/utils/Helpers.tsx
@@ -95,6 +95,10 @@ export const getNetworkNames = (chainId: number): string => {
       return "Khala"
     case 5233:
       return "Phala"
+    case 84531:
+      return "Base"
+    case 338:
+      return "Cronos"
     default:
       return "Ethereum"
   }
@@ -218,6 +222,10 @@ export const renderNetworkIcon = (chainId: number, classes: Record<"networkIcon"
       return <img src={`/assets/icons/phala-black.svg`} alt="substrate" className={classes.substrateNetworkIcon} />
     case 5232:
       return <img src={`/assets/icons/khala.svg`} alt="substrate" className={classes.substrateNetworkIcon} />
+    case 84531:
+      return <img src={`/assets/icons/base.svg`} alt="base" className={classes.networkIcon} />
+    case 338:
+      return <img src={`/assets/icons/cronos.svg`} alt="cronos" className={classes.networkIcon} />
     default:
       return <img src={`/assets/icons/all.svg`} alt="ethereum" className={classes.networkIcon} />
   }