feat: amplitude logs is_reconnect (#4214)

* modified redux state to track wallet connections to properly log reconnects

* linted and removed console.log

* fixes for lynn's comments + documenting

src/components/AccountDetails/index.tsx

@@ -6,6 +6,7 @@ import { Context, useCallback, useContext } from 'react'
 import { ExternalLink as LinkIcon } from 'react-feather'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
+import { removeConnectedWallet } from 'state/wallets/reducer'
 import { DefaultTheme } from 'styled-components/macro'
 import styled, { ThemeContext } from 'styled-components/macro'
 import { isMobile } from 'utils/userAgent'
@@ -245,13 +246,15 @@ export default function AccountDetails({
                       <WalletAction
                         style={{ fontSize: '.825rem', fontWeight: 400, marginRight: '8px' }}
                         onClick={() => {
+                          const walletType = getConnectionName(getConnection(connector).type, getIsMetaMask())
                           if (connector.deactivate) {
                             connector.deactivate()
                           } else {
                             connector.resetState()
                           }
 
                           dispatch(updateSelectedWallet({ wallet: undefined }))
+                          dispatch(removeConnectedWallet({ account, walletType }))
                           openOptions()
                         }}
                       >

src/components/WalletModal/index.tsx

@@ -13,6 +13,7 @@ import { ArrowLeft } from 'react-feather'
 import { updateConnectionError } from 'state/connection/reducer'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
+import { useConnectedWallets } from 'state/wallets/hooks'
 import styled from 'styled-components/macro'
 import { isMobile } from 'utils/userAgent'
 
@@ -113,13 +114,18 @@ const WALLET_VIEWS = {
   PENDING: 'pending',
 }
 
-const sendAnalyticsEventAndUserInfo = (account: string, walletType: string, chainId: number | undefined) => {
+const sendAnalyticsEventAndUserInfo = (
+  account: string,
+  walletType: string,
+  chainId: number | undefined,
+  isReconnect: boolean
+) => {
   const currentDate = new Date().toISOString()
   sendAnalyticsEvent(EventName.WALLET_CONNECT_TXN_COMPLETED, {
     result: WALLET_CONNECTION_RESULT.SUCCEEDED,
     wallet_address: account,
     wallet_type: walletType,
-    // TODO(lynnshaoyu): Send correct is_reconnect value after modifying user state.
+    is_reconnect: isReconnect,
   })
   user.set(CUSTOM_USER_PROPERTIES.WALLET_ADDRESS, account)
   user.set(CUSTOM_USER_PROPERTIES.WALLET_TYPE, walletType)
@@ -140,6 +146,7 @@ export default function WalletModal({
 }) {
   const dispatch = useAppDispatch()
   const { connector, account, chainId } = useWeb3React()
+  const [connectedWallets, updateConnectedWallets] = useConnectedWallets()
 
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
   const [lastActiveWalletAddress, setLastActiveWalletAddress] = useState<string | undefined>(account)
@@ -173,10 +180,18 @@ export default function WalletModal({
   useEffect(() => {
     if (account && account !== lastActiveWalletAddress) {
       const walletType = getConnectionName(getConnection(connector).type, getIsMetaMask())
-      sendAnalyticsEventAndUserInfo(account, walletType, chainId)
+
+      if (
+        connectedWallets.filter((wallet) => wallet.account === account && wallet.walletType === walletType).length > 0
+      ) {
+        sendAnalyticsEventAndUserInfo(account, walletType, chainId, true)
+      } else {
+        sendAnalyticsEventAndUserInfo(account, walletType, chainId, false)
+        updateConnectedWallets({ account, walletType })
+      }
     }
     setLastActiveWalletAddress(account)
-  }, [lastActiveWalletAddress, account, connector, chainId])
+  }, [connectedWallets, updateConnectedWallets, lastActiveWalletAddress, account, connector, chainId])
 
   const tryActivation = useCallback(
     async (connector: Connector) => {

src/state/index.ts

@@ -17,6 +17,7 @@ import { routingApi } from './routing/slice'
 import swap from './swap/reducer'
 import transactions from './transactions/reducer'
 import user from './user/reducer'
+import wallets from './wallets/reducer'
 
 const PERSISTED_KEYS: string[] = ['user', 'transactions', 'lists']
 
@@ -26,6 +27,7 @@ const store = configureStore({
     user,
     connection,
     transactions,
+    wallets,
     swap,
     mint,
     mintV3,

src/state/wallets/hooks.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
+
+import { addConnectedWallet } from './reducer'
+import { Wallet } from './types'
+
+export function useConnectedWallets(): [Wallet[], (wallet: Wallet) => void] {
+  const dispatch = useAppDispatch()
+  const connectedWallets = useAppSelector((state) => state.wallets.connectedWallets)
+  const addWallet = useCallback(
+    (wallet: Wallet) => {
+      dispatch(addConnectedWallet(wallet))
+    },
+    [dispatch]
+  )
+  return [connectedWallets, addWallet]
+}

src/state/wallets/reducer.ts

@@ -0,0 +1,30 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { shallowEqual } from 'react-redux'
+
+import { Wallet } from './types'
+
+/* Used to track wallets that have been connected by the user in current session, and remove them when deliberately disconnected. 
+  Used to compute is_reconnect event property for analytics */
+export interface WalletState {
+  connectedWallets: Wallet[]
+}
+
+export const initialState: WalletState = {
+  connectedWallets: [],
+}
+
+const walletsSlice = createSlice({
+  name: 'wallets',
+  initialState,
+  reducers: {
+    addConnectedWallet(state, { payload }) {
+      state.connectedWallets = state.connectedWallets.concat(payload)
+    },
+    removeConnectedWallet(state, { payload }) {
+      state.connectedWallets = state.connectedWallets.filter((wallet) => !shallowEqual(wallet, payload))
+    },
+  },
+})
+
+export const { addConnectedWallet, removeConnectedWallet } = walletsSlice.actions
+export default walletsSlice.reducer

src/state/wallets/types.ts

@@ -0,0 +1,4 @@
+export interface Wallet {
+  walletType: string
+  account: string
+}