last activity -> pending; fix downloadTos

4 files changed, 109 insertions, 48 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index 3f550175d..921ac5005 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -277,3 +277,47 @@ export const FiveOfficialCurrencies = createExample(TestedComponent, {
     },
   ],
 });
+
+export const FiveOfficialCurrenciesWithHighValue = createExample(
+  TestedComponent,
+  {
+    transactions: [exampleData.withdraw],
+    balances: [
+      {
+        available: "USD:881001321230000",
+        pendingIncoming: "USD:0",
+        pendingOutgoing: "USD:0",
+        hasPendingTransactions: false,
+        requiresUserInput: false,
+      },
+      {
+        available: "EUR:10",
+        pendingIncoming: "TESTKUDOS:0",
+        pendingOutgoing: "TESTKUDOS:0",
+        hasPendingTransactions: false,
+        requiresUserInput: false,
+      },
+      {
+        available: "COL:443000123123000.5123123",
+        pendingIncoming: "TESTKUDOS:0",
+        pendingOutgoing: "TESTKUDOS:0",
+        hasPendingTransactions: false,
+        requiresUserInput: false,
+      },
+      {
+        available: "JPY:1564450000000.6123123",
+        pendingIncoming: "TESTKUDOS:0",
+        pendingOutgoing: "TESTKUDOS:0",
+        hasPendingTransactions: false,
+        requiresUserInput: false,
+      },
+      {
+        available: "GBP:736001231231200.23123",
+        pendingIncoming: "TESTKUDOS:0",
+        pendingOutgoing: "TESTKUDOS:0",
+        hasPendingTransactions: false,
+        requiresUserInput: false,
+      },
+    ],
+  },
+);
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index a295ca28f..feeb61c5d 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -28,6 +28,8 @@ import {
   ButtonBoxPrimary,
   ButtonBoxWarning,
   ButtonPrimary,
+  CenteredBoldText,
+  CenteredText,
   DateSeparator,
   NiceSelect,
   WarningBox,
@@ -126,8 +128,6 @@ export function HistoryView({
     }, {} as { [x: string]: Transaction[] });
   const datesWithTransaction = Object.keys(byDate);
 
-  const multiCurrency = balances.length > 1;
-
   if (balances.length === 0 || !selectedCurrency) {
     return (
       <WarningBox>
@@ -143,52 +143,73 @@ export function HistoryView({
   return (
     <Fragment>
       <section>
-        <p
+        <div
           style={{
             display: "flex",
-            justifyContent: "space-between",
+            flexWrap: "wrap",
             alignItems: "center",
+            justifyContent: "space-between",
           }}
         >
-          {currencies.length === 1 ? (
-            <div style={{ fontSize: "large" }}>{selectedCurrency}</div>
-          ) : (
-            <NiceSelect>
-              <select
-                value={currencyIndex}
-                onChange={(e) => {
-                  setCurrencyIndex(Number(e.currentTarget.value));
+          <div
+            style={{
+              width: "fit-content",
+              display: "flex",
+            }}
+          >
+            {currencies.length === 1 ? (
+              <CenteredText style={{ fontSize: "x-large", margin: 8 }}>
+                {selectedCurrency}
+              </CenteredText>
+            ) : (
+              <NiceSelect>
+                <select
+                  style={{
+                    fontSize: "x-large",
+                  }}
+                  value={currencyIndex}
+                  onChange={(e) => {
+                    setCurrencyIndex(Number(e.currentTarget.value));
+                  }}
+                >
+                  {currencies.map((currency, index) => {
+                    return (
+                      <option value={index} key={currency}>
+                        {currency}
+                      </option>
+                    );
+                  })}
+                </select>
+              </NiceSelect>
+            )}
+            {currencyAmount && (
+              <CenteredBoldText
+                style={{
+                  display: "inline-block",
+                  fontSize: "x-large",
+                  margin: 8,
                 }}
               >
-                {currencies.map((currency, index) => {
-                  return (
-                    <option value={index} key={currency}>
-                      {currency}
-                    </option>
-                  );
-                })}
-              </select>
-            </NiceSelect>
-          )}
-          {currencyAmount && (
-            <h2 style={{ margin: 0 }}>
-              {Amounts.stringifyValue(currencyAmount)}
-            </h2>
-          )}
-        </p>
-        <div style={{ marginLeft: "auto", width: "fit-content" }}>
-          <ButtonPrimary
-            onClick={() => goToWalletManualWithdraw(selectedCurrency)}
-          >
-            Withdraw
-          </ButtonPrimary>
-          {currencyAmount && Amounts.isNonZero(currencyAmount) && (
-            <ButtonBoxPrimary
-              onClick={() => goToWalletDeposit(selectedCurrency)}
+                {Amounts.stringifyValue(currencyAmount)}
+              </CenteredBoldText>
+            )}
+          </div>
+          <div>
+            <ButtonPrimary
+              style={{ marginLeft: 0, marginTop: 8 }}
+              onClick={() => goToWalletManualWithdraw(selectedCurrency)}
             >
-              Deposit
-            </ButtonBoxPrimary>
-          )}
+              Withdraw
+            </ButtonPrimary>
+            {currencyAmount && Amounts.isNonZero(currencyAmount) && (
+              <ButtonBoxPrimary
+                style={{ marginLeft: 0, marginTop: 8 }}
+                onClick={() => goToWalletDeposit(selectedCurrency)}
+              >
+                Deposit
+              </ButtonBoxPrimary>
+            )}
+          </div>
         </div>
       </section>
       {datesWithTransaction.length === 0 ? (
@@ -205,11 +226,7 @@ export function HistoryView({
                   />
                 </DateSeparator>
                 {byDate[d].map((tx, i) => (
-                  <TransactionItem
-                    key={i}
-                    tx={tx}
-                    multiCurrency={multiCurrency}
-                  />
+                  <TransactionItem key={i} tx={tx} />
                 ))}
               </Fragment>
             );
diff --git a/packages/taler-wallet-webextension/src/wallet/LastActivityPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/PendingPage.stories.tsx
index e729c2982..cbcb5a824 100644
--- a/packages/taler-wallet-webextension/src/wallet/LastActivityPage.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/PendingPage.stories.tsx
@@ -21,10 +21,10 @@
 
 import { createExample } from "../test-utils";
 import { queryToSlashKeys } from "../utils/index";
-import { LastActivityPage as TestedComponent } from "./LastActivityPage";
+import { Pending as TestedComponent } from "./PendingPage";
 
 export default {
-  title: "wallet/last activity",
+  title: "wallet/pending",
   component: TestedComponent,
 };
 
diff --git a/packages/taler-wallet-webextension/src/wallet/LastActivityPage.tsx b/packages/taler-wallet-webextension/src/wallet/PendingPage.tsx
index 8ec4c8759..998095238 100644
--- a/packages/taler-wallet-webextension/src/wallet/LastActivityPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/PendingPage.tsx
@@ -19,7 +19,7 @@ import { useState } from "preact/hooks";
 import { ButtonPrimary } from "../components/styled";
 import { AddNewActionView } from "./AddNewActionView";
 
-export function LastActivityPage(): VNode {
+export function Pending(): VNode {
   const [addingAction, setAddingAction] = useState(false);
 
   if (addingAction) {