From ebe58b6d086ebd6245a1520316a914dd5ef356ce Mon Sep 17 00:00:00 2001
From: snsd0805 <levi900227@gmail.com>
Date: Sun, 11 Jun 2023 15:22:32 +0800
Subject: [PATCH] feat: complete payment flow

---
 backend/main.py             |   8 +-
 src/assets/Bank.json        | 494 +++++++++++++++++++-----------------
 src/router/index.js         |   6 +
 src/views/ClientPayView.vue |  97 +++++++
 src/views/PaymentView.vue   | 159 ++++++++++++
 5 files changed, 523 insertions(+), 241 deletions(-)
 create mode 100644 src/views/ClientPayView.vue
 create mode 100644 src/views/PaymentView.vue

diff --git a/backend/main.py b/backend/main.py
index 9b6593e..4cbaba6 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -1,8 +1,10 @@
 from flask import Flask, request, jsonify
 import sqlite3
 import os
+from flask_cors import CORS
 
 app = Flask(__name__)
+CORS(app)
 
 DATABASE = './main.db'
 
@@ -77,7 +79,7 @@ def get_order(id):
     for product in products:
         ans['products'].append({
             'name': product[0],
-            'price': product[1],
+            'price': str(product[1]),
             'count': product[2]
         })
 
@@ -88,11 +90,11 @@ def get_order(id):
         'name': result[1],
         'address': result[0]
     }
-    ans['amount'] = result[2]
+    ans['amount'] = str(result[2])
 
     return jsonify(ans)
 
 
 if __name__ == '__main__':
     initDB()
-    app.run()
+    app.run(host="0.0.0.0")
diff --git a/src/assets/Bank.json b/src/assets/Bank.json
index 2b08e11..e7af049 100644
--- a/src/assets/Bank.json
+++ b/src/assets/Bank.json
@@ -1,239 +1,257 @@
 [
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "SBT_addr",
-          "type": "address"
-        }
-      ],
-      "stateMutability": "nonpayable",
-      "type": "constructor"
-    },
-    {
-      "inputs": [],
-      "name": "owner",
-      "outputs": [
-        {
-          "internalType": "address",
-          "name": "",
-          "type": "address"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function",
-      "constant": true
-    },
-    {
-      "inputs": [],
-      "name": "recv",
-      "outputs": [
-        {
-          "internalType": "bool",
-          "name": "",
-          "type": "bool"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function",
-      "constant": true
-    },
-    {
-      "inputs": [],
-      "name": "sbt",
-      "outputs": [
-        {
-          "internalType": "contract SoulboundToken",
-          "name": "",
-          "type": "address"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function",
-      "constant": true
-    },
-    {
-      "stateMutability": "payable",
-      "type": "receive",
-      "payable": true
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "client",
-          "type": "address"
-        },
-        {
-          "internalType": "uint256",
-          "name": "amount",
-          "type": "uint256"
-        }
-      ],
-      "name": "setCredit",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "uint256",
-          "name": "number",
-          "type": "uint256"
-        }
-      ],
-      "name": "register",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "shop",
-          "type": "address"
-        },
-        {
-          "internalType": "uint256",
-          "name": "amount",
-          "type": "uint256"
-        }
-      ],
-      "name": "pay",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "repay",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "payable",
-      "type": "function",
-      "payable": true
-    },
-    {
-      "inputs": [],
-      "name": "start_recv",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "stop_recv",
-      "outputs": [],
-      "stateMutability": "nonpayable",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "client",
-          "type": "address"
-        }
-      ],
-      "name": "getCredit",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function",
-      "constant": true
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "client",
-          "type": "address"
-        }
-      ],
-      "name": "getArrear",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function",
-      "constant": true
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "client",
-          "type": "address"
-        }
-      ],
-      "name": "getClientOrders",
-      "outputs": [
-        {
-          "components": [
-            {
-              "internalType": "bool",
-              "name": "isFinished",
-              "type": "bool"
-            },
-            {
-              "internalType": "uint256",
-              "name": "amount",
-              "type": "uint256"
-            },
-            {
-              "internalType": "address",
-              "name": "shop",
-              "type": "address"
-            }
-          ],
-          "internalType": "struct Order[]",
-          "name": "",
-          "type": "tuple[]"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function",
-      "constant": true
-    },
-    {
-      "inputs": [
-        {
-          "internalType": "address",
-          "name": "client",
-          "type": "address"
-        }
-      ],
-      "name": "getSBTNumber",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function",
-      "constant": true
-    }
-  ]
\ No newline at end of file
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "SBT_addr",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [],
+    "name": "recv",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [],
+    "name": "sbt",
+    "outputs": [
+      {
+        "internalType": "contract SoulboundToken",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "stateMutability": "payable",
+    "type": "receive",
+    "payable": true
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "client",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "setCredit",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "number",
+        "type": "uint256"
+      }
+    ],
+    "name": "register",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "id",
+        "type": "uint256"
+      },
+      {
+        "internalType": "address",
+        "name": "shop",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "pay",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "repay",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "payable",
+    "type": "function",
+    "payable": true
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "client",
+        "type": "address"
+      }
+    ],
+    "name": "warning",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "start_recv",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "stop_recv",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "client",
+        "type": "address"
+      }
+    ],
+    "name": "getCredit",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "client",
+        "type": "address"
+      }
+    ],
+    "name": "getArrear",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "client",
+        "type": "address"
+      }
+    ],
+    "name": "getClientOrders",
+    "outputs": [
+      {
+        "components": [
+          {
+            "internalType": "bool",
+            "name": "isFinished",
+            "type": "bool"
+          },
+          {
+            "internalType": "uint256",
+            "name": "amount",
+            "type": "uint256"
+          },
+          {
+            "internalType": "address",
+            "name": "shop",
+            "type": "address"
+          }
+        ],
+        "internalType": "struct Order[]",
+        "name": "",
+        "type": "tuple[]"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "client",
+        "type": "address"
+      }
+    ],
+    "name": "getSBTNumber",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  }
+]
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 3dce51e..c553cb9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,7 @@ import ClientMainView from '../views/ClientMainView.vue'
 import ClientInfoView from '../views/ClientInfoView.vue'
 import ClientCreditView from '../views/ClientCreditView.vue'
 import ClientPayView from '../views/ClientPayView.vue'
