Merge pull request #6 from Stellarthoughts/branding_2

.env.example

@@ -23,6 +23,9 @@ VITE_FIAT_EXCHANGE_RATES_API_URL=https://api.exchangeratesapi.io/v1/latest
 VITE_FIAT_EXCHANGE_RATES_API_KEY=
 VITE_FIAT_EXCHANGE_RATES_ETHEREUM_USDC_ADDRESS=0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48
 
+# LOGO AND BRANDING
+VITE_LOGO_PATH=/src/assets/gpt-logo-white-transparent.svg
+
 # OUTDATED NETWORK MODAL
 VITE_ENABLE_OUTDATED_NETWORK_MODAL=true
 VITE_OUTDATED_NETWORK_MODAL_TITLE=Welcome to the new Polygon zkEVM testnet!
@@ -39,3 +42,4 @@ VITE_REPORT_FORM_URL=https://docs.google.com/forms/d/xxxxxx/viewform
 VITE_REPORT_FORM_ERROR_ENTRY=entry.xxxxxx
 VITE_REPORT_FORM_PLATFORM_ENTRY=entry.xxxxxx
 VITE_REPORT_FORM_URL_ENTRY=entry.xxxxxx
+

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

@@ -1,7 +1,7 @@
 on:
   push:
     branches:
-      - main
+      - develop
 
 jobs:
   build:
@@ -28,4 +28,4 @@ jobs:
         with:
           platforms: linux/amd64,linux/arm64
           push: true
-          tags: hermeznetwork/zkevm-bridge-ui:stable
+          tags: gatewayfm/zkevm-bridge-ui-generic:v0.0.2

src/adapters/env.ts

