show refund info in purchase

notify refund pending with accept button on the purchase details
better payto box

2 files changed, 21 insertions, 10 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx
index 58165a349..06e2985cf 100644
--- a/packages/taler-wallet-webextension/src/components/Part.tsx
+++ b/packages/taler-wallet-webextension/src/components/Part.tsx
@@ -92,6 +92,7 @@ const CollasibleBox = styled.div`
   }
 `;
 import arrowDown from "../svg/chevron-down.svg";
+import { useTranslationContext } from "../context/translation.js";
 
 export function PartCollapsible({ text, title, big, showSign }: Props): VNode {
   const Text = big ? ExtraLargeText : LargeText;
@@ -137,27 +138,37 @@ interface PropsPayto {
 }
 export function PartPayto({ payto, kind, big }: PropsPayto): VNode {
   const Text = big ? ExtraLargeText : LargeText;
-  let text: string | undefined = undefined;
+  let text: VNode | undefined = undefined;
   let title = "";
+  const { i18n } = useTranslationContext();
   if (payto.isKnown) {
     if (payto.targetType === "x-taler-bank") {
-      text = payto.account;
-      title = "Bank account";
+      text = <Fragment>{payto.account}</Fragment>;
+      title = i18n.str`Bank account`;
     } else if (payto.targetType === "bitcoin") {
-      text = payto.targetPath;
-      title = "Bitcoin addr";
+      text =
+        payto.segwitAddrs && payto.segwitAddrs.length > 0 ? (
+          <ul>
+            <li>{payto.targetPath}</li>
+            <li>{payto.segwitAddrs[0]}</li>
+            <li>{payto.segwitAddrs[1]}</li>
+          </ul>
+        ) : (
+          <Fragment>{payto.targetPath}</Fragment>
+        );
+      title = i18n.str`Bitcoin address`;
     } else if (payto.targetType === "iban") {
-      text = payto.targetPath;
-      title = "IBAN";
+      text = <Fragment>{payto.targetPath}</Fragment>;
+      title = i18n.str`IBAN`;
     }
   }
   if (!text) {
-    text = stringifyPaytoUri(payto);
+    text = <Fragment>{stringifyPaytoUri(payto)}</Fragment>;
     title = "Payto URI";
   }
   return (
     <div style={{ margin: "1em" }}>
-      <SmallLightText style={{ margin: ".5em" }}>{title}</SmallLightText>
+      <SmallBoldText>{title}</SmallBoldText>
       <Text
         style={{
           color:
diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index 985ddf552..bfffa3267 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -207,7 +207,7 @@ function TransactionAmount(props: TransactionAmountProps): VNode {
     >
       <ExtraLargeText>
         {sign}
-        {Amounts.stringifyValue(props.amount)}
+        {Amounts.stringifyValue(props.amount, 2)}
       </ExtraLargeText>
       {props.pending && (
         <div>