www: merkle root lookup (#111)

Co-authored-by: holypanda <[email protected]>

Author: malonehedges

www/components/About.tsx

@@ -0,0 +1,42 @@
+import FAQ from 'components/FAQ'
+
+export default function About() {
+  return (
+    <>
+      <div className="flex gap-3 sm:gap-4 text-base mt-24 items-center">
+        <img
+          src="/collablogos.png"
+          alt="partner logos"
+          className="w-[64px] sm:w-[72px]"
+        />
+        <div>
+          An open source project from{' '}
+          <PartnerLink href="https://mint.fun">mint.fun</PartnerLink>,{' '}
+          <PartnerLink href="https://zora.co">Zora</PartnerLink>, and{' '}
+          <PartnerLink href="https://context.wtf">Context</PartnerLink>
+        </div>
+      </div>
+
+      <div className="h-px bg-neutral-200 mt-4 sm:mt-8 mb-10 sm:mb-16 w-full" />
+
+      <FAQ />
+    </>
+  )
+}
+
+const PartnerLink = ({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) => (
+  <a
+    href={href}
+    className="font-bold hover:underline"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    {children}
+  </a>
+)

www/components/Button.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import React from 'react'
 
 type Props = {
-  onClick: () => void
+  onClick?: () => void
   label: string
   disabled?: boolean
   pending?: boolean

www/components/Container.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames'
+import { ReactNode } from 'react'
+
+const Container = ({
+  children,
+  variant,
+}: {
+  children: ReactNode
+  variant: 'success' | 'failure'
+}) => (
+  <div
+    className={classNames(
+      'border-2 rounded-lg px-4 py-2 overflow-auto',
+      { 'bg-brand-light border-brand': variant === 'success' },
+      { 'bg-error-light border-error': variant === 'failure' },
+    )}
+  >
+    {children}
+  </div>
+)
+
+export const FailureContainer = ({ children }: { children: ReactNode }) => (
+  <Container variant="failure">{children}</Container>
+)
+
+export const SuccessContainer = ({ children }: { children: ReactNode }) => (
+  <Container variant="success">{children}</Container>
+)

www/components/SiteNav/index.tsx

@@ -27,6 +27,7 @@ export default function SiteNav() {
           title="Create"
           selectedOverride={createTabSelectedOverride}
         />
+        <NavTab href="/search" title="Search" />
         <NavTab href="/docs" title="API" />
         <a
           href={twitterUrl}

www/hooks/useQuery.ts

@@ -0,0 +1,9 @@
+import { useState } from 'react'
+
+export function useQuery(initialQuery: string | null = '') {
+  const [query, setQuery] = useState<string>(initialQuery ?? '')
+  const trimmedQuery = query.trim()
+  const isDisabled = trimmedQuery === ''
+
+  return { query, trimmedQuery, setQuery, isDisabled }
+}

www/hooks/useWindowSize.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState<{
+    width: number | undefined
+    height: number | undefined
+  }>({
+    width: undefined,
+    height: undefined,
+  })
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    window.addEventListener('resize', handleResize)
+    handleResize()
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return windowSize
+}

www/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@react-hook/async": "^3.1.1",
+    "@tanstack/react-virtual": "^3.0.0-beta.54",
     "assertate": "^2.3.4",
     "classnames": "^2.3.1",
     "lodash": "^4.17.21",

www/pages/index.tsx

@@ -1,5 +1,5 @@
 import CreateRoot from 'components/CreateRoot'
-import FAQ from 'components/FAQ'
+import About from 'components/About'
 import PageTitle from 'components/PageTitle'
 
 export default function CreatePage() {
@@ -11,40 +11,7 @@ export default function CreatePage() {
 
       <CreateRoot />
 
-      <div className="flex gap-3 sm:gap-4 text-base mt-24 items-center">
-        <img
-          src="/collablogos.png"
-          alt="partner logos"
-          className="w-[64px] sm:w-[72px]"
-        />
-        <div>
-          An open source project from{' '}
-          <PartnerLink href="https://mint.fun">mint.fun</PartnerLink>,{' '}
-          <PartnerLink href="https://zora.co">Zora</PartnerLink>, and{' '}
-          <PartnerLink href="https://context.app">Context</PartnerLink>
-        </div>
-      </div>
-
-      <div className="h-px bg-neutral-200 mt-4 sm:mt-8 mb-10 sm:mb-16 w-full" />
-
-      <FAQ />
+      <About />
     </div>
   )
 }
-
-const PartnerLink = ({
-  href,
-  children,
-}: {
-  href: string
-  children: React.ReactNode
-}) => (
-  <a
-    href={href}
-    className="font-bold hover:underline"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    {children}
-  </a>
-)