diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-16 13:59:53 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-16 14:01:38 -0300 |
commit | a994009d2f094c4d9c12da68dac3abb28bdef4b3 (patch) | |
tree | e403a58663f81889982635ffb324f9739e6976b3 /packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx | |
parent | c33ed919719845f518d6491ef37df6ae16820dd0 (diff) | |
download | wallet-core-a994009d2f094c4d9c12da68dac3abb28bdef4b3.tar.xz |
reserveCreated new design
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx | 89 |
1 files changed, 63 insertions, 26 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index b48dcbaf2..140ac2d40 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -20,9 +20,10 @@ */ import { AmountJson, Amounts } from "@gnu-taler/taler-util"; -import { VNode, h } from "preact"; -import { useEffect, useRef, useState } from "preact/hooks"; +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage"; +import { SelectList } from "../components/SelectList"; import { ButtonPrimary, Input, @@ -33,32 +34,56 @@ import { export interface Props { error: string | undefined; - currency: string | undefined; - initialExchange?: string; initialAmount?: string; - onExchangeChange: (exchange: string) => void; + exchangeList: Record<string, string>; onCreate: (exchangeBaseUrl: string, amount: AmountJson) => Promise<void>; } export function CreateManualWithdraw({ - onExchangeChange, - initialExchange, initialAmount, + exchangeList, error, - currency, onCreate, }: Props): VNode { + const exchangeSelectList = Object.keys(exchangeList); + const currencySelectList = Object.values(exchangeList); + const exchangeMap = exchangeSelectList.reduce( + (p, c) => ({ ...p, [c]: `${c} (${exchangeList[c]})` }), + {} as Record<string, string>, + ); + const currencyMap = currencySelectList.reduce( + (p, c) => ({ ...p, [c]: c }), + {} as Record<string, string>, + ); + + const initialExchange = + exchangeSelectList.length > 0 ? exchangeSelectList[0] : ""; + const [exchange, setExchange] = useState(initialExchange || ""); + const [currency, setCurrency] = useState(exchangeList[initialExchange] ?? ""); + const [amount, setAmount] = useState(initialAmount || ""); const parsedAmount = Amounts.parse(`${currency}:${amount}`); - let timeout = useRef<number | undefined>(undefined); - useEffect(() => { - if (timeout) window.clearTimeout(timeout.current); - timeout.current = window.setTimeout(async () => { - onExchangeChange(exchange); - }, 1000); - }, [exchange]); + function changeExchange(exchange: string): void { + setExchange(exchange); + setCurrency(exchangeList[exchange]); + } + + function changeCurrency(currency: string): void { + setCurrency(currency); + const found = Object.entries(exchangeList).find((e) => e[1] === currency); + + if (found) { + setExchange(found[0]); + } else { + setExchange(""); + } + } + + if (!initialExchange) { + return <div>There is no known exchange where to withdraw, add one</div>; + } return ( <WalletBox> @@ -73,26 +98,38 @@ export function CreateManualWithdraw({ withdraw the coins </LightText> <p> - <Input invalid={!!exchange && !currency}> - <label>Exchange</label> - <input - type="text" - placeholder="https://" + <Input> + <SelectList + label="Currency" + list={currencyMap} + name="currency" + value={currency} + onChange={changeCurrency} + /> + </Input> + <Input> + <SelectList + label="Exchange" + list={exchangeMap} + name="currency" value={exchange} - onChange={(e) => setExchange(e.currentTarget.value)} + onChange={changeExchange} /> - <small>http://exchange.taler:8081</small> </Input> + {/* <p style={{ display: "flex", justifyContent: "right" }}> + <a href="" style={{ marginLeft: "auto" }}> + Add new exchange + </a> + </p> */} {currency && ( <InputWithLabel invalid={!!amount && !parsedAmount}> <label>Amount</label> <div> - <div>{currency}</div> + <span>{currency}</span> <input type="number" - style={{ paddingLeft: `${currency.length}em` }} value={amount} - onChange={(e) => setAmount(e.currentTarget.value)} + onInput={(e) => setAmount(e.currentTarget.value)} /> </div> </InputWithLabel> @@ -105,7 +142,7 @@ export function CreateManualWithdraw({ disabled={!parsedAmount || !exchange} onClick={() => onCreate(exchange, parsedAmount!)} > - Create + Start withdrawal </ButtonPrimary> </footer> </WalletBox> |