Package Exports

vue-cli-plugin-web3modal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-cli-plugin-web3modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-cli-plugin-web3modal

vue3-cli-plugin A single Web3 / Ethereum provider solution for all Wallets

Introduction

vue-cli-plugin-web3modal It is based on web3modal for vuejs help developers add support for multiple providers in their apps with a simple customizable configuration.

Usage

Install vue-cli-plugin-web3modal NPM package

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

# OR

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

vue add plugin

 vue invoke vue-cli-plugin-web3modal

Using in vanilla vue

If you add Exanple's directory structure in the configuration:

src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── ConnectWallteExample.vue
│   │   └── HelloWorld.vue
│   ├── hooks
│   │   └── useWallte.js
│   ├── main.js
│   ├── registerServiceWorker.js
│   └── web3
│       ├── abis.js
│       ├── chains.js
│       ├── config.js
│       ├── constants.dev.js
│       ├── constants.js
│       └── tools.js

src/web3/config.js, providerOptions Configuration can refer to https://github.com/Web3Modal/web3modal#custom-display

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 Here will provide web3、userAddress、chainId、networkId、resetApp、assets、getAccountAssets Wait, Please use ConnectWallteExample.vue

<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>