add button analytics

Author: 0xonramp

src/app/earn/components/earn-widget/components/smart-trade-button.tsx

@@ -1,4 +1,3 @@
-import { useAppKit } from '@reown/appkit/react'
 import { useCallback, useMemo } from 'react'
 
 import { WarningType, Warnings } from '@/components/swap/components/warning'
@@ -8,6 +7,7 @@ import {
   useTradeButtonState,
 } from '@/components/swap/hooks/use-trade-button-state'
 import { useApproval } from '@/lib/hooks/use-approval'
+import { useCustomAppKit } from '@/lib/hooks/use-custom-app-kit'
 import { useIsTokenPairTradable } from '@/lib/hooks/use-is-token-pair-tradable'
 import { useNetwork } from '@/lib/hooks/use-network'
 import { useProtectionContext } from '@/lib/providers/protection'
@@ -55,7 +55,7 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
   } = props
 
   const { chainId } = useNetwork()
-  const { open } = useAppKit()
+  const { openConnectView, openNetworksView } = useCustomAppKit()
   const { isRestrictedCountry } = useProtectionContext()
   const { slippage } = useSlippage()
 
@@ -117,12 +117,12 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
 
   const onClick = useCallback(async () => {
     if (buttonState === TradeButtonState.connectWallet) {
-      open({ view: 'Connect' })
+      openConnectView('Smart Trade Button')
       return
     }
 
     if (buttonState === TradeButtonState.wrongNetwork) {
-      open({ view: 'Networks' })
+      openNetworksView('Smart Trade Button')
       return
     }
 
@@ -147,7 +147,8 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
     onApproveForSwap,
     onOpenTransactionReview,
     onRefetchQuote,
-    open,
+    openConnectView,
+    openNetworksView,
     shouldApprove,
   ])
 

src/app/legacy/components/redeem-widget/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useAppKit } from '@reown/appkit/react'
 import { useSetAtom } from 'jotai'
 import { useCallback } from 'react'
 
@@ -16,6 +15,7 @@ import {
 import { TradeButton } from '@/components/trade-button'
 import { MAINNET, POLYGON } from '@/constants/chains'
 import { useApproval } from '@/lib/hooks/use-approval'
+import { useCustomAppKit } from '@/lib/hooks/use-custom-app-kit'
 import { useDisclosure } from '@/lib/hooks/use-disclosure'
 import { useSupportedNetworks } from '@/lib/hooks/use-network'
 import { useWallet } from '@/lib/hooks/use-wallet'
@@ -35,7 +35,7 @@ export function RedeemWidget() {
     MAINNET.chainId,
     POLYGON.chainId,
   ])
