Merge pull request #41 from gateway-fm/add-customizable-icon

added customizable chain icons

.env.example

@@ -46,6 +46,24 @@ VITE_REPORT_FORM_ERROR_ENTRY=entry.xxxxxx
 VITE_REPORT_FORM_PLATFORM_ENTRY=entry.xxxxxx
 VITE_REPORT_FORM_URL_ENTRY=entry.xxxxxx
 
+#CUSTOMIZABLE ENV VARIABLES ICONS
+VITE_CHAIN_ICON_URL= 
+#URLS FOR ICONS
+LUMIA_MARK_FLAT_INVERTED=https://gist.githubusercontent.com/iszubok/09b3d5e5b84a82b63d3291941ea51498/raw/d072e642e1cd000653a9f1457e7e1e88be9c09bf/LUMIA-Mark-Flat-Inverted.svg
+PROM_BG_1=https://gist.githubusercontent.com/iszubok/831efaa5bb1787637f54fd52835dd066/raw/977762ce4a2558b0b50ee29e3e1a31bb7fa97fed/prom-BG-1.svg
+PROM_BLOCK_EXPLORER_HERO=https://gist.githubusercontent.com/iszubok/831efaa5bb1787637f54fd52835dd066/raw/977762ce4a2558b0b50ee29e3e1a31bb7fa97fed/prom-BlockExplorerHero.png
+PROM_FRAME_121=https://gist.githubusercontent.com/iszubok/831efaa5bb1787637f54fd52835dd066/raw/977762ce4a2558b0b50ee29e3e1a31bb7fa97fed/prom-Frame%2520121.svg
+PROM_LOGO=https://gist.githubusercontent.com/iszubok/831efaa5bb1787637f54fd52835dd066/raw/977762ce4a2558b0b50ee29e3e1a31bb7fa97fed/prom-logo.svg
+HP_TESTNET_LOGO=https://gist.githubusercontent.com/iszubok/c3cf1e5fa13a3720341f17ec28f574c8/raw/69459f2593304102bdaec331b1201fc81cdfc733/hp-testnet-logo.svg
+MOONVEIL_BG_720=https://gist.githubusercontent.com/iszubok/fb2735b2298216bf0d14d5fe3834f482/raw/dc1a65aeb7e72a01fa07962e609dea72fe2dfc19/moonveil-bg-720.png
+MOONVEIL_BG_720_DARK=https://gist.githubusercontent.com/iszubok/fb2735b2298216bf0d14d5fe3834f482/raw/dc1a65aeb7e72a01fa07962e609dea72fe2dfc19/moonveil-bg-720-dark.png
+MOONVEIL_LOGO=https://gist.githubusercontent.com/iszubok/b0d45b576fcddd7e07e5a398c5625ab6/raw/96cb88d7c1b452d65c922c303df0ff30eb40ee97/moonveil_logo.svg
+WIREX_PAY_LOGO=https://gist.githubusercontent.com/iszubok/e8de4341539d96479832decc60f19213/raw/6949bb6023d845a2f673b8a2cf976caff8777613/wirex_pay_logo.svg
+LUMIA_MARK_COLOR=https://gist.githubusercontent.com/iszubok/37f22e7af47036666919a9b4b6dc124a/raw/e476b60e9176bd18bb9e4a62b02286073777b81d/LUMIA-Mark-Color.svg
+LUMIA_COLOR=https://gist.githubusercontent.com/iszubok/7898e499c046472c2da1d82b2778811f/raw/95c807b295794563469c5da16f5a98aadfc16417/LUMIA-Color.svg
+LUMIA_COLOR_INVERTED=https://gist.githubusercontent.com/iszubok/2e3fdf5967d2c057990da1a28d0128f4/raw/819f03cff3f44cc3128d1154a3d3adc090ba1c5b/LUMIA-Color-Inverted.svg
+
+
 #CUSTOMIZABLE ENV VARIABLES COLORS
 
 VITE_THEME_COLOR_BLACK=#0a0b0d

.github/workflows/push-docker-main.yml

@@ -28,4 +28,4 @@ jobs:
         with:
           platforms: linux/amd64,linux/arm64
           push: true
-          tags: gatewayfm/zkevm-bridge-ui-generic:1.0.5
+          tags: gatewayfm/zkevm-bridge-ui-generic:1.0.6

src/adapters/env.ts

