mui button impl

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