-  const { open } = useAppKit()
+  const { openConnectView, openNetworksView } = useCustomAppKit()
   const { address } = useWallet()
   const {
     inputTokenList,
@@ -96,13 +96,12 @@ export function RedeemWidget() {
 
   const onClickButton = useCallback(async () => {
     if (buttonState === TradeButtonState.connectWallet) {
-      open({ view: 'Connect' })
-
+      openConnectView('Redeem Widget')
       return
     }
 
     if (buttonState === TradeButtonState.wrongNetwork) {
-      open({ view: 'Networks' })
+      openNetworksView('Redeem Widget')
 
       return
     }
@@ -122,7 +121,15 @@ export function RedeemWidget() {
     if (buttonState === TradeButtonState.default) {
       sendTradeEvent({ type: 'REVIEW' })
     }
-  }, [buttonState, isApproved, onApprove, sendTradeEvent, open, shouldApprove])
+  }, [
+    buttonState,
+    isApproved,
+    shouldApprove,
+    openConnectView,
+    openNetworksView,
+    onApprove,
+    sendTradeEvent,
+  ])
 
   return (
     <div className='widget w-full min-w-80 max-w-xl flex-1 flex-col space-y-4 self-center rounded-3xl p-6'>

src/app/leverage/components/trading-view-chart.tsx

@@ -1,15 +1,15 @@
 import { Button } from '@headlessui/react'
-import { useAppKit } from '@reown/appkit/react'
 import Script from 'next/script'
 import { useEffect, useState } from 'react'
 
 import { TradingViewChartContainer } from '@/app/leverage/components/trading-view-chart-container'
+import { useCustomAppKit } from '@/lib/hooks/use-custom-app-kit'
 import { useWallet } from '@/lib/hooks/use-wallet'
 
 export function TradingViewChart() {
   const [isScriptReady, setIsScriptReady] = useState(false)
   const { isConnected } = useWallet()
-  const { open } = useAppKit()
+  const { openConnectView } = useCustomAppKit()
 
   useEffect(() => {
     const scriptAlreadyLoaded = document.querySelector(
@@ -34,7 +34,7 @@ export function TradingViewChart() {
         <div className='bg-ic-black/95 absolute inset-0 z-20 flex items-center justify-center'>
           <Button
             className='bg-ic-blue-500 dark:bg-ic-blue-300 dark:hover:bg-ic-blue-200 hover:bg-ic-blue-500/90 text-ic-gray-50 dark:text-ic-black block rounded-md px-8 py-1 text-sm font-medium shadow-sm transition-all duration-300 hover:scale-[1.04]'
-            onClick={() => open({ view: 'Connect' })}
+            onClick={() => openConnectView('TradingView Chart')}
           >
             Start Trading
           </Button>

src/app/prt-staking/components/prt-section/prt-card.tsx

@@ -1,5 +1,4 @@
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/16/solid'
-import { useAppKit } from '@reown/appkit/react'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import Image from 'next/image'
@@ -8,6 +7,7 @@ import { useMemo } from 'react'
 
 import { usePrtStakingContext } from '@/app/prt-staking/provider'
 import { ProductRevenueToken } from '@/app/prt-staking/types'
+import { useCustomAppKit } from '@/lib/hooks/use-custom-app-kit'
 import { useMainnetOnly } from '@/lib/hooks/use-network'
 import { formatAmount, formatDollarAmount } from '@/lib/utils'
 
@@ -29,7 +29,7 @@ export function PrtCard({ onClick }: Props) {
     poolStakedBalanceFormatted,
     userStakedBalanceFormatted,
   } = usePrtStakingContext()
-  const { open } = useAppKit()
+  const { openConnectView, openNetworksView } = useCustomAppKit()
   const isSupportedNetwork = useMainnetOnly()
 
   const buttonLabel = useMemo(() => {
@@ -42,13 +42,12 @@ export function PrtCard({ onClick }: Props) {
 
   const handleClick = () => {
     if (!accountAddress) {
-      open({ view: 'Connect' })
+      openConnectView('PRT Card')
       return
     }
 
     if (!isSupportedNetwork) {
-      open({ view: 'Networks' })
-
+      openNetworksView('PRT Card')
       return
     }
 

src/components/header/connect.tsx

@@ -2,20 +2,20 @@
 
 import { Button } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { useAppKit } from '@reown/appkit/react'
 import { useMemo } from 'react'
 import { useAccount, useAccountEffect, useBalance } from 'wagmi'
 
 import { NetworkSelect } from '@/components/header/network-select'
 import { useAnalytics } from '@/lib/hooks/use-analytics'
+import { useCustomAppKit } from '@/lib/hooks/use-custom-app-kit'
 import { useNetwork } from '@/lib/hooks/use-network'
 import { formatAmountFromWei, shortenAddress } from '@/lib/utils'
 import { emojiAvatarForAddress } from '@/lib/utils/emoji-address-avatar'
 
 export const Connect = () => {
   const { address, isConnected, chainId: walletChainId } = useAccount()
   const { chainId } = useNetwork()
-  const { open } = useAppKit()
+  const { openAccountView, openConnectView } = useCustomAppKit()
   const { logConnectWallet } = useAnalytics()
 
   const { data: balance } = useBalance({
@@ -50,7 +50,7 @@ export const Connect = () => {
           <NetworkSelect />
           <Button
             className='bg-ic-gray-900 flex items-center gap-2 rounded-md px-4 py-1 text-sm transition-all duration-300 hover:scale-[1.04]'
-            onClick={() => open({ view: 'Account' })}
+            onClick={() => openAccountView('Header')}
           >
             <div className='flex gap-1'>
               <p className='hidden md:block'>
@@ -72,7 +72,7 @@ export const Connect = () => {
       ) : (
         <Button
           className='bg-ic-blue-500 dark:bg-ic-white dark:hover:bg-ic-gray-100 hover:bg-ic-blue-500/90 text-ic-gray-50 dark:text-ic-black block rounded-full px-8 py-1 text-sm font-medium shadow-sm transition-all duration-300 hover:scale-[1.04]'
-          onClick={() => open({ view: 'Connect' })}
+          onClick={() => openConnectView('Header')}
         >
           Connect
         </Button>

src/components/header/network-select.tsx

@@ -2,7 +2,6 @@
 
 import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import { ChevronDownIcon, XMarkIcon } from '@heroicons/react/20/solid'
-import { useAppKit } from '@reown/appkit/react'
 import { NetworkUtil } from '@reown/appkit-common'
 import { AssetUtil, ChainController } from '@reown/appkit-core'
 import { watchAccount } from '@wagmi/core'
@@ -13,13 +12,14 @@ import { useEffect, useMemo, useState } from 'react'
 import { useAccount } from 'wagmi'
 
 import { Path } from '@/constants/paths'
+import { useCustomAppKit } from '@/lib/hooks/use-custom-app-kit'
 import { getNetworkName, useNetwork } from '@/lib/hooks/use-network'
 import { useQueryParams } from '@/lib/hooks/use-query-params'
 import { chains, wagmiAdapter } from '@/lib/utils/wagmi'
 
 export const NetworkSelect = () => {
   const { chainId: walletChainId } = useAccount()
-  const { open } = useAppKit()
+  const { openNetworksView } = useCustomAppKit()
   const { chainId, switchChain } = useNetwork()
   const { queryParams, searchParams, updateQueryParams } = useQueryParams()
   const [isNetworkWarningClosed, setIsNetworkWarningClosed] = useState(false)
@@ -70,7 +70,7 @@ export const NetworkSelect = () => {
     <Popover as='div' className='relative'>
       <PopoverButton
         className='text-ic-white flex items-center gap-2 rounded-md border-none bg-zinc-900 px-4 py-1 text-sm transition-all duration-300 hover:scale-[1.04]'
-        onClick={() => open({ view: 'Networks' })}
+        onClick={() => openNetworksView('Header')}
       >
         {imageSrc && (
           <Image

src/components/selectors/network-selector-button.tsx

@@ -1,4 +1,3 @@
-import { useAppKit } from '@reown/appkit/react'
 import { useCallback, useMemo } from 'react'
 
 import { WarningType, Warnings } from '@/components/swap/components/warning'
@@ -9,6 +8,7 @@ import {
 } from '@/components/swap/hooks/use-trade-button-state'
 import { TradeButton } from '@/components/trade-button'
 import { useApproval } from '@/lib/hooks/use-approval'
+import { useCustomAppKit } from '@/lib/hooks/use-custom-app-kit'
 import { useIsTokenPairTradable } from '@/lib/hooks/use-is-token-pair-tradable'
 import { useNetwork } from '@/lib/hooks/use-network'
 import { useProtectionContext } from '@/lib/providers/protection'
@@ -52,7 +52,7 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
   } = props
 
   const { chainId } = useNetwork()
-  const { open } = useAppKit()
+  const { openConnectView, openNetworksView } = useCustomAppKit()
   const { isRestrictedCountry } = useProtectionContext()
   const { slippage } = useSlippage()
 
@@ -114,12 +114,12 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
 
   const onClick = useCallback(async () => {
     if (buttonState === TradeButtonState.connectWallet) {
-      open({ view: 'Connect' })
+      openConnectView('Smart Trade Button')
       return
     }
 
     if (buttonState === TradeButtonState.wrongNetwork) {
-      open({ view: 'Networks' })
+      openNetworksView('Smart Trade Button')
       return
     }
 
@@ -144,7 +144,8 @@ export function SmartTradeButton(props: SmartTradeButtonProps) {
     onApproveForSwap,
     onOpenTransactionReview,
     onRefetchQuote,
-    open,
+    openConnectView,
+    openNetworksView,
     shouldApprove,
   ])