From af7b107f455b01e136db2211c357cc59a506139a Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 1 Jun 2022 15:47:47 -0300 Subject: mui button impl --- .../src/wallet/AddNewActionView.tsx | 21 ++-- .../src/wallet/Application.tsx | 55 +++++----- .../src/wallet/BackupPage.tsx | 19 ++-- .../src/wallet/CreateManualWithdraw.tsx | 8 +- .../src/wallet/DepositPage.tsx | 23 +++-- .../src/wallet/DeveloperPage.tsx | 111 ++++++++++++--------- .../src/wallet/ExchangeAddConfirm.tsx | 37 +++---- .../src/wallet/ExchangeAddPage.tsx | 2 +- .../src/wallet/ExchangeSetUrl.tsx | 14 +-- .../src/wallet/History.tsx | 25 +++-- .../src/wallet/ManualWithdrawPage.tsx | 2 +- .../src/wallet/ProviderAddPage.tsx | 32 +++--- .../src/wallet/ProviderDetailPage.tsx | 41 ++++---- .../src/wallet/ReserveCreated.tsx | 13 +-- .../src/wallet/Settings.tsx | 2 +- .../src/wallet/Transaction.tsx | 51 +++++----- 16 files changed, 242 insertions(+), 214 deletions(-) (limited to 'packages/taler-wallet-webextension/src/wallet') 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; } 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 { platform.openWalletURIFromPopup(url); } @@ -41,11 +38,15 @@ export function AddNewActionView({ onCancel }: Props): VNode {
- {uriType !== TalerUriType.Unknown && ( - + )}
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 { > - route(Pages.balance_transaction.replace(":tid", txId)) + redirectTo( + Pages.balance_transaction.replace(":tid", txId), + ) } /> @@ -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( + goToWalletHistory={(currency?: string) => + redirectTo( Pages.balance_history.replace(":currency?", currency || ""), - ); - }} + ) + } /> { - route(Pages.balance); - }} + onCancel={() => redirectTo(Pages.balance)} /> { - 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( All done, your transaction is in progress @@ -178,23 +184,17 @@ export function Application(): VNode { { - route(Pages.backup_provider_add); - }} + onAddProvider={() => redirectTo(Pages.backup_provider_add)} /> { - route(Pages.backup); - }} + onBack={() => redirectTo(Pages.backup)} /> { - route(Pages.backup); - }} + onBack={() => redirectTo(Pages.backup)} /> {/** @@ -203,9 +203,7 @@ export function Application(): VNode { { - 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)} /> @@ -258,9 +256,12 @@ export function Application(): VNode { ); } +async function redirectTo(location: string): Promise { + 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; } 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; onSyncAll: () => Promise; } @@ -121,9 +120,9 @@ export function BackupView({ No backup providers configured - + )} @@ -131,16 +130,16 @@ export function BackupView({
- + +
)} 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({
- onCreate(state.exchange.value, state.parsedAmount!)} > Start withdrawal - +
); 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 {

-
@@ -345,20 +348,24 @@ export function View({ state }: ViewProps): VNode { }
- {!state.depositHandler.onClick ? ( - + ) : ( - + )}
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
{children}
; + } return (

Debug tools:

- - -
- - { - 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); - }} - /> -
- + + + + + + + + + + + + { + 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); + }} + /> + + + {downloadedDatabase && (
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; + onConfirm: () => Promise; } export function ExchangeAddConfirmPage({ @@ -71,8 +67,8 @@ export interface ViewProps { url: string; terms: TermsState | undefined; onAccept: (b: boolean) => Promise; - onCancel: () => void; - onConfirm: () => void; + onCancel: () => Promise; + onConfirm: () => Promise; } export function View({ @@ -114,30 +110,35 @@ export function View({ )}
- {!terms && ( - )} {terms && ( {needsReview && !reviewed && ( - + )} {(terms.status === "accepted" || (needsReview && reviewed)) && ( - + )} {terms.status === "notfound" && ( - + )} )} 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; } 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; onVerify: (s: string) => Promise; onConfirm: (url: string) => Promise; withError?: string; @@ -64,7 +63,7 @@ function useEndpointStatus( } }, 500); setHandler(h); - }, [value, setHandler, handler, onVerify]); + }, [value, setHandler, onVerify]); return { error: dirty ? error : undefined, @@ -172,10 +171,11 @@ export function ExchangeSetUrlPage({

- - Next - +
); 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; + goToWalletManualWithdraw: (currency?: string) => Promise; } 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; + goToWalletManualWithdraw: (currency?: string) => Promise; defaultCurrency?: string; transactions: Transaction[]; balances: Balance[]; @@ -198,19 +198,22 @@ export function HistoryView({ )}
- goToWalletManualWithdraw(selectedCurrency)} > Withdraw - + {currencyAmount && Amounts.isNonZero(currencyAmount) && ( - goToWalletDeposit(selectedCurrency)} > Deposit - + )}
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; } 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; } export function ProviderAddPage({ onBack }: Props): VNode { @@ -67,11 +66,13 @@ export function ProviderAddPage({ onBack }: Props): VNode { { + 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; onVerify: (s: string) => Promise; onConfirm: (url: string, name: string) => Promise; withError?: string; @@ -161,10 +162,11 @@ export function SetUrlView({

- - { const url = canonicalizeBaseUrl(value); @@ -174,7 +176,7 @@ export function SetUrlView({ }} > Next - +
); @@ -183,8 +185,8 @@ export function SetUrlView({ export interface ConfirmProviderViewProps { provider: BackupBackupProviderTerms; url: string; - onCancel: () => void; - onConfirm: () => void; + onCancel: () => Promise; + onConfirm: () => Promise; } export function ConfirmProviderView({ url, @@ -236,17 +238,17 @@ export function ConfirmProviderView({ Accept terms of service} name="terms" - onToggle={() => setAccepted((old) => !old)} + onToggle={async () => setAccepted((old) => !old)} enabled={accepted} />
- - +
); 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; } export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { @@ -77,10 +72,10 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { 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; + onSync: () => Promise; + onBack: () => Promise; + onExtend: () => Promise; } export function ProviderView({ @@ -116,7 +111,7 @@ export function ProviderView({

-
@@ -149,9 +144,9 @@ export function ProviderView({ {" "}
@@ -229,13 +227,17 @@ export function TransactionView({
- - +
@@ -387,9 +389,12 @@ export function TransactionView({
- onRefund(transaction.proposalId)}> +
-- cgit v1.2.3