3 files changed, 34 insertions, 2 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Invoice/index.ts b/packages/taler-wallet-webextension/src/wallet/Invoice/index.ts
index edb8721ac..20d902e65 100644
--- a/packages/taler-wallet-webextension/src/wallet/Invoice/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/Invoice/index.ts
@@ -20,6 +20,8 @@ import { compose, StateViewMap } from "../../utils/index.js";
 import { LoadingUriView, ReadyView } from "./views.js";
 import * as wxApi from "../../wxApi.js";
 import { useComponentState } from "./state.js";
+import { AmountJson } from "@gnu-taler/taler-util";
+import { TextFieldHandler } from "../../mui/handlers.js";
 
 export interface Props {
   p: string;
@@ -47,6 +49,8 @@ export namespace State {
   }
   export interface Ready extends BaseInfo {
     status: "ready";
+    amount: AmountJson;
+    subject: TextFieldHandler;
     error: undefined;
   }
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/Invoice/state.ts b/packages/taler-wallet-webextension/src/wallet/Invoice/state.ts
index 45b174063..48cfd359b 100644
--- a/packages/taler-wallet-webextension/src/wallet/Invoice/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/Invoice/state.ts
@@ -14,6 +14,8 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Amounts } from "@gnu-taler/taler-util";
+import { useState } from "preact/hooks";
 import * as wxApi from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
@@ -21,8 +23,15 @@ export function useComponentState(
   { p }: Props,
   api: typeof wxApi,
 ): State {
+  const [subject, setSubject] = useState("");
+  const amount = Amounts.parseOrThrow("ARS:0")
   return {
     status: "ready",
+    subject: {
+      value: subject,
+      onInput: async (e) => setSubject(e)
+    },
+    amount,
     error: undefined,
   }
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/Invoice/views.tsx b/packages/taler-wallet-webextension/src/wallet/Invoice/views.tsx
index 5784a7db5..94e8f8625 100644
--- a/packages/taler-wallet-webextension/src/wallet/Invoice/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Invoice/views.tsx
@@ -14,9 +14,13 @@
  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 { h, VNode } from "preact";
 import { LoadingError } from "../../components/LoadingError.js";
 import { useTranslationContext } from "../../context/translation.js";
+import { Button } from "../../mui/Button.js";
+import { TextField } from "../../mui/TextField.js";
 import { State } from "./index.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
@@ -30,8 +34,23 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function ReadyView({ error }: State.Ready): VNode {
+const Container = styled.div``;
+
+export function ReadyView({ amount, subject }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
 
-  return <div />;
+  return (
+    <Container>
+      <p>Creating an invoice of {Amounts.stringify(amount)}</p>
+      <TextField
+        label="Subject"
+        variant="filled"
+        required
+        value={subject.value}
+        onChange={subject.onInput}
+      />
+      <p>to:</p>
+      <Button>Scan QR code</Button>
+    </Container>
+  );
 }