GoldRush Kit Quickstart

The GoldRush Kit is a set of beautifully designed React components for most common use-cases like Token Balances, Token Transfer History, Transactions, and more. These components are multi-chain by default with over 200+ networks supported, open-source and fully customizable.

Don't Have an API Key?

Unlock millions of requests and free archive data on all chains.

1

Create a Covalent API key

To create a Covalent Unified API Key, visit the Covalent platform page, sign up for an account, then create a new key. Once you have your API Key, you can proceed with the next steps.

2

Install GoldRush Kit

You can use yarn or npm to install the @covalenthq/goldrush-kit package.

yarn add @covalenthq/goldrush-kit
3

Import the GoldRush Provider

The GoldRushProvider class provides an interface to customize the components including the accent color, border radius, etc. This is where you will need to put your API key as well.

When working with APIs, protect your credentials by storing API keys in environment variables. This practice prevents exposing sensitive information in your codebase.

import { GoldRushProvider } from "@covalenthq/goldrush-kit";

/// Store API Key in Environment Variable
<GoldRushProvider apikey="<YOUR_API_KEY>">
	{children}
</GoldRushProvider>
4

Import the stylesheet

The stylesheet is designed to support both light and dark modes.

import "@covalenthq/goldrush-kit/styles.css";
5

Add desired components

The Kit offers most commonly found UI components found in applications, for example: Token Balances (TokenBalancesListView), display the NFTs in your wallet (NFTWalletTokenListView), Address Activity (AddressActivityListView), and more. These components are multi-chain by default.

Note: If you're using nextjs versions ^13.0 and are using the app router, make sure you have use client; at the top of the file to disable Next's server component modules. Visit GoldRush's component documentation for more information.

import {
    GoldRushProvider,
    NFTWalletTokenListView,
    TokenBalancesListView,
    TokenTransfersListView,
    AddressActivityListView,
} from "@covalenthq/goldrush-kit";

<GoldRushProvider 
    apikey={process.env.NEXT_PUBLIC_API_KEY} 
    mode="dark"
    color="emerald">
    <TokenBalancesListView
        chain_names={[
            "eth-mainnet",
            "matic-mainnet",
            "bsc-mainnet",
            "avalanche-mainnet",
            "optimism-mainnet",
        ]}
        hide_small_balances
        address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
    />
</GoldRushProvider>
6

Customize your app

Add some extras to enhance the existing GoldRush components:

  • input fields for variables

  • styling

  • specific use cases

Or build all-new components to serve your specific use-case.

Need more help?

If you're looking for a more fully features application template including wallet UIs, NFT galleries and more, GoldRush Templates are what you're after.

Happy coding!