Implement connectApp logic, add app url and icon

2024-02-08 14:15:45 +03:00
parent caf8f9a82b
commit 48c07ad1c0
11 changed files with 350 additions and 90 deletions
--- a/src/pages/CreatePage/Create.Page.tsx
+++ b/src/pages/CreatePage/Create.Page.tsx
@@ -0,0 +1,100 @@
+import { Stack, Typography } from '@mui/material'
+import { GetStartedButton, LearnMoreButton } from './styled'
+import { DOMAIN } from '@/utils/consts'
+import { useSearchParams } from 'react-router-dom'
+import { swicCall } from '@/modules/swic'
+import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
+import { ModalConfirmConnect } from '@/components/Modal/ModalConfirmConnect/ModalConfirmConnect'
+import { useModalSearchParams } from '@/hooks/useModalSearchParams'
+import { MODAL_PARAMS_KEYS } from '@/types/modal'
+
+const CreatePage = () => {
+  const notify = useEnqueueSnackbar()
+  const { handleOpen } = useModalSearchParams()
+
+  const [searchParams] = useSearchParams()
+
+  const name = searchParams.get('name') || ''
+  const token = searchParams.get('token') || ''
+  const appNpub = searchParams.get('appNpub') || ''
+  const isValid = name && token && appNpub
+
+  const nip05 = `${name}@${DOMAIN}`
+
+  const handleLearnMore = () => {
+    // @ts-ignore
+    window.open(`https://${DOMAIN}`, '_blank').focus()
+  }
+
+  const handleClickAddAccount = async () => {
+    try {
+      const key: any = await swicCall('generateKey', name)
+
+      let appUrl = ''
+      if (window.document.referrer) {
+        try {
+          const u = new URL(window.document.referrer)
+          appUrl = u.origin
+        } catch {}
+      }
+
+      console.log('Created', key.npub, 'app', appUrl)
+
+      handleOpen(MODAL_PARAMS_KEYS.CONFIRM_CONNECT, {
+        search: {
+          npub: key.npub,
+          appNpub,
+          appUrl,
+          token,
+          // will close after all done
+          popup: 'true'
+        },
+      });
+
+    } catch (error: any) {
+      notify(error.message || error.toString(), 'error')
+    }
+  }
+
+  if (!isValid) {
+    return (
+      <Stack maxHeight={'100%'} overflow={'auto'}>
+        <Typography textAlign={'center'} variant="h6" paddingTop="1em">
+          Bad parameters.
+        </Typography>
+      </Stack>
+    )
+  }
+
+  return (
+    <>
+      <Stack maxHeight={'100%'} overflow={'auto'}>
+        <Typography textAlign={'center'} variant="h4" paddingTop="0.5em">
+          Welcome to Nostr!
+        </Typography>
+        <Stack gap={'0.5rem'} overflow={'auto'}>
+          <Typography textAlign={'left'} variant="h6" paddingTop="0.5em">
+            Chosen name: <b>{nip05}</b>
+          </Typography>
+          <GetStartedButton onClick={handleClickAddAccount}>Create account</GetStartedButton>
+
+          <Typography textAlign={'left'} variant="h5" paddingTop="1em">
+            What you need to know:
+          </Typography>
+
+          <ol style={{ marginLeft: '1em' }}>
+            <li>Nostr accounts are based on cryptographic keys.</li>
+            <li>All your actions on Nostr will be signed by your keys.</li>
+            <li>Nsec.app is one of many services to manage Nostr keys.</li>
+            <li>When you create an account, a new key will be created.</li>
+            <li>This key can later be used with other Nostr websites.</li>
+          </ol>
+          <LearnMoreButton onClick={handleLearnMore}>Learn more</LearnMoreButton>
+        </Stack>
+      </Stack>
+      <ModalConfirmConnect />
+    </>
+  )
+}
+
+export default CreatePage