The Official Vite Dapp Template

The below docs were written while using Node v14.18.1

Getting Started with the Contracts

npm install

# run unit test for test/*.spec.ts
npx vuilder test

# deploy contract
# edit scripts/deploy.config.json && run deploy scripts
npx ts-node scripts/deploy.ts

# stake quota for contract(by web-wallet)

Getting Started with the Frontend

Go to the frontend directory to run it cd frontend

Install dependencies in the frontend directory npm i

Run frontend code locally in a dev environment npm run dev

Build frontend code for production npm run build

Preview dist folder generated by npm run build locally npm run preview

Features frontend implements out of the box:

• Routing with react-router-dom v6
  • Implemented in Router.tsx
• Global state management using a higher-order component called connect which connects the passed in component to a single context.
  • Implemented in globalContext.tsx
  • The initial global state is set in App.tsx
  • To mutate the global state, a setState function is passed to all connected components as a prop.
    • Pass an object to it and its properties will be shallow merged with the current global state
      • e.g. setState({ networkType: network })
      • To deep merge, pass a second meta object to setState like:

         setState({ a: { b: 'c' } }, { deepMerge: true });
         // { a: { d: 3 } } => { a: { d: 3, b: 'c' } }

  • Note: all non-page component that are connected go in the containers folder, else they go in the components folder.
  • The State type can be modified in types.ts
• ViteConnect for signing transactions with the Vite Wallet iOS / Android app
  • Implemented in viteConnect.ts
    • This handles saving the ViteConnect session to a browsers localStorage to persist it after reloading the page
    • To call a contract, a callContract function is passed to all connected components as a prop.
    • Contracts should be stored in the contracts folder.
      • e.g. coffee_abi.json and coffee_contract.json
• internationalization (i18n)
  • Translation changes when languageType is updated in PageContainer.tsx
  • English translation: en.json
• Light, Dark, and System themes
  • Theme is updated in PageContainer.tsx
  • Theme is persists via localStorage in theme.ts
  • Light and dark theme colors can be changed in colors.css and tailwind.config.js
• Toast alerts
  • Implemented in Toast.tsx
  • To use, call setState({ toast: 'message' }) in a connected component.

This is a fork of dapp-buymeacoffee