guess the default option to show

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

Hide file tree

Showing 3 changed files with 42 additions and 33 deletions.
diff --git a/app/ts/components/pages/PersonalSign.tsx b/app/ts/components/pages/PersonalSign.tsx
@@ -122,29 +122,31 @@ const decodeMessage = (message: string) => {
 	return message
 }
 
+function isNinetyFivePercentNumbersOrASCII(input: string): boolean {
+	const asciiCount = input.split('').filter(char => char.charCodeAt(0) <= 127).length
+	const numberCount = input.split('').filter(char => !isNaN(Number(char))).length
+	const validCount = asciiCount + numberCount
+	return validCount / input.length >= 0.95
+}
+
 function SignRequest({ visualizedPersonalSignRequest, renameAddressCallBack, editEnsNamedHashCallBack }: SignRequestParams) {
 	switch (visualizedPersonalSignRequest.type) {
 		case 'NotParsed': {
-			if (visualizedPersonalSignRequest.method === 'personal_sign') return (
-				<Viewer id = 'personal_sign'>
-					<Viewer.List>
-						<Viewer.View title = 'View Raw' value = 'raw'>
-							<div class = 'textbox'>
-								<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>{ visualizedPersonalSignRequest.message }</p>
-							</div>
-						</Viewer.View>
-						<Viewer.View title = 'View Parsed' value = 'parsed'>
-							<div class = 'textbox'>
-								<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>{ decodeMessage(visualizedPersonalSignRequest.message) }</p>
-							</div>
-						</Viewer.View>
-					</Viewer.List>
-					<Viewer.Triggers />
-				</Viewer>
-			)
-			return <div class = 'textbox'>
-				<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>{ visualizedPersonalSignRequest.message }</p>
-			</div>
+			return <Viewer id = 'personal_sign'>
+				<Viewer.List>
+					<Viewer.View title = 'View Raw' value = 'raw' isActive = { !isNinetyFivePercentNumbersOrASCII(decodeMessage(visualizedPersonalSignRequest.message)) }>
+						<div class = 'textbox'>
+							<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>{ visualizedPersonalSignRequest.message }</p>
+						</div>
+					</Viewer.View>
+					<Viewer.View title = 'View Parsed' value = 'parsed' isActive = { isNinetyFivePercentNumbersOrASCII(decodeMessage(visualizedPersonalSignRequest.message)) }>
+						<div class = 'textbox'>
+							<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>{ decodeMessage(visualizedPersonalSignRequest.message) }</p>
+						</div>
+					</Viewer.View>
+				</Viewer.List>
+				<Viewer.Triggers />
+			</Viewer>
 		}
 		case 'SafeTx': return <GnosisSafeVisualizer
 			gnosisSafeMessage = { visualizedPersonalSignRequest }

diff --git a/app/ts/components/subcomponents/ParsedInputData.tsx b/app/ts/components/subcomponents/ParsedInputData.tsx
@@ -17,17 +17,17 @@ export function TransactionInput({ parsedInputData, input, to, addressMetaData,
 	return <ViewSelector id = 'transaction_input'>
 		{ parsedInputData?.type === 'Parsed' ? ( <>
 			<ViewSelector.List>
-				<ViewSelector.View title = 'View Parsed' value = 'parsed'>
+				<ViewSelector.View title = 'View Parsed' value = 'parsed' isActive = { true }>
 					<ParsedInputData inputData = { parsedInputData } addressMetaData = { addressMetaData } renameAddressCallBack = { renameAddressCallBack }/>
 				</ViewSelector.View>
-				<ViewSelector.View title = 'View Raw' value = 'raw'>
+				<ViewSelector.View title = 'View Raw' value = 'raw' isActive = { false }>
 					<pre>{ dataStringWith0xStart(input) }</pre>
 				</ViewSelector.View>
 			</ViewSelector.List>
 			<ViewSelector.Triggers />
 		</> ) : <>
 			<ViewSelector.List>
-				<ViewSelector.View title = 'View Parsed' value = 'parsed'> 
+				<ViewSelector.View title = 'View Parsed' value = 'parsed' isActive = { false }> 
 					<div style = 'display: flex;'>
 						{ to !== undefined ? <>
 							<p class = 'paragraph' style = 'color: var(--subtitle-text-color)'>No ABI available for&nbsp;</p>
@@ -37,7 +37,7 @@ export function TransactionInput({ parsedInputData, input, to, addressMetaData,
 						</> }
 					</div>
 				</ViewSelector.View>
-				<ViewSelector.View title = 'View Raw' value = 'raw'>
+				<ViewSelector.View title = 'View Raw' value = 'raw' isActive = { true }>
 					<pre>{ dataStringWith0xStart(input) }</pre>
 				</ViewSelector.View>
 			</ViewSelector.List>

diff --git a/app/ts/components/subcomponents/ViewSelector.tsx b/app/ts/components/subcomponents/ViewSelector.tsx
@@ -1,5 +1,5 @@
-import { Signal, useComputed, useSignal } from '@preact/signals'
-import { ComponentChildren, createContext } from 'preact'
+import { Signal, useComputed, useSignal, useSignalEffect } from '@preact/signals'
+import { ComponentChildren, createContext, toChildArray } from 'preact'
 import { useContext, useEffect } from 'preact/hooks'
 
 type ViewConfig = {
@@ -35,21 +35,28 @@ const useViewSwitcher = () => {
 }
 
 const List = ({ children }: { children: ComponentChildren }) => {
+	const { views } = useViewSwitcher()
+
+	const isActiveViewDefined = useComputed(() => views.value.some(view => view.isActive === true)) 
+	const hasAllChildrenRendered = useComputed(() => toChildArray(children).length === views.value.length)
+
+	useSignalEffect(() => {
+		if (!hasAllChildrenRendered.value || isActiveViewDefined.value) return
+		const [firstChild, ...restOfChildren] = views.peek()
+		if (firstChild === undefined) return
+		views.value = [{ ...firstChild, isActive: true }, ...restOfChildren]
+	})
+
 	return <div>{ children }</div>
 }
 
-const View = ({ children, title, value }: ViewConfig & { children: ComponentChildren }) => {
+const View = ({ children, title, value, isActive }: ViewConfig & { children: ComponentChildren }) => {
 	const context = useViewSwitcher()
-
 	const activeView = useComputed(() => context.views.value.find(view => view.isActive === true))
-
 	useEffect(() => {
-		const isActiveSet = context.views.value.length < 1
-		context.views.value = [...context.views.peek(), { title, value, isActive: isActiveSet }]
+		context.views.value = [...context.views.peek(), { title, value, isActive }]
 	}, [])
-
 	if (activeView.value?.value === value) return <div>{ children }</div>
-
 	return <></>
 }