feat: New Apis for Snap

package.json

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

packages/snap/package.json

@@ -38,9 +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": "^0.32.2",
-    "@metamask/snaps-types": "^0.32.2",
-    "@metamask/snaps-ui": "^0.32.2",
+    "@metamask/snaps-cli": "5.0.0",
+    "@metamask/snaps-sdk": "3.0.1",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "eslint": "^8.57.0",

packages/snap/src/index.ts

@@ -1,8 +1,12 @@
-import { OnTransactionHandler } from '@metamask/snaps-types';
-import { panel, heading, text } from '@metamask/snaps-ui';
+/* eslint-disable prettier/prettier */
+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";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import mdEscape from 'markdown-escape';
 
+// Define types
 type AddressTag = {
   caipAddress: string;
   publicName: string;
@@ -223,6 +227,58 @@ const getInsights = async (
   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(Install),
+      ]),
+    },
+  });
+};
+
+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 upto $15 per entry! [Head here to know more.](https://klerosscout.eth.limo)"),
+      image(Image),
+    ]),
+  };
+};
+
+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,