feat: client info page

src/assets/ghost-blog.css

@@ -30,6 +30,17 @@ hr {
   background: white;
 }
 
+.svg-container {
+  width: 100%; /* 設定容器寬度，根據需要調整 */
+  height: 50%;
+  padding-bottom: 50%; /* 設定高度，根據需要調整，這裡使用 75% 做為示例 */
+  position: relative;
+}
+
+p.block {
+  color: lightslategray;
+}
+
 /*
 .message-header {
   background: white;

src/views/ClientInfoView.vue

@@ -0,0 +1,129 @@
+<script>
+import Web3 from 'web3';
+import SBT from '@/assets/SBT.json'
+import Bank from '@/assets/Bank.json'
+import PageTitle from '../components/PageTitle.vue'
+import detectEthereumProvider from '@metamask/detect-provider'
+import WarningModal from '../components/WarningModal.vue'
+import SuccessModal from '../components/SuccessModal.vue'
+import { useClientStore } from '../stores/Client.js'
+import ClientNav from '../components/ClientNav.vue'
+
+// To use Html5QrcodeScanner (more info below)
+import { Html5QrcodeScanner } from "html5-qrcode";
+
+// To use Html5Qrcode (more info below)
+import { Html5Qrcode } from "html5-qrcode";
+
+
+export default {
+  components: { PageTitle, WarningModal, SuccessModal, ClientNav },
+  data() {
+    return {
+      SBTAddress: import.meta.env.VITE_SBT_ADDR,
+      BankAddress: import.meta.env.VITE_BANK_ADDR,
+      clientAddr: '',
+      web3: null,
+      token: null,
+      bank: null,
+      picName: '',
+      pic: '',
+      credit: '',
+      arrear: '',
+      borrowNum: 0,
+      repayNum: 0,
+      warningNum: 0
+    }
+  },
+  async mounted() {
+    if (!this.$cookies.isKey('linked')) {
+      this.$router.push('/')
+    }
+    this.web3 = new Web3(window.ethereum)
+    this.clientAddr = this.$cookies.get('address')
+    this.web3.eth.defaultAccount = this.clientAddr
+    this.token = new this.web3.eth.Contract(SBT, this.SBTAddress)
+    this.bank = new this.web3.eth.Contract(Bank, this.BankAddress)
+
+    // get svg image
+    var base64Data = await this.token.methods.tokenURI(this.$cookies.get('SBTNumber')).call()
+    const commaIndex = base64Data.indexOf(',');
+    if (commaIndex !== -1) {
+      base64Data = base64Data.substr(commaIndex + 1);
+    }
+    const decodedData = JSON.parse(atob(base64Data));
+    this.picName = decodedData.name
+    this.pic = decodedData.image_data
+    this.pic = this.pic.replace('<svg', '<svg class="svg-container"')
+
+    // get credit
+    this.credit = await this.bank.methods.getCredit(this.clientAddr).call()
+    this.credit = await this.web3.utils.fromWei(this.credit, 'ether')
+
+    // get arrear
+    this.arrear = await this.bank.methods.getArrear(this.clientAddr).call()
+    this.arrear = await this.web3.utils.fromWei(this.arrear, 'ether')
+
+    var borrow = await this.token.getPastEvents("Borrow", { fromBlock: 0, toBlock: 'latest', filter: { client: this.clientAddr, bank: this.BankAddress } })
+    var repay = await this.token.getPastEvents("Repay", { fromBlock: 0, toBlock: 'latest', filter: { client: this.clientAddr, bank: this.BankAddress } })
+    var warning = await this.token.getPastEvents("Warning", { fromBlock: 0, toBlock: 'latest', filter: { client: this.clientAddr, bank: this.BankAddress } })
+    this.borrowNum = borrow.length
+    this.repayNum = repay.length
+    this.warningNum = warning.length
+  },
+  methods: {
+  }
+}
+</script>
+
+<template>
+  <section class="blog-posts">
+    <div class="container">
+      <div class="columns">
+        <div class="column is-2">
+          <ClientNav path="info"></ClientNav>
+        </div>
+        <div class="column">
+          <div class="container">
+            <div class="block">
+              <PageTitle title="個人資料" subtitle="紀錄在區塊鏈上的相關資料"></PageTitle>
+            </div>
+            <div class="block">
+              <table class="table is-fullwidth">
+                <tbody>
+                  <tr>
+                    <th>地址：</th>
+                    <td>{{ this.clientAddr }}</td>
+                    <!-- <td>{{ this.clientAddr.slice(0, 8)+"..."+this.clientAddr.slice(33, 42) }}</td> -->
+                  </tr>
+                  <tr>
+                    <th>目前信用額度：</th>
+                    <td>{{ this.credit }} ETH (尚可使用 {{ this.credit-this.arrear }} ETH)</td>
+                    <!-- <td>{{ this.clientAddr.slice(0, 8)+"..."+this.clientAddr.slice(33, 42) }}</td> -->
+                  </tr>
+                  <tr>
+                    <th>目前欠款：</th>
+                    <td>{{ this.arrear }} ETH</td>
+                    <!-- <td>{{ this.clientAddr.slice(0, 8)+"..."+this.clientAddr.slice(33, 42) }}</td> -->
+                  </tr>
+                  <tr>
+                    <th>本銀行借款紀錄簡覽</th>
+                    <td>共計借款 {{ this.borrowNum }} 項，已還款 {{ this.repayNum }} 項。被本銀行預警 {{ this.warningNum }} 次</td>
+                  </tr>
+                  <tr>
+                    <th>Soulbound Token 號碼：</th>
+                    <td>{{ this.$cookies.get('SBTNumber') }}</td>
+                  </tr>
+                  <tr>
+                    <th>Soulbound Token NFT 證書：</th>
+                    <td>{{ picName }}<div class="block is-fullwidth" v-html="pic"></div></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

src/views/ClientMainView.vue

@@ -34,6 +34,9 @@ export default {
     }
   },
   async mounted() {
+    if (!this.$cookies.isKey('linked')) {
+      this.$router.push('/')
+    }
     this.web3 = new Web3(window.ethereum)
     this.clientAddr = (await this.web3.eth.getAccounts())[0]
     this.web3.eth.defaultAccount = this.clientAddr

src/views/SignupView.vue

@@ -7,7 +7,7 @@ import { useClientStore } from '../stores/Client.js'
 
 export default {
   components: { PageTitle, WarningModal, SuccessModal },
-  data () {
+  data() {
     return {
       warningModalStatus: false,
       successModalStatus: false,
@@ -16,7 +16,7 @@ export default {
     }
   },
   methods: {
-    async detect () {
+    async detect() {
       const provider = await detectEthereumProvider()
       if (provider) {
         const chainId = await window.ethereum.request({ method: 'eth_chainId' })
@@ -72,6 +72,7 @@ export default {
       </div>
     </div>
   </section>
-  <WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus=false"></WarningModal>
+  <WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus = false"></WarningModal>
-  <SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus=false" link="/signup/linksbt" btnName="繼續"></SuccessModal>
+  <SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus = false"
+    link="/signup/linksbt" btnName="繼續"></SuccessModal>
 </template>