socialfi社交代幣質押流動性挖礦dapp系統開發功能邏輯

目錄結構

開發I34-案例I633-演示53I9src
│ ├── 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 配置可以參考 

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