feat: New Apis for Snap

.nvmrc

@@ -1 +1 @@
-v16
+v20

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",
@@ -67,7 +65,7 @@
     "node": ">=16.0.0"
   },
   "volta": {
-    "node": "16.20.0",
+    "node": "20.11.0",
     "yarn": "3.3.1"
   }
 }

packages/site/package.json

@@ -68,7 +68,7 @@
     "node": ">=16.0.0"
   },
   "volta": {
-    "node": "16.20.0",
+    "node": "20.11.0",
     "yarn": "3.3.1"
   }
 }

packages/snap/README.md

@@ -4,7 +4,7 @@ This Snap pulls contract metadata from Kleros's decentralized token curated regi
 
 ## Publication to NPM
 
-1. Bump the version in `package.json`
+1. Bump the version in `package.json` and `snap.manifest.json`
 1. Run a clean build: `yarn clean && yarn build`
 1. Commit the change to git: `git add -u ; git commit -m "chore: release"`
 1. Tag this version: `version=v$(cat package.json | jq -r .version) && git tag -m $version $version`

packages/snap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/scout-snap",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "A Metamask Snap that retrieves contract metadata from the Kleros Curate registries",
   "repository": {
     "type": "git",
@@ -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",
+    "node": "20.11.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

@@ -1,13 +1,13 @@
 {
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "A Snap that retrieves contract metadata from the Kleros Curate registries.",
   "proposedName": "Kleros Scout",
   "repository": {
     "type": "git",
     "url": "https://github.com/kleros/scout-snap.git"
   },
   "source": {
-    "shasum": "KCzo/QBHtC+GPdGeVJaIgLy+O5nucZ3jEY7PvNbBtH4=",
+    "shasum": "i0jrmOrh1H7O2ukHsfVRsFwZycxUkMx2w5eKSTbxFwQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
@@ -21,7 +21,10 @@
     "endowment:transaction-insight": {
       "allowTransactionOrigin": true
     },
-    "endowment:network-access": {}
+    "endowment:network-access": {},
+    "endowment:page-home": {},
+    "endowment:lifecycle-hooks": {},
+    "snap_dialog": {}
   },
   "manifestVersion": "0.1"
 }

packages/snap/src/index.ts

@@ -1,8 +1,19 @@
-import { OnTransactionHandler } from '@metamask/snaps-types';
-import { panel, heading, text } from '@metamask/snaps-ui';
+import {
+  OnHomePageHandler,
+  OnTransactionHandler,
+  OnInstallHandler,
+  panel,
+  text,
+  heading,
+  divider,
+  image
+} from '@metamask/snaps-sdk';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import mdEscape from 'markdown-escape';
+import InsightsDisplayImage from '../images/insights-display.svg';
+import ProcessExplanationImage from '../images/process-explanation.svg';
 
+// Define types
 type AddressTag = {
   caipAddress: string;
   publicName: string;
@@ -185,6 +196,8 @@
 
   // If insight search has no result in a category, the result is omitted.
   const insights: string[] = [];
+  let hasCDNInsight = false;
+
   if (result.addressTag) {
     // key2 is projectName, which is optional. No project name === "", which is falsy.
     const projectNameLabel = result.addressTag.projectName
@@ -202,6 +215,7 @@
   if (result.contractDomain) {
     const domainLabel = `**Domain:** _${domain}_ is **verified** for this contract`;
     insights.push(domainLabel);
+    hasCDNInsight = true;
   }
 
   if (result.token) {
@@ -215,14 +229,73 @@
     insights.push(
       'No insights available for this contract. Interact at your own risk.',
     );
+  }
+
+  const excludedDomains = [
+    'etherscan.io', 'bscscan.com', 'gnosisscan.io', 'polygonscan.com',
+    'mempool.space', 'explorer.solana.com', 'basescan.org', 'arbiscan.io',
+    'moonscan.io', 'lineascan.build', 'optimistic.etherscan.io', 'ftmscan.com',
+    'moonriver.moonscan.io', 'snowscan.xyz', 'cronoscan.com', 'bttcscan.com',
+    'zkevm.polygonscan.com', 'wemixscan.com', 'scrollscan.com', 'era.zksync.network', 'celoscan.io'
+  ];
+
+  if (!excludedDomains.includes(domain) && !hasCDNInsight) {
+    const cdnPathURL = `https://app.klerosscout.eth.limo/#/?registry=CDN&network=1&network=100&network=137&network=56&network=42161&network=10&network=43114&network=534352&network=42220&network=8453&network=250&network=324&status=Registered&status=RegistrationRequested&status=ClearingRequested&status=Absent&disputed=true&disputed=false&page=1&orderDirection=desc&&additem=CDN&caip10Address=${caipAddress}&domain=${domain}`;
+
     insights.push(
-      'Do you know this contract? Submit insights on curate.kleros.io in Gnosis Chain and earn rewards!',
+      `Is this contract linked to this domain? If so, submit the info at [Scout App](${cdnPathURL}) to verify it for all users!`,
     );
   }
 
   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:** _Whether this contract is known to be used on this domain?_'),
+        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 onTransaction: OnTransactionHandler = async ({
   transactionOrigin,
   transaction,