feat(app): format code by prettier

.eslintrc.json

@@ -1,6 +1,6 @@
 {
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "no-unused-vars": "warn"
-  }
+	"extends": "next/core-web-vitals",
+	"rules": {
+		"no-unused-vars": "warn"
+	}
 }

.github/workflows/s3-sync.yml

@@ -1,22 +1,22 @@
 name: Upload Website
 
 on:
-  push:
-    branches:
-    - main
+    push:
+        branches:
+            - main
 
 jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@master
-    - uses: jakejarvis/s3-sync-action@master
-      with:
-        args: --acl public-read --follow-symlinks --delete
-      env:
-        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
-        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-        AWS_REGION: 'ap-northeast-2'   
-        SOURCE_DIR: 'public'      
-        DEST_DIR: 'layer2'
+    deploy:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@master
+            - uses: jakejarvis/s3-sync-action@master
+              with:
+                  args: --acl public-read --follow-symlinks --delete
+              env:
+                  AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+                  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+                  AWS_REGION: 'ap-northeast-2'
+                  SOURCE_DIR: 'public'
+                  DEST_DIR: 'layer2'

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"tabWidth": 4,
+	"useTabs": true,
+	"semi": false,
+	"singleQuote": true
+}

README.md

@@ -2,16 +2,16 @@
 
 MyFirstLayer2 is an education project for newbies to learn and interact with Layer2. As you can see from the name, our users are beginners curious about the knowledge and projects on Layer2. We will use funny and easy-to-understand diagrams and animation to explain Layer2 to newbies. Buidl in [LXDAO](https://lxdao.io/).
 
-- MyFirstLayer2 Website: <https://layer2.myfirst.io/>
-- LXDAO Website: <https://lxdao.io/>
-- LXDAO Forum: <https://forum.lxdao.io/c/projects/010-myfirstlayer2/28>
-- LXDAO Discord: <https://discord.lxdao.io>
-- LXDAO Twitter: <https://twitter.com/LXDAO_Official>
+-   MyFirstLayer2 Website: <https://layer2.myfirst.io/>
+-   LXDAO Website: <https://lxdao.io/>
+-   LXDAO Forum: <https://forum.lxdao.io/c/projects/010-myfirstlayer2/28>
+-   LXDAO Discord: <https://discord.lxdao.io>
+-   LXDAO Twitter: <https://twitter.com/LXDAO_Official>
 
 As it is a public goods, all of the source code are open sourced:
 
-- Main Website: <https://github.com/lxdao-official/myfirstlayer2-frontend>
-- NFT Contract: <https://github.com/lxdao-official/myfirstlayer2-contract>
+-   Main Website: <https://github.com/lxdao-official/myfirstlayer2-frontend>
+-   NFT Contract: <https://github.com/lxdao-official/myfirstlayer2-contract>
 
 Enjoy!
 
@@ -35,11 +35,11 @@ Then open <http://localhost:3000> start developing.
 
 ## `.env` explanation
 
-- `NEXT_PUBLIC_CHAIN_ID` is the Chain ID, you can search from https://besu.hyperledger.org/en/stable/Concepts/NetworkID-And-ChainID and set an apposite value.
-- `NEXT_PUBLIC_GOOGLE_ANALYTICS` is the application id in the google analytics tool, you can get from https://analytics.google.com.
-- `NEXT_PUBLIC_CONTRACT_ADDRESS` is the smart contract address used to mint. The smart contract project has been [open source](https://github.com/lxdao-official/myfirstlayer2-contract), and you can deploy it owned.
-- `NEXT_PUBLIC_INFURA_PROJECT_ID` is the project id in the `infura` service, you can get from https://infura.io.
-- `NEXT_PUBLIC_NFT_STORAGE_TOKEN` is the API KEY of nft storage, you can get from https://nft.storage/.
+-   `NEXT_PUBLIC_CHAIN_ID` is the Chain ID, you can search from https://besu.hyperledger.org/en/stable/Concepts/NetworkID-And-ChainID and set an apposite value.
+-   `NEXT_PUBLIC_GOOGLE_ANALYTICS` is the application id in the google analytics tool, you can get from https://analytics.google.com.
+-   `NEXT_PUBLIC_CONTRACT_ADDRESS` is the smart contract address used to mint. The smart contract project has been [open source](https://github.com/lxdao-official/myfirstlayer2-contract), and you can deploy it owned.
+-   `NEXT_PUBLIC_INFURA_PROJECT_ID` is the project id in the `infura` service, you can get from https://infura.io.
+-   `NEXT_PUBLIC_NFT_STORAGE_TOKEN` is the API KEY of nft storage, you can get from https://nft.storage/.
 
 ```
 NEXT_PUBLIC_GOOGLE_ANALYTICS=G-VPF0TRZGBT