@ututrust/utu-metamask-snap 1.11.0 → 1.12.0

package/README.md

@@ -1,13 +1,16 @@
 # UTU Trust MetaMask Snap
 
-The main README.md is at the root of the utu-metamask-snap repository and is more comprehensive than this one.
-
 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](https://app.utu.io)
 
 Find the [repository here](https://gitlab.com/ututrust/utu-metamask-snap.git)
 
+## Prerequisites
+
+- [MetaMask](https://metamask.io/) browser extension installed
+- A valid UTU API access token — fetch this from your backend or via the [UTU auth flow](https://app.utu.io)
+
 ## Install
 
 ```bash
@@ -19,21 +22,35 @@ npm i @ututrust/utu-metamask-snap
 ### Quickstart React
 
 The snippet below shows how to install and authorize the UTU Snap from your web3 app.
-You need a valid UTU API access token before calling `authorizeUTUSnap` fetch it from your backend or via the UTU auth flow.
 
 ```jsx
-import React from 'react';
+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 {
-      const accessToken = await getUTUApiAccessToken(); // Replace with your logic for fetching the token
+      // 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: {
-          'npm:@ututrust/utu-metamask-snap': {},
+          [SNAP_ID]: {},
         },
       });
 
@@ -41,7 +58,7 @@ const Snap = () => {
       await window.ethereum.request({
         method: 'wallet_invokeSnap',
         params: {
-          snapId: 'npm:@ututrust/utu-metamask-snap',
+          snapId: SNAP_ID,
           request: {
             method: 'authorizeUTUSnap',
             params: { token: accessToken },
@@ -49,17 +66,20 @@ const Snap = () => {
         },
       });
 
-      console.log('UTU Snap installed and authorized!');
-    } catch (error) {
-      console.error('Error installing or authorizing the UTU Snap:', error);
+      setInstalled(true);
+    } catch (err) {
+      setError(err.message || 'Failed to install the UTU Snap. Please try again.');
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
     <div>
-      <button onClick={installSnap}>
-        Install UTU Trust Snap
+      <button onClick={installSnap} disabled={loading || installed}>
+        {loading ? 'Installing...' : installed ? 'Installed' : 'Install UTU Trust Snap'}
       </button>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
     </div>
   );
 };
@@ -67,4 +87,6 @@ const Snap = () => {
 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ututrust/utu-metamask-snap",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "UTU Trust MetaMask Snap",
   "homepage": "https://app.utu.io/dashboard?source=snap",
   "repository": {

package/snap.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Snap giving UTU Trust!",
   "proposedName": "UTU Trust",
   "repository": {
@@ -7,7 +7,7 @@
     "url": "https://gitlab.com/ututrust/utu-metamask-snap.git"
   },
   "source": {
-    "shasum": "zhszOBWrEkArDXMjSiYJqwkgbv3gJgt65J2JAFASzl0=",
+    "shasum": "Fq01AvnFikO6119+4a1jL/90SX21Eo8kEOmR4D6ddqI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",