No channels}>
{(channel) => (
- <>
-
- {JSON.stringify(channel, null, 2)}
-
-
- Mempool Link
-
-
+
@@ -156,29 +254,31 @@ function OpenChannel(props: { refetchChannels: RefetchChannelsListType }) {
return (
<>
-
+
+
+
-
+
{JSON.stringify(newChannel()?.outpoint, null, 2)}
{newChannel()?.outpoint}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 9c6e97d..2cb104c 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,25 +1,26 @@
import mutiny_m from '~/assets/icons/m.svg';
-import scan from '~/assets/icons/scan.svg';
+// import scan from '~/assets/icons/scan.svg';
+import airplane from '~/assets/icons/airplane.svg';
import settings from '~/assets/icons/settings.svg';
import { A } from "solid-start";
-type ActiveTab = 'home' | 'scan' | 'settings' | 'none';
+type ActiveTab = 'home' | 'scan' | 'send' | 'settings' | 'none';
export default function NavBar(props: { activeTab: ActiveTab }) {
- const activeStyle = 'h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center md:border-t-0 md:border-b-0 md:p-2 md:bg-white/20 md:rounded-xl'
- const inactiveStyle = "md:p-2 md:hover:bg-white/10 md:rounded-xl"
+ const activeStyle = 'h-full border-t-2 border-b-2 border-b-sidebar-gray flex flex-col justify-center md:border-t-0 md:border-b-0 md:p-2 md:bg-black md:rounded-lg'
+ const inactiveStyle = "md:p-2 md:hover:bg-white/5 md:rounded-lg md:active:bg-m-blue"
return (
-
+
-
-
-
+
+
diff --git a/src/components/ReceiveSuccessModal.tsx b/src/components/ReceiveSuccessModal.tsx
new file mode 100644
index 0000000..04aab39
--- /dev/null
+++ b/src/components/ReceiveSuccessModal.tsx
@@ -0,0 +1,36 @@
+
+import { Dialog } from "@kobalte/core";
+import { JSX } from "solid-js";
+import { Button, SmallHeader } from "~/components/layout";
+import close from "~/assets/icons/close.svg";
+
+const DIALOG_POSITIONER = "fixed inset-0 safe-top safe-bottom z-50"
+const DIALOG_CONTENT = "h-screen-safe p-4 bg-gray/50 backdrop-blur-md bg-black/80"
+
+
+export function ReceiveSuccessModal(props: { title: string, open: boolean, setOpen: (open: boolean) => void, children?: JSX.Element }) {
+ return (
+ props.setOpen(isOpen)}>
+
+
+
+
+
+
+ {props.title}
+
+
+
+
+
+ {props.children}
+ props.setOpen(false)}>Nice
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/SeedWords.tsx b/src/components/SeedWords.tsx
new file mode 100644
index 0000000..8c70b43
--- /dev/null
+++ b/src/components/SeedWords.tsx
@@ -0,0 +1,27 @@
+import { Match, Switch, createSignal } from "solid-js"
+
+export function SeedWords(props: { words: string }) {
+ const [shouldShow, setShouldShow] = createSignal(false)
+
+ function toggleShow() {
+ setShouldShow(!shouldShow())
+ }
+
+ return (
+
+
+
+ TAP TO REVEAL SEED WORDS
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Sent.tsx b/src/components/Sent.tsx
new file mode 100644
index 0000000..d9d46ae
--- /dev/null
+++ b/src/components/Sent.tsx
@@ -0,0 +1,37 @@
+import { Dialog } from "@kobalte/core";
+import { ButtonLink, SmallHeader } from "~/components/layout";
+import close from "~/assets/icons/close.svg";
+
+const OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+const DIALOG_POSITIONER = "fixed inset-0 z-50 flex items-center justify-center"
+const DIALOG_CONTENT = "w-[80vw] max-w-[400px] p-4 bg-gray/50 backdrop-blur-md shadow-xl rounded-xl border border-white/10"
+
+export function SentModal(props: { details?: { nice: string } }) {
+ return (
+
+
+
+
+
+
+
+ Sent!
+
+
+
+
+
+
+ {JSON.stringify(props.details)}
+
+ Nice
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/SettingsStringsEditor.tsx b/src/components/SettingsStringsEditor.tsx
new file mode 100644
index 0000000..c201200
--- /dev/null
+++ b/src/components/SettingsStringsEditor.tsx
@@ -0,0 +1,100 @@
+import { createForm, url } from '@modular-forms/solid';
+import { TextField } from '~/components/layout/TextField';
+import { NodeManagerSettingStrings, getExistingSettings } from '~/logic/nodeManagerSetup';
+import { Button } from '~/components/layout';
+import { createSignal } from 'solid-js';
+import { deleteDb } from '~/components/DeleteEverything';
+import { showToast } from './Toaster';
+import eify from '~/utils/eify';
+import { ConfirmDialog } from "~/components/Dialog";
+import { useMegaStore } from '~/state/megaStore';
+
+export function SettingsStringsEditor() {
+ const existingSettings = getExistingSettings();
+ const [_settingsForm, { Form, Field }] = createForm({ initialValues: existingSettings });
+ const [confirmOpen, setConfirmOpen] = createSignal(false);
+
+ const [settingsTemp, setSettingsTemp] = createSignal();
+
+ const [_store, actions] = useMegaStore();
+
+ async function handleSubmit(values: NodeManagerSettingStrings) {
+ try {
+ const existing = getExistingSettings();
+ const newSettings = { ...existing, ...values }
+ if (existing.network !== values.network) {
+ // If the network changes we need to confirm the wipe
+ // Save the settings so we can get them later
+ setSettingsTemp(newSettings);
+ setConfirmOpen(true);
+ } else {
+ await actions.setupNodeManager(newSettings);
+ window.location.reload();
+ }
+ } catch (e) {
+ console.error(e)
+ showToast(eify(e))
+ }
+ console.log(values)
+ }
+
+ async function confirmStateReset() {
+ try {
+ deleteDb("gossip")
+ localStorage.clear();
+ showToast({ title: "Deleted", description: `Deleted all data` })
+ const loadedValues = settingsTemp();
+
+ await actions.setupNodeManager(loadedValues);
+ window.location.reload();
+ } catch (e) {
+ console.error(e)
+ showToast(eify(e))
+ }
+
+ setConfirmOpen(false);
+ }
+
+ return
+
+}
\ No newline at end of file
diff --git a/src/components/Toaster.tsx b/src/components/Toaster.tsx
new file mode 100644
index 0000000..7a95aed
--- /dev/null
+++ b/src/components/Toaster.tsx
@@ -0,0 +1,55 @@
+import { Toast, toaster } from "@kobalte/core";
+import { Portal } from "solid-js/web";
+import close from "~/assets/icons/close.svg";
+import { SmallHeader } from "./layout";
+
+export function Toaster() {
+ return (
+
+
+
+
+ )
+}
+
+type ToastArg = { title: string, description: string } | Error
+
+export function showToast(arg: ToastArg) {
+ if (arg instanceof Error) {
+ return toaster.show(props => (
+
+
+
+
+
+ {props.title}
+
+
+
+
+ {props.description}
+
+
+
+
+
+
+ */}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/Button.tsx b/src/components/layout/Button.tsx
index 692c3fe..32744c5 100644
--- a/src/components/layout/Button.tsx
+++ b/src/components/layout/Button.tsx
@@ -1,24 +1,27 @@
import { cva, VariantProps } from "class-variance-authority";
-import { children, JSX, ParentComponent, splitProps } from "solid-js";
+import { children, JSX, ParentComponent, Show, splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";
import { A } from "solid-start";
+import { LoadingSpinner } from ".";
-const button = cva(["p-4", "rounded-xl", "text-xl", "font-semibold"], {
+const button = cva("p-3 rounded-xl text-xl font-semibold disabled:opacity-50 disabled:grayscale transition", {
variants: {
+ // TODO: button hover has to work different than buttonlinks (like disabled state)
intent: {
- active: "bg-white text-black",
- inactive: "bg-black text-white border border-white disabled:opacity-50",
- blue: "bg-[#3B6CCC] text-white",
- red: "bg-[#F61D5B] text-white",
- green: "bg-[#1EA67F] text-white",
+ active: "bg-white text-black border border-white hover:text-[#3B6CCC]",
+ inactive: "bg-black text-white border border-white hover:text-[#3B6CCC]",
+ glowy: "bg-black/10 shadow-xl text-white border border-m-blue hover:m-blue-dark hover:text-m-blue",
+ blue: "bg-m-blue text-white shadow-inner-button hover:bg-m-blue-dark text-shadow-button",
+ red: "bg-m-red text-white shadow-inner-button hover:bg-m-red-dark text-shadow-button",
+ green: "bg-m-green text-white shadow-inner-button hover:bg-m-green-dark text-shadow-button",
},
layout: {
flex: "flex-1",
pad: "px-8",
- small: "p-1 w-auto",
+ small: "px-4 py-2 w-auto text-lg",
+ xs: "px-2 py-1 w-auto rounded-lg font-normal text-base"
},
},
-
defaultVariants: {
intent: "inactive",
layout: "flex"
@@ -28,7 +31,9 @@ const button = cva(["p-4", "rounded-xl", "text-xl", "font-semibold"], {
// Help from https://github.com/arpadgabor/credee/blob/main/packages/www/src/components/ui/button.tsx
type StyleProps = VariantProps
-interface ButtonProps extends JSX.ButtonHTMLAttributes, StyleProps { }
+interface ButtonProps extends JSX.ButtonHTMLAttributes, StyleProps {
+ loading?: boolean
+}
export const Button: ParentComponent = props => {
const slot = children(() => props.children)
@@ -43,8 +48,13 @@ export const Button: ParentComponent = props => {
layout: local.layout,
})}
>
- {slot()}
-
+
+
+ {/* TODO: constrain this to the exact height of the button */}
+
+
+
)
}
diff --git a/src/components/layout/Radio.tsx b/src/components/layout/Radio.tsx
new file mode 100644
index 0000000..c6bb29a
--- /dev/null
+++ b/src/components/layout/Radio.tsx
@@ -0,0 +1,30 @@
+import { RadioGroup } from "@kobalte/core";
+import { For } from "solid-js";
+
+type Choices = { value: string, label: string, caption: string }[]
+
+// TODO: how could would it be if we could just pass the estimated fees in here?
+export function StyledRadioGroup(props: { value: string, choices: Choices, onValueChange: (value: string) => void }) {
+ return (
+ props.onValueChange(e)} class="grid w-full gap-4 grid-cols-2">
+
+ {choice =>
+
+
+
+
+
+
+
+
{choice.label}
+
{choice.caption}
+
+
+ }
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/layout/TextField.tsx b/src/components/layout/TextField.tsx
new file mode 100644
index 0000000..9b6a23b
--- /dev/null
+++ b/src/components/layout/TextField.tsx
@@ -0,0 +1,49 @@
+import { TextField as KTextField } from '@kobalte/core';
+import { type JSX, Show, splitProps } from 'solid-js';
+
+type TextFieldProps = {
+ name: string;
+ type?: 'text' | 'email' | 'tel' | 'password' | 'url' | 'date';
+ label?: string;
+ placeholder?: string;
+ value: string | undefined;
+ error: string;
+ required?: boolean;
+ multiline?: boolean;
+ ref: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+ onInput: JSX.EventHandler;
+ onChange: JSX.EventHandler;
+ onBlur: JSX.EventHandler;
+};
+
+export function TextField(props: TextFieldProps) {
+ const [fieldProps] = splitProps(props, [
+ 'placeholder',
+ 'ref',
+ 'onInput',
+ 'onChange',
+ 'onBlur',
+ ]);
+ return (
+
+
+
+ {props.label}
+
+
+
+ {props.error}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index c74c0dc..2b38535 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -1,36 +1,83 @@
-import { ParentComponent, Show } from "solid-js"
+import { JSX, ParentComponent, Show, Suspense } from "solid-js"
import Linkify from "./Linkify"
import { Button, ButtonLink } from "./Button"
import { Separator } from "@kobalte/core"
+import { useMegaStore } from "~/state/megaStore"
-const SmallHeader: ParentComponent = (props) =>
+const SmallHeader: ParentComponent<{ class?: string }> = (props) => {
+ return
+}
const Card: ParentComponent<{ title?: string }> = (props) => {
return (
-
+
{props.title && {props.title} }
{props.children}
-
)
}
-const SafeArea: ParentComponent<{ main?: boolean }> = (props) => {
+const InnerCard: ParentComponent<{ title?: string }> = (props) => {
return (
-