feat: New Apis for Snap

package.json

@@ -35,8 +35,6 @@
     "yaml@npm:^2.0.0": "^2.3.1"
   },
   "dependencies": {
-    "@metamask/snaps-cli": "^0.32.2",
-    "@metamask/snaps-ui": "^0.32.2",
     "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

@@ -31,16 +31,17 @@
     "serve": "mm-snap serve",
     "start": "mm-snap watch"
   },
+  "dependencies": {
+    "@metamask/snaps-sdk": "^3.1.1"
+  },
   "devDependencies": {
     "@lavamoat/allow-scripts": "^2.5.1",
     "@metamask/auto-changelog": "^3.4.4",
     "@metamask/eslint-config": "^11.1.0",
     "@metamask/eslint-config-jest": "^11.1.0",
     "@metamask/eslint-config-nodejs": "^11.1.0",
     "@metamask/eslint-config-typescript": "^11.1.0",
-    "@metamask/snaps-cli": "^0.32.2",
-    "@metamask/snaps-types": "^0.32.2",
-    "@metamask/snaps-ui": "^0.32.2",
+    "@metamask/snaps-cli": "^6.0.2",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "eslint": "^8.57.0",
@@ -55,16 +56,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": "l+waekI2X/Lm43VZ8VljivOlJgdOCu5ne9wNGWHICAc=",
     "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,20 @@
-import { OnTransactionHandler } from '@metamask/snaps-types';
-import { panel, heading, text } from '@metamask/snaps-ui';
+import {
+  OnHomePageHandler,
+  OnUpdateHandler,
+  OnTransactionHandler,
+  OnInstallHandler,
+  panel,
+  text,
+  heading,
+  divider,
+  image,
+} from '@metamask/snaps-sdk';
+import InsightsDisplayImage from '../images/insights-display.png';
+import ProcessExplanationImage from '../images/process-explanation.svg';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import mdEscape from 'markdown-escape';
 
+// Define types
 type AddressTag = {
   caipAddress: string;
   publicName: string;
@@ -216,13 +228,73 @@
       'No insights available for this contract. Interact at your own risk.',
     );
     insights.push(
-      'Do you know this contract? Submit insights on curate.kleros.io in Gnosis Chain and earn rewards!',
+      'Do you know this contract? Submit insights on [curate.kleros.io](https://curate.kleros.io) in Gnosis Chain and earn rewards!',
     );
   }
 
   return insights;
 };
 
+export const onInstall: OnInstallHandler = async () => {
+  await snap.request({
+    method: 'snap_dialog',
+    params: {
+      type: 'alert',
+      content: panel([
+        heading(
+          'Kleros Scout’s community curated contract insights secures your dApp browsing.',
+        ),
+        text(
+          '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(InsightsDisplayImage),
+      ]),
+    },
+  });
+};
+
+export const onHomePage: OnHomePageHandler = async () => {
+  return {
+    content: panel([
+      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 up to $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',
+    params: {
+      type: 'alert',
+      content: panel([
+        heading('Update successful'),
+        text('New features added in this version.'),
+        text(''),
+      ]),
+    },
+  });
+};
+
 export const onTransaction: OnTransactionHandler = async ({
   transactionOrigin,
   transaction,
@@ -237,7 +309,7 @@
     }
   }
   const numericChainId = parseInt(chainId.split(':')[1], 16);
   const caipAddress = `eip155:${numericChainId}:${transaction.to as string}`;
   console.log(JSON.stringify(transaction));
 
   const insights = await getInsights(caipAddress, domain);