APT-1507, APT-1601: Prototestnet contracts connected, config refactored

#11

Co-authored-by: Łukasz Kosiak <[email protected]>

.dockerignore

@@ -22,6 +22,7 @@
 ## next.js
 **/.next/
 **/.env*.local
+.env
 
 ## production
 **/build

.env.local_zq2

@@ -1 +1,2 @@
-NEXT_PUBLIC_ENV_CHAIN_ID=32769
+CHAIN_ID=32769
+ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje

.env.mocked

@@ -1 +1,2 @@
-NEXT_PUBLIC_ENV_CHAIN_ID=9999999
+CHAIN_ID=9999999
+ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje

.env.zq2_testnet

@@ -0,0 +1,2 @@
+ZQ2_STAKING_CHAIN_ID=33103
+ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje

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

src/components/loginView.tsx

@@ -1,16 +1,21 @@
+import { AppConfigStorage } from "@/contexts/appConfigStorage";
 import { WalletConnector } from "@/contexts/walletConnector";
 import { MOCK_CHAIN } from "@/misc/chainConfig";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 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}

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>

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

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);

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,15 +46,15 @@ const useStakingPoolsStorage = () => {
 
   useEffect(
     function populateStakingPoolsDefinitionsAndTriggerDataLoading () {
-      const stakingPoolsConfig = stakingPoolsConfigForChainId[getChainId()];
+      const stakingPoolsConfig = stakingPoolsConfigForChainId[appConfig.chainId];
 
       setAvailableStakingPoolsData(stakingPoolsConfig.map((configEntry) => ({
         definition: configEntry.definition,
         data: null,
       })));
 
       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) => {

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) => {

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(),
   });
 }

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