summaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/components
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-01-10 16:04:53 -0300
committerSebastian <sebasjm@gmail.com>2022-01-10 16:07:27 -0300
commitfb22009ec4799a624f00c228fbd7435b44c1cbac (patch)
treeb1f8427e845bb3687b8a64deb3545eff2290ec67 /packages/taler-wallet-webextension/src/components
parent83b9d32b7812e63640a60b5b42a27c96d8053bce (diff)
downloadwallet-core-fb22009ec4799a624f00c228fbd7435b44c1cbac.tar.gz
wallet-core-fb22009ec4799a624f00c228fbd7435b44c1cbac.tar.bz2
wallet-core-fb22009ec4799a624f00c228fbd7435b44c1cbac.zip
deposit design from belen, feature missing: kyc
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r--packages/taler-wallet-webextension/src/components/BalanceTable.tsx28
-rw-r--r--packages/taler-wallet-webextension/src/components/Loading.tsx20
-rw-r--r--packages/taler-wallet-webextension/src/components/MultiActionButton.tsx95
-rw-r--r--packages/taler-wallet-webextension/src/components/styled/index.tsx64
4 files changed, 169 insertions, 38 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
index 05a7d28dd..c69625cd2 100644
--- a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
+++ b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
@@ -14,31 +14,28 @@
TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-import { amountFractionalBase, Amounts, Balance } from "@gnu-taler/taler-util";
+import { Amounts, amountToPretty, Balance } from "@gnu-taler/taler-util";
import { h, VNode } from "preact";
-import {
- ButtonPrimary,
- TableWithRoundRows as TableWithRoundedRows,
-} from "./styled";
+import { TableWithRoundRows as TableWithRoundedRows } from "./styled";
export function BalanceTable({
balances,
- goToWalletDeposit,
+ goToWalletHistory,
}: {
balances: Balance[];
- goToWalletDeposit: (currency: string) => void;
+ goToWalletHistory: (currency: string) => void;
}): VNode {
- const currencyFormatter = new Intl.NumberFormat("en-US");
return (
<TableWithRoundedRows>
{balances.map((entry, idx) => {
const av = Amounts.parseOrThrow(entry.available);
- const v = currencyFormatter.format(
- av.value + av.fraction / amountFractionalBase,
- );
return (
- <tr key={idx}>
+ <tr
+ key={idx}
+ onClick={() => goToWalletHistory(av.currency)}
+ style={{ cursor: "pointer" }}
+ >
<td>{av.currency}</td>
<td
style={{
@@ -47,12 +44,7 @@ export function BalanceTable({
width: "100%",
}}
>
- {v}
- </td>
- <td>
- <ButtonPrimary onClick={() => goToWalletDeposit(av.currency)}>
- Deposit
- </ButtonPrimary>
+ {Amounts.stringifyValue(av)}
</td>
</tr>
);
diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx
new file mode 100644
index 000000000..34edac551
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/Loading.tsx
@@ -0,0 +1,20 @@
+/*
+ This file is part of TALER
+ (C) 2016 GNUnet e.V.
+
+ TALER is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+import { h, VNode } from "preact";
+
+export function Loading(): VNode {
+ return <div>Loading...</div>;
+}
diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
new file mode 100644
index 000000000..70d53640d
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
@@ -0,0 +1,95 @@
+import { h, VNode } from "preact";
+import arrowDown from "../../static/img/chevron-down.svg";
+import { ButtonBoxPrimary, ButtonPrimary, ParagraphClickable } from "./styled";
+import { useState } from "preact/hooks";
+
+export interface Props {
+ label: (s: string) => string;
+ actions: string[];
+ onClick: (s: string) => void;
+}
+
+/**
+ * functionality: it will receive a list of actions, take the first actions as
+ * the first chosen action
+ * the user may change the chosen action
+ * when the user click the button it will call onClick with the chosen action
+ * as argument
+ *
+ * visually: it is a primary button with a select handler on the right
+ *
+ * @returns
+ */
+export function MultiActionButton({
+ label,
+ actions,
+ onClick: doClick,
+}: Props): VNode {
+ const defaultAction = actions.length > 0 ? actions[0] : "";
+
+ const [opened, setOpened] = useState(false);
+ const [selected, setSelected] = useState<string>(defaultAction);
+
+ const canChange = actions.length > 1;
+ const options = canChange ? actions.filter((a) => a !== selected) : [];
+ function select(m: string): void {
+ setSelected(m);
+ setOpened(false);
+ }
+
+ if (!canChange) {
+ return (
+ <ButtonPrimary onClick={() => doClick(selected)}>
+ {label(selected)}
+ </ButtonPrimary>
+ );
+ }
+
+ return (
+ <div style={{ position: "relative", display: "inline-block" }}>
+ {opened && (
+ <div
+ style={{
+ position: "absolute",
+ bottom: 32 + 5,
+ right: 0,
+ marginLeft: 8,
+ marginRight: 8,
+ borderRadius: 5,
+ border: "1px solid blue",
+ background: "white",
+ boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)",
+ zIndex: 1,
+ }}
+ >
+ {options.map((m) => (
+ <ParagraphClickable key={m} onClick={() => select(m)}>
+ {label(m)}
+ </ParagraphClickable>
+ ))}
+ </div>
+ )}
+ <ButtonPrimary
+ onClick={() => doClick(selected)}
+ style={{
+ borderTopRightRadius: 0,
+ borderBottomRightRadius: 0,
+ marginRight: 0,
+ }}
+ >
+ {label(selected)}
+ </ButtonPrimary>
+
+ <ButtonBoxPrimary
+ onClick={() => setOpened((s) => !s)}
+ style={{
+ marginLeft: 0,
+ borderTopLeftRadius: 0,
+ borderBottomLeftRadius: 0,
+ }}
+ >
+ <img style={{ height: 14 }} src={arrowDown} />
+ </ButtonBoxPrimary>
+ </div>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 216a1fabc..2d16b496c 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -43,7 +43,7 @@ export const WalletAction = styled.div`
}
section {
margin-bottom: 2em;
- & button {
+ button {
margin-right: 8px;
margin-left: 8px;
}
@@ -92,6 +92,10 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
border-bottom: 1px solid black;
border-top: 1px solid black;
}
+ button {
+ margin-right: 8px;
+ margin-left: 8px;
+ }
}
& > header {
@@ -123,7 +127,7 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
justify-content: space-between;
display: flex;
background-color: #f7f7f7;
- & button {
+ button {
margin-right: 8px;
margin-left: 8px;
}
@@ -136,9 +140,9 @@ export const Middle = styled.div`
height: 100%;
`;
-export const PopupBox = styled.div<{ noPadding?: boolean }>`
+export const PopupBox = styled.div<{ noPadding?: boolean; devMode: boolean }>`
height: 290px;
- width: 400px;
+ width: ${({ devMode }) => (!devMode ? "400px" : "500px")};
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -156,6 +160,10 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
border-bottom: 1px solid black;
border-top: 1px solid black;
}
+ button {
+ margin-right: 8px;
+ margin-left: 8px;
+ }
}
& > section[data-expanded] {
@@ -196,7 +204,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
flex-direction: row;
justify-content: space-between;
display: flex;
- & button {
+ button {
margin-right: 8px;
margin-left: 8px;
}
@@ -363,11 +371,11 @@ export const CenteredDialog = styled.div`
export const Button = styled.button<{ upperCased?: boolean }>`
display: inline-block;
- zoom: 1;
+ /* zoom: 1; */
line-height: normal;
white-space: nowrap;
- vertical-align: middle;
- text-align: center;
+ vertical-align: middle; //check this
+ /* text-align: center; */
cursor: pointer;
user-select: none;
box-sizing: border-box;
@@ -379,7 +387,7 @@ export const Button = styled.button<{ upperCased?: boolean }>`
/* color: #444; rgba not supported (IE 8) */
color: rgba(0, 0, 0, 0.8); /* rgba supported */
border: 1px solid #999; /*IE 6/7/8*/
- border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
+ /* border: none rgba(0, 0, 0, 0); IE9 + everything else */
background-color: "#e6e6e6";
text-decoration: none;
border-radius: 2px;
@@ -401,11 +409,11 @@ export const Button = styled.button<{ upperCased?: boolean }>`
}
:hover {
- filter: alpha(opacity=90);
+ filter: alpha(opacity=80);
background-image: linear-gradient(
transparent,
- rgba(0, 0, 0, 0.05) 40%,
- rgba(0, 0, 0, 0.1)
+ rgba(0, 0, 0, 0.1) 40%,
+ rgba(0, 0, 0, 0.2)
);
}
`;
@@ -415,7 +423,7 @@ export const Link = styled.a<{ upperCased?: boolean }>`
zoom: 1;
line-height: normal;
white-space: nowrap;
- vertical-align: middle;
+ /* vertical-align: middle; */
text-align: center;
cursor: pointer;
user-select: none;
@@ -463,8 +471,8 @@ export const FontIcon = styled.div`
/* vertical-align: text-top; */
`;
export const ButtonBox = styled(Button)`
- padding: 0.5em;
- font-size: x-small;
+ padding: 8px;
+ /* font-size: small; */
& > ${FontIcon} {
width: 1em;
@@ -472,12 +480,13 @@ export const ButtonBox = styled(Button)`
display: inline;
line-height: 0px;
}
- background-color: transparent;
+ background-color: #f7f7f7;
border: 1px solid;
border-radius: 4px;
border-color: black;
color: black;
+ /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
/* -webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px; */
`;
@@ -499,6 +508,7 @@ export const LinkPrimary = styled(Link)`
export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>`
font-size: ${({ small }) => (small ? "small" : "inherit")};
background-color: rgb(66, 184, 221);
+ border-color: rgb(66, 184, 221);
`;
export const ButtonBoxPrimary = styled(ButtonBox)`
color: rgb(66, 184, 221);
@@ -714,6 +724,7 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>`
border-top-right-radius: 0.25em;
border-color: ${({ invalid }) => (!invalid ? "lightgray" : "red")};
}
+ margin-bottom: 16px;
`;
export const ErrorText = styled.div`
@@ -772,13 +783,13 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>`
display: flex;
& > div {
- width: 400px;
+ width: ${({ devMode }) => (!devMode ? "400px" : "500px")};
}
& > div > a {
color: #f8faf7;
display: inline-block;
- width: calc(400px / ${({ devMode }) => (!devMode ? 4 : 5)});
+ width: 100px;
text-align: center;
text-decoration: none;
vertical-align: middle;
@@ -804,10 +815,9 @@ export const NiceSelect = styled.div`
box-shadow: none;
background-image: ${image};
- background-position: right 0.5rem center;
+ background-position: right 8px center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
- padding-right: 2.5rem;
background-color: white;
@@ -967,3 +977,17 @@ export const StyledCheckboxLabel = styled.div`
box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
}
`;
+
+export const ParagraphClickable = styled.p`
+ cursor: pointer;
+ margin: 0px;
+ padding: 8px 16px;
+ :hover {
+ filter: alpha(opacity=80);
+ background-image: linear-gradient(
+ transparent,
+ rgba(0, 0, 0, 0.1) 40%,
+ rgba(0, 0, 0, 0.2)
+ );
+ }
+`;