feat: add missing component pages

turbo-eth · Nov 27, 2023 · df62763 · df62763
1 parent cbd98b1
commit df62763
Show file tree

Hide file tree

Showing 43 changed files with 528 additions and 91 deletions.
diff --git a/apps/www/app/examples/layout.tsx b/apps/www/app/examples/layout.tsx
@@ -26,15 +26,15 @@ export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
     <>
       <div className="container relative">
         <PageHeader className="page-header pb-8">
-        <Link
-          href="/docs/components/wallet-connect"
-          className="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
-        >
-          ⚡️ <Separator className="mx-2 h-4" orientation="vertical" />{" "}
-          <span className="sm:hidden">Build Web3 in Turbo Mode.</span>
-          <span className="hidden sm:inline">Build Web3 in Turbo Mode</span>
-          <ArrowRightIcon className="ml-1 h-4 w-4" />
-        </Link>
+          <Link
+            href="/docs/components/wallet-connect"
+            className="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+          >
+            ⚡️ <Separator className="mx-2 h-4" orientation="vertical" />{" "}
+            <span className="sm:hidden">Build Web3 in Turbo Mode.</span>
+            <span className="hidden sm:inline">Build Web3 in Turbo Mode</span>
+            <ArrowRightIcon className="ml-1 h-4 w-4" />
+          </Link>
           <PageHeaderHeading className="hidden md:block">
             Check out some examples.
           </PageHeaderHeading>

diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -31,7 +31,7 @@ export const metadata: Metadata = {
     "Radix UI",
     "WAGMI",
     "Web3",
-    "Ethereum"
+    "Ethereum",
   ],
   authors: [
     {

diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
@@ -71,12 +71,12 @@ export const docsConfig: DocsConfig = {
           items: [],
         },
         {
-          title: "Wallet Manage",
+          title: "(WIP) Wallet Manage",
           href: "/docs/components/wallet-manage",
           items: [],
         },
         {
-          title: "Network Manage",
+          title: "(WIP) Network Manage",
           href: "/docs/components/network-manage",
           items: [],
         },

diff --git a/apps/www/content/docs/components/account-address.mdx b/apps/www/content/docs/components/account-address.mdx
@@ -3,7 +3,7 @@ title: Address
 description: Display connected account address.
 component: true
 wagmi:
-  link: https://wagmi.sh/react/hooks/useNetwork
+  link: https://wagmi.sh/react/hooks/useAccount
 ---
 
 <ComponentPreview

diff --git a/apps/www/content/docs/components/account-balance.mdx b/apps/www/content/docs/components/account-balance.mdx
@@ -0,0 +1,57 @@
+---
+title: Account Balance
+description: Display the balance of the connected account.
+component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useAccount
+---
+
+<ComponentPreview
+  name="account-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>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="account-balance" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { AccountBalance } from "@/components/buidl/account-balance"
+```
+
+```tsx
+<AccountBalance />
+```
diff --git a/apps/www/content/docs/components/account-blockie.mdx b/apps/www/content/docs/components/account-blockie.mdx
@@ -2,7 +2,8 @@
 title: Account Blockie
 description: Display connected account blockie identicon.
 component: true
-
+wagmi:
+  link: https://wagmi.sh/react/hooks/useAccount
 ---
 
 <ComponentPreview
@@ -35,9 +36,13 @@ component: true
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [Blockie](/docs/components/blockie)
+
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource name="blockie" />
+<ComponentSource name="account-blockie" />
 
 </Steps>
 

diff --git a/apps/www/content/docs/components/account-ens-avatar.mdx b/apps/www/content/docs/components/account-ens-avatar.mdx
@@ -2,7 +2,7 @@
 title: Account ENS Avatar
 description: Display the connected account ENS avatar.
 component: true
-radix:
+wagmi:
   link: https://wagmi.sh/react/hooks/useEnsAvatar
 ---
 
@@ -36,6 +36,10 @@ radix:
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [EnsAvatar](/docs/components/ens-avatar)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="account-ens-avatar" />

diff --git a/apps/www/content/docs/components/account-ens-name.mdx b/apps/www/content/docs/components/account-ens-name.mdx
@@ -2,8 +2,8 @@
 title: Account ENS Name
 description: Display the connected account ENS name.
 component: true
-radix:
-  link: https://wagmi.sh/react/hooks/useEnsAvatar
+wagmi:
+  link: https://wagmi.sh/react/hooks/useAccount
 ---
 
 <ComponentPreview
@@ -36,6 +36,10 @@ radix:
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [EnsName](/docs/components/ens-name)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="account-ens-name" />
@@ -49,9 +53,9 @@ radix:
 ## Usage
 
 ```tsx
-import { AccountEnsAvatar } from "@/components/buidl/account-ens-name"
+import { AccountEnsName } from "@/components/buidl/account-ens-name"
 ```
 
 ```tsx
-<AccountEnsAvatar />
+<AccountEnsName />
 ```
diff --git a/apps/www/content/docs/components/account-nonce.mdx b/apps/www/content/docs/components/account-nonce.mdx
@@ -0,0 +1,57 @@
+---
+title: Account Nonce
+description: Display the nonce of the connected account.
+component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useAccount
+---
+
+<ComponentPreview
+  name="account-nonce-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>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="account-nonce" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { AccountNonce } from "@/components/buidl/account-nonce"
+```
+
+```tsx
+<AccountNonce />
+```
diff --git a/apps/www/content/docs/components/block-explorer-link.mdx b/apps/www/content/docs/components/block-explorer-link.mdx
@@ -0,0 +1,58 @@
+---
+title: Block Explorer Link
+description: Link to an address or transaction to the block explorer of a given network.
+component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useNetwork
+---
+
+<ComponentPreview
+  name="block-explorer-link-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>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="block-explorer-link" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { WalletConnect } from "@/components/buidl/wallet-connect"
+```
+
+```tsx
+<WalletConnect />
+<WalletConnect>Custom Text</WalletConnect>
+```
diff --git a/apps/www/content/docs/components/blockie.mdx b/apps/www/content/docs/components/blockie.mdx
@@ -37,7 +37,7 @@ component: true
 <Step>Install the following dependencies:</Step>
 
 ```bash
-pnpm add ethereum-blockies-base64
+npm add ethereum-blockies-base64
 ```
 
 <Step>Copy and paste the following code into your project.</Step>

diff --git a/apps/www/content/docs/components/ens-avatar.mdx b/apps/www/content/docs/components/ens-avatar.mdx
@@ -2,7 +2,7 @@
 title: ENS Avatar
 description: Display an account ENS avatar.
 component: true
-radix:
+wagmi:
   link: https://wagmi.sh/react/hooks/useEnsAvatar
 ---
 

diff --git a/apps/www/content/docs/components/ens-image.mdx b/apps/www/content/docs/components/ens-image.mdx
@@ -2,7 +2,7 @@
 title: ENS Name
 description: Display an account ENS domain name.
 component: true
-radix:
+wagmi:
   link: https://wagmi.sh/react/hooks/useEnsAvatar
 ---
 

diff --git a/apps/www/content/docs/components/ens-name.mdx b/apps/www/content/docs/components/ens-name.mdx
@@ -2,8 +2,8 @@
 title: ENS Name
 description: Display an account ENS domain name.
 component: true
-radix:
-  link: https://wagmi.sh/react/hooks/useEnsAvatar
+wagmi:
+  link: https://wagmi.sh/react/hooks/useEnsName
 ---
 
 <ComponentPreview

diff --git a/apps/www/content/docs/components/ens-symbol.mdx b/apps/www/content/docs/components/ens-symbol.mdx
@@ -2,7 +2,7 @@
 title: ENS Symbol
 description: Display an account ENS domain name.
 component: true
-radix:
+wagmi:
   link: https://wagmi.sh/react/hooks/useEnsAvatar
 ---