Skip to content

Latest commit

 

History

History
168 lines (113 loc) · 7.43 KB

README.md

File metadata and controls

168 lines (113 loc) · 7.43 KB
Raw

Built from ink!athon – DApp Boilerplate for Substrate & ink!

Typescript Next.js Tailwind ink!

Cover Image

This is built on useInkathon React Hooks that abstract & improve the polkadot.js experience.

By Bolaji Ahmad 🪄

Table of Contents:

  1. The Stack
  2. Setup and Installation
    1. Start the Frontend
    2. Running the contracts
    3. VSCode Setup
  3. Customization
  4. Environmnent Variables
  5. Roadmap
  6. FAQs & Troubleshooting

The Stack

The Stack of ink!athon

The Stack in Detail
  • Structure: Monorepo
  • Package-Manager: pnpm
  • Smart Contract Development: ink!, rust, cargo, cargo-contract, contracts-node
  • Frontend: next, react, typescript
  • Misc:
    • Linting & Formatting: eslint, prettier, husky, lint-staged
  • Deployment: Vercel

Setup and Installation 🚨

This repository contains code for the Proownas DAO Decentralized application. More information about the DAO can be found in (the DAO doc)[packages/contracts/README.md].

There are 2 applications in the ./packages folder namely: contracts and frontend.

Start the Frontend

Assuming you have NodeJS installed, Installed pnpm also (the project is managed by pnpm).

  # From the root folder run the following commands

  1. pnpm install

  # Copy and paste environment variables to env.<environment> file
  # Be sure to update with actual values after
  2. cp packages/frontend/.env.local.example packages/frontend/.env.local

  # Navigate to frontend directory (recommended)
  3. cd packages/frontend

  # Start the frontend (it should start on http://localhost:3000)
  4. pnpm dev

To run the frontend successfully, be sure to update the NEXT_PUBLIC_WEB3STORAGE_TOKEN with a token of your choice, or contact ([email protected])[mailto:[email protected]]

Running the contract

# If the following 3 are not available, be sure to install them
1. Setup Rust: https://docs.substrate.io/install/
# NOTE: Skip the "Compile a Substrate node" section

2. Install ink! cli (cargo contract): https://github.com/paritytech/cargo-contract

3. Install local contracts node: https://github.com/paritytech/substrate-contracts-node

# Navigate to contracts directory
4. cd packages/contracts

# Compile and build the contract
# Build Contracts & move deployments to `./deployments/{contract}/` folders
# NOTE: When adding/renaming your contracts, edit them in `build-all.sh`
5. pnpm build

# Deployment files can be found in the ./src/packages/contracts/deployments folder.
# Each folder contains .contract/.wasm/metadata.json files
# The .contract file can be deployed by uploading to (Substrate Contracts UI)[https://contracts-ui.substrate.io/]

# Test Contracts
# NOTE: When adding/renaming your contracts, edit them in `test-all.sh`
pnpm test

VSCode Setup

Workspace

I strongly recommend developing in VSCode by opening the workspace file located at .vscode/inkathon.code-workspace instead of just the directory. This has multiple advantages and assures a more predictable monorepo configuration. The first plugin listed below will help with getting used to it.

Plugins

I strongly recommend installing all plugins listed inside .vscode/extensions.json. They should be suggested automatically by VSCode.

Plugin Details
  1. zoma.vscode-auto-open-workspace – Automatically suggests opening the according .code-workspace file.
  2. dbaeumer.vscode-eslint – Adds ESLint editor support.
  3. esbenp.prettier-vscode – Adds Prettier editor support.
  4. bradlc.vscode-tailwindcss & lightyen.tailwindcss-intellisense-twin – Adds tailwindcss & twin.macro editor support.
  5. tamasfe.even-better-toml – Adds .toml file support.
  6. rust-lang.rust-analyzer – Adds Rust language support.
  7. Optional: gruntfuggly.todo-tree & wayou.vscode-todo-highlight – Lists all TODO comments in your workspace.
  8. Optional: mikestead.dotenv – Adds syntax highlighting for .env files.

Environment Variables

The only mandatory environment variable you need to add is NEXT_PUBLIC_WEB3STORAGE_TOKEN. Just set it to YOUR-API-KEY-FROM-WEB3STORAGE as there are defaults for other values.

Please see all pre-defined environment variables below and find more info in packages/frontend/.env.local.example. All available blockchain network identifiers are defined in the useInkathon repository.

Environment Variable Value
NEXT_PUBLIC_PRODUCTION_MODE true
NEXT_PUBLIC_URL https://localhost:3000
NEXT_PUBLIC_DEFAULT_CHAIN shibuya
NEXT_PUBLIC_SUPPORTED_CHAINS ["alephzero-testnet", "shibuya"]
NEXT_PUBLIC_WEB3STORAGE_TOKEN YOUR-API-KEY-FROM-WEB3STORAGE
`

Contract Deployment

Please see the Contract Quickstart section above.

Roadmap

The project roadmap is discussed in the (pitchdeck)[https://youtu.be/F6LhVe9ooDs].

The Stack of ink!athon

FAQs & Troubleshooting

Resources to learn more about Substrate, ink!, and polkadot.js