Learn how to create fast dapp frontends using your contracts in Atlas
Building dapp frontends is tedious. To speed things up, we made a starter kit that automatically generates components and hooks from your Atlas contracts. It's now possible to build full dapps in minutes.
Start by running:
npx create-atlas-dapp
...in your cli. You'll be prompted to login to Atlas, so you can select a project to link. Then run:
cd <your_project_name> && yarn
to install dependencies. Once installed, run:
yarn dev
to start the development server. That's it! You can access your app at:
http://localhost:3000/
When you open up the starter kit, you'll see all the contracts you have written, along with their functions. This a demo UI that shows off how to interact with contracts. You can easily comment this out inside the DemoDapp component. Also included is a connect wallet button with multi wallet support.
If you're not already familiar with wagmi, it's a collection of useful react hooks for interacting with contracts. When you link an Atlas project, hooks for calling contract functions will get automatically generated and included in the `/generated-components` directory, under the associated contract name. You can copy any of these into new components to easily call read/write functions on your contracts.
