adding tos information in settings and return to manual withdraw when adding an exchange

2021-11-24 08:57:26 -03:00 · 2021-11-24 08:57:26 -03:00 · 0bfd4523b3
commit 0bfd4523b3
parent f07436aa49
14 changed files with 223 additions and 240 deletions
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@ -613,6 +613,14 @@ export const LightText = styled.div`
  color: gray;
 `;

+export const SuccessText = styled.div`
+  color: #388e3c;
+`;
+
+export const DestructiveText = styled.div`
+  color: rgb(202, 60, 60);
+`;
+
 export const WarningText = styled.div`
  color: rgb(223, 117, 20);
 `;
--- a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
@ -8,6 +8,7 @@ import {
  LinkSuccess,
  TermsOfService,
  WarningBox,
+  WarningText,
 } from "../components/styled";
 import { TermsState } from "../utils";

@ -28,10 +29,27 @@ export function TermsOfServiceSection({
  if (!reviewing) {
    if (!reviewed) {
      if (!onReview) {
-        return <section>Terms of service status: {terms.status}</section>;
+        return (
+          <Fragment>
+            {terms.status === "notfound" && (
+              <section>
+                <WarningText>
+                  {i18n.str`Exchange doesn't have terms of service`}
+                </WarningText>
+              </section>
+            )}
+          </Fragment>
+        );
      }
      return (
        <Fragment>
+          {terms.status === "notfound" && (
+            <section>
+              <WarningText>
+                {i18n.str`Exchange doesn't have terms of service`}
+              </WarningText>
+            </section>
+          )}
          {terms.status === "new" && (
            <section>
              <ButtonSuccess upperCased onClick={() => onReview(true)}>
@ -64,7 +82,6 @@ export function TermsOfServiceSection({
            enabled={reviewed}
            label={i18n.str`I accept the exchange terms of service`}
            onToggle={() => {
-              console.log("asdasd", reviewed);
              onAccept(!reviewed);
              if (onReview) onReview(false);
            }}
--- 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 { amountFractionalBase } from "@gnu-taler/taler-util";
+import { amountFractionalBase, ExchangeListItem } from "@gnu-taler/taler-util";
 import { createExample } from "../test-utils";
 import { termsHtml, termsPdf, termsPlain, termsXml } from "./termsExample";
 import { View as TestedComponent } from "./Withdraw";
@ -32,24 +32,38 @@ export default {
  },
 };

+const exchangeList: ExchangeListItem[] = [
+  {
+    currency: "USD",
+    exchangeBaseUrl: "exchange.demo.taler.net",
+    tos: {
+      currentVersion: "1",
+      acceptedVersion: "1",
+      content: "terms of service content",
+      contentType: "text/plain",
+    },
+    paytoUris: ["asd"],
+  },
+  {
+    currency: "USD",
+    exchangeBaseUrl: "exchange.test.taler.net",
+    tos: {
+      currentVersion: "1",
+      acceptedVersion: "1",
+      content: "terms of service content",
+      contentType: "text/plain",
+    },
+    paytoUris: ["asd"],
+  },
+];
+
 export const NewTerms = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
    fraction: 0,
-    value: 0,
+    value: 1,
  },
  amount: {
    currency: "USD",
@ -71,18 +85,7 @@ export const NewTerms = createExample(TestedComponent, {
 });

 export const TermsReviewingPLAIN = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
@ -110,18 +113,7 @@ export const TermsReviewingPLAIN = createExample(TestedComponent, {
 });

 export const TermsReviewingHTML = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
@ -151,18 +143,7 @@ export const TermsReviewingHTML = createExample(TestedComponent, {
 });

 export const TermsReviewingPDF = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
@ -192,18 +173,7 @@ export const TermsReviewingPDF = createExample(TestedComponent, {
 });

 export const TermsReviewingXML = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
@ -231,18 +201,7 @@ export const TermsReviewingXML = createExample(TestedComponent, {
 });

 export const NewTermsAccepted = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
@ -269,18 +228,7 @@ export const NewTermsAccepted = createExample(TestedComponent, {
 });

 export const TermsShowAgainXML = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
@ -309,18 +257,7 @@ export const TermsShowAgainXML = createExample(TestedComponent, {
 });

 export const TermsChanged = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
@ -347,18 +284,7 @@ export const TermsChanged = createExample(TestedComponent, {
 });

 export const TermsNotFound = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
@ -382,18 +308,7 @@ export const TermsNotFound = createExample(TestedComponent, {
 });

 export const TermsAlreadyAccepted = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
@ -417,18 +332,7 @@ export const TermsAlreadyAccepted = createExample(TestedComponent, {
 });

 export const WithoutFee = createExample(TestedComponent, {
-  knownExchanges: [
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.demo.taler.net",
-      paytoUris: ["asd"],
-    },
-    {
-      currency: "USD",
-      exchangeBaseUrl: "exchange.test.taler.net",
-      paytoUris: ["asd"],
-    },
-  ],
+  knownExchanges: exchangeList,
  exchangeBaseUrl: "exchange.demo.taler.net",
  withdrawalFee: {
    currency: "USD",
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@ -38,7 +38,6 @@ import {
  ButtonWarning,
  LinkSuccess,
  WalletAction,
-  WarningText,
 } from "../components/styled";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { amountToString, buildTermsOfServiceState, TermsState } from "../utils";
@ -98,17 +97,19 @@ export function View({
          text={amountToString(Amounts.sub(amount, withdrawalFee).amount)}
          kind="positive"
        />
-        <Part
-          title="Chosen amount"
-          text={amountToString(amount)}
-          kind="neutral"
-        />
        {Amounts.isNonZero(withdrawalFee) && (
-          <Part
-            title="Exchange fee"
-            text={amountToString(withdrawalFee)}
-            kind="negative"
-          />
+          <Fragment>
+            <Part
+              title="Chosen amount"
+              text={amountToString(amount)}
+              kind="neutral"
+            />
+            <Part
+              title="Exchange fee"
+              text={amountToString(withdrawalFee)}
+              kind="negative"
+            />
+          </Fragment>
        )}
        {exchangeBaseUrl && (
          <Part title="Exchange" text={exchangeBaseUrl} kind="neutral" big />
@ -140,13 +141,6 @@ export function View({
          )}
        </section>
      )}
-      {terms.status === "notfound" && (
-        <section>
-          <WarningText>
-            {i18n.str`Exchange doesn't have terms of service`}
-          </WarningText>
-        </section>
-      )}
      <TermsOfServiceSection
        reviewed={reviewed}
        reviewing={reviewing}
--- a/packages/taler-wallet-webextension/src/popup/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx
@ -17,19 +17,15 @@
 import { i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox";
-import { useDevContext } from "../context/devContext";
 import { useExtendedPermissions } from "../hooks/useExtendedPermissions";

 export function SettingsPage(): VNode {
  const [permissionsEnabled, togglePermissions] = useExtendedPermissions();
-  const { devMode, toggleDevMode } = useDevContext();

  return (
    <SettingsView
      permissionsEnabled={permissionsEnabled}
      togglePermissions={togglePermissions}
-      developerMode={devMode}
-      toggleDeveloperMode={toggleDevMode}
    />
  );
 }
@ -37,15 +33,11 @@ export function SettingsPage(): VNode {
 export interface ViewProps {
  permissionsEnabled: boolean;
  togglePermissions: () => void;
-  developerMode: boolean;
-  toggleDeveloperMode: () => void;
 }

 export function SettingsView({
  permissionsEnabled,
  togglePermissions,
-  developerMode,
-  toggleDeveloperMode,
 }: ViewProps): VNode {
  return (
    <Fragment>
@ -60,14 +52,6 @@ export function SettingsView({
          enabled={permissionsEnabled}
          onToggle={togglePermissions}
        />
-        <h2>Config</h2>
-        <Checkbox
-          label="Developer mode"
-          name="devMode"
-          description="(More options and information useful for debugging)"
-          enabled={developerMode}
-          onToggle={toggleDeveloperMode}
-        />
      </section>
      <footer style={{ justifyContent: "space-around" }}>
        <a
--- a/packages/taler-wallet-webextension/src/utils/index.ts
+++ b/packages/taler-wallet-webextension/src/utils/index.ts
@ -60,15 +60,19 @@ export function buildTermsOfServiceState(tos: GetExchangeTosResult): TermsState
    tos.content,
  );

-  const status: TermsStatus = !content
-    ? "notfound"
-    : !tos.acceptedEtag
-      ? "new"
-      : tos.acceptedEtag !== tos.currentEtag
-        ? "changed"
-        : "accepted";
+  const status: TermsStatus = buildTermsOfServiceStatus(tos.content, tos.acceptedEtag, tos.currentEtag);

  return { content, status, version: tos.currentEtag }
+
+}
+export function buildTermsOfServiceStatus(content: string | undefined, acceptedVersion: string | undefined, currentVersion: string | undefined): TermsStatus {
+  return !content
+    ? "notfound"
+    : !acceptedVersion
+      ? "new"
+      : acceptedVersion !== currentVersion
+        ? "changed"
+        : "accepted";
 }

 function parseTermsOfServiceContent(
--- 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>
--- 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}
--- 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;
 }

--- 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: [],
    },
  ],
--- 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}
--- 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"],
    },
  ],
--- 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,
@ -92,30 +80,6 @@ export function SettingsView({
  return (
    <Fragment>
      <section>
-        <h2>
-          <i18n.Translate>Known exchanges</i18n.Translate>
-        </h2>
-        {!knownExchanges || !knownExchanges.length ? (
-          <div>No exchange yet!</div>
-        ) : (
-          <Fragment>
-            <table>
-              {knownExchanges.map((e, idx) => (
-                <tr key={idx}>
-                  <td>{e.currency}</td>
-                  <td>
-                    <a href={e.exchangeBaseUrl}>{e.exchangeBaseUrl}</a>
-                  </td>
-                </tr>
-              ))}
-            </table>
-          </Fragment>
-        )}
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <div />
-          <LinkPrimary href={Pages.exchange_add}>Add an exchange</LinkPrimary>
-        </div>
-
        <h2>
          <i18n.Translate>Permissions</i18n.Translate>
        </h2>
@ -126,6 +90,61 @@ export function SettingsView({
          enabled={permissionsEnabled}
          onToggle={togglePermissions}
        />
+
+        <h2>
+          <i18n.Translate>Known exchanges</i18n.Translate>
+        </h2>
+        {!knownExchanges || !knownExchanges.length ? (
+          <div>No exchange yet!</div>
+        ) : (
+          <Fragment>
+            <table>
+              <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>
+        )}
+        <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <div />
+          <LinkPrimary href={Pages.exchange_add}>Add an exchange</LinkPrimary>
+        </div>
+
        <h2>Config</h2>
        <Checkbox
          label="Developer mode"
--- a/packages/taler-wallet-webextension/src/wxApi.ts
+++ b/packages/taler-wallet-webextension/src/wxApi.ts
@ -350,11 +350,13 @@ export function acceptTip(req: AcceptTipRequest): Promise<void> {
  return callBackend("acceptTip", req);
 }

-export function onUpdateNotification(messageType: Array<NotificationType>, doCallback: () => void): () => void {
+export function onUpdateNotification(messageTypes: Array<NotificationType>, doCallback: () => void): () => void {
  // eslint-disable-next-line no-undef
  const port = chrome.runtime.connect({ name: "notifications" });
  const listener = (message: MessageFromBackend): void => {
-    if (messageType.includes(message.type)) {
+    const shouldNotify = messageTypes.includes(message.type)
+    console.log("Notification arrived, should notify?", shouldNotify, message.type, messageTypes)
+    if (shouldNotify) {
      doCallback();
    }
  };