/arsnap

Arweave Snap for Metamask

Primary LanguageTypeScript

Arweave Wallet for MetaMask (ArSnap)

discord arsnap npm package adapter npm package compat npm package

Arweave Wallet enables everyone to use MetaMask, the ubiquitous Ethereum wallet, to access the Arweave ecosystem. It is made possible by the MetaMask Snaps feature which is basically a plugin system for MetaMask. It enables developers to write JS code that will run inside MetaMask while benefiting from its API in order to expand its capabilities.

The Arweave Wallet Project

This repository is home to four packages:

  • arsnap: Also known as Arweave Wallet, is the Snap that runs inside MetaMask.

  • adapter: The Adapter defines the various functions that Arweave Wallet implements, and exposes them to developers so they can easily interact with it. It also contains helper functions to make some tasks - like signing transactions - more convenient.

  • wallet: The Wallet dApp allows end users to control every aspects of Arweave Wallet, through a slick and intuitive interface: select what wallet to use when interacting with other dApps, creating new wallets, sending ARs, and more in the future. Every new versions of the Wallet dApp is uploaded to Arweave and accessible at https://arsnap.org.

  • compat: An experimental compatibility layer, allowing developpers that already integrate with ArConnect to be automatically compatible with Arweave Wallet.

Getting Started

The easiest way to start experimenting with Arweave Wallet as a dApp developper is to build the project and start fiddling with the example included in the Adapter's.

Start by setting up the project dependencies:

yarn install

Then build the Adapter in development mode and start its example:

# in packages/adapter
yarn build-dev
yarn example

And finally, build the Snap and start its development server:

# in packages/arsnap
yarn dev

You should now be able to go to http://localhost:5173 (or the URL provided when running yarn example) to try out the example. While the Adapter's example dev server is running you can go in packages/adapter/example and edit index.ts to play with the API; the example's page will automatically reload with your changes.