From 644ca0328ecdd7c49dd820b057d2be79e0db70a9 Mon Sep 17 00:00:00 2001
From: Lukasz Kosiak <103423117+lukozill@users.noreply.github.com>
Date: Tue, 10 Dec 2024 12:49:11 +0100
Subject: [PATCH] APT-1507, APT-1601: Prototestnet contracts connected, config
 refactored #11
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Łukasz Kosiak <kosiak.lukasz@gmail.com>
---
 .dockerignore                        |  1 +
 .env.local_zq2                       |  3 +-
 .env.mocked                          |  3 +-
 .env.zq2_testnet                     |  2 +
 render_config_staging.yaml           |  2 +-
 src/components/loginView.tsx         |  7 ++-
 src/components/stakingCalculator.tsx |  8 +++-
 src/components/stakingPoolsList.tsx  |  4 +-
 src/contexts/appConfigStorage.tsx    | 12 +++++
 src/contexts/stakingPoolsStorage.tsx | 12 +++--
 src/contexts/walletConnector.tsx     |  7 ++-
 src/misc/appConfig.ts                | 15 ------
 src/misc/chainConfig.ts              | 68 ++++++++++++++++++----------
 src/misc/formatting.ts               |  6 +--
 src/misc/stakingPoolsConfig.ts       | 36 +++++++--------
 src/misc/walletsConfig.ts            |  9 ++--
 src/pages/_app.tsx                   | 58 ++++++++++++++----------
 src/pages/api/config.ts              | 40 ++++++++++++++++
 src/pages/index.tsx                  |  7 ++-
 src/script/fetchPoolStaticData.ts    | 10 ++--
 zenv/z.yaml                          |  2 +-
 21 files changed, 202 insertions(+), 110 deletions(-)
 create mode 100644 .env.zq2_testnet
 create mode 100644 src/contexts/appConfigStorage.tsx
 delete mode 100644 src/misc/appConfig.ts
 create mode 100644 src/pages/api/config.ts

diff --git a/.dockerignore b/.dockerignore
index 2386470..15e35a6 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -22,6 +22,7 @@
 ## next.js
 **/.next/
 **/.env*.local
+.env
 
 ## production
 **/build
diff --git a/.env.local_zq2 b/.env.local_zq2
index 2624afc..4a246ea 100644
--- a/.env.local_zq2
+++ b/.env.local_zq2
@@ -1 +1,2 @@
-NEXT_PUBLIC_ENV_CHAIN_ID=32769
\ No newline at end of file
+CHAIN_ID=32769
+ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje
\ No newline at end of file
diff --git a/.env.mocked b/.env.mocked
index eb7752e..38b0526 100644
--- a/.env.mocked
+++ b/.env.mocked
@@ -1 +1,2 @@
-NEXT_PUBLIC_ENV_CHAIN_ID=9999999
\ No newline at end of file
+CHAIN_ID=9999999
+ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje
\ No newline at end of file
diff --git a/.env.zq2_testnet b/.env.zq2_testnet
new file mode 100644
index 0000000..08720e1
--- /dev/null
+++ b/.env.zq2_testnet
@@ -0,0 +1,2 @@
+ZQ2_STAKING_CHAIN_ID=33103
+ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje
\ No newline at end of file
diff --git a/render_config_staging.yaml b/render_config_staging.yaml
index 6570481..c3030f0 100644
--- a/render_config_staging.yaml
+++ b/render_config_staging.yaml
@@ -26,7 +26,7 @@ apps_to_clusters:
     replicas: 1
     env_vars:
       - name: ZQ2_STAKING_CHAIN_ID
-        value: 33469
+        value: 33103
     pod_limits:
       cpu: 200m
       memory: 200Mi
diff --git a/src/components/loginView.tsx b/src/components/loginView.tsx
index 44a08c0..f4a045c 100644
--- a/src/components/loginView.tsx
+++ b/src/components/loginView.tsx
@@ -1,3 +1,4 @@
+import { AppConfigStorage } from "@/contexts/appConfigStorage";
 import { WalletConnector } from "@/contexts/walletConnector";
 import { MOCK_CHAIN } from "@/misc/chainConfig";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
