feat: tx insights

0xIntuition · Aug 27, 2024 · 506831e · 506831e
1 parent ceef717
commit 506831e
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 93 deletions.
diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/template-snap-monorepo.git"
   },
   "source": {
-    "shasum": "EOM3VvNv+QzNYYjzoramuyEI42BikmedFaf/lvTCNQI=",
+    "shasum": "le+CQVCkNeveEUwmWH0IQ8fMcqJDfW4005D/8Bq8/Eo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
@@ -20,6 +20,7 @@
   "initialPermissions": {
     "snap_dialog": {},
     "endowment:page-home": {},
+    "endowment:transaction-insight": {},
     "endowment:ethereum-provider": {},
     "endowment:network-access": {},
     "endowment:rpc": {

diff --git a/packages/snap/src/index.tsx b/packages/snap/src/index.tsx
@@ -1,4 +1,4 @@
-import { OnRpcRequestHandler, getImageComponent, getImageData } from '@metamask/snaps-sdk';
+import { OnRpcRequestHandler, getImageComponent, getImageData, OnTransactionHandler } from '@metamask/snaps-sdk';
 import { Box, Text, Bold, Heading, Image, Link } from '@metamask/snaps-sdk/jsx';
 import type { OnHomePageHandler } from "@metamask/snaps-sdk";
 import { AtomResponse, AccountResponse } from "./types";
@@ -53,6 +53,107 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
   }
 };
 
+
+const getAccountData = async (acc: string) => {
+
+  const result: {
+    account: string,
+    data?: AccountResponse,
+    atom?: AtomResponse
+    image?: string
+  } = {
+    account: acc,
+  }
+
+  try {
+    const res = await fetch("https://i7n.app/acc/" + acc + "/json")
+
+    if (res.ok) {
+      result.data = await res.json() as AccountResponse;
+      if (result.data?.account?.atomId) {
+        try {
+          const atomRes = await fetch("https://i7n.app/a/" + result.data.account.atomId + "/json")
+          if (atomRes.ok) {
+            result.atom = await atomRes.json() as AtomResponse;
+            result.image = (await getImageComponent("https://i7n.app/a/" + result.data.account.atomId + "/png", {
+              width: 200,
+              height: 100,
+            })).value;
+
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }
+
+    }
+  } catch (e) {
+    console.error(e);
+  }
+
+  return result;
+}
+
+export const renderAccounts = async (i7nAccountsData: {
+  account: string;
+  data?: AccountResponse;
+  atom?: AtomResponse;
+  image?: string;
+}[]) => {
+  return (<Box>
+    {i7nAccountsData.map((acc) => {
+      const usd = acc.data?.prices?.usd ? acc.data?.prices?.usd : 1;
+
+      const positions = acc.data?.positions ? acc.data?.positions?.map((position) => {
+        return (
+          <Box>
+            <Text>{position.atom?.label || position.triple?.label || ''} - ${(parseFloat(formatEther(position.shares))
+              * parseFloat(formatEther(position.vault.currentSharePrice!))
+              * usd).toFixed(2)}</Text>
+          </Box>
+        )
+      }) : (<Text>No positions</Text>);
+
+      const triples = acc.atom?.triples ? acc.atom?.triples?.map((triple) => {
+        return (
+          <Box>
+            <Text>{triple.label} - ${(parseFloat(formatEther(triple.vault.totalShares))
+              * parseFloat(formatEther(triple.vault.currentSharePrice!))
+              * usd).toFixed(2)}</Text>
+          </Box>
+        )
+      }) : (<Text>No triples</Text>);
+
+      return (
+        <Box>
+          {acc.image !== undefined && (
+            <Image
+              src={acc.image}
+              alt="Account"
+            />
+          )}
+          <Link href={"https://i7n.app/acc/" + acc.account}>
+            Account
+          </Link>
+          {acc.data?.account?.atomId !== undefined && <Link href={"https://i7n.app/a/" + acc.data.account.atomId}>
+            Atom
+          </Link>}
+          <Heading>Active positions</Heading>
+          <Box>
+            {positions}
+          </Box>
+
+          <Heading>Mentioned in</Heading>
+          <Box>
+            {triples}
+          </Box>
+
+        </Box>
+      )
+    })}
+  </Box>)
+}
+
 export const onHomePage: OnHomePageHandler = async () => {
   const accounts = await ethereum.request<string[]>({
     method: 'eth_requestAccounts',
@@ -71,101 +172,21 @@ export const onHomePage: OnHomePageHandler = async () => {
     };
   }
 
-  const i7nAccounts = accounts.map(async (acc: any) => {
-
-    const result: {
-      account: string,
-      data?: AccountResponse,
-      atom?: AtomResponse
-      image?: string
-    } = {
-      account: acc,
-    }
+  const i7nAccounts = accounts.map(acc => getAccountData(acc || ''));
+  const i7nAccountsData = await Promise.all(i7nAccounts);
 
-    try {
-      const res = await fetch("https://i7n.app/acc/" + acc + "/json")
-
-      if (res.ok) {
-        result.data = await res.json() as AccountResponse;
-        if (result.data?.account?.atomId) {
-          try {
-            const atomRes = await fetch("https://i7n.app/a/" + result.data.account.atomId + "/json")
-            if (atomRes.ok) {
-              result.atom = await atomRes.json() as AtomResponse;
-              result.image = (await getImageComponent("https://i7n.app/a/" + result.data.account.atomId + "/png", {
-                width: 200,
-                height: 100,
-              })).value;
-
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        }
+  return {
+    content: await renderAccounts(i7nAccountsData)
+  };
+};
 
-      }
-    } catch (e) {
-      console.error(e);
-    }
 
-    return result;
-  });
+export const onTransaction: OnTransactionHandler = async ({
+  transaction,
+}) => {
+  const i7nAccounts = [transaction.to].map(acc => getAccountData(acc || ''));
   const i7nAccountsData = await Promise.all(i7nAccounts);
-
   return {
-    content: (
-      <Box>
-        {i7nAccountsData.map((acc) => {
-          const usd = acc.data?.prices?.usd ? acc.data?.prices?.usd : 1;
-
-          const positions = acc.data?.positions ? acc.data?.positions?.map((position) => {
-            return (
-              <Box>
-                <Text>{position.atom?.label || position.triple?.label || ''} - ${(parseFloat(formatEther(position.shares))
-                  * parseFloat(formatEther(position.vault.currentSharePrice!))
-                  * usd).toFixed(2)}</Text>
-              </Box>
-            )
-          }) : (<Text>No positions</Text>);
-
-          const triples = acc.atom?.triples ? acc.atom?.triples?.map((triple) => {
-            return (
-              <Box>
-                <Text>{triple.label} - ${(parseFloat(formatEther(triple.vault.totalShares))
-                  * parseFloat(formatEther(triple.vault.currentSharePrice!))
-                  * usd).toFixed(2)}</Text>
-              </Box>
-            )
-          }) : (<Text>No triples</Text>);
-
-          return (
-            <Box>
-              {acc.image !== undefined && (
-                <Image
-                  src={acc.image}
-                  alt="Account"
-                />
-              )}
-              <Link href={"https://i7n.app/acc/" + acc.account}>
-                Account
-              </Link>
-              {acc.data?.account?.atomId !== undefined && <Link href={"https://i7n.app/a/" + acc.data.account.atomId}>
-                Atom
-              </Link>}
-              <Heading>Active positions</Heading>
-              <Box>
-                {positions}
-              </Box>
-
-              <Heading>Mentioned in</Heading>
-              <Box>
-                {triples}
-              </Box>
-
-            </Box>
-          )
-        })}
-      </Box>
-    ),
+    content: await renderAccounts(i7nAccountsData),
   };
 };