@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
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 theapp
router, make sure you haveuse 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
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.