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

Merge pull request #52 from MutinyWallet/complaints-and-visual-bugs

Browse Source 
Fixes for amount editor
This commit is contained in:
Paul Miller
2023-04-26 17:13:16 -05:00
committed by GitHub
parent 9b249d1b17 bf8178cce5
commit ffeb0066b7
3 changed files with 44 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/AmountEditable.tsx
View File

@@ -1,20 +1,27 @@
import { For, createMemo, createSignal } from 'solid-js';
import { For, 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";
const CHARACTERS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "DEL"];
function SingleDigitButton(props: { character: string, onClick: (c: string) => void }) {
const FIXED_AMOUNTS = [{ label: "10k", amount: "10000" }, { label: "100k", amount: "100000" }, { label: "1m", amount: "1000000" }]
function SingleDigitButton(props: { character: string, onClick: (c: string) => void, fiat: boolean }) {
return (
<button
class="p-2 rounded-lg hover:bg-white/10 active:bg-m-blue text-white text-4xl font-semi font-mono"
onClick={() => props.onClick(props.character)}
>
{props.character}
</button>
// Skip the "." if it's fiat
<Show when={props.fiat || !(props.character === ".")} fallback={<div />}>
<button
disabled={props.character === "."}
class="disabled:opacity-50 p-2 rounded-lg hover:bg-white/10 active:bg-m-blue text-white text-4xl font-semi font-mono"
onClick={() => props.onClick(props.character)}
>
{props.character}
</button>
</Show>
);
}
@@ -124,9 +131,7 @@ export function AmountEditable(props: { initialAmountSats: string, setAmountSats
}
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"
const DIALOG_CONTENT = "h-screen-safe flex flex-col justify-between p-4 backdrop-blur-md bg-neutral-800/70"
return (
<Dialog.Root isOpen={isOpen()}>
@@ -136,8 +141,13 @@ export function AmountEditable(props: { initialAmountSats: string, setAmountSats
<Dialog.Portal>
{/* <Dialog.Overlay class={OVERLAY} /> */}
<div class={DIALOG_POSITIONER}>
<Dialog.Content class={DIALOG_CONTENT}>
<Dialog.Content class={DIALOG_CONTENT} onEscapeKeyDown={() => setIsOpen(false)}>
{/* TODO: figure out how to submit on enter */}
<div class="w-full flex justify-end">
<button tabindex="-1" onClick={() => setIsOpen(false)} class="hover:bg-white/10 rounded-lg active:bg-m-blue">
<img src={close} alt="Close" />
</button>
</div>
<form onSubmit={handleSubmit}>
<input ref={el => inputRef = el}
autofocus
@@ -148,24 +158,30 @@ export function AmountEditable(props: { initialAmountSats: string, setAmountSats
onInput={(e) => handleHiddenInput(e)}
/>
</form>
<div class="flex flex-col gap-4 max-w-[400px] mx-auto">
<div class="p-4 bg-black rounded-xl flex flex-col gap-4 items-center justify-center">
<h1 class={`font-light text-center transition-transform ease-out duration-300 text-6xl ${scale()}`}>
<div class="flex flex-col flex-1 justify-around gap-4 max-w-[400px] mx-auto w-full">
<div class="w-full p-4 flex flex-col gap-4 items-center justify-center">
<h1 class={`font-light text-center transition-transform ease-out duration-300 text-5xl ${scale()}`}>
{prettyPrint()}&nbsp;<span class='text-xl'>SATS</span>
</h1>
<h2 class="text-xl font-light text-white/70" >
&#8776; {amountInUsd()} <span class="text-sm">USD</span>
</h2>
</div>
<div class="grid grid-cols-3 w-full flex-none">
<For each={CHARACTERS}>
{(character) => (
<SingleDigitButton character={character} onClick={handleCharacterInput} />
<div class="flex justify-center gap-4 my-2">
<For each={FIXED_AMOUNTS}>
{(amount) => (
<button onClick={() => setDisplayAmount(amount.amount)} class="py-2 px-4 rounded-lg bg-white/10">{amount.label}</button>
)}
</For>
</div>
{/* TODO: this feels wrong */}
<Button intent="inactive" class="w-full flex-none" onClick={handleSubmit}>
<div class="grid grid-cols-3 w-full flex-none">
<For each={CHARACTERS}>
{(character) => (
<SingleDigitButton fiat={false} character={character} onClick={handleCharacterInput} />
)}
</For>
</div>
<Button intent="blue" class="w-full flex-none" onClick={handleSubmit}>
Set Amount
</Button>
</div>

1
src/components/layout/Radio.tsx
View File

@@ -6,6 +6,7 @@ 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, small?: boolean, }) {
return (
// TODO: rewrite this with CVA, props are bad for tailwind
<RadioGroup.Root value={props.value} onValueChange={(e) => props.onValueChange(e)} class={`grid w-full gap-${props.small ? "2" : "4"} grid-cols-${props.choices.length.toString()}`}>
<For each={props.choices}>
{choice =>

6
tailwind.config.cjs
View File

@@ -6,6 +6,12 @@ module.exports = {
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
safelist: [
'grid-cols-1',
'grid-cols-2',
'gap-2',
'gap-4'
],
variants: {
extend: {
borderWidth: ['responsive', 'last', 'hover', 'focus'],