Update dependencies and enhance documentation:

- Bump versions of @iexec/dataprotector, @iexec/web3mail, and @iexec/web3telegram.
- Add ChainSelector component to helloWorld tutorial for network selection.
- Improve links in ProtectData and buildIApp tutorials for better clarity.
- Implement chain change handling in GrantAccess and ProtectData components.

Author: Le-Caignec

package-lock.json

@@ -9,10 +9,10 @@
     "format": "prettier --ignore-path .gitignore --write ."
   },
   "dependencies": {
-    "@iexec/dataprotector": "^2.0.0-beta.17",
+    "@iexec/dataprotector": "^2.0.0-beta.19",
     "@iexec/dataprotector-deserializer": "^0.1.1",
-    "@iexec/web3mail": "^1.2.2",
-    "@iexec/web3telegram": "^0.1.0-alpha.1",
+    "@iexec/web3mail": "^1.5.0",
+    "@iexec/web3telegram": "^0.1.0-alpha.4",
     "@reown/appkit": "^1.7.17",
     "@reown/appkit-adapter-wagmi": "^1.7.17",
     "@tailwindcss/vite": "^4.1.11",

package.json

@@ -68,8 +68,26 @@ const userStore = useUserStore();
 // Data
 const supportedChains = getSupportedChains();
 
+// Default initialization: check first if wallet is connected
+if (!userStore.chainId) {
+  if (chainId.value) {
+    // If wallet is connected, use its chain
+    const walletChain = getChainById(chainId.value);
+    if (walletChain) {
+      userStore.setSelectedChain(walletChain);
+    }
+  } else {
+    // Otherwise, use Bellecour as default
+    const defaultChain = getChainById(0x86); // Bellecour
+    if (defaultChain) {
+      userStore.setSelectedChain(defaultChain);
+    }
+  }
+}
+
 // Computed
 const selectedChain = computed(() => {
+  // Priority: 1. Connected wallet chain, 2. Selected chain in store
   const currentChainId = chainId.value || userStore.chainId;
   return currentChainId ? getChainById(currentChainId) : undefined;
 });
@@ -91,6 +109,7 @@ const selectedChainId = computed({
   },
 });
 
