[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated (9bb9d149 -> cdc8e9af)
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated (9bb9d149 -> cdc8e9af) |
|
Date: |
Tue, 16 Aug 2022 02:19:03 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a change to branch master
in repository wallet-core.
from 9bb9d149 qr reader
new 004b1544 get send money skeleton
new cdc8e9af destination ui
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../src/NavigationBar.tsx | 6 +-
.../src/components/styled/index.tsx | 2 +
.../src/cta/Payment/index.ts | 4 +-
.../src/cta/Payment/views.tsx | 8 +-
.../src/cta/Refund/views.tsx | 2 +-
.../src/cta/Withdraw/views.tsx | 3 +-
.../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 | 10 +-
.../src/popup/NoBalanceHelp.tsx | 2 +-
.../src/wallet/Application.tsx | 28 +-
...tories.tsx => DestinationSelection.stories.tsx} | 18 +-
.../src/wallet/DestinationSelection.tsx | 419 +++++++++++++++++++++
.../src/wallet/History.tsx | 4 +-
.../src/wallet/ManualWithdrawPage.tsx | 10 +-
.../src/wallet/index.stories.tsx | 2 +
22 files changed, 523 insertions(+), 56 deletions(-)
copy
packages/taler-wallet-webextension/src/wallet/{AddNewActionView.stories.tsx =>
DestinationSelection.stories.tsx} (71%)
create mode 100644
packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx
b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index edcf44d3..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,6 +94,8 @@ export const Pages = {
balanceTransaction: pageDefinition<{ tid: string }>(
"/balance/transaction/:tid",
),
+ 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 d18dc706..c4374590 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -358,7 +358,7 @@ function ButtonsSection({
onClick={state.payHandler.onClick}
>
<i18n.Translate>
- Send
+ Pay
{<Amount value={state.payStatus.amountEffective} />}
</i18n.Translate>
</Button>
@@ -393,9 +393,11 @@ function ButtonsSection({
<Button
variant="contained"
color="success"
- onClick={() => goToWalletManualWithdraw(state.amount.currency)}
+ onClick={() =>
+ goToWalletManualWithdraw(Amounts.stringify(state.amount))
+ }
>
- <i18n.Translate>Withdraw digital cash</i18n.Translate>
+ <i18n.Translate>Get digital cash</i18n.Translate>
</Button>
</section>
<PayWithMobile state={state} />
diff --git a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
index 3a8148e9..d8c67334 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
@@ -169,7 +169,7 @@ export function ReadyView(state: State.Ready): VNode {
onClick={state.accept.onClick}
>
<i18n.Translate>
- Receive <Amount value={state.amount} />
+ Accept <Amount value={state.amount} />
</i18n.Translate>
</Button>
</section>
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 6ca8f888..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>
}
@@ -172,7 +171,7 @@ export function SuccessView(state: State.Success): VNode {
onClick={state.doWithdrawal.onClick}
>
<i18n.Translate>
- Receive <Amount value={state.toBeReceived} />
+ Withdraw <Amount value={state.toBeReceived} />
</i18n.Translate>
</Button>
)}
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 3275a0a0..94d5d1e1 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -18,7 +18,6 @@ import { Amounts, Balance, NotificationType } from
"@gnu-taler/taler-util";
import { Fragment, h, VNode } from "preact";
import { useEffect, useState } from "preact/hooks";
import { BalanceTable } from "../components/BalanceTable.js";
-import { JustInDevMode } from "../components/JustInDevMode.js";
import { Loading } from "../components/Loading.js";
import { LoadingError } from "../components/LoadingError.js";
import { MultiActionButton } from "../components/MultiActionButton.js";
@@ -173,20 +172,15 @@ export function BalanceView(state: State.Balances): VNode
{
variant="contained"
onClick={state.goToWalletManualWithdraw.onClick}
>
- <i18n.Translate>Withdraw</i18n.Translate>
+ <i18n.Translate>Add</i18n.Translate>
</Button>
{currencyWithNonZeroAmount.length > 0 && (
<MultiActionButton
- label={(s) => <i18n.Translate>Deposit {s}</i18n.Translate>}
+ label={(s) => <i18n.Translate>Send {s}</i18n.Translate>}
actions={currencyWithNonZeroAmount}
onClick={(c) => state.goToWalletDeposit(c)}
/>
)}
- <JustInDevMode>
- <Button onClick={state.addAction.onClick}>
- <i18n.Translate>Enter URI</i18n.Translate>
- </Button>
- </JustInDevMode>
</footer>
</Fragment>
);
diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
index d9b96074..08479c73 100644
--- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
+++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
@@ -40,7 +40,7 @@ export function NoBalanceHelp({
variant="outlined"
onClick={goToWalletManualWithdraw.onClick}
>
- <Typography>Withdraw</Typography>
+ <Typography>Get digital cash</Typography>
</Button>
</Alert>
</Paper>
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx
b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index f559e54d..6c08ecb7 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -53,6 +53,11 @@ import { TransactionPage } from "./Transaction.js";
import { WelcomePage } from "./Welcome.js";
import { QrReaderPage } from "./QrReader.js";
import { platform } from "../platform/api.js";
+import {
+ DestinationSelectionGetCash,
+ DestinationSelectionSendCash,
+} from "./DestinationSelection.js";
+import { Amounts } from "@gnu-taler/taler-util";
export function Application(): VNode {
const [globalNotification, setGlobalNotification] = useState<
@@ -126,10 +131,25 @@ export function Application(): VNode {
path={Pages.balanceHistory.pattern}
component={HistoryPage}
goToWalletDeposit={(currency: string) =>
- redirectTo(Pages.balanceDeposit({ currency }))
+ redirectTo(Pages.sendCash({ amount: `${currency}:0` }))
}
goToWalletManualWithdraw={(currency?: string) =>
- redirectTo(Pages.balanceManualWithdraw({ currency }))
+ redirectTo(
+ Pages.receiveCash({
+ amount: !currency ? undefined : `${currency}:0`,
+ }),
+ )
+ }
+ />
+ <Route
+ path={Pages.sendCash.pattern}
+ component={DestinationSelectionSendCash}
+ />
+ <Route
+ path={Pages.receiveCash.pattern}
+ component={DestinationSelectionGetCash}
+ goToWalletManualWithdraw={(amount?: string) =>
+ redirectTo(Pages.balanceManualWithdraw({ amount }))
}
/>
<Route
@@ -214,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/AddNewActionView.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
similarity index 71%
copy from
packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx
copy to
packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
index cf155112..ec997dfb 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
@@ -20,14 +20,18 @@
*/
import { createExample } from "../test-utils.js";
-import { AddNewActionView as TestedComponent } from "./AddNewActionView.js";
+import {
+ DestinationSelectionGetCash,
+ DestinationSelectionSendCash,
+} from "./DestinationSelection.js";
export default {
- title: "wallet/add new action",
- component: TestedComponent,
- argTypes: {
- setDeviceName: () => Promise.resolve(),
- },
+ title: "wallet/destination",
};
-export const Initial = createExample(TestedComponent, {});
+export const GetCash = createExample(DestinationSelectionGetCash, {
+ amount: "usd:0",
+});
+export const SendCash = createExample(DestinationSelectionSendCash, {
+ amount: "eur:1",
+});
diff --git
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
new file mode 100644
index 00000000..5f9c5065
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
@@ -0,0 +1,419 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ 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";
+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;
+ flex-direction: column;
+ & > * {
+ margin: 8px;
+ }
+`;
+
+interface Props {
+ action: "send" | "get";
+ amount?: string;
+ goToWalletManualWithdraw: (amount: string) => void;
+}
+
+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>
+ <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({
+ 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>
+ <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 e40c1ac5..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>Withdraw</i18n.Translate>
+ <i18n.Translate>Add</i18n.Translate>
</Button>
{currencyAmount && Amounts.isNonZero(currencyAmount) && (
<Button
@@ -219,7 +219,7 @@ export function HistoryView({
// style={{ marginLeft: 0, marginTop: 8 }}
onClick={() => goToWalletDeposit(selectedCurrency)}
>
- <i18n.Translate>Deposit</i18n.Translate>
+ <i18n.Translate>Send</i18n.Translate>
</Button>
)}
</div>
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}
/>
);
}
diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
index fc09ea54..25537691 100644
--- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
@@ -35,6 +35,7 @@ import * as a14 from "./Welcome.stories.js";
import * as a15 from "./AddNewActionView.stories.js";
import * as a16 from "./DeveloperPage.stories.js";
import * as a17 from "./QrReader.stories.js";
+import * as a18 from "./DestinationSelection.stories.js";
export default [
a1,
@@ -53,4 +54,5 @@ export default [
a15,
a16,
a17,
+ a18,
];
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
- [taler-wallet-core] branch master updated (9bb9d149 -> cdc8e9af),
gnunet <=