Skip to content

Commit 554c326

Browse files
technophile-04technophile-04
committed
resolve merge conflicts
2 parents e4b8f9b + 0d04984 commit 554c326

11 files changed

Lines changed: 7071 additions & 195 deletions

File tree

‎docs/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist

‎docs/components/DocsProvider.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
5+
import { WagmiProvider } from "wagmi";
6+
import { mainnet, polygon } from "viem/chains";
7+
import { createConfig, http } from "wagmi";
8+
import { createClient } from "viem";
9+
import "@scaffold-ui/components/styles.css";
10+
11+
export const chains = [mainnet, polygon] as const;
12+
13+
const wagmiConfig = createConfig({
14+
chains: chains,
15+
connectors: [],
16+
ssr: true,
17+
client({ chain }) {
18+
return createClient({ chain, transport: http() });
19+
},
20+
});
21+
22+
const queryClient = new QueryClient({
23+
defaultOptions: {
24+
queries: {
25+
refetchOnWindowFocus: false,
26+
retry: false,
27+
},
28+
},
29+
});
30+
31+
export function DocsProvider({ children }: { children: React.ReactNode }) {
32+
return (
33+
<WagmiProvider config={wagmiConfig}>
34+
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
35+
</WagmiProvider>
36+
);
37+
}

‎docs/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "docs",
3+
"version": "1.0.0",
4+
"description": "Documentation for scaffold-ui components",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vocs dev",
8+
"build": "pnpm --filter @scaffold-ui/hooks --filter @scaffold-ui/components run build && vocs build",
9+
"preview": "vocs preview"
10+
},
11+
"keywords": [
12+
"documentation",
13+
"scaffold-ui",
14+
"components"
15+
],
16+
"author": "",
17+
"license": "ISC",
18+
"dependencies": {
19+
"@scaffold-ui/components": "workspace:*",
20+
"@scaffold-ui/hooks": "workspace:*",
21+
"@tanstack/react-query": "^5.59.15",
22+
"@types/react": "^19",
23+
"@types/react-dom": "^19",
24+
"react": "^19.0.0",
25+
"react-dom": "^19.0.0",
26+
"viem": "^2.23.13",
27+
"vocs": "^1.0.13",
28+
"wagmi": "^2.14.15"
29+
}
30+
}

‎docs/pages/components/address.mdx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
---
2+
layout: docs
3+
---
4+
5+
import React from "react";
6+
import { Address } from "@scaffold-ui/components";
7+
import { DocsProvider } from "../../components/DocsProvider";
8+
9+
# Address Component
10+
11+
The `Address` component displays Ethereum addresses with automatic ENS resolution, avatar display, and block explorer linking.
12+
13+
## Import
14+
15+
```tsx
16+
import { Address } from "@scaffold-ui/components";
17+
```
18+
19+
## Props
20+
21+
| Prop | Type | Default | Description |
22+
| -------------------- | ---------------------------------------------------------- | --------- | ---------------------------------------- |
23+
| `address` | `Address` | - | The Ethereum address to display |
24+
| `disableAddressLink` | `boolean` | `false` | Disable linking to block explorer |
25+
| `format` | `"short" \| "long"` | `"short"` | Display format for the address |
26+
| `size` | `"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl"` | `"base"` | Size of the component |
27+
| `onlyEnsOrAddress` | `boolean` | `false` | Show only ENS name or address (not both) |
28+
| `chain` | `Chain` | `mainnet` | Blockchain network for resolution |
29+
30+
## Live Examples
31+
32+
### Basic Usage
33+
34+
<DocsProvider>
35+
<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />
36+
</DocsProvider>
37+
38+
```tsx twoslash
39+
import React from "react";
40+
import { Address } from "@scaffold-ui/components";
41+
42+
<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" size="base" />;
43+
```
44+
45+
### Different Sizes
46+
47+
<DocsProvider>
48+
<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" size="xs" />
49+
<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" size="sm" />
50+
<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" size="base" />
51+
<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" size="lg" />
52+
<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" size="xl" />
53+
</DocsProvider>
54+
55+
```tsx twoslash
56+
import React from "react";
57+
import { Address } from "@scaffold-ui/components";
58+
59+
<Address
60+
address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
61+
size="xs"
62+
// ^?
63+
/>;
64+
```
65+
66+
### Long Format
67+
68+
<DocsProvider>
69+
<Address
70+
address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
71+
format="long"
72+
size="base"
73+
/>
74+
</DocsProvider>
75+
76+
```tsx twoslash
77+
import React from "react";
78+
import { Address } from "@scaffold-ui/components";
79+
80+
<Address
81+
address="0x1234567890123456789012345678901234567890"
82+
format="long"
83+
size="base"
84+
/>;
85+
```
86+
87+
### Disable Block Explorer Link
88+
89+
<DocsProvider>
90+
<Address
91+
address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
92+
disableAddressLink={true}
93+
size="base"
94+
/>
95+
</DocsProvider>
96+
97+
```tsx twoslash
98+
import React from "react";
99+
import { Address } from "@scaffold-ui/components";
100+
101+
<Address
102+
address="0x1234567890123456789012345678901234567890"
103+
disableAddressLink={true}
104+
size="base"
105+
/>;
106+
```
107+
108+
### ENS or Address Only
109+
110+
<DocsProvider>
111+
<Address
112+
address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
113+
onlyEnsOrAddress={true}
114+
size="base"
115+
/>
116+
</DocsProvider>
117+
118+
```tsx twoslash
119+
import React from "react";
120+
import { Address } from "@scaffold-ui/components";
121+
122+
<Address
123+
address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
124+
onlyEnsOrAddress={true}
125+
size="base"
126+
/>;
127+
```
128+
129+
### Custom Chain
130+
131+
```tsx twoslash
132+
import React from "react";
133+
import { polygon } from "viem/chains";
134+
import { Address } from "@scaffold-ui/components";
135+
136+
<Address
137+
address="0x1234567890123456789012345678901234567890"
138+
chain={polygon}
139+
size="base"
140+
/>;
141+
```

