Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@harishraisinghani
harishraisinghani authored Nov 12, 2024
1 parent 702ef79 commit f2a59e4
Showing 1 changed file with 105 additions and 96 deletions.
201 changes: 105 additions & 96 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<h1 align="center">Beautifully designed React components for your dApp frontend.</h1>

<div align="center">
Powered by <a href="https://www.npmjs.com/package/@covalenthq/client-sdk">GoldRush TS Client SDK</a>. 100+ Chains. Open-source. Customizable.
Powered by the <a href="https://www.npmjs.com/package/@covalenthq/client-sdk">GoldRush TypeScript SDK</a>. Supports 100+ Chains. Open-source. Customizable.
</div>

<p align="center">
Expand All @@ -30,17 +30,21 @@ Powered by <a href="https://www.npmjs.com/package/@covalenthq/client-sdk">GoldRu
<br />
</p>

## Ready-to-use customizable template

<a href="https://goldrush-kit.vercel.app">View live examples</a>
## Explore live with Storybook
Explore the GoldRush UI Kit with our [live hosted Storybook](https://goldrush-kit.vercel.app/?path=/story/organisms-nft-collection-view--nft-collection-view).

## Setup
1. [Sign up](https://goldrush.dev/platform/auth/register) for a free GoldRush API key to get started with the GoldRush UI Kit.

Install `goldrush-kit` using `npm`:
2. Install `goldrush-kit` using `npm` or `yarn`:

```bash
npm install @covalenthq/goldrush-kit
```
```bash
npm install @covalenthq/goldrush-kit
```
or
```bash
yarn add @covalenthq/goldrush-kit
```

## Implementation

Expand All @@ -50,116 +54,121 @@ npm install @covalenthq/goldrush-kit
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](https://goldrush.dev/platform/apikey).
2. Wrap `GoldRushProvider` around the application and set the GoldRush API key prop.
> **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.
> **Note:** You should always keep your API key private, never put it directly into your code, especially frontend code. Instead, use an environment variable to inject the key into your code.
```tsx
<GoldRushProvider apikey="<YOUR_API_KEY>">{children}</GoldRushProvider>
import { GoldRushProvider } from "@covalenthq/goldrush-kit";
const GoldRushExample = () => {
return (
<GoldRushProvider
apikey={process.env.NEXT_PUBLIC_API_KEY}
>
</GoldRushProvider>
);
};
export default GoldRushExample;
```
4. Add the stylesheet to your application.
4. Add the stylesheet and custom theme.
```tsx
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;
```
5. Add desired components.
5. Import and configure the 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](https://goldrush.dev/docs/unified-api/goldrush/kit/gold-rush-provider/) for more information.
> **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.
```tsx
import {
GoldRushProvider,
NFTWalletCollectionList,
TokenBalancesList,
TokenTransfersList,
AddressActivityList,
} from "@covalenthq/goldrush-kit";
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",
"bsc-mainnet",
"avalanche-mainnet",
"optimism-mainnet",
]}
hide_small_balances
address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"
/>
</GoldRushProvider>
);
};
export default GoldRushExample;
```
Using the example above should render a component similar to [this](https://goldrush-kit.vercel.app/iframe.html?args=chain_names[2]:!undefined;address:0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de;hide_small_balances:!true&globals=&id=molecules-token-token-balances-list--token-balances-list&viewMode=story).
## 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.

```tsx
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
## GoldRush UI Templates
| Name | Description | | |
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [GoldRush Decoder](https://github.com/covalenthq/goldrush-decoder) | Decode unstructured, raw event logs into structured data with a simple API. | - | [![GitHub last commit](https://img.shields.io/github/last-commit/covalenthq/goldrush-decoder)](https://github.com/covalenthq/goldrush-decoder/commits/main) |
| [GoldRush Block Explorer UI](https://github.com/covalenthq/goldrush-block-explorer-ui) | A cross chain block explorer kit that can be customized. | [View live template](https://goldrush-block-explorer-ui.vercel.app/) | [![GitHub last commit](https://img.shields.io/github/last-commit/covalenthq/goldrush-block-explorer-ui)](https://github.com/covalenthq/goldrush-block-explorer-ui/commits/main) |
| [Block Explorer UI](https://github.com/covalenthq/goldrush-block-explorer-ui) | A cross chain block explorer kit that can be customized. | [View live template](https://goldrush-block-explorer-ui.vercel.app/) | [![GitHub last commit](https://img.shields.io/github/last-commit/covalenthq/goldrush-block-explorer-ui)](https://github.com/covalenthq/goldrush-block-explorer-ui/commits/main) |
| [Wallet & Portfolio UI](https://github.com/covalenthq/goldrush-wallet-portfolio-ui) | Helps web3 developers easily display tokens and NFTs held by a wallet across multiple blockchains. | [View live template](https://goldrush-wallet-portfolio-ui.vercel.app/) | [![GitHub last commit](https://img.shields.io/github/last-commit/covalenthq/goldrush-wallet-portfolio-ui)](https://github.com/covalenthq/goldrush-wallet-portfolio-ui/commits/main) |
| [NFT Gallery UI](https://github.com/covalenthq/goldrush-nft-gallery-ui) | Display NFTs along with metadata. Build web3 NFT galleries using React components. | [View live template](https://goldrush-nft-gallery-ui.vercel.app/) | [![GitHub last commit](https://img.shields.io/github/last-commit/covalenthq/goldrush-nft-gallery-ui)](https://github.com/covalenthq/goldrush-nft-gallery-ui/commits/main) |
| [Transaction Receipt UI](https://github.com/covalenthq/goldrush-tx-receipt-ui) | Get a beautifully rendered and detailed view of blockchain transactions. | [View live template](https://goldrush-tx-receipt-ui.vercel.app/) | [![GitHub last commit](https://img.shields.io/github/last-commit/covalenthq/goldrush-tx-receipt-ui)](https://github.com/covalenthq/goldrush-tx-receipt-ui/commits/main) |
## Build and customize with Storybook
## Build and customize with Storybook locally
The components used above are built with `ReactJS` and `TailwindCSS`, using `TypeScript`. You can preview and customize the components using [Storybook](https://storybook.js.org/).
Expand Down

0 comments on commit f2a59e4

Please sign in to comment.