gnunet-svn
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[taler-wallet-core] branch master updated (217f3439 -> 57b6cd42)


From: gnunet
Subject: [taler-wallet-core] branch master updated (217f3439 -> 57b6cd42)
Date: Mon, 13 Sep 2021 18:33:23 +0200

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a change to branch master
in repository wallet-core.

    from 217f3439 first approach to new design for withdraw
     new c24db59b withdraw design
     new 57b6cd42 add missing copyleft

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../taler-wallet-webextension/src/background.ts    |  10 +-
 .../{Checkbox.tsx => CheckboxOutlined.tsx}         |  58 +--
 .../src/components/Diagnostics.tsx                 |  16 +
 .../src/components/ErrorMessage.tsx                |  17 +-
 .../src/components/ExchangeToS.tsx                 |  67 +++
 .../src/components/LogoHeader.tsx                  |  16 +
 .../src/components/Part.tsx                        |  16 +
 .../src/components/TransactionItem.tsx             |  16 +
 .../src/components/styled/index.tsx                | 214 ++++++++-
 .../src/cta/Withdraw.stories.tsx                   | 491 ++++++++++++++++++++-
 .../taler-wallet-webextension/src/cta/Withdraw.tsx | 154 ++++++-
 .../src/hooks/useBackupDeviceName.ts               |  16 +
 .../src/hooks/useBackupStatus.ts                   |  16 +
 .../src/hooks/useDiagnostics.ts                    |  16 +
 .../src/hooks/useExtendedPermissions.ts            |  16 +
 .../taler-wallet-webextension/src/hooks/useLang.ts |  16 +
 .../src/hooks/useProviderStatus.ts                 |  16 +
 .../src/hooks/useTalerActionURL.ts                 |  16 +
 .../src/popup/ProviderAddPage.tsx                  |  16 +
 .../taler-wallet-webextension/src/test-utils.ts    |  16 +
 .../src/wallet/ProviderAddPage.tsx                 |  16 +
 21 files changed, 1178 insertions(+), 57 deletions(-)
 copy packages/taler-wallet-webextension/src/components/{Checkbox.tsx => 
CheckboxOutlined.tsx} (51%)
 create mode 100644 
packages/taler-wallet-webextension/src/components/ExchangeToS.tsx

diff --git a/packages/taler-wallet-webextension/src/background.ts 
b/packages/taler-wallet-webextension/src/background.ts
index dbc540df..dcbf9613 100644
--- a/packages/taler-wallet-webextension/src/background.ts
+++ b/packages/taler-wallet-webextension/src/background.ts
@@ -1,17 +1,17 @@
 /*
- This file is part of TALER
- (C) 2016 GNUnet e.V.
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
 
- TALER is free software; you can redistribute it and/or modify it under the
+ GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
  Foundation; either version 3, or (at your option) any later version.
 
- TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
  A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
 
  You should have received a copy of the GNU General Public License along with
- TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
 /**
diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx 
b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
similarity index 51%
copy from packages/taler-wallet-webextension/src/components/Checkbox.tsx
copy to packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
index 2d7b9808..5e30ee3d 100644
--- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx
+++ b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
@@ -15,40 +15,44 @@
  */
 
 import { JSX } from "preact/jsx-runtime";
-import { h } from "preact";
+import { Outlined, StyledCheckboxLabel } from "./styled/index";
+import { h } from 'preact';
 
 interface Props {
   enabled: boolean;
   onToggle: () => void;
   label: string;
   name: string;
-  description?: string;
 }
