aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-17 06:14:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15 from MutinyWallet/connect-modal

Browse Source 
Peer connect info modal
This commit is contained in:
Paul Miller
2023-04-10 15:32:23 -05:00
committed by GitHub
parent e52a742fc3 3dc51e9da8
commit 1df7cd9aa3
16 changed files with 536 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.env
View File

@@ -1,3 +1,11 @@
# LOCALHOST REGTEST
VITE_NETWORK="regtest"
VITE_PROXY="wss://p.mutinywallet.com"
VITE_ESPLORA="http://localhost:3003"
#SIGNET
# VITE_NETWORK="signet"
# VITE_PROXY="wss://p.mutinywallet.com"
# VITE_ESPLORA="https://mutinynet.com/api"

11
package.json
View File

@@ -13,7 +13,7 @@
"@typescript-eslint/parser": "^5.57.1",
"autoprefixer": "^10.4.14",
"esbuild": "^0.14.54",
"eslint": "^8.37.0",
"eslint": "^8.38.0",
"postcss": "^8.4.21",
"solid-start-node": "^0.2.26",
"tailwindcss": "^3.3.1",
@@ -24,18 +24,19 @@
"workbox-window": "^6.5.4"
},
"dependencies": {
"@kobalte/core": "^0.8.2",
"@motionone/solid": "^10.16.0",
"@mutinywallet/node-manager": "^0.2.2",
"@mutinywallet/node-manager": "^0.2.3",
"@nostr-dev-kit/ndk": "^0.0.13",
"@solidjs/meta": "^0.28.4",
"@solidjs/router": "^0.8.2",
"class-variance-authority": "^0.4.0",
"nostr-tools": "^1.8.2",
"nostr-tools": "^1.8.3",
"qr-scanner": "^1.4.2",
"solid-js": "^1.7.2",
"solid-js": "^1.7.3",
"solid-qr-code": "^0.0.8",
"solid-start": "^0.2.26",
"undici": "^5.21.0"
"undici": "^5.21.2"
},
"engines": {
"node": ">=16.8"

599
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

54
src/components/App.tsx
View File

@@ -1,28 +1,11 @@
import { For } from "solid-js";
import { Motion, Presence } from "@motionone/solid";
import logo from '~/assets/icons/mutiny-logo.svg';
import send from '~/assets/icons/send.svg';
import BalanceBox from "./BalanceBox";
import SafeArea from "./SafeArea";
import NavBar from "./NavBar";
import BalanceBox from "~/components/BalanceBox";
import SafeArea from "~/components/SafeArea";
import NavBar from "~/components/NavBar";
// TODO: use this reload prompt for real
// import ReloadPrompt from "./Reload";
function ActivityItem() {
return (
<div class="flex flex-row border-b border-gray-500 gap-4 py-2">
<img src={send} class="App-logo" alt="logo" />
<div class='flex flex-col flex-1'>
<h1>Bitcoin Beefsteak</h1>
<h2>-1,441,851 SAT</h2>
<h3 class='text-sm text-gray-500'>Jul 24</h3>
</div>
<div class='text-sm font-semibold uppercase text-[#E23A5E]'>SEND</div>
</div>
)
}
import ReloadPrompt from "~/components/Reload";
import KitchenSink from './KitchenSink';
export default function App() {
return (
@@ -31,32 +14,9 @@ export default function App() {
<header>
<img src={logo} class="App-logo" alt="logo" />
</header>
{/* <ReloadPrompt /> */}
<BalanceBox />
<div class='rounded-xl p-4 flex flex-col gap-2 bg-[rgba(0,0,0,0.5)]'>
<header class='text-sm font-semibold uppercase'>
Activity
</header>
<For each={[1, 2, 3, 4]}>
{() =>
<Presence>
<Motion
initial={{ opacity: 0, scaleY: 0 }}
animate={{ opacity: 1, scaleY: 1 }}
exit={{ opacity: 0, scaleY: 0 }}
transition={{ duration: 0.3 }}
>
<ActivityItem />
</Motion>
</Presence>
}
</For>
<div class='flex justify-end py-4'>
<a href="#" class='underline text-sm'>
MORE
</a>
</div>
</div>
<ReloadPrompt />
<KitchenSink />
{/* safety div */}
<div class="h-32" />
</main>

4
src/components/BalanceBox.tsx
View File

@@ -2,7 +2,7 @@ import { Motion, Presence } from "@motionone/solid";
import { MutinyBalance } from "@mutinywallet/node-manager";
import { createResource, Show, Suspense } from "solid-js";
import { ButtonLink } from "./Button";
import { ButtonLink } from "~/components/Button";
import { useMegaStore } from "~/state/megaStore";
function prettyPrintAmount(n?: number | bigint): string {
@@ -13,7 +13,7 @@ function prettyPrintAmount(n?: number | bigint): string {
}
function prettyPrintBalance(b: MutinyBalance): string {
return prettyPrintAmount(b.confirmed.valueOf() + b.lightning.valueOf())
return prettyPrintAmount(b.confirmed.valueOf() + b.lightning.valueOf() + b.unconfirmed.valueOf())
}
export default function BalanceBox() {

13
src/components/Button.tsx
View File

@@ -1,5 +1,6 @@
import { cva, VariantProps } from "class-variance-authority";
import { children, JSX, ParentComponent, splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";
import { A } from "solid-start";
const button = cva(["p-4", "rounded-xl", "text-xl", "font-semibold"], {
@@ -23,7 +24,6 @@ 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<typeof button>
@@ -49,15 +49,20 @@ export const Button: ParentComponent<ButtonProps> = props => {
interface ButtonLinkProps extends JSX.ButtonHTMLAttributes<HTMLAnchorElement>, StyleProps {
href: string
target?: string
rel?: string
}
export const ButtonLink: ParentComponent<ButtonLinkProps> = props => {
const slot = children(() => props.children)
const [local, attrs] = splitProps(props, ['children', 'intent', 'layout', 'class', 'href'])
const [local, attrs] = splitProps(props, ['children', 'intent', 'layout', 'class', 'href', 'target', 'rel'])
return (
<A
<Dynamic
component={local.href?.includes('://') ? 'a' : A}
href={local.href}
target={local.target}
rel={local.rel}
{...attrs}
class={button({
class: `flex justify-center no-underline ${local.class || ""}`,
@@ -66,6 +71,6 @@ export const ButtonLink: ParentComponent<ButtonLinkProps> = props => {
})}
>
{slot()}
</A>
</Dynamic>
)
}

13
src/components/Card.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { ParentComponent } from "solid-js"
const Card: ParentComponent<{ title?: string }> = (props) => {
return (
<div class='rounded-xl p-4 flex flex-col gap-2 bg-[rgba(0,0,0,0.5)]'>
{props.title && <header class='text-sm font-semibold uppercase'>{props.title}</header>}
{props.children}
</div>
)
}
export default Card

20
src/components/Counter.css
View File

@@ -1,20 +0,0 @@
.increment {
font-family: inherit;
font-size: inherit;
padding: 1em 2em;
color: #335d92;
background-color: rgba(68, 107, 158, 0.1);
border-radius: 2em;
border: 2px solid rgba(68, 107, 158, 0);
outline: none;
width: 200px;
font-variant-numeric: tabular-nums;
}
.increment:focus {
border: 2px solid #335d92;
}
.increment:active {
background-color: rgba(68, 107, 158, 0.2);
}

12
src/components/Counter.tsx
View File

@@ -1,12 +0,0 @@
import { createSignal } from "solid-js";
import { Button } from "./Button";
import "./Counter.css";
export default function Counter() {
const [count, setCount] = createSignal(0);
return (
<Button onClick={() => setCount(count() + 1)}>
Clicks: {count()}
</Button>
);
}

29
src/components/KitchenSink.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { useMegaStore } from "~/state/megaStore";
import { ButtonLink } from "./Button";
import Card from "./Card";
import PeerConnectModal from "./PeerConnectModal";
import { createResource } from "solid-js";
export default function KitchenSink() {
const [state, _] = useMegaStore()
// TODO: would be nice if this was just newest unused address
const getNewAddress = async () => {
if (state.node_manager) {
console.log("Getting new address");
const address = await state.node_manager?.get_new_address();
return address
} else {
return undefined
}
};
const [address] = createResource(getNewAddress);
return (
<Card title="Kitchen Sink">
<PeerConnectModal />
<ButtonLink target="_blank" rel="noopener noreferrer" href={`https://faucet.mutinynet.com/?address=${address()}`}>Tap the Faucet</ButtonLink>
</Card>
)
}

65
src/components/PeerConnectModal.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { QRCodeSVG } from "solid-qr-code";
import Card from "~/components/Card";
import { As, Dialog } from "@kobalte/core";
import { Button } from "~/components/Button";
import { useMegaStore } from "~/state/megaStore";
import { Show, createResource } from "solid-js";
import { getExistingSettings } from "~/logic/nodeManagerSetup";
import getHostname from "~/utils/getHostname";
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"
const SMALL_HEADER = "text-sm font-semibold uppercase"
export default function PeerConnectModalKobalte() {
const [state, _] = useMegaStore()
const getPeerConnectString = async () => {
if (state.node_manager) {
const { proxy } = getExistingSettings();
const nodes = await state.node_manager.list_nodes();
const firstNode = nodes[0] as string || ""
const hostName = getHostname(proxy || "")
const connectString = `mutiny:${firstNode}@${hostName}`
return connectString
} else {
return undefined
}
};
const [peerConnectString] = createResource(getPeerConnectString);
// TODO: a lot of this markup is probably reusable as a "Modal" component
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<As component={Button}>Show Peer Connect Info</As>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay class={OVERLAY} />
<div class={DIALOG_POSITIONER}>
<Dialog.Content class={DIALOG_CONTENT}>
<div class="flex justify-between mb-2">
<Dialog.Title class={SMALL_HEADER}>Peer connect info</Dialog.Title>
<Dialog.CloseButton class="dialog__close-button">
<code>X</code>
</Dialog.CloseButton>
</div>
<Dialog.Description class="flex flex-col gap-4">
<Show when={peerConnectString()}>
<div class="w-full bg-white rounded-xl">
<QRCodeSVG value={peerConnectString() || ""} class="w-full h-full p-8 max-h-[400px]" />
</div>
<Card>
<code class="break-all">{peerConnectString() || ""}</code>
</Card>
</Show>
</Dialog.Description>
</Dialog.Content>
</div>
</Dialog.Portal>
</Dialog.Root >
)
}

45
src/components/Reload.tsx
View File

@@ -1,6 +1,10 @@
import type { Component } from 'solid-js'
import { Show } from 'solid-js'
// pwa-register doesn't have types apparently
// @ts-ignore
import { useRegisterSW } from 'virtual:pwa-register/solid'
import Card from './Card'
import { Button } from './Button'
const ReloadPrompt: Component = () => {
const {
@@ -21,29 +25,24 @@ const ReloadPrompt: Component = () => {
setNeedRefresh(false)
}
// TODO: for now we're just going to have it be invisible
return (<></>)
// return (
// <div>
// <Show when={offlineReady() || needRefresh()}>
// <div>
// <div>
// <Show
// fallback={<span>New content available, click on reload button to update.</span>}
// when={offlineReady()}
// >
// <span>App ready to work offline</span>
// </Show>
// </div>
// <Show when={needRefresh()}>
// <button onClick={() => updateServiceWorker(true)}>Reload</button>
// </Show>
// <button onClick={() => close()}>Close</button>
// </div>
// </Show>
// </div>
// )
return (
<Show when={offlineReady() || needRefresh()}>
<Card title="PWA settings">
<div>
<Show
fallback={<span>New content available, click on reload button to update.</span>}
when={offlineReady()}
>
<span>App ready to work offline</span>
</Show>
</div>
<Show when={needRefresh()}>
<Button onClick={() => updateServiceWorker(true)}>Reload</Button>
</Show>
<Button onClick={() => close()}>Close</Button>
</Card>
</Show>
)
}
export default ReloadPrompt

2
src/components/waitlist/Notes.tsx
View File

@@ -1,7 +1,7 @@
import { Component, For } from "solid-js";
import { Event, nip19 } from "nostr-tools"
import Linkify from "../Linkify";
import Linkify from "~/components/Linkify";
type NostrEvent = {
"content": string, "created_at": number, id?: string

2
src/root.tsx
View File

@@ -13,7 +13,7 @@ import {
Title,
} from "solid-start";
import "./root.css";
import { Provider as MegaStoreProvider } from "./state/megaStore";
import { Provider as MegaStoreProvider } from "~/state/megaStore";
export default function Root() {
return (

14
src/routes/index.tsx
View File

@@ -3,17 +3,23 @@ import App from "~/components/App";
import { Switch, Match } from "solid-js";
import { WaitlistAlreadyIn } from "~/components/waitlist/WaitlistAlreadyIn";
import WaitlistForm from "~/components/waitlist/WaitlistForm";
import ReloadPrompt from "~/components/Reload";
import { useMegaStore } from "~/state/megaStore";
import LoadingSpinner from "~/components/LoadingSpinner";
function FullscreenLoader() {
return (
<div class="w-screen h-screen flex justify-center items-center">
<LoadingSpinner />
</div>
);
}
export default function Home() {
const [state, _] = useMegaStore();
return (
<>
<ReloadPrompt />
<Switch fallback={<>Loading...</>} >
<Switch fallback={<FullscreenLoader />} >
{/* TODO: might need this state.node_manager guard on all wallet routes */}
<Match when={state.user_status === "approved" && state.node_manager}>
<App />

13
src/utils/getHostname.ts Normal file
View File

@@ -0,0 +1,13 @@
export default function getHostname(url: string): string {
// Check if the URL begins with "ws://" or "wss://"
if (url.startsWith("ws://")) {
// If it does, remove "ws://" from the URL
url = url.slice(5);
} else if (url.startsWith("wss://")) {
// If it begins with "wss://", remove "wss://" from the URL
url = url.slice(6);
}
// Return the resulting URL
return url;
}