bridge_ui: added oasis to coming soon networks

Change-Id: I2f73733e5a882c23dd3933a1cab37c54328b97cb

bridge_ui/src/components/Home/index.tsx

@@ -1,5 +1,6 @@
 import {
   Card,
+  Chip,
   Container,
   Link,
   makeStyles,
@@ -7,7 +8,7 @@ import {
 } from "@material-ui/core";
 import { Link as RouterLink } from "react-router-dom";
 import { COLORS } from "../../muiTheme";
-import { BETA_CHAINS, CHAINS } from "../../utils/consts";
+import { BETA_CHAINS, CHAINS, COMING_SOON_CHAINS } from "../../utils/consts";
 import HeaderText from "../HeaderText";
 
 const useStyles = makeStyles((theme) => ({
@@ -118,6 +119,29 @@ function Home() {
               </Typography>
             </div>
           ))}
+          {COMING_SOON_CHAINS.map((item) => (
+            <div className={classes.chainCard}>
+              <div className={classes.chainLogoWrapper}>
+                <img
+                  src={item.logo}
+                  alt={item.name}
+                  className={classes.chainLogo}
+                />
+                <Chip
+                  label="Coming soon"
+                  size="small"
+                  className={classes.chip}
+                />
+              </div>
+              <Typography
+                variant="body2"
+                component="div"
+                className={classes.chainName}
+              >
+                <div>{item.name}</div>
+              </Typography>
+            </div>
+          ))}
         </div>
       </Container>
       <Container maxWidth="md">

bridge_ui/src/icons/oasis-network-rose-logo.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_2_);}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0089DB;}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" width="128" height="128"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g class="st0">
+		<path class="st1" d="M115,25.4C105.3,13,91.1,5.1,75.4,5.1C45,5.1,22.7,33.4,22.7,64c0,21.3,14.2,37.3,29.9,37.3
+			c1.5,0,2.9-0.1,4.4-0.4C46.4,93.2,39.7,79.2,39.7,64c0-24.2,16.4-43.1,35.7-43.1c21.1,0,35.7,20.9,35.7,43.1
+			c-0.1,16.4-5.9,32.7-16.2,44.7c-9,10.5-20.6,17.1-33.4,19.2c0,0,1.1,0.1,2.5,0.1c35.3,0,64-28.7,64-64
+			C128,49.5,123.2,36.1,115,25.4z M105.3,64c0-21.3-14.2-37.3-29.9-37.3c-1.5,0-2.9,0.1-4.4,0.4C81.6,34.8,88.3,48.8,88.3,64
+			c0,24.2-16.4,43.1-35.7,43.1c-21.1,0-35.7-20.9-35.7-43.1c0.1-16.4,5.9-32.7,16.2-44.7c9-10.5,20.6-17.1,33.4-19.2
+			c0,0-1.1-0.1-2.5-0.1C28.7,0,0,28.7,0,64c0,14.5,4.8,27.9,13,38.6c9.7,12.4,23.9,20.2,39.6,20.2C83,122.9,105.3,94.6,105.3,64z"/>
+	</g>
+</g>
+</svg>

bridge_ui/src/utils/consts.ts

@@ -14,6 +14,7 @@ import ethIcon from "../icons/eth.svg";
 import polygonIcon from "../icons/polygon.svg";
 import solanaIcon from "../icons/solana.svg";
 import terraIcon from "../icons/terra.svg";
+import oasisIcon from "../icons/oasis-network-rose-logo.svg";
 
 export type Cluster = "devnet" | "testnet" | "mainnet";
 export const CLUSTER: Cluster =
@@ -125,6 +126,14 @@ export const CHAINS_BY_ID: ChainsById = CHAINS.reduce((obj, chain) => {
   obj[chain.id] = chain;
   return obj;
 }, {} as ChainsById);
+
+export const COMING_SOON_CHAINS = [
+  {
+    id: 0,
+    name: "Oasis",
+    logo: oasisIcon,
+  },
+];
 export const getDefaultNativeCurrencySymbol = (chainId: ChainId) =>
   chainId === CHAIN_ID_SOLANA
     ? "SOL"