Skip to content

Commit

Permalink
Update instructions for creating a snap (MetaMask#745)
Browse files Browse the repository at this point in the history
* update instructions for creating a snap

snaps should be created using the CLI rather than cloning the repo.
  • Loading branch information
ziad-saab authored Jun 1, 2023
1 parent cc86563 commit e988b23
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 53 deletions.
23 changes: 2 additions & 21 deletions snaps/get-started/install-snaps.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ sidebar_position: 1

# Install Snaps

To use Snaps, you must install [MetaMask Flask](#install-metamask-flask) and the [Snaps CLI](#install-the-snaps-cli).
To use Snaps, you must install [MetaMask Flask](#install-metamask-flask).

You can then [get started quickly using the Snaps template](quickstart.md).
You can then [get started quickly using the Create Snap CLI](quickstart.md).

## Prerequisites

Expand All @@ -28,22 +28,3 @@ Flask.
:::caution
Running multiple instances of MetaMask in the same browser profile breaks dapp interactions.
:::

## Install the Snaps CLI

The [Snaps CLI](../reference/cli/index.md) provides commands for initiating a snap project and building,
executing, and serving your snap for local development.

In a terminal window, install the CLI globally using npm or Yarn:

```bash
npm install -g @metamask/snaps-cli
or
yarn global add @metamask/snaps-cli
```

Verify the installation and display usage instructions:

```bash
mm-snap --help
```
15 changes: 7 additions & 8 deletions snaps/get-started/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ sidebar_position: 2
# Snaps quickstart

Get started with Snaps using the
[Snaps template](https://github.com/MetaMask/template-snap-monorepo) built with TypeScript and React.
[Create Snap CLI](https://github.com/MetaMask/snaps-monorepo/packages/create-snap).
With the CLI, you can initialize a snap monorepo project built with TypeScript and React.

## Prerequisites

Expand All @@ -23,21 +24,19 @@ Get started with Snaps using the

## Create the project

Use the Snaps template by
[creating a new repository from the template](https://github.com/MetaMask/template-snap-monorepo/generate).

[Clone the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
using the command line:
Create a new snap project using the Create Snap CLI by running the following command:

```bash
git clone [email protected]:<your-username>/template-snap-monorepo.git
yarn create @metamask/snap your-snap-name
# or...
npm create @metamask/snap your-snap-name
```

You can learn about the [anatomy of your snap project files](../concepts/anatomy.md).

## Start the snap

From the root of the repository, install the project dependencies using Yarn:
From the root of the newly created project, install the project dependencies using Yarn:

```shell
yarn
Expand Down
4 changes: 3 additions & 1 deletion snaps/reference/cli/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ sidebar_position: 3

This reference describes the syntax of the Snaps command line interface (CLI) subcommands and options.

Make sure to [install the Snaps CLI](../../get-started/install-snaps.md#install-the-snaps-cli).
:::note
The CLI is installed when you [create a snap project](../../get-started/quickstart.md).
:::

You can specify subcommands and options using the `mm-snap` command:

Expand Down
18 changes: 6 additions & 12 deletions snaps/tutorials/gas-estimation.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@ sidebar_position: 1
# Create a gas estimation snap

This tutorial walks you through creating a snap that estimates gas fees.
The snap is based on the
[Snaps template](https://github.com/MetaMask/template-snap-monorepo).
It uses the `fetch` API to request information from the internet, and displays custom information in
a confirmation dialog.
The snap uses the `fetch` API to request information from the internet, and displays custom
information in a confirmation dialog.

## Prerequisites

Expand All @@ -23,16 +21,12 @@ a confirmation dialog.

### 1. Set up the project

Use the Snaps template by
[creating a new repository from the template](https://github.com/MetaMask/template-snap-monorepo/generate).

Give your project a new name, such as `gas-estimation-snap`.

[Clone the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
using the command line:
Create a new snap project using the Create Snap CLI by running the following command:

```bash
git clone [email protected]:<your-username>/gas-estimation-snap.git
yarn create @metamask/snap gas-estimation-snap
# or...
npm create @metamask/snap gas-estimation-snap
```

To initialize your development environment with the required dependencies, in your project
Expand Down
16 changes: 5 additions & 11 deletions snaps/tutorials/transaction-insights.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ sidebar_position: 2

This tutorial walks you through creating a snap that calculates the percentage of gas fees that
a user would pay when creating a transaction.
The snap is based on the
[Snaps template](https://github.com/MetaMask/template-snap-monorepo), and it provides transaction
insights in the MetaMask transaction window.
The snap provides transaction insights in the MetaMask transaction window.

## Prerequisites

Expand All @@ -29,16 +27,12 @@ insights in the MetaMask transaction window.

### 1. Set up the project

Use the Snaps template by
[creating a new repository from the template](https://github.com/MetaMask/template-snap-monorepo/generate).

Give your project a new name, such as `transaction-insights-snap`.

[Clone the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
using the command line:
Create a new snap project using the Create Snap CLI by running the following command:

```bash
git clone [email protected]:<your-username>/transaction-insights-snap.git
yarn create @metamask/snap transaction-insights-snap
# or...
npm create @metamask/snap transaction-insights-snap
```

To initialize your development environment with the required dependencies, in your project
Expand Down

0 comments on commit e988b23

Please sign in to comment.