npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@covalenthq/goldrush-kit

v1.0.5

Published

Beautifully designed React components for web3 dApp frontend. Easily fetch data from 200+ blockchains. Open-source. Customizable.

Downloads

449

Readme

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

  1. Import GoldRushProvider

    import { GoldRushProvider } from "@covalenthq/goldrush-kit";
  2. Wrap GoldRushProvider around the application.

  3. 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>
  4. Add the stylesheet to your application.

    import "@covalenthq/goldrush-kit/styles.css";
  5. 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.

  1. 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>"
  2. Start development server

    npm run dev
  3. Build/Bundle Component Library

    npm run build:library
  4. Build/Bundle Storybook

    npm run build:storybook

Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

License

This project is Apache-2.0 licensed.