Merge pull request #7 from Stellarthoughts/favicon_2

gateway-fm · Mar 15, 2024 · c32bc66 · c32bc66
2 parents fc669d1 + e728aa0
commit c32bc66
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 14 deletions.
diff --git a/.env.example b/.env.example
@@ -25,6 +25,9 @@ VITE_FIAT_EXCHANGE_RATES_ETHEREUM_USDC_ADDRESS=0xA0b86991c6218b36c1d19D4a2e9Eb0c
 
 # LOGO AND BRANDING
 VITE_LOGO_PATH=/src/assets/gpt-logo-white-transparent.svg
+VITE_FAVICON_PATH=/favicon.ico
+VITE_NETWORK_NAME=devnet
+VITE_NETWORK_SYMBOL=ETH
 
 # OUTDATED NETWORK MODAL
 VITE_ENABLE_OUTDATED_NETWORK_MODAL=true

diff --git a/index.html b/index.html
@@ -1,17 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      name="description"
-      content="Simple user interface to bridge ETH and your favorite ERC-20 tokens from Ethereum to the Polygon zkEVM and back"
-    />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <title>Polygon zkEVM Bridge</title>
-  </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "platform": "^1.3.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-jss": "^10.9.1",
     "react-router-dom": "^6.3.0",
     "stacktrace-js": "^2.0.2",
@@ -35,6 +36,7 @@
     "@types/platform": "^1.3.4",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@types/react-helmet": "^6.1.11",
     "@vitejs/plugin-react": "^2.0.0",
     "eslint": "^8.20.0",
     "husky": "^8.0.1",

