diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Withdraw')
4 files changed, 137 insertions, 36 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts index 3dc2b7f3d..5fb3b1d80 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts @@ -17,6 +17,7 @@ import { AmountJson, AmountString, + CurrencySpecification, ExchangeListItem, WithdrawalExchangeAccountDetails, } from "@gnu-taler/taler-util"; @@ -92,7 +93,14 @@ export namespace State { doWithdrawal: ButtonHandler; doSelectExchange: ButtonHandler; - accounts: WithdrawalExchangeAccountDetails[]; + + chooseCurrencies: string[]; + selectedCurrency: string; + changeCurrency: (s: string) => void; + conversionInfo: { + spec: CurrencySpecification, + amount: AmountJson, + } | undefined; ageRestriction?: SelectFieldHandler; diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts index 46d221766..c10572d1a 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts @@ -297,7 +297,7 @@ function exchangeSelectionState( return selectedExchange; } - return () => { + return (): State.Success | State.LoadingUriError | State.Loading => { const { i18n } = useTranslationContext(); const { pushAlertOnError } = useAlertContext(); const [ageRestricted, setAgeRestricted] = useState(0); @@ -306,6 +306,7 @@ function exchangeSelectionState( currentExchange.tosStatus == ExchangeTosStatus.Pending || currentExchange.tosStatus == ExchangeTosStatus.Proposed; + const [selectedCurrency, setSelectedCurrency] = useState<string>(chosenAmount.currency) /** * With the exchange and amount, ask the wallet the information * about the withdrawal @@ -324,7 +325,7 @@ function exchangeSelectionState( raw: Amounts.parseOrThrow(info.amountRaw), effective: Amounts.parseOrThrow(info.amountEffective), }; - + return { amount: withdrawAmount, ageRestrictionOptions: info.ageRestrictionOptions, @@ -336,7 +337,7 @@ function exchangeSelectionState( undefined, ); const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false); - + async function doWithdrawAndCheckError(): Promise<void> { try { setDoingWithdraw(true); @@ -401,13 +402,26 @@ function exchangeSelectionState( } : undefined; + const altCurrencies = amountHook.response.accounts.filter(a => !!a.currencySpecification).map(a => a.currencySpecification!.name) + const chooseCurrencies = altCurrencies.length === 0 ? [] : [toBeReceived.currency, ...altCurrencies] + const convAccount = amountHook.response.accounts.find(c => { + return c.currencySpecification && c.currencySpecification.name === selectedCurrency + }) + const conversionInfo = !convAccount ? undefined : ({ + spec: convAccount.currencySpecification!, + amount: Amounts.parseOrThrow(convAccount.transferAmount!) + }) + return { status: "success", error: undefined, doSelectExchange: selectedExchange.doSelect, currentExchange, toBeReceived, - accounts: amountHook.response.accounts, + chooseCurrencies, + selectedCurrency, + changeCurrency: (s) => { setSelectedCurrency(s) }, + conversionInfo, withdrawalFee, chosenAmount, talerWithdrawUri, @@ -417,7 +431,6 @@ function exchangeSelectionState( doingWithdraw || tosNeedToBeAccepted ? undefined : pushAlertOnError(doWithdrawAndCheckError), - error: withdrawError, }, onTosUpdate, cancel, diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx index df70a5c95..a3127fafc 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { ExchangeListItem } from "@gnu-taler/taler-util"; +import { CurrencySpecification, ExchangeListItem } from "@gnu-taler/taler-util"; import * as tests from "@gnu-taler/web-util/testing"; import { nullFunction } from "../../mui/handlers.js"; // import { TermsState } from "../../utils/index.js"; @@ -64,7 +64,7 @@ export const TermsOfServiceNotYetLoaded = tests.createExample(SuccessView, { fraction: 0, value: 1, }, - accounts: [], + chooseCurrencies: [], }); export const WithSomeFee = tests.createExample(SuccessView, { @@ -91,7 +91,7 @@ export const WithSomeFee = tests.createExample(SuccessView, { value: 1, }, doSelectExchange: {}, - accounts: [], + chooseCurrencies: [], }); export const WithoutFee = tests.createExample(SuccessView, { @@ -118,7 +118,7 @@ export const WithoutFee = tests.createExample(SuccessView, { fraction: 0, value: 2, }, - accounts: [], + chooseCurrencies: [], }); export const EditExchangeUntouched = tests.createExample(SuccessView, { @@ -145,7 +145,7 @@ export const EditExchangeUntouched = tests.createExample(SuccessView, { fraction: 0, value: 2, }, - accounts: [], + chooseCurrencies: [], }); export const EditExchangeModified = tests.createExample(SuccessView, { @@ -172,7 +172,7 @@ export const EditExchangeModified = tests.createExample(SuccessView, { fraction: 0, value: 2, }, - accounts: [], + chooseCurrencies: [], }); export const WithAgeRestriction = tests.createExample(SuccessView, { @@ -200,31 +200,110 @@ export const WithAgeRestriction = tests.createExample(SuccessView, { fraction: 0, value: 2, }, - accounts: [], + chooseCurrencies: [], }); -export const WithAlternateCurrencies = tests.createExample(SuccessView, { +export const WithAlternateCurrenciesNETZBON = tests.createExample(SuccessView, { error: undefined, status: "success", chosenAmount: { - currency: "USD", + currency: "NETZBON", value: 2, fraction: 10000000, }, - accounts: [], + chooseCurrencies: ["NETZBON", "EUR"], + selectedCurrency: "NETZBON", doWithdrawal: { onClick: nullFunction }, currentExchange: { - exchangeBaseUrl: "https://exchange.demo.taler.net", + exchangeBaseUrl: "https://exchange.netzbon.ch", tos: {}, } as Partial<ExchangeListItem> as any, withdrawalFee: { - currency: "USD", + currency: "NETZBON", fraction: 10000000, value: 1, }, doSelectExchange: {}, toBeReceived: { - currency: "USD", + currency: "NETZBON", + fraction: 0, + value: 1, + }, +}); + +export const WithAlternateCurrenciesEURO = tests.createExample(SuccessView, { + error: undefined, + status: "success", + chosenAmount: { + currency: "NETZBON", + value: 2, + fraction: 10000000, + }, + chooseCurrencies: ["NETZBON", "EUR"], + selectedCurrency: "EUR", + changeCurrency: () => { }, + conversionInfo: { + spec: { + name: "EUR" + } as CurrencySpecification, + amount: { + currency: "EUR", + fraction: 10000000, + value: 1, + } + }, + doWithdrawal: { onClick: nullFunction }, + currentExchange: { + exchangeBaseUrl: "https://exchange.netzbon.ch", + tos: {}, + } as Partial<ExchangeListItem> as any, + withdrawalFee: { + currency: "NETZBON", + fraction: 10000000, + value: 1, + }, + doSelectExchange: {}, + toBeReceived: { + currency: "NETZBON", + fraction: 0, + value: 1, + }, +}); + +export const WithAlternateCurrenciesEURO11 = tests.createExample(SuccessView, { + error: undefined, + status: "success", + chosenAmount: { + currency: "NETZBON", + value: 2, + fraction: 10000000, + }, + chooseCurrencies: ["NETZBON", "EUR"], + selectedCurrency: "EUR", + changeCurrency: () => { }, + conversionInfo: { + spec: { + name: "EUR" + } as CurrencySpecification, + amount: { + currency: "EUR", + fraction: 10000000, + value: 2, + } + }, + doWithdrawal: { onClick: nullFunction }, + currentExchange: { + exchangeBaseUrl: "https://exchange.netzbon.ch", + tos: {}, + } as Partial<ExchangeListItem> as any, + withdrawalFee: { + currency: "NETZBON", + fraction: 10000000, + value: 1, + }, + doSelectExchange: {}, + toBeReceived: { + currency: "NETZBON", fraction: 0, value: 1, }, diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx index aa8b58707..d732e60e2 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx @@ -39,8 +39,7 @@ export function SuccessView(state: State.Success): VNode { const { i18n } = useTranslationContext(); const currentTosVersionIsAccepted = state.currentExchange.tosStatus === ExchangeTosStatus.Accepted; - const altCurrencies = state.accounts.filter(a => !!a.currencySpecification).map(a => a.currencySpecification!.name) - return ( + return ( <Fragment> <section style={{ textAlign: "left" }}> <Part @@ -67,25 +66,27 @@ export function SuccessView(state: State.Success): VNode { kind="neutral" big /> - <p> - This exchange allows alternative currency - </p> - <p> - <Button - variant="outlined" - > - EUR - </Button> - <Button - variant="outlined" - > - ARS - </Button> - </p> + {state.chooseCurrencies.length > 0 ? + <Fragment> + <p> + {state.chooseCurrencies.map(currency => { + return <Button variant={currency === state.selectedCurrency ? "contained" : "outlined"} + onClick={async () => { + state.changeCurrency(currency) + }} + > + {currency} + </Button> + })} + </p> + </Fragment> + : <Fragment />} + <Part title={i18n.str`Details`} text={ <WithdrawDetails + conversion={state.conversionInfo?.amount} amount={getAmountWithFee( state.toBeReceived, state.chosenAmount, |