共计 3415 个字符，预计需要花费 9 分钟才能阅读完成。
Web3 是为让互联网更去中心化、可验证、平安而发动的一组宽泛的静止和协定；Web3 愿景是实现无服务器、去中心化的互联网，即用户把握本人身份、数据和命运的互联网；Web3 将启动新寰球数字经济零碎，发明新业务模式和新市场，突破平台垄断，推动宽泛的、自下而上的翻新。从 Web2.0 到 Web3.0
常识储备
- web3.js
- 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 这里裸露进去的 web3、userAddress、chainId、networkId、resetApp、assets、getAccountAssets 等,
能够参考 ConnectWallteExample.vue 这个 demo。
这就是 vue-cli-plugin 的益处，你能够轻易的 自定义 操作增删改 useWallter.js
- 一旦你有了合约的地址和 ABI，你能够像这样来实例化 Web3.js，就能够欢快的调用咱们合约的函数:
callandsend
<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：
每天摸鱼时，看到大佬们理财，一个个的都财产自在了。于是本人也缓缓的萌发了理财的念头，基金 股票 搞起来，本金少 涨也发不了财，然而亏可真的是割肉呀！
始终在寻找来钱快的理财计划，因为从事区块链相干的工作 玩起了数字货币，“眼看着它高楼起，….!” 已经有财产自在的机会我没有好好的把握住 ….，不说了 我妈叫吃韭菜馅饺子去了（远离合约，真爱生命）
