🚀Quick Start

Get started with the SDK from code snippets; Less than 5 minutes

Event Tracking with w3aSDK

This guide will help you swiftly set up event tracking with w3aSDK. For a comprehensive understanding, we recommend exploring the complete documentation.

Installation

Install the w3aSDK package via NPM:

npm i @web3acquire/w3a

Initialization

Initialize the SDK in your main application file (e.g., index.js):

// File: index.js
import { w3aSDK } from "@web3acquire/w3a";

w3aSDK.configure(
    "<API_KEY>", // Replace with your API Key
    { /* Optional configuration options can be added here */ }
);

For now, you can leave the configuration options empty. Read more about configuration options.

Tracking Page Views

You have the flexibility to choose between automated and manual page view tracking. Both methods are compatible with react-router-dom.

Automated Tracking

Enable automated page view tracking with enableAutoPageView():

// App.js / index.js
w3aSDK.enableAutoPageView();

Manual Tracking

To manually track page views, use the pageView() API:

// File: App.js / index.js
import React from "react";
import { useLocation } from "react-router-dom";
import { w3aSDK } from "@web3acquire/w3a";

export const page = () => {

  let location = useLocation();
  
  React.useEffect(() => {
    w3aSDK.pageView();
  }, [location]);
  
  // ... rest of the component
}

Tracking Wallet Connections

Monitor wallet connections to your website using the w3aSDK.walletConnect API:

import { w3aSDK } from "@web3acquire/w3a";

w3aSDK.walletConnect({
    walletAddress: "0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe",
    chainId: "0x1", // Optional: chainId of the connected wallet
    walletProvider: "MetaMask" // Optional: wallet provider of the connected wallet
});

Here's an integration example with WalletConnect:

// Code snippet integrating with Wallet Connect
import { useAccount, useNetwork } from "wagmi";
import { w3aSDK } from "@web3acquire/w3a";

// -- snip --

export const WalletLogin = () => {
 const { address, connector } = useAccount();
 const { chain } = useNetwork();
 
 React.useEffect(() => {
    w3aSDK.walletConnect({
      walletAddress: address,
      chainId: chain?.id,
      walletProvider: connector?.name,
    });
 }, [address, chain]);
 
 // ... rest of the component
}

Final Steps

You're now set up and ready to track! If you wish to monitor other events, check out the further documentation. To ensure everything functions correctly before moving to production, verify here.