remove clear button

1 files changed, 62 insertions, 77 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
index 1d18b3993..d36524cc4 100644
--- a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
@@ -25,14 +25,14 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { css } from "@linaria/core";
 import { styled } from "@linaria/react";
 import jsQR, * as pr from "jsqr";
-import { Fragment, h, VNode } from "preact";
+import { h, VNode } from "preact";
 import { useRef, useState } from "preact/hooks";
+import { EnabledBySettings } from "../components/EnabledBySettings.js";
 import { Alert } from "../mui/Alert.js";
 import { Button } from "../mui/Button.js";
 import { Grid } from "../mui/Grid.js";
 import { InputFile } from "../mui/InputFile.js";
 import { TextField } from "../mui/TextField.js";
-import { EnabledBySettings } from "../components/EnabledBySettings.js";
 
 const QrCanvas = css`
   width: 80%;
@@ -185,7 +185,7 @@ async function createCanvasFromFile(
   canvas.width = img.width;
   canvas.height = img.height;
   return new Promise<string | undefined>((ok, bad) => {
-    img.addEventListener("load", (e) => {
+    img.addEventListener("load", () => {
       try {
         const code = drawIntoCanvasAndGetQR(img, canvas);
         ok(code);
@@ -197,7 +197,7 @@ async function createCanvasFromFile(
 }
 
 async function waitUntilReady(video: HTMLVideoElement): Promise<void> {
-  return new Promise((ok, bad) => {
+  return new Promise((ok, _bad) => {
     if (video.readyState === video.HAVE_ENOUGH_DATA) {
       return ok();
     }
@@ -215,14 +215,14 @@ export function QrReaderPage({ onDetected }: Props): VNode {
   const { i18n } = useTranslationContext();
 
   function onChangeDetect(str: string) {
-    if (!!str) {
-      const uri = parseTalerUri(str)
+    if (str) {
+      const uri = parseTalerUri(str);
       if (!uri) {
         setError(
           i18n.str`URI is not valid. Taler URI should start with "taler://"`,
         );
       } else {
-        onDetected(uri)
+        onDetected(uri);
         setError(undefined);
       }
     } else {
@@ -232,7 +232,7 @@ export function QrReaderPage({ onDetected }: Props): VNode {
   }
 
   function onChange(str: string) {
-    if (!!str) {
+    if (str) {
       if (!parseTalerUri(str)) {
         setError(
           i18n.str`URI is not valid. Taler URI should start with "taler://"`,
@@ -295,7 +295,6 @@ export function QrReaderPage({ onDetected }: Props): VNode {
   }
   const uri = parseTalerUri(value);
 
-  const active = value === "";
   return (
     <Container>
       <section>
@@ -304,84 +303,70 @@ export function QrReaderPage({ onDetected }: Props): VNode {
             Scan a QR code or enter taler:// URI below
           </i18n.Translate>
         </h1>
-
-        <p>
-          <TextField
-            label="Taler URI"
-            variant="standard"
-            fullWidth
-            value={value}
-            onChange={onChange}
-          />
-        </p>
+        <div style={{ justifyContent: "space-between", display: "flex" }}>
+          <div style={{ width: "75%" }}>
+            <TextField
+              label="Taler URI"
+              variant="standard"
+              fullWidth
+              value={value}
+              onChange={onChange}
+            />
+          </div>
+          {uri && (
+            <Button
+              disabled={!!error}
+              variant="contained"
+              color="success"
+              onClick={async () => {
+                if (uri) onDetected(uri);
+              }}
+            >
+              {(function (talerUri: TalerUri): VNode {
+                switch (talerUri.type) {
+                  case TalerUriAction.Pay:
+                    return <i18n.Translate>Pay invoice</i18n.Translate>;
+                  case TalerUriAction.Withdraw:
+                    return (
+                      <i18n.Translate>Withdrawal from bank</i18n.Translate>
+                    );
+                  case TalerUriAction.Refund:
+                    return <i18n.Translate>Claim refund</i18n.Translate>;
+                  case TalerUriAction.PayPull:
+                    return <i18n.Translate>Pay invoice</i18n.Translate>;
+                  case TalerUriAction.PayPush:
+                    return <i18n.Translate>Accept payment</i18n.Translate>;
+                  case TalerUriAction.PayTemplate:
+                    return <i18n.Translate>Complete order</i18n.Translate>;
+                  case TalerUriAction.Restore:
+                    return <i18n.Translate>Restore wallet</i18n.Translate>;
+                  case TalerUriAction.DevExperiment:
+                    return <i18n.Translate>Enable experiment</i18n.Translate>;
+                  case TalerUriAction.WithdrawExchange:
+                    return (
+                      <i18n.Translate>Withdraw from exchange</i18n.Translate>
+                    );
+                  case TalerUriAction.AddExchange:
+                    return <i18n.Translate>Add exchange</i18n.Translate>;
+                  default: {
+                    assertUnreachable(talerUri);
+                  }
+                }
+              })(uri)}
+            </Button>
+          )}
+        </div>
         <Grid container justifyContent="space-around" columns={2}>
           <Grid item xs={2}>
             <p>{error && <Alert severity="error">{error}</Alert>}</p>
           </Grid>
-          {uri && (
-            <Grid item xs={2}>
-              <Button
-                disabled={!!error}
-                variant="contained"
-                color="success"
-                onClick={async () => {
-                  if (uri) onDetected(uri);
-                }}
-              >
-                {(function (talerUri: TalerUri): VNode {
-                  switch (talerUri.type) {
-                    case TalerUriAction.Pay:
-                      return <i18n.Translate>Pay invoice</i18n.Translate>
-                    case TalerUriAction.Withdraw:
-                      return <i18n.Translate>Withdrawal from bank</i18n.Translate>
-                    case TalerUriAction.Refund:
-                      return <i18n.Translate>Claim refund</i18n.Translate>
-                    case TalerUriAction.PayPull:
-                      return <i18n.Translate>Pay invoice</i18n.Translate>
-                    case TalerUriAction.PayPush:
-                      return <i18n.Translate>Accept payment</i18n.Translate>
-                    case TalerUriAction.PayTemplate:
-                      return <i18n.Translate>Complete order</i18n.Translate>
-                    case TalerUriAction.Restore:
-                      return <i18n.Translate>Restore wallet</i18n.Translate>
-                    case TalerUriAction.DevExperiment:
-                      return <i18n.Translate>Enable experiment</i18n.Translate>
-                    case TalerUriAction.WithdrawExchange:
-                      return <i18n.Translate>Withdraw from exchange</i18n.Translate>
-                    case TalerUriAction.AddExchange:
-                      return <i18n.Translate>Add exchange</i18n.Translate>
-                    default: {
-                      assertUnreachable(talerUri)
-                    }
-                  }
-                })(uri)}
-              </Button>
-            </Grid>
-          )}
-          <Grid item xs={1}>
+          <Grid item xs={2}>
             <p>
               <Button variant="contained" onClick={startVideo}>
                 Use Camera
               </Button>
             </p>
           </Grid>
-          {!active && (
-            <Grid item xs={1}>
-              <p>
-
-                <Button
-                  variant="contained"
-                  onClick={async () => {
-                    setShow("nothing");
-                    onChange("");
-                  }}
-                  color="error"
-                >
-                  <i18n.Translate>Clear</i18n.Translate>
-                </Button>
-              </p>
-            </Grid>
-          )}
           <EnabledBySettings name="advancedMode">
             <Grid item xs={2}>
               <InputFile onChange={onFileRead}>Read QR from file</InputFile>