some fixes

5 files changed, 63 insertions, 49 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
index ec997dfb3..166b2c007 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
@@ -23,6 +23,7 @@ import { createExample } from "../test-utils.js";
 import {
   DestinationSelectionGetCash,
   DestinationSelectionSendCash,
+  SelectCurrencyView,
 } from "./DestinationSelection.js";
 
 export default {
@@ -35,3 +36,9 @@ export const GetCash = createExample(DestinationSelectionGetCash, {
 export const SendCash = createExample(DestinationSelectionSendCash, {
   amount: "eur:1",
 });
+export const SelectCurrency = createExample(SelectCurrencyView, {
+  list: {
+    "": "Select a currency",
+    USD: "USD",
+  },
+});
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
index ba5dcf1da..c62504538 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
@@ -186,24 +186,37 @@ export function SelectCurrency({
   const list: Record<string, string> = {};
   hook.response.exchanges.forEach((e) => (list[e.currency] = e.currency));
   list[""] = "Select a currency";
+  return <SelectCurrencyView onChange={onChange} list={list} />;
+}
+
+export function SelectCurrencyView({
+  onChange,
+  list,
+}: {
+  onChange: (s: string) => void;
+  list: Record<string, string>;
+}): VNode {
+  const { i18n } = useTranslationContext();
+
   return (
     <Fragment>
-      <h1>
-        <i18n.Translate>Specify the amount and the origin</i18n.Translate>
-      </h1>
+      <h2>
+        <i18n.Translate>
+          Choose a currency to proceed or add another exchange
+        </i18n.Translate>
+      </h2>
 
-      <Alert severity="warning">
-        Choose a currency to proceed or add more exchanges in the settings tab
-      </Alert>
-      <Input>
-        <SelectList
-          label={<i18n.Translate>Known currencies</i18n.Translate>}
-          list={list}
-          name="lang"
-          value={""}
-          onChange={(v) => onChange(v)}
-        />
-      </Input>
+      <p>
+        <Input>
+          <SelectList
+            label={<i18n.Translate>Known currencies</i18n.Translate>}
+            list={list}
+            name="lang"
+            value={""}
+            onChange={(v) => onChange(v)}
+          />
+        </Input>
+      </p>
       <div style={{ display: "flex", justifyContent: "space-between" }}>
         <div />
         <LinkPrimary href={Pages.settingsExchangeAdd({})}>
@@ -320,7 +333,7 @@ export function DestinationSelectionGetCash({
       <Grid container spacing={1} columns={1}>
         {previous2.length > 0 ? (
           <Fragment>
-            <p>Previous origins:</p>
+            <p>Use previous origins:</p>
             <Grid item xs={1}>
               <Paper style={{ padding: 8 }}>
                 <ContactTable>
@@ -337,9 +350,9 @@ export function DestinationSelectionGetCash({
           </Fragment>
         ) : undefined}
         <Grid item>
-          <p>Create new origin for the money</p>
+          <p>Or specify a new origin for the money</p>
         </Grid>
-        <Grid item container columns={3} spacing={1}>
+        <Grid item container columns={2} spacing={1}>
           <Grid item xs={1}>
             <Paper style={{ padding: 8 }}>
               <p>From my bank account</p>
@@ -355,23 +368,11 @@ export function DestinationSelectionGetCash({
           </Grid>
           <Grid item xs={1}>
             <Paper style={{ padding: 8 }}>
-              <p>From someone else</p>
-              <Button disabled>Request</Button>
-            </Paper>
-          </Grid>
-          <Grid item xs={1}>
-            <Paper style={{ padding: 8 }}>
-              <p>From a business or charity</p>
+              <p>From another wallet</p>
               <Button disabled>Invoice</Button>
             </Paper>
           </Grid>
         </Grid>
-        <Grid item columns={1} spacing={1} xs={1}>
-          <Paper style={{ padding: 8 }}>
-            <p>From a exchange reserve or purse</p>
-            <Button disabled>Create</Button>
-          </Paper>
-        </Grid>
       </Grid>
     </Container>
   );
@@ -441,7 +442,7 @@ export function DestinationSelectionSendCash({
       <Grid container spacing={1} columns={1}>
         {previous2.length > 0 ? (
           <Fragment>
-            <p>Previous destinations:</p>
+            <p>Use previous destinations:</p>
             <Grid item xs={1}>
               <Paper style={{ padding: 8 }}>
                 <ContactTable>
@@ -458,9 +459,9 @@ export function DestinationSelectionSendCash({
           </Fragment>
         ) : undefined}
         <Grid item>
-          <p>Create a destination for the money</p>
+          <p>Or specify a new destination for the money</p>
         </Grid>
-        <Grid item container columns={3} spacing={1}>
+        <Grid item container columns={2} spacing={1}>
           <Grid item xs={1}>
             <Paper style={{ padding: 8 }}>
               <p>To my bank account</p>
@@ -469,22 +470,10 @@ export function DestinationSelectionSendCash({
           </Grid>
           <Grid item xs={1}>
             <Paper style={{ padding: 8 }}>
-              <p>To someone else</p>
+              <p>To another wallet</p>
               <Button disabled>Send</Button>
             </Paper>
           </Grid>
-          <Grid item xs={1}>
-            <Paper style={{ padding: 8 }}>
-              <p>To a business or charity</p>
-              <Button disabled>Pay</Button>
-            </Paper>
-          </Grid>
-        </Grid>
-        <Grid item columns={1} spacing={1} xs={1}>
-          <Paper style={{ padding: 8 }}>
-            <p>To an exchange reserve or purse</p>
-            <Button disabled>Create</Button>
-          </Paper>
         </Grid>
       </Grid>
     </Container>
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index f02e43391..e885a216d 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -96,6 +96,8 @@ const term = 1000 * 60 * 60 * 24;
 function normalizeToDay(x: number): number {
   return Math.round(x / term) * term;
 }
+import DownloadIcon from "../svg/download_24px.svg";
+import UploadIcon from "../svg/upload_24px.svg";
 
 export function HistoryView({
   defaultCurrency,
@@ -206,17 +208,19 @@ export function HistoryView({
           </div>
           <div>
             <Button
+              tooltip="Transfer money to the wallet"
+              startIcon={DownloadIcon}
               variant="contained"
-              // style={{ marginLeft: 0, marginTop: 8 }}
               onClick={() => goToWalletManualWithdraw(selectedCurrency)}
             >
               <i18n.Translate>Add</i18n.Translate>
             </Button>
             {currencyAmount && Amounts.isNonZero(currencyAmount) && (
               <Button
+                tooltip="Transfer money from the wallet"
+                startIcon={UploadIcon}
                 variant="outlined"
                 color="primary"
-                // style={{ marginLeft: 0, marginTop: 8 }}
                 onClick={() => goToWalletDeposit(selectedCurrency)}
               >
                 <i18n.Translate>Send</i18n.Translate>
diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
index 9c9ab7ce4..c574050e0 100644
--- a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
@@ -103,6 +103,7 @@ export function QrReaderPage({ onDetected }: Props): VNode {
         Read QR from file
       </InputFile>
       <div ref={imageRef} /> */}
+      <h1>Scan a QR code or enter taler:// URI below</h1>
       <QrVideo ref={videoRef} />
       <TextField
         label="Taler URI"
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
index 5d21bf306..7d10ad0f4 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
@@ -55,6 +55,19 @@ export const IBAN = createExample(TestedComponent, {
   exchangeBaseUrl: "https://exchange.demo.taler.net",
 });
 
+export const WithReceiverName = createExample(TestedComponent, {
+  reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
+  paytoURI: parsePaytoUri(
+    "payto://iban/ES8877998399652238?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG&receiver=Sebastian",
+  ),
+  amount: {
+    currency: "USD",
+    value: 10,
+    fraction: 0,
+  },
+  exchangeBaseUrl: "https://exchange.demo.taler.net",
+});
+
 export const Bitcoin = createExample(TestedComponent, {
   reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
   paytoURI: parsePaytoUri(