feat: add wagmi components

turbo-eth · Nov 29, 2023 · c22f67c · c22f67c
1 parent 3a5708b
commit c22f67c
Show file tree

Hide file tree

Showing 28 changed files with 10,374 additions and 4,413 deletions.
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
@@ -12,13 +12,6 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/buidl/account-address")),
       files: ["registry/default/buidl/account-address.tsx"],
     },
-    "account-balance": {
-      name: "account-balance",
-      type: "components:buidl",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/buidl/account-balance")),
-      files: ["registry/default/buidl/account-balance.tsx"],
-    },
     "account-blockie": {
       name: "account-blockie",
       type: "components:buidl",
@@ -54,20 +47,55 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/buidl/address")),
       files: ["registry/default/buidl/address.tsx"],
     },
+    "balance": {
+      name: "balance",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/balance")),
+      files: ["registry/default/buidl/balance.tsx"],
+    },
     "block-explorer-link": {
       name: "block-explorer-link",
       type: "components:buidl",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/buidl/block-explorer-link")),
       files: ["registry/default/buidl/block-explorer-link.tsx"],
     },
+    "block-number": {
+      name: "block-number",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/block-number")),
+      files: ["registry/default/buidl/block-number.tsx"],
+    },
+    "transaction": {
+      name: "transaction",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/transaction")),
+      files: ["registry/default/buidl/transaction.tsx"],
+    },
     "transaction-status": {
       name: "transaction-status",
       type: "components:buidl",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/buidl/transaction-status")),
       files: ["registry/default/buidl/transaction-status.tsx"],
     },
+    "sign-message-button": {
+      name: "sign-message-button",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/sign-message-button")),
+      files: ["registry/default/buidl/sign-message-button.tsx"],
+    },
+    "fee-data": {
+      name: "fee-data",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/fee-data")),
+      files: ["registry/default/buidl/fee-data.tsx"],
+    },
     "blockie": {
       name: "blockie",
       type: "components:buidl",
@@ -187,13 +215,6 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/account-address-demo")),
       files: ["registry/default/example/account-address-demo.tsx"],
     },
-    "account-balance-demo": {
-      name: "account-balance-demo",
-      type: "components:example",
-      registryDependencies: ["account-balance"],
-      component: React.lazy(() => import("@/registry/default/example/account-balance-demo")),
-      files: ["registry/default/example/account-balance-demo.tsx"],
-    },
     "account-blockie-demo": {
       name: "account-blockie-demo",
       type: "components:example",
@@ -229,20 +250,55 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/address-demo")),
       files: ["registry/default/example/address-demo.tsx"],
     },
+    "balance-demo": {
+      name: "balance-demo",
+      type: "components:example",
+      registryDependencies: ["balance"],
+      component: React.lazy(() => import("@/registry/default/example/balance-demo")),
+      files: ["registry/default/example/balance-demo.tsx"],
+    },
     "block-explorer-link-demo": {
       name: "block-explorer-link-demo",
       type: "components:example",
       registryDependencies: ["block-explorer-link"],
       component: React.lazy(() => import("@/registry/default/example/block-explorer-link-demo")),
       files: ["registry/default/example/block-explorer-link-demo.tsx"],
     },
+    "block-number-demo": {
+      name: "block-number-demo",
+      type: "components:example",
+      registryDependencies: ["block-number"],
+      component: React.lazy(() => import("@/registry/default/example/block-number-demo")),
+      files: ["registry/default/example/block-number-demo.tsx"],
+    },
+    "transaction-demo": {
+      name: "transaction-demo",
+      type: "components:example",
+      registryDependencies: ["transaction"],
+      component: React.lazy(() => import("@/registry/default/example/transaction-demo")),
+      files: ["registry/default/example/transaction-demo.tsx"],
+    },
     "transaction-status-demo": {
       name: "transaction-status-demo",
       type: "components:example",
       registryDependencies: ["transaction-status"],
       component: React.lazy(() => import("@/registry/default/example/transaction-status-demo")),
       files: ["registry/default/example/transaction-status-demo.tsx"],
     },
