diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
11 files changed, 235 insertions, 283 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/AddAccount/index.ts b/packages/taler-wallet-webextension/src/wallet/AddAccount/index.ts index 527c9c8e2..0b50d9d85 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddAccount/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddAccount/index.ts @@ -20,7 +20,11 @@ import { compose, StateViewMap } from "../../utils/index.js"; import { LoadingUriView, ReadyView } from "./views.js"; import * as wxApi from "../../wxApi.js"; import { useComponentState } from "./state.js"; -import { ButtonHandler, SelectFieldHandler, TextFieldHandler } from "../../mui/handlers.js"; +import { + ButtonHandler, + SelectFieldHandler, + TextFieldHandler, +} from "../../mui/handlers.js"; export interface Props { currency: string; diff --git a/packages/taler-wallet-webextension/src/wallet/AddAccount/state.ts b/packages/taler-wallet-webextension/src/wallet/AddAccount/state.ts index 8f7920d35..f14c4c1bb 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddAccount/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddAccount/state.ts @@ -20,16 +20,18 @@ import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import * as wxApi from "../../wxApi.js"; import { Props, State } from "./index.js"; -export function useComponentState({ currency, onAccountAdded, onCancel }: Props, api: typeof wxApi): State { +export function useComponentState( + { currency, onAccountAdded, onCancel }: Props, + api: typeof wxApi, +): State { const hook = useAsyncAsHook(async () => { const { accounts } = await api.listKnownBankAccounts(currency); return { accounts }; }); - const [payto, setPayto] = useState("") - const [alias, setAlias] = useState("") - const [type, setType] = useState("") - + const [payto, setPayto] = useState(""); + const [alias, setAlias] = useState(""); + const [type, setType] = useState(""); if (!hook) { return { @@ -41,31 +43,38 @@ export function useComponentState({ currency, onAccountAdded, onCancel }: Props, return { status: "loading-error", error: hook, - } + }; } const accountType: Record<string, string> = { "": "Choose one account", - "iban": "IBAN", - "bitcoin": "Bitcoin", - "x-taler-bank": "Taler Bank" - } - const uri = parsePaytoUri(payto) - const found = hook.response.accounts.findIndex(a => stringifyPaytoUri(a.uri) === payto) !== -1 + iban: "IBAN", + bitcoin: "Bitcoin", + "x-taler-bank": "Taler Bank", + }; + const uri = parsePaytoUri(payto); + const found = + hook.response.accounts.findIndex( + (a) => stringifyPaytoUri(a.uri) === payto, + ) !== -1; async function addAccount(): Promise<void> { if (!uri || found) return; - await api.addKnownBankAccounts(uri, currency, alias) - onAccountAdded(payto) + await api.addKnownBankAccounts(uri, currency, alias); + onAccountAdded(payto); } - const paytoUriError = payto === "" ? undefined - : !uri ? "the uri is not ok" - : found ? "that account is already present" - : undefined + const paytoUriError = + payto === "" + ? undefined + : !uri + ? "the uri is not ok" + : found + ? "that account is already present" + : undefined; - const unableToAdd = !type || !alias || paytoUriError + const unableToAdd = !type || !alias || paytoUriError; return { status: "ready", @@ -75,27 +84,27 @@ export function useComponentState({ currency, onAccountAdded, onCancel }: Props, list: accountType, value: type, onChange: async (v) => { - setType(v) - } + setType(v); + }, }, alias: { value: alias, onInput: async (v) => { - setAlias(v) + setAlias(v); }, }, uri: { value: payto, error: paytoUriError, onInput: async (v) => { - setPayto(v) - } + setPayto(v); + }, }, onAccountAdded: { - onClick: unableToAdd ? undefined : addAccount + onClick: unableToAdd ? undefined : addAccount, }, onCancel: { - onClick: async () => onCancel() - } + onClick: async () => onCancel(), + }, }; } diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts index eb97ccf7f..81d401a70 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts @@ -17,11 +17,22 @@ import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { AmountOrCurrencyErrorView, LoadingErrorView, NoAccountToDepositView, NoEnoughBalanceView, ReadyView } from "./views.js"; +import { + AmountOrCurrencyErrorView, + LoadingErrorView, + NoAccountToDepositView, + NoEnoughBalanceView, + ReadyView, +} from "./views.js"; import * as wxApi from "../../wxApi.js"; import { useComponentState } from "./state.js"; import { AmountJson, PaytoUri } from "@gnu-taler/taler-util"; -import { ButtonHandler, SelectFieldHandler, TextFieldHandler, ToggleHandler } from "../../mui/handlers.js"; +import { + ButtonHandler, + SelectFieldHandler, + TextFieldHandler, + ToggleHandler, +} from "../../mui/handlers.js"; import { AddAccountPage } from "../AddAccount/index.js"; export interface Props { @@ -31,7 +42,8 @@ export interface Props { onSuccess: (currency: string) => void; } -export type State = State.Loading +export type State = + | State.Loading | State.LoadingUriError | State.AmountOrCurrencyError | State.NoEnoughBalance diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts index 87705507c..57380a632 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts @@ -14,13 +14,24 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AmountJson, Amounts, DepositGroupFees, KnownBankAccountsInfo, parsePaytoUri, PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { + AmountJson, + Amounts, + DepositGroupFees, + KnownBankAccountsInfo, + parsePaytoUri, + PaytoUri, + stringifyPaytoUri, +} from "@gnu-taler/taler-util"; import { useState } from "preact/hooks"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import * as wxApi from "../../wxApi.js"; import { Props, State } from "./index.js"; -export function useComponentState({ amount: amountStr, currency: currencyStr, onCancel, onSuccess }: Props, api: typeof wxApi): State { +export function useComponentState( + { amount: amountStr, currency: currencyStr, onCancel, onSuccess }: Props, + api: typeof wxApi, +): State { const parsed = amountStr === undefined ? undefined : Amounts.parse(amountStr); const currency = parsed !== undefined ? parsed.currency : currencyStr; @@ -46,8 +57,8 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on if (!currency) { return { status: "amount-or-currency-error", - error: undefined - } + error: undefined, + }; } if (!hook) { @@ -60,7 +71,7 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on return { status: "loading-error", error: hook, - } + }; } const { accounts, balances } = hook.response; @@ -74,13 +85,12 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on onAccountAdded: (p: string) => { updateAccountFromList(p); setAddingAccount(false); - hook.retry() + hook.retry(); }, onCancel: () => { setAddingAccount(false); - } - , - } + }, + }; } const bs = balances.filter((b) => b.available.startsWith(currency)); @@ -103,13 +113,15 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on error: undefined, currency, onAddAccount: { - onClick: async () => { setAddingAccount(true) } + onClick: async () => { + setAddingAccount(true); + }, }, - } + }; } const accountMap = createLabelsForBankAccount(accounts); - accountMap[""] = "Select one account..." + accountMap[""] = "Select one account..."; async function updateAccountFromList(accountStr: string): Promise<void> { // const newSelected = !accountMap[accountStr] ? undefined : accountMap[accountStr]; @@ -144,18 +156,19 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on ? Amounts.sum([fee.wire, fee.coin, fee.refresh]).amount : Amounts.getZero(currency); - const totalToDeposit = parsedAmount && fee !== undefined - ? Amounts.sub(parsedAmount, totalFee).amount - : Amounts.getZero(currency); + const totalToDeposit = + parsedAmount && fee !== undefined + ? Amounts.sub(parsedAmount, totalFee).amount + : Amounts.getZero(currency); const isDirty = amount !== initialValue; const amountError = !isDirty ? undefined : !parsedAmount - ? "Invalid amount" - : Amounts.cmp(balance, parsedAmount) === -1 - ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}` - : undefined; + ? "Invalid amount" + : Amounts.cmp(balance, parsedAmount) === -1 + ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}` + : undefined; const unableToDeposit = !parsedAmount || @@ -181,10 +194,11 @@ export function useComponentState({ amount: amountStr, currency: currencyStr, on value: String(amount), onInput: updateAmount, error: amountError, - }, onAddAccount: { - onClick: async () => { setAddingAccount(true) } + onClick: async () => { + setAddingAccount(true); + }, }, account: { list: accountMap, @@ -219,22 +233,26 @@ async function getFeeForAmount( export function labelForAccountType(id: string) { switch (id) { - case "": return "Choose one"; - case "x-taler-bank": return "Taler Bank"; - case "bitcoin": return "Bitcoin"; - case "iban": return "IBAN"; - default: return id; + case "": + return "Choose one"; + case "x-taler-bank": + return "Taler Bank"; + case "bitcoin": + return "Bitcoin"; + case "iban": + return "IBAN"; + default: + return id; } } export function createLabelsForBankAccount( knownBankAccounts: Array<KnownBankAccountsInfo>, ): { [value: string]: string } { - const initialList: Record<string, string> = { - } + const initialList: Record<string, string> = {}; if (!knownBankAccounts.length) return initialList; return knownBankAccounts.reduce((prev, cur, i) => { - prev[stringifyPaytoUri(cur.uri)] = cur.alias + prev[stringifyPaytoUri(cur.uri)] = cur.alias; return prev; }, initialList); } diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts index a1d4ca85a..68df5e402 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts @@ -19,7 +19,14 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Amounts, Balance, BalancesResponse, DepositGroupFees, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { + Amounts, + Balance, + BalancesResponse, + DepositGroupFees, + parsePaytoUri, + stringifyPaytoUri, +} from "@gnu-taler/taler-util"; import { expect } from "chai"; import { mountHook } from "../../test-utils.js"; @@ -52,17 +59,19 @@ const nullFunction: any = () => null; type VoidFunction = () => void; describe("DepositPage states", () => { - it("should have status 'no-enough-balance' when balance is empty", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:0` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: {} }), - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:0` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: {} }), + } as Partial<typeof wxApi> as any, + ), ); { @@ -111,25 +120,28 @@ describe("DepositPage states", () => { uri: parsePaytoUri("payto://iban/ES8877998399652238")!, kyc_completed: false, currency: "EUR", - alias: "my iban account" + alias: "my iban account", }; const talerBankPayto = { uri: parsePaytoUri("payto://x-taler-bank/ES8877998399652238")!, kyc_completed: false, currency: "EUR", - alias: "my taler account" + alias: "my taler account", }; it("should have status 'ready' but unable to deposit ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:1` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:1` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), + } as Partial<typeof wxApi> as any, + ), ); { @@ -155,14 +167,17 @@ describe("DepositPage states", () => { it.skip("should not be able to deposit more than the balance ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:1` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), - getFeeForDeposit: withoutFee, - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:1` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), + getFeeForDeposit: withoutFee, + } as Partial<typeof wxApi> as any, + ), ); { @@ -217,14 +232,17 @@ describe("DepositPage states", () => { it.skip("should calculate the fee upon entering amount ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:1` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), - getFeeForDeposit: withSomeFee, - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:1` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), + getFeeForDeposit: withSomeFee, + } as Partial<typeof wxApi> as any, + ), ); { @@ -281,16 +299,19 @@ describe("DepositPage states", () => { it("should calculate the fee upon selecting account ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:1` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ - accounts: [ibanPayto, talerBankPayto], - }), - getFeeForDeposit: freeJustForIBAN, - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:1` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ + accounts: [ibanPayto, talerBankPayto], + }), + getFeeForDeposit: freeJustForIBAN, + } as Partial<typeof wxApi> as any, + ), ); { @@ -327,7 +348,6 @@ describe("DepositPage states", () => { expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); expect(r.depositHandler.onClick).undefined; - } await waitNextUpdate(""); @@ -358,7 +378,6 @@ describe("DepositPage states", () => { expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`)); expect(r.depositHandler.onClick).undefined; - } await waitNextUpdate(""); @@ -374,7 +393,6 @@ describe("DepositPage states", () => { expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`)); expect(r.depositHandler.onClick).undefined; - if (r.account.onChange === undefined) expect.fail(); r.account.onChange(stringifyPaytoUri(talerBankPayto.uri)); } @@ -391,7 +409,6 @@ describe("DepositPage states", () => { expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`)); expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`)); expect(r.depositHandler.onClick).undefined; - } await waitNextUpdate(""); @@ -414,14 +431,17 @@ describe("DepositPage states", () => { it.skip("should be able to deposit if has the enough balance ", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ currency, onCancel: nullFunction, onSuccess: nullFunction }, { - getBalance: async () => - ({ - balances: [{ available: `${currency}:15` }], - } as Partial<BalancesResponse>), - listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), - getFeeForDeposit: withSomeFee, - } as Partial<typeof wxApi> as any), + useComponentState( + { currency, onCancel: nullFunction, onSuccess: nullFunction }, + { + getBalance: async () => + ({ + balances: [{ available: `${currency}:15` }], + } as Partial<BalancesResponse>), + listKnownBankAccounts: async () => ({ accounts: [ibanPayto] }), + getFeeForDeposit: withSomeFee, + } as Partial<typeof wxApi> as any, + ), ); { @@ -456,7 +476,6 @@ describe("DepositPage states", () => { expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`)); expect(r.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:10`)); expect(r.depositHandler.onClick).undefined; - } await waitNextUpdate(); diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx index c6bff219f..b58fce8e6 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx @@ -19,20 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { termsXml } from "../cta/termsExample.js"; import { createExample } from "../test-utils.js"; -import { View as TestedComponent } from "./ExchangeAddConfirm.js"; - -function parseFromString(s: string): Document { - if (typeof window === "undefined") { - return { - querySelector: () => ({ - children: [], - }), - } as any; - } - return new window.DOMParser().parseFromString(s, "text/xml"); -} +import { ExchangeAddConfirmPage as TestedComponent } from "./ExchangeAddConfirm.js"; export default { title: "wallet/exchange add/confirm", @@ -46,33 +34,12 @@ export default { export const TermsNotFound = createExample(TestedComponent, { url: "https://exchange.demo.taler.net/", - terms: { - status: "notfound", - version: "1", - content: undefined, - }, - onAccept: async () => undefined, }); export const NewTerms = createExample(TestedComponent, { url: "https://exchange.demo.taler.net/", - terms: { - status: "new", - version: "1", - content: undefined, - }, - onAccept: async () => undefined, }); export const TermsChanged = createExample(TestedComponent, { url: "https://exchange.demo.taler.net/", - terms: { - status: "changed", - version: "1", - content: { - type: "xml", - document: parseFromString(termsXml), - }, - }, - onAccept: async () => undefined, }); diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx index a92ece066..b0602d1e6 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx @@ -17,10 +17,9 @@ import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Title } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; -import { TermsOfServiceSection } from "../cta/TermsOfServiceSection.js"; +import { TermsOfService } from "../cta/TermsOfService/index.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Button } from "../mui/Button.js"; -import { buildTermsOfServiceState, TermsState } from "../utils/index.js"; import * as wxApi from "../wxApi.js"; export interface Props { @@ -34,69 +33,9 @@ export function ExchangeAddConfirmPage({ onCancel, onConfirm, }: Props): VNode { - const detailsHook = useAsyncAsHook(async () => { - const tos = await wxApi.getExchangeTos(url, ["text/xml"]); - - const tosState = buildTermsOfServiceState(tos); - - return { tos: tosState }; - }); - - const termsNotFound: TermsState = { - status: "notfound", - version: "", - content: undefined, - }; - const terms = !detailsHook - ? undefined - : detailsHook.hasError - ? termsNotFound - : detailsHook.response.tos; - - // const [errorAccepting, setErrorAccepting] = useState<string | undefined>( - // undefined, - // ); - - const onAccept = async (): Promise<void> => { - if (!terms) return; - try { - await wxApi.setExchangeTosAccepted(url, terms.version); - } catch (e) { - if (e instanceof Error) { - // setErrorAccepting(e.message); - } - } - }; - return ( - <View - url={url} - onAccept={onAccept} - onCancel={onCancel} - onConfirm={onConfirm} - terms={terms} - /> - ); -} - -export interface ViewProps { - url: string; - terms: TermsState | undefined; - onAccept: (b: boolean) => Promise<void>; - onCancel: () => Promise<void>; - onConfirm: () => Promise<void>; -} - -export function View({ - url, - terms, - onAccept: doAccept, - onConfirm, - onCancel, -}: ViewProps): VNode { const { i18n } = useTranslationContext(); - const needsReview = - !terms || terms.status === "changed" || terms.status === "new"; - const [reviewed, setReviewed] = useState<boolean>(false); + + const [accepted, setAccepted] = useState(false); return ( <Fragment> @@ -111,52 +50,27 @@ export function View({ </a> </div> </section> - {terms && ( - <TermsOfServiceSection - reviewed={reviewed} - reviewing={true} - terms={terms} - onAccept={(value) => - doAccept(value).then(() => { - setReviewed(value); - }) - } - /> - )} + + <TermsOfService key="terms" exchangeUrl={url} onChange={setAccepted} /> <footer> - <Button variant="contained" color="secondary" onClick={onCancel}> + <Button + key="cancel" + variant="contained" + color="secondary" + onClick={onCancel} + > <i18n.Translate>Cancel</i18n.Translate> </Button> - {!terms && ( - <Button variant="contained" disabled> - <i18n.Translate>Loading terms..</i18n.Translate> - </Button> - )} - {terms && ( - <Fragment> - {needsReview && !reviewed && ( - <Button - variant="contained" - color="success" - disabled - onClick={onConfirm} - > - <i18n.Translate>Add exchange</i18n.Translate> - </Button> - )} - {(terms.status === "accepted" || (needsReview && reviewed)) && ( - <Button variant="contained" color="success" onClick={onConfirm}> - <i18n.Translate>Add exchange</i18n.Translate> - </Button> - )} - {terms.status === "notfound" && ( - <Button variant="contained" color="warning" onClick={onConfirm}> - <i18n.Translate>Add exchange anyway</i18n.Translate> - </Button> - )} - </Fragment> - )} + <Button + key="add" + variant="contained" + color="success" + disabled={!accepted} + onClick={onConfirm} + > + <i18n.Translate>Add exchange</i18n.Translate> + </Button> </footer> </Fragment> ); diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts index 9603b3d2c..06d519268 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts @@ -17,13 +17,12 @@ import { DenomOperationMap, ExchangeFullDetails, - ExchangeListItem, FeeDescriptionPair + ExchangeListItem, + FeeDescriptionPair, } from "@gnu-taler/taler-util"; import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; -import { - State as SelectExchangeState -} from "../../hooks/useSelectedExchange.js"; +import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js"; import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; import * as wxApi from "../../wxApi.js"; @@ -32,12 +31,12 @@ import { ComparingView, ErrorLoadingView, NoExchangesView, - ReadyView + ReadyView, } from "./views.js"; export interface Props { - list: ExchangeListItem[], - currentExchange: string, + list: ExchangeListItem[]; + currentExchange: string; onCancel: () => Promise<void>; onSelection: (exchange: string) => Promise<void>; } diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts index 954e52239..e1b270a42 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts @@ -25,9 +25,13 @@ export function useComponentState( { onCancel, onSelection, list: exchanges, currentExchange }: Props, api: typeof wxApi, ): State { - const initialValue = exchanges.findIndex(e => e.exchangeBaseUrl === currentExchange); + const initialValue = exchanges.findIndex( + (e) => e.exchangeBaseUrl === currentExchange, + ); if (initialValue === -1) { - throw Error(`wrong usage of ExchangeSelection component, currentExchange '${currentExchange}' is not in the list of exchanges`) + throw Error( + `wrong usage of ExchangeSelection component, currentExchange '${currentExchange}' is not in the list of exchanges`, + ); } const [value, setValue] = useState(String(initialValue)); @@ -113,7 +117,7 @@ export function useComponentState( withdraw: createPairTimeline( selected.denomFees.withdraw, original.denomFees.withdraw, - ) + ), }; return { diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx index 6b753e215..d39aa3878 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx @@ -14,24 +14,20 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { - Amounts, - FeeDescription, - FeeDescriptionPair, -} from "@gnu-taler/taler-util"; +import { FeeDescription, FeeDescriptionPair } from "@gnu-taler/taler-util"; import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Amount } from "../../components/Amount.js"; import { LoadingError } from "../../components/LoadingError.js"; import { SelectList } from "../../components/SelectList.js"; -import { Input, LinkPrimary, SvgIcon } from "../../components/styled/index.js"; +import { Input, SvgIcon } from "../../components/styled/index.js"; import { Time } from "../../components/Time.js"; import { useTranslationContext } from "../../context/translation.js"; +import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js"; import { Button } from "../../mui/Button.js"; import arrowDown from "../../svg/chevron-down.svg"; import { State } from "./index.js"; -import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js"; const ButtonGroup = styled.div` & > button { @@ -39,6 +35,16 @@ const ButtonGroup = styled.div` margin-right: 8px; } `; +const ButtonGroupFooter = styled.div` + & { + display: flex; + justify-content: space-between; + } + & > button { + margin-left: 8px; + margin-right: 8px; + } +`; const FeeDescriptionTable = styled.table` & { @@ -343,10 +349,10 @@ export function ComparingView({ </table> </section> <section> - <ButtonGroup> - <LinkPrimary>Privacy policy</LinkPrimary> - <LinkPrimary>Terms of service</LinkPrimary> - </ButtonGroup> + <ButtonGroupFooter> + <Button variant="outlined">Privacy policy</Button> + <Button variant="outlined">Terms of service</Button> + </ButtonGroupFooter> </section> </Container> ); @@ -609,10 +615,10 @@ export function ReadyView({ </FeeDescriptionTable> </section> <section> - <ButtonGroup> - <LinkPrimary>Privacy policy</LinkPrimary> - <LinkPrimary>Terms of service</LinkPrimary> - </ButtonGroup> + <ButtonGroupFooter> + <Button variant="outlined">Privacy policy</Button> + <Button variant="outlined">Terms of service</Button> + </ButtonGroupFooter> </section> </Container> ); diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index 28ee229eb..56e610e8a 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -36,7 +36,7 @@ import { useBackupDeviceName } from "../hooks/useBackupDeviceName.js"; import { useAutoOpenPermissions } from "../hooks/useAutoOpenPermissions.js"; import { ToggleHandler } from "../mui/handlers.js"; import { Pages } from "../NavigationBar.js"; -import { buildTermsOfServiceStatus } from "../utils/index.js"; +import { buildTermsOfServiceStatus } from "../cta/TermsOfService/utils.js"; import * as wxApi from "../wxApi.js"; import { platform } from "../platform/api.js"; import { useClipboardPermissions } from "../hooks/useClipboardPermissions.js"; |