From 88618df7b870732f4f29a80686dd4f4cf20887f8 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 22 Nov 2022 15:43:39 -0300 Subject: amount field --- .../src/wallet/CreateManualWithdraw.tsx | 282 --------------------- 1 file changed, 282 deletions(-) delete mode 100644 packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx (limited to 'packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx') diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx deleted file mode 100644 index dd80faccd..000000000 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ /dev/null @@ -1,282 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 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 - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { AmountJson, Amounts } from "@gnu-taler/taler-util"; -import { Fragment, h, VNode } from "preact"; -import { useState } from "preact/hooks"; -import { ErrorMessage } from "../components/ErrorMessage.js"; -import { SelectList } from "../components/SelectList.js"; -import { - BoldLight, - Centered, - Input, - InputWithLabel, - LightText, - LinkPrimary, - SubTitle, -} from "../components/styled/index.js"; -import { useTranslationContext } from "../context/translation.js"; -import { Button } from "../mui/Button.js"; -import { SelectFieldHandler, TextFieldHandler } from "../mui/handlers.js"; -import { Pages } from "../NavigationBar.js"; - -export interface Props { - error: string | undefined; - initialAmount?: string; - exchangeUrlWithCurrency: Record; - onCreate: (exchangeBaseUrl: string, amount: AmountJson) => Promise; - initialCurrency?: string; -} - -export interface State { - noExchangeFound: boolean; - parsedAmount: AmountJson | undefined; - amount: TextFieldHandler; - currency: SelectFieldHandler; - exchange: SelectFieldHandler; -} - -export function useComponentState( - exchangeUrlWithCurrency: Record, - initialAmount: string | undefined, - initialCurrency: string | undefined, -): State { - const exchangeSelectList = Object.keys(exchangeUrlWithCurrency); - const currencySelectList = Object.values(exchangeUrlWithCurrency); - const exchangeMap = exchangeSelectList.reduce( - (p, c) => ({ ...p, [c]: `${c} (${exchangeUrlWithCurrency[c]})` }), - {} as Record, - ); - const currencyMap = currencySelectList.reduce( - (p, c) => ({ ...p, [c]: c }), - {} as Record, - ); - - const foundExchangeForCurrency = exchangeSelectList.findIndex( - (e) => exchangeUrlWithCurrency[e] === initialCurrency, - ); - - const initialExchange = - foundExchangeForCurrency !== -1 - ? exchangeSelectList[foundExchangeForCurrency] - : !initialCurrency && exchangeSelectList.length > 0 - ? exchangeSelectList[0] - : undefined; - - const [exchange, setExchange] = useState(initialExchange || ""); - const [currency, setCurrency] = useState( - initialExchange ? exchangeUrlWithCurrency[initialExchange] : "", - ); - - const [amount, setAmount] = useState(initialAmount || ""); - const parsedAmount = Amounts.parse(`${currency}:${amount}`); - - async function changeExchange(exchange: string): Promise { - setExchange(exchange); - setCurrency(exchangeUrlWithCurrency[exchange]); - } - - async function changeCurrency(currency: string): Promise { - setCurrency(currency); - const found = Object.entries(exchangeUrlWithCurrency).find( - (e) => e[1] === currency, - ); - - if (found) { - setExchange(found[0]); - } else { - setExchange(""); - } - } - return { - noExchangeFound: initialExchange === undefined, - currency: { - list: currencyMap, - value: currency, - onChange: changeCurrency, - }, - exchange: { - list: exchangeMap, - value: exchange, - onChange: changeExchange, - }, - amount: { - value: amount, - onInput: async (e: string) => setAmount(e), - }, - parsedAmount, - }; -} - -export function CreateManualWithdraw({ - initialAmount, - exchangeUrlWithCurrency, - error, - initialCurrency, - onCreate, -}: Props): VNode { - const { i18n } = useTranslationContext(); - - const state = useComponentState( - exchangeUrlWithCurrency, - initialAmount, - initialCurrency, - ); - - if (state.noExchangeFound) { - if (initialCurrency) { - return ( -
- - - Manual Withdrawal for {initialCurrency} - - - - - Choose a exchange from where the coins will be withdrawn. The - exchange will send the coins to this wallet after receiving a wire - transfer with the correct subject. - - - - - - No exchange found for {initialCurrency} - - - - Add Exchange - - -
- ); - } - return ( -
- - - Manual Withdrawal for {state.currency.value} - - - - - Choose a exchange from where the coins will be withdrawn. The - exchange will send the coins to this wallet after receiving a wire - transfer with the correct subject. - - - - - No exchange configured - - - Add Exchange - - -
- ); - } - - return ( - -
- {error && ( - Can't create the reserve - } - description={error} - /> - )} - - - Manual Withdrawal for {state.currency.value} - - - - - Choose a exchange from where the coins will be withdrawn. The - exchange will send the coins to this wallet after receiving a wire - transfer with the correct subject. - - -

- - Currency} - name="currency" - {...state.currency} - /> - - - Exchange} - name="exchange" - {...state.exchange} - /> - -

- - Add Exchange - -
- {state.currency.value && ( - - -
- {state.currency.value} - state.amount.onInput(e.currentTarget.value)} - /> -
- - )} -

-
- - - ); -} -- cgit v1.2.3