diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-15 11:18:58 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-15 11:18:58 -0300 |
commit | 1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5 (patch) | |
tree | 99e8241a5eb5af4d752be93a460004bc0c6255aa /packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx | |
parent | 9692f589c687a2ba39a705ca4238cf123f444c61 (diff) | |
download | wallet-core-1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5.tar.xz |
prettier
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx | 94 |
1 files changed, 75 insertions, 19 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index be2cbe41d..b48dcbaf2 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -1,8 +1,35 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + import { AmountJson, Amounts } from "@gnu-taler/taler-util"; -import { VNode } from "preact"; +import { VNode, h } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage"; -import { ButtonPrimary, Input, InputWithLabel, LightText, WalletBox } from "../components/styled"; +import { + ButtonPrimary, + Input, + InputWithLabel, + LightText, + WalletBox, +} from "../components/styled"; export interface Props { error: string | undefined; @@ -13,44 +40,73 @@ export interface Props { onCreate: (exchangeBaseUrl: string, amount: AmountJson) => Promise<void>; } -export function CreateManualWithdraw({ onExchangeChange, initialExchange, initialAmount, error, currency, onCreate }: Props): VNode { +export function CreateManualWithdraw({ + onExchangeChange, + initialExchange, + initialAmount, + error, + currency, + onCreate, +}: Props): VNode { const [exchange, setExchange] = useState(initialExchange || ""); const [amount, setAmount] = useState(initialAmount || ""); - const parsedAmount = Amounts.parse(`${currency}:${amount}`) + const parsedAmount = Amounts.parse(`${currency}:${amount}`); let timeout = useRef<number | undefined>(undefined); useEffect(() => { - if (timeout) window.clearTimeout(timeout.current) + if (timeout) window.clearTimeout(timeout.current); timeout.current = window.setTimeout(async () => { - onExchangeChange(exchange) + onExchangeChange(exchange); }, 1000); - }, [exchange]) - + }, [exchange]); return ( <WalletBox> <section> - <ErrorMessage title={error && "Can't create the reserve"} description={error} /> + <ErrorMessage + title={error && "Can't create the reserve"} + description={error} + /> <h2>Manual Withdrawal</h2> - <LightText>Choose a exchange to create a reserve and then fill the reserve to withdraw the coins</LightText> + <LightText> + Choose a exchange to create a reserve and then fill the reserve to + withdraw the coins + </LightText> <p> <Input invalid={!!exchange && !currency}> <label>Exchange</label> - <input type="text" placeholder="https://" value={exchange} onChange={(e) => setExchange(e.currentTarget.value)} /> + <input + type="text" + placeholder="https://" + value={exchange} + onChange={(e) => setExchange(e.currentTarget.value)} + /> <small>http://exchange.taler:8081</small> </Input> - {currency && <InputWithLabel invalid={!!amount && !parsedAmount}> - <label>Amount</label> - <div> - <div>{currency}</div> - <input type="number" style={{ paddingLeft: `${currency.length}em` }} value={amount} onChange={e => setAmount(e.currentTarget.value)} /> - </div> - </InputWithLabel>} + {currency && ( + <InputWithLabel invalid={!!amount && !parsedAmount}> + <label>Amount</label> + <div> + <div>{currency}</div> + <input + type="number" + style={{ paddingLeft: `${currency.length}em` }} + value={amount} + onChange={(e) => setAmount(e.currentTarget.value)} + /> + </div> + </InputWithLabel> + )} </p> </section> <footer> <div /> - <ButtonPrimary disabled={!parsedAmount || !exchange} onClick={() => onCreate(exchange, parsedAmount!)}>Create</ButtonPrimary> + <ButtonPrimary + disabled={!parsedAmount || !exchange} + onClick={() => onCreate(exchange, parsedAmount!)} + > + Create + </ButtonPrimary> </footer> </WalletBox> ); |