@@ -6,6 +6,7 @@ import { StrictSchema } from "src/utils/type-safety";
 
 interface Env {
   VITE_BRIDGE_API_URL: string;
+  VITE_CHAIN_ICON_URL?: string;
   VITE_ENABLE_DEPOSIT_WARNING: string;
   VITE_ENABLE_FIAT_EXCHANGE_RATES: string;
   VITE_ENABLE_OUTDATED_NETWORK_MODAL?: string;
@@ -160,6 +161,7 @@ const getReportFormEnv = ({
 
 const envToDomain = ({
   VITE_BRIDGE_API_URL,
+  VITE_CHAIN_ICON_URL,
   VITE_ENABLE_DEPOSIT_WARNING,
   VITE_ENABLE_FIAT_EXCHANGE_RATES,
   VITE_ENABLE_OUTDATED_NETWORK_MODAL,
@@ -204,6 +206,7 @@ const envToDomain = ({
   const faviconPath = VITE_FAVICON_PATH;
   const networkName = VITE_NETWORK_NAME;
   const networkSymbol = VITE_NETWORK_SYMBOL;
+  const chainIconPath = VITE_CHAIN_ICON_URL;
 
   const outdatedNetworkModal: domain.Env["outdatedNetworkModal"] = isOutdatedNetworkModalEnabled
     ? {
@@ -242,6 +245,7 @@ const envToDomain = ({
 
     return {
       bridgeApiUrl,
+      chainIconPath,
       chains,
       faviconPath,
       fiatExchangeRates: getFiatExchangeRatesEnv({
@@ -272,6 +276,7 @@ const envParser = StrictSchema<Env, domain.Env>()(
   z
     .object({
       VITE_BRIDGE_API_URL: z.string().url(),
+      VITE_CHAIN_ICON_URL: z.string().optional(),
       VITE_ENABLE_DEPOSIT_WARNING: z.string(),
       VITE_ENABLE_FIAT_EXCHANGE_RATES: z.string(),
       VITE_ENABLE_OUTDATED_NETWORK_MODAL: z.string().optional(),

src/domain/index.ts

@@ -2,7 +2,7 @@ import { JsonRpcProvider, Web3Provider } from "@ethersproject/providers";
 import { BigNumber } from "ethers";
 import { ComponentType } from "react";
 
-export type ChainKey = "ethereum" | "polygon-zkevm";
+export type ChainKey = "ethereum" | "polygon-zkevm" | "gpt" | "lumia";
 
 export interface CommonChain {
   Icon: ComponentType<{ className?: string }>;
@@ -24,6 +24,14 @@ export interface CommonChain {
   provider: JsonRpcProvider;
 }
 
+export type GptChain = CommonChain & {
+  key: "gpt";
+};
+
+export type LumiaChain = CommonChain & {
+  key: "lumia";
+};
+
 export type EthereumChain = CommonChain & {
   key: "ethereum";
   poeContractAddress: string;
@@ -34,7 +42,7 @@ export type ZkEVMChain = CommonChain & {
   key: "polygon-zkevm";
 };
 
-export type Chain = EthereumChain | ZkEVMChain;
+export type Chain = EthereumChain | ZkEVMChain | GptChain | LumiaChain;
 
 export interface ConnectedProvider {
   account: string;
@@ -72,7 +80,7 @@ export interface ReportFormEnvEnabled {
 
 export interface Env {
   bridgeApiUrl: string;
-  chains: [EthereumChain, ZkEVMChain];
+  chains: [EthereumChain, ZkEVMChain, GptChain, LumiaChain];
   faviconPath?: string;
   fiatExchangeRates:
     | {

src/views/bridge-details/components/chain/chain.styles.ts

@@ -1,8 +1,10 @@
 import { createUseStyles } from "react-jss";
 
 export const useChainStyles = createUseStyles({
-  polygonZkEvmChain: {
+  chainIcon: {
     height: 20,
+    marginRight: 8,
+    verticalAlign: "middle",
     width: 20,
   },
 });

src/views/bridge-details/components/chain/chain.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
-
 import { ReactComponent as EthChainIcon } from "src/assets/icons/chains/ethereum.svg";
+import GptIcon from "src/assets/icons/chains/gpt.jpg";
+import { ReactComponent as Lumia } from "src/assets/icons/chains/lumia.svg";
 import { ReactComponent as PolygonZkEVMChainIcon } from "src/assets/icons/chains/polygon-zkevm.svg";
 import * as domain from "src/domain";
 import { useChainStyles } from "src/views/bridge-details/components/chain/chain.styles";
@@ -14,17 +15,42 @@ interface ChainProps {
 export const Chain: FC<ChainProps> = ({ chain, className }) => {
   const classes = useChainStyles();
 
-  if (chain.key === "ethereum") {
-    return (
-      <Typography className={className} type="body1">
-        <EthChainIcon /> {chain.name}
-      </Typography>
-    );
-  } else {
-    return (
-      <Typography className={className} type="body1">
-        <PolygonZkEVMChainIcon className={classes.polygonZkEvmChain} /> {chain.name}
-      </Typography>
-    );
-  }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const chainIconUrl = import.meta.env.VITE_CHAIN_ICON_URL;
+
+  const renderChainIcon = () => {
+    switch (chain.key) {
+      case "ethereum": {
+        return <EthChainIcon />;
+      }
+      case "polygon-zkevm": {
+        return <PolygonZkEVMChainIcon className={classes.chainIcon} />;
+      }
+      case "gpt": {
+        return <img alt="GPT" className={classes.chainIcon} src={GptIcon} />;
+      }
+      case "lumia": {
+        return <Lumia className={classes.chainIcon} />;
+      }
+      default: {
+        return null;
+      }
+    }
+  };
+
+  return (
+    <Typography className={className} type="body1">
+      {chainIconUrl ? (
+        <img
+          alt={chain.name}
+          className={classes.chainIcon}
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          src={chainIconUrl}
+        />
+      ) : (
+        renderChainIcon()
+      )}
+      {chain.name}
+    </Typography>
+  );
 };