Development

.eslintignore

@@ -0,0 +1,3 @@
+./node_modules/*
+./node_modules/
+node_modules/

components/modals/connect.vue

@@ -47,8 +47,6 @@ export default {
         alert("Please install metamask wallet");
       }
       await this.$metamask.init()
-      console.log(this.$metamask.userAccounts)
-      console.log(this.$metamask.userAccount)
       this.modalConnect = false
     },
   }

nuxt.config.js

@@ -76,6 +76,7 @@ export default {
     '~/plugins/vue-debounce.js',
     // services
     '~/services/metamask.js',
+    '~/services/eth-provider.js',
   ],
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "nuxt" ,
+    "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
@@ -17,9 +17,11 @@
     "@metamask/sdk": "^0.3.0",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/i18n": "^7.3.0",
+    "@uniswap/sdk-core": "^3.2.6",
+    "@uniswap/v3-sdk": "^3.9.0",
     "@walletconnect/web3-provider": "^1.8.0",
     "core-js": "^3.19.3",
-    "ethers": "^6.4.1",
+    "ethers": "^6.6.0",
     "html2canvas": "^1.4.1",
     "near-api-js": "^1.0.0",
     "nuxt": "^2.15.8",
@@ -34,6 +36,7 @@
     "vue2-gmap-custom-marker": "^6.1.0",
     "vue2-google-maps": "^0.10.7",
     "vuetify": "^2.6.1",
+    "wagmi": "^1.2.0",
     "web3modal": "^1.9.9",
     "webpack": "^4.46.0"
   },
@@ -46,6 +49,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-nuxt": "^3.1.0",
     "eslint-plugin-vue": "^8.2.0",
-    "prettier": "^2.5.1"
+    "prettier": "^2.5.1",
+    "raw-loader": "^4.0.2"
   }
 }

pages/app/faucet.vue

@@ -35,7 +35,7 @@
             {{ item.amount }}
           </span>
 
-          <v-btn class="bold btn-faucet">
+          <v-btn class="bold btn-faucet" @click="claimFaucet(item,index)">
             Faucet
           </v-btn>
         </v-card>
@@ -96,9 +96,14 @@ export default {
     }
   },
 
-  methods: {
+  /* methods: {
+    async claimFaucet(tokenAddress) {
+      console.log(tokenAddress);
+
+      await this.$ethersProvider.claimFaucetFaucet(tokenAddress);
+    }
 
-  }
+  } */
 };
 </script>
 

services/Faucet.js

@@ -0,0 +1,89 @@
+//@xiaochen
+import React from "react";
+import {
+  useAccount,
+  useContractRead,
+  usePrepareContractWrite,
+  useContractWrite,
+  useWaitForTransaction,
+} from "wagmi";
+import { tokenD_address } from "../contracts/addresses";
+import { tokenD_abi } from "../contracts/abis";
+import { message } from "antd";
+import { ethers } from "ethers";
+
+export default function Faucet() {
+  const { address } = useAccount();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [tokenD_balance, setTokenDBalance] = React.useState(0);
+  const [hash, setHash] = React.useState("");
+  const faucetClick = () => {
+    setIsLoading(true);
+    faucetConfigWrite?.()
+      .then((res) => {
+        console.log(res);
+        setHash(res.hash);
+      })
+      .catch((err) => {
+        setIsLoading(false);
+      });
+  };
+
+  // confirmation
+  const confirmation = useWaitForTransaction({
+    hash: hash,
+    onSuccess(data) {
+      setIsLoading(false);
+      message.success({
+        content: "success",
+        duration: 1,
+        className: "mt-3",
+      });
+    },
+  });
+
+  // get tokenD balance
+  const getTokeDBalance = useContractRead({
+    address: tokenD_address,
+    abi: tokenD_abi,
+    functionName: "balanceOf",
+    args: [address],
+    watch: true,
+    onSuccess(data) {
+      const amount = ethers.utils.formatUnits(data, "ether");
+      setTokenDBalance(amount);
+    },
+  });
+
+  // Faucet config
+  const { config: faucetConfig } = usePrepareContractWrite({
+    address: tokenD_address,
+    abi: tokenD_abi,
+    functionName: "faucet",
+    args: [],
+  });
+  // Faucet
+  const {
+    data: faucetConfigData,
+    isSuccess,
+    writeAsync: faucetConfigWrite,
+  } = useContractWrite({
+    ...faucetConfig,
+    onError(error) {
+      console.log("Error", error);
+    },
+  });
+
+  return (
+    <div>
+      <button
+        className={`btn btn-outline btn-ghost btn-sm fade-in ${
+          address ? "" : "hidden"
+        } ${isLoading ? " loading" : ""} `}
+        onClick={faucetClick}
+      >
+        {"Faucet" + " : " + tokenD_balance + " " + "$D"}
+      </button>
+    </div>
+  );
+}

services/Faucet_Mumbai.js

