From e39b3e92b2918155aae4b6b5c43d40edab717b4b Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Mon, 11 Nov 2024 10:08:17 +0700
Subject: [PATCH] Fix help component

---
 src/main.tsx                  |   2 +-
 src/routes/dashboard/help.tsx | 186 +++++++++++++++++-----------------
 2 files changed, 95 insertions(+), 93 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index bfd42c1..9d687a8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -15,7 +15,7 @@ import * as Sentry from "@sentry/react";
 import { CodexSdk } from "./sdk/codex";
 import { ErrorPlaceholder } from "./components/ErrorPlaceholder/ErrorPlaceholder.tsx";
 
-if (true || (import.meta.env.PROD && !import.meta.env.CI)) {
+if (import.meta.env.PROD && !import.meta.env.CI) {
   Sentry.init({
     release: "codex-storage-marketplace-ui@" + import.meta.env.PACKAGE_VERSION,
     dsn: "https://22d77c59a27b8d5efc07132188b505b9@o4507855852011520.ingest.de.sentry.io/4507866758512720",
diff --git a/src/routes/dashboard/help.tsx b/src/routes/dashboard/help.tsx
index ea78221..d72e760 100644
--- a/src/routes/dashboard/help.tsx
+++ b/src/routes/dashboard/help.tsx
@@ -4,111 +4,113 @@ import { HelpCircle } from "lucide-react";
 import { useEffect } from "react";
 import * as Sentry from "@sentry/react";
 
-export const Route = createFileRoute("/dashboard/help")({
-  component: () => {
-    useEffect(() => {
-      const feedback = Sentry.feedbackIntegration({
-        // Additional SDK configuration goes in here, for example:
-        colorScheme: "dark",
-        triggerLabel: "",
-      });
-      const widget = feedback.createWidget();
-      return () => {
-        return widget.removeFromDom();
-      };
-    }, []);
+const Help = () => {
+  useEffect(() => {
+    const feedback = Sentry.feedbackIntegration({
+      // Additional SDK configuration goes in here, for example:
+      colorScheme: "dark",
+      triggerLabel: "",
+    });
+    const widget = feedback.createWidget();
+    return () => {
+      return widget.removeFromDom();
+    };
+  }, []);
 
-    return (
-      <div className="container">
-        <div className="help">
-          <h1 className="help-title">You might be wondering...</h1>
+  return (
+    <div className="container">
+      <div className="help">
+        <h1 className="help-title">You might be wondering...</h1>
 
-          <div className="help-item">
-            <HelpCircle className="help-itemIcon" size={"1.5rem"} />
-            <div className="help-itemBody">
-              <p className="help-itemTitle">What's Codex?</p>
-              <p className="help-text">
-                Codex is a decentralised data storage platform that provides
-                exceptionally strong censorship resistance and durability
-                guarantees. It serves as the storage layer of the Logos tech
-                stack.
-              </p>
-            </div>
+        <div className="help-item">
+          <HelpCircle className="help-itemIcon" size={"1.5rem"} />
+          <div className="help-itemBody">
+            <p className="help-itemTitle">What's Codex?</p>
+            <p className="help-text">
+              Codex is a decentralised data storage platform that provides
+              exceptionally strong censorship resistance and durability
+              guarantees. It serves as the storage layer of the Logos tech
+              stack.
+            </p>
           </div>
+        </div>
 
-          <div className="help-item">
-            <HelpCircle className="help-itemIcon" size={"1rem"} />
-            <div className="help-itemBody">
-              <p className="help-itemTitle">
-                What is the purpose of this web application?
-              </p>
-              <p className="help-text">
-                This application allows you to interact with the Codex
-                Marketplace network in a user-friendly manner.
-              </p>
-            </div>
+        <div className="help-item">
+          <HelpCircle className="help-itemIcon" size={"1rem"} />
+          <div className="help-itemBody">
+            <p className="help-itemTitle">
+              What is the purpose of this web application?
+            </p>
+            <p className="help-text">
+              This application allows you to interact with the Codex Marketplace
+              network in a user-friendly manner.
+            </p>
           </div>
+        </div>
 
-          <div className="help-item">
-            <HelpCircle className="help-itemIcon" size={"1rem"} />
-            <div className="help-itemBody">
-              <p className="help-itemTitle">Can Codex handle big files ?</p>
-              <p className="help-text">
-                Codex can handle very large files, which is its main purpose.
-                However, for this UI, the files used should not be too large.
-              </p>
-            </div>
+        <div className="help-item">
+          <HelpCircle className="help-itemIcon" size={"1rem"} />
+          <div className="help-itemBody">
+            <p className="help-itemTitle">Can Codex handle big files ?</p>
+            <p className="help-text">
+              Codex can handle very large files, which is its main purpose.
+              However, for this UI, the files used should not be too large.
+            </p>
           </div>
+        </div>
 
-          <div className="help-item">
-            <HelpCircle className="help-itemIcon" size={"1rem"} />
-            <div className="help-itemBody">
-              <p className="help-itemTitle">Is it production ready ?</p>
-              <p className="help-text">
-                Not at all! This is a very early alpha version. You should
-                expect to encounter bugs, but don't worry—feel free to reach out
-                to us if you need assistance.
-              </p>
-            </div>
+        <div className="help-item">
+          <HelpCircle className="help-itemIcon" size={"1rem"} />
+          <div className="help-itemBody">
+            <p className="help-itemTitle">Is it production ready ?</p>
+            <p className="help-text">
+              Not at all! This is a very early alpha version. You should expect
+              to encounter bugs, but don't worry—feel free to reach out to us if
+              you need assistance.
+            </p>
           </div>
+        </div>
 
-          <div className="help-item">
-            <HelpCircle className="help-itemIcon" size={"1rem"} />
-            <div className="help-itemBody">
-              <p className="help-itemTitle">
-                How can I reach you if I am stuck ?
-              </p>
-              <p className="help-text">
-                Please create a new issue on our GitHub repository&nbsp;
-                <a
-                  href="https://github.com/codex-storage/codex-marketplace-ui"
-                  className="help-link"
-                  target="_blank">
-                  https://github.com/codex-storage/codex-marketplace-ui
-                </a>
-                .
-              </p>
-            </div>
+        <div className="help-item">
+          <HelpCircle className="help-itemIcon" size={"1rem"} />
+          <div className="help-itemBody">
+            <p className="help-itemTitle">
+              How can I reach you if I am stuck ?
+            </p>
+            <p className="help-text">
+              Please create a new issue on our GitHub repository&nbsp;
+              <a
+                href="https://github.com/codex-storage/codex-marketplace-ui"
+                className="help-link"
+                target="_blank">
+                https://github.com/codex-storage/codex-marketplace-ui
+              </a>
+              .
+            </p>
           </div>
+        </div>
 
-          <div className="help-item">
-            <HelpCircle className="help-itemIcon" size={"1rem"} />
-            <div className="help-itemBody">
-              <p className="help-itemTitle">How can I build and run Codex ?</p>
-              <p className="help-text">
-                For instructions, please visit{" "}
-                <a
-                  href="https://docs.codex.storage"
-                  className="help-link"
-                  target="_blank">
-                  https://docs.codex.storage
-                </a>
-                .
-              </p>
-            </div>
+        <div className="help-item">
+          <HelpCircle className="help-itemIcon" size={"1rem"} />
+          <div className="help-itemBody">
+            <p className="help-itemTitle">How can I build and run Codex ?</p>
+            <p className="help-text">
+              For instructions, please visit{" "}
+              <a
+                href="https://docs.codex.storage"
+                className="help-link"
+                target="_blank">
+                https://docs.codex.storage
+              </a>
+              .
+            </p>
           </div>
         </div>
       </div>
-    );
-  },
+    </div>
+  );
+};
+
+export const Route = createFileRoute("/dashboard/help")({
+  component: Help,
 });