Web3 is a broad set of movements and protocols for making the Internet more decentralized, verifiable, and secure; Web3 vision is to achieve a serverless, decentralized Internet, that is, users control their own identity, data and fate of the Internet; Web3 will launch a new global digital economy, creating new business models and markets, breaking platform monopolies and driving broad, bottom-up innovation. From the web to Web3.0

Knowledge reserves

  1. web3.js
  2. Solidity contracts for Dapps

IPFS + DAPP the era of true WEB3.0 has arrived

preface

In my work, I will repeat yesterday’s work (copy and paste) every day. Since I am engaged in blockchain work, it is necessary to write DAPP.

For the Web-side DAPP implementation, the node contract interaction between Web3JS and Ethereum network is used. Dapps are mainly distributed on wallets such as Imtoken and Metamask, but also on PCS. Uniswap is a well-known Dapp on ETH in the industry.

Think: How does it connect to so many wallets?

Then I read the source code of react overnight, but it was written by others. Dog head “), written in Vuejs for my dapp. React/react/react/react

Since this kind of code is used a lot, let’s write onevue-cli-plugin-web3modalIt’s so pluggable, it’s so sweet

So why not customize the CLI?

use

vue add vue-cli-plugin-web3modal 
Copy the code

or

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

yarn add vue-cli-plugin-web3modal --dev
Copy the code

Follow the prompts to configure step by step according to your own situation, waiting for downloading dependencies (may wait a long time, because you need to download the wallet node provider SDK)

The directory structure

SRC │ ├─ │ ├─ ├─ ├─ trash ├─ ├.vue │ ├─ ├─ ├.vue │ ├─ trash ├─ ├.vue │ ├─ ├.vue │ ├─ ├.vue │ ├─ hooks │ ├─ ├.js// Core logic│ ├─ ├─ ├─ ├.js │ ├─ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.jsProvide abis / /│ ├─ Chains.js │ ├─ config.js/ / configuration items│ ├── Constants. Dev.js │ ├── └.js │ ├─ └Copy the code

  • SRC /web3/config.js, using Metamask’s web3 provider by default,providerOptions can be configured at github.com/Web3Modal/w… .

    Metamask uses Infura’s server as its Web3 provider by default. Just like we did up here. However, it also gives users the option to choose their own Web3 provider. So with Metamask’s Web3 provider, you’re giving the user choice without having to worry about it yourself.

// Use the web3 provider of Metamask by default
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}}};Copy the code
  • SRC /hooks/ usewallte.js web3, userAddress, chainId, networkId, resetApp, assets, getAccountAssets, etc.

See the connectwallteexample.vue demo.

This is the advantage of vue-cli-plugin. You can add, delete, or change usewallter.js as you like

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

Note ⚠ ️

Instantiation myContract is rarely written in the business layer. Both take advantage of vue3’s composite 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>


Copy the code

@/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
  };
}

Copy the code

Ps:

Every day when fishing, to see the big men financial management, a wealth of freedom. So he also slowly initiation of the idea of financial management, fund stock, the principal less rise also can not make money, but loss can really be cut meat!

I have been looking for a financial plan to make money quickly, because I have been engaged in blockchain-related work and started to play with digital currency, “watching it rise,…. !” Once had the opportunity of wealth freedom I did not grasp well…. Anyway, my mom’s having leek dumplings.