From ab0923d06dae72a19d176eac14d42b2503efe17a Mon Sep 17 00:00:00 2001
From: kieran <kieran@harkin.me>
Date: Mon, 22 Jul 2024 11:26:44 +0100
Subject: [PATCH] chore: move all settings to dashboard

---
 src/element/modal.tsx                   |  2 +-
 src/element/new-stream.tsx              |  8 +++----
 src/index.tsx                           |  4 ----
 src/pages/dashboard/balance-history.tsx | 28 +++++++++++++++++++++++++
 src/pages/dashboard/dashboard.tsx       | 13 ++++++++++++
 src/pages/dashboard/forwarding.tsx      | 28 +++++++++++++++++++++++++
 src/pages/settings/index.tsx            |  4 ----
 src/pages/settings/stream.tsx           | 25 ----------------------
 8 files changed, 74 insertions(+), 38 deletions(-)
 create mode 100644 src/pages/dashboard/balance-history.tsx
 create mode 100644 src/pages/dashboard/forwarding.tsx
 delete mode 100644 src/pages/settings/stream.tsx

diff --git a/src/element/modal.tsx b/src/element/modal.tsx
index b4b00b8..1455807 100644
--- a/src/element/modal.tsx
+++ b/src/element/modal.tsx
@@ -9,7 +9,7 @@ export interface ModalProps {
   bodyClassName?: string;
   onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
   onClick?: (e: React.MouseEvent) => void;
-  children: ReactNode;
+  children?: ReactNode;
   showClose?: boolean;
   ready?: boolean;
   largeModal?: boolean;
diff --git a/src/element/new-stream.tsx b/src/element/new-stream.tsx
index 7e875bd..19dd9fe 100644
--- a/src/element/new-stream.tsx
+++ b/src/element/new-stream.tsx
@@ -90,13 +90,13 @@ interface NewStreamDialogProps {
   btnClassName?: string;
 }
 
-export function NewStreamDialog(props: NewStreamDialogProps & StreamEditorProps) {
+export function NewStreamDialog({ text, btnClassName, ...props }: NewStreamDialogProps & StreamEditorProps) {
   const [open, setOpen] = useState(false);
   return (
     <>
-      <DefaultButton className={props.btnClassName} onClick={() => setOpen(true)}>
-        {props.text && props.text}
-        {!props.text && (
+      <DefaultButton className={btnClassName} onClick={() => setOpen(true)}>
+        {text && text}
+        {!text && (
           <>
             <span className="max-xl:hidden">
               <FormattedMessage defaultMessage="Stream" id="uYw2LD" />
diff --git a/src/index.tsx b/src/index.tsx
index 36a59ab..7bfa044 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -134,10 +134,6 @@ const router = createBrowserRouter([
             path: "",
             element: <AccountSettingsTab />,
           },
-          {
-            path: "stream",
-            element: <StreamSettingsTab />,
-          },
           {
             path: "profile",
             element: <ProfileSettings />,
diff --git a/src/pages/dashboard/balance-history.tsx b/src/pages/dashboard/balance-history.tsx
new file mode 100644
index 0000000..54d6b4f
--- /dev/null
+++ b/src/pages/dashboard/balance-history.tsx
@@ -0,0 +1,28 @@
+import { DefaultButton } from "@/element/buttons";
+import Modal from "@/element/modal";
+import { useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { NostrStreamProvider } from "@/providers";
+import NostrProviderDialog from "@/element/provider/nostr";
+
+export default function BalanceHistoryModal({ provider }: { provider: NostrStreamProvider }) {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <DefaultButton onClick={() => setShow(true)}>
+        <FormattedMessage defaultMessage="Balance" />
+      </DefaultButton>
+      {show && (
+        <Modal id="raid-menu" onClose={() => setShow(false)} largeModal={true}>
+          <NostrProviderDialog
+            provider={provider}
+            showBalanceHistory={true}
+            showEditor={false}
+            showEndpoints={true}
+            showForwards={false}
+          />
+        </Modal>
+      )}
+    </>
+  );
+}
diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
index 64b0468..75a58fd 100644
--- a/src/pages/dashboard/dashboard.tsx
+++ b/src/pages/dashboard/dashboard.tsx
@@ -28,6 +28,8 @@ import classNames from "classnames";
 import ManualStream from "./manual-stream";
 import { unixNow } from "@snort/shared";
 import { Icon } from "@/element/icon";
+import ForwardingModal from "./forwarding";
+import BalanceHistoryModal from "./balance-history";
 const StreamSummary = lazy(() => import("@/element/summary-chart"));
 
 export function DashboardForLink({ link }: { link: NostrLink }) {
@@ -220,6 +222,17 @@ export function DashboardForLink({ link }: { link: NostrLink }) {
             </div>
           </DashboardCard>
         )}
+        {(!streamLink || status === StreamState.Ended) && (
+          <DashboardCard className="flex flex-col gap-4">
+            <h3>
+              <FormattedMessage defaultMessage="Account Setup" />
+            </h3>
+            <div className="flex gap-2">
+              <BalanceHistoryModal provider={provider} />
+              <ForwardingModal provider={provider} />
+            </div>
+          </DashboardCard>
+        )}
       </div>
       {streamLink && status === StreamState.Live && (
         <>
diff --git a/src/pages/dashboard/forwarding.tsx b/src/pages/dashboard/forwarding.tsx
new file mode 100644
index 0000000..7521cc3
--- /dev/null
+++ b/src/pages/dashboard/forwarding.tsx
@@ -0,0 +1,28 @@
+import { DefaultButton } from "@/element/buttons";
+import Modal from "@/element/modal";
+import { useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { NostrStreamProvider } from "@/providers";
+import NostrProviderDialog from "@/element/provider/nostr";
+
+export default function ForwardingModal({ provider }: { provider: NostrStreamProvider }) {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <DefaultButton onClick={() => setShow(true)}>
+        <FormattedMessage defaultMessage="Stream Forwarding" />
+      </DefaultButton>
+      {show && (
+        <Modal id="raid-menu" onClose={() => setShow(false)}>
+          <NostrProviderDialog
+            provider={provider}
+            showBalanceHistory={false}
+            showEditor={false}
+            showEndpoints={false}
+            showForwards={true}
+          />
+        </Modal>
+      )}
+    </>
+  );
+}
diff --git a/src/pages/settings/index.tsx b/src/pages/settings/index.tsx
index 5d30913..69c6bd4 100644
--- a/src/pages/settings/index.tsx
+++ b/src/pages/settings/index.tsx
@@ -11,10 +11,6 @@ const Tabs = [
     name: <FormattedMessage defaultMessage="Profile" />,
     path: "profile",
   },
-  {
-    name: <FormattedMessage defaultMessage="Stream" />,
-    path: "stream",
-  },
 ];
 export default function SettingsPage() {
   const naviage = useNavigate();
diff --git a/src/pages/settings/stream.tsx b/src/pages/settings/stream.tsx
deleted file mode 100644
index f1856fe..0000000
--- a/src/pages/settings/stream.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import NostrProviderDialog from "@/element/provider/nostr";
-import { useStreamProvider } from "@/hooks/stream-provider";
-import { NostrStreamProvider } from "@/providers";
-import { unwrap } from "@snort/shared";
-import { FormattedMessage } from "react-intl";
-
-export function StreamSettingsTab() {
-  const providers = useStreamProvider();
-  return (
-    <>
-      <h1>
-        <FormattedMessage defaultMessage="Stream" id="uYw2LD" />
-      </h1>
-      <div className="flex flex-col gap-4">
-        <NostrProviderDialog
-          provider={unwrap(providers.find(a => a.name === "zap.stream")) as NostrStreamProvider}
-          showEndpoints={true}
-          showEditor={false}
-          showForwards={true}
-          showBalanceHistory={true}
-        />
-      </div>
-    </>
-  );
-}