Verify chain ID when connecting wallet at subscription page

README.md

@@ -2,6 +2,8 @@
 
 Default frontend for [Mitra](https://codeberg.org/silverpill/mitra).
 
+It is designed to work with Ethereum and requires a browser wallet (e.g. MetaMask).
+
 <img width="600" src="screenshot.png" alt="screenshot">
 
 ## Requirements

src/api/instance.ts

@@ -9,6 +9,7 @@ export interface InstanceInfo {
   registrations: boolean;
   login_message: string;
   post_character_limit: number;
+  blockchain_id: string | null;
   blockchain_explorer_url: string | null;
   blockchain_contract_address: string | null;
   ipfs_gateway_url: string | null;

src/utils/ethereum.ts

@@ -1,6 +1,16 @@
 import { Signer } from "ethers"
 import { Web3Provider } from "@ethersproject/providers"
 
+export function parseCAIP2_chainId(chainId: string): string {
+  const match = chainId.match(/eip155:(\d+)/)
+  if (!match) {
+    throw new Error("invalid chain ID")
+  }
+  const ethereumChainId = parseInt(match[1])
+  // Return chain ID in hex format which is used by wallets
+  return "0x" + ethereumChainId.toString(16)
+}
+
 export function ethereumAddressMatch(address1: string, address2: string): boolean {
   return address1.toLowerCase() === address2.toLowerCase()
 }

src/views/Subscription.vue

@@ -78,7 +78,12 @@ import {
 import Sidebar from "@/components/Sidebar.vue"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"
-import { ethereumAddressMatch, getWallet, getWeb3Provider } from "@/utils/ethereum"
+import {
+  ethereumAddressMatch,
+  getWallet,
+  getWeb3Provider,
+  parseCAIP2_chainId,
+} from "@/utils/ethereum"
 
 const route = useRoute()
 const { currentUser, ensureAuthToken } = $(useCurrentUser())
@@ -110,6 +115,7 @@ function isCurrentUser(): boolean {
 function canConnectWallet(): boolean {
   // Only profiles with verified address can have subscription
   return (
+    Boolean(instance?.blockchain_id) &&
     Boolean(instance?.blockchain_contract_address) &&
     profile !== null &&
     profileEthereumAddress !== null &&
@@ -126,7 +132,7 @@ function disconnectWallet() {
 }
 
 async function connectWallet() {
-  if (!profileEthereumAddress) {
+  if (!profileEthereumAddress || !instance?.blockchain_id) {
     return
   }
   const web3Provider = getWeb3Provider()
@@ -140,8 +146,13 @@ async function connectWallet() {
     disconnectWallet()
     return
   }
+  const instanceChainId = parseCAIP2_chainId(instance.blockchain_id)
   const walletChainId = await web3Provider.send("eth_chainId", [])
-  console.info("chain ID:", walletChainId)
+  if (walletChainId !== instanceChainId) {
+    // Wrong network
+    disconnectWallet()
+    return
+  }
   web3Provider.provider.on("chainChanged", (chainId: string) => {
     disconnectWallet()
   })