@@ -0,0 +1,200 @@
+//@xiaochen
+import React from "react";
+import {
+  useAccount,
+  useContractRead,
+  useContractReads,
+  usePrepareContractWrite,
+  useContractWrite,
+  useWaitForTransaction,
+} from "wagmi";
+import {
+  Mumbai_tokenA_address,
+  Mumbai_tokenB_address,
+} from "../contracts/addresses";
+import { Mumbai_faucet_abi } from "../contracts/abis";
+import { message } from "antd";
+import { ethers } from "ethers";
+
+export default function Faucet_Mumbai() {
+  const { address } = useAccount();
+  const [isFaucted_A, setIsFaucted_A] = React.useState(false);
+  const [isFaucted_B, setIsFaucted_B] = React.useState(false);
+  const [ableFaucted_A, setAbleFaucted_A] = React.useState(false);
+  const [ableFaucted_B, setAbleFaucted_B] = React.useState(false);
+  const [isLoading_A, setIsLoading_A] = React.useState(false);
+  const [isLoading_B, setIsLoading_B] = React.useState(false);
+  const [tokenA_balance, setTokenABalance] = React.useState(0);
+  const [tokenB_balance, setTokenBBalance] = React.useState(0);
+  const [hash, setHash] = React.useState("");
+  const faucetClick_A = () => {
+    if (isFaucted_A) {
+      message.error("You have already got tokenA");
+    } else {
+      setIsLoading_A(true);
+      faucetAConfigWrite?.()
+        .then((res) => {
+          console.log(res);
+          setHash(res.hash);
+        })
+        .catch((err) => {
+          setIsLoading_A(false);
+        });
+    }
+  };
+  const faucetClick_B = () => {
+    if (isFaucted_B) {
+      message.error("You have already got tokenB");
+    } else {
+      setIsLoading_B(true);
+      faucetBConfigWrite?.()
+        .then((res) => {
+          console.log(res);
+          setHash(res.hash);
+        })
+        .catch((err) => {
+          setIsLoading_B(false);
+        });
+    }
+  };
+
+  // confirmation
+  const confirmation = useWaitForTransaction({
+    hash: hash,
+    onSuccess(data) {
+      setIsLoading_A(false);
+      setIsLoading_B(false);
+      message.success({
+        content: "success",
+        duration: 1,
+        className: "mt-3",
+      });
+    },
+  });
+
+  const faucetTokenA_Config = {
+    address: Mumbai_tokenA_address,
+    abi: Mumbai_faucet_abi,
+  };
+
+  const faucetTokenB_Config = {
+    address: Mumbai_tokenB_address,
+    abi: Mumbai_faucet_abi,
+  };
+  // 获取两种测试币的状态
+  const getRouterInfo = useContractReads({
+    contracts: [
+      {
+        ...faucetTokenA_Config,
+        functionName: "faucetedList",
+        args: [address],
+      },
+      {
+        ...faucetTokenB_Config,
+        functionName: "faucetedList",
+        args: [address],
+      },
+      {
+        ...faucetTokenA_Config,
+        functionName: "balanceOf",
+        args: [address],
+      },
+      {
+        ...faucetTokenB_Config,
+        functionName: "balanceOf",
+        args: [address],
+      },
+    ],
+    watch: true,
+    enabled: true,
+    onSuccess(data) {
+      setIsFaucted_A(data[0]);
+      setIsFaucted_B(data[1]);
+      setAbleFaucted_A(!data[0]);
+      setAbleFaucted_B(!data[1]);
+      setTokenABalance(
+        Number(ethers.utils.formatUnits(data[2], "ether"))
+          .toFixed(6)
+          .replace(/\.?0+$/, "")
+      );
+
+      setTokenBBalance(
+        Number(ethers.utils.formatUnits(data[3], "ether"))
+          .toFixed(6)
+          .replace(/\.?0+$/, "")
+      );
+    },
+  });
+
+  // get tokenD balance
+  // const getTokeDBalance = useContractRead({
+  //   address: Mumbai_tokenA_address,
+  //   abi: Mumbai_faucet_abi,
+  //   functionName: "balanceOf",
+  //   args: [address],
+  //   watch: true,
+  //   onSuccess(data) {
+  //     const amount = ethers.utils.formatUnits(data, "ether");
+  //     setTokenABalance(amount);
+  //   },
+  // });
+
+  // Faucet config
+  const { config: faucetAConfig } = usePrepareContractWrite({
+    address: Mumbai_tokenA_address,
+    abi: Mumbai_faucet_abi,
+    functionName: "faucet",
+    args: [],
+    account: address,
+    enabled: ableFaucted_A,
+  });
+  // Faucet
+  const {
+    data: faucetConfigData,
+    isSuccess,
+    writeAsync: faucetAConfigWrite,
+  } = useContractWrite({
+    ...faucetAConfig,
+    onError(error) {
+      console.log("Error", error);
+    },
+  });
+
+  // Faucet config
+  const { config: faucetBConfig } = usePrepareContractWrite({
+    address: Mumbai_tokenB_address,
+    abi: Mumbai_faucet_abi,
+    functionName: "faucet",
+    args: [],
+    account: address,
+    enabled: ableFaucted_B,
+  });
+  // Faucet
+  const { writeAsync: faucetBConfigWrite } = useContractWrite({
+    ...faucetBConfig,
+    onError(error) {
+      console.log("Error", error);
+    },
+  });
+
+  return (
+    <div>
+      <button
+        className={`btn btn-outline btn-ghost btn-sm fade-in ${
+          address ? "" : "hidden"
+        } ${isLoading_A ? " loading" : ""} `}
+        onClick={faucetClick_A}
+      >
+        {"Faucet" + " : " + tokenA_balance + " " + "$A"}
+      </button>
+      <button
+        className={`btn btn-outline ml-2 btn-ghost btn-sm fade-in ${
+          address ? "" : "hidden"
+        } ${isLoading_B ? " loading" : ""} `}
+        onClick={faucetClick_B}
+      >
+        {"Faucet" + " : " + tokenB_balance + " " + "$B"}
+      </button>
+    </div>
+  );
+}