feat(relayer): Add relayer region to the wallet v2 settings (#64)

* feat(relayer): Add relayer region to the wallet v2 settings

* prettier linting

wallets/react-wallet-v2/src/components/RelayRegionPicker.tsx

@@ -0,0 +1,28 @@
+import { REGIONALIZED_RELAYER_ENDPOINTS } from '@/data/RelayerRegions'
+import SettingsStore from '@/store/SettingsStore'
+import { useSnapshot } from 'valtio'
+
+export default function AccountPicker() {
+  const { relayerRegionURL } = useSnapshot(SettingsStore.state)
+
+  function onSelect(value: string) {
+    SettingsStore.setRelayerRegionURL(value)
+  }
+
+  return (
+    <select
+      value={relayerRegionURL}
+      onChange={e => onSelect(e.currentTarget.value)}
+      aria-label="relayerRegions"
+    >
+      {REGIONALIZED_RELAYER_ENDPOINTS.map((endpoint, index) => {
+        return (
+          <option key={index} value={endpoint.value}>
+            {endpoint.label}
+          </option>
+        )
+      })}
+    </select>
+  )
+}
+

wallets/react-wallet-v2/src/data/RelayerRegions.ts

@@ -0,0 +1,31 @@
+/**
+ * Types
+ */
+
+type RelayerType = {
+  value: string
+  label: string
+}
+
+/**
+ * Relayer Regions
+ */
+export const REGIONALIZED_RELAYER_ENDPOINTS: RelayerType[] = [
+  {
+    value: 'wss://relay.walletconnect.com',
+    label: 'Default'
+  },
+
+  {
+    value: 'wss://us-east-1.relay.walletconnect.com/',
+    label: 'US'
+  },
+  {
+    value: 'wss://eu-central-1.relay.walletconnect.com/',
+    label: 'EU'
+  },
+  {
+    value: 'wss://ap-southeast-1.relay.walletconnect.com/',
+    label: 'Asia Pacific'
+  }
+]

wallets/react-wallet-v2/src/hooks/useInitialization.ts

@@ -4,10 +4,14 @@ import { createOrRestoreEIP155Wallet } from '@/utils/EIP155WalletUtil'
 import { createOrRestoreSolanaWallet } from '@/utils/SolanaWalletUtil'
 import { createOrRestorePolkadotWallet } from '@/utils/PolkadotWalletUtil'
 import { createSignClient } from '@/utils/WalletConnectUtil'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useSnapshot } from 'valtio'
 
 export default function useInitialization() {
   const [initialized, setInitialized] = useState(false)
+  const prevRelayerURLValue = useRef<string>('')
+
+  const { relayerRegionURL } = useSnapshot(SettingsStore.state)
 
   const onInitialize = useCallback(async () => {
     try {
@@ -20,20 +24,25 @@ export default function useInitialization() {
       SettingsStore.setCosmosAddress(cosmosAddresses[0])
       SettingsStore.setSolanaAddress(solanaAddresses[0])
       SettingsStore.setPolkadotAddress(polkadotAddresses[0])
-
+      
-      await createSignClient()
+      await createSignClient(relayerRegionURL)
+      prevRelayerURLValue.current = relayerRegionURL
 
       setInitialized(true)
     } catch (err: unknown) {
       alert(err)
     }
-  }, [])
+  }, [relayerRegionURL])
 
   useEffect(() => {
     if (!initialized) {
       onInitialize()
     }
-  }, [initialized, onInitialize])
+    if (prevRelayerURLValue.current !== relayerRegionURL) {
+      setInitialized(false)
+      onInitialize()
+    }
+  }, [initialized, onInitialize, relayerRegionURL])
 
   return initialized
 }

wallets/react-wallet-v2/src/pages/settings.tsx

@@ -1,4 +1,5 @@
 import PageHeader from '@/components/PageHeader'
+import RelayRegionPicker from '@/components/RelayRegionPicker'
 import SettingsStore from '@/store/SettingsStore'
 import { cosmosWallets } from '@/utils/CosmosWalletUtil'
 import { eip155Wallets } from '@/utils/EIP155WalletUtil'
@@ -43,6 +44,16 @@ export default function SettingsPage() {
 
       <Divider y={2} />
 
+      
+      <Row justify="space-between" align="center">
+        <Text h4 css={{ marginBottom: '$5' }}>
+          Relayer Region
+        </Text>        
+        <RelayRegionPicker/>
+      </Row>
+
+      <Divider y={2} />
+
       <Text css={{ color: '$yellow500', marginBottom: '$5', textAlign: 'left', padding: 0 }}>
         Warning: mnemonics and secret keys are provided for development purposes only and should not
         be used elsewhere!

wallets/react-wallet-v2/src/store/SettingsStore.ts

@@ -10,6 +10,7 @@ interface State {
   cosmosAddress: string
   solanaAddress: string
   polkadotAddress: string
+  relayerRegionURL: string
 }
 
 /**
@@ -21,7 +22,8 @@ const state = proxy<State>({
   eip155Address: '',
   cosmosAddress: '',
   solanaAddress: '',
-  polkadotAddress: ''
+  polkadotAddress: '',
+  relayerRegionURL: ''
 })
 
 /**
@@ -50,6 +52,10 @@ const SettingsStore = {
     state.polkadotAddress = polkadotAddress
   },
 
+  setRelayerRegionURL(relayerRegionURL: string) {
+    state.relayerRegionURL = relayerRegionURL
+  },
+
   toggleTestNets() {
     state.testNets = !state.testNets
     if (state.testNets) {

wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts

@@ -2,10 +2,10 @@ import SignClient from '@walletconnect/sign-client'
 
 export let signClient: SignClient
 
-export async function createSignClient() {
+export async function createSignClient(relayerRegionURL: string) {
   signClient = await SignClient.init({
     projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
-    relayUrl: process.env.NEXT_PUBLIC_RELAY_URL ?? 'wss://relay.walletconnect.com',
+    relayUrl: relayerRegionURL ?? process.env.NEXT_PUBLIC_RELAYER_URL,
     metadata: {
       name: 'React Wallet',
       description: 'React Wallet for WalletConnect',