From dc75402ec118ced3ae6070ef0697b1fbbbbdc0ea Mon Sep 17 00:00:00 2001 From: Fionna Chan <13184582+fionnachan@users.noreply.github.com> Date: Tue, 8 Oct 2024 23:16:21 +0800 Subject: [PATCH] refactor: move out useSyncConnectedChainToAnalytics (#1968) --- .../src/components/App/App.tsx | 63 ++--------------- .../App/useSyncConnectedChainToAnalytics.ts | 68 +++++++++++++++++++ 2 files changed, 72 insertions(+), 59 deletions(-) create mode 100644 packages/arb-token-bridge-ui/src/components/App/useSyncConnectedChainToAnalytics.ts diff --git a/packages/arb-token-bridge-ui/src/components/App/App.tsx b/packages/arb-token-bridge-ui/src/components/App/App.tsx index 9d7a24bd96..65d3f60ccf 100644 --- a/packages/arb-token-bridge-ui/src/components/App/App.tsx +++ b/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 } -// 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(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 ( diff --git a/packages/arb-token-bridge-ui/src/components/App/useSyncConnectedChainToAnalytics.ts b/packages/arb-token-bridge-ui/src/components/App/useSyncConnectedChainToAnalytics.ts new file mode 100644 index 0000000000..a8d5aeba73 --- /dev/null +++ b/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]) +}