COTI V2 Documentation
  • Welcome
  • Networks
    • Faucet
    • Contracts Addresses
    • Adding the COTI Network to Metamask
  • How COTI Works
    • Introduction
      • EVM Introduction
      • Conceptual Overview
      • Use Cases and Applications
      • COTI Architecture
    • Advanced Topics
      • Garbled Circuits
      • AES Keys
      • Precompiles
      • Whitepaper
      • COTI vs others
  • Build on COTI
    • Core Concepts
      • Account Onboarding Procedure
      • Private Data Types
      • Supported Operations on Private Data Types
    • Quickstart
    • Guides
      • Basic Private Smart Contract
      • Account Onboard
      • Sending a Transaction with Encrypted Inputs
      • Resolving a Transaction's Encrypted Outputs
      • Writing a Private Smart Contract
      • Dos and Don'ts
        • Proper Use of Types
        • No Constant/Immutable Secret Types
        • No Public Contract Variables
      • Best Practices
        • Careful Onboarding
        • Careful Decrypting
        • Don't loop over an array without an index
        • Check Overflow
    • Tools
      • TypeScript SDK
      • Ethers.js
      • Python SDK
      • Web3.py
      • Contracts Library
        • MPC Core
        • Data Privacy Framework
        • Tokens
          • Private ERC20
          • Private ERC721
        • Onboard
      • Hardhat
      • Remix Plugin
      • COTI MetaMask Snap
      • Developer Sandbox
  • Running a COTI Node
    • COTI Node Ecosystem Litepaper
  • COTI Bridge
    • Swap COTI V1 Funds to COTI V2
  • Support and Community
    • Glossary
    • Telegram
    • Discord
    • GitHub
    • X
    • YouTube
  • COTI Builders Program
Powered by GitBook
On this page
  • Getting Started
  • Integrating your dApp with the COTI MetaMask Snap

Was this helpful?

Edit on GitHub
  1. Build on COTI
  2. Tools

COTI MetaMask Snap

PreviousRemix PluginNextDeveloper Sandbox

Last updated 3 months ago

Was this helpful?

The COTI MetaMask Snap allows users to onboard their COTI accounts, add/decrypt on-chain tokens and NFTs , and interact with COTI dApps.

Getting Started

1. Install the Snap

As a user, you can start by installing the snap here:

Simply click the "Add to MetaMask" button on the upper right hand side of the screen and follow the prompts in your MetaMask wallet.

Once you click the "Connect" button, the prompt will go over the necessary permissions:

The snap will request the following permissions:

  1. Access the internet: allows the snap to interact with any website that calls it to make a request (you must still approve requests made to it).

  2. Display dialog windows in MetaMask: allows the snap to show MetaMask pop-ups with custom text, input fields, and buttons to approve or reject an action.

  3. Display a custom screen: allows the snap to display a custom home screen in MetaMask. When clicking on menu >> snaps >> COTI, the custom screen is shown.

  4. Store and manage its data on your device: allows the snap to store, update, and retrieve data securely with encryption. Only the COTI snap can access this information.

  5. Access the Ethereum provider: allows the snap to communicate with MetaMask directly, in order for it to read data from the blockchain and suggest messages and transactions.

  6. Use lifecycle hooks: allows the snap to use lifecycle hooks to run code at specific times during its lifecycle. Lifecycle hooks are actions that run when the snap is installed or updated, for example, when the snap is installed initially, it allows the confirmation screen to be shown.

  7. Allow websites to communicate directly with COTI: allows websites/dApps to send messages to the COTI snap and receive a response from the COTI snap. All interactions must be user-approved.

Once the snap is installed, the MetaMask site will offer to continue to COTI's companion dApp website to get started with the snap.

2. Onboard Account (Generate AES Key)

  1. Click on the "connect wallet" button, follow the prompts on MetaMask.

  2. Once your account is onboarded:

    1. Click the "Reveal AES Key" button to view your AES key.

    2. Click the "Delete" button to delete your AES key.

NOTE: Your AES key should be treated with the same sensitivity as your MetaMask private key. Users who can obtain this key will be able to decrypt sensitive data on the COTI network.

Integrating your dApp with the COTI MetaMask Snap

If you are building a dApp on the COTI network and want it to interact with the COTI MetaMask snap, follow these steps:

  1. Add @metamask/providers to your dApp.

yarn add @metamask/providers
  1. Now, create a hook called useInvokeKeyManager to invoke the COTI MetaMask Snap.

export type InvokeKeyManagerParams = {
  method: string;
  params?: Record<string, unknown>;
};

export const useInvokeKeyManager = (snapId) => {
  const request = useRequest();

  /**
   * Invoke the requested method.
   *
   * @param params - The invoke params.
   * @param params.method - The method name.
   * @param params.params - The method params.
   * @returns The response.
   */
  const invokeKeyManager = async ({ method, params }: InvokeKeyManagerParams) =>
    request({
      method: 'wallet_invokeSnap',
      params: {
        snapId,
        request: params ? { method, params } : { method },
      },
    });

  return invokeKeyManager;
};
  1. Optional - You can also create a hook that detects if COTI MetaMask Snap is installed or not.

export const useMetaMask = () => {
  const { provider, setInstalledSnap, installedSnap } = useMetaMaskContext();
  const request = useRequest();

    /**
   * Get the Snap informations from MetaMask.
   */
  const getSnap = async () => {
    const snaps = (await request({
      method: 'wallet_getSnaps',
    })) as GetSnapsResponse;

    setInstalledSnap(snaps[defaultSnapOrigin] ?? null);
  };

  useEffect(() => {
    const detect = async () => {
      if (provider) {
        await getSnap();
      }
    };

    detect().catch(console.error);
  }, [provider]);

  return { installedSnap, getSnap };
};
  1. Done! Now if you want to encrypt or decrypt some data from your dApp, you can use something like this:

To encrypt

  const handleEncryptClick = async () => {
    const result = await invokeSnap({
      method: 'encrypt',
      params: { value: 'hello' },
    });
    if (result) {
      alert(result);
    }
  };

To decrypt

  const handleDecryptClick = async () => {
    const result = await invokeSnap({
      method: 'decrypt',
      params: {
        value: JSON.stringify({
          ciphertext: new Uint8Array([
            230, 250, 246, 145, 200, 66, 40, 179, 108, 187, 128, 135, 216, 44,
            32, 48,
          ]),
          r: new Uint8Array([
            67, 194, 73, 74, 131, 182, 125, 200, 112, 210, 211, 145, 192, 148,
            187, 11,
          ]),
        }),
      },
    });
    console.log('result', result);
    if (result) {
      alert(result);
    }
  };

Once you are in the companion dApp site ():

Click on the "Onboard account" button. The prompt will indicate the contract you are interacting with. Click the "Onboard" button. Follow the prompts on MetaMask. NOTE: Because the data from the onboarding operation is encrypted and MetaMask does not know how to decrypt this data, the "Signature request" screen in MetaMask will show illegible characters. This is normal.

Create a function to detect if the user has Metamask to use it as a provider. You can guide yourself with .

Create a MetaMaskProvider in your dapp, which will let us know if COTI AES key manager is installed in the user's wallet. You can guide yourself with .

Create the useRequest hook to interact with Metamask. You can guide yourself with .

Check the for more information.

COTI Snap
snap.coti.io
this repo
this repo
this repo
Metamask documentation
Coti Snap running inside MetaMask
COTI snap installation screen