some fixes

2 files changed, 75 insertions, 39 deletions

diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index ec5d1e7aa..609c82e10 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -21,11 +21,11 @@ import {
   segwitMinAmount,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { useTranslationContext } from "../context/translation.js";
 import { CopiedIcon, CopyIcon } from "../svg/index.js";
 import { Amount } from "./Amount.js";
-import { ButtonBox, TooltipRight } from "./styled/index.js";
+import { ButtonBox, TooltipLeft, TooltipRight } from "./styled/index.js";
 
 export interface BankDetailsProps {
   payto: PaytoUri | undefined;
@@ -62,11 +62,6 @@ export function BankDetailsByPaytoType({
             metadata with an minimum amount.
           </i18n.Translate>
         </p>
-        <Row
-          literal
-          name={<i18n.Translate>Reserve</i18n.Translate>}
-          value={subject}
-        />
 
         <p>
           <i18n.Translate>
@@ -80,6 +75,13 @@ export function BankDetailsByPaytoType({
             <td>
               <Amount value={amount} hideCurrency /> BTC
             </td>
+            <td>
+              <CopyButton
+                getContent={() =>
+                  `${payto.targetPath} ${Amounts.stringifyValue(amount)} BTC`
+                }
+              />
+            </td>
           </tr>
           {payto.segwitAddrs.map((addr, i) => (
             <tr key={i}>
@@ -87,6 +89,13 @@ export function BankDetailsByPaytoType({
               <td>
                 <Amount value={min} hideCurrency /> BTC
               </td>
+              <td>
+                <CopyButton
+                  getContent={() =>
+                    `${addr} ${Amounts.stringifyValue(min)} BTC`
+                  }
+                />
+              </td>
             </tr>
           ))}
         </table>
@@ -120,6 +129,8 @@ export function BankDetailsByPaytoType({
   ) : payto.targetType === "iban" ? (
     <Row name={<i18n.Translate>IBAN</i18n.Translate>} value={payto.iban} />
   ) : undefined;
+
+  const receiver = payto.params["receiver"] || undefined;
   return (
     <div
       style={{
@@ -133,11 +144,7 @@ export function BankDetailsByPaytoType({
       <table>
         {accountPart}
         <Row
-          name={<i18n.Translate>Exchange</i18n.Translate>}
-          value={exchangeBaseUrl}
-        />
-        <Row
-          name={<i18n.Translate>Chosen amount</i18n.Translate>}
+          name={<i18n.Translate>Amount</i18n.Translate>}
           value={<Amount value={amount} />}
         />
         <Row
@@ -145,11 +152,47 @@ export function BankDetailsByPaytoType({
           value={subject}
           literal
         />
+        {receiver ? (
+          <Row
+            name={<i18n.Translate>Receiver name</i18n.Translate>}
+            value={receiver}
+          />
+        ) : undefined}
       </table>
     </div>
   );
 }
 
+function CopyButton({ getContent }: { getContent: () => string }): VNode {
+  const [copied, setCopied] = useState(false);
+  function copyText(): void {
+    navigator.clipboard.writeText(getContent() || "");
+    setCopied(true);
+  }
+  useEffect(() => {
+    if (copied) {
+      setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+    }
+  }, [copied]);
+
+  if (!copied) {
+    return (
+      <ButtonBox onClick={copyText}>
+        <CopyIcon />
+      </ButtonBox>
+    );
+  }
+  return (
+    <TooltipLeft content="Copied">
+      <ButtonBox disabled>
+        <CopiedIcon />
+      </ButtonBox>
+    </TooltipLeft>
+  );
+}
+
 function Row({
   name,
   value,
@@ -159,38 +202,15 @@ function Row({
   value: string | VNode;
   literal?: boolean;
 }): VNode {
-  const [copied, setCopied] = useState(false);
   const preRef = useRef<HTMLPreElement>(null);
   const tdRef = useRef<HTMLTableCellElement>(null);
-  function copyText(): void {
-    const content = literal
-      ? preRef.current?.textContent
-      : tdRef.current?.textContent;
-    navigator.clipboard.writeText(content || "");
-    setCopied(true);
+
+  function getContent(): string {
+    return preRef.current?.textContent || tdRef.current?.textContent || "";
   }
-  useEffect(() => {
-    if (copied) {
-      setTimeout(() => {
-        setCopied(false);
-      }, 1000);
-    }
-  }, [copied, preRef]);
+
   return (
     <tr>
-      <td>
-        {!copied ? (
-          <ButtonBox onClick={copyText}>
-            <CopyIcon />
-          </ButtonBox>
-        ) : (
-          <TooltipRight content="Copied">
-            <ButtonBox disabled>
-              <CopiedIcon />
-            </ButtonBox>
-          </TooltipRight>
-        )}
-      </td>
       <td style={{ paddingRight: 8 }}>
         <b>{name}</b>
       </td>
@@ -206,6 +226,9 @@ function Row({
       ) : (
         <td ref={tdRef}>{value}</td>
       )}
+      <td>
+        <CopyButton getContent={getContent} />
+      </td>
     </tr>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 605860300..4ed9f8142 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -319,6 +319,19 @@ export const TooltipRight = styled(Tooltip)`
   }
 `;
 
+export const TooltipLeft = styled(Tooltip)`
+  ::before {
+    top: 0px;
+    right: 16px;
+    transform: rotate(90deg);
+  }
+  ::after {
+    top: -50%;
+    right: 28px;
+    margin-top: 6px;
+  }
+`;
+
 export const Overlay = styled.div`
   position: fixed;
   width: 100%;