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 (limited to 'packages/taler-wallet-webextension') 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. + + - - - - -

From a business or charity

+

From another wallet

 - - -

From a exchange reserve or purse

- - - ); @@ -441,7 +442,7 @@ export function DestinationSelectionSendCash({ {previous2.length > 0 ? ( -

Previous destinations:

+

Use previous destinations:

@@ -458,9 +459,9 @@ export function DestinationSelectionSendCash({ ) : undefined} -

Create a destination for the money

+

Or specify a new destination for the money

 - +

To my bank account

@@ -469,22 +470,10 @@ export function DestinationSelectionSendCash({ -

To someone else

+

To another wallet

 - - -

To a business or charity

- - - - - - -

To an exchange reserve or purse

- - diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index f02e43391..e885a216d 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -96,6 +96,8 @@ const term = 1000 * 60 * 60 * 24; function normalizeToDay(x: number): number { return Math.round(x / term) * term; } +import DownloadIcon from "../svg/download_24px.svg"; +import UploadIcon from "../svg/upload_24px.svg"; export function HistoryView({ defaultCurrency, @@ -206,17 +208,19 @@ export function HistoryView({
{currencyAmount && Amounts.isNonZero(currencyAmount) && (