-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
91 changed files
with
28,623 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
{ | ||
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"], | ||
"rules": { | ||
"semi": "error", | ||
"no-multiple-empty-lines": "error", | ||
"indent": "off", | ||
"react/jsx-no-target-blank": "off", | ||
"react/no-unescaped-entities": "off", | ||
"react/no-children-prop": "off", | ||
"no-unsafe-optional-chaining": "warn", | ||
"@typescript-eslint/no-var-requires": "off", | ||
"@typescript-eslint/no-unused-vars": "warn", | ||
"@typescript-eslint/ban-types": [ | ||
"error", | ||
{ | ||
"types": { | ||
"Function": false | ||
} | ||
} | ||
], | ||
"@typescript-eslint/no-inferrable-types": "off", | ||
"@typescript-eslint/no-non-null-assertion": "off", | ||
"@typescript-eslint/consistent-type-imports": "error", | ||
"@typescript-eslint/no-explicit-any": "warn" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
{ | ||
"printWidth": 80, | ||
"tabWidth": 4, | ||
"useTabs": false, | ||
"semi": true, | ||
"singleQuote": false, | ||
"quoteProps": "as-needed", | ||
"jsxSingleQuote": false, | ||
"trailingComma": "es5", | ||
"bracketSpacing": true, | ||
"bracketSameLine": false, | ||
"arrowParens": "always", | ||
"requirePragma": false, | ||
"insertPragma": false, | ||
"proseWrap": "preserve", | ||
"htmlWhitespaceSensitivity": "css", | ||
"vueIndentScriptAndStyle": false, | ||
"endOfLine": "lf", | ||
"embeddedLanguageFormatting": "auto", | ||
"singleAttributePerLine": false, | ||
"plugins": ["prettier-plugin-tailwindcss"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
module.exports = { | ||
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], | ||
staticDirs: ["../src/static/"], | ||
addons: [ | ||
"@storybook/addon-links", | ||
"@storybook/addon-essentials", | ||
"@storybook/addon-interactions", | ||
"storybook-addon-themes", | ||
"storybook-dark-mode", | ||
// 'storybook-tailwind-dark-mode', | ||
], | ||
framework: { | ||
name: "@storybook/react-vite", | ||
options: {}, | ||
}, | ||
docs: { | ||
docsPage: true, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<script> | ||
window.global = window; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import "../src/tailwind-input.css"; | ||
import { themes } from "@storybook/theming"; | ||
import { GoldRushProvider } from "../src/utils/store/Goldrush"; | ||
// import { useDarkMode } from 'storybook-dark-mode' // uncomment out this one line for dark mode | ||
|
||
export const parameters = { | ||
actions: { argTypesRegex: "^on[A-Z].*" }, | ||
themes: { | ||
clearable: false, | ||
list: [ | ||
{ | ||
name: "Light", | ||
class: [], | ||
color: "#ffffff", | ||
default: true, | ||
}, | ||
{ | ||
name: "Dark", | ||
class: ["dark"], | ||
color: "#000000", | ||
}, | ||
], | ||
}, | ||
darkMode: { | ||
// Override the default dark theme | ||
dark: { | ||
...themes.dark, | ||
appBg: "black", | ||
colorSecondary: "#EA088C", | ||
brandImage: | ||
"https://github.com/covalenthq/web3-resources/assets/7921710/1ab51c53-1115-4989-8f93-a1e8d13c8640", | ||
}, | ||
// Override the default light theme | ||
light: { | ||
...themes.normal, | ||
appBg: "white", | ||
colorSecondary: "#EA088C", | ||
brandImage: | ||
"https://github.com/covalenthq/web3-components/assets/7921710/36909291-c669-448b-abcd-988cabc83cf3", | ||
}, | ||
}, | ||
controls: { | ||
matchers: { | ||
color: /(background|color)$/i, | ||
date: /Date$/, | ||
}, | ||
}, | ||
}; | ||
|
||
import React from "react"; | ||
import { Preview } from "@storybook/react"; | ||
|
||
const preview: Preview = { | ||
decorators: [ | ||
(Story) => ( | ||
<GoldRushProvider apikey={import.meta.env.STORYBOOK_COVALENT_API_KEY}> | ||
<Story /> | ||
</GoldRushProvider> | ||
), | ||
], | ||
}; | ||
|
||
export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,112 @@ | ||
# goldrush-kit | ||
|
||
Beautifully designed React components for your dApp frontend. 200+ Chains. Open-source. Customizable. | ||
|
||
## Setup | ||
|
||
Install `goldrush-kit` using `npm`: | ||
|
||
```bash | ||
npm install @covalenthq/goldrush-kit | ||
``` | ||
|
||
or `yarn`: | ||
|
||
```bash | ||
yarn add @covalenthq/goldrush-kit | ||
``` | ||
|
||
## Implementation | ||
|
||
1. Import `GoldRushProvider` | ||
|
||
```tsx | ||
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 Covalent API key. You can register for a free key on [Covalent's website](https://www.covalenthq.com). | ||
|
||
```tsx | ||
<GoldRushProvider apikey="<YOUR_API_KEY>">{children}</GoldRushProvider> | ||
``` | ||
|
||
4. Add the stylesheet to your application. | ||
|
||
```tsx | ||
import "@covalenthq/goldrush-kit/styles.css"; | ||
``` | ||
|
||
5. Add desired components. Visit GoldRush's [component documentation](https://www.covalenthq.com/docs/unified-api/goldrush/kit/gold-rush-provider/) for more information. | ||
|
||
```tsx | ||
import { | ||
GoldRushProvider, | ||
NFTWalletTokenListView, | ||
TokenBalancesListView, | ||
TokenTransfersListView, | ||
AddressActivityListView, | ||
} from "@covalenthq/goldrush-kit"; | ||
``` | ||
|
||
## Ready-to-go example | ||
|
||
Here's a full example that you can copy-paste to get started. | ||
|
||
```tsx | ||
<GoldRushProvider apikey="<YOUR_API_KEY>" mode="dark" color="emerald"> | ||
<TokenBalancesListView | ||
chain_names={[ | ||
"eth-mainnet", | ||
"matic-mainnet", | ||
"bsc-mainnet", | ||
"avalanche-mainnet", | ||
"optimism-mainnet", | ||
]} | ||
hide_small_balances | ||
address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de" | ||
/> | ||
<TokenTransfersListView | ||
chain_name="eth-mainnet" | ||
address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de" | ||
contract_address="0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48" | ||
/> | ||
<AddressActivityListView address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de"/> | ||
<NFTWalletTokenListView | ||
address="0xfc43f5f9dd45258b3aff31bdbe6561d97e8b71de" | ||
chain_name="eth-mainnet" | ||
/> | ||
</GoldRushProvider> | ||
``` | ||
|
||
## Build and customize with Storybook | ||
|
||
The components used above are built using Storybook, React, Tailwind, and TypeScript. | ||
|
||
Storybook provides developers with a way to quickly prototype and develop components in isolation, while React provides the tools to quickly build out a web application. Tailwind provides a library of pre-built UI components and utility classes, while TypeScript adds type safety and autocompletion to the development process. Together, these tools provide developers with the tools they need to quickly and easily build complex, modern web applications. | ||
|
||
### Environmental Variable | ||
|
||
Create and add a `.env` file to the root directory of your project and the following to the file. | ||
|
||
``` | ||
STORYBOOK_COVALENT_API_KEY = "YOUR_API_KEY" | ||
``` | ||
|
||
### Start | ||
|
||
``` | ||
npm run dev | ||
``` | ||
|
||
### Build/Bundle Component Library | ||
|
||
```bash | ||
npm run build:library | ||
``` | ||
|
||
### Build/Bundle Storybook For Deployment | ||
|
||
```bash | ||
npm run build:storybook | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
{ | ||
"$schema": "https://ui.shadcn.com/schema.json", | ||
"style": "new-york", | ||
"rsc": false, | ||
"tsx": true, | ||
"tailwind": { | ||
"config": "tailwind.config.js", | ||
"css": "app/globals.css", | ||
"baseColor": "neutral", | ||
"cssVariables": true | ||
}, | ||
"aliases": { | ||
"components": "@/components", | ||
"utils": "@/lib/utils" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + React + TS</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.tsx"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from "./src"; |
Oops, something went wrong.