forked from storacha/w3up
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: w3console cleanup and updates to packages to support it (storac…
…ha#507) Integrate some learnings from creating a new app from the ground up with some tasks I've been meaning to do for a little while to clean up w3console. This is mostly either: a) extracting components to their own files OR b) lifting up types to eliminate 2-level-deep dependencies (ie, allowing w3console to only depend on the `@w3ui/react-*` packages rather than pulling in `@w3ui/*-core` and `multiformats`)
- Loading branch information
Showing
24 changed files
with
221 additions
and
220 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| import { ArrowPathIcon } from '@heroicons/react/20/solid' | ||
|
|
||
| export default ({ className = '' }: { className?: 'string' }) => ( | ||
| export default ({ className = '' }: { className?: string }) => ( | ||
| <ArrowPathIcon className={`animate-spin ${className}`} /> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { useKeyring } from '@w3ui/react-keyring'; | ||
| import { SpaceCreatorForm } from './SpaceCreator'; | ||
|
|
||
| export function SpaceEnsurer ({ | ||
| children | ||
| }: { | ||
| children: JSX.Element | JSX.Element[]; | ||
| }): JSX.Element | JSX.Element[]{ | ||
| const [{ spaces, account }] = useKeyring(); | ||
| if (spaces && spaces.length > 0) { | ||
| return children; | ||
| } | ||
| return ( | ||
| <div className="flex flex-col justify-center items-center h-screen"> | ||
| <div className="text-gray-200 text-center"> | ||
| <h1 className="my-4 text-lg">Welcome {account}!</h1> | ||
| <p> | ||
| To get started with w3up you'll need to create a space. | ||
| </p> | ||
| <p> | ||
| Give it a name and hit create! | ||
| </p> | ||
| <SpaceCreatorForm className='mt-4' /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
examples/react/w3console/src/components/SpaceRegistrar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { useState } from 'react'; | ||
| import { useKeyring } from '@w3ui/react-keyring'; | ||
| import Loader from './Loader'; | ||
|
|
||
| export function SpaceRegistrar (): JSX.Element { | ||
| const [{ account }, { registerSpace }] = useKeyring(); | ||
| const [submitted, setSubmitted] = useState(false); | ||
| async function onSubmit (e: React.MouseEvent<HTMLButtonElement>): Promise<void> { | ||
| e.preventDefault(); | ||
| 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-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 button below to register this space and start uploading. | ||
| </p> | ||
| </div> | ||
| <div className='flex flex-col items-center space-y-4'> | ||
| {submitted ? ( | ||
| <Loader className='w-6' /> | ||
| ) : ( | ||
| <button className='w3ui-button' onClick={onSubmit}>Register Space</button> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { useEffect } from 'react'; | ||
| import { useKeyring } from '@w3ui/react-keyring'; | ||
| import { useUploadsList } from '@w3ui/react-uploads-list'; | ||
| import { ShareIcon } from '@heroicons/react/20/solid'; | ||
| import md5 from 'blueimp-md5'; | ||
| import { SpaceShare } from '../share'; | ||
| import { Uploader } from './Uploader'; | ||
| import { UploadsList } from './UploadsList'; | ||
| import { SpaceRegistrar } from './SpaceRegistrar'; | ||
|
|
||
| interface SpaceSectionProps { | ||
| viewSpace: (did: string) => void; | ||
| setShare: (share: boolean) => void; | ||
| share: boolean; | ||
| } | ||
| export function SpaceSection (props: SpaceSectionProps): JSX.Element { | ||
| const { viewSpace, share, setShare } = props; | ||
| const [{ space }] = useKeyring(); | ||
| const [, { reload }] = useUploadsList(); | ||
| // reload the uploads list when the space changes | ||
| // TODO: this currently does a network request - we'd like to just reset | ||
| // to the latest state we have and revalidate in the background (SWR) | ||
| // but it's not clear how all that state should work yet - perhaps | ||
| // we need some sort of state management primitive in the uploads list? | ||
| useEffect(() => { | ||
| void reload(); | ||
| }, [space]); | ||
| const registered = Boolean(space?.registered()); | ||
| return ( | ||
| <div> | ||
| <header className='py-3'> | ||
| {space !== undefined && ( | ||
| <div className='flex flex-row items-start gap-2'> | ||
| <img | ||
| title={space.did()} | ||
| src={`https://www.gravatar.com/avatar/${md5( | ||
| space.did() | ||
| )}?d=identicon`} | ||
| className='w-10 hover:saturate-200 saturate-0 invert border-solid border-gray-500 border' /> | ||
| <div className='grow overflow-hidden whitespace-nowrap text-ellipsis text-gray-500'> | ||
| <h1 className='text-xl font-semibold leading-5 text-white'> | ||
| {space.name() ?? 'Untitled'} | ||
| </h1> | ||
| <label className='font-mono text-xs'> | ||
| {space.did()} | ||
| </label> | ||
| </div> | ||
| <button | ||
| className='h-6 w-6 text-gray-500 hover:text-gray-100' | ||
| onClick={() => setShare(!share)} | ||
| > | ||
| <ShareIcon /> | ||
| </button> | ||
| </div> | ||
| )} | ||
| </header> | ||
| <div className='container mx-auto'> | ||
| {share && <SpaceShare viewSpace={viewSpace} />} | ||
| {registered && !share && ( | ||
| <> | ||
| <Uploader | ||
| onUploadComplete={() => { | ||
| void reload(); | ||
| }} /> | ||
| <div className='mt-8'> | ||
| <UploadsList /> | ||
| </div> | ||
| </> | ||
| )} | ||
| {(space && !registered) && !share && <SpaceRegistrar />} | ||
| {!space && ( | ||
| <div className="text-center"> | ||
| <h1 className="text-xl">Select a space from the dropdown on the left to get started.</h1> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import type { Space } from '@w3ui/react-keyring'; | ||
| import { SpaceFinder } from '../components/SpaceFinder'; | ||
|
|
||
| export function SpaceSelector (props: any): JSX.Element { | ||
| const { selected, setSelected, spaces } = props; | ||
| return ( | ||
| <div> | ||
| <h3 className='text-xs tracking-wider uppercase font-bold my-2 text-gray-400 font-mono'> | ||
| Spaces | ||
| </h3> | ||
| <SpaceFinder | ||
| spaces={spaces} | ||
| selected={selected} | ||
| setSelected={(space: Space) => { | ||
| void setSelected(space.did()); | ||
| }} /> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.