Vueth

Basic Usage

Connecting

A simple 'connect' button which connects or disconnects to the users MetaMask, & displays their account could be designed as follows.

<script setup>
import { useEthers } from 'vueth';
const { account, active, connect, disconnect } = useEthers();
</script>

<template>
<div>
  <p>{{ account }}</p>
  <button @click="disconnect()" v-if="active">Disconnect</button>
  <button @click="connect()" v-else>Connect</button>
</div>
</template>

Tokens

To Display Information About a Token (This example uses Wrapped Fantom, on the Fantom Opera Network)

<script setup>
import { useToken } from 'vueth';
const wftm = useToken("0x21be370d5312f44cb42ce377bc9b8a0cef1a4c83");
</script>

<template>
<ul>
  <li>Address: {{ token.address }}</li>
  <li>Name: {{ token.name }}</li>
  <li>Symbol: {{ token.symbol }}</li>
  <li>Decimals: {{ token.decimals }}</li>
  <li>Total Supply: {{ token.totalSupply }}</li>
</ul>
</template>

Chain Balance

To Get the connected users balance for the chains native token

<script setup>
import { useBalance, useEthers } from 'vueth';
const { account } = useEthers(); // Get the current active users address
const { balance } = useBalance(account); // Native Chain Balance (Ethereum, Fantom, Etc)
</script>

<template>
    <p>Balance: {{ balance }}</p>
</template>

Token Balance

Or to get the balance for an ERC20 token

<script setup>
import { useToken, useEthers } from 'vueth';
const { account } = useEthers(); // Get the current active users address
const wftm = useToken("0x21be370d5312f44cb42ce377bc9b8a0cef1a4c83");
const wftmBalance = wftm.balanceOf(account)
</script>

<template>
  <p>WFTM Balance: {{ wftmBalance }}</p>
</template>