add connect to ethers provider function and use pinia as ether params store

Co-authored-by: geovanne97 <geovannessaraiva97@gmail.com> Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>
2022-11-15 17:01:37 -03:00
parent a2acb72a1b
commit 91283305b9
7 changed files with 181 additions and 15 deletions
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
    "@headlessui/vue": "^1.7.3",
    "@heroicons/vue": "^2.0.12",
    "crc": "^3.8.0",
+    "pinia": "^2.0.23",
    "qrcode": "^1.5.1",
    "vue": "^3.2.41",
    "vue-router": "^4.1.5"
@@ -32,13 +33,13 @@
    "autoprefixer": "^10.4.12",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
+    "ethers": "^5.7.2",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.18",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.2.1",
    "typescript": "~4.7.4",
    "vite": "^3.1.8",
-    "vue-tsc": "^1.0.8",
-    "ethers": "^5.7.2"
+    "vue-tsc": "^1.0.8"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import ethers from "./ethers";
+import { storeToRefs } from "pinia";
+import { useEtherStore } from "./store/ether";
+import ethers from "./utils/ethers";
+
+const etherStore = useEtherStore();
+
+const { walletAddress } = storeToRefs(etherStore);

 const connectMetaMask = () => {
-  ethers.getProvider().then((web3Provider) => {
-    console.log(web3Provider);
-  });
+  ethers.getProvider();
 };
 </script>

