[2087] Add dynamic config selection by branch

.github/workflows/deploy-to-cf-pages.yaml

@@ -21,6 +21,8 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     timeout-minutes: 5
+    env:
+      BRANCH_NAME: ${{ github.head_ref }}
     steps:
       - name: "Checkout Github Action"
         uses: actions/checkout@v4
@@ -40,6 +42,7 @@ jobs:
         run: |
           touch .env
           echo VITE_FEATURE_TOGGLE_CLIENT_KEY=${{ vars.VITE_FEATURE_TOGGLE_CLIENT_KEY }} >> .env
+          echo VITE_BRANCH_NAME=${{ env.BRANCH_NAME }} >> .env
       - name: Build Project
         run: |
           npm run build

src/components/Header/Header.tsx

@@ -15,6 +15,8 @@ import { useMedia } from "@hooks/useMedia";
 import { useStores } from "@stores";
 import { MODAL_TYPE } from "@stores/ModalStore";
 
+import { CONFIG } from "@utils/getConfig";
+
 import { ConnectWalletButton } from "../ConnectWalletButton";
 import { AccountInfoSheet } from "../Modal";
 import { SmartFlex } from "../SmartFlex";
@@ -31,6 +33,8 @@ const Header: React.FC = observer(() => {
   const [isMobileMenuOpen, openMobileMenu, closeMobileMenu] = useFlag();
   const [isAccountInfoSheetOpen, openAccountInfo, closeAccountInfo] = useFlag();
 
+  const SparkLogo = CONFIG.APP.isMainnet ? Logo : LogoStyled;
+
   useEffect(() => {
     if (media.desktop) {
       closeMobileMenu();
@@ -68,7 +72,7 @@ const Header: React.FC = observer(() => {
       <>
         <SmartFlex center="y">
           <a href="/" rel="noreferrer noopener">
-            <Logo />
+            <SparkLogo />
           </a>
           <StyledText>BETA</StyledText>
         </SmartFlex>
@@ -96,7 +100,7 @@ const Header: React.FC = observer(() => {
       <>
         <SmartFlex center="y">
           <a href="/" rel="noreferrer noopener">
-            <Logo />
+            <SparkLogo />
           </a>
           <StyledText>BETA</StyledText>
           <Divider />
@@ -190,3 +194,9 @@ const WalletContainer = styled(SmartFlex)<{ isVisible?: boolean }>`
     }
   }
 `;
+
+const LogoStyled = styled(Logo)`
+  path {
+    fill: ${({ theme }) => theme.colors.greenLight};
+  }
+`;

src/typings/vite-env.d.ts

@@ -2,4 +2,13 @@
 /// <reference types="react" />
 /// <reference types="react-dom" />
 /// <reference types="vite/client" />
-/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+interface ImportMetaEnv {
+  VITE_FEATURE_TOGGLE_CLIENT_KEY: string | undefined;
+  VITE_BRANCH_NAME: string | undefined;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/utils/getConfig.ts

@@ -1,5 +1,7 @@
 import assert from "assert";
 
+import { Undefinable } from "tsdef";
+
 import TOKEN_LOGOS from "@constants/tokenLogos";
 
 import { Token } from "@entity";
@@ -21,8 +23,21 @@ export interface Market {
   contractId: string;
 }
 
+function getConfigByBranch(branchName: Undefinable<string>) {
+  if (branchName === "main") {
+    return configProdJSON;
+  }
+
+  if (branchName?.includes("stage/")) {
+    return configDevJSON;
+  }
+
+  return configDevJSON;
+}
+
 function createConfig() {
-  const configJSON = import.meta.env.DEV ? configDevJSON : configProdJSON;
+  const configJSON = getConfigByBranch(import.meta.env.VITE_BRANCH_NAME);
+
   assert(configJSON.version === CURRENT_CONFIG_VER, "Version mismatch");
 
   console.warn("SPARK CONFIG", configJSON);