WalletConnect modal for Aztec apps

ShieldSwap SDK allows you to connect your Aztec app to any Aztec wallet via a WalletConnect modal. WalletConnect modal

Installation

npm install --save @shieldswap/wallet-sdk
sh

Initialize Aztec PXE

import { ,  } from "@aztec/aztec.js";

const  = ("http://localhost:8080");
await ();
ts

Connect to a wallet

Get your WalletConnect project ID from

WalletConnect
.

import {  } from "@shieldswap/wallet-sdk";

const  = new (
  {
    : "your WalletConnect project ID",
  },
  ,
);

// Connect to a wallet over WalletConnect
// opens WalletConnect modal. User can choose which wallet to connect to
const  = await .();
.("connected wallet", .().toString());
ts

Send a transaction

account is a drop-in replacement of @aztec/aztec.js AccountWalletWithPrivateKey. You can send a transaction as you would with an AccountWalletWithPrivateKey.

import {  } from "@aztec/aztec.js";
import {  } from "@aztec/noir-contracts.js/Token";

// Get currently selected account
const  = .();
if (!) throw new ("Wallet not connected");

// Deploy a token
const  = await .deploy(, .(), "My Token", "MTK", 18)
  .send()
  .deployed();
.("deployed token at address:", .address.toString());

// Mint some tokens to the wallet
const  = await 
  .withWallet()
  .methods.mint_public(.(), new (100))
  .send()
  .wait();
.("minted tokens. Tx hash", .txHash.toString());

// Check the balance
const  = await 
  .withWallet()
  .methods.balance_of_public(.())
  .simulate();
.(`balance of ${.()}:`, );
ts

React to user changing accounts

wallet.getAccount() returns the currently selected account. If you want to react to the user changing accounts, you can use the wallet.accountObservable:

const  = ..(() => {
  if () {
    .("account changed", .().toString());
  } else {
    .("account disconnected");
  }
});

// Unsubscribe when you don't need to listen to account changes anymore
();
ts
Last update at: 2024/06/22 15:09:05