From f3eee90be0ce8f9bff0edec0a1178c4f301a7492 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Wed, 3 May 2023 21:00:25 +0200
Subject: [PATCH 01/18] Uploadthing test

---
 next.config.js                       |  8 ++++
 package-lock.json                    | 55 ++++++++++++++++++++++++++-
 package.json                         |  3 ++
 src/pages/api/uploadthing.ts         |  8 ++++
 src/pages/upload/index.tsx           | 56 ++++++++++++++++++++++++++++
 src/utils/uploadthing/index.ts       |  3 ++
 src/utils/uploadthing/uploadthing.ts | 29 ++++++++++++++
 tsconfig.json                        |  8 +++-
 8 files changed, 167 insertions(+), 3 deletions(-)
 create mode 100644 next.config.js
 create mode 100644 src/pages/api/uploadthing.ts
 create mode 100644 src/pages/upload/index.tsx
 create mode 100644 src/utils/uploadthing/index.ts
 create mode 100644 src/utils/uploadthing/uploadthing.ts

diff --git a/next.config.js b/next.config.js
new file mode 100644
index 000000000..9eb8f3122
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    esmExternals: false,
+  },
+};
+
+module.exports = nextConfig;
diff --git a/package-lock.json b/package-lock.json
index e87219332..8c31fad95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@radix-ui/react-tabs": "^1.0.2",
         "@radix-ui/react-tooltip": "^1.0.3",
         "@supabase/supabase-js": "^2.11.0",
+        "@uploadthing/react": "^2.0.1",
         "axios": "^1.2.3",
         "axios-rate-limit": "^1.3.0",
         "class-variance-authority": "^0.4.0",
@@ -38,6 +39,7 @@
         "pino-logflare": "^0.3.12",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-dropzone": "^14.2.3",
         "react-fast-marquee": "^1.3.5",
         "react-hot-toast": "^2.4.0",
         "react-jazzicon": "^1.0.4",
@@ -45,6 +47,7 @@
         "siwe": "^2.1.3",
         "tailwind-merge": "^1.9.0",
         "tailwindcss-animate": "^1.0.5",
+        "uploadthing": "^2.0.1",
         "uuid": "^9.0.0",
         "wagmi": "~0.10.0"
       },
@@ -4254,6 +4257,16 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@uploadthing/react": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@uploadthing/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-wWqQBdFwZkIqlfwUledhzosT0bPrKuC/dS3Vx8iHRS3XsTugEroBEe5wU4bptXNkLk8C9yic/6hu+7lihDgWYg==",
+      "peerDependencies": {
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dropzone": "^14.2.3",
+        "uploadthing": "2.0.1"
+      }
+    },
     "node_modules/@wagmi/chains": {
       "version": "0.1.11",
       "resolved": "https://registry.npmjs.org/@wagmi/chains/-/chains-0.1.11.tgz",
@@ -5894,6 +5907,14 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -8670,6 +8691,17 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -12060,7 +12092,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12881,7 +12912,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -13067,6 +13097,22 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-fast-marquee": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.3.5.tgz",
@@ -14591,6 +14637,11 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uploadthing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/uploadthing/-/uploadthing-2.0.1.tgz",
+      "integrity": "sha512-KjOfJv8yBndB91UI1n0y2VoBQ3OveplAIB0poyx7lo1CSX6cIOD5y9PFtsD0in+g5WWqakdOj8YKJwUOfvtd9w=="
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index 4da848196..f185c25ed 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.3",
     "@supabase/supabase-js": "^2.11.0",
+    "@uploadthing/react": "^2.0.1",
     "axios": "^1.2.3",
     "axios-rate-limit": "^1.3.0",
     "class-variance-authority": "^0.4.0",
@@ -46,6 +47,7 @@
     "pino-logflare": "^0.3.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-fast-marquee": "^1.3.5",
     "react-hot-toast": "^2.4.0",
     "react-jazzicon": "^1.0.4",
@@ -53,6 +55,7 @@
     "siwe": "^2.1.3",
     "tailwind-merge": "^1.9.0",
     "tailwindcss-animate": "^1.0.5",
+    "uploadthing": "^2.0.1",
     "uuid": "^9.0.0",
     "wagmi": "~0.10.0"
   },
diff --git a/src/pages/api/uploadthing.ts b/src/pages/api/uploadthing.ts
new file mode 100644
index 000000000..089447cfe
--- /dev/null
+++ b/src/pages/api/uploadthing.ts
@@ -0,0 +1,8 @@
+import { createNextPageApiHandler } from "uploadthing/server";
+import fileRouter from "@/src/utils/uploadthing";
+
+const handler = createNextPageApiHandler({
+  router: fileRouter,
+});
+
+export default handler;
diff --git a/src/pages/upload/index.tsx b/src/pages/upload/index.tsx
new file mode 100644
index 000000000..7060ea575
--- /dev/null
+++ b/src/pages/upload/index.tsx
@@ -0,0 +1,56 @@
+import { generateReactHelpers } from "@uploadthing/react";
+import type { OurFileRouter } from "@/src/utils/uploadthing/uploadthing";
+import { PlusIcon } from "@heroicons/react/20/solid";
+import { useRef } from "react";
+
+const { useUploadThing } = generateReactHelpers<OurFileRouter>();
+
+const MultiUploader = () => {
+  const { getRootProps, getInputProps, isDragActive, files, startUpload } =
+    useUploadThing("imageUploader");
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+
+  return (
+    <div id="layout" className="max-w-4xl mx-auto">
+      <div className="flex flex-col gap-4">
+        <h2 className="font-bold">Content</h2>
+
+        <div className="flex flex-col border overflow-hidden items-center justify-center border-white/20 divide-y divide-white/20 rounded-md">
+          <div className="w-full" {...getRootProps()}>
+            <input {...getInputProps({})} ref={inputRef} />
+
+            <button
+              className="flex gap-2 items-center hover:bg-white/10 duration-150 cursor-pointer px-4 py-3 group w-full justify-center"
+              onClick={handleClick}
+            >
+              {files.length === 0 ? (
+                <>
+                  <PlusIcon className="w-6 h-6" />
+                  <span className="font-medium">Upload a file or a folder</span>
+                </>
+              ) : (
+                <button onClick={() => startUpload()}>
+                  Upload {files.length} files
+                </button>
+              )}
+            </button>
+          </div>
+        </div>
+        {files.length === 0 ? (
+          <></>
+        ) : (
+          <button onClick={() => startUpload()}>
+            Upload {files.length} files
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MultiUploader;
diff --git a/src/utils/uploadthing/index.ts b/src/utils/uploadthing/index.ts
new file mode 100644
index 000000000..4edc6bd2b
--- /dev/null
+++ b/src/utils/uploadthing/index.ts
@@ -0,0 +1,3 @@
+import { ourFileRouter } from "./uploadthing";
+
+export default ourFileRouter;
diff --git a/src/utils/uploadthing/uploadthing.ts b/src/utils/uploadthing/uploadthing.ts
new file mode 100644
index 000000000..64a54ea40
--- /dev/null
+++ b/src/utils/uploadthing/uploadthing.ts
@@ -0,0 +1,29 @@
+import { createFilething, type FileRouter } from "uploadthing/server";
+const f = createFilething();
+
+const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
+
+// FileRouter for your app, can contain multiple FileRoutes
+export const ourFileRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
+  imageUploader: f
+    // Set permissions and file types for this FileRoute
+    .fileTypes(["image", "video"])
+    .maxSize("1GB")
+    .middleware(async (req) => {
+      // This code runs on your server before upload
+      const user = await auth(req);
+
+      // If you throw, the user will not be able to upload
+      if (!user) throw new Error("Unauthorized");
+
+      // Whatever is returned here is accessible in onUploadComplete as `metadata`
+      return { userId: user.id };
+    })
+    .onUploadComplete(async ({ metadata }) => {
+      // This code RUNS ON YOUR SERVER after upload
+      console.log("Upload complete for userId:", metadata.userId);
+    }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;
diff --git a/tsconfig.json b/tsconfig.json
index 0da6c3f2a..54edf4f0f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,12 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "jest.config.js"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "jest.config.js",
+    "next.config.js"
+  ],
   "exclude": ["node_modules"]
 }

From c4751c0cf4b4d2554d544da2b72755191c36ba0c Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Wed, 17 May 2023 20:54:41 +0200
Subject: [PATCH 02/18] =?UTF-8?q?Add=20(working)=20LoopgateNode=20backend?=
 =?UTF-8?q?=20prototype=20=F0=9F=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env.d.ts                             |   1 +
 package-lock.json                    | 277 ++++++++++++++-------------
 package.json                         |   3 +-
 src/pages/_app.tsx                   |   1 -
 src/pages/api/submarine.ts           |  74 +++++++
 src/pages/api/uploadthing.ts         |   8 -
 src/pages/upload/form.tsx            |  54 ++++++
 src/pages/upload/index.tsx           | 218 +++++++++++++++++----
 src/utils/uploadthing/index.ts       |   3 -
 src/utils/uploadthing/uploadthing.ts |  29 ---
 10 files changed, 453 insertions(+), 215 deletions(-)
 create mode 100644 src/pages/api/submarine.ts
 delete mode 100644 src/pages/api/uploadthing.ts
 create mode 100644 src/pages/upload/form.tsx
 delete mode 100644 src/utils/uploadthing/index.ts
 delete mode 100644 src/utils/uploadthing/uploadthing.ts

diff --git a/env.d.ts b/env.d.ts
index 98b75d54d..65aa82b65 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -8,5 +8,6 @@ namespace NodeJS {
     NEXT_PUBLIC_SUPABASE_URL: string;
     NEXT_PUBLIC_LOGFLARE_API_KEY: string;
     NEXT_PUBLIC_LOGFLARE_SOURCE_TOKEN: string;
+    LOOPGATE_API_KEY: string;
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 8c31fad95..4ea6a55c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,6 @@
         "@radix-ui/react-tabs": "^1.0.2",
         "@radix-ui/react-tooltip": "^1.0.3",
         "@supabase/supabase-js": "^2.11.0",
-        "@uploadthing/react": "^2.0.1",
         "axios": "^1.2.3",
         "axios-rate-limit": "^1.3.0",
         "class-variance-authority": "^0.4.0",
@@ -33,6 +32,7 @@
         "date-fns": "^2.29.3",
         "ethers": "^5.7.2",
         "iron-session": "^6.3.1",
+        "jszip": "^3.10.1",
         "next": "^13.0.0",
         "pinata-submarine": "^0.1.6",
         "pino": "^8.11.0",
@@ -47,7 +47,6 @@
         "siwe": "^2.1.3",
         "tailwind-merge": "^1.9.0",
         "tailwindcss-animate": "^1.0.5",
-        "uploadthing": "^2.0.1",
         "uuid": "^9.0.0",
         "wagmi": "~0.10.0"
       },
@@ -2194,9 +2193,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.4.tgz",
-      "integrity": "sha512-x7ydhMpi9/xX7yVK+Fw33OuwwQWVZUFRxenK3z89fmPzQZyUk35Ynb+b7JkrhfRhDIFFvvqpzVSXeseSlBAw7A=="
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.3.4.tgz",
+      "integrity": "sha512-oTK/wRV2qga86m/4VdrR1+/56UA6U1Qv3sIgowB+bZjahniZLEG5BmmQjfoGv7ZuLXBZ8Eec6hkL9BqJcrEL2g=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "12.3.4",
@@ -2212,40 +2211,10 @@
       "resolved": "https://registry.npmjs.org/@next/font/-/font-13.1.6.tgz",
       "integrity": "sha512-AITjmeb1RgX1HKMCiA39ztx2mxeAyxl4ljv2UoSBUGAbFFMg8MO7YAvjHCgFhD39hL7YTbFjol04e/BPBH5RzQ=="
     },
-    "node_modules/@next/swc-android-arm-eabi": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.4.tgz",
-      "integrity": "sha512-5PAchzFst3In6Ml+9APvBj89H29lcPXcUqEYBVv09fWK/V4IuViKc2qOqM9pyPyw7KsqaZPmuqaG595E6jdZLA==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-android-arm64": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.1.4.tgz",
-      "integrity": "sha512-LCLjjRhsQ5fR9ExzR2fqxuyJe/D4Ct/YkdonVfJfqOfkEpFwUTQDOVo5GrQec4LZDk3zY+o6vZYjXbB0nD9VLA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.4.tgz",
-      "integrity": "sha512-LSc/tF1FQ1y1SwKiCdGg8IIl7+Csk6nuLcLIyQXs24UNYjXg5+7vUQXqE8y66v/Dq8qFDC9rM61QhpM9ZDftbg==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.4.tgz",
+      "integrity": "sha512-vux7RWfzxy1lD21CMwZsy9Ej+0+LZdIIj1gEhVmzOQqQZ5N56h8JamrjIVCfDL+Lpj8KwOmFZbPHE8qaYnL2pg==",
       "cpu": [
         "arm64"
       ],
@@ -2258,9 +2227,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.4.tgz",
-      "integrity": "sha512-WoApDo8xfafrNc9+Mz5MwGFKUwbDHsGqLleTGZ8upegwVqDyHsYzqJQudf+loqhV58oGTOqP1eWaHn2J7dijXA==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.3.4.tgz",
+      "integrity": "sha512-1tb+6JT98+t7UIhVQpKL7zegKnCs9RKU6cKNyj+DYKuC/NVl49/JaIlmwCwK8Ibl+RXxJrK7uSXSIO71feXsgw==",
       "cpu": [
         "x64"
       ],
@@ -2272,40 +2241,10 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@next/swc-freebsd-x64": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.4.tgz",
-      "integrity": "sha512-fqNyeT8G4guN8AHPIoBRhGY2GJg89FyWpuwX4o0Y3vUy/84IGZpNst3paCzaYkQSqQE/AuCpkB7hKxkN7ittXw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm-gnueabihf": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.4.tgz",
-      "integrity": "sha512-MEfm8OC1YR9/tYHUzlQsxcSmiuf8XdO7bqh5VtG4pilScjc5I5t+tQgIDgoDGePfh5W99W23hb3s6oCFrt99rw==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.4.tgz",
-      "integrity": "sha512-2wgth/KsuODzW/E7jsRoWdhKmE5oZzXcBPvf9RW+ZpBNvYQkEDlzfLA7n8DtxTU8I4oMas0mdEPdCWXrSNnVZw==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.3.4.tgz",
+      "integrity": "sha512-UqcKkYTKslf5YAJNtZ5XV1D5MQJIkVtDHL8OehDZERHzqOe7jvy41HFto33IDPPU8gJiP5eJb3V9U26uifqHjw==",
       "cpu": [
         "arm64"
       ],
@@ -2318,9 +2257,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.4.tgz",
-      "integrity": "sha512-GdWhCRljsT7rNEElEsdu4RRppd+XaQOX1IJslsh/+HU6LsJGUE8tXpa68yJjCsHZHifkbdZNeCr5SYdsN6CbAA==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.3.4.tgz",
+      "integrity": "sha512-HE/FmE8VvstAfehyo/XsrhGgz97cEr7uf9IfkgJ/unqSXE0CDshDn/4as6rRid74eDR8/exi7c2tdo49Tuqxrw==",
       "cpu": [
         "arm64"
       ],
@@ -2333,9 +2272,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.4.tgz",
-      "integrity": "sha512-Rsk/ojwYqMskN2eo5hUSVe7UuMV/aSjmrmJ0BCFGFPfBY9sPgmYj/oXlDDN0y5lJD9acPuiBjknLWgnOnx5JIA==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.3.4.tgz",
+      "integrity": "sha512-xU+ugaupGA4SL5aK1ZYEqVHrW3TPOhxVcpaJLfpANm2443J4GfxCmOacu9XcSgy5c51Mq7C9uZ1LODKHfZosRQ==",
       "cpu": [
         "x64"
       ],
@@ -2348,9 +2287,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.4.tgz",
-      "integrity": "sha512-gKSVPozedA2gpA+vggYnAqpDuzWFed2oxFeXxHw0aW2ALdAZswAinn1ZwXEQ5fHnVguxjZhH0+2nBxpMdF8p5Q==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.3.4.tgz",
+      "integrity": "sha512-cZvmf5KcYeTfIK6bCypfmxGUjme53Ep7hx94JJtGrYgCA1VwEuYdh+KouubJaQCH3aqnNE7+zGnVEupEKfoaaA==",
       "cpu": [
         "x64"
       ],
@@ -2363,9 +2302,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.4.tgz",
-      "integrity": "sha512-+kAXIIVb7Q4LCKmi7dn9qVlG1XUf3Chgj5Rwl0rAP4WBV2TnJIgsOEC24G1Mm3jjif+qXm7SJS9YZ9Yg3Y8sSQ==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.3.4.tgz",
+      "integrity": "sha512-7dL+CAUAjmgnVbjXPIpdj7/AQKFqEUL3bKtaOIE1JzJ5UMHHAXCPwzQtibrsvQpf9MwcAmiv8aburD3xH1xf8w==",
       "cpu": [
         "arm64"
       ],
@@ -2378,9 +2317,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.4.tgz",
-      "integrity": "sha512-EsfzAFBVaw1zg1FzlLMgRaTX/DKY+EnAvJ6mCIJMGeSOPIj4Oy6xF2yEQ3VaRkwFpAafHJH6JNB/CGrdKFCMXw==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.3.4.tgz",
+      "integrity": "sha512-qplTyzEl1vPkS+/DRK3pKSL0HeXrPHkYsV7U6gboHYpfqoHY+bcLUj3gwVUa9PEHRIoq4vXvPzx/WtzE6q52ng==",
       "cpu": [
         "ia32"
       ],
@@ -2393,9 +2332,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.4.tgz",
-      "integrity": "sha512-bygNjmnq+F9NqJXh7OfhJgqu6LGU29GNKQYVyZkxY/h5K0WWUvAE/VL+TdyMwbvQr9KByx5XLwORwetLxXCo4g==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.3.4.tgz",
+      "integrity": "sha512-usdvZT7JHrTuXC+4OKN5mCzUkviFkCyJJTkEz8jhBpucg+T7s83e7owm3oNFzmj5iKfvxU2St6VkcnSgpFvEYA==",
       "cpu": [
         "x64"
       ],
@@ -3558,9 +3497,9 @@
       }
     },
     "node_modules/@swc/helpers": {
-      "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
-      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
+      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -4257,16 +4196,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@uploadthing/react": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@uploadthing/react/-/react-2.0.1.tgz",
-      "integrity": "sha512-wWqQBdFwZkIqlfwUledhzosT0bPrKuC/dS3Vx8iHRS3XsTugEroBEe5wU4bptXNkLk8C9yic/6hu+7lihDgWYg==",
-      "peerDependencies": {
-        "react": "^17.0.2 || ^18.0.0",
-        "react-dropzone": "^14.2.3",
-        "uploadthing": "2.0.1"
-      }
-    },
     "node_modules/@wagmi/chains": {
       "version": "0.1.11",
       "resolved": "https://registry.npmjs.org/@wagmi/chains/-/chains-0.1.11.tgz",
@@ -6467,6 +6396,17 @@
         "node": ">=6.14.2"
       }
     },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
     "node_modules/cacheable-lookup": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz",
@@ -6893,6 +6833,11 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "node_modules/create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -9416,6 +9361,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -11002,6 +10952,49 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/keccak": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/keccak/-/keccak-3.0.3.tgz",
@@ -11075,6 +11068,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
@@ -11891,12 +11892,13 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.1.4.tgz",
-      "integrity": "sha512-g0oBUU+tcOPKbXTVdsDO2adc6wd/ggqauHHysPQJxuIKqZ+fwICGJht0C5D5V0A/77eQDF5EFwNdAHkFvBDsog==",
+      "version": "13.3.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.3.4.tgz",
+      "integrity": "sha512-sod7HeokBSvH5QV0KB+pXeLfcXUlLrGnVUXxHpmhilQ+nQYT3Im2O8DswD5e4uqbR8Pvdu9pcWgb1CbXZQZlmQ==",
       "dependencies": {
-        "@next/env": "13.1.4",
-        "@swc/helpers": "0.4.14",
+        "@next/env": "13.3.4",
+        "@swc/helpers": "0.5.1",
+        "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
         "postcss": "8.4.14",
         "styled-jsx": "5.1.1"
@@ -11905,24 +11907,21 @@
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=14.6.0"
+        "node": ">=16.8.0"
       },
       "optionalDependencies": {
-        "@next/swc-android-arm-eabi": "13.1.4",
-        "@next/swc-android-arm64": "13.1.4",
-        "@next/swc-darwin-arm64": "13.1.4",
-        "@next/swc-darwin-x64": "13.1.4",
-        "@next/swc-freebsd-x64": "13.1.4",
-        "@next/swc-linux-arm-gnueabihf": "13.1.4",
-        "@next/swc-linux-arm64-gnu": "13.1.4",
-        "@next/swc-linux-arm64-musl": "13.1.4",
-        "@next/swc-linux-x64-gnu": "13.1.4",
-        "@next/swc-linux-x64-musl": "13.1.4",
-        "@next/swc-win32-arm64-msvc": "13.1.4",
-        "@next/swc-win32-ia32-msvc": "13.1.4",
-        "@next/swc-win32-x64-msvc": "13.1.4"
-      },
-      "peerDependencies": {
+        "@next/swc-darwin-arm64": "13.3.4",
+        "@next/swc-darwin-x64": "13.3.4",
+        "@next/swc-linux-arm64-gnu": "13.3.4",
+        "@next/swc-linux-arm64-musl": "13.3.4",
+        "@next/swc-linux-x64-gnu": "13.3.4",
+        "@next/swc-linux-x64-musl": "13.3.4",
+        "@next/swc-win32-arm64-msvc": "13.3.4",
+        "@next/swc-win32-ia32-msvc": "13.3.4",
+        "@next/swc-win32-x64-msvc": "13.3.4"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
         "fibers": ">= 3.1.0",
         "node-sass": "^6.0.0 || ^7.0.0",
         "react": "^18.2.0",
@@ -11930,6 +11929,9 @@
         "sass": "^1.3.0"
       },
       "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
         "fibers": {
           "optional": true
         },
@@ -12306,6 +12308,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -12890,6 +12897,11 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "node_modules/process-warning": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-2.2.0.tgz",
@@ -13929,6 +13941,14 @@
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
     },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -14637,11 +14657,6 @@
         "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/uploadthing": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/uploadthing/-/uploadthing-2.0.1.tgz",
-      "integrity": "sha512-KjOfJv8yBndB91UI1n0y2VoBQ3OveplAIB0poyx7lo1CSX6cIOD5y9PFtsD0in+g5WWqakdOj8YKJwUOfvtd9w=="
-    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index f185c25ed..40a2cb572 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
     "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.3",
     "@supabase/supabase-js": "^2.11.0",
-    "@uploadthing/react": "^2.0.1",
     "axios": "^1.2.3",
     "axios-rate-limit": "^1.3.0",
     "class-variance-authority": "^0.4.0",
@@ -41,6 +40,7 @@
     "date-fns": "^2.29.3",
     "ethers": "^5.7.2",
     "iron-session": "^6.3.1",
+    "jszip": "^3.10.1",
     "next": "^13.0.0",
     "pinata-submarine": "^0.1.6",
     "pino": "^8.11.0",
@@ -55,7 +55,6 @@
     "siwe": "^2.1.3",
     "tailwind-merge": "^1.9.0",
     "tailwindcss-animate": "^1.0.5",
-    "uploadthing": "^2.0.1",
     "uuid": "^9.0.0",
     "wagmi": "~0.10.0"
   },
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index f46dd2188..9e2151b75 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -37,7 +37,6 @@ const App = ({ Component, pageProps }: AppProps) => {
                   fontSize: "14px",
                   border: "1px solid rgba(255,255,255,.2)",
                   maxWidth: "420px",
-                  width: "100%",
                   lineHeight: 1.5,
                 },
               }}
diff --git a/src/pages/api/submarine.ts b/src/pages/api/submarine.ts
new file mode 100644
index 000000000..44c5075bc
--- /dev/null
+++ b/src/pages/api/submarine.ts
@@ -0,0 +1,74 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import { siwe } from "@/src/utils/siwe";
+import logger from "@/src/utils/logger";
+import axios from "axios";
+
+const LOOPGATE_NODE_URL = {
+  LOCAL: "http://localhost:1337",
+  PROD: "https://loopgate.up.railway.app",
+};
+
+const error = {
+  methodNotAllowed: "Method not allowed, please use a POST request.",
+  unauthorized:
+    "You are not authorized to access this resource. Sign In With Ethereum, and try again.",
+  noBody:
+    "Your request does not contain a file body. Please add one, and try again.",
+  unableToUpload: "Unable to upload the file.",
+  generic: "Internal Server Error",
+};
+
+type HttpErrorCode = 400 | 401 | 403 | 404 | 405 | 500;
+
+const handleError = (
+  res: NextApiResponse,
+  httpErrorCode: HttpErrorCode,
+  message: string
+) => {
+  logger.error(message);
+  return res.status(httpErrorCode).end(message);
+};
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method !== "POST") {
+    handleError(res, 405, error.methodNotAllowed);
+  }
+
+  const siweSesh = await siwe.getSession(req, res);
+
+  if (!siweSesh.address) {
+    handleError(res, 401, error.unauthorized);
+  }
+
+  try {
+  } catch (err) {
+    handleError(res, 500, error.generic);
+  }
+
+  // Call LoopGate Node Backend to handle FileUpload
+  const result = await axios.post(
+    `${LOOPGATE_NODE_URL.LOCAL}/api/pinata/submarine/upload`,
+    req,
+    {
+      headers: {
+        "Content-Type": req.headers["content-type"],
+        "x-api-key": process.env.LOOPGATE_API_KEY,
+      },
+    }
+  );
+
+  if (!result) {
+    handleError(res, 500, error.unableToUpload);
+  }
+
+  return res.status(200).json(result.data.items);
+};
+
+export default withSessionRoute(handler);
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
diff --git a/src/pages/api/uploadthing.ts b/src/pages/api/uploadthing.ts
deleted file mode 100644
index 089447cfe..000000000
--- a/src/pages/api/uploadthing.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createNextPageApiHandler } from "uploadthing/server";
-import fileRouter from "@/src/utils/uploadthing";
-
-const handler = createNextPageApiHandler({
-  router: fileRouter,
-});
-
-export default handler;
diff --git a/src/pages/upload/form.tsx b/src/pages/upload/form.tsx
new file mode 100644
index 000000000..fe9c377b7
--- /dev/null
+++ b/src/pages/upload/form.tsx
@@ -0,0 +1,54 @@
+import React, { useState, ChangeEvent, FormEvent } from "react";
+import axios from "axios";
+import { cn } from "@/src/utils/generic";
+import Spinner from "@/src/components/Spinner";
+
+// Important: POST header: `Content-Type: multipart/form-data`.
+
+interface FileUploadState {
+  files: FileList | null;
+}
+
+export default function FileUploadForm() {
+  const [file, setFile] = useState<FileUploadState>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    setFile({ files });
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+
+    try {
+      if (file?.files) {
+        const formData = new FormData();
+        formData.append("file", file.files[0]);
+
+        const { data } = await axios.post("/api/submarine", formData);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="m-8 inline-flex flex-col gap-4">
+      <input type="file" onChange={handleFileChange} />
+      <button
+        type="submit"
+        className={cn(
+          "border rounded-sm border-white/10 py-3 duration-150",
+          file ? "text-white bg-white/5" : "text-white/40 cursor-not-allowed"
+        )}
+      >
+        Upload
+      </button>
+      {isLoading && <Spinner />}
+    </form>
+  );
+}
diff --git a/src/pages/upload/index.tsx b/src/pages/upload/index.tsx
index 7060ea575..fea9d3f28 100644
--- a/src/pages/upload/index.tsx
+++ b/src/pages/upload/index.tsx
@@ -1,56 +1,192 @@
-import { generateReactHelpers } from "@uploadthing/react";
-import type { OurFileRouter } from "@/src/utils/uploadthing/uploadthing";
+import { useState, useCallback, useEffect } from "react";
+import { useDropzone } from "react-dropzone";
+import Spinner from "@/src/components/Spinner";
 import { PlusIcon } from "@heroicons/react/20/solid";
-import { useRef } from "react";
+import { ArrowUpTrayIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
+import { cn } from "@/src/utils/generic";
+import { toast } from "react-hot-toast";
+import JSZip from "jszip";
+import { ArrowDownOnSquareIcon } from "@heroicons/react/24/outline";
+import { NoSymbolIcon } from "@heroicons/react/24/solid";
+import axios from "axios";
 
-const { useUploadThing } = generateReactHelpers<OurFileRouter>();
+// 1. Upload file to Zupload bucket
+// 2. Get bucket download link from Zupload
+// 3. Pass bucket download link to Pinata Submarine API
+// 4. onSuccess => delete file from Zupload bucket
 
-const MultiUploader = () => {
-  const { getRootProps, getInputProps, isDragActive, files, startUpload } =
-    useUploadThing("imageUploader");
+const UploadContainer = ({
+  children,
+  className,
+}: {
+  children: React.ReactElement | React.ReactElement[];
+  className?: string;
+}) => (
+  <div className={cn("flex items-center justify-center gap-2 h-24", className)}>
+    {children}
+  </div>
+);
 
-  const inputRef = useRef<HTMLInputElement>(null);
+const processFiles = async (files: File[]) => {
+  if (files.length === 1) {
+    return files[0];
+  } else {
+    const zip = new JSZip();
 
-  const handleClick = () => {
-    inputRef.current?.click();
+    for (const file of files) {
+      const fileData = await file.arrayBuffer();
+      zip.file(file.name, fileData);
+    }
+
+    const timestamp = new Date().toISOString().slice(0, 10);
+    const blob = await zip.generateAsync({ type: "blob" });
+    const file = new File([blob], `loopgate-unlockable@${timestamp}.zip`, {
+      type: "application/zip",
+    });
+
+    return file;
+  }
+};
+
+const UploadPage = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [fileUrl, setFileUrl] = useState<string | undefined>();
+
+  const onDrop = async (acceptedFiles: File[]) => {
+    console.log("onDrop");
+    setIsLoading(true);
+    try {
+      const file = acceptedFiles[0];
+      const response = await axios.post("/api/submarine", file);
+      if (response) {
+        console.log("SUCCESS");
+      }
+      console.log(response.data);
+      setIsLoading(false);
+    } catch (error) {
+      console.error(error);
+      setIsLoading(false);
+    }
   };
 
+  // const onDrop = useCallback(
+  //   async (acceptedFiles: File[]) => {
+  //     setIsLoading(true);
+  //     setFileUrl(undefined);
+
+  //     if (acceptedFiles.length === 0) {
+  //       setIsLoading(false);
+  //       toast.error("The file or files you tried to upload are not supported.");
+  //       return;
+  //     }
+
+  //     const processedFile = await processFiles(acceptedFiles);
+
+  //     await upload({ file: processedFile, key: processedFile.name });
+
+  //     const { error: downloadError, url: downloadUrl } = await download(
+  //       processedFile.name
+  //     );
+
+  //     if (!downloadUrl || downloadError) {
+  //       setIsLoading(false);
+  //       console.error(downloadError);
+  //       toast.error("Unable to retrieve bucket download link");
+  //       return;
+  //     }
+
+  //     if (downloadUrl) {
+  //       setFileUrl(downloadUrl);
+  //       setIsLoading(false);
+  //       toast.success("Upload succeeded!");
+  //     }
+  //   },
+  //   [download, upload]
+  // );
+
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    acceptedFiles,
+  } = useDropzone({
+    onDrop,
+    accept: {
+      "image/png": [".jpg", ".jpeg", ".png"],
+      "text/html": [".html", ".txt"],
+    },
+  });
+
   return (
-    <div id="layout" className="max-w-4xl mx-auto">
-      <div className="flex flex-col gap-4">
-        <h2 className="font-bold">Content</h2>
-
-        <div className="flex flex-col border overflow-hidden items-center justify-center border-white/20 divide-y divide-white/20 rounded-md">
-          <div className="w-full" {...getRootProps()}>
-            <input {...getInputProps({})} ref={inputRef} />
-
-            <button
-              className="flex gap-2 items-center hover:bg-white/10 duration-150 cursor-pointer px-4 py-3 group w-full justify-center"
-              onClick={handleClick}
-            >
-              {files.length === 0 ? (
-                <>
-                  <PlusIcon className="w-6 h-6" />
-                  <span className="font-medium">Upload a file or a folder</span>
-                </>
-              ) : (
-                <button onClick={() => startUpload()}>
-                  Upload {files.length} files
-                </button>
-              )}
-            </button>
-          </div>
+    <div className="max-w-2xl mx-auto p-8">
+      <div className="gap-2 flex flex-col">
+        <h2 className="font-medium">Content</h2>
+        <div className="rounded-md border border-white/20">
+          {isLoading ? (
+            <UploadContainer className="cursor-wait">
+              <Spinner />
+              <p className="text-sm text-white/70">Uploading your file(s)...</p>
+              {/* <p className="text-sm text-white/70">
+                Submarining your file(s)... (2/2)
+              </p> */}
+            </UploadContainer>
+          ) : (
+            <div {...getRootProps({ className: "dropzone" })}>
+              <input {...getInputProps()} />
+              <>
+                {isDragAccept && (
+                  <UploadContainer className="duration-150 bg-white/10 cursor-pointer">
+                    <p className="font-medium text-sm">
+                      Drop it like it&apos; hot
+                    </p>
+                    <ArrowUpTrayIcon className="w-5 h-5" />
+                  </UploadContainer>
+                )}
+                {isDragReject && (
+                  <UploadContainer className="duration-150 cursor-blocked">
+                    <NoSymbolIcon className="w-5 h-5" />
+                    <p className="font-medium text-sm">
+                      File format not supported
+                    </p>
+                  </UploadContainer>
+                )}
+                {!isDragActive && (
+                  <UploadContainer className="duration-150 hover:bg-white/10 cursor-pointer active:bg-white/0">
+                    <PlusIcon className="w-5 h-5" />
+                    <p className="font-medium text-sm">
+                      Click or drag to upload a file
+                    </p>
+                  </UploadContainer>
+                )}
+              </>
+            </div>
+          )}
+          {/* <div className="border-t p-2 border-white/20 flex gap-2 justify-between">
+            <div className="flex gap-1 items-center">
+              <CheckCircleIcon className="text-sky-500 w-4 h-4" />
+              <p className="text-xs text-white/70">File(s) hosted on IPFS.</p>
+            </div>
+            <p className="text-xs text-white/70 w-40 truncate">
+              bafybeiehgpaip4f7jafzf7imgannx3nnv3ubaiwp6ph56mlyzijpqxi45m
+            </p>
+          </div> */}
         </div>
-        {files.length === 0 ? (
-          <></>
-        ) : (
-          <button onClick={() => startUpload()}>
-            Upload {files.length} files
-          </button>
+      </div>
+      <div>
+        {fileUrl && (
+          <a
+            className="px-3 py-2 rounded-md bg-white/10 border border-white/10 mt-4 inline-flex items-center gap-2 text-sm"
+            href={fileUrl}
+          >
+            <span>Public Bucket Download</span>
+            <ArrowDownOnSquareIcon className="w-4 h-4" />
+          </a>
         )}
       </div>
     </div>
   );
 };
 
-export default MultiUploader;
+export default UploadPage;
diff --git a/src/utils/uploadthing/index.ts b/src/utils/uploadthing/index.ts
deleted file mode 100644
index 4edc6bd2b..000000000
--- a/src/utils/uploadthing/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ourFileRouter } from "./uploadthing";
-
-export default ourFileRouter;
diff --git a/src/utils/uploadthing/uploadthing.ts b/src/utils/uploadthing/uploadthing.ts
deleted file mode 100644
index 64a54ea40..000000000
--- a/src/utils/uploadthing/uploadthing.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createFilething, type FileRouter } from "uploadthing/server";
-const f = createFilething();
-
-const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
-
-// FileRouter for your app, can contain multiple FileRoutes
-export const ourFileRouter = {
-  // Define as many FileRoutes as you like, each with a unique routeSlug
-  imageUploader: f
-    // Set permissions and file types for this FileRoute
-    .fileTypes(["image", "video"])
-    .maxSize("1GB")
-    .middleware(async (req) => {
-      // This code runs on your server before upload
-      const user = await auth(req);
-
-      // If you throw, the user will not be able to upload
-      if (!user) throw new Error("Unauthorized");
-
-      // Whatever is returned here is accessible in onUploadComplete as `metadata`
-      return { userId: user.id };
-    })
-    .onUploadComplete(async ({ metadata }) => {
-      // This code RUNS ON YOUR SERVER after upload
-      console.log("Upload complete for userId:", metadata.userId);
-    }),
-} satisfies FileRouter;
-
-export type OurFileRouter = typeof ourFileRouter;

From d173ea3341eced5b904805e5c5a3e60025225a9a Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Wed, 17 May 2023 21:01:08 +0200
Subject: [PATCH 03/18] Cleanup

---
 next.config.js             | 8 --------
 src/pages/upload/index.tsx | 5 +++++
 tsconfig.json              | 8 +-------
 3 files changed, 6 insertions(+), 15 deletions(-)
 delete mode 100644 next.config.js

diff --git a/next.config.js b/next.config.js
deleted file mode 100644
index 9eb8f3122..000000000
--- a/next.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    esmExternals: false,
-  },
-};
-
-module.exports = nextConfig;
diff --git a/src/pages/upload/index.tsx b/src/pages/upload/index.tsx
index fea9d3f28..f314c550b 100644
--- a/src/pages/upload/index.tsx
+++ b/src/pages/upload/index.tsx
@@ -1,3 +1,8 @@
+/**
+ * Note: This is a file left from a bucket exploration (which unfortunately did not work.)
+ * There are some parts in this code that I'd like to reuse. Beware, it is messy though.
+ */
+
 import { useState, useCallback, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
 import Spinner from "@/src/components/Spinner";
diff --git a/tsconfig.json b/tsconfig.json
index 54edf4f0f..0da6c3f2a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,12 +19,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "jest.config.js",
-    "next.config.js"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "jest.config.js"],
   "exclude": ["node_modules"]
 }

From 050a5e9e3203a4071e866301e1a709af51818922 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sun, 21 May 2023 17:46:34 +0200
Subject: [PATCH 04/18] =?UTF-8?q?Create=20unlock=C2=A0overviews=20by=20'ow?=
 =?UTF-8?q?ner'=20&=20minor=20code=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/Button.tsx           |  6 +-
 src/components/Footer/FooterLink.tsx       |  2 +-
 src/pages/unlocks/browse.tsx               | 30 ++++++++--
 src/utils/generic/fetchAllUnlockables.ts   | 20 ++++---
 src/utils/generic/fetchUnlockableByUuid.ts | 12 ++--
 src/utils/generic/findAllUnlockables.ts    |  5 ++
 src/utils/loopring/_types.ts               | 69 ++++++++++++++++++++++
 src/utils/loopring/extractNfts.ts          |  6 +-
 src/utils/supabase/index.ts                |  4 +-
 src/utils/supabase/supabase.ts             |  4 +-
 10 files changed, 126 insertions(+), 32 deletions(-)
 create mode 100644 src/utils/loopring/_types.ts

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 81b3a237a..964c1e456 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,9 +1,9 @@
-interface IButton {
-  onClick: any;
+interface Props {
+  onClick: () => void;
   children: JSX.Element | JSX.Element[];
 }
 
-const Button = ({ onClick, children }: IButton): React.ReactElement => {
+const Button = ({ onClick, children }: Props): React.ReactElement => {
   return (
     <button
       onClick={onClick}
diff --git a/src/components/Footer/FooterLink.tsx b/src/components/Footer/FooterLink.tsx
index fcab9c5b9..70da0075e 100644
--- a/src/components/Footer/FooterLink.tsx
+++ b/src/components/Footer/FooterLink.tsx
@@ -1,6 +1,6 @@
 interface IFooterLink {
   href: string;
-  children: any;
+  children: JSX.Element | JSX.Element[];
 }
 
 const FooterLink = ({ href, children }: IFooterLink) => {
diff --git a/src/pages/unlocks/browse.tsx b/src/pages/unlocks/browse.tsx
index 3d08b41c7..61f77e5bb 100644
--- a/src/pages/unlocks/browse.tsx
+++ b/src/pages/unlocks/browse.tsx
@@ -11,10 +11,20 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     "public, s-maxage=3000, stale-while-revalidate=5000"
   );
 
+  const getOwner = () => {
+    if (!context.query.owner) {
+      return;
+    }
+
+    return context.query.owner[0];
+  };
+
+  const owner = getOwner();
+
   const unlockables =
     process.env.LOOPGATE_MODE === "supabase"
-      ? await fetchAllUnlockables() // Use Supabase as the source for the Unlockables
-      : findAllUnlockables(); // Use the 'config.ts' file as the source for the Unlockables
+      ? await fetchAllUnlockables(owner) // Use Supabase as the source for the Unlockables
+      : findAllUnlockables(owner); // Use the 'config.ts' file as the source for the Unlockables
 
   if (!unlockables) {
     return {
@@ -23,15 +33,25 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 
   return {
-    props: { unlockables: unlockables },
+    props: { unlockables: unlockables, query: context.query.owner },
   };
 };
 
-const Page = ({ unlockables }: { unlockables: UnlockableV2[] | [] }) => {
+const Page = ({
+  unlockables,
+  query,
+}: {
+  unlockables: UnlockableV2[];
+  query?: string;
+}) => {
   if (unlockables.length === 0) {
     return (
       <FourOhFour
-        label={"This LoopGate Instance does not have any Unlockables yet."}
+        label={
+          query
+            ? `No Unlockables by '${query}' could be found on this LoopGate Instance.`
+            : "This LoopGate Instance does not have any Unlockables yet."
+        }
       />
     );
   }
diff --git a/src/utils/generic/fetchAllUnlockables.ts b/src/utils/generic/fetchAllUnlockables.ts
index 45dfdf4da..273fc5e86 100644
--- a/src/utils/generic/fetchAllUnlockables.ts
+++ b/src/utils/generic/fetchAllUnlockables.ts
@@ -1,22 +1,24 @@
-import supabase from "../supabase";
+import Supabase from "../supabase";
 import { parseSqlUnlockable } from "../supabase/helpers";
 
-const fetchALlUnlockables = async () => {
-  let { data: unlockables, error } = await supabase
-    .from("unlockables_with_criteria")
-    .select(`*`);
+const fetchAllUnlockables = async (owner?: string) => {
+  let { data: unlockables, error } = await Supabase.from(
+    "unlockables_with_criteria"
+  )
+    .select(`*`)
+    .eq("owner", owner ? owner : "*");
 
   if (error) {
     throw error;
   }
 
   if (unlockables) {
-    const parsedUnlockables = unlockables.map((item) => {
-      return parseSqlUnlockable(item);
-    });
+    const parsedUnlockables = unlockables.map((item) =>
+      parseSqlUnlockable(item)
+    );
 
     return parsedUnlockables;
   }
 };
 
-export default fetchALlUnlockables;
+export default fetchAllUnlockables;
diff --git a/src/utils/generic/fetchUnlockableByUuid.ts b/src/utils/generic/fetchUnlockableByUuid.ts
index bc66d0d8a..c762edc9a 100644
--- a/src/utils/generic/fetchUnlockableByUuid.ts
+++ b/src/utils/generic/fetchUnlockableByUuid.ts
@@ -1,11 +1,6 @@
-import supabase from "../supabase";
+import Supabase from "../supabase";
 import { parseSqlUnlockable } from "../supabase/helpers";
 
-// WIP: See https://supabase.com/docs/reference/javascript/typescript-support#type-hints
-// type UnlockablesResponse = Awaited<ReturnType<typeof fetchUnlockableByUuid>>;
-// export type UnlockablesResponseSuccess = UnlockablesResponse["data"];
-// export type UnlockablesResponseError = UnlockablesResponse["error"];
-
 // TODO: Inserting data https://supabase.com/docs/reference/javascript/insert
 // TODO: Updating data https://supabase.com/docs/reference/javascript/update
 // OR: Upserting data https://supabase.com/docs/reference/javascript/upsert
@@ -13,8 +8,9 @@ import { parseSqlUnlockable } from "../supabase/helpers";
 // RLS Policies: Only auth users can mutate
 
 const fetchUnlockableByUuid = async (uuid: string) => {
-  let { data: unlockables, error } = await supabase
-    .from("unlockables_with_criteria")
+  let { data: unlockables, error } = await Supabase.from(
+    "unlockables_with_criteria"
+  )
     .select(`*`)
     .eq("id", uuid)
     .maybeSingle();
diff --git a/src/utils/generic/findAllUnlockables.ts b/src/utils/generic/findAllUnlockables.ts
index 50a0e1a38..cad7c145d 100644
--- a/src/utils/generic/findAllUnlockables.ts
+++ b/src/utils/generic/findAllUnlockables.ts
@@ -2,12 +2,17 @@ import { unlockablesV2 } from "../../config/config";
 import { UnlockableV2, ConfigError } from "../../config/types";
 
 const findAllUnlockables = (
+  owner?: string,
   unlockablesArray: UnlockableV2[] = unlockablesV2
 ) => {
   if (unlockablesArray.length === 0) {
     throw new ConfigError("Empty config file");
   }
 
+  if (owner) {
+    return unlockablesArray.filter((unlockable) => unlockable.owner === owner);
+  }
+
   return unlockablesArray;
 };
 
diff --git a/src/utils/loopring/_types.ts b/src/utils/loopring/_types.ts
new file mode 100644
index 000000000..97c255838
--- /dev/null
+++ b/src/utils/loopring/_types.ts
@@ -0,0 +1,69 @@
+export type UnixDate = number;
+
+export type NftType = "ERC1155" | "ERC721";
+
+interface CollectionInfo {
+  id: number;
+  owner: `0x${string}`;
+  name: string;
+  contractAddress: `0x${string}`;
+  collectionAddress: `0x${string}`;
+  baseUri: string;
+  nftFactory: `0x${string}`;
+  description: string;
+  avatar: string;
+  banner: string;
+  thumbnail: string;
+  tileUri: string;
+  cached: {
+    avatar: string;
+    banner: string;
+    tileUri: string;
+    thumbnail: string;
+  };
+  deploymentStatus: "NOT_DEPLOYED";
+  nftType: NftType;
+  times: {
+    createdAt: UnixDate;
+    updatedAt: UnixDate;
+  };
+  extra: {
+    properties: {
+      isLegacy: boolean;
+      isPublic: boolean;
+      isCounterFactualNFT: boolean;
+      isMintable: boolean;
+      isEditable: boolean;
+      isDeletable: boolean;
+    };
+    mintChannel: string;
+  };
+}
+
+export interface NftBalanceResponse {
+  totalNum: number;
+  data: {
+    id: number;
+    accountId: number;
+    nftData: `0x${string}`;
+    tokenAddress: `0x${string}`;
+    nftId: `0x${string}`;
+    nftType: NftType;
+    total: string;
+    locked: string;
+    pending: {
+      withdraw: string;
+      deposit: string;
+    };
+    deploymentStatus: string;
+    isCounterfactualNFT: boolean;
+    minter: `0x${string}`;
+    royaltyPercentage: number;
+    preference: {
+      favourite: boolean;
+      hide: boolean;
+    };
+    collectionInfo: CollectionInfo;
+    updatedAt: UnixDate;
+  }[];
+}
diff --git a/src/utils/loopring/extractNfts.ts b/src/utils/loopring/extractNfts.ts
index 724a6bb61..bdbea5822 100644
--- a/src/utils/loopring/extractNfts.ts
+++ b/src/utils/loopring/extractNfts.ts
@@ -1,7 +1,9 @@
+import { NftBalanceResponse } from "./_types";
+
 // Parses a Loopring API response to extract the NFT IDs
-const extractNfts = (res: any) => {
+const extractNfts = (apiRes: any) => {
   let nfts: string[] = [];
-  res.forEach((item: any) => {
+  apiRes.forEach((item: any) => {
     nfts.push(item.nftId);
   });
 
diff --git a/src/utils/supabase/index.ts b/src/utils/supabase/index.ts
index 4e83902a0..44be9b5a6 100644
--- a/src/utils/supabase/index.ts
+++ b/src/utils/supabase/index.ts
@@ -1,5 +1,5 @@
-import supabase from "./supabase";
+import Supabase from "./supabase";
 import * as helpers from "./helpers";
 
 export { helpers };
-export default supabase;
+export default Supabase;
diff --git a/src/utils/supabase/supabase.ts b/src/utils/supabase/supabase.ts
index b81f59017..9b438f9fd 100644
--- a/src/utils/supabase/supabase.ts
+++ b/src/utils/supabase/supabase.ts
@@ -1,9 +1,9 @@
 import { createClient } from "@supabase/supabase-js";
 import { Database } from "./types";
 
-const supabase = createClient<Database>(
+const Supabase = createClient<Database>(
   process.env.NEXT_PUBLIC_SUPABASE_URL || "Undefined supabase URL",
   process.env.NEXT_PUBLIC_SUPABASE_ANON || "Undefined supabase Anon"
 );
 
-export default supabase;
+export default Supabase;

From 150ec367f98d45812da21e99389ca467ac0416e8 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Tue, 23 May 2023 23:05:36 +0200
Subject: [PATCH 05/18] WIP: Add routes for creating and updating Unlockables

---
 .github/workflows/main.yml               |   4 +-
 .github/workflows/pr.yml                 |   4 +-
 env.d.ts                                 |   2 +
 src/middleware/checkAuthentication.ts    |  64 +++++++
 src/middleware/handleError.ts            |   8 +
 src/middleware/index.ts                  |   4 +
 src/middleware/loopgateError.ts          |  17 ++
 src/middleware/redirectTo.ts             |   8 +
 src/pages/api/submarine.ts               |  74 --------
 src/pages/api/upload/createUnlockable.ts |  50 ++++++
 src/pages/api/upload/submarine.ts        |  74 ++++++++
 src/pages/api/upload/updateUnlockable.ts |  94 ++++++++++
 src/pages/unlocks/browse.tsx             |  14 +-
 src/pages/upload/form.tsx                | 107 +++++++++--
 src/utils/generic/fetchAllUnlockables.ts |   4 +-
 src/utils/siwe/configureSIWE.tsx         |   3 +
 src/utils/supabase/supabase.ts           |   7 +
 src/utils/supabase/types.ts              | 217 +++++++++++++----------
 18 files changed, 557 insertions(+), 198 deletions(-)
 create mode 100644 src/middleware/checkAuthentication.ts
 create mode 100644 src/middleware/handleError.ts
 create mode 100644 src/middleware/index.ts
 create mode 100644 src/middleware/loopgateError.ts
 create mode 100644 src/middleware/redirectTo.ts
 delete mode 100644 src/pages/api/submarine.ts
 create mode 100644 src/pages/api/upload/createUnlockable.ts
 create mode 100644 src/pages/api/upload/submarine.ts
 create mode 100644 src/pages/api/upload/updateUnlockable.ts

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 0a621c03f..4fbecf03d 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -8,8 +8,8 @@ jobs:
   main:
     runs-on: ubuntu-latest
     env:
-      NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
-      NEXT_PUBLIC_SUPABASE_ANON: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON }}
+      SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+      SUPABASE_ANON: ${{ secrets.SUPABASE_ANON }}
     steps:
       - name: 🏗 Setup repo
         uses: actions/checkout@v3
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 48c01776c..105c23125 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -6,8 +6,8 @@ jobs:
   main:
     runs-on: ubuntu-latest
     env:
-      NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
-      NEXT_PUBLIC_SUPABASE_ANON: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON }}
+      SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+      SUPABASE_ANON: ${{ secrets.SUPABASE_ANON }}
     steps:
       - name: 🏗 Setup repo
         uses: actions/checkout@v3
diff --git a/env.d.ts b/env.d.ts
index 65aa82b65..c76c0f080 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -6,8 +6,10 @@ namespace NodeJS {
     SESSION_SECRET: string;
     NEXT_PUBLIC_SUPABASE_ANON: string;
     NEXT_PUBLIC_SUPABASE_URL: string;
+    SUPABASE_SERVICE_ROLE: string;
     NEXT_PUBLIC_LOGFLARE_API_KEY: string;
     NEXT_PUBLIC_LOGFLARE_SOURCE_TOKEN: string;
     LOOPGATE_API_KEY: string;
+    LOOPGATE_CC_THRESHOLD: string;
   }
 }
diff --git a/src/middleware/checkAuthentication.ts b/src/middleware/checkAuthentication.ts
new file mode 100644
index 000000000..af19c1d26
--- /dev/null
+++ b/src/middleware/checkAuthentication.ts
@@ -0,0 +1,64 @@
+import { GetServerSidePropsContext } from "next";
+import { siwe } from "@/src/utils/siwe";
+import Supabase from "@/src/utils/supabase";
+import logger from "@/src/utils/logger";
+import { NextApiRequest, NextApiResponse } from "next";
+
+interface AuthSuccess {
+  authenticated: true;
+  address: string;
+}
+
+type AuthError = undefined;
+
+type AuthResponse = Promise<AuthSuccess | AuthError>;
+
+export function checkAuthentication(
+  req: NextApiRequest,
+  res: NextApiResponse
+): AuthResponse;
+
+export function checkAuthentication(
+  context: GetServerSidePropsContext
+): AuthResponse;
+
+export async function checkAuthentication(
+  arg1: NextApiRequest | GetServerSidePropsContext,
+  arg2?: NextApiResponse
+): AuthResponse {
+  // Overload the function
+  const getSiweSesh = async () => {
+    if (arg2) {
+      const req = arg1 as NextApiRequest;
+      const res = arg2 as NextApiResponse;
+      return await siwe.getSession(req, res);
+    } else {
+      const context = arg1 as GetServerSidePropsContext;
+      return await siwe.getSession(context.req, context.res);
+    }
+  };
+
+  const siweSesh = await getSiweSesh();
+
+  try {
+    const { data } = await Supabase.from("calcium-crew-holders")
+      .select("*")
+      .eq("eth_address", siweSesh.address?.toLowerCase())
+      .single();
+
+    if (
+      !data?.amount ||
+      data.amount < parseInt(process.env.LOOPGATE_CC_THRESHOLD, 10)
+    ) {
+      return;
+    }
+  } catch (err) {
+    logger.error(err);
+    return;
+  }
+
+  return {
+    authenticated: true,
+    address: siweSesh.address as string,
+  };
+}
diff --git a/src/middleware/handleError.ts b/src/middleware/handleError.ts
new file mode 100644
index 000000000..87f877e19
--- /dev/null
+++ b/src/middleware/handleError.ts
@@ -0,0 +1,8 @@
+import logger from "@/src/utils/logger";
+import { NextApiResponse } from "next";
+import { Error } from "./loopgateError";
+
+export const handleError = (res: NextApiResponse, error: Error) => {
+  logger.error(error[1]);
+  return res.status(error[0]).send(error[1]);
+};
diff --git a/src/middleware/index.ts b/src/middleware/index.ts
new file mode 100644
index 000000000..73eebf3f6
--- /dev/null
+++ b/src/middleware/index.ts
@@ -0,0 +1,4 @@
+export { checkAuthentication } from "./checkAuthentication";
+export { redirectTo } from "./redirectTo";
+export { handleError } from "./handleError";
+export { LoopgateError } from "./loopgateError";
diff --git a/src/middleware/loopgateError.ts b/src/middleware/loopgateError.ts
new file mode 100644
index 000000000..6daf83de6
--- /dev/null
+++ b/src/middleware/loopgateError.ts
@@ -0,0 +1,17 @@
+export type Error = [code: HttpErrorCode, message: string];
+
+type HttpErrorCode = 400 | 401 | 403 | 404 | 405 | 500;
+
+export const LoopgateError: { [key: string]: Error } = {
+  noPostRequest: [405, "Method not allowed, please use a POST request."],
+  unauthorized: [
+    401,
+    "You are not authorized to access this resource. Sign In With Ethereum, and try again.",
+  ],
+  unableToUpload: [500, "Unable to upload the file(s)."],
+  badRequest: [
+    400,
+    "Bad request. Check the parameters or body before trying again.",
+  ],
+  server: [500, "Internal server error"],
+};
diff --git a/src/middleware/redirectTo.ts b/src/middleware/redirectTo.ts
new file mode 100644
index 000000000..e01f423d6
--- /dev/null
+++ b/src/middleware/redirectTo.ts
@@ -0,0 +1,8 @@
+export const redirectTo = (url: string, isPermanent: boolean = false) => {
+  return {
+    redirect: {
+      destination: url,
+      permanent: isPermanent,
+    },
+  };
+};
diff --git a/src/pages/api/submarine.ts b/src/pages/api/submarine.ts
deleted file mode 100644
index 44c5075bc..000000000
--- a/src/pages/api/submarine.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
-import { siwe } from "@/src/utils/siwe";
-import logger from "@/src/utils/logger";
-import axios from "axios";
-
-const LOOPGATE_NODE_URL = {
-  LOCAL: "http://localhost:1337",
-  PROD: "https://loopgate.up.railway.app",
-};
-
-const error = {
-  methodNotAllowed: "Method not allowed, please use a POST request.",
-  unauthorized:
-    "You are not authorized to access this resource. Sign In With Ethereum, and try again.",
-  noBody:
-    "Your request does not contain a file body. Please add one, and try again.",
-  unableToUpload: "Unable to upload the file.",
-  generic: "Internal Server Error",
-};
-
-type HttpErrorCode = 400 | 401 | 403 | 404 | 405 | 500;
-
-const handleError = (
-  res: NextApiResponse,
-  httpErrorCode: HttpErrorCode,
-  message: string
-) => {
-  logger.error(message);
-  return res.status(httpErrorCode).end(message);
-};
-
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method !== "POST") {
-    handleError(res, 405, error.methodNotAllowed);
-  }
-
-  const siweSesh = await siwe.getSession(req, res);
-
-  if (!siweSesh.address) {
-    handleError(res, 401, error.unauthorized);
-  }
-
-  try {
-  } catch (err) {
-    handleError(res, 500, error.generic);
-  }
-
-  // Call LoopGate Node Backend to handle FileUpload
-  const result = await axios.post(
-    `${LOOPGATE_NODE_URL.LOCAL}/api/pinata/submarine/upload`,
-    req,
-    {
-      headers: {
-        "Content-Type": req.headers["content-type"],
-        "x-api-key": process.env.LOOPGATE_API_KEY,
-      },
-    }
-  );
-
-  if (!result) {
-    handleError(res, 500, error.unableToUpload);
-  }
-
-  return res.status(200).json(result.data.items);
-};
-
-export default withSessionRoute(handler);
-
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-};
diff --git a/src/pages/api/upload/createUnlockable.ts b/src/pages/api/upload/createUnlockable.ts
new file mode 100644
index 000000000..64d1ea5fb
--- /dev/null
+++ b/src/pages/api/upload/createUnlockable.ts
@@ -0,0 +1,50 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import {
+  checkAuthentication,
+  handleError,
+  LoopgateError,
+} from "@/src/middleware";
+import { createClient } from "@supabase/supabase-js";
+import { Database } from "@/src/utils/supabase/types";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method !== "POST") {
+    return handleError(res, LoopgateError.noPostRequest);
+  }
+
+  const auth = await checkAuthentication(req, res);
+  if (!auth) {
+    return handleError(res, LoopgateError.unauthorized);
+  }
+
+  if (!req.body.uuid || !req.body.cid) {
+    return handleError(res, LoopgateError.badRequest);
+  }
+
+  // Create server Supabase client
+  const Supabase = createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.SUPABASE_SERVICE_ROLE
+  );
+
+  const { error } = await Supabase.from("unlockables").insert({
+    id: req.body.uuid,
+    owner: auth.address,
+    content_type_id: 1, // IPFS Unlockable
+    content_url: req.body.cid,
+    criteria_unlock_amount: 1,
+  });
+
+  console.log(error);
+
+  if (error) {
+    return handleError(res, [500, error.message]);
+  }
+
+  return res.status(200).json({
+    message: `Successfully created Unlockable with UUID of ${req.body.uuid}.`,
+  });
+};
+
+export default withSessionRoute(handler);
diff --git a/src/pages/api/upload/submarine.ts b/src/pages/api/upload/submarine.ts
new file mode 100644
index 000000000..65bf4daf4
--- /dev/null
+++ b/src/pages/api/upload/submarine.ts
@@ -0,0 +1,74 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import {
+  checkAuthentication,
+  handleError,
+  LoopgateError,
+} from "@/src/middleware";
+import axios from "axios";
+import { v4 as uuidv4 } from "uuid";
+
+export interface UploadResponse {
+  data: {
+    uuid: string;
+    cid: string;
+  };
+}
+
+interface NodeUploadResponse {
+  data: {
+    status: 200;
+    items: {
+      id: string;
+      createdAt: string;
+      cid: string;
+      name: string;
+      originalname: string;
+      metadata: {};
+      type: "F";
+      pinToIPFS: false;
+      uri: string;
+      isDuplicate: boolean;
+    }[];
+  };
+}
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method !== "POST") {
+    return handleError(res, LoopgateError.methodNotAllowed);
+  }
+
+  const isAuthenticated = await checkAuthentication(req, res);
+  if (!isAuthenticated) {
+    return handleError(res, LoopgateError.unauthorized);
+  }
+
+  // Call LoopGate Node Backend to handle FileUpload
+  const result: NodeUploadResponse | undefined = await axios.post(
+    `${process.env.LOOPGATE_API_URL}/api/pinata/submarine/upload`,
+    req,
+    {
+      headers: {
+        "Content-Type": req.headers["content-type"],
+        "x-api-key": process.env.LOOPGATE_API_KEY,
+      },
+    }
+  );
+
+  if (!result) {
+    return handleError(res, LoopgateError.unableToUpload);
+  }
+
+  return res.status(200).json({
+    uuid: uuidv4(),
+    cid: result.data.items[0].cid,
+  });
+};
+
+export default withSessionRoute(handler);
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
diff --git a/src/pages/api/upload/updateUnlockable.ts b/src/pages/api/upload/updateUnlockable.ts
new file mode 100644
index 000000000..5b9fb4b98
--- /dev/null
+++ b/src/pages/api/upload/updateUnlockable.ts
@@ -0,0 +1,94 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import {
+  checkAuthentication,
+  handleError,
+  LoopgateError,
+} from "@/src/middleware";
+import { createClient } from "@supabase/supabase-js";
+import { Database } from "@/src/utils/supabase/types";
+
+type UUID = string;
+
+interface UnlockCriterion {
+  unlockable_id: UUID;
+  nft_id: string;
+}
+
+export interface UnlockableUpdateProps {
+  body: {
+    unlockable: {
+      uuid: UUID;
+      criteria_unlock_amount?: number;
+      description?: string;
+      name?: string;
+    };
+    unlock_criteria: UnlockCriterion[];
+  };
+}
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method !== "POST") {
+    return handleError(res, LoopgateError.noPostRequest);
+  }
+
+  const auth = await checkAuthentication(req, res);
+  if (!auth) {
+    return handleError(res, LoopgateError.unauthorized);
+  }
+
+  if (!req.body.unlockable.uuid || req.body.unlockable.unlock_criteria) {
+    return handleError(res, LoopgateError.badRequest);
+  }
+
+  // Create server Supabase client
+  const Supabase = createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.SUPABASE_SERVICE_ROLE
+  );
+
+  const { error: updateUnlockableError } = await Supabase.from("unlockables")
+    .update({
+      // Changing the ContentType and URL are not implemented, for now.
+      // content_type_id: req.body?.content_type_id,
+      // content_url: req.body?.cid,
+      criteria_unlock_amount: req.body.unlockable?.criteria_unlock_amount,
+      description: req.body.unlockable?.description,
+      name: req.body.unlockable?.name,
+    })
+    .eq("id", req.body.unlockable.uuid);
+
+  if (updateUnlockableError) {
+    return handleError(res, [500, updateUnlockableError.message]);
+  }
+
+  const { error: deleteCriteriaError } = await Supabase.from("unlock_criteria")
+    .delete()
+    .eq("unlockable_id", req.body.uuid);
+
+  if (deleteCriteriaError) {
+    return handleError(res, [500, deleteCriteriaError.message]);
+  }
+
+  const unlockCriteria: {
+    unlockable_id: UUID;
+    nft_id: string;
+    owner: string;
+  }[] = req.body.unlockCriteria.map((x: UnlockCriterion) => {
+    return { ...x, owner: auth.address };
+  });
+
+  const { error: insertCriteriaError } = await Supabase.from(
+    "unlock_criteria"
+  ).insert(unlockCriteria);
+
+  if (insertCriteriaError) {
+    return handleError(res, [500, insertCriteriaError.message]);
+  }
+
+  return res.status(200).json({
+    message: `Successfully updated Unlockable and Unlock Criteria with UUID of ${req.body.uuid}.`,
+  });
+};
+
+export default withSessionRoute(handler);
diff --git a/src/pages/unlocks/browse.tsx b/src/pages/unlocks/browse.tsx
index 61f77e5bb..9d079ed4e 100644
--- a/src/pages/unlocks/browse.tsx
+++ b/src/pages/unlocks/browse.tsx
@@ -1,4 +1,8 @@
-import { findAllUnlockables, fetchAllUnlockables } from "@/src/utils/generic";
+import {
+  findAllUnlockables,
+  fetchAllUnlockables,
+  truncate0x,
+} from "@/src/utils/generic";
 import Layout from "@/src/components/UnlockablePage/Layout";
 import FourOhFour from "@/src/components/UnlockablePage/404";
 import { GetServerSideProps } from "next";
@@ -16,7 +20,9 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       return;
     }
 
-    return context.query.owner[0];
+    return Array.isArray(context.query.owner)
+      ? context.query.owner[0]
+      : context.query.owner;
   };
 
   const owner = getOwner();
@@ -33,7 +39,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 
   return {
-    props: { unlockables: unlockables, query: context.query.owner },
+    props: { unlockables: unlockables, query: owner ? owner : "" },
   };
 };
 
@@ -49,7 +55,7 @@ const Page = ({
       <FourOhFour
         label={
           query
-            ? `No Unlockables by '${query}' could be found on this LoopGate Instance.`
+            ? `No Unlockables by '${truncate0x(query)}' could be found.`
             : "This LoopGate Instance does not have any Unlockables yet."
         }
       />
diff --git a/src/pages/upload/form.tsx b/src/pages/upload/form.tsx
index fe9c377b7..6540ad16d 100644
--- a/src/pages/upload/form.tsx
+++ b/src/pages/upload/form.tsx
@@ -1,15 +1,23 @@
 import React, { useState, ChangeEvent, FormEvent } from "react";
 import axios from "axios";
 import { cn } from "@/src/utils/generic";
+import { GetServerSideProps } from "next";
 import Spinner from "@/src/components/Spinner";
-
-// Important: POST header: `Content-Type: multipart/form-data`.
+import { checkAuthentication, redirectTo } from "@/src/middleware";
+import { UploadResponse } from "@/src/pages/api/upload/submarine";
+import { toast } from "react-hot-toast";
+import { v4 as uuidv4 } from "uuid";
 
 interface FileUploadState {
   files: FileList | null;
 }
 
-export default function FileUploadForm() {
+export const getServerSideProps: GetServerSideProps = async (context) =>
+  (await checkAuthentication(context))
+    ? { props: { isAuthenticated: true } }
+    : redirectTo("/");
+
+const FormPage = ({ isAuthenticated }: { isAuthenticated: true }) => {
   const [file, setFile] = useState<FileUploadState>();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -27,7 +35,37 @@ export default function FileUploadForm() {
         const formData = new FormData();
         formData.append("file", file.files[0]);
 
-        const { data } = await axios.post("/api/submarine", formData);
+        const submarineRes: UploadResponse | undefined = await axios.post(
+          "/api/upload/submarine",
+          formData
+        );
+
+        if (!submarineRes) {
+          console.error("Unable to submarine your file in Pinata.");
+          toast.error("Unable to submarine your file in Pinata.");
+          return;
+        }
+
+        toast.success(
+          "Successfully submarined your file! Now let's create an entry in the DB..."
+        );
+
+        const createUnlockableRes = await axios.post(
+          "/api/upload/createUnlockable",
+          {
+            uuid: submarineRes.data.uuid,
+            cid: submarineRes.data.cid,
+          }
+        );
+
+        if (!createUnlockableRes) {
+          console.error("Unable to add the Unlockable to the DB...");
+          toast.error("Unable to add the Unlockable to the DB...");
+          return;
+        }
+
+        toast.success("Yay! You've just created an Unlockable!");
+        console.log(createUnlockableRes);
       }
     } catch (error) {
       console.error(error);
@@ -36,19 +74,54 @@ export default function FileUploadForm() {
     }
   };
 
+  const onCreateUnlockable = async () => {
+    setIsLoading(true);
+    const uuid = uuidv4();
+
+    try {
+      const createUnlockableRes = await axios.post(
+        "/api/upload/createUnlockable",
+        {
+          uuid: uuid,
+          cid: "Qme9fWgyjjUMsWfVotwjzYM3SyMzuPc99ScztnUV4vMrEd",
+        }
+      );
+
+      if (!createUnlockableRes) {
+        console.error("Unable to add the Unlockable to the DB...");
+        toast.error("Unable to add the Unlockable to the DB...");
+        return;
+      }
+
+      toast.success(`Yay! You've just created Unlockable '${uuid}'!`);
+      console.log(createUnlockableRes);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
-    <form onSubmit={handleSubmit} className="m-8 inline-flex flex-col gap-4">
-      <input type="file" onChange={handleFileChange} />
-      <button
-        type="submit"
-        className={cn(
-          "border rounded-sm border-white/10 py-3 duration-150",
-          file ? "text-white bg-white/5" : "text-white/40 cursor-not-allowed"
-        )}
-      >
-        Upload
+    <>
+      <form onSubmit={handleSubmit} className="m-8 inline-flex flex-col gap-4">
+        <input type="file" onChange={handleFileChange} />
+        <button
+          type="submit"
+          className={cn(
+            "border rounded-sm border-white/10 py-3 duration-150 flex items-center justify-center",
+            file ? "text-white bg-white/5" : "text-white/40 cursor-not-allowed"
+          )}
+        >
+          {isLoading ? <Spinner /> : "Upload"}
+        </button>
+      </form>
+
+      <button onClick={onCreateUnlockable}>
+        {isLoading ? <Spinner /> : "Test: Create Unlockable"}
       </button>
-      {isLoading && <Spinner />}
-    </form>
+    </>
   );
-}
+};
+
+export default FormPage;
diff --git a/src/utils/generic/fetchAllUnlockables.ts b/src/utils/generic/fetchAllUnlockables.ts
index 273fc5e86..542dfe026 100644
--- a/src/utils/generic/fetchAllUnlockables.ts
+++ b/src/utils/generic/fetchAllUnlockables.ts
@@ -2,11 +2,11 @@ import Supabase from "../supabase";
 import { parseSqlUnlockable } from "../supabase/helpers";
 
 const fetchAllUnlockables = async (owner?: string) => {
-  let { data: unlockables, error } = await Supabase.from(
+  const { data: unlockables, error } = await Supabase.from(
     "unlockables_with_criteria"
   )
     .select(`*`)
-    .eq("owner", owner ? owner : "*");
+    .eq(owner ? "owner" : "", owner);
 
   if (error) {
     throw error;
diff --git a/src/utils/siwe/configureSIWE.tsx b/src/utils/siwe/configureSIWE.tsx
index b00eda211..d102d92a0 100644
--- a/src/utils/siwe/configureSIWE.tsx
+++ b/src/utils/siwe/configureSIWE.tsx
@@ -121,6 +121,9 @@ const verifyRoute = async (
         if (fields.data.nonce !== session.nonce) {
           return res.status(422).end("Invalid nonce.");
         }
+
+        // @GEEL TODO: See if siweMessage.verify({sig, provider}) can be extended
+        // to persist the user's Loop API key for API requests on their behalf
         session.address = fields.data.address;
         session.chainId = fields.data.chainId;
         await session.save();
diff --git a/src/utils/supabase/supabase.ts b/src/utils/supabase/supabase.ts
index 9b438f9fd..91aac13be 100644
--- a/src/utils/supabase/supabase.ts
+++ b/src/utils/supabase/supabase.ts
@@ -6,4 +6,11 @@ const Supabase = createClient<Database>(
   process.env.NEXT_PUBLIC_SUPABASE_ANON || "Undefined supabase Anon"
 );
 
+export const getServiceSupabase = () => {
+  createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_ANON || "",
+    process.env.SUPABASE_SERVICE_ROLE
+  );
+};
+
 export default Supabase;
diff --git a/src/utils/supabase/types.ts b/src/utils/supabase/types.ts
index c423afe70..f34db9f96 100644
--- a/src/utils/supabase/types.ts
+++ b/src/utils/supabase/types.ts
@@ -4,131 +4,154 @@ export type Json =
   | boolean
   | null
   | { [key: string]: Json }
-  | Json[]
+  | Json[];
 
 export interface Database {
   public: {
     Tables: {
+      "calcium-crew-holders": {
+        Row: {
+          amount: number;
+          cc_ids: string[];
+          created_at: string;
+          eth_address: string;
+          id: number;
+        };
+        Insert: {
+          amount: number;
+          cc_ids: string[];
+          created_at?: string;
+          eth_address: string;
+          id?: number;
+        };
+        Update: {
+          amount?: number;
+          cc_ids?: string[];
+          created_at?: string;
+          eth_address?: string;
+          id?: number;
+        };
+      };
       content_types: {
         Row: {
-          content_id: number
-          content_name: string
-        }
+          content_id: number;
+          content_name: string;
+        };
         Insert: {
-          content_id?: number
-          content_name: string
-        }
+          content_id?: number;
+          content_name: string;
+        };
         Update: {
-          content_id?: number
-          content_name?: string
-        }
-      }
+          content_id?: number;
+          content_name?: string;
+        };
+      };
       roles: {
         Row: {
-          role_id: number
-          role_name: string
-        }
+          role_id: number;
+          role_name: string;
+        };
         Insert: {
-          role_id?: number
-          role_name: string
-        }
+          role_id?: number;
+          role_name: string;
+        };
         Update: {
-          role_id?: number
-          role_name?: string
-        }
-      }
+          role_id?: number;
+          role_name?: string;
+        };
+      };
       unlock_criteria: {
         Row: {
-          id: number
-          nft_id: string
-          owner: string
-          unlockable_id: string
-          updated_at: string | null
-        }
+          id: number;
+          nft_id: string;
+          owner: string;
+          unlockable_id: string;
+          updated_at: string | null;
+        };
         Insert: {
-          id?: number
-          nft_id: string
-          owner: string
-          unlockable_id: string
-          updated_at?: string | null
-        }
+          id?: number;
+          nft_id: string;
+          owner: string;
+          unlockable_id: string;
+          updated_at?: string | null;
+        };
         Update: {
-          id?: number
-          nft_id?: string
-          owner?: string
-          unlockable_id?: string
-          updated_at?: string | null
-        }
-      }
+          id?: number;
+          nft_id?: string;
+          owner?: string;
+          unlockable_id?: string;
+          updated_at?: string | null;
+        };
+      };
       unlockables: {
         Row: {
-          content_type_id: number
-          content_url: string
-          criteria_unlock_amount: number
-          description: string | null
-          id: string
-          name: string | null
-          owner: string
-          updated_at: string | null
-        }
+          content_type_id: number;
+          content_url: string;
+          criteria_unlock_amount: number;
+          description: string | null;
+          id: string;
+          name: string | null;
+          owner: string;
+          updated_at: string | null;
+        };
         Insert: {
-          content_type_id: number
-          content_url: string
-          criteria_unlock_amount: number
-          description?: string | null
-          id?: string
-          name?: string | null
-          owner: string
-          updated_at?: string | null
-        }
+          content_type_id: number;
+          content_url: string;
+          criteria_unlock_amount: number;
+          description?: string | null;
+          id?: string;
+          name?: string | null;
+          owner: string;
+          updated_at?: string | null;
+        };
         Update: {
-          content_type_id?: number
-          content_url?: string
-          criteria_unlock_amount?: number
-          description?: string | null
-          id?: string
-          name?: string | null
-          owner?: string
-          updated_at?: string | null
-        }
-      }
+          content_type_id?: number;
+          content_url?: string;
+          criteria_unlock_amount?: number;
+          description?: string | null;
+          id?: string;
+          name?: string | null;
+          owner?: string;
+          updated_at?: string | null;
+        };
+      };
       users: {
         Row: {
-          eth_address: string
-          role_id: number
-        }
+          eth_address: string;
+          role_id: number;
+        };
         Insert: {
-          eth_address: string
-          role_id: number
-        }
+          eth_address: string;
+          role_id: number;
+        };
         Update: {
-          eth_address?: string
-          role_id?: number
-        }
-      }
-    }
+          eth_address?: string;
+          role_id?: number;
+        };
+      };
+    };
     Views: {
       unlockables_with_criteria: {
         Row: {
-          content_url: string | null
-          criteria_unlock_amount: number | null
-          description: string | null
-          id: string | null
-          name: string | null
-          nft_ids: string | null
-          owner: string | null
-          updated_at: string | null
-        }
-      }
-    }
+          content_url: string | null;
+          criteria_unlock_amount: number | null;
+          description: string | null;
+          id: string | null;
+          name: string | null;
+          nft_ids: string | null;
+          owner: string | null;
+          updated_at: string | null;
+        };
+      };
+    };
     Functions: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Enums: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
+      [_ in never]: never;
+    };
+  };
 }

From b412cd520f5747cf0e6b6ab7922b5a6681b29117 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Tue, 23 May 2023 23:28:17 +0200
Subject: [PATCH 06/18] Update CC types

---
 .github/workflows/main.yml            |   4 +-
 .github/workflows/pr.yml              |   4 +-
 src/middleware/checkAuthentication.ts |   2 +-
 src/utils/supabase/types.ts           | 222 +++++++++++---------------
 4 files changed, 102 insertions(+), 130 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 4fbecf03d..0a621c03f 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -8,8 +8,8 @@ jobs:
   main:
     runs-on: ubuntu-latest
     env:
-      SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
-      SUPABASE_ANON: ${{ secrets.SUPABASE_ANON }}
+      NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+      NEXT_PUBLIC_SUPABASE_ANON: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON }}
     steps:
       - name: 🏗 Setup repo
         uses: actions/checkout@v3
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 105c23125..48c01776c 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -6,8 +6,8 @@ jobs:
   main:
     runs-on: ubuntu-latest
     env:
-      SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
-      SUPABASE_ANON: ${{ secrets.SUPABASE_ANON }}
+      NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+      NEXT_PUBLIC_SUPABASE_ANON: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON }}
     steps:
       - name: 🏗 Setup repo
         uses: actions/checkout@v3
diff --git a/src/middleware/checkAuthentication.ts b/src/middleware/checkAuthentication.ts
index af19c1d26..b196ac238 100644
--- a/src/middleware/checkAuthentication.ts
+++ b/src/middleware/checkAuthentication.ts
@@ -41,7 +41,7 @@ export async function checkAuthentication(
   const siweSesh = await getSiweSesh();
 
   try {
-    const { data } = await Supabase.from("calcium-crew-holders")
+    const { data } = await Supabase.from("calcium_crew_holders")
       .select("*")
       .eq("eth_address", siweSesh.address?.toLowerCase())
       .single();
diff --git a/src/utils/supabase/types.ts b/src/utils/supabase/types.ts
index f34db9f96..2a730ce89 100644
--- a/src/utils/supabase/types.ts
+++ b/src/utils/supabase/types.ts
@@ -4,154 +4,126 @@ export type Json =
   | boolean
   | null
   | { [key: string]: Json }
-  | Json[];
+  | Json[]
 
 export interface Database {
   public: {
     Tables: {
-      "calcium-crew-holders": {
+      calcium_crew_holders: {
         Row: {
-          amount: number;
-          cc_ids: string[];
-          created_at: string;
-          eth_address: string;
-          id: number;
-        };
+          amount: number
+          cc_ids: string[]
+          created_at: string
+          eth_address: string
+          id: number
+        }
         Insert: {
-          amount: number;
-          cc_ids: string[];
-          created_at?: string;
-          eth_address: string;
-          id?: number;
-        };
+          amount: number
+          cc_ids: string[]
+          created_at?: string
+          eth_address: string
+          id?: number
+        }
         Update: {
-          amount?: number;
-          cc_ids?: string[];
-          created_at?: string;
-          eth_address?: string;
-          id?: number;
-        };
-      };
+          amount?: number
+          cc_ids?: string[]
+          created_at?: string
+          eth_address?: string
+          id?: number
+        }
+      }
       content_types: {
         Row: {
-          content_id: number;
-          content_name: string;
-        };
+          content_id: number
+          content_name: string
+        }
         Insert: {
-          content_id?: number;
-          content_name: string;
-        };
+          content_id?: number
+          content_name: string
+        }
         Update: {
-          content_id?: number;
-          content_name?: string;
-        };
-      };
-      roles: {
-        Row: {
-          role_id: number;
-          role_name: string;
-        };
-        Insert: {
-          role_id?: number;
-          role_name: string;
-        };
-        Update: {
-          role_id?: number;
-          role_name?: string;
-        };
-      };
+          content_id?: number
+          content_name?: string
+        }
+      }
       unlock_criteria: {
         Row: {
-          id: number;
-          nft_id: string;
-          owner: string;
-          unlockable_id: string;
-          updated_at: string | null;
-        };
+          id: number
+          nft_id: string
+          owner: string
+          unlockable_id: string
+          updated_at: string | null
+        }
         Insert: {
-          id?: number;
-          nft_id: string;
-          owner: string;
-          unlockable_id: string;
-          updated_at?: string | null;
-        };
+          id?: number
+          nft_id: string
+          owner: string
+          unlockable_id: string
+          updated_at?: string | null
+        }
         Update: {
-          id?: number;
-          nft_id?: string;
-          owner?: string;
-          unlockable_id?: string;
-          updated_at?: string | null;
-        };
-      };
+          id?: number
+          nft_id?: string
+          owner?: string
+          unlockable_id?: string
+          updated_at?: string | null
+        }
+      }
       unlockables: {
         Row: {
-          content_type_id: number;
-          content_url: string;
-          criteria_unlock_amount: number;
-          description: string | null;
-          id: string;
-          name: string | null;
-          owner: string;
-          updated_at: string | null;
-        };
-        Insert: {
-          content_type_id: number;
-          content_url: string;
-          criteria_unlock_amount: number;
-          description?: string | null;
-          id?: string;
-          name?: string | null;
-          owner: string;
-          updated_at?: string | null;
-        };
-        Update: {
-          content_type_id?: number;
-          content_url?: string;
-          criteria_unlock_amount?: number;
-          description?: string | null;
-          id?: string;
-          name?: string | null;
-          owner?: string;
-          updated_at?: string | null;
-        };
-      };
-      users: {
-        Row: {
-          eth_address: string;
-          role_id: number;
-        };
+          content_type_id: number
+          content_url: string
+          criteria_unlock_amount: number
+          description: string | null
+          id: string
+          name: string | null
+          owner: string
+          updated_at: string | null
+        }
         Insert: {
-          eth_address: string;
-          role_id: number;
-        };
+          content_type_id: number
+          content_url: string
+          criteria_unlock_amount: number
+          description?: string | null
+          id?: string
+          name?: string | null
+          owner: string
+          updated_at?: string | null
+        }
         Update: {
-          eth_address?: string;
-          role_id?: number;
-        };
-      };
-    };
+          content_type_id?: number
+          content_url?: string
+          criteria_unlock_amount?: number
+          description?: string | null
+          id?: string
+          name?: string | null
+          owner?: string
+          updated_at?: string | null
+        }
+      }
+    }
     Views: {
       unlockables_with_criteria: {
         Row: {
-          content_url: string | null;
-          criteria_unlock_amount: number | null;
-          description: string | null;
-          id: string | null;
-          name: string | null;
-          nft_ids: string | null;
-          owner: string | null;
-          updated_at: string | null;
-        };
-      };
-    };
+          content_url: string | null
+          criteria_unlock_amount: number | null
+          description: string | null
+          id: string | null
+          name: string | null
+          nft_ids: string | null
+          owner: string | null
+          updated_at: string | null
+        }
+      }
+    }
     Functions: {
-      [_ in never]: never;
-    };
+      [_ in never]: never
+    }
     Enums: {
-      [_ in never]: never;
-    };
+      [_ in never]: never
+    }
     CompositeTypes: {
-      [_ in never]: never;
-    };
-  };
+      [_ in never]: never
+    }
+  }
 }

From 777aa5b8ed12a7ca0c9775df3e34cb6864df4578 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Fri, 26 May 2023 15:58:54 +0200
Subject: [PATCH 07/18] Cleanup: Simplify existing API routes

---
 docs/setup/4-RUNNING.md                       |  2 +-
 docs/setup/5-NETLIFY.md                       |  2 +-
 .../UnlockCard/UnlockSection.tsx              |  6 +-
 src/middleware/checkAuthentication.ts         |  2 +
 src/middleware/handleError.ts                 |  2 +-
 src/middleware/loopgateError.ts               | 30 ++++++
 src/pages/api/checkUnlockable.ts              | 88 -----------------
 src/pages/api/getHoldersForNftId.ts           | 55 -----------
 src/pages/api/getUserUnlocks.ts               | 70 --------------
 .../check-env-status.ts}                      |  2 +-
 .../{generateUuid.ts => generate-uuid.ts}     |  2 +-
 ...mpleUnlockable.ts => sample-unlockable.ts} |  4 +-
 src/pages/api/nft/get-holders-nft-id.ts       | 43 +++++++++
 .../get-holders-nftdata.ts}                   | 14 +--
 .../{getNftData.ts => nft/get-nft-data.ts}    | 16 +---
 .../{getUserNfts.ts => nft/get-user-nfts.ts}  | 16 +---
 src/pages/api/upload/createUnlockable.ts      | 50 ----------
 src/pages/api/upload/updateUnlockable.ts      | 94 -------------------
 src/pages/unlocks/[uuid].tsx                  |  2 +-
 src/pages/upload/form.tsx                     | 11 +--
 src/utils/pinata/generateAccessLink.ts        |  6 +-
 src/utils/pinata/index.ts                     |  4 +-
 src/utils/pinata/listFolderContent.ts         |  4 +-
 src/utils/pinata/{sub.ts => submarine.ts}     |  6 +-
 .../supabase/helpers/parseNftIdString.ts      |  9 +-
 src/utils/supabase/supabase.ts                | 13 +--
 26 files changed, 126 insertions(+), 427 deletions(-)
 delete mode 100644 src/pages/api/checkUnlockable.ts
 delete mode 100644 src/pages/api/getHoldersForNftId.ts
 delete mode 100644 src/pages/api/getUserUnlocks.ts
 rename src/pages/api/{env-status.ts => helpers/check-env-status.ts} (93%)
 rename src/pages/api/helpers/{generateUuid.ts => generate-uuid.ts} (90%)
 rename src/pages/api/helpers/{sampleUnlockable.ts => sample-unlockable.ts} (94%)
 create mode 100644 src/pages/api/nft/get-holders-nft-id.ts
 rename src/pages/api/{getNftHolders.ts => nft/get-holders-nftdata.ts} (50%)
 rename src/pages/api/{getNftData.ts => nft/get-nft-data.ts} (57%)
 rename src/pages/api/{getUserNfts.ts => nft/get-user-nfts.ts} (50%)
 delete mode 100644 src/pages/api/upload/createUnlockable.ts
 delete mode 100644 src/pages/api/upload/updateUnlockable.ts
 rename src/utils/pinata/{sub.ts => submarine.ts} (55%)

diff --git a/docs/setup/4-RUNNING.md b/docs/setup/4-RUNNING.md
index 1842daa3f..0e88ca210 100644
--- a/docs/setup/4-RUNNING.md
+++ b/docs/setup/4-RUNNING.md
@@ -21,7 +21,7 @@ You can access it by opening a browser and going to the following URL: \
 
 Now your LoopGate is running on your local machine, it's time to check the `.env` file.
 
-- Go to the following url: [http://localhost:3000/api/helpers/checkEnvStatus](http://localhost:3000/api/helpers/checkEnvStatus).
+- Go to the following url: [http://localhost:3000/api/helpers/check-env-status](http://localhost:3000/api/helpers/checkEnvStatus).
 
 This checks the secrets in your `.env` file: if these are misconfigured, LoopGate will not work.
 
diff --git a/docs/setup/5-NETLIFY.md b/docs/setup/5-NETLIFY.md
index 6a204768e..0ae73e86a 100644
--- a/docs/setup/5-NETLIFY.md
+++ b/docs/setup/5-NETLIFY.md
@@ -30,7 +30,7 @@ However, there is still one important step: adding the environment secrets to Ne
 1. Go to your project's the 'env' settings of your project's Netlify page: [https://app.netlify.com/sites/YOUR_PROJECT_NAME/settings/env](https://app.netlify.com/sites/YOUR_PROJECT_NAME/settings/env)
 2. Click on 'Add a variable', then 'import from a .env file'.
 3. Copy the contents of your `.env` file, and paste them in the input field. Click on 'Import variables'.
-4. Once more, check the `/api/helpers/checkEnvStatus` endpoint to see if all secrets are defined. Your site should be live soon at [https://YOUR_PROJECT_NAME.netlify.app/api/helpers/checkEnvStatus](https://YOUR_PROJECT_NAME.netlify.app/api/helpers/checkEnvStatus)
+4. Once more, check the `/api/helpers/checkEnvStatus` endpoint to see if all secrets are defined. Your site should be live soon at [https://YOUR_PROJECT_NAME.netlify.app/api/helpers/checkEnvStatus](https://YOUR_PROJECT_NAME.netlify.app/api/helpers/check-env-status)
 
 {% hint style="info" %}
 Your Netlify website will most likely have an auto-generated name like '[https://adjective-noun-12345.netlify.app](https://adjective-noun-12345.netlify.app)'. You can easily change the domain name in Netlify!
diff --git a/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx b/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
index 148394be1..f9bb454c3 100644
--- a/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
+++ b/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
@@ -24,7 +24,7 @@ const UnlockSection = ({ unlockable }: Props) => {
   ) => {
     axios
       .get(
-        `/api/checkUnlockable?address=${address}&unlockableId=${unlockable.id}`
+        `/api/unlockable/verify-access?address=${address}&unlockableId=${unlockable.id}`
       )
       .then((data) => {
         setUnlockedContent(data.data.unlock);
@@ -32,8 +32,8 @@ const UnlockSection = ({ unlockable }: Props) => {
       })
       .catch((error) => {
         setIsLoading(false);
-        logger.error(error.request.response);
-        toast.error(error.request.response);
+        logger.error(error.response.data.message);
+        toast.error(error.response.data.message);
       });
   };
 
diff --git a/src/middleware/checkAuthentication.ts b/src/middleware/checkAuthentication.ts
index b196ac238..632580566 100644
--- a/src/middleware/checkAuthentication.ts
+++ b/src/middleware/checkAuthentication.ts
@@ -46,6 +46,8 @@ export async function checkAuthentication(
       .eq("eth_address", siweSesh.address?.toLowerCase())
       .single();
 
+    console.log(data);
+
     if (
       !data?.amount ||
       data.amount < parseInt(process.env.LOOPGATE_CC_THRESHOLD, 10)
diff --git a/src/middleware/handleError.ts b/src/middleware/handleError.ts
index 87f877e19..a3539f7f0 100644
--- a/src/middleware/handleError.ts
+++ b/src/middleware/handleError.ts
@@ -4,5 +4,5 @@ import { Error } from "./loopgateError";
 
 export const handleError = (res: NextApiResponse, error: Error) => {
   logger.error(error[1]);
-  return res.status(error[0]).send(error[1]);
+  return res.status(error[0]).send({ message: error[1] });
 };
diff --git a/src/middleware/loopgateError.ts b/src/middleware/loopgateError.ts
index 6daf83de6..608193e47 100644
--- a/src/middleware/loopgateError.ts
+++ b/src/middleware/loopgateError.ts
@@ -14,4 +14,34 @@ export const LoopgateError: { [key: string]: Error } = {
     "Bad request. Check the parameters or body before trying again.",
   ],
   server: [500, "Internal server error"],
+  noAddressProvided: [
+    400,
+    "Invalid Request: 0x address not provided. Please provide a valid 0x address and try again.",
+  ],
+  noLoopringAccount: [
+    400,
+    "No Loopring Account could be found for the connected 0x address. Is your L2 account activated?",
+  ],
+  noUnlockableFound: [
+    404,
+    "Unable to find the Unlockable for the specified UUID.",
+  ],
+  noNftsFound: [404, "Unable to find any NFTs in your wallet."],
+  noPinataContentFound: [
+    404,
+    "Unable to find the submarined content on Pinata. It may be deleted.",
+  ],
+  unlockReqNotMet: [
+    405,
+    "Your connected wallet does not meet the unlock requirements.",
+  ],
+  noTheGraphData: [
+    404,
+    "Unable to retrieve data from TheGraph with this NFT ID. Please provide a valid Loopring NFT ID, and try again.",
+  ],
+  noLoopringDataFound: [
+    400,
+    "Unable to retrieve data from the Loopring API with this NFT ID. Please provide a valid Loopring NFT ID, and try again.",
+  ],
+  noHoldersFound: [404, "Unable to find holders for this NFT ID."],
 };
diff --git a/src/pages/api/checkUnlockable.ts b/src/pages/api/checkUnlockable.ts
deleted file mode 100644
index 0cd918050..000000000
--- a/src/pages/api/checkUnlockable.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { NextApiRequest, NextApiResponse } from "next";
-import { siwe } from "@/src/utils/siwe";
-import { getUserAddress, getAllUserNftIds } from "@/src/utils/loopring";
-import { findUnlockableByUuid } from "@/src/utils/generic";
-import { getPinataIndexLink } from "@/src/utils/pinata";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
-import logger from "@/src/utils/logger";
-
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  const query = req.query;
-  const { address, unlockableId } = query;
-  const siweSesh = await siwe.getSession(req, res);
-
-  // Check validity of request
-  if (
-    !address ||
-    Array.isArray(address) ||
-    !unlockableId ||
-    Array.isArray(unlockableId)
-  ) {
-    const errorMsg =
-      "Invalid Request: 0x address not provided. Please provide a valid 0x address and try again.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
-  }
-
-  //   Check if there is a session. Only connected users may call this endpoint.
-  if (!siweSesh.address || siweSesh.address !== address) {
-    const errorMsg =
-      "You are not authorized to access this resource. Sign In With Ethereum, and try again.";
-    logger.error(errorMsg);
-    return res.status(401).send(errorMsg);
-  }
-
-  // 1️⃣ Call the Loopring API to find the User's Loopring Account ID
-  const accountId = await getUserAddress(address);
-
-  if (!accountId) {
-    const errorMsg =
-      "No Loopring Account could be found for the connected 0x address. Is your L2 account activated?";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
-  }
-
-  const unlockable = findUnlockableByUuid(unlockableId);
-  if (!unlockable) {
-    const errorMsg = "Unable to find the Unlockable for the specified UUID.";
-    logger.error(errorMsg);
-    return res.status(404).send(errorMsg);
-  }
-
-  // 2️⃣ Call the Loopring API to find the NFTs held by the user
-  const userNftIds = await getAllUserNftIds(accountId);
-
-  if (!userNftIds) {
-    const errorMsg = "Unable to find any NFTs for the specified 0x address.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
-  }
-
-  // 3️⃣ Check if the user meets the unlock criteria
-  const intersection = unlockable.unlockCriteria.nftId.filter((value) =>
-    userNftIds.includes(value)
-  );
-
-  if (intersection.length < unlockable.unlockCriteria.unlockAmount) {
-    const errorMsg =
-      "Your connected wallet does not meet the unlock requirements.";
-    logger.error(errorMsg);
-    return res.status(405).send(errorMsg);
-  }
-
-  // 4️⃣ Get access link for the unlockable
-  const unlock = await getPinataIndexLink(unlockable.content.url);
-
-  if (!unlock) {
-    const errorMsg =
-      "Unable to find the submarined content on Pinata. It may be deleted.";
-    logger.error(errorMsg);
-    return res.status(404).send(errorMsg);
-  }
-
-  return res.status(200).json({
-    unlock: unlock,
-  });
-};
-
-export default withSessionRoute(handler);
diff --git a/src/pages/api/getHoldersForNftId.ts b/src/pages/api/getHoldersForNftId.ts
deleted file mode 100644
index 17a5b6f4d..000000000
--- a/src/pages/api/getHoldersForNftId.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import {
-  getMinterAndToken,
-  getNftData,
-  getNftHolders,
-} from "@/src/utils/loopring";
-import logger from "@/src/utils/logger";
-
-// Request holders for a NFT held on Loopring
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  const query = req.query;
-  const { nftId } = query;
-
-  // Check if multiple or no Account IDs are specified. If so: early return.
-  if (!nftId || Array.isArray(nftId)) {
-    const errorMsg = "Unable to find data for the NFT ID you supplied.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
-  }
-
-  // Call TheGraph API to find NFT Datas for a NFT ID
-  const theGraphRes = await getMinterAndToken(nftId);
-
-  if (!theGraphRes) {
-    const errorMsg =
-      "Unable to retrieve data from TheGraph with this NFT ID. Please provide a valid Loopring NFT ID, and try again.";
-    logger.error(errorMsg);
-    return res.status(404).send(errorMsg);
-  }
-
-  const nftDataRes = await getNftData(
-    theGraphRes.minter,
-    theGraphRes.tokenAddress,
-    nftId
-  );
-
-  if (!nftDataRes) {
-    const errorMsg =
-      "Unable to retrieve data from the Loopring API with this NFT ID. Please provide a valid Loopring NFT ID, and try again.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
-  }
-
-  const holders = await getNftHolders(nftDataRes.nftData);
-
-  if (!holders) {
-    const errorMsg = "Unable to find holders for this NFT ID.";
-    logger.error(errorMsg);
-    return res.status(404).send(errorMsg);
-  }
-
-  return res.status(200).json(holders);
-};
-
-export default handler;
diff --git a/src/pages/api/getUserUnlocks.ts b/src/pages/api/getUserUnlocks.ts
deleted file mode 100644
index 23e6e7aa1..000000000
--- a/src/pages/api/getUserUnlocks.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { findUnlockedCids } from "../../utils/generic";
-import { getAllUserNftIds, getUserAddress } from "../../utils/loopring";
-import { getPinataIndexLink } from "../../utils/pinata";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
-import { siwe } from "@/src/utils/siwe";
-import logger from "@/src/utils/logger";
-
-// Summary of what happens:
-// 1️⃣ Call the Loopring API to find the User's Loopring Account ID
-// 2️⃣ Call the Loopring API to find the NFTs held by the user
-// 3️⃣ Check the user's NFT IDs against the config.ts to determine unlocks
-// 4️⃣ Call the Pinata API for each CID the user should have access to
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  const query = req.query;
-  const { address } = query;
-  const siweSesh = await siwe.getSession(req, res);
-
-  // Check if multiple or no Account IDs are specified. If so: early return.
-  if (!address || Array.isArray(address)) {
-    const errorMsg =
-      "0x address not provided. Please provide a valid 0x address and try again.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
-  }
-
-  // Check if there is a session. Only connected users may call this endpoint.
-  if (!siweSesh.address || siweSesh.address !== address) {
-    const errorMsg =
-      "You are not authorized to access this resource. Sign In With Ethereum, and try again.";
-    logger.error(errorMsg);
-    return res.status(401).send(errorMsg);
-  }
-
-  // 1️⃣ Call the Loopring API to find the User's Loopring Account ID
-  const accountId = await getUserAddress(address);
-
-  if (!accountId) {
-    const errorMsg = `No Loopring Account could be found for ${address}. Is your L2 account activated?`;
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
-  }
-
-  // 2️⃣ Call the Loopring API to find the NFTs held by the user
-  const allNftIds = await getAllUserNftIds(accountId);
-
-  if (!allNftIds) {
-    const errorMsg = `Unable to find any NFTs for ${address}.`;
-    logger.error(errorMsg);
-    return res.status(404).send(errorMsg);
-  }
-
-  // 3️⃣ Check the user's NFT IDs against the config.ts to determine unlocks
-  const cids = findUnlockedCids(allNftIds);
-
-  // 4️⃣ Call the Pinata API for each CID the user should have access to
-  const unlocks = await Promise.all(
-    cids.map(async (item) => {
-      return await getPinataIndexLink(item);
-    })
-  );
-
-  if (!unlocks) {
-    return res.status(200).json({ unlocks: [] }); // API calls succeeded, but there are no unlocks.
-  }
-
-  return res.status(200).json({ unlocks: unlocks }); // User has unlocks
-};
-
-export default withSessionRoute(handler);
diff --git a/src/pages/api/env-status.ts b/src/pages/api/helpers/check-env-status.ts
similarity index 93%
rename from src/pages/api/env-status.ts
rename to src/pages/api/helpers/check-env-status.ts
index ee8896022..564d2f508 100644
--- a/src/pages/api/env-status.ts
+++ b/src/pages/api/helpers/check-env-status.ts
@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
 // Checks the .env file to spot undefined values. Helps prevent issues.
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+const handler = async (_req: NextApiRequest, res: NextApiResponse) => {
   const envsToCheck = [
     "NEXT_PUBLIC_PINATA_GATEWAY_URL",
     "PINATA_SUBMARINE_KEY",
diff --git a/src/pages/api/helpers/generateUuid.ts b/src/pages/api/helpers/generate-uuid.ts
similarity index 90%
rename from src/pages/api/helpers/generateUuid.ts
rename to src/pages/api/helpers/generate-uuid.ts
index 1deb4e001..5d458a291 100644
--- a/src/pages/api/helpers/generateUuid.ts
+++ b/src/pages/api/helpers/generate-uuid.ts
@@ -2,7 +2,7 @@ import { v4 as uuidv4 } from "uuid";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default async function handler(
-  req: NextApiRequest,
+  _req: NextApiRequest,
   res: NextApiResponse
 ) {
   const uuid = uuidv4();
diff --git a/src/pages/api/helpers/sampleUnlockable.ts b/src/pages/api/helpers/sample-unlockable.ts
similarity index 94%
rename from src/pages/api/helpers/sampleUnlockable.ts
rename to src/pages/api/helpers/sample-unlockable.ts
index 6a4d9f189..e02c02b8f 100644
--- a/src/pages/api/helpers/sampleUnlockable.ts
+++ b/src/pages/api/helpers/sample-unlockable.ts
@@ -3,7 +3,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { UnlockableV2 } from "@/src/config/types";
 
 export default async function handler(
-  req: NextApiRequest,
+  _req: NextApiRequest,
   res: NextApiResponse
 ) {
   // This API Endpoint generates a sample UnlockableV2 object you can use for your `config.ts` file.
@@ -11,7 +11,7 @@ export default async function handler(
   const now = new Date();
   const dateObj = now.toISOString().replace("T", " ").split("Z")[0];
 
-  const sampleUnlockable = {
+  const sampleUnlockable: UnlockableV2 = {
     id: uuidv4(),
     owner: "0x000000000000000000000000000000000000dEaD",
     metadata: {
diff --git a/src/pages/api/nft/get-holders-nft-id.ts b/src/pages/api/nft/get-holders-nft-id.ts
new file mode 100644
index 000000000..76e4542e3
--- /dev/null
+++ b/src/pages/api/nft/get-holders-nft-id.ts
@@ -0,0 +1,43 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import {
+  getMinterAndToken,
+  getNftData,
+  getNftHolders,
+} from "@/src/utils/loopring";
+import { handleError, LoopgateError } from "@/src/middleware";
+
+// Request holders for a NFT held on Loopring by querying NFT ID
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const { nftId } = req.query;
+
+  if (!nftId || Array.isArray(nftId)) {
+    return handleError(res, LoopgateError.badRequest);
+  }
+
+  // Call TheGraph API to find NFT Datas for a NFT ID
+  const theGraphRes = await getMinterAndToken(nftId);
+
+  if (!theGraphRes) {
+    return handleError(res, LoopgateError.noTheGraphData);
+  }
+
+  const nftDataRes = await getNftData(
+    theGraphRes.minter,
+    theGraphRes.tokenAddress,
+    nftId
+  );
+
+  if (!nftDataRes) {
+    return handleError(res, LoopgateError.noLoopringDataFound);
+  }
+
+  const holders = await getNftHolders(nftDataRes.nftData);
+
+  if (!holders) {
+    return handleError(res, LoopgateError.noHoldersFound);
+  }
+
+  return res.status(200).json(holders);
+};
+
+export default handler;
diff --git a/src/pages/api/getNftHolders.ts b/src/pages/api/nft/get-holders-nftdata.ts
similarity index 50%
rename from src/pages/api/getNftHolders.ts
rename to src/pages/api/nft/get-holders-nftdata.ts
index 650b0b809..cd12f62ba 100644
--- a/src/pages/api/getNftHolders.ts
+++ b/src/pages/api/nft/get-holders-nftdata.ts
@@ -1,27 +1,21 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import getNftHolders from "@/src/utils/loopring/getNftHolders";
-import logger from "@/src/utils/logger";
+import { handleError, LoopgateError } from "@/src/middleware";
 
-// Request NFTs on Loopring held by a user
+// Request NFTs on Loopring held by a user by querying NFT Data
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const query = req.query;
   const { nftData } = query;
 
-  // Check if multiple or no Account IDs are specified. If so: early return.
   if (!nftData || Array.isArray(nftData)) {
-    const errorMsg =
-      "Invalid request. Please provide a valid Loopring 'NFT Data', and try again.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
+    return handleError(res, LoopgateError.badRequest);
   }
 
   // Call TheGraph API to find NFT Data for a NFT ID
   const holders = await getNftHolders(nftData);
 
   if (!holders) {
-    const errorMsg = `Unable to find holders for NFT Data '${nftData}'`;
-    logger.error(errorMsg);
-    return res.status(404).send(errorMsg);
+    return handleError(res, LoopgateError.noHoldersFound);
   }
 
   return res.status(200).json(holders);
diff --git a/src/pages/api/getNftData.ts b/src/pages/api/nft/get-nft-data.ts
similarity index 57%
rename from src/pages/api/getNftData.ts
rename to src/pages/api/nft/get-nft-data.ts
index 4319b7073..83aca9824 100644
--- a/src/pages/api/getNftData.ts
+++ b/src/pages/api/nft/get-nft-data.ts
@@ -1,6 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getMinterAndToken, getNftData } from "@/src/utils/loopring";
 import logger from "@/src/utils/logger";
+import { handleError, LoopgateError } from "@/src/middleware";
 
 // Request NFTs Data for a Loopring NFT ID
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
@@ -9,20 +10,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
   // Check if multiple or no Account IDs are specified. If so: early return.
   if (!nftId || Array.isArray(nftId)) {
-    const errorMsg =
-      "Invalid request. Please provide a valid Loopring NFT ID, and try again.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
+    return handleError(res, LoopgateError.badRequest);
   }
 
   // Call TheGraph API to find NFT Datas for a NFT ID
   const theGraphRes = await getMinterAndToken(nftId);
 
   if (!theGraphRes) {
-    const errorMsg =
-      "Unable to retrieve data from TheGraph with this NFT ID. Please provide a valid Loopring NFT ID, and try again.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
+    return handleError(res, LoopgateError.noTheGraphData);
   }
 
   const nftDataRes = await getNftData(
@@ -32,10 +27,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   );
 
   if (!nftDataRes) {
-    const errorMsg =
-      "Unable to retrieve data from the Loopring API with this NFT ID. Please provide a valid Loopring NFT ID, and try again.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
+    return handleError(res, LoopgateError.noLoopringDataFound);
   }
 
   return res.status(200).json({ nftData: nftDataRes.nftData });
diff --git a/src/pages/api/getUserNfts.ts b/src/pages/api/nft/get-user-nfts.ts
similarity index 50%
rename from src/pages/api/getUserNfts.ts
rename to src/pages/api/nft/get-user-nfts.ts
index acf169343..59b5430ab 100644
--- a/src/pages/api/getUserNfts.ts
+++ b/src/pages/api/nft/get-user-nfts.ts
@@ -1,27 +1,21 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getAllUserNftIds } from "../../utils/loopring";
-import logger from "@/src/utils/logger";
+import { getAllUserNftIds } from "../../../utils/loopring";
+import { handleError, LoopgateError } from "@/src/middleware";
 
 // Request NFTs on Loopring held by a user
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  const query = req.query;
-  const { accountId } = query;
+  const { accountId } = req.query;
 
   // Check if multiple or no Account IDs are specified. If so: early return.
   if (!accountId || Array.isArray(accountId)) {
-    const errorMsg =
-      "Invalid Request: 0x address not provided. Please provide a valid 0x address and try again.";
-    logger.error(errorMsg);
-    return res.status(400).send(errorMsg);
+    return handleError(res, LoopgateError.noAddressProvided);
   }
 
   // Call Loopring API to find- and extract all user NFT IDs
   const allNftIds = await getAllUserNftIds(accountId);
 
   if (!allNftIds) {
-    const errorMsg = `Unable to find any NFTs for Loopring accountId '${accountId}'`;
-    logger.error(errorMsg);
-    return res.status(404).send(errorMsg);
+    return handleError(res, LoopgateError.noNftsFound);
   }
 
   return res.status(200).json(allNftIds);
diff --git a/src/pages/api/upload/createUnlockable.ts b/src/pages/api/upload/createUnlockable.ts
deleted file mode 100644
index 64d1ea5fb..000000000
--- a/src/pages/api/upload/createUnlockable.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
-import {
-  checkAuthentication,
-  handleError,
-  LoopgateError,
-} from "@/src/middleware";
-import { createClient } from "@supabase/supabase-js";
-import { Database } from "@/src/utils/supabase/types";
-
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method !== "POST") {
-    return handleError(res, LoopgateError.noPostRequest);
-  }
-
-  const auth = await checkAuthentication(req, res);
-  if (!auth) {
-    return handleError(res, LoopgateError.unauthorized);
-  }
-
-  if (!req.body.uuid || !req.body.cid) {
-    return handleError(res, LoopgateError.badRequest);
-  }
-
-  // Create server Supabase client
-  const Supabase = createClient<Database>(
-    process.env.NEXT_PUBLIC_SUPABASE_URL,
-    process.env.SUPABASE_SERVICE_ROLE
-  );
-
-  const { error } = await Supabase.from("unlockables").insert({
-    id: req.body.uuid,
-    owner: auth.address,
-    content_type_id: 1, // IPFS Unlockable
-    content_url: req.body.cid,
-    criteria_unlock_amount: 1,
-  });
-
-  console.log(error);
-
-  if (error) {
-    return handleError(res, [500, error.message]);
-  }
-
-  return res.status(200).json({
-    message: `Successfully created Unlockable with UUID of ${req.body.uuid}.`,
-  });
-};
-
-export default withSessionRoute(handler);
diff --git a/src/pages/api/upload/updateUnlockable.ts b/src/pages/api/upload/updateUnlockable.ts
deleted file mode 100644
index 5b9fb4b98..000000000
--- a/src/pages/api/upload/updateUnlockable.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
-import {
-  checkAuthentication,
-  handleError,
-  LoopgateError,
-} from "@/src/middleware";
-import { createClient } from "@supabase/supabase-js";
-import { Database } from "@/src/utils/supabase/types";
-
-type UUID = string;
-
-interface UnlockCriterion {
-  unlockable_id: UUID;
-  nft_id: string;
-}
-
-export interface UnlockableUpdateProps {
-  body: {
-    unlockable: {
-      uuid: UUID;
-      criteria_unlock_amount?: number;
-      description?: string;
-      name?: string;
-    };
-    unlock_criteria: UnlockCriterion[];
-  };
-}
-
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method !== "POST") {
-    return handleError(res, LoopgateError.noPostRequest);
-  }
-
-  const auth = await checkAuthentication(req, res);
-  if (!auth) {
-    return handleError(res, LoopgateError.unauthorized);
-  }
-
-  if (!req.body.unlockable.uuid || req.body.unlockable.unlock_criteria) {
-    return handleError(res, LoopgateError.badRequest);
-  }
-
-  // Create server Supabase client
-  const Supabase = createClient<Database>(
-    process.env.NEXT_PUBLIC_SUPABASE_URL,
-    process.env.SUPABASE_SERVICE_ROLE
-  );
-
-  const { error: updateUnlockableError } = await Supabase.from("unlockables")
-    .update({
-      // Changing the ContentType and URL are not implemented, for now.
-      // content_type_id: req.body?.content_type_id,
-      // content_url: req.body?.cid,
-      criteria_unlock_amount: req.body.unlockable?.criteria_unlock_amount,
-      description: req.body.unlockable?.description,
-      name: req.body.unlockable?.name,
-    })
-    .eq("id", req.body.unlockable.uuid);
-
-  if (updateUnlockableError) {
-    return handleError(res, [500, updateUnlockableError.message]);
-  }
-
-  const { error: deleteCriteriaError } = await Supabase.from("unlock_criteria")
-    .delete()
-    .eq("unlockable_id", req.body.uuid);
-
-  if (deleteCriteriaError) {
-    return handleError(res, [500, deleteCriteriaError.message]);
-  }
-
-  const unlockCriteria: {
-    unlockable_id: UUID;
-    nft_id: string;
-    owner: string;
-  }[] = req.body.unlockCriteria.map((x: UnlockCriterion) => {
-    return { ...x, owner: auth.address };
-  });
-
-  const { error: insertCriteriaError } = await Supabase.from(
-    "unlock_criteria"
-  ).insert(unlockCriteria);
-
-  if (insertCriteriaError) {
-    return handleError(res, [500, insertCriteriaError.message]);
-  }
-
-  return res.status(200).json({
-    message: `Successfully updated Unlockable and Unlock Criteria with UUID of ${req.body.uuid}.`,
-  });
-};
-
-export default withSessionRoute(handler);
diff --git a/src/pages/unlocks/[uuid].tsx b/src/pages/unlocks/[uuid].tsx
index 077b4bcd5..ec0d22d59 100644
--- a/src/pages/unlocks/[uuid].tsx
+++ b/src/pages/unlocks/[uuid].tsx
@@ -44,7 +44,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   };
 };
 
-const Page = ({ unlockable }: { unlockable: UnlockableV2 | undefined }) => {
+const Page = ({ unlockable }: { unlockable: UnlockableV2 | null }) => {
   if (!unlockable) {
     return (
       <FourOhFour
diff --git a/src/pages/upload/form.tsx b/src/pages/upload/form.tsx
index 6540ad16d..6b6fad3fd 100644
--- a/src/pages/upload/form.tsx
+++ b/src/pages/upload/form.tsx
@@ -50,13 +50,10 @@ const FormPage = ({ isAuthenticated }: { isAuthenticated: true }) => {
           "Successfully submarined your file! Now let's create an entry in the DB..."
         );
 
-        const createUnlockableRes = await axios.post(
-          "/api/upload/createUnlockable",
-          {
-            uuid: submarineRes.data.uuid,
-            cid: submarineRes.data.cid,
-          }
-        );
+        const createUnlockableRes = await axios.post("/api/unlockable/create", {
+          uuid: submarineRes.data.uuid,
+          cid: submarineRes.data.cid,
+        });
 
         if (!createUnlockableRes) {
           console.error("Unable to add the Unlockable to the DB...");
diff --git a/src/utils/pinata/generateAccessLink.ts b/src/utils/pinata/generateAccessLink.ts
index 4db6d7c1e..015f80bdc 100644
--- a/src/utils/pinata/generateAccessLink.ts
+++ b/src/utils/pinata/generateAccessLink.ts
@@ -1,15 +1,15 @@
-import sub from "./sub";
+import Submarine from "./submarine";
 
 // Checks a submarined CID. If valid, generates an access link that is accessible for a set amount of time
 const generateAccessLink = async (
   cid: string,
   unlockTimeInSec: number = 60 * 3
 ) => {
-  const foundContent = await sub.getSubmarinedContentByCid(cid);
+  const foundContent = await Submarine.getSubmarinedContentByCid(cid);
   const folder = foundContent.items[0];
 
   if (folder) {
-    const accessLink = await sub.generateAccessLink(
+    const accessLink = await Submarine.generateAccessLink(
       unlockTimeInSec,
       folder.id,
       cid
diff --git a/src/utils/pinata/index.ts b/src/utils/pinata/index.ts
index eb96da216..33012e654 100644
--- a/src/utils/pinata/index.ts
+++ b/src/utils/pinata/index.ts
@@ -1,4 +1,4 @@
-import sub from "./sub";
+import Submarine from "./submarine";
 import generateAccessLink from "./generateAccessLink";
 import listFolderContent from "./listFolderContent";
 import checkPinataFolderForHtml from "./checkPinataFolderForHtml";
@@ -6,7 +6,7 @@ import getPinataIndexLink from "./getPinataIndexLink";
 import formatAccessLink from "./formatAccessLink";
 
 export {
-  sub,
+  Submarine,
   generateAccessLink,
   formatAccessLink,
   listFolderContent,
diff --git a/src/utils/pinata/listFolderContent.ts b/src/utils/pinata/listFolderContent.ts
index d53f9973e..a06f9ce22 100644
--- a/src/utils/pinata/listFolderContent.ts
+++ b/src/utils/pinata/listFolderContent.ts
@@ -1,7 +1,7 @@
-import sub from "./sub";
+import Submarine from "./submarine";
 
 const listFolderContent = async (folderId: string) => {
-  return await sub.listFolderContent(folderId);
+  return await Submarine.listFolderContent(folderId);
 };
 
 export default listFolderContent;
diff --git a/src/utils/pinata/sub.ts b/src/utils/pinata/submarine.ts
similarity index 55%
rename from src/utils/pinata/sub.ts
rename to src/utils/pinata/submarine.ts
index 3417a202e..c106f1efe 100644
--- a/src/utils/pinata/sub.ts
+++ b/src/utils/pinata/submarine.ts
@@ -1,8 +1,8 @@
-import { Submarine } from "pinata-submarine";
+import { Submarine as SubmarineSDK } from "pinata-submarine";
 
-const sub = new Submarine(
+const Submarine = new SubmarineSDK(
   process.env.PINATA_SUBMARINE_KEY || "Undefined Pinata Submarine Key",
   process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL || "Undefined Pinata Gateway Url"
 );
 
-export default sub;
+export default Submarine;
diff --git a/src/utils/supabase/helpers/parseNftIdString.ts b/src/utils/supabase/helpers/parseNftIdString.ts
index d4ffdbe62..079462638 100644
--- a/src/utils/supabase/helpers/parseNftIdString.ts
+++ b/src/utils/supabase/helpers/parseNftIdString.ts
@@ -4,9 +4,12 @@
  * Output: ["0x00...00", 1x11.11]
  */
 
-const parseNftIdString = (nftIdString: string): string[] => {
-  const spacesRemoved = nftIdString.replaceAll(" ", "");
-  return spacesRemoved.split(",");
+const parseNftIdString = (nftIdString?: string): string[] => {
+  if (!nftIdString) {
+    return [];
+  }
+
+  return nftIdString.replaceAll(" ", "").split(",");
 };
 
 export default parseNftIdString;
diff --git a/src/utils/supabase/supabase.ts b/src/utils/supabase/supabase.ts
index 91aac13be..37dbd650f 100644
--- a/src/utils/supabase/supabase.ts
+++ b/src/utils/supabase/supabase.ts
@@ -6,11 +6,12 @@ const Supabase = createClient<Database>(
   process.env.NEXT_PUBLIC_SUPABASE_ANON || "Undefined supabase Anon"
 );
 
-export const getServiceSupabase = () => {
-  createClient<Database>(
-    process.env.NEXT_PUBLIC_SUPABASE_ANON || "",
-    process.env.SUPABASE_SERVICE_ROLE
-  );
-};
+// To research: Server Side initiation of Supabase with types
+// export const getServiceSupabase = () => {
+//   createClient<Database>(
+//     process.env.NEXT_PUBLIC_SUPABASE_ANON || "",
+//     process.env.SUPABASE_SERVICE_ROLE
+//   );
+// };
 
 export default Supabase;

From e6552b22d36f8d1560007ebcc2a138c9b016cf70 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Fri, 26 May 2023 15:59:11 +0200
Subject: [PATCH 08/18] Add API routes for creating, deleting, updating
 Unlockables & verifying access

---
 src/pages/api/unlockable/create.ts        | 48 ++++++++++++
 src/pages/api/unlockable/delete.ts        | 75 ++++++++++++++++++
 src/pages/api/unlockable/update.ts        | 94 +++++++++++++++++++++++
 src/pages/api/unlockable/verify-access.ts | 76 ++++++++++++++++++
 4 files changed, 293 insertions(+)
 create mode 100644 src/pages/api/unlockable/create.ts
 create mode 100644 src/pages/api/unlockable/delete.ts
 create mode 100644 src/pages/api/unlockable/update.ts
 create mode 100644 src/pages/api/unlockable/verify-access.ts

diff --git a/src/pages/api/unlockable/create.ts b/src/pages/api/unlockable/create.ts
new file mode 100644
index 000000000..2364ce3ad
--- /dev/null
+++ b/src/pages/api/unlockable/create.ts
@@ -0,0 +1,48 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import {
+  checkAuthentication,
+  handleError,
+  LoopgateError,
+} from "@/src/middleware";
+import { createClient } from "@supabase/supabase-js";
+import { Database } from "@/src/utils/supabase/types";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method !== "POST") {
+    return handleError(res, LoopgateError.noPostRequest);
+  }
+
+  const auth = await checkAuthentication(req, res);
+  if (!auth) {
+    return handleError(res, LoopgateError.unauthorized);
+  }
+
+  if (!req.body.uuid || !req.body.cid) {
+    return handleError(res, LoopgateError.badRequest);
+  }
+
+  // Create server Supabase client
+  const Supabase = createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.SUPABASE_SERVICE_ROLE
+  );
+
+  const { error } = await Supabase.from("unlockables").insert({
+    id: req.body.uuid,
+    owner: auth.address,
+    content_type_id: 1, // IPFS Unlockable
+    content_url: req.body.cid,
+    criteria_unlock_amount: 1,
+  });
+
+  if (error) {
+    return handleError(res, [500, error.message]);
+  }
+
+  return res.status(200).json({
+    message: `Successfully created Unlockable with UUID of ${req.body.uuid}.`,
+  });
+};
+
+export default withSessionRoute(handler);
diff --git a/src/pages/api/unlockable/delete.ts b/src/pages/api/unlockable/delete.ts
new file mode 100644
index 000000000..535f89699
--- /dev/null
+++ b/src/pages/api/unlockable/delete.ts
@@ -0,0 +1,75 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import {
+  checkAuthentication,
+  handleError,
+  LoopgateError,
+} from "@/src/middleware";
+import { createClient } from "@supabase/supabase-js";
+import { Database } from "@/src/utils/supabase/types";
+import { Submarine } from "@/src/utils/pinata";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method !== "POST") {
+    return handleError(res, LoopgateError.noPostRequest);
+  }
+
+  const auth = await checkAuthentication(req, res);
+  if (!auth) {
+    return handleError(res, LoopgateError.unauthorized);
+  }
+
+  if (!req.body.uuid || !req.body.cid || Array.isArray(req.body.cid)) {
+    return handleError(res, LoopgateError.badRequest);
+  }
+
+  // Create server Supabase client
+  const Supabase = createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.SUPABASE_SERVICE_ROLE
+  );
+
+  const { error: deleteUnlockableError } = await Supabase.from("unlockables")
+    .delete()
+    .eq("id", req.body.uuid);
+
+  if (deleteUnlockableError) {
+    return handleError(res, [500, deleteUnlockableError.message]);
+  }
+
+  const { error: deleteCriteriaError } = await Supabase.from("unlock_criteria")
+    .delete()
+    .eq("unlockable_id", req.body.uuid);
+
+  if (deleteCriteriaError) {
+    return handleError(res, [500, deleteCriteriaError.message]);
+  }
+
+  const { items: submarinedItems } = await Submarine.getSubmarinedContentByCid(
+    req.body.cid
+  );
+
+  if (!submarinedItems || submarinedItems.length == 0) {
+    return handleError(res, [
+      500,
+      `Unable to retrieve the file with CID '${req.query.cid}'.`,
+    ]);
+  }
+
+  const submarineDeleteRes = await Submarine.deleteContent(
+    submarinedItems[0].id
+  );
+
+  if (!submarineDeleteRes) {
+    return handleError(res, [
+      500,
+      `Unable to delete the file with CID '${req.query.cid}'`,
+    ]);
+  }
+
+  return res.status(200).json({
+    message: `Successfully deleted the Unlockable with UUID of ${req.body.uuid} and CID of ${req.body.cid}.`,
+  });
+};
+
+export default withSessionRoute(handler);
diff --git a/src/pages/api/unlockable/update.ts b/src/pages/api/unlockable/update.ts
new file mode 100644
index 000000000..5b9fb4b98
--- /dev/null
+++ b/src/pages/api/unlockable/update.ts
@@ -0,0 +1,94 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import {
+  checkAuthentication,
+  handleError,
+  LoopgateError,
+} from "@/src/middleware";
+import { createClient } from "@supabase/supabase-js";
+import { Database } from "@/src/utils/supabase/types";
+
+type UUID = string;
+
+interface UnlockCriterion {
+  unlockable_id: UUID;
+  nft_id: string;
+}
+
+export interface UnlockableUpdateProps {
+  body: {
+    unlockable: {
+      uuid: UUID;
+      criteria_unlock_amount?: number;
+      description?: string;
+      name?: string;
+    };
+    unlock_criteria: UnlockCriterion[];
+  };
+}
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method !== "POST") {
+    return handleError(res, LoopgateError.noPostRequest);
+  }
+
+  const auth = await checkAuthentication(req, res);
+  if (!auth) {
+    return handleError(res, LoopgateError.unauthorized);
+  }
+
+  if (!req.body.unlockable.uuid || req.body.unlockable.unlock_criteria) {
+    return handleError(res, LoopgateError.badRequest);
+  }
+
+  // Create server Supabase client
+  const Supabase = createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.SUPABASE_SERVICE_ROLE
+  );
+
+  const { error: updateUnlockableError } = await Supabase.from("unlockables")
+    .update({
+      // Changing the ContentType and URL are not implemented, for now.
+      // content_type_id: req.body?.content_type_id,
+      // content_url: req.body?.cid,
+      criteria_unlock_amount: req.body.unlockable?.criteria_unlock_amount,
+      description: req.body.unlockable?.description,
+      name: req.body.unlockable?.name,
+    })
+    .eq("id", req.body.unlockable.uuid);
+
+  if (updateUnlockableError) {
+    return handleError(res, [500, updateUnlockableError.message]);
+  }
+
+  const { error: deleteCriteriaError } = await Supabase.from("unlock_criteria")
+    .delete()
+    .eq("unlockable_id", req.body.uuid);
+
+  if (deleteCriteriaError) {
+    return handleError(res, [500, deleteCriteriaError.message]);
+  }
+
+  const unlockCriteria: {
+    unlockable_id: UUID;
+    nft_id: string;
+    owner: string;
+  }[] = req.body.unlockCriteria.map((x: UnlockCriterion) => {
+    return { ...x, owner: auth.address };
+  });
+
+  const { error: insertCriteriaError } = await Supabase.from(
+    "unlock_criteria"
+  ).insert(unlockCriteria);
+
+  if (insertCriteriaError) {
+    return handleError(res, [500, insertCriteriaError.message]);
+  }
+
+  return res.status(200).json({
+    message: `Successfully updated Unlockable and Unlock Criteria with UUID of ${req.body.uuid}.`,
+  });
+};
+
+export default withSessionRoute(handler);
diff --git a/src/pages/api/unlockable/verify-access.ts b/src/pages/api/unlockable/verify-access.ts
new file mode 100644
index 000000000..a03d23ca1
--- /dev/null
+++ b/src/pages/api/unlockable/verify-access.ts
@@ -0,0 +1,76 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { siwe } from "@/src/utils/siwe";
+import { getUserAddress, getAllUserNftIds } from "@/src/utils/loopring";
+import { handleError, LoopgateError } from "@/src/middleware";
+import {
+  findUnlockableByUuid,
+  fetchUnlockableByUuid,
+} from "@/src/utils/generic";
+import { getPinataIndexLink } from "@/src/utils/pinata";
+import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const query = req.query;
+  const { address, unlockableId } = query;
+  const siweSesh = await siwe.getSession(req, res);
+
+  // Check validity of request
+  if (
+    !address ||
+    Array.isArray(address) ||
+    !unlockableId ||
+    Array.isArray(unlockableId)
+  ) {
+    return handleError(res, LoopgateError.noAddressProvided);
+  }
+
+  //   Check if there is a session. Only connected users may call this endpoint.
+  if (!siweSesh.address || siweSesh.address !== address) {
+    return handleError(res, LoopgateError.unauthorized);
+  }
+
+  // 1️⃣ Call the Loopring API to find the User's Loopring Account ID
+  const accountId = await getUserAddress(address);
+
+  if (!accountId) {
+    return handleError(res, LoopgateError.noLoopringAccount);
+  }
+
+  const unlockable =
+    process.env.LOOPGATE_MODE === "supabase"
+      ? await fetchUnlockableByUuid(unlockableId)
+      : findUnlockableByUuid(unlockableId);
+
+  if (!unlockable) {
+    return handleError(res, LoopgateError.noUnlockableFound);
+  }
+
+  // 2️⃣ Call the Loopring API to find the NFTs held by the user
+  const userNftIds = await getAllUserNftIds(accountId);
+
+  if (!userNftIds) {
+    return handleError(res, LoopgateError.noNftsFound);
+  }
+
+  // 3️⃣ Check if the user meets the unlock criteria
+  const intersection = unlockable.unlockCriteria.nftId.filter((value) =>
+    userNftIds.includes(value)
+  );
+
+  if (intersection.length < unlockable.unlockCriteria.unlockAmount) {
+    return handleError(res, LoopgateError.unlockReqNotMet);
+  }
+
+  // 4️⃣ Get access link for the unlockable
+  const unlock = await getPinataIndexLink(unlockable.content.url);
+
+  if (!unlock) {
+    return handleError(res, LoopgateError.noPinataContentFound);
+  }
+
+  return res.status(200).json({
+    unlock: unlock,
+  });
+};
+
+export default withSessionRoute(handler);

From 2697fb57fccee8ea840b6c376b4bfffcac6f35bb Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Fri, 26 May 2023 17:57:27 +0200
Subject: [PATCH 09/18] Big refactor: consistency, exports, folder structure

---
 package.json                                  |  2 +-
 src/components/UnlockablePage/Layout.tsx      |  2 +-
 src/middleware/checkAuthentication.ts         |  6 ++--
 src/middleware/{ => error}/handleError.ts     |  0
 src/middleware/{ => error}/loopgateError.ts   |  0
 src/middleware/index.ts                       |  4 +--
 src/middleware/ironSession/index.ts           |  1 +
 .../ironSession}/withSession.ts               |  0
 .../siwe/configure.tsx}                       |  0
 src/{utils => middleware}/siwe/index.ts       |  0
 src/{utils => middleware}/siwe/siwe.ts        |  2 +-
 src/pages/_app.tsx                            |  4 +--
 src/pages/api/helpers/sample-unlockable.ts    |  3 +-
 src/pages/api/nft/get-holders-nft-id.ts       |  2 +-
 src/pages/api/nft/get-holders-nftdata.ts      |  2 +-
 src/pages/api/nft/get-nft-data.ts             |  2 +-
 src/pages/api/nft/get-user-nfts.ts            |  2 +-
 src/pages/api/session/me.ts                   |  4 +--
 src/pages/api/siwe/[...route].ts              |  2 +-
 src/pages/api/unlockable/create.ts            |  4 +--
 src/pages/api/unlockable/delete.ts            |  6 ++--
 src/pages/api/unlockable/update.ts            | 20 ++++++------
 src/pages/api/unlockable/verify-access.ts     | 10 +++---
 src/pages/api/upload/submarine.ts             |  2 +-
 src/pages/index.tsx                           |  7 ++--
 src/pages/unlocks/[uuid].tsx                  |  4 +--
 src/pages/unlocks/browse.tsx                  |  4 +--
 .../unlockable}/fetchAllUnlockables.ts        |  8 ++---
 .../unlockable}/fetchUnlockableByUuid.ts      |  8 ++---
 .../unlockable}/findAllUnlockables.ts         |  8 ++---
 .../unlockable}/findUnlockableByUuid.test.ts  |  4 +--
 .../unlockable}/findUnlockableByUuid.ts       |  8 ++---
 .../unlockable}/findUnlockedCids.test.ts      |  4 +--
 .../loopgate/unlockable}/findUnlockedCids.ts  | 10 +++---
 src/services/loopgate/unlockable/index.ts     |  5 +++
 .../loopring/_constants.ts                    |  0
 src/{utils => services}/loopring/_types.ts    |  0
 .../loopring/extractNfts.ts                   |  0
 .../loopring/getAllUserNftIds.ts              |  0
 .../loopring/getMinterAndToken.test.ts        |  0
 .../loopring/getMinterAndToken.ts             |  0
 .../loopring/getNftData.ts                    |  0
 .../loopring/getNftHolders.test.ts            |  0
 .../loopring/getNftHolders.ts                 |  0
 .../loopring/getUserAddress.test.ts           |  0
 .../loopring/getUserAddress.ts                |  0
 .../loopring/getUserNfts.test.ts              |  0
 .../loopring/getUserNfts.ts                   |  0
 .../loopring/headerOpts.ts                    |  0
 src/{utils => services}/loopring/index.ts     |  0
 .../loopring/rateLimitedAxios.ts              |  0
 src/{utils => services}/pinata/_types.ts      |  0
 .../pinata/checkPinataFolderForHtml.ts        |  0
 .../pinata/formatAccessLink.test.ts           |  0
 .../pinata/formatAccessLink.ts                |  0
 .../pinata/generateAccessLink.ts              |  0
 .../pinata/getPinataIndexLink.ts              |  0
 src/{utils => services}/pinata/index.ts       |  0
 .../pinata/listFolderContent.ts               |  0
 src/{utils => services}/pinata/submarine.ts   |  0
 src/services/supabase/helpers/index.ts        |  1 +
 .../supabase/helpers/parseSqlUnlockable.ts    |  6 ++--
 src/{utils => services}/supabase/index.ts     |  0
 .../supabase/sql/content_types.sql            |  0
 .../supabase/sql/roles.sql                    |  0
 .../supabase/sql/unlock_criteria.sql          |  0
 .../supabase/sql/unlockables.sql              |  0
 .../supabase/sql/users.sql                    |  0
 .../sql/view/unlockables_with_criteria.sql    |  0
 src/{utils => services}/supabase/supabase.ts  |  0
 .../supabase/typeExtensions.ts                |  0
 src/{utils => services}/supabase/types.ts     |  3 ++
 src/services/wagmi/index.ts                   |  1 +
 src/{utils => services}/wagmi/wagmi.ts        |  4 +--
 .../{inline-styles.ts => inlineStyles.ts}     |  0
 src/utils/generic/checkIfContainsAll.test.ts  |  2 +-
 src/utils/generic/checkIfContainsAll.ts       |  4 +--
 src/utils/generic/{cs.test.ts => cn.test.ts}  |  2 +-
 src/utils/generic/cn.ts                       |  4 +--
 src/utils/generic/formatRelativeDate.ts       |  8 ++---
 src/utils/generic/getCurrentYear.test.ts      |  2 +-
 src/utils/generic/getCurrentYear.ts           |  5 +--
 src/utils/generic/index.ts                    | 32 ++++---------------
 .../helpers => generic}/isUuid.test.ts        |  2 +-
 .../{supabase/helpers => generic}/isUuid.ts   |  4 +--
 .../parseNftIdString.test.ts                  |  2 +-
 .../helpers => generic}/parseNftIdString.ts   |  4 +--
 src/utils/generic/truncate0x.ts               |  4 +--
 src/utils/generic/uuidToNumber.test.ts        |  2 +-
 src/utils/generic/uuidToNumber.ts             |  4 +--
 src/utils/supabase/helpers/index.ts           |  5 ---
 src/utils/wagmi/index.ts                      |  2 --
 92 files changed, 103 insertions(+), 150 deletions(-)
 rename src/middleware/{ => error}/handleError.ts (100%)
 rename src/middleware/{ => error}/loopgateError.ts (100%)
 create mode 100644 src/middleware/ironSession/index.ts
 rename src/{utils/iron-session => middleware/ironSession}/withSession.ts (100%)
 rename src/{utils/siwe/configureSIWE.tsx => middleware/siwe/configure.tsx} (100%)
 rename src/{utils => middleware}/siwe/index.ts (100%)
 rename src/{utils => middleware}/siwe/siwe.ts (92%)
 rename src/{utils/generic => services/loopgate/unlockable}/fetchAllUnlockables.ts (64%)
 rename src/{utils/generic => services/loopgate/unlockable}/fetchUnlockableByUuid.ts (76%)
 rename src/{utils/generic => services/loopgate/unlockable}/findAllUnlockables.ts (62%)
 rename src/{utils/generic => services/loopgate/unlockable}/findUnlockableByUuid.test.ts (85%)
 rename src/{utils/generic => services/loopgate/unlockable}/findUnlockableByUuid.ts (55%)
 rename src/{utils/generic => services/loopgate/unlockable}/findUnlockedCids.test.ts (88%)
 rename src/{utils/generic => services/loopgate/unlockable}/findUnlockedCids.ts (76%)
 create mode 100644 src/services/loopgate/unlockable/index.ts
 rename src/{utils => services}/loopring/_constants.ts (100%)
 rename src/{utils => services}/loopring/_types.ts (100%)
 rename src/{utils => services}/loopring/extractNfts.ts (100%)
 rename src/{utils => services}/loopring/getAllUserNftIds.ts (100%)
 rename src/{utils => services}/loopring/getMinterAndToken.test.ts (100%)
 rename src/{utils => services}/loopring/getMinterAndToken.ts (100%)
 rename src/{utils => services}/loopring/getNftData.ts (100%)
 rename src/{utils => services}/loopring/getNftHolders.test.ts (100%)
 rename src/{utils => services}/loopring/getNftHolders.ts (100%)
 rename src/{utils => services}/loopring/getUserAddress.test.ts (100%)
 rename src/{utils => services}/loopring/getUserAddress.ts (100%)
 rename src/{utils => services}/loopring/getUserNfts.test.ts (100%)
 rename src/{utils => services}/loopring/getUserNfts.ts (100%)
 rename src/{utils => services}/loopring/headerOpts.ts (100%)
 rename src/{utils => services}/loopring/index.ts (100%)
 rename src/{utils => services}/loopring/rateLimitedAxios.ts (100%)
 rename src/{utils => services}/pinata/_types.ts (100%)
 rename src/{utils => services}/pinata/checkPinataFolderForHtml.ts (100%)
 rename src/{utils => services}/pinata/formatAccessLink.test.ts (100%)
 rename src/{utils => services}/pinata/formatAccessLink.ts (100%)
 rename src/{utils => services}/pinata/generateAccessLink.ts (100%)
 rename src/{utils => services}/pinata/getPinataIndexLink.ts (100%)
 rename src/{utils => services}/pinata/index.ts (100%)
 rename src/{utils => services}/pinata/listFolderContent.ts (100%)
 rename src/{utils => services}/pinata/submarine.ts (100%)
 create mode 100644 src/services/supabase/helpers/index.ts
 rename src/{utils => services}/supabase/helpers/parseSqlUnlockable.ts (79%)
 rename src/{utils => services}/supabase/index.ts (100%)
 rename src/{utils => services}/supabase/sql/content_types.sql (100%)
 rename src/{utils => services}/supabase/sql/roles.sql (100%)
 rename src/{utils => services}/supabase/sql/unlock_criteria.sql (100%)
 rename src/{utils => services}/supabase/sql/unlockables.sql (100%)
 rename src/{utils => services}/supabase/sql/users.sql (100%)
 rename src/{utils => services}/supabase/sql/view/unlockables_with_criteria.sql (100%)
 rename src/{utils => services}/supabase/supabase.ts (100%)
 rename src/{utils => services}/supabase/typeExtensions.ts (100%)
 rename src/{utils => services}/supabase/types.ts (97%)
 create mode 100644 src/services/wagmi/index.ts
 rename src/{utils => services}/wagmi/wagmi.ts (92%)
 rename src/styles/{inline-styles.ts => inlineStyles.ts} (100%)
 rename src/utils/generic/{cs.test.ts => cn.test.ts} (93%)
 rename src/utils/{supabase/helpers => generic}/isUuid.test.ts (94%)
 rename src/utils/{supabase/helpers => generic}/isUuid.ts (67%)
 rename src/utils/{supabase/helpers => generic}/parseNftIdString.test.ts (96%)
 rename src/utils/{supabase/helpers => generic}/parseNftIdString.ts (68%)
 delete mode 100644 src/utils/supabase/helpers/index.ts
 delete mode 100644 src/utils/wagmi/index.ts

diff --git a/package.json b/package.json
index 40a2cb572..f14f9e096 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "lint": "next lint",
     "test": "jest",
     "test:watch": "jest --watch",
-    "supabase:types": "npx supabase gen types typescript --project-id wyskjtopiuiwkkqclyho --schema public > src/utils/supabase/types.ts"
+    "supabase:types": "npx supabase gen types typescript --project-id wyskjtopiuiwkkqclyho --schema public > src/services/supabase/types.ts"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.13",
diff --git a/src/components/UnlockablePage/Layout.tsx b/src/components/UnlockablePage/Layout.tsx
index e35607a3a..e3c894241 100644
--- a/src/components/UnlockablePage/Layout.tsx
+++ b/src/components/UnlockablePage/Layout.tsx
@@ -1,7 +1,7 @@
 import Header from "../Header";
 import Footer from "../Footer";
 import { ReactNode } from "react";
-import { techPattern } from "@/src/styles/inline-styles";
+import { techPattern } from "@/src/styles/inlineStyles";
 import { cn } from "@/src/utils/generic";
 
 type Props = {
diff --git a/src/middleware/checkAuthentication.ts b/src/middleware/checkAuthentication.ts
index 632580566..302c450ca 100644
--- a/src/middleware/checkAuthentication.ts
+++ b/src/middleware/checkAuthentication.ts
@@ -1,6 +1,6 @@
 import { GetServerSidePropsContext } from "next";
-import { siwe } from "@/src/utils/siwe";
-import Supabase from "@/src/utils/supabase";
+import { siwe } from "@/src/middleware/siwe";
+import Supabase from "@/src/services/supabase";
 import logger from "@/src/utils/logger";
 import { NextApiRequest, NextApiResponse } from "next";
 
@@ -46,8 +46,6 @@ export async function checkAuthentication(
       .eq("eth_address", siweSesh.address?.toLowerCase())
       .single();
 
-    console.log(data);
-
     if (
       !data?.amount ||
       data.amount < parseInt(process.env.LOOPGATE_CC_THRESHOLD, 10)
diff --git a/src/middleware/handleError.ts b/src/middleware/error/handleError.ts
similarity index 100%
rename from src/middleware/handleError.ts
rename to src/middleware/error/handleError.ts
diff --git a/src/middleware/loopgateError.ts b/src/middleware/error/loopgateError.ts
similarity index 100%
rename from src/middleware/loopgateError.ts
rename to src/middleware/error/loopgateError.ts
diff --git a/src/middleware/index.ts b/src/middleware/index.ts
index 73eebf3f6..47307f1ad 100644
--- a/src/middleware/index.ts
+++ b/src/middleware/index.ts
@@ -1,4 +1,4 @@
 export { checkAuthentication } from "./checkAuthentication";
 export { redirectTo } from "./redirectTo";
-export { handleError } from "./handleError";
-export { LoopgateError } from "./loopgateError";
+export { handleError } from "./error/handleError";
+export { LoopgateError } from "./error/loopgateError";
diff --git a/src/middleware/ironSession/index.ts b/src/middleware/ironSession/index.ts
new file mode 100644
index 000000000..59eb69737
--- /dev/null
+++ b/src/middleware/ironSession/index.ts
@@ -0,0 +1 @@
+export { withSessionRoute, withSessionSsr } from "./withSession";
diff --git a/src/utils/iron-session/withSession.ts b/src/middleware/ironSession/withSession.ts
similarity index 100%
rename from src/utils/iron-session/withSession.ts
rename to src/middleware/ironSession/withSession.ts
diff --git a/src/utils/siwe/configureSIWE.tsx b/src/middleware/siwe/configure.tsx
similarity index 100%
rename from src/utils/siwe/configureSIWE.tsx
rename to src/middleware/siwe/configure.tsx
diff --git a/src/utils/siwe/index.ts b/src/middleware/siwe/index.ts
similarity index 100%
rename from src/utils/siwe/index.ts
rename to src/middleware/siwe/index.ts
diff --git a/src/utils/siwe/siwe.ts b/src/middleware/siwe/siwe.ts
similarity index 92%
rename from src/utils/siwe/siwe.ts
rename to src/middleware/siwe/siwe.ts
index a0e8a266b..a7c492732 100644
--- a/src/utils/siwe/siwe.ts
+++ b/src/middleware/siwe/siwe.ts
@@ -1,4 +1,4 @@
-import { configureSIWE } from "./configureSIWE";
+import { configureSIWE } from "./configure";
 // import { configureSIWE } from "connectkit-next-siwe";
 
 // Replaced with an edited version on 06-02-2023 to circumvent a 'connectkit-next-siwe' WalletConnect through a Smart Wallet issue (Loopring Wallet).
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 9e2151b75..b16936ae5 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -4,8 +4,8 @@ import { WagmiConfig } from "wagmi";
 import { ConnectKitProvider } from "connectkit";
 
 import "../styles/globals.css";
-import { WagmiClient } from "../utils/wagmi";
-import { siwe } from "../utils/siwe";
+import { WagmiClient } from "../services/wagmi";
+import { siwe } from "../middleware/siwe";
 import { overrides } from "../styles/ConnectKit/overrides";
 import NextHeadBase from "../components/SEO/NextHeadBase";
 import { inter, unbounded } from "../components/Fonts";
diff --git a/src/pages/api/helpers/sample-unlockable.ts b/src/pages/api/helpers/sample-unlockable.ts
index e02c02b8f..aac1ef954 100644
--- a/src/pages/api/helpers/sample-unlockable.ts
+++ b/src/pages/api/helpers/sample-unlockable.ts
@@ -2,12 +2,11 @@ import { v4 as uuidv4 } from "uuid";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { UnlockableV2 } from "@/src/config/types";
 
+// This API Endpoint generates a sample UnlockableV2 object you can use for your `config.ts` file.
 export default async function handler(
   _req: NextApiRequest,
   res: NextApiResponse
 ) {
-  // This API Endpoint generates a sample UnlockableV2 object you can use for your `config.ts` file.
-
   const now = new Date();
   const dateObj = now.toISOString().replace("T", " ").split("Z")[0];
 
diff --git a/src/pages/api/nft/get-holders-nft-id.ts b/src/pages/api/nft/get-holders-nft-id.ts
index 76e4542e3..93897c241 100644
--- a/src/pages/api/nft/get-holders-nft-id.ts
+++ b/src/pages/api/nft/get-holders-nft-id.ts
@@ -3,7 +3,7 @@ import {
   getMinterAndToken,
   getNftData,
   getNftHolders,
-} from "@/src/utils/loopring";
+} from "@/src/services/loopring";
 import { handleError, LoopgateError } from "@/src/middleware";
 
 // Request holders for a NFT held on Loopring by querying NFT ID
diff --git a/src/pages/api/nft/get-holders-nftdata.ts b/src/pages/api/nft/get-holders-nftdata.ts
index cd12f62ba..132a4b3ca 100644
--- a/src/pages/api/nft/get-holders-nftdata.ts
+++ b/src/pages/api/nft/get-holders-nftdata.ts
@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import getNftHolders from "@/src/utils/loopring/getNftHolders";
+import getNftHolders from "@/src/services/loopring/getNftHolders";
 import { handleError, LoopgateError } from "@/src/middleware";
 
 // Request NFTs on Loopring held by a user by querying NFT Data
diff --git a/src/pages/api/nft/get-nft-data.ts b/src/pages/api/nft/get-nft-data.ts
index 83aca9824..ace5cb6c4 100644
--- a/src/pages/api/nft/get-nft-data.ts
+++ b/src/pages/api/nft/get-nft-data.ts
@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getMinterAndToken, getNftData } from "@/src/utils/loopring";
+import { getMinterAndToken, getNftData } from "@/src/services/loopring";
 import logger from "@/src/utils/logger";
 import { handleError, LoopgateError } from "@/src/middleware";
 
diff --git a/src/pages/api/nft/get-user-nfts.ts b/src/pages/api/nft/get-user-nfts.ts
index 59b5430ab..7ad130c8c 100644
--- a/src/pages/api/nft/get-user-nfts.ts
+++ b/src/pages/api/nft/get-user-nfts.ts
@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getAllUserNftIds } from "../../../utils/loopring";
+import { getAllUserNftIds } from "../../../services/loopring";
 import { handleError, LoopgateError } from "@/src/middleware";
 
 // Request NFTs on Loopring held by a user
diff --git a/src/pages/api/session/me.ts b/src/pages/api/session/me.ts
index 0644fd6d7..7970a4ee4 100644
--- a/src/pages/api/session/me.ts
+++ b/src/pages/api/session/me.ts
@@ -1,6 +1,6 @@
 import { NextApiRequest, NextApiResponse } from "next";
-import { siwe } from "@/src/utils/siwe";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import { siwe } from "@/src/middleware/siwe";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { method } = req;
diff --git a/src/pages/api/siwe/[...route].ts b/src/pages/api/siwe/[...route].ts
index ca77e54a0..fe48727ea 100644
--- a/src/pages/api/siwe/[...route].ts
+++ b/src/pages/api/siwe/[...route].ts
@@ -1,2 +1,2 @@
-import { siwe } from "../../../utils/siwe";
+import { siwe } from "../../../middleware/siwe";
 export default siwe.apiRouteHandler;
diff --git a/src/pages/api/unlockable/create.ts b/src/pages/api/unlockable/create.ts
index 2364ce3ad..a05de8d74 100644
--- a/src/pages/api/unlockable/create.ts
+++ b/src/pages/api/unlockable/create.ts
@@ -1,12 +1,12 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 import {
   checkAuthentication,
   handleError,
   LoopgateError,
 } from "@/src/middleware";
 import { createClient } from "@supabase/supabase-js";
-import { Database } from "@/src/utils/supabase/types";
+import { Database } from "@/src/services/supabase/types";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method !== "POST") {
diff --git a/src/pages/api/unlockable/delete.ts b/src/pages/api/unlockable/delete.ts
index 535f89699..828f793fc 100644
--- a/src/pages/api/unlockable/delete.ts
+++ b/src/pages/api/unlockable/delete.ts
@@ -1,13 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 import {
   checkAuthentication,
   handleError,
   LoopgateError,
 } from "@/src/middleware";
 import { createClient } from "@supabase/supabase-js";
-import { Database } from "@/src/utils/supabase/types";
-import { Submarine } from "@/src/utils/pinata";
+import { Database } from "@/src/services/supabase/types";
+import { Submarine } from "@/src/services/pinata";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method !== "POST") {
diff --git a/src/pages/api/unlockable/update.ts b/src/pages/api/unlockable/update.ts
index 5b9fb4b98..86d11b756 100644
--- a/src/pages/api/unlockable/update.ts
+++ b/src/pages/api/unlockable/update.ts
@@ -1,12 +1,12 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 import {
   checkAuthentication,
   handleError,
   LoopgateError,
 } from "@/src/middleware";
 import { createClient } from "@supabase/supabase-js";
-import { Database } from "@/src/utils/supabase/types";
+import { Database } from "@/src/services/supabase/types";
 
 type UUID = string;
 
@@ -55,6 +55,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       criteria_unlock_amount: req.body.unlockable?.criteria_unlock_amount,
       description: req.body.unlockable?.description,
       name: req.body.unlockable?.name,
+      unlisted: req.body.unlockable?.unlisted,
     })
     .eq("id", req.body.unlockable.uuid);
 
@@ -70,17 +71,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     return handleError(res, [500, deleteCriteriaError.message]);
   }
 
-  const unlockCriteria: {
-    unlockable_id: UUID;
-    nft_id: string;
-    owner: string;
-  }[] = req.body.unlockCriteria.map((x: UnlockCriterion) => {
-    return { ...x, owner: auth.address };
-  });
-
   const { error: insertCriteriaError } = await Supabase.from(
     "unlock_criteria"
-  ).insert(unlockCriteria);
+  ).insert(
+    req.body.unlockCriteria.map((x: UnlockCriterion) => ({
+      ...x,
+      owner: auth.address,
+    }))
+  );
 
   if (insertCriteriaError) {
     return handleError(res, [500, insertCriteriaError.message]);
diff --git a/src/pages/api/unlockable/verify-access.ts b/src/pages/api/unlockable/verify-access.ts
index a03d23ca1..088cd3295 100644
--- a/src/pages/api/unlockable/verify-access.ts
+++ b/src/pages/api/unlockable/verify-access.ts
@@ -1,13 +1,13 @@
 import { NextApiRequest, NextApiResponse } from "next";
-import { siwe } from "@/src/utils/siwe";
-import { getUserAddress, getAllUserNftIds } from "@/src/utils/loopring";
+import { siwe } from "@/src/middleware/siwe";
+import { getUserAddress, getAllUserNftIds } from "@/src/services/loopring";
 import { handleError, LoopgateError } from "@/src/middleware";
 import {
   findUnlockableByUuid,
   fetchUnlockableByUuid,
-} from "@/src/utils/generic";
-import { getPinataIndexLink } from "@/src/utils/pinata";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+} from "@/src/services/loopgate/unlockable";
+import { getPinataIndexLink } from "@/src/services/pinata";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const query = req.query;
diff --git a/src/pages/api/upload/submarine.ts b/src/pages/api/upload/submarine.ts
index 65bf4daf4..7aa3e2407 100644
--- a/src/pages/api/upload/submarine.ts
+++ b/src/pages/api/upload/submarine.ts
@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/utils/iron-session/withSession";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 import {
   checkAuthentication,
   handleError,
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fd4a8b908..2fef18131 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,8 @@
 import { GetServerSideProps } from "next";
-import { fetchAllUnlockables, findAllUnlockables } from "../utils/generic";
+import {
+  fetchAllUnlockables,
+  findAllUnlockables,
+} from "../services/loopgate/unlockable";
 import { UnlockableV2 } from "../config/types";
 
 import Header from "../components/Header";
@@ -8,7 +11,7 @@ import Hero from "../components/Pages/Home/Hero";
 import ContentBlocks from "../components/Pages/Home/ContentBlocks";
 import UseCases from "../components/Pages/Home/UseCases";
 import CTABanner from "../components/Pages/Home/CTABanner";
-import { techPattern } from "../styles/inline-styles";
+import { techPattern } from "../styles/inlineStyles";
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   context.res.setHeader(
diff --git a/src/pages/unlocks/[uuid].tsx b/src/pages/unlocks/[uuid].tsx
index ec0d22d59..1d704e7a0 100644
--- a/src/pages/unlocks/[uuid].tsx
+++ b/src/pages/unlocks/[uuid].tsx
@@ -1,13 +1,13 @@
 import {
   fetchUnlockableByUuid,
   findUnlockableByUuid,
-} from "@/src/utils/generic";
+} from "@/src/services/loopgate/unlockable";
 import Layout from "@/src/components/UnlockablePage/Layout";
 import FourOhFour from "@/src/components/UnlockablePage/404";
 import UnlockCard from "@/src/components/UnlockablePage/UnlockCard/UnlockCard";
 import { GetServerSideProps } from "next";
 import { UnlockableV2 } from "@/src/config/types";
-import { isUuid } from "@/src/utils/supabase/helpers";
+import { isUuid } from "@/src/utils/generic";
 import NextHeadBase from "@/src/components/SEO/NextHeadBase";
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
diff --git a/src/pages/unlocks/browse.tsx b/src/pages/unlocks/browse.tsx
index 9d079ed4e..524e26c8c 100644
--- a/src/pages/unlocks/browse.tsx
+++ b/src/pages/unlocks/browse.tsx
@@ -1,8 +1,8 @@
+import { truncate0x } from "@/src/utils/generic";
 import {
   findAllUnlockables,
   fetchAllUnlockables,
-  truncate0x,
-} from "@/src/utils/generic";
+} from "@/src/services/loopgate/unlockable";
 import Layout from "@/src/components/UnlockablePage/Layout";
 import FourOhFour from "@/src/components/UnlockablePage/404";
 import { GetServerSideProps } from "next";
diff --git a/src/utils/generic/fetchAllUnlockables.ts b/src/services/loopgate/unlockable/fetchAllUnlockables.ts
similarity index 64%
rename from src/utils/generic/fetchAllUnlockables.ts
rename to src/services/loopgate/unlockable/fetchAllUnlockables.ts
index 542dfe026..def0bc1ec 100644
--- a/src/utils/generic/fetchAllUnlockables.ts
+++ b/src/services/loopgate/unlockable/fetchAllUnlockables.ts
@@ -1,7 +1,7 @@
-import Supabase from "../supabase";
-import { parseSqlUnlockable } from "../supabase/helpers";
+import Supabase from "../../supabase";
+import { parseSqlUnlockable } from "../../supabase/helpers";
 
-const fetchAllUnlockables = async (owner?: string) => {
+export const fetchAllUnlockables = async (owner?: string) => {
   const { data: unlockables, error } = await Supabase.from(
     "unlockables_with_criteria"
   )
@@ -20,5 +20,3 @@ const fetchAllUnlockables = async (owner?: string) => {
     return parsedUnlockables;
   }
 };
-
-export default fetchAllUnlockables;
diff --git a/src/utils/generic/fetchUnlockableByUuid.ts b/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts
similarity index 76%
rename from src/utils/generic/fetchUnlockableByUuid.ts
rename to src/services/loopgate/unlockable/fetchUnlockableByUuid.ts
index c762edc9a..e86a63ad9 100644
--- a/src/utils/generic/fetchUnlockableByUuid.ts
+++ b/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts
@@ -1,5 +1,5 @@
-import Supabase from "../supabase";
-import { parseSqlUnlockable } from "../supabase/helpers";
+import Supabase from "../../supabase";
+import { parseSqlUnlockable } from "../../supabase/helpers";
 
 // TODO: Inserting data https://supabase.com/docs/reference/javascript/insert
 // TODO: Updating data https://supabase.com/docs/reference/javascript/update
@@ -7,7 +7,7 @@ import { parseSqlUnlockable } from "../supabase/helpers";
 // TODO: Deleting data https://supabase.com/docs/reference/javascript/delete
 // RLS Policies: Only auth users can mutate
 
-const fetchUnlockableByUuid = async (uuid: string) => {
+export const fetchUnlockableByUuid = async (uuid: string) => {
   let { data: unlockables, error } = await Supabase.from(
     "unlockables_with_criteria"
   )
@@ -23,5 +23,3 @@ const fetchUnlockableByUuid = async (uuid: string) => {
     return parseSqlUnlockable(unlockables);
   }
 };
-
-export default fetchUnlockableByUuid;
diff --git a/src/utils/generic/findAllUnlockables.ts b/src/services/loopgate/unlockable/findAllUnlockables.ts
similarity index 62%
rename from src/utils/generic/findAllUnlockables.ts
rename to src/services/loopgate/unlockable/findAllUnlockables.ts
index cad7c145d..633e5be6f 100644
--- a/src/utils/generic/findAllUnlockables.ts
+++ b/src/services/loopgate/unlockable/findAllUnlockables.ts
@@ -1,7 +1,7 @@
-import { unlockablesV2 } from "../../config/config";
-import { UnlockableV2, ConfigError } from "../../config/types";
+import { unlockablesV2 } from "../../../config/config";
+import { UnlockableV2, ConfigError } from "../../../config/types";
 
-const findAllUnlockables = (
+export const findAllUnlockables = (
   owner?: string,
   unlockablesArray: UnlockableV2[] = unlockablesV2
 ) => {
@@ -15,5 +15,3 @@ const findAllUnlockables = (
 
   return unlockablesArray;
 };
-
-export default findAllUnlockables;
diff --git a/src/utils/generic/findUnlockableByUuid.test.ts b/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts
similarity index 85%
rename from src/utils/generic/findUnlockableByUuid.test.ts
rename to src/services/loopgate/unlockable/findUnlockableByUuid.test.ts
index c2024433e..eddcbc6f8 100644
--- a/src/utils/generic/findUnlockableByUuid.test.ts
+++ b/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts
@@ -1,5 +1,5 @@
-import { findUnlockableByUuid } from "./";
-import { ConfigError } from "../../config/types";
+import { findUnlockableByUuid } from "../../../utils/generic";
+import { ConfigError } from "../../../config/types";
 
 describe("find unlockables based on UUID", () => {
   it("should return one result if the user meets the criteria for it", () => {
diff --git a/src/utils/generic/findUnlockableByUuid.ts b/src/services/loopgate/unlockable/findUnlockableByUuid.ts
similarity index 55%
rename from src/utils/generic/findUnlockableByUuid.ts
rename to src/services/loopgate/unlockable/findUnlockableByUuid.ts
index 00236b1b0..050bd8df9 100644
--- a/src/utils/generic/findUnlockableByUuid.ts
+++ b/src/services/loopgate/unlockable/findUnlockableByUuid.ts
@@ -1,7 +1,7 @@
-import { unlockablesV2 } from "../../config/config";
-import { UnlockableV2, ConfigError } from "../../config/types";
+import { unlockablesV2 } from "../../../config/config";
+import { UnlockableV2, ConfigError } from "../../../config/types";
 
-const findUnlockableByUuid = (
+export const findUnlockableByUuid = (
   uuid: string,
   unlockablesArray: UnlockableV2[] = unlockablesV2
 ) => {
@@ -11,5 +11,3 @@ const findUnlockableByUuid = (
 
   return unlockablesArray.filter((item) => item.id === uuid)[0];
 };
-
-export default findUnlockableByUuid;
diff --git a/src/utils/generic/findUnlockedCids.test.ts b/src/services/loopgate/unlockable/findUnlockedCids.test.ts
similarity index 88%
rename from src/utils/generic/findUnlockedCids.test.ts
rename to src/services/loopgate/unlockable/findUnlockedCids.test.ts
index 18694cfa6..782317978 100644
--- a/src/utils/generic/findUnlockedCids.test.ts
+++ b/src/services/loopgate/unlockable/findUnlockedCids.test.ts
@@ -1,5 +1,5 @@
-import findUnlockedCids from "./findUnlockedCids";
-import { Unlockable, ConfigError } from "../../config/types";
+import { findUnlockedCids } from "./findUnlockedCids";
+import { Unlockable, ConfigError } from "../../../config/types";
 
 const mockUnlockables: Unlockable[] = [
   {
diff --git a/src/utils/generic/findUnlockedCids.ts b/src/services/loopgate/unlockable/findUnlockedCids.ts
similarity index 76%
rename from src/utils/generic/findUnlockedCids.ts
rename to src/services/loopgate/unlockable/findUnlockedCids.ts
index 5ba58b496..0ff04193d 100644
--- a/src/utils/generic/findUnlockedCids.ts
+++ b/src/services/loopgate/unlockable/findUnlockedCids.ts
@@ -1,6 +1,6 @@
-import { unlockables } from "../../config/config";
-import { checkIfContainsAll } from "./index";
-import { Unlockable, ConfigError } from "../../config/types";
+import { unlockables } from "../../../config/config";
+import { checkIfContainsAll } from "../../../utils/generic/index";
+import { Unlockable, ConfigError } from "../../../config/types";
 
 // Compare NFTs owned by an individual to the configurated combinations to find unlockable content
 /**
@@ -9,7 +9,7 @@ import { Unlockable, ConfigError } from "../../config/types";
  * @param unlockablesArray
  * @returns CIDs of files unlocked by the user
  */
-const findUnlockedCids = (
+export const findUnlockedCids = (
   nfts: string[],
   unlockablesArray: Unlockable[] = unlockables
 ) => {
@@ -27,5 +27,3 @@ const findUnlockedCids = (
 
   return cids;
 };
-
-export default findUnlockedCids;
diff --git a/src/services/loopgate/unlockable/index.ts b/src/services/loopgate/unlockable/index.ts
new file mode 100644
index 000000000..a1f805ae7
--- /dev/null
+++ b/src/services/loopgate/unlockable/index.ts
@@ -0,0 +1,5 @@
+export { fetchAllUnlockables } from "./fetchAllUnlockables";
+export { fetchUnlockableByUuid } from "./fetchUnlockableByUuid";
+export { findAllUnlockables } from "./findAllUnlockables";
+export { findUnlockableByUuid } from "./findUnlockableByUuid";
+export { findUnlockedCids } from "./findUnlockedCids";
diff --git a/src/utils/loopring/_constants.ts b/src/services/loopring/_constants.ts
similarity index 100%
rename from src/utils/loopring/_constants.ts
rename to src/services/loopring/_constants.ts
diff --git a/src/utils/loopring/_types.ts b/src/services/loopring/_types.ts
similarity index 100%
rename from src/utils/loopring/_types.ts
rename to src/services/loopring/_types.ts
diff --git a/src/utils/loopring/extractNfts.ts b/src/services/loopring/extractNfts.ts
similarity index 100%
rename from src/utils/loopring/extractNfts.ts
rename to src/services/loopring/extractNfts.ts
diff --git a/src/utils/loopring/getAllUserNftIds.ts b/src/services/loopring/getAllUserNftIds.ts
similarity index 100%
rename from src/utils/loopring/getAllUserNftIds.ts
rename to src/services/loopring/getAllUserNftIds.ts
diff --git a/src/utils/loopring/getMinterAndToken.test.ts b/src/services/loopring/getMinterAndToken.test.ts
similarity index 100%
rename from src/utils/loopring/getMinterAndToken.test.ts
rename to src/services/loopring/getMinterAndToken.test.ts
diff --git a/src/utils/loopring/getMinterAndToken.ts b/src/services/loopring/getMinterAndToken.ts
similarity index 100%
rename from src/utils/loopring/getMinterAndToken.ts
rename to src/services/loopring/getMinterAndToken.ts
diff --git a/src/utils/loopring/getNftData.ts b/src/services/loopring/getNftData.ts
similarity index 100%
rename from src/utils/loopring/getNftData.ts
rename to src/services/loopring/getNftData.ts
diff --git a/src/utils/loopring/getNftHolders.test.ts b/src/services/loopring/getNftHolders.test.ts
similarity index 100%
rename from src/utils/loopring/getNftHolders.test.ts
rename to src/services/loopring/getNftHolders.test.ts
diff --git a/src/utils/loopring/getNftHolders.ts b/src/services/loopring/getNftHolders.ts
similarity index 100%
rename from src/utils/loopring/getNftHolders.ts
rename to src/services/loopring/getNftHolders.ts
diff --git a/src/utils/loopring/getUserAddress.test.ts b/src/services/loopring/getUserAddress.test.ts
similarity index 100%
rename from src/utils/loopring/getUserAddress.test.ts
rename to src/services/loopring/getUserAddress.test.ts
diff --git a/src/utils/loopring/getUserAddress.ts b/src/services/loopring/getUserAddress.ts
similarity index 100%
rename from src/utils/loopring/getUserAddress.ts
rename to src/services/loopring/getUserAddress.ts
diff --git a/src/utils/loopring/getUserNfts.test.ts b/src/services/loopring/getUserNfts.test.ts
similarity index 100%
rename from src/utils/loopring/getUserNfts.test.ts
rename to src/services/loopring/getUserNfts.test.ts
diff --git a/src/utils/loopring/getUserNfts.ts b/src/services/loopring/getUserNfts.ts
similarity index 100%
rename from src/utils/loopring/getUserNfts.ts
rename to src/services/loopring/getUserNfts.ts
diff --git a/src/utils/loopring/headerOpts.ts b/src/services/loopring/headerOpts.ts
similarity index 100%
rename from src/utils/loopring/headerOpts.ts
rename to src/services/loopring/headerOpts.ts
diff --git a/src/utils/loopring/index.ts b/src/services/loopring/index.ts
similarity index 100%
rename from src/utils/loopring/index.ts
rename to src/services/loopring/index.ts
diff --git a/src/utils/loopring/rateLimitedAxios.ts b/src/services/loopring/rateLimitedAxios.ts
similarity index 100%
rename from src/utils/loopring/rateLimitedAxios.ts
rename to src/services/loopring/rateLimitedAxios.ts
diff --git a/src/utils/pinata/_types.ts b/src/services/pinata/_types.ts
similarity index 100%
rename from src/utils/pinata/_types.ts
rename to src/services/pinata/_types.ts
diff --git a/src/utils/pinata/checkPinataFolderForHtml.ts b/src/services/pinata/checkPinataFolderForHtml.ts
similarity index 100%
rename from src/utils/pinata/checkPinataFolderForHtml.ts
rename to src/services/pinata/checkPinataFolderForHtml.ts
diff --git a/src/utils/pinata/formatAccessLink.test.ts b/src/services/pinata/formatAccessLink.test.ts
similarity index 100%
rename from src/utils/pinata/formatAccessLink.test.ts
rename to src/services/pinata/formatAccessLink.test.ts
diff --git a/src/utils/pinata/formatAccessLink.ts b/src/services/pinata/formatAccessLink.ts
similarity index 100%
rename from src/utils/pinata/formatAccessLink.ts
rename to src/services/pinata/formatAccessLink.ts
diff --git a/src/utils/pinata/generateAccessLink.ts b/src/services/pinata/generateAccessLink.ts
similarity index 100%
rename from src/utils/pinata/generateAccessLink.ts
rename to src/services/pinata/generateAccessLink.ts
diff --git a/src/utils/pinata/getPinataIndexLink.ts b/src/services/pinata/getPinataIndexLink.ts
similarity index 100%
rename from src/utils/pinata/getPinataIndexLink.ts
rename to src/services/pinata/getPinataIndexLink.ts
diff --git a/src/utils/pinata/index.ts b/src/services/pinata/index.ts
similarity index 100%
rename from src/utils/pinata/index.ts
rename to src/services/pinata/index.ts
diff --git a/src/utils/pinata/listFolderContent.ts b/src/services/pinata/listFolderContent.ts
similarity index 100%
rename from src/utils/pinata/listFolderContent.ts
rename to src/services/pinata/listFolderContent.ts
diff --git a/src/utils/pinata/submarine.ts b/src/services/pinata/submarine.ts
similarity index 100%
rename from src/utils/pinata/submarine.ts
rename to src/services/pinata/submarine.ts
diff --git a/src/services/supabase/helpers/index.ts b/src/services/supabase/helpers/index.ts
new file mode 100644
index 000000000..21585114e
--- /dev/null
+++ b/src/services/supabase/helpers/index.ts
@@ -0,0 +1 @@
+export { parseSqlUnlockable } from "./parseSqlUnlockable";
diff --git a/src/utils/supabase/helpers/parseSqlUnlockable.ts b/src/services/supabase/helpers/parseSqlUnlockable.ts
similarity index 79%
rename from src/utils/supabase/helpers/parseSqlUnlockable.ts
rename to src/services/supabase/helpers/parseSqlUnlockable.ts
index 96441c0f7..1e144b623 100644
--- a/src/utils/supabase/helpers/parseSqlUnlockable.ts
+++ b/src/services/supabase/helpers/parseSqlUnlockable.ts
@@ -1,7 +1,7 @@
 import { UnlockableV2 } from "@/src/config/types";
-import parseNftIdString from "./parseNftIdString";
+import { parseNftIdString } from "@/src/utils/generic";
 
-const parseSqlUnlockable = (supabaseUnlockable: any): UnlockableV2 => {
+export const parseSqlUnlockable = (supabaseUnlockable: any): UnlockableV2 => {
   const nftIds = parseNftIdString(supabaseUnlockable.nft_ids);
 
   const unlockable = {
@@ -24,5 +24,3 @@ const parseSqlUnlockable = (supabaseUnlockable: any): UnlockableV2 => {
 
   return unlockable;
 };
-
-export default parseSqlUnlockable;
diff --git a/src/utils/supabase/index.ts b/src/services/supabase/index.ts
similarity index 100%
rename from src/utils/supabase/index.ts
rename to src/services/supabase/index.ts
diff --git a/src/utils/supabase/sql/content_types.sql b/src/services/supabase/sql/content_types.sql
similarity index 100%
rename from src/utils/supabase/sql/content_types.sql
rename to src/services/supabase/sql/content_types.sql
diff --git a/src/utils/supabase/sql/roles.sql b/src/services/supabase/sql/roles.sql
similarity index 100%
rename from src/utils/supabase/sql/roles.sql
rename to src/services/supabase/sql/roles.sql
diff --git a/src/utils/supabase/sql/unlock_criteria.sql b/src/services/supabase/sql/unlock_criteria.sql
similarity index 100%
rename from src/utils/supabase/sql/unlock_criteria.sql
rename to src/services/supabase/sql/unlock_criteria.sql
diff --git a/src/utils/supabase/sql/unlockables.sql b/src/services/supabase/sql/unlockables.sql
similarity index 100%
rename from src/utils/supabase/sql/unlockables.sql
rename to src/services/supabase/sql/unlockables.sql
diff --git a/src/utils/supabase/sql/users.sql b/src/services/supabase/sql/users.sql
similarity index 100%
rename from src/utils/supabase/sql/users.sql
rename to src/services/supabase/sql/users.sql
diff --git a/src/utils/supabase/sql/view/unlockables_with_criteria.sql b/src/services/supabase/sql/view/unlockables_with_criteria.sql
similarity index 100%
rename from src/utils/supabase/sql/view/unlockables_with_criteria.sql
rename to src/services/supabase/sql/view/unlockables_with_criteria.sql
diff --git a/src/utils/supabase/supabase.ts b/src/services/supabase/supabase.ts
similarity index 100%
rename from src/utils/supabase/supabase.ts
rename to src/services/supabase/supabase.ts
diff --git a/src/utils/supabase/typeExtensions.ts b/src/services/supabase/typeExtensions.ts
similarity index 100%
rename from src/utils/supabase/typeExtensions.ts
rename to src/services/supabase/typeExtensions.ts
diff --git a/src/utils/supabase/types.ts b/src/services/supabase/types.ts
similarity index 97%
rename from src/utils/supabase/types.ts
rename to src/services/supabase/types.ts
index 2a730ce89..fce570a2c 100644
--- a/src/utils/supabase/types.ts
+++ b/src/services/supabase/types.ts
@@ -78,6 +78,7 @@ export interface Database {
           id: string
           name: string | null
           owner: string
+          unlisted: boolean
           updated_at: string | null
         }
         Insert: {
@@ -88,6 +89,7 @@ export interface Database {
           id?: string
           name?: string | null
           owner: string
+          unlisted?: boolean
           updated_at?: string | null
         }
         Update: {
@@ -98,6 +100,7 @@ export interface Database {
           id?: string
           name?: string | null
           owner?: string
+          unlisted?: boolean
           updated_at?: string | null
         }
       }
diff --git a/src/services/wagmi/index.ts b/src/services/wagmi/index.ts
new file mode 100644
index 000000000..4c345198e
--- /dev/null
+++ b/src/services/wagmi/index.ts
@@ -0,0 +1 @@
+export { WagmiClient } from "./wagmi";
diff --git a/src/utils/wagmi/wagmi.ts b/src/services/wagmi/wagmi.ts
similarity index 92%
rename from src/utils/wagmi/wagmi.ts
rename to src/services/wagmi/wagmi.ts
index a39357ec3..c5f08c6de 100644
--- a/src/utils/wagmi/wagmi.ts
+++ b/src/services/wagmi/wagmi.ts
@@ -10,7 +10,7 @@ const { provider, chains } = configureChains(
   [publicProvider()]
 );
 
-const WagmiClient = createClient({
+export const WagmiClient = createClient({
   autoConnect: true,
   connectors: [
     new InjectedConnector({
@@ -32,5 +32,3 @@ const WagmiClient = createClient({
   ],
   provider,
 });
-
-export default WagmiClient;
diff --git a/src/styles/inline-styles.ts b/src/styles/inlineStyles.ts
similarity index 100%
rename from src/styles/inline-styles.ts
rename to src/styles/inlineStyles.ts
diff --git a/src/utils/generic/checkIfContainsAll.test.ts b/src/utils/generic/checkIfContainsAll.test.ts
index 542d46258..d5e8674f6 100644
--- a/src/utils/generic/checkIfContainsAll.test.ts
+++ b/src/utils/generic/checkIfContainsAll.test.ts
@@ -1,4 +1,4 @@
-import checkIfContainsAll from "./checkIfContainsAll";
+import { checkIfContainsAll } from "./checkIfContainsAll";
 import { ConfigError } from "../../config/types";
 
 const mockConfig = ["0x1", "0x2", "0x3"];
diff --git a/src/utils/generic/checkIfContainsAll.ts b/src/utils/generic/checkIfContainsAll.ts
index 5aeba41f6..bbc9afe3a 100644
--- a/src/utils/generic/checkIfContainsAll.ts
+++ b/src/utils/generic/checkIfContainsAll.ts
@@ -6,11 +6,9 @@ import { ConfigError } from "../../config/types";
  * @param target
  * @returns whether the target array contains all values of the config array
  */
-const checkIfContainsAll = (config: string[], target: string[]) => {
+export const checkIfContainsAll = (config: string[], target: string[]) => {
   if (config.length === 0) {
     throw new ConfigError("Empty config file");
   }
   return config.every((x) => target.includes(x));
 };
-
-export default checkIfContainsAll;
diff --git a/src/utils/generic/cs.test.ts b/src/utils/generic/cn.test.ts
similarity index 93%
rename from src/utils/generic/cs.test.ts
rename to src/utils/generic/cn.test.ts
index 683b3fc58..b2d39f326 100644
--- a/src/utils/generic/cs.test.ts
+++ b/src/utils/generic/cn.test.ts
@@ -1,4 +1,4 @@
-import cn from "./cn";
+import { cn } from "./cn";
 
 const existingClass = "foo";
 
diff --git a/src/utils/generic/cn.ts b/src/utils/generic/cn.ts
index d135cd82d..0f46f37ae 100644
--- a/src/utils/generic/cn.ts
+++ b/src/utils/generic/cn.ts
@@ -1,8 +1,6 @@
 import { ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-const cn = (...inputs: ClassValue[]) => {
+export const cn = (...inputs: ClassValue[]) => {
   return twMerge(clsx(inputs));
 };
-
-export default cn;
diff --git a/src/utils/generic/formatRelativeDate.ts b/src/utils/generic/formatRelativeDate.ts
index cd442c26a..3a74605e0 100644
--- a/src/utils/generic/formatRelativeDate.ts
+++ b/src/utils/generic/formatRelativeDate.ts
@@ -1,8 +1,6 @@
 import { formatDistance } from "date-fns";
 
-const formatRelativeDate = (date: Date | string) => {
-  const ts = new Date(date);
-  return formatDistance(ts, new Date(), { addSuffix: true });
+export const formatRelativeDate = (date: Date | string) => {
+  const timestamp = new Date(date);
+  return formatDistance(timestamp, new Date(), { addSuffix: true });
 };
-
-export default formatRelativeDate;
diff --git a/src/utils/generic/getCurrentYear.test.ts b/src/utils/generic/getCurrentYear.test.ts
index d5b5ea992..66705cb63 100644
--- a/src/utils/generic/getCurrentYear.test.ts
+++ b/src/utils/generic/getCurrentYear.test.ts
@@ -1,4 +1,4 @@
-import getCurrentYear from "./getCurrentYear";
+import { getCurrentYear } from "./getCurrentYear";
 
 beforeEach(() => {
   jest.spyOn(Date.prototype, "getFullYear").mockReturnValue(2023);
diff --git a/src/utils/generic/getCurrentYear.ts b/src/utils/generic/getCurrentYear.ts
index bba8b8320..dafb8084b 100644
--- a/src/utils/generic/getCurrentYear.ts
+++ b/src/utils/generic/getCurrentYear.ts
@@ -1,7 +1,4 @@
-// Get the current year
-const getCurrentYear = (): number => {
+export const getCurrentYear = (): number => {
   const currentTime = new Date();
   return currentTime.getFullYear();
 };
-
-export default getCurrentYear;
diff --git a/src/utils/generic/index.ts b/src/utils/generic/index.ts
index e9f28b926..6b3896bb8 100644
--- a/src/utils/generic/index.ts
+++ b/src/utils/generic/index.ts
@@ -1,25 +1,7 @@
-import checkIfContainsAll from "./checkIfContainsAll";
-import findUnlockedCids from "./findUnlockedCids";
-import getCurrentYear from "./getCurrentYear";
-import findUnlockableByUuid from "./findUnlockableByUuid";
-import findAllUnlockables from "./findAllUnlockables";
-import fetchUnlockableByUuid from "./fetchUnlockableByUuid";
-import fetchAllUnlockables from "./fetchAllUnlockables";
-import uuidToNumber from "./uuidToNumber";
-import truncate0x from "./truncate0x";
-import formatRelativeDate from "./formatRelativeDate";
-import cn from "./cn";
-
-export {
-  checkIfContainsAll,
-  findUnlockedCids,
-  findUnlockableByUuid,
-  findAllUnlockables,
-  fetchUnlockableByUuid,
-  fetchAllUnlockables,
-  uuidToNumber,
-  getCurrentYear,
-  truncate0x,
-  formatRelativeDate,
-  cn,
-};
+export { parseNftIdString } from "./parseNftIdString";
+export { cn } from "./cn";
+export { formatRelativeDate } from "./formatRelativeDate";
+export { getCurrentYear } from "./getCurrentYear";
+export { uuidToNumber } from "./uuidToNumber";
+export { truncate0x } from "./truncate0x";
+export { isUuid } from "./isUuid";
diff --git a/src/utils/supabase/helpers/isUuid.test.ts b/src/utils/generic/isUuid.test.ts
similarity index 94%
rename from src/utils/supabase/helpers/isUuid.test.ts
rename to src/utils/generic/isUuid.test.ts
index c2eaf709f..2904110e2 100644
--- a/src/utils/supabase/helpers/isUuid.test.ts
+++ b/src/utils/generic/isUuid.test.ts
@@ -1,4 +1,4 @@
-import isUuid from "./isUuid";
+import { isUuid } from "./isUuid";
 
 describe("isUuid", () => {
   it("returns true for valid UUIDs", () => {
diff --git a/src/utils/supabase/helpers/isUuid.ts b/src/utils/generic/isUuid.ts
similarity index 67%
rename from src/utils/supabase/helpers/isUuid.ts
rename to src/utils/generic/isUuid.ts
index 4d69b712e..2dfcd5e9b 100644
--- a/src/utils/supabase/helpers/isUuid.ts
+++ b/src/utils/generic/isUuid.ts
@@ -1,8 +1,6 @@
 const uuidRegex =
   /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
 
-const isUuid = (potentialUuid: string): boolean => {
+export const isUuid = (potentialUuid: string): boolean => {
   return uuidRegex.test(potentialUuid as string);
 };
-
-export default isUuid;
diff --git a/src/utils/supabase/helpers/parseNftIdString.test.ts b/src/utils/generic/parseNftIdString.test.ts
similarity index 96%
rename from src/utils/supabase/helpers/parseNftIdString.test.ts
rename to src/utils/generic/parseNftIdString.test.ts
index 20b63545e..83ff35d1b 100644
--- a/src/utils/supabase/helpers/parseNftIdString.test.ts
+++ b/src/utils/generic/parseNftIdString.test.ts
@@ -1,4 +1,4 @@
-import parseNftIdString from "./parseNftIdString";
+import { parseNftIdString } from "./parseNftIdString";
 
 describe("parseNftIdString", () => {
   it("should parse a single NFT ID", () => {
diff --git a/src/utils/supabase/helpers/parseNftIdString.ts b/src/utils/generic/parseNftIdString.ts
similarity index 68%
rename from src/utils/supabase/helpers/parseNftIdString.ts
rename to src/utils/generic/parseNftIdString.ts
index 079462638..a754f188b 100644
--- a/src/utils/supabase/helpers/parseNftIdString.ts
+++ b/src/utils/generic/parseNftIdString.ts
@@ -4,12 +4,10 @@
  * Output: ["0x00...00", 1x11.11]
  */
 
-const parseNftIdString = (nftIdString?: string): string[] => {
+export const parseNftIdString = (nftIdString?: string): string[] => {
   if (!nftIdString) {
     return [];
   }
 
   return nftIdString.replaceAll(" ", "").split(",");
 };
-
-export default parseNftIdString;
diff --git a/src/utils/generic/truncate0x.ts b/src/utils/generic/truncate0x.ts
index 3107ed282..a266d3a10 100644
--- a/src/utils/generic/truncate0x.ts
+++ b/src/utils/generic/truncate0x.ts
@@ -1,4 +1,4 @@
-const truncate0x = (address: string) => {
+export const truncate0x = (address: string) => {
   const len = address.length;
 
   if (!address.startsWith("0x") || len != 42) {
@@ -7,5 +7,3 @@ const truncate0x = (address: string) => {
 
   return `${address.slice(0, 6)}…${address.slice(len - 4, len)}`;
 };
-
-export default truncate0x;
diff --git a/src/utils/generic/uuidToNumber.test.ts b/src/utils/generic/uuidToNumber.test.ts
index 4d1fc76c6..5786480ab 100644
--- a/src/utils/generic/uuidToNumber.test.ts
+++ b/src/utils/generic/uuidToNumber.test.ts
@@ -1,4 +1,4 @@
-import uuidToNumber from "./uuidToNumber";
+import { uuidToNumber } from "./uuidToNumber";
 
 describe("uuidToNumber", () => {
   it("should generate a number between 0 and 133742069", () => {
diff --git a/src/utils/generic/uuidToNumber.ts b/src/utils/generic/uuidToNumber.ts
index c359743e4..6b5120c9e 100644
--- a/src/utils/generic/uuidToNumber.ts
+++ b/src/utils/generic/uuidToNumber.ts
@@ -1,6 +1,6 @@
 import { createHash } from "crypto";
 
-const uuidToNumber = (uuid: string) => {
+export const uuidToNumber = (uuid: string) => {
   const hash = createHash("sha256").update(uuid).digest("hex");
   const hexDigits = hash.slice(0, 4);
   const decimalValue = parseInt(hexDigits, 16);
@@ -8,5 +8,3 @@ const uuidToNumber = (uuid: string) => {
   const randomNumber = Math.floor(percentage * 133742069);
   return randomNumber;
 };
-
-export default uuidToNumber;
diff --git a/src/utils/supabase/helpers/index.ts b/src/utils/supabase/helpers/index.ts
deleted file mode 100644
index e34a7b18d..000000000
--- a/src/utils/supabase/helpers/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import parseNftIdString from "./parseNftIdString";
-import parseSqlUnlockable from "./parseSqlUnlockable";
-import isUuid from "./isUuid";
-
-export { parseNftIdString, parseSqlUnlockable, isUuid };
diff --git a/src/utils/wagmi/index.ts b/src/utils/wagmi/index.ts
deleted file mode 100644
index 6e29c6de4..000000000
--- a/src/utils/wagmi/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import WagmiClient from "./wagmi";
-export { WagmiClient };

From bba15ff4ead3289b9e740fa9ce9ce971de371ca4 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sat, 27 May 2023 08:13:03 +0200
Subject: [PATCH 10/18] Add "unlisted" property to Unlockables, move sql
 scripts to /dev/

---
 dev/supabase/README.md                        | 11 +++++++
 .../supabase/sql/tables}/content_types.sql    |  0
 .../sql => dev/supabase/sql/tables}/roles.sql |  2 ++
 .../supabase/sql/tables}/unlock_criteria.sql  |  0
 .../supabase/sql/tables}/unlockables.sql      | 32 ++++++++++---------
 .../sql => dev/supabase/sql/tables}/users.sql |  2 ++
 .../sql/view/unlockables_with_criteria.sql    | 15 +++++++++
 src/config/config.ts                          |  3 ++
 src/config/types.ts                           |  3 +-
 .../unlockable/fetchAllUnlockables.ts         |  3 +-
 .../unlockable/fetchUnlockableByUuid.ts       |  6 ----
 .../loopgate/unlockable/findAllUnlockables.ts |  6 ++--
 .../unlockable/findUnlockableByUuid.test.ts   |  2 +-
 .../loopgate/unlockable/findUnlockedCids.ts   |  2 +-
 .../sql/view/unlockables_with_criteria.sql    |  4 ---
 src/services/supabase/types.ts                |  3 ++
 src/utils/generic/index.ts                    |  1 +
 17 files changed, 64 insertions(+), 31 deletions(-)
 create mode 100644 dev/supabase/README.md
 rename {src/services/supabase/sql => dev/supabase/sql/tables}/content_types.sql (100%)
 rename {src/services/supabase/sql => dev/supabase/sql/tables}/roles.sql (87%)
 rename {src/services/supabase/sql => dev/supabase/sql/tables}/unlock_criteria.sql (100%)
 rename {src/services/supabase/sql => dev/supabase/sql/tables}/unlockables.sql (64%)
 rename {src/services/supabase/sql => dev/supabase/sql/tables}/users.sql (89%)
 create mode 100644 dev/supabase/sql/view/unlockables_with_criteria.sql
 delete mode 100644 src/services/supabase/sql/view/unlockables_with_criteria.sql

diff --git a/dev/supabase/README.md b/dev/supabase/README.md
new file mode 100644
index 000000000..c6549d970
--- /dev/null
+++ b/dev/supabase/README.md
@@ -0,0 +1,11 @@
+# Supabase
+
+## TL;DR:
+
+- LoopGate stores Unlockables in a Supabase instance. The data inside can be created/read/updated/deleted with the Supabase JS SDK: a PostgREST client. Ex => `const { data } = await Supabase.from("unlockables_with_criteria").select(`\*`)`
+- **Row Level Security (RLS)** applies: only those with the correct credentials should be able to access these methods. Read access for most `tables` and `views` is public, which means the data can be queried from the client using the `anon` key. The other operations require the `service key` or a JWT. These operations are done server-side.
+
+## Managing tables
+
+- New tables cannot be instantiated with the Supabase JS SDK. Instead, they need to be configured from within the supabase web client. The visual builder may be used, but using the SQL editor with documented queries may be more suitable.
+- See `/dev/supabase/sql/*` for the SQL used to create/update/delete/test these tables and views.
diff --git a/src/services/supabase/sql/content_types.sql b/dev/supabase/sql/tables/content_types.sql
similarity index 100%
rename from src/services/supabase/sql/content_types.sql
rename to dev/supabase/sql/tables/content_types.sql
diff --git a/src/services/supabase/sql/roles.sql b/dev/supabase/sql/tables/roles.sql
similarity index 87%
rename from src/services/supabase/sql/roles.sql
rename to dev/supabase/sql/tables/roles.sql
index 252093f8c..ff14fe603 100644
--- a/src/services/supabase/sql/roles.sql
+++ b/dev/supabase/sql/tables/roles.sql
@@ -1,3 +1,5 @@
+-- 🦻 NOTE: Currently not in use
+
 -- Create and fill a table with the available user roles
 
 CREATE TABLE roles (
diff --git a/src/services/supabase/sql/unlock_criteria.sql b/dev/supabase/sql/tables/unlock_criteria.sql
similarity index 100%
rename from src/services/supabase/sql/unlock_criteria.sql
rename to dev/supabase/sql/tables/unlock_criteria.sql
diff --git a/src/services/supabase/sql/unlockables.sql b/dev/supabase/sql/tables/unlockables.sql
similarity index 64%
rename from src/services/supabase/sql/unlockables.sql
rename to dev/supabase/sql/tables/unlockables.sql
index 75f0c9632..fe01c62da 100644
--- a/src/services/supabase/sql/unlockables.sql
+++ b/dev/supabase/sql/tables/unlockables.sql
@@ -4,30 +4,32 @@
 -- create extension 'uuid-ossp' with schema extensions;
 
 CREATE TABLE unlockables (
-  id uuid default uuid_generate_v4(), 
-  name text,
-  description text,
-  owner VARCHAR(42) NOT NULL,
-  content_type_id int NOT NULL,
-  content_url VARCHAR(200) NOT NULL,
-  criteria_unlock_amount int NOT NULL,
-  updated_at timestamp default current_timestamp,
+  id uuid not null default uuid_generate_v4(), 
+  name text null,
+  description text null,
+  owner VARCHAR(42) not null,
+  unlisted boolean not null default true,
+  content_type_id int not null,
+  content_url VARCHAR(200) not null,
+  criteria_unlock_amount int not null,
+  updated_at timestamp without time zone default not null current_timestamp default current_timestamp,
+  created_at timestamp without time zone default not null default now(),
   --
   PRIMARY KEY (id),
   FOREIGN KEY (owner) REFERENCES users(eth_address),
   FOREIGN KEY (content_type_id) REFERENCES content_types(content_type_id),
   --
-  constraint unlock_amount_nonnegative check (criteria_unlock_amount > 0)
+  constraint unlock_amount_nonnegative check (criteria_unlock_amount > -2)
 );
 
 -- Unlockable #1: HTML Blog Example
-INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount) 
-VALUES ('Token Gating with NFTs: Unlocking New Ways to Bring Value', 'This exclusive article contains a primer on what Token Gating is, and provides four actionable prompts on how to implement it to bring value to members of your community.', '0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeiehgpaip4f7jafzf7imgannx3nnv3ubaiwp6ph56mlyzijpqxi45m', 1);
+INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount, unlisted) 
+VALUES ('Token Gating with NFTs: Unlocking New Ways to Bring Value', 'This exclusive article contains a primer on what Token Gating is, and provides four actionable prompts on how to implement it to bring value to members of your community.', '0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeiehgpaip4f7jafzf7imgannx3nnv3ubaiwp6ph56mlyzijpqxi45m', 1, false);
 
 -- Unlockable #2: MP4 Video Example
-INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount) 
-VALUES ('0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeihx5eacyxeydcpvudwxa242rnjhn67femy46gzas5d2djb24ti5mi', 1);
+INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount, unlisted) 
+VALUES ('0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeihx5eacyxeydcpvudwxa242rnjhn67femy46gzas5d2djb24ti5mi', 1, false);
 
 -- Unlockable #3: Web Game Example
-INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount) 
-VALUES ('Flappy Bird: Origins', 'An incredibly exclusive web game built in Godot 3, optimized for browsers. Dodge the obstacles, and fly for your life...', '0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeihhx5v3saq3b7n55ub5q3atuw2udbqc5ictkv2ih7vd3hxptu22nu', 2);
\ No newline at end of file
+INSERT INTO unlockables (name, description, owner, content_type_id, content_url, criteria_unlock_amount, unlisted) 
+VALUES ('Flappy Bird: Origins', 'An incredibly exclusive web game built in Godot 3, optimized for browsers. Dodge the obstacles, and fly for your life...', '0x1337cc354aeaf15b0e98a609cd348df171174e14', 1, 'bafybeihhx5v3saq3b7n55ub5q3atuw2udbqc5ictkv2ih7vd3hxptu22nu', 2, false);
\ No newline at end of file
diff --git a/src/services/supabase/sql/users.sql b/dev/supabase/sql/tables/users.sql
similarity index 89%
rename from src/services/supabase/sql/users.sql
rename to dev/supabase/sql/tables/users.sql
index fa261927e..c2ffdcb45 100644
--- a/src/services/supabase/sql/users.sql
+++ b/dev/supabase/sql/tables/users.sql
@@ -1,3 +1,5 @@
+-- 🦻 NOTE: Currently not in use
+
 -- Create and fill a table with users
 
 CREATE TABLE users (
diff --git a/dev/supabase/sql/view/unlockables_with_criteria.sql b/dev/supabase/sql/view/unlockables_with_criteria.sql
new file mode 100644
index 000000000..048589ee9
--- /dev/null
+++ b/dev/supabase/sql/view/unlockables_with_criteria.sql
@@ -0,0 +1,15 @@
+----- Code to create the view
+-- CREATE VIEW unlockables_with_criteria_v2 AS
+--     SELECT u.id, u.name, u.description, u.unlisted, u.owner, u.content_url, u.criteria_unlock_amount, u.updated_at, STRING_AGG(c.nft_id, ', ') AS nft_ids
+--     FROM unlockables u
+--     LEFT JOIN unlock_criteria c ON u.id = c.unlockable_id
+--     GROUP BY u.id, u.name, u.description, u.owner, u.content_url, u.criteria_unlock_amount, u.updated_at
+
+----- Test if it works
+-- select * from unlockables_with_criteria_v2 
+
+-- ALTER VIEW unlockables_with_criteria RENAME TO unlockables_with_criteria_backup
+-- ALTER VIEW unlockables_with_criteria_v2 RENAME TO unlockables_with_criteria
+
+----- Delete a previous one
+-- DROP VIEW IF EXISTS unlockables_with_criteria_v2
\ No newline at end of file
diff --git a/src/config/config.ts b/src/config/config.ts
index feb1981d4..3fed994a6 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -55,6 +55,7 @@ const unlockablesV2: UnlockableV2[] = [
         "This exclusive article contains a primer on what Token Gating is, and provides four actionable prompts on how to implement it to bring value to members of your community.",
       lastUpdated: "2023-03-13 16:05:23.481327",
     },
+    unlisted: false,
     content: {
       type: "IPFS",
       url: "bafybeiehgpaip4f7jafzf7imgannx3nnv3ubaiwp6ph56mlyzijpqxi45m",
@@ -72,6 +73,7 @@ const unlockablesV2: UnlockableV2[] = [
     metadata: {
       lastUpdated: "2023-03-13 16:05:23.481327",
     },
+    unlisted: false,
     content: {
       type: "IPFS",
       url: "bafybeihx5eacyxeydcpvudwxa242rnjhn67femy46gzas5d2djb24ti5mi",
@@ -86,6 +88,7 @@ const unlockablesV2: UnlockableV2[] = [
   {
     id: "3eade688-8839-4fd7-b97a-f7c5f5bfc6ad",
     owner: "0x1337CC354AeAf15B0E98A609cd348DF171174e14",
+    unlisted: false,
     metadata: {
       name: "Flappy Bird: Origins",
       description:
diff --git a/src/config/types.ts b/src/config/types.ts
index e5eb212ca..32cb6b8df 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -17,8 +17,9 @@ export interface UnlockCriteria {
 
 export interface UnlockableV2 {
   id: string;
-  owner: `0x${string}`;
+  owner: string;
   metadata: Metadata;
+  unlisted: boolean;
   content: {
     type: "IPFS";
     url: string;
diff --git a/src/services/loopgate/unlockable/fetchAllUnlockables.ts b/src/services/loopgate/unlockable/fetchAllUnlockables.ts
index def0bc1ec..9398d9123 100644
--- a/src/services/loopgate/unlockable/fetchAllUnlockables.ts
+++ b/src/services/loopgate/unlockable/fetchAllUnlockables.ts
@@ -6,7 +6,8 @@ export const fetchAllUnlockables = async (owner?: string) => {
     "unlockables_with_criteria"
   )
     .select(`*`)
-    .eq(owner ? "owner" : "", owner);
+    .eq(owner ? "owner" : "", owner)
+    .neq("unlisted", true);
 
   if (error) {
     throw error;
diff --git a/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts b/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts
index e86a63ad9..c8a7c99e9 100644
--- a/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts
+++ b/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts
@@ -1,12 +1,6 @@
 import Supabase from "../../supabase";
 import { parseSqlUnlockable } from "../../supabase/helpers";
 
-// TODO: Inserting data https://supabase.com/docs/reference/javascript/insert
-// TODO: Updating data https://supabase.com/docs/reference/javascript/update
-// OR: Upserting data https://supabase.com/docs/reference/javascript/upsert
-// TODO: Deleting data https://supabase.com/docs/reference/javascript/delete
-// RLS Policies: Only auth users can mutate
-
 export const fetchUnlockableByUuid = async (uuid: string) => {
   let { data: unlockables, error } = await Supabase.from(
     "unlockables_with_criteria"
diff --git a/src/services/loopgate/unlockable/findAllUnlockables.ts b/src/services/loopgate/unlockable/findAllUnlockables.ts
index 633e5be6f..e8d9adbf4 100644
--- a/src/services/loopgate/unlockable/findAllUnlockables.ts
+++ b/src/services/loopgate/unlockable/findAllUnlockables.ts
@@ -10,8 +10,10 @@ export const findAllUnlockables = (
   }
 
   if (owner) {
-    return unlockablesArray.filter((unlockable) => unlockable.owner === owner);
+    return unlockablesArray.filter(
+      (unlockable) => unlockable.owner === owner && !unlockable.unlisted
+    );
   }
 
-  return unlockablesArray;
+  return unlockablesArray.filter((unlockable) => !unlockable.unlisted);
 };
diff --git a/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts b/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts
index eddcbc6f8..a69e43cef 100644
--- a/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts
+++ b/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts
@@ -1,4 +1,4 @@
-import { findUnlockableByUuid } from "../../../utils/generic";
+import { findUnlockableByUuid } from "./findUnlockableByUuid";
 import { ConfigError } from "../../../config/types";
 
 describe("find unlockables based on UUID", () => {
diff --git a/src/services/loopgate/unlockable/findUnlockedCids.ts b/src/services/loopgate/unlockable/findUnlockedCids.ts
index 0ff04193d..c40e3bc3b 100644
--- a/src/services/loopgate/unlockable/findUnlockedCids.ts
+++ b/src/services/loopgate/unlockable/findUnlockedCids.ts
@@ -1,5 +1,5 @@
 import { unlockables } from "../../../config/config";
-import { checkIfContainsAll } from "../../../utils/generic/index";
+import { checkIfContainsAll } from "@/src/utils/generic/checkIfContainsAll";
 import { Unlockable, ConfigError } from "../../../config/types";
 
 // Compare NFTs owned by an individual to the configurated combinations to find unlockable content
diff --git a/src/services/supabase/sql/view/unlockables_with_criteria.sql b/src/services/supabase/sql/view/unlockables_with_criteria.sql
deleted file mode 100644
index fcbd50b36..000000000
--- a/src/services/supabase/sql/view/unlockables_with_criteria.sql
+++ /dev/null
@@ -1,4 +0,0 @@
-CREATE VIEW unlockables_with_criteria AS
-    SELECT u.id, u.name, u.description, u.owner, u.content_url, u.criteria_unlock_amount, u.updated_at, c.nft_id
-    FROM unlockables u
-    LEFT JOIN unlock_criteria c ON u.id = c.unlockable_id
diff --git a/src/services/supabase/types.ts b/src/services/supabase/types.ts
index fce570a2c..c5a433daa 100644
--- a/src/services/supabase/types.ts
+++ b/src/services/supabase/types.ts
@@ -73,6 +73,7 @@ export interface Database {
         Row: {
           content_type_id: number
           content_url: string
+          created_at: string
           criteria_unlock_amount: number
           description: string | null
           id: string
@@ -84,6 +85,7 @@ export interface Database {
         Insert: {
           content_type_id: number
           content_url: string
+          created_at?: string
           criteria_unlock_amount: number
           description?: string | null
           id?: string
@@ -95,6 +97,7 @@ export interface Database {
         Update: {
           content_type_id?: number
           content_url?: string
+          created_at?: string
           criteria_unlock_amount?: number
           description?: string | null
           id?: string
diff --git a/src/utils/generic/index.ts b/src/utils/generic/index.ts
index 6b3896bb8..6c863fff9 100644
--- a/src/utils/generic/index.ts
+++ b/src/utils/generic/index.ts
@@ -5,3 +5,4 @@ export { getCurrentYear } from "./getCurrentYear";
 export { uuidToNumber } from "./uuidToNumber";
 export { truncate0x } from "./truncate0x";
 export { isUuid } from "./isUuid";
+export { checkIfContainsAll } from "./checkIfContainsAll";

From 17e6bd60b76113b45e05349873357c9aeef65834 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sat, 27 May 2023 11:07:46 +0200
Subject: [PATCH 11/18] =?UTF-8?q?More=20refactoring,=20type=20safety=20and?=
 =?UTF-8?q?=20linting=20=F0=9F=98=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json                                |   7 +-
 dev/supabase/README.md                        |   4 +
 package-lock.json                             | 330 ++++++++++++++++++
 package.json                                  |   1 +
 src/components/UI/Input.tsx                   |  32 +-
 src/components/UI/RadioGroup.tsx              |   1 +
 src/components/UI/Slider.tsx                  |   1 +
 src/components/UI/Textarea.tsx                |  32 +-
 .../UnlockablePage/UnlockCard/Metadata.tsx    |   3 +-
 .../UnlockCard/UnlockSection.tsx              |   2 +
 src/config/types.ts                           |   1 +
 src/hooks/usePrefersReducedMotion.ts          |  10 +-
 src/middleware/redirectTo.ts                  |   2 +-
 src/middleware/siwe/configure.tsx             |   5 +
 src/pages/api/helpers/check-env-status.ts     |   2 +-
 src/pages/api/nft/get-holders-nftdata.ts      |   2 +-
 src/pages/api/nft/get-nft-data.ts             |   1 -
 src/pages/api/upload/submarine.ts             |   2 +-
 src/pages/upload/form.tsx                     |   4 +
 src/pages/upload/index.tsx                    |   2 +
 .../unlockable/fetchAllUnlockables.ts         |   6 +-
 .../unlockable/fetchUnlockableByUuid.ts       |   6 +-
 src/services/loopring/_constants.ts           |  17 -
 src/services/loopring/getAllUserNftIds.ts     |  62 ----
 .../loopring/getMinterAndToken.test.ts        |  28 --
 src/services/loopring/getNftData.ts           |  27 --
 src/services/loopring/getNftHolders.test.ts   |  13 -
 src/services/loopring/getUserNfts.test.ts     |  16 -
 src/services/loopring/getUserNfts.ts          |  19 -
 src/services/loopring/helpers/_constants.ts   |   9 +
 src/services/loopring/{ => helpers}/_types.ts |  38 +-
 .../loopring/{ => helpers}/extractNfts.ts     |   8 +-
 .../loopring/{ => helpers}/headerOpts.ts      |   4 +-
 .../{ => helpers}/rateLimitedAxios.ts         |   4 +-
 src/services/loopring/index.ts                |  34 +-
 .../loopring/requests/getAllUserNftIds.ts     |  58 +++
 .../{ => requests}/getMinterAndToken.ts       |   8 +-
 src/services/loopring/requests/getNftData.ts  |  29 ++
 .../loopring/{ => requests}/getNftHolders.ts  |  12 +-
 .../{ => requests}/getUserAddress.test.ts     |   2 +-
 .../loopring/{ => requests}/getUserAddress.ts |  10 +-
 src/services/pinata/_types.ts                 |   6 +-
 src/services/supabase/helpers/index.ts        |   2 +-
 .../supabase/helpers/mapUnlockable.ts         |  30 ++
 .../supabase/helpers/parseSqlUnlockable.ts    |  26 --
 .../{typeExtensions.ts => typeExtenstions.ts} |   0
 src/services/supabase/types.ts                |  15 +
 src/utils/generic/parseNftIdString.ts         |   4 +-
 src/utils/logger/logger.ts                    |   4 +-
 49 files changed, 613 insertions(+), 328 deletions(-)
 delete mode 100644 src/services/loopring/_constants.ts
 delete mode 100644 src/services/loopring/getAllUserNftIds.ts
 delete mode 100644 src/services/loopring/getMinterAndToken.test.ts
 delete mode 100644 src/services/loopring/getNftData.ts
 delete mode 100644 src/services/loopring/getNftHolders.test.ts
 delete mode 100644 src/services/loopring/getUserNfts.test.ts
 delete mode 100644 src/services/loopring/getUserNfts.ts
 create mode 100644 src/services/loopring/helpers/_constants.ts
 rename src/services/loopring/{ => helpers}/_types.ts (62%)
 rename src/services/loopring/{ => helpers}/extractNfts.ts (54%)
 rename src/services/loopring/{ => helpers}/headerOpts.ts (76%)
 rename src/services/loopring/{ => helpers}/rateLimitedAxios.ts (57%)
 create mode 100644 src/services/loopring/requests/getAllUserNftIds.ts
 rename src/services/loopring/{ => requests}/getMinterAndToken.ts (81%)
 create mode 100644 src/services/loopring/requests/getNftData.ts
 rename src/services/loopring/{ => requests}/getNftHolders.ts (80%)
 rename src/services/loopring/{ => requests}/getUserAddress.test.ts (95%)
 rename src/services/loopring/{ => requests}/getUserAddress.ts (53%)
 create mode 100644 src/services/supabase/helpers/mapUnlockable.ts
 delete mode 100644 src/services/supabase/helpers/parseSqlUnlockable.ts
 rename src/services/supabase/{typeExtensions.ts => typeExtenstions.ts} (100%)

diff --git a/.eslintrc.json b/.eslintrc.json
index bffb357a7..c258ef0a4 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,8 @@
 {
-  "extends": "next/core-web-vitals"
+  "plugins": ["@typescript-eslint"],
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error"
+  }
 }
diff --git a/dev/supabase/README.md b/dev/supabase/README.md
index c6549d970..236cf96d5 100644
--- a/dev/supabase/README.md
+++ b/dev/supabase/README.md
@@ -9,3 +9,7 @@
 
 - New tables cannot be instantiated with the Supabase JS SDK. Instead, they need to be configured from within the supabase web client. The visual builder may be used, but using the SQL editor with documented queries may be more suitable.
 - See `/dev/supabase/sql/*` for the SQL used to create/update/delete/test these tables and views.
+
+## Updating types
+
+Use `npm run supabase:types` to update the types in `src/services/supabase/types.ts` 🚀
diff --git a/package-lock.json b/package-lock.json
index 4ea6a55c8..d94f6ceb7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,7 @@
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.3",
         "@types/uuid": "^9.0.1",
+        "@typescript-eslint/eslint-plugin": "^5.59.7",
         "autoprefixer": "^10.4.13",
         "eslint": "^8.15.0",
         "eslint-config-next": "^12.1.6",
@@ -829,6 +830,30 @@
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
+      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
@@ -3913,6 +3938,12 @@
         "parse5": "^7.0.0"
       }
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
+      "dev": true
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -4031,6 +4062,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/semver": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz",
+      "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==",
+      "dev": true
+    },
     "node_modules/@types/serve-static": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
@@ -4095,6 +4132,87 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
       "dev": true
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.7.tgz",
+      "integrity": "sha512-BL+jYxUFIbuYwy+4fF86k5vdT9lT0CNJ6HtwrIvGh0PhH8s0yy5rjaKH2fDCrz5ITHy07WCzVGNvAmjJh4IJFA==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.4.0",
+        "@typescript-eslint/scope-manager": "5.59.7",
+        "@typescript-eslint/type-utils": "5.59.7",
+        "@typescript-eslint/utils": "5.59.7",
+        "debug": "^4.3.4",
+        "grapheme-splitter": "^1.0.4",
+        "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.7.tgz",
+      "integrity": "sha512-FL6hkYWK9zBGdxT2wWEd2W8ocXMu3K94i3gvMrjXpx+koFYdYV7KprKfirpgY34vTGzEPPuKoERpP8kD5h7vZQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.7",
+        "@typescript-eslint/visitor-keys": "5.59.7"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.7.tgz",
+      "integrity": "sha512-UnVS2MRRg6p7xOSATscWkKjlf/NDKuqo5TdbWck6rIRZbmKpVNTLALzNvcjIfHBE7736kZOFc/4Z3VcZwuOM/A==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.7.tgz",
+      "integrity": "sha512-tyN+X2jvMslUszIiYbF0ZleP+RqQsFVpGrKI6e0Eet1w8WmhsAtmzaqm8oM8WJQ1ysLwhnsK/4hYHJjOgJVfQQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.7",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.48.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.2.tgz",
@@ -4139,6 +4257,90 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.7.tgz",
+      "integrity": "sha512-ozuz/GILuYG7osdY5O5yg0QxXUAEoI4Go3Do5xeu+ERH9PorHBPSdvD3Tjp2NN2bNLh1NJQSsQu2TPu/Ly+HaQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "5.59.7",
+        "@typescript-eslint/utils": "5.59.7",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.7.tgz",
+      "integrity": "sha512-UnVS2MRRg6p7xOSATscWkKjlf/NDKuqo5TdbWck6rIRZbmKpVNTLALzNvcjIfHBE7736kZOFc/4Z3VcZwuOM/A==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.7.tgz",
+      "integrity": "sha512-4A1NtZ1I3wMN2UGDkU9HMBL+TIQfbrh4uS0WDMMpf3xMRursDbqEf1ahh6vAAe3mObt8k3ZATnezwG4pdtWuUQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.7",
+        "@typescript-eslint/visitor-keys": "5.59.7",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.7.tgz",
+      "integrity": "sha512-tyN+X2jvMslUszIiYbF0ZleP+RqQsFVpGrKI6e0Eet1w8WmhsAtmzaqm8oM8WJQ1ysLwhnsK/4hYHJjOgJVfQQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.7",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@typescript-eslint/types": {
       "version": "5.48.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.2.tgz",
@@ -4179,6 +4381,128 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.7.tgz",
+      "integrity": "sha512-yCX9WpdQKaLufz5luG4aJbOpdXf/fjwGMcLFXZVPUz3QqLirG5QcwwnIHNf8cjLjxK4qtzTO8udUtMQSAToQnQ==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@types/json-schema": "^7.0.9",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.59.7",
+        "@typescript-eslint/types": "5.59.7",
+        "@typescript-eslint/typescript-estree": "5.59.7",
+        "eslint-scope": "^5.1.1",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.7.tgz",
+      "integrity": "sha512-FL6hkYWK9zBGdxT2wWEd2W8ocXMu3K94i3gvMrjXpx+koFYdYV7KprKfirpgY34vTGzEPPuKoERpP8kD5h7vZQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.7",
+        "@typescript-eslint/visitor-keys": "5.59.7"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.7.tgz",
+      "integrity": "sha512-UnVS2MRRg6p7xOSATscWkKjlf/NDKuqo5TdbWck6rIRZbmKpVNTLALzNvcjIfHBE7736kZOFc/4Z3VcZwuOM/A==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.7.tgz",
+      "integrity": "sha512-4A1NtZ1I3wMN2UGDkU9HMBL+TIQfbrh4uS0WDMMpf3xMRursDbqEf1ahh6vAAe3mObt8k3ZATnezwG4pdtWuUQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.7",
+        "@typescript-eslint/visitor-keys": "5.59.7",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.59.7",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.7.tgz",
+      "integrity": "sha512-tyN+X2jvMslUszIiYbF0ZleP+RqQsFVpGrKI6e0Eet1w8WmhsAtmzaqm8oM8WJQ1ysLwhnsK/4hYHJjOgJVfQQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.59.7",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/@typescript-eslint/visitor-keys": {
       "version": "5.48.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.2.tgz",
@@ -11891,6 +12215,12 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
+      "dev": true
+    },
     "node_modules/next": {
       "version": "13.3.4",
       "resolved": "https://registry.npmjs.org/next/-/next-13.3.4.tgz",
diff --git a/package.json b/package.json
index f14f9e096..fc6b85e93 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.15.0",
     "eslint-config-next": "^12.1.6",
diff --git a/src/components/UI/Input.tsx b/src/components/UI/Input.tsx
index 8f080988e..3f6758732 100644
--- a/src/components/UI/Input.tsx
+++ b/src/components/UI/Input.tsx
@@ -4,23 +4,21 @@ import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <input
-        className={cn(
-          "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <input
+      className={cn(
+        "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
 Input.displayName = "Input";
 
 export { Input };
diff --git a/src/components/UI/RadioGroup.tsx b/src/components/UI/RadioGroup.tsx
index c1f4f8c12..02b25bf5a 100644
--- a/src/components/UI/RadioGroup.tsx
+++ b/src/components/UI/RadioGroup.tsx
@@ -23,6 +23,7 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+  // eslint-disable-next-line
 >(({ className, children, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
diff --git a/src/components/UI/Slider.tsx b/src/components/UI/Slider.tsx
index 7ecaee561..671bfa719 100644
--- a/src/components/UI/Slider.tsx
+++ b/src/components/UI/Slider.tsx
@@ -9,6 +9,7 @@ import { cn } from "@/src/utils/generic";
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+  // eslint-disable-next-line
 >(({ className, value, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
diff --git a/src/components/UI/Textarea.tsx b/src/components/UI/Textarea.tsx
index 1519d5396..aee1603dc 100644
--- a/src/components/UI/Textarea.tsx
+++ b/src/components/UI/Textarea.tsx
@@ -4,23 +4,21 @@ import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex h-20 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex h-20 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
 Textarea.displayName = "Textarea";
 
 export { Textarea };
diff --git a/src/components/UnlockablePage/UnlockCard/Metadata.tsx b/src/components/UnlockablePage/UnlockCard/Metadata.tsx
index 6d1f7acd5..e40a5a125 100644
--- a/src/components/UnlockablePage/UnlockCard/Metadata.tsx
+++ b/src/components/UnlockablePage/UnlockCard/Metadata.tsx
@@ -2,7 +2,7 @@ import { UnlockCriteria } from "@/src/config/types";
 import { formatRelativeDate, truncate0x } from "@/src/utils/generic";
 import {
   ClockIcon,
-  LockClosedIcon,
+  // LockClosedIcon,
   UserGroupIcon,
 } from "@heroicons/react/20/solid";
 
@@ -29,6 +29,7 @@ const Metadata = ({ lastUpdated, owner, unlockCriteria }: Props) => (
         {truncate0x(owner)}
       </p>
     </a>
+    {unlockCriteria ? <></> : <></>}
     {/* <button
       className="inline-flex space-x-1.5 items-center hover:text-sky-500 duration-150"
       onClick={() => console.log("Clicked")}
diff --git a/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx b/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
index f9bb454c3..1532960ca 100644
--- a/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
+++ b/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
@@ -16,6 +16,8 @@ const UnlockSection = ({ unlockable }: Props) => {
   const { address } = useAccount();
 
   const [isLoading, setIsLoading] = useState(false);
+  // TODO: Type the 'PinataIndexLink' so that this 'any' can be removed.
+  // eslint-disable-next-line
   const [unlockedContent, setUnlockedContent] = useState<any>(null);
 
   const checkUnlock = (
diff --git a/src/config/types.ts b/src/config/types.ts
index 32cb6b8df..b7560c46a 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -8,6 +8,7 @@ export interface Metadata {
   name?: string;
   description?: string;
   lastUpdated: Date | string;
+  createdAt: Date | string;
 }
 
 export interface UnlockCriteria {
diff --git a/src/hooks/usePrefersReducedMotion.ts b/src/hooks/usePrefersReducedMotion.ts
index 3308969eb..38fb590a5 100644
--- a/src/hooks/usePrefersReducedMotion.ts
+++ b/src/hooks/usePrefersReducedMotion.ts
@@ -3,20 +3,20 @@ import { useState, useEffect } from "react";
 const QUERY = "(prefers-reduced-motion: no-preference)";
 const isRenderingOnServer = typeof window === "undefined";
 const getInitialState = () => {
-  // For our initial server render, we won't know if the user
-  // prefers reduced motion, but it doesn't matter. This value
-  // will be overwritten on the client, before any animations
-  // occur.
+  // For our initial server render, we won't know if the user prefers reduced motion, but it doesn't matter. This value
+  // will be overwritten on the client, before any animations occur.
   return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
 };
+
 const usePrefersReducedMotion = () => {
   const [prefersReducedMotion, setPrefersReducedMotion] =
     useState(getInitialState);
   useEffect(() => {
     const mediaQueryList = window.matchMedia(QUERY);
-    const listener = (event: any) => {
+    const listener = (event: MediaQueryListEvent) => {
       setPrefersReducedMotion(!event.matches);
     };
+
     if (mediaQueryList.addEventListener) {
       mediaQueryList.addEventListener("change", listener);
     } else {
diff --git a/src/middleware/redirectTo.ts b/src/middleware/redirectTo.ts
index e01f423d6..dc6d44b34 100644
--- a/src/middleware/redirectTo.ts
+++ b/src/middleware/redirectTo.ts
@@ -1,4 +1,4 @@
-export const redirectTo = (url: string, isPermanent: boolean = false) => {
+export const redirectTo = (url: string, isPermanent = false) => {
   return {
     redirect: {
       destination: url,
diff --git a/src/middleware/siwe/configure.tsx b/src/middleware/siwe/configure.tsx
index d102d92a0..0d574870d 100644
--- a/src/middleware/siwe/configure.tsx
+++ b/src/middleware/siwe/configure.tsx
@@ -12,6 +12,7 @@ type NextSIWEConfig = {
   session?: Partial<IronSessionOptions>;
 };
 
+// eslint-disable-next-line
 type NextSIWESession<TSessionData extends Object = {}> = IronSession &
   TSessionData & {
     nonce?: string;
@@ -24,6 +25,7 @@ type NextSIWEProviderProps = Omit<
   "getNonce" | "createMessage" | "verifyMessage" | "getSession" | "signOut"
 >;
 
+// eslint-disable-next-line
 type ConfigureSIWEResult<TSessionData extends Object = {}> = {
   apiRouteHandler: NextApiHandler;
   Provider: FunctionComponent<NextSIWEProviderProps>;
@@ -33,8 +35,10 @@ type ConfigureSIWEResult<TSessionData extends Object = {}> = {
   ) => Promise<NextSIWESession<TSessionData>>;
 };
 
+// eslint-disable-next-line
 const getSession = async <TSessionData extends Object = {}>(
   req: IncomingMessage,
+  // eslint-disable-next-line
   res: any, // ServerResponse<IncomingMessage>,
   sessionConfig: IronSessionOptions
 ) => {
@@ -146,6 +150,7 @@ const envVar = (name: string) => {
   return value;
 };
 
+// eslint-disable-next-line
 export const configureSIWE = <TSessionData extends Object = {}>({
   apiRoutePrefix,
   statement = "Sign In With Ethereum.",
diff --git a/src/pages/api/helpers/check-env-status.ts b/src/pages/api/helpers/check-env-status.ts
index 564d2f508..b5c612fc8 100644
--- a/src/pages/api/helpers/check-env-status.ts
+++ b/src/pages/api/helpers/check-env-status.ts
@@ -9,7 +9,7 @@ const handler = async (_req: NextApiRequest, res: NextApiResponse) => {
     "SESSION_SECRET",
   ];
 
-  let undefinedEnvs: string[] = [];
+  const undefinedEnvs: string[] = [];
 
   envsToCheck.forEach((item) => {
     if (process.env[item] === undefined) {
diff --git a/src/pages/api/nft/get-holders-nftdata.ts b/src/pages/api/nft/get-holders-nftdata.ts
index 132a4b3ca..92c9fbf52 100644
--- a/src/pages/api/nft/get-holders-nftdata.ts
+++ b/src/pages/api/nft/get-holders-nftdata.ts
@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import getNftHolders from "@/src/services/loopring/getNftHolders";
+import { getNftHolders } from "@/src/services/loopring/requests/getNftHolders";
 import { handleError, LoopgateError } from "@/src/middleware";
 
 // Request NFTs on Loopring held by a user by querying NFT Data
diff --git a/src/pages/api/nft/get-nft-data.ts b/src/pages/api/nft/get-nft-data.ts
index ace5cb6c4..45c8bbf8f 100644
--- a/src/pages/api/nft/get-nft-data.ts
+++ b/src/pages/api/nft/get-nft-data.ts
@@ -1,6 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getMinterAndToken, getNftData } from "@/src/services/loopring";
-import logger from "@/src/utils/logger";
 import { handleError, LoopgateError } from "@/src/middleware";
 
 // Request NFTs Data for a Loopring NFT ID
diff --git a/src/pages/api/upload/submarine.ts b/src/pages/api/upload/submarine.ts
index 7aa3e2407..db2ff48fb 100644
--- a/src/pages/api/upload/submarine.ts
+++ b/src/pages/api/upload/submarine.ts
@@ -24,7 +24,7 @@ interface NodeUploadResponse {
       cid: string;
       name: string;
       originalname: string;
-      metadata: {};
+      metadata: object;
       type: "F";
       pinToIPFS: false;
       uri: string;
diff --git a/src/pages/upload/form.tsx b/src/pages/upload/form.tsx
index 6b6fad3fd..d54125c57 100644
--- a/src/pages/upload/form.tsx
+++ b/src/pages/upload/form.tsx
@@ -18,6 +18,10 @@ export const getServerSideProps: GetServerSideProps = async (context) =>
     : redirectTo("/");
 
 const FormPage = ({ isAuthenticated }: { isAuthenticated: true }) => {
+  if (!isAuthenticated) {
+    window.location.href = "/";
+  }
+
   const [file, setFile] = useState<FileUploadState>();
   const [isLoading, setIsLoading] = useState(false);
 
diff --git a/src/pages/upload/index.tsx b/src/pages/upload/index.tsx
index f314c550b..1002b623f 100644
--- a/src/pages/upload/index.tsx
+++ b/src/pages/upload/index.tsx
@@ -3,6 +3,8 @@
  * There are some parts in this code that I'd like to reuse. Beware, it is messy though.
  */
 
+/* eslint-disable */
+
 import { useState, useCallback, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
 import Spinner from "@/src/components/Spinner";
diff --git a/src/services/loopgate/unlockable/fetchAllUnlockables.ts b/src/services/loopgate/unlockable/fetchAllUnlockables.ts
index 9398d9123..de37a118b 100644
--- a/src/services/loopgate/unlockable/fetchAllUnlockables.ts
+++ b/src/services/loopgate/unlockable/fetchAllUnlockables.ts
@@ -1,5 +1,5 @@
 import Supabase from "../../supabase";
-import { parseSqlUnlockable } from "../../supabase/helpers";
+import { mapUnlockable } from "../../supabase/helpers";
 
 export const fetchAllUnlockables = async (owner?: string) => {
   const { data: unlockables, error } = await Supabase.from(
@@ -14,9 +14,7 @@ export const fetchAllUnlockables = async (owner?: string) => {
   }
 
   if (unlockables) {
-    const parsedUnlockables = unlockables.map((item) =>
-      parseSqlUnlockable(item)
-    );
+    const parsedUnlockables = unlockables.map((item) => mapUnlockable(item));
 
     return parsedUnlockables;
   }
diff --git a/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts b/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts
index c8a7c99e9..b86aee2bb 100644
--- a/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts
+++ b/src/services/loopgate/unlockable/fetchUnlockableByUuid.ts
@@ -1,8 +1,8 @@
 import Supabase from "../../supabase";
-import { parseSqlUnlockable } from "../../supabase/helpers";
+import { mapUnlockable } from "../../supabase/helpers";
 
 export const fetchUnlockableByUuid = async (uuid: string) => {
-  let { data: unlockables, error } = await Supabase.from(
+  const { data: unlockables, error } = await Supabase.from(
     "unlockables_with_criteria"
   )
     .select(`*`)
@@ -14,6 +14,6 @@ export const fetchUnlockableByUuid = async (uuid: string) => {
   }
 
   if (unlockables) {
-    return parseSqlUnlockable(unlockables);
+    return mapUnlockable(unlockables);
   }
 };
diff --git a/src/services/loopring/_constants.ts b/src/services/loopring/_constants.ts
deleted file mode 100644
index be0d039f2..000000000
--- a/src/services/loopring/_constants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-const LOOP_BASE_URL = "https://api3.loopring.io/api/v3";
-
-export const LOOP_API = {
-  USER_ACCOUNT: `${LOOP_BASE_URL}/account`,
-  USER_NFT_BALANCE: `${LOOP_BASE_URL}/user/nft/balances`,
-  NFT_DATA: `${LOOP_BASE_URL}/nft/info/nftData`,
-  NFT_HOLDERS: `${LOOP_BASE_URL}/nft/info/nftHolders`,
-};
-
-export const THE_GRAPH = {
-  GATEWAY_URL: "https://api.thegraph.com/subgraphs/name/loopring/loopring",
-};
-
-export const CONTRACTS = {
-  LOOPRING_EXCHANGE_V3: "0x0BABA1Ad5bE3a5C0a66E7ac838a129Bf948f1eA4",
-  LRC_TOKEN: "0xBBbbCA6A901c926F240b89EacB641d8Aec7AEafD",
-};
diff --git a/src/services/loopring/getAllUserNftIds.ts b/src/services/loopring/getAllUserNftIds.ts
deleted file mode 100644
index 8e28c42fc..000000000
--- a/src/services/loopring/getAllUserNftIds.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import axios from "axios";
-import rateLimit from "axios-rate-limit";
-import { LOOP_API } from "./_constants";
-import { headerOpts, extractNfts } from "./index";
-
-// Loopring API accepts 5 requests per second, max.
-// Although this seems to fluctuate. 20 / sec
-const rateLimitedAxios = rateLimit(axios.create(), {
-  maxRequests: 10,
-  perMilliseconds: 1000,
-});
-
-const getAllUserNftIds = async (accountId: string | string[]) => {
-  // Gets all Loopring L2 NFTs for a specified Account ID
-  const LIMIT = 50; // API can handle up to 50 per call
-  const firstReq = await axios.get(
-    `${LOOP_API.USER_NFT_BALANCE}?accountId=${accountId}&limit=${LIMIT}`,
-    headerOpts
-  );
-
-  // Early exit if the initial request failed
-  if (firstReq.data.totalNum === 0) return false;
-
-  // Store how many NFTs the user has
-  const amountOfNfts = firstReq.data.totalNum;
-
-  // Determine if we need to do follow-up API calls
-  if (amountOfNfts <= LIMIT) {
-    // No need to. Parse the nft IDs from the response and early return
-    return extractNfts(firstReq.data.data);
-  }
-
-  // Determine the amount of calls to be done, generate an array for follow-up requests
-  // Create and return an array of the amount of calls. I.e. => [1, 2, ..., n]
-  const amountOfCalls = Array.from(
-    Array(Math.ceil(amountOfNfts / LIMIT) - 1),
-    (_, index) => index + 1
-  );
-
-  // Call the API for all of these ^
-  const followUpReqs = await Promise.all(
-    amountOfCalls.map(async (index) => {
-      return await rateLimitedAxios.get(
-        `${
-          LOOP_API.USER_NFT_BALANCE
-        }?accountId=${accountId}&limit=${LIMIT}&offset=${LIMIT * index}`,
-        headerOpts
-      );
-    })
-  );
-
-  // Parse the API response, merge with the first API Call and flatten the array
-  const nftApiResFlattened = followUpReqs
-    .map((item) => item.data.data)
-    .concat(firstReq.data.data)
-    .flat();
-
-  // Extract the NFT IDs and return them
-  return extractNfts(nftApiResFlattened);
-};
-
-export default getAllUserNftIds;
diff --git a/src/services/loopring/getMinterAndToken.test.ts b/src/services/loopring/getMinterAndToken.test.ts
deleted file mode 100644
index 1acc098e4..000000000
--- a/src/services/loopring/getMinterAndToken.test.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import getMinterAndToken from "./getMinterAndToken";
-
-import axios from "axios";
-jest.mock("axios");
-const mockedAxios = axios as jest.Mocked<typeof axios>;
-
-describe("querying Loopring TheGraph to get minter and token address information", () => {
-  it.todo("returns a minter and token address for a valid NFT ID");
-  // it("returns a minter and token address for a valid NFT ID", async () => {
-  //   mockedAxios.get.mockResolvedValue({
-  //     minter: "0x94743548ba8d82a4ee8ea3dfad589ea501ad2738",
-  //     tokenAddress: "0xc76eca2937b006606ebe717621409e4c2df906f1",
-  //   });
-  //   const data = await getMinterAndToken(
-  //     "0x271d3a38c3572ab21225fbb7f97468051ca9c631f002bf2dde82aee9b8511ac0"
-  //   );
-  //   expect(data).toEqual({
-  //     minter: "0x94743548ba8d82a4ee8ea3dfad589ea501ad2738",
-  //     tokenAddress: "0xc76eca2937b006606ebe717621409e4c2df906f1",
-  //   });
-  // });
-
-  it("returns false for an invalid NFT ID", async () => {
-    mockedAxios.get.mockRejectedValue(false);
-    const data = await getMinterAndToken("0xbruh");
-    expect(data).toEqual(false);
-  });
-});
diff --git a/src/services/loopring/getNftData.ts b/src/services/loopring/getNftData.ts
deleted file mode 100644
index 2939da88a..000000000
--- a/src/services/loopring/getNftData.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { LOOP_API } from "./_constants";
-import axios from "axios";
-import headerOpts from "./headerOpts";
-import logger from "@/src/utils/logger";
-
-const getNftData = async (
-  minter: string,
-  tokenAddress: string,
-  nftId: string
-) => {
-  // Queries the Loopring API to find the NFT Datas
-  // Example input: `minter: "0x94743548ba8d82a4ee8ea3dfad589ea501ad2738", tokenAddress: "0xc76eca2937b006606ebe717621409e4c2df906f1", nftId: 0x271d3a38c3572ab21225fbb7f97468051ca9c631f002bf2dde82aee9b8511ac0`
-  // Example output: `...`
-
-  try {
-    const response = await axios.get(
-      `${LOOP_API.NFT_DATA}?minter=${minter}&tokenAddress=${tokenAddress}&nftId=${nftId}`,
-      headerOpts
-    );
-    return response.data;
-  } catch (error) {
-    logger.error(error);
-    return false;
-  }
-};
-
-export default getNftData;
diff --git a/src/services/loopring/getNftHolders.test.ts b/src/services/loopring/getNftHolders.test.ts
deleted file mode 100644
index 4dd178a05..000000000
--- a/src/services/loopring/getNftHolders.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import getNftHolders from "./getNftHolders";
-import axios from "axios";
-
-jest.mock("axios");
-const mockedAxios = axios as jest.Mocked<typeof axios>;
-
-describe("querying the Loopring API to get NFT Holders for a NFT with nftDatas", () => {
-  it.todo("returns a single NFT holder for a NFT with correct nftDatas");
-
-  it.todo("returns multiple NFT holders for a NFT with correct nftDatas");
-
-  it.todo("returns false for invalid nftData");
-});
diff --git a/src/services/loopring/getUserNfts.test.ts b/src/services/loopring/getUserNfts.test.ts
deleted file mode 100644
index 2277dbb89..000000000
--- a/src/services/loopring/getUserNfts.test.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import getUserNfts from "./getUserNfts";
-import axios from "axios";
-
-jest.mock("axios");
-const mockedAxios = axios as jest.Mocked<typeof axios>;
-
-describe("fetching data on users' NFTs with the Loopring API", () => {
-  it("returns NFT IDs for a user that has NFTs", async () => {
-    mockedAxios.get.mockResolvedValue({
-      data: ["0x1", "0x2", "0x3"],
-    });
-
-    const data = await getUserNfts("157137");
-    expect(data).toEqual(["0x1", "0x2", "0x3"]);
-  });
-});
diff --git a/src/services/loopring/getUserNfts.ts b/src/services/loopring/getUserNfts.ts
deleted file mode 100644
index cc0e1dfc2..000000000
--- a/src/services/loopring/getUserNfts.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import headerOpts from "./headerOpts";
-import { LOOP_API } from "./_constants";
-import axios from "axios";
-import logger from "@/src/utils/logger";
-
-const getUserNfts = async (accountId: string) => {
-  try {
-    const response = await axios.get(
-      `${LOOP_API.USER_NFT_BALANCE}?accountId=${accountId}&limit=50`,
-      headerOpts
-    );
-    return response.data;
-  } catch (error) {
-    logger.error(error);
-    return false;
-  }
-};
-
-export default getUserNfts;
diff --git a/src/services/loopring/helpers/_constants.ts b/src/services/loopring/helpers/_constants.ts
new file mode 100644
index 000000000..2a0c33a7b
--- /dev/null
+++ b/src/services/loopring/helpers/_constants.ts
@@ -0,0 +1,9 @@
+export const LOOP_API_URL = "https://api3.loopring.io/api/v3";
+
+export const THE_GRAPH_URL =
+  "https://api.thegraph.com/subgraphs/name/loopring/loopring";
+
+export const CONTRACTS = {
+  LOOPRING_EXCHANGE_V3: "0x0BABA1Ad5bE3a5C0a66E7ac838a129Bf948f1eA4",
+  LRC_TOKEN: "0xBBbbCA6A901c926F240b89EacB641d8Aec7AEafD",
+};
diff --git a/src/services/loopring/_types.ts b/src/services/loopring/helpers/_types.ts
similarity index 62%
rename from src/services/loopring/_types.ts
rename to src/services/loopring/helpers/_types.ts
index 97c255838..b826e213a 100644
--- a/src/services/loopring/_types.ts
+++ b/src/services/loopring/helpers/_types.ts
@@ -1,15 +1,20 @@
+// Generic types
 export type UnixDate = number;
+export type HexString = `0x${string}`;
 
+// Loopring Primitives
 export type NftType = "ERC1155" | "ERC721";
+export type NftData = HexString;
 
+// Loopring Responses
 interface CollectionInfo {
   id: number;
-  owner: `0x${string}`;
+  owner: HexString;
   name: string;
-  contractAddress: `0x${string}`;
-  collectionAddress: `0x${string}`;
+  contractAddress: HexString;
+  collectionAddress: HexString;
   baseUri: string;
-  nftFactory: `0x${string}`;
+  nftFactory: HexString;
   description: string;
   avatar: string;
   banner: string;
@@ -21,7 +26,7 @@ interface CollectionInfo {
     tileUri: string;
     thumbnail: string;
   };
-  deploymentStatus: "NOT_DEPLOYED";
+  deploymentStatus: string;
   nftType: NftType;
   times: {
     createdAt: UnixDate;
@@ -45,9 +50,9 @@ export interface NftBalanceResponse {
   data: {
     id: number;
     accountId: number;
-    nftData: `0x${string}`;
-    tokenAddress: `0x${string}`;
-    nftId: `0x${string}`;
+    nftData: HexString;
+    tokenAddress: HexString;
+    nftId: HexString;
     nftType: NftType;
     total: string;
     locked: string;
@@ -57,7 +62,7 @@ export interface NftBalanceResponse {
     };
     deploymentStatus: string;
     isCounterfactualNFT: boolean;
-    minter: `0x${string}`;
+    minter: HexString;
     royaltyPercentage: number;
     preference: {
       favourite: boolean;
@@ -67,3 +72,18 @@ export interface NftBalanceResponse {
     updatedAt: UnixDate;
   }[];
 }
+
+export interface NftDataResponse {
+  nftData: HexString;
+  minter: HexString;
+  nftType: NftType;
+  tokenAddress: HexString;
+  nftId: HexString;
+  royaltyPercentage: number;
+  status: string;
+  nftFactory: HexString;
+  nftOwner: HexString;
+  nftBaseUri: HexString;
+  royaltyAddress: HexString;
+  originalMinter: HexString;
+}
diff --git a/src/services/loopring/extractNfts.ts b/src/services/loopring/helpers/extractNfts.ts
similarity index 54%
rename from src/services/loopring/extractNfts.ts
rename to src/services/loopring/helpers/extractNfts.ts
index bdbea5822..ffedc5c81 100644
--- a/src/services/loopring/extractNfts.ts
+++ b/src/services/loopring/helpers/extractNfts.ts
@@ -1,13 +1,11 @@
 import { NftBalanceResponse } from "./_types";
 
 // Parses a Loopring API response to extract the NFT IDs
-const extractNfts = (apiRes: any) => {
-  let nfts: string[] = [];
-  apiRes.forEach((item: any) => {
+export const extractNfts = (apiRes: NftBalanceResponse) => {
+  const nfts: string[] = [];
+  apiRes.data.forEach((item) => {
     nfts.push(item.nftId);
   });
 
   return nfts;
 };
-
-export default extractNfts;
diff --git a/src/services/loopring/headerOpts.ts b/src/services/loopring/helpers/headerOpts.ts
similarity index 76%
rename from src/services/loopring/headerOpts.ts
rename to src/services/loopring/helpers/headerOpts.ts
index 8fcf43c24..af0c3d2a5 100644
--- a/src/services/loopring/headerOpts.ts
+++ b/src/services/loopring/helpers/headerOpts.ts
@@ -1,8 +1,6 @@
 // Fetch options used whenever the Loopring API Key is required
-const headerOpts = {
+export const headerOpts = {
   headers: {
     "X-API-KEY": process.env.LOOPRING_API_KEY || "Undefined Loopring API Key",
   },
 };
-
-export default headerOpts;
diff --git a/src/services/loopring/rateLimitedAxios.ts b/src/services/loopring/helpers/rateLimitedAxios.ts
similarity index 57%
rename from src/services/loopring/rateLimitedAxios.ts
rename to src/services/loopring/helpers/rateLimitedAxios.ts
index 62deaa74d..7fc21c5a1 100644
--- a/src/services/loopring/rateLimitedAxios.ts
+++ b/src/services/loopring/helpers/rateLimitedAxios.ts
@@ -1,9 +1,7 @@
 import axios from "axios";
 import rateLimit from "axios-rate-limit";
 
-const rateLimitedAxios = rateLimit(axios.create(), {
+export const rateLimitedAxios = rateLimit(axios.create(), {
   maxRequests: 10,
   perMilliseconds: 1000,
 });
-
-export default rateLimitedAxios;
diff --git a/src/services/loopring/index.ts b/src/services/loopring/index.ts
index 57840abbc..d0a28d8d0 100644
--- a/src/services/loopring/index.ts
+++ b/src/services/loopring/index.ts
@@ -1,24 +1,12 @@
-// API Implementations
-import getUserAddress from "./getUserAddress";
-import getUserNfts from "./getUserNfts";
-import getNftData from "./getNftData";
-import getNftHolders from "./getNftHolders";
-import getAllUserNftIds from "./getAllUserNftIds";
-import getMinterAndToken from "./getMinterAndToken";
+// Requests
+export { getUserAddress } from "./requests/getUserAddress";
+export { getUserNfts } from "./requests/getUserNfts";
+export { getNftData } from "./requests/getNftData";
+export { getNftHolders } from "./requests/getNftHolders";
+export { getMinterAndToken } from "./requests/getMinterAndToken";
+export { getAllUserNftIds } from "./requests/getAllUserNftIds";
 
-// Utils / general
-import extractNfts from "./extractNfts";
-import headerOpts from "./headerOpts";
-import rateLimitedAxios from "./rateLimitedAxios";
-
-export {
-  extractNfts,
-  getUserAddress,
-  getUserNfts,
-  getNftData,
-  getMinterAndToken,
-  getAllUserNftIds,
-  getNftHolders,
-  headerOpts,
-  rateLimitedAxios,
-};
+// Helpers
+export { extractNfts } from "./helpers/extractNfts";
+export { headerOpts } from "./helpers/headerOpts";
+export { rateLimitedAxios } from "./helpers/rateLimitedAxios";
diff --git a/src/services/loopring/requests/getAllUserNftIds.ts b/src/services/loopring/requests/getAllUserNftIds.ts
new file mode 100644
index 000000000..4fbfa8143
--- /dev/null
+++ b/src/services/loopring/requests/getAllUserNftIds.ts
@@ -0,0 +1,58 @@
+import axios from "axios";
+import { LOOP_API_URL } from "../helpers/_constants";
+import { headerOpts, extractNfts, rateLimitedAxios } from "../";
+import { NftBalanceResponse } from "../helpers/_types";
+
+type AxiosNftBalanceResponse = { data: NftBalanceResponse };
+
+// Gets all Loopring L2 NFTs for a specified Account ID
+export const getAllUserNftIds = async (accountId: string | string[]) => {
+  const LIMIT = 50; // API can handle up to 50 per call
+
+  const firstReq: AxiosNftBalanceResponse = await axios.get(
+    `${LOOP_API_URL}/user/nft/balances?accountId=${accountId}&limit=${LIMIT}`,
+    headerOpts
+  );
+
+  if (firstReq.data.totalNum === 0) {
+    return false;
+  }
+
+  // Determine if we need to do follow-up API calls
+  if (firstReq.data.totalNum <= LIMIT) {
+    return extractNfts(firstReq.data);
+  }
+
+  // Determine the amount of calls to be done, generate an array for follow-up requests
+  const amountOfCalls = Array.from(
+    Array(Math.ceil(firstReq.data.totalNum / LIMIT) - 1),
+    (_, index) => index + 1
+  );
+
+  // Call the API for all of these ^
+  const followUpReqs = await Promise.all(
+    amountOfCalls.map(async (index) => {
+      const followUpResponse: AxiosNftBalanceResponse =
+        await rateLimitedAxios.get(
+          `${LOOP_API_URL}/user/nft/balances?accountId=${accountId}&limit=${LIMIT}&offset=${
+            LIMIT * index
+          }`,
+          headerOpts
+        );
+
+      return followUpResponse;
+    })
+  );
+
+  // Parse the API response, merge with the first API Call and flatten the array
+  const nftApiResFlattened = followUpReqs
+    .map((item) => item.data.data)
+    .concat(firstReq.data.data)
+    .flat();
+
+  // Extract the NFT IDs and return them
+  return extractNfts({
+    totalNum: firstReq.data.totalNum,
+    data: nftApiResFlattened,
+  });
+};
diff --git a/src/services/loopring/getMinterAndToken.ts b/src/services/loopring/requests/getMinterAndToken.ts
similarity index 81%
rename from src/services/loopring/getMinterAndToken.ts
rename to src/services/loopring/requests/getMinterAndToken.ts
index 30291b8e1..104232f7e 100644
--- a/src/services/loopring/getMinterAndToken.ts
+++ b/src/services/loopring/requests/getMinterAndToken.ts
@@ -1,11 +1,11 @@
 import axios from "axios";
-import { THE_GRAPH } from "./_constants";
+import { THE_GRAPH_URL } from "../helpers/_constants";
 import logger from "@/src/utils/logger";
 
 // Queries Loopring TheGraph to find Minter and Token Address from NFT ID
 // Example input: `0x271d3a38c3572ab21225fbb7f97468051ca9c631f002bf2dde82aee9b8511ac0`
 // Example output: `minter: "0x94743548ba8d82a4ee8ea3dfad589ea501ad2738", tokenAddress: "0xc76eca2937b006606ebe717621409e4c2df906f1"`
-const getMinterAndToken = async (nftId: string) => {
+export const getMinterAndToken = async (nftId: string) => {
   const query = `{
           nonFungibleTokens( 
             where: {nftID: "${nftId}"} 
@@ -18,7 +18,7 @@ const getMinterAndToken = async (nftId: string) => {
         }`;
 
   try {
-    const response = await axios.post(THE_GRAPH.GATEWAY_URL, { query });
+    const response = await axios.post(THE_GRAPH_URL, { query });
 
     if (response.data.data.nonFungibleTokens.length == 0) {
       return false;
@@ -33,5 +33,3 @@ const getMinterAndToken = async (nftId: string) => {
     return false;
   }
 };
-
-export default getMinterAndToken;
diff --git a/src/services/loopring/requests/getNftData.ts b/src/services/loopring/requests/getNftData.ts
new file mode 100644
index 000000000..0bb3c41b6
--- /dev/null
+++ b/src/services/loopring/requests/getNftData.ts
@@ -0,0 +1,29 @@
+import { LOOP_API_URL } from "../helpers/_constants";
+import { NftDataResponse } from "../helpers/_types";
+import axios from "axios";
+import { headerOpts } from "../helpers/headerOpts";
+import logger from "@/src/utils/logger";
+
+// Queries the Loopring API to find the NFT Datas
+// Example input: `minter: "0x94743548ba8d82a4ee8ea3dfad589ea501ad2738", tokenAddress: "0xc76eca2937b006606ebe717621409e4c2df906f1", nftId: 0x271d3a38c3572ab21225fbb7f97468051ca9c631f002bf2dde82aee9b8511ac0`
+export const getNftData = async (
+  minter: string,
+  tokenAddress: string,
+  nftId: string
+) => {
+  try {
+    const response: { data?: NftDataResponse } = await axios.get(
+      `${LOOP_API_URL}/nft/info/nftData?minter=${minter}&tokenAddress=${tokenAddress}&nftId=${nftId}`,
+      headerOpts
+    );
+
+    if (!response.data) {
+      return false;
+    }
+
+    return response.data;
+  } catch (error) {
+    logger.error(error);
+    return false;
+  }
+};
diff --git a/src/services/loopring/getNftHolders.ts b/src/services/loopring/requests/getNftHolders.ts
similarity index 80%
rename from src/services/loopring/getNftHolders.ts
rename to src/services/loopring/requests/getNftHolders.ts
index 720adca6d..a18bdb9e9 100644
--- a/src/services/loopring/getNftHolders.ts
+++ b/src/services/loopring/requests/getNftHolders.ts
@@ -1,14 +1,14 @@
-import { LOOP_API } from "./_constants";
+import { LOOP_API_URL } from "../helpers/_constants";
 import axios from "axios";
-import { headerOpts, rateLimitedAxios } from "./index";
+import { headerOpts, rateLimitedAxios } from "../index";
 import logger from "@/src/utils/logger";
 
-const getNftHolders = async (nftData: string) => {
+export const getNftHolders = async (nftData: string) => {
   const LIMIT = 500; // API can handle up to 500 per call
 
   try {
     const firstReq = await axios.get(
-      `${LOOP_API.NFT_HOLDERS}?nftData=${nftData}&limit=${LIMIT}`,
+      `${LOOP_API_URL}/nft/info/nftHolders?nftData=${nftData}&limit=${LIMIT}`,
       headerOpts
     );
 
@@ -32,7 +32,7 @@ const getNftHolders = async (nftData: string) => {
     const followUpReqs = await Promise.all(
       amountOfCalls.map(async (index) => {
         return await rateLimitedAxios.get(
-          `${LOOP_API.NFT_HOLDERS}?nftData=${nftData}&limit=${LIMIT}&offset=${
+          `${LOOP_API_URL}/nft/info/nftHolders?nftData=${nftData}&limit=${LIMIT}&offset=${
             LIMIT * index
           }`,
           headerOpts
@@ -52,5 +52,3 @@ const getNftHolders = async (nftData: string) => {
     return false;
   }
 };
-
-export default getNftHolders;
diff --git a/src/services/loopring/getUserAddress.test.ts b/src/services/loopring/requests/getUserAddress.test.ts
similarity index 95%
rename from src/services/loopring/getUserAddress.test.ts
rename to src/services/loopring/requests/getUserAddress.test.ts
index 5bf9235c6..077fa157b 100644
--- a/src/services/loopring/getUserAddress.test.ts
+++ b/src/services/loopring/requests/getUserAddress.test.ts
@@ -1,4 +1,4 @@
-import getUserAddress from "./getUserAddress";
+import { getUserAddress } from "./getUserAddress";
 import axios from "axios";
 
 jest.mock("axios");
diff --git a/src/services/loopring/getUserAddress.ts b/src/services/loopring/requests/getUserAddress.ts
similarity index 53%
rename from src/services/loopring/getUserAddress.ts
rename to src/services/loopring/requests/getUserAddress.ts
index 946419f17..bf375f5c0 100644
--- a/src/services/loopring/getUserAddress.ts
+++ b/src/services/loopring/requests/getUserAddress.ts
@@ -1,11 +1,13 @@
-import { LOOP_API } from "./_constants";
+import { LOOP_API_URL } from "../helpers/_constants";
 import axios from "axios";
 import logger from "@/src/utils/logger";
 
-const getUserAddress = async (address: string | string[]) => {
+export const getUserAddress = async (
+  address: string | string[]
+): Promise<string | false> => {
   try {
     const response = await axios.get(
-      `${LOOP_API.USER_ACCOUNT}?owner=${address}`
+      `${LOOP_API_URL}/account?owner=${address}`
     );
     return response.data.accountId;
   } catch (error) {
@@ -13,5 +15,3 @@ const getUserAddress = async (address: string | string[]) => {
     return false;
   }
 };
-
-export default getUserAddress;
diff --git a/src/services/pinata/_types.ts b/src/services/pinata/_types.ts
index 281dbddb5..94b43c23b 100644
--- a/src/services/pinata/_types.ts
+++ b/src/services/pinata/_types.ts
@@ -6,12 +6,14 @@ export interface PinataFolderRes {
 export interface PinataFolderItem {
   id: string;
   createdAt: string;
-  cid: string; // starting with `baf...`
+  cid: string;
   name: string;
   originalName: string;
   size: string;
+  // TODO: Add Pinata Metadata instead of 'any'.
+  // eslint-disable-next-line
   metadata: any;
   type: string;
   pinToIpfs: boolean;
-  uri: string; // starting with `/ipfs/baf...`
+  uri: string;
 }
diff --git a/src/services/supabase/helpers/index.ts b/src/services/supabase/helpers/index.ts
index 21585114e..d304f24b4 100644
--- a/src/services/supabase/helpers/index.ts
+++ b/src/services/supabase/helpers/index.ts
@@ -1 +1 @@
-export { parseSqlUnlockable } from "./parseSqlUnlockable";
+export { mapUnlockable } from "./mapUnlockable";
diff --git a/src/services/supabase/helpers/mapUnlockable.ts b/src/services/supabase/helpers/mapUnlockable.ts
new file mode 100644
index 000000000..a8fd93987
--- /dev/null
+++ b/src/services/supabase/helpers/mapUnlockable.ts
@@ -0,0 +1,30 @@
+import { UnlockableV2 } from "@/src/config/types";
+import { parseNftIdString } from "@/src/utils/generic";
+import { SupabaseUnlockable } from "../typeExtenstions";
+
+// Mapping function for Supabase Unlockable -> LoopGate Unlockable Type
+export const mapUnlockable = (
+  supabaseData: SupabaseUnlockable
+): UnlockableV2 => {
+  const unlockable = {
+    id: supabaseData.id as string,
+    owner: supabaseData.owner as string,
+    metadata: {
+      name: supabaseData?.name as string | undefined,
+      description: supabaseData?.description as string | undefined,
+      lastUpdated: supabaseData.updated_at as string,
+      createdAt: supabaseData.created_at as string,
+    },
+    unlisted: supabaseData.unlisted as boolean,
+    content: {
+      type: "IPFS" as const,
+      url: supabaseData.content_url as string,
+    },
+    unlockCriteria: {
+      unlockAmount: supabaseData.criteria_unlock_amount as number,
+      nftId: parseNftIdString(supabaseData.nft_ids),
+    },
+  };
+
+  return unlockable;
+};
diff --git a/src/services/supabase/helpers/parseSqlUnlockable.ts b/src/services/supabase/helpers/parseSqlUnlockable.ts
deleted file mode 100644
index 1e144b623..000000000
--- a/src/services/supabase/helpers/parseSqlUnlockable.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { UnlockableV2 } from "@/src/config/types";
-import { parseNftIdString } from "@/src/utils/generic";
-
-export const parseSqlUnlockable = (supabaseUnlockable: any): UnlockableV2 => {
-  const nftIds = parseNftIdString(supabaseUnlockable.nft_ids);
-
-  const unlockable = {
-    id: supabaseUnlockable.id,
-    owner: supabaseUnlockable.owner,
-    metadata: {
-      name: supabaseUnlockable?.name,
-      description: supabaseUnlockable?.description,
-      lastUpdated: supabaseUnlockable.updated_at,
-    },
-    content: {
-      type: "IPFS" as "IPFS",
-      url: supabaseUnlockable.content_url,
-    },
-    unlockCriteria: {
-      unlockAmount: supabaseUnlockable.criteria_unlock_amount,
-      nftId: nftIds,
-    },
-  };
-
-  return unlockable;
-};
diff --git a/src/services/supabase/typeExtensions.ts b/src/services/supabase/typeExtenstions.ts
similarity index 100%
rename from src/services/supabase/typeExtensions.ts
rename to src/services/supabase/typeExtenstions.ts
diff --git a/src/services/supabase/types.ts b/src/services/supabase/types.ts
index c5a433daa..420a678e8 100644
--- a/src/services/supabase/types.ts
+++ b/src/services/supabase/types.ts
@@ -112,12 +112,27 @@ export interface Database {
       unlockables_with_criteria: {
         Row: {
           content_url: string | null
+          created_at: string | null
           criteria_unlock_amount: number | null
           description: string | null
           id: string | null
           name: string | null
           nft_ids: string | null
           owner: string | null
+          unlisted: boolean | null
+          updated_at: string | null
+        }
+      }
+      unlockables_with_criteria_backup: {
+        Row: {
+          content_url: string | null
+          criteria_unlock_amount: number | null
+          description: string | null
+          id: string | null
+          name: string | null
+          nft_ids: string | null
+          owner: string | null
+          unlisted: boolean | null
           updated_at: string | null
         }
       }
diff --git a/src/utils/generic/parseNftIdString.ts b/src/utils/generic/parseNftIdString.ts
index a754f188b..d294aac6f 100644
--- a/src/utils/generic/parseNftIdString.ts
+++ b/src/utils/generic/parseNftIdString.ts
@@ -4,9 +4,9 @@
  * Output: ["0x00...00", 1x11.11]
  */
 
-export const parseNftIdString = (nftIdString?: string): string[] => {
+export const parseNftIdString = (nftIdString: string | null): string[] => {
   if (!nftIdString) {
-    return [];
+    return [""];
   }
 
   return nftIdString.replaceAll(" ", "").split(",");
diff --git a/src/utils/logger/logger.ts b/src/utils/logger/logger.ts
index b09fa6930..dd14f2d6e 100644
--- a/src/utils/logger/logger.ts
+++ b/src/utils/logger/logger.ts
@@ -16,7 +16,9 @@ const credentialsDefined = checkCredentials([
 
 // Include a mock logger in case no LogFlare credentials are present
 const mockLogger = {
-  error: () => {},
+  error: () => {
+    console.log("");
+  },
 };
 
 const logger = credentialsDefined

From 37785a9891366e616653c5ee2a5ee2f41589db70 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sat, 27 May 2023 11:09:40 +0200
Subject: [PATCH 12/18] Temporarily re-add
 utils/supabase/helpers/parseNftIdString to prevent merge conflict

---
 src/utils/supabase/helpers/parseNftIdString.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/utils/supabase/helpers/parseNftIdString.ts

diff --git a/src/utils/supabase/helpers/parseNftIdString.ts b/src/utils/supabase/helpers/parseNftIdString.ts
new file mode 100644
index 000000000..079462638
--- /dev/null
+++ b/src/utils/supabase/helpers/parseNftIdString.ts
@@ -0,0 +1,15 @@
+/**
+ * Parses NFT IDs text array from SQL DB
+ * Input: "0x00...00, 1x11...11"
+ * Output: ["0x00...00", 1x11.11]
+ */
+
+const parseNftIdString = (nftIdString?: string): string[] => {
+  if (!nftIdString) {
+    return [];
+  }
+
+  return nftIdString.replaceAll(" ", "").split(",");
+};
+
+export default parseNftIdString;

From 84b914abde83308a674aad8ceb599d342eba2431 Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sat, 27 May 2023 11:24:58 +0200
Subject: [PATCH 13/18] Add more type safety

---
 src/services/loopring/helpers/_types.ts       | 40 +++++++++++++++++--
 .../loopring/requests/getUserAddress.ts       | 12 ++++--
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/services/loopring/helpers/_types.ts b/src/services/loopring/helpers/_types.ts
index b826e213a..642b866c5 100644
--- a/src/services/loopring/helpers/_types.ts
+++ b/src/services/loopring/helpers/_types.ts
@@ -1,12 +1,14 @@
-// Generic types
+/**
+ * Generic Types ⬜️
+ */
 export type UnixDate = number;
 export type HexString = `0x${string}`;
 
-// Loopring Primitives
+/**
+ * Loopring Primitives 🔥
+ */
 export type NftType = "ERC1155" | "ERC721";
 export type NftData = HexString;
-
-// Loopring Responses
 interface CollectionInfo {
   id: number;
   owner: HexString;
@@ -45,6 +47,11 @@ interface CollectionInfo {
   };
 }
 
+/**
+ * Loopring API Requests 📞
+ */
+
+/* /api/v3/nft/balances 👉 https://docs-protocol.loopring.io/counterfactual-nft/api-references/get-nft-assets */
 export interface NftBalanceResponse {
   totalNum: number;
   data: {
@@ -73,6 +80,7 @@ export interface NftBalanceResponse {
   }[];
 }
 
+/* /api/v3/nft/info/nftData 👉 https://docs-protocol.loopring.io/counterfactual-nft/api-references/get-nft-data */
 export interface NftDataResponse {
   nftData: HexString;
   minter: HexString;
@@ -87,3 +95,27 @@ export interface NftDataResponse {
   royaltyAddress: HexString;
   originalMinter: HexString;
 }
+
+/* /api/v3/account 👉 https://docs-protocol.loopring.io/loopring-account/api-references/get-account-info */
+export interface AccountResponse {
+  accountId: number;
+  owner: HexString;
+  frozen: boolean;
+  publicKey: {
+    x: HexString;
+    y: HexString;
+  };
+  tags: string | "vip_0" | "vip_1";
+  nonce: number;
+  keyNonce: number;
+  keySeed: string;
+}
+
+export interface NftHoldersResponse {
+  totalNum: number;
+  nftHolders: {
+    accountId: number;
+    tokenId: number;
+    amount: string;
+  }[];
+}
diff --git a/src/services/loopring/requests/getUserAddress.ts b/src/services/loopring/requests/getUserAddress.ts
index bf375f5c0..a07975177 100644
--- a/src/services/loopring/requests/getUserAddress.ts
+++ b/src/services/loopring/requests/getUserAddress.ts
@@ -1,14 +1,18 @@
 import { LOOP_API_URL } from "../helpers/_constants";
 import axios from "axios";
 import logger from "@/src/utils/logger";
+import { AccountResponse } from "../helpers/_types";
 
-export const getUserAddress = async (
-  address: string | string[]
-): Promise<string | false> => {
+export const getUserAddress = async (address: string | string[]) => {
   try {
-    const response = await axios.get(
+    const response: { data: AccountResponse } = await axios.get(
       `${LOOP_API_URL}/account?owner=${address}`
     );
+
+    if (!response.data) {
+      return false;
+    }
+
     return response.data.accountId;
   } catch (error) {
     logger.error(error);

From 2e3fb765a74ba977c9c0cf469ab244e4b2b97e0d Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sat, 27 May 2023 11:45:07 +0200
Subject: [PATCH 14/18] Add prettier formatting with linting

---
 .eslintrc.json                                |  12 +-
 .prettierrc                                   |  11 +
 package-lock.json                             |  39 +++
 package.json                                  |   4 +
 .../Pages/Home/ContentBlocks/Block.tsx        |   2 +-
 .../Pages/Home/ContentBlocks/Links.tsx        |   2 +-
 .../Home/ContentBlocks/UnlockablesBlock.tsx   |   2 +-
 src/components/UnlockablePage/List/List.tsx   |   2 +-
 .../UnlockCard/UnlockSection.tsx              |   4 +-
 src/middleware/siwe/configure.tsx             |   4 +-
 src/pages/api/helpers/check-env-status.ts     |   2 +-
 src/pages/api/unlockable/verify-access.ts     |   4 +-
 src/pages/index.tsx                           |   2 +-
 src/pages/unlocks/[uuid].tsx                  |   2 +-
 src/pages/unlocks/browse.tsx                  |   2 +-
 src/pages/upload/form.tsx                     |   2 +-
 .../unlockable/fetchAllUnlockables.ts         |   2 +-
 .../loopgate/unlockable/findAllUnlockables.ts |   4 +-
 .../unlockable/findUnlockableByUuid.ts        |   2 +-
 .../loopgate/unlockable/findUnlockedCids.ts   |   4 +-
 src/services/loopring/helpers/extractNfts.ts  |   2 +-
 .../loopring/requests/getAllUserNftIds.ts     |   4 +-
 .../loopring/requests/getNftHolders.ts        |   4 +-
 .../pinata/checkPinataFolderForHtml.ts        |   2 +-
 src/services/supabase/types.ts                | 230 +++++++++---------
 src/utils/generic/checkIfContainsAll.ts       |   2 +-
 src/utils/logger/logger.ts                    |   2 +-
 27 files changed, 208 insertions(+), 146 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.eslintrc.json b/.eslintrc.json
index c258ef0a4..9ee067de3 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,8 +1,16 @@
 {
-  "plugins": ["@typescript-eslint"],
-  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+  "plugins": [
+    "@typescript-eslint"
+    //  "simple-import-sort"
+  ],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
   "rules": {
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-explicit-any": "error"
+    // "simple-import-sort/imports": "error"
   }
 }
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..cbd9c13b3
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}
diff --git a/package-lock.json b/package-lock.json
index d94f6ceb7..09516f9b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,9 +62,12 @@
         "autoprefixer": "^10.4.13",
         "eslint": "^8.15.0",
         "eslint-config-next": "^12.1.6",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-simple-import-sort": "^10.0.0",
         "jest": "^29.4.2",
         "jest-environment-jsdom": "^29.4.2",
         "postcss": "^8.4.21",
+        "prettier": "^2.8.8",
         "supabase": "^1.45.2",
         "tailwindcss": "^3.2.4",
         "typescript": "^4.6.4"
@@ -8127,6 +8130,18 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
+      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.7",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
@@ -8390,6 +8405,15 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/eslint-plugin-simple-import-sort": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-10.0.0.tgz",
+      "integrity": "sha512-AeTvO9UCMSNzIHRkg8S6c3RPy5YEwKWSQPx3DYghLedo2ZQxowPFLGDN1AZ2evfg6r6mjBSZSLxLFsWSu3acsw==",
+      "dev": true,
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
@@ -13187,6 +13211,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "29.4.2",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.4.2.tgz",
diff --git a/package.json b/package.json
index fc6b85e93..c77185016 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "lint": "next lint",
     "test": "jest",
     "test:watch": "jest --watch",
+    "format": "npx prettier --write src/",
     "supabase:types": "npx supabase gen types typescript --project-id wyskjtopiuiwkkqclyho --schema public > src/services/supabase/types.ts"
   },
   "dependencies": {
@@ -70,9 +71,12 @@
     "autoprefixer": "^10.4.13",
     "eslint": "^8.15.0",
     "eslint-config-next": "^12.1.6",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "jest": "^29.4.2",
     "jest-environment-jsdom": "^29.4.2",
     "postcss": "^8.4.21",
+    "prettier": "^2.8.8",
     "supabase": "^1.45.2",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.6.4"
diff --git a/src/components/Pages/Home/ContentBlocks/Block.tsx b/src/components/Pages/Home/ContentBlocks/Block.tsx
index 215aebba6..491c64518 100644
--- a/src/components/Pages/Home/ContentBlocks/Block.tsx
+++ b/src/components/Pages/Home/ContentBlocks/Block.tsx
@@ -50,7 +50,7 @@ const Block = ({
         {icon}
       </div>
       <h2 className="font-display font-semibold mt-6">{title}</h2>
-      {description.map((item) => (
+      {description.map(item => (
         <p
           className={cn(
             `mt-3 leading-relaxed`,
diff --git a/src/components/Pages/Home/ContentBlocks/Links.tsx b/src/components/Pages/Home/ContentBlocks/Links.tsx
index 7699368ed..6e0cd5b06 100644
--- a/src/components/Pages/Home/ContentBlocks/Links.tsx
+++ b/src/components/Pages/Home/ContentBlocks/Links.tsx
@@ -13,7 +13,7 @@ const Links = ({ title, links }: Props) => {
   return (
     <div className="rounded-md border border-white/10 mt-6 md:mt-10 overflow-hidden w-full">
       <p className="text-sm text-white/50 px-3 py-2">{title}</p>
-      {links.map((item) => (
+      {links.map(item => (
         <a
           key={item.label}
           href={item.url}
diff --git a/src/components/Pages/Home/ContentBlocks/UnlockablesBlock.tsx b/src/components/Pages/Home/ContentBlocks/UnlockablesBlock.tsx
index 543a6b765..48618aa9b 100644
--- a/src/components/Pages/Home/ContentBlocks/UnlockablesBlock.tsx
+++ b/src/components/Pages/Home/ContentBlocks/UnlockablesBlock.tsx
@@ -53,7 +53,7 @@ const UnlockablesBlock = ({ unlockables }: Props) => {
         <EmptyState />
       ) : (
         <>
-          {unlockables.slice(0, 3).map((item) => (
+          {unlockables.slice(0, 3).map(item => (
             <UnlockablesItem key={item.id} unlockable={item} />
           ))}
           <BrowseAllLink />
diff --git a/src/components/UnlockablePage/List/List.tsx b/src/components/UnlockablePage/List/List.tsx
index 4d07a6189..60ec92825 100644
--- a/src/components/UnlockablePage/List/List.tsx
+++ b/src/components/UnlockablePage/List/List.tsx
@@ -15,7 +15,7 @@ const List = ({ unlockables }: Props) => {
         </span>
       </h1>
       <div className="divide-y divide-white/20">
-        {unlockables.map((item) => (
+        {unlockables.map(item => (
           <ListItem key={item.id} unlockable={item} />
         ))}
       </div>
diff --git a/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx b/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
index 1532960ca..c72267126 100644
--- a/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
+++ b/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
@@ -28,11 +28,11 @@ const UnlockSection = ({ unlockable }: Props) => {
       .get(
         `/api/unlockable/verify-access?address=${address}&unlockableId=${unlockable.id}`
       )
-      .then((data) => {
+      .then(data => {
         setUnlockedContent(data.data.unlock);
         setIsLoading(false);
       })
-      .catch((error) => {
+      .catch(error => {
         setIsLoading(false);
         logger.error(error.response.data.message);
         toast.error(error.response.data.message);
diff --git a/src/middleware/siwe/configure.tsx b/src/middleware/siwe/configure.tsx
index 0d574870d..01bbfdb68 100644
--- a/src/middleware/siwe/configure.tsx
+++ b/src/middleware/siwe/configure.tsx
@@ -217,7 +217,7 @@ export const configureSIWE = <TSessionData extends Object = {}>({
               "Content-Type": "application/json",
             },
             body: JSON.stringify({ message, signature }),
-          }).then((res) => res.ok)
+          }).then(res => res.ok)
         }
         getSession={async () => {
           const res = await fetch(`${apiRoutePrefix}/session`);
@@ -227,7 +227,7 @@ export const configureSIWE = <TSessionData extends Object = {}>({
           const { address, chainId } = await res.json();
           return address && chainId ? { address, chainId } : null;
         }}
-        signOut={() => fetch(`${apiRoutePrefix}/logout`).then((res) => res.ok)}
+        signOut={() => fetch(`${apiRoutePrefix}/logout`).then(res => res.ok)}
         {...props}
       />
     );
diff --git a/src/pages/api/helpers/check-env-status.ts b/src/pages/api/helpers/check-env-status.ts
index b5c612fc8..691aa9fa0 100644
--- a/src/pages/api/helpers/check-env-status.ts
+++ b/src/pages/api/helpers/check-env-status.ts
@@ -11,7 +11,7 @@ const handler = async (_req: NextApiRequest, res: NextApiResponse) => {
 
   const undefinedEnvs: string[] = [];
 
-  envsToCheck.forEach((item) => {
+  envsToCheck.forEach(item => {
     if (process.env[item] === undefined) {
       undefinedEnvs.push(item);
     }
diff --git a/src/pages/api/unlockable/verify-access.ts b/src/pages/api/unlockable/verify-access.ts
index 088cd3295..999643948 100644
--- a/src/pages/api/unlockable/verify-access.ts
+++ b/src/pages/api/unlockable/verify-access.ts
@@ -46,14 +46,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
 
   // 2️⃣ Call the Loopring API to find the NFTs held by the user
-  const userNftIds = await getAllUserNftIds(accountId);
+  const userNftIds = await getAllUserNftIds(accountId.toString());
 
   if (!userNftIds) {
     return handleError(res, LoopgateError.noNftsFound);
   }
 
   // 3️⃣ Check if the user meets the unlock criteria
-  const intersection = unlockable.unlockCriteria.nftId.filter((value) =>
+  const intersection = unlockable.unlockCriteria.nftId.filter(value =>
     userNftIds.includes(value)
   );
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2fef18131..38b638762 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -13,7 +13,7 @@ import UseCases from "../components/Pages/Home/UseCases";
 import CTABanner from "../components/Pages/Home/CTABanner";
 import { techPattern } from "../styles/inlineStyles";
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps = async context => {
   context.res.setHeader(
     "Cache-Control",
     "public, s-maxage=3000, stale-while-revalidate=5000"
diff --git a/src/pages/unlocks/[uuid].tsx b/src/pages/unlocks/[uuid].tsx
index 1d704e7a0..22b5c8013 100644
--- a/src/pages/unlocks/[uuid].tsx
+++ b/src/pages/unlocks/[uuid].tsx
@@ -10,7 +10,7 @@ import { UnlockableV2 } from "@/src/config/types";
 import { isUuid } from "@/src/utils/generic";
 import NextHeadBase from "@/src/components/SEO/NextHeadBase";
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps = async context => {
   context.res.setHeader(
     "Cache-Control",
     "public, s-maxage=3000, stale-while-revalidate=5000"
diff --git a/src/pages/unlocks/browse.tsx b/src/pages/unlocks/browse.tsx
index 524e26c8c..095ab0511 100644
--- a/src/pages/unlocks/browse.tsx
+++ b/src/pages/unlocks/browse.tsx
@@ -9,7 +9,7 @@ import { GetServerSideProps } from "next";
 import { UnlockableV2 } from "@/src/config/types";
 import List from "@/src/components/UnlockablePage/List";
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps = async context => {
   context.res.setHeader(
     "Cache-Control",
     "public, s-maxage=3000, stale-while-revalidate=5000"
diff --git a/src/pages/upload/form.tsx b/src/pages/upload/form.tsx
index d54125c57..c72235005 100644
--- a/src/pages/upload/form.tsx
+++ b/src/pages/upload/form.tsx
@@ -12,7 +12,7 @@ interface FileUploadState {
   files: FileList | null;
 }
 
-export const getServerSideProps: GetServerSideProps = async (context) =>
+export const getServerSideProps: GetServerSideProps = async context =>
   (await checkAuthentication(context))
     ? { props: { isAuthenticated: true } }
     : redirectTo("/");
diff --git a/src/services/loopgate/unlockable/fetchAllUnlockables.ts b/src/services/loopgate/unlockable/fetchAllUnlockables.ts
index de37a118b..5cb19c903 100644
--- a/src/services/loopgate/unlockable/fetchAllUnlockables.ts
+++ b/src/services/loopgate/unlockable/fetchAllUnlockables.ts
@@ -14,7 +14,7 @@ export const fetchAllUnlockables = async (owner?: string) => {
   }
 
   if (unlockables) {
-    const parsedUnlockables = unlockables.map((item) => mapUnlockable(item));
+    const parsedUnlockables = unlockables.map(item => mapUnlockable(item));
 
     return parsedUnlockables;
   }
diff --git a/src/services/loopgate/unlockable/findAllUnlockables.ts b/src/services/loopgate/unlockable/findAllUnlockables.ts
index e8d9adbf4..cc91195b3 100644
--- a/src/services/loopgate/unlockable/findAllUnlockables.ts
+++ b/src/services/loopgate/unlockable/findAllUnlockables.ts
@@ -11,9 +11,9 @@ export const findAllUnlockables = (
 
   if (owner) {
     return unlockablesArray.filter(
-      (unlockable) => unlockable.owner === owner && !unlockable.unlisted
+      unlockable => unlockable.owner === owner && !unlockable.unlisted
     );
   }
 
-  return unlockablesArray.filter((unlockable) => !unlockable.unlisted);
+  return unlockablesArray.filter(unlockable => !unlockable.unlisted);
 };
diff --git a/src/services/loopgate/unlockable/findUnlockableByUuid.ts b/src/services/loopgate/unlockable/findUnlockableByUuid.ts
index 050bd8df9..7df1dbb4e 100644
--- a/src/services/loopgate/unlockable/findUnlockableByUuid.ts
+++ b/src/services/loopgate/unlockable/findUnlockableByUuid.ts
@@ -9,5 +9,5 @@ export const findUnlockableByUuid = (
     throw new ConfigError("Empty config file");
   }
 
-  return unlockablesArray.filter((item) => item.id === uuid)[0];
+  return unlockablesArray.filter(item => item.id === uuid)[0];
 };
diff --git a/src/services/loopgate/unlockable/findUnlockedCids.ts b/src/services/loopgate/unlockable/findUnlockedCids.ts
index c40e3bc3b..c4cb30080 100644
--- a/src/services/loopgate/unlockable/findUnlockedCids.ts
+++ b/src/services/loopgate/unlockable/findUnlockedCids.ts
@@ -18,12 +18,12 @@ export const findUnlockedCids = (
   }
 
   // For each row in the config, check if the user holds all NFTs necessary to unlock them.
-  const unlocks = unlockablesArray.filter((item) =>
+  const unlocks = unlockablesArray.filter(item =>
     checkIfContainsAll(item.nftId, nfts)
   );
 
   // We're only interested in the CIDs
-  const cids = unlocks.map((item) => item.cid);
+  const cids = unlocks.map(item => item.cid);
 
   return cids;
 };
diff --git a/src/services/loopring/helpers/extractNfts.ts b/src/services/loopring/helpers/extractNfts.ts
index ffedc5c81..0c27b6979 100644
--- a/src/services/loopring/helpers/extractNfts.ts
+++ b/src/services/loopring/helpers/extractNfts.ts
@@ -3,7 +3,7 @@ import { NftBalanceResponse } from "./_types";
 // Parses a Loopring API response to extract the NFT IDs
 export const extractNfts = (apiRes: NftBalanceResponse) => {
   const nfts: string[] = [];
-  apiRes.data.forEach((item) => {
+  apiRes.data.forEach(item => {
     nfts.push(item.nftId);
   });
 
diff --git a/src/services/loopring/requests/getAllUserNftIds.ts b/src/services/loopring/requests/getAllUserNftIds.ts
index 4fbfa8143..8609a2772 100644
--- a/src/services/loopring/requests/getAllUserNftIds.ts
+++ b/src/services/loopring/requests/getAllUserNftIds.ts
@@ -31,7 +31,7 @@ export const getAllUserNftIds = async (accountId: string | string[]) => {
 
   // Call the API for all of these ^
   const followUpReqs = await Promise.all(
-    amountOfCalls.map(async (index) => {
+    amountOfCalls.map(async index => {
       const followUpResponse: AxiosNftBalanceResponse =
         await rateLimitedAxios.get(
           `${LOOP_API_URL}/user/nft/balances?accountId=${accountId}&limit=${LIMIT}&offset=${
@@ -46,7 +46,7 @@ export const getAllUserNftIds = async (accountId: string | string[]) => {
 
   // Parse the API response, merge with the first API Call and flatten the array
   const nftApiResFlattened = followUpReqs
-    .map((item) => item.data.data)
+    .map(item => item.data.data)
     .concat(firstReq.data.data)
     .flat();
 
diff --git a/src/services/loopring/requests/getNftHolders.ts b/src/services/loopring/requests/getNftHolders.ts
index a18bdb9e9..1f03c1d1d 100644
--- a/src/services/loopring/requests/getNftHolders.ts
+++ b/src/services/loopring/requests/getNftHolders.ts
@@ -30,7 +30,7 @@ export const getNftHolders = async (nftData: string) => {
 
     // Call the API for all of these ^
     const followUpReqs = await Promise.all(
-      amountOfCalls.map(async (index) => {
+      amountOfCalls.map(async index => {
         return await rateLimitedAxios.get(
           `${LOOP_API_URL}/nft/info/nftHolders?nftData=${nftData}&limit=${LIMIT}&offset=${
             LIMIT * index
@@ -42,7 +42,7 @@ export const getNftHolders = async (nftData: string) => {
 
     // Parse the API response, merge with the first API Call and flatten the array
     const nftApiResFlattened = followUpReqs
-      .map((item) => item.data)
+      .map(item => item.data)
       .concat(firstReq.data.nftHolders)
       .flat();
 
diff --git a/src/services/pinata/checkPinataFolderForHtml.ts b/src/services/pinata/checkPinataFolderForHtml.ts
index 6833a9085..c65570201 100644
--- a/src/services/pinata/checkPinataFolderForHtml.ts
+++ b/src/services/pinata/checkPinataFolderForHtml.ts
@@ -3,7 +3,7 @@ import { PinataFolderRes, PinataFolderItem } from "./_types";
 const checkPinataFolderForHtml = (pinataFolder: PinataFolderRes) => {
   if (pinataFolder.hasIndexHtml) {
     // Content has a file named 'index.html'. It's fairly safe to assume that we want to use this file.
-    const htmlIndex = pinataFolder.childContent.filter((item) =>
+    const htmlIndex = pinataFolder.childContent.filter(item =>
       item.uri.endsWith("index.html")
     );
 
diff --git a/src/services/supabase/types.ts b/src/services/supabase/types.ts
index 420a678e8..e785367ba 100644
--- a/src/services/supabase/types.ts
+++ b/src/services/supabase/types.ts
@@ -4,147 +4,147 @@ export type Json =
   | boolean
   | null
   | { [key: string]: Json }
-  | Json[]
+  | Json[];
 
 export interface Database {
   public: {
     Tables: {
       calcium_crew_holders: {
         Row: {
-          amount: number
-          cc_ids: string[]
-          created_at: string
-          eth_address: string
-          id: number
-        }
+          amount: number;
+          cc_ids: string[];
+          created_at: string;
+          eth_address: string;
+          id: number;
+        };
         Insert: {
-          amount: number
-          cc_ids: string[]
-          created_at?: string
-          eth_address: string
-          id?: number
-        }
+          amount: number;
+          cc_ids: string[];
+          created_at?: string;
+          eth_address: string;
+          id?: number;
+        };
         Update: {
-          amount?: number
-          cc_ids?: string[]
-          created_at?: string
-          eth_address?: string
-          id?: number
-        }
-      }
+          amount?: number;
+          cc_ids?: string[];
+          created_at?: string;
+          eth_address?: string;
+          id?: number;
+        };
+      };
       content_types: {
         Row: {
-          content_id: number
-          content_name: string
-        }
+          content_id: number;
+          content_name: string;
+        };
         Insert: {
-          content_id?: number
-          content_name: string
-        }
+          content_id?: number;
+          content_name: string;
+        };
         Update: {
-          content_id?: number
-          content_name?: string
-        }
-      }
+          content_id?: number;
+          content_name?: string;
+        };
+      };
       unlock_criteria: {
         Row: {
-          id: number
-          nft_id: string
-          owner: string
-          unlockable_id: string
-          updated_at: string | null
-        }
+          id: number;
+          nft_id: string;
+          owner: string;
+          unlockable_id: string;
+          updated_at: string | null;
+        };
         Insert: {
-          id?: number
-          nft_id: string
-          owner: string
-          unlockable_id: string
-          updated_at?: string | null
-        }
+          id?: number;
+          nft_id: string;
+          owner: string;
+          unlockable_id: string;
+          updated_at?: string | null;
+        };
         Update: {
-          id?: number
-          nft_id?: string
-          owner?: string
-          unlockable_id?: string
-          updated_at?: string | null
-        }
-      }
+          id?: number;
+          nft_id?: string;
+          owner?: string;
+          unlockable_id?: string;
+          updated_at?: string | null;
+        };
+      };
       unlockables: {
         Row: {
-          content_type_id: number
-          content_url: string
-          created_at: string
-          criteria_unlock_amount: number
-          description: string | null
-          id: string
-          name: string | null
-          owner: string
-          unlisted: boolean
-          updated_at: string | null
-        }
+          content_type_id: number;
+          content_url: string;
+          created_at: string;
+          criteria_unlock_amount: number;
+          description: string | null;
+          id: string;
+          name: string | null;
+          owner: string;
+          unlisted: boolean;
+          updated_at: string | null;
+        };
         Insert: {
-          content_type_id: number
-          content_url: string
-          created_at?: string
-          criteria_unlock_amount: number
-          description?: string | null
-          id?: string
-          name?: string | null
-          owner: string
-          unlisted?: boolean
-          updated_at?: string | null
-        }
+          content_type_id: number;
+          content_url: string;
+          created_at?: string;
+          criteria_unlock_amount: number;
+          description?: string | null;
+          id?: string;
+          name?: string | null;
+          owner: string;
+          unlisted?: boolean;
+          updated_at?: string | null;
+        };
         Update: {
-          content_type_id?: number
-          content_url?: string
-          created_at?: string
-          criteria_unlock_amount?: number
-          description?: string | null
-          id?: string
-          name?: string | null
-          owner?: string
-          unlisted?: boolean
-          updated_at?: string | null
-        }
-      }
-    }
+          content_type_id?: number;
+          content_url?: string;
+          created_at?: string;
+          criteria_unlock_amount?: number;
+          description?: string | null;
+          id?: string;
+          name?: string | null;
+          owner?: string;
+          unlisted?: boolean;
+          updated_at?: string | null;
+        };
+      };
+    };
     Views: {
       unlockables_with_criteria: {
         Row: {
-          content_url: string | null
-          created_at: string | null
-          criteria_unlock_amount: number | null
-          description: string | null
-          id: string | null
-          name: string | null
-          nft_ids: string | null
-          owner: string | null
-          unlisted: boolean | null
-          updated_at: string | null
-        }
-      }
+          content_url: string | null;
+          created_at: string | null;
+          criteria_unlock_amount: number | null;
+          description: string | null;
+          id: string | null;
+          name: string | null;
+          nft_ids: string | null;
+          owner: string | null;
+          unlisted: boolean | null;
+          updated_at: string | null;
+        };
+      };
       unlockables_with_criteria_backup: {
         Row: {
-          content_url: string | null
-          criteria_unlock_amount: number | null
-          description: string | null
-          id: string | null
-          name: string | null
-          nft_ids: string | null
-          owner: string | null
-          unlisted: boolean | null
-          updated_at: string | null
-        }
-      }
-    }
+          content_url: string | null;
+          criteria_unlock_amount: number | null;
+          description: string | null;
+          id: string | null;
+          name: string | null;
+          nft_ids: string | null;
+          owner: string | null;
+          unlisted: boolean | null;
+          updated_at: string | null;
+        };
+      };
+    };
     Functions: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Enums: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
+      [_ in never]: never;
+    };
+  };
 }
diff --git a/src/utils/generic/checkIfContainsAll.ts b/src/utils/generic/checkIfContainsAll.ts
index bbc9afe3a..df23d0495 100644
--- a/src/utils/generic/checkIfContainsAll.ts
+++ b/src/utils/generic/checkIfContainsAll.ts
@@ -10,5 +10,5 @@ export const checkIfContainsAll = (config: string[], target: string[]) => {
   if (config.length === 0) {
     throw new ConfigError("Empty config file");
   }
-  return config.every((x) => target.includes(x));
+  return config.every(x => target.includes(x));
 };
diff --git a/src/utils/logger/logger.ts b/src/utils/logger/logger.ts
index dd14f2d6e..abe833dfc 100644
--- a/src/utils/logger/logger.ts
+++ b/src/utils/logger/logger.ts
@@ -7,7 +7,7 @@ const pinoCredentials = {
 };
 
 const checkCredentials = (credentials: string[]): boolean =>
-  credentials.every((x) => typeof x !== "undefined");
+  credentials.every(x => typeof x !== "undefined");
 
 const credentialsDefined = checkCredentials([
   pinoCredentials.apiKey,

From 9d7d15e1bd265a0ba301ad6ca006ae4b1a07f71c Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sat, 27 May 2023 14:17:03 +0200
Subject: [PATCH 15/18] ESLint: consistent imports

---
 .eslintrc.json                                   |  9 +++------
 src/components/Footer/Footer.tsx                 |  4 ++--
 src/components/Header/Header.tsx                 |  3 ++-
 .../Pages/Home/ContentBlocks/Block.tsx           |  1 +
 .../Pages/Home/ContentBlocks/ContentBlocks.tsx   | 13 +++++++------
 .../Pages/Home/ContentBlocks/LogoMarquee.tsx     |  2 +-
 .../Home/ContentBlocks/UnlockablesBlock.tsx      |  4 +++-
 .../Pages/Home/ContentBlocks/UnlockablesItem.tsx |  3 ++-
 src/components/Pages/Home/Hero/Hero.tsx          |  3 ++-
 .../Pages/Home/UseCases/MarqueeRow.tsx           |  3 ++-
 src/components/Pages/Home/UseCases/UseCases.tsx  |  8 +++++---
 src/components/UI/Accordion.tsx                  |  4 ++--
 src/components/UI/Checkbox.tsx                   |  4 ++--
 src/components/UI/Label.tsx                      |  2 +-
 src/components/UI/RadioGroup.tsx                 |  2 +-
 src/components/UI/ScrollArea.tsx                 |  2 +-
 src/components/UI/Select.tsx                     |  4 ++--
 src/components/UI/Slider.tsx                     |  2 +-
 src/components/UI/Switch.tsx                     |  2 +-
 src/components/UI/Tabs.tsx                       |  2 +-
 src/components/UI/Tooltip.tsx                    |  2 +-
 src/components/UnlockablePage/404.tsx            |  3 ++-
 src/components/UnlockablePage/Layout.tsx         |  6 ++++--
 src/components/UnlockablePage/List/List.tsx      |  3 ++-
 src/components/UnlockablePage/List/ListItem.tsx  |  3 ++-
 .../UnlockablePage/UnlockCard/Metadata.tsx       |  5 +++--
 .../UnlockablePage/UnlockCard/ShinyLogo.tsx      |  3 ++-
 .../UnlockablePage/UnlockCard/UnlockCard.tsx     |  8 +++++---
 .../UnlockablePage/UnlockCard/UnlockSection.tsx  | 14 ++++++++------
 src/hooks/useBoop.ts                             |  5 +++--
 src/hooks/usePrefersReducedMotion.ts             |  2 +-
 src/middleware/checkAuthentication.ts            |  3 ++-
 src/middleware/error/handleError.ts              |  4 +++-
 src/middleware/siwe/configure.tsx                |  4 ++--
 src/pages/_app.tsx                               | 13 +++++++------
 src/pages/_document.tsx                          |  2 +-
 src/pages/api/helpers/generate-uuid.ts           |  2 +-
 src/pages/api/helpers/sample-unlockable.ts       |  3 ++-
 src/pages/api/nft/get-holders-nft-id.ts          |  3 ++-
 src/pages/api/nft/get-holders-nftdata.ts         |  3 ++-
 src/pages/api/nft/get-nft-data.ts                |  3 ++-
 src/pages/api/nft/get-user-nfts.ts               |  4 +++-
 src/pages/api/session/me.ts                      |  3 ++-
 src/pages/api/unlockable/create.ts               |  5 +++--
 src/pages/api/unlockable/delete.ts               |  7 ++++---
 src/pages/api/unlockable/update.ts               |  5 +++--
 src/pages/api/unlockable/verify-access.ts        |  9 +++++----
 src/pages/api/upload/submarine.ts                |  7 ++++---
 src/pages/index.tsx                              | 16 ++++++++--------
 src/pages/unlocks/[uuid].tsx                     | 13 +++++++------
 src/pages/unlocks/browse.tsx                     | 15 ++++++++-------
 src/pages/upload/form.tsx                        |  9 +++++----
 .../loopgate/unlockable/findAllUnlockables.ts    |  2 +-
 .../unlockable/findUnlockableByUuid.test.ts      |  2 +-
 .../loopgate/unlockable/findUnlockableByUuid.ts  |  2 +-
 .../loopgate/unlockable/findUnlockedCids.test.ts |  2 +-
 .../loopgate/unlockable/findUnlockedCids.ts      |  5 +++--
 src/services/loopring/helpers/_types.ts          |  2 +-
 .../loopring/requests/getAllUserNftIds.ts        |  3 ++-
 .../loopring/requests/getMinterAndToken.ts       |  4 +++-
 src/services/loopring/requests/getNftData.ts     |  6 ++++--
 src/services/loopring/requests/getNftHolders.ts  |  6 ++++--
 .../loopring/requests/getUserAddress.test.ts     |  3 ++-
 src/services/loopring/requests/getUserAddress.ts |  4 +++-
 src/services/pinata/checkPinataFolderForHtml.ts  |  2 +-
 src/services/pinata/getPinataIndexLink.ts        |  4 ++--
 src/services/pinata/index.ts                     |  8 ++++----
 src/services/supabase/helpers/mapUnlockable.ts   |  1 +
 src/services/supabase/index.ts                   |  2 +-
 src/services/supabase/supabase.ts                |  1 +
 src/services/wagmi/wagmi.ts                      |  5 ++---
 src/utils/generic/checkIfContainsAll.test.ts     |  2 +-
 72 files changed, 190 insertions(+), 140 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 9ee067de3..e51554aed 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,8 +1,5 @@
 {
-  "plugins": [
-    "@typescript-eslint"
-    //  "simple-import-sort"
-  ],
+  "plugins": ["@typescript-eslint", "simple-import-sort"],
   "extends": [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
@@ -10,7 +7,7 @@
   ],
   "rules": {
     "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/no-explicit-any": "error"
-    // "simple-import-sort/imports": "error"
+    "@typescript-eslint/no-explicit-any": "error",
+    "simple-import-sort/imports": "error"
   }
 }
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 1493978fb..ab8a9cc99 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,6 +1,6 @@
-import FooterLink from "./FooterLink";
-import { TwitterIcon, GithubIcon } from "../Icons/Icons";
 import { getCurrentYear } from "../../utils/generic";
+import { GithubIcon, TwitterIcon } from "../Icons/Icons";
+import FooterLink from "./FooterLink";
 
 const Footer = () => {
   const currentYear = getCurrentYear();
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 546eb9200..76f591190 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,8 +1,9 @@
 import { ConnectKitButton } from "connectkit";
 import Image from "next/image";
-import LogoSrc from "@/public/images/logo/logo.svg";
 import Link from "next/link";
 
+import LogoSrc from "@/public/images/logo/logo.svg";
+
 const Header = () => {
   return (
     <div className="w-full flex py-3 px-4 sm:px-6 sticky top-0 items-center justify-between border-b sm:border-b-0 border-white/10 bg-slate-900/50 backdrop-blur-lg md:bg-transparent md:backdrop-blur-0 z-10">
diff --git a/src/components/Pages/Home/ContentBlocks/Block.tsx b/src/components/Pages/Home/ContentBlocks/Block.tsx
index 491c64518..be90c5592 100644
--- a/src/components/Pages/Home/ContentBlocks/Block.tsx
+++ b/src/components/Pages/Home/ContentBlocks/Block.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+
 import { cn } from "@/src/utils/generic";
 
 export enum ColourModes {
diff --git a/src/components/Pages/Home/ContentBlocks/ContentBlocks.tsx b/src/components/Pages/Home/ContentBlocks/ContentBlocks.tsx
index 5b61347db..7ad0d37b7 100644
--- a/src/components/Pages/Home/ContentBlocks/ContentBlocks.tsx
+++ b/src/components/Pages/Home/ContentBlocks/ContentBlocks.tsx
@@ -1,17 +1,18 @@
-import { UnlockableV2 } from "@/src/config/types";
-import { ColourModes } from "./Block";
 import {
-  SparklesIcon,
-  ShieldCheckIcon,
-  RocketLaunchIcon,
   CodeBracketIcon,
   DocumentTextIcon,
+  RocketLaunchIcon,
+  ShieldCheckIcon,
+  SparklesIcon,
 } from "@heroicons/react/24/outline";
 
+import { UnlockableV2 } from "@/src/config/types";
+
+import { ColourModes } from "./Block";
 import Block from "./Block";
 import CtaBtn from "./BrowseAllBtn";
-import LogoMarquee from "./LogoMarquee";
 import Links from "./Links";
+import LogoMarquee from "./LogoMarquee";
 import UnlockablesBlock from "./UnlockablesBlock";
 
 type Props = {
diff --git a/src/components/Pages/Home/ContentBlocks/LogoMarquee.tsx b/src/components/Pages/Home/ContentBlocks/LogoMarquee.tsx
index 76d312a4b..cf8a2fe97 100644
--- a/src/components/Pages/Home/ContentBlocks/LogoMarquee.tsx
+++ b/src/components/Pages/Home/ContentBlocks/LogoMarquee.tsx
@@ -1,5 +1,5 @@
-import RFMarquee from "react-fast-marquee";
 import Image from "next/image";
+import RFMarquee from "react-fast-marquee";
 
 interface Logo {
   src: string;
diff --git a/src/components/Pages/Home/ContentBlocks/UnlockablesBlock.tsx b/src/components/Pages/Home/ContentBlocks/UnlockablesBlock.tsx
index 48618aa9b..6b83b2a26 100644
--- a/src/components/Pages/Home/ContentBlocks/UnlockablesBlock.tsx
+++ b/src/components/Pages/Home/ContentBlocks/UnlockablesBlock.tsx
@@ -1,9 +1,11 @@
-import { UnlockableV2 } from "@/src/config/types";
 import {
   ArrowLongRightIcon,
   FolderOpenIcon,
 } from "@heroicons/react/24/outline";
 import Link from "next/link";
+
+import { UnlockableV2 } from "@/src/config/types";
+
 import UnlockablesItem from "./UnlockablesItem";
 
 type Props = {
diff --git a/src/components/Pages/Home/ContentBlocks/UnlockablesItem.tsx b/src/components/Pages/Home/ContentBlocks/UnlockablesItem.tsx
index a30116f48..bf1e26080 100644
--- a/src/components/Pages/Home/ContentBlocks/UnlockablesItem.tsx
+++ b/src/components/Pages/Home/ContentBlocks/UnlockablesItem.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
-import { UnlockableV2 } from "@/src/config/types";
 import Jazzicon from "react-jazzicon";
+
+import { UnlockableV2 } from "@/src/config/types";
 import { uuidToNumber } from "@/src/utils/generic";
 
 type Props = {
diff --git a/src/components/Pages/Home/Hero/Hero.tsx b/src/components/Pages/Home/Hero/Hero.tsx
index e8f1e6d77..167c3da38 100644
--- a/src/components/Pages/Home/Hero/Hero.tsx
+++ b/src/components/Pages/Home/Hero/Hero.tsx
@@ -1,6 +1,7 @@
+import { ArrowLongDownIcon } from "@heroicons/react/24/outline";
+
 import HeroGlow from "./HeroGlow";
 import HeroImage from "./HeroImage";
-import { ArrowLongDownIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   title: string;
diff --git a/src/components/Pages/Home/UseCases/MarqueeRow.tsx b/src/components/Pages/Home/UseCases/MarqueeRow.tsx
index d5ff61a92..c6138cd4d 100644
--- a/src/components/Pages/Home/UseCases/MarqueeRow.tsx
+++ b/src/components/Pages/Home/UseCases/MarqueeRow.tsx
@@ -1,6 +1,7 @@
-import { Content, Direction } from "./types";
 import Marquee from "react-fast-marquee";
+
 import ContentItem from "./ContentItem";
+import { Content, Direction } from "./types";
 
 type Props = {
   content: Content[];
diff --git a/src/components/Pages/Home/UseCases/UseCases.tsx b/src/components/Pages/Home/UseCases/UseCases.tsx
index 372d49ec0..98b11c6be 100644
--- a/src/components/Pages/Home/UseCases/UseCases.tsx
+++ b/src/components/Pages/Home/UseCases/UseCases.tsx
@@ -1,10 +1,12 @@
-import { useState } from "react";
 import { ArrowLongRightIcon } from "@heroicons/react/24/outline";
-import MarqueeRow from "./MarqueeRow";
-import { UseCase, IconNames, Direction } from "./types";
+import { useState } from "react";
 import { animated } from "react-spring";
+
 import useBoop from "@/src/hooks/useBoop";
 
+import MarqueeRow from "./MarqueeRow";
+import { Direction, IconNames, UseCase } from "./types";
+
 const data: UseCase[] = [
   {
     audience: "Musicians",
diff --git a/src/components/UI/Accordion.tsx b/src/components/UI/Accordion.tsx
index ee202d80c..2ca799860 100644
--- a/src/components/UI/Accordion.tsx
+++ b/src/components/UI/Accordion.tsx
@@ -1,9 +1,9 @@
 // Reference:  https://ui.shadcn.com/docs/primitives/accordion
 "use client";
 
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@heroicons/react/24/solid";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UI/Checkbox.tsx b/src/components/UI/Checkbox.tsx
index 0a686d04a..ca15b2257 100644
--- a/src/components/UI/Checkbox.tsx
+++ b/src/components/UI/Checkbox.tsx
@@ -2,9 +2,9 @@
 
 "use client";
 
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "@heroicons/react/24/solid";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UI/Label.tsx b/src/components/UI/Label.tsx
index a39601c46..7cf9bd7b0 100644
--- a/src/components/UI/Label.tsx
+++ b/src/components/UI/Label.tsx
@@ -2,8 +2,8 @@
 
 "use client";
 
-import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UI/RadioGroup.tsx b/src/components/UI/RadioGroup.tsx
index 02b25bf5a..fa539150d 100644
--- a/src/components/UI/RadioGroup.tsx
+++ b/src/components/UI/RadioGroup.tsx
@@ -1,8 +1,8 @@
 // Reference: https://ui.shadcn.com/docs/primitives/radio-group
 "use client";
 
-import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UI/ScrollArea.tsx b/src/components/UI/ScrollArea.tsx
index 94706ca64..c5074bea4 100644
--- a/src/components/UI/ScrollArea.tsx
+++ b/src/components/UI/ScrollArea.tsx
@@ -1,8 +1,8 @@
 // Reference: https://ui.shadcn.com/docs/primitives/scroll-area
 "use client";
 
-import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UI/Select.tsx b/src/components/UI/Select.tsx
index 4c54a9bbc..b3df2b461 100644
--- a/src/components/UI/Select.tsx
+++ b/src/components/UI/Select.tsx
@@ -1,9 +1,9 @@
 // Reference: https://ui.shadcn.com/docs/primitives/select
 "use client";
 
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UI/Slider.tsx b/src/components/UI/Slider.tsx
index 671bfa719..83dd56583 100644
--- a/src/components/UI/Slider.tsx
+++ b/src/components/UI/Slider.tsx
@@ -1,8 +1,8 @@
 // Reference: https://ui.shadcn.com/docs/primitives/slider
 "use client";
 
-import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UI/Switch.tsx b/src/components/UI/Switch.tsx
index 9374f09c2..af0be7901 100644
--- a/src/components/UI/Switch.tsx
+++ b/src/components/UI/Switch.tsx
@@ -1,8 +1,8 @@
 // Reference: https://ui.shadcn.com/docs/primitives/switch
 "use client";
 
-import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UI/Tabs.tsx b/src/components/UI/Tabs.tsx
index ef7b375c2..a135cbb27 100644
--- a/src/components/UI/Tabs.tsx
+++ b/src/components/UI/Tabs.tsx
@@ -2,8 +2,8 @@
 
 "use client";
 
-import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UI/Tooltip.tsx b/src/components/UI/Tooltip.tsx
index 601c37818..6455461bc 100644
--- a/src/components/UI/Tooltip.tsx
+++ b/src/components/UI/Tooltip.tsx
@@ -2,8 +2,8 @@
 
 "use client";
 
-import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
diff --git a/src/components/UnlockablePage/404.tsx b/src/components/UnlockablePage/404.tsx
index 87973c25a..4de6b0e6c 100644
--- a/src/components/UnlockablePage/404.tsx
+++ b/src/components/UnlockablePage/404.tsx
@@ -1,6 +1,7 @@
-import Layout from "./Layout";
 import Link from "next/link";
 
+import Layout from "./Layout";
+
 type Props = {
   label?: string;
 };
diff --git a/src/components/UnlockablePage/Layout.tsx b/src/components/UnlockablePage/Layout.tsx
index e3c894241..483441813 100644
--- a/src/components/UnlockablePage/Layout.tsx
+++ b/src/components/UnlockablePage/Layout.tsx
@@ -1,9 +1,11 @@
-import Header from "../Header";
-import Footer from "../Footer";
 import { ReactNode } from "react";
+
 import { techPattern } from "@/src/styles/inlineStyles";
 import { cn } from "@/src/utils/generic";
 
+import Footer from "../Footer";
+import Header from "../Header";
+
 type Props = {
   containerClass: string;
   children: ReactNode | ReactNode[];
diff --git a/src/components/UnlockablePage/List/List.tsx b/src/components/UnlockablePage/List/List.tsx
index 60ec92825..159cbce4e 100644
--- a/src/components/UnlockablePage/List/List.tsx
+++ b/src/components/UnlockablePage/List/List.tsx
@@ -1,6 +1,7 @@
-import ListItem from "./ListItem";
 import { UnlockableV2 } from "@/src/config/types";
 
+import ListItem from "./ListItem";
+
 type Props = {
   unlockables: UnlockableV2[];
 };
diff --git a/src/components/UnlockablePage/List/ListItem.tsx b/src/components/UnlockablePage/List/ListItem.tsx
index f50435c42..59411c6e0 100644
--- a/src/components/UnlockablePage/List/ListItem.tsx
+++ b/src/components/UnlockablePage/List/ListItem.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
-import { UnlockableV2 } from "@/src/config/types";
 import Jazzicon from "react-jazzicon";
+
+import { UnlockableV2 } from "@/src/config/types";
 import { uuidToNumber } from "@/src/utils/generic";
 
 type Props = {
diff --git a/src/components/UnlockablePage/UnlockCard/Metadata.tsx b/src/components/UnlockablePage/UnlockCard/Metadata.tsx
index e40a5a125..d78a055d4 100644
--- a/src/components/UnlockablePage/UnlockCard/Metadata.tsx
+++ b/src/components/UnlockablePage/UnlockCard/Metadata.tsx
@@ -1,11 +1,12 @@
-import { UnlockCriteria } from "@/src/config/types";
-import { formatRelativeDate, truncate0x } from "@/src/utils/generic";
 import {
   ClockIcon,
   // LockClosedIcon,
   UserGroupIcon,
 } from "@heroicons/react/20/solid";
 
+import { UnlockCriteria } from "@/src/config/types";
+import { formatRelativeDate, truncate0x } from "@/src/utils/generic";
+
 type Props = {
   lastUpdated: string | Date;
   owner: `0x${string}`;
diff --git a/src/components/UnlockablePage/UnlockCard/ShinyLogo.tsx b/src/components/UnlockablePage/UnlockCard/ShinyLogo.tsx
index d19f8beb1..61c45b1c2 100644
--- a/src/components/UnlockablePage/UnlockCard/ShinyLogo.tsx
+++ b/src/components/UnlockablePage/UnlockCard/ShinyLogo.tsx
@@ -1,6 +1,7 @@
-import LoopGateLogo from "@/public/images/icon/icon.svg";
 import Image from "next/image";
 
+import LoopGateLogo from "@/public/images/icon/icon.svg";
+
 const Img = ({ className }: { className?: string }) => {
   return (
     <Image
diff --git a/src/components/UnlockablePage/UnlockCard/UnlockCard.tsx b/src/components/UnlockablePage/UnlockCard/UnlockCard.tsx
index 1546ae08d..f30ef180e 100644
--- a/src/components/UnlockablePage/UnlockCard/UnlockCard.tsx
+++ b/src/components/UnlockablePage/UnlockCard/UnlockCard.tsx
@@ -1,11 +1,13 @@
-import ShinyLogo from "./ShinyLogo";
 import { ConnectKitButton, useSIWE } from "connectkit";
 import { useAccount } from "wagmi";
-import SignInHint from "./SignInHint";
+
 import { UnlockableV2 } from "@/src/config/types";
+
+import Description from "./Description";
 import Metadata from "./Metadata";
+import ShinyLogo from "./ShinyLogo";
+import SignInHint from "./SignInHint";
 import Title from "./Title";
-import Description from "./Description";
 import UnlockSection from "./UnlockSection";
 
 type Props = {
diff --git a/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx b/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
index c72267126..d9079a332 100644
--- a/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
+++ b/src/components/UnlockablePage/UnlockCard/UnlockSection.tsx
@@ -1,13 +1,15 @@
-import { UnlockableV2 } from "@/src/config/types";
-import { useAccount } from "wagmi";
-import { useState, useEffect } from "react";
 import axios from "axios";
-import Spinner from "../../Spinner";
-import UnlockLink from "./UnlockLink";
-import NoAccess from "./NoAccess";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
+import { useAccount } from "wagmi";
+
+import { UnlockableV2 } from "@/src/config/types";
 import logger from "@/src/utils/logger";
 
+import Spinner from "../../Spinner";
+import NoAccess from "./NoAccess";
+import UnlockLink from "./UnlockLink";
+
 type Props = {
   unlockable: UnlockableV2;
 };
diff --git a/src/hooks/useBoop.ts b/src/hooks/useBoop.ts
index 564a2822a..2d33c09f4 100644
--- a/src/hooks/useBoop.ts
+++ b/src/hooks/useBoop.ts
@@ -1,5 +1,6 @@
-import { useState, useEffect, useCallback } from "react";
-import { useSpring, SpringConfig } from "react-spring";
+import { useCallback,useEffect, useState } from "react";
+import { SpringConfig,useSpring } from "react-spring";
+
 import usePrefersReducedMotion from "./usePrefersReducedMotion";
 
 interface BoopProps {
diff --git a/src/hooks/usePrefersReducedMotion.ts b/src/hooks/usePrefersReducedMotion.ts
index 38fb590a5..34c9a1239 100644
--- a/src/hooks/usePrefersReducedMotion.ts
+++ b/src/hooks/usePrefersReducedMotion.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect,useState } from "react";
 
 const QUERY = "(prefers-reduced-motion: no-preference)";
 const isRenderingOnServer = typeof window === "undefined";
diff --git a/src/middleware/checkAuthentication.ts b/src/middleware/checkAuthentication.ts
index 302c450ca..5757b54ae 100644
--- a/src/middleware/checkAuthentication.ts
+++ b/src/middleware/checkAuthentication.ts
@@ -1,8 +1,9 @@
 import { GetServerSidePropsContext } from "next";
+import { NextApiRequest, NextApiResponse } from "next";
+
 import { siwe } from "@/src/middleware/siwe";
 import Supabase from "@/src/services/supabase";
 import logger from "@/src/utils/logger";
-import { NextApiRequest, NextApiResponse } from "next";
 
 interface AuthSuccess {
   authenticated: true;
diff --git a/src/middleware/error/handleError.ts b/src/middleware/error/handleError.ts
index a3539f7f0..1866e343a 100644
--- a/src/middleware/error/handleError.ts
+++ b/src/middleware/error/handleError.ts
@@ -1,5 +1,7 @@
-import logger from "@/src/utils/logger";
 import { NextApiResponse } from "next";
+
+import logger from "@/src/utils/logger";
+
 import { Error } from "./loopgateError";
 
 export const handleError = (res: NextApiResponse, error: Error) => {
diff --git a/src/middleware/siwe/configure.tsx b/src/middleware/siwe/configure.tsx
index 01bbfdb68..7b03fdd80 100644
--- a/src/middleware/siwe/configure.tsx
+++ b/src/middleware/siwe/configure.tsx
@@ -1,10 +1,10 @@
-import { FunctionComponent, ComponentProps } from "react";
 import { SIWEProvider } from "connectkit";
+import { getDefaultProvider } from "ethers";
 import type { IncomingMessage, ServerResponse } from "http";
 import { getIronSession, IronSession, IronSessionOptions } from "iron-session";
 import { NextApiHandler, NextApiRequest, NextApiResponse } from "next";
+import { ComponentProps,FunctionComponent } from "react";
 import { generateNonce, SiweMessage } from "siwe";
-import { getDefaultProvider } from "ethers";
 
 type NextSIWEConfig = {
   apiRoutePrefix: string;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b16936ae5..ca1ea72c4 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,15 +1,16 @@
+import "../styles/globals.css";
+
+import { ConnectKitProvider } from "connectkit";
 import type { AppProps } from "next/app";
 import { useEffect, useState } from "react";
+import { Toaster } from "react-hot-toast";
 import { WagmiConfig } from "wagmi";
-import { ConnectKitProvider } from "connectkit";
 
-import "../styles/globals.css";
-import { WagmiClient } from "../services/wagmi";
+import { inter, unbounded } from "../components/Fonts";
+import NextHeadBase from "../components/SEO/NextHeadBase";
 import { siwe } from "../middleware/siwe";
+import { WagmiClient } from "../services/wagmi";
 import { overrides } from "../styles/ConnectKit/overrides";
-import NextHeadBase from "../components/SEO/NextHeadBase";
-import { inter, unbounded } from "../components/Fonts";
-import { Toaster } from "react-hot-toast";
 
 const App = ({ Component, pageProps }: AppProps) => {
   const [mounted, setMounted] = useState(false);
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index b6e8d410b..fe9e16205 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";
 
 const Document = () => {
   return (
diff --git a/src/pages/api/helpers/generate-uuid.ts b/src/pages/api/helpers/generate-uuid.ts
index 5d458a291..3cbca4216 100644
--- a/src/pages/api/helpers/generate-uuid.ts
+++ b/src/pages/api/helpers/generate-uuid.ts
@@ -1,5 +1,5 @@
-import { v4 as uuidv4 } from "uuid";
 import type { NextApiRequest, NextApiResponse } from "next";
+import { v4 as uuidv4 } from "uuid";
 
 export default async function handler(
   _req: NextApiRequest,
diff --git a/src/pages/api/helpers/sample-unlockable.ts b/src/pages/api/helpers/sample-unlockable.ts
index aac1ef954..19cc7ba66 100644
--- a/src/pages/api/helpers/sample-unlockable.ts
+++ b/src/pages/api/helpers/sample-unlockable.ts
@@ -1,5 +1,6 @@
-import { v4 as uuidv4 } from "uuid";
 import type { NextApiRequest, NextApiResponse } from "next";
+import { v4 as uuidv4 } from "uuid";
+
 import { UnlockableV2 } from "@/src/config/types";
 
 // This API Endpoint generates a sample UnlockableV2 object you can use for your `config.ts` file.
diff --git a/src/pages/api/nft/get-holders-nft-id.ts b/src/pages/api/nft/get-holders-nft-id.ts
index 93897c241..e3a1d6395 100644
--- a/src/pages/api/nft/get-holders-nft-id.ts
+++ b/src/pages/api/nft/get-holders-nft-id.ts
@@ -1,10 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+
+import { handleError, LoopgateError } from "@/src/middleware";
 import {
   getMinterAndToken,
   getNftData,
   getNftHolders,
 } from "@/src/services/loopring";
-import { handleError, LoopgateError } from "@/src/middleware";
 
 // Request holders for a NFT held on Loopring by querying NFT ID
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
diff --git a/src/pages/api/nft/get-holders-nftdata.ts b/src/pages/api/nft/get-holders-nftdata.ts
index 92c9fbf52..944ad642f 100644
--- a/src/pages/api/nft/get-holders-nftdata.ts
+++ b/src/pages/api/nft/get-holders-nftdata.ts
@@ -1,6 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getNftHolders } from "@/src/services/loopring/requests/getNftHolders";
+
 import { handleError, LoopgateError } from "@/src/middleware";
+import { getNftHolders } from "@/src/services/loopring/requests/getNftHolders";
 
 // Request NFTs on Loopring held by a user by querying NFT Data
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
diff --git a/src/pages/api/nft/get-nft-data.ts b/src/pages/api/nft/get-nft-data.ts
index 45c8bbf8f..d06bfb496 100644
--- a/src/pages/api/nft/get-nft-data.ts
+++ b/src/pages/api/nft/get-nft-data.ts
@@ -1,6 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getMinterAndToken, getNftData } from "@/src/services/loopring";
+
 import { handleError, LoopgateError } from "@/src/middleware";
+import { getMinterAndToken, getNftData } from "@/src/services/loopring";
 
 // Request NFTs Data for a Loopring NFT ID
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
diff --git a/src/pages/api/nft/get-user-nfts.ts b/src/pages/api/nft/get-user-nfts.ts
index 7ad130c8c..821afa596 100644
--- a/src/pages/api/nft/get-user-nfts.ts
+++ b/src/pages/api/nft/get-user-nfts.ts
@@ -1,7 +1,9 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getAllUserNftIds } from "../../../services/loopring";
+
 import { handleError, LoopgateError } from "@/src/middleware";
 
+import { getAllUserNftIds } from "../../../services/loopring";
+
 // Request NFTs on Loopring held by a user
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { accountId } = req.query;
diff --git a/src/pages/api/session/me.ts b/src/pages/api/session/me.ts
index 7970a4ee4..06c15486d 100644
--- a/src/pages/api/session/me.ts
+++ b/src/pages/api/session/me.ts
@@ -1,6 +1,7 @@
 import { NextApiRequest, NextApiResponse } from "next";
-import { siwe } from "@/src/middleware/siwe";
+
 import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
+import { siwe } from "@/src/middleware/siwe";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { method } = req;
diff --git a/src/pages/api/unlockable/create.ts b/src/pages/api/unlockable/create.ts
index a05de8d74..7c774e4c5 100644
--- a/src/pages/api/unlockable/create.ts
+++ b/src/pages/api/unlockable/create.ts
@@ -1,11 +1,12 @@
+import { createClient } from "@supabase/supabase-js";
 import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
+
 import {
   checkAuthentication,
   handleError,
   LoopgateError,
 } from "@/src/middleware";
-import { createClient } from "@supabase/supabase-js";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 import { Database } from "@/src/services/supabase/types";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
diff --git a/src/pages/api/unlockable/delete.ts b/src/pages/api/unlockable/delete.ts
index 828f793fc..bc4afff5f 100644
--- a/src/pages/api/unlockable/delete.ts
+++ b/src/pages/api/unlockable/delete.ts
@@ -1,13 +1,14 @@
+import { createClient } from "@supabase/supabase-js";
 import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
+
 import {
   checkAuthentication,
   handleError,
   LoopgateError,
 } from "@/src/middleware";
-import { createClient } from "@supabase/supabase-js";
-import { Database } from "@/src/services/supabase/types";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 import { Submarine } from "@/src/services/pinata";
+import { Database } from "@/src/services/supabase/types";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method !== "POST") {
diff --git a/src/pages/api/unlockable/update.ts b/src/pages/api/unlockable/update.ts
index 86d11b756..faf22145d 100644
--- a/src/pages/api/unlockable/update.ts
+++ b/src/pages/api/unlockable/update.ts
@@ -1,11 +1,12 @@
+import { createClient } from "@supabase/supabase-js";
 import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
+
 import {
   checkAuthentication,
   handleError,
   LoopgateError,
 } from "@/src/middleware";
-import { createClient } from "@supabase/supabase-js";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 import { Database } from "@/src/services/supabase/types";
 
 type UUID = string;
diff --git a/src/pages/api/unlockable/verify-access.ts b/src/pages/api/unlockable/verify-access.ts
index 999643948..91d8f4b82 100644
--- a/src/pages/api/unlockable/verify-access.ts
+++ b/src/pages/api/unlockable/verify-access.ts
@@ -1,13 +1,14 @@
 import { NextApiRequest, NextApiResponse } from "next";
-import { siwe } from "@/src/middleware/siwe";
-import { getUserAddress, getAllUserNftIds } from "@/src/services/loopring";
+
 import { handleError, LoopgateError } from "@/src/middleware";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
+import { siwe } from "@/src/middleware/siwe";
 import {
-  findUnlockableByUuid,
   fetchUnlockableByUuid,
+  findUnlockableByUuid,
 } from "@/src/services/loopgate/unlockable";
+import { getAllUserNftIds, getUserAddress } from "@/src/services/loopring";
 import { getPinataIndexLink } from "@/src/services/pinata";
-import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const query = req.query;
diff --git a/src/pages/api/upload/submarine.ts b/src/pages/api/upload/submarine.ts
index db2ff48fb..f020879e3 100644
--- a/src/pages/api/upload/submarine.ts
+++ b/src/pages/api/upload/submarine.ts
@@ -1,12 +1,13 @@
+import axios from "axios";
 import type { NextApiRequest, NextApiResponse } from "next";
-import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
+import { v4 as uuidv4 } from "uuid";
+
 import {
   checkAuthentication,
   handleError,
   LoopgateError,
 } from "@/src/middleware";
-import axios from "axios";
-import { v4 as uuidv4 } from "uuid";
+import { withSessionRoute } from "@/src/middleware/ironSession/withSession";
 
 export interface UploadResponse {
   data: {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 38b638762..fb7f7a43a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,16 +1,16 @@
 import { GetServerSideProps } from "next";
-import {
-  fetchAllUnlockables,
-  findAllUnlockables,
-} from "../services/loopgate/unlockable";
-import { UnlockableV2 } from "../config/types";
 
-import Header from "../components/Header";
 import Footer from "../components/Footer";
-import Hero from "../components/Pages/Home/Hero";
+import Header from "../components/Header";
 import ContentBlocks from "../components/Pages/Home/ContentBlocks";
-import UseCases from "../components/Pages/Home/UseCases";
 import CTABanner from "../components/Pages/Home/CTABanner";
+import Hero from "../components/Pages/Home/Hero";
+import UseCases from "../components/Pages/Home/UseCases";
+import { UnlockableV2 } from "../config/types";
+import {
+  fetchAllUnlockables,
+  findAllUnlockables,
+} from "../services/loopgate/unlockable";
 import { techPattern } from "../styles/inlineStyles";
 
 export const getServerSideProps: GetServerSideProps = async context => {
diff --git a/src/pages/unlocks/[uuid].tsx b/src/pages/unlocks/[uuid].tsx
index 22b5c8013..9a176dc45 100644
--- a/src/pages/unlocks/[uuid].tsx
+++ b/src/pages/unlocks/[uuid].tsx
@@ -1,14 +1,15 @@
+import { GetServerSideProps } from "next";
+
+import NextHeadBase from "@/src/components/SEO/NextHeadBase";
+import FourOhFour from "@/src/components/UnlockablePage/404";
+import Layout from "@/src/components/UnlockablePage/Layout";
+import UnlockCard from "@/src/components/UnlockablePage/UnlockCard/UnlockCard";
+import { UnlockableV2 } from "@/src/config/types";
 import {
   fetchUnlockableByUuid,
   findUnlockableByUuid,
 } from "@/src/services/loopgate/unlockable";
-import Layout from "@/src/components/UnlockablePage/Layout";
-import FourOhFour from "@/src/components/UnlockablePage/404";
-import UnlockCard from "@/src/components/UnlockablePage/UnlockCard/UnlockCard";
-import { GetServerSideProps } from "next";
-import { UnlockableV2 } from "@/src/config/types";
 import { isUuid } from "@/src/utils/generic";
-import NextHeadBase from "@/src/components/SEO/NextHeadBase";
 
 export const getServerSideProps: GetServerSideProps = async context => {
   context.res.setHeader(
diff --git a/src/pages/unlocks/browse.tsx b/src/pages/unlocks/browse.tsx
index 095ab0511..b58ff1928 100644
--- a/src/pages/unlocks/browse.tsx
+++ b/src/pages/unlocks/browse.tsx
@@ -1,13 +1,14 @@
-import { truncate0x } from "@/src/utils/generic";
+import { GetServerSideProps } from "next";
+
+import FourOhFour from "@/src/components/UnlockablePage/404";
+import Layout from "@/src/components/UnlockablePage/Layout";
+import List from "@/src/components/UnlockablePage/List";
+import { UnlockableV2 } from "@/src/config/types";
 import {
-  findAllUnlockables,
   fetchAllUnlockables,
+  findAllUnlockables,
 } from "@/src/services/loopgate/unlockable";
-import Layout from "@/src/components/UnlockablePage/Layout";
-import FourOhFour from "@/src/components/UnlockablePage/404";
-import { GetServerSideProps } from "next";
-import { UnlockableV2 } from "@/src/config/types";
-import List from "@/src/components/UnlockablePage/List";
+import { truncate0x } from "@/src/utils/generic";
 
 export const getServerSideProps: GetServerSideProps = async context => {
   context.res.setHeader(
diff --git a/src/pages/upload/form.tsx b/src/pages/upload/form.tsx
index c72235005..893dcd491 100644
--- a/src/pages/upload/form.tsx
+++ b/src/pages/upload/form.tsx
@@ -1,12 +1,13 @@
-import React, { useState, ChangeEvent, FormEvent } from "react";
 import axios from "axios";
-import { cn } from "@/src/utils/generic";
 import { GetServerSideProps } from "next";
+import React, { ChangeEvent, FormEvent,useState } from "react";
+import { toast } from "react-hot-toast";
+import { v4 as uuidv4 } from "uuid";
+
 import Spinner from "@/src/components/Spinner";
 import { checkAuthentication, redirectTo } from "@/src/middleware";
 import { UploadResponse } from "@/src/pages/api/upload/submarine";
-import { toast } from "react-hot-toast";
-import { v4 as uuidv4 } from "uuid";
+import { cn } from "@/src/utils/generic";
 
 interface FileUploadState {
   files: FileList | null;
diff --git a/src/services/loopgate/unlockable/findAllUnlockables.ts b/src/services/loopgate/unlockable/findAllUnlockables.ts
index cc91195b3..7f7fd5867 100644
--- a/src/services/loopgate/unlockable/findAllUnlockables.ts
+++ b/src/services/loopgate/unlockable/findAllUnlockables.ts
@@ -1,5 +1,5 @@
 import { unlockablesV2 } from "../../../config/config";
-import { UnlockableV2, ConfigError } from "../../../config/types";
+import { ConfigError,UnlockableV2 } from "../../../config/types";
 
 export const findAllUnlockables = (
   owner?: string,
diff --git a/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts b/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts
index a69e43cef..7d14dab77 100644
--- a/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts
+++ b/src/services/loopgate/unlockable/findUnlockableByUuid.test.ts
@@ -1,5 +1,5 @@
-import { findUnlockableByUuid } from "./findUnlockableByUuid";
 import { ConfigError } from "../../../config/types";
+import { findUnlockableByUuid } from "./findUnlockableByUuid";
 
 describe("find unlockables based on UUID", () => {
   it("should return one result if the user meets the criteria for it", () => {
diff --git a/src/services/loopgate/unlockable/findUnlockableByUuid.ts b/src/services/loopgate/unlockable/findUnlockableByUuid.ts
index 7df1dbb4e..4f99d6ffa 100644
--- a/src/services/loopgate/unlockable/findUnlockableByUuid.ts
+++ b/src/services/loopgate/unlockable/findUnlockableByUuid.ts
@@ -1,5 +1,5 @@
 import { unlockablesV2 } from "../../../config/config";
-import { UnlockableV2, ConfigError } from "../../../config/types";
+import { ConfigError,UnlockableV2 } from "../../../config/types";
 
 export const findUnlockableByUuid = (
   uuid: string,
diff --git a/src/services/loopgate/unlockable/findUnlockedCids.test.ts b/src/services/loopgate/unlockable/findUnlockedCids.test.ts
index 782317978..aea0640da 100644
--- a/src/services/loopgate/unlockable/findUnlockedCids.test.ts
+++ b/src/services/loopgate/unlockable/findUnlockedCids.test.ts
@@ -1,5 +1,5 @@
+import { ConfigError,Unlockable } from "../../../config/types";
 import { findUnlockedCids } from "./findUnlockedCids";
-import { Unlockable, ConfigError } from "../../../config/types";
 
 const mockUnlockables: Unlockable[] = [
   {
diff --git a/src/services/loopgate/unlockable/findUnlockedCids.ts b/src/services/loopgate/unlockable/findUnlockedCids.ts
index c4cb30080..8496b49c8 100644
--- a/src/services/loopgate/unlockable/findUnlockedCids.ts
+++ b/src/services/loopgate/unlockable/findUnlockedCids.ts
@@ -1,6 +1,7 @@
-import { unlockables } from "../../../config/config";
 import { checkIfContainsAll } from "@/src/utils/generic/checkIfContainsAll";
-import { Unlockable, ConfigError } from "../../../config/types";
+
+import { unlockables } from "../../../config/config";
+import { ConfigError,Unlockable } from "../../../config/types";
 
 // Compare NFTs owned by an individual to the configurated combinations to find unlockable content
 /**
diff --git a/src/services/loopring/helpers/_types.ts b/src/services/loopring/helpers/_types.ts
index 642b866c5..3f6ec4e8a 100644
--- a/src/services/loopring/helpers/_types.ts
+++ b/src/services/loopring/helpers/_types.ts
@@ -2,7 +2,7 @@
  * Generic Types ⬜️
  */
 export type UnixDate = number;
-export type HexString = `0x${string}`;
+export type HexString = `0x${string}` | string;
 
 /**
  * Loopring Primitives 🔥
diff --git a/src/services/loopring/requests/getAllUserNftIds.ts b/src/services/loopring/requests/getAllUserNftIds.ts
index 8609a2772..4eaf727b7 100644
--- a/src/services/loopring/requests/getAllUserNftIds.ts
+++ b/src/services/loopring/requests/getAllUserNftIds.ts
@@ -1,6 +1,7 @@
 import axios from "axios";
+
+import { extractNfts, headerOpts, rateLimitedAxios } from "../";
 import { LOOP_API_URL } from "../helpers/_constants";
-import { headerOpts, extractNfts, rateLimitedAxios } from "../";
 import { NftBalanceResponse } from "../helpers/_types";
 
 type AxiosNftBalanceResponse = { data: NftBalanceResponse };
diff --git a/src/services/loopring/requests/getMinterAndToken.ts b/src/services/loopring/requests/getMinterAndToken.ts
index 104232f7e..b83772e0f 100644
--- a/src/services/loopring/requests/getMinterAndToken.ts
+++ b/src/services/loopring/requests/getMinterAndToken.ts
@@ -1,7 +1,9 @@
 import axios from "axios";
-import { THE_GRAPH_URL } from "../helpers/_constants";
+
 import logger from "@/src/utils/logger";
 
+import { THE_GRAPH_URL } from "../helpers/_constants";
+
 // Queries Loopring TheGraph to find Minter and Token Address from NFT ID
 // Example input: `0x271d3a38c3572ab21225fbb7f97468051ca9c631f002bf2dde82aee9b8511ac0`
 // Example output: `minter: "0x94743548ba8d82a4ee8ea3dfad589ea501ad2738", tokenAddress: "0xc76eca2937b006606ebe717621409e4c2df906f1"`
diff --git a/src/services/loopring/requests/getNftData.ts b/src/services/loopring/requests/getNftData.ts
index 0bb3c41b6..62bd62251 100644
--- a/src/services/loopring/requests/getNftData.ts
+++ b/src/services/loopring/requests/getNftData.ts
@@ -1,8 +1,10 @@
+import axios from "axios";
+
+import logger from "@/src/utils/logger";
+
 import { LOOP_API_URL } from "../helpers/_constants";
 import { NftDataResponse } from "../helpers/_types";
-import axios from "axios";
 import { headerOpts } from "../helpers/headerOpts";
-import logger from "@/src/utils/logger";
 
 // Queries the Loopring API to find the NFT Datas
 // Example input: `minter: "0x94743548ba8d82a4ee8ea3dfad589ea501ad2738", tokenAddress: "0xc76eca2937b006606ebe717621409e4c2df906f1", nftId: 0x271d3a38c3572ab21225fbb7f97468051ca9c631f002bf2dde82aee9b8511ac0`
diff --git a/src/services/loopring/requests/getNftHolders.ts b/src/services/loopring/requests/getNftHolders.ts
index 1f03c1d1d..2b5925a77 100644
--- a/src/services/loopring/requests/getNftHolders.ts
+++ b/src/services/loopring/requests/getNftHolders.ts
@@ -1,8 +1,10 @@
-import { LOOP_API_URL } from "../helpers/_constants";
 import axios from "axios";
-import { headerOpts, rateLimitedAxios } from "../index";
+
 import logger from "@/src/utils/logger";
 
+import { LOOP_API_URL } from "../helpers/_constants";
+import { headerOpts, rateLimitedAxios } from "../index";
+
 export const getNftHolders = async (nftData: string) => {
   const LIMIT = 500; // API can handle up to 500 per call
 
diff --git a/src/services/loopring/requests/getUserAddress.test.ts b/src/services/loopring/requests/getUserAddress.test.ts
index 077fa157b..4d10b043e 100644
--- a/src/services/loopring/requests/getUserAddress.test.ts
+++ b/src/services/loopring/requests/getUserAddress.test.ts
@@ -1,6 +1,7 @@
-import { getUserAddress } from "./getUserAddress";
 import axios from "axios";
 
+import { getUserAddress } from "./getUserAddress";
+
 jest.mock("axios");
 const mockedAxios = axios as jest.Mocked<typeof axios>;
 
diff --git a/src/services/loopring/requests/getUserAddress.ts b/src/services/loopring/requests/getUserAddress.ts
index a07975177..07ff7fce8 100644
--- a/src/services/loopring/requests/getUserAddress.ts
+++ b/src/services/loopring/requests/getUserAddress.ts
@@ -1,6 +1,8 @@
-import { LOOP_API_URL } from "../helpers/_constants";
 import axios from "axios";
+
 import logger from "@/src/utils/logger";
+
+import { LOOP_API_URL } from "../helpers/_constants";
 import { AccountResponse } from "../helpers/_types";
 
 export const getUserAddress = async (address: string | string[]) => {
diff --git a/src/services/pinata/checkPinataFolderForHtml.ts b/src/services/pinata/checkPinataFolderForHtml.ts
index c65570201..979fa1533 100644
--- a/src/services/pinata/checkPinataFolderForHtml.ts
+++ b/src/services/pinata/checkPinataFolderForHtml.ts
@@ -1,4 +1,4 @@
-import { PinataFolderRes, PinataFolderItem } from "./_types";
+import { PinataFolderItem,PinataFolderRes } from "./_types";
 
 const checkPinataFolderForHtml = (pinataFolder: PinataFolderRes) => {
   if (pinataFolder.hasIndexHtml) {
diff --git a/src/services/pinata/getPinataIndexLink.ts b/src/services/pinata/getPinataIndexLink.ts
index 0f798b2df..60adb4e53 100644
--- a/src/services/pinata/getPinataIndexLink.ts
+++ b/src/services/pinata/getPinataIndexLink.ts
@@ -1,7 +1,7 @@
 import {
-  generateAccessLink,
-  formatAccessLink,
   checkPinataFolderForHtml,
+  formatAccessLink,
+  generateAccessLink,
   listFolderContent,
 } from "./index";
 
diff --git a/src/services/pinata/index.ts b/src/services/pinata/index.ts
index 33012e654..5dda222f8 100644
--- a/src/services/pinata/index.ts
+++ b/src/services/pinata/index.ts
@@ -1,9 +1,9 @@
-import Submarine from "./submarine";
-import generateAccessLink from "./generateAccessLink";
-import listFolderContent from "./listFolderContent";
 import checkPinataFolderForHtml from "./checkPinataFolderForHtml";
-import getPinataIndexLink from "./getPinataIndexLink";
 import formatAccessLink from "./formatAccessLink";
+import generateAccessLink from "./generateAccessLink";
+import getPinataIndexLink from "./getPinataIndexLink";
+import listFolderContent from "./listFolderContent";
+import Submarine from "./submarine";
 
 export {
   Submarine,
diff --git a/src/services/supabase/helpers/mapUnlockable.ts b/src/services/supabase/helpers/mapUnlockable.ts
index a8fd93987..b67e20a93 100644
--- a/src/services/supabase/helpers/mapUnlockable.ts
+++ b/src/services/supabase/helpers/mapUnlockable.ts
@@ -1,5 +1,6 @@
 import { UnlockableV2 } from "@/src/config/types";
 import { parseNftIdString } from "@/src/utils/generic";
+
 import { SupabaseUnlockable } from "../typeExtenstions";
 
 // Mapping function for Supabase Unlockable -> LoopGate Unlockable Type
diff --git a/src/services/supabase/index.ts b/src/services/supabase/index.ts
index 44be9b5a6..f33f2c066 100644
--- a/src/services/supabase/index.ts
+++ b/src/services/supabase/index.ts
@@ -1,5 +1,5 @@
-import Supabase from "./supabase";
 import * as helpers from "./helpers";
+import Supabase from "./supabase";
 
 export { helpers };
 export default Supabase;
diff --git a/src/services/supabase/supabase.ts b/src/services/supabase/supabase.ts
index 37dbd650f..edb8c8638 100644
--- a/src/services/supabase/supabase.ts
+++ b/src/services/supabase/supabase.ts
@@ -1,4 +1,5 @@
 import { createClient } from "@supabase/supabase-js";
+
 import { Database } from "./types";
 
 const Supabase = createClient<Database>(
diff --git a/src/services/wagmi/wagmi.ts b/src/services/wagmi/wagmi.ts
index c5f08c6de..5a941df4f 100644
--- a/src/services/wagmi/wagmi.ts
+++ b/src/services/wagmi/wagmi.ts
@@ -1,8 +1,7 @@
-import { createClient, configureChains, mainnet, goerli } from "wagmi";
-
+import { configureChains, createClient, goerli,mainnet } from "wagmi";
 import { InjectedConnector } from "wagmi/connectors/injected";
-import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
 import { MetaMaskConnector } from "wagmi/connectors/metaMask";
+import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
 import { publicProvider } from "wagmi/providers/public";
 
 const { provider, chains } = configureChains(
diff --git a/src/utils/generic/checkIfContainsAll.test.ts b/src/utils/generic/checkIfContainsAll.test.ts
index d5e8674f6..7c0f55921 100644
--- a/src/utils/generic/checkIfContainsAll.test.ts
+++ b/src/utils/generic/checkIfContainsAll.test.ts
@@ -1,5 +1,5 @@
-import { checkIfContainsAll } from "./checkIfContainsAll";
 import { ConfigError } from "../../config/types";
+import { checkIfContainsAll } from "./checkIfContainsAll";
 
 const mockConfig = ["0x1", "0x2", "0x3"];
 

From 6a3a8493ff389ce45051bb8e32988eee843a721b Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sat, 27 May 2023 14:33:01 +0200
Subject: [PATCH 16/18] Add ESLint for react hooks

---
 .eslintrc.json                       | 6 ++++--
 package-lock.json                    | 1 +
 package.json                         | 1 +
 src/components/Footer/Footer.tsx     | 2 +-
 src/components/Footer/FooterLink.tsx | 2 +-
 src/middleware/siwe/configure.tsx    | 2 +-
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index e51554aed..c0854f338 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "plugins": ["@typescript-eslint", "simple-import-sort"],
+  "plugins": ["@typescript-eslint", "simple-import-sort", "react-hooks"],
   "extends": [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
@@ -8,6 +8,8 @@
   "rules": {
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-explicit-any": "error",
-    "simple-import-sort/imports": "error"
+    "simple-import-sort/imports": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/rules-of-hooks": "error"
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 09516f9b6..32d145b1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,7 @@
         "eslint": "^8.15.0",
         "eslint-config-next": "^12.1.6",
         "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "jest": "^29.4.2",
         "jest-environment-jsdom": "^29.4.2",
diff --git a/package.json b/package.json
index c77185016..476e30022 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "eslint": "^8.15.0",
     "eslint-config-next": "^12.1.6",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "jest": "^29.4.2",
     "jest-environment-jsdom": "^29.4.2",
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index ab8a9cc99..54a3ed8af 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -12,7 +12,7 @@ const Footer = () => {
     <div className="py-4 px-8 w-full flex flex-col md:flex-row items-center justify-between space-y-1 md:space-y-0 mt-auto text-center">
       <p className="text-white/40">
         {currentYear},{" "}
-        <FooterLink href="https://twitter.com/0xgeel">geel.eth</FooterLink> — 
+        <FooterLink href="https://twitter.com/0xgeel">geel.eth</FooterLink> —
         Made for the L2 community.
       </p>
       <div className="space-x-4">
diff --git a/src/components/Footer/FooterLink.tsx b/src/components/Footer/FooterLink.tsx
index 70da0075e..120eadc20 100644
--- a/src/components/Footer/FooterLink.tsx
+++ b/src/components/Footer/FooterLink.tsx
@@ -1,6 +1,6 @@
 interface IFooterLink {
   href: string;
-  children: JSX.Element | JSX.Element[];
+  children: JSX.Element | JSX.Element[] | string;
 }
 
 const FooterLink = ({ href, children }: IFooterLink) => {
diff --git a/src/middleware/siwe/configure.tsx b/src/middleware/siwe/configure.tsx
index 7b03fdd80..5a1c394e6 100644
--- a/src/middleware/siwe/configure.tsx
+++ b/src/middleware/siwe/configure.tsx
@@ -3,7 +3,7 @@ import { getDefaultProvider } from "ethers";
 import type { IncomingMessage, ServerResponse } from "http";
 import { getIronSession, IronSession, IronSessionOptions } from "iron-session";
 import { NextApiHandler, NextApiRequest, NextApiResponse } from "next";
-import { ComponentProps,FunctionComponent } from "react";
+import { ComponentProps, FunctionComponent } from "react";
 import { generateNonce, SiweMessage } from "siwe";
 
 type NextSIWEConfig = {

From 4430d12da4bef68b07bd770195a360a77483a69a Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sat, 27 May 2023 14:33:01 +0200
Subject: [PATCH 17/18] Add ESLint for react hooks

---
 src/services/loopring/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/services/loopring/index.ts b/src/services/loopring/index.ts
index d0a28d8d0..c75e2e927 100644
--- a/src/services/loopring/index.ts
+++ b/src/services/loopring/index.ts
@@ -1,6 +1,5 @@
 // Requests
 export { getUserAddress } from "./requests/getUserAddress";
-export { getUserNfts } from "./requests/getUserNfts";
 export { getNftData } from "./requests/getNftData";
 export { getNftHolders } from "./requests/getNftHolders";
 export { getMinterAndToken } from "./requests/getMinterAndToken";

From 5ab122844aae44dd9b07902b614a768759503cba Mon Sep 17 00:00:00 2001
From: 0xGeel <gallus.septimius.cicero@gmail.com>
Date: Sat, 27 May 2023 16:25:43 +0200
Subject: [PATCH 18/18] Cleanup dependencies

---
 .eslintrc.json                                |   3 +
 package-lock.json                             | 463 ------------------
 package.json                                  |   9 -
 src/components/UI/Accordion.tsx               |  64 ---
 src/components/UI/Checkbox.tsx                |  32 --
 src/components/UI/Input.tsx                   |  24 -
 src/components/UI/Label.tsx                   |  25 -
 src/components/UI/RadioGroup.tsx              |  45 --
 src/components/UI/ScrollArea.tsx              |  49 --
 src/components/UI/Select.tsx                  | 114 -----
 src/components/UI/Slider.tsx                  |  30 --
 src/components/UI/Switch.tsx                  |  30 --
 src/components/UI/Tabs.tsx                    |  57 ---
 src/components/UI/Textarea.tsx                |  24 -
 src/components/UI/Tooltip.tsx                 |  74 +--
 .../UnlockablePage/UnlockCard/Metadata.tsx    |  28 +-
 src/pages/_app.tsx                            |  39 +-
 tailwind.config.js                            |  23 +
 18 files changed, 109 insertions(+), 1024 deletions(-)
 delete mode 100644 src/components/UI/Accordion.tsx
 delete mode 100644 src/components/UI/Checkbox.tsx
 delete mode 100644 src/components/UI/Input.tsx
 delete mode 100644 src/components/UI/Label.tsx
 delete mode 100644 src/components/UI/RadioGroup.tsx
 delete mode 100644 src/components/UI/ScrollArea.tsx
 delete mode 100644 src/components/UI/Select.tsx
 delete mode 100644 src/components/UI/Slider.tsx
 delete mode 100644 src/components/UI/Switch.tsx
 delete mode 100644 src/components/UI/Tabs.tsx
 delete mode 100644 src/components/UI/Textarea.tsx

diff --git a/.eslintrc.json b/.eslintrc.json
index c0854f338..9f6a0d9e2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,8 +1,11 @@
 {
+  "root": true,
+  "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint", "simple-import-sort", "react-hooks"],
   "extends": [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
     "prettier"
   ],
   "rules": {
diff --git a/package-lock.json b/package-lock.json
index 32d145b1b..0105dad4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,15 +12,6 @@
         "@heroicons/react": "^2.0.13",
         "@next/font": "^13.1.6",
         "@pinata/sdk": "^2.1.0",
-        "@radix-ui/react-accordion": "^1.1.0",
-        "@radix-ui/react-checkbox": "^1.0.1",
-        "@radix-ui/react-label": "^2.0.0",
-        "@radix-ui/react-radio-group": "^1.1.1",
-        "@radix-ui/react-scroll-area": "^1.0.2",
-        "@radix-ui/react-select": "^1.2.0",
-        "@radix-ui/react-slider": "^1.1.0",
-        "@radix-ui/react-switch": "^1.0.1",
-        "@radix-ui/react-tabs": "^1.0.2",
         "@radix-ui/react-tooltip": "^1.0.3",
         "@supabase/supabase-js": "^2.11.0",
         "axios": "^1.2.3",
@@ -2516,14 +2507,6 @@
         "node": ">= 0.12"
       }
     },
-    "node_modules/@radix-ui/number": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.0.tgz",
-      "integrity": "sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
@@ -2532,27 +2515,6 @@
         "@babel/runtime": "^7.13.10"
       }
     },
-    "node_modules/@radix-ui/react-accordion": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.0.tgz",
-      "integrity": "sha512-CNN9ZBgCK4i4SX7gFk5s8095j55DUWi85vwRNfkfBLs0QdAG5Tb4ku6sBeugCAiLvsmxw481GyNl+C3stoJVBQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-collapsible": "1.0.1",
-        "@radix-ui/react-collection": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-direction": "1.0.0",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
@@ -2566,62 +2528,6 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/@radix-ui/react-checkbox": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.1.tgz",
-      "integrity": "sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "@radix-ui/react-use-previous": "1.0.0",
-        "@radix-ui/react-use-size": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/@radix-ui/react-collapsible": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz",
-      "integrity": "sha512-0maX4q91iYa4gjt3PsNf7dq/yqSR+HGAE8I5p54dQ6gnveS+ETWlMoijxrhmgV1k8svxpm34mQAtqIrJt4XZmA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/@radix-ui/react-collection": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.1.tgz",
-      "integrity": "sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-slot": "1.0.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
@@ -2644,17 +2550,6 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/@radix-ui/react-direction": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz",
-      "integrity": "sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.2.tgz",
@@ -2672,32 +2567,6 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
-      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.1.tgz",
-      "integrity": "sha512-Ej2MQTit8IWJiS2uuujGUmxXjF/y5xZptIIQnyd2JHLwtV0R2j9NRVoRj/1j/gJ7e3REdaBw4Hjf4a1ImhkZcQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
@@ -2710,19 +2579,6 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/@radix-ui/react-label": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.0.tgz",
-      "integrity": "sha512-7qCcZ3j2VQspWjy+gKR4W+V/z0XueQjeiZnlPOtsyiP9HaS8bfSU7ECoI3bvvdYntQj7NElW7OAYsYRW4MQvCg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
@@ -2785,126 +2641,6 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/@radix-ui/react-radio-group": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.1.tgz",
-      "integrity": "sha512-fmg1CuDKt3GAkL3YnHekmdOicyrXlbp/s/D0MrHa+YB2Un+umpJGheiRowlQtxSpb1eeehKNTINgNESi8WK5rA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-direction": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-roving-focus": "1.0.2",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "@radix-ui/react-use-previous": "1.0.0",
-        "@radix-ui/react-use-size": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/@radix-ui/react-roving-focus": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz",
-      "integrity": "sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-collection": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-direction": "1.0.0",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-use-callback-ref": "1.0.0",
-        "@radix-ui/react-use-controllable-state": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/@radix-ui/react-scroll-area": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz",
-      "integrity": "sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/number": "1.0.0",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-direction": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-use-callback-ref": "1.0.0",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/@radix-ui/react-select": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.0.tgz",
-      "integrity": "sha512-MmXKsIBrG9GKxt8JKIn75LEPiX/zejBmj/Z36Hxtm9cdmCFzTo78QJ0Q3buLGzr0c3lzXdfgeKntmgCzaGxgkw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/number": "1.0.0",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-collection": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-direction": "1.0.0",
-        "@radix-ui/react-dismissable-layer": "1.0.2",
-        "@radix-ui/react-focus-guards": "1.0.0",
-        "@radix-ui/react-focus-scope": "1.0.1",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-popper": "1.1.0",
-        "@radix-ui/react-portal": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-slot": "1.0.1",
-        "@radix-ui/react-use-callback-ref": "1.0.0",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "@radix-ui/react-use-layout-effect": "1.0.0",
-        "@radix-ui/react-use-previous": "1.0.0",
-        "@radix-ui/react-visually-hidden": "1.0.1",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/@radix-ui/react-slider": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.0.tgz",
-      "integrity": "sha512-5H/QB4xD3GF9UfoSCVLBx2JjlXamMcmTyL6gr4kkd/MiAGaYB0W7Exi4MQa0tJApBFJe+KmS5InKCI56p2kmjA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/number": "1.0.0",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-collection": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-direction": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "@radix-ui/react-use-layout-effect": "1.0.0",
-        "@radix-ui/react-use-previous": "1.0.0",
-        "@radix-ui/react-use-size": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
@@ -2917,45 +2653,6 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/@radix-ui/react-switch": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.1.tgz",
-      "integrity": "sha512-tTxGluMtwrc5ffgAiOSMrYIx0r3vSTcgM4Vl8rqfpXcHt6ryB9B0OlFKUOiDpKASXlhvzfHf4Y0AYKJdpzjL8w==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "@radix-ui/react-use-previous": "1.0.0",
-        "@radix-ui/react-use-size": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/@radix-ui/react-tabs": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.2.tgz",
-      "integrity": "sha512-gOUwh+HbjCuL0UCo8kZ+kdUEG8QtpdO4sMQduJ34ZEz0r4922g9REOBM+vIsfwtGxSug4Yb1msJMJYN2Bk8TpQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-direction": "1.0.0",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
-        "@radix-ui/react-roving-focus": "1.0.2",
-        "@radix-ui/react-use-controllable-state": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.3.tgz",
@@ -3026,17 +2723,6 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/@radix-ui/react-use-previous": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz",
-      "integrity": "sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz",
@@ -6010,26 +5696,6 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
-    "node_modules/aria-hidden": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.2.tgz",
-      "integrity": "sha512-6y/ogyDTk/7YAe91T3E2PR1ALVKyM2QbTio5HwM+N1Q6CMlCKhvClyIjkckBswa0f2xJhjsfzIGa1yVSe1UMVA==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/aria-query": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -7594,11 +7260,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/detect-node-es": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
-    },
     "node_modules/detective": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
@@ -9280,14 +8941,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/get-nonce": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
-      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -9796,14 +9449,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/ip-regex": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
@@ -13536,51 +13181,6 @@
         "react-dom": ">=17.0.0"
       }
     },
-    "node_modules/react-remove-scroll": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
-      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
-      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
-      "dependencies": {
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-spring": {
       "version": "9.7.1",
       "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.1.tgz",
@@ -13598,28 +13198,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-style-singleton": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
-      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
-      "dependencies": {
-        "get-nonce": "^1.0.0",
-        "invariant": "^2.2.4",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-transition-state": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/react-transition-state/-/react-transition-state-1.1.5.tgz",
@@ -15045,26 +14623,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/use-callback-ref": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
-      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
@@ -15078,27 +14636,6 @@
         }
       }
     },
-    "node_modules/use-sidecar": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
-      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
-      "dependencies": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/package.json b/package.json
index 476e30022..eaafebae5 100644
--- a/package.json
+++ b/package.json
@@ -21,15 +21,6 @@
     "@heroicons/react": "^2.0.13",
     "@next/font": "^13.1.6",
     "@pinata/sdk": "^2.1.0",
-    "@radix-ui/react-accordion": "^1.1.0",
-    "@radix-ui/react-checkbox": "^1.0.1",
-    "@radix-ui/react-label": "^2.0.0",
-    "@radix-ui/react-radio-group": "^1.1.1",
-    "@radix-ui/react-scroll-area": "^1.0.2",
-    "@radix-ui/react-select": "^1.2.0",
-    "@radix-ui/react-slider": "^1.1.0",
-    "@radix-ui/react-switch": "^1.0.1",
-    "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.3",
     "@supabase/supabase-js": "^2.11.0",
     "axios": "^1.2.3",
diff --git a/src/components/UI/Accordion.tsx b/src/components/UI/Accordion.tsx
deleted file mode 100644
index 2ca799860..000000000
--- a/src/components/UI/Accordion.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// Reference:  https://ui.shadcn.com/docs/primitives/accordion
-"use client";
-
-import { ChevronDownIcon } from "@heroicons/react/24/solid";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn(
-      "border-b border-b-slate-200 dark:border-b-slate-700",
-      className
-    )}
-    {...props}
-  />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDownIcon className="h-4 w-4 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      "overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up",
-      className
-    )}
-    {...props}
-  >
-    <div className="pt-0 pb-4">{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/UI/Checkbox.tsx b/src/components/UI/Checkbox.tsx
deleted file mode 100644
index ca15b2257..000000000
--- a/src/components/UI/Checkbox.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/checkbox
-
-"use client";
-
-import { CheckIcon } from "@heroicons/react/24/solid";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center")}
-    >
-      <CheckIcon className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/src/components/UI/Input.tsx b/src/components/UI/Input.tsx
deleted file mode 100644
index 3f6758732..000000000
--- a/src/components/UI/Input.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/input
-
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const Input = React.forwardRef<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
->(({ className, ...props }, ref) => {
-  return (
-    <input
-      className={cn(
-        "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-Input.displayName = "Input";
-
-export { Input };
diff --git a/src/components/UI/Label.tsx b/src/components/UI/Label.tsx
deleted file mode 100644
index 7cf9bd7b0..000000000
--- a/src/components/UI/Label.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/label
-
-"use client";
-
-import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(
-      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-      className
-    )}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
diff --git a/src/components/UI/RadioGroup.tsx b/src/components/UI/RadioGroup.tsx
deleted file mode 100644
index fa539150d..000000000
--- a/src/components/UI/RadioGroup.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/radio-group
-"use client";
-
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
-  // eslint-disable-next-line
->(({ className, children, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "text:fill-slate-50 h-4 w-4 rounded-full border border-slate-300 text-slate-900 hover:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:text-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <div className="h-2.5 w-2.5 fill-slate-900 dark:fill-slate-50" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };
diff --git a/src/components/UI/ScrollArea.tsx b/src/components/UI/ScrollArea.tsx
deleted file mode 100644
index c5074bea4..000000000
--- a/src/components/UI/ScrollArea.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/scroll-area
-"use client";
-
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-slate-300 dark:bg-slate-700" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
diff --git a/src/components/UI/Select.tsx b/src/components/UI/Select.tsx
deleted file mode 100644
index b3df2b461..000000000
--- a/src/components/UI/Select.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/select
-"use client";
-
-import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronDownIcon className="h-4 w-4 opacity-50" />
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white text-slate-700 shadow-md animate-in fade-in-80 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
-        className
-      )}
-      {...props}
-    >
-      <SelectPrimitive.Viewport className="p-1">
-        {children}
-      </SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn(
-      "py-1.5 pr-2 pl-8 text-sm font-semibold text-slate-900 dark:text-slate-300",
-      className
-    )}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-};
diff --git a/src/components/UI/Slider.tsx b/src/components/UI/Slider.tsx
deleted file mode 100644
index 83dd56583..000000000
--- a/src/components/UI/Slider.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/slider
-"use client";
-
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
-  // eslint-disable-next-line
->(({ className, value, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800">
-      <SliderPrimitive.Range className="absolute h-full bg-slate-900  dark:bg-slate-400" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-slate-900 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-slate-100 dark:bg-slate-400 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900" />
-  </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };
diff --git a/src/components/UI/Switch.tsx b/src/components/UI/Switch.tsx
deleted file mode 100644
index af0be7901..000000000
--- a/src/components/UI/Switch.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/switch
-"use client";
-
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex items-center h-[24px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=unchecked]:bg-slate-700 dark:data-[state=checked]:bg-slate-400",
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5"
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
diff --git a/src/components/UI/Tabs.tsx b/src/components/UI/Tabs.tsx
deleted file mode 100644
index a135cbb27..000000000
--- a/src/components/UI/Tabs.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/tabs
-
-"use client";
-
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
-      className
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    className={cn(
-      "inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5  text-sm font-medium text-slate-700 transition-all  disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm dark:text-slate-200 dark:data-[state=active]:bg-slate-900 dark:data-[state=active]:text-slate-100",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    className={cn(
-      "mt-2 rounded-md border border-slate-200 p-6 dark:border-slate-700",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/components/UI/Textarea.tsx b/src/components/UI/Textarea.tsx
deleted file mode 100644
index aee1603dc..000000000
--- a/src/components/UI/Textarea.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// Reference: https://ui.shadcn.com/docs/primitives/textarea
-
-import * as React from "react";
-
-import { cn } from "@/src/utils/generic";
-
-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.TextareaHTMLAttributes<HTMLTextAreaElement>
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex h-20 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-Textarea.displayName = "Textarea";
-
-export { Textarea };
diff --git a/src/components/UI/Tooltip.tsx b/src/components/UI/Tooltip.tsx
index 6455461bc..82576bbc9 100644
--- a/src/components/UI/Tooltip.tsx
+++ b/src/components/UI/Tooltip.tsx
@@ -1,33 +1,49 @@
-// Reference: https://ui.shadcn.com/docs/primitives/tooltip
-
-"use client";
-
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
 
 import { cn } from "@/src/utils/generic";
 
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = ({ ...props }) => <TooltipPrimitive.Root {...props} />;
-Tooltip.displayName = TooltipPrimitive.Tooltip.displayName;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
-      className
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+interface Props {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  // open?: boolean;
+  onOpenChange?: () => void;
+  defaultOpen?: boolean;
+}
+
+const Tooltip = ({
+  children,
+  content,
+  // open = false,
+  defaultOpen = false,
+  onOpenChange,
+  ...props
+}: Props) => {
+  return (
+    <TooltipPrimitive.Root
+      // open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Content
+        side="top"
+        sideOffset={2}
+        align="center"
+        className={cn(
+          "bg-sky-400 rounded-md px-2.5 py-1 text-sm text-slate-900",
+          "data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade will-change-[transform,opacity]"
+        )}
+        {...props}
+      >
+        {content}
+        <TooltipPrimitive.Arrow
+          width={11}
+          height={5}
+          className="fill-sky-400"
+        />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Root>
+  );
+};
+
+export default Tooltip;
diff --git a/src/components/UnlockablePage/UnlockCard/Metadata.tsx b/src/components/UnlockablePage/UnlockCard/Metadata.tsx
index d78a055d4..65a7600ba 100644
--- a/src/components/UnlockablePage/UnlockCard/Metadata.tsx
+++ b/src/components/UnlockablePage/UnlockCard/Metadata.tsx
@@ -3,13 +3,16 @@ import {
   // LockClosedIcon,
   UserGroupIcon,
 } from "@heroicons/react/20/solid";
+import Link from "next/link";
 
 import { UnlockCriteria } from "@/src/config/types";
 import { formatRelativeDate, truncate0x } from "@/src/utils/generic";
 
+import Tooltip from "../../UI/Tooltip";
+
 type Props = {
   lastUpdated: string | Date;
-  owner: `0x${string}`;
+  owner: string;
   unlockCriteria: UnlockCriteria;
 };
 
@@ -19,17 +22,18 @@ const Metadata = ({ lastUpdated, owner, unlockCriteria }: Props) => (
       <ClockIcon className="h-4 w-4 text-white/20" />
       <p>{formatRelativeDate(lastUpdated)}</p>
     </div>
-    <a
-      href={`https://explorer.loopring.io/search?q=${owner}`}
-      target="_blank"
-      rel="noreferrer"
-      className="inline-flex space-x-1.5 items-center hover:text-sky-500 group duration-150"
-    >
-      <UserGroupIcon className="h-4 w-4 text-white/20" />
-      <p className="border-b border-sky-500/0 group-hover:border-sky-500 duration-150">
-        {truncate0x(owner)}
-      </p>
-    </a>
+    <Tooltip content={"Show all Unlockables by this user"}>
+      <Link
+        href={`/unlocks/browse?owner=${owner}`}
+        className="inline-flex space-x-1.5 items-center hover:text-sky-500 group duration-150"
+      >
+        <UserGroupIcon className="h-4 w-4 text-white/20" />
+        <p className="border-b border-sky-500/0 group-hover:border-sky-500 duration-150">
+          {truncate0x(owner)}
+        </p>
+      </Link>
+    </Tooltip>
+
     {unlockCriteria ? <></> : <></>}
     {/* <button
       className="inline-flex space-x-1.5 items-center hover:text-sky-500 duration-150"
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index ca1ea72c4..380d4e856 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import "../styles/globals.css";
 
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { ConnectKitProvider } from "connectkit";
 import type { AppProps } from "next/app";
 import { useEffect, useState } from "react";
@@ -26,23 +27,27 @@ const App = ({ Component, pageProps }: AppProps) => {
             walletConnectName: "WalletConnect",
           }}
         >
-          <main className={`${inter.variable} ${unbounded.variable} font-sans`}>
-            <NextHeadBase />
-            {mounted && <Component {...pageProps} />}
-            <Toaster
-              toastOptions={{
-                style: {
-                  backgroundColor: "rgba(17,24,44,.8)",
-                  backdropFilter: "blur(2px)",
-                  color: "#FFFFFF",
-                  fontSize: "14px",
-                  border: "1px solid rgba(255,255,255,.2)",
-                  maxWidth: "420px",
-                  lineHeight: 1.5,
-                },
-              }}
-            />
-          </main>
+          <TooltipProvider delayDuration={0}>
+            <main
+              className={`${inter.variable} ${unbounded.variable} font-sans`}
+            >
+              <NextHeadBase />
+              {mounted && <Component {...pageProps} />}
+              <Toaster
+                toastOptions={{
+                  style: {
+                    backgroundColor: "rgba(17,24,44,.8)",
+                    backdropFilter: "blur(2px)",
+                    color: "#FFFFFF",
+                    fontSize: "14px",
+                    border: "1px solid rgba(255,255,255,.2)",
+                    maxWidth: "420px",
+                    lineHeight: 1.5,
+                  },
+                }}
+              />
+            </main>
+          </TooltipProvider>
         </ConnectKitProvider>
       </siwe.Provider>
     </WagmiConfig>
diff --git a/tailwind.config.js b/tailwind.config.js
index 01e70b62a..ff70bc613 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,6 +42,22 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+        slideDownAndFade: {
+          from: { opacity: 0, transform: "translateY(-2px)" },
+          to: { opacity: 1, transform: "translateY(0)" },
+        },
+        slideLeftAndFade: {
+          from: { opacity: 0, transform: "translateX(2px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
+        },
+        slideUpAndFade: {
+          from: { opacity: 0, transform: "translateY(2px)" },
+          to: { opacity: 1, transform: "translateY(0)" },
+        },
+        slideRightAndFade: {
+          from: { opacity: 0, transform: "translateX(-2px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
+        },
       },
       animation: {
         float: "float 4s ease-in-out infinite",
@@ -51,6 +67,13 @@ module.exports = {
         "unlock-success-1": `unlock-success-1 ${unlockSuccessDuration}`,
         "unlock-success-2": `unlock-success-2 ${unlockSuccessDuration}`,
         "unlock-success-3": `unlock-success-3 ${unlockSuccessDuration}`,
+        slideDownAndFade:
+          "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade:
+          "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade:
+          "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
       },
     },
   },