‎docs/pages/components/balance.mdx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
layout: docs
3+
---
4+
5+
import { Balance } from "@scaffold-ui/components";
6+
import { DocsProvider } from "../../components/DocsProvider";
7+
8+
# Balance Component
9+
10+
The `Balance` component displays token balances for Ethereum addresses with support for USD conversion and interactive toggling.
11+
12+
## Import
13+
14+
```tsx
15+
import { Balance } from "@scaffold-ui/components";
16+
```
17+
18+
## Props
19+
20+
| Prop | Type | Default | Description |
21+
| ---------------- | --------- | ---------------------------- | ------------------------------------------------------ |
22+
| `address` | `Address` | - | **Required.** The Ethereum address to show balance for |
23+
| `chain` | `Chain` | Connected chain or `mainnet` | Blockchain network to query |
24+
| `className` | `string` | `""` | Additional CSS classes |
25+
| `defaultUsdMode` | `boolean` | `false` | Start in USD display mode |
26+
27+
## Live Examples
28+
29+
### Basic Usage
30+
31+
<DocsProvider>
32+
<Balance address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />
33+
</DocsProvider>
34+
35+
```tsx
36+
<Balance address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />
37+
```
38+
39+
### Default USD Mode
40+
41+
<DocsProvider>
42+
<Balance
43+
address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
44+
defaultUsdMode={true}
45+
/>
46+
</DocsProvider>
47+
48+
```tsx
49+
<Balance
50+
address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
51+
defaultUsdMode={true}
52+
/>
53+
```
54+
55+
### Custom Chain
56+
57+
```tsx
58+
import { polygon } from "viem/chains";
59+
60+
<Balance
61+
address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
62+
chain={polygon}
63+
/>;
64+
```

‎docs/pages/getting-started/installation.mdx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
layout: docs
3+
---
4+
5+
# Installation
6+
7+
## Package Installation
8+
9+
Install Scaffold UI using your preferred package manager:
10+
11+
:::code-group
12+
13+
```bash [npm]
14+
npm install @scaffold-ui/components
15+
```
16+
17+
```bash [pnpm]
18+
pnpm add @scaffold-ui/components
19+
```
20+
21+
```bash [yarn]
22+
yarn add @scaffold-ui/components
23+
```
24+
25+
:::
26+
27+
## Peer Dependencies
28+
29+
Scaffold UI requires React as a peer dependency:
30+
31+
```bash
32+
npm install react react-dom
33+
```
34+
35+
## Setup
36+
37+
### Basic Usage
38+
39+
Import and use components directly:
40+
41+
```tsx
42+
import { Address, Balance } from "@scaffold-ui/components";
43+
44+
function MyComponent() {
45+
const address = "0x1234567890123456789012345678901234567890";
46+
47+
return (
48+
<div>
49+
<Address address={address} />
50+
<Balance address={address} />
51+
</div>
52+
);
53+
}
54+
```

‎docs/pages/index.mdx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Scaffold UI
2+
3+
Scaffold UI is a collection of React components and hooks designed specifically for building Ethereum dApps. These components provide a seamless way to interact with Ethereum addresses, balances, and user inputs in your decentralized applications.
4+
5+
## Features
6+
7+
- 🏗️ **Built for Ethereum**: Components designed specifically for dApp development
8+
- ⚡ **TypeScript**: Full TypeScript support with comprehensive type definitions
9+
- 🎨 **Customizable**: Flexible theming and styling options
10+
- 🪝 **React Hooks**: Complementary hooks for enhanced functionality
11+
- 📱 **Responsive**: Mobile-friendly components out of the box
12+
13+
## Quick Start
14+
15+
```bash
16+
npm install @scaffold-eth-ui/components
17+
```
18+
19+
```tsx
20+
import { Address, Balance } from "@scaffold-eth-ui/components";
21+
22+
function App() {
23+
return (
24+
<div>
25+
<Address address="0x..." />
26+
<Balance address="0x..." />
27+
</div>
28+
);
29+
}
30+
```
31+
32+
## Getting Started
33+
34+
Check out the [Installation Guide](/getting-started/installation) to get started with Scaffold UI.

0 commit comments

Comments
 (0)