diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx | 106 |
1 files changed, 74 insertions, 32 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index 0ee83c265..bf578dfb5 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -27,7 +27,6 @@ import { SelectList } from "../components/SelectList"; import { BoldLight, ButtonPrimary, - ButtonSuccess, Centered, Input, InputWithLabel, @@ -35,25 +34,21 @@ import { LinkPrimary, } from "../components/styled"; import { useTranslationContext } from "../context/translation"; +import { Pages } from "../NavigationBar"; export interface Props { error: string | undefined; initialAmount?: string; exchangeList: Record<string, string>; onCreate: (exchangeBaseUrl: string, amount: AmountJson) => Promise<void>; - onAddExchange: () => void; initialCurrency?: string; } -export function CreateManualWithdraw({ - initialAmount, - exchangeList, - error, - initialCurrency, - onCreate, - onAddExchange, -}: Props): VNode { - const { i18n } = useTranslationContext(); +export function useComponentState( + exchangeList: Record<string, string>, + initialAmount: string | undefined, + initialCurrency: string | undefined, +) { const exchangeSelectList = Object.keys(exchangeList); const currencySelectList = Object.values(exchangeList); const exchangeMap = exchangeSelectList.reduce( @@ -74,10 +69,12 @@ export function CreateManualWithdraw({ ? exchangeSelectList[foundExchangeForCurrency] : exchangeSelectList.length > 0 ? exchangeSelectList[0] - : ""; + : undefined; const [exchange, setExchange] = useState(initialExchange || ""); - const [currency, setCurrency] = useState(exchangeList[initialExchange] ?? ""); + const [currency, setCurrency] = useState( + initialExchange ? exchangeList[initialExchange] : "", + ); const [amount, setAmount] = useState(initialAmount || ""); const parsedAmount = Amounts.parse(`${currency}:${amount}`); @@ -97,8 +94,49 @@ export function CreateManualWithdraw({ setExchange(""); } } + return { + initialExchange, + currency: { + list: currencyMap, + value: currency, + onChange: changeCurrency, + }, + exchange: { + list: exchangeMap, + value: exchange, + onChange: changeExchange, + }, + amount: { + value: amount, + onInput: (e: string) => setAmount(e), + }, + parsedAmount, + }; +} - if (!initialExchange) { +interface InputHandler { + value: string; + onInput: (s: string) => void; +} + +interface SelectInputHandler { + list: Record<string, string>; + value: string; + onChange: (s: string) => void; +} + +export function CreateManualWithdraw({ + initialAmount, + exchangeList, + error, + initialCurrency, + onCreate, +}: Props): VNode { + const { i18n } = useTranslationContext(); + + const state = useComponentState(exchangeList, initialAmount, initialCurrency); + + if (!state.initialExchange) { return ( <section> <h2> @@ -115,9 +153,12 @@ export function CreateManualWithdraw({ <BoldLight> <i18n.Translate>No exchange configured</i18n.Translate> </BoldLight> - <ButtonSuccess onClick={onAddExchange}> - <i18n.Translate>Add exchange</i18n.Translate> - </ButtonSuccess> + <LinkPrimary + href={Pages.settings_exchange_add} + style={{ marginLeft: "auto" }} + > + <i18n.Translate>Add Exchange</i18n.Translate> + </LinkPrimary> </Centered> </section> ); @@ -146,37 +187,38 @@ export function CreateManualWithdraw({ <Input> <SelectList label={<i18n.Translate>Currency</i18n.Translate>} - list={currencyMap} name="currency" - value={currency} - onChange={changeCurrency} + {...state.currency} /> </Input> <Input> <SelectList label={<i18n.Translate>Exchange</i18n.Translate>} - list={exchangeMap} - name="currency" - value={exchange} - onChange={changeExchange} + name="exchange" + {...state.exchange} /> </Input> <div style={{ display: "flex", justifyContent: "space-between" }}> - <LinkPrimary onClick={onAddExchange} style={{ marginLeft: "auto" }}> + <LinkPrimary + href={Pages.settings_exchange_add} + style={{ marginLeft: "auto" }} + > <i18n.Translate>Add Exchange</i18n.Translate> </LinkPrimary> </div> - {currency && ( - <InputWithLabel invalid={!!amount && !parsedAmount}> + {state.currency.value && ( + <InputWithLabel + invalid={!!state.amount.value && !state.parsedAmount} + > <label> <i18n.Translate>Amount</i18n.Translate> </label> <div> - <span>{currency}</span> + <span>{state.currency.value}</span> <input type="number" - value={amount} - onInput={(e) => setAmount(e.currentTarget.value)} + value={state.amount.value} + onInput={(e) => state.amount.onInput(e.currentTarget.value)} /> </div> </InputWithLabel> @@ -186,8 +228,8 @@ export function CreateManualWithdraw({ <footer> <div /> <ButtonPrimary - disabled={!parsedAmount || !exchange} - onClick={() => onCreate(exchange, parsedAmount!)} + disabled={!state.parsedAmount || !state.exchange.value} + onClick={() => onCreate(state.exchange.value, state.parsedAmount!)} > <i18n.Translate>Start withdrawal</i18n.Translate> </ButtonPrimary> |