Frontend Setup

Topic for the Solidity Live Coding on 2023.11.26, hosted by Hannes Gao

0x00 Libraries

1. Vue3 (Frontend Framework)

2. Vuetify 3 (Frontend Component Library)

3. Web3Modal of WalletConnect (Library for Multi-Chain Wallet Connection Flows)

4. Wagmi or Ethers v5 (Library for On-Chain Interactions)

0x01 Vuetify Setup

1. Vuetify Installation using Vite

2. Vuetify Wireframes and Layout System

3. Vuetify Components

0x02 Using Web3Modal under Vue3 & Vuetify

1. Web3Modal Installation under Vue3

2. Control the modal with the useWeb3Modal function

3. Get the current value of the modal's state

4. Web3Modal Components under Vue3

5. Example Code for Using Web3Modal under Vue3 & Wagmi

0x03 Tutorials

1. Integrating WalletConnect into Vue.js DApps

2. Example Code for Web3 authentication under Vue3