feat: update bank & atm info

src/assets/bank_abi.json

@@ -0,0 +1,162 @@
+[
+  {
+    "inputs": [],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "atm",
+        "type": "address"
+      }
+    ],
+    "name": "AddATM",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [],
+    "name": "Destroy",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "name": "NoMoney",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "name": "Withdraw",
+    "type": "event"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "name": "atms",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [],
+    "name": "destroy",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "stateMutability": "payable",
+    "type": "receive",
+    "payable": true
+  },
+  {
+    "inputs": [],
+    "name": "getATMs",
+    "outputs": [
+      {
+        "internalType": "address[]",
+        "name": "",
+        "type": "address[]"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "atm",
+        "type": "address"
+      }
+    ],
+    "name": "addATM",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "withdraw",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]

src/views/FaucetView.vue

@@ -1,6 +1,7 @@
 <script>
 import detectEthereumProvider from '@metamask/detect-provider'
 import Web3 from 'web3';
+import bankABI from '@/assets/bank_abi.json';
 
 export default {
   name: 'MyComponent',
@@ -9,17 +10,59 @@ export default {
       msg: '',
       linked: false,
       amount: 10000000000000000,
-      logs: []
+      logs: [], 
+      atms: [],
+      atmsBalance: [],
+      selectATMIndex: 0,
+      bankAddr: "",
+      bankBalance: -1,
     }
   },
+  mounted() {
+    var web3 = new Web3(window.ethereum);
+    this.bankAddr = import.meta.env.VITE_BANK_ADDR;
+    var bank = new web3.eth.Contract(bankABI, this.bankAddr);
+    bank.methods.getATMs().call((err, result) => {
+      if(err){
+        alert(err);
+      }else{
+        this.atms = result;
+      }
+      // console.log(result);
+    }).then(() => {
+      console.log(this.atms)
+    }).then(() => {
+      this.update();
+    });
+    
+  },
   methods: {
+    update() {
+      var web3 = new Web3(window.ethereum);
+
+      var contin = true;
+
+      web3.eth.getBalance(this.bankAddr, (err, result) => {
+        if(web3.utils.fromWei(result) != this.bankBalance)
+          contin = false;
+        this.bankBalance = web3.utils.fromWei(result);
+      })
+      for(let i=0; i<this.atms.length; i++){
+        web3.eth.getBalance(this.atms[i], (err, result) => {
+          if(web3.utils.fromWei(result) != this.atmsBalance[i])
+            contin = false;
+          this.atmsBalance[i] = web3.utils.fromWei(result);
+        })
+      }
+    },
+
     async detectMetamask() {
       this.msg = "Detecting..."
       const provider = await detectEthereumProvider()
       if (provider) {
         this.msg = "Detect Metamask. "
         const chainId = await ethereum.request({method: 'eth_chainId'})
-        if(chainId == 11155111){
+        if(chainId == 1337){
           const account = await ethereum.request({ method: 'eth_requestAccounts' });
           this.msg += "> Network which you connected is Sepolia. @ " + account[0]
           this.linked = true
@@ -43,7 +86,7 @@ export default {
       }, [web3.utils.toBN(this.amount)])
       const transactionParameters = {
         from: ethereum.selectedAddress,
-        to: '',               // smart contract's address
+        to: this.atms[this.selectATMIndex],               // smart contract's address
         data: encodeFunctionCall,
         value: '0x00',
       }
@@ -63,6 +106,11 @@ export default {
         address: ethereum.selectedAddress,
         tx: txHash
       })
+    },
+
+    getBankInfo() {
+      var web3 = new Web3(window.ethereum);
+      var contract = new web3.eth.Contract(bankABI, );
     }
   }
 }
@@ -91,12 +139,17 @@ export default {
                 <div>
                   <div class="container">
                     <div class="row">
-                      <div class="col-sm">
+                      <div class="col-sm-5">
-                        <form>
                           <input type='text' class="form-control" v-model="amount" >
-                        </form>
                       </div>
-                      <div class="col-sm">
+                      <div class="col-sm-2">
+                        <select class="form-control" v-model="selectATMIndex">
+                          <template v-for="i in atms.length">
+                            <option v-bind:value="i-1">ATM {{i}}</option>
+                          </template>
+                        </select> 
+                      </div>
+                      <div class="col-sm-5">
                         <button class='btn btn-info' v-on:click="withdraw"> withdraw ETH ({{amount}} wei = {{Number(BigInt(amount))/10**18}} ETH) </button>
                       </div>
                     </div>
@@ -105,6 +158,14 @@ export default {
               </template>
           </div>
 
+          <br><br>
+          <hr>
+          <br><br>
+          <div class="divider-custom-icon">Bank ({{this.bankAddr}}) 還有 {{bankBalance}} ETH 可以提供給 ATM</div>
+          <template v-for="i in atms.length">
+            <div class="divider-custom-icon">ATM {{i}} ({{atms[i-1]}}) 還有 {{ atmsBalance[i-1]}} ETH 可以提領</div>
+          </template>
+
           <br><br>
           <hr>
           <br><br>