Add embeddable receipts

Author: gorried

apps/explorer/src/components/Address.tsx

@@ -3,17 +3,26 @@ import type { Address as AddressType } from 'ox'
 import { HexFormatter } from '#lib/formatting'
 
 export function Address(props: Address.Props) {
-	const { address, chars, self, className } = props
+	const { address, chars, self, className, framed = false } = props
 	return (
 		<>
-			<Link
-				to="/account/$address"
-				params={{ address }}
-				title={address}
-				className={className}
-			>
-				{HexFormatter.shortenHex(address, chars)}
-			</Link>
+			{framed ? (
+				<span
+					title={address}
+					className={className}
+				>
+					{HexFormatter.shortenHex(address, chars)}
+				</span>
+			) : (
+				<Link
+					to="/account/$address"
+					params={{ address }}
+					title={address}
+					className={className}
+				>
+					{HexFormatter.shortenHex(address, chars)}
+				</Link>
+			)}
 			{self && <span className="text-tertiary"> (self)</span>}
 		</>
 	)
@@ -25,5 +34,6 @@ export namespace Address {
 		chars?: number
 		self?: boolean
 		className?: string
+		framed?: boolean
 	}
 }

apps/explorer/src/components/EventDescription.tsx

@@ -8,7 +8,7 @@ import { Address } from './Address.tsx'
 import { Amount } from './Receipt/Amount.tsx'
 
 export function EventDescription(props: EventDescription.Props) {
-	const { event, seenAs, className } = props
+	const { event, seenAs, className, framed = false } = props
 
 	return (
 		<div
@@ -55,6 +55,7 @@ export function EventDescription(props: EventDescription.Props) {
 								address={part.value}
 								className="text-accent items-end active:translate-y-[.5px] whitespace-nowrap"
 								self={seenAs ? isAddressEqual(part.value, seenAs) : false}
+								framed={framed}
 							/>
 						)
 					case 'hex':
@@ -98,5 +99,6 @@ export namespace EventDescription {
 		event: KnownEvent
 		seenAs?: AddressType.Address
 		className?: string | undefined
+		framed?: boolean
 	}
 }

apps/explorer/src/components/Receipt/Receipt.tsx

@@ -1,6 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import { type Address, Hex } from 'ox'
 import { useState } from 'react'
+import ExternalLink from '~icons/lucide/external-link'
 import { EventDescription } from '#components/EventDescription'
 import { DateFormatter, HexFormatter, PriceFormatter } from '#lib/formatting'
 import { useCopy } from '#lib/hooks'
@@ -16,6 +17,7 @@ export function Receipt(props: Receipt.Props) {
 		events = [],
 		fee,
 		total,
+		framed = false,
 	} = props
 	const [hashExpanded, setHashExpanded] = useState(false)
 	const { copy, notifying } = useCopy()
@@ -29,24 +31,39 @@ export function Receipt(props: Receipt.Props) {
 				<div className="flex flex-col gap-[8px] font-mono text-[13px] leading-[16px] flex-1">
 					<div className="flex justify-between items-end">
 						<span className="text-tertiary capitalize">Block</span>
-						<Link
-							to={'/block/$id'}
-							params={{ id: Hex.fromNumber(blockNumber) }}
-							className="text-accent text-right before:content-['#'] active:translate-y-[.5px]"
-						>
-							{String(blockNumber)}
-						</Link>
+						{framed ? (
+							<span className="text-accent text-right before:content-['#']">
+								{String(blockNumber)}
+							</span>
+						) : (
+							<Link
+								to={'/block/$id'}
+								params={{ id: Hex.fromNumber(blockNumber) }}
+								className="text-accent text-right before:content-['#'] active:translate-y-[.5px]"
+							>
+								{String(blockNumber)}
+							</Link>
+						)}
 					</div>
 					<div className="flex justify-between items-end">
 						<span className="text-tertiary capitalize">Sender</span>
-						<Link
-							to={'/account/$address'}
-							params={{ address: sender }}
-							className="text-accent text-right active:translate-y-[.5px]"
-							title={sender}
-						>
-							{HexFormatter.shortenHex(sender)}
-						</Link>
+						{framed ? (
+							<span
+								className="text-accent text-right"
+								title={sender}
+							>
+								{HexFormatter.shortenHex(sender)}
+							</span>
+						) : (
+							<Link
+								to={'/account/$address'}
+								params={{ address: sender }}
+								className="text-accent text-right active:translate-y-[.5px]"
+								title={sender}
+							>
+								{HexFormatter.shortenHex(sender)}
+							</Link>
+						)}
 					</div>
 					<div className="flex justify-between items-start">
 						<div className="relative">
@@ -125,7 +142,7 @@ export function Receipt(props: Receipt.Props) {
 										<div className="flex flex-row justify-between items-start gap-[10px]">
 											<div className="flex flex-row items-start gap-[4px] grow min-w-0">
 												<div className="flex items-center text-tertiary before:content-[counter(event)_'.'] shrink-0 leading-[24px]"></div>
-												<EventDescription event={event} />
+												<EventDescription event={event} framed={framed} />
 											</div>
 											<div className="flex items-center text-right shrink-0 leading-[24px]">
 												{totalAmountBigInt > 0n && (
@@ -186,6 +203,23 @@ export function Receipt(props: Receipt.Props) {
 					</div>
 				</>
 			)}
+			{framed && (
+				<>
+					<div className="border-t border-dashed border-base-border" />
+					<div className="flex justify-center px-[20px] py-[16px]">
+						<Link
+							to={'/tx/$hash'}
+							params={{ hash }}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-accent text-[13px] font-mono active:translate-y-[.5px] flex items-center gap-[6px]"
+						>
+							View in Explorer
+							<ExternalLink className="w-[14px] h-[14px]" />
+						</Link>
+					</div>
+				</>
+			)}
 		</div>
 	)
 }
@@ -199,5 +233,6 @@ export namespace Receipt {
 		events?: KnownEvent[]
 		fee?: number
 		total?: number
+		framed?: boolean
 	}
 }