diff --git a/src/adapters/env.ts b/src/adapters/env.ts
@@ -16,10 +16,13 @@ interface Env {
   VITE_ETHEREUM_PROOF_OF_EFFICIENCY_CONTRACT_ADDRESS: string;
   VITE_ETHEREUM_ROLLUP_MANAGER_ADDRESS: string;
   VITE_ETHEREUM_RPC_URL: string;
+  VITE_FAVICON_PATH: string;
   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_NETWORK_NAME?: string;
+  VITE_NETWORK_SYMBOL?: string;
   VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_1?: string;
   VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_2?: string;
   VITE_OUTDATED_NETWORK_MODAL_TITLE?: string;
@@ -166,10 +169,13 @@ const envToDomain = ({
   VITE_ETHEREUM_PROOF_OF_EFFICIENCY_CONTRACT_ADDRESS,
   VITE_ETHEREUM_ROLLUP_MANAGER_ADDRESS,
   VITE_ETHEREUM_RPC_URL,
+  VITE_FAVICON_PATH,
   VITE_FIAT_EXCHANGE_RATES_API_KEY,
   VITE_FIAT_EXCHANGE_RATES_API_URL,
   VITE_FIAT_EXCHANGE_RATES_ETHEREUM_USDC_ADDRESS,
   VITE_LOGO_PATH,
+  VITE_NETWORK_NAME,
+  VITE_NETWORK_SYMBOL,
   VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_1,
   VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_2,
   VITE_OUTDATED_NETWORK_MODAL_TITLE,
@@ -192,6 +198,10 @@ const envToDomain = ({
   );
   const bridgeApiUrl = VITE_BRIDGE_API_URL;
   const logoPath = VITE_LOGO_PATH;
+  const faviconPath = VITE_FAVICON_PATH;
+  const networkName = VITE_NETWORK_NAME;
+  const networkSymbol = VITE_NETWORK_SYMBOL;
+
   const outdatedNetworkModal: domain.Env["outdatedNetworkModal"] = isOutdatedNetworkModalEnabled
     ? {
         isEnabled: true,
@@ -229,6 +239,7 @@ const envToDomain = ({
     return {
       bridgeApiUrl,
       chains,
+      faviconPath,
       fiatExchangeRates: getFiatExchangeRatesEnv({
         ethereumChain,
         VITE_ENABLE_FIAT_EXCHANGE_RATES,
@@ -239,6 +250,8 @@ const envToDomain = ({
       forceUpdateGlobalExitRootForL1,
       isDepositWarningEnabled,
       logoPath,
+      networkName,
+      networkSymbol,
       outdatedNetworkModal,
       reportForm: getReportFormEnv({
         VITE_ENABLE_REPORT_FORM,
@@ -265,10 +278,13 @@ const envParser = StrictSchema<Env, domain.Env>()(
       VITE_ETHEREUM_PROOF_OF_EFFICIENCY_CONTRACT_ADDRESS: z.string().length(42),
       VITE_ETHEREUM_ROLLUP_MANAGER_ADDRESS: z.string().length(42),
       VITE_ETHEREUM_RPC_URL: z.string().url(),
+      VITE_FAVICON_PATH: z.string(),
       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_NETWORK_NAME: z.string().optional(),
+      VITE_NETWORK_SYMBOL: z.string().optional(),
       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(),

diff --git a/src/domain/index.ts b/src/domain/index.ts
@@ -69,6 +69,7 @@ export interface ReportFormEnvEnabled {
 export interface Env {
   bridgeApiUrl: string;
   chains: [EthereumChain, ZkEVMChain];
+  faviconPath: string;
   fiatExchangeRates:
     | {
         areEnabled: false;
@@ -82,6 +83,8 @@ export interface Env {
   forceUpdateGlobalExitRootForL1: boolean;
   isDepositWarningEnabled: boolean;
   logoPath: string;
+  networkName?: string;
+  networkSymbol?: string;
   outdatedNetworkModal:
     | {
         isEnabled: false;

diff --git a/src/views/app.view.tsx b/src/views/app.view.tsx
@@ -1,3 +1,4 @@
+import { AppHead } from "./helmet";
 import { BridgeProvider } from "src/contexts/bridge.context";
 import { EnvProvider } from "src/contexts/env.context";
 import { ErrorProvider } from "src/contexts/error.context";
@@ -23,6 +24,7 @@ export const App = (): JSX.Element => {
                 <BridgeProvider>
                   <FormProvider>
                     <Layout>
+                      <AppHead />
                       <Router />
                     </Layout>
                   </FormProvider>

diff --git a/src/views/helmet.tsx b/src/views/helmet.tsx
@@ -0,0 +1,25 @@
+import { Helmet } from "react-helmet";
+import { useEnvContext } from "../contexts/env.context";
+
+export const AppHead = () => {
+  const env = useEnvContext();
+
+  return (
+    <Helmet>
+      <meta charSet="UTF-8" />
+      <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+      <meta
+        content="Simple user interface to bridge ETH and your favorite ERC-20 tokens from Ethereum to the Polygon zkEVM and back"
+        name="description"
+      />
+      {env?.faviconPath ? (
+        <link href={env.faviconPath} rel="icon" type="image/svg+xml" />
+      ) : (
+        <link href="/favicon.ico" rel="icon" type="image/svg+xml" />
+      )}
+      <link href="/logo192.png" rel="apple-touch-icon" />
+      <link href="/manifest.json" rel="manifest" />
+      <title>Polygon zkEVM Bridge</title>
+    </Helmet>
+  );
+};
diff --git a/src/views/shared/network-box/network-box.view.tsx b/src/views/shared/network-box/network-box.view.tsx
@@ -32,6 +32,9 @@ export const NetworkBox: FC = () => {
   const ethereumChain = env.chains[0];
   const polygonZkEVMChain = env.chains[1];
 
+  const name = env.networkName;
+  const symbol = env.networkSymbol;
+
   const successMsg: Message = {
     text: `${polygonZkEVMChain.name} network successfully added`,
     type: "success-msg",
@@ -66,7 +69,7 @@ export const NetworkBox: FC = () => {
   return (
     <Card>
       <div className={classes.networkBox}>
-        <Typography type="body1">{env.chains[1].name}</Typography>
+        <Typography type="body1">{name ? name : env.chains[1].name}</Typography>
         <ul className={classes.list}>
           <li className={classes.listItem}>
             <Typography type="body2">
@@ -78,7 +81,7 @@ export const NetworkBox: FC = () => {
           </li>
           <li className={classes.listItem}>
             <Typography type="body2">
-              Currency symbol: {polygonZkEVMChain.nativeCurrency.symbol}
+              Currency symbol: {symbol ? symbol : polygonZkEVMChain.nativeCurrency.symbol}
             </Typography>
           </li>
           <li className={classes.listItem}>