404fdf0 Merge #109 (wallet-connect network change) — radicle-explorer

modified src/components/Modal/ConnectWallet.svelte

@@ -53,7 +53,7 @@

     <div slot="subtitle">
       <div class="text-small">
         WalletConnect<br/>
         <a href="https://walletconnect.org/wallets" class="link">
         <a href="https://walletconnect.com/registry/wallets" class="link">
           View compatible wallets
         </a>
       </div>

modified src/config.json

@@ -63,7 +63,8 @@

     "reverseRegistrar": {
       "address": "0x6F628b68b30Dc3c17f345c9dbBb1E483c2b7aE5c"
     },
     "tokens": []
     "tokens": [],
     "alchemy": { "key": "1T6h-0rxu7SRzKEtmukIoxaJOXazLDNs" }
   },
   "walletConnect": { "bridge": "https://radicle.bridge.walletconnect.org" },
   "ceramic": {

modified src/config.ts

@@ -129,6 +129,10 @@ export class Config {

     );
   }
   changeNetwork(chainId: number): void {
     this.network = ethers.providers.getNetwork(chainId);
   }
   setSigner(signer: ethers.Signer & TypedDataSigner | WalletConnectSigner): void {
     this.signer = signer;
   }

@@ -210,7 +214,7 @@ export class Config {

   }
 }
 function isMetamaskInstalled(): boolean {
 export function isMetamaskInstalled(): boolean {
   const { ethereum } = window;
   return Boolean(ethereum && ethereum.isMetaMask);
 }

@@ -220,8 +224,8 @@ function getProvider(

   config: Record<string, any>,
   metamask: ethers.providers.JsonRpcProvider | null,
 ): ethers.providers.JsonRpcProvider {
   // Use Alchemy in production, on mainnet. Otherwise use Metamask if installed.
   if (network.name === "homestead" && import.meta.env.PROD) {
   // Use Alchemy in production. Otherwise use Metamask if installed.
   if (import.meta.env.PROD) {
     return new ethers.providers.AlchemyWebSocketProvider(network.name, config.alchemy.key);
   } else if (metamask) {
     return metamask;

modified src/session.ts

@@ -2,9 +2,8 @@ import { get, writable, derived } from "svelte/store";

 import type { Readable } from "svelte/store";
 import type { BigNumber } from 'ethers';
 import type { TransactionReceipt, TransactionResponse } from '@ethersproject/providers';
 import { Config, getConfig } from "@app/config";
 import { Config, getConfig, isMetamaskInstalled } from "@app/config";
 import { Unreachable, assert, assertEq } from "@app/error";
 import { formatNetwork } from "@app/utils";
 import * as ethers from "ethers";
 export enum Connection {

@@ -105,12 +104,34 @@ export const loadState = (initial: State): Store => {

           signer.walletConnect.chainId
         );
         // Instead of killing the WalletConnect session, we force the UI to change network
         if (network.chainId !== config.network.chainId) {
           config.walletConnect.client.killSession();
           throw new Error(
             `Network mismatch. Please switch your wallet to ${formatNetwork(config.network)}.`
           );
           config.changeNetwork(network.chainId);
         }
         config.walletConnect.client.on("session_update", async (error, { params: [{ accounts, chainId }] }: { params: [{ accounts: [string]; chainId: number }] }) => {
           if (error) {
             throw error;
           }
           try {
             // We only change accounts if the address has been changed, to avoid unnecessary refreshing.
             if (address !== accounts[0]) changeAccounts(accounts[0]);
             // Check the current chainId, and request Metamask to change, or reload the window to get the correct chain.
             if (chainId !== config.network.chainId) {
               if (isMetamaskInstalled()) {
                 await window.ethereum.request({
                   method: 'wallet_switchEthereumChain',
                   params: [{ chainId: ethers.utils.hexValue(chainId) }]
                 });
               } else {
                 config.changeNetwork(chainId);
                 window.location.reload();
               }
             }
           } catch (e) { console.error(e); }
         });
         store.set({ connection: Connection.Connected, session });
       } catch (e) {
         console.log("WalletConnect: connection failed.");

@@ -245,15 +266,18 @@ window.ethereum?.on('chainChanged', () => {

   // We disconnect the wallet to avoid out of sync state
   // between the account address and IDX DIDs
   disconnectMetamask();
   location.reload();
 });
 // Updates state when user changes accounts
 window.ethereum?.on("accountsChanged", async ([address]: string) => {
   changeAccounts(address);
 });
 export async function changeAccounts(address: string): Promise<void> {
   const config = await getConfig();
   state.setChangedAccount(address);
   state.refreshBalance(config);
 });
 }
 state.subscribe(s => {
   console.log("session.state", s);

modified src/utils.ts

@@ -108,15 +108,6 @@ export function formatHash(hash: string): string {

     + hash.substring(hash.length - 4, hash.length);
 }
 export function formatNetwork(input: { name: string }): string {
   let name = input.name;
   if (name === "homestead") {
     name = "mainnet";
   }
   return capitalize(name);
 }
 export function formatOrg(input: string, config: Config): string {
   if (isAddress(input)) {
     return ethers.utils.getAddress(input);