https://github.com/montoya/address-book-snap-tutorial

An example Snap that manages an internal address book and makes it available to Dapps
https://github.com/montoya/address-book-snap-tutorial

Last synced: 1 day ago
JSON representation

An example Snap that manages an internal address book and makes it available to Dapps

• Host: GitHub
• URL: https://github.com/montoya/address-book-snap-tutorial
• Owner: Montoya
• Created: 2022-03-30T20:55:40.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-02T07:29:45.000Z (over 1 year ago)
• Last Synced: 2023-04-12T04:48:43.004Z (over 1 year ago)
• Language: HTML
• Size: 1.54 MB
• Stars: 9
• Watchers: 2
• Forks: 5
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# @Montoya/address-book-snap-tutorial

A Snap example based on [@MetaMask/template-snap](https://github.com/MetaMask/template-snap). Read below for a tutorial!

## Prerequisites

Before you begin, make sure you have the following installed: 

* [Google Chrome](https://www.google.com/chrome/) 

* [MetaMask Flask](https://metamask.io/flask/)\* 

* [Node.js](https://nodejs.org/) 

* [Yarn](https://yarnpkg.com/)

* A text editor or IDE like [Visual Studio Code](https://code.visualstudio.com/)

* Optionally, a [GitHub account](https://github.com/) and a git client like [GitHub Desktop](https://desktop.github.com/)

\* *Please note: MetaMask Flask is experimental preview software. Please do not use your existing secret recovery phrase or keys with Flask. It is recommended that you create a new SRP for testing with Flask.*

## The 30-Minute Snap Tutorial

In this tutorial, you will learn how to manage state in a Snap and how to present a custom API for Dapps. The Snap you will implement is not meant to be an ideal way to manage an address book but rather to demonstrate some features to get you started building with Snaps. 

_If you have not done so already, you should follow the [5-Minute Snap Tutorial](https://github.com/Montoya/gas-fee-snap#the-5-minute-snap-tutorial) before starting with this tutorial._

First, navigate to the [@MetaMask/template-snap](https://github.com/MetaMask/template-snap) repository and click "Use this template." _Note: this is a different template than the one used in the 5-minute snap tutorial._ Give your new Snap a name, like `address-book-snap`. Clone the respository to your local machine. Open a command line tool and run `./scripts/cleanup.sh` to remove some MetaMask-specific files that will not work outside of the MetaMask GitHub organization. Now you are ready to start modifying the files in your Snap.

### Adding the Manage State Permission to your Snap

Open `snap.manifest.json`. This file has the main configuration details for your Snap. To enable your Snap to store an address book, you need to request the "manage state" permission. You can do this by modifying `initialPermissions` to include this permission, like so: 

```JSON

"initialPermissions": {

  "snap_confirm": {},

  "snap_manageState": {}

},

```

This will enable the use of the `snap_manageState` RPC method. With this method, you can save and retrieve data in your Snap.

### Storing Addresses 

Open `index.html`. This is the test Dapp that is included in the Snaps template. Add a form before the closing `