diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
5 files changed, 63 insertions, 49 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx index ec997dfb3..166b2c007 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.stories.tsx @@ -23,6 +23,7 @@ import { createExample } from "../test-utils.js"; import { DestinationSelectionGetCash, DestinationSelectionSendCash, + SelectCurrencyView, } from "./DestinationSelection.js"; export default { @@ -35,3 +36,9 @@ export const GetCash = createExample(DestinationSelectionGetCash, { export const SendCash = createExample(DestinationSelectionSendCash, { amount: "eur:1", }); +export const SelectCurrency = createExample(SelectCurrencyView, { + list: { + "": "Select a currency", + USD: "USD", + }, +}); diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx index ba5dcf1da..c62504538 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx @@ -186,24 +186,37 @@ export function SelectCurrency({ const list: Record<string, string> = {}; hook.response.exchanges.forEach((e) => (list[e.currency] = e.currency)); list[""] = "Select a currency"; + return <SelectCurrencyView onChange={onChange} list={list} />; +} + +export function SelectCurrencyView({ + onChange, + list, +}: { + onChange: (s: string) => void; + list: Record<string, string>; +}): VNode { + const { i18n } = useTranslationContext(); + return ( <Fragment> - <h1> - <i18n.Translate>Specify the amount and the origin</i18n.Translate> - </h1> + <h2> + <i18n.Translate> + Choose a currency to proceed or add another exchange + </i18n.Translate> + </h2> - <Alert severity="warning"> - Choose a currency to proceed or add more exchanges in the settings tab - </Alert> - <Input> - <SelectList - label={<i18n.Translate>Known currencies</i18n.Translate>} - list={list} - name="lang" - value={""} - onChange={(v) => onChange(v)} - /> - </Input> + <p> + <Input> + <SelectList + label={<i18n.Translate>Known currencies</i18n.Translate>} + list={list} + name="lang" + value={""} + onChange={(v) => onChange(v)} + /> + </Input> + </p> <div style={{ display: "flex", justifyContent: "space-between" }}> <div /> <LinkPrimary href={Pages.settingsExchangeAdd({})}> @@ -320,7 +333,7 @@ export function DestinationSelectionGetCash({ <Grid container spacing={1} columns={1}> {previous2.length > 0 ? ( <Fragment> - <p>Previous origins:</p> + <p>Use previous origins:</p> <Grid item xs={1}> <Paper style={{ padding: 8 }}> <ContactTable> @@ -337,9 +350,9 @@ export function DestinationSelectionGetCash({ </Fragment> ) : undefined} <Grid item> - <p>Create new origin for the money</p> + <p>Or specify a new origin for the money</p> </Grid> - <Grid item container columns={3} spacing={1}> + <Grid item container columns={2} spacing={1}> <Grid item xs={1}> <Paper style={{ padding: 8 }}> <p>From my bank account</p> @@ -355,23 +368,11 @@ export function DestinationSelectionGetCash({ </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> + <p>From another wallet</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> ); @@ -441,7 +442,7 @@ export function DestinationSelectionSendCash({ <Grid container spacing={1} columns={1}> {previous2.length > 0 ? ( <Fragment> - <p>Previous destinations:</p> + <p>Use previous destinations:</p> <Grid item xs={1}> <Paper style={{ padding: 8 }}> <ContactTable> @@ -458,9 +459,9 @@ export function DestinationSelectionSendCash({ </Fragment> ) : undefined} <Grid item> - <p>Create a destination for the money</p> + <p>Or specify a new destination for the money</p> </Grid> - <Grid item container columns={3} spacing={1}> + <Grid item container columns={2} spacing={1}> <Grid item xs={1}> <Paper style={{ padding: 8 }}> <p>To my bank account</p> @@ -469,22 +470,10 @@ export function DestinationSelectionSendCash({ </Grid> <Grid item xs={1}> <Paper style={{ padding: 8 }}> - <p>To someone else</p> + <p>To another wallet</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 f02e43391..e885a216d 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -96,6 +96,8 @@ const term = 1000 * 60 * 60 * 24; function normalizeToDay(x: number): number { return Math.round(x / term) * term; } +import DownloadIcon from "../svg/download_24px.svg"; +import UploadIcon from "../svg/upload_24px.svg"; export function HistoryView({ defaultCurrency, @@ -206,17 +208,19 @@ export function HistoryView({ </div> <div> <Button + tooltip="Transfer money to the wallet" + startIcon={DownloadIcon} variant="contained" - // style={{ marginLeft: 0, marginTop: 8 }} onClick={() => goToWalletManualWithdraw(selectedCurrency)} > <i18n.Translate>Add</i18n.Translate> </Button> {currencyAmount && Amounts.isNonZero(currencyAmount) && ( <Button + tooltip="Transfer money from the wallet" + startIcon={UploadIcon} variant="outlined" color="primary" - // style={{ marginLeft: 0, marginTop: 8 }} onClick={() => goToWalletDeposit(selectedCurrency)} > <i18n.Translate>Send</i18n.Translate> diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx index 9c9ab7ce4..c574050e0 100644 --- a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx +++ b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx @@ -103,6 +103,7 @@ export function QrReaderPage({ onDetected }: Props): VNode { Read QR from file </InputFile> <div ref={imageRef} /> */} + <h1>Scan a QR code or enter taler:// URI below</h1> <QrVideo ref={videoRef} /> <TextField label="Taler URI" diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx index 5d21bf306..7d10ad0f4 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx @@ -55,6 +55,19 @@ export const IBAN = createExample(TestedComponent, { exchangeBaseUrl: "https://exchange.demo.taler.net", }); +export const WithReceiverName = createExample(TestedComponent, { + reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", + paytoURI: parsePaytoUri( + "payto://iban/ES8877998399652238?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG&receiver=Sebastian", + ), + amount: { + currency: "USD", + value: 10, + fraction: 0, + }, + exchangeBaseUrl: "https://exchange.demo.taler.net", +}); + export const Bitcoin = createExample(TestedComponent, { reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", paytoURI: parsePaytoUri( |