+import PaymentView from '../views/PaymentView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -51,6 +52,11 @@ const router = createRouter({
       name: 'clientpay',
       component: ClientPayView
     },
+    {
+      path: '/client/pay/:id',
+      name: 'clientpayment',
+      component: PaymentView
+    },
   ]
 })
 
diff --git a/src/views/ClientPayView.vue b/src/views/ClientPayView.vue
new file mode 100644
index 0000000..b431631
--- /dev/null
+++ b/src/views/ClientPayView.vue
@@ -0,0 +1,97 @@
+<script>
+import Web3 from 'web3';
+import SBT from '@/assets/SBT.json'
+import Bank from '@/assets/Bank.json'
+import PageTitle from '../components/PageTitle.vue'
+import WarningModal from '../components/WarningModal.vue'
+import SuccessModal from '../components/SuccessModal.vue'
+import ClientNav from '../components/ClientNav.vue'
+
+// To use Html5QrcodeScanner (more info below)
+import { Html5QrcodeScanner } 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: '',
+    }
+  },
+  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 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')
+
+  },
+  methods: {
+    onScanSuccess(decodedText, decodedResult) {
+      // handle the scanned code as you like, for example:
+      console.log(`Code matched = ${decodedText}`, decodedResult);
+      var last_id = decodedText.split('/').pop()
+      this.scanner.clear()
+      this.$router.push('/client/pay/'+last_id)
+    },
+    scan() {
+      this.scanner = new Html5QrcodeScanner(
+        "reader",
+        { fps: 10, qrbox: { width: 250, height: 250 } },
+        /* verbose= */ false);
+      this.scanner.render(this.onScanSuccess);
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="blog-posts">
+    <div class="container">
+      <div class="columns">
+        <div class="column is-2">
+          <ClientNav path="pay"></ClientNav>
+        </div>
+        <div class="column">
+          <div class="container">
+            <div class="block">
+              <PageTitle title="掃描支付" subtitle="掃描店家給的訂單 QRcode 進行支付"></PageTitle>
+            </div>
+            <div class="block">
+              <p class="block">使用地址：{{ this.clientAddr }}</p>
+              <p class="block">剩餘額度：{{ this.credit-this.arrear }} ETH (總額度 {{ this.credit }} ETH )</p>
+              
+            </div>
+            <div class="block">
+              <button class="button is-success is-outlined is-large" @click="scan">Pay</button>
+              <div id="reader" width="300px"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus = false"></WarningModal>
+  <SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus = false"
+    link="/signup/linksbt" btnName="繼續"></SuccessModal>
+</template>
diff --git a/src/views/PaymentView.vue b/src/views/PaymentView.vue
new file mode 100644
index 0000000..79c2098
--- /dev/null
+++ b/src/views/PaymentView.vue
@@ -0,0 +1,159 @@
+<script>
+
+import Web3 from 'web3';
+import SBT from '@/assets/SBT.json'
+import WarningModal from '../components/WarningModal.vue'
+import SuccessModal from '../components/SuccessModal.vue'
+import PageTitle from '../components/PageTitle.vue'
+import Bank from '@/assets/Bank.json'
+
+
+export default {
+  components: { WarningModal, SuccessModal, PageTitle },
+  data() {
+    return {
+      SBTAddress: import.meta.env.VITE_SBT_ADDR,
+      BankAddress: import.meta.env.VITE_BANK_ADDR,
+      warningModalStatus: false,
+      successModalStatus: false,
+      clientAddr: '',
+      web3: null,
+      token: null,
+      bank: null,
+      link: '',
+      msg: '',
+      credit: '',
+      arrear: '',
+      orderId: '',
+      products: [],
+      amount: "0",
+      amountWei: "0",
+      creditWei: "0",
+      arrearWei: "0",
+      shop: {
+        'address': '',
+        'name': '',
+      },
+      waiting: false
+    }
+  },
+  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 credit
+    this.credit = await this.bank.methods.getCredit(this.clientAddr).call()
+    this.creditWei = this.credit
+    this.credit = await this.web3.utils.fromWei(this.credit, 'ether')
+
+    // get arrear
+    this.arrear = await this.bank.methods.getArrear(this.clientAddr).call()
+    this.arrearWei = this.arrear
+    this.arrear = await this.web3.utils.fromWei(this.arrear, 'ether')
+
+    // get order
+    this.orderId = this.$route.params.id
+    console.log("id: ", this.orderId)
+    const response = await fetch(`${import.meta.env.VITE_BACKEND_PREFIX}/order/${this.orderId}`);
+    var orderData = await response.json();
+    this.products = orderData.products
+    this.amountWei = orderData.amount
+    this.amount = this.web3.utils.fromWei(orderData.amount, 'ether')
+    this.shop = orderData.shop
+    console.log(this.products)
+    console.log(this.amount)
+    console.log(this.shop)
+  },
+  methods: {
+    async pay () {
+      this.waiting = true
+      // await this.bank.methods.pay(this.number, this.shop.address, this.amountWei).send({ from: this.clientAddr })
+      try {
+        await this.bank.methods.pay(this.orderId, this.shop.address, this.amountWei).send({ from: this.clientAddr })
+        this.link = '/client/info'
+        this.msg = '支付成功！<br>已經支付'+this.amount+" ETH 給"+this.shop.name+" ("+this.shop.address+")"
+        this.successModalStatus = true
+      } catch (error) {
+        this.msg = '支付失敗'
+        this.warningModalStatus = true
+      }
+      this.waiting = false
+    }
+  }
+}
+
+</script>
+
+<template>
+  <section class="blog-posts">
+    <div class="container">
+      <div class="block">
+        <PageTitle title="確認付款資訊" subtitle="確認後由銀行先向店家支付 ETH"></PageTitle>
+      </div>
+      <div class="block">
+        <table class="table is-fullwidth">
+          <tbody>
+            <tr>
+              <th colspan="4" style="text-align: center;">商品清單</th>
+            </tr>
+            <template v-for="product in products">
+              <tr>
+                <td><b>{{ product.name }}</b></td>
+                <td>{{ web3.utils.fromWei(product.price, 'ether') }} ETH/個</td>
+                <td> * {{ product.count }} 個</td>
+                <td> 合計 {{ web3.utils.fromWei(product.price, 'ether') * product.count }} ETH</td>
+              </tr>
+            </template>
+            <tr>
+              <td colspan="3"></td>
+              <td>共計 {{ amount }} ETH</td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="table is-fullwidth">
+          <tbody>
+
+            <tr>
+              <th>支付地址：</th>
+              <td colspan="3">{{ this.clientAddr }}</td>
+            </tr>
+            <tr>
+              <th>店家地址：</th>
+              <td colspan="3">{{ this.shop.address }} ( {{ this.shop.name }} )</td>
+            </tr>
+            <tr>
+              <th>目前信用額度：</th>
+              <td colspan="4">{{ this.credit }} ETH (尚可使用 {{ this.credit - this.arrear }} ETH)</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="block">
+        <div class="columns">
+          <div class="column is-2 is-offset-5">
+            <template v-if="(this.creditWei - this.arrearWei) >= this.amountWei">
+              <template v-if="!waiting">
+                <button @click="pay" class="button is-primary is-fullwidth is-medium is-outlined">支付</button>
+              </template>
+              <template v-else>
+                <button class="button is-primary is-fullwidth is-medium is-outlined is-loading">支付</button>
+              </template>
+            </template>
+            <template v-else>
+              <RouterLink to="/client" class="button is-danger is-fullwidth is-medium is-outlined">額度不足，取消</RouterLink>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus = false"></WarningModal>
+  <SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus = false" :link="link"
+    btnName="繼續"></SuccessModal>
+</template>