fix: make the website work

storacha · Oct 9, 2023 · a19e540 · a19e540
1 parent e08304e
commit a19e540
Show file tree

Hide file tree

Showing 13 changed files with 342 additions and 228 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
+    "@ucanto/interface": "^9.0.0",
     "@w3ui/react-keyring": "^6.0.1",
     "@w3ui/react-uploader": "^5.0.1",
     "@w3ui/react-uploads-list": "^4.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx
@@ -0,0 +1,35 @@
+import Link from 'next/link'
+
+export default function Docs () {
+  return (
+      <div className='flex flex-col justify-start items-center min-h-full w-full text-left text-white p-8'>
+        <h1 className='text-3xl mb-8 font-bold'>Welcome to the w3up web console beta!</h1>
+        <p className='mb-4 w-4/5'>
+          We're excited that you're using the w3up web console. This is a web-based interface
+          to <Link href='https://github.com/web3-storage/w3up'>w3up</Link>, designed to make it easy
+          for you to upload data to the Filecoin network.
+        </p>
+        <p className='mb-4 min-w-fit w-4/5'>
+          If you are a developer interested in integrating with w3up, please check out:
+        </p>
+        <ul className='mb-4 w-4/5 list-disc pl-8'>
+          <li>
+            Our command line tool <Link href='https://github.com/web3-storage/w3cli#getting-started'>w3</Link>
+          </li>
+          <li>
+            Our JavaScript library <Link href='https://github.com/web3-storage/w3up/tree/main/packages/w3up-client#about'>w3up-client</Link>
+          </li>
+          <li>
+            Our library of headless React, Vue and SolidJS widgets <Link href='https://beta.ui.web3.storage/'>w3ui</Link>
+          </li>
+        </ul>
+        <p className='mb-4 w-4/5'>
+          Otherwise, visit the <Link href='https://github.com/web3-storage/w3up'>w3up</Link> repository
+          where you'll find documentation and source code for the w3up protocol. You may
+          also be interested in reading the <Link href='https://github.com/web3-storage/specs'>w3up specifications</Link> and
+          learning more about <Link href='https://github.com/web3-storage/w3infra'>the operational infrastructure code</Link> that
+          powers our implementation of w3up.
+        </p>
+      </div>
+  )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,22 +1,24 @@
+import SidebarLayout from '@/components/SidebarLayout'
 import './globals.css'
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 }
 
