From 506831e119a6252c8d3d51cf3ddd83b1673f492e Mon Sep 17 00:00:00 2001 From: Simonas Karuzas Date: Wed, 28 Aug 2024 00:12:38 +0300 Subject: [PATCH] feat: tx insights --- packages/snap/snap.manifest.json | 3 +- packages/snap/src/index.tsx | 205 +++++++++++++++++-------------- 2 files changed, 115 insertions(+), 93 deletions(-) diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json index 065923d..281320c 100644 --- 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 index 9ec3ec5..d06aff3 100644 --- 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 ( + {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 ( + + {position.atom?.label || position.triple?.label || ''} - ${(parseFloat(formatEther(position.shares)) + * parseFloat(formatEther(position.vault.currentSharePrice!)) + * usd).toFixed(2)} + + ) + }) : (No positions); + + const triples = acc.atom?.triples ? acc.atom?.triples?.map((triple) => { + return ( + + {triple.label} - ${(parseFloat(formatEther(triple.vault.totalShares)) + * parseFloat(formatEther(triple.vault.currentSharePrice!)) + * usd).toFixed(2)} + + ) + }) : (No triples); + + return ( + + {acc.image !== undefined && ( + Account + )} + + Account + + {acc.data?.account?.atomId !== undefined && + Atom + } + Active positions + + {positions} + + + Mentioned in + + {triples} + + + + ) + })} + ) +} + export const onHomePage: OnHomePageHandler = async () => { const accounts = await ethereum.request({ 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: ( - - {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 ( - - {position.atom?.label || position.triple?.label || ''} - ${(parseFloat(formatEther(position.shares)) - * parseFloat(formatEther(position.vault.currentSharePrice!)) - * usd).toFixed(2)} - - ) - }) : (No positions); - - const triples = acc.atom?.triples ? acc.atom?.triples?.map((triple) => { - return ( - - {triple.label} - ${(parseFloat(formatEther(triple.vault.totalShares)) - * parseFloat(formatEther(triple.vault.currentSharePrice!)) - * usd).toFixed(2)} - - ) - }) : (No triples); - - return ( - - {acc.image !== undefined && ( - Account - )} - - Account - - {acc.data?.account?.atomId !== undefined && - Atom - } - Active positions - - {positions} - - - Mentioned in - - {triples} - - - - ) - })} - - ), + content: await renderAccounts(i7nAccountsData), }; };