Get Started with GoldRush Kit and Build Web3 dApps with Blockchain Data

What is GoldRush Kit?

GoldRush Kit is a series of beautifully designed, customizable React components for Web3 frontends. These components are built on the Covalent stack, pulling structured blockchain data from over 200 indexed blockchains.

How GoldRush Kit Simplifies Web3 UI/UX

The trouble with Web3 development is that on-chain data is messy and fragmented across blockchains. This requires developers to piece together many different tools and handle the bulk of data transformation before they can create the UI for their dApp.

Covalent has tackled this problem for a long time, providing a unified API for blockchain data with a structured schema, so that developers can make the same API request on any supported network, and get back structured, formatted data that is easy to understand and build with.

GoldRush is Covalent’s newest product, built on top of the Covalent API, to make it easier for developers to build beautiful frontends. This visualization tool showcases Covalent’s data, which was meant to be displayed, with intuitive fields like protocol names and logos, decoded transactions, and “pretty quotes” that display a user’s crypto assets in the fiat value of their choice.

GoldRush Kit is open-source, so any developer can submit a pull request to contribute new components or improvements to the repository. This ensures that GoldRush Kit continues to evolve and stay up to date with new trends and advancements in Web3.

Tutorial

Want to try GoldRush Kit? This ultimate guide provides an overview of how to get started; from running the React components locally to forking and deploying various pre-built Web3 templates to Vercel.

At the end of this guide, you can:

• Deploy your own portfolio dashboard, NFT gallery, or DEX analytics page.
• Browse all the available GoldRush React components in the Storybook view.
• Add GoldRush components to your own React app.

Anyone can follow along! GoldRush is built to be easy to use and accessible for new developers.

Prerequisites

• Have git installed.
• Have Node.js and npm installed.
• Have a Covalent API key.

Running GoldRush Components in Your React App

GoldRush can easily be integrated into any React app. These instructions can be found in the GoldRush Kit README.

However, to start from the very beginning of creating a React app and then importing and running the GoldRush components locally, you can watch this video tutorial!

GoldRush Kit Implementation Tutorial

Running GoldRush Storybook from Terminal

Storybook allows you to preview and play around with each component in a sandbox environment. If you just want to see what’s possible with GoldRush Kit, you can run Storybook directly from your Terminal!

Step 1: Create a New Directory

Navigate to where you want the new directory and run the following command in your terminal.

mkdir GoldRushProject

Step 2: Navigate to the New Directory

cd GoldRushProject

Step 3: Clone the Repository

git clone https://github.com/covalenthq/goldrush-kit.git

Step 4: Navigate to the Project Directory

Move into the directory of the cloned repository.

cd goldrush-kit

Step 5: Install Project Dependencies

This installs all dependencies listed in the project’s package.json.

npm install

Step 6: Create the .env File

Use nano or your preferred text editor to create and edit the .env file.

nano .env

Step 7: Add the Environment Variable

Inside nano, type:

STORYBOOK_COVALENT_API_KEY=your_api_key

Replace your_api_key with your Covalent API key.

Step 8: Save and Exit .env File

To save, press Ctrl + O, then Enter. To exit, press Ctrl + X.

Step 9: Verify the .env File Creation (Optional)

To display the contents of your .env file and ensure your key is saved, you can run:

cat .env

Step 10: Run Storybook

Now start the Storybook environment by running:

npm run dev

You’ll see a URL in the terminal (usually http://localhost:6006) where you can view Storybook!

How to Fork and Deploy GoldRush Templates to Vercel

In the GoldRush Kit repo, you can also find some pre-built templates for various use cases.

GoldRush Templates

These are for popular Web3 use cases, like viewing a complete portfolio of a user’s assets or evaluating the performance of an NFT collection.

GoldRush Portfolio & Wallet UI

GoldRush NFT Gallery UI

To get started with any of these templates and deploy your own version to Vercel, simply follow these steps.

Step 1: Fork the Repository

Go to any of the different template repositories by clicking the links on the GoldRush Kit repo.

Once you have opened your desired template, click the "Fork" button in the top-right corner of the page. This will create a copy of the repository in your GitHub account.

Step 2: Clone the Repository

On your forked repository page, click the "Code" button and copy the URL under "Clone with HTTPS".

Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux).

Type git clone, then paste the URL you copied. It should look something like this:

git clone https://github.com/{your_github_username}/goldrush-nft-gallery-ui.git

Press Enter. This will create a local copy of the project on your computer.

Step 3: Install Dependencies

Navigate to the project directory in your terminal.

cd goldrush-nft-gallery-ui

Install the necessary packages by running:

npm install

Step 4: Set Up Environment Variables

Now you need to add your Covalent API key to be able to authenticate the backend requests. Create a file named .env.local in the root directory of the project.

Add your Covalent API key to this file like so:

NEXT_PUBLIC_COVALENT_API_KEY = "<YOUR_API_KEY>"

Replace <YOUR_API_KEY> with your actual Covalent API key.

Step 5: Run the Application Locally

Start the development server by typing:

npm run dev

Open your web browser and go to http://localhost:3000. You should see your template UI running.

Step 6: Customize the Template

Open the project folder in a code editor (like Visual Studio Code).

You can start customizing the files in the app, components, styles, and other directories as per your requirements.

Step 7: Deploy Your Customized Template

To deploy your template, you can click on the "Deploy with Vercel" button found on your forked repository.

One-Click Vercel Deploy on GoldRush Template Repositories

Follow the instructions on Vercel, and make sure to add your API key as an environmental variable. It should be named the same as the one in your .env.local file.

Step 8: Push Changes to GitHub

As you make changes and are ready to update your online version, you'll need to push these changes to GitHub. Use the following commands:

git add . 
git commit -m "Your custom commit message" 
git push origin main

Your deployed site on Vercel will automatically update after you push the changes to your GitHub repository.

Conclusion

And that’s it! Three easy ways to get started with GoldRush Kit for simplified Web3 development. Try it out and let us know what you think.

Resources

• GoldRush website: https://www.covalenthq.com/products/goldrush/?component=TokenBalancesListView
• GoldRush Kit repository: https://github.com/covalenthq/goldrush-kit?tab=readme-ov-file
• GoldRush Kit blog post: https://www.covalenthq.com/blog/introducing-the-goldrush-toolkit-reimagining-a-modular-block-explorer/
• GoldRush Kit YouTube tutorial: https://www.youtube.com/watch?v=5yvtLVmZGyw
• Covalent’s Twitter for GoldRush Updates: https://twitter.com/Covalent_HQ