-export default function RootLayout({
+export default function RootLayout ({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className='bg-gray-900 min-height-full'>
+        <SidebarLayout>
+          {children}
+        </SidebarLayout>
+      </body>
     </html>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,113 +1,27 @@
-import Image from 'next/image'
+'use client'
 
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
+import { useState } from 'react'
+import { DIDKey } from '@ucanto/interface'
+import { useKeyring } from '@w3ui/react-keyring'
 
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
+import { AuthenticationEnsurer } from '../components/Authenticator'
+import { DefaultLayout } from '../components/Layout'
+import { SpaceEnsurer } from '../components/SpaceEnsurer'
+import { SpaceSection } from '../components/SpaceSection'
+import { SpaceSelector } from '../components/SpaceSelector'
 
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
+export default function Home (): JSX.Element {
+  const [share, setShare] = useState(false)
+  const [{ space, spaces }, { setCurrentSpace }] = useKeyring()
 
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
+  function viewSpace (did: DIDKey): void {
+    setShare(false)
+    void setCurrentSpace(did)
+  }
 
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
+  return (
+    <SpaceSection viewSpace={viewSpace} share={share} setShare={setShare} />
   )
 }
+
+
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
@@ -0,0 +1,36 @@
+import { tosUrl } from '../../brand'
+import Link from 'next/link'
+
+export default function Terms () {
+  const serviceName = process.env.NEXT_PUBLIC_W3UP_SERVICE_BRAND_NAME || 'dev.web3.storage'
+  return (
+      <div className='flex flex-col justify-start items-center min-h-full w-full text-white p-8'>
+        <div className='flex flex-row gap-4'>
+          <h1 className='text-2xl my-4 font-bold'>
+            {serviceName} w3up beta Terms of Service
+          </h1>
+        </div>
+        <p className='my-2 w-4/5 leading-relaxed'>
+          {serviceName} w3up is currently a beta preview feature for web3.storage,
+          and will eventually be used as the primary upload API for web3.storage.{' '}
+          This includes <Link href="https://github.com/web3-storage/w3up-client">w3up-client</Link>,{' '}
+          <Link href="https://github.com/web3-storage/w3ui">w3ui</Link>,{' '}
+          <Link href="https://github.com/web3-storage/w3cli">w3cli</Link>, and the{' '}
+          <Link href="https://github.com/web3-storage/w3protocol">underlying APIs and services</Link>{' '}
+          for uploading data (collectively, the “w3up beta”). By using the web3.storage{' '}
+          w3up beta, you consent to the general web3.storage <Link href={tosUrl}>Terms of Service</Link>.
+        </p>
+        <p className='my-2 w-4/5 leading-relaxed'>
+          In order to register for the web3.storage w3up beta, you will be required to provide and verify an
+          email address, which will be permanently associated with your web3.storage w3up account and cannot be 
+          changed, even at the end of the beta period.
+        </p>
+        <p className='my-2 w-4/5 leading-relaxed'>
+          Registering for and uploading data to the web3.storage w3up beta is currently free. However, at the 
+          end of the beta period, you will be required to pay for usage over the Free tier limit of 5GB.
+          Please refer to the web3.storage website for <Link href="https://web3.storage/pricing/">information on pricing</Link>. If you exceed
+          the Free Tier data limits of web3.storage and do not intend to pay, please do not use the w3up beta for long-term storage.
+        </p>
+      </div>
+  )
+}
diff --git a/src/components/Authenticator.tsx b/src/components/Authenticator.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import {
   Authenticator as AuthCore,
   useAuthenticator
@@ -64,6 +66,7 @@ export function AuthenticationEnsurer ({
   children: JSX.Element | JSX.Element[]
 }): JSX.Element {
   const [{ submitted, account, agent }] = useAuthenticator()
+  console.log("auth", submitted, account, agent)
   const authenticated = !!account
   if (authenticated) {
     return <>{children}</>

diff --git a/src/components/DidIcon.tsx b/src/components/DidIcon.tsx
@@ -1,10 +1,9 @@
 import md5 from 'blueimp-md5'
-import Image from 'next/image'
 
 export function DidIcon({ did }: { did: string }): JSX.Element {
   const src = `https://www.gravatar.com/avatar/${md5(did)}?d=identicon`
   return (
-    <Image
+    <img
       title={did}
       alt={`gravatar for did ${did}`}
       src={src}

diff --git a/src/components/SidebarLayout.tsx b/src/components/SidebarLayout.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+import { Logo } from '../brand'
+import { Fragment, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import { Authenticator } from '@w3ui/react-keyring'
+import { AuthenticationEnsurer } from '../components/Authenticator'
+import { SpaceEnsurer } from '../components/SpaceEnsurer'
+import { W3APIProvider } from '@/components/W3API'
+
+const navLinks = [
+  { name: 'Terms', href: '/terms' },
+  { name: 'Docs', href: '/docs' },
+  { name: 'Support', href: 'https://github.com/web3-storage/w3ui/issues' },
+]
+
+interface SidebarComponentProps {
+  sidebar?: React.ReactNode
+}
+
+function Sidebar ({ sidebar = <div></div> }: SidebarComponentProps): JSX.Element {
+  return (
+    <nav className='flex-none w-64 bg-gray-900 text-white px-4 pb-4 border-r border-gray-800 h-screen'>
+      <div className='flex flex-col justify-between h-full'>
+        {sidebar}
+        <div className='flex flex-col items-center'>
+          <a href='/'><Logo className='w-36 mb-2' /></a>
+          <div className='flex flex-row space-x-2'>
+            {navLinks.map((link, i) => (
+              <a key={i} className='text-xs block text-center mt-2' href={link.href}>{link.name}</a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+interface LayoutComponentProps extends SidebarComponentProps {
+  children: React.ReactNode
+}
+
+export default function SidebarLayout ({ children }: LayoutComponentProps): JSX.Element {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  return (
+    <W3APIProvider uploadsListPageSize={20}>
+      <Authenticator className='h-full' as='div'>
+        <AuthenticationEnsurer>
+          <SpaceEnsurer>
+            <div className='flex min-h-full w-full text-white'>
+              {/* dialog sidebar for narrow browsers */}
+              <Transition.Root show={sidebarOpen} >
+                <Dialog onClose={() => setSidebarOpen(false)} as='div' className='relative z-50'>
+                  <Transition.Child
+                    as={Fragment}
+                    enter="transition-opacity duration-200"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="transition-opacity duration-400"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0">
+                    <div className="fixed inset-0 bg-black/70" aria-hidden="true" />
+                  </Transition.Child>
+                  <div className="fixed inset-0 flex justify-left">
+                    <Transition.Child
+                      as={Fragment}
+                      enter="transition duration-200"
+                      enterFrom="-translate-x-full"
+                      enterTo="translate-x-0"
+                      leave="transition duration-400"
+                      leaveFrom="translate-x-0"
+                      leaveTo="-translate-x-full">
+                      <Dialog.Panel>
+                        <XMarkIcon className='text-white w-6 h-6 fixed top-2 -right-8' onClick={() => setSidebarOpen(false)} />
+                        <Sidebar />
+                      </Dialog.Panel>
+                    </Transition.Child>
+                  </div>
+                </Dialog>
+              </Transition.Root>
+
+              {/* static sidebar for wide browsers */}
+              <div className='hidden lg:block'>
+                <Sidebar />
+              </div>
+              <div className='w-full h-screen overflow-scroll'>
+                {/* top nav bar for narrow browsers, mainly to have a place to put the hamburger */}
+                <div className='lg:hidden flex justify-between pt-4 px-4'>
+                  <Bars3Icon className='w-6 h-6' onClick={() => setSidebarOpen(true)} />
+                  <a href='/'><Logo className='w-36 mb-2' /></a>
+                </div>
+                <main className='grow bg-gray-dark text-white p-4'>
+                  {children}
+                </main>
+              </div>
+            </div>
+          </SpaceEnsurer>
+        </AuthenticationEnsurer>
+      </Authenticator>
+    </W3APIProvider>
+  )
+}
diff --git a/src/components/SpaceEnsurer.tsx b/src/components/SpaceEnsurer.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useKeyring } from '@w3ui/react-keyring';
 import { SpaceCreatorForm } from './SpaceCreator';
 

diff --git a/src/components/SpaceSection.tsx b/src/components/SpaceSection.tsx
@@ -23,7 +23,7 @@ export function SpaceSection (props: SpaceSectionProps): JSX.Element {
   // 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();
+//    void reload();
   }, [space, reload]);
   const registered = Boolean(space?.registered());
   return (