use the new input component in all the appropriate places

DarkFlorist · Jul 29, 2024 · 086bf76 · 086bf76
1 parent 2b1c63b
commit 086bf76
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 65 deletions.
diff --git a/app/css/interceptor.css b/app/css/interceptor.css
@@ -558,33 +558,28 @@ svg.spinner > circle {
 	grid-auto-columns: auto;
 	grid-auto-flow: column;
 	width: 100%;
-	margin: 0 0.2em;
 }
 
 .log-table {
 	display: grid;
 	grid-template-columns: max-content auto auto auto auto;
 	width: 100%;
-	margin: 0 0.2em;
 }
 
 .log-table-4 {
 	display: grid;
 	grid-template-columns: max-content auto auto auto;
 	width: 100%;
-	margin: 0 0.2em;
 }
 .log-table-3 {
 	display: grid;
 	grid-template-columns: max-content auto auto;
 	width: 100%;
-	margin: 0 0.2em;
 }
 .log-table-1 {
 	display: grid;
 	grid-template-columns: auto;
 	width: 100%;
-	margin: 0 0.2em;
 }
 
 .log-cell {

diff --git a/app/ts/background/windows/personalSign.ts b/app/ts/background/windows/personalSign.ts
@@ -43,7 +43,8 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 			account: await identifyAddress(ethereumClientService, requestAbortController, originalParams.originalRequestParameters.params[1]),
 			quarantine: false,
 			quarantineReasons: [],
-			rawMessage: stringifyJSONWithBigInts(originalParams.originalRequestParameters.params[0], 4),
+			stringifiedMessage: stringifyJSONWithBigInts(originalParams.originalRequestParameters.params[0], 4),
+			rawMessage: stringifyJSONWithBigInts(originalParams.originalRequestParameters.params[0]),
 		}
 	}
 
@@ -57,6 +58,7 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 			account: await identifyAddress(ethereumClientService, requestAbortController, originalParams.originalRequestParameters.params[1]),
 			quarantine: false,
 			quarantineReasons: [],
+			stringifiedMessage: stringifyJSONWithBigInts(originalParams.originalRequestParameters.params[0], 4),
 			rawMessage: originalParams.originalRequestParameters.params[0],
 		}
 	}
@@ -78,7 +80,8 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 				message,
 				account,
 				...chainid === undefined ? { quarantine: false, quarantineReasons: [] } : await getQuarrantineCodes(chainid, account, activeAddressWithMetadata, undefined),
-				rawMessage: stringifyJSONWithBigInts(namedParams.param, 4),
+				stringifiedMessage: stringifyJSONWithBigInts(namedParams.param, 4),
+				rawMessage: stringifyJSONWithBigInts(namedParams.param),
 			}
 		} catch(e: unknown) {
 			console.error(e)
@@ -104,6 +107,7 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 				verifyingContract: token,
 				...await getQuarrantineCodes(BigInt(parsed.domain.chainId), account, activeAddressWithMetadata, owner),
 				rawMessage: stringifyJSONWithBigInts(parsed, 4),
+				stringifiedMessage: stringifyJSONWithBigInts(parsed, 4),
 			}
 		}
 		case 'PermitSingle': {
@@ -121,7 +125,8 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 				spender: await identifyAddress(ethereumClientService, requestAbortController, parsed.message.spender),
 				verifyingContract: await identifyAddress(ethereumClientService, requestAbortController, parsed.domain.verifyingContract),
 				...await getQuarrantineCodes(parsed.domain.chainId, account, activeAddressWithMetadata, undefined),
-				rawMessage: stringifyJSONWithBigInts(parsed, 4),
+				stringifiedMessage: stringifyJSONWithBigInts(parsed, 4),
+				rawMessage: stringifyJSONWithBigInts(parsed),
 			}
 		}
 		case 'SafeTx': {
@@ -143,7 +148,8 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 				...addresses,
 				quarantine: false,
 				quarantineReasons: [],
-				rawMessage: stringifyJSONWithBigInts(parsed, 4),
+				stringifiedMessage: stringifyJSONWithBigInts(parsed, 4),
+				rawMessage: stringifyJSONWithBigInts(parsed),
 				parsedMessageData,
 				parsedMessageDataAddressBookEntries: await Promise.all(addressesInEventsAndInputData.map((address) => identifyAddress(ethereumClientService, requestAbortController, address)))
 			}
@@ -156,7 +162,8 @@ export async function craftPersonalSignPopupMessage(ethereumClientService: Ether
 			message: await addMetadataToOpenSeaOrder(ethereumClientService, requestAbortController, parsed.message),
 			account,
 			...await getQuarrantineCodes(parsed.domain.chainId, account, activeAddressWithMetadata, undefined),
-			rawMessage: stringifyJSONWithBigInts(parsed, 4),
+			stringifiedMessage: stringifyJSONWithBigInts(parsed, 4),
+			rawMessage: stringifyJSONWithBigInts(parsed),
 		}
 		default: assertNever(parsed)
 	}

diff --git a/app/ts/components/pages/PersonalSign.tsx b/app/ts/components/pages/PersonalSign.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'preact/hooks'
-import { dataStringWith0xStart, isHexEncodedNumber, stringToUint8Array } from '../../utils/bigint.js'
+import { isHexEncodedNumber, stringToUint8Array } from '../../utils/bigint.js'
 import { RenameAddressCallBack } from '../../types/user-interface-types.js'
 import { MOCK_PRIVATE_KEYS_ADDRESS, getChainName } from '../../utils/constants.js'
 import { TransactionOrMessageIdentifier } from '../../types/interceptor-messages.js'
@@ -15,11 +15,12 @@ import { AddressBookEntry } from '../../types/addressBookTypes.js'
 import { EnrichedEIP712, EnrichedEIP712Message, TypeEnrichedEIP712MessageRecord } from '../../types/eip721.js'
 import { TransactionCreated } from '../simulationExplaining/SimulationSummary.js'
 import { EnrichedSolidityTypeComponent } from '../subcomponents/solidityType.js'
-import { ParsedInputData, QuarantineReasons } from '../simulationExplaining/Transactions.js'
+import { QuarantineReasons } from '../simulationExplaining/Transactions.js'
 import { GnosisSafeVisualizer } from '../simulationExplaining/customExplainers/GnosisSafeVisualizer.js'
 import { EditEnsNamedHashCallBack } from '../subcomponents/ens.js'
-import { ViewSelector as Viewer } from '../subcomponents/ViewSelector.js'
+import { ViewSelector, ViewSelector as Viewer } from '../subcomponents/ViewSelector.js'
 import { XMarkIcon } from '../subcomponents/icons.js'
