Quickstart

Introduction

This quickstart guide walks through using the GoldRush TypeScript SDK and GoldRush UI Kit to quickly build with multichain data leveraging the powerful GoldRush APIs.

Prerequisites

Using any of the GoldRush developer tools requires an API key.

Get Started

Sign up for a free API key to get started with GoldRush.

Using the GoldRush TypeScript SDK

The GoldRush TypeScript SDK is the fastest way to integrate the GoldRush APIs for working with blockchain data. The SDK works with all supported chains including Mainnets and Testnets.

This SDK requires the use of NodeJS v18 or above.

Step 1. Install the SDK

npm install @covalenthq/client-sdk`

or

yarn add @covalenthq/client-sdk`

See the package on npm for more details: https://www.npmjs.com/package/@covalenthq/client-sdk

Step 2. Import the client

The GoldRushClient class provides typesafe, easy-to-use helper functions and classes to use the GoldRush APIs.

import { GoldRushClient } from "@covalenthq/client-sdk";

Step 3. Initialize the client with the GoldRush API key

import { GoldRushClient } from "@covalenthq/client-sdk";

const ApiServices = async () => {
    const client = new GoldRushClient("YOUR_API_KEY"); 
}

Step 4. Invoke the service and function

In this quickstart, we use the BalanceService and getTokenBalancesForWalletAddress() function to fetch all the token balances held by an address. This function takes a chain name and wallet address as required arguments. Note that ENS resolution is supported for eth-mainnet.

import { GoldRushClient } from "@covalenthq/client-sdk";

const ApiServices = async () => {
    // Replace with your GoldRush API key
    const client = new GoldRushClient("YOUR_API_KEY"); 
    const resp = await client.BalanceService.getTokenBalancesForWalletAddress("eth-mainnet", "demo.eth"); 
    if (!resp.error) {
        console.log(resp.data);
    } else {
        console.log(resp.error_message);
    }
}

ApiServices();

which gives an output that looks similar to:

BalancesResponse {
  address: '0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de',
  chain_id: 1,
  chain_name: 'eth-mainnet',
  quote_currency: 'USD',
  updated_at: 2024-11-05T22:18:41.522Z,
  items: [
    BalanceItem {
      contract_decimals: 6,
      contract_name: 'Tether USD',
      contract_ticker_symbol: 'USDT',
      contract_address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
      contract_display_name: 'Tether USD',
      supports_erc: [Array],
      logo_url: 'https://logos.covalenthq.com/tokens/1/0xdac17f958d2ee523a2206206994597c13d831ec7.png',
      last_transferred_at: 2024-08-28T12:43:35.000Z,
      native_token: false,
      type: 'stablecoin',
      is_spam: false,
      balance: 3007173042n,
      balance_24h: 3007173042n,
      quote_rate: 1,
      quote_rate_24h: 0.9992,
      quote: 3007.173,
      quote_24h: 3004.7673,
      pretty_quote: '$3,007.17',
      pretty_quote_24h: '$3,004.77',
      logo_urls: [LogoUrls],
      protocol_metadata: null,
      nft_data: null
    },
    ....

Using the GoldRush UI Kit

The GoldRush UI Kit consists of beautifully designed React components for your dapp frontend. The Kit is open source and customizable.

This UI Kit requires the use of React 18.

See the open source repo on GitHub: https://github.com/covalenthq/goldrush-kit

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

Step 1. Install the GoldRush UI Kit

npm install @covalenthq/goldrush-kit`

or

yarn add @covalenthq/goldrush-kit`

Step 2. Import the provider

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

Step 3. Wrap the provider around the application and set the GoldRush API key props

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

const GoldRushExample = () => {
    return (
        <GoldRushProvider
            apikey={process.env.NEXT_PUBLIC_API_KEY}
        >
        </GoldRushProvider>
    );
};

export default GoldRushExample;

Step 4. Add the stylesheet and custom theme

import { GoldRushProvider } 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",
            }}
        >
        </GoldRushProvider>
    );
};

export default GoldRushExample;

Step 5. Add the desired components

import { GoldRushProvider, TokenBalancesList } 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",
              ]}
              hide_small_balances
              address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
          />
        </GoldRushProvider>
    );
};

export default GoldRushExample;

Using this component should render a component that looks similar to: