First commit

.eslintrc.json

@@ -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": "error",
+        "@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"
+    }
+}

.github/workflows/linter.yml

@@ -0,0 +1,36 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the workflow will run
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['*']
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      # - uses: npm/action-setup@v2
+      #   with:
+      #     version: 8
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - run: npm install
+      - run: npm run lint
+      - run: npm run build:library

.gitignore

@@ -128,3 +128,12 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+# Optional REPL history
+.node_repl_history
+.next
+.DS_Store
+
+# Custom
+src/tailwind-output.css
+vite.config.ts.*

.prettierrc.json

@@ -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"]
+}

.storybook/main.js

@@ -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,
+    },
+};

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+    window.global = window;
+</script>

.storybook/preview.tsx

@@ -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;

README.md

@@ -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
+```

components.json

@@ -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"
+    }
+}

index.html

@@ -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>

index.ts

@@ -0,0 +1 @@
+export * from "./src";