From 16777ba20564d8b002e33a01afa3ea49ca715cce Mon Sep 17 00:00:00 2001
From: Sebastian
Date: Wed, 17 Aug 2022 16:12:21 -0300
Subject: some fixes
---
.../src/components/BankDetailsByPaytoType.tsx | 101 +++++++++++++--------
.../src/components/styled/index.tsx | 13 +++
.../taler-wallet-webextension/src/mui/Button.tsx | 3 +
.../src/popup/NoBalanceHelp.tsx | 15 ++-
packages/taler-wallet-webextension/src/stories.tsx | 9 +-
.../src/svg/download_24px.svg | 1 +
.../taler-wallet-webextension/src/svg/index.tsx | 21 +----
.../src/svg/upload_24px.svg | 1 +
.../src/wallet/DestinationSelection.stories.tsx | 7 ++
.../src/wallet/DestinationSelection.tsx | 83 ++++++++---------
.../src/wallet/History.tsx | 8 +-
.../src/wallet/QrReader.tsx | 1 +
.../src/wallet/ReserveCreated.stories.tsx | 13 +++
13 files changed, 158 insertions(+), 118 deletions(-)
create mode 100644 packages/taler-wallet-webextension/src/svg/download_24px.svg
create mode 100644 packages/taler-wallet-webextension/src/svg/upload_24px.svg
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.
- Reserve}
- value={subject}
- />
@@ -80,6 +75,13 @@ export function BankDetailsByPaytoType({
BTC
|
+
+
+ `${payto.targetPath} ${Amounts.stringifyValue(amount)} BTC`
+ }
+ />
+ |
{payto.segwitAddrs.map((addr, i) => (
@@ -87,6 +89,13 @@ export function BankDetailsByPaytoType({
BTC
|
+
+
+ `${addr} ${Amounts.stringifyValue(min)} BTC`
+ }
+ />
+ |
))}
@@ -120,6 +129,8 @@ export function BankDetailsByPaytoType({
) : payto.targetType === "iban" ? (
IBAN
} value={payto.iban} />
) : undefined;
+
+ const receiver = payto.params["receiver"] || undefined;
return (
{accountPart}
Exchange}
- value={exchangeBaseUrl}
- />
- Chosen amount}
+ name={Amount}
value={}
/>
+ {receiver ? (
+ Receiver name}
+ value={receiver}
+ />
+ ) : undefined}
);
}
+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 (
+
+
+
+ );
+ }
+ return (
+
+
+
+
+
+ );
+}
+
function Row({
name,
value,
@@ -159,38 +202,15 @@ function Row({
value: string | VNode;
literal?: boolean;
}): VNode {
- const [copied, setCopied] = useState(false);
const preRef = useRef(null);
const tdRef = useRef(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 (
-
- {!copied ? (
-
-
-
- ) : (
-
-
-
-
-
- )}
- |
{name}
|
@@ -206,6 +226,9 @@ function Row({
) : (
{value} |
)}
+
+
+ |
);
}
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%;
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx
index a7657ae29..2f12c1724 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.tsx
@@ -51,6 +51,7 @@ interface Props {
size?: "small" | "medium" | "large";
startIcon?: VNode | string;
variant?: "contained" | "outlined" | "text";
+ tooltip?: string;
color?: Colors;
onClick?: () => Promise;
}
@@ -213,6 +214,7 @@ export function Button({
startIcon: sip,
endIcon: eip,
fullWidth,
+ tooltip,
variant = "text",
size = "medium",
style: parentStyle,
@@ -305,6 +307,7 @@ export function Button({
? theme.palette.grey.A100
: theme.palette[color].dark,
}}
+ title={tooltip}
>
{startIcon}
{children}
diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
index 08479c73c..161296b97 100644
--- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
+++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
@@ -21,22 +21,21 @@ import { ButtonHandler } from "../mui/handlers.js";
import { Paper } from "../mui/Paper.js";
import { Typography } from "../mui/Typography.js";
+const margin = css`
+ margin: 1em;
+`;
+
export function NoBalanceHelp({
goToWalletManualWithdraw,
}: {
goToWalletManualWithdraw: ButtonHandler;
}): VNode {
return (
-
-
- Withdraw some funds into your wallet.
+
+