diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
16 files changed, 242 insertions, 214 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx index c4daf458a..cd1fa0763 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx +++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx @@ -2,15 +2,12 @@ import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { platform } from "../platform/api.js"; -import { - Button, - ButtonSuccess, - InputWithLabel, -} from "../components/styled/index.js"; +import { InputWithLabel } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; export interface Props { - onCancel: () => void; + onCancel: () => Promise<void>; } export function AddNewActionView({ onCancel }: Props): VNode { @@ -18,7 +15,7 @@ export function AddNewActionView({ onCancel }: Props): VNode { const uriType = classifyTalerUri(url); const { i18n } = useTranslationContext(); - function redirectToWallet(): void { + async function redirectToWallet(): Promise<void> { platform.openWalletURIFromPopup(url); } @@ -41,11 +38,15 @@ export function AddNewActionView({ onCancel }: Props): VNode { </InputWithLabel> </section> <footer> - <Button onClick={onCancel}> + <Button variant="contained" color="secondary" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </Button> {uriType !== TalerUriType.Unknown && ( - <ButtonSuccess onClick={redirectToWallet}> + <Button + variant="contained" + color="success" + onClick={redirectToWallet} + > {(() => { switch (uriType) { case TalerUriType.TalerNotifyReserve: @@ -61,7 +62,7 @@ export function AddNewActionView({ onCancel }: Props): VNode { } return <Fragment />; })()} - </ButtonSuccess> + </Button> )} </footer> </Fragment> diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx index 6a7f62c6c..37ea80d96 100644 --- a/packages/taler-wallet-webextension/src/wallet/Application.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx @@ -94,7 +94,9 @@ export function Application(): VNode { > <PendingTransactions goToTransaction={(txId: string) => - route(Pages.balance_transaction.replace(":tid", txId)) + redirectTo( + Pages.balance_transaction.replace(":tid", txId), + ) } /> </div> @@ -123,10 +125,12 @@ export function Application(): VNode { path={Pages.balance_history} component={HistoryPage} goToWalletDeposit={(currency: string) => - route(Pages.balance_deposit.replace(":currency", currency)) + redirectTo( + Pages.balance_deposit.replace(":currency", currency), + ) } goToWalletManualWithdraw={(currency?: string) => - route( + redirectTo( Pages.balance_manual_withdraw.replace( ":currency?", currency || "", @@ -137,29 +141,31 @@ export function Application(): VNode { <Route path={Pages.balance_transaction} component={TransactionPage} - goToWalletHistory={(currency?: string) => { - route( + goToWalletHistory={(currency?: string) => + redirectTo( Pages.balance_history.replace(":currency?", currency || ""), - ); - }} + ) + } /> <Route path={Pages.balance_manual_withdraw} component={ManualWithdrawPage} - onCancel={() => { - route(Pages.balance); - }} + onCancel={() => redirectTo(Pages.balance)} /> <Route path={Pages.balance_deposit} component={DepositPage} onCancel={(currency: string) => { - route(Pages.balance_history.replace(":currency?", currency)); + redirectTo( + Pages.balance_history.replace(":currency?", currency), + ); }} onSuccess={(currency: string) => { - route(Pages.balance_history.replace(":currency?", currency)); + redirectTo( + Pages.balance_history.replace(":currency?", currency), + ); setGlobalNotification( <i18n.Translate> All done, your transaction is in progress @@ -178,23 +184,17 @@ export function Application(): VNode { <Route path={Pages.backup} component={BackupPage} - onAddProvider={() => { - route(Pages.backup_provider_add); - }} + onAddProvider={() => redirectTo(Pages.backup_provider_add)} /> <Route path={Pages.backup_provider_detail} component={ProviderDetailPage} - onBack={() => { - route(Pages.backup); - }} + onBack={() => redirectTo(Pages.backup)} /> <Route path={Pages.backup_provider_add} component={ProviderAddPage} - onBack={() => { - route(Pages.backup); - }} + onBack={() => redirectTo(Pages.backup)} /> {/** @@ -203,9 +203,7 @@ export function Application(): VNode { <Route path={Pages.settings_exchange_add} component={ExchangeAddPage} - onBack={() => { - route(Pages.balance); - }} + onBack={() => redirectTo(Pages.balance)} /> {/** @@ -221,14 +219,14 @@ export function Application(): VNode { path={Pages.cta_pay} component={PayPage} goToWalletManualWithdraw={(currency?: string) => - route( + redirectTo( Pages.balance_manual_withdraw.replace( ":currency?", currency || "", ), ) } - goBack={() => route(Pages.balance)} + goBack={() => redirectTo(Pages.balance)} /> <Route path={Pages.cta_refund} component={RefundPage} /> <Route path={Pages.cta_tips} component={TipPage} /> @@ -258,9 +256,12 @@ export function Application(): VNode { ); } +async function redirectTo(location: string): Promise<void> { + route(location); +} + function Redirect({ to }: { to: string }): null { useEffect(() => { - console.log("got some wrong route", to); route(to, true); }); return null; diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx index 505aa600b..1f23be856 100644 --- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx @@ -31,8 +31,6 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { BoldLight, - ButtonPrimary, - ButtonSuccess, Centered, CenteredBoldText, CenteredText, @@ -42,11 +40,12 @@ import { } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { Pages } from "../NavigationBar.js"; import * as wxApi from "../wxApi.js"; interface Props { - onAddProvider: () => void; + onAddProvider: () => Promise<void>; } export function BackupPage({ onAddProvider }: Props): VNode { @@ -87,7 +86,7 @@ export function BackupPage({ onAddProvider }: Props): VNode { export interface ViewProps { providers: ProviderInfo[]; - onAddProvider: () => void; + onAddProvider: () => Promise<void>; onSyncAll: () => Promise<void>; } @@ -121,9 +120,9 @@ export function BackupView({ <BoldLight> <i18n.Translate>No backup providers configured</i18n.Translate> </BoldLight> - <ButtonSuccess onClick={onAddProvider}> + <Button variant="contained" color="success" onClick={onAddProvider}> <i18n.Translate>Add provider</i18n.Translate> - </ButtonSuccess> + </Button> </Centered> )} </section> @@ -131,16 +130,16 @@ export function BackupView({ <footer> <div /> <div> - <ButtonPrimary onClick={onSyncAll}> + <Button variant="contained" onClick={onSyncAll}> {providers.length > 1 ? ( <i18n.Translate>Sync all backups</i18n.Translate> ) : ( <i18n.Translate>Sync now</i18n.Translate> )} - </ButtonPrimary> - <ButtonSuccess onClick={onAddProvider}> + </Button> + <Button variant="contained" color="success" onClick={onAddProvider}> <i18n.Translate>Add provider</i18n.Translate> - </ButtonSuccess> + </Button> </div> </footer> )} diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index 11bade6f5..502e9f8ad 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -21,14 +21,12 @@ */ import { AmountJson, Amounts } from "@gnu-taler/taler-util"; -import { TalerError } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { SelectList } from "../components/SelectList.js"; import { BoldLight, - ButtonPrimary, Centered, Input, InputWithLabel, @@ -37,6 +35,7 @@ import { SubTitle, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; import { SelectFieldHandler, TextFieldHandler } from "../mui/handlers.js"; import { Pages } from "../NavigationBar.js"; @@ -270,12 +269,13 @@ export function CreateManualWithdraw({ </section> <footer> <div /> - <ButtonPrimary + <Button + variant="contained" disabled={!state.parsedAmount || !state.exchange.value} onClick={() => onCreate(state.exchange.value, state.parsedAmount!)} > <i18n.Translate>Start withdrawal</i18n.Translate> - </ButtonPrimary> + </Button> </footer> </Fragment> ); diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx index 9b8008175..1546674f1 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx @@ -23,8 +23,6 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { SelectList } from "../components/SelectList.js"; import { - Button, - ButtonPrimary, ErrorText, Input, InputWithLabel, @@ -33,6 +31,7 @@ import { } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { ButtonHandler, SelectFieldHandler, @@ -275,7 +274,11 @@ export function View({ state }: ViewProps): VNode { </p> </WarningBox> <footer> - <Button onClick={state.cancelHandler.onClick}> + <Button + variant="contained" + color="secondary" + onClick={state.cancelHandler.onClick} + > <i18n.Translate>Cancel</i18n.Translate> </Button> </footer> @@ -345,20 +348,24 @@ export function View({ state }: ViewProps): VNode { } </section> <footer> - <Button onClick={state.cancelHandler.onClick}> + <Button + variant="contained" + color="secondary" + onClick={state.cancelHandler.onClick} + > <i18n.Translate>Cancel</i18n.Translate> </Button> {!state.depositHandler.onClick ? ( - <ButtonPrimary disabled> + <Button variant="contained" disabled> <i18n.Translate>Deposit</i18n.Translate> - </ButtonPrimary> + </Button> ) : ( - <ButtonPrimary onClick={state.depositHandler.onClick}> + <Button variant="contained" onClick={state.depositHandler.onClick}> <i18n.Translate> Deposit {Amounts.stringifyValue(state.totalToDeposit)}{" "} {state.currency} </i18n.Translate> - </ButtonPrimary> + </Button> )} </footer> </Fragment> diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx index c4725a8d7..e71ea48f0 100644 --- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx @@ -30,6 +30,9 @@ import { Time } from "../components/Time.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { useDiagnostics } from "../hooks/useDiagnostics.js"; +import { Button } from "../mui/Button.js"; +import { Grid } from "../mui/Grid.js"; +import { Paper } from "../mui/Paper.js"; import * as wxApi from "../wxApi.js"; export function DeveloperPage(): VNode { @@ -133,7 +136,6 @@ export function View({ const money_by_exchange = coins.reduce( (prev, cur) => { const denom = Amounts.parseOrThrow(cur.denom_value); - console.log(cur); if (!prev[cur.exchange_base_url]) { prev[cur.exchange_base_url] = []; currencies[cur.exchange_base_url] = denom.currency; @@ -154,57 +156,72 @@ export function View({ [exchange_name: string]: CalculatedCoinfInfo[]; }, ); - + function Item({ children }: any) { + return <div>{children}</div>; + } return ( <div> <p> <i18n.Translate>Debug tools</i18n.Translate>: </p> - <button - onClick={() => - confirmReset( - i18n.str`Do you want to IRREVOCABLY DESTROY everything inside your wallet and LOSE ALL YOUR COINS?`, - wxApi.resetDb, - ) - } - > - <i18n.Translate>reset</i18n.Translate> - </button> - <button - onClick={() => - confirmReset( - i18n.str`TESTING: This may delete all your coin, proceed with caution`, - wxApi.runGarbageCollector, - ) - } - > - <i18n.Translate>run gc</i18n.Translate> - </button> - <br /> - <button onClick={() => fileRef?.current?.click()}> - <i18n.Translate>import database</i18n.Translate> - </button> - <input - ref={fileRef} - style={{ display: "none" }} - type="file" - onChange={async (e) => { - const f: FileList | null = e.currentTarget.files; - if (!f || f.length != 1) { - return Promise.reject(); - } - const buf = await f[0].arrayBuffer(); - const str = new Uint8Array(buf).reduce( - (data, byte) => data + String.fromCharCode(byte), - "", - ); - return onImportDatabase(str); - }} - /> - <br /> - <button onClick={onExportDatabase}> - <i18n.Translate>export database</i18n.Translate> - </button> + <Grid container justifyContent="space-between" spacing={1}> + <Grid item> + <Button + variant="contained" + onClick={() => + confirmReset( + i18n.str`Do you want to IRREVOCABLY DESTROY everything inside your wallet and LOSE ALL YOUR COINS?`, + wxApi.resetDb, + ) + } + > + <i18n.Translate>reset</i18n.Translate> + </Button> + </Grid> + <Grid item> + <Button + variant="contained" + onClick={() => + confirmReset( + i18n.str`TESTING: This may delete all your coin, proceed with caution`, + wxApi.runGarbageCollector, + ) + } + > + <i18n.Translate>run gc</i18n.Translate> + </Button> + </Grid> + <Grid item> + <Button + variant="contained" + onClick={async () => fileRef?.current?.click()} + > + <i18n.Translate>import database</i18n.Translate> + </Button> + </Grid> + <Grid item> + <input + ref={fileRef} + style={{ display: "none" }} + type="file" + onChange={async (e) => { + const f: FileList | null = e.currentTarget.files; + if (!f || f.length != 1) { + return Promise.reject(); + } + const buf = await f[0].arrayBuffer(); + const str = new Uint8Array(buf).reduce( + (data, byte) => data + String.fromCharCode(byte), + "", + ); + return onImportDatabase(str); + }} + /> + <Button variant="contained" onClick={onExportDatabase}> + <i18n.Translate>export database</i18n.Translate> + </Button> + </Grid> + </Grid> {downloadedDatabase && ( <div> <i18n.Translate> diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx index 135cf68d8..6f6e7a1ba 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx @@ -1,21 +1,17 @@ import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { - Button, - ButtonSuccess, - ButtonWarning, - Title, -} from "../components/styled/index.js"; +import { Title } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { TermsOfServiceSection } from "../cta/TermsOfServiceSection.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { buildTermsOfServiceState, TermsState } from "../utils/index.js"; import * as wxApi from "../wxApi.js"; export interface Props { url: string; - onCancel: () => void; - onConfirm: () => void; + onCancel: () => Promise<void>; + onConfirm: () => Promise<void>; } export function ExchangeAddConfirmPage({ @@ -71,8 +67,8 @@ export interface ViewProps { url: string; terms: TermsState | undefined; onAccept: (b: boolean) => Promise<void>; - onCancel: () => void; - onConfirm: () => void; + onCancel: () => Promise<void>; + onConfirm: () => Promise<void>; } export function View({ @@ -114,30 +110,35 @@ export function View({ )} <footer> - <Button onClick={onCancel}> + <Button variant="contained" color="secondary" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </Button> {!terms && ( - <Button disabled> + <Button variant="contained" disabled> <i18n.Translate>Loading terms..</i18n.Translate> </Button> )} {terms && ( <Fragment> {needsReview && !reviewed && ( - <ButtonSuccess disabled upperCased onClick={onConfirm}> + <Button + variant="contained" + color="success" + disabled + onClick={onConfirm} + > <i18n.Translate>Add exchange</i18n.Translate> - </ButtonSuccess> + </Button> )} {(terms.status === "accepted" || (needsReview && reviewed)) && ( - <ButtonSuccess upperCased onClick={onConfirm}> + <Button variant="contained" color="success" onClick={onConfirm}> <i18n.Translate>Add exchange</i18n.Translate> - </ButtonSuccess> + </Button> )} {terms.status === "notfound" && ( - <ButtonWarning upperCased onClick={onConfirm}> + <Button variant="contained" color="warning" onClick={onConfirm}> <i18n.Translate>Add exchange anyway</i18n.Translate> - </ButtonWarning> + </Button> )} </Fragment> )} diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx index df423bb2b..42a5b4c9c 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx @@ -28,7 +28,7 @@ import { ExchangeSetUrlPage } from "./ExchangeSetUrl.js"; interface Props { currency?: string; - onBack: () => void; + onBack: () => Promise<void>; } export function ExchangeAddPage({ currency, onBack }: Props): VNode { diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx index ad8cb7db0..755cf425f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx @@ -6,8 +6,6 @@ import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { - Button, - ButtonPrimary, Input, LightText, SubTitle, @@ -15,11 +13,12 @@ import { WarningBox, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; export interface Props { initialValue?: string; expectedCurrency?: string; - onCancel: () => void; + onCancel: () => Promise<void>; onVerify: (s: string) => Promise<TalerConfigResponse | undefined>; onConfirm: (url: string) => Promise<string | undefined>; withError?: string; @@ -64,7 +63,7 @@ function useEndpointStatus<T>( } }, 500); setHandler(h); - }, [value, setHandler, handler, onVerify]); + }, [value, setHandler, onVerify]); return { error: dirty ? error : undefined, @@ -172,10 +171,11 @@ export function ExchangeSetUrlPage({ </p> </section> <footer> - <Button onClick={onCancel}> + <Button variant="contained" color="secondary" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </Button> - <ButtonPrimary + <Button + variant="contained" disabled={ !result || !!error || @@ -189,7 +189,7 @@ export function ExchangeSetUrlPage({ }} > <i18n.Translate>Next</i18n.Translate> - </ButtonPrimary> + </Button> </footer> </Fragment> ); diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 59f245522..1ab879195 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -26,7 +26,6 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { ButtonBoxPrimary, - ButtonPrimary, CenteredBoldText, CenteredText, DateSeparator, @@ -36,13 +35,14 @@ import { Time } from "../components/Time.js"; import { TransactionItem } from "../components/TransactionItem.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { NoBalanceHelp } from "../popup/NoBalanceHelp.js"; import * as wxApi from "../wxApi.js"; interface Props { currency?: string; - goToWalletDeposit: (currency: string) => void; - goToWalletManualWithdraw: (currency?: string) => void; + goToWalletDeposit: (currency: string) => Promise<void>; + goToWalletManualWithdraw: (currency?: string) => Promise<void>; } export function HistoryPage({ currency, @@ -101,8 +101,8 @@ export function HistoryView({ goToWalletManualWithdraw, goToWalletDeposit, }: { - goToWalletDeposit: (currency: string) => void; - goToWalletManualWithdraw: (currency?: string) => void; + goToWalletDeposit: (currency: string) => Promise<void>; + goToWalletManualWithdraw: (currency?: string) => Promise<void>; defaultCurrency?: string; transactions: Transaction[]; balances: Balance[]; @@ -198,19 +198,22 @@ export function HistoryView({ )} </div> <div> - <ButtonPrimary - style={{ marginLeft: 0, marginTop: 8 }} + <Button + variant="contained" + // style={{ marginLeft: 0, marginTop: 8 }} onClick={() => goToWalletManualWithdraw(selectedCurrency)} > <i18n.Translate>Withdraw</i18n.Translate> - </ButtonPrimary> + </Button> {currencyAmount && Amounts.isNonZero(currencyAmount) && ( - <ButtonBoxPrimary - style={{ marginLeft: 0, marginTop: 8 }} + <Button + variant="outlined" + color="primary" + // style={{ marginLeft: 0, marginTop: 8 }} onClick={() => goToWalletDeposit(selectedCurrency)} > <i18n.Translate>Deposit</i18n.Translate> - </ButtonBoxPrimary> + </Button> )} </div> </div> diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx index daa46086e..05ac9cf7f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx @@ -34,7 +34,7 @@ import { ReserveCreated } from "./ReserveCreated.js"; interface Props { currency?: string; - onCancel: () => void; + onCancel: () => Promise<void>; } export function ManualWithdrawPage({ currency, onCancel }: Props): VNode { diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx index ed4a91f12..7e8dc6589 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx @@ -25,8 +25,6 @@ import { useEffect, useState } from "preact/hooks"; import { Checkbox } from "../components/Checkbox.js"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { - Button, - ButtonPrimary, Input, LightText, SmallLightText, @@ -34,12 +32,13 @@ import { Title, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; import { queryToSlashConfig } from "../utils/index.js"; import * as wxApi from "../wxApi.js"; interface Props { currency: string; - onBack: () => void; + onBack: () => Promise<void>; } export function ProviderAddPage({ onBack }: Props): VNode { @@ -67,11 +66,13 @@ export function ProviderAddPage({ onBack }: Props): VNode { <ConfirmProviderView provider={verifying.provider} url={verifying.url} - onCancel={() => { + onCancel={async () => { setVerifying(undefined); }} onConfirm={() => { - wxApi.addBackupProvider(verifying.url, verifying.name).then(onBack); + return wxApi + .addBackupProvider(verifying.url, verifying.name) + .then(onBack); }} /> ); @@ -79,7 +80,7 @@ export function ProviderAddPage({ onBack }: Props): VNode { export interface SetUrlViewProps { initialValue?: string; - onCancel: () => void; + onCancel: () => Promise<void>; onVerify: (s: string) => Promise<BackupBackupProviderTerms | undefined>; onConfirm: (url: string, name: string) => Promise<string | undefined>; withError?: string; @@ -161,10 +162,11 @@ export function SetUrlView({ </p> </section> <footer> - <Button onClick={onCancel}> + <Button variant="contained" color="secondary" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </Button> - <ButtonPrimary + <Button + variant="contained" disabled={!value && !urlError} onClick={() => { const url = canonicalizeBaseUrl(value); @@ -174,7 +176,7 @@ export function SetUrlView({ }} > <i18n.Translate>Next</i18n.Translate> - </ButtonPrimary> + </Button> </footer> </Fragment> ); @@ -183,8 +185,8 @@ export function SetUrlView({ export interface ConfirmProviderViewProps { provider: BackupBackupProviderTerms; url: string; - onCancel: () => void; - onConfirm: () => void; + onCancel: () => Promise<void>; + onConfirm: () => Promise<void>; } export function ConfirmProviderView({ url, @@ -236,17 +238,17 @@ export function ConfirmProviderView({ <Checkbox label={<i18n.Translate>Accept terms of service</i18n.Translate>} name="terms" - onToggle={() => setAccepted((old) => !old)} + onToggle={async () => setAccepted((old) => !old)} enabled={accepted} /> </section> <footer> - <Button onClick={onCancel}> + <Button variant="contained" color="secondary" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </Button> - <ButtonPrimary disabled={!accepted} onClick={onConfirm}> + <Button variant="contained" disabled={!accepted} onClick={onConfirm}> <i18n.Translate>Add provider</i18n.Translate> - </ButtonPrimary> + </Button> </footer> </Fragment> ); diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx index bf9f55b10..7ea29286b 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx @@ -25,21 +25,16 @@ import { Fragment, h, VNode } from "preact"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; -import { - Button, - ButtonDestructive, - ButtonPrimary, - PaymentStatus, - SmallLightText, -} from "../components/styled/index.js"; +import { PaymentStatus, SmallLightText } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import * as wxApi from "../wxApi.js"; interface Props { pid: string; - onBack: () => void; + onBack: () => Promise<void>; } export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { @@ -77,10 +72,10 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { <ProviderView url={providerURL} info={state.response} - onSync={async () => wxApi.syncOneProvider(providerURL)} - onDelete={async () => wxApi.removeProvider(providerURL).then(onBack)} + onSync={() => wxApi.syncOneProvider(providerURL)} + onDelete={() => wxApi.removeProvider(providerURL).then(onBack)} onBack={onBack} - onExtend={() => { + onExtend={async () => { null; }} /> @@ -90,10 +85,10 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { export interface ViewProps { url: string; info: ProviderInfo | null; - onDelete: () => void; - onSync: () => void; - onBack: () => void; - onExtend: () => void; + onDelete: () => Promise<void>; + onSync: () => Promise<void>; + onBack: () => Promise<void>; + onExtend: () => Promise<void>; } export function ProviderView({ @@ -116,7 +111,7 @@ export function ProviderView({ </p> </section> <footer> - <Button onClick={onBack}> + <Button variant="contained" color="secondary" onClick={onBack}> <i18n.Translate>See providers</i18n.Translate> </Button> <div /> @@ -149,9 +144,9 @@ export function ProviderView({ </b>{" "} <Time timestamp={lb} format="dd MMMM yyyy" /> </p> - <ButtonPrimary onClick={onSync}> + <Button variant="contained" onClick={onSync}> <i18n.Translate>Back up</i18n.Translate> - </ButtonPrimary> + </Button> {info.terms && ( <Fragment> <p> @@ -164,9 +159,9 @@ export function ProviderView({ </Fragment> )} <p>{descriptionByStatus(info.paymentStatus, i18n)}</p> - <ButtonPrimary disabled onClick={onExtend}> + <Button variant="contained" disabled onClick={onExtend}> <i18n.Translate>Extend</i18n.Translate> - </ButtonPrimary> + </Button> {info.paymentStatus.type === ProviderPaymentType.TermsChanged && ( <div> @@ -212,13 +207,13 @@ export function ProviderView({ )} </section> <footer> - <Button onClick={onBack}> + <Button variant="contained" color="secondary" onClick={onBack}> <i18n.Translate>See providers</i18n.Translate> </Button> <div> - <ButtonDestructive onClick={onDelete}> + <Button variant="contained" color="error" onClick={onDelete}> <i18n.Translate>Remove provider</i18n.Translate> - </ButtonDestructive> + </Button> </div> </footer> </Fragment> diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx index 02d8fe6a8..ad6bdb9cc 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -4,18 +4,15 @@ import { Amount } from "../components/Amount.js"; import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { QR } from "../components/QR.js"; -import { - ButtonDestructive, - Title, - WarningBox, -} from "../components/styled/index.js"; +import { Title, WarningBox } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; export interface Props { reservePub: string; paytoURI: PaytoUri | undefined; exchangeBaseUrl: string; amount: AmountJson; - onCancel: () => void; + onCancel: () => Promise<void>; } export function ReserveCreated({ @@ -82,9 +79,9 @@ export function ReserveCreated({ </section> <footer> <div /> - <ButtonDestructive onClick={onCancel}> + <Button variant="contained" color="error" onClick={onCancel}> <i18n.Translate>Cancel withdrawal</i18n.Translate> - </ButtonDestructive> + </Button> </footer> </Fragment> ); diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index 83ce76ade..be75c1eac 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -66,7 +66,7 @@ export interface ViewProps { setDeviceName: (s: string) => Promise<void>; permissionToggle: ToggleHandler; developerMode: boolean; - toggleDeveloperMode: () => void; + toggleDeveloperMode: () => Promise<void>; knownExchanges: Array<ExchangeListItem>; } diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 1170c9222..b78039ddd 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -21,7 +21,6 @@ import { Location, NotificationType, parsePaytoUri, - parsePayUri, PaytoUri, stringifyPaytoUri, TalerProtocolTimestamp, @@ -47,17 +46,11 @@ import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js"; import { - Button, - ButtonBox, - ButtonDestructive, - ButtonPrimary, CenteredDialog, - HistoryRow, InfoBox, ListOfProducts, Overlay, Row, - RowBorderGray, SmallLightText, SubTitle, WarningBox, @@ -65,12 +58,13 @@ import { import { Time } from "../components/Time.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { Pages } from "../NavigationBar.js"; import * as wxApi from "../wxApi.js"; interface Props { tid: string; - goToWalletHistory: (currency?: string) => void; + goToWalletHistory: (currency?: string) => Promise<void>; } async function getTransaction(tid: string): Promise<Transaction> { @@ -122,7 +116,7 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode { onRetry={() => wxApi.retryTransaction(tid).then(() => goToWalletHistory(currency)) } - onRefund={(id) => wxApi.applyRefundFromPurchaseId(id)} + onRefund={(id) => wxApi.applyRefundFromPurchaseId(id).then()} onBack={() => goToWalletHistory(currency)} /> ); @@ -130,10 +124,10 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode { export interface WalletTransactionProps { transaction: Transaction; - onDelete: () => void; - onRetry: () => void; - onRefund: (id: string) => void; - onBack: () => void; + onDelete: () => Promise<void>; + onRetry: () => Promise<void>; + onRefund: (id: string) => Promise<void>; + onBack: () => Promise<void>; } const PurchaseDetailsTable = styled.table` @@ -152,7 +146,7 @@ export function TransactionView({ }: WalletTransactionProps): VNode { const [confirmBeforeForget, setConfirmBeforeForget] = useState(false); - function doCheckBeforeForget(): void { + async function doCheckBeforeForget(): Promise<void> { if ( transaction.pending && transaction.type === TransactionType.Withdrawal @@ -198,13 +192,17 @@ export function TransactionView({ <div /> <div> {showRetry ? ( - <ButtonPrimary onClick={onRetry}> + <Button variant="contained" onClick={onRetry}> <i18n.Translate>Retry</i18n.Translate> - </ButtonPrimary> + </Button> ) : null} - <ButtonDestructive onClick={doCheckBeforeForget}> + <Button + variant="contained" + color="error" + onClick={doCheckBeforeForget} + > <i18n.Translate>Forget</i18n.Translate> - </ButtonDestructive> + </Button> </div> </footer> </Fragment> @@ -229,13 +227,17 @@ export function TransactionView({ </i18n.Translate> </section> <footer> - <Button onClick={() => setConfirmBeforeForget(false)}> + <Button + variant="contained" + color="secondary" + onClick={async () => setConfirmBeforeForget(false)} + > <i18n.Translate>Cancel</i18n.Translate> </Button> - <ButtonDestructive onClick={onDelete}> + <Button variant="contained" color="error" onClick={onDelete}> <i18n.Translate>Confirm</i18n.Translate> - </ButtonDestructive> + </Button> </footer> </CenteredDialog> </Overlay> @@ -387,9 +389,12 @@ export function TransactionView({ <div> <div /> <div> - <ButtonPrimary onClick={() => onRefund(transaction.proposalId)}> + <Button + variant="contained" + onClick={() => onRefund(transaction.proposalId)} + > <i18n.Translate>Accept</i18n.Translate> - </ButtonPrimary> + </Button> </div> </div> </InfoBox> |