refactor: improve code quality

Author: abbesBenayache

src/config/config.ts

@@ -8,18 +8,24 @@ export const LOCAL_STORAGE_PREFIX = 'Web3Messaging';
 export const CONTACT_URL =
   'https://airtable.com/appDiKrXe5wJgGpdP/pagm2GF2eNdX2ysw3/form';
 
+// Chain ID constants
+export const BELLECOUR_CHAIN_ID = 134;
+export const ARBITRUM_CHAIN_ID = 42161;
+
+// Workerpool configuration
+export const WORKERPOOL_ADDRESS_OR_ENS = 'prod-v8-learn.main.pools.iexec.eth';
+export const WORKERPOOL_MAX_PRICE = 0.1 * 1e9; // 0.1 RLC in wei
+
 /**
  * See smart-contract transactions:
  * https://blockscout-bellecour.iex.ec/address/0x781482C39CcE25546583EaC4957Fb7Bf04C277D2
  *
  * See all idapps in the whitelist:
  * https://explorer.iex.ec/bellecour/address/0x0c6c77a11068db9fadfba25182e02863361f58da
  */
-export const WORKERPOOL_ADDRESS_OR_ENS = 'prod-v8-learn.main.pools.iexec.eth';
-
 export const SUPPORTED_CHAINS = [
   {
-    id: 134,
+    id: BELLECOUR_CHAIN_ID,
     name: 'Bellecour',
     slug: 'bellecour',
     color: '#F4942566',
@@ -37,7 +43,7 @@ export const SUPPORTED_CHAINS = [
     },
   },
   {
-    id: 42161,
+    id: ARBITRUM_CHAIN_ID,
     name: 'Arbitrum',
     slug: 'arbitrum-mainnet',
     color: '#F4942566',

src/hooks/useWatchAccount.ts

@@ -19,10 +19,8 @@ export function useWatchAccount() {
     setConnector(connector);
     setIsConnected(isConnected);
     setAddress(address);
-    if (accountChain?.id && chainId !== accountChain?.id) {
-      setTimeout(() => {
-        setChainId(accountChain?.id);
-      }, 10);
+    if (accountChain?.id && chainId !== accountChain.id) {
+      setChainId(accountChain.id);
     }
 
     // Update dataProtector client
@@ -31,5 +29,5 @@ export function useWatchAccount() {
       return;
     }
     cleanIExecSDKs();
-  }, [connector, status, address, accountChain]);
+  }, [connector, status, address, accountChain, chainId, setConnector, setIsConnected, setAddress, setChainId]);
 }

src/utils/chain.utils.ts

@@ -4,24 +4,24 @@ export function getSupportedChains() {
   return SUPPORTED_CHAINS;
 }
 
-export function getSubgraphUrl(chainId: number) {
-  const subgraphUrl = getSupportedChains().find(
-    (chain) => chain.id === chainId
-  )?.subgraphUrl;
-  if (!subgraphUrl) {
+export function getSubgraphUrl(chainId: number): string {
+  const chain = getSupportedChains().find((chain) => chain.id === chainId);
+  if (!chain?.subgraphUrl) {
     throw new Error(`Subgraph URL not found for chain ID: ${chainId}`);
   }
-  return subgraphUrl;
+  return chain.subgraphUrl;
 }
 
-export function getWhitelistAddresses(chainId: number | undefined) {
+export function getWhitelistAddresses(chainId: number | undefined): { web3mail: string; web3telegram: string } {
   if (chainId === undefined) {
     throw new Error('Chain ID is required to get whitelist addresses');
   }
+
   const chain = getSupportedChains().find((chain) => chain.id === chainId);
   if (!chain?.whitelist) {
     throw new Error(`Whitelist not found for chain ID: ${chainId}`);
   }
+
   return chain.whitelist;
 }
 
@@ -33,7 +33,22 @@ export function getChainFromId(id: number | undefined) {
   return getSupportedChains().find((c) => c.id === id);
 }
 
-export function getBlockExplorerUrl(chainId: number) {
+export function getBlockExplorerUrl(chainId: number): string {
+  const chain = getChainFromId(chainId);
+  if (!chain?.blockExplorerUrl) {
+    console.warn(`Block explorer URL not found for chain ID: ${chainId}, using default`);
+    return 'https://blockscout.com/';
+  }
+  return chain.blockExplorerUrl;
+}
+
+// Helper function to check if a chain is supported
+export function isChainSupported(chainId: number): boolean {
+  return getSupportedChains().some(chain => chain.id === chainId);
+}
+
+// Helper function to get chain name
+export function getChainName(chainId: number): string {
   const chain = getChainFromId(chainId);
-  return chain?.blockExplorerUrl ?? 'https://blockscout.com/';
+  return chain?.name || `Unknown Chain (${chainId})`;
 }

src/views/contact/sendMessage.tsx

@@ -1,4 +1,8 @@
-import { WORKERPOOL_ADDRESS_OR_ENS } from '@/config/config';
+import {
+  WORKERPOOL_ADDRESS_OR_ENS,
+  BELLECOUR_CHAIN_ID,
+  WORKERPOOL_MAX_PRICE
+} from '@/config/config';
 import { Address } from '@/types';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
@@ -73,6 +77,12 @@ export default function SendMessage() {
     protectedData.data?.schema &&
     getDataType(protectedData.data?.schema) === 'mail';
 
+  // Helper function to create workerpool configuration
+  const getWorkerpoolConfig = () => ({
+    workerpoolAddressOrEns: chainId === BELLECOUR_CHAIN_ID ? WORKERPOOL_ADDRESS_OR_ENS : undefined,
+    workerpoolMaxPrice: WORKERPOOL_MAX_PRICE,
+  });
+
   const handleChange = (e: { target: { name: string; value: string } }) => {
     const { name, value } = e.target;
     setFormData((prevData) => ({
@@ -116,7 +126,8 @@ export default function SendMessage() {
           senderName: formData.senderName,
           contentType: formData.contentType,
           emailContent: formData.messageContent,
-          workerpoolAddressOrEns: WORKERPOOL_ADDRESS_OR_ENS,
+          workerpoolAddressOrEns: getWorkerpoolConfig().workerpoolAddressOrEns,
+          workerpoolMaxPrice: getWorkerpoolConfig().workerpoolMaxPrice,
         });
         return sendMail;
       } else {
@@ -126,7 +137,8 @@ export default function SendMessage() {
           protectedData: protectedDataAddress!,
           senderName: formData.senderName,
           telegramContent: formData.messageContent,
-          workerpoolAddressOrEns: WORKERPOOL_ADDRESS_OR_ENS,
+          workerpoolAddressOrEns: getWorkerpoolConfig().workerpoolAddressOrEns,
+          workerpoolMaxPrice: getWorkerpoolConfig().workerpoolMaxPrice,
         });
         return sendTelegram;
       }