diff --git a/snaps/get-started/install-snaps.md b/snaps/get-started/install-flask.md similarity index 83% rename from snaps/get-started/install-snaps.md rename to snaps/get-started/install-flask.md index 6ca56ba30bd..3cc6f7fb955 100644 --- a/snaps/get-started/install-snaps.md +++ b/snaps/get-started/install-flask.md @@ -1,12 +1,17 @@ --- -description: Install Snaps dependencies. +description: Install MetaMask Flask to start building your own Snaps. sidebar_position: 1 --- -# Install Snaps +# Install MetaMask Flask To get started building your own snaps, you must [install the MetaMask Flask browser extension](#install-the-metamask-flask-browser-extension). +:::danger Developers only +MetaMask Flask is an experimental tool only for developers. +If you are not a developer, you should not install MetaMask Flask. +::: + ## Prerequisites - Up-to-date Chromium or Firefox browser diff --git a/snaps/get-started/quickstart.md b/snaps/get-started/quickstart.md index 22a926e6f77..a67db37637e 100644 --- a/snaps/get-started/quickstart.md +++ b/snaps/get-started/quickstart.md @@ -10,10 +10,10 @@ With the CLI, you can initialize a snap monorepo project built with TypeScript a ## Prerequisites -- [Snaps installed](install-snaps.md) +- [MetaMask Flask installed](install-flask.md) :::tip - Snaps works with the latest LTS version of Node.js, but we recommend using the version specified in + MetaMask Snaps works with the latest LTS version of Node.js, but we recommend using the version specified in the template's [`.nvmrc`](https://github.com/MetaMask/template-snap-monorepo/blob/main/.nvmrc) file. ::: @@ -50,7 +50,7 @@ Start the development server: yarn start ``` -You are now serving the snap and its front-end at [`http://localhost:8000`](http://localhost:8000/). +You are now serving the snap at [`http://localhost:8080`](http://localhost:8080/) and its front-end at [`http://localhost:8000`](http://localhost:8000/). ## Connect to the snap @@ -58,7 +58,7 @@ On the front-end, select the **Connect** button and the MetaMask Flask extension requires you to approve the snap's permissions. Once connected, select the **Send message** button to display a custom message within a confirmation -screen in MetaMask. +screen in MetaMask Flask. ## Customize the snap @@ -94,11 +94,11 @@ export const onRpcRequest: OnRpcRequestHandler = ({ origin, request }) => { }; ``` -Edit the text in the `description` or `textAreaContent` field and select the **Reconnect** button +Edit the text in any `text()` component and select the **Reconnect** button on the front-end to re-install the snap. :::note -MetaMask automatically re-installs locally hosted snaps whenever it receives a connection request +MetaMask Flask automatically re-installs locally hosted snaps whenever it receives a connection request for them. ::: diff --git a/snaps/how-to/develop-a-snap.md b/snaps/how-to/develop-a-snap.md index 7528f6ec1c5..75cdfbc993a 100644 --- a/snaps/how-to/develop-a-snap.md +++ b/snaps/how-to/develop-a-snap.md @@ -6,15 +6,14 @@ sidebar_position: 1 # Develop a snap A snap can extend the dapp-facing [MetaMask JSON-RPC API](/wallet/reference/rpc-api) in -arbitrary ways, or integrate with and extend the functionality of MetaMask using the -[Snaps JSON-RPC API](../reference/rpc-api.md) and [permissions](request-permissions.md). +arbitrary ways, or integrate with and extend the functionality of MetaMask using the [Snaps Exports](../reference/exports.md), [Snaps JSON-RPC API](../reference/rpc-api.md), and [permissions](request-permissions.md). Before developing a snap, it's important to understand: - [The snap anatomy](../concepts/anatomy.md). - [The snap lifecycle](../concepts/lifecycle.md). - [The snap user interface](../concepts/user-interface.md). -- [The Snaps execution environment](../concepts/execution-environment.md). +- [The MetaMask Snaps execution environment](../concepts/execution-environment.md). You can [get started quickly using the Snaps template](../get-started/quickstart.md) or follow a [tutorial](/snaps/category/tutorials). @@ -23,8 +22,7 @@ This page describes additional important steps when developing a snap. ## Detect the user's MetaMask version -When developing a website that depends on Snaps, you need to know whether the user has -[MetaMask Flask](../get-started/install-snaps.md#install-metamask-flask) installed. +When developing a website that depends on [MetaMask Flask](../get-started/install-flask.md#install-metamask-flask), you first need to know whether the user has it installed. The following example uses the [`@metamask/detect-provider`](https://npmjs.com/package/@metamask/detect-provider) package to get @@ -55,6 +53,11 @@ if (provider && isFlask) { Test your snap by hosting it locally using `mm-snap serve`, installing it in Flask, and calling its API methods from a web page. +:::note +If you use the template snap monorepo, running `yarn start` will serve the snap at +[`http://localhost:8080`](http://localhost:8080/) +::: + ## Debug your snap To debug your snap, use `console.log` and inspect the MetaMask background process. @@ -86,6 +89,9 @@ on publishing to the public registry. The following details are specific to Snaps: - The version in `package.json` and `snap.manifest.json` must match. +- The `repository.url` field in `package.json` should match the correct repository for your snap. +- The `source.location.npm.packageName` in `snap.manifest.json` must match the name in `package.json`. +- The `proposedName` in `snap.manifest.json` should be a human-readable name and should not include the words "MetaMask" or "Snap." - The image specified in `iconPath` in the manifest file is used as the icon displayed when installing the snap, in custom dialogs, and in the settings menu. - This icon must be a valid SVG. - The icon will be cropped in a circle when displayed in MetaMask; you do not need to make the icon circular. @@ -97,19 +103,15 @@ If you are using the snap template, make sure to only publish the snap package i You can use the [Snaps Simulator](https://metamask.github.io/snaps/snaps-simulator/staging/#/manifest) to verify that your snap was published correctly — just click on "localhost" in the top right corner and change the snap location to be "npm" and the ID of your snap. + +Also, make sure to update the manifest file, icon file, and README to differentiate your snap from the template. ::: ## Distribute your snap -Since snaps are currently intended for a developer audience, MetaMask doesn't currently facilitate -distributing snaps to a wide audience. -If you have a website that expects the user to install a snap, ask the user to install MetaMask -Flask, and then ask the user to install the snap using the -[`wallet_enable`](../reference/rpc-api.md#wallet_enable) API method. +You should deploy a dapp where users can learn about your snap and install it, or integrate with your existing dapp. -In the future, MetaMask will create some way for users to more easily discover snaps, but everyone -can always build, publish, and use snaps without MetaMask's permission. -(Although we may try to make it difficult to use known scams.) +If your snap is designed to communicate with dapps, you can encourage other dapp developers to [integrate your snap](work-with-existing-snaps.md). ## Resources and tools @@ -119,7 +121,6 @@ You can review the growing number of [example snaps](https://github.com/MetaMask - [StarkNet](https://github.com/Consensys/starknet-snap) - [MobyMask Phishing Warning](https://github.com/Montoya/mobymask-snap) - [Transaction Simulation with Ganache](https://github.com/Montoya/tx-simulation-with-ganache-snap) - (uses Truffle for local testing) MetaMask also maintains tools to help developers build, debug, and maintain snaps: diff --git a/snaps/how-to/request-permissions.md b/snaps/how-to/request-permissions.md index 127a62791f6..bd53f18aa36 100644 --- a/snaps/how-to/request-permissions.md +++ b/snaps/how-to/request-permissions.md @@ -48,5 +48,5 @@ For example, your snap can request permission to call the Ethereum provider's [`eth_accounts`](../reference/permissions.md#eth_accounts) RPC method by calling the provider's [`eth_requestAccounts`](/wallet/reference/eth_requestaccounts) RPC method. -See the [Ethereum JSON-RPC API restricted methods](/wallet/concepts/rpc-api#restricted-methods) +See the [`eth_accounts` Dynamic Permission](../reference/permissions.md#eth_accounts) for more information. diff --git a/snaps/index.mdx b/snaps/index.mdx index 84da8544eeb..dc71ff306b5 100644 --- a/snaps/index.mdx +++ b/snaps/index.mdx @@ -6,15 +6,14 @@ import CardList from '@site/src/components/CardList' # Extend the functionality of MetaMask using Snaps -Snaps is an open source system that allows anyone to safely extend the functionality of MetaMask, +MetaMask Snaps is an open source system that allows anyone to safely extend the functionality of MetaMask, creating new web3 end user experiences. -Get started by [installing Snaps](get-started/install-snaps.md). +Want to build your own Snaps? Get started by [installing MetaMask Flask](get-started/install-flask.md). :::note -- Snaps is pre-release software. -- To learn how to integrate your dapp with MetaMask, visit the - [MetaMask wallet developer documentation](../wallet). +To learn how to integrate your dapp with MetaMask, visit the +[MetaMask wallet developer documentation](../wallet). ::: ## What is a snap? @@ -85,6 +84,6 @@ Features include: ## Questions? -If you have questions about using Snaps or want to propose a new feature, you can interact with the -Snaps team and community on [GitHub discussions](https://github.com/MetaMask/snaps-monorepo/discussions) -and the Snaps channel on [Consensys Discord](https://discord.gg/consensys). +If you have questions about using MetaMask Snaps or want to propose a new feature, you can interact with the +MetaMask Snaps team and community on [GitHub discussions](https://github.com/MetaMask/snaps-monorepo/discussions) +and the Snaps Dev channel on [Consensys Discord](https://discord.gg/consensys). diff --git a/snaps/tutorials/gas-estimation.md b/snaps/tutorials/gas-estimation.md index 91f4da3cd1e..68e1a54abe2 100644 --- a/snaps/tutorials/gas-estimation.md +++ b/snaps/tutorials/gas-estimation.md @@ -7,11 +7,11 @@ sidebar_position: 1 This tutorial walks you through creating a snap that estimates gas fees. The snap uses the `fetch` API to request information from the internet, and displays custom -information in a confirmation dialog. +information in an alert dialog. ## Prerequisites -- [Snaps installed](../get-started/install-snaps.md) +- [MetaMask Flask installed](../get-started/install-flask.md) - A text editor (for example, [VS Code](https://code.visualstudio.com/)) - [Yarn](https://yarnpkg.com/) version 3 diff --git a/snaps/tutorials/transaction-insights.md b/snaps/tutorials/transaction-insights.md index a43d593fd6c..4170db9fe0f 100644 --- a/snaps/tutorials/transaction-insights.md +++ b/snaps/tutorials/transaction-insights.md @@ -11,7 +11,7 @@ The snap provides transaction insights in the MetaMask transaction window. ## Prerequisites -- [Snaps installed](../get-started/install-snaps.md) +- [MetaMask Flask installed](../get-started/install-flask.md) - An account on your MetaMask Flask instance with testnet ETH