refactor: move out useSyncConnectedChainToAnalytics (#1968)

packages/arb-token-bridge-ui/src/components/App/App.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react'
-import * as Sentry from '@sentry/react'
 
 import { useAccount, useNetwork, WagmiConfig, useDisconnect } from 'wagmi'
 import {
@@ -26,7 +25,7 @@ import { BalanceUpdater } from '../syncers/BalanceUpdater'
 import { TokenListSyncer } from '../syncers/TokenListSyncer'
 import { Header } from '../common/Header'
 import { HeaderAccountPopover } from '../common/HeaderAccountPopover'
-import { getNetworkName, isNetwork, rpcURLs } from '../../util/networks'
+import { getNetworkName, isNetwork } from '../../util/networks'
 import {
   ArbQueryParamProvider,
   useArbQueryParams
@@ -39,9 +38,9 @@ import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { sanitizeQueryParams, useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { HeaderConnectWalletButton } from '../common/HeaderConnectWalletButton'
-import { ProviderName, trackEvent } from '../../util/AnalyticsUtils'
 import { onDisconnectHandler } from '../../util/walletConnectUtils'
 import { addressIsSmartContract } from '../../util/AddressUtils'
+import { useSyncConnectedChainToAnalytics } from './useSyncConnectedChainToAnalytics'
 
 declare global {
   interface Window {
@@ -165,41 +164,8 @@ const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
   return <ArbTokenBridgeStoreSync tokenBridgeParams={tokenBridgeParams} />
 }
 
-// connector names: https://github.com/wagmi-dev/wagmi/blob/b17c07443e407a695dfe9beced2148923b159315/docs/pages/core/connectors/_meta.en-US.json#L4
-function getWalletName(connectorName: string): ProviderName {
-  switch (connectorName) {
-    case 'MetaMask':
-    case 'Coinbase Wallet':
-    case 'Trust Wallet':
-    case 'Safe':
-    case 'Injected':
-    case 'Ledger':
-      return connectorName
-
-    case 'WalletConnectLegacy':
-    case 'WalletConnect':
-      return 'WalletConnect'
-
-    default:
-      return 'Other'
-  }
-}
-
-/** given our RPC url, sanitize it before logging to Sentry, to only pass the url and not the keys */
-function getBaseUrl(url: string) {
-  try {
-    const urlObject = new URL(url)
-    return `${urlObject.protocol}//${urlObject.hostname}`
-  } catch {
-    // if invalid url passed
-    return ''
-  }
-}
-
 function AppContent() {
-  const [networks] = useNetworks()
-  const { parentChain, childChain } = useNetworksRelationship(networks)
-  const { address, isConnected, connector } = useAccount()
+  const { address, isConnected } = useAccount()
   const { isBlocked } = useAccountIsBlocked()
   const [tosAccepted] = useLocalStorage<boolean>(TOS_LOCALSTORAGE_KEY, false)
   const { openConnectModal } = useConnectModal()
@@ -210,28 +176,7 @@ function AppContent() {
     }
   }, [isConnected, tosAccepted, openConnectModal])
 
-  useEffect(() => {
-    if (isConnected && connector) {
-      const walletName = getWalletName(connector.name)
-      trackEvent('Connect Wallet Click', { walletName })
-    }
-
-    // set a custom tag in sentry to filter issues by connected wallet.name
-    Sentry.setTag('wallet.name', connector?.name ?? '')
-  }, [isConnected, connector])
-
-  useEffect(() => {
-    Sentry.setTag('network.parent_chain_id', parentChain.id)
-    Sentry.setTag(
-      'network.parent_chain_rpc_url',
-      getBaseUrl(rpcURLs[parentChain.id] ?? '')
-    )
-    Sentry.setTag('network.child_chain_id', childChain.id)
-    Sentry.setTag(
-      'network.child_chain_rpc_url',
-      getBaseUrl(rpcURLs[childChain.id] ?? '')
-    )
-  }, [childChain.id, parentChain.id])
+  useSyncConnectedChainToAnalytics()
 
   if (!tosAccepted) {
     return (

packages/arb-token-bridge-ui/src/components/App/useSyncConnectedChainToAnalytics.ts

@@ -0,0 +1,68 @@
+import { useAccount } from 'wagmi'
+import { useEffect } from 'react'
+import * as Sentry from '@sentry/react'
+
+import { useNetworks } from '../../hooks/useNetworks'
+import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
+import { ProviderName, trackEvent } from '../../util/AnalyticsUtils'
+import { rpcURLs } from '../../util/networks'
+
+// connector names: https://github.com/wagmi-dev/wagmi/blob/b17c07443e407a695dfe9beced2148923b159315/docs/pages/core/connectors/_meta.en-US.json#L4
+function getWalletName(connectorName: string): ProviderName {
+  switch (connectorName) {
+    case 'MetaMask':
+    case 'Coinbase Wallet':
+    case 'Trust Wallet':
+    case 'Safe':
+    case 'Injected':
+    case 'Ledger':
+      return connectorName
+
+    case 'WalletConnectLegacy':
+    case 'WalletConnect':
+      return 'WalletConnect'
+
+    default:
+      return 'Other'
+  }
+}
+
+/** given our RPC url, sanitize it before logging to Sentry, to only pass the url and not the keys */
+function getBaseUrl(url: string) {
+  try {
+    const urlObject = new URL(url)
+    return `${urlObject.protocol}//${urlObject.hostname}`
+  } catch {
+    // if invalid url passed
+    return ''
+  }
+}
+
+export function useSyncConnectedChainToAnalytics() {
+  const [networks] = useNetworks()
+  const { parentChain, childChain } = useNetworksRelationship(networks)
+  const { isConnected, connector } = useAccount()
+
+  useEffect(() => {
+    if (isConnected && connector) {
+      const walletName = getWalletName(connector.name)
+      trackEvent('Connect Wallet Click', { walletName })
+    }
+
+    // set a custom tag in sentry to filter issues by connected wallet.name
+    Sentry.setTag('wallet.name', connector?.name ?? '')
+  }, [isConnected, connector])
+
+  useEffect(() => {
+    Sentry.setTag('network.parent_chain_id', parentChain.id)
+    Sentry.setTag(
+      'network.parent_chain_rpc_url',
+      getBaseUrl(rpcURLs[parentChain.id] ?? '')
+    )
+    Sentry.setTag('network.child_chain_id', childChain.id)
+    Sentry.setTag(
+      'network.child_chain_rpc_url',
+      getBaseUrl(rpcURLs[childChain.id] ?? '')
+    )
+  }, [childChain.id, parentChain.id])
+}