Web3+vue-cli-plugin-web3modal quickly to create your first Ethereum dAPP

Web3 is a set of extensive campaigns and protocols initiated to make the Internet more decentralized, verifiable, and secure; Web3's vision is to realize a serverless, decentralized Internet, that is, an Internet where users control their own identity, data, and destiny; Web3 will launch a new global digital economy system, create new business models and new markets, break platform monopolies, and promote extensive, bottom-up innovation. from Web2.0 to

Knowledge Reserve

1. web3.js
2. DApp's Solidity contract

IPFS + DAPP, the real WEB3.0 era has arrived

---

example: vue-web3modal-example

Preface

At work, I repeat yesterday’s work every day ( copy and paste ). As I am working on the blockchain, writing DAPP is essential.

For the implementation of the web-side DAPP, web3js is used to interact with the node contract on the Ethereum network. DAPP is mainly released on wallets such as Imtoken and Metamask. Of course, there are also PC terminals. The most famous Dapp on ETH in the industry is: uniswap .

Thinking: How does it connect to this many wallets?

Then I turned up its source code overnight, but unfortunately it was written by react ( wanted to copy other people's code and used it by myself! "dog head"), my dapp was written by vuejs. If you don’t overthrow it, use react to rewrite it, no, just copy it...

Since this kind of code is often used, write a vue-cli-plugin-web3modal so that it can be

Then why not customize cli?

use

vue add vue-cli-plugin-web3modal 

or

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

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

Follow the prompts to configure step by step according to your own situation, and wait to download dependencies (it may take a long time to download the wallet node provider SDK)

Directory Structure

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, the web3 provider using Metamask by default, the providerOptions configuration can refer to https://github.com/Web3Modal/web3modal#custom-display,

  Metamask uses Infura's server as the web3 provider by default. Just like we did above. However, it also provides users with the option of choosing their own Web3 provider. So using Metamask's web3 provider, you give users the right to choose, and you don't need to worry about this one yourself.

//默认使用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 exposed here web3, userAddress, chainId, networkId, resetApp, assets, getAccountAssets, etc.,
  You can refer to this demo of ConnectWallteExample.vue.

This is the benefit of vue-cli-plugin, you can add, delete and modify useWallter.js as you like.

• Once you have the address and ABI of the contract, you can instantiate Web3.js like this, and you can happily call the functions of our contract: 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>

Attention⚠️

We usually seldom write the instantiation myContract in the business layer. Both use vue3's combined API for better decoupling.

Such as: @/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：

money, and all of them are wealth free. So I slowly developed the idea of financial management. When fund stocks started, the principal would not rise even if the principal increased, but the loss is really a cut!

related work and played with digital currency. "Seeing it rise from high rises...!" I did not grasp the opportunity of wealth freedom. .... If you don’t say anything, my mom asked to eat dumplings stuffed with leek (away from the contract, really love life)