Web3+vue-cli-plugin-web3modal 快速來建立你的第一個以太坊 dAPP

Web3是爲讓互聯網更去中心化、可驗證、安全而發起的一組普遍的運動和協議；Web3願景是實現無服務器、去中心化的互聯網，即用戶掌握本身身份、數據和命運的互聯網；Web3將啓動新全球數字經濟系統，創造新業務模式和新市場，打破平臺壟斷，推進普遍的、自下而上的創新。 從Web2.0到Web3.0

知識儲備

1. web3.js
2. DApp 的 Solidity 合約

IPFS + DAPP 真正的WEB3.0的時代到來

前言

在工做中，天天都會重複昨天的工做（複製粘貼）, 因爲從事區塊鏈的工做，必不可少的就是寫DAPP了。

對於web端DAPP實現，利用web3js和以太坊網絡的上的節點合約交互。DAPP主要發佈在 Imtoken 和Metamask等等錢包上固然也有pc端的。業界ETH上的Dapp比較有名的就是:uniswap。

思考 ： 它是怎麼作到能夠鏈接這個多的錢包的？

而後連夜翻導它的源碼，惋惜人家是react寫的（想拷貝人家的代碼 本身用的想法破滅了！」狗頭「），個人dapp用的vuejs寫的。苦逼 要不推翻了用react在重新寫吧，不行呀，那就照抄吧...

既然這種代碼常常用 那就寫個vue-cli-plugin-web3modal 這樣就可插拔了，美滋滋

那爲何不自定義cli呢？

使用

vue add vue-cli-plugin-web3modal

或者

npm install --save-dev vue-cli-plugin-web3modal

yarn add vue-cli-plugin-web3modal --dev

依提示能夠根據本身的狀況一步步的來配置，等待下載依賴（可能會等好久，由於要下載錢包節點提供者SDK）

目錄結構

src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── ConnectWallteExample.vue
│   │   └── HelloWorld.vue
│   ├── hooks
│   │   └── useWallte.js // 核心邏輯
│   ├── main.js
│   ├── registerServiceWorker.js
│   └── web3
│       ├── abis.js // 提供abis
│       ├── chains.js
│       ├── config.js // 配置項
│       ├── constants.dev.js
│       ├── constants.js
│       └── tools.js

• src/web3/config.js, 默認使用Metamask的web3提供者 ,providerOptions 配置能夠參考 https://github.com/Web3Modal/...,

  Metamask 默認使用 Infura 的服務器作爲 web3 提供者。 就像咱們上面作的那樣。不過它還爲用戶提供了選擇他們本身 Web3 提供者的選項。因此使用 Metamask 的 web3 提供者，你就給了用戶選擇權，而本身無需操心這一塊。

//默認使用Metamask的web3提供者
const providerOptions = {
  // Example with injected providers
  injected: {
    display: {
      logo: "data:image/gif;base64,INSERT_BASE64_STRING",
      name: "Injected",
      description: "Connect with the provider in your Browser"
    },
    package: null
  },
  // Example with WalletConnect provider
  walletconnect: {
    display: {
      logo: "data:image/gif;base64,INSERT_BASE64_STRING",
      name: "Mobile",
      description: "Scan qrcode with your mobile wallet"
    },
    package: WalletConnectProvider,
    options: {
      infuraId: "INFURA_ID" // required
    }
  }
};

• src/hooks/useWallte.js 這裏暴露出來的web三、userAddress、chainId、networkId、resetApp、assets、getAccountAssets 等,
  能夠參考ConnectWallteExample.vue這個demo 。

這就是 vue-cli-plugin 的好處 ，你能夠隨便的 自定義 操做增刪改 useWallter.js

• 一旦你有了合約的地址和 ABI，你能夠像這樣來實例化 Web3.js，就能夠愉快的調用咱們合約的函數: call and send

<script setup>
const {
  onConnect,
  connected,
  web3,
  userAddress,
  chainId,
  networkId,
  resetApp,
  assets,
  getAccountAssets,
} = useWallet();

const handleWalletConnect = async () => {
  await onConnect();
  if (connected) {
    console.log('afterConnectdWallet', connected);
  }
};
const contract = computed(
  () => new web3.value.eth.Contract(USDT_API, USDT_ADDRESS),
);
function approve() {
  return contract.value.methods
    .approve(USDT_ADDRESS, utils.toHex(utils.toWei('1000000000000000000000000000', 'gwei')))
    .send({ from: userAddress.value });
}

// .....
</script>

注意⚠️

咱們一般不多把 實例化 myContract 寫在業務層。都是利用vue3的組合式 API更好的解耦。

如：@/components/ConnectWallteExample.vue

// @/components/ConnectWallteExample.vue
<script setup>
  const {
      web3,
      userAddress,
      connected,
  } = useWallet();
 import useGswap from '@/hooks/useGswap';
  
 const { balanceOf } = useGswap({
      web3,
      userAddress,
      connected,
    });
// .....
</script>

@/hooks/useGswap.js

// @/hooks/useGswap.js
 import {
  ref, computed, toRefs, watch, watchEffect,
} from 'vue';
import { GSWAPABI, POINTABI } from '@/web3/abi';
import { gswapAddress, poinAddress } from '@/web3/config';

export default function (props) {
  const { web3, userAddress, connected } = toRefs(props);

  const contract = computed(
    () => new web3.value.eth.Contract(GSWAPABI, gswapAddress),
  );
  const pointContract = computed(() => new web3.value.eth.Contract(POINTABI, poinAddress));
  // methods
  function balanceOf() {
    return pointContract.value.methods
      .balanceOf(userAddress.value)
      .call()
      .then((res) => res);
  }
  //    ....
  return {
    balanceOf
  };
}

---

ps：

天天摸魚時，看到大佬們理財，一個個的都財富自由了。因而本身也慢慢的萌生了理財的念頭， 基金 股票 搞起來，本金少 漲也發不了財，可是虧可真的是割肉呀！

一直在尋找來錢快的理財方案，由於從事區塊鏈相關的工做 玩起了數字貨幣，「眼看着它高樓起，....!" 曾經有財富自由的機會我沒有好好的把握住....，不說了 我媽叫吃韭菜餡餃子去了（遠離合約，真愛生命）