withdraw call to action

2 files changed, 111 insertions, 81 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index 603163cee..f6cef7e90 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -76,33 +76,34 @@ export function Application(): VNode {
         <IoCProviderForRuntime>
           {/* <Match/> won't work in the first render if <Router /> is not called first */}
           {/* https://github.com/preactjs/preact-router/issues/415 */}
-          <Router history={hash_history} />
-          <Match>
-            {({ path }: { path: string }) => {
-              if (path && path.startsWith("/cta")) return;
-              return (
-                <Fragment>
-                  <LogoHeader />
-                  <WalletNavBar path={path} />
-                  {shouldShowPendingOperations(path) && (
-                    <div
-                      style={{
-                        backgroundColor: "lightcyan",
-                        display: "flex",
-                        justifyContent: "center",
-                      }}
-                    >
-                      <PendingTransactions
-                        goToTransaction={(tid: string) =>
-                          redirectTo(Pages.balanceTransaction({ tid }))
-                        }
-                      />
-                    </div>
-                  )}
-                </Fragment>
-              );
-            }}
-          </Match>
+          <Router history={hash_history}>
+            <Match default>
+              {({ path }: { path: string }) => {
+                if (path && path.startsWith("/cta")) return;
+                return (
+                  <Fragment>
+                    <LogoHeader />
+                    <WalletNavBar path={path} />
+                    {shouldShowPendingOperations(path) && (
+                      <div
+                        style={{
+                          backgroundColor: "lightcyan",
+                          display: "flex",
+                          justifyContent: "center",
+                        }}
+                      >
+                        <PendingTransactions
+                          goToTransaction={(tid: string) =>
+                            redirectTo(Pages.balanceTransaction({ tid }))
+                          }
+                        />
+                      </div>
+                    )}
+                  </Fragment>
+                );
+              }}
+            </Match>
+          </Router>
           <WalletBox>
             {globalNotification && (
               <SuccessBox onClick={clearNotification}>
@@ -206,12 +207,28 @@ export function Application(): VNode {
                 goToWalletManualWithdraw={(currency?: string) =>
                   redirectTo(Pages.balanceManualWithdraw({ currency }))
                 }
-                goBack={() => redirectTo(Pages.balance)}
+                cancel={() => redirectTo(Pages.balance)}
+              />
+              <Route
+                path={Pages.ctaRefund}
+                component={RefundPage}
+                cancel={() => redirectTo(Pages.balance)}
+              />
+              <Route
+                path={Pages.ctaTips}
+                component={TipPage}
+                cancel={() => redirectTo(Pages.balance)}
+              />
+              <Route
+                path={Pages.ctaWithdraw}
+                component={WithdrawPage}
+                cancel={() => redirectTo(Pages.balance)}
+              />
+              <Route
+                path={Pages.ctaDeposit}
+                component={DepositPageCTA}
+                cancel={() => redirectTo(Pages.balance)}
               />
-              <Route path={Pages.ctaRefund} component={RefundPage} />
-              <Route path={Pages.ctaTips} component={TipPage} />
-              <Route path={Pages.ctaWithdraw} component={WithdrawPage} />
-              <Route path={Pages.ctaDeposit} component={DepositPageCTA} />
 
               {/**
                * NOT FOUND
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index e643fef18..ff3b70b65 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -32,7 +32,6 @@ import {
   TransactionRefund,
   TransactionTip,
   TransactionType,
-  TransactionWithdrawal,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
 import { styled } from "@linaria/react";
@@ -308,7 +307,14 @@ export function TransactionView({
         )}
         <Part
           title={<i18n.Translate>Details</i18n.Translate>}
-          text={<WithdrawDetails transaction={transaction} />}
+          text={
+            <WithdrawDetails
+              amount={{
+                effective: Amounts.parseOrThrow(transaction.amountEffective),
+                raw: Amounts.parseOrThrow(transaction.amountRaw),
+              }}
+            />
+          }
         />
       </TransactionTemplate>
     );
@@ -713,10 +719,64 @@ function DeliveryDetails({
   );
 }
 
+export function ExchangeDetails({ exchange }: { exchange: string }): VNode {
+  return (
+    <div>
+      <p style={{ marginTop: 0 }}>
+        <a rel="noreferrer" target="_blank" href={exchange}>
+          {exchange}
+        </a>
+      </p>
+    </div>
+  );
+}
+
 export interface AmountWithFee {
   effective: AmountJson;
   raw: AmountJson;
 }
+
+export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode {
+  const { i18n } = useTranslationContext();
+
+  const fee = Amounts.sub(amount.raw, amount.effective).amount;
+
+  const maxFrac = [amount.raw, amount.effective, fee]
+    .map((a) => Amounts.maxFractionalDigits(a))
+    .reduce((c, p) => Math.max(c, p), 0);
+
+  return (
+    <PurchaseDetailsTable>
+      <tr>
+        <td>Withdraw</td>
+        <td>
+          <Amount value={amount.raw} maxFracSize={maxFrac} />
+        </td>
+      </tr>
+
+      {Amounts.isNonZero(fee) && (
+        <tr>
+          <td>Transaction fees</td>
+          <td>
+            <Amount value={fee} negative maxFracSize={maxFrac} />
+          </td>
+        </tr>
+      )}
+      <tr>
+        <td colSpan={2}>
+          <hr />
+        </td>
+      </tr>
+      <tr>
+        <td>Total</td>
+        <td>
+          <Amount value={amount.effective} maxFracSize={maxFrac} />
+        </td>
+      </tr>
+    </PurchaseDetailsTable>
+  );
+}
+
 export function PurchaseDetails({
   price,
   refund,
@@ -1020,53 +1080,6 @@ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode {
   );
 }
 
-function WithdrawDetails({
-  transaction,
-}: {
-  transaction: TransactionWithdrawal;
-}): VNode {
-  const { i18n } = useTranslationContext();
-
-  const r = Amounts.parseOrThrow(transaction.amountRaw);
-  const e = Amounts.parseOrThrow(transaction.amountEffective);
-  const fee = Amounts.sub(r, e).amount;
-
-  const maxFrac = [r, e, fee]
-    .map((a) => Amounts.maxFractionalDigits(a))
-    .reduce((c, p) => Math.max(c, p), 0);
-
-  return (
-    <PurchaseDetailsTable>
-      <tr>
-        <td>Withdraw</td>
-        <td>
-          <Amount value={transaction.amountRaw} maxFracSize={maxFrac} />
-        </td>
-      </tr>
-
-      {Amounts.isNonZero(fee) && (
-        <tr>
-          <td>Transaction fees</td>
-          <td>
-            <Amount value={fee} negative maxFracSize={maxFrac} />
-          </td>
-        </tr>
-      )}
-      <tr>
-        <td colSpan={2}>
-          <hr />
-        </td>
-      </tr>
-      <tr>
-        <td>Total</td>
-        <td>
-          <Amount value={transaction.amountEffective} maxFracSize={maxFrac} />
-        </td>
-      </tr>
-    </PurchaseDetailsTable>
-  );
-}
-
 function Header({
   timestamp,
   total,