demo: change to <script setup>

vu3th · Nov 13, 2021 · d22266e · d22266e
1 parent 8c6fc81
commit d22266e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 40 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,7 +1,3 @@
 {
-  "recommendations": [
-    "octref.vetur",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
+  "recommendations": ["johnsoncodehk.volar"]
 }
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -1,5 +1,4 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import {
   useBoard,
   useEthers,
@@ -9,53 +8,40 @@ import {
   shortenAddress,
 } from 'vue-dapp'
 
-export default defineComponent({
-  name: 'App',
-  setup() {
-    const { open } = useBoard()
-    const { status, disconnect, error } = useWallet()
-    const { address, balance, chainId, isActivated } = useEthers()
-
-    return {
-      isActivated,
-      address,
-      status,
-      error,
-      chainId,
-      balance,
-      open,
-      disconnect,
-      displayEther,
-      displayChainName,
-      shortenAddress,
-    }
-  },
-})
+const { open } = useBoard()
+const { status, disconnect, error } = useWallet()
+const { address, balance, chainId, isActivated } = useEthers()
 </script>
 
 <template>
   <div class="h-full flex flex-col justify-center items-center">
+    <p v-if="error" class="text-red-500">{{ error }}</p>
 
-    <p
-      v-if="error"
-      class="text-red-500"
-    >{{ error }}</p>
-
-    <div
-      v-if="isActivated"
-      class="text-center"
-    >
+    <div v-if="isActivated" class="text-center">
       <p>{{ shortenAddress(address) }}</p>
       <p>{{ displayEther(balance) }} ETH</p>
-      <p>network: <span class="capitalize"> {{ chainId ? displayChainName(chainId) : '' }} </span></p>
+      <p>
+        network:
+        <span class="capitalize">
+          {{ chainId ? displayChainName(chainId) : '' }}
+        </span>
+      </p>
     </div>
 
     <div class="m-4">
       <button
         @click="isActivated ? disconnect() : open()"
         class="btn"
         :disabled="status === 'connecting'"
-      >{{ status === 'connected' ? "Disconnect" : status === 'connecting' ? "Connecting..." : "Connect" }}</button>
+      >
+        {{
+          status === 'connected'
+            ? 'Disconnect'
+            : status === 'connecting'
+            ? 'Connecting...'
+            : 'Connect'
+        }}
+      </button>
     </div>
   </div>
   <vdapp-board />