@@ -19,6 +19,7 @@ interface Env {
   VITE_FIAT_EXCHANGE_RATES_API_KEY?: string;
   VITE_FIAT_EXCHANGE_RATES_API_URL?: string;
   VITE_FIAT_EXCHANGE_RATES_ETHEREUM_USDC_ADDRESS?: string;
+  VITE_LOGO_PATH: string;
   VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_1?: string;
   VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_2?: string;
   VITE_OUTDATED_NETWORK_MODAL_TITLE?: string;
@@ -168,6 +169,7 @@ const envToDomain = ({
   VITE_FIAT_EXCHANGE_RATES_API_KEY,
   VITE_FIAT_EXCHANGE_RATES_API_URL,
   VITE_FIAT_EXCHANGE_RATES_ETHEREUM_USDC_ADDRESS,
+  VITE_LOGO_PATH,
   VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_1,
   VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_2,
   VITE_OUTDATED_NETWORK_MODAL_TITLE,
@@ -189,6 +191,7 @@ const envToDomain = ({
     VITE_ETHEREUM_FORCE_UPDATE_GLOBAL_EXIT_ROOT
   );
   const bridgeApiUrl = VITE_BRIDGE_API_URL;
+  const logoPath = VITE_LOGO_PATH;
   const outdatedNetworkModal: domain.Env["outdatedNetworkModal"] = isOutdatedNetworkModalEnabled
     ? {
         isEnabled: true,
@@ -235,6 +238,7 @@ const envToDomain = ({
       }),
       forceUpdateGlobalExitRootForL1,
       isDepositWarningEnabled,
+      logoPath,
       outdatedNetworkModal,
       reportForm: getReportFormEnv({
         VITE_ENABLE_REPORT_FORM,
@@ -264,6 +268,7 @@ const envParser = StrictSchema<Env, domain.Env>()(
       VITE_FIAT_EXCHANGE_RATES_API_KEY: z.string().optional(),
       VITE_FIAT_EXCHANGE_RATES_API_URL: z.string().url().optional(),
       VITE_FIAT_EXCHANGE_RATES_ETHEREUM_USDC_ADDRESS: z.string().length(42).optional(),
+      VITE_LOGO_PATH: z.string(),
       VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_1: z.string().optional(),
       VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_2: z.string().optional(),
       VITE_OUTDATED_NETWORK_MODAL_TITLE: z.string().optional(),

src/domain/index.ts

@@ -81,6 +81,7 @@ export interface Env {
       };
   forceUpdateGlobalExitRootForL1: boolean;
   isDepositWarningEnabled: boolean;
+  logoPath: string;
   outdatedNetworkModal:
     | {
         isEnabled: false;

src/views/home/components/header/header.view.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 import { ReactComponent as ClockIcon } from "src/assets/icons/clock.svg";
 import { ReactComponent as SettingIcon } from "src/assets/icons/setting.svg";
-import { ReactComponent as PolygonZkEVMLogo } from "src/assets/polygon-zkevm-logo.svg";
+import { ReactComponent as Logo } from "src/assets/polygon-zkevm-logo.svg";
 import { useEnvContext } from "src/contexts/env.context";
 import { routes } from "src/routes";
 import { areSettingsVisible } from "src/utils/feature-toggles";
@@ -19,6 +19,8 @@ export const Header: FC = () => {
     return null;
   }
 
+  const logo = env.logoPath;
+
   return (
     <header className={classes.header}>
       <div className={`${classes.block} ${classes.leftBlock}`}>
@@ -35,7 +37,7 @@ export const Header: FC = () => {
         </Link>
       </div>
       <div className={`${classes.block} ${classes.centerBlock}`}>
-        <PolygonZkEVMLogo className={classes.logo} />
+        {logo ? <img className={classes.logo} src={logo}></img> : <Logo className={classes.logo} />}
       </div>
       <div className={`${classes.block} ${classes.rightBlock}`}>
         <NetworkSelector />

src/views/login/login.view.tsx

@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 
 import { routerStateParser } from "src/adapters/browser";
 import { getPolicyCheck, setPolicyCheck } from "src/adapters/storage";
-import { ReactComponent as PolygonZkEVMLogo } from "src/assets/polygon-zkevm-logo.svg";
+import { ReactComponent as Logo } from "src/assets/polygon-zkevm-logo.svg";
 import { useEnvContext } from "src/contexts/env.context";
 import { useProvidersContext } from "src/contexts/providers.context";
 import { EthereumChainId, PolicyCheck, WalletName } from "src/domain";
@@ -59,14 +59,15 @@ export const Login: FC = () => {
     return null;
   }
 
+	const logo = env.logoPath;
   const ethereumChain = env.chains[0];
   const deploymentName = getDeploymentName(ethereumChain);
   const appName = deploymentName !== undefined ? `${deploymentName} Bridge` : "Bridge";
 
   return (
     <div className={classes.login}>
       <div className={classes.contentWrapper}>
-        <PolygonZkEVMLogo className={classes.logo} />
+        {logo ? <img className={classes.logo} src={logo}></img> : <Logo className={classes.logo} />}
         <Typography className={classes.appName} type="body1">
           {appName}
         </Typography>

src/views/network-error/network-error.styles.ts

@@ -15,11 +15,6 @@ export const useNetworkErrorStyles = createUseStyles((theme: Theme) => ({
     marginTop: theme.spacing(4),
     padding: [theme.spacing(1), theme.spacing(5)],
   },
-  logo: {
-    marginBottom: theme.spacing(4),
-    maxWidth: "300px",
-    width: "100%",
-  },
   textBox: {
     backgroundColor: theme.palette.white,
     borderRadius: 8,

src/views/network-error/network-error.view.tsx

@@ -2,7 +2,6 @@ import { FC, useEffect } from "react";
 import { Navigate, useLocation, useNavigate } from "react-router-dom";
 
 import { providerError } from "src/adapters/error";
-import { ReactComponent as PolygonZkEVMLogo } from "src/assets/polygon-zkevm-logo.svg";
 import { useEnvContext } from "src/contexts/env.context";
 import { ProviderError } from "src/domain";
 import { routes } from "src/routes";
@@ -25,7 +24,6 @@ export const NetworkError: FC = () => {
 
   return parsedProviderError.success ? (
     <div className={classes.wrapper}>
-      <PolygonZkEVMLogo className={classes.logo} />
       <div className={classes.textBox}>
         <Typography type="h1">Network Error</Typography>
         <Typography type="body1">