feat: add SeeMyProvePost in devtools

src/components/InjectedComponents/DecryptedPost.tsx

@@ -105,7 +105,7 @@ interface DecryptPostProps {
     encryptedText: string
     people: Person[]
     alreadySelectedPreviously: Person[]
-    requestAppendRecipients(to: Person[]): Promise<void>
+    requestAppendRecipients?(to: Person[]): Promise<void>
     disableSuccessDecryptionCache?: boolean
 }
 function DecryptPost(props: DecryptPostProps) {
@@ -120,13 +120,14 @@ function DecryptPost(props: DecryptPostProps) {
     const setting = useValueRef(debugModeSetting)
     const isDebugging = GetContext() === 'options' ? true : setting
 
-    const rAD = useCallback(
-        async (people: Person[]) => {
-            await requestAppendRecipients(people)
+    const requestAppendRecipientsWrapped = useMemo(() => {
+        if (!postBy.equals(whoAmI)) return undefined
+        if (!requestAppendRecipients) return undefined
+        return async (people: Person[]) => {
+            await requestAppendRecipients!(people)
             await sleep(1500)
-        },
-        [requestAppendRecipients],
-    )
+        }
+    }, [requestAppendRecipients, postBy, whoAmI])
     const debugHashJSX = useMemo(() => {
         if (!isDebugging) return null
         const postPayload = deconstructPayload(encryptedText)
@@ -152,7 +153,7 @@ function DecryptPost(props: DecryptPostProps) {
                 <DecryptPostSuccess
                     data={decryptedResult}
                     alreadySelectedPreviously={alreadySelectedPreviously}
-                    requestAppendRecipients={postBy.equals(whoAmI) ? rAD : undefined}
+                    requestAppendRecipients={requestAppendRecipientsWrapped}
                     people={people}
                 />
                 {isDebugging ? debugHashJSX : null}
@@ -202,7 +203,7 @@ function DecryptPost(props: DecryptPostProps) {
                         <DecryptPostSuccess
                             data={result.data}
                             alreadySelectedPreviously={alreadySelectedPreviously}
-                            requestAppendRecipients={postBy.equals(whoAmI) ? rAD : undefined}
+                            requestAppendRecipients={requestAppendRecipientsWrapped}
                             people={people}
                         />
                     )

src/components/shared/ChooseIdentity.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import ExpansionPanel from '@material-ui/core/ExpansionPanel'
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
@@ -19,10 +19,22 @@ const useStyles = makeStyles({
     list: { width: '100%' },
     current: { padding: 0 },
 })
-
+/**
+ * Choose the current using identity.
+ */
 export const ChooseIdentity: React.FC<{
+    /**
+     * Current selected identity
+     * @defaultValue the global selected identity
+     */
     current?: Person
+    /** All available identities
+     * @defaultValue `useMyIdentities()`
+     */
     availableIdentities?: Person[]
+    /** When user change the identity
+     *  @defaultValue will change the global selected identity
+     */
     onChangeIdentity?(person: Person): void
 }> = props => {
     const classes = useStyles()
@@ -80,3 +92,15 @@ ChooseIdentity.defaultProps = {
         getActivatedUI().currentIdentity.value = person
     },
 }
+/**
+ * This hook allows use <ChooseIdentity /> in a isolated scope without providing
+ * verbose information.
+ */
+export function useIsolatedChooseIdentity() {
+    const all = useMyIdentities()
+    const [current, set] = useState<Person>()
+    return [
+        current || all[0],
+        <ChooseIdentity current={current} availableIdentities={all} onChangeIdentity={set} />,
+    ] as const
+}

src/extension/options-page/Developer.tsx

@@ -7,6 +7,7 @@ import { Person } from '../../database'
 import React from 'react'
 import { AddProve } from './DeveloperComponents/AddProve'
 import { DecryptPostDeveloperMode } from './DeveloperComponents/DecryptPost'
+import { SeeMyProvePost } from './DeveloperComponents/SeeMyProvePost'
 
 async function swallowGoo(me: Person | null) {
     const boxElem = document.querySelector('#raw-box') as HTMLTextAreaElement
@@ -55,12 +56,18 @@ const DevPage = () => {
             <ListSubheader>Developer Settings</ListSubheader>
             <div className={classes.root}>
                 <Grid container spacing={3}>
-                    <Grid item xs={4}>
-                        <AddProve />
-                    </Grid>
-                    <Grid item xs={6}>
-                        <DecryptPostDeveloperMode />
+                    <Grid container xs={6} item spacing={2} direction="column">
+                        <Grid item>
+                            <SeeMyProvePost />
+                        </Grid>
+                        <Grid item>
+                            <AddProve />
+                        </Grid>
+                        <Grid item>
+                            <DecryptPostDeveloperMode />
+                        </Grid>
                     </Grid>
+                    <Grid container xs={6} item spacing={3} direction="column"></Grid>
                 </Grid>
             </div>
         </>

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

@@ -1,34 +1,29 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo, useState } 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 => ({}))
+import { useIsolatedChooseIdentity } from '../../../components/shared/ChooseIdentity'
+import { FormControlLabel, Checkbox } from '@material-ui/core'
 
 export function DecryptPostDeveloperMode() {
-    const classes = useStyles()
-    const myIdentities = useMyIdentities()
-    const [whoAmISelected, setWhoAmI] = useState<Person | undefined>()
+    const [whoAmI, chooseIdentity] = useIsolatedChooseIdentity()
     // const [network, networkInput] = useTextField('Network', { defaultValue: 'facebook.com', required: true })
-    const [author, authorInput] = useTextField('Author ID of this post', { required: true })
+    const [postByMyself, setPostByMyself] = useState(false)
+    const [author, authorInput] = useTextField('Author ID of this post', {
+        required: !postByMyself,
+        disabled: postByMyself,
+    })
     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 network = whoAmI ? whoAmI.identifier.network : 'localhost'
     const authorIdentifier = useMemo(() => new PersonIdentifier(network, author), [network, author])
+    const whoAmIIdentifier = whoAmI ? whoAmI.identifier : PersonIdentifier.unknown
     return (
         <Card>
             <CardContent>
@@ -38,20 +33,25 @@ export function DecryptPostDeveloperMode() {
                 <Typography variant="caption" gutterBottom>
                     Your identity?
                 </Typography>
-                <ChooseIdentity onChangeIdentity={who => setWhoAmI(who)} />
+                {chooseIdentity}
                 {/* {networkInput} */}
+                <FormControlLabel
+                    control={<Checkbox checked={postByMyself} onChange={(e, a) => setPostByMyself(a)} />}
+                    label="Post by myself"
+                />
                 {authorInput}
                 {encryptedTextInput}
-                <DecryptPostUI.UI
-                    disableSuccessDecryptionCache
-                    alreadySelectedPreviously={[]}
-                    requestAppendRecipients={async () => alert('Not available in this mode')}
-                    encryptedText={encryptedText}
-                    onDecrypted={post => {}}
-                    people={[]}
-                    postBy={authorIdentifier}
-                    whoAmI={whoAmI}
-                />
+                <div style={{ minHeight: 200 }}>
+                    <DecryptPostUI.UI
+                        disableSuccessDecryptionCache
+                        alreadySelectedPreviously={[]}
+                        encryptedText={encryptedText}
+                        onDecrypted={post => {}}
+                        people={[]}
+                        postBy={postByMyself ? whoAmIIdentifier : authorIdentifier}
+                        whoAmI={whoAmIIdentifier}
+                    />
+                </div>
             </CardContent>
         </Card>
     )

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

@@ -0,0 +1,35 @@
+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 Services from '../../service'
+import { useIsolatedChooseIdentity } from '../../../components/shared/ChooseIdentity'
+
+const useStyles = makeStyles({
+    prove: {
+        wordBreak: 'break-all',
+    },
+})
+
+export function SeeMyProvePost() {
+    const classes = useStyles()
+    const [whoAmI, chooseIdentity] = useIsolatedChooseIdentity()
+    const [provePost, setProvePost] = useState<string | null>('')
+    useMemo(() => {
+        if (!whoAmI) return null
+        Services.Crypto.getMyProveBio(whoAmI.identifier).then(setProvePost)
+    }, [whoAmI])
+    return (
+        <Card>
+            <CardContent>
+                <Typography color="textSecondary">See my prove post</Typography>
+                {chooseIdentity}
+                <Typography color="textSecondary">Your prove post is:</Typography>
+                <Typography variant="body1" className={classes.prove}>
+                    {provePost}
+                </Typography>
+            </CardContent>
+        </Card>
+    )
+}

src/utils/jss/ShadowRootPortal.tsx

@@ -1,8 +1,10 @@
 import { livingShadowRoots } from './ConstructableStyleSheetsRenderer'
+import { GetContext } from '@holoflows/kit/es'
 
 const div = document.createElement('div')
 document.body.appendChild(div)
-export const PortalShadowRoot = (div.attachShadow({ mode: 'closed' }) as unknown) as any
+export const PortalShadowRoot =
+    GetContext() === 'options' ? div : ((div.attachShadow({ mode: 'closed' }) as unknown) as any)
 livingShadowRoots.add(PortalShadowRoot as any)
 
 Object.defineProperties(ShadowRoot.prototype, {