add placeholder picture, first scaffold for a basic interface structure

packages/snap/snap.manifest.json

@@ -1,17 +1,17 @@
 {
-  "version": "0.1",
+  "version": "0.1.0",
   "description": "Contract Traffic snap helps you to visually destinguinsh between real and phishing smart contracts",
   "proposedName": "Contract Traffic",
   "repository": {
     "type": "git",
     "url": "https://github.com/AlexeyKrasnoperov/contract-traffic-snap.git"
   },
   "source": {
-    "shasum": "y/rQ6UXIxnFH8Pu52B9yyNmD2i6MMLhmAHAvPHvsdQY=",
+    "shasum": "cuLcWLsXQAy2MQnsByVyL9Rwn54ZxuzO5DZSY8MLCiQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
-        "packageName": "snap",
+        "packageName": "contract-traffic-snap",
         "registry": "https://registry.npmjs.org/"
       }
     }
@@ -20,8 +20,13 @@
     "endowment:rpc": {
       "dapps": true
     },
+    "endowment:ethereum-provider": {},
     "snap_dialog": {},
-    "snap_manageState": {}
+    "snap_manageState": {},
+    "endowment:transaction-insight": {
+      "allowTransactionOrigin": true
+    },
+    "endowment:network-access": {}
   },
   "manifestVersion": "0.1"
 }

packages/snap/src/index.tsx

@@ -2,12 +2,19 @@ import { rpcErrors } from '@metamask/rpc-errors';
 import type {
   OnRpcRequestHandler,
   OnUserInputHandler,
+  OnTransactionHandler
 } from '@metamask/snaps-sdk';
-import { UserInputEventType, DialogType } from '@metamask/snaps-sdk';
+import { SnapMethods } from '@metamask/snaps-sdk';
+import { UserInputEventType, DialogType, image } from '@metamask/snaps-sdk';
 import { assert } from '@metamask/utils';
 
 import { Counter } from './components';
 import { getCurrent, increment } from './utils';
