Feat/region relayer dropdown (#58)

* init skeleton

Created the barebones of the Dropddown and data passing through ClientContext

* Fix State with React-Select

* Draft: Until endPoints are functioning

* Resolved for condition race

Still need to fix the TS typing

* Remove React-Select due to TS bug.

Rewrote with Vanilla Select + Options

* Update ClientContext.tsx

Small fixes and removing old code

* Small fixes + revert yarn lock due to react-select

* yarn upgrade

* Settings hidden at the bottom

dapps/react-dapp-v2/public/assets/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m19.4 44-1-6.3q-.95-.35-2-.95t-1.85-1.25l-5.9 2.7L4 30l5.4-3.95q-.1-.45-.125-1.025Q9.25 24.45 9.25 24q0-.45.025-1.025T9.4 21.95L4 18l4.65-8.2 5.9 2.7q.8-.65 1.85-1.25t2-.9l1-6.35h9.2l1 6.3q.95.35 2.025.925Q32.7 11.8 33.45 12.5l5.9-2.7L44 18l-5.4 3.85q.1.5.125 1.075.025.575.025 1.075t-.025 1.05q-.025.55-.125 1.05L44 30l-4.65 8.2-5.9-2.7q-.8.65-1.825 1.275-1.025.625-2.025.925l-1 6.3ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Zm0-3q-1.45 0-2.475-1.025Q20.5 25.45 20.5 24q0-1.45 1.025-2.475Q22.55 20.5 24 20.5q1.45 0 2.475 1.025Q27.5 22.55 27.5 24q0 1.45-1.025 2.475Q25.45 27.5 24 27.5Zm0-3.5Zm-2.2 17h4.4l.7-5.6q1.65-.4 3.125-1.25T32.7 32.1l5.3 2.3 2-3.6-4.7-3.45q.2-.85.325-1.675.125-.825.125-1.675 0-.85-.1-1.675-.1-.825-.35-1.675L40 17.2l-2-3.6-5.3 2.3q-1.15-1.3-2.6-2.175-1.45-.875-3.2-1.125L26.2 7h-4.4l-.7 5.6q-1.7.35-3.175 1.2-1.475.85-2.625 2.1L10 13.6l-2 3.6 4.7 3.45q-.2.85-.325 1.675-.125.825-.125 1.675 0 .85.125 1.675.125.825.325 1.675L8 30.8l2 3.6 5.3-2.3q1.2 1.2 2.675 2.05Q19.45 35 21.1 35.4Z"/></svg>

dapps/react-dapp-v2/src/components/Dropdown.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { REGIONALIZED_RELAYER_ENDPOINTS } from "../constants/default";
+import styled from "styled-components";
+import Icon from "./Icon";
+import { useState } from "react";
+
+interface DropdownProps {
+  relayerRegion: string;
+  setRelayerRegion?: (relayer: string) => void;
+}
+
+const SelectContainer = styled.select`
+  width: 150px;
+  background: transparent;
+  color: black;
+  height: 30px;
+  border-radius: 4px;
+  padding: 2px;
+  font-size: "1.25em";
+  position: absolute;
+  bottom: 40px;
+  left: 50px;
+  direction: ltr; 
+  unicode-bidi: embed;
+`;
+
+const SelectOption = styled.option`
+  font-size: "1.25em";
+`;
+
+const Dropdown = (props: DropdownProps) => {
+  const { relayerRegion, setRelayerRegion } = props;
+  const [openSelect, setOpenSelect] = useState(false)
+  const selectRef = React.createRef()
+
+  const openDropdown = () => {
+    setOpenSelect(!openSelect)
+  }
+
+  return (
+    <div style={{paddingTop: 72, width: 250, display: "flex", justifyContent: "center", alignItems: "flex-end"}}>
+      <button onClick={openDropdown} style={{background: "transparent"}}>
+          <Icon size={30} src={"/assets/settings.svg"} />
+      </button>
+      {openSelect && ( 
+        <SelectContainer
+          value={relayerRegion}
+          onChange={(e) => setRelayerRegion?.(e?.target?.value)}
+        >
+          <option selected disabled>Relayer Region:</option>
+          {REGIONALIZED_RELAYER_ENDPOINTS.map((e, i) => {
+            return (
+              <SelectOption key={i} value={e.value}>
+                {e.label}
+              </SelectOption>
+            );
+          })}
+        </SelectContainer>)}
+     
+    </div>
+  );
+};
+
+export default Dropdown;

dapps/react-dapp-v2/src/constants/default.ts

@@ -84,3 +84,28 @@ export enum DEFAULT_POLKADOT_EVENTS {}
 
 export const DEFAULT_GITHUB_REPO_URL =
   "https://github.com/WalletConnect/web-examples/tree/main/dapps/react-dapp-v2";
+
+type RelayerType = {
+  value: string | undefined;
+  label: string;
+};
+
+export const REGIONALIZED_RELAYER_ENDPOINTS: RelayerType[] = [
+  {
+    value: DEFAULT_RELAY_URL,
+    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",
+  },
+];

dapps/react-dapp-v2/src/contexts/ClientContext.tsx

@@ -9,6 +9,7 @@ import {
   useEffect,
   useMemo,
   useState,
+  useRef,
 } from "react";
 import { PublicKey } from "@solana/web3.js";
 
@@ -33,12 +34,14 @@ interface IContext {
   disconnect: () => Promise<void>;
   isInitializing: boolean;
   chains: string[];
+  relayerRegion: string;
   pairings: PairingTypes.Struct[];
   accounts: string[];
   solanaPublicKeys?: Record<string, PublicKey>;
   balances: AccountBalances;
   isFetchingBalances: boolean;
   setChains: any;
+  setRelayerRegion: any;
 }
 
 /**
@@ -60,18 +63,23 @@ export function ClientContextProvider({
 
   const [isFetchingBalances, setIsFetchingBalances] = useState(false);
   const [isInitializing, setIsInitializing] = useState(false);
+  const prevRelayerValue = useRef<string>("");
 
   const [balances, setBalances] = useState<AccountBalances>({});
   const [accounts, setAccounts] = useState<string[]>([]);
   const [solanaPublicKeys, setSolanaPublicKeys] =
     useState<Record<string, PublicKey>>();
   const [chains, setChains] = useState<string[]>([]);
+  const [relayerRegion, setRelayerRegion] = useState<string>(
+    DEFAULT_RELAY_URL!
+  );
 
   const reset = () => {
     setSession(undefined);
     setBalances({});
     setAccounts([]);
     setChains([]);
+    setRelayerRegion(DEFAULT_RELAY_URL!);
   };
 
   const getAccountBalances = async (_accounts: string[]) => {
@@ -230,16 +238,18 @@ export function ClientContextProvider({
   const createClient = useCallback(async () => {
     try {
       setIsInitializing(true);
-
+      
       const _client = await Client.init({
         logger: DEFAULT_LOGGER,
-        relayUrl: DEFAULT_RELAY_URL,
+        relayUrl: relayerRegion,
         projectId: DEFAULT_PROJECT_ID,
         metadata: getAppMetadata() || DEFAULT_APP_METADATA,
       });
 
       console.log("CREATED CLIENT: ", _client);
+      console.log("relayerRegion ", relayerRegion);
       setClient(_client);
+      prevRelayerValue.current = relayerRegion;
       await _subscribeToEvents(_client);
       await _checkPersistedState(_client);
     } catch (err) {
@@ -247,13 +257,13 @@ export function ClientContextProvider({
     } finally {
       setIsInitializing(false);
     }
-  }, [_checkPersistedState, _subscribeToEvents]);
+  }, [_checkPersistedState, _subscribeToEvents, relayerRegion]);
 
   useEffect(() => {
-    if (!client) {
+    if (!client || prevRelayerValue.current !== relayerRegion) {
       createClient();
     }
-  }, [client, createClient]);
+  }, [client, createClient, relayerRegion]);
 
   const value = useMemo(
     () => ({
@@ -264,11 +274,13 @@ export function ClientContextProvider({
       accounts,
       solanaPublicKeys,
       chains,
+      relayerRegion,
       client,
       session,
       connect,
       disconnect,
       setChains,
+      setRelayerRegion,
     }),
     [
       pairings,
@@ -278,11 +290,13 @@ export function ClientContextProvider({
       accounts,
       solanaPublicKeys,
       chains,
+      relayerRegion,
       client,
       session,
       connect,
       disconnect,
       setChains,
+      setRelayerRegion,
     ]
   );
 

dapps/react-dapp-v2/src/pages/index.tsx

@@ -1,9 +1,10 @@
 import type { NextPage } from "next";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import Banner from "../components/Banner";
 import Blockchain from "../components/Blockchain";
 import Column from "../components/Column";
+import Dropdown from "../components/Dropdown";
 import Header from "../components/Header";
 import Modal from "../components/Modal";
 import {
@@ -52,11 +53,13 @@ const Home: NextPage = () => {
     connect,
     disconnect,
     chains,
+    relayerRegion,
     accounts,
     balances,
     isFetchingBalances,
     isInitializing,
     setChains,
+    setRelayerRegion,
   } = useWalletConnectClient();
 
   // Use `JsonRpcContext` to provide us with relevant RPC methods and states.
@@ -281,6 +284,10 @@ const Home: NextPage = () => {
           <SConnectButton left onClick={onConnect} disabled={!chains.length}>
             {"Connect"}
           </SConnectButton>
+          <Dropdown
+          relayerRegion={relayerRegion}
+          setRelayerRegion={setRelayerRegion}
+        />
         </SButtonContainer>
       </SLanding>
     ) : (