[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 02/02: destination ui
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 02/02: destination ui |
|
Date: |
Tue, 16 Aug 2022 02:19:05 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit cdc8e9afdfb93bd8a90d1e6cf0ea9aa20159e43a
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon Aug 15 21:18:39 2022 -0300
destination ui
---
.../src/NavigationBar.tsx | 12 +-
.../src/components/styled/index.tsx | 2 +
.../src/cta/Payment/index.ts | 4 +-
.../src/cta/Payment/views.tsx | 4 +-
.../src/cta/Withdraw/views.tsx | 1 -
.../src/hooks/useDiagnostics.ts | 2 -
.../src/mui/Button.stories.tsx | 4 +
.../src/mui/TextField.tsx | 4 +-
.../src/mui/input/InputBase.tsx | 38 +-
.../src/mui/input/InputFilled.tsx | 5 +-
.../taler-wallet-webextension/src/platform/dev.ts | 1 -
.../src/platform/firefox.ts | 1 -
.../src/popup/Application.tsx | 6 +-
.../src/popup/BalancePage.tsx | 2 +-
.../src/wallet/Application.tsx | 16 +-
.../src/wallet/DestinationSelection.stories.tsx | 4 +-
.../src/wallet/DestinationSelection.tsx | 393 ++++++++++++++++++++-
.../src/wallet/History.tsx | 2 +-
.../src/wallet/ManualWithdrawPage.tsx | 10 +-
19 files changed, 450 insertions(+), 61 deletions(-)
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx
b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index 10b90116..70fb7bdc 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -85,8 +85,8 @@ export const Pages = {
balanceHistory: pageDefinition<{ currency?: string }>(
"/balance/history/:currency?",
),
- balanceManualWithdraw: pageDefinition<{ currency?: string }>(
- "/balance/manual-withdraw/:currency?",
+ balanceManualWithdraw: pageDefinition<{ amount?: string }>(
+ "/balance/manual-withdraw/:amount?",
),
balanceDeposit: pageDefinition<{ currency: string }>(
"/balance/deposit/:currency",
@@ -94,12 +94,8 @@ export const Pages = {
balanceTransaction: pageDefinition<{ tid: string }>(
"/balance/transaction/:tid",
),
- sendCash: pageDefinition<{ currency?: string }>(
- "/destination/send/:currency?",
- ),
- receiveCash: pageDefinition<{ currency?: string }>(
- "/destination/get/:currency?",
- ),
+ sendCash: pageDefinition<{ amount?: string }>("/destination/send/:amount"),
+ receiveCash: pageDefinition<{ amount?: string
}>("/destination/get/:amount?"),
dev: "/dev",
backup: "/backup",
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 70f99674..60586030 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -842,10 +842,12 @@ interface SvgIconProps {
title: string;
color: string;
onClick?: any;
+ transform?: string;
}
export const SvgIcon = styled.div<SvgIconProps>`
& > svg {
fill: ${({ color }) => color};
+ transform: ${({ transform }) => (transform ? transform : "")};
}
width: 24px;
height: 24px;
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/index.ts
b/packages/taler-wallet-webextension/src/cta/Payment/index.ts
index 2eb41eb1..889e532c 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/index.ts
@@ -27,7 +27,7 @@ import { LoadingUriView, BaseView } from "./views.js";
export interface Props {
talerPayUri?: string;
- goToWalletManualWithdraw: (currency?: string) => Promise<void>;
+ goToWalletManualWithdraw: (amount?: string) => Promise<void>;
cancel: () => Promise<void>;
}
@@ -55,7 +55,7 @@ export namespace State {
amount: AmountJson;
uri: string;
error: undefined;
- goToWalletManualWithdraw: (currency?: string) => Promise<void>;
+ goToWalletManualWithdraw: (amount?: string) => Promise<void>;
cancel: () => Promise<void>;
}
export interface NoBalanceForCurrency extends BaseInfo {
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index bf5f4209..c4374590 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -393,7 +393,9 @@ function ButtonsSection({
<Button
variant="contained"
color="success"
- onClick={() => goToWalletManualWithdraw(state.amount.currency)}
+ onClick={() =>
+ goToWalletManualWithdraw(Amounts.stringify(state.amount))
+ }
>
<i18n.Translate>Get digital cash</i18n.Translate>
</Button>
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 380a5903..5949076e 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -129,7 +129,6 @@ export function SuccessView(state: State.Success): VNode {
title="Edit"
dangerouslySetInnerHTML={{ __html: editIcon }}
color="black"
- onClick={() => console.log("ok")}
/>
</div>
}
diff --git a/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
b/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
index 0538a55a..a61fe796 100644
--- a/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
@@ -34,11 +34,9 @@ export function useDiagnostics(): [WalletDiagnostics |
undefined, boolean] {
}, 1000);
const doFetch = async (): Promise<void> => {
const d = await wxApi.getDiagnostics();
- console.log("got diagnostics", d);
gotDiagnostics = true;
setDiagnostics(d);
};
- console.log("fetching diagnostics");
doFetch();
}, []);
return [diagnostics, timedOut];
diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
index f953b4a3..8f6b47af 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
@@ -33,6 +33,10 @@ export default {
const Stack = styled.div`
display: flex;
flex-direction: column;
+ & > button {
+ margin: 14px;
+ }
+ background-color: white;
`;
export const BasicExample = (): VNode => (
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx
b/packages/taler-wallet-webextension/src/mui/TextField.tsx
index 82fc155e..c59bb28b 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.tsx
+++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx
@@ -43,6 +43,9 @@ export interface Props {
placeholder?: string;
required?: boolean;
+ startAdornment?: VNode;
+ endAdornment?: VNode;
+
//FIXME: change to "grabFocus"
// focused?: boolean;
rows?: number;
@@ -75,7 +78,6 @@ export function TextField({
}: Props): VNode {
// htmlFor={id} id={inputLabelId}
const Input = select ? selectVariant[variant] : inputVariant[variant];
- // console.log("variant", Input);
return (
<FormControl {...props}>
{label && <InputLabel>{label}</InputLabel>}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
index fc16b7ce..fce82f9d 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -53,6 +53,8 @@ export function InputBaseRoot({
multiline,
focused,
fullWidth,
+ startAdornment,
+ endAdornment,
children,
}: any): VNode {
const fcs = useFormControl({});
@@ -61,6 +63,8 @@ export function InputBaseRoot({
data-disabled={disabled}
data-focused={focused}
data-multiline={multiline}
+ data-hasStart={!!startAdornment}
+ data-hasEnd={!!endAdornment}
data-error={error}
class={[
_class,
@@ -156,22 +160,28 @@ export function InputBaseComponent({
multiline,
type,
class: _class,
+ startAdornment,
+ endAdornment,
...props
}: any): VNode {
return (
- <input
- disabled={disabled}
- type={type}
- class={[
- componentStyle,
- _class,
- disabled && componentDisabledStyle,
- size === "small" && componentSmallStyle,
- // multiline && componentMultilineStyle,
- type === "search" && searchStyle,
- ].join(" ")}
- {...props}
- />
+ <Fragment>
+ {startAdornment}
+ <input
+ disabled={disabled}
+ type={type}
+ class={[
+ componentStyle,
+ _class,
+ disabled && componentDisabledStyle,
+ size === "small" && componentSmallStyle,
+ // multiline && componentMultilineStyle,
+ type === "search" && searchStyle,
+ ].join(" ")}
+ {...props}
+ />
+ {endAdornment}
+ </Fragment>
);
}
@@ -388,7 +398,6 @@ export function TextareaAutoSize({
getStyleValue(computedStyle, "border-bottom-width") +
getStyleValue(computedStyle, "border-top-width");
- // console.log(boxSizing, padding, border);
// The height of the inner content
const innerHeight = inputShallow.scrollHeight;
@@ -412,7 +421,6 @@ export function TextareaAutoSize({
outerHeight + (boxSizing === "border-box" ? padding + border : 0);
const overflow = Math.abs(outerHeight - innerHeight) <= 1;
- console.log("height", outerHeight, minRows, maxRows);
setState((prevState) => {
// Need a large enough difference to update the height.
// This prevents infinite rendering loop.
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
index 53c6da29..fa5144ca 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
@@ -27,7 +27,6 @@ export interface Props {
defaultValue?: string;
disabled?: boolean;
disableUnderline?: boolean;
- endAdornment?: VNode;
error?: boolean;
fullWidth?: boolean;
id?: string;
@@ -42,6 +41,7 @@ export interface Props {
required?: boolean;
rows?: number;
startAdornment?: VNode;
+ endAdornment?: VNode;
type?: string;
value?: string;
}
@@ -108,6 +108,9 @@ const filledRootStyle = css`
&[data-multiline] {
padding: 25px 12px 8px;
}
+ /* &[data-hasStart] {
+ padding-left: 25px;
+ } */
`;
const underlineStyle = css`
diff --git a/packages/taler-wallet-webextension/src/platform/dev.ts
b/packages/taler-wallet-webextension/src/platform/dev.ts
index 5074071e..fce5722c 100644
--- a/packages/taler-wallet-webextension/src/platform/dev.ts
+++ b/packages/taler-wallet-webextension/src/platform/dev.ts
@@ -40,7 +40,6 @@ const api: PlatformAPI = {
function waitAndNotify(): void {
total--;
if (total < 1) {
- console.log("done");
fn();
}
}
diff --git a/packages/taler-wallet-webextension/src/platform/firefox.ts
b/packages/taler-wallet-webextension/src/platform/firefox.ts
index 611cbf8d..a56e21f2 100644
--- a/packages/taler-wallet-webextension/src/platform/firefox.ts
+++ b/packages/taler-wallet-webextension/src/platform/firefox.ts
@@ -63,7 +63,6 @@ function notifyWhenAppIsReady(callback: () => void): void {
function redirectTabToWalletPage(tabId: number, page: string): void {
const url = chrome.runtime.getURL(`/static/wallet.html#${page}`);
- console.log("redirecting tabId: ", tabId, " to: ", url);
chrome.tabs.update(tabId, { url, loadReplace: true } as any);
}
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx
b/packages/taler-wallet-webextension/src/popup/Application.tsx
index be3c8a2f..9ad979c9 100644
--- a/packages/taler-wallet-webextension/src/popup/Application.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -75,7 +75,7 @@ export function Application(): VNode {
path={Pages.balance}
component={BalancePage}
goToWalletManualWithdraw={() =>
- redirectTo(Pages.balanceManualWithdraw({}))
+ redirectTo(Pages.receiveCash({}))
}
goToWalletDeposit={(currency: string) =>
redirectTo(Pages.balanceDeposit({ currency }))
@@ -133,6 +133,10 @@ export function Application(): VNode {
path={Pages.backupProviderAdd}
component={RedirectToWalletPage}
/>
+ <Route
+ path={Pages.receiveCash.pattern}
+ component={RedirectToWalletPage}
+ />
<Route path={Pages.qr} component={RedirectToWalletPage} />
<Route path={Pages.settings} component={RedirectToWalletPage}
/>
<Route
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index ee484afb..94d5d1e1 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -172,7 +172,7 @@ export function BalanceView(state: State.Balances): VNode {
variant="contained"
onClick={state.goToWalletManualWithdraw.onClick}
>
- <i18n.Translate>Get</i18n.Translate>
+ <i18n.Translate>Add</i18n.Translate>
</Button>
{currencyWithNonZeroAmount.length > 0 && (
<MultiActionButton
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx
b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index a1309464..6c08ecb7 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -57,6 +57,7 @@ import {
DestinationSelectionGetCash,
DestinationSelectionSendCash,
} from "./DestinationSelection.js";
+import { Amounts } from "@gnu-taler/taler-util";
export function Application(): VNode {
const [globalNotification, setGlobalNotification] = useState<
@@ -130,10 +131,14 @@ export function Application(): VNode {
path={Pages.balanceHistory.pattern}
component={HistoryPage}
goToWalletDeposit={(currency: string) =>
- redirectTo(Pages.sendCash({ currency }))
+ redirectTo(Pages.sendCash({ amount: `${currency}:0` }))
}
goToWalletManualWithdraw={(currency?: string) =>
- redirectTo(Pages.receiveCash({ currency }))
+ redirectTo(
+ Pages.receiveCash({
+ amount: !currency ? undefined : `${currency}:0`,
+ }),
+ )
}
/>
<Route
@@ -143,6 +148,9 @@ export function Application(): VNode {
<Route
path={Pages.receiveCash.pattern}
component={DestinationSelectionGetCash}
+ goToWalletManualWithdraw={(amount?: string) =>
+ redirectTo(Pages.balanceManualWithdraw({ amount }))
+ }
/>
<Route
path={Pages.balanceTransaction.pattern}
@@ -226,8 +234,8 @@ export function Application(): VNode {
<Route
path={Pages.ctaPay}
component={PaymentPage}
- goToWalletManualWithdraw={(currency?: string) =>
- redirectTo(Pages.balanceManualWithdraw({ currency }))
+ goToWalletManualWithdraw={(amount?: string) =>
+ redirectTo(Pages.balanceManualWithdraw({ amount }))
}
cancel={() => redirectTo(Pages.balance)}
/>
diff --git
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
index 876f683f..ec997dfb 100644
---
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
@@ -30,8 +30,8 @@ export default {
};
export const GetCash = createExample(DestinationSelectionGetCash, {
- currency: "usd",
+ amount: "usd:0",
});
export const SendCash = createExample(DestinationSelectionSendCash, {
- currency: "eur",
+ amount: "eur:1",
});
diff --git
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
index 187a2412..5f9c5065 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
@@ -14,17 +14,22 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
+import { Amounts } from "@gnu-taler/taler-util";
import { styled } from "@linaria/react";
import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import {
+ InputWithLabel,
+ LightText,
+ SvgIcon,
+} from "../components/styled/index.js";
+import { useTranslationContext } from "../context/translation.js";
+import { Button } from "../mui/Button.js";
+import { Grid } from "../mui/Grid.js";
import { Paper } from "../mui/Paper.js";
-
-const QrVideo = styled.video`
- width: 80%;
- margin-left: auto;
- margin-right: auto;
- padding: 8px;
- background-color: black;
-`;
+import { TextField } from "../mui/TextField.js";
+import arrowIcon from "../svg/chevron-down.svg";
+import bankIcon from "../svg/ri-bank-line.svg";
const Container = styled.div`
display: flex;
@@ -36,25 +41,379 @@ const Container = styled.div`
interface Props {
action: "send" | "get";
- currency?: string;
+ amount?: string;
+ goToWalletManualWithdraw: (amount: string) => void;
}
-export function DestinationSelectionGetCash({ currency }: Props): VNode {
+type Contact = {
+ icon: string;
+ name: string;
+ description: string;
+};
+
+const ContactTable = styled.table`
+ width: 100%;
+ & > tr > td {
+ padding: 8px;
+ & > div:not([data-disabled]):hover {
+ background-color: lightblue;
+ }
+ color: black;
+ div[data-disabled] > * {
+ color: gray;
+ }
+ }
+
+ & > tr:nth-child(2n) {
+ background: #ebebeb;
+ }
+`;
+
+const MediaExample = styled.div`
+ text-size-adjust: 100%;
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ text-transform: none;
+ text-align: left;
+ box-sizing: border-box;
+ align-items: center;
+ display: flex;
+ padding: 8px 8px;
+
+ &[data-disabled]:hover {
+ cursor: inherit;
+ }
+ cursor: pointer;
+`;
+
+const MediaLeft = styled.div`
+ text-size-adjust: 100%;
+
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ text-transform: none;
+ text-align: left;
+ box-sizing: border-box;
+ padding-right: 8px;
+ display: block;
+`;
+
+const MediaBody = styled.div`
+ text-size-adjust: 100%;
+
+ font-family: inherit;
+ text-transform: none;
+ text-align: left;
+ box-sizing: border-box;
+ flex: 1 1;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.42857;
+`;
+const MediaRight = styled.div`
+ text-size-adjust: 100%;
+
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ text-transform: none;
+ text-align: left;
+ box-sizing: border-box;
+ padding-left: 8px;
+`;
+
+const CircleDiv = styled.div`
+ box-sizing: border-box;
+ align-items: center;
+ background-position: 50%;
+ background-repeat: no-repeat;
+ background-size: cover;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ overflow: hidden;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition: background-color 0.15s ease, border-color 0.15s ease,
+ color 0.15s ease;
+ font-size: 16px;
+ background-color: #86a7bd1a;
+ height: 40px;
+ line-height: 40px;
+ width: 40px;
+ border: none;
+`;
+
+function RowExample({
+ info,
+ disabled,
+}: {
+ info: Contact;
+ disabled?: boolean;
+}): VNode {
+ return (
+ <MediaExample data-disabled={disabled}>
+ <MediaLeft>
+ <CircleDiv>
+ <SvgIcon
+ title={info.name}
+ dangerouslySetInnerHTML={{ __html: info.icon }}
+ color="currentColor"
+ />
+ </CircleDiv>
+ </MediaLeft>
+ <MediaBody>
+ <span>{info.name}</span>
+ <LightText>{info.description}</LightText>
+ </MediaBody>
+ <MediaRight>
+ <SvgIcon
+ title="Select this contact"
+ dangerouslySetInnerHTML={{ __html: arrowIcon }}
+ color="currentColor"
+ transform="rotate(-90deg)"
+ />
+ </MediaRight>
+ </MediaExample>
+ );
+}
+
+export function DestinationSelectionGetCash({
+ amount: initialAmount,
+ goToWalletManualWithdraw,
+}: Props): VNode {
+ const parsedInitialAmount = !initialAmount
+ ? undefined
+ : Amounts.parse(initialAmount);
+ const parsedInitialAmountValue = !parsedInitialAmount
+ ? ""
+ : Amounts.stringifyValue(parsedInitialAmount);
+ const currency = parsedInitialAmount?.currency;
+
+ const [amount, setAmount] = useState(parsedInitialAmountValue);
+ const { i18n } = useTranslationContext();
+ const previous1: Contact[] = [];
+ const previous2: Contact[] = [
+ {
+ name: "International Bank",
+ icon: bankIcon,
+ description: "account ending with 3454",
+ },
+ {
+ name: "Max",
+ icon: bankIcon,
+ description: "account ending with 3454",
+ },
+ {
+ name: "Alex",
+ icon: bankIcon,
+ description: "account ending with 3454",
+ },
+ ];
+
+ if (!currency) {
+ return <div>currency not provided</div>;
+ }
+ const currencyAndAmount = `${currency}:${amount}`;
+ const parsedAmount = Amounts.parse(currencyAndAmount);
+ // const dirty = parsedInitialAmountValue !== amount;
+ const invalid = !parsedAmount || Amounts.isZero(parsedAmount);
return (
<Container>
- <p>Request {currency} from:</p>
- <Paper style={{ padding: 8 }}>Bank account</Paper>
- <Paper style={{ padding: 8 }}>Another person</Paper>
+ <h1>
+ <i18n.Translate>Specify the amount and the origin</i18n.Translate>
+ </h1>
+ <TextField
+ label="Amount"
+ type="number"
+ variant="filled"
+ error={invalid}
+ required
+ startAdornment={
+ <div style={{ padding: "25px 12px 8px 12px" }}>{currency}</div>
+ }
+ value={amount}
+ onChange={(e) => {
+ setAmount(e);
+ }}
+ />
+
+ <Grid container spacing={1} columns={1}>
+ {previous2.length > 0 ? (
+ <Fragment>
+ <p>Previous origins:</p>
+ <Grid item xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <ContactTable>
+ {previous2.map((info, i) => (
+ <tr key={i}>
+ <td>
+ <RowExample info={info} disabled={invalid} />
+ </td>
+ </tr>
+ ))}
+ </ContactTable>
+ </Paper>
+ </Grid>
+ </Fragment>
+ ) : undefined}
+ <Grid item>
+ <p>Create new origin for the money</p>
+ </Grid>
+ <Grid item container columns={3} spacing={1}>
+ <Grid item xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <p>From my bank account</p>
+ <Button
+ disabled={invalid}
+ onClick={async () =>
+ goToWalletManualWithdraw(currencyAndAmount)
+ }
+ >
+ Withdraw
+ </Button>
+ </Paper>
+ </Grid>
+ <Grid item xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <p>From someone else</p>
+ <Button disabled>Request</Button>
+ </Paper>
+ </Grid>
+ <Grid item xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <p>From a business or charity</p>
+ <Button disabled>Invoice</Button>
+ </Paper>
+ </Grid>
+ </Grid>
+ <Grid item columns={1} spacing={1} xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <p>From a exchange reserve or purse</p>
+ <Button disabled>Create</Button>
+ </Paper>
+ </Grid>
+ </Grid>
</Container>
);
}
-export function DestinationSelectionSendCash({ currency }: Props): VNode {
+export function DestinationSelectionSendCash({
+ amount: initialAmount,
+}: Props): VNode {
+ const parsedInitialAmount = !initialAmount
+ ? undefined
+ : Amounts.parse(initialAmount);
+ const parsedInitialAmountValue = !parsedInitialAmount
+ ? ""
+ : Amounts.stringifyValue(parsedInitialAmount);
+ const currency = parsedInitialAmount?.currency;
+
+ const [amount, setAmount] = useState(parsedInitialAmountValue);
+ const { i18n } = useTranslationContext();
+ const previous1: Contact[] = [];
+ const previous2: Contact[] = [
+ {
+ name: "International Bank",
+ icon: bankIcon,
+ description: "account ending with 3454",
+ },
+ {
+ name: "Max",
+ icon: bankIcon,
+ description: "account ending with 3454",
+ },
+ {
+ name: "Alex",
+ icon: bankIcon,
+ description: "account ending with 3454",
+ },
+ ];
+
+ if (!currency) {
+ return <div>currency not provided</div>;
+ }
+ const currencyAndAmount = `${currency}:${amount}`;
+ const parsedAmount = Amounts.parse(currencyAndAmount);
+ const invalid = !parsedAmount || Amounts.isZero(parsedAmount);
return (
<Container>
- <p>Sending {currency} to:</p>
- <Paper style={{ padding: 8 }}>Bank account</Paper>
- <Paper style={{ padding: 8 }}>Another person</Paper>
+ <h1>
+ <i18n.Translate>Specify the amount and the destination</i18n.Translate>
+ </h1>
+
+ <TextField
+ label="Amount"
+ type="number"
+ variant="filled"
+ required
+ error={invalid}
+ startAdornment={
+ <div style={{ padding: "25px 12px 8px 12px" }}>{currency}</div>
+ }
+ value={amount}
+ onChange={(e) => {
+ setAmount(e);
+ }}
+ />
+
+ <Grid container spacing={1} columns={1}>
+ {previous2.length > 0 ? (
+ <Fragment>
+ <p>Previous destinations:</p>
+ <Grid item xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <ContactTable>
+ {previous2.map((info, i) => (
+ <tr key={i}>
+ <td>
+ <RowExample info={info} disabled={invalid} />
+ </td>
+ </tr>
+ ))}
+ </ContactTable>
+ </Paper>
+ </Grid>
+ </Fragment>
+ ) : undefined}
+ <Grid item>
+ <p>Create a destination for the money</p>
+ </Grid>
+ <Grid item container columns={3} spacing={1}>
+ <Grid item xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <p>To my bank account</p>
+ <Button disabled={invalid}>Deposit</Button>
+ </Paper>
+ </Grid>
+ <Grid item xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <p>To someone else</p>
+ <Button disabled>Send</Button>
+ </Paper>
+ </Grid>
+ <Grid item xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <p>To a business or charity</p>
+ <Button disabled>Pay</Button>
+ </Paper>
+ </Grid>
+ </Grid>
+ <Grid item columns={1} spacing={1} xs={1}>
+ <Paper style={{ padding: 8 }}>
+ <p>To an exchange reserve or purse</p>
+ <Button disabled>Create</Button>
+ </Paper>
+ </Grid>
+ </Grid>
</Container>
);
}
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx
b/packages/taler-wallet-webextension/src/wallet/History.tsx
index f331cc45..f02e4339 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -210,7 +210,7 @@ export function HistoryView({
// style={{ marginLeft: 0, marginTop: 8 }}
onClick={() => goToWalletManualWithdraw(selectedCurrency)}
>
- <i18n.Translate>Get</i18n.Translate>
+ <i18n.Translate>Add</i18n.Translate>
</Button>
{currencyAmount && Amounts.isNonZero(currencyAmount) && (
<Button
diff --git
a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index a45daa6b..a292914f 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -33,11 +33,11 @@ import { CreateManualWithdraw } from
"./CreateManualWithdraw.js";
import { ReserveCreated } from "./ReserveCreated.js";
interface Props {
- currency?: string;
+ amount?: string;
onCancel: () => Promise<void>;
}
-export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
+export function ManualWithdrawPage({ amount, onCancel }: Props): VNode {
const [success, setSuccess] = useState<
| {
response: AcceptManualWithdrawalResult;
@@ -117,12 +117,18 @@ export function ManualWithdrawPage({ currency, onCancel
}: Props): VNode {
{} as Record<string, string>,
);
+ const parsedAmount = !amount ? undefined : Amounts.parse(amount);
+ const currency = parsedAmount?.currency;
+ const amountValue = !parsedAmount
+ ? undefined
+ : Amounts.stringifyValue(parsedAmount);
return (
<CreateManualWithdraw
error={error}
exchangeUrlWithCurrency={exchangeList}
onCreate={doCreate}
initialCurrency={currency}
+ initialAmount={amountValue}
/>
);
}
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.