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.
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.
Install GoldRush Kit
You can use yarn
or npm
to install the @covalenthq/goldrush-kit
package.
yarn add @covalenthq/goldrush-kit
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>
Import the stylesheet
The stylesheet is designed to support both light and dark modes.
import "@covalenthq/goldrush-kit/styles.css";
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>
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!