diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
5 files changed, 146 insertions, 40 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Amount.tsx b/packages/taler-wallet-webextension/src/components/Amount.tsx index c41f7faf6..b415a30cd 100644 --- a/packages/taler-wallet-webextension/src/components/Amount.tsx +++ b/packages/taler-wallet-webextension/src/components/Amount.tsx @@ -6,7 +6,7 @@ export function Amount({ value }: { value: AmountJson | AmountString }): VNode { const amount = Amounts.stringifyValue(aj, 2); return ( <Fragment> - {amount} {aj.currency} + {amount} {aj.currency} </Fragment> ); } diff --git a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx index e67fb6b4d..a2c91f4a1 100644 --- a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx +++ b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx @@ -44,7 +44,7 @@ export function BalanceTable({ width: "100%", }} > - {Amounts.stringifyValue(av)} + {Amounts.stringifyValue(av, 2)} </td> </tr> ); diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index 185021bc0..3a2a12c72 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -46,43 +46,47 @@ export function BankDetailsByPaytoType({ if (payto.isKnown && payto.targetType === "bitcoin") { const min = segwitMinAmount(amount.currency); return ( - <section style={{ textAlign: "left" }}> + <section + style={{ + textAlign: "left", + border: "solid 1px black", + padding: 8, + borderRadius: 4, + }} + > + <p style={{ marginTop: 0 }}>Bitcoin transfer details</p> <p> <i18n.Translate> - Bitcoin exchange need a transaction with 3 output, one output is the + The exchange need a transaction with 3 output, one output is the exchange account and the other two are segwit fake address for - metadata with an minimum amount. Reserve pub : {subject} + metadata with an minimum amount. </i18n.Translate> </p> + <Row + literal + name={<i18n.Translate>Reserve</i18n.Translate>} + value={subject} + /> + <p> <i18n.Translate> In bitcoincore wallet use 'Add Recipient' button to add two additional recipient and copy addresses and amounts </i18n.Translate> - <ul> - <li> - {payto.targetPath} {Amounts.stringifyValue(amount)} BTC - </li> - {payto.segwitAddrs.map((addr, i) => ( - <li key={i}> - {addr} {Amounts.stringifyValue(min)} BTC - </li> - ))} - </ul> - <i18n.Translate> - In Electrum wallet paste the following three lines in 'Pay - to' field : - </i18n.Translate> - <ul> - <li> - {payto.targetPath},{Amounts.stringifyValue(amount)} - </li> - {payto.segwitAddrs.map((addr, i) => ( - <li key={i}> - {addr} {Amounts.stringifyValue(min)} BTC - </li> - ))} - </ul> + </p> + <table> + <tr> + <td>{payto.targetPath}</td> + <td>{Amounts.stringifyValue(amount)} BTC</td> + </tr> + {payto.segwitAddrs.map((addr, i) => ( + <tr key={i}> + <td>{addr}</td> + <td>{Amounts.stringifyValue(min)} BTC</td> + </tr> + ))} + </table> + <p> <i18n.Translate> Make sure the amount show{" "} {Amounts.stringifyValue(Amounts.sum([amount, min, min]).amount)}{" "} @@ -93,7 +97,7 @@ export function BankDetailsByPaytoType({ ); } - const firstPart = !payto.isKnown ? ( + const accountPart = !payto.isKnown ? ( <Row name={<i18n.Translate>Account</i18n.Translate>} value={payto.targetPath} @@ -113,10 +117,17 @@ export function BankDetailsByPaytoType({ <Row name={<i18n.Translate>IBAN</i18n.Translate>} value={payto.iban} /> ) : undefined; return ( - <div style={{ textAlign: "left" }}> - <p>Bank transfer details</p> + <div + style={{ + textAlign: "left", + border: "solid 1px black", + padding: 8, + borderRadius: 4, + }} + > + <p style={{ marginTop: 0 }}>Bank transfer details</p> <table> - {firstPart} + {accountPart} <Row name={<i18n.Translate>Exchange</i18n.Translate>} value={exchangeBaseUrl} @@ -176,7 +187,7 @@ function Row({ </TooltipRight> )} </td> - <td> + <td style={{ paddingRight: 8 }}> <b>{name}</b> </td> {literal ? ( diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx index 21c0f65dc..58165a349 100644 --- a/packages/taler-wallet-webextension/src/components/Part.tsx +++ b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -14,33 +14,122 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ import { PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; -import { ExtraLargeText, LargeText, SmallLightText } from "./styled/index.js"; +import { useState } from "preact/hooks"; +import { + ExtraLargeText, + LargeText, + SmallBoldText, + SmallLightText, +} from "./styled/index.js"; export type Kind = "positive" | "negative" | "neutral"; interface Props { - title: VNode; + title: VNode | string; text: VNode | string; - kind: Kind; + kind?: Kind; big?: boolean; + showSign?: boolean; } -export function Part({ text, title, kind, big }: Props): VNode { +export function Part({ + text, + title, + kind = "neutral", + big, + showSign, +}: Props): VNode { const Text = big ? ExtraLargeText : LargeText; return ( <div style={{ margin: "1em" }}> - <SmallLightText style={{ margin: ".5em" }}>{title}</SmallLightText> + <SmallBoldText style={{ marginBottom: "1em" }}>{title}</SmallBoldText> <Text style={{ color: kind == "positive" ? "green" : kind == "negative" ? "red" : "black", + fontWeight: "lighten", }} > + {!showSign || kind === "neutral" + ? undefined + : kind === "positive" + ? "+" + : "-"} {text} </Text> </div> ); } +const CollasibleBox = styled.div` + border: 1px solid black; + border-radius: 0.25em; + display: flex; + vertical-align: middle; + justify-content: space-between; + flex-direction: column; + /* margin: 0.5em; */ + padding: 0.5em; + /* margin: 1em; */ + /* width: 100%; */ + /* color: #721c24; */ + /* background: #f8d7da; */ + + & > div { + display: flex; + justify-content: space-between; + div { + margin-top: auto; + margin-bottom: auto; + } + & > button { + align-self: center; + font-size: 100%; + padding: 0; + height: 28px; + width: 28px; + } + } +`; +import arrowDown from "../svg/chevron-down.svg"; + +export function PartCollapsible({ text, title, big, showSign }: Props): VNode { + const Text = big ? ExtraLargeText : LargeText; + const [collapsed, setCollapsed] = useState(true); + + return ( + <CollasibleBox> + <div> + <SmallBoldText>{title}</SmallBoldText> + <button + onClick={() => { + setCollapsed((v) => !v); + }} + > + <div + style={{ + transform: !collapsed ? "scaleY(-1)" : undefined, + height: 24, + }} + dangerouslySetInnerHTML={{ __html: arrowDown }} + /> + </button> + </div> + {/* <SmallBoldText + style={{ + paddingBottom: "1em", + paddingTop: "1em", + paddingLeft: "1em", + border: "black solid 1px", + }} + > + + </SmallBoldText> */} + {!collapsed && <div style={{ display: "block" }}>{text}</div>} + </CollasibleBox> + ); +} + interface PropsPayto { payto: PaytoUri; kind: Kind; diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 7517a1388..a531a15dc 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -87,7 +87,7 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` justify-content: space-between; align-items: center; & > * { - width: 500px; + width: 600px; } & > section { padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; @@ -660,6 +660,12 @@ export const WarningText = styled.div` export const SmallText = styled.div` font-size: small; `; + +export const SmallBoldText = styled.div` + font-size: small; + font-weight: bold; +`; + export const LargeText = styled.div` font-size: large; `; |