add: name and symbol envs

.env.example

@@ -25,6 +25,8 @@ 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

src/adapters/env.ts

@@ -20,6 +20,8 @@ interface Env {
   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;
@@ -170,6 +172,8 @@ const envToDomain = ({
   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,
@@ -193,6 +197,8 @@ 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
     ? {
@@ -241,6 +247,8 @@ const envToDomain = ({
       forceUpdateGlobalExitRootForL1,
       isDepositWarningEnabled,
       logoPath,
+      networkName,
+      networkSymbol,
       outdatedNetworkModal,
       reportForm: getReportFormEnv({
         VITE_ENABLE_REPORT_FORM,
@@ -271,6 +279,8 @@ const envParser = StrictSchema<Env, domain.Env>()(
       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(),

src/domain/index.ts

@@ -82,6 +82,8 @@ export interface Env {
   forceUpdateGlobalExitRootForL1: boolean;
   isDepositWarningEnabled: boolean;
   logoPath: string;
+  networkName?: string;
+  networkSymbol?: string;
   outdatedNetworkModal:
     | {
         isEnabled: false;

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