Skip to content

Commit

Permalink
change input type=number in send and recieve amount (#242)
Browse files Browse the repository at this point in the history
* change input type to number

* styled to remove up and down arrow

* create min amount

* move styling in css

* add zero and negative error catches

* typos

* linter

* add mutiny toaster

* remove import

* replace typeof after operand

* remove comment

* remove comment

* typeof amount typo

* return input to empty string

* reset setAmount for non-numbers

* I guess zero-amount invoices area thing

* I guess zero-amount invoices area thing

* I guess zero-amount invoices area thing

* cover all edge cases better

* remove now unused styling

* allow users to input commas for tracking larger numbers better

* remove min for text type

* remove unused classes
  • Loading branch information
benalleng authored Dec 19, 2022
1 parent 6e0109e commit 7d41a7d
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 15 deletions.
33 changes: 22 additions & 11 deletions frontend/src/routes/Receive.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,30 @@ import { inputStyle } from "../styles";
import { objectToSearchParams } from "@util/dumb";
import { ReceiveParams } from "../routes/ReceiveQR";
import { useQueryClient } from "@tanstack/react-query";
import toast from "react-hot-toast";
import ActionButton from "@components/ActionButton";
import MutinyToaster from "@components/MutinyToaster";

function Receive() {
let navigate = useNavigate();

const [amount, setAmount] = useState("")
const [receiveAmount, setAmount] = useState("")
const [description, setDescription] = useState("")
const queryClient = useQueryClient()

function handleContinue() {
navigate("/")
const params = objectToSearchParams<ReceiveParams>({ amount, description })
// Important! Otherwise we might see a stale bip21 code
queryClient.invalidateQueries({ queryKey: ['bip21'] })
navigate(`/receive/qr?${params}`)
async function handleContinue() {
const amount = receiveAmount.replace(/,/g, "")
if (amount.match(/\D/)) {
setAmount('')
toast("That doesn't look right")
return
}
if (amount.length === 0 || amount.match(/^\d+$/)) {
const params = objectToSearchParams<ReceiveParams>({ amount, description })
// Important! Otherwise we might see a stale bip21 code
queryClient.invalidateQueries({ queryKey: ['bip21'] })
navigate(`/receive/qr?${params}`)
}
}

return (
Expand All @@ -33,13 +43,14 @@ function Receive() {
<div />
<p className="text-2xl font-light">Want some sats?</p>
<div className="flex flex-col gap-4">
<input onChange={(e) => setAmount(e.target.value)} className={`w-full ${inputStyle({ accent: "blue" })}`} type="text" placeholder='How much? (optional)' />
<input onChange={e => setAmount(e.target.value)} value={receiveAmount} className={`w-full ${inputStyle({ accent: "blue" })}`} type="text" inputMode="numeric" placeholder='How much? (optional)' />
<input onChange={(e) => setDescription(e.target.value)} className={`w-full ${inputStyle({ accent: "blue" })}`} type="text" placeholder='What for? (optional)' />
</div>
<div className='flex justify-start gap-2'>
<button onClick={handleContinue}>Continue</button>
</div>
<ActionButton onClick={() => handleContinue()}>
Continue
</ActionButton>
</ScreenMain>
<MutinyToaster />
</>
);
}
Expand Down
14 changes: 10 additions & 4 deletions frontend/src/routes/SendAmount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,21 @@ export default function SendAmount() {
const [searchParams] = useSearchParams();
const destination = searchParams.get("destination")

const [amount, setAmount] = useState("")
const [receiveAmount, setAmount] = useState("")

function handleContinue() {
if (!amount || typeof parseInt(amount) !== "number") {
const amount = receiveAmount.replace(/,/g, "")
if (!amount || amount.match(/\D/)) {
setAmount('')
toast("That doesn't look right")
return
} else if (parseInt(amount) <= 0) {
setAmount('')
toast("You can't send nothing")
return
}

if (destination && amount) {
if (destination && amount.match(/^[\d.]+$/)) {
navigate(`/send/confirm?destination=${destination}&amount=${amount}`)
}
}
Expand All @@ -37,7 +43,7 @@ export default function SendAmount() {
<div />
<div className="flex flex-col gap-4">
<p className="text-2xl font-light">How much would you like to send?</p>
<input onChange={e => setAmount(e.target.value)} className={`w-full ${inputStyle({ accent: "green" })}`} type="text" placeholder='sats' />
<input onChange={e => setAmount(e.target.value)} value={receiveAmount} className={`w-full ${inputStyle({ accent: "green" })}`} type="text" inputMode="numeric" placeholder='sats' />
</div>
<ActionButton onClick={handleContinue}>
Continue
Expand Down

0 comments on commit 7d41a7d

Please sign in to comment.