Wagmi SDK wrapper for Flutter Web

Features

Exposes Wagmi sdk to your Flutter web project.

Wagmi provides developers with intuitive building blocks to build their Ethereum apps.

Getting started

In pubspec.yaml file, add the wagmi_flutter_web dependency :

dependencies:
  wagmi_flutter_web:

Usage

import 'package:wagmi_flutter_web/wagmi.dart' as wagmi;

// Load and initialize Wagmi lib.
await wagmi.init();

// Initializes Web3Modal
wagmi.Web3Modal.init(
    'f642e3f39ba3e375f8f714f18354faa4',
    [wagmi.Chain.ethereum.name!, wagmi.Chain.sepolia.name!],
    true,
    true,
    wagmi.Web3ModalMetadata(
        name: 'Web3Modal',
        description: 'Web3Modal Example',
        url: 'https://web3modal.com',
        icons: ['https://avatars.githubusercontent.com/u/37784886'],
    ),
    false // email
    [], // social networks
    true, // showWallets
    true, // walletFeatures
);

// Opens the Wallet connection modal.
wagmi.Web3Modal.open();

Error management

Errors from wagmi can be handled using the WagmiError object. Wagmi provides an error stack through the cause property. The findError method with the error type allows checking if a specific error is in the error stack.

The different exceptions are available in the WagmiErrors enumeration

 try {
      final transactionHash = await wagmi.Core.writeContract(
        parameters,
      );
    } on wagmi.WagmiError catch (e, stackTrace) {
      if (e.findError(wagmi.WagmiErrors.UserRejectedRequestError) != null) {
        throw Exception('userRejected'); 
      }
      if (e.findError(wagmi.WagmiErrors.InsufficientFundsError) != null) {
         throw Exception('insufficientFunds'); 
      }
      throw Exception('${e.shortMessage}'); 
    }

Available Actions

Status

🔴 Not Implemented Yet.
🟠 Work In Progress.
✅ Implemented.
🛠️ Blocking WASM Support. (Needs rework in future.)
📄 TODO to be managed

For more details, refer to the API documentation.

Action Name	Status
`call`	✅ Implemented
`connect`	🔴
`deployContract`	🔴
`disconnect`	✅ Implemented
`estimateFeesPerGas`	✅ Implemented
`estimateGas`	✅ Implemented
`estimateMaxPriorityFeePerGas`	✅ Implemented
`getAccount`	✅ Implemented
`getBalance`	✅ Implemented
`getBlock`	✅ Implemented
`getBlockNumber`	✅ Implemented
`getBlockTransactionCount`	✅ Implemented
`getBytecode`	✅ Implemented
`getChainId`	✅ Implemented
`getChains`	✅ Implemented
`getClient`	🔴
`getConnections`	✅ Implemented
`getConnectorClient`	🔴
`getConnectors`	🔴
`getEnsAddress`	🔴
`getEnsAvatar`	🔴
`getEnsName`	🔴
`getEnsResolver`	🔴
`getEnsText`	🔴
`getFeeHistory`	✅ Implemented
`getGasPrice`	✅ Implemented
`getProof`	🔴
`getPublicClient`	🔴
`getStorageAt`	🔴
`getToken`	✅ Implemented
`getTransaction`	✅ Implemented
`getTransactionConfirmations`	✅ Implemented
`getTransactionCount`	✅ Implemented
`getTransactionReceipt`	✅ Implemented
`getWalletClient`	🔴
`multicall`	🔴
`prepareTransactionRequest`	🔴
`readContract`	✅ Implemented
`readContracts`	✅ Implemented 🛠️
`reconnect`	✅ Implemented
`sendTransaction`	✅ Implemented
`signMessage`	✅ Implemented
`signTypedData`	🔴
`simulateContract`	🔴
`switchAccount`	✅ Implemented
`switchChain`	✅ Implemented
`verifyMessage`	✅ Implemented
`verifyTypedData`	🔴
`waitForTransactionReceipt`	✅ Implemented
`watchAccount`	✅ Implemented
`watchAsset`	✅ Implemented
`watchBlockNumber`	🔴
`watchBlocks`	🔴
`watchChainId`	✅ Implemented
`watchClient`	🔴
`watchConnections`	✅ Implemented
`watchConnectors`	🔴
`watchContractEvent`	✅ Implemented
`watchPendingTransactions`	🔴
`watchPublicClient`	🔴
`writeContract`	✅ Implemented

Development environment

Prerequisites

You will need the following tools :

Flutter >= 3.22.3
nodejs >= 18

Compile & run project

Compile TypeScript code

Following commands will build JS code to embed in the web browser.

npm install
npm run build // build production lib
npm run dev // build & watch in dev mode

Run Flutter project

Then, you can run Flutter project as usual.

flutter

Run Typescript tests

$ npm test

When using VSCode, to enable debugging, create your terminal using the command Debug: JavaScript Debug Terminal.

Run Dart tests

$ dart test -p chrome

# Or with debug
$ dart test -p chrome --pause-after-load