+    "sign-message-button-demo": {
+      name: "sign-message-button-demo",
+      type: "components:example",
+      registryDependencies: ["sign-message-button"],
+      component: React.lazy(() => import("@/registry/default/example/sign-message-button-demo")),
+      files: ["registry/default/example/sign-message-button-demo.tsx"],
+    },
+    "fee-data-demo": {
+      name: "fee-data-demo",
+      type: "components:example",
+      registryDependencies: ["fee-data"],
+      component: React.lazy(() => import("@/registry/default/example/fee-data-demo")),
+      files: ["registry/default/example/fee-data-demo.tsx"],
+    },
     "blockie-demo": {
       name: "blockie-demo",
       type: "components:example",

diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
@@ -90,16 +90,41 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/address",
           items: [],
         },
+        {
+          title: "Balance",
+          href: "/docs/components/balance",
+          items: [],
+        },
         {
           title: "Block Explorer Link",
           href: "/docs/components/block-explorer-link",
           items: [],
         },
+        {
+          title: "Block Number",
+          href: "/docs/components/block-number",
+          items: [],
+        },
+        {
+          title: "Transaction",
+          href: "/docs/components/transaction",
+          items: [],
+        },
         {
           title: "Transaction Status",
           href: "/docs/components/transaction-status",
           items: [],
         },
+        {
+          title: "Fee Data",
+          href: "/docs/components/fee-data",
+          items: [],
+        },
+        {
+          title: "Sign Message Button",
+          href: "/docs/components/sign-message-button",
+          items: [],
+        },
         {
           title: "Blockie",
           href: "/docs/components/blockie",
@@ -130,11 +155,6 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/account-address",
           items: [],
         },
-        {
-          title: "Account Balance",
-          href: "/docs/components/account-balance",
-          items: [],
-        },
         {
           title: "Account Blockie",
           href: "/docs/components/account-blockie",

diff --git a/apps/www/content/docs/components/balance.mdx b/apps/www/content/docs/components/balance.mdx
@@ -0,0 +1,67 @@
+---
+title: Balance
+description: Displays the balance of an address.
+component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useBalance
+---
+
+<ComponentPreview
+  name="balance-demo"
+  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
+/>
+
+## Installation
+
+<Tabs defaultValue="manual">
+
+<TabsList>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+  <TabsTrigger disabled={true} value="cli">
+    CLI (Coming Soon)
+  </TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Coming soon...</Step>
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="balance" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  GasPrice,
+  MaxFeePerGas,
+  MaxPriorityFeePerGas,
+} from "@/registry/default/buidl/balance"
+```
+
+```tsx
+<GasPrice />
+<MaxFeePerGas />
+<MaxPriorityFeePerGas />
+```
diff --git a/...ntent/docs/components/account-balance.mdx → .../content/docs/components/block-number.mdx b/...ntent/docs/components/account-balance.mdx → .../content/docs/components/block-number.mdx
@@ -1,13 +1,13 @@
 ---
-title: Account Balance
-description: Display the balance of the connected account.
+title: Block Number
+description: Displays the current block number of a network.
 component: true
 wagmi:
-  link: https://wagmi.sh/react/hooks/useAccount
+  link: https://wagmi.sh/react/hooks/useBlockNumber
 ---
 
 <ComponentPreview
-  name="account-balance-demo"
+  name="block-number-demo"
   className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
 />
 
@@ -36,9 +36,13 @@ wagmi:
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource name="account-balance" />
+<ComponentSource name="block-number" />
 
 </Steps>
 
@@ -49,9 +53,9 @@ wagmi:
 ## Usage
 
 ```tsx
-import { AccountBalance } from "@/components/buidl/account-balance"
+import { BlockNumber } from "@/registry/default/buidl/block-number"
 ```
 
 ```tsx
-<AccountBalance />
+<BlockNumber />
 ```
diff --git a/apps/www/content/docs/components/fee-data.mdx b/apps/www/content/docs/components/fee-data.mdx
@@ -0,0 +1,67 @@
+---
+title: Fee Data
+description: Displays the fee data of a network.
+component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useFeeData
+---
+
+<ComponentPreview
+  name="fee-data-demo"
+  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
+/>
+
+## Installation
+
+<Tabs defaultValue="manual">
+
+<TabsList>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+  <TabsTrigger disabled={true} value="cli">
+    CLI (Coming Soon)
+  </TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Coming soon...</Step>
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="fee-data" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  GasPrice,
+  MaxFeePerGas,
+  MaxPriorityFeePerGas,
+} from "@/registry/default/buidl/fee-data"
+```
+
+```tsx
+<GasPrice />
+<MaxFeePerGas />
+<MaxPriorityFeePerGas />
+```