Merge pull request #769 from threshold-network/fix-wallet-connect-upd…

…ate-issue

Fix update handler validation

## Description

A bug was identified when connecting WalletConnect to Gnosis Safe via the wc
pairing API: Shortly after a user connects their Gnosis Safe vault to the app,
the connection was disconnected. 
Upon investigation, it was discovered that the connection between WalletConnect
and Gnosis Safe was being interrupted due to the chainId format generated after
connecting to Gnosis Safe. This triggered an update that disrupted the
connection because of the way the update validation was structured in App.tsx.

Depending on the format in which the chainId is being passed by a 3rd party
service, it may trigger an update. To handle these edge cases, this PR aims to
add a more comprehensive validation method similarly to what has already been
done previously in the commit
[@3ca72b93ca72b9](3ca72b9).

- [X] - [fix update handler validation](5d0e455)

## Type of change

- [x] 🐛 Bug fix (Non-breaking Change: Fixes an issue)
- [ ]  🛠️ Chore (Non-breaking Change: Doc updates, pkg upgrades, typos, etc..)
- [ ]  💅 New Feature (Breaking/Non-breaking Change)

## Notice

- [x] Have you checked to ensure there aren't other open
[Pull Requests](https://github.com/shapeshift/web/pulls) for the same update/change?

## Issue (if applicable)

closes #768

## Pull Request Type

- [x] New Feature (Breaking/Non-breaking Change)

src/App.tsx

@@ -38,7 +38,7 @@ import { useSubscribeToToppedUpEvent } from "./hooks/useSubscribeToToppedUpEvent
 import { pages } from "./pages"
 import { useCheckBonusEligibility } from "./hooks/useCheckBonusEligibility"
 import { useFetchStakingRewards } from "./hooks/useFetchStakingRewards"
-import { isSameETHAddress } from "./web3/utils"
+import { isSameChainId, isSameETHAddress } from "./web3/utils"
 import { ThresholdProvider } from "./contexts/ThresholdContext"
 import { LedgerLiveAppProvider } from "./contexts/LedgerLiveAppContext"
 import {
@@ -133,17 +133,17 @@ const useSubscribeToVendingMachineContractEvents = () => {
 
 const AppBody = () => {
   const dispatch = useDispatch()
-  const { connector, account, deactivate } = useWeb3React()
+  const { connector, account, chainId, deactivate } = useWeb3React()
 
   useEffect(() => {
     const updateHandler = (update: ConnectorUpdate) => {
       // if chain is changed then just deactivate the current provider and reset
       // store
-      if (update.chainId) {
+      if (update.chainId && !isSameChainId(update.chainId, chainId as number)) {
         dispatch(resetStoreAction())
         deactivate()
       } else if (
-        !update.account ||
+        update.account &&
         !isSameETHAddress(update.account, account as string)
       ) {
         // dispatch(resetStoreAction())

src/web3/utils/address.ts

@@ -4,6 +4,7 @@ import {
 } from "@ethersproject/address"
 import { AddressZero } from "@ethersproject/constants"
 export { unprefixedAndUncheckedAddress } from "../../threshold-ts/utils"
+import { ethers } from "ethers"
 
 export const getAddress = (address: string) => ethersGetAddress(address)
 

src/web3/utils/index.ts

@@ -2,3 +2,4 @@ export * from "./multicall"
 export * from "./events"
 export * from "./address"
 export * from "./files"
+export * from "./network"

src/web3/utils/network.ts

@@ -0,0 +1,9 @@
+import { ethers } from "ethers"
+
+export const toHex = (value: string | number): string =>
+  ethers.utils.hexlify(value)
+
+export const isSameChainId = (
+  chainId1: string | number,
+  chainId2: string | number
+): boolean => toHex(chainId1) === toHex(chainId2)