@@ -17,15 +21,19 @@ const connectMetaMask = () => {
      width="75"
      height="75"
    />
-    <div class="flex gap-4">
+    <div class="flex gap-4 items-center">
      <button type="button" class="p-2 text-gray-50">Quero vender</button>
      <button
        type="button"
+        v-if="!walletAddress"
        class="p-2 border-amber-400 border-2 rounded text-gray-50"
        @click="connectMetaMask()"
      >
        Conectar carteira
      </button>
+      <span v-if="walletAddress">
+        {{ walletAddress[0] }}
+      </span>
    </div>
    <!-- <div class="wrapper">
      <HelloWorld msg="You did it!" />
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,13 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
+import { createPinia } from "pinia";

 import "./assets/main.css";

 const app = createApp(App);

 app.use(router);
+app.use(createPinia());

 app.mount("#app");
--- a/src/store/ether.ts
+++ b/src/store/ether.ts
@@ -0,0 +1,21 @@
+import type { ethers } from "ethers";
+import { defineStore } from "pinia";
+
+export const useEtherStore = defineStore("ether", {
+  state: () => ({
+    walletAddress: "",
+    balance: 0,
+    provider: null as ethers.providers.Web3Provider | null,
+  }),
+  actions: {
+    setWalletAddress(walletAddress: string) {
+      this.walletAddress = walletAddress;
+    },
+    setBalance(balance: number) {
+      this.balance = balance;
+    },
+    setProvider(provider: ethers.providers.Web3Provider | null) {
+      this.provider = provider;
+    },
+  },
+});
--- a/src/utils/ethers.ts
+++ b/src/utils/ethers.ts
@@ -1,18 +1,23 @@
+import { useEtherStore } from "@/store/ether";
 import { ethers } from "ethers";

-const getProvider = async (): Promise<ethers.providers.Web3Provider> => {
+const getProvider = async (): Promise<ethers.providers.Web3Provider | null> => {
+  const etherStore = useEtherStore();
  const window_ = window as any;
+  let provider: ethers.providers.Web3Provider | null = null;

  if (window_.ethereum) {
-    const provider = new ethers.providers.Web3Provider(window_.ethereum);
+    provider = new ethers.providers.Web3Provider(window_.ethereum);

    const walletAddress = await provider.send("eth_requestAccounts", []);
    const balance = await provider.getBalance(walletAddress[0]);
-    console.log(walletAddress);
-    console.log(ethers.utils.formatEther(balance));

-    return provider;
+    etherStore.setProvider(provider);
+    etherStore.setWalletAddress(walletAddress);
+    etherStore.setBalance(Number(balance));
  } else console.log("Browser não suporta conexão com metamask");
+
+  return provider;
 };

 export default { getProvider };
--- a/src/views/EthersView.vue
+++ b/src/views/EthersView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ethers from "../ethers";
+import ethers from "../utils/ethers";

 const connectMetaMask = () => {
  ethers.getProvider().then((web3Provider) => {
--- a/yarn.lock
+++ b/yarn.lock
@@ -964,7 +964,7 @@
    "@vue/compiler-dom" "3.2.41"
    "@vue/shared" "3.2.41"

-"@vue/devtools-api@^6.4.5":
+"@vue/devtools-api@^6.4.4", "@vue/devtools-api@^6.4.5":
  version "6.4.5"
  resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz"
  integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
@@ -1068,6 +1068,11 @@ acorn@^8.8.0:
  resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz"
  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==

+aes-js@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
+  integrity sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==
+
 ajv@^6.10.0, ajv@^6.12.4:
  version "6.12.6"
  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
@@ -1142,11 +1147,26 @@ base64-js@^1.3.1:
  resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==

+bech32@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/bech32/-/bech32-1.1.4.tgz#e38c9f37bf179b8eb16ae3a772b40c356d4832e9"
+  integrity sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==
+
 binary-extensions@^2.0.0:
  version "2.2.0"
  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==

+bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+  integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
+
 boolbase@^1.0.0:
  version "1.0.0"
  resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"
@@ -1174,6 +1194,11 @@ braces@^3.0.2, braces@~3.0.2:
  dependencies:
    fill-range "^7.0.1"

+brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==
+
 browserslist@^4.21.3, browserslist@^4.21.4:
  version "4.21.4"
  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz"
@@ -1415,6 +1440,19 @@ electron-to-chromium@^1.4.251:
  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz"
  integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==

+elliptic@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
 emoji-regex@^8.0.0:
  version "8.0.0"
  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -1760,6 +1798,42 @@ esutils@^2.0.2:
  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==

+ethers@^5.7.2:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e"
+  integrity sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==
+  dependencies:
+    "@ethersproject/abi" "5.7.0"
+    "@ethersproject/abstract-provider" "5.7.0"
+    "@ethersproject/abstract-signer" "5.7.0"
+    "@ethersproject/address" "5.7.0"
+    "@ethersproject/base64" "5.7.0"
+    "@ethersproject/basex" "5.7.0"
+    "@ethersproject/bignumber" "5.7.0"
+    "@ethersproject/bytes" "5.7.0"
+    "@ethersproject/constants" "5.7.0"
+    "@ethersproject/contracts" "5.7.0"
+    "@ethersproject/hash" "5.7.0"
+    "@ethersproject/hdnode" "5.7.0"
+    "@ethersproject/json-wallets" "5.7.0"
+    "@ethersproject/keccak256" "5.7.0"
+    "@ethersproject/logger" "5.7.0"
+    "@ethersproject/networks" "5.7.1"
+    "@ethersproject/pbkdf2" "5.7.0"
+    "@ethersproject/properties" "5.7.0"
+    "@ethersproject/providers" "5.7.2"
+    "@ethersproject/random" "5.7.0"
+    "@ethersproject/rlp" "5.7.0"
+    "@ethersproject/sha2" "5.7.0"
+    "@ethersproject/signing-key" "5.7.0"
+    "@ethersproject/solidity" "5.7.0"
+    "@ethersproject/strings" "5.7.0"
+    "@ethersproject/transactions" "5.7.0"
+    "@ethersproject/units" "5.7.0"
+    "@ethersproject/wallet" "5.7.0"
+    "@ethersproject/web" "5.7.1"
+    "@ethersproject/wordlists" "5.7.0"
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
@@ -2004,11 +2078,28 @@ has@^1.0.3:
  dependencies:
    function-bind "^1.1.1"

+hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
 he@^1.2.0:
  version "1.2.0"
  resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

+hmac-drbg@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
 hosted-git-info@^2.1.4:
  version "2.8.9"
  resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
@@ -2050,7 +2141,7 @@ inflight@^1.0.4:
    once "^1.3.0"
    wrappy "1"

-inherits@2:
+inherits@2, inherits@^2.0.3, inherits@^2.0.4:
  version "2.0.4"
  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -2195,6 +2286,11 @@ js-sdsl@^4.1.4:
  resolved "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz"
  integrity sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==

+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 js-tokens@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -2311,6 +2407,16 @@ micromatch@^4.0.4, micromatch@^4.0.5:
    braces "^3.0.2"
    picomatch "^2.3.1"

+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
+
+minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==
+
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
  version "3.1.2"
  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
@@ -2556,6 +2662,14 @@ pify@^3.0.0:
  resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
  integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==

+pinia@^2.0.23:
+  version "2.0.23"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.23.tgz#570f5f82160b656b412602789683faa95502d227"
+  integrity sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==
+  dependencies:
+    "@vue/devtools-api" "^6.4.4"
+    vue-demi "*"
+
 pngjs@^5.0.0:
  version "5.0.0"
  resolved "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz"
@@ -2752,6 +2866,11 @@ safe-regex-test@^1.0.0:
    get-intrinsic "^1.1.3"
    is-regex "^1.1.4"

+scrypt-js@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312"
+  integrity sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==
+
 "semver@2 || 3 || 4 || 5", semver@^5.5.0:
  version "5.7.1"
  resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
@@ -3060,6 +3179,11 @@ vite@^3.1.8:
  optionalDependencies:
    fsevents "~2.3.2"

+vue-demi@*:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
 vue-eslint-parser@^9.0.0, vue-eslint-parser@^9.0.1:
  version "9.1.0"
  resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz"
@@ -3156,6 +3280,11 @@ wrappy@1:
  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==

+ws@7.4.6:
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
+
 xml-name-validator@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz"