feat: add manually decrypt post in devtools; remove retry button

src/_locales/en/messages.json

@@ -104,9 +104,6 @@
     "finish": {
         "message": "Finish"
     },
-    "retry_decryption": {
-        "message": "Try again"
-    },
     "welcome_0_close_button": {
         "message": "I'll do it later"
     },

src/_locales/zh/messages.json

@@ -105,9 +105,6 @@
     "finish": {
         "message": "完成"
     },
-    "retry_decryption": {
-        "message": "再試一次"
-    },
     "welcome_0_close_button": {
         "message": "我想以後再做"
     },

src/components/DebugModeUI/DebugList.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+const F = (props: { hint: string; content: string | number }) => (
+    <li>
+        <span style={{ userSelect: 'none', opacity: 0.6 }}>{props.hint}: </span>
+        <span>{props.content}</span>
+    </li>
+)
+export function DebugList(props: { items: readonly (readonly [string, string | number | undefined] | JSX.Element)[] }) {
+    return (
+        <ul style={{ wordBreak: 'break-all', padding: '0 1em', margin: 0 }}>
+            {props.items.map(x =>
+                Array.isArray(x) ? <F hint={x[0]} content={x[1] === undefined ? 'undefined' : x[1]} /> : x,
+            )}
+        </ul>
+    )
+}

src/components/InjectedComponents/DecryptedPost.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState, useMemo } from 'react'
 import AsyncComponent from '../../utils/components/AsyncComponent'
 import { AdditionalContent } from './AdditionalPostContent'
 import { useShareMenu } from './SelectPeopleDialog'
@@ -18,6 +18,9 @@ import {
 import { useValueRef } from '../../utils/hooks/useValueRef'
 import { debugModeSetting } from '../shared-settings/debugMode'
 import { DebugModeUI_PostHashDialog } from '../DebugModeUI/PostHashDialog'
+import { GetContext } from '@holoflows/kit/es'
+import { deconstructPayload } from '../../utils/type-transform/Payload'
+import { DebugList } from '../DebugModeUI/DebugList'
 
 interface DecryptPostSuccessProps {
     data: { signatureVerifyResult: boolean; content: string }
@@ -86,17 +89,12 @@ const useDecryptPostFailedStyles = makeStyles({
         maxWidth: '50em',
     },
 })
-export function DecryptPostFailed({ error, retry }: { error: Error; retry?: () => void }) {
+export function DecryptPostFailed({ error }: { error: Error }) {
     const styles = useDecryptPostFailedStyles()
     if (error && error.message === geti18nString('service_not_setup_yet')) {
         return <NotSetupYetPrompt />
     }
-    const button = retry ? (
-        <Button onClick={retry} color="primary" size="small">
-            {geti18nString('retry_decryption')}
-        </Button>
-    ) : null
-    return <SnackbarContent classes={styles} elevation={0} message={error && error.message} action={button} />
+    return <SnackbarContent classes={styles} elevation={0} message={error && error.message} />
 }
 
 interface DecryptPostProps {
@@ -108,6 +106,7 @@ interface DecryptPostProps {
     people: Person[]
     alreadySelectedPreviously: Person[]
     requestAppendRecipients(to: Person[]): Promise<void>
+    disableSuccessDecryptionCache?: boolean
 }
 function DecryptPost(props: DecryptPostProps) {
     const { postBy, whoAmI, encryptedText, people, alreadySelectedPreviously, requestAppendRecipients } = props
@@ -116,10 +115,10 @@ function DecryptPost(props: DecryptPostProps) {
     const [decryptingStatus, setDecryptingStatus] = useState<DecryptionProgress | FailureDecryption | undefined>(
         undefined,
     )
-    const [__, forceReDecrypt] = useState<number>()
 
     const [debugHash, setDebugHash] = useState<string>('Unknown')
-    const isDebugging = useValueRef(debugModeSetting)
+    const setting = useValueRef(debugModeSetting)
+    const isDebugging = GetContext() === 'options' ? true : setting
 
     const rAD = useCallback(
         async (people: Person[]) => {
@@ -128,22 +127,26 @@ function DecryptPost(props: DecryptPostProps) {
         },
         [requestAppendRecipients],
     )
-    const debugHashJSX = (
-        <ul>
-            {postBy.equals(whoAmI) ? (
-                <DebugModeUI_PostHashDialog network={postBy.network} post={props.encryptedText} />
-            ) : (
-                <li>
-                    Hash of this post: {debugHash}
-                    <br />
-                    It should be same on your friend's Maskbook, if it isn't the same, that means your friend does not
-                    receive your crypto key correctly or you didn't set your Maskbook correctly.
-                </li>
-            )}
-            <li>Decrypted reason: {decryptedResult ? decryptedResult.through.join(',') : 'Unknown'}</li>
-        </ul>
-    )
-    if (decryptedResult) {
+    const debugHashJSX = useMemo(() => {
+        if (!isDebugging) return null
+        const postPayload = deconstructPayload(encryptedText)
+        if (!postPayload) return null
+        const postByMyself = <DebugModeUI_PostHashDialog network={postBy.network} post={encryptedText} />
+        return (
+            <DebugList
+                items={[
+                    postBy.equals(whoAmI) ? postByMyself : (['Hash of this post', debugHash] as const),
+                    ['Decrypt reason', decryptedResult ? decryptedResult.through.join(',') : 'Unknown'],
+                    ['Payload version', postPayload.version],
+                    ['Payload ownersAESKeyEncrypted', postPayload.ownersAESKeyEncrypted],
+                    ['Payload iv', postPayload.iv],
+                    ['Payload encryptedText', postPayload.encryptedText],
+                    ['Payload signature', postPayload.signature],
+                ]}
+            />
+        )
+    }, [debugHash, whoAmI, decryptedResult, postBy, encryptedText, isDebugging])
+    if (decryptedResult && !props.disableSuccessDecryptionCache) {
         return (
             <>
                 <DecryptPostSuccess
@@ -182,7 +185,6 @@ function DecryptPost(props: DecryptPostProps) {
                     return last.value
                 }}
                 dependencies={[
-                    __,
                     encryptedText,
                     postBy.toText(),
                     whoAmI.toText(),
@@ -192,12 +194,7 @@ function DecryptPost(props: DecryptPostProps) {
                 awaitingComponent={awaitingComponent}
                 completeComponent={result => {
                     if ('error' in result.data) {
-                        return (
-                            <DecryptPostFailed
-                                retry={() => forceReDecrypt(Math.random())}
-                                error={new Error(result.data.error)}
-                            />
-                        )
+                        return <DecryptPostFailed error={new Error(result.data.error)} />
                     }
                     setDecryptedResult(result.data)
                     props.onDecrypted(result.data.content)

src/components/InjectedComponents/PostInspector.tsx

@@ -10,6 +10,7 @@ import { useCurrentIdentity, useFriendsList } from '../DataSource/useActivatedUI
 import { getActivatedUI } from '../../social-network/ui'
 import { useValueRef } from '../../utils/hooks/useValueRef'
 import { debugModeSetting } from '../shared-settings/debugMode'
+import { DebugList } from '../DebugModeUI/DebugList'
 
 interface PostInspectorProps {
     onDecrypted(post: string): void
@@ -41,15 +42,17 @@ export function PostInspector(props: PostInspectorProps) {
     if (postBy.isUnknown) return null
 
     const debugInfo = isDebugging ? (
-        <ul>
-            <li>Post content: {props.post}</li>
-            <li>Post by: {props.postBy.userId}</li>
-            <li>
-                Who am I:{' '}
-                {whoAmI ? `Nickname ${whoAmI.nickname || 'unknown'}, UserID ${whoAmI.identifier.userId}` : 'Unknown'}
-            </li>
-            <li>Post ID: {props.postId || 'Unknown'}</li>
-        </ul>
+        <DebugList
+            items={[
+                ['Post by', props.postBy.userId],
+                [
+                    'Who am I',
+                    whoAmI ? `Nickname ${whoAmI.nickname || 'unknown'}, UserID ${whoAmI.identifier.userId}` : 'Unknown',
+                ],
+                ['Post ID', props.postId || 'Unknown'],
+                ['Post Content', props.post],
+            ]}
+        />
     ) : null
 
     if (type.encryptedPost) {

src/extension/options-page/Developer.tsx

@@ -6,6 +6,7 @@ import { useCurrentIdentity } from '../../components/DataSource/useActivatedUI'
 import { Person } from '../../database'
 import React from 'react'
 import { AddProve } from './DeveloperComponents/AddProve'
+import { DecryptPostDeveloperMode } from './DeveloperComponents/DecryptPost'
 
 async function swallowGoo(me: Person | null) {
     const boxElem = document.querySelector('#raw-box') as HTMLTextAreaElement
@@ -57,6 +58,9 @@ const DevPage = () => {
                     <Grid item xs={4}>
                         <AddProve />
                     </Grid>
+                    <Grid item xs={6}>
+                        <DecryptPostDeveloperMode />
+                    </Grid>
                 </Grid>
             </div>
         </>

src/extension/options-page/DeveloperComponents/DecryptPost.tsx

@@ -0,0 +1,58 @@
+import React, { useState, useMemo } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import Typography from '@material-ui/core/Typography'
+import { PersonIdentifier } from '../../../database/type'
+import { useTextField } from '../../../utils/components/useForms'
+import { DecryptPostUI } from '../../../components/InjectedComponents/DecryptedPost'
+import { Person } from '../../../database'
+import { useMyIdentities } from '../../../components/DataSource/useActivatedUI'
+import { ChooseIdentity } from '../../../components/shared/ChooseIdentity'
+
+const useStyles = makeStyles(theme => ({}))
+
+export function DecryptPostDeveloperMode() {
+    const classes = useStyles()
+    const myIdentities = useMyIdentities()
+    const [whoAmISelected, setWhoAmI] = useState<Person | undefined>()
+    // const [network, networkInput] = useTextField('Network', { defaultValue: 'facebook.com', required: true })
+    const [author, authorInput] = useTextField('Author ID of this post', { required: true })
+    const [encryptedText, encryptedTextInput] = useTextField('Encrypted post', {
+        placeholder: '🎼3/4|ownersAESKeyEncrypted|iv|encryptedText|signature:||',
+        required: true,
+    })
+    const whoAmI = whoAmISelected
+        ? whoAmISelected.identifier
+        : myIdentities[0]
+        ? myIdentities[0].identifier
+        : PersonIdentifier.unknown
+    const network = whoAmI.network
+    const authorIdentifier = useMemo(() => new PersonIdentifier(network, author), [network, author])
+    return (
+        <Card>
+            <CardContent>
+                <Typography color="textSecondary" gutterBottom>
+                    Decrypt post manually
+                </Typography>
+                <Typography variant="caption" gutterBottom>
+                    Your identity?
+                </Typography>
+                <ChooseIdentity onChangeIdentity={who => setWhoAmI(who)} />
+                {/* {networkInput} */}
+                {authorInput}
+                {encryptedTextInput}
+                <DecryptPostUI.UI
+                    disableSuccessDecryptionCache
+                    alreadySelectedPreviously={[]}
+                    requestAppendRecipients={async () => alert('Not available in this mode')}
+                    encryptedText={encryptedText}
+                    onDecrypted={post => {}}
+                    people={[]}
+                    postBy={authorIdentifier}
+                    whoAmI={whoAmI}
+                />
+            </CardContent>
+        </Card>
+    )
+}

src/stories/Injections.tsx

@@ -84,7 +84,7 @@ storiesOf('Injections', module)
                     <DecryptPostUI.awaiting type={progress}></DecryptPostUI.awaiting>
                 </FakePost>
                 <FakePost title="Failed:">
-                    <DecryptPostUI.failed retry={action('retry')} error={new Error('Error message')} />
+                    <DecryptPostUI.failed error={new Error('Error message')} />
                 </FakePost>
             </>
         )