destination ui

19 files changed, 450 insertions, 61 deletions

diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index 10b901162..70fb7bdcb 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -85,8 +85,8 @@ export const Pages = {
   balanceHistory: pageDefinition<{ currency?: string }>(
     "/balance/history/:currency?",
   ),
-  balanceManualWithdraw: pageDefinition<{ currency?: string }>(
-    "/balance/manual-withdraw/:currency?",
+  balanceManualWithdraw: pageDefinition<{ amount?: string }>(
+    "/balance/manual-withdraw/:amount?",
   ),
   balanceDeposit: pageDefinition<{ currency: string }>(
     "/balance/deposit/:currency",
@@ -94,12 +94,8 @@ export const Pages = {
   balanceTransaction: pageDefinition<{ tid: string }>(
     "/balance/transaction/:tid",
   ),
-  sendCash: pageDefinition<{ currency?: string }>(
-    "/destination/send/:currency?",
-  ),
-  receiveCash: pageDefinition<{ currency?: string }>(
-    "/destination/get/:currency?",
-  ),
+  sendCash: pageDefinition<{ amount?: string }>("/destination/send/:amount"),
+  receiveCash: pageDefinition<{ amount?: string }>("/destination/get/:amount?"),
   dev: "/dev",
 
   backup: "/backup",
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 70f996743..605860300 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -842,10 +842,12 @@ interface SvgIconProps {
   title: string;
   color: string;
   onClick?: any;
+  transform?: string;
 }
 export const SvgIcon = styled.div<SvgIconProps>`
   & > svg {
     fill: ${({ color }) => color};
+    transform: ${({ transform }) => (transform ? transform : "")};
   }
   width: 24px;
   height: 24px;
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/index.ts b/packages/taler-wallet-webextension/src/cta/Payment/index.ts
index 2eb41eb17..889e532c2 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/index.ts
@@ -27,7 +27,7 @@ import { LoadingUriView, BaseView } from "./views.js";
 
 export interface Props {
   talerPayUri?: string;
-  goToWalletManualWithdraw: (currency?: string) => Promise<void>;
+  goToWalletManualWithdraw: (amount?: string) => Promise<void>;
   cancel: () => Promise<void>;
 }
 
@@ -55,7 +55,7 @@ export namespace State {
     amount: AmountJson;
     uri: string;
     error: undefined;
-    goToWalletManualWithdraw: (currency?: string) => Promise<void>;
+    goToWalletManualWithdraw: (amount?: string) => Promise<void>;
     cancel: () => Promise<void>;
   }
   export interface NoBalanceForCurrency extends BaseInfo {
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index bf5f4209b..c43745909 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -393,7 +393,9 @@ function ButtonsSection({
           <Button
             variant="contained"
             color="success"
-            onClick={() => goToWalletManualWithdraw(state.amount.currency)}
+            onClick={() =>
+              goToWalletManualWithdraw(Amounts.stringify(state.amount))
+            }
           >
             <i18n.Translate>Get digital cash</i18n.Translate>
           </Button>
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 380a5903f..5949076e0 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -129,7 +129,6 @@ export function SuccessView(state: State.Success): VNode {
                 title="Edit"
                 dangerouslySetInnerHTML={{ __html: editIcon }}
                 color="black"
-                onClick={() => console.log("ok")}
               />
             </div>
           }
diff --git a/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts b/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
index 0538a55aa..a61fe7965 100644
--- a/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
@@ -34,11 +34,9 @@ export function useDiagnostics(): [WalletDiagnostics | undefined, boolean] {
     }, 1000);
     const doFetch = async (): Promise<void> => {
       const d = await wxApi.getDiagnostics();
-      console.log("got diagnostics", d);
       gotDiagnostics = true;
       setDiagnostics(d);
     };
-    console.log("fetching diagnostics");
     doFetch();
   }, []);
   return [diagnostics, timedOut];
diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
index f953b4a36..8f6b47afb 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
@@ -33,6 +33,10 @@ export default {
 const Stack = styled.div`
   display: flex;
   flex-direction: column;
+  & > button {
+    margin: 14px;
+  }
+  background-color: white;
 `;
 
 export const BasicExample = (): VNode => (
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx
index 82fc155ef..c59bb28b6 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.tsx
+++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx
@@ -43,6 +43,9 @@ export interface Props {
   placeholder?: string;
   required?: boolean;
 
+  startAdornment?: VNode;
+  endAdornment?: VNode;
+
   //FIXME: change to "grabFocus"
   // focused?: boolean;
   rows?: number;
@@ -75,7 +78,6 @@ export function TextField({
 }: Props): VNode {
   // htmlFor={id} id={inputLabelId}
   const Input = select ? selectVariant[variant] : inputVariant[variant];
-  // console.log("variant", Input);
   return (
     <FormControl {...props}>
       {label && <InputLabel>{label}</InputLabel>}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
index fc16b7ce4..fce82f9d2 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -53,6 +53,8 @@ export function InputBaseRoot({
   multiline,
   focused,
   fullWidth,
+  startAdornment,
+  endAdornment,
   children,
 }: any): VNode {
   const fcs = useFormControl({});
@@ -61,6 +63,8 @@ export function InputBaseRoot({
       data-disabled={disabled}
       data-focused={focused}
       data-multiline={multiline}
+      data-hasStart={!!startAdornment}
+      data-hasEnd={!!endAdornment}
       data-error={error}
       class={[
         _class,
@@ -156,22 +160,28 @@ export function InputBaseComponent({
   multiline,
   type,
   class: _class,
+  startAdornment,
+  endAdornment,
   ...props
 }: any): VNode {
   return (
-    <input
-      disabled={disabled}
-      type={type}
-      class={[
-        componentStyle,
-        _class,
-        disabled && componentDisabledStyle,
-        size === "small" && componentSmallStyle,
-        // multiline && componentMultilineStyle,
-        type === "search" && searchStyle,
-      ].join(" ")}
-      {...props}
-    />
+    <Fragment>
+      {startAdornment}
+      <input
+        disabled={disabled}
+        type={type}
+        class={[
+          componentStyle,
+          _class,
+          disabled && componentDisabledStyle,
+          size === "small" && componentSmallStyle,
+          // multiline && componentMultilineStyle,
+          type === "search" && searchStyle,
+        ].join(" ")}
+        {...props}
+      />
+      {endAdornment}
+    </Fragment>
   );
 }
 
@@ -388,7 +398,6 @@ export function TextareaAutoSize({
       getStyleValue(computedStyle, "border-bottom-width") +
       getStyleValue(computedStyle, "border-top-width");
 
-    // console.log(boxSizing, padding, border);
     // The height of the inner content
     const innerHeight = inputShallow.scrollHeight;
 
@@ -412,7 +421,6 @@ export function TextareaAutoSize({
       outerHeight + (boxSizing === "border-box" ? padding + border : 0);
     const overflow = Math.abs(outerHeight - innerHeight) <= 1;
 
-    console.log("height", outerHeight, minRows, maxRows);
     setState((prevState) => {
       // Need a large enough difference to update the height.
       // This prevents infinite rendering loop.
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
index 53c6da295..fa5144ca3 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
@@ -27,7 +27,6 @@ export interface Props {
   defaultValue?: string;
   disabled?: boolean;
   disableUnderline?: boolean;
-  endAdornment?: VNode;
   error?: boolean;
   fullWidth?: boolean;
   id?: string;
@@ -42,6 +41,7 @@ export interface Props {
   required?: boolean;
   rows?: number;
   startAdornment?: VNode;
+  endAdornment?: VNode;
   type?: string;
   value?: string;
 }
@@ -108,6 +108,9 @@ const filledRootStyle = css`
   &[data-multiline] {
     padding: 25px 12px 8px;
   }
+  /* &[data-hasStart] {
+    padding-left: 25px;
+  } */
 `;
 
 const underlineStyle = css`
diff --git a/packages/taler-wallet-webextension/src/platform/dev.ts b/packages/taler-wallet-webextension/src/platform/dev.ts
index 5074071e6..fce5722c0 100644
--- a/packages/taler-wallet-webextension/src/platform/dev.ts
+++ b/packages/taler-wallet-webextension/src/platform/dev.ts
@@ -40,7 +40,6 @@ const api: PlatformAPI = {
     function waitAndNotify(): void {
       total--;
       if (total < 1) {
-        console.log("done");
         fn();
       }
     }
diff --git a/packages/taler-wallet-webextension/src/platform/firefox.ts b/packages/taler-wallet-webextension/src/platform/firefox.ts
index 611cbf8d3..a56e21f24 100644
--- a/packages/taler-wallet-webextension/src/platform/firefox.ts
+++ b/packages/taler-wallet-webextension/src/platform/firefox.ts
@@ -63,7 +63,6 @@ function notifyWhenAppIsReady(callback: () => void): void {
 
 function redirectTabToWalletPage(tabId: number, page: string): void {
   const url = chrome.runtime.getURL(`/static/wallet.html#${page}`);
-  console.log("redirecting tabId: ", tabId, " to: ", url);
   chrome.tabs.update(tabId, { url, loadReplace: true } as any);
 }
 
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx
index be3c8a2f8..9ad979c93 100644
--- a/packages/taler-wallet-webextension/src/popup/Application.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -75,7 +75,7 @@ export function Application(): VNode {
                   path={Pages.balance}
                   component={BalancePage}
                   goToWalletManualWithdraw={() =>
-                    redirectTo(Pages.balanceManualWithdraw({}))
+                    redirectTo(Pages.receiveCash({}))
                   }
                   goToWalletDeposit={(currency: string) =>
                     redirectTo(Pages.balanceDeposit({ currency }))
@@ -133,6 +133,10 @@ export function Application(): VNode {
                   path={Pages.backupProviderAdd}
                   component={RedirectToWalletPage}
                 />
+                <Route
+                  path={Pages.receiveCash.pattern}
+                  component={RedirectToWalletPage}
+                />
                 <Route path={Pages.qr} component={RedirectToWalletPage} />
                 <Route path={Pages.settings} component={RedirectToWalletPage} />
                 <Route
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index ee484afbc..94d5d1e16 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -172,7 +172,7 @@ export function BalanceView(state: State.Balances): VNode {
           variant="contained"
           onClick={state.goToWalletManualWithdraw.onClick}
         >
-          <i18n.Translate>Get</i18n.Translate>
+          <i18n.Translate>Add</i18n.Translate>
         </Button>
         {currencyWithNonZeroAmount.length > 0 && (
           <MultiActionButton
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index a13094646..6c08ecb71 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -57,6 +57,7 @@ import {
   DestinationSelectionGetCash,
   DestinationSelectionSendCash,
 } from "./DestinationSelection.js";
+import { Amounts } from "@gnu-taler/taler-util";
 
 export function Application(): VNode {
   const [globalNotification, setGlobalNotification] = useState<
@@ -130,10 +131,14 @@ export function Application(): VNode {
                 path={Pages.balanceHistory.pattern}
                 component={HistoryPage}
                 goToWalletDeposit={(currency: string) =>
-                  redirectTo(Pages.sendCash({ currency }))
+                  redirectTo(Pages.sendCash({ amount: `${currency}:0` }))
                 }
                 goToWalletManualWithdraw={(currency?: string) =>
-                  redirectTo(Pages.receiveCash({ currency }))
+                  redirectTo(
+                    Pages.receiveCash({
+                      amount: !currency ? undefined : `${currency}:0`,
+                    }),
+                  )
                 }
               />
               <Route
@@ -143,6 +148,9 @@ export function Application(): VNode {
               <Route
                 path={Pages.receiveCash.pattern}
                 component={DestinationSelectionGetCash}
+                goToWalletManualWithdraw={(amount?: string) =>
+                  redirectTo(Pages.balanceManualWithdraw({ amount }))
+                }
               />
               <Route
                 path={Pages.balanceTransaction.pattern}
@@ -226,8 +234,8 @@ export function Application(): VNode {
               <Route
                 path={Pages.ctaPay}
                 component={PaymentPage}
-                goToWalletManualWithdraw={(currency?: string) =>
-                  redirectTo(Pages.balanceManualWithdraw({ currency }))
+                goToWalletManualWithdraw={(amount?: string) =>
+                  redirectTo(Pages.balanceManualWithdraw({ amount }))
                 }
                 cancel={() => redirectTo(Pages.balance)}
               />
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
index 876f683f6..ec997dfb3 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
@@ -30,8 +30,8 @@ export default {
 };
 
 export const GetCash = createExample(DestinationSelectionGetCash, {
-  currency: "usd",
+  amount: "usd:0",
 });
 export const SendCash = createExample(DestinationSelectionSendCash, {
-  currency: "eur",
+  amount: "eur:1",
 });
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
index 187a2412f..5f9c5065c 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
@@ -14,17 +14,22 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Amounts } from "@gnu-taler/taler-util";
 import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import {
+  InputWithLabel,
+  LightText,
+  SvgIcon,
+} from "../components/styled/index.js";
+import { useTranslationContext } from "../context/translation.js";
+import { Button } from "../mui/Button.js";
+import { Grid } from "../mui/Grid.js";
 import { Paper } from "../mui/Paper.js";
-
-const QrVideo = styled.video`
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 8px;
-  background-color: black;
-`;
+import { TextField } from "../mui/TextField.js";
+import arrowIcon from "../svg/chevron-down.svg";
+import bankIcon from "../svg/ri-bank-line.svg";
 
 const Container = styled.div`
   display: flex;
@@ -36,25 +41,379 @@ const Container = styled.div`
 
 interface Props {
   action: "send" | "get";
-  currency?: string;
+  amount?: string;
+  goToWalletManualWithdraw: (amount: string) => void;
 }
 
-export function DestinationSelectionGetCash({ currency }: Props): VNode {
+type Contact = {
+  icon: string;
+  name: string;
+  description: string;
+};
+
+const ContactTable = styled.table`
+  width: 100%;
+  & > tr > td {
+    padding: 8px;
+    & > div:not([data-disabled]):hover {
+      background-color: lightblue;
+    }
+    color: black;
+    div[data-disabled] > * {
+      color: gray;
+    }
+  }
+
+  & > tr:nth-child(2n) {
+    background: #ebebeb;
+  }
+`;
+
+const MediaExample = styled.div`
+  text-size-adjust: 100%;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-align: left;
+  box-sizing: border-box;
+  align-items: center;
+  display: flex;
+  padding: 8px 8px;
+
+  &[data-disabled]:hover {
+    cursor: inherit;
+  }
+  cursor: pointer;
+`;
+
+const MediaLeft = styled.div`
+  text-size-adjust: 100%;
+
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-align: left;
+  box-sizing: border-box;
+  padding-right: 8px;
+  display: block;
+`;
+
+const MediaBody = styled.div`
+  text-size-adjust: 100%;
+
+  font-family: inherit;
+  text-transform: none;
+  text-align: left;
+  box-sizing: border-box;
+  flex: 1 1;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.42857;
+`;
+const MediaRight = styled.div`
+  text-size-adjust: 100%;
+
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-align: left;
+  box-sizing: border-box;
+  padding-left: 8px;
+`;
+
+const CircleDiv = styled.div`
+  box-sizing: border-box;
+  align-items: center;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: background-color 0.15s ease, border-color 0.15s ease,
+    color 0.15s ease;
+  font-size: 16px;
+  background-color: #86a7bd1a;
+  height: 40px;
+  line-height: 40px;
+  width: 40px;
+  border: none;
+`;
+
+function RowExample({
+  info,
+  disabled,
+}: {
+  info: Contact;
+  disabled?: boolean;
+}): VNode {
+  return (
+    <MediaExample data-disabled={disabled}>
+      <MediaLeft>
+        <CircleDiv>
+          <SvgIcon
+            title={info.name}
+            dangerouslySetInnerHTML={{ __html: info.icon }}
+            color="currentColor"
+          />
+        </CircleDiv>
+      </MediaLeft>
+      <MediaBody>
+        <span>{info.name}</span>
+        <LightText>{info.description}</LightText>
+      </MediaBody>
+      <MediaRight>
+        <SvgIcon
+          title="Select this contact"
+          dangerouslySetInnerHTML={{ __html: arrowIcon }}
+          color="currentColor"
+          transform="rotate(-90deg)"
+        />
+      </MediaRight>
+    </MediaExample>
+  );
+}
+
+export function DestinationSelectionGetCash({
+  amount: initialAmount,
+  goToWalletManualWithdraw,
+}: Props): VNode {
+  const parsedInitialAmount = !initialAmount
+    ? undefined
+    : Amounts.parse(initialAmount);
+  const parsedInitialAmountValue = !parsedInitialAmount
+    ? ""
+    : Amounts.stringifyValue(parsedInitialAmount);
+  const currency = parsedInitialAmount?.currency;
+
+  const [amount, setAmount] = useState(parsedInitialAmountValue);
+  const { i18n } = useTranslationContext();
+  const previous1: Contact[] = [];
+  const previous2: Contact[] = [
+    {
+      name: "International Bank",
+      icon: bankIcon,
+      description: "account ending with 3454",
+    },
+    {
+      name: "Max",
+      icon: bankIcon,
+      description: "account ending with 3454",
+    },
+    {
+      name: "Alex",
+      icon: bankIcon,
+      description: "account ending with 3454",
+    },
+  ];
+
+  if (!currency) {
+    return <div>currency not provided</div>;
+  }
+  const currencyAndAmount = `${currency}:${amount}`;
+  const parsedAmount = Amounts.parse(currencyAndAmount);
+  // const dirty = parsedInitialAmountValue !== amount;
+  const invalid = !parsedAmount || Amounts.isZero(parsedAmount);
   return (
     <Container>
-      <p>Request {currency} from:</p>
-      <Paper style={{ padding: 8 }}>Bank account</Paper>
-      <Paper style={{ padding: 8 }}>Another person</Paper>
+      <h1>
+        <i18n.Translate>Specify the amount and the origin</i18n.Translate>
+      </h1>
+      <TextField
+        label="Amount"
+        type="number"
+        variant="filled"
+        error={invalid}
+        required
+        startAdornment={
+          <div style={{ padding: "25px 12px 8px 12px" }}>{currency}</div>
+        }
+        value={amount}
+        onChange={(e) => {
+          setAmount(e);
+        }}
+      />
+
+      <Grid container spacing={1} columns={1}>
+        {previous2.length > 0 ? (
+          <Fragment>
+            <p>Previous origins:</p>
+            <Grid item xs={1}>
+              <Paper style={{ padding: 8 }}>
+                <ContactTable>
+                  {previous2.map((info, i) => (
+                    <tr key={i}>
+                      <td>
+                        <RowExample info={info} disabled={invalid} />
+                      </td>
+                    </tr>
+                  ))}
+                </ContactTable>
+              </Paper>
+            </Grid>
+          </Fragment>
+        ) : undefined}
+        <Grid item>
+          <p>Create new origin for the money</p>
+        </Grid>
+        <Grid item container columns={3} spacing={1}>
+          <Grid item xs={1}>
+            <Paper style={{ padding: 8 }}>
+              <p>From my bank account</p>
+              <Button
+                disabled={invalid}
+                onClick={async () =>
+                  goToWalletManualWithdraw(currencyAndAmount)
+                }
+              >
+                Withdraw
+              </Button>
+            </Paper>
+          </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>
+              <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>
   );
 }
 
-export function DestinationSelectionSendCash({ currency }: Props): VNode {
+export function DestinationSelectionSendCash({
+  amount: initialAmount,
+}: Props): VNode {
+  const parsedInitialAmount = !initialAmount
+    ? undefined
+    : Amounts.parse(initialAmount);
+  const parsedInitialAmountValue = !parsedInitialAmount
+    ? ""
+    : Amounts.stringifyValue(parsedInitialAmount);
+  const currency = parsedInitialAmount?.currency;
+
+  const [amount, setAmount] = useState(parsedInitialAmountValue);
+  const { i18n } = useTranslationContext();
+  const previous1: Contact[] = [];
+  const previous2: Contact[] = [
+    {
+      name: "International Bank",
+      icon: bankIcon,
+      description: "account ending with 3454",
+    },
+    {
+      name: "Max",
+      icon: bankIcon,
+      description: "account ending with 3454",
+    },
+    {
+      name: "Alex",
+      icon: bankIcon,
+      description: "account ending with 3454",
+    },
+  ];
+
+  if (!currency) {
+    return <div>currency not provided</div>;
+  }
+  const currencyAndAmount = `${currency}:${amount}`;
+  const parsedAmount = Amounts.parse(currencyAndAmount);
+  const invalid = !parsedAmount || Amounts.isZero(parsedAmount);
   return (
     <Container>
-      <p>Sending {currency} to:</p>
-      <Paper style={{ padding: 8 }}>Bank account</Paper>
-      <Paper style={{ padding: 8 }}>Another person</Paper>
+      <h1>
+        <i18n.Translate>Specify the amount and the destination</i18n.Translate>
+      </h1>
+
+      <TextField
+        label="Amount"
+        type="number"
+        variant="filled"
+        required
+        error={invalid}
+        startAdornment={
+          <div style={{ padding: "25px 12px 8px 12px" }}>{currency}</div>
+        }
+        value={amount}
+        onChange={(e) => {
+          setAmount(e);
+        }}
+      />
+
+      <Grid container spacing={1} columns={1}>
+        {previous2.length > 0 ? (
+          <Fragment>
+            <p>Previous destinations:</p>
+            <Grid item xs={1}>
+              <Paper style={{ padding: 8 }}>
+                <ContactTable>
+                  {previous2.map((info, i) => (
+                    <tr key={i}>
+                      <td>
+                        <RowExample info={info} disabled={invalid} />
+                      </td>
+                    </tr>
+                  ))}
+                </ContactTable>
+              </Paper>
+            </Grid>
+          </Fragment>
+        ) : undefined}
+        <Grid item>
+          <p>Create a destination for the money</p>
+        </Grid>
+        <Grid item container columns={3} spacing={1}>
+          <Grid item xs={1}>
+            <Paper style={{ padding: 8 }}>
+              <p>To my bank account</p>
+              <Button disabled={invalid}>Deposit</Button>
+            </Paper>
+          </Grid>
+          <Grid item xs={1}>
+            <Paper style={{ padding: 8 }}>
+              <p>To someone else</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 f331cc457..f02e43391 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -210,7 +210,7 @@ export function HistoryView({
               // style={{ marginLeft: 0, marginTop: 8 }}
               onClick={() => goToWalletManualWithdraw(selectedCurrency)}
             >
-              <i18n.Translate>Get</i18n.Translate>
+              <i18n.Translate>Add</i18n.Translate>
             </Button>
             {currencyAmount && Amounts.isNonZero(currencyAmount) && (
               <Button
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index a45daa6b1..a292914fb 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -33,11 +33,11 @@ import { CreateManualWithdraw } from "./CreateManualWithdraw.js";
 import { ReserveCreated } from "./ReserveCreated.js";
 
 interface Props {
-  currency?: string;
+  amount?: string;
   onCancel: () => Promise<void>;
 }
 
-export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
+export function ManualWithdrawPage({ amount, onCancel }: Props): VNode {
   const [success, setSuccess] = useState<
     | {
         response: AcceptManualWithdrawalResult;
@@ -117,12 +117,18 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
     {} as Record<string, string>,
   );
 
+  const parsedAmount = !amount ? undefined : Amounts.parse(amount);
+  const currency = parsedAmount?.currency;
+  const amountValue = !parsedAmount
+    ? undefined
+    : Amounts.stringifyValue(parsedAmount);
   return (
     <CreateManualWithdraw
       error={error}
       exchangeUrlWithCurrency={exchangeList}
       onCreate={doCreate}
       initialCurrency={currency}
+      initialAmount={amountValue}
     />
   );
 }