@@ -5,12 +6,16 @@ import { Button } from "antd";
 
 const LoginView: React.FC = () => {
 
+  const {
+    appConfig
+  } = AppConfigStorage.useContainer();
+
   const {
     connectDummyWallet,
     isDummyWalletConnecting,
   } = WalletConnector.useContainer();
 
-  const connectWallet = process.env.NEXT_PUBLIC_ENV_CHAIN_ID === MOCK_CHAIN.id.toString() ? (
+  const connectWallet = appConfig.chainId === MOCK_CHAIN.id ? (
     <Button
         type="primary"
         onClick={connectDummyWallet}
diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx
index d7bdacd..45fcf87 100644
--- a/src/components/stakingCalculator.tsx
+++ b/src/components/stakingCalculator.tsx
@@ -6,9 +6,15 @@ import { formatPercentage, convertZilValueInToken, getTxExplorerUrl, formatAddre
 import { formatUnits, parseEther } from "viem";
 import { StakingOperations } from "@/contexts/stakingOperations";
 import Link from "next/link";
+import { AppConfigStorage } from "@/contexts/appConfigStorage";
 
 
 const StakingCalculator: React.FC = () => {
+
+  const {
+    appConfig
+  } = AppConfigStorage.useContainer();
+
   const {
     zilAvailable,
   } = WalletConnector.useContainer();
@@ -114,7 +120,7 @@ const StakingCalculator: React.FC = () => {
         {
           stakingCallTxHash !== undefined && (
             <div className="text-center gradient-bg-1 py-2">
-              <Link rel="noopener noreferrer" target="_blank" href={getTxExplorerUrl(stakingCallTxHash)} passHref={true}>
+              <Link rel="noopener noreferrer" target="_blank" href={getTxExplorerUrl(stakingCallTxHash, appConfig.chainId)} passHref={true}>
                 Last staking transaction: {formatAddress(stakingCallTxHash)}
               </Link>
             </div>
diff --git a/src/components/stakingPoolsList.tsx b/src/components/stakingPoolsList.tsx
index cdc70ea..0902b6b 100644
--- a/src/components/stakingPoolsList.tsx
+++ b/src/components/stakingPoolsList.tsx
@@ -75,7 +75,6 @@ const StakingPoolsList: React.FC = () => {
       <div className="grid grid-cols-1 gap-2.5 lg:gap-4 overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-30vh)] lg:max-h-[calc(100vh-27vh)]
        scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2">
         {sortedStakingPoolsData.map(({ stakingPool, userData }) => (
-          <>
           <StakingPoolCard
             key={stakingPool.definition.id}
             stakingPoolData={stakingPool}
@@ -87,8 +86,7 @@ const StakingPoolsList: React.FC = () => {
             onClick={() =>
               selectStakingPoolForView(stakingPool.definition.id)
             }
-          /> 
-          </>
+          />
         ))}
       </div>
     </>
diff --git a/src/contexts/appConfigStorage.tsx b/src/contexts/appConfigStorage.tsx
new file mode 100644
index 0000000..8e35ac7
--- /dev/null
+++ b/src/contexts/appConfigStorage.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { AppConfig } from "@/pages/api/config";
+import { createContainer } from "./context";
+
+const useAppConfigStorage = (initialState?: { appConfig: AppConfig }) => {
+  return {
+    appConfig: initialState!.appConfig
+  };
+};
+
+export const AppConfigStorage = createContainer(useAppConfigStorage);
diff --git a/src/contexts/stakingPoolsStorage.tsx b/src/contexts/stakingPoolsStorage.tsx
index 186d7e3..03e0cac 100644
--- a/src/contexts/stakingPoolsStorage.tsx
+++ b/src/contexts/stakingPoolsStorage.tsx
@@ -6,13 +6,17 @@ import { WalletConnector } from "./walletConnector";
 import { DateTime } from "luxon";
 import { StakingPool, stakingPoolsConfigForChainId } from "@/misc/stakingPoolsConfig";
 import { getWalletStakingData, getWalletUnstakingData, UserStakingPoolData, UserUnstakingPoolData } from "@/misc/walletsConfig";
-import { getChainId } from "@/misc/appConfig";
+import { AppConfigStorage } from "./appConfigStorage";
 
 const useStakingPoolsStorage = () => {
   const {
     walletAddress,
   } = WalletConnector.useContainer();
 
+  const {
+    appConfig
+  } = AppConfigStorage.useContainer();
+
   const [availableStakingPoolsData, setAvailableStakingPoolsData] = useState<StakingPool[]>([]);
 
   const [userStakingPoolsData, setUserStakingPoolsData] = useState<UserStakingPoolData[]>([]);
@@ -29,7 +33,7 @@ const useStakingPoolsStorage = () => {
       return
     }
 
-    getWalletStakingData(walletAddress).then(setUserStakingPoolsData).catch(console.error);
+    getWalletStakingData(walletAddress, appConfig!.chainId).then(setUserStakingPoolsData).catch(console.error);
     getWalletUnstakingData(walletAddress).then(setUserUnstakesData).catch(console.error);
   }
 
@@ -42,7 +46,7 @@ const useStakingPoolsStorage = () => {
 
   useEffect(
     function populateStakingPoolsDefinitionsAndTriggerDataLoading () {
-      const stakingPoolsConfig = stakingPoolsConfigForChainId[getChainId()];
+      const stakingPoolsConfig = stakingPoolsConfigForChainId[appConfig.chainId];
 
       setAvailableStakingPoolsData(stakingPoolsConfig.map((configEntry) => ({
         definition: configEntry.definition,
@@ -50,7 +54,7 @@ const useStakingPoolsStorage = () => {
       })));
 
       Promise.all(stakingPoolsConfig.map(async (config) => {
-        const data = await config.delegatorDataProvider(config.definition);
+        const data = await config.delegatorDataProvider(config.definition, appConfig.chainId);
 
         setAvailableStakingPoolsData((prev) => {
           const updated = prev.map((entry) => {
diff --git a/src/contexts/walletConnector.tsx b/src/contexts/walletConnector.tsx
index 820703a..3042374 100644
--- a/src/contexts/walletConnector.tsx
+++ b/src/contexts/walletConnector.tsx
@@ -7,6 +7,7 @@ import { useWalletClient } from "wagmi";
 import { getBalance } from "viem/actions";
 import { Address } from "viem";
 import { getViemClient } from "@/misc/chainConfig";
+import { AppConfigStorage } from "./appConfigStorage";
 
 export enum ConnectedWalletType {
   None,
@@ -17,6 +18,10 @@ export enum ConnectedWalletType {
 const useWalletConnector = () => {
   const [zilAvailable, setZilAvailable] = useState<bigint | null>(null);
 
+  const {
+    appConfig
+  } = AppConfigStorage.useContainer();
+
   /**
    * Dummy Wallet section
    */
@@ -74,7 +79,7 @@ const useWalletConnector = () => {
       return;
     }
 
-    getBalance(getViemClient(), {
+    getBalance(getViemClient(appConfig.chainId), {
       address: walletAddress as Address,
     }).then(
       (balanceInWei) => {
diff --git a/src/misc/appConfig.ts b/src/misc/appConfig.ts
deleted file mode 100644
index 10a039a..0000000
--- a/src/misc/appConfig.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export function getChainId() {
-  const envChainId = process.env.NEXT_PUBLIC_ENV_CHAIN_ID;
-
-  if (!envChainId) {
-    throw new Error('NEXT_PUBLIC_ENV_CHAIN_ID is not defined');
-  }
-
-  const chainIdNumber = parseInt(envChainId);
-
-  if (isNaN(chainIdNumber)) {
-    throw new Error('NEXT_PUBLIC_ENV_CHAIN_ID is not a number');
-  }
-
-  return chainIdNumber;
-}
diff --git a/src/misc/chainConfig.ts b/src/misc/chainConfig.ts
index 5fa221e..5ba449e 100644
--- a/src/misc/chainConfig.ts
+++ b/src/misc/chainConfig.ts
@@ -3,7 +3,6 @@ import { rainbowWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/walle
 import { createClient, createPublicClient, defineChain, http } from 'viem';
 import { createConfig } from 'wagmi';
 import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets';
-import { getChainId } from './appConfig';
 
 export const CHAIN_ZQ2_DEVNET = defineChain({
   id: 33469,
@@ -22,6 +21,23 @@ export const CHAIN_ZQ2_DEVNET = defineChain({
   },
 })
 
+export const CHAIN_ZQ2_PROTOTESTNET = defineChain({
+  id: 33103,
+  name: 'Zq2 ProtoTestnet',
+  nativeCurrency: { name: 'ZIL', symbol: 'ZIL', decimals: 18 },
+  rpcUrls: {
+    default: {
+      http: ['https://api.zq2-prototestnet.zilliqa.com'],
+    },
+  },
+  blockExplorers: {
+    default: {
+      name: 'Otterscan',
+      url: 'https://explorer.zq2-prototestnet.zilliqa.com',
+    },
+  },
+})
+
 export const CHAIN_ZQ2_DOCKERCOMPOSE = defineChain({
   id: 87362,
   name: 'Zq2 Dockercompose',
@@ -56,48 +72,50 @@ export const MOCK_CHAIN = defineChain({
   },
 })
 
-const connectors = connectorsForWallets(
-  [
+function getConnectorsForWallets(walletConnectApiKey: string) {
+  return connectorsForWallets(
+    [
+      {
+        groupName: 'Recommended',
+        wallets: [rainbowWallet, walletConnectWallet, rabbyWallet],
+      },
+    ],
     {
-      groupName: 'Recommended',
-      wallets: [rainbowWallet, walletConnectWallet, rabbyWallet],
-    },
-  ],
-  {
-    appName: 'ZQ2 Staking',
-    projectId: '40db54b1a888b3fdc54ac79e2925e762', // APT-1601
-  }
-);
+      appName: 'ZQ2 Staking',
+      projectId: walletConnectApiKey
+    }
+  )
+}
 
-export function getActiveChain() {
-  const activeChain = [
-    CHAIN_ZQ2_DEVNET,
+export function getChain(chainId: number) {
+  const chain = [
+    CHAIN_ZQ2_PROTOTESTNET,
     CHAIN_ZQ2_DOCKERCOMPOSE,
     MOCK_CHAIN,
   ].find(
-    (chain) => chain.id === getChainId()
+    (chain) => chain.id === chainId
   );
 
-  if (!activeChain) {
-    throw new Error('Active chain is not defined');
+  if (!chain) {
+    throw new Error(`Active chain [${chainId}] is not defined`);
   }
 
-  return activeChain;
-} 
+  return chain;
+}
 
-export function getChainsConfig() {
+export function getWagmiConfig(chainId: number, walletConnectApiKey: string) {
   return createConfig({
-    chains: [getActiveChain()] as any, // for some reason there is a type mismatch
+    chains: [getChain(chainId)] as any, // for some reason there is a type mismatch
     client({ chain }) {
       return createClient({ chain, transport: http() })
     },
-    connectors,
+    connectors: getConnectorsForWallets(walletConnectApiKey),
   });
 }
 
-export function getViemClient() {
+export function getViemClient(chainId: number) {
   return createPublicClient({
-    chain: getActiveChain(),
+    chain: getChain(chainId),
     transport: http(),
   });
 }
\ No newline at end of file
diff --git a/src/misc/formatting.ts b/src/misc/formatting.ts
index fe6eb3b..283ea3c 100644
--- a/src/misc/formatting.ts
+++ b/src/misc/formatting.ts
@@ -1,6 +1,6 @@
 import { DateTime } from "luxon";
 import { formatUnits } from "viem";
-import { getActiveChain } from "./chainConfig";
+import { getChain } from "./chainConfig";
 
 export function formatPercentage(value: number) {
   return `${parseFloat((value * 100).toFixed(2))}%`;
@@ -52,6 +52,6 @@ export function formatUnitsToHumanReadable(value: bigint, decimals: number): str
   return formatter.format(raw);
 }
 
-export function getTxExplorerUrl(txHash: string) {
-  return `${getActiveChain().blockExplorers.default.url}/tx/${txHash}`;
+export function getTxExplorerUrl(txHash: string, chainId: number) {
+  return `${getChain(chainId).blockExplorers.default.url}/tx/${txHash}`;
 }
\ No newline at end of file
diff --git a/src/misc/stakingPoolsConfig.ts b/src/misc/stakingPoolsConfig.ts
index 7e1b3ae..788c548 100644
--- a/src/misc/stakingPoolsConfig.ts
+++ b/src/misc/stakingPoolsConfig.ts
@@ -1,5 +1,5 @@
 import { Address, erc20Abi } from "viem";
-import { CHAIN_ZQ2_DEVNET, CHAIN_ZQ2_DOCKERCOMPOSE, getViemClient, MOCK_CHAIN } from "./chainConfig";
+import { CHAIN_ZQ2_PROTOTESTNET, CHAIN_ZQ2_DOCKERCOMPOSE, getViemClient, MOCK_CHAIN } from "./chainConfig";
 import { readContract } from "viem/actions";
 
 export interface StakingPoolDefinition {
@@ -28,10 +28,10 @@ export interface StakingPool {
 
 export interface StakingPoolConfig {
   definition: StakingPoolDefinition;
-  delegatorDataProvider: (definition: StakingPoolDefinition) => Promise<StakingPoolData>;
+  delegatorDataProvider: (definition: StakingPoolDefinition, chainId: number) => Promise<StakingPoolData>;
 }
 
-async function mockDelegatorDataProvider(mockData: StakingPoolData, loadingMiliseconds: number, definition: StakingPoolDefinition): Promise<StakingPoolData> {
+async function mockDelegatorDataProvider(mockData: StakingPoolData, loadingMiliseconds: number, definition: StakingPoolDefinition, chainId: number): Promise<StakingPoolData> {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve(mockData);
@@ -39,9 +39,9 @@ async function mockDelegatorDataProvider(mockData: StakingPoolData, loadingMilis
   });
 }
 
-async function fetchDelegatorDataFromNetwork(mockData: StakingPoolData, definition: StakingPoolDefinition): Promise<StakingPoolData> {
+async function fetchDelegatorDataFromNetwork(mockData: StakingPoolData, definition: StakingPoolDefinition, chainId: number): Promise<StakingPoolData> {
   try {
-    const totalSupply = await readContract(getViemClient(), {
+    const totalSupply = await readContract(getViemClient(chainId), {
       address: definition.tokenAddress as Address,
       abi: erc20Abi,
       functionName: "totalSupply",
@@ -148,17 +148,17 @@ export const stakingPoolsConfigForChainId: Record<string, Array<StakingPoolConfi
       ),
     }
   ],
-  [CHAIN_ZQ2_DEVNET.id]: [
+  [CHAIN_ZQ2_PROTOTESTNET.id]: [
     {
       definition: {
-        id: 'MHg3YTBi',
-        address: '0x7a0b7e6d24ede78260c9ddbd98e828b0e11a8ea2',
-        tokenAddress: '0x9e5c257D1c6dF74EaA54e58CdccaCb924669dc83',
+        id: 'MHg3QTI4',
+        address: '0x7A28eda6899d816e574f7dFB62Cc8A84A4fF92a6',
+        tokenAddress: '0x3fE49722fC4F9F119AB18fE0CF7D340A23C8388b',
         iconUrl: '/static/logo2.webp',
-        name: 'devnet staking',
+        name: 'delegator 1',
         tokenDecimals: 18,
-        tokenSymbol: 'MTK',
-        minimumStake: 100000000000000000000n,
+        tokenSymbol: 'LST1',
+        minimumStake: 100000000000000000000n
       },
       delegatorDataProvider: fetchDelegatorDataFromNetwork.bind(
         null, {
@@ -172,14 +172,14 @@ export const stakingPoolsConfigForChainId: Record<string, Array<StakingPoolConfi
     },
     {
       definition: {
-        id: 'MHg1YmMz',
-        address: '0x5bc3FcC25638725aaA2ED801b7BA21516f718655',
-        tokenAddress: '0x3261f96C307BAd745578fAa470C8dC2841Dd36E0',
+        id: 'MHg2MmYz',
+        address: '0x62f3FC68ba2Ff62b23E73c48010262aD64054032',
+        tokenAddress: '0x7854BFB32CC7a377165Ee3B5C8103a80A07913B2',
         iconUrl: '/static/logo1.webp',
-        name: 'devnet staking 2',
+        name: 'delegator 2',
         tokenDecimals: 18,
-        tokenSymbol: 'MTK',
-        minimumStake: 100000000000000000000n,
+        tokenSymbol: 'LST2',
+        minimumStake: 100000000000000000000n
       },
       delegatorDataProvider: fetchDelegatorDataFromNetwork.bind(
         null, {
diff --git a/src/misc/walletsConfig.ts b/src/misc/walletsConfig.ts
index f1a8cca..18816b3 100644
--- a/src/misc/walletsConfig.ts
+++ b/src/misc/walletsConfig.ts
@@ -1,6 +1,5 @@
 import { DateTime } from "luxon";
 import { getViemClient, MOCK_CHAIN } from "./chainConfig";
-import { getChainId } from "./appConfig";
 import { stakingPoolsConfigForChainId } from "./stakingPoolsConfig";
 import { readContract } from "viem/actions";
 import { Address, erc20Abi, parseUnits } from "viem";
@@ -140,8 +139,8 @@ export const dummyWallets: Array<DummyWallet> = [
   },
 ]
 
-export async function getWalletStakingData(wallet: string): Promise<UserStakingPoolData[]> {
-  if (getChainId() === MOCK_CHAIN.id) {
+export async function getWalletStakingData(wallet: string, chainId: number): Promise<UserStakingPoolData[]> {
+  if (chainId === MOCK_CHAIN.id) {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(dummyWallets.find((dw) => dw.address === wallet)?.stakingTokenAmount || []);
@@ -149,11 +148,11 @@ export async function getWalletStakingData(wallet: string): Promise<UserStakingP
     });
   } else {
     const stakingData: UserStakingPoolData[] = await Promise.all(
-      stakingPoolsConfigForChainId[getChainId()].map(
+      stakingPoolsConfigForChainId[chainId].map(
         async (pool) => {
           return {
             address: pool.definition.address,
-            stakingTokenAmount: await readContract(getViemClient(), {
+            stakingTokenAmount: await readContract(getViemClient(chainId), {
               address: pool.definition.tokenAddress as Address,
               abi: erc20Abi,
               functionName: "balanceOf",
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 1f0747d..b020612 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -6,39 +6,49 @@ import type { AppProps } from "next/app";
 import { WalletConnector } from "@/contexts/walletConnector";
 import DummyWalletSelector from "@/components/dummyWalletSelector";
 import { ConfigProvider } from 'antd';
-import type { ThemeConfig } from 'antd';
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { StakingOperations } from "@/contexts/stakingOperations";
-import { getChainsConfig } from "@/misc/chainConfig";
+import { getWagmiConfig } from "@/misc/chainConfig";
+import { useEffect, useState } from "react";
+import { AppConfig } from "./api/config";
+import { AppConfigStorage } from "@/contexts/appConfigStorage";
 
+export default function App({ Component, pageProps }: AppProps) {
+  const queryClient = new QueryClient();
+  const [appConfig, setAppConfig] = useState<AppConfig | null>(null);
 
-const customTheme: ThemeConfig = {
-  token: {
+  useEffect(() => {
+    fetch("/api/config")
+      .then((res) => res.json())
+      .then(setAppConfig)
+      .catch(console.error);
+  }, []);
 
+  
+  if (!appConfig) {
+    return <div>Loading...</div> // APT-1605
   }
-}
-
-export default function App({ Component, pageProps }: AppProps) {
-  const queryClient = new QueryClient();
 
   return (
-    <ConfigProvider theme={customTheme}>
-      <WagmiProvider config={getChainsConfig()}>
-        <QueryClientProvider client={queryClient}>
-          <RainbowKitProvider>
-            <WalletConnector.Provider>
-              <StakingPoolsStorage.Provider>
-                <StakingOperations.Provider>
-                  <Component {...pageProps} />
-                  <DummyWalletSelector />
-                </StakingOperations.Provider>
-              </StakingPoolsStorage.Provider>
-            </WalletConnector.Provider>
-          </RainbowKitProvider>
-        </QueryClientProvider>
-      </WagmiProvider>
-    </ConfigProvider>
+    <AppConfigStorage.Provider initialState={{ appConfig }}>
+      <ConfigProvider>
+        <WagmiProvider config={getWagmiConfig(appConfig.chainId, appConfig.walletConnectPrivateKey)}>
+          <QueryClientProvider client={queryClient}>
+            <RainbowKitProvider>
+              <WalletConnector.Provider>
+                <StakingPoolsStorage.Provider>
+                  <StakingOperations.Provider>
+                    <Component {...pageProps} />
+                    <DummyWalletSelector />
+                  </StakingOperations.Provider>
+                </StakingPoolsStorage.Provider>
+              </WalletConnector.Provider>
+            </RainbowKitProvider>
+          </QueryClientProvider>
+        </WagmiProvider>
+      </ConfigProvider>
+    </AppConfigStorage.Provider>
   );
 }
diff --git a/src/pages/api/config.ts b/src/pages/api/config.ts
new file mode 100644
index 0000000..a8726ee
--- /dev/null
+++ b/src/pages/api/config.ts
@@ -0,0 +1,40 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export type AppConfig = {
+  chainId: number;
+  walletConnectPrivateKey: string;
+};
+
+function getStringFromEnv(name: string): string {
+  const value = process.env[name];
+
+  if (!value) {
+    throw new Error(`${name} is not defined`);
+  }
+
+  return value;
+}
+
+function getNumberFromEnv(name: string): number {
+  const value = getStringFromEnv(name);
+  const number = parseInt(value);
+
+  if (isNaN(number)) {
+    throw new Error(`${name} is not a number`);
+  }
+
+  return number;
+}
+
+const config: AppConfig = {
+  chainId: getNumberFromEnv("ZQ2_STAKING_CHAIN_ID"),
+  walletConnectPrivateKey: getStringFromEnv("ZQ2_STAKING_WALLET_CONNECT_API_KEY"),
+
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<AppConfig>,
+) {
+  res.status(200).json(config);
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8996474..1879962 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,6 +2,7 @@ import LoginView from '@/components/loginView';
 import StakingPoolDetailsView from '@/components/stakingPoolDetailsView';
 import StakingPoolsList from '@/components/stakingPoolsList';
 import WithdrawZilView from '@/components/withdrawZilView';
+import { AppConfigStorage } from '@/contexts/appConfigStorage';
 import { StakingOperations } from '@/contexts/stakingOperations';
 import { StakingPoolsStorage } from '@/contexts/stakingPoolsStorage';
 import { ConnectedWalletType, WalletConnector } from '@/contexts/walletConnector';
@@ -14,6 +15,10 @@ import Image from 'next/image';
 import { useState } from 'react';
 
 const HomePage = () => {
+  const {
+    appConfig
+  } = AppConfigStorage.useContainer();
+
   const {
     connectDummyWallet,
     isWalletConnected,
@@ -83,7 +88,7 @@ const HomePage = () => {
       />
     )
 
-  const connectWallet = process.env.NEXT_PUBLIC_ENV_CHAIN_ID === MOCK_CHAIN.id.toString() ? (
+  const connectWallet = appConfig.chainId === MOCK_CHAIN.id ? (
     <Button
         type="primary"
         onClick={connectDummyWallet}
diff --git a/src/script/fetchPoolStaticData.ts b/src/script/fetchPoolStaticData.ts
index 0eae37d..269351b 100644
--- a/src/script/fetchPoolStaticData.ts
+++ b/src/script/fetchPoolStaticData.ts
@@ -43,9 +43,9 @@ const argv = yargs(hideBin(process.argv))
     console.log(`Network RPC URL: ${argv.network_id}`);
     console.log(`Contract Address: ${argv.contract_address}`);
 
-    process.env.NEXT_PUBLIC_ENV_CHAIN_ID = argv.network_id;
+    const chainid = parseInt(argv.network_id);
 
-    const tokenAddress = await readContract(getViemClient(), {
+    const tokenAddress = await readContract(getViemClient(chainid), {
       address: argv.contract_address as Address,
       abi: delegatorAbi,
       functionName: "getLST",
@@ -56,17 +56,17 @@ const argv = yargs(hideBin(process.argv))
       tokenSymbol,
       minimumStake,
     ] = await Promise.all([
-      readContract(getViemClient(), {
+      readContract(getViemClient(chainid), {
         address: tokenAddress as Address,
         abi: erc20Abi,
         functionName: "decimals",
       }),
-      readContract(getViemClient(), {
+      readContract(getViemClient(chainid), {
         address: tokenAddress as Address,
         abi: erc20Abi,
         functionName: "symbol",
       }),
-      readContract(getViemClient(), {
+      readContract(getViemClient(chainid), {
         address: argv.contract_address as Address,
         abi: delegatorAbi,
         functionName: "MIN_DELEGATION",
diff --git a/zenv/z.yaml b/zenv/z.yaml
index d7d6d56..bef98a9 100644
--- a/zenv/z.yaml
+++ b/zenv/z.yaml
@@ -20,7 +20,7 @@ clusters:
             is_entrypoint: true
             env_vars:
               - name: ZQ2_STAKING_CHAIN_ID
-                value: 33469
+                value: 33103
             secrets:
               - name: ZQ2_STAKING_WALLET_CONNECT_API_KEY
                 from: zq2_staking.wallet_connect_api_key