From 616f781979de6f5e595c86ee6ac3b827b6b16edf Mon Sep 17 00:00:00 2001
From: Travis Vachon <travis@dag.house>
Date: Fri, 24 Mar 2023 02:49:58 -0700
Subject: [PATCH] fix: get space registrar looking and acting right (#466)

it was still talking about email verification for registering spaces,
and asking for an email. update it with all the latest good stuff

Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>
---
 .../react/w3console/src/components/Loader.tsx |  5 ++
 .../w3console/src/components/SpaceCreator.tsx |  5 +-
 examples/react/w3console/src/pages/index.tsx  | 70 ++++++-------------
 3 files changed, 31 insertions(+), 49 deletions(-)
 create mode 100644 examples/react/w3console/src/components/Loader.tsx

diff --git a/examples/react/w3console/src/components/Loader.tsx b/examples/react/w3console/src/components/Loader.tsx
new file mode 100644
index 000000000..4e0218cf6
--- /dev/null
+++ b/examples/react/w3console/src/components/Loader.tsx
@@ -0,0 +1,5 @@
+import { ArrowPathIcon } from '@heroicons/react/20/solid'
+
+export default ({ className = '' }: { className?: 'string' }) => (
+  <ArrowPathIcon className={`animate-spin ${className}`} />
+)
diff --git a/examples/react/w3console/src/components/SpaceCreator.tsx b/examples/react/w3console/src/components/SpaceCreator.tsx
index c31e1c3c7..86094f4c6 100644
--- a/examples/react/w3console/src/components/SpaceCreator.tsx
+++ b/examples/react/w3console/src/components/SpaceCreator.tsx
@@ -3,12 +3,13 @@ import type { ChangeEvent } from 'react'
 import React, { useState } from 'react'
 import { useKeyring } from '@w3ui/react-keyring'
 import { ArrowPathIcon } from '@heroicons/react/20/solid'
+import Loader from '../components/Loader'
 
 export function SpaceCreatorCreating (): JSX.Element {
   return (
     <div className='flex flex-col items-center space-y-4'>
       <h5>Creating Space...</h5>
-      <ArrowPathIcon className='animate-spin w-6' />
+      <Loader className='w-6' />
     </div>
   )
 }
@@ -34,7 +35,7 @@ export function SpaceCreatorForm ({
       setSubmitted(true)
       try {
         await createSpace(name)
-        await registerSpace(account, {provider: import.meta.env.VITE_W3UP_PROVIDER})
+        await registerSpace(account, { provider: import.meta.env.VITE_W3UP_PROVIDER })
       } catch (error) {
         /* eslint-disable no-console */
         console.error(error)
diff --git a/examples/react/w3console/src/pages/index.tsx b/examples/react/w3console/src/pages/index.tsx
index d0b4b49d0..b5ec4da4b 100644
--- a/examples/react/w3console/src/pages/index.tsx
+++ b/examples/react/w3console/src/pages/index.tsx
@@ -14,65 +14,41 @@ import { UploadsList } from '../components/UploadsList'
 import { SpaceFinder } from '../components/SpaceFinder'
 import { SpaceCreatorForm, SpaceCreator } from '../components/SpaceCreator'
 import { AuthenticationEnsurer } from '../components/Authenticator'
+import Loader from '../components/Loader'
 import { tosUrl, Logo } from '../brand'
 
 function SpaceRegistrar (): JSX.Element {
-  const [, { registerSpace }] = useKeyring()
-  const [email, setEmail] = useState('')
+  const [{ account }, { registerSpace }] = useKeyring()
   const [submitted, setSubmitted] = useState(false)
-  function resetForm (): void {
-    setEmail('')
-  }
-  async function onSubmit (e: React.FormEvent<HTMLFormElement>): Promise<void> {
+  async function onSubmit (e: React.MouseEvent<HTMLButtonElement>): Promise<void> {
     e.preventDefault()
-    setSubmitted(true)
-    try {
-      await registerSpace(email)
-    } catch (err) {
-      console.log(err)
-      throw new Error('failed to register', { cause: err })
-    } finally {
-      resetForm()
-      setSubmitted(false)
+    if (account) {
+      setSubmitted(true)
+      try {
+        await registerSpace(account, { provider: import.meta.env.VITE_W3UP_PROVIDER })
+      } catch (err) {
+        console.log(err)
+        throw new Error('failed to register', { cause: err })
+      } finally {
+        setSubmitted(false)
+      }
+    } else {
+      throw new Error('cannot register space, no account found, have you authorized your email?')
     }
   }
   return (
-    <div className='flex flex-col items-center space-y-24 pt-12'>
-      <div className='flex flex-col items-center space-y-2'>
-        <h3 className='text-lg'>Verify your email address!</h3>
+    <div className='flex flex-col items-center space-y-12 pt-12'>
+      <div className='flex flex-col items-center space-y-4'>
+        <h3 className='text-lg'>This space is not yet registered.</h3>
         <p>
-          Click the link in the email we sent to start uploading to this space.
+          Click the button below to register this space and start uploading.
         </p>
       </div>
       <div className='flex flex-col items-center space-y-4'>
-        <h5>Need a new verification email?</h5>
-        <form
-          className='flex flex-col items-center space-y-2'
-          onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-            void onSubmit(e)
-          }}
-        >
-          <input
-            className='text-black px-2 py-1 rounded'
-            type='email'
-            placeholder='Email'
-            value={email}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              setEmail(e.target.value)
-            }}
-          />
-          <input
-            type='submit'
-            className='w3ui-button'
-            value='Re-send Verification Email'
-            disabled={email === ''}
-          />
-        </form>
-        {submitted && (
-          <p>
-            Verification re-sent, please check your email for a verification
-            email.
-          </p>
+        {submitted ? (
+          <Loader className='w-6' />
+        ) : (
+          <button className='w3ui-button' onClick={onSubmit}>Register Space</button>
         )}
       </div>
     </div>