Add Routes Component [slt-317] (#3226)

* Revert "Hide Routes component (#3225)"

This reverts commit b93ba4b.

* Fixes img height width bug

* Refactor for checks, already imported value

---------

Co-authored-by: Trajan0x <[email protected]>
Co-authored-by: abtestingalpha <[email protected]>

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 />

docs/bridge/docs/02-Bridge/04-Sample-Code.md → 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
 

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 />
 

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>
           )
         })}