feat: show transactions' info

README.md

@@ -1,14 +1,13 @@
-# web
+# Faucet Webpage
 
-This template should help get you started developing with Vue 3 in Vite.
+A simple webpage for Goerli Testnet's faucet.
 
-## Recommended IDE Setup
+It's HW1 for 1112 NCNU CSIE "Principles and Practice of Blockchains"
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+link to Metamask and create a transaction to the smart contract to get GoerliETH.
 
-## Customize configuration
+![](docs/Screenshot_20230226_025506.png)
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
 
 ## Project Setup
 
@@ -16,6 +15,19 @@ See [Vite Configuration Reference](https://vitejs.dev/config/).
 npm install
 ```
 
+### fill in your smart contract's address
+
+```javascript
+// /src/views/FaucetView.vue line 46
+    const transactionParameters = {
+        from: ethereum.selectedAddress,
+        to: '',               // smart contract's address
+        data: encodeFunctionCall,
+        value: '0x00',
+    }
+
+```
+
 ### Compile and Hot-Reload for Development
 
 ```sh
@@ -27,3 +39,11 @@ npm run dev
 ```sh
 npm run build
 ```
+
+## Notice
+
+Now, I am not sure of difference between `window.ethereum` & `web3`
+
+I use `window.ethereum` to send transaction, check accounts, check network and use `web3` to encode ABI.
+
+I am not sure whether it's a suitable implementation

src/views/FaucetView.vue

@@ -8,7 +8,8 @@ export default {
     return {
       msg: '',
       linked: false,
-      amount: 100000000
+      amount: 100000000,
+      logs: []
     }
   },
   methods: {
@@ -42,7 +43,7 @@ export default {
       }, [web3.utils.toBN(this.amount)])
       const transactionParameters = {
         from: ethereum.selectedAddress,
-        to: '0x629fe41fd008a169fc073ac7a016401dfd7f17d9',
+        to: '',               // smart contract's address
         data: encodeFunctionCall,
         value: '0x00',
       }
@@ -54,7 +55,14 @@ export default {
         params: [transactionParameters]
       })
 
-      print(txHash)
+      console.log(txHash)
+
+      var amountToSave = this.amount
+      this.logs.push({
+        amount: amountToSave,
+        address: ethereum.selectedAddress,
+        tx: txHash
+      })
     }
   }
 }
@@ -96,6 +104,28 @@ export default {
                 </div>
               </template>
           </div>
+
+          <br><br>
+          <hr>
+          <br><br>
+
+          <template v-if="this.logs.length != 0">
+            <div class="row justify-content-center">
+              <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Your Withdraw</h2>
+              <table class="table">
+                <thead>
+                  <td> amount (ETH)</td>
+                  <td> transaction hash </td>
+                  <td> check </td>
+                </thead>
+                <tr v-for="log in logs">
+                  <td> {{ Number(BigInt(log.amount))/10**18 }} ETH</td>
+                  <td> {{ log.tx }} </td>
+                  <td> <a v-bind:href='"https://goerli.etherscan.io/tx/"+log.tx'>EtherScan</a> </td>
+                </tr>
+              </table>
+            </div>
+          </template>
       </div>
   </section>
 </template>