1 files changed, 42 insertions, 1 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx
index d1683b20b..21c0f65dc 100644
--- a/packages/taler-wallet-webextension/src/components/Part.tsx
+++ b/packages/taler-wallet-webextension/src/components/Part.tsx
@@ -13,7 +13,8 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { h, VNode } from "preact";
+import { PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
+import { Fragment, h, VNode } from "preact";
 import { ExtraLargeText, LargeText, SmallLightText } from "./styled/index.js";
 
 export type Kind = "positive" | "negative" | "neutral";
@@ -39,3 +40,43 @@ export function Part({ text, title, kind, big }: Props): VNode {
     </div>
   );
 }
+
+interface PropsPayto {
+  payto: PaytoUri;
+  kind: Kind;
+  big?: boolean;
+}
+export function PartPayto({ payto, kind, big }: PropsPayto): VNode {
+  const Text = big ? ExtraLargeText : LargeText;
+  let text: string | undefined = undefined;
+  let title = "";
+  if (payto.isKnown) {
+    if (payto.targetType === "x-taler-bank") {
+      text = payto.account;
+      title = "Bank account";
+    } else if (payto.targetType === "bitcoin") {
+      text = payto.targetPath;
+      title = "Bitcoin addr";
+    } else if (payto.targetType === "iban") {
+      text = payto.targetPath;
+      title = "IBAN";
+    }
+  }
+  if (!text) {
+    text = stringifyPaytoUri(payto);
+    title = "Payto URI";
+  }
+  return (
+    <div style={{ margin: "1em" }}>
+      <SmallLightText style={{ margin: ".5em" }}>{title}</SmallLightText>
+      <Text
+        style={{
+          color:
+            kind == "positive" ? "green" : kind == "negative" ? "red" : "black",
+        }}
+      >
+        {text}
+      </Text>
+    </div>
+  );
+}