+import { TransactionInput } from '../subcomponents/ParsedInputData.js'
 
 type SignatureCardParams = {
 	visualizedPersonalSignRequest: VisualizedPersonalSignRequest
@@ -287,7 +288,6 @@ type ExtraDetailsCardParams = {
 	renameAddressCallBack: RenameAddressCallBack
 }
 
-
 type GnosisSafeExtraDetailsParams = {
 	visualizedPersonalSignRequestSafeTx: VisualizedPersonalSignRequestSafeTx
 	renameAddressCallBack: RenameAddressCallBack
@@ -333,11 +333,7 @@ function GnosisSafeExtraDetails({ visualizedPersonalSignRequestSafeTx, renameAdd
 			<CellElement text = { <Ether amount = { visualizedPersonalSignRequestSafeTx.message.message.value } rpcNetwork = { visualizedPersonalSignRequestSafeTx.rpcNetwork } fontSize = 'normal'/>  }/>
 		</span>
 		<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>Gnosis Safe meta transaction input: </p>
-		<div class = 'textbox'>
-			<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>{ dataStringWith0xStart(visualizedPersonalSignRequestSafeTx.message.message.data) }</p>
-		</div>
-		<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>Parsed Gnosis Safe meta transaction: </p>
-		{ visualizedPersonalSignRequestSafeTx.parsedMessageData?.type !== 'Parsed' ? <p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>No ABI available</p> : <ParsedInputData inputData = { visualizedPersonalSignRequestSafeTx.parsedMessageData } addressMetaData = { visualizedPersonalSignRequestSafeTx.parsedMessageDataAddressBookEntries } renameAddressCallBack = { renameAddressCallBack }/> }
+		<TransactionInput parsedInputData = { visualizedPersonalSignRequestSafeTx.parsedMessageData } to = { visualizedPersonalSignRequestSafeTx.to } input = { visualizedPersonalSignRequestSafeTx.parsedMessageData.input } addressMetaData = { visualizedPersonalSignRequestSafeTx.parsedMessageDataAddressBookEntries } renameAddressCallBack = { renameAddressCallBack }/>
 	</>
 }
 
@@ -390,15 +386,17 @@ function RawMessage({ visualizedPersonalSignRequest }: ExtraDetailsCardParams) {
 		</header>
 		{ !showSummary
 			? <></>
-			: <>
-				<div class = 'card-content'>
-					<div class = 'container' style = 'margin-bottom: 10px;'>
-						<div class = 'textbox'>
-							<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>{ visualizedPersonalSignRequest.rawMessage }</p>
-						</div>
-					</div>
-				</div>
-			</>
+			: <ViewSelector id = 'raw_message'>
+				<ViewSelector.List>
+					<ViewSelector.View title = 'View Parsed' value = 'parsed'> 
+						<pre> { decodeMessage(visualizedPersonalSignRequest.stringifiedMessage) }</pre>
+					</ViewSelector.View>
+					<ViewSelector.View title = 'View Raw' value = 'raw'>
+						<pre>{ visualizedPersonalSignRequest.rawMessage }</pre>
+					</ViewSelector.View>
+				</ViewSelector.List>
+				<ViewSelector.Triggers />
+			</ViewSelector>
 		}
 	</div>
 }
@@ -429,7 +427,7 @@ export function SignatureCard(params: SignatureCardParams) {
 			</div>
 			<QuarantineReasons quarantineReasons = { params.visualizedPersonalSignRequest.quarantineReasons }/>
 			<ExtraDetails { ...params }/>
-			<RawMessage { ...params }/>
+			{ params.visualizedPersonalSignRequest.type === 'NotParsed' ? <></> : <RawMessage { ...params }/> }
 
 			<Signer
 				signer = { params.visualizedPersonalSignRequest.activeAddress }

diff --git a/app/ts/components/simulationExplaining/SimulationSummary.tsx b/app/ts/components/simulationExplaining/SimulationSummary.tsx
@@ -3,10 +3,10 @@ import { RenameAddressCallBack, RpcConnectionStatus } from '../../types/user-int
 import { Erc721TokenApprovalChange, SimulatedAndVisualizedTransaction, SimulationAndVisualisationResults, ERC20TokenApprovalChange, Erc20TokenBalanceChange, TransactionWithAddressBookEntries, NamedTokenId } from '../../types/visualizer-types.js'
 import { BigAddress, SmallAddress, WebsiteOriginText } from '../subcomponents/address.js'
 import { Ether, EtherAmount, EtherSymbol, TokenWithAmount, TokenAmount, TokenPrice, TokenSymbol, TokenOrEth } from '../subcomponents/coins.js'
-import { NonTokenLogAnalysis, ParsedInputData, TokenLogAnalysis } from './Transactions.js'
+import { NonTokenLogAnalysis, TokenLogAnalysis } from './Transactions.js'
 import { CopyToClipboard } from '../subcomponents/CopyToClipboard.js'
 import { SomeTimeAgo, humanReadableDateDeltaLessDetailed } from '../subcomponents/SomeTimeAgo.js'
-import { addressString, bytes32String, dataStringWith0xStart, nanoString } from '../../utils/bigint.js'
+import { addressString, bytes32String, nanoString } from '../../utils/bigint.js'
 import { identifyTransaction } from './identifyTransaction.js'
 import { identifySwap } from './SwapTransactions.js'
 import { useState } from 'preact/hooks'
@@ -18,8 +18,8 @@ import { Website } from '../../types/websiteAccessTypes.js'
 import { extractTokenEvents } from '../../background/metadataUtils.js'
 import { EditEnsNamedHashCallBack } from '../subcomponents/ens.js'
 import { EnrichedEthereumInputData } from '../../types/EnrichedEthereumData.js'
-import { ViewSelector } from '../subcomponents/ViewSelector.js'
 import { XMarkIcon } from '../subcomponents/icons.js'
+import { TransactionInput } from '../subcomponents/ParsedInputData.js'
 
 type Erc20BalanceChangeParams = {
 	erc20TokenBalanceChanges: Erc20TokenBalanceChange[]
@@ -783,38 +783,7 @@ export function RawTransactionDetailsCard({ transaction, renameAddressCallBack,
 
 					<div>
 						<p class = 'paragraph' style = { {  color: 'var(--subtitle-text-color)', marginBottom: '0.25rem'} }>Transaction Input</p>
-						<ViewSelector id = 'transaction_input'>
-							{ parsedInputData?.type === 'Parsed' ? (
-								<>
-									<ViewSelector.List>
-										<ViewSelector.View title = 'View Parsed' value = 'parsed'>
-											<ParsedInputData inputData = { parsedInputData } addressMetaData = { addressMetaData } renameAddressCallBack = { renameAddressCallBack }/>
-										</ViewSelector.View>
-										<ViewSelector.View title = 'View Raw' value = 'raw'>
-											<pre>{ dataStringWith0xStart(transaction.input) }</pre>
-										</ViewSelector.View>
-									</ViewSelector.List>
-									<ViewSelector.Triggers />
-								</>
-							) : <>
-								<ViewSelector.List>
-									<ViewSelector.View title = 'View Parsed' value = 'parsed'> 
-									<div style = 'display: flex;'>
-										{ transaction.to !== undefined ? <>
- 											<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>No ABI available for&nbsp;</p>
-												<SmallAddress addressBookEntry = { transaction.to } renameAddressCallBack = { renameAddressCallBack } />
-										</> : <>
-											<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>No ABI available</p>
-										</> }
-									</div>
-									</ViewSelector.View>
-									<ViewSelector.View title = 'View Raw' value = 'raw'>
-										<pre>{ dataStringWith0xStart(transaction.input) }</pre>
-									</ViewSelector.View>
-								</ViewSelector.List>
-								<ViewSelector.Triggers />
-							</> }
-						</ViewSelector>
+						<TransactionInput parsedInputData = { parsedInputData } input = { transaction.input } to = { transaction.to } addressMetaData = { addressMetaData } renameAddressCallBack = { renameAddressCallBack } />
 					</div>
 				</div>
 			</div>

diff --git a/app/ts/components/subcomponents/ParsedInputData.tsx b/app/ts/components/subcomponents/ParsedInputData.tsx
@@ -0,0 +1,47 @@
+import { EnrichedEthereumInputData } from '../../types/EnrichedEthereumData.js'
+import { AddressBookEntry } from '../../types/addressBookTypes.js'
+import { RenameAddressCallBack } from '../../types/user-interface-types.js'
+import { dataStringWith0xStart } from '../../utils/bigint.js'
+import { ParsedInputData } from '../simulationExplaining/Transactions.js'
+import { ViewSelector } from './ViewSelector.js'
+import { SmallAddress } from './address.js'
+
+type TransactionInputParams = {
+	addressMetaData: readonly AddressBookEntry[]
+	parsedInputData: EnrichedEthereumInputData
+	input: Uint8Array
+	to: AddressBookEntry | undefined
+	renameAddressCallBack: RenameAddressCallBack
+}
+export function TransactionInput({ parsedInputData, input, to, addressMetaData, renameAddressCallBack }: TransactionInputParams) {
+	return <ViewSelector id = 'transaction_input'>
+		{ parsedInputData?.type === 'Parsed' ? ( <>
+			<ViewSelector.List>
+				<ViewSelector.View title = 'View Parsed' value = 'parsed'>
+					<ParsedInputData inputData = { parsedInputData } addressMetaData = { addressMetaData } renameAddressCallBack = { renameAddressCallBack }/>
+				</ViewSelector.View>
+				<ViewSelector.View title = 'View Raw' value = 'raw'>
+					<pre>{ dataStringWith0xStart(input) }</pre>
+				</ViewSelector.View>
+			</ViewSelector.List>
+			<ViewSelector.Triggers />
+		</> ) : <>
+			<ViewSelector.List>
+				<ViewSelector.View title = 'View Parsed' value = 'parsed'> 
+					<div style = 'display: flex;'>
+						{ to !== undefined ? <>
+							<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>No ABI available for&nbsp;</p>
+								<SmallAddress addressBookEntry = { to} renameAddressCallBack = { renameAddressCallBack } />
+						</> : <>
+							<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>No ABI available</p>
+						</> }
+					</div>
+				</ViewSelector.View>
+				<ViewSelector.View title = 'View Raw' value = 'raw'>
+					<pre>{ dataStringWith0xStart(input) }</pre>
+				</ViewSelector.View>
+			</ViewSelector.List>
+			<ViewSelector.Triggers />
+		</> }
+	</ViewSelector>
+}
diff --git a/app/ts/components/subcomponents/ViewSelector.tsx b/app/ts/components/subcomponents/ViewSelector.tsx
@@ -28,7 +28,6 @@ export const ViewSelector = ({ children, id }: { children: ComponentChildren, id
 	)
 }
 
-
 const useViewSwitcher = () => {
 	const context = useContext(ViewSelectorContext)
 	if (context === undefined) throw new Error('useViewSwitcher can only be used within children of DisplayRoot')

diff --git a/app/ts/types/personal-message-definitions.ts b/app/ts/types/personal-message-definitions.ts
@@ -364,6 +364,7 @@ const PersonalSignRequestBase = funtypes.ReadonlyObject({
 	website: Website,
 	created: EthereumTimestamp,
 	rawMessage: funtypes.String,
+	stringifiedMessage: funtypes.String,
 	messageIdentifier: EthereumQuantity,
 })
-Original file line number
+Diff line change
@@ Expand Up @@
     	)
     }
     const useViewSwitcher = () => {
     	const context = useContext(ViewSelectorContext)
     	if (context === undefined) throw new Error('useViewSwitcher can only be used within children of DisplayRoot')
@@ Expand Down @@