Merge branch 'make-micah-poor-again' of https://github.com/DarkFloris…

…t/TheInterceptor into make-micah-poor-again

app/css/interceptor.css

@@ -756,6 +756,8 @@ svg.spinner > circle {
 .swap-grid {
 	grid-template-columns: auto auto;
 	display: grid;
+	place-content: center;
+	column-gap: 0.25em;
 }
 
 .swap-grid-1 {
@@ -1584,11 +1586,9 @@ header:has(form[role='search']) h1 {
 }
 
 .inline-card {
-	--bg-color: #444;					/* dark gray */
-	--button-color: #77738ccc;			/* light gray */
+	--bg-color: transparent;
+	--button-color: #77738ccc;
 	--button-color-hilite: white;
-	--status-backdrop-color: #303030ed; /* opaque black */
-	--status-success-color: #4fb64f;	/* vivid green */
 	--bg-inline-padding: 4px;
 	--bg-block-padding: 1px;
 	--image-size: 1em;
@@ -1597,22 +1597,23 @@ header:has(form[role='search']) h1 {
 	font: inherit;
 	display: inline-grid;
 	align-items: baseline;
-	grid-template-columns: [start] minmax(0, min-content) [copy] minmax(0, min-content) [end];
+	grid-template-columns: minmax(0, min-content) [start] minmax(0, min-content) [copy] minmax(0, min-content) [end] minmax(0, min-content);
 	grid-template-rows: [start] min-content [end];
 
 	margin-block: 1px;
 	padding-inline: var(--bg-inline-padding);
 	padding-block: var(--bg-block-padding);
-	background: var(--bg-color);
+	background: var(--bg-status-color, var(--bg-color));
 	border-radius: 0.15em;
 	min-width: calc(var(--image-size) + var(--min-text-width) + (var(--bg-inline-padding) * 2));
 
+	> data { min-width: var(--min-text-width) }
+
 	data {
 		line-height: 1em;
 		color: var(--text-color);
 		padding-inline: 0.25em;
 		text-align: center;
-		min-width: var(--min-text-width);
 		pointer-events: none;
 	}
 
@@ -1621,21 +1622,32 @@ header:has(form[role='search']) h1 {
 	[role=img] :only-child {
 		display: inline-block;
 		vertical-align: -0.15em;
+
+		&:is(img) {
+			aspect-ratio: 1;
+			max-width: var(--image-size);
+		}
 	}
 
-	> [role=img] { grid-area: start / start / end / copy }
+	> [role=img] {
+		grid-area: start / start / end / copy;
+		:focus-within > &, :hover > & { opacity: 0 }
+	}
 
-	> data { grid-area: start / copy / end / end }
+	> data {
+		grid-area: start / copy / end / end;
+		:focus-within > &, :hover > & { opacity: 0 }
+	}
 
 	> [role=menu] {
-		background: var(--bg-color);
+		background: var(--bg-status-color, var(--bg-color));
 		display: inline-grid;
 		grid-area: start / start / end / end;
 		grid-template-columns: minmax(0, max-content) max-content;
 		align-items: baseline;
 
 		opacity: 0;
-		&:has(:hover), &:focus-within { opacity: 1 }
+		:hover > &, :focus-within > & { opacity: 1 }
 
 		> button {
 			font: inherit;
@@ -1651,6 +1663,8 @@ header:has(form[role='search']) h1 {
 			cursor: pointer;
 			pointer-events: all;
 
+			&:is(button + *) { margin-left: 0.25em }
+
 			> :has(data) { overflow: hidden }
 
 			> :has(svg):has(span) {
@@ -1661,7 +1675,6 @@ header:has(form[role='search']) h1 {
 				border-radius: 3px;
 				padding: 0 0.25em;
 				vertical-align: text-bottom;
-				margin-left: 0.25em;
 
 				svg {
 					display: inline-block;
@@ -1674,40 +1687,45 @@ header:has(form[role='search']) h1 {
 					font-weight: bold;
 					font-size: 0.8em;
 					vertical-align: 0.05em;
-					padding-block: 0.125em;
 				}
 
 				&:is(:is(:hover,:focus) > *) {
 					color: black;
 					background: var(--button-color-hilite);
 					outline: none;
 
-					svg { display: none }
-					span { display: inline-block }
+					&:is([aria-label="Spell-out actions"] *) {
+						svg { display: none }
+						span { display: inline-block }
+					}
 				}
 			}
 		}
 	}
 
-	[role=status] {
-		grid-area: start / start / end / end;
-		background: var(--status-backdrop-color);
-		text-align: center;
-		border-radius: 0.15em;
-		position: relative;
-		margin-inline: calc(var(--bg-inline-padding) * -1 + 1px);
-		color: var(--status-success-color);
-
-		> svg {
-			display: inline-block;
-			vertical-align: -0.15em;
-		}
+	&:has([role=alert]) {
+		--bg-status-color: #c05858; /* dark red */
+		min-width: calc(var(--image-size) + var(--min-text-width) + (var(--bg-inline-padding) * 2) + 4ch);
 
-		> span {
-			display: inline-block;
-			font-size: 0.8em;
-			margin-left: 0.25em;
-			font-weight: 500;
-		}
 	}
+
+	[role=alert] {
+		color: #e6cb1f; /* bright yellow */
+		cursor: pointer;
+
+		&:has(+ *) { margin-right: 0.25em }
+		&:is(* + [role=alert]) { margin-left: 0.25em }
+	}
+}
+
+.tooltip {
+	background: #222222;
+	color: #ffffff;
+	padding: 0.3125rem 0.6875rem;
+	border: 0 none;
+	border-radius: 4px;
+	font-size: 0.8125rem;
+	white-space: nowrap;
+	pointer-events: none;
+	margin: 0;
 }

app/ts/background/background-startup.ts

@@ -13,7 +13,7 @@ import { refreshSimulation } from './popupMessageHandlers.js'
 import { Semaphore } from '../utils/semaphore.js'
 import { RawInterceptedRequest, checkAndThrowRuntimeLastError } from '../utils/requests.js'
 import { ICON_NOT_ACTIVE } from '../utils/constants.js'
-import { handleUnexpectedError } from '../utils/errors.js'
+import { handleUnexpectedError, isNewBlockAbort } from '../utils/errors.js'
 import { updateContentScriptInjectionStrategyManifestV2 } from '../utils/contentScriptsUpdating.js'
 import { checkIfInterceptorShouldSleep } from './sleeping.js'
 import { addWindowTabListeners } from '../components/ui-utils.js'
@@ -171,6 +171,7 @@ async function newBlockAttemptCallback(blockheader: EthereumBlockHeader, ethereu
 			return await sendSubscriptionMessagesForNewBlock(blockheader.number, ethereumClientService, undefined, websiteTabConnections)
 		}
 	} catch(error) {
+		if (error instanceof Error && isNewBlockAbort(error)) return
 		await handleUnexpectedError(error)
 	}
 }

app/ts/background/storageVariables.ts

@@ -11,7 +11,7 @@ import { PendingAccessRequests, PendingTransactionOrSignableMessage } from '../t
 import { RpcEntries, RpcNetwork } from '../types/rpc.js'
 import { replaceElementInReadonlyArray } from '../utils/typed-arrays.js'
 import { UnexpectedErrorOccured } from '../types/interceptor-messages.js'
-import { namehash } from 'ethers'
+import { isValidName, namehash } from 'ethers'
 import { bytesToUnsigned } from '../utils/bigint.js'
 import { keccak_256 } from '@noble/hashes/sha3'
 import { modifyObject } from '../utils/typescript.js'
@@ -136,7 +136,7 @@ export const removeTabState = async(tabId: number) => await removeTabStateFromSt
 
 const getTabAllStateKeys = async () => {
 	const allStorage = Object.keys(await browser.storage.local.get())
-	return allStorage.filter((entry) => entry.match(/^tabState_[0-9]+/) !== null) 
+	return allStorage.filter((entry) => entry.match(/^tabState_[0-9]+/) !== null)
 }
 
 export const clearTabStates = async () => await browser.storage.local.remove(await getTabAllStateKeys())
@@ -274,6 +274,7 @@ export const getEnsNodeHashes = async () => (await browserStorageLocalGet('ensNa
 
 const ensNodeHashesSemaphore = new Semaphore(1)
 export async function addEnsNodeHash(name: string) {
+	if (!isValidName(name)) return
 	const entry = { name, nameHash: BigInt(namehash(name)) }
 	await ensNodeHashesSemaphore.execute(async () => {
 		const oldEntries = await getEnsNodeHashes() || []
@@ -295,7 +296,7 @@ export async function addEnsLabelHash(label: string) {
 }
 
 const transactionStackSemaphore = new Semaphore(1)
-export const getTransactionStack = async () => (await browserStorageLocalGet('transactionStack'))?.transactionStack ?? { transactions: [], signedMessages: [] } 
+export const getTransactionStack = async () => (await browserStorageLocalGet('transactionStack'))?.transactionStack ?? { transactions: [], signedMessages: [] }
 export async function updateTransactionStack(updateFunc: (prevStack: TransactionStack) => TransactionStack): Promise<TransactionStack> {
 	return await transactionStackSemaphore.execute(async () => {
 		const prevStack = await getTransactionStack()

app/ts/background/windows/confirmTransaction.ts

@@ -112,7 +112,7 @@ export async function resolvePendingTransactionOrMessage(simulator: Simulator, w
 		case 'SignableMessage': {
 			await updateTransactionStack((prevStack: TransactionStack) => ({...prevStack, signedMessages: [...prevStack.signedMessages, pendingTransactionOrMessage.signedMessageTransaction] }))
 			updateSimulationState(simulator.ethereum, simulator.tokenPriceService, pendingTransactionOrMessage.activeAddress, true)
-			return reply({ type: 'result', result: (await simulatePersonalSign(pendingTransactionOrMessage.originalRequestParameters, pendingTransactionOrMessage.signedMessageTransaction.fakeSignedFor)).signature })
+			return reply({ type: 'result', result: simulatePersonalSign(pendingTransactionOrMessage.originalRequestParameters, pendingTransactionOrMessage.signedMessageTransaction.fakeSignedFor).signature })
 		}
 		case 'Transaction': {
 			const signedTransaction = mockSignTransaction(pendingTransactionOrMessage.transactionToSimulate.transaction)

app/ts/background/windows/personalSign.ts

@@ -10,6 +10,7 @@ import { SignedMessageTransaction } from '../../types/visualizer-types.js'
 import { RpcNetwork } from '../../types/rpc.js'
 import { getChainName } from '../../utils/constants.js'
 import { parseInputData } from '../../simulation/simulator.js'
+import { isValidMessage } from '../../simulation/services/SimulationModeEthereumClientService.js'
 
 async function addMetadataToOpenSeaOrder(ethereumClientService: EthereumClientService, requestAbortController: AbortController | undefined, openSeaOrder: OpenSeaOrderMessage) {
 	return {
@@ -45,6 +46,7 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 			quarantineReasons: [],
 			stringifiedMessage: stringifyJSONWithBigInts(originalParams.originalRequestParameters.params[0], 4),
 			rawMessage: stringifyJSONWithBigInts(originalParams.originalRequestParameters.params[0]),
+			isValidMessage: isValidMessage(signedMessageTransaction.originalRequestParameters, originalParams.originalRequestParameters.params[1])
 		}
 	}
 
@@ -60,6 +62,7 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 			quarantineReasons: [],
 			stringifiedMessage: stringifyJSONWithBigInts(originalParams.originalRequestParameters.params[0], 4),
 			rawMessage: originalParams.originalRequestParameters.params[0],
+			isValidMessage: isValidMessage(signedMessageTransaction.originalRequestParameters, originalParams.originalRequestParameters.params[1])
 		}
 	}
 	const namedParams = { param: originalParams.originalRequestParameters.params[1], account: originalParams.originalRequestParameters.params[0] }
@@ -82,6 +85,7 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 				...chainid === undefined ? { quarantine: false, quarantineReasons: [] } : await getQuarrantineCodes(chainid, account, activeAddressWithMetadata, undefined),
 				stringifiedMessage: stringifyJSONWithBigInts(namedParams.param, 4),
 				rawMessage: stringifyJSONWithBigInts(namedParams.param),
+				isValidMessage: isValidMessage(signedMessageTransaction.originalRequestParameters, account.address)
 			}
 		} catch(e: unknown) {
 			console.error(e)
@@ -108,6 +112,7 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 				...await getQuarrantineCodes(BigInt(parsed.domain.chainId), account, activeAddressWithMetadata, owner),
 				rawMessage: stringifyJSONWithBigInts(parsed, 4),
 				stringifiedMessage: stringifyJSONWithBigInts(parsed, 4),
+				isValidMessage: isValidMessage(signedMessageTransaction.originalRequestParameters, account.address)
 			}
 		}
 		case 'PermitSingle': {
@@ -127,6 +132,7 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 				...await getQuarrantineCodes(parsed.domain.chainId, account, activeAddressWithMetadata, undefined),
 				stringifiedMessage: stringifyJSONWithBigInts(parsed, 4),
 				rawMessage: stringifyJSONWithBigInts(parsed),
+				isValidMessage: isValidMessage(signedMessageTransaction.originalRequestParameters, parsed.message.spender)
 			}
 		}
 		case 'SafeTx': {
@@ -151,7 +157,8 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 				stringifiedMessage: stringifyJSONWithBigInts(parsed, 4),
 				rawMessage: stringifyJSONWithBigInts(parsed),
 				parsedMessageData,
-				parsedMessageDataAddressBookEntries: await Promise.all(addressesInEventsAndInputData.map((address) => identifyAddress(ethereumClientService, requestAbortController, address)))
+				parsedMessageDataAddressBookEntries: await Promise.all(addressesInEventsAndInputData.map((address) => identifyAddress(ethereumClientService, requestAbortController, address))),
+				isValidMessage: isValidMessage(signedMessageTransaction.originalRequestParameters, account.address)
 			}
 		}
 		case 'OrderComponents': return {
@@ -164,6 +171,7 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 			...await getQuarrantineCodes(parsed.domain.chainId, account, activeAddressWithMetadata, undefined),
 			stringifiedMessage: stringifyJSONWithBigInts(parsed, 4),
 			rawMessage: stringifyJSONWithBigInts(parsed),
+			isValidMessage: isValidMessage(signedMessageTransaction.originalRequestParameters, account.address)
 		}
 		default: assertNever(parsed)
 	}

app/ts/components/pages/ConfirmTransaction.tsx

@@ -25,10 +25,11 @@ import { ErrorComponent } from '../subcomponents/Error.js'
 import { WebsiteSocket, checkAndThrowRuntimeLastError } from '../../utils/requests.js'
 import { Link } from '../subcomponents/link.js'
 import { NetworkErrors } from '../App.js'
-import { SignatureCard, SignatureHeader, identifySignature, isPossibleToSignMessage } from './PersonalSign.js'
+import { InvalidMessage, SignatureCard, SignatureHeader, identifySignature, isPossibleToSignMessage } from './PersonalSign.js'
 import { VisualizedPersonalSignRequest } from '../../types/personal-message-definitions.js'
 import { EditEnsNamedHashCallBack } from '../subcomponents/ens.js'
 import { EditEnsLabelHash } from './EditEnsLabelHash.js'
+import { useComputed } from '@preact/signals'
 
 type UnderTransactionsParams = {
 	pendingTransactionsAndSignableMessages: PendingTransactionOrSignableMessage[]
@@ -470,14 +471,15 @@ export function ConfirmTransaction() {
 		await sendPopupMessageToBackgroundPage({ method: 'popup_refreshConfirmTransactionDialogSimulation' })
 	}
 
-	function isConfirmDisabled() {
-		if (forceSend) return false
+	const isConfirmDisabled = useComputed(() => {
 		if (currentPendingTransactionOrSignableMessage === undefined) return true
 		if (currentPendingTransactionOrSignableMessage.transactionOrMessageCreationStatus !== 'Simulated') return true
 		if (currentPendingTransactionOrSignableMessage.type !== 'Transaction') {
+			if (currentPendingTransactionOrSignableMessage.visualizedPersonalSignRequest.isValidMessage !== true) return true
 			return !isPossibleToSignMessage(currentPendingTransactionOrSignableMessage.visualizedPersonalSignRequest, currentPendingTransactionOrSignableMessage.activeAddress) && !forceSend
 			&& currentPendingTransactionOrSignableMessage.visualizedPersonalSignRequest.rpcNetwork.httpsRpc === undefined
 		}
+		if (forceSend) return false
 		if (currentPendingTransactionOrSignableMessage.simulationResults === undefined) return false
 		if (currentPendingTransactionOrSignableMessage.simulationResults.statusCode !== 'success' ) return false
 		if (currentPendingTransactionOrSignableMessage.approvalStatus.status === 'WaitingForSigner') return true
@@ -486,7 +488,7 @@ export function ConfirmTransaction() {
 		const success = lastTx.statusCode === 'success'
 		const noQuarantines = lastTx.quarantine === false
 		return !success || !noQuarantines
-	}
+	})
 
 	function renameAddressCallBack(entry: AddressBookEntry) {
 		setModalState({
@@ -555,6 +557,7 @@ export function ConfirmTransaction() {
 						<NetworkErrors rpcConnectionStatus = { rpcConnectionStatus }/>
 						{ currentPendingTransactionOrSignableMessage === undefined ? <></> : <>
 							<WebsiteErrors website = { currentPendingTransactionOrSignableMessage.website } websiteSocket = { currentPendingTransactionOrSignableMessage.uniqueRequestIdentifier.requestSocket } simulationMode = { currentPendingTransactionOrSignableMessage.simulationMode }/>
+							<InvalidMessage pendingTransactionOrSignableMessage = { currentPendingTransactionOrSignableMessage }/>
 						</> }
 						<CenterToPageTextSpinner text = { getLoadingText(currentPendingTransactionOrSignableMessage)  }/>
 					</div>
@@ -587,6 +590,7 @@ export function ConfirmTransaction() {
 						<UnexpectedError close = { clearUnexpectedError } unexpectedError = { unexpectedError }/>
 						<NetworkErrors rpcConnectionStatus = { rpcConnectionStatus }/>
 						<WebsiteErrors website = { currentPendingTransactionOrSignableMessage.website } websiteSocket = { currentPendingTransactionOrSignableMessage.uniqueRequestIdentifier.requestSocket } simulationMode = { currentPendingTransactionOrSignableMessage.simulationMode }/>
+						<InvalidMessage pendingTransactionOrSignableMessage = { currentPendingTransactionOrSignableMessage }/>
 					</div>
 					<div class = 'popup-contents'>
 						<div style = 'padding: 10px'>
@@ -635,7 +639,7 @@ export function ConfirmTransaction() {
 								currentPendingTransactionOrSignableMessage = { currentPendingTransactionOrSignableMessage }
 								reject = { reject }
 								approve = { approve }
-								confirmDisabled = { isConfirmDisabled() }
+								confirmDisabled = { isConfirmDisabled.value }
 							/>
 						</nav>
 					</div>