From bfd8d6c566e36402337b55e9860847ef1670f1bc Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Wed, 1 Apr 2026 08:42:16 +0530 Subject: [PATCH 1/3] initial migration --- docs/pages/components/Address.md | 6 +++++- docs/pages/components/AddressInput.md | 6 +++++- docs/pages/components/Balance.md | 6 +++++- docs/pages/components/BlockieAvatar.md | 5 +++++ docs/pages/components/EtherInput.md | 6 +++++- docs/pages/components/InputBase.md | 10 +++++++++- docs/pages/components/IntegerInput.md | 6 +++++- docs/pages/components/RainbowKitCustomConnectButton.md | 4 ++++ docs/pages/components/index.mdx | 2 ++ docs/pages/index.mdx | 1 + 10 files changed, 46 insertions(+), 6 deletions(-) diff --git a/docs/pages/components/Address.md b/docs/pages/components/Address.md index 732e306..85acf38 100644 --- a/docs/pages/components/Address.md +++ b/docs/pages/components/Address.md @@ -20,7 +20,7 @@ Clicking on the address redirects to the connected wallet's network block explor ## Import ```tsx -import { Address } from "~~/components/scaffold-eth"; +import { Address } from "@scaffold-ui/components"; ``` ## Usage @@ -38,3 +38,7 @@ import { Address } from "~~/components/scaffold-eth"; | **format** (optional) | `string` | `"short"` | By default, only the first five characters of the address are displayed. Set this to `"long"` to display the entire address. | | **size** (optional) | `string` | `"base"` | Size for the displayed Address component. `base` by default but you can pass in `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`. | | **onlyEnsOrAddress** (optional) | `boolean` | `false` | When `true`, displays only the ENS name (if available) or the address, not both. | + +:::tip[Scaffold-UI] +This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI Address docs](https://scaffold-ui-docs.vercel.app/components/Address). +::: diff --git a/docs/pages/components/AddressInput.md b/docs/pages/components/AddressInput.md index 192d0ec..1b414e8 100644 --- a/docs/pages/components/AddressInput.md +++ b/docs/pages/components/AddressInput.md @@ -14,7 +14,7 @@ Also shows a blockie image for each address. ## Import ```tsx -import { AddressInput } from "~~/components/scaffold-eth"; +import { AddressInput } from "@scaffold-ui/components"; ``` ## Usage @@ -40,3 +40,7 @@ const [address, setAddress] = useState(""); | **placeholder** (optional) | `string` | `undefined` | The string that will be rendered before address input has been entered. | | **name** (optional) | `string` | `undefined` | Helps identify the data being sent if AddressInput is submitted into a form. | | **disabled** (optional) | `boolean` | `false` | If `true`, sets the address input un-clickable and unusable. | + +:::tip[Scaffold-UI] +This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI AddressInput docs](https://scaffold-ui-docs.vercel.app/components/AddressInput). +::: diff --git a/docs/pages/components/Balance.md b/docs/pages/components/Balance.md index 5611bd5..25c38bf 100644 --- a/docs/pages/components/Balance.md +++ b/docs/pages/components/Balance.md @@ -12,7 +12,7 @@ Displays the balance of a given address in both ether (ETH) and US dollars (USD) ## Import ```tsx -import { Balance } from "~~/components/scaffold-eth"; +import { Balance } from "@scaffold-ui/components"; ``` ## Usage @@ -27,3 +27,7 @@ import { Balance } from "~~/components/scaffold-eth"; | ------------------------ | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- | | **address** | `string` | `undefined` | Address in `0x___` format, it will resolve its ENS if it has one associated. | | **className** (optional) | `string` | `""` | Prop to pass additional CSS styling to the component. You can use Tailwind / daisyUI classes like `text-3xl` for styling. | + +:::tip[Scaffold-UI] +This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI Balance docs](https://scaffold-ui-docs.vercel.app/components/Balance). +::: diff --git a/docs/pages/components/BlockieAvatar.md b/docs/pages/components/BlockieAvatar.md index f7182d2..9bf3436 100644 --- a/docs/pages/components/BlockieAvatar.md +++ b/docs/pages/components/BlockieAvatar.md @@ -19,6 +19,10 @@ If you want more control over styling the blockie, you can directly use [blo](ht import { BlockieAvatar } from "~~/components/scaffold-eth"; ``` +:::info +`BlockieAvatar` is a local SE-2 component, not part of Scaffold-UI. +::: + ## Usage ```tsx @@ -35,3 +39,4 @@ import { BlockieAvatar } from "~~/components/scaffold-eth"; | `address` | `string` | `undefined` | The address for which you want to display its blockie. Ensure it's in the `0x___` format. | | `size` | `number` | `undefined` | Width and Height in pixels (square). | | `ensImage` (optional) | `string` | `undefined` | An arbitrary image url to render instead of the blockie. | + diff --git a/docs/pages/components/EtherInput.md b/docs/pages/components/EtherInput.md index dda3c91..e241b17 100644 --- a/docs/pages/components/EtherInput.md +++ b/docs/pages/components/EtherInput.md @@ -12,7 +12,7 @@ Displays an input field for ETH/USD amount, with an option to convert between ET ## Import ```tsx -import { EtherInput } from "~~/components/scaffold-eth"; +import { EtherInput } from "@scaffold-ui/components"; ``` ## Usage @@ -37,3 +37,7 @@ const [ethAmount, setEthAmount] = useState(""); | **placeholder** (optional) | `string` | `undefined` | The string that will be rendered when there is no input value. | | **name** (optional) | `string` | `undefined` | Helps identify the data being sent if EtherInput is submitted into a form. | | **disabled** (optional) | `boolean` | `false` | When set to `true`, changes input background color and border to have disabled styling. | + +:::tip[Scaffold-UI] +This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI EtherInput docs](https://scaffold-ui-docs.vercel.app/components/EtherInput). +::: diff --git a/docs/pages/components/InputBase.md b/docs/pages/components/InputBase.md index 96684e4..9835765 100644 --- a/docs/pages/components/InputBase.md +++ b/docs/pages/components/InputBase.md @@ -12,9 +12,13 @@ Simple building block for creating an input which comes with basic default style ## Import ```tsx -import { InputBase } from "~~/components/scaffold-eth"; +import { BaseInput } from "@scaffold-ui/components"; ``` +:::warning +This component was renamed from `InputBase` to `BaseInput` in Scaffold-UI. +::: + ## Usage ```tsx @@ -40,3 +44,7 @@ const [url, setUrl] = useState(); | **name** (optional) | `string` | `undefined` | Helps identify the data being sent if InputBase is submitted into a form. | | **error** (optional) | `boolean` | `false` | When set to `true`, changes input border to have error styling. | | **disabled** (optional) | `boolean` | `false` | When set to `true`, changes input background color and border to have disabled styling. | + +:::tip[Scaffold-UI] +This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI BaseInput docs](https://scaffold-ui-docs.vercel.app/components/BaseInput). +::: diff --git a/docs/pages/components/IntegerInput.md b/docs/pages/components/IntegerInput.md index 942f10b..035ce19 100644 --- a/docs/pages/components/IntegerInput.md +++ b/docs/pages/components/IntegerInput.md @@ -13,7 +13,7 @@ Shows by default a small button to multiply input's value \* 10^18 to transform ## Import ```tsx -import { IntegerInput } from "~~/components/scaffold-eth"; +import { IntegerInput } from "@scaffold-ui/debug-contracts"; ``` ## Usage @@ -42,3 +42,7 @@ const [txValue, setTxValue] = useState(""); | **name** (optional) | `string` | `undefined` | Helps identify the data being sent if InputBase is submitted into a form. | | **error** (optional) | `boolean` | `false` | When set to `true`, changes input border to have error styling. | | **disabled** (optional) | `boolean` | `false` | When set to `true`, changes input background color and border to have disabled styling. | + +:::tip[Scaffold-UI] +This component is part of the `@scaffold-ui/debug-contracts` package. For more details, check the [Scaffold-UI docs](https://scaffold-ui-docs.vercel.app/). +::: diff --git a/docs/pages/components/RainbowKitCustomConnectButton.md b/docs/pages/components/RainbowKitCustomConnectButton.md index fd0bd0a..c936c6f 100644 --- a/docs/pages/components/RainbowKitCustomConnectButton.md +++ b/docs/pages/components/RainbowKitCustomConnectButton.md @@ -26,3 +26,7 @@ import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; ```tsx ``` + +:::info +Unlike other components, `RainbowKitCustomConnectButton` is a local SE-2 component and not part of Scaffold-UI. You can find and customize it directly in your project at `components/scaffold-eth/RainbowKitCustomConnectButton/`. +::: diff --git a/docs/pages/components/index.mdx b/docs/pages/components/index.mdx index 5d61f27..c0e7215 100644 --- a/docs/pages/components/index.mdx +++ b/docs/pages/components/index.mdx @@ -7,6 +7,8 @@ description: Pre-built React components for common web3 use cases. Scaffold-ETH 2 provides a set of pre-built components for common web3 use cases. You can make use of them to accelerate and simplify your dapp development. +These components are powered by [**Scaffold-UI**](https://scaffold-ui-docs.vercel.app/) — a standalone library that provides the underlying components and hooks. The examples below show how they work within a Scaffold-ETH 2 project. For more details on customization, theming, and advanced usage, check the [Scaffold-UI documentation](https://scaffold-ui-docs.vercel.app/). + ## Available Components - [Address](/components/Address) - Display an Ethereum address with ENS resolution and copy functionality diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 3ddc22a..e2660a8 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -56,4 +56,5 @@ Here are the main components: - [**Viem**](https://viem.sh/docs/getting-started) as low-level interface that provides primitives to interact with Ethereum. The alternative to ethers.js and web3.js. - [**NextJS**](https://nextjs.org/docs) for building a frontend, using many useful pre-made hooks. - [**RainbowKit**](https://www.rainbowkit.com/docs/) for adding wallet connection. +- [**Scaffold-UI**](https://scaffold-ui-docs.vercel.app/) for pre-built web3 components and hooks (Address, Balance, Inputs, etc.). - [**DaisyUI**](https://daisyui.com/docs/) for pre-built [Tailwind CSS](https://tailwindui.com/components) components. From b673ddc6015ffca507c6c2cb39ab23140c624296 Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Wed, 1 Apr 2026 10:39:06 +0530 Subject: [PATCH 2/3] docs: clean up component documentation by removing redundant Scaffold-UI references and local component notices --- docs/pages/components/Address.md | 2 +- docs/pages/components/AddressInput.md | 2 +- docs/pages/components/Balance.md | 2 +- docs/pages/components/BlockieAvatar.md | 5 ----- docs/pages/components/EtherInput.md | 2 +- docs/pages/components/InputBase.md | 6 +----- docs/pages/components/RainbowKitCustomConnectButton.md | 4 ---- docs/pages/components/index.mdx | 2 +- docs/pages/index.mdx | 2 +- 9 files changed, 7 insertions(+), 20 deletions(-) diff --git a/docs/pages/components/Address.md b/docs/pages/components/Address.md index 85acf38..ec1e4b7 100644 --- a/docs/pages/components/Address.md +++ b/docs/pages/components/Address.md @@ -40,5 +40,5 @@ import { Address } from "@scaffold-ui/components"; | **onlyEnsOrAddress** (optional) | `boolean` | `false` | When `true`, displays only the ENS name (if available) or the address, not both. | :::tip[Scaffold-UI] -This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI Address docs](https://scaffold-ui-docs.vercel.app/components/Address). +For more details on customization and theming, check the [Scaffold-UI Address docs](https://scaffold-ui-docs.vercel.app/components/Address). ::: diff --git a/docs/pages/components/AddressInput.md b/docs/pages/components/AddressInput.md index 1b414e8..cf59f8e 100644 --- a/docs/pages/components/AddressInput.md +++ b/docs/pages/components/AddressInput.md @@ -42,5 +42,5 @@ const [address, setAddress] = useState(""); | **disabled** (optional) | `boolean` | `false` | If `true`, sets the address input un-clickable and unusable. | :::tip[Scaffold-UI] -This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI AddressInput docs](https://scaffold-ui-docs.vercel.app/components/AddressInput). +For more details on customization and theming, check the [Scaffold-UI AddressInput docs](https://scaffold-ui-docs.vercel.app/components/AddressInput). ::: diff --git a/docs/pages/components/Balance.md b/docs/pages/components/Balance.md index 25c38bf..6a33265 100644 --- a/docs/pages/components/Balance.md +++ b/docs/pages/components/Balance.md @@ -29,5 +29,5 @@ import { Balance } from "@scaffold-ui/components"; | **className** (optional) | `string` | `""` | Prop to pass additional CSS styling to the component. You can use Tailwind / daisyUI classes like `text-3xl` for styling. | :::tip[Scaffold-UI] -This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI Balance docs](https://scaffold-ui-docs.vercel.app/components/Balance). +For more details on customization and theming, check the [Scaffold-UI Balance docs](https://scaffold-ui-docs.vercel.app/components/Balance). ::: diff --git a/docs/pages/components/BlockieAvatar.md b/docs/pages/components/BlockieAvatar.md index 9bf3436..f7182d2 100644 --- a/docs/pages/components/BlockieAvatar.md +++ b/docs/pages/components/BlockieAvatar.md @@ -19,10 +19,6 @@ If you want more control over styling the blockie, you can directly use [blo](ht import { BlockieAvatar } from "~~/components/scaffold-eth"; ``` -:::info -`BlockieAvatar` is a local SE-2 component, not part of Scaffold-UI. -::: - ## Usage ```tsx @@ -39,4 +35,3 @@ import { BlockieAvatar } from "~~/components/scaffold-eth"; | `address` | `string` | `undefined` | The address for which you want to display its blockie. Ensure it's in the `0x___` format. | | `size` | `number` | `undefined` | Width and Height in pixels (square). | | `ensImage` (optional) | `string` | `undefined` | An arbitrary image url to render instead of the blockie. | - diff --git a/docs/pages/components/EtherInput.md b/docs/pages/components/EtherInput.md index e241b17..c318b34 100644 --- a/docs/pages/components/EtherInput.md +++ b/docs/pages/components/EtherInput.md @@ -39,5 +39,5 @@ const [ethAmount, setEthAmount] = useState(""); | **disabled** (optional) | `boolean` | `false` | When set to `true`, changes input background color and border to have disabled styling. | :::tip[Scaffold-UI] -This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI EtherInput docs](https://scaffold-ui-docs.vercel.app/components/EtherInput). +For more details on customization and theming, check the [Scaffold-UI EtherInput docs](https://scaffold-ui-docs.vercel.app/components/EtherInput). ::: diff --git a/docs/pages/components/InputBase.md b/docs/pages/components/InputBase.md index 9835765..b61032f 100644 --- a/docs/pages/components/InputBase.md +++ b/docs/pages/components/InputBase.md @@ -15,10 +15,6 @@ Simple building block for creating an input which comes with basic default style import { BaseInput } from "@scaffold-ui/components"; ``` -:::warning -This component was renamed from `InputBase` to `BaseInput` in Scaffold-UI. -::: - ## Usage ```tsx @@ -46,5 +42,5 @@ const [url, setUrl] = useState(); | **disabled** (optional) | `boolean` | `false` | When set to `true`, changes input background color and border to have disabled styling. | :::tip[Scaffold-UI] -This component is powered by Scaffold-UI. For more details on customization and theming, check the [Scaffold-UI BaseInput docs](https://scaffold-ui-docs.vercel.app/components/BaseInput). +For more details on customization and theming, check the [Scaffold-UI BaseInput docs](https://scaffold-ui-docs.vercel.app/components/BaseInput). ::: diff --git a/docs/pages/components/RainbowKitCustomConnectButton.md b/docs/pages/components/RainbowKitCustomConnectButton.md index c936c6f..fd0bd0a 100644 --- a/docs/pages/components/RainbowKitCustomConnectButton.md +++ b/docs/pages/components/RainbowKitCustomConnectButton.md @@ -26,7 +26,3 @@ import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; ```tsx ``` - -:::info -Unlike other components, `RainbowKitCustomConnectButton` is a local SE-2 component and not part of Scaffold-UI. You can find and customize it directly in your project at `components/scaffold-eth/RainbowKitCustomConnectButton/`. -::: diff --git a/docs/pages/components/index.mdx b/docs/pages/components/index.mdx index c0e7215..3324dd6 100644 --- a/docs/pages/components/index.mdx +++ b/docs/pages/components/index.mdx @@ -7,7 +7,7 @@ description: Pre-built React components for common web3 use cases. Scaffold-ETH 2 provides a set of pre-built components for common web3 use cases. You can make use of them to accelerate and simplify your dapp development. -These components are powered by [**Scaffold-UI**](https://scaffold-ui-docs.vercel.app/) — a standalone library that provides the underlying components and hooks. The examples below show how they work within a Scaffold-ETH 2 project. For more details on customization, theming, and advanced usage, check the [Scaffold-UI documentation](https://scaffold-ui-docs.vercel.app/). +Most of these components are powered by [**Scaffold-UI**](https://scaffold-ui-docs.vercel.app/), a standalone library that provides the underlying components and UI hooks. The examples below show how they work within a Scaffold-ETH 2 project. For more details on customization, theming, and advanced usage, check the [Scaffold-UI documentation](https://scaffold-ui-docs.vercel.app/). ## Available Components diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index e2660a8..894cb33 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -56,5 +56,5 @@ Here are the main components: - [**Viem**](https://viem.sh/docs/getting-started) as low-level interface that provides primitives to interact with Ethereum. The alternative to ethers.js and web3.js. - [**NextJS**](https://nextjs.org/docs) for building a frontend, using many useful pre-made hooks. - [**RainbowKit**](https://www.rainbowkit.com/docs/) for adding wallet connection. -- [**Scaffold-UI**](https://scaffold-ui-docs.vercel.app/) for pre-built web3 components and hooks (Address, Balance, Inputs, etc.). +- [**Scaffold-UI**](https://scaffold-ui-docs.vercel.app/) for pre-built web3 components and UI hooks. - [**DaisyUI**](https://daisyui.com/docs/) for pre-built [Tailwind CSS](https://tailwindui.com/components) components. From b90076e7de8ac6ea771f53f7269846e06b919828 Mon Sep 17 00:00:00 2001 From: Shiv Bhonde Date: Wed, 1 Apr 2026 10:46:24 +0530 Subject: [PATCH 3/3] Rename InputBase to BaseInput to match scaffold-ui Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/pages/components/{InputBase.md => BaseInput.md} | 8 ++++---- docs/pages/components/index.mdx | 2 +- vocs.config.ts | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) rename docs/pages/components/{InputBase.md => BaseInput.md} (94%) diff --git a/docs/pages/components/InputBase.md b/docs/pages/components/BaseInput.md similarity index 94% rename from docs/pages/components/InputBase.md rename to docs/pages/components/BaseInput.md index b61032f..daf7d21 100644 --- a/docs/pages/components/InputBase.md +++ b/docs/pages/components/BaseInput.md @@ -1,9 +1,9 @@ --- -title: InputBase +title: BaseInput description: Base input component with default styling. --- -# InputBase +# BaseInput Simple building block for creating an input which comes with basic default styles (colors, rounded borders). @@ -22,7 +22,7 @@ const [url, setUrl] = useState(); ``` ```tsx -(); | **value** | `string` | `undefined` | The data that your input will show. | | **onChange** | `function` | `undefined` | A callback invoked when the data in the input changes. | | **placeholder** (optional) | `string` | `undefined` | The string that will be rendered before input data has been entered. | -| **name** (optional) | `string` | `undefined` | Helps identify the data being sent if InputBase is submitted into a form. | +| **name** (optional) | `string` | `undefined` | Helps identify the data being sent if BaseInput is submitted into a form. | | **error** (optional) | `boolean` | `false` | When set to `true`, changes input border to have error styling. | | **disabled** (optional) | `boolean` | `false` | When set to `true`, changes input background color and border to have disabled styling. | diff --git a/docs/pages/components/index.mdx b/docs/pages/components/index.mdx index 3324dd6..a9681fc 100644 --- a/docs/pages/components/index.mdx +++ b/docs/pages/components/index.mdx @@ -16,6 +16,6 @@ Most of these components are powered by [**Scaffold-UI**](https://scaffold-ui-do - [Balance](/components/Balance) - Display the ETH balance of an address - [BlockieAvatar](/components/BlockieAvatar) - Generate and display blockie avatars for addresses - [EtherInput](/components/EtherInput) - Input field for ETH amounts with USD conversion -- [InputBase](/components/InputBase) - Base input component for building custom inputs +- [BaseInput](/components/BaseInput) - Base input component for building custom inputs - [IntegerInput](/components/IntegerInput) - Input field for integer values - [RainbowKitCustomConnectButton](/components/RainbowKitCustomConnectButton) - Customized wallet connect button diff --git a/vocs.config.ts b/vocs.config.ts index 11758b3..e6b438f 100644 --- a/vocs.config.ts +++ b/vocs.config.ts @@ -70,8 +70,8 @@ export default defineConfig({ link: "/components/EtherInput", }, { - text: "InputBase", - link: "/components/InputBase", + text: "BaseInput", + link: "/components/BaseInput", }, { text: "IntegerInput",