set amount for manual withdraw when the qr does not have it

1 files changed, 38 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 57d6238b2..8a01edaaf 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -32,6 +32,8 @@ import {
   WithdrawDetails,
 } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
+import { Grid } from "../../mui/Grid.js";
+import { AmountField } from "../../components/AmountField.js";
 
 export function SuccessView(state: State.Success): VNode {
   const { i18n } = useTranslationContext();
@@ -143,11 +145,45 @@ function WithdrawWithMobile({
   );
 }
 
-export function SelectAmountView({ currency }: State.SelectAmount): VNode {
+export function SelectAmountView({
+  currency,
+  amount,
+  exchangeBaseUrl,
+  confirm,
+}: State.SelectAmount): VNode {
   const { i18n } = useTranslationContext();
   return (
     <Fragment>
-      <p>select the amount for ${currency}</p>
+      <section style={{ textAlign: "left" }}>
+        <Part
+          title={
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <i18n.Translate>Exchange</i18n.Translate>
+            </div>
+          }
+          text={<ExchangeDetails exchange={exchangeBaseUrl} />}
+          kind="neutral"
+          big
+        />
+        <Grid container columns={2} justifyContent="space-between">
+          <AmountField label={i18n.str`Amount`} required handler={amount} />
+        </Grid>
+      </section>
+      <section>
+        <Button
+          variant="contained"
+          color="info"
+          disabled={!confirm.onClick}
+          onClick={confirm.onClick}
+        >
+          <i18n.Translate>See details</i18n.Translate>
+        </Button>
+      </section>
     </Fragment>
   );
 }