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-web3modalyarn 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 这里裸露进去的web3、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：

每天摸鱼时，看到大佬们理财，一个个的都财产自在了。于是本人也缓缓的萌发了理财的念头， 基金 股票 搞起来，本金少 涨也发不了财，然而亏可真的是割肉呀！

始终在寻找来钱快的理财计划，因为从事区块链相干的工作 玩起了数字货币，“眼看着它高楼起，....!" 已经有财产自在的机会我没有好好的把握住....，不说了 我妈叫吃韭菜馅饺子去了（远离合约，真爱生命）