diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
7 files changed, 124 insertions, 54 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index 554952795..36feeb76e 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -21,7 +21,6 @@ import { AmountJson, Amounts, i18n } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { route } from "preact-router"; import { useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage"; import { SelectList } from "../components/SelectList"; @@ -35,13 +34,13 @@ import { LightText, LinkPrimary, } from "../components/styled"; -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; } export function CreateManualWithdraw({ @@ -49,6 +48,7 @@ export function CreateManualWithdraw({ exchangeList, error, onCreate, + onAddExchange, }: Props): VNode { const exchangeSelectList = Object.keys(exchangeList); const currencySelectList = Object.values(exchangeList); @@ -90,7 +90,7 @@ export function CreateManualWithdraw({ return ( <Centered style={{ marginTop: 100 }}> <BoldLight>No exchange configured</BoldLight> - <ButtonSuccess onClick={() => route(Pages.exchange_add)}> + <ButtonSuccess onClick={onAddExchange}> <i18n.Translate>Add exchange</i18n.Translate> </ButtonSuccess> </Centered> @@ -130,10 +130,7 @@ export function CreateManualWithdraw({ /> </Input> <div style={{ display: "flex", justifyContent: "space-between" }}> - <LinkPrimary - onClick={() => route(Pages.exchange_add)} - style={{ marginLeft: "auto" }} - > + <LinkPrimary onClick={onAddExchange} style={{ marginLeft: "auto" }}> <i18n.Translate>Add exchange</i18n.Translate> </LinkPrimary> </div> diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx index 5c7f94ecd..409e0b49e 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx @@ -5,7 +5,6 @@ import { Button, ButtonSuccess, ButtonWarning, - WarningBox, } from "../components/styled/index"; import { TermsOfServiceSection } from "../cta/TermsOfServiceSection"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; @@ -97,14 +96,6 @@ export function View({ </a> </div> </section> - {terms && terms.status === "notfound" && ( - <section> - <WarningBox> - {i18n.str`Exchange doesn't have terms of service`} - </WarningBox> - </section> - )} - {terms && ( <TermsOfServiceSection reviewed={reviewed} diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx index 10449c101..0c8336e69 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx @@ -27,7 +27,7 @@ import { ExchangeAddConfirmPage } from "./ExchangeAddConfirm"; import { ExchangeSetUrlPage } from "./ExchangeSetUrl"; interface Props { - currency: string; + currency?: string; onBack: () => void; } diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx index bc182cb70..9ea800fe4 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx @@ -55,6 +55,12 @@ export const WithDemoAsKnownExchange = createExample(TestedComponent, { { currency: "TESTKUDOS", exchangeBaseUrl: "https://exchange.demo.taler.net/", + tos: { + currentVersion: "1", + acceptedVersion: "1", + content: "content of tos", + contentType: "text/plain", + }, paytoUris: [], }, ], diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx index 88d5f1722..b3e8a2c25 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx @@ -22,11 +22,13 @@ import { AcceptManualWithdrawalResult, AmountJson, Amounts, + NotificationType, } from "@gnu-taler/taler-util"; import { ReserveCreated } from "./ReserveCreated"; import { route } from "preact-router"; import { Pages } from "../NavigationBar"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; +import { ExchangeAddPage } from "./ExchangeAddPage"; export function ManualWithdrawPage(): VNode { const [success, setSuccess] = useState< @@ -39,7 +41,9 @@ export function ManualWithdrawPage(): VNode { >(undefined); const [error, setError] = useState<string | undefined>(undefined); - const state = useAsyncAsHook(() => wxApi.listExchanges()); + const state = useAsyncAsHook(wxApi.listExchanges, [ + NotificationType.ExchangeAdded, + ]); async function doCreate( exchangeBaseUrl: string, @@ -61,6 +65,12 @@ export function ManualWithdrawPage(): VNode { } } + const [addingExchange, setAddingExchange] = useState(false); + + if (addingExchange) { + return <ExchangeAddPage onBack={() => setAddingExchange(false)} />; + } + if (success) { return ( <ReserveCreated @@ -91,6 +101,7 @@ export function ManualWithdrawPage(): VNode { return ( <CreateManualWithdraw + onAddExchange={() => setAddingExchange(true)} error={error} exchangeList={exchangeList} onCreate={doCreate} diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx index 6cc1368d5..8acf9d210 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx @@ -49,6 +49,52 @@ export const WithOneExchange = createExample(TestedComponent, { { currency: "USD", exchangeBaseUrl: "http://exchange.taler", + tos: { + currentVersion: "1", + acceptedVersion: "1", + content: "content of tos", + contentType: "text/plain", + }, + paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"], + }, + ], +}); + +export const WithExchangeInDifferentState = createExample(TestedComponent, { + deviceName: "this-is-the-device-name", + permissionsEnabled: true, + setDeviceName: () => Promise.resolve(), + knownExchanges: [ + { + currency: "USD", + exchangeBaseUrl: "http://exchange1.taler", + tos: { + currentVersion: "1", + acceptedVersion: "1", + content: "content of tos", + contentType: "text/plain", + }, + paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"], + }, + { + currency: "USD", + exchangeBaseUrl: "http://exchange2.taler", + tos: { + currentVersion: "2", + acceptedVersion: "1", + content: "content of tos", + contentType: "text/plain", + }, + paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"], + }, + { + currency: "USD", + exchangeBaseUrl: "http://exchange3.taler", + tos: { + currentVersion: "1", + content: "content of tos", + contentType: "text/plain", + }, paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"], }, ], diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index 5f1cd89d3..04656acc1 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -17,14 +17,19 @@ import { ExchangeListItem, i18n } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { Checkbox } from "../components/Checkbox"; -import { LinkPrimary } from "../components/styled"; +import { + DestructiveText, + LinkPrimary, + SuccessText, + WarningText, +} from "../components/styled"; import { useDevContext } from "../context/devContext"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import { useBackupDeviceName } from "../hooks/useBackupDeviceName"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; import { useLang } from "../hooks/useLang"; import { Pages } from "../NavigationBar"; -// import { strings as messages } from "../i18n/strings"; +import { buildTermsOfServiceStatus } from "../utils"; import * as wxApi from "../wxApi"; export function SettingsPage(): VNode { @@ -65,25 +70,8 @@ export interface ViewProps { knownExchanges: Array<ExchangeListItem>; } -// type LangsNames = { -// [P in keyof typeof messages]: string; -// }; - -// const names: LangsNames = { -// es: "Español [es]", -// en: "English [en]", -// fr: "Français [fr]", -// de: "Deutsch [de]", -// sv: "Svenska [sv]", -// it: "Italiano [it]", -// }; - export function SettingsView({ knownExchanges, - // lang, - // changeLang, - // deviceName, - // setDeviceName, permissionsEnabled, togglePermissions, developerMode, @@ -93,6 +81,17 @@ export function SettingsView({ <Fragment> <section> <h2> + <i18n.Translate>Permissions</i18n.Translate> + </h2> + <Checkbox + label="Automatically open wallet based on page content" + name="perm" + description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)" + enabled={permissionsEnabled} + onToggle={togglePermissions} + /> + + <h2> <i18n.Translate>Known exchanges</i18n.Translate> </h2> {!knownExchanges || !knownExchanges.length ? ( @@ -100,14 +99,44 @@ export function SettingsView({ ) : ( <Fragment> <table> - {knownExchanges.map((e, idx) => ( - <tr key={idx}> - <td>{e.currency}</td> - <td> - <a href={e.exchangeBaseUrl}>{e.exchangeBaseUrl}</a> - </td> + <thead> + <tr> + <th>currency</th> + <th>url</th> + <th>term of service</th> </tr> - ))} + </thead> + <tbody> + {knownExchanges.map((e, idx) => { + function Status(): VNode { + const status = buildTermsOfServiceStatus( + e.tos.content, + e.tos.acceptedVersion, + e.tos.currentVersion, + ); + switch (status) { + case "accepted": + return <SuccessText>ok</SuccessText>; + case "changed": + return <WarningText>changed!</WarningText>; + case "new": + case "notfound": + return <DestructiveText>not accepted</DestructiveText>; + } + } + return ( + <tr key={idx}> + <td>{e.currency}</td> + <td> + <a href={e.exchangeBaseUrl}>{e.exchangeBaseUrl}</a> + </td> + <td> + <Status /> + </td> + </tr> + ); + })} + </tbody> </table> </Fragment> )} @@ -116,16 +145,6 @@ export function SettingsView({ <LinkPrimary href={Pages.exchange_add}>Add an exchange</LinkPrimary> </div> - <h2> - <i18n.Translate>Permissions</i18n.Translate> - </h2> - <Checkbox - label="Automatically open wallet based on page content" - name="perm" - description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)" - enabled={permissionsEnabled} - onToggle={togglePermissions} - /> <h2>Config</h2> <Checkbox label="Developer mode" |