diff options
author | Sebastian <sebasjm@gmail.com> | 2022-06-01 15:47:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-06-01 15:47:47 -0300 |
commit | af7b107f455b01e136db2211c357cc59a506139a (patch) | |
tree | d1a4596fba17b9db06d50a76f7ecfa403449faca /packages/taler-wallet-webextension/src/popup | |
parent | 2aade8e7aed485577576f91e61474f69b4366060 (diff) | |
download | wallet-core-af7b107f455b01e136db2211c357cc59a506139a.tar.xz |
mui button impl
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
4 files changed, 67 insertions, 45 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx index 72579b05b..ba2886a41 100644 --- a/packages/taler-wallet-webextension/src/popup/Application.tsx +++ b/packages/taler-wallet-webextension/src/popup/Application.tsx @@ -61,7 +61,7 @@ export function Application(): VNode { <IoCProviderForRuntime> <PendingTransactions goToTransaction={(txId: string) => - route(Pages.balance_transaction.replace(":tid", txId)) + redirectTo(Pages.balance_transaction.replace(":tid", txId)) } /> <Match> @@ -74,15 +74,19 @@ export function Application(): VNode { path={Pages.balance} component={BalancePage} goToWalletManualWithdraw={() => - route( + redirectTo( Pages.balance_manual_withdraw.replace(":currency?", ""), ) } goToWalletDeposit={(currency: string) => - route(Pages.balance_deposit.replace(":currency", currency)) + redirectTo( + Pages.balance_deposit.replace(":currency", currency), + ) } goToWalletHistory={(currency: string) => - route(Pages.balance_history.replace(":currency?", currency)) + redirectTo( + Pages.balance_history.replace(":currency?", currency), + ) } /> @@ -96,7 +100,7 @@ export function Application(): VNode { url={decodeURIComponent(action)} onDismiss={() => { setDismissed(true); - route(Pages.balance); + return redirectTo(Pages.balance); }} /> ); @@ -106,16 +110,12 @@ 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 @@ -175,6 +175,10 @@ function RedirectToWalletPage(): VNode { ); } +async function redirectTo(location: string): Promise<void> { + route(location); +} + function Redirect({ to }: { to: string }): null { useEffect(() => { route(to, true); diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index 966782bbe..ea202681c 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -22,17 +22,17 @@ import { JustInDevMode } from "../components/JustInDevMode.js"; import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { MultiActionButton } from "../components/MultiActionButton.js"; -import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Button } from "../mui/Button.js"; import { AddNewActionView } from "../wallet/AddNewActionView.js"; import * as wxApi from "../wxApi.js"; import { NoBalanceHelp } from "./NoBalanceHelp.js"; export interface Props { - goToWalletDeposit: (currency: string) => void; - goToWalletHistory: (currency: string) => void; - goToWalletManualWithdraw: () => void; + goToWalletDeposit: (currency: string) => Promise<void>; + goToWalletHistory: (currency: string) => Promise<void>; + goToWalletManualWithdraw: () => Promise<void>; } export function BalancePage({ goToWalletManualWithdraw, @@ -65,7 +65,7 @@ export function BalancePage({ } if (addingAction) { - return <AddNewActionView onCancel={() => setAddingAction(false)} />; + return <AddNewActionView onCancel={async () => setAddingAction(false)} />; } return ( @@ -74,16 +74,16 @@ export function BalancePage({ goToWalletManualWithdraw={goToWalletManualWithdraw} goToWalletDeposit={goToWalletDeposit} goToWalletHistory={goToWalletHistory} - goToAddAction={() => setAddingAction(true)} + goToAddAction={async () => setAddingAction(true)} /> ); } export interface BalanceViewProps { balances: Balance[]; - goToWalletManualWithdraw: () => void; - goToAddAction: () => void; - goToWalletDeposit: (currency: string) => void; - goToWalletHistory: (currency: string) => void; + goToWalletManualWithdraw: () => Promise<void>; + goToAddAction: () => Promise<void>; + goToWalletDeposit: (currency: string) => Promise<void>; + goToWalletHistory: (currency: string) => Promise<void>; } export function BalanceView({ @@ -113,22 +113,20 @@ export function BalanceView({ /> </section> <footer style={{ justifyContent: "space-between" }}> - <ButtonPrimary onClick={goToWalletManualWithdraw}> + <Button variant="contained" onClick={goToWalletManualWithdraw}> <i18n.Translate>Withdraw</i18n.Translate> - </ButtonPrimary> + </Button> {currencyWithNonZeroAmount.length > 0 && ( <MultiActionButton - label={(s) => ( - <i18n.Translate>Deposit {<span>{s}</span>}</i18n.Translate> - )} + label={(s) => <i18n.Translate>Deposit {s}</i18n.Translate>} actions={currencyWithNonZeroAmount} onClick={(c) => goToWalletDeposit(c)} /> )} <JustInDevMode> - <ButtonBoxPrimary onClick={goToAddAction}> + <Button onClick={goToAddAction}> <i18n.Translate>Enter URI</i18n.Translate> - </ButtonBoxPrimary> + </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 ddce93cd8..20f44b5dc 100644 --- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx +++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx @@ -8,7 +8,7 @@ import { Typography } from "../mui/Typography.js"; export function NoBalanceHelp({ goToWalletManualWithdraw, }: { - goToWalletManualWithdraw: () => void; + goToWalletManualWithdraw: () => Promise<void>; }): VNode { return ( <Paper diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx index 2cf546af6..215180366 100644 --- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx +++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx @@ -28,16 +28,17 @@ import { Title, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { Button } from "../mui/Button.js"; export interface Props { url: string; - onDismiss: () => void; + onDismiss: () => Promise<void>; } export function TalerActionFound({ url, onDismiss }: Props): VNode { const uriType = classifyTalerUri(url); const { i18n } = useTranslationContext(); - function redirectToWallet(): void { + async function redirectToWallet(): Promise<void> { platform.openWalletURIFromPopup(url); } return ( @@ -51,9 +52,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode { <p> <i18n.Translate>This page has pay action.</i18n.Translate> </p> - <ButtonSuccess onClick={redirectToWallet}> + <Button + variant="contained" + color="success" + onClick={redirectToWallet} + > <i18n.Translate>Open pay page</i18n.Translate> - </ButtonSuccess> + </Button> </div> )} {uriType === TalerUriType.TalerWithdraw && ( @@ -63,9 +68,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode { This page has a withdrawal action. </i18n.Translate> </p> - <ButtonSuccess onClick={redirectToWallet}> + <Button + variant="contained" + color="success" + onClick={redirectToWallet} + > <i18n.Translate>Open withdraw page</i18n.Translate> - </ButtonSuccess> + </Button> </div> )} {uriType === TalerUriType.TalerTip && ( @@ -73,9 +82,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode { <p> <i18n.Translate>This page has a tip action.</i18n.Translate> </p> - <ButtonSuccess onClick={redirectToWallet}> + <Button + variant="contained" + color="success" + onClick={redirectToWallet} + > <i18n.Translate>Open tip page</i18n.Translate> - </ButtonSuccess> + </Button> </div> )} {uriType === TalerUriType.TalerNotifyReserve && ( @@ -85,9 +98,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode { This page has a notify reserve action. </i18n.Translate> </p> - <ButtonSuccess onClick={redirectToWallet}> + <Button + variant="contained" + color="success" + onClick={redirectToWallet} + > <i18n.Translate>Notify</i18n.Translate> - </ButtonSuccess> + </Button> </div> )} {uriType === TalerUriType.TalerRefund && ( @@ -95,9 +112,13 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode { <p> <i18n.Translate>This page has a refund action.</i18n.Translate> </p> - <ButtonSuccess onClick={redirectToWallet}> + <Button + variant="contained" + color="success" + onClick={redirectToWallet} + > <i18n.Translate>Open refund page</i18n.Translate> - </ButtonSuccess> + </Button> </div> )} {uriType === TalerUriType.Unknown && ( @@ -113,10 +134,9 @@ export function TalerActionFound({ url, onDismiss }: Props): VNode { </section> <footer> <div /> - <ButtonPrimary onClick={() => onDismiss()}> - {" "} - <i18n.Translate>Dismiss</i18n.Translate>{" "} - </ButtonPrimary> + <Button variant="contained" onClick={onDismiss}> + <i18n.Translate>Dismiss</i18n.Translate> + </Button> </footer> </Fragment> ); |