+// Watch to synchronize store with wallet chain
 watch(chainId, (newChainId) => {
   if (newChainId) {
     const chain = getChainById(newChainId);

src/components/ChainSelector.vue

@@ -7,12 +7,24 @@ description:
 
 <script setup>
 import InfoIcon from '@/components/InfoIcon.vue'
+import ChainSelector from '@/components/ChainSelector.vue'
 </script>
 
 # 👋 Welcome to iExec
 
 > Reading time 🕒 2 mins
 
+<div class="mb-6 p-4 bg-[var(--vp-c-bg-soft)] rounded-lg border border-[var(--vp-c-divider)]">
+  <div class="flex items-center gap-3 mb-3">
+    <span class="text-lg">🌐</span>
+    <h3 class="m-0 text-lg font-medium">Select Your Network</h3>
+  </div>
+  <div class="flex items-center gap-3">
+    <span class="text-sm font-medium">Network:</span>
+    <ChainSelector />
+  </div>
+</div>
+
 <div class="bg-gradient-to-r from-[#fcd15a] to-[#ffad4d] rounded-[6px] px-8 pb-4 text-gray-800 max-w-3xl mx-auto mb-6">
   <h2 class="text-2xl font-bold mt-0 border-none!">Start Your Web3 Privacy Journey</h2>
   <p>And learn how to build Privacy-preserving decentralized applications (dApps) with iExec in this interactive guide.</p>

src/documentation/helloWorld.md

@@ -46,7 +46,7 @@ their dApps with these key features:
   and user experience.
 
 <div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p class="m-0!">DataProtector interacts with iExec's <a href="https://chainlist.org/?search=bellecour" target="_blank">Bellecour sidechain</a>, which is gasless, meaning you can use it completely free without needing any tokens!</p>
+  <p class="m-0!">DataProtector interacts with iExec's <a href="https://chainlist.org/chain/134" target="_blank">Bellecour sidechain</a>, which is gasless, meaning you can use it completely free without needing any tokens!</p>
 </div>
 
 ## 🧩 Let's Create Protected Data

src/documentation/helloWorld/2-protectData.md

@@ -15,7 +15,7 @@ import InfoIcon from '@/components/InfoIcon.vue'
 
 <div class="bg-gradient-to-r from-[#fcd15a] to-[#ffad4d] rounded-[6px] px-8 pb-4 text-gray-800 max-w-3xl mx-auto mb-6">
   <h2 class="text-2xl font-bold mt-0 border-none!">Time to build!</h2>
-  <p>Let's build an iApp that can process protected data in a secure environment using the <a href="/documentation/build-iapp/iapp-generator" target="_blank">iExec iApp generator tool</a>. This tool helps you create, test and deploy iApps with just a few commands.</p>
+  <p>Let's build an iApp that can process protected data in a secure environment using the <a href="/documentation/build-iapp/iapp-generator" target="_blank" class="!text-gray-900 !font-bold underline hover:!text-black">iExec iApp generator tool</a>. This tool helps you create, test and deploy iApps with just a few commands.</p>
 </div>
 
 If you wanna explore and deep dive in the CLI. You can check the

src/documentation/helloWorld/3-buildIApp.md

@@ -104,13 +104,14 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { Icon } from '@iconify/vue';
 import { IExecDataProtectorCore } from '@iexec/dataprotector';
 import Button from '@/components/ui/Button.vue';
 import ReownButton from './ReownButton.vue';
 import { useAccount } from '@wagmi/vue';
 import { useWalletConnection } from '../../hooks/useWalletConnection.vue';
+import useUserStore from '@/stores/useUser.store';
 
 const { connector } = useAccount();
 const {
@@ -119,12 +120,33 @@ const {
   protectedDataAddress,
   onWalletConnected,
 } = useWalletConnection();
+const userStore = useUserStore();
 
 const authorizedApp = ref('');
 const isLoadingGrant = ref(false);
 const grantError = ref(null);
 const grantedAccess = ref(null);
 
+// Watch to clear data when chain changes
+watch(
+  () => userStore.getCurrentChainId(),
+  (newChainId, oldChainId) => {
+    if (oldChainId && newChainId && oldChainId !== newChainId) {
+      console.log(
+        'Chain changed, clearing grant access data:',
+        oldChainId,
+        '->',
+        newChainId
+      );
+      // Clear granted access data
+      grantedAccess.value = null;
+      // Reset form
+      authorizedApp.value = '';
+      grantError.value = null;
+    }
+  }
+);
+
 const grantAccess = async () => {
   try {
     if (!web3Provider.value) {
@@ -141,11 +163,8 @@ const grantAccess = async () => {
     }
     isLoadingGrant.value = true;
     grantError.value = null;
-    const dataProtectorCore = new IExecDataProtectorCore(web3Provider.value, {
-      iexecOptions: {
-        smsURL: 'https://sms.scone-debug.v8-bellecour.iex.ec',
-      },
-    });
+
+    const dataProtectorCore = new IExecDataProtectorCore(web3Provider.value);
 
     const grantedAccessResult = await dataProtectorCore.grantAccess({
       protectedData: protectedDataAddress?.value,

src/modules/helloWorld/GrantAccess.vue

@@ -5,11 +5,12 @@
     >
       Connect Your Wallet
       <a
-        href="https://chainlist.org/?search=bellecour"
+        :href="`https://chainlist.org/chain/${userStore.getCurrentChainId() || 134}`"
         target="_blank"
         class="text-fuchsia-700 underline hover:text-fuchsia-900"
-        >(iExec network)</a
       >
+        ({{ networkName }})
+      </a>
       :
       <ReownButton />
     </div>
@@ -75,12 +76,16 @@
       <p class="mt-4">
         You can check it on
         <a
-          :href="`https://explorer.iex.ec/bellecour/dataset/${protectedDataAddress}`"
+          :href="explorerUrl"
           target="_blank"
           rel="noopener noreferrer"
           class="font-medium text-green-600 underline hover:text-green-800"
         >
-          the iExec explorer
+          {{
+            userStore.getCurrentChainId() === 42161
+              ? 'the Arbitrum explorer'
+              : 'the iExec explorer'
+          }}
         </a>
       </p>
       <p class="mt-2">
@@ -104,13 +109,14 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { Icon } from '@iconify/vue';
 import { IExecDataProtectorCore } from '@iexec/dataprotector';
 import Button from '@/components/ui/Button.vue';
 import ReownButton from './ReownButton.vue';
 import { useAccount } from '@wagmi/vue';
 import { useWalletConnection } from '../../hooks/useWalletConnection.vue';
+import useUserStore from '@/stores/useUser.store';
 
 const { connector } = useAccount();
 const {
@@ -119,11 +125,50 @@ const {
   protectedDataAddress,
   protectedDataIpfsAddress,
 } = useWalletConnection();
+const userStore = useUserStore();
 
 const contentToProtect = ref('');
 const isLoadingProtect = ref(false);
 const protectError = ref(null);
 
+// Computed property for explorer URL based on selected chain
+const explorerUrl = computed(() => {
+  const currentChainId = userStore.getCurrentChainId();
+  const networkPath =
+    currentChainId === 42161 ? 'arbitrum-mainnet' : 'bellecour';
+  return `https://explorer.iex.ec/${networkPath}/dataset/${protectedDataAddress.value}`;
+});
+
+// Computed property for network name
+const networkName = computed(() => {
+  const currentChain = userStore.getCurrentChain();
+  return currentChain?.name || 'Unknown network';
+});
+
+// Watch to clear protected data when chain changes
+watch(
+  () => userStore.getCurrentChainId(),
+  (newChainId, oldChainId) => {
+    if (oldChainId && newChainId && oldChainId !== newChainId) {
+      console.log(
+        'Chain changed, clearing protected data:',
+        oldChainId,
+        '->',
+        newChainId
+      );
+      // Clear protected data
+      protectedDataAddress.value = '';
+      protectedDataIpfsAddress.value = '';
+      // Clear localStorage
+      localStorage.removeItem('protectedDataAddress');
+      localStorage.removeItem('protectedDataIpfsAddress');
+      // Reset form
+      contentToProtect.value = '';
+      protectError.value = null;
+    }
+  }
+);
+
 async function protectData() {
   try {
     if (!web3Provider.value) {