Skip to content
This repository has been archived by the owner on Jan 2, 2025. It is now read-only.

Commit

Permalink
frontend: create account WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@horacioh
horacioh committed Jun 25, 2024
1 parent fcb0ba2 commit 887c516
Show file tree
Hide file tree
Showing 8 changed files with 343 additions and 320 deletions.
139 changes: 50 additions & 89 deletions frontend/apps/desktop/src/app-account.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { useGRPCClient } from '@shm/desktop/src/app-context'
import { DialogTitle } from '@shm/desktop/src/components/dialog'
import { queryKeys } from '@shm/desktop/src/models/query-keys'
import { eventStream } from '@shm/shared'
import {DialogTitle} from '@shm/desktop/src/components/dialog'
import {queryKeys} from '@shm/desktop/src/models/query-keys'
import {eventStream} from '@shm/shared'
import {
Add,
Button,
CheckboxField,
Dialog,
Expand All @@ -13,78 +11,38 @@ import {
XStack,
YStack,
} from '@shm/ui'
import { useMutation, useQuery } from '@tanstack/react-query'
import { useEffect, useMemo, useState } from 'react'
import { useAccountKeys } from './models/daemon'
import { trpc } from './trpc'
import {useMutation} from '@tanstack/react-query'
import {useEffect, useMemo, useState} from 'react'
import {invalidateQueries} from './app-invalidation'
import {useDeleteKey, useMnemonics, useRegisterKey} from './models/daemon'
import {trpc} from './trpc'

export type NamedKey = {
name: string
accountId: string
publicKey: string
}

let [dispatchWizardEvent, wizardEvents] = eventStream<boolean>()
let [dispatchNewKeyEvent, newKeyEvent] = eventStream<boolean>()

export function CurrentAccountSidebarSection() {
const read = trpc.secureStorage.read.useQuery('main')

console.log(`== ~ CurrentAccountSidebarSection ~ read:`, read.data)
return (
<XStack>
<Button
icon={Add}
chromeless
borderRadius={0}
f={1}
onPress={() => {
dispatchWizardEvent(true)
}}
>
Add Account
</Button>
</XStack>
)

return null
}
export const [dispatchWizardEvent, wizardEvents] = eventStream<boolean>()
export const [dispatchNewKeyEvent, newKeyEvent] = eventStream<boolean>()

type AccountStep = 'start' | 'create' | 'complete'

export function AccountWizardDialog() {
const client = useGRPCClient()
const [open, setOpen] = useState(false)
const [newAccount, setNewAccount] = useState<null | boolean>(null)
const [step, setStep] = useState<AccountStep>('start')
const [existingWords, setExistingWords] = useState<string>('')
const [isSaveWords, setSaveWords] = useState<null | boolean>(null)
const [isExistingWordsSave, setExistingWordsSave] = useState<boolean>(false)

const saveWords = trpc.secureStorage.write.useMutation()
const { refetch: refetchKeys } = useAccountKeys()

const { data: genWords, refetch: refetchWords } = useQuery({
queryKey: [queryKeys.GENERATE_MNEMONIC],
enabled: step == 'create' && newAccount == true,
queryFn: async () => {
const words = await client.daemon.genMnemonic({})
return words.mnemonic
},
})
const {data: genWords, refetch: refetchWords} = useMnemonics()

const register = useMutation({
// queryKey: ['REGISTER_KEY'],
mutationFn: async () => {
const res = await client.daemon.registerKey({
mnemonic: words as Array<string>,
name: 'main',
})
return res
},
})
const register = useRegisterKey()

const addExistingAccount = useMutation({
// queryKey: ['REGISTER_KEY'],
mutationFn: async () => {
let input = []

Expand All @@ -100,26 +58,15 @@ export function AccountWizardDialog() {
if (input.length == 0) {
throw Error('No mnemonics')
}
console.log('--- ADD EXISTING ACCOUNT', input)
const res = await client.daemon.registerKey({
let res = await register.mutateAsync({
mnemonic: input,
name: 'main',
})
return res
},
})

const deleteKey = useMutation({
// queryKey: ['REGISTER_KEY'],
mutationFn: async () => {
const res = await client.daemon.deleteKey({
name: 'main',
})

console.log('== REGISTER', res)
return res
},
})
const deleteKey = useDeleteKey()

const words = useMemo(() => {
if (newAccount) {
Expand Down Expand Up @@ -152,8 +99,8 @@ export function AccountWizardDialog() {
width="100vw"
animation="fast"
opacity={0.8}
enterStyle={{ opacity: 0 }}
exitStyle={{ opacity: 0 }}
enterStyle={{opacity: 0}}
exitStyle={{opacity: 0}}
/>
<Dialog.Content
backgroundColor={'$background'}
Expand All @@ -165,8 +112,8 @@ export function AccountWizardDialog() {
},
},
]}
enterStyle={{ y: -10, opacity: 0 }}
exitStyle={{ y: -10, opacity: 0 }}
enterStyle={{y: -10, opacity: 0}}
exitStyle={{y: -10, opacity: 0}}
>
<DialogTitle>Account</DialogTitle>
{step == 'start' ? (
Expand All @@ -190,13 +137,6 @@ export function AccountWizardDialog() {
>
Add existing account
</Button>
<Button
onPress={() => {
deleteKey.mutateAsync()
}}
>
Remove key (dev)
</Button>
</YStack>
) : null}
{step == 'create' && newAccount ? (
Expand Down Expand Up @@ -237,15 +177,20 @@ export function AccountWizardDialog() {
<Button
f={1}
onPress={() => {
register.mutateAsync().then((res) => {
if (isSaveWords) {
console.log('== SAVE WORDS TOO!')
// TODO: @Eric here we need to store the words
saveWords.mutate({ key: 'main', value: words })
}
refetchKeys()
setStep('complete')
})
register
.mutateAsync({
mnemonic: words as Array<string>,
name: 'main',
})
.then((res) => {
if (isSaveWords) {
console.log('== SAVE WORDS TOO!')
// TODO: @Eric here we need to store the words
saveWords.mutate({key: 'main', value: words})
}
invalidateQueries(queryKeys.KEYS_LIST)
setStep('complete')
})
}}
>
Create new Account
Expand All @@ -262,6 +207,13 @@ export function AccountWizardDialog() {
value={existingWords}
onChangeText={setExistingWords}
/>
<CheckboxField
value={isExistingWordsSave}
onValue={setExistingWordsSave}
id="existing-save-words"
>
I have my words save somewhere
</CheckboxField>
<XStack gap="$2">
<Button
f={1}
Expand All @@ -274,9 +226,16 @@ export function AccountWizardDialog() {
</Button>
<Button
f={1}
opacity={!isExistingWordsSave ? 0.4 : 1}
hoverStyle={{
cursor: isExistingWordsSave
? 'pointer'
: 'not-allowed !important',
}}
disabled={!isExistingWordsSave}
onPress={() => {
addExistingAccount.mutateAsync().then(() => {
refetchKeys()
invalidateQueries(queryKeys.KEYS_LIST)
setStep('complete')
})
}}
Expand All @@ -289,6 +248,8 @@ export function AccountWizardDialog() {
{step == 'complete' ? (
<YStack gap="$2" width="100%" maxWidth="400px">
<SizableText>Account created!</SizableText>
<Button>Update my profile</Button>
<Button>Share my account with others</Button>
<Button onPress={() => dispatchWizardEvent(false)}>close</Button>
</YStack>
) : null}
Expand Down
2 changes: 1 addition & 1 deletion frontend/apps/desktop/src/components/contacts-prompt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function AddConnectionForm({
const [peerText, setPeer] = useState('')
const daemonInfo = useDaemonInfo()
const account = useMyAccount()
const deviceId = daemonInfo.data?.deviceId
const deviceId = daemonInfo.data?.peerId
const peerInfo = usePeerInfo(deviceId)

const connectionString =
Expand Down
Loading

0 comments on commit 887c516

Please sign in to comment.