diff --git a/src/components/SpaceCreator.tsx b/src/components/SpaceCreator.tsx
index 24bc9a4..21c9901 100644
--- a/src/components/SpaceCreator.tsx
+++ b/src/components/SpaceCreator.tsx
@@ -1,37 +1,45 @@
-import type { ChangeEvent } from 'react'
+import type { ChangeEvent, ReactNode } from 'react'
+import type { OwnedSpace } from '@web3-storage/access/space'
+import * as W3Space from '@web3-storage/w3up-client/space'
import React, { useState } from 'react'
-import { Space, useW3 } from '@w3ui/react'
+import { Wizard, useWizard } from 'react-use-wizard';
+import { SpaceDID, useW3 } from '@w3ui/react'
import Loader from '../components/Loader'
-import { DID, DIDKey } from '@ucanto/interface'
+import { Failure } from '@ucanto/interface'
import { DidIcon } from './DidIcon'
import Link from 'next/link'
+import { usePlan } from '@/hooks';
-export function SpaceCreatorCreating (): JSX.Element {
+interface SpaceCreatorWizardLoaderProps {
+ message: string
+ className?: string
+}
+
+export function SpaceCreatorWizardLoader ({ message, className = 'flex flex-col items-center space-y-4' }: SpaceCreatorWizardLoaderProps): ReactNode {
return (
-
-
Creating Space...
+
+
{message}
)
}
+const SpaceCreatorCreating = () =>
+
interface SpaceCreatorFormProps {
className?: string
+ setOwnedSpace: React.Dispatch>
}
export function SpaceCreatorForm ({
- className = ''
-}: SpaceCreatorFormProps): JSX.Element {
+ className = '',
+ setOwnedSpace
+}: SpaceCreatorFormProps): ReactNode {
const [{ client, accounts }] = useW3()
const [submitted, setSubmitted] = useState(false)
- const [created, setCreated] = useState(false)
const [name, setName] = useState('')
- const [space, setSpace] = useState()
-
- function resetForm (): void {
- setName('')
- }
+ const { nextStep } = useWizard()
async function onSubmit (e: React.FormEvent): Promise {
e.preventDefault()
@@ -42,48 +50,21 @@ export function SpaceCreatorForm ({
throw new Error('cannot create space, no account found, have you authorized your email?')
}
- const { ok: plan } = await account.plan.get()
- if (!plan) {
- throw new Error('a payment plan is required on account to provision a new space.')
- }
-
setSubmitted(true)
try {
const space = await client.createSpace(name)
-
- const provider = (process.env.NEXT_PUBLIC_W3UP_PROVIDER || 'did:web:web3.storage') as DID<'web'>
- await account.provision(space.did(), { provider })
-
- // MUST do this before creating recovery, as it creates necessary authorizations
- await space.save()
-
- // TODO this should have its own UX, like the CLI does, which would allow us to handle errors
- const recovery = await space.createRecovery(account.did())
-
- // TODO we are currently ignoring the result of this because we have no good way to handle errors - revamp this ASAP!
- await client.capability.access.delegate({
- space: space.did(),
- delegations: [recovery],
- })
-
- setSpace(client.spaces().find(s => s.did() === space.did()))
- setCreated(true)
- resetForm()
+ // @ts-ignore TODO this should be unecessary after we thread the access client dep through the libraries
+ setOwnedSpace(space)
+ nextStep()
} catch (error) {
/* eslint-disable-next-line no-console */
console.error(error)
throw new Error('failed to create space', { cause: error })
+ } finally {
+ setSubmitted(false)
}
}
- if (created && space) {
- return (
-
+ Your space is controlled by a private key. We'll give you an opportunity to delegate
+ the ability to recover control over your space to our service, but we won't store
+ your private key.
+
+
+ In order to ensure you don't lose access to your space, please write down the
+ following phrase and keep it in a secure place like 1Password or a piece of paper
+ in a safe. It is a representation of your private key, and anybody with access
+ to this phrase will be able to control and access your space. Keep it secret, keep
+ it safe!
+
+ Finally, we recommend you connect this space to {account.toEmail()}'s
+ web3.storage account.
+
+
+ If you choose not to do this we will not be able to
+ automatically give you access to this space on other devices and we
+ will not be able to help you regain access if you lose your recovery
+ phrase. You can still import your space into other devices
+ using your recovery phrase.
+