feat: upgrading snap versions, getting to build and run it locally

package.json

@@ -35,8 +35,8 @@
     "yaml@npm:^2.0.0": "^2.3.1"
   },
   "dependencies": {
-    "@metamask/snaps-cli": "5.0.0",
-    "@metamask/snaps-sdk": "3.0.1",
+    "@metamask/snaps-cli": "6.2.0",
+    "@metamask/snaps-sdk": "5.0.0",
     "cross-env": "^7.0.3",
     "crypto": "^1.0.1",
     "gatsby-cli": "^5.13.3",

packages/site/src/utils/snap.ts

@@ -26,7 +26,7 @@ export const connectSnap = async (
   await window.ethereum.request({
     method: 'wallet_requestSnaps',
     params: {
-      [snapId]: params,
+      'local:http://localhost:8080': {},
     },
   });
 };

packages/snap/package.json

@@ -38,8 +38,8 @@
     "@metamask/eslint-config-jest": "^11.1.0",
     "@metamask/eslint-config-nodejs": "^11.1.0",
     "@metamask/eslint-config-typescript": "^11.1.0",
-    "@metamask/snaps-cli": "5.0.0",
-    "@metamask/snaps-sdk": "3.0.1",
+    "@metamask/snaps-cli": "6.2.0",
+    "@metamask/snaps-sdk": "5.0.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "eslint": "^8.57.0",
@@ -54,16 +54,16 @@
     "rimraf": "^3.0.2",
     "typescript": "^4.9.5"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=16.0.0"
   },
   "volta": {
     "node": "16.20.0",
     "yarn": "3.3.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   }
 }

packages/snap/snap.config.js

@@ -1,6 +1,26 @@
 module.exports = {
-  cliOptions: {
-    src: './src/index.ts',
+  bundler: 'webpack',
+  input: 'src/index.ts',
+  output: {
+    filename: 'bundle.js',
+    path: 'dist',
+  },
+  server: {
     port: 8080,
   },
+  manifest: {
+    path: 'snap.manifest.json',
+  },
+  features: {
+    images: true,
+  },
+  environment: {
+    SNAP_ENV: process.env.SNAP_ENV,
+    PUBLIC_KEY: process.env.PUBLIC_KEY,
+  },
+  polyfills: {
+    buffer: true,
+    crypto: true,
+    path: true,
+  },
 };

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/kleros/scout-snap.git"
   },
   "source": {
-    "shasum": "KCzo/QBHtC+GPdGeVJaIgLy+O5nucZ3jEY7PvNbBtH4=",
+    "shasum": "aj0vz+w7O0cF92gOg9rYL3xIcPP6r7a6GdyRUoEgRLE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
@@ -21,7 +21,9 @@
     "endowment:transaction-insight": {
       "allowTransactionOrigin": true
     },
-    "endowment:network-access": {}
+    "endowment:network-access": {},
+    "endowment:page-home": {},
+    "endowment:lifecycle-hooks": {}
   },
   "manifestVersion": "0.1"
 }

packages/snap/src/index.ts

@@ -1,8 +1,12 @@
-/* eslint-disable prettier/prettier */
-import type { OnTransactionHandler, OnInstallHandler, OnUpdateHandler, OnHomePageHandler  } from '@metamask/snaps-sdk';
+import type {
+  OnTransactionHandler,
+  OnInstallHandler,
+  OnUpdateHandler,
+  OnHomePageHandler,
+} from '@metamask/snaps-sdk';
 import { panel, heading, divider, text, image } from '@metamask/snaps-sdk';
-import Install from "\image.png";
-import Image from "\image1.png";
+import InsightsDisplayImage from '../images/insights-display.png';
+import ProcessExplanationImage from '../images/process-explanation.png';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import mdEscape from 'markdown-escape';
 
@@ -229,21 +233,29 @@ const getInsights = async (
 
 export const onInstall: OnInstallHandler = async () => {
   await snap.request({
-    method: "snap_dialog",
+    method: 'snap_dialog',
     params: {
-      type: "alert",
+      type: 'alert',
       content: panel([
-        heading("Kleros Scout’s community curated contract insights secures your dApp browsing."),
+        heading(
+          'Kleros Scout’s community curated contract insights secures your dApp browsing.',
+        ),
         text(
-          "Congrats on taking a crucial step towards safeguarding your wallet interactions!",
+          'Congrats on taking a crucial step towards safeguarding your wallet interactions!',
         ),
         divider(),
-        heading("How to use the Snap?"),
-        text("The Kleros Scout Snap provides 3 points of insight on every transaction:"),
-        text("**Project:** _Which project does the contract you’re interacting with belong to?_"),
-        text("**Contract Tag:** _What is the function or tag associated with the smart contract?_"),
-        text("**Domain:** _Which domain(s) is this contract interacted in?_"),
-        image(Install),
+        heading('How to use the Snap?'),
+        text(
+          'The Kleros Scout Snap provides 3 points of insight on every transaction:',
+        ),
+        text(
+          '**Project:** _Which project does the contract you’re interacting with belong to?_',
+        ),
+        text(
+          '**Contract Tag:** _What is the function or tag associated with the smart contract?_',
+        ),
+        text('**Domain:** _Which domain(s) is this contract interacted in?_'),
+        image(InsightsDisplayImage),
       ]),
     },
   });
@@ -252,28 +264,28 @@ export const onInstall: OnInstallHandler = async () => {
 export const onHomePage: OnHomePageHandler = async () => {
   return {
     content: panel([
-      heading("Kleros Scout’s community curated contract insights secures your dApp browsing."),
+      heading(
+        'Kleros Scout’s community curated contract insights secures your dApp browsing.',
+      ),
       divider(),
-      heading("How does it work?"),
-      text("Anyone can submit contract insights & earn upto $15 per entry! [Head here to know more.](https://klerosscout.eth.limo)"),
-      image(Image),
+      heading('How does it work?'),
+      text(
+        'Anyone can submit contract insights & earn upto $15 per entry! [Head here to know more.](https://klerosscout.eth.limo)',
+      ),
+      image(ProcessExplanationImage),
     ]),
   };
 };
 
 export const onUpdate: OnUpdateHandler = async () => {
   await snap.request({
-    method: "snap_dialog",
+    method: 'snap_dialog',
     params: {
-      type: "alert",
+      type: 'alert',
       content: panel([
-        heading("Update successful"),
-        text(
-          "New features added in this version:",
-        ),
-        text(
-          ""
-        ), 
+        heading('Update successful'),
+        text('New features added in this version:'),
+        text(''),
       ]),
     },
   });