@covalenthq/goldrush-kit NPM

GoldRush Kit

Beautifully designed React components for your dApp frontend. 200+ Chains. Open-source. Customizable.

Setup

Install goldrush-kit using npm:

npm install @covalenthq/goldrush-kit

Implementation

Import GoldRushProvider

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

Wrap GoldRushProvider around the application.
Configure the provider and add it to the apikey props with your GoldRush API key. You can register for a free key on GoldRush's website.
Note: You should always keep your API key private, never put it directly into your code, especially front end code. Instead, use an environment variable to inject the key into your code.
```
<GoldRushProvider apikey="<YOUR_API_KEY>">{children}</GoldRushProvider>
```

Add the stylesheet to your application.

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

Add desired components.
Note: If you're using next.js versions ^13.0 with 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,
    NFTWalletCollectionList,
    TokenBalancesList,
    TokenTransfersList,
    AddressActivityList,
} from "@covalenthq/goldrush-kit";
```

Ready-to-go React Component example

Here's a full example to get you started.

Be sure to secure your apikey to prevent unauthorized use in the GoldRush platform by restricting usage to specific URLs.

import {
    GoldRushProvider,
    NFTWalletCollectionList,
    TokenBalancesList,
    TokenTransfersList,
    AddressActivityList,
} from "@covalenthq/goldrush-kit";
import "@covalenthq/goldrush-kit/styles.css";

const GoldRushExample = () => {
    return (
        <GoldRushProvider
            apikey={process.env.NEXT_PUBLIC_API_KEY}
            theme={{
                borderRadius: 6,
                colors: {
                    dark: {
                        primary: "#FF4C8B",
                        background: "#000426",
                        foreground: "#FFFFFF",
                        secondary: "#868E96",
                    },
                    light: {
                        primary: "#00D8D5",
                        background: "#FFFFFF",
                        foreground: "#1C2024",
                        secondary: "#868E96",
                    },
                },
                mode: "dark",
            }}
        >
            <TokenBalancesList
                chain_names={[
                    "eth-mainnet",
                    "matic-mainnet",
                    "bsc-mainnet",
                    "avalanche-mainnet",
                    "optimism-mainnet",
                ]}
                hide_small_balances
                address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
            />

            <TokenTransfersList
                chain_name="eth-mainnet"
                address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
                contract_address="0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
            />

            <AddressActivityList address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de" />

            <NFTWalletCollectionList
                address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
                chain_name="eth-mainnet"
            />
        </GoldRushProvider>
    );
};

export default GoldRushExample;

GoldRush Repositories

Name	Description
TypeScript SDK	The fastest way to integrate the GoldRush API for working with blockchain data.
GoldRush Kit	Beautifully designed React components for your dApp frontend.
GoldRush Block Explorer	A cross chain block explorer kit that can be customized.
GoldRush Decoder	Decode unstructured, raw event logs into structured data with a simple API.
GoldRush RevokeHub	One-stop platform for managing your digital assets securely and efficiently.
GoldRush Airdrop Assist	Effortlessly filter and find all valid addresses for your next airdrop.

Build and customize with Storybook

The components used above are built with ReactJS and TailwindCSS, using TypeScript. You can preview and customize the components using Storybook.

Setup Environmental Variables: Create and add a .env file to the root directory of your project and the listed values from .env.example following to the file.
```
STORYBOOK_GOLDRUSH_API_KEY = "<YOUR_API_KEY>"
```
Start development server
```
npm run dev
```
Build/Bundle Component Library
```
npm run build:library
```
Build/Bundle Storybook
```
npm run build:storybook
```