feat(ui): define ErrorContainer component

.barrelsby.json

@@ -3,10 +3,8 @@
     "discord-bot/src/lib",
     "discord-bot/src/lib/decorators",
     "pkgs/query/src/requests",
-    "query-api/src/api/controllers/requests",
-    "query-api/src/api/services",
-    "query-api/src/api/repositories",
-    "query-api-nest/src/app/anonset/dto",
+    "query-api/src/dto",
+    "query-api/src/repositories",
     "test/src",
     "ui/src/components",
     "ui/src/hooks",

.eslintrc.yaml

@@ -4,7 +4,6 @@ parserOptions:
     [
       'circom/tsconfig.json',
       'discord-bot/tsconfig.json',
-      'pkgs/cli/tsconfig.json',
       'pkgs/merkle-tree-worker/tsconfig.json',
       'pkgs/proof/tsconfig.json',
       'pkgs/query/tsconfig.json',

pkgs/cli/README.md

@@ -6,7 +6,7 @@ Command line to interact with [anonklub query api](https://anonset.fly.dev).
 cargo run --release -- query eth --min 10000
 ```
 
-``` shell
+```shell
 cargo run --release -- query erc20 --address 0xc18360217d8f7ab5e7c516566761ea12ce7f9d72 --min 5000
 ```
 

ui/src/app/prove/submit/error.tsx

@@ -0,0 +1,10 @@
+'use client'
+import { ErrorContainer } from '@components'
+
+export default function Error({
+  error,
+}: {
+  error: Error & { digest?: string }
+}) {
+  return <ErrorContainer message={error.message} />
+}

ui/src/app/query/asset/nft/punk/error.tsx

@@ -1,27 +1,10 @@
 'use client'
-import { useEffect } from 'react'
+import { ErrorContainer } from '@components'
 
 export default function Error({
   error,
-  reset,
 }: {
   error: Error & { digest?: string }
-  reset: () => void
 }) {
-  useEffect(() => {
-    console.error(error)
-  }, [error])
-
-  return (
-    <div className='bg-gray flex min-h-screen flex-col items-center justify-start pt-32 text-center text-red'>
-      <h2 className='mb-4 text-4xl font-bold'>Something went wrong!</h2>
-      <p className='mb-8 text-red'>{error.message}</p>
-      <button
-        className='focus:shadow-outline transform rounded bg-red px-4 py-2 font-bold text-grey transition-colors duration-150 hover:bg-grey hover:text-red focus:outline-none'
-        onClick={() => reset()}
-      >
-        Try again
-      </button>
-    </div>
-  )
+  return <ErrorContainer message={error.message} />
 }

ui/src/app/query/beacon/error.tsx

@@ -1,27 +1,10 @@
 'use client'
-import { useEffect } from 'react'
+import { ErrorContainer } from '@components'
 
 export default function Error({
   error,
-  reset,
 }: {
   error: Error & { digest?: string }
-  reset: () => void
 }) {
-  useEffect(() => {
-    console.error(error)
-  }, [error])
-
-  return (
-    <div className='bg-gray flex min-h-screen flex-col items-center justify-start pt-32 text-center text-red'>
-      <h2 className='mb-4 text-4xl font-bold'>Something went wrong!</h2>
-      <p className='mb-8 text-red'>{error.message}</p>
-      <button
-        className='focus:shadow-outline transform rounded bg-red px-4 py-2 font-bold text-grey transition-colors duration-150 hover:bg-grey hover:text-red focus:outline-none'
-        onClick={() => reset()}
-      >
-        Try again
-      </button>
-    </div>
-  )
+  return <ErrorContainer message={error.message} />
 }

ui/src/components/ErrorContainer.tsx

@@ -0,0 +1,15 @@
+'use client'
+import { useRouter } from 'next/navigation'
+
+export const ErrorContainer = ({ message }) => {
+  const router = useRouter()
+  return (
+    <div className='error-container'>
+      <h2 className='mb-4 text-4xl font-bold'>Something went wrong!</h2>
+      <p className='mb-8 text-red'>{message}</p>
+      <button className='btn btn-error' onClick={() => router.back()}>
+        Back
+      </button>
+    </div>
+  )
+}

ui/src/components/index.ts

@@ -3,7 +3,9 @@
  */
 
 export * from './AnonSetResults'
+export * from './CheckMark'
 export * from './ConnectButton'
+export * from './ErrorContainer'
 export * from './ExternalLink'
 export * from './Footer'
 export * from './Header'
@@ -14,7 +16,6 @@ export * from './Loader'
 export * from './Modal'
 export * from './Screen'
 export * from './ScrollableJsonContainer'
-export * from './CheckMark'
 export * from './SubmitProofRequest'
 export * from './Text'
 export * from './WarningModal'

ui/src/globals.css

@@ -48,6 +48,10 @@ dialog::backdrop {
     @apply hover:bg-grey hover:text-black;
   }
 
+  .btn-error {
+    @apply rounded border-2 border-red px-4 py-2 font-medium text-red hover:bg-red hover:text-black;
+  }
+
   .is-disabled {
     @apply cursor-not-allowed opacity-50;
   }
@@ -113,4 +117,8 @@ dialog::backdrop {
   .buttons-row {
     @apply mt-10 flex flex-row justify-center space-x-20;
   }
+
+  .error-container {
+    @apply mt-28 flex flex-col items-center justify-start border border-red bg-black p-4 text-center text-red;
+  }
 }

ui/src/hooks/index.ts

@@ -5,11 +5,13 @@
 export * from './useFetchOnChain'
 export * from './useHelp'
 export * from './useJsonFile'
+export * from './useMerkleTreeWorker'
 export * from './useProofRequest'
 export * from './useProofResult'
 export * from './useResetAnonSet'
 export * from './useResetProofRequest'
 export * from './useSetHelp'
+export * from './useSpartanEcdsaWorker'
 export * from './useStore'
 export * from './useVerifyProof'
 export * from './useWorker'