Using Covalent's GoldRush Kit with Particle Connect

​

Understanding GoldRush

1. TokenBalancesListView, this is what we’ll be using within this example. TokenBalancesListView retrieves and displays the tokens (both native and ERC20) that an address owns across a given list of networks.
2. NFTWalletTokensListView, similar to the previous component, NFTWalletTokensListView displays a list of NFTs owned by an address (including information such as the estimated value of each NFT, the images, collection names, etc.)
3. NFTCollectionTokenListView, for displaying high-level information about all NFTs present within a specified collection.
4. NFTDetailView, to show rich information about a single NFT, including its attributes, sale and floor price history, etc.
5. TokenTransfersListView, for viewing an explorer-like list of token transfers (one token at a time) executed by a users wallet address.
6. And more, see the GoldRush GitHub repository, or the Covalent GoldRush documentation to dive in further.

<TokenBalancesListView
  chain_names={[
    "eth-sepolia",
    "matic-mainnet",
    "linea-mainnet",
    "avalanche-mainnet",
  ]}
  address={account}
/>

<GoldRushProvider 
    apikey={YOUR_API_KEY} // Retrieved from https://www.covalenthq.com/platform
    mode="light"
    color="emerald"
> 

// TokenBalancesListView, etc.

</GoldRushProvider>

​

Getting Started

1. A user is presented with a “Connect Wallet” button, driving either connection through social login or standard wallets, such as MetaMask, WalletConnect, etc.
2. The address resulting from step 1 will then be used within TokenBalancesListView.
3. The user will be presented with a detailed overview of their token balances across 10 different chains that we’ll define.

yarn add @particle-network/connectkit @covalenthq/goldrush-kit @particle-network/connectors @particle-network/chains

# OR

npm install @particle-network/connectkit @covalenthq/goldrush-kit @particle-network/connectors @particle-network/chains

• projectId, clientKey, and appId from the Particle dashboard. These will be used to configure ModalProvider from @particle-network/connectkit; the collection of these values simultaneously authenticate API requests and allow you to track connected wallets, customize the Particle Auth modal, etc.
• apikey from the Covalent dashboard. apikey will be used to authenticate API requests made within the TokenBalancesListView React component to retrieve token balances.

• projectId, clientKey, and appId. As covered, these will be used to authenticate and connect your project to the Particle dashboard.
• chains, the chains you intend to support within Particle Connect. This parameter isn’t relevant for this example given the read-only nature of the interface we’re setting up, thus this can simply be set to Ethereum from @particle-network/chains.
• connectors, an array of wallet connectors representing the specific wallets you’d like to be supported by the connection modal. @particle-network/connectors has an export, evmWallets, which contains a variety of supported EVM wallets (such as MetaMask, WalletConnect, Trust, etc.); we’ll be using this within connectors. evmWallets takes the following parameters:
  • projectId, your WalletConnect project ID retrieved from the WalletConnect dashboard.
  • Optionally, showQrModal to enable connection via QR codes with the QR modal.
• wallet, an optional parameter to dictate whether or not the embedded wallet interface is shown; if it is, you can use wallet to customize the style, lock chain selection, etc. Although in this case, we’ll pass the following parameter:
  • visible, which will be false in this case, as we’ll be relying on the component from GoldRush to view balances, rather than using the embedded wallet (although that’s not to say both wouldn’t work; for the sake of this example we’ll allow the GoldRush component to be the exclusive interface for asset information).

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Ethereum } from '@particle-network/chains';
import { ModalProvider } from '@particle-network/connectkit';
import '@particle-network/connectkit/dist/index.css';
import { evmWallets } from '@particle-network/connectors';
import App from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ModalProvider
        options={{
            projectId: process.env.REACT_APP_PROJECT_ID as string,
            clientKey: process.env.REACT_APP_CLIENT_KEY as string,
            appId: process.env.REACT_APP_APP_ID as string,
            chains: [Ethereum],
            connectors: [
                ...evmWallets({ projectId: process.env.REACT_APP_COVALENT_API_KEY, showQrModal: true }),
            ],
            erc4337: {
              name: "SIMPLE",
              version: "1.0.0"
            },
            wallet: {
                visible: false,
            },
        }}
    >
        <App />
    </ModalProvider>
  </React.StrictMode>
)

​

Building The Application

1. Showing the “Connect Wallet” button through ConnectButton if the user hasn’t already connected. To do this, we’ll be pulling the active wallet address with the useAccount hook, imported from @particle-network/connectkit.
2. Once a user has connected (meaning account from useAccount is populated), we’ll shift to a page containing TokenBalancesListView, passing in address (the address from which balances will be reflected) as account.
3. TokenBalancesListView will be wrapped within GoldRushProvider, using the API key retrieved prior to authenticate the (built-in) Covalent API.

import { ConnectButton, useAccount } from '@particle-network/connectkit';

const account = useAccount(); // Automatically updates with the wallet address upon connection, undefined otherwise

• apikey, the Covalent API key previously retrieved from the Covalent dashboard.
• Optionally, you can pass in parameters such as theme, mode, border_radius, and color for high-level, global customizations (affecting all GoldRush components wrapped by GoldRushProvider).

• chain_names, the list of chains to be included in the list of token balances (they’ll be queried collectivelly, each contributing to the list of balances). The full list of supported chains can be found on the Covalent documentation.
• address, the targeted address (one at a time). We’ll be using account (from useAccount) for this.
• Optionally, Booleans such as mask_balances and hide_small_balances can be included, alongside the on_transfer_click function (which will handle the “View Transfer History” button attached to each token; this should be linked to the TokenTransfersListView component if you’re planning on using it).

import { ConnectButton, useAccount } from '@particle-network/connectkit';
import { TokenBalancesListView, GoldRushProvider } from "@covalenthq/goldrush-kit";
import "@covalenthq/goldrush-kit/styles.css";

const App = () => {
  const accounts = useAccount();

  return (
    <div className="App">
      {!accounts ? (
        <div className="connect-page">
          <ConnectButton />
        </div>
      ) : (
        <GoldRushProvider apikey="cqt_rQ7h6XHhY3CHQW9mMCtwXrtJK6cY">
          <div>
            <TokenBalancesListView
              chain_names={[
                  "eth-sepolia",
                  "matic-mainnet",
                  "linea-mainnet",
                  "avalanche-mainnet",
    							// Add more according to supported chains listed on https://www.covalenthq.com/docs/networks
              ]}
              address={accounts}
            />
          </div>
        </GoldRushProvider>
      )}
    </div>
  );
};

export default App;

​

Conclusion