From c167cf0cd73cc5bfbe907543f92f1c91c7838db0 Mon Sep 17 00:00:00 2001
From: trajan0x <83933037+trajan0x@users.noreply.github.com>
Date: Mon, 7 Oct 2024 11:37:01 -0400
Subject: [PATCH] Add Routes Component [slt-317] (#3226)

* Revert "Hide Routes component (#3225)"

This reverts commit b93ba4b6f4db964f987acde9082e1b35d700ad25.

* Fixes img height width bug

* Refactor for checks, already imported value

---------

Co-authored-by: Trajan0x <trajan0x@users.noreply.github.com>
Co-authored-by: abtestingalpha <abtestingalpha@gmail.com>
---
 docs/bridge/docs/01-About/03-Routes.md        |  7 +++++
 ...{04-Sample-Code.md => 04-Code-Examples.md} |  4 +--
 .../docs/02-Bridge/05-Supported-Routes.md     | 14 ----------
 .../docs/02-Bridge/_05-Supported-Routes.md    | 17 ------------
 docs/bridge/docs/02-Bridge/index.md           |  2 +-
 docs/bridge/src/components/Routes.tsx         | 26 +++++--------------
 6 files changed, 17 insertions(+), 53 deletions(-)
 create mode 100644 docs/bridge/docs/01-About/03-Routes.md
 rename docs/bridge/docs/02-Bridge/{04-Sample-Code.md => 04-Code-Examples.md} (99%)
 delete mode 100644 docs/bridge/docs/02-Bridge/05-Supported-Routes.md
 delete mode 100644 docs/bridge/docs/02-Bridge/_05-Supported-Routes.md

diff --git a/docs/bridge/docs/01-About/03-Routes.md b/docs/bridge/docs/01-About/03-Routes.md
new file mode 100644
index 0000000000..5a6f844eb6
--- /dev/null
+++ b/docs/bridge/docs/01-About/03-Routes.md
@@ -0,0 +1,7 @@
+import Routes from '@site/src/components/Routes'
+
+# Chains & Tokens
+
+This page contains a list of supported tokens, listed per-chain. For a given pair, use the [Synapse Bridge](https://synapseprotocol.com) to see if a route between them exists.
+
+<Routes />
diff --git a/docs/bridge/docs/02-Bridge/04-Sample-Code.md b/docs/bridge/docs/02-Bridge/04-Code-Examples.md
similarity index 99%
rename from docs/bridge/docs/02-Bridge/04-Sample-Code.md
rename to docs/bridge/docs/02-Bridge/04-Code-Examples.md
index ca625344a3..1816550110 100644
--- a/docs/bridge/docs/02-Bridge/04-Sample-Code.md
+++ b/docs/bridge/docs/02-Bridge/04-Code-Examples.md
@@ -1,8 +1,8 @@
 ---
-sidebar_label: Sample Code
+sidebar_label: Examples
 ---
 
-# Sample Code
+# Example Code
 
 Example SDK & API implementations
 
diff --git a/docs/bridge/docs/02-Bridge/05-Supported-Routes.md b/docs/bridge/docs/02-Bridge/05-Supported-Routes.md
deleted file mode 100644
index f47a6918f2..0000000000
--- a/docs/bridge/docs/02-Bridge/05-Supported-Routes.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-sidebar_label: Supported Rotues
----
-
-# Supported Routes
-
-Use the [Synapse Bridge](https://synapseprotocol.com) to browse supported tokens and chains.
-
-:::tip Routes
-
-Route availability is determined by the amount you wish to bridge. Use the [Synapse Bridge](https://synapseprotocol.com) to see if a route between a given pair exists.
-
-:::
-
diff --git a/docs/bridge/docs/02-Bridge/_05-Supported-Routes.md b/docs/bridge/docs/02-Bridge/_05-Supported-Routes.md
deleted file mode 100644
index 13bbab1dc7..0000000000
--- a/docs/bridge/docs/02-Bridge/_05-Supported-Routes.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-sidebar_label: Supported Rotues
----
-
-import Routes from '@site/src/components/Routes'
-
-# Supported Routes
-
-Supported tokens for each chain. 
-
-:::tip Routes
-
-Route availability is determined by the amount you wish to bridge. Use the [Synapse Bridge](https://synapseprotocol.com) to see if a route between a given pair exists.
-
-:::
-
-<Routes />
diff --git a/docs/bridge/docs/02-Bridge/index.md b/docs/bridge/docs/02-Bridge/index.md
index 5da83d208a..dfa2ba2519 100644
--- a/docs/bridge/docs/02-Bridge/index.md
+++ b/docs/bridge/docs/02-Bridge/index.md
@@ -7,7 +7,7 @@ import SVGBridge from '@site/src/components/SVGBridge'
 
 # Synapse Bridge
 
-The [Synapse Bridge](https://synapseprotocol.com) and [Solana Bridge](https://solana.synapseprotocol.com/) seamlessly swap on-chain assets between [20+ EVM and non-EVM blockchains](./Supported-Routes) in a safe and secure manner.
+The [Synapse Bridge](https://synapseprotocol.com) and [Solana Bridge](https://solana.synapseprotocol.com/) seamlessly swap on-chain assets between [20+ EVM and non-EVM blockchains](/docs/About/Routes) in a safe and secure manner.
 
 <br />
 
diff --git a/docs/bridge/src/components/Routes.tsx b/docs/bridge/src/components/Routes.tsx
index 02af8a2312..36e035fe3d 100644
--- a/docs/bridge/src/components/Routes.tsx
+++ b/docs/bridge/src/components/Routes.tsx
@@ -1,17 +1,10 @@
 import { BRIDGABLE_TOKENS, CHAINS } from '@synapsecns/synapse-constants'
 
-const CHAINS_BY_ID = {}
-
-for (const { chainImg, id, name } of Object.values(CHAINS)) {
-  if (id && name) {
-    CHAINS_BY_ID[id] = { name, chainImg }
-  }
-}
-
 export default () =>
   Object.entries(BRIDGABLE_TOKENS).map(([id, tokens]) => {
-    const chain = CHAINS_BY_ID[id]
-    const chainImg = chain.chainImg({ width: 28, height: 28 })
+    const chain = CHAINS.CHAINS_BY_ID[id]
+    const chainImg = chain.chainImg
+
     return (
       <section key={id}>
         <h2
@@ -22,16 +15,10 @@ export default () =>
             alignItems: 'center',
           }}
         >
-          {chainImg} {chain.name} <code>{id}</code>
+          <img width="28" height="28" src={chainImg} alt={chain.name} />
+          {chain.name} <code>{id}</code>
         </h2>
         {Object.values(tokens).map((token) => {
-          const tokenImg =
-            typeof token.icon === 'string' ? (
-              <img width="16" height="16" src={token.icon} />
-            ) : (
-              token.icon({ width: 16, height: 16 })
-            )
-
           return (
             <span
               key={token.addresses[id]}
@@ -42,7 +29,8 @@ export default () =>
                 padding: '.25rem .5rem',
               }}
             >
-              {tokenImg} {token.symbol}
+              <img width="16" height="16" src={token.icon} alt={token.symbol} />{' '}
+              {token.symbol}
             </span>
           )
         })}