fix: add web3mailAppAddress and explorerUrl to SUPPORTED_CHAINS configuration

abbesBenayache · abbesBenayache · commit 1de86f4573dc · 2025-10-17T15:52:20.000+02:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,21 +1,24 @@
-import { useState } from 'react';
 import { Address } from '@iexec/dataprotector';
+import { useState } from 'react';
+import './App.css';
+import loader from './assets/loader.gif';
+import successIcon from './assets/success.png';
+import {
+  getDataProtectorCoreClient,
+  initDataProtectorClient,
+} from './externals/dataProtectorClient';
+import { useWalletConnection } from './hooks/useWalletConnection';
 import {
   AddressOrEnsName,
   checkIsConnected,
-  IEXEC_EXPLORER_URL,
-  WEB3MAIL_APP_ENS,
   SUPPORTED_CHAINS,
+  WEB3MAIL_APP_ENS,
 } from './utils/utils.ts';
-import { getDataProtectorCoreClient, initDataProtectorClient } from './externals/dataProtectorClient';
-import { useWalletConnection } from './hooks/useWalletConnection';
-import './App.css';
-import loader from './assets/loader.gif';
-import successIcon from './assets/success.png';
+import { NULL_ADDRESS } from 'iexec/utils';
 
 export default function App() {
   const { isConnected, address, chainId } = useWalletConnection();
-  const [selectedChain, setSelectedChain] = useState(SUPPORTED_CHAINS[0].id);
+  const [selectedChain, setSelectedChain] = useState(SUPPORTED_CHAINS[2].id);
   const [protectedData, setProtectedData] = useState<Address | ''>('');
   const [authorizedUser, setAuthorizedUser] = useState<AddressOrEnsName | ''>(
     ''
@@ -43,7 +46,7 @@ export default function App() {
     }
 
     // Find the chain configuration
-    const chain = SUPPORTED_CHAINS.find(c => c.id === targetChainId);
+    const chain = SUPPORTED_CHAINS.find((c) => c.id === targetChainId);
     if (!chain) {
       throw new Error(`Chain with ID ${targetChainId} not supported`);
     }
@@ -81,7 +84,9 @@ export default function App() {
     }
   };
 
-  const handleChainChange = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleChainChange = async (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
     const newChainId = Number(event.target.value);
     setSelectedChain(newChainId);
 
@@ -112,7 +117,7 @@ export default function App() {
       // Reinitialize the DataProtector client with the correct chain
       await initDataProtectorClient({
         provider: window.ethereum,
-        chainId: selectedChain
+        chainId: selectedChain,
       });
     } catch (err) {
       setErrorProtect('Please install MetaMask or switch to the correct chain');
@@ -128,11 +133,10 @@ export default function App() {
     try {
       setLoadingProtect(true);
       const client = await getDataProtectorCoreClient();
-      const protectedDataResponse =
-        await client.protectData({
-          data,
-          name,
-        });
+      const protectedDataResponse = await client.protectData({
+        data,
+        name,
+      });
       setProtectedData(protectedDataResponse.address as Address);
       setErrorProtect('');
     } catch (error) {
@@ -141,9 +145,13 @@ export default function App() {
 
       // Provide more specific error messages
       if (String(error).includes('Internal JSON-RPC error')) {
-        setErrorProtect('RPC Error: Please check your network connection and ensure you have sufficient xRLC for gas fees on Bellecour');
+        setErrorProtect(
+          'RPC Error: Please check your network connection and ensure you have sufficient xRLC for gas fees on Bellecour'
+        );
       } else if (String(error).includes('insufficient funds')) {
-        setErrorProtect('Insufficient funds: Please ensure you have enough xRLC tokens for gas fees');
+        setErrorProtect(
+          'Insufficient funds: Please ensure you have enough xRLC tokens for gas fees'
+        );
       } else if (String(error).includes('user rejected')) {
         setErrorProtect('Transaction rejected by user');
       } else {
@@ -162,7 +170,7 @@ export default function App() {
       // Reinitialize the DataProtector client with the correct chain
       await initDataProtectorClient({
         provider: window.ethereum,
-        chainId: selectedChain
+        chainId: selectedChain,
       });
     } catch (err) {
       setErrorGrant('Please install MetaMask or switch to the correct chain');
@@ -179,7 +187,7 @@ export default function App() {
       await client.grantAccess({
         protectedData,
         authorizedUser: userAddress,
-        authorizedApp: WEB3MAIL_APP_ENS,
+        authorizedApp: SUPPORTED_CHAINS.find((c) => c.id === selectedChain)?.web3mailAppAddress as Address,
         numberOfAccess,
       });
       setAuthorizedUser(userAddress);
@@ -200,7 +208,7 @@ export default function App() {
       // Reinitialize the DataProtector client with the correct chain
       await initDataProtectorClient({
         provider: window.ethereum,
-        chainId: selectedChain
+        chainId: selectedChain,
       });
     } catch (err) {
       setErrorRevoke('Please install MetaMask or switch to the correct chain');
@@ -210,12 +218,11 @@ export default function App() {
     try {
       setLoadingRevoke(true);
       const client = await getDataProtectorCoreClient();
-      const allGrantedAccess =
-        await client.getGrantedAccess({
-          protectedData,
-          authorizedUser,
-          authorizedApp: WEB3MAIL_APP_ENS,
-        });
+      const allGrantedAccess = await client.getGrantedAccess({
+        protectedData,
+        authorizedUser,
+        authorizedApp: SUPPORTED_CHAINS.find((c) => c.id === selectedChain)?.web3mailAppAddress as Address,
+      });
       if (allGrantedAccess.count === 0) {
         throw new Error('No access to revoke');
       }
@@ -242,7 +249,9 @@ export default function App() {
     setName(event.target.value);
   };
 
-  const handleNumberOfAccessChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleNumberOfAccessChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     setNumberOfAccess(Number(event.target.value));
   };
 
@@ -258,13 +267,31 @@ export default function App() {
   return (
     <>
       {/* Chain Selection */}
-      <div style={{ marginBottom: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
-        <h2 style={{ margin: '0 0 10px 0', display: 'flex', alignItems: 'center', gap: '10px' }}>
+      <div
+        style={{
+          marginBottom: '20px',
+          padding: '20px',
+          border: '1px solid #ddd',
+          borderRadius: '8px',
+        }}
+      >
+        <h2
+          style={{
+            margin: '0 0 10px 0',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+          }}
+        >
           Chain Selection
           <select
             value={selectedChain}
             onChange={handleChainChange}
-            style={{ padding: '5px', borderRadius: '4px', border: '1px solid #ccc' }}
+            style={{
+              padding: '5px',
+              borderRadius: '4px',
+              border: '1px solid #ccc',
+            }}
           >
             {SUPPORTED_CHAINS.map((chain) => (
               <option key={chain.id} value={chain.id}>
@@ -274,22 +301,28 @@ export default function App() {
           </select>
         </h2>
         <p style={{ margin: '5px 0', color: '#666' }}>
-          Selected chain: {SUPPORTED_CHAINS.find(c => c.id === selectedChain)?.name} (ID: {selectedChain})
+          Selected chain:{' '}
+          {SUPPORTED_CHAINS.find((c) => c.id === selectedChain)?.name} (ID:{' '}
+          {selectedChain})
         </p>
 
         {/* Wallet Status */}
         <div style={{ marginTop: '10px', fontSize: '14px' }}>
           <p style={{ margin: '2px 0' }}>
-            <strong>Wallet Status:</strong> {isConnected ? 'Connected' : 'Disconnected'}
+            <strong>Wallet Status:</strong>{' '}
+            {isConnected ? 'Connected' : 'Disconnected'}
           </p>
           {address && (
             <p style={{ margin: '2px 0' }}>
-              <strong>Address:</strong> {address.slice(0, 6)}...{address.slice(-4)}
+              <strong>Address:</strong> {address.slice(0, 6)}...
+              {address.slice(-4)}
             </p>
           )}
           {chainId && (
             <p style={{ margin: '2px 0' }}>
-              <strong>Current MetaMask Chain:</strong> {SUPPORTED_CHAINS.find(c => c.id === chainId)?.name || `Chain ${chainId}`}
+              <strong>Current MetaMask Chain:</strong>{' '}
+              {SUPPORTED_CHAINS.find((c) => c.id === chainId)?.name ||
+                `Chain ${chainId}`}
             </p>
           )}
         </div>
@@ -347,7 +380,10 @@ export default function App() {
             />
             Your data has been protected!
             <a
-              href={IEXEC_EXPLORER_URL + protectedData}
+              href={
+                SUPPORTED_CHAINS.find((c) => c.id === selectedChain)
+                  ?.explorerUrl + protectedData
+              }
               rel="noreferrer"
               target="_blank"
             >
diff --git a/src/externals/dataProtectorClient.ts b/src/externals/dataProtectorClient.ts
@@ -14,7 +14,7 @@ export function cleanDataProtectorClient() {
 
 export async function initDataProtectorClient({
   provider,
-  chainId
+  chainId,
 }: {
   provider?: unknown;
   chainId?: number;
@@ -27,7 +27,9 @@ export async function initDataProtectorClient({
   // Only reinitialize if chain has changed
   if (currentChainId !== chainId) {
     try {
-      const dataProtectorParent = new IExecDataProtector(provider as Eip1193Provider);
+      const dataProtectorParent = new IExecDataProtector(
+        provider as Eip1193Provider
+      );
       iExecDataProtectorCore = dataProtectorParent.core;
       currentChainId = chainId || null;
     } catch (error) {
@@ -40,7 +42,9 @@ export async function initDataProtectorClient({
 
 export async function getDataProtectorCoreClient(): Promise<IExecDataProtectorCore> {
   if (!iExecDataProtectorCore) {
-    throw new Error('iExec SDK not initialized. Please connect your wallet first.');
+    throw new Error(
+      'iExec SDK not initialized. Please connect your wallet first.'
+    );
   }
   return iExecDataProtectorCore;
 }
diff --git a/src/hooks/useWalletConnection.ts b/src/hooks/useWalletConnection.ts
@@ -1,5 +1,8 @@
 import { useEffect, useState } from 'react';
-import { cleanDataProtectorClient, initDataProtectorClient } from '../externals/dataProtectorClient';
+import {
+  cleanDataProtectorClient,
+  initDataProtectorClient,
+} from '../externals/dataProtectorClient';
 
 export function useWalletConnection() {
   const [isConnected, setIsConnected] = useState(false);
@@ -27,7 +30,10 @@ export function useWalletConnection() {
           const parsedChainId = parseInt(newChainId, 16);
           setChainId(parsedChainId);
 
-          initDataProtectorClient({ provider: window.ethereum, chainId: parsedChainId });
+          initDataProtectorClient({
+            provider: window.ethereum,
+            chainId: parsedChainId,
+          });
         }
       } catch (error) {
         console.error('Error checking connection:', error);
@@ -41,7 +47,10 @@ export function useWalletConnection() {
         setIsConnected(true);
         setAddress(accounts[0]);
         if (chainId) {
-          initDataProtectorClient({ provider: window.ethereum, chainId: chainId });
+          initDataProtectorClient({
+            provider: window.ethereum,
+            chainId: chainId,
+          });
         }
       } else {
         setIsConnected(false);
@@ -53,15 +62,21 @@ export function useWalletConnection() {
     const handleChainChanged = (newChainHexId: string) => {
       const newChainId = parseInt(newChainHexId, 16);
       setChainId(newChainId);
-      initDataProtectorClient({ provider: window.ethereum, chainId: newChainId });
+      initDataProtectorClient({
+        provider: window.ethereum,
+        chainId: newChainId,
+      });
     };
 
     window.ethereum.on('accountsChanged', handleAccountsChanged);
     window.ethereum.on('chainChanged', handleChainChanged);
 
     return () => {
       if (window.ethereum.removeListener) {
-        window.ethereum.removeListener('accountsChanged', handleAccountsChanged);
+        window.ethereum.removeListener(
+          'accountsChanged',
+          handleAccountsChanged
+        );
         window.ethereum.removeListener('chainChanged', handleChainChanged);
       }
     };
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -15,20 +15,26 @@ export const SUPPORTED_CHAINS = [
     blockExplorerUrl: 'https://blockscout-bellecour.iex.ec',
     tokenSymbol: 'xRLC',
     rpcUrls: ['https://bellecour.iex.ec'],
-  },
-  {
-    id: 42161,
-    name: 'Arbitrum',
-    blockExplorerUrl: 'https://arbiscan.io/',
-    tokenSymbol: 'RLC',
-    rpcUrls: ['https://arb1.arbitrum.io/rpc'],
+    explorerUrl: 'https://explorer.iex.ec/bellecour/dataset/',
+    web3mailAppAddress: 'web3mail.apps.iexec.eth',
   },
   {
     id: 421614,
     name: 'Arbitrum Sepolia',
     blockExplorerUrl: 'https://sepolia.arbiscan.io/',
     tokenSymbol: 'RLC',
     rpcUrls: ['https://sepolia-rollup.arbitrum.io/rpc'],
+    explorerUrl: 'https://explorer.iex.ec/arbitrum-sepolia-testnet/dataset/',
+    web3mailAppAddress: '0x54f48937d1a26dd250dc8adbef07bc76f6e27df3',
+  },
+  {
+    id: 42161,
+    name: 'Arbitrum',
+    blockExplorerUrl: 'https://arbiscan.io/',
+    tokenSymbol: 'RLC',
+    rpcUrls: ['https://arb1.arbitrum.io/rpc', 'https://1rpc.io/arb'],
+    explorerUrl: 'https://explorer.iex.ec/abritrum-mainnet/dataset/',
+    web3mailAppAddress: '0xcf0289a65a455a8d3c90153b796e8133e985b26c',
   },
 ];
 
@@ -46,10 +52,12 @@ export async function checkCurrentChain(selectedChainId?: number) {
     params: [],
   });
 
-  const targetChainId = selectedChainId ? `0x${selectedChainId.toString(16)}` : IEXEC_CHAIN_ID;
+  const targetChainId = selectedChainId
+    ? `0x${selectedChainId.toString(16)}`
+    : IEXEC_CHAIN_ID;
 
   if (currentChainId !== targetChainId) {
-    const chain = SUPPORTED_CHAINS.find(c => c.id === selectedChainId);
+    const chain = SUPPORTED_CHAINS.find((c) => c.id === selectedChainId);
     if (!chain) {
       throw new Error(`Chain with ID ${selectedChainId} not supported`);
     }
