UTU Trust MetaMask Snap

UTU has built a Snap (a MetaMask plugin) that lets you get UTU trust signal inside your MetaMask wallet right at the moment when you're about to confirm a transaction or sign a message.

More information about UTU

Find the repository here

Prerequisites

• MetaMask browser extension installed
• A valid UTU API access token — fetch this from your backend or via the UTU auth flow

Install

npm i @ututrust/utu-metamask-snap

Example

Quickstart React

The snippet below shows how to install and authorize the UTU Snap from your web3 app.

import React, { useState } from 'react';

const SNAP_ID = 'npm:@ututrust/utu-metamask-snap';

const Snap = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [installed, setInstalled] = useState(false);

  const installSnap = async () => {
    setError(null);
    setLoading(true);

    try {
      // Ensure MetaMask is available
      if (!window.ethereum) {
        throw new Error('MetaMask is not installed. Please install it and try again.');
      }

      // Fetch a UTU API access token from your backend or auth flow
      const accessToken = await getUTUApiAccessToken();

      // Request to install the UTU Snap
      await window.ethereum.request({
        method: 'wallet_requestSnaps',
        params: {
          [SNAP_ID]: {},
        },
      });

      // Authorize the UTU Snap with the access token
      await window.ethereum.request({
        method: 'wallet_invokeSnap',
        params: {
          snapId: SNAP_ID,
          request: {
            method: 'authorizeUTUSnap',
            params: { token: accessToken },
          },
        },
      });

      setInstalled(true);
    } catch (err) {
      setError(err.message || 'Failed to install the UTU Snap. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={installSnap} disabled={loading || installed}>
        {loading ? 'Installing...' : installed ? 'Installed' : 'Install UTU Trust Snap'}
      </button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
};

export default Snap;

Note: getUTUApiAccessToken() is a placeholder. Replace it with a call to your own backend endpoint that returns a UTU API token. Never fetch the token by calling the UTU API directly from frontend code — doing so would require exposing API secrets in the browser, which can be stolen by anyone inspecting your app.

Once authorized, the snap will automatically show UTU trust insights whenever the user confirms a transaction or signs a message in MetaMask.