-export function Checkbox({ name, enabled, onToggle, label, description }: 
Props): JSX.Element {
+
+
+const Tick = () => <svg
+  xmlns="http://www.w3.org/2000/svg";
+  viewBox="0 0 24 24"
+  aria-hidden="true"
+  focusable="false"
+  style={{ backgroundColor: 'green' }}
+>
+  <path
+    fill="none"
+    stroke="white"
+    stroke-width="3"
+    d="M1.73 12.91l6.37 6.37L22.79 4.59"
+  />
+</svg>
+
+export function CheckboxOutlined({ name, enabled, onToggle, label }: Props): 
JSX.Element {
   return (
-    <div>
-      <input
-        checked={enabled}
-        onClick={onToggle}
-        type="checkbox"
-        id={`checkbox-${name}`}
-        style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} />
-      <label
-        htmlFor={`checkbox-${name}`}
-        style={{ marginLeft: "0.5em", fontWeight: "bold" }}
-      >
-        {label}
-      </label>
-      {description && <span
-        style={{
-          color: "#383838",
-          fontSize: "smaller",
-          display: "block",
-          marginLeft: "2em",
-        }}
-      >
-        {description}
-      </span>}
-    </div>
+    <Outlined>
+      <StyledCheckboxLabel onClick={onToggle}>
+        <span>
+          <input type="checkbox" name={name} checked={enabled} 
disabled={false} />
+          <div>
+            <Tick />
+          </div>
+          <label for={name}>{label}</label>
+        </span>
+      </StyledCheckboxLabel>
+    </Outlined>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx 
b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
index c9871014..b48deb84 100644
--- a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
+++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { h } from "preact";
 import { JSX } from "preact/jsx-runtime";
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx 
b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index 4aef66d3..b0e339c7 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -1,4 +1,19 @@
-import { VNode, h } from "preact";
+/*
+ This file is part of GNU Taler
+ (C) 2019 Taler Systems SA
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+ import { VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import arrowDown from '../../static/img/chevron-down.svg';
 import { ErrorBox } from "./styled";
diff --git a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx 
b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx
new file mode 100644
index 00000000..0325daa0
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx
@@ -0,0 +1,67 @@
+/*
+ This file is part of GNU Taler
+ (C) 2019 Taler Systems SA
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+ import { Fragment, VNode } from "preact"
+import { useState } from "preact/hooks"
+import { JSXInternal } from "preact/src/jsx"
+import { h } from 'preact';
+
+export function ExchangeXmlTos({ doc }: { doc: Document }) {
+  const termsNode = doc.querySelector('[ids=terms-of-service]')
+  if (!termsNode) {
+    return <div>not found</div>
+  }
+  return <Fragment>
+    {Array.from(termsNode.children).map(renderChild)}
+  </Fragment>
+}
+
+function renderChild(child: Element): VNode {
+  const children = Array.from(child.children)
+  switch (child.nodeName) {
+    case 'title': return <header>{child.textContent}</header>
+    case '#text': return <Fragment />
+    case 'paragraph': return <p>{child.textContent}</p>
+    case 'section': {
+      return <AnchorWithOpenState href={`#terms-${child.getAttribute('ids')}`}>
+        {children.map(renderChild)}
+      </AnchorWithOpenState>
+    }
+    case 'bullet_list': {
+      return <ul>{children.map(renderChild)}</ul>
+    }
+    case 'enumerated_list': {
+      return <ol>{children.map(renderChild)}</ol>
+    }
+    case 'list_item': {
+      return <li>{children.map(renderChild)}</li>
+    }
+    case 'block_quote': {
+      return <div>{children.map(renderChild)}</div>
+    }
+    default: return <div style={{ color: 'red', display: 'hidden' }}>unknown 
tag {child.nodeName} <a></a></div>
+  }
+}
+
+function AnchorWithOpenState(props: 
JSXInternal.HTMLAttributes<HTMLAnchorElement>) {
+  const [open, setOpen] = useState<boolean>(false)
+  function doClick(e: JSXInternal.TargetedMouseEvent<HTMLAnchorElement>) {
+    setOpen(!open);
+    e.stopPropagation();
+    e.preventDefault();
+  }
+  return <a data-open={JSON.stringify(open)} onClick={doClick} {...props} />
+}
+
diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx 
b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
index b45dcb35..9b75c62a 100644
--- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
+++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { h } from "preact";
 
 export function LogoHeader() {
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx 
b/packages/taler-wallet-webextension/src/components/Part.tsx
index 87b16de8..75c9df16 100644
--- a/packages/taler-wallet-webextension/src/components/Part.tsx
+++ b/packages/taler-wallet-webextension/src/components/Part.tsx
@@ -1,5 +1,21 @@
+/*
+ This file is part of GNU Taler
+ (C) 2019 Taler Systems SA
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
 import { AmountLike } from "@gnu-taler/taler-util";
 import { ExtraLargeText, LargeText, SmallLightText } from "./styled";
+import { h } from 'preact';
 
 export type Kind = 'positive' | 'negative' | 'neutral';
 interface Props {
diff --git 
a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx 
b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index 8ddfd0e3..2d6d8e6d 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { AmountString, Timestamp, Transaction, TransactionType } from 
'@gnu-taler/taler-util';
 import { format, formatDistance } from 'date-fns';
 import { h } from 'preact';
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx 
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 553726de..f7945569 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 
 // need to import linaria types, otherwise compiler will complain
 import type * as Linaria from '@linaria/core';
@@ -12,6 +28,10 @@ export const PaymentStatus = styled.div<{ color: string }>`
 `
 
 export const WalletAction = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
   max-width: 50%;
 
   margin: auto;
@@ -20,6 +40,9 @@ export const WalletAction = styled.section`
   & h1:first-child {
     margin-top: 0; 
   }
+  section {
+    margin-bottom: 2em;
+  }
 `
 export const WalletActionOld = styled.section`
   border: solid 5px black;
@@ -211,6 +234,51 @@ export const Button = styled.button<{ upperCased?: boolean 
}>`
   }
 `;
 
+export const Link = styled.a<{ upperCased?: boolean }>`
+  display: inline-block;
+  zoom: 1;
+  line-height: normal;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'};
+
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.5em 1em;
+  background-color: transparent;
+  text-decoration: none;
+
+  :focus {
+    outline: 0;
+  }
+
+  &:disabled {
+    border: none;
+    background-image: none;
+    /* csslint ignore:start */
+    filter: alpha(opacity=40);
+    /* csslint ignore:end */
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  :hover {
+    text-decoration: underline;
+    /* filter: alpha(opacity=90);
+    background-image: linear-gradient(
+      transparent,
+      rgba(0, 0, 0, 0.05) 40%,
+      rgba(0, 0, 0, 0.1)
+    ); */
+  }
+`;
+
 export const FontIcon = styled.div`
   font-family: monospace;
   font-size: x-large;
@@ -220,7 +288,7 @@ export const FontIcon = styled.div`
 `
 export const ButtonBox = styled(Button)`
   padding: .5em;
-  width: 2em;
+  width: fit-content;
   height: 2em;
 
   & > ${FontIcon} {
@@ -255,6 +323,9 @@ export const ButtonBoxPrimary = styled(ButtonBox)`
 export const ButtonSuccess = styled(ButtonVariant)`
   background-color: #388e3c;
 `
+export const LinkSuccess = styled(Link)`
+  color: #388e3c;
+`
 export const ButtonBoxSuccess = styled(ButtonBox)`
   color: #388e3c;
   border-color: #388e3c;
@@ -504,3 +575,144 @@ export const NiceSelect = styled.div`
     display: none;
   }
 `
+
+export const Outlined = styled.div`
+  border: 2px solid #388e3c;
+  padding: 0.5em 1em;
+  width: fit-content;
+  border-radius: 2px;
+  color: #388e3c;
+`
+
+/* { width: "1.5em", height: "1.5em", verticalAlign: "middle" } */
+export const CheckboxSuccess = styled.input`
+  vertical-align: center;
+
+`
+
+export const TermsSection = styled.a`
+  border: 1px solid black;
+  border-radius: 5px;
+  padding: 1em;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  text-decoration: none;
+  color: inherit;
+  flex-direction: column;
+  
+  display: flex;
+  &[data-open="true"] {
+    display: flex; 
+  }
+  &[data-open="false"] > *:not(:first-child) {
+    display: none; 
+  }
+
+  header {
+    display: flex;
+    flex-direction: row;
+    font-weight: bold;
+    justify-content: space-between;
+    height: auto;
+  }
+
+  &[data-open="true"] header:after  {
+    content: '\\2227';
+  }
+  &[data-open="false"] header:after  {
+    content: '\\2228';
+  }
+`;
+
+export const TermsOfService = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+
+  & > header {
+    text-align: center;
+    font-size: 2em;
+  }
+
+  a {
+    border: 1px solid black;
+    border-radius: 5px;
+    padding: 1em;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    text-decoration: none;
+    color: inherit;
+    flex-direction: column;
+    
+    display: flex;
+    &[data-open="true"] {
+      display: flex; 
+    }
+    &[data-open="false"] > *:not(:first-child) {
+      display: none; 
+    }
+
+    header {
+      display: flex;
+      flex-direction: row;
+      font-weight: bold;
+      justify-content: space-between;
+      height: auto;
+    }
+
+    &[data-open="true"] header:after  {
+      content: '\\2227';
+    }
+    &[data-open="false"] header:after  {
+      content: '\\2228';
+    }
+  }
+
+`
+export const StyledCheckboxLabel = styled.div`
+  color: green;
+  text-transform: uppercase;
+  /* font-weight: bold; */
+  text-align: center;
+  span {
+
+    input {
+      display: none;
+      opacity: 0;
+      width: 1em;
+      height: 1em;
+    }
+    div {
+      display: inline-grid;
+      width: 1em;
+      height: 1em;
+      margin-right: 1em;
+      border-radius: 2px;
+      border: 2px solid currentColor;
+  
+      svg {
+        transition: transform 0.1s ease-in 25ms;
+        transform: scale(0);
+        transform-origin: bottom left;
+      }
+    }
+    label {
+      padding: 0px;
+      font-size: small;
+    }
+  }
+
+  input:checked + div svg {
+    transform: scale(1);
+  }
+  input:disabled + div {
+    color: #959495;
+  };
+  input:disabled + div + label {
+    color: #959495;
+  };
+  input:focus + div + label {
+    box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
+  }
+
+`
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx 
b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx
index a89a18c1..022b9245 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx
@@ -22,6 +22,7 @@
 import { amountFractionalBase, Amounts } from '@gnu-taler/taler-util';
 import { ExchangeRecord } from '@gnu-taler/taler-wallet-core';
 import { ExchangeWithdrawDetails } from 
'@gnu-taler/taler-wallet-core/src/operations/withdraw';
+import { getMaxListeners } from 'process';
 import { createExample } from '../test-utils';
 import { View as TestedComponent } from './Withdraw';
 
@@ -33,20 +34,462 @@ export default {
   },
 };
 
-export const WithdrawWithFee = createExample(TestedComponent, {
+const termsXml = `<?xml version="1.0" encoding="utf-8"?>
+<document source="/home/grothoff/research/taler/exchange/contrib/tos/tos.rst">
+    <section ids="terms-of-service" names="terms\ of\ service">
+        <title>Terms Of Service</title>
+        <paragraph>Last Updated: 12.4.2019</paragraph>
+        <paragraph>Welcome! Taler Systems SA (“we,” “our,” or “us”) provides a 
payment service
+            through our Internet presence (collectively the “Services”). 
Before using our
+            Services, please read the Terms of Service (the “Terms” or the 
“Agreement”)
+            carefully.</paragraph>
+        <section ids="overview" names="overview">
+            <title>Overview</title>
+            <paragraph>This section provides a brief summary of the highlights 
of this
+                Agreement. Please note that when you accept this Agreement, 
you are accepting
+                all of the terms and conditions and not just this section. We 
and possibly
+                other third parties provide Internet services which interact 
with the Taler
+                Wallet’s self-hosted personal payment application. When using 
the Taler Wallet
+                to interact with our Services, you are agreeing to our Terms, 
so please read
+                carefully.</paragraph>
+            <section ids="highlights" names="highlights:">
+                <title>Highlights:</title>
+                <block_quote>
+                    <bullet_list bullet="•">
+                        <list_item>
+                            <paragraph>You are responsible for keeping the 
data in your Taler Wallet at all times
+                                under your control. Any losses arising from 
you not being in control of
+                                your private information are your 
problem.</paragraph>
+                        </list_item>
+                        <list_item>
+                            <paragraph>We will try to transfer funds we hold 
in escrow for our users to any legal
+                                recipient to the best of our ability within 
the limitations of the law and
+                                our implementation. However, the Services 
offered today are highly
+                                experimental and the set of recipients of 
funds is severely restricted.</paragraph>
+                        </list_item>
+                        <list_item>
+                            <paragraph>For our Services, we may charge 
transaction fees. The specific fee structure
+                                is provided based on the Taler protocol and 
should be shown to you when you
+                                withdraw electronic coins using a Taler 
Wallet. You agree and understand
+                                that the Taler protocol allows for the fee 
structure to change.</paragraph>
+                        </list_item>
+                        <list_item>
+                            <paragraph>You agree to not intentionally 
overwhelm our systems with requests and
+                                follow responsible disclosure if you find 
security issues in our services.</paragraph>
+                        </list_item>
+                        <list_item>
+                            <paragraph>We cannot be held accountable for our 
Services not being available due to
+                                circumstances beyond our control. If we modify 
or terminate our services,
+                                we will try to give you the opportunity to 
recover your funds. However,
+                                given the experimental state of the Services 
today, this may not be
+                                possible. You are strongly advised to limit 
your use of the Service
+                                to small-scale experiments expecting total 
loss of all funds.</paragraph>
+                        </list_item>
+                    </bullet_list>
+                </block_quote>
+                <paragraph>These terms outline approved uses of our Services. 
The Services and these
+                    Terms are still at an experimental stage. If you have any 
questions or
+                    comments related to this Agreement, please send us a 
message to
+                    <reference 
refuri="mailto:legal@taler-systems.com";>legal@taler-systems.com</reference>. If 
you do not agree to this Agreement, you must not
+                    use our Services.</paragraph>
+            </section>
+        </section>
+        <section ids="how-you-accept-this-policy" names="how\ you\ accept\ 
this\ policy">
+            <title>How you accept this policy</title>
+            <paragraph>By sending funds to us (to top-up your Taler Wallet), 
you acknowledge that you
+                have read, understood, and agreed to these Terms. We reserve 
the right to
+                change these Terms at any time. If you disagree with the 
change, we may in the
+                future offer you with an easy option to recover your unspent 
funds. However,
+                in the current experimental period you acknowledge that this 
feature is not
+                yet available, resulting in your funds being lost unless you 
accept the new
+                Terms. If you continue to use our Services other than to 
recover your unspent
+                funds, your continued use of our Services following any such 
change will
+                signify your acceptance to be bound by the then current Terms. 
Please check
+                the effective date above to determine if there have been any 
changes since you
+                have last reviewed these Terms.</paragraph>
+        </section>
+        <section ids="services" names="services">
+            <title>Services</title>
+            <paragraph>We will try to transfer funds that we hold in escrow 
for our users to any
+                legal recipient to the best of our ability and within the 
limitations of the
+                law and our implementation. However, the Services offered 
today are highly
+                experimental and the set of recipients of funds is severely 
restricted.  The
+                Taler Wallet can be loaded by exchanging fiat currencies 
against electronic
+                coins. We are providing this exchange service. Once your Taler 
Wallet is
+                loaded with electronic coins they can be spent for purchases 
if the seller is
+                accepting Taler as a means of payment. We are not guaranteeing 
that any seller
+                is accepting Taler at all or a particular seller.  The seller 
or recipient of
+                deposits of electronic coins must specify the target account, 
as per the
+                design of the Taler protocol. They are responsible for 
following the protocol
+                and specifying the correct bank account, and are solely liable 
for any losses
+                that may arise from specifying the wrong account. We will 
allow the government
+                to link wire transfers to the underlying contract hash. It is 
the
+                responsibility of recipients to preserve the full contracts 
and to pay
+                whatever taxes and charges may be applicable. Technical issues 
may lead to
+                situations where we are unable to make transfers at all or 
lead to incorrect
+                transfers that cannot be reversed. We will only refuse to 
execute transfers if
+                the transfers are prohibited by a competent legal authority 
and we are ordered
+                to do so.</paragraph>
+        </section>
+        <section ids="fees" names="fees">
+            <title>Fees</title>
+            <paragraph>You agree to pay the fees for exchanges and withdrawals 
completed via the
+                Taler Wallet (“Fees”) as defined by us, which we may change 
from time to
+                time. With the exception of wire transfer fees, Taler 
transaction fees are set
+                for any electronic coin at the time of withdrawal and fixed 
throughout the
+                validity period of the respective electronic coin. Your wallet 
should obtain
+                and display applicable fees when withdrawing funds. Fees for 
coins obtained as
+                change may differ from the fees applicable to the original 
coin. Wire transfer
+                fees that are independent from electronic coins may change 
annually.  You
+                authorize us to charge or deduct applicable fees owed in 
connection with
+                deposits, exchanges and withdrawals following the rules of the 
Taler protocol.
+                We reserve the right to provide different types of rewards to 
users either in
+                the form of discount for our Services or in any other form at 
our discretion
+                and without prior notice to you.</paragraph>
+        </section>
+        <section ids="eligibility" names="eligibility">
+            <title>Eligibility</title>
+            <paragraph>To be eligible to use our Services, you must be able to 
form legally binding
+                contracts or have the permission of your legal guardian. By 
using our
+                Services, you represent and warrant that you meet all 
eligibility requirements
+                that we outline in these Terms.</paragraph>
+        </section>
+        <section ids="financial-self-responsibility" names="financial\ 
self-responsibility">
+            <title>Financial self-responsibility</title>
+            <paragraph>You will be responsible for maintaining the 
availability, integrity and
+                confidentiality of the data stored in your wallet. When you 
setup a Taler
+                Wallet, you are strongly advised to follow the precautionary 
measures offered
+                by the software to minimize the chances to losse access to or 
control over
+                your Wallet data. We will not be liable for any loss or damage 
arising from
+                your failure to comply with this paragraph.</paragraph>
+        </section>
+        <section ids="copyrights-and-trademarks" names="copyrights\ and\ 
trademarks">
+            <title>Copyrights and trademarks</title>
+            <paragraph>The Taler Wallet is released under the terms of the GNU 
General Public License
+                (GNU GPL). You have the right to access, use, and share the 
Taler Wallet, in
+                modified or unmodified form. However, the GPL is a strong 
copyleft license,
+                which means that any derivative works must be distributed 
under the same
+                license terms as the original software. If you have any 
questions, you should
+                review the GNU GPL’s full terms and conditions at
+                <reference 
refuri="https://www.gnu.org/licenses/gpl-3.0.en.html";>https://www.gnu.org/licenses/gpl-3.0.en.html</reference>.
  “Taler” itself is a trademark
+                of Taler Systems SA. You are welcome to use the name in 
relation to processing
+                payments using the Taler protocol, assuming your use is 
compatible with an
+                official release from the GNU Project that is not older than 
two years.</paragraph>
+        </section>
+        <section ids="your-use-of-our-services" names="your\ use\ of\ our\ 
services">
+            <title>Your use of our services</title>
+            <paragraph>When using our Services, you agree to not take any 
action that intentionally
+                imposes an unreasonable load on our infrastructure. If you 
find security
+                problems in our Services, you agree to first report them to
+                <reference 
refuri="mailto:security@taler-systems.com";>security@taler-systems.com</reference>
 and grant us the right to publish your report. We
+                warrant that we will ourselves publicly disclose any issues 
reported within 3
+                months, and that we will not prosecute anyone reporting 
security issues if
+                they did not exploit the issue beyond a proof-of-concept, and 
followed the
+                above responsible disclosure practice.</paragraph>
+        </section>
+        <section ids="limitation-of-liability-disclaimer-of-warranties" 
names="limitation\ of\ liability\ &amp;\ disclaimer\ of\ warranties">
+            <title>Limitation of liability &amp; disclaimer of 
warranties</title>
+            <paragraph>You understand and agree that we have no control over, 
and no duty to take any
+                action regarding: Failures, disruptions, errors, or delays in 
processing that
+                you may experience while using our Services; The risk of 
failure of hardware,
+                software, and Internet connections; The risk of malicious 
software being
+                introduced or found in the software underlying the Taler 
Wallet; The risk that
+                third parties may obtain unauthorized access to information 
stored within your
+                Taler Wallet, including, but not limited to your Taler Wallet 
coins or backup
+                encryption keys.  You release us from all liability related to 
any losses,
+                damages, or claims arising from:</paragraph>
+            <enumerated_list enumtype="loweralpha" prefix="(" suffix=")">
+                <list_item>
+                    <paragraph>user error such as forgotten passwords, 
incorrectly constructed
+                        transactions;</paragraph>
+                </list_item>
+                <list_item>
+                    <paragraph>server failure or data loss;</paragraph>
+                </list_item>
+                <list_item>
+                    <paragraph>unauthorized access to the Taler Wallet 
application;</paragraph>
+                </list_item>
+                <list_item>
+                    <paragraph>bugs or other errors in the Taler Wallet 
software; and</paragraph>
+                </list_item>
+                <list_item>
+                    <paragraph>any unauthorized third party activities, 
including, but not limited to,
+                        the use of viruses, phishing, brute forcing, or other 
means of attack
+                        against the Taler Wallet. We make no representations 
concerning any
+                        Third Party Content contained in or accessed through 
our Services.</paragraph>
+                </list_item>
+            </enumerated_list>
+            <paragraph>Any other terms, conditions, warranties, or 
representations associated with
+                such content, are solely between you and such organizations 
and/or
+                individuals.</paragraph>
+        </section>
+        <section ids="limitation-of-liability" names="limitation\ of\ 
liability">
+            <title>Limitation of liability</title>
+            <paragraph>To the fullest extent permitted by applicable law, in 
no event will we or any
+                of our officers, directors, representatives, agents, servants, 
counsel,
+                employees, consultants, lawyers, and other personnel 
authorized to act,
+                acting, or purporting to act on our behalf (collectively the 
“Taler Parties”)
+                be liable to you under contract, tort, strict liability, 
negligence, or any
+                other legal or equitable theory, for:</paragraph>
+            <enumerated_list enumtype="loweralpha" prefix="(" suffix=")">
+                <list_item>
+                    <paragraph>any lost profits, data loss, cost of 
procurement of substitute goods or
+* TLSv1.3 (IN), TLS Unknown, Unknown (23):
+                        services, or direct, indirect, incidental, special, 
punitive, compensatory,
+                        or consequential damages of any kind whatsoever 
resulting from:</paragraph>
+                </list_item>
+            </enumerated_list>
+            <block_quote>
+                <enumerated_list enumtype="lowerroman" prefix="(" suffix=")">
+                    <list_item>
+                        <paragraph>your use of, or conduct in connection with, 
our services;</paragraph>
+                    </list_item>
+                    <list_item>
+                        <paragraph>any unauthorized use of your wallet and/or 
private key due to your
+                            failure to maintain the confidentiality of your 
wallet;</paragraph>
+                    </list_item>
+                    <list_item>
+                        <paragraph>any interruption or cessation of 
transmission to or from the services; or</paragraph>
+                    </list_item>
+                    <list_item>
+                        <paragraph>any bugs, viruses, trojan horses, or the 
like that are found in the Taler
+                            Wallet software or that may be transmitted to or 
through our services by
+                            any third party (regardless of the source of 
origination), or</paragraph>
+                    </list_item>
+                </enumerated_list>
+            </block_quote>
+            <enumerated_list enumtype="loweralpha" prefix="(" start="2" 
suffix=")">
+                <list_item>
+                    <paragraph>any direct damages.</paragraph>
+                </list_item>
+            </enumerated_list>
+            <paragraph>These limitations apply regardless of legal theory, 
whether based on tort,
+                strict liability, breach of contract, breach of warranty, or 
any other legal
+                theory, and whether or not we were advised of the possibility 
of such
+                damages. Some jurisdictions do not allow the exclusion or 
limitation of
+                liability for consequential or incidental damages, so the 
above limitation may
+                not apply to you.</paragraph>
+        </section>
+        <section ids="warranty-disclaimer" names="warranty\ disclaimer">
+            <title>Warranty disclaimer</title>
+            <paragraph>Our services are provided “as is” and without warranty 
of any kind. To the
+                maximum extent permitted by law, we disclaim all 
representations and
+                warranties, express or implied, relating to the services and 
underlying
+                software or any content on the services, whether provided or 
owned by us or by
+                any third party, including without limitation, warranties of 
merchantability,
+                fitness for a particular purpose, title, non-infringement, 
freedom from
+                computer virus, and any implied warranties arising from course 
of dealing,
+                course of performance, or usage in trade, all of which are 
expressly
+                disclaimed. In addition, we do not represent or warrant that 
the content
+                accessible via the services is accurate, complete, available, 
current, free of
+                viruses or other harmful components, or that the results of 
using the services
+                will meet your requirements. Some states do not allow the 
disclaimer of
+                implied warranties, so the foregoing disclaimers may not apply 
to you. This
+                paragraph gives you specific legal rights and you may also 
have other legal
+                rights that vary from state to state.</paragraph>
+        </section>
+        <section ids="indemnity" names="indemnity">
+            <title>Indemnity</title>
+            <paragraph>To the extent permitted by applicable law, you agree to 
defend, indemnify, and
+                hold harmless the Taler Parties from and against any and all 
claims, damages,
+                obligations, losses, liabilities, costs or debt, and expenses 
(including, but
+                not limited to, attorney’s fees) arising from: (a) your use of 
and access to
+                the Services; (b) any feedback or submissions you provide to 
us concerning the
+                Taler Wallet; (c) your violation of any term of this 
Agreement; or (d) your
+                violation of any law, rule, or regulation, or the rights of 
any third party.</paragraph>
+        </section>
+        <section ids="time-limitation-on-claims" names="time\ limitation\ on\ 
claims">
+            <title>Time limitation on claims</title>
+            <paragraph>You agree that any claim you may have arising out of or 
related to your
+                relationship with us must be filed within one year after such 
claim arises,
+                otherwise, your claim in permanently barred.</paragraph>
+        </section>
+        <section ids="governing-law" names="governing\ law">
+            <title>Governing law</title>
+            <paragraph>No matter where you’re located, the laws of Switzerland 
will govern these
+                Terms. If any provisions of these Terms are inconsistent with 
any applicable
+                law, those provisions will be superseded or modified only to 
the extent such
+                provisions are inconsistent. The parties agree to submit to 
the ordinary
+                courts in Zurich, Switzerland for exclusive jurisdiction of 
any dispute
+                arising out of or related to your use of the Services or your 
breach of these
+                Terms.</paragraph>
+        </section>
+        <section ids="termination" names="termination">
+            <title>Termination</title>
+            <paragraph>In the event of termination concerning your use of our 
Services, your
+                obligations under this Agreement will still 
continue.</paragraph>
+        </section>
+        <section ids="discontinuance-of-services" names="discontinuance\ of\ 
services">
+            <title>Discontinuance of services</title>
+            <paragraph>We may, in our sole discretion and without cost to you, 
with or without prior
+                notice, and at any time, modify or discontinue, temporarily or 
permanently,
+                any portion of our Services. We will use the Taler protocol’s 
provisions to
+                notify Wallets if our Services are to be discontinued. It is 
your
+                responsibility to ensure that the Taler Wallet is online at 
least once every
+                three months to observe these notifications. We shall not be 
held responsible
+                or liable for any loss of funds in the event that we 
discontinue or depreciate
+                the Services and your Taler Wallet fails to transfer out the 
coins within a
+                three months notification period.</paragraph>
+        </section>
+        <section ids="no-waiver" names="no\ waiver">
+            <title>No waiver</title>
+            <paragraph>Our failure to exercise or delay in exercising any 
right, power, or privilege
+                under this Agreement shall not operate as a waiver; nor shall 
any single or
+                partial exercise of any right, power, or privilege preclude 
any other or
+                further exercise thereof.</paragraph>
+        </section>
+        <section ids="severability" names="severability">
+            <title>Severability</title>
+            <paragraph>If it turns out that any part of this Agreement is 
invalid, void, or for any
+                reason unenforceable, that term will be deemed severable and 
limited or
+                eliminated to the minimum extent necessary.</paragraph>
+        </section>
+        <section ids="force-majeure" names="force\ majeure">
+            <title>Force majeure</title>
+            <paragraph>We shall not be held liable for any delays, failure in 
performance, or
+                interruptions of service which result directly or indirectly 
from any cause or
+                condition beyond our reasonable control, including but not 
limited to: any
+                delay or failure due to any act of God, act of civil or 
military authorities,
+                act of terrorism, civil disturbance, war, strike or other 
labor dispute, fire,
+                interruption in telecommunications or Internet services or 
network provider
+                services, failure of equipment and/or software, other 
catastrophe, or any
+                other occurrence which is beyond our reasonable control and 
shall not affect
+                the validity and enforceability of any remaining 
provisions.</paragraph>
+        </section>
+        <section ids="assignment" names="assignment">
+            <title>Assignment</title>
+            <paragraph>You agree that we may assign any of our rights and/or 
transfer, sub-contract,
+                or delegate any of our obligations under these 
Terms.</paragraph>
+        </section>
+        <section ids="entire-agreement" names="entire\ agreement">
+            <title>Entire agreement</title>
+            <paragraph>This Agreement sets forth the entire understanding and 
agreement as to the
+                subject matter hereof and supersedes any and all prior 
discussions,
+                agreements, and understandings of any kind (including, without 
limitation, any
+                prior versions of this Agreement) and every nature between us. 
Except as
+                provided for above, any modification to this Agreement must be 
in writing and
+                must be signed by both parties.</paragraph>
+        </section>
+        <section ids="questions-or-comments" names="questions\ or\ comments">
+            <title>Questions or comments</title>
+            <paragraph>We welcome comments, questions, concerns, or 
suggestions. Please send us a
+                message on our contact page at <reference 
refuri="mailto:legal@taler-systems.com";>legal@taler-systems.com</reference>.</paragraph>
+        </section>
+    </section>
+</document>
+
+`;
+
+export const WithdrawNewTermsXML = createExample(TestedComponent, {
+  details: {
+    exchangeInfo: {
+      baseUrl: 'exchange.demo.taler.net'
+    } as ExchangeRecord,
+    withdrawFee: {
+      currency: 'USD',
+      fraction: 0,
+      value: 0
+    },
+  } as ExchangeWithdrawDetails,
+  amount: 'USD:2',
+  terms: {
+    value : {
+      type: 'xml',
+      document: new DOMParser().parseFromString(termsXml, "text/xml"),
+    },
+    status: 'new'
+  },
+})
+
+export const WithdrawNewTermsReviewingXML = createExample(TestedComponent, {
+  details: {
+    exchangeInfo: {
+      baseUrl: 'exchange.demo.taler.net'
+    } as ExchangeRecord,
+    withdrawFee: {
+      currency: 'USD',
+      fraction: 0,
+      value: 0
+    },
+  } as ExchangeWithdrawDetails,
+  amount: 'USD:2',
+  terms: {
+    value : {
+      type: 'xml',
+      document: new DOMParser().parseFromString(termsXml, "text/xml"),
+    },
+    status: 'new'
+  },
+  reviewing: true
+})
+
+export const WithdrawNewTermsAcceptedXML = createExample(TestedComponent, {
+  details: {
+    exchangeInfo: {
+      baseUrl: 'exchange.demo.taler.net'
+    } as ExchangeRecord,
+    withdrawFee: {
+      currency: 'USD',
+      fraction: 0,
+      value: 0
+    },
+  } as ExchangeWithdrawDetails,
+  amount: 'USD:2',
+  terms: {
+    value : {
+      type: 'xml',
+      document: new DOMParser().parseFromString(termsXml, "text/xml"),
+    },
+    status: 'new'
+  },
+  accepted: true
+})
+
+export const WithdrawNewTermsShowAfterAcceptedXML = 
createExample(TestedComponent, {
   details: {
     exchangeInfo: {
       baseUrl: 'exchange.demo.taler.net'
     } as ExchangeRecord,
     withdrawFee: {
       currency: 'USD',
-      fraction: amountFractionalBase*0.5,
+      fraction: 0,
+      value: 0
+    },
+  } as ExchangeWithdrawDetails,
+  amount: 'USD:2',
+  terms: {
+    value : {
+      type: 'xml',
+      document: new DOMParser().parseFromString(termsXml, "text/xml"),
+    },
+    status: 'new'
+  },
+  accepted: true,
+  reviewing: true,
+})
+
+export const WithdrawChangedTermsXML = createExample(TestedComponent, {
+  details: {
+    exchangeInfo: {
+      baseUrl: 'exchange.demo.taler.net'
+    } as ExchangeRecord,
+    withdrawFee: {
+      currency: 'USD',
+      fraction: 0,
       value: 0
     },
   } as ExchangeWithdrawDetails,
   amount: 'USD:2',
+  terms: {
+    value : {
+      type: 'xml',
+      document: new DOMParser().parseFromString(termsXml, "text/xml"),
+    },
+    status: 'changed'
+  },
 })
-export const WithdrawWithoutFee = createExample(TestedComponent, {
+
+export const WithdrawNotFoundTermsXML = createExample(TestedComponent, {
   details: {
     exchangeInfo: {
       baseUrl: 'exchange.demo.taler.net'
@@ -58,4 +501,46 @@ export const WithdrawWithoutFee = 
createExample(TestedComponent, {
     },
   } as ExchangeWithdrawDetails,
   amount: 'USD:2',
+  terms: {
+    status: 'notfound'
+  },
 })
+
+export const WithdrawAcceptedTermsXML = createExample(TestedComponent, {
+  details: {
+    exchangeInfo: {
+      baseUrl: 'exchange.demo.taler.net'
+    } as ExchangeRecord,
+    withdrawFee: {
+      currency: 'USD',
+      fraction: amountFractionalBase * 0.5,
+      value: 0
+    },
+  } as ExchangeWithdrawDetails,
+  amount: 'USD:2',
+  terms: {
+    status: 'accepted'
+  },
+})
+
+
+export const WithdrawAcceptedTermsWithoutFee = createExample(TestedComponent, {
+  details: {
+    exchangeInfo: {
+      baseUrl: 'exchange.demo.taler.net'
+    } as ExchangeRecord,
+    withdrawFee: {
+      currency: 'USD',
+      fraction: 0,
+      value: 0
+    },
+  } as ExchangeWithdrawDetails,
+  amount: 'USD:2',
+  terms: {
+    value : {
+      type: 'xml',
+      document: new DOMParser().parseFromString(termsXml, "text/xml"),
+    },
+    status: 'accepted',
+  }
+})
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx 
b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 9719b8f5..c0347000 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -24,14 +24,15 @@
 import { AmountLike, Amounts, i18n, WithdrawUriInfoResponse } from 
'@gnu-taler/taler-util';
 import { ExchangeWithdrawDetails } from 
'@gnu-taler/taler-wallet-core/src/operations/withdraw';
 import { useEffect, useState } from "preact/hooks";
-import { JSX } from "preact/jsx-runtime";
+import { CheckboxOutlined } from '../components/CheckboxOutlined';
+import { ExchangeXmlTos } from '../components/ExchangeToS';
 import { LogoHeader } from '../components/LogoHeader';
 import { Part } from '../components/Part';
-import { ButtonSuccess, WalletAction } from '../components/styled';
+import { ButtonDestructive, ButtonSuccess, ButtonWarning, LinkSuccess, 
TermsOfService, WalletAction } from '../components/styled';
 import {
   acceptWithdrawal, getExchangeWithdrawalInfo, getWithdrawalDetailsForUri, 
onUpdateNotification
 } from "../wxApi";
-
+import { h } from 'preact';
 
 interface Props {
   talerWithdrawUri?: string;
@@ -40,19 +41,42 @@ interface Props {
 export interface ViewProps {
   details: ExchangeWithdrawDetails;
   amount: string;
-  accept: () => Promise<void>;
-  setCancelled: (b: boolean) => void;
-  setSelecting: (b: boolean) => void;
+  onWithdraw: () => Promise<void>;
+  // setCancelled: (b: boolean) => void;
+  // setSelecting: (b: boolean) => void;
+  onReview: (b: boolean) => void;
+  onAccept: (b: boolean) => void;
+  reviewing: boolean;
+  accepted: boolean;
+  terms: {
+    value?: TermsDocument;
+    status: TermsStatus;
+  }
+
 };
 
+type TermsStatus = 'new' | 'accepted' | 'changed' | 'notfound';
+
+type TermsDocument = TermsDocumentXml | TermsDocumentHtml;
+
+interface TermsDocumentXml {
+  type: 'xml',
+  document: Document,
+}
+
+interface TermsDocumentHtml {
+  type: 'html',
+  href: string,
+}
+
 function amountToString(text: AmountLike) {
   const aj = Amounts.jsonifyAmount(text)
   const amount = Amounts.stringifyValue(aj)
   return `${amount} ${aj.currency}`
 }
 
-
-export function View({ details, amount, accept, setCancelled, setSelecting }: 
ViewProps) {
+export function View({ details, amount, onWithdraw, terms, reviewing, 
onReview, onAccept, accepted }: ViewProps) {
+  const needsReview = terms.status === 'changed' || terms.status === 'new'
 
   return (
     <WalletAction style={{ textAlign: 'center' }}>
@@ -70,17 +94,101 @@ export function View({ details, amount, accept, 
setCancelled, setSelecting }: Vi
           <Part title="Exchange" text={details.exchangeInfo.baseUrl} 
kind='neutral' big />
         </div>
       </section>
-      <section>
-
-        <div>
-          <ButtonSuccess
+      {!reviewing &&
+        <section>
+          <LinkSuccess
             upperCased
-            disabled={!details.exchangeInfo.baseUrl}
-            onClick={accept}
           >
-            {i18n.str`Accept fees and withdraw`}
-          </ButtonSuccess>
-        </div>
+            {i18n.str`Edit exchange`}
+          </LinkSuccess>
+        </section>
+      }
+      {!reviewing && accepted &&
+        <section>
+          <LinkSuccess
+            upperCased
+            onClick={() => onReview(true)}
+          >
+            {i18n.str`Show terms of service`}
+          </LinkSuccess>
+        </section>
+      }
+      {reviewing &&
+        <section>
+          <TermsOfService>
+            {terms.status !== 'accepted' && terms.value && terms.value.type 
=== 'xml' && <ExchangeXmlTos doc={terms.value.document} />}
+          </TermsOfService>
+        </section>}
+      {reviewing && accepted &&
+        <section>
+          <LinkSuccess
+            upperCased
+            onClick={() => onReview(false)}
+          >
+            {i18n.str`Hide terms of service`}
+          </LinkSuccess>
+        </section>
+      }
+      {(reviewing || accepted) &&
+        <section>
+          <div>
+            <CheckboxOutlined
+              name="terms"
+              enabled={accepted}
+              label={i18n.str`I accept the exchange terms of service`}
+              onToggle={() => {
+                onAccept(!accepted)
+                onReview(false)
+              }}
+            />
+          </div>
+        </section>
+      }
+
+      <section>
+        {terms.status === 'new' && !accepted &&
+          <div>
+            <ButtonSuccess
+              upperCased
+              disabled={!details.exchangeInfo.baseUrl}
+              onClick={() => onReview(true)}
+            >
+              {i18n.str`Review exchange terms of service`}
+            </ButtonSuccess>
+          </div>
+        }
+        {terms.status === 'changed' && !accepted &&
+          <div>
+            <ButtonWarning
+              upperCased
+              disabled={!details.exchangeInfo.baseUrl}
+              onClick={() => onReview(true)}
+            >
+              {i18n.str`Review new version of terms of service`}
+            </ButtonWarning>
+          </div>
+        }
+        {(terms.status === 'accepted' || (needsReview && accepted)) &&
+          <div>
+            <ButtonSuccess
+              upperCased
+              disabled={!details.exchangeInfo.baseUrl}
+              onClick={onWithdraw}
+            >
+              {i18n.str`Confirm withdrawal`}
+            </ButtonSuccess>
+          </div>
+        }
+        {terms.status === 'notfound' &&
+          <div>
+            <ButtonDestructive
+              upperCased
+              disabled={true}
+            >
+              {i18n.str`Exchange doesn't have terms of service`}
+            </ButtonDestructive>
+          </div>
+        }
       </section>
     </WalletAction>
   )
@@ -93,6 +201,8 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: 
Props): JSX.Element
   const [selecting, setSelecting] = useState(false);
   const [error, setError] = useState<boolean>(false);
   const [updateCounter, setUpdateCounter] = useState(1);
+  const [reviewing, setReviewing] = useState<boolean>(false)
+  const [accepted, setAccepted] = useState<boolean>(false)
 
   useEffect(() => {
     return onUpdateNotification(() => {
@@ -132,7 +242,7 @@ export function WithdrawPage({ talerWithdrawUri, ...rest }: 
Props): JSX.Element
     return <span><i18n.Translate>missing withdraw uri</i18n.Translate></span>;
   }
 
-  const accept = async (): Promise<void> => {
+  const onWithdraw = async (): Promise<void> => {
     if (!details) {
       throw Error("can't accept, no exchange selected");
     }
@@ -157,9 +267,13 @@ export function WithdrawPage({ talerWithdrawUri, ...rest 
}: Props): JSX.Element
     return <span><i18n.Translate>Getting withdrawal 
details.</i18n.Translate></span>;
   }
 
-  return <View accept={accept}
-    setCancelled={setCancelled} setSelecting={setSelecting}
+  return <View onWithdraw={onWithdraw}
+    // setCancelled={setCancelled} setSelecting={setSelecting}
     details={details} amount={uriInfo.amount}
+    terms={{} as any}
+    accepted={accepted} onAccept={setAccepted}
+    reviewing={reviewing} onReview={setReviewing}
+  // terms={[]}
   />
 }
 
diff --git 
a/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts 
b/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts
index e322c672..f3b1b3b5 100644
--- a/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { useEffect, useState } from "preact/hooks";
 import * as wxApi from "../wxApi";
 
diff --git a/packages/taler-wallet-webextension/src/hooks/useBackupStatus.ts 
b/packages/taler-wallet-webextension/src/hooks/useBackupStatus.ts
index 2d51cb30..c46ab6a5 100644
--- a/packages/taler-wallet-webextension/src/hooks/useBackupStatus.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useBackupStatus.ts
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { ProviderInfo, ProviderPaymentPaid, ProviderPaymentStatus, 
ProviderPaymentType } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
 import * as wxApi from "../wxApi";
diff --git a/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts 
b/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
index e2c62f99..888d4d5f 100644
--- a/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { useEffect, useState } from "preact/hooks";
 import * as wxApi from "../wxApi";
diff --git 
a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts 
b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
index 809863dc..a9242576 100644
--- a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { useState, useEffect } from "preact/hooks";
 import * as wxApi from "../wxApi";
 import { getPermissionsApi } from "../compat";
diff --git a/packages/taler-wallet-webextension/src/hooks/useLang.ts 
b/packages/taler-wallet-webextension/src/hooks/useLang.ts
index d9ad7cd5..70b9614f 100644
--- a/packages/taler-wallet-webextension/src/hooks/useLang.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useLang.ts
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { useNotNullLocalStorage } from './useLocalStorage';
 
 export function useLang(initial?: string): [string, (s:string) => void] {
diff --git a/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts 
b/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts
index 12427882..6520848a 100644
--- a/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { ProviderInfo } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
 import * as wxApi from "../wxApi";
diff --git a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts 
b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts
index 1c8504a8..3178374f 100644
--- a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
 import { useEffect, useState } from "preact/hooks";
 
diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx 
b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
index ffefaedb..6b6e8f5c 100644
--- a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { Amounts, BackupBackupProviderTerms, canonicalizeBaseUrl, i18n } from 
"@gnu-taler/taler-util";
 import { verify } from 
"@gnu-taler/taler-wallet-core/src/crypto/primitives/nacl-fast";
 import { VNode, h } from "preact";
diff --git a/packages/taler-wallet-webextension/src/test-utils.ts 
b/packages/taler-wallet-webextension/src/test-utils.ts
index 7ef47b31..6bf1be3f 100644
--- a/packages/taler-wallet-webextension/src/test-utils.ts
+++ b/packages/taler-wallet-webextension/src/test-utils.ts
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { ComponentChildren, FunctionalComponent, h as render } from 'preact';
 
 export function createExample<Props>(Component: FunctionalComponent<Props>, 
props: Partial<Props>) {
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx 
b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index aa87c91e..14384f23 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -1,3 +1,19 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
 import { Amounts, BackupBackupProviderTerms, canonicalizeBaseUrl, i18n } from 
"@gnu-taler/taler-util";
 import { verify } from 
"@gnu-taler/taler-wallet-core/src/crypto/primitives/nacl-fast";
 import { VNode, h } from "preact";

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.



reply via email to

[Prev in Thread] Current Thread [Next in Thread]