MetaMask Snaps Bogota Guide

[ritave]

MetaMask Snaps Bogota Guide

We have some features specifically for Devcon 2022. Here’s how you can get started using them.

Installing Flask

1. Download MetaMask Flask Bogota Build
2. Unzip the build into a folder
3. Allow using unpacked Chrome extensions
   1. Go to the Extensions page by entering chrome://extensions in a new tab.
      • Alternatively, click on the Extensions menu puzzle button and select Manage Extensions at the bottom of the menu.
      • Or, click the Chrome menu, hover over More Tools, then select Extensions.
   2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
4. Click the Load unpacked button and select the unziped folder
   
5. Set up MetaMask Flask as usual
6. Keep in mind: You can't have normal MetaMask and MetaMask Flask installed at the same time.

New features only in this build

Keyrings

Full specification

Bogota support:

• MultiChain provider
• Transparent dapp <=> snap communication
• User connection approval UI
• Events support
• MetaMask UI integration

Keyrings allow you integrate custom blockchains and protocols in a way that's transparent both to the user and the dapp.

Example

Manifest

Extend the manifest with support for Keyrings. The eip155 namespace means that the chain is EVM-compatible. The eip155:5 chain is the Görli testnet.

{
  "initialPermissions": {
    "snap_confirm": {},
    "snap_manageState": {},
    "endowment:keyring": {
      "namespaces": {
        "eip155": {
          "methods": [
            "eth_accounts",
            "eth_sendTransaction",
            "gnosis_watchSafe",
            "gnosis_createSafe"
          ],
          "chains": {
            "id": "eip155:5",
            "name": "Ethereum (Goerli)"
          }
        }
      }
    }
  }
}

Dapp

Connect to the wallet using the new MultiChainProvider. It seamlessly matches the dapp to a snap that implements the required behavior.

import { MultiChainProvider } from "@metamask/multichain-provider";

const provider = new MultiChainProvider();
const { approval } = await provider.connect({
  requiredNamespaces: {
    eip155: {
      chains: ["eip155:5"],
      methods: [
        "eth_accounts",
        "eth_sendTransaction",
        "gnosis_watchSafe",
        "gnosis_createSafe",
      ],
    },
  },
});
const session = await approval();

const accounts = await provider.request({ method: "eth_accounts" });

Snap

Export a new object that implements a connection to the Keyring API.

exports.keyring = {
  handleRequest: async ({ request }) => {
    switch (request.method) {
      case "eth_accounts":
        return getAccounts();
      case "gnosis_watchSafe":
        return watchSafe(request.params[0]);
      /* ... */
    }
  },
};

TX Insights

Full specification

Bogota support

• Transaction insights for contract interactions
• Insights for account to account transfers

Transaction insights allows you to add a new tab to the MetaMask pre-transaction screen that shows additional information about the user's transaction.

Example

Manifest

Extend your manifest to notify MetaMask that your snap supports insights.

{
  "initialPermissions": {
    "endowment:transaction-insight": {}
  }
}

Snap

Expose a handler that will be called when the user views your snap's tab in the pre-transaction confirmation window. Return a key-value insights object which will be displayed in your tab.

exports.onTransaction = async ({ transaction }) => {
  return {
    insights: { score: 42, "Is contract verified on Etherscan?": "Yes" },
  };
};

[livingrockrises]

Hello, I am getting below error from 'wallet_getSnaps'

A handler for SnapController:getPermittedSnaps has not been registered

Can you please advise

[ritave]

In the meantime, you can use the basic template snap repositories. They avoid the problem.

Javascript
Typescript

[FrederikBolding]

Correct build link: https://output.circle-artifacts.com/output/job/a8d828e6-1d55-452e-ae02-d9c0b23c3140/artifacts/0/builds-flask/metamask-flask-chrome-10.20.0-flask.0.zip

[aalimsahin]

[livingrockrises]

it now works for me, thank you!

[franz101]

works here too

[tomarsachin2271]

Using snaps, can we change the account displayed on metamask UI?

[ritave]

No

[tomarsachin2271]

So "snap_confirm" is the only way to show eg., BLS public key or any snap specific data to the user? Is something like this going to be added in the future which will allow us to change metamask UI components also?

[ritave]

Yes! We're researching a declarative UI, similar to Slack's Block Kit UI, where your snap can return a JSON object to show a ui to a user.

It's not implemented yet, but here's an API I was thinking about.

[tomarsachin2271]

Also how can we get access to Metamask EOA account private key if possible?? I know we can request metamask to sign messages but if we are able to request permission to access the private key stored in meatmask storage, we'd be able to sign messages without showing any popup to the user.

I came across this snap https://github.com/MetaMask/snap-examples/blob/main/examples/bls-signer/index.js

where its requesting the "snap_getAppKey" method to get metamask EOA private key but this method is not working in latest build.

[ritave]

You can request the private keys for any coin type. Ethereum's coin type is 60, so that would be snap_getBip44Entropy_60 permission

[tomarsachin2271]

How to let snap code know that metamask EOA has been changed?
I'm trying

wallet.on("accountsChanged", (accounts) => {
    console.log(accounts);
})

But it doesn't seem to be working. Any solution to this?

[ritave]

You probably need to allow the snap to get access to eth_accounts using eth_requestAccounts - https://docs.metamask.io/guide/rpc-api.html#restricted-methods

If that doesn't work you could probably just poll every few seconds using eth_accounts

[tomarsachin2271]

Its working. Thanks

[gnardini]

I'm building a smart contract wallet so very interested in the keyrings feature.

Is there any public example you can point me to? I'm reading the docs and have a vague understanding on how to use it but I generally learn a lot faster by seeing working examples.

Thanks a lot!

[ritave]

Sadly we didn’t have time make examples. I’ll be happy to walk you through tomorrow. @ritave on Discord

[gnardini]

Thanks! I'll ping you tomorrow with some specific questions I'm stuck with 😅

[gnardini]

Hey, can't seem to find you on Discord :( my username is Gonza#2410 would you mind DMing me? :)

[tomarsachin2271]

I've configured this permission to get network access endowment:network-access but somehow i'm not able to do rpc calls on goerli network...
is there anything else i need to do to enable network access?
i'm using normal ethers provider to read values from smart contract

[Montoya]

Hi, sorry I missed this before, did you manage to solve this @tomarsachin2271?

[alanorwick]

Hey! I'm seeingError: Keyring does not expose getAccounts on this build when using the multichain-provider. Is there something I'm missing?

[alanorwick]

nvm found that I wasn't adding the getAccounts method like so:

class Keyring {
  async getAccounts() {
    return ['eip155:1:foo'];
  }
  async handleRequest({request}) {
    switch(request.method){
      case 'eth_accounts':
        return this.getAccounts();
    }
  }
}
module.exports.keyring = new Keyring();

[ritave]

Hey @alanorwick!

You need to expose keyring.getAccounts() method as well. It's used during connection flow to ask users which accounts to allow the dApp to access.

Read more about the method in the specification.

Here's an example.

const CAIP_2_CHAIN_ID = 'eip155:1';
async function getAccounts() {
  /*
   There's currently a chicken and egg problem, where MetaMask requires at least 1 account
   to show before allowing a dApp to connect, but there's no way to create accounts using
   the UI. We solve this problem by returning a dummy account for now.
   */
  const state = await getState() ?? { accounts: [`${CAIP_2_CHAIN_ID}:0x9b2055d370f73ec7d8a03e965129118dc8f5bf83`] };
  return state.accounts;
}

function ethToCaip10(ethAddress: string) {
  return `${CAIP_2_CHAIN_ID}:${ethAddress}`;
}

async function sign(account: string, message: string) {
  /* ... */
}

function handleRequest({ request }) {
  switch (request.method) {
    case 'eth_sign':
       const [account, message] = request.params;
       const accounts = await getAccounts();
       if (!accounts.includes(ethToCaip10(account)) {
         throw new Error("Invalid account");
       }
       return sign(account, message);
  }
}

exports.keyring = {
  getAccounts,
  handleRequest
};

[alanorwick]

Got it all working! Thank you for the insight. Any advice on how to get that signing part done that you described above? Will that require snap_getBip44Entropy? Apologies if I'm getting too ahead of development here 😄

[ritave]

Generally in the above example you would generate the accounts using snap_getBip44Entropy and @metamask/key-tree instead of hardcoding. And then since account generation should yield the same results using the same entropy, you would also use the same entropy to calculate signatures as well.

To implement sign you would use snap_getBip44Entropy, use @metamask/key-tree to generate private keys for the requested account, and then use @ethereumjs/utils sign methods to calculate the signature.