From 6f8d9bdc241e29315e912a7c4b3738ffa8cd0693 Mon Sep 17 00:00:00 2001
From: sripwoud <me@sripwoud.xyz>
Date: Wed, 6 Mar 2024 13:40:04 +0100
Subject: [PATCH] feat(ui): define `ErrorContainer` component

---
 .barrelsby.json                           |  6 ++----
 .eslintrc.yaml                            |  1 -
 pkgs/cli/README.md                        |  2 +-
 ui/src/app/prove/submit/error.tsx         | 10 ++++++++++
 ui/src/app/query/asset/nft/punk/error.tsx | 21 ++-------------------
 ui/src/app/query/beacon/error.tsx         | 21 ++-------------------
 ui/src/components/ErrorContainer.tsx      | 15 +++++++++++++++
 ui/src/components/index.ts                |  3 ++-
 ui/src/globals.css                        |  8 ++++++++
 ui/src/hooks/index.ts                     |  2 ++
 10 files changed, 44 insertions(+), 45 deletions(-)
 create mode 100644 ui/src/app/prove/submit/error.tsx
 create mode 100644 ui/src/components/ErrorContainer.tsx

diff --git a/.barrelsby.json b/.barrelsby.json
index 8338c293..605bf9a9 100644
--- a/.barrelsby.json
+++ b/.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",
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index 4e79a3d6..e45902ea 100644
--- a/.eslintrc.yaml
+++ b/.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',
diff --git a/pkgs/cli/README.md b/pkgs/cli/README.md
index f8f92a3c..bf0bbfd3 100644
--- a/pkgs/cli/README.md
+++ b/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
 ```
 
diff --git a/ui/src/app/prove/submit/error.tsx b/ui/src/app/prove/submit/error.tsx
new file mode 100644
index 00000000..4465bc9a
--- /dev/null
+++ b/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} />
+}
diff --git a/ui/src/app/query/asset/nft/punk/error.tsx b/ui/src/app/query/asset/nft/punk/error.tsx
index 1bb9f2da..4465bc9a 100644
--- a/ui/src/app/query/asset/nft/punk/error.tsx
+++ b/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} />
 }
diff --git a/ui/src/app/query/beacon/error.tsx b/ui/src/app/query/beacon/error.tsx
index 1bb9f2da..4465bc9a 100644
--- a/ui/src/app/query/beacon/error.tsx
+++ b/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} />
 }
diff --git a/ui/src/components/ErrorContainer.tsx b/ui/src/components/ErrorContainer.tsx
new file mode 100644
index 00000000..c239eef4
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index cd0990ba..08803ad9 100644
--- a/ui/src/components/index.ts
+++ b/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'
diff --git a/ui/src/globals.css b/ui/src/globals.css
index e832d48e..607d0c10 100644
--- a/ui/src/globals.css
+++ b/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;
+  }
 }
diff --git a/ui/src/hooks/index.ts b/ui/src/hooks/index.ts
index 0bd9f805..752fa3e8 100644
--- a/ui/src/hooks/index.ts
+++ b/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'