From 0bfc695bf38be62c4ad02b046b308202c544fdc4 Mon Sep 17 00:00:00 2001
From: gary <1032230992@qq.com>
Date: Sat, 7 May 2022 18:15:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E8=B4=A6=E5=8F=B7?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc                            |  1 +
 src/App.tsx                          |  3 ++-
 src/hooks/useAccountEventListener.ts | 26 ++++++++++++++++++++++++++
 src/hooks/useEagerConnect.ts         |  8 +++++++-
 src/state/userInfo/hooks.ts          |  2 +-
 src/utils/clearUserStates.ts         | 14 ++++++++++++++
 6 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useAccountEventListener.ts
 create mode 100644 src/utils/clearUserStates.ts

diff --git a/.eslintrc b/.eslintrc
index bc519ce..a523d98 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -29,6 +29,7 @@
     "import/no-extraneous-dependencies": 0,
     "no-unused-expressions":0,
     "jsx-a11y/media-has-caption": 0,
+    "import/prefer-default-export":0,
     // Exchange
     "no-param-reassign": ["error", { "props": true, "ignorePropertyModificationsFor": ["state", "memo"] }],
     "react/require-default-props": 0,
diff --git a/src/App.tsx b/src/App.tsx
index 5a28172..43bf629 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,13 +2,13 @@ import React, { lazy, useEffect } from 'react'
 import { Router, Redirect, Route, Switch } from 'react-router-dom'
 import { ResetCSS } from '@pancakeswap/uikit'
 import { useDispatch } from 'react-redux'
-import { uccnDetail, indexInfo } from 'services/user'
 import BigNumber from 'bignumber.js'
 import useEagerConnect from 'hooks/useEagerConnect'
 import { usePollCoreFarmData, useFetchProfile, usePollBlockNumber } from 'state/hooks'
 import { DatePickerPortal } from 'components/DatePicker'
 import { initAxios } from 'utils/request'
 import useToast from 'hooks/useToast'
+import { useAccountEventListener } from 'hooks/useAccountEventListener'
 import { fetchUserInfo, clearUserInfo } from 'state/actions'
 import { useAccount } from 'state/userInfo/hooks'
 import GlobalStyle from './style/Global'
@@ -66,6 +66,7 @@ const App: React.FC = () => {
   useEagerConnect()
   useFetchProfile()
   usePollCoreFarmData()
+  useAccountEventListener()
   const dispatch = useDispatch()
   const toast = useToast()
   const account = useAccount()
diff --git a/src/hooks/useAccountEventListener.ts b/src/hooks/useAccountEventListener.ts
new file mode 100644
index 0000000..e768a76
--- /dev/null
+++ b/src/hooks/useAccountEventListener.ts
@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import { useWeb3React } from '@web3-react/core'
+import { clearUserStates } from 'utils/clearUserStates'
+import { useAppDispatch } from '../state'
+
+export const useAccountEventListener = () => {
+  const { account, chainId, connector } = useWeb3React()
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if (account && connector) {
+      const handleEvent = () => {
+        clearUserStates(dispatch)
+      }
+
+      connector.addListener('Web3ReactDeactivate', handleEvent)
+      connector.addListener('Web3ReactUpdate', handleEvent)
+
+      return () => {
+        connector.removeListener('Web3ReactDeactivate', handleEvent)
+        connector.removeListener('Web3ReactUpdate', handleEvent)
+      }
+    }
+    return undefined
+  }, [account, chainId, dispatch, connector])
+}
diff --git a/src/hooks/useEagerConnect.ts b/src/hooks/useEagerConnect.ts
index 856e577..99c7072 100644
--- a/src/hooks/useEagerConnect.ts
+++ b/src/hooks/useEagerConnect.ts
@@ -1,6 +1,8 @@
 import { useEffect } from 'react'
 import { connectorLocalStorageKey, ConnectorNames } from '@pancakeswap/uikit'
 import useAuth from 'hooks/useAuth'
+import { useDispatch } from 'react-redux'
+import { clearUserInfo } from 'state/actions'
 
 const _binanceChainListener = async () =>
   new Promise<void>((resolve) =>
@@ -18,6 +20,7 @@ const _binanceChainListener = async () =>
 
 const useEagerConnect = () => {
   const { login } = useAuth()
+  const dispatch = useDispatch()
 
   useEffect(() => {
     const connectorId = window.localStorage.getItem(connectorLocalStorageKey) as ConnectorNames
@@ -35,8 +38,11 @@ const useEagerConnect = () => {
       }
 
       login(connectorId)
+    } else {
+      //  要清掉用户信息
+      dispatch(clearUserInfo())
     }
-  }, [login])
+  }, [login, dispatch])
 }
 
 export default useEagerConnect
diff --git a/src/state/userInfo/hooks.ts b/src/state/userInfo/hooks.ts
index 6c9b8e3..75f9e52 100644
--- a/src/state/userInfo/hooks.ts
+++ b/src/state/userInfo/hooks.ts
@@ -20,7 +20,7 @@ export const useAccount = (ellipsis?: boolean) => {
 // 钱包登录 但是未签名获取到token
 export const useUnactiveAccount = () => {
   const { account } = useWeb3React()
-  return account
+  return account ? account.toLocaleLowerCase() : account
 }
 
 export const useToken = () => {
diff --git a/src/utils/clearUserStates.ts b/src/utils/clearUserStates.ts
new file mode 100644
index 0000000..bb57b1d
--- /dev/null
+++ b/src/utils/clearUserStates.ts
@@ -0,0 +1,14 @@
+import { Dispatch } from '@reduxjs/toolkit'
+import { clearUserInfo } from 'state/actions'
+import { connectorLocalStorageKey } from '@pancakeswap/uikit'
+import { connectorsByName } from './web3React'
+
+export const clearUserStates = (dispatch: Dispatch<any>) => {
+  dispatch(clearUserInfo())
+  // This localStorage key is set by @web3-react/walletconnect-connector
+  if (window?.localStorage?.getItem('walletconnect')) {
+    connectorsByName.walletconnect.close()
+    connectorsByName.walletconnect.walletConnectProvider = null
+  }
+  window?.localStorage?.removeItem(connectorLocalStorageKey)
+}