Add swap detection to transaction details page

apps/desktop/src/bun/index.ts

@@ -16,7 +16,7 @@ import {
 } from './lib/transactions'
 import { syncTransactionHistory } from './lib/sync'
 import { migrate } from 'drizzle-orm/bun-sqlite/migrator'
-import { eq } from 'drizzle-orm'
+import { eq, and } from 'drizzle-orm'
 import { db } from './lib/db'
 import { join } from 'path'
 import { getENV } from './lib/get-env'
@@ -475,7 +475,7 @@ const rpc = BrowserView.defineRPC<RPC>({
 					return []
 				}
 			},
-			fetchTransactionDetails: async ({ hash, chainid }) => {
+			fetchTransactionDetails: async ({ hash, chainid, address }) => {
 				const key = await Bun.secrets.get({
 					service: 'koins',
 					name: 'alchemy_key',
@@ -483,6 +483,42 @@ const rpc = BrowserView.defineRPC<RPC>({
 				if (!key) return null
 				try {
 					const details = await getTransactionDetails(hash, chainid)
+					if (!details) return null
+
+					if (address) {
+						const transfers = db
+							.select()
+							.from(txHistory)
+							.where(
+								and(
+									eq(txHistory.chainId, chainid),
+									eq(txHistory.hash, hash.toLowerCase()),
+								),
+							)
+							.all()
+
+						if (transfers.length > 0) {
+							const paired = await pairTransfers(
+								transfers,
+								address,
+							)
+							if (
+								paired.length > 0 &&
+								paired[0].pairedValue
+							) {
+								details.pairedValue =
+									paired[0].pairedValue
+								details.pairedSymbol =
+									paired[0].pairedSymbol
+								details.pairedDecimals =
+									paired[0].pairedDecimals
+								details.pairedContractAddress =
+									paired[0].pairedContractAddress
+								details.pairedLogo = paired[0].pairedLogo
+							}
+						}
+					}
+
 					return details
 				} catch (error) {
 					console.log(error)

apps/desktop/src/lib/rpc-schema.ts

@@ -79,6 +79,11 @@ export type TransactionDetails = {
 	type: string
 	nonce: number
 	input: string
+	pairedValue?: string
+	pairedSymbol?: string
+	pairedDecimals?: string
+	pairedContractAddress?: string
+	pairedLogo?: string
 }
 
 export type TokenBalanceResult = {
@@ -110,7 +115,7 @@ export type RPC = {
 			flushTxCache: { params: {}; response: void }
 			setAutoSync: { params: { address: string; chainid: string } | null; response: void }
 			fetchTokenBalances: { params: { address: string; chainid: string }; response: TokenBalanceResult[] }
-			fetchTransactionDetails: { params: { hash: string; chainid: string }; response: TransactionDetails | null }
+			fetchTransactionDetails: { params: { hash: string; chainid: string; address?: string }; response: TransactionDetails | null }
 			openExternal: { params: { url: string }; response: void }
 			moneroBinaryStatus: { params: {}; response: MoneroBinaryStatus }
 			moneroDownloadBinary: { params: {}; response: void }

apps/desktop/src/routes/tx/[chainid]/[hash].svelte

@@ -3,6 +3,7 @@
 		electrobun,
 		type TransactionDetails,
 	} from '$lib/electrobun.js'
+	import { evmWallet } from '$lib/states/evm-wallet.svelte.js'
 	import { networks } from '$lib/states/evm-wallet.svelte.js'
 	import { navigate, route } from 'sv-router/generated'
 	import { Button } from '$lib/components/ui/button/index.js'
@@ -29,7 +30,11 @@
 		loading = true
 		error = ''
 		electrobun.rpc?.request
-			.fetchTransactionDetails({ hash, chainid })
+			.fetchTransactionDetails({
+				hash,
+				chainid,
+				address: evmWallet.address || undefined,
+			})
 			.then((res) => {
 				details = res
 				loading = false
@@ -108,6 +113,21 @@
 						</p>
 						<p>{details.value}</p>
 					</div>
+					{#if details.pairedValue}
+						<div
+							class="rounded-md border border-yellow-500/30 bg-yellow-500/5 p-2">
+							<p class="mb-0.5 flex items-center gap-1 text-xs font-medium text-yellow-600">
+								Swap
+							</p>
+							<p class="font-mono text-xs">
+								{Number(details.value).toFixed(4)}
+								{network?.symbol ?? 'ETH'}
+								<span class="mx-1">→</span>
+								{Number(details.pairedValue).toFixed(4)}
+								{details.pairedSymbol}
+							</p>
+						</div>
+					{/if}
 					<div class="grid grid-cols-2 gap-2">
 						<div class="rounded-md bg-muted p-2">
 							<p class="text-muted-foreground mb-0.5">