+import { panel, text, button } from '@metamask/snaps-sdk';
+
+import { Image } from '@metamask/snaps-sdk/jsx';
+
+import svgIcon from "./vitalik-traffic.jpeg";
 
 /**
  * Handle incoming JSON-RPC requests from the dapp, sent through the
@@ -25,13 +32,39 @@ import { getCurrent, increment } from './utils';
 export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
   switch (request.method) {
     case 'hello': {
-      const count = 1;
+      const contractAddress = "0x1195Cf65f83B3A5768F3C496D3A05AD6412c64B7";
+
+      const blocksInHour = 1800;
+      const currentBlock = Number(await ethereum.request({
+        method: "eth_blockNumber",
+      }) as number);
+      const apiURL = `https://explorer.linea.build/api?module=account&action=txlist&address=${contractAddress}&startblock=${currentBlock - blocksInHour}&endblock=${currentBlock}&sort=desc&offset=100&page=0`
+
+      const response = await fetch(apiURL);
+      const data = await response.json();
+      const interactionsCount = data["result"].length;
 
       return await snap.request({
         method: 'snap_dialog',
         params: {
           type: DialogType.Alert,
-          content: <Counter count={count} />,
+          content: panel([
+            image(svgIcon),
+            text(`Current block: **${currentBlock}**`),
+            text(`Interactions: **${interactionsCount}**`),
+            text(`Upvotes: ...`),
+            text(`Downvotes: ...`),
+            button({
+              value: "I'm happy",
+              name: "interactive-button",
+            }),
+            button({
+              value: "I got scammed",
+              name: "interactive-button",
+              variant: "secondary",
+            }),
+
+          ]),
         },
       });
     }
@@ -45,6 +78,27 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
   }
 };
 
+export const onTransaction: OnTransactionHandler = async ({
+  transactionOrigin,
+  chainId,
+  transaction,
+}) => {
+  const count = 1;
+
+  const interactionsCount = 100;
+
+  return await snap.request({
+    method: 'snap_dialog',
+    params: {
+      type: "alert",
+      content: panel([
+        text(`Hello, **${transactionOrigin}**!`),
+        text(`Interactions in the last 24h: **${interactionsCount}**`)
+      ]),
+    },
+  });
+}
+
 // /**
 //  * Handle incoming user events coming from the Snap interface. This handler
 //  * handles one event:

yarn.lock

@@ -8262,6 +8262,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"contract-traffic-snap@workspace:packages/snap":
+  version: 0.0.0-use.local
+  resolution: "contract-traffic-snap@workspace:packages/snap"
+  dependencies:
+    "@jest/globals": ^29.5.0
+    "@lavamoat/allow-scripts": ^3.0.4
+    "@metamask/auto-changelog": ^3.4.4
+    "@metamask/eslint-config": ^12.1.0
+    "@metamask/eslint-config-jest": ^12.1.0
+    "@metamask/eslint-config-nodejs": ^12.1.0
+    "@metamask/eslint-config-typescript": ^12.1.0
+    "@metamask/rpc-errors": ^6.2.1
+    "@metamask/snaps-cli": latest
+    "@metamask/snaps-sdk": ^6.0.0
+    "@metamask/utils": ^8.3.0
+    "@swc/core": 1.3.78
+    "@swc/jest": ^0.2.26
+    "@typescript-eslint/eslint-plugin": ^5.42.1
+    "@typescript-eslint/parser": ^5.42.1
+    deepmerge: ^4.2.2
+    depcheck: ^1.4.7
+    eslint: ^8.27.0
+    eslint-config-prettier: ^8.5.0
+    eslint-plugin-import: ^2.26.0
+    eslint-plugin-jest: ^27.1.5
+    eslint-plugin-jsdoc: ^39.6.2
+    eslint-plugin-n: ^15.7.0
+    eslint-plugin-prettier: ^4.2.1
+    eslint-plugin-promise: ^6.1.1
+    jest: ^29.0.2
+    prettier: ^2.7.1
+    prettier-plugin-packagejson: ^2.2.11
+    ts-node: ^10.9.1
+    typescript: ~4.8.4
+  languageName: unknown
+  linkType: soft
+
 "convert-hrtime@npm:^3.0.0":
   version: 3.0.0
   resolution: "convert-hrtime@npm:3.0.0"
@@ -18395,43 +18432,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"snap@workspace:packages/snap":
-  version: 0.0.0-use.local
-  resolution: "snap@workspace:packages/snap"
-  dependencies:
-    "@jest/globals": ^29.5.0
-    "@lavamoat/allow-scripts": ^3.0.4
-    "@metamask/auto-changelog": ^3.4.4
-    "@metamask/eslint-config": ^12.1.0
-    "@metamask/eslint-config-jest": ^12.1.0
-    "@metamask/eslint-config-nodejs": ^12.1.0
-    "@metamask/eslint-config-typescript": ^12.1.0
-    "@metamask/rpc-errors": ^6.2.1
-    "@metamask/snaps-cli": latest
-    "@metamask/snaps-sdk": ^6.0.0
-    "@metamask/utils": ^8.3.0
-    "@swc/core": 1.3.78
-    "@swc/jest": ^0.2.26
-    "@typescript-eslint/eslint-plugin": ^5.42.1
-    "@typescript-eslint/parser": ^5.42.1
-    deepmerge: ^4.2.2
-    depcheck: ^1.4.7
-    eslint: ^8.27.0
-    eslint-config-prettier: ^8.5.0
-    eslint-plugin-import: ^2.26.0
-    eslint-plugin-jest: ^27.1.5
-    eslint-plugin-jsdoc: ^39.6.2
-    eslint-plugin-n: ^15.7.0
-    eslint-plugin-prettier: ^4.2.1
-    eslint-plugin-promise: ^6.1.1
-    jest: ^29.0.2
-    prettier: ^2.7.1
-    prettier-plugin-packagejson: ^2.2.11
-    ts-node: ^10.9.1
-    typescript: ~4.8.4
-  languageName: unknown
-  linkType: soft
-
 "socket.io-adapter@npm:~2.5.2":
   version: 2.5.4
   resolution: "socket.io-adapter@npm:2.5.4"