feat: add chain switch (#135)

* chore: update dependencies for @iexec/dataprotector, @iexec/web3mail, and @iexec/web3telegram

* feat: add ChainSelector component and integrate chain switching functionality

* feat: include chainId in userStore to enable refresh on chain update

* feat: add whitelist addresses to supported chains and refactor related functions

* feat: refactor chain switching logic and update GrantAccessModal to use dynamic whitelist addresses

* refactor: remove unnecessary console.log statements in AddProtectedData and ProtectedDataList components

* feat: implement useChainChangeRedirect hook and integrate it into SendMessage and ProtectedData components

* refactor: improve code quality

---------

Co-authored-by: paypes <[email protected]>

Author: ErwanDecoster

package-lock.json

@@ -22,9 +22,9 @@
     "@fontsource/space-grotesk": "^5.2.5",
     "@fontsource/space-mono": "^5.2.5",
     "@graphql-codegen/introspection": "^4.0.3",
-    "@iexec/dataprotector": "^2.0.0-beta.18",
-    "@iexec/web3mail": "^1.4.0",
-    "@iexec/web3telegram": "^0.1.0-alpha.3",
+    "@iexec/dataprotector": "^2.0.0-beta.19",
+    "@iexec/web3mail": "^1.5.0",
+    "@iexec/web3telegram": "^0.1.0-alpha.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-select": "^2.1.6",

package.json

@@ -0,0 +1,40 @@
+import { switchChain } from '@wagmi/core';
+import useUserStore from '@/stores/useUser.store.ts';
+import { getSupportedChains } from '@/utils/chain.utils.ts';
+import { wagmiAdapter } from '@/utils/wagmiConfig.ts';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select.tsx';
+
+export function ChainSelector({ className }: { className?: string }) {
+  const { chainId } = useUserStore();
+  const handleChainChange = async (value: string) => {
+    const chainId = Number(value);
+    await switchChain(wagmiAdapter.wagmiConfig, { chainId });
+  };
+
+  const filteredChains = getSupportedChains();
+
+  return (
+    <Select
+      value={chainId?.toString()}
+      onValueChange={handleChainChange}
+      defaultValue="-1"
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder="Select Chain" />
+      </SelectTrigger>
+      <SelectContent className="border-grey-600">
+        {filteredChains.map((chain) => (
+          <SelectItem key={chain.id} value={chain.id.toString()}>
+            <img src={chain.icon} className="size-4" alt="" /> {chain.name}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

src/assets/chain-icons/arbitrum.svg

@@ -7,6 +7,7 @@ import iExecLogo from '../../assets/iexec-logo.svg';
 import { Button } from '../ui/button.tsx';
 import { Label } from '../ui/label.tsx';
 import { Switch } from '../ui/switch.tsx';
+import { ChainSelector } from './ChainSelector.tsx';
 import { navigationItems } from './navigationItems.tsx';
 
 export function NavBar() {
@@ -46,8 +47,9 @@ export function NavBar() {
             WEB3 Messaging
           </div>
         </Link>
+        <ChainSelector className="border-grey-600 mt-4 w-full" />
 
-        <div className="left-navbar text-grey-400 mt-10 flex grow flex-col gap-10">
+        <div className="left-navbar text-grey-400 mt-6 flex grow flex-col gap-10">
           <div className="mt-0.5 grow">
             {navigationItems.map((item, index) => (
               <NavLink