taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

destination ui

Browse Source
This commit is contained in:
Sebastian 2022-08-15 21:18:39 -03:00
parent 004b1544f3
commit cdc8e9afdf
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
19 changed files with 450 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/taler-wallet-webextension/src/NavigationBar.tsx
View File

@ -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",

2
packages/taler-wallet-webextension/src/components/styled/index.tsx
View File

@ -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;

4
packages/taler-wallet-webextension/src/cta/Payment/index.ts
View File

@ -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 {

4
packages/taler-wallet-webextension/src/cta/Payment/views.tsx
View File

@ -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>

1
packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
View File

@ -129,7 +129,6 @@ export function SuccessView(state: State.Success): VNode {
title="Edit"
dangerouslySetInnerHTML={{ __html: editIcon }}
color="black"
onClick={() => console.log("ok")}
/>
</div>
}

2
packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts
View File

@ -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];

4
packages/taler-wallet-webextension/src/mui/Button.stories.tsx
View File

@ -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 => (

4
packages/taler-wallet-webextension/src/mui/TextField.tsx
View File

@ -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>}

12
packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
View File

@ -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,9 +160,13 @@ export function InputBaseComponent({
multiline,
type,
class: _class,
startAdornment,
endAdornment,
...props
}: any): VNode {
return (
<Fragment>
{startAdornment}
<input
disabled={disabled}
type={type}
@ -172,6 +180,8 @@ export function InputBaseComponent({
].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.

5
packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
View File

@ -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`

1
packages/taler-wallet-webextension/src/platform/dev.ts
View File

@ -40,7 +40,6 @@ const api: PlatformAPI = {
function waitAndNotify(): void {
total--;
if (total < 1) {
console.log("done");
fn();
}
}

1
packages/taler-wallet-webextension/src/platform/firefox.ts
View File

@ -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);
}

6
packages/taler-wallet-webextension/src/popup/Application.tsx
View File

@ -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

2
packages/taler-wallet-webextension/src/popup/BalancePage.tsx
View File

@ -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

16
packages/taler-wallet-webextension/src/wallet/Application.tsx
View File

@ -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)}
/>

4
packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx
View File

@ -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",
});

393
packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
View File

@ -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>
);
}

2
packages/taler-wallet-webextension/src/wallet/History.tsx
View File

@ -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

10
packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
View File

@ -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}
/>
);
}