diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 2bb139a..659b953 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -4,7 +4,6 @@ module.exports = { "es2021": true }, "extends": [ - "prettier", "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:solid/typescript", diff --git a/package.json b/package.json index 3694e11..7c827cf 100644 --- a/package.json +++ b/package.json @@ -48,5 +48,13 @@ }, "engines": { "node": ">=16.8" + }, + "prettier": { + "semi": false, + "singleQuote": false, + "trailingComma": "es5", + "printWidth": 80, + "tabWidth": 2, + "useTabs": false } } diff --git a/src/assets/icons/copy.svg b/src/assets/icons/copy.svg new file mode 100644 index 0000000..95475d3 --- /dev/null +++ b/src/assets/icons/copy.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/eye.svg b/src/assets/icons/eye.svg new file mode 100644 index 0000000..5045194 --- /dev/null +++ b/src/assets/icons/eye.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/pencil.svg b/src/assets/icons/pencil.svg new file mode 100644 index 0000000..b1f32b4 --- /dev/null +++ b/src/assets/icons/pencil.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/share.svg b/src/assets/icons/share.svg new file mode 100644 index 0000000..a672592 --- /dev/null +++ b/src/assets/icons/share.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/AmountCard.tsx b/src/components/AmountCard.tsx new file mode 100644 index 0000000..7c375a0 --- /dev/null +++ b/src/components/AmountCard.tsx @@ -0,0 +1,87 @@ +import { Match, ParentComponent, Show, Switch, createMemo } from "solid-js"; +import { Card, VStack } from "~/components/layout"; +import { useMegaStore } from "~/state/megaStore"; +import { satsToUsd } from "~/utils/conversions"; +import { AmountEditable } from "./AmountEditable"; + +const KeyValue: ParentComponent<{ key: string, gray?: boolean }> = (props) => { + return ( +
+
{props.key}
+
{props.children}
+
+ ) +} + +export const InlineAmount: ParentComponent<{ amount: string, sign?: string, fiat?: boolean }> = (props) => { + const prettyPrint = createMemo(() => { + const parsed = Number(props.amount); + if (isNaN(parsed)) { + return props.amount; + } else { + return parsed.toLocaleString(); + } + }) + + return (
{props.sign ? `${props.sign} ` : ""}{props.fiat ? "$" : ""}{prettyPrint()} {props.fiat ? "USD" : "SATS"}
) +} + +function USDShower(props: { amountSats: string, fee?: string }) { + const [state, _] = useMegaStore() + const amountInUsd = () => satsToUsd(state.price, add(props.amountSats, props.fee), true) + + return ( + + +
≈ {amountInUsd()} USD
+ + + ) + +} + +function add(a: string, b?: string) { + return Number(a || 0) + Number(b || 0) +} + +export function AmountCard(props: { amountSats: string, fee?: string, initialOpen?: boolean, isAmountEditable?: boolean, setAmountSats?: (amount: bigint) => void }) { + return ( + + + + +
+ + + }> + { }} /> + + + + + +
+
+
+ + + + +
+ + +
+ + + }> + { }} /> + + + +
+ + + + + ) +} \ No newline at end of file diff --git a/src/components/AmountEditable.tsx b/src/components/AmountEditable.tsx index 63bfb1a..8b6f00e 100644 --- a/src/components/AmountEditable.tsx +++ b/src/components/AmountEditable.tsx @@ -1,10 +1,11 @@ -import { For, Show, createMemo, createSignal } from 'solid-js'; +import { For, ParentComponent, Show, createMemo, createSignal } from 'solid-js'; import { Button } from '~/components/layout'; import { useMegaStore } from '~/state/megaStore'; import { satsToUsd } from '~/utils/conversions'; -import { Amount } from './Amount'; import { Dialog } from '@kobalte/core'; import close from "~/assets/icons/close.svg"; +import pencil from "~/assets/icons/pencil.svg"; +import { InlineAmount } from './AmountCard'; const CHARACTERS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "DEL"]; @@ -25,8 +26,8 @@ function SingleDigitButton(props: { character: string, onClick: (c: string) => v ); } -export function AmountEditable(props: { initialAmountSats: string, setAmountSats: (s: bigint) => void }) { - const [isOpen, setIsOpen] = createSignal(false); +export const AmountEditable: ParentComponent<{ initialAmountSats: string, initialOpen: boolean, setAmountSats: (s: bigint) => void }> = (props) => { + const [isOpen, setIsOpen] = createSignal(props.initialOpen); const [displayAmount, setDisplayAmount] = createSignal(props.initialAmountSats || "0"); @@ -135,8 +136,13 @@ export function AmountEditable(props: { initialAmountSats: string, setAmountSats return ( - {/* */} diff --git a/src/components/BalanceBox.tsx b/src/components/BalanceBox.tsx index 8a29f48..cae3044 100644 --- a/src/components/BalanceBox.tsx +++ b/src/components/BalanceBox.tsx @@ -1,5 +1,5 @@ import { Show, Suspense } from "solid-js"; -import { ButtonLink, FancyCard } from "~/components/layout"; +import { ButtonLink, FancyCard, Indicator } from "~/components/layout"; import { useMegaStore } from "~/state/megaStore"; import { Amount } from "./Amount"; @@ -10,12 +10,6 @@ function prettyPrintAmount(n?: number | bigint): string { return n.toLocaleString() } -function SyncingIndicator() { - return ( -
Syncing
- ) -} - export default function BalanceBox() { const [state, actions] = useMegaStore(); @@ -25,7 +19,7 @@ export default function BalanceBox() { - }> + Syncing}>
diff --git a/src/components/ContactEditor.tsx b/src/components/ContactEditor.tsx index aee945e..748fa80 100644 --- a/src/components/ContactEditor.tsx +++ b/src/components/ContactEditor.tsx @@ -1,5 +1,5 @@ import { Match, Switch, createSignal, createUniqueId } from 'solid-js'; -import { SmallHeader } from '~/components/layout'; +import { SmallHeader, TinyButton } from '~/components/layout'; import { Dialog } from '@kobalte/core'; import close from "~/assets/icons/close.svg"; import { SubmitHandler } from '@modular-forms/solid'; @@ -39,7 +39,7 @@ export function ContactEditor(props: { createContact: (contact: ContactItem) => - + setIsOpen(true)}>+ Add Contact diff --git a/src/components/JsonModal.tsx b/src/components/JsonModal.tsx index 813a0ff..29ec256 100644 --- a/src/components/JsonModal.tsx +++ b/src/components/JsonModal.tsx @@ -5,7 +5,7 @@ import { useCopy } from "~/utils/useCopy"; 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 = "max-w-[600px] max-h-full p-4 bg-gray/50 backdrop-blur-md shadow-xl rounded-xl border border-white/10" +const DIALOG_CONTENT = "max-w-[600px] max-h-full mx-4 p-4 bg-neutral-900/50 backdrop-blur-md shadow-xl rounded-xl border border-white/10" export function JsonModal(props: { title: string, open: boolean, data?: unknown, setOpen: (open: boolean) => void, children?: JSX.Element }) { const json = createMemo(() => JSON.stringify(props.data, null, 2)); diff --git a/src/components/ShareCard.tsx b/src/components/ShareCard.tsx new file mode 100644 index 0000000..8221f56 --- /dev/null +++ b/src/components/ShareCard.tsx @@ -0,0 +1,71 @@ +import { Card, VStack } from "~/components/layout"; +import { useCopy } from "~/utils/useCopy"; +import copyIcon from "~/assets/icons/copy.svg" +import shareIcon from "~/assets/icons/share.svg" +import eyeIcon from "~/assets/icons/eye.svg" +import { Show, createSignal } from "solid-js"; +import { JsonModal } from "./JsonModal"; + +const STYLE = "px-4 py-2 rounded-xl border-2 border-white flex gap-2 items-center font-semibold" + +function ShareButton(props: { receiveString: string }) { + async function share(receiveString: string) { + // If the browser doesn't support share we can just copy the address + if (!navigator.share) { + console.error("Share not supported") + } + const shareData: ShareData = { + title: "Mutiny Wallet", + text: receiveString, + } + try { + await navigator.share(shareData) + } catch (e) { + console.error(e) + } + } + + return ( + + ) +} + +export function StringShower(props: { text: string }) { + const [open, setOpen] = createSignal(false); + return ( + <> + +
+ 
{props.text}
+ +
+ + + ) +} + +export function ShareCard(props: { text?: string }) { + const [copy, copied] = useCopy({ copiedTimeout: 1000 }); + + function handleCopy() { + copy(props.text ?? "") + } + + return ( + + + + +
+ + + + +
+ + + ) + +} \ No newline at end of file diff --git a/src/components/TagEditor.tsx b/src/components/TagEditor.tsx index af538c4..09e01c7 100644 --- a/src/components/TagEditor.tsx +++ b/src/components/TagEditor.tsx @@ -1,22 +1,21 @@ import { Select, createOptions } from "@thisbeyond/solid-select"; import "~/styles/solid-select.css" -import { SmallHeader } from "./layout"; import { For, createUniqueId } from "solid-js"; import { ContactEditor } from "./ContactEditor"; import { ContactItem, TagItem, TextItem, addContact } from "~/state/contacts"; +import { TinyButton } from "./layout"; // take two arrays, subtract the second from the first, then return the first function subtract(a: T[], b: T[]) { const set = new Set(b); return a.filter(x => !set.has(x)); -}; +} const createValue = (name: string): TextItem => { return { id: createUniqueId(), name, kind: "text" }; }; -export function TagEditor(props: { title: string, values: TagItem[], setValues: (values: TagItem[]) => void, selectedValues: TagItem[], setSelectedValues: (values: TagItem[]) => void, placeholder: string }) { - console.log(props.values); +export function TagEditor(props: { values: TagItem[], setValues: (values: TagItem[]) => void, selectedValues: TagItem[], setSelectedValues: (values: TagItem[]) => void, placeholder: string }) { const onChange = (selected: TagItem[]) => { props.setSelectedValues(selected); @@ -42,7 +41,7 @@ export function TagEditor(props: { title: string, values: TagItem[], setValues: return (
- {props.title} + {/* FIXME this is causing overflow scroll for now good reason */}