Skip to content

agw-vue

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

agw-vue

README.md

Abstract Global Wallet with Vue

This example showcases how to use the Abstract Global Wallet with Vue.js using the new EIP-6963 provider discovery standard.

It uses MIPD (Multi Injected Provider Discovery) EIP-6963 implementation with the agw-web package that announces AGW as an EIP-6963 provider.

Local Development

  1. Get a copy of the agw-vue example directory from the Abstract Examples repository:

    mkdir -p agw-vue && curl -L https://codeload.github.com/Abstract-Foundation/examples/tar.gz/main | tar -xz --strip=2 -C agw-vue examples-main/agw-vue && cd agw-vue

  2. Install dependencies

    npm install

  3. Run the development server

    npm run dev

Visit http://localhost:5173 to see the app.

How It Works

1. Provider Discovery

The app uses MIPD to discover available wallet providers following the EIP-6963 standard:

import { createStore } from 'mipd'

const store = createStore()
const providers = store.getProviders()
const agwProvider = providers.find(p => p.info.name.includes('Abstract'))

2. Wallet Connection

The useWallet composable manages connection state and wallet interactions:

const { connect, disconnect, address, isConnected } = useWallet()

3. Sponsored Transactions

Send gas-sponsored transactions using paymasters:

// Send sponsored contract interaction
const hash = await walletClient.value.writeContract({
  abi: parseAbi(['function mint(address,uint256) external']),
  address: '0xC4822AbB9F05646A9Ce44EFa6dDcda0Bf45595AA',
  functionName: 'mint',
  args: [address.value, BigInt(1)],
  paymaster: '0x5407B5040dec3D339A9247f3654E59EEccbb6391',
  paymasterInput: getGeneralPaymasterInput({ innerInput: '0x' })
})

Useful Links