Getting Started

Since Block3d uses Next.js 14, it also requires Node.js 18.17 or later.

Creating next-app

If you already have Nextjs with app routing installed you can skip this step.

Follow the steps on the Next.js Installation page.

• If using create-next-app, make sure you input Yes when prompted: Would you like to use App Router? (recommended) No / Yes.

• If installing manually, ensure to follow the app routing structure.

Installation

NPM Package

Please note that some of Block3d's transitive dependencies rely on ws 8.13.0, which is a vulnerable version of ws that contains a high-level issue that has since then been reviewed and patched. To resolve these vulnerabilities you can set overrides in your package.json file like so:

"overrides": {
    "mipd": {
      "ws": "8.17.1"
    },
    "viem": {
      "ws": "8.17.1"
    }
  }

Block3d can then be installed by running this command:

npm

npm install block3d

yarn

Finally, if you don't already have these installed, make sure to run this command as well:

npm

npm install wagmi @rainbow-me/rainbowkit @tanstack/react-query viem@2.x

yarn

Git Submodule

Block3d alternatively comes in the form of a git submodule. This way you can quickly integrate the toolkit and, with minimal effort, be compatible with any future upgrades while maintaining a distinct separation of the submodule and the parent directory. This also allows you to fork Block3d and directly edit it however you want.

git submodule add https://github.com/RohanNero/block3d-submodule