docs: add some web3 imports for more complete examples

docs-site/docs/guides/transactions.md

@@ -20,17 +20,17 @@ If you are using the React Provider, **you are required need to manually track t
 
 Event with the non-react `.init()` method, manual tracking allows for more fine-grained control over the tracking process.
 
-## Why manual tracking is recommended
+---
 
-A common goal is track when a user has deposited funds into their wallet. ie the transaction is **submitted**.
+## How to track the transaction process
 
-But you may also want to track when a user **triggers** a transaction, but leaves the app before the transaction is **submitted**.
+<!-- ## Why manual tracking is recommended
 
-Therefore if we only log confirmed transactions, we don't know why users abandon transactions, or where they drop off. To solve this, we can use custom events (`.event()`) to track every step of the transaction process.
+A common goal is track when a user has deposited funds into their wallet. ie the transaction is **submitted**.
 
----
+But you may also want to track when a user **triggers** a transaction, but leaves the app before the transaction is **submitted**.
 
-## How to track the transaction process
+Therefore if we only log confirmed transactions, we don't know why users abandon transactions, or where they drop off. To solve this, we can use custom events (`.event()`) to track every step of the transaction process. -->
 
 Instead, to capture every step of the transaction process, you can use custom events `.event()` combined with the `.transaction()` method.
 

docs-site/docs/tracking/manual/chain.md

@@ -34,7 +34,7 @@ const Component = () => {
     sdk.chain({ chainId: '1', account: '0x1234' })
   }
 
-  return <button onClick={handleClick}>Send Event</button>
+  return <button onClick={handleClick}>Change Chain</button>
 }
 ```
 

docs-site/docs/tracking/manual/page.md

@@ -28,11 +28,12 @@ import { useArcxAnalytics } from '@0xarc-io/analytics'
 const Component = () => {
   const sdk = useArcxAnalytics()
 
-  const handleClick = async () => {
+  // Send page event when component mounts
+  useEffect(() => {
     await sdk.page()
-  }
+  }, [])
 
-  return <button onClick={handleClick}>Send Event</button>
+  return <button>Empty Button</button>
 }
 ```
 

docs-site/docs/tracking/manual/transaction.md

@@ -25,6 +25,7 @@ To manually track transaction submitted events, use the `.transaction()` method
 
 ```tsx
 import { useArcxAnalytics } from '@0xarc-io/analytics'
+import { useWeb3React } from '@web3-react/core'
 
 const TransactionButton = () => {
   const { account, chainId } = useWeb3React()

docs-site/docs/tracking/manual/wallet.md

@@ -29,13 +29,18 @@ To manually track wallet connection events, use the `.wallet()` method on the SD
 Below is a basic example of how to track a wallet connection event.
 
 ```tsx
+import { useWeb3React } from '@web3-react/core'
+import { useArcxAnalytics } from '@0xarc-io/analytics'
+
 const WalletConnectionTracker = () => {
   const { account, chainId } = useWeb3React()
   const sdk = useArcxAnalytics()
 
+  // Effect runs when `account` or `chainId` changes
+  // Once the chainId and account values are available, track the wallet connection with the SDK
+  // As the wallet is now connected
   useEffect(() => {
     if (account && chainId) {
-      // Track the wallet connection with the SDK
       sdk.wallet({
         chainId,
         account,