diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-19 14:51:27 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-19 14:51:35 -0300 |
commit | a35604fd562a72e4e266bf6a4255d89d3c1374a1 (patch) | |
tree | d0c4df01a89dc78c412be6da3aba3cec343937ff /packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx | |
parent | 60cfb0e78f3afed92f315c1394da717329db9564 (diff) | |
download | wallet-core-a35604fd562a72e4e266bf6a4255d89d3c1374a1.tar.xz |
some changes:
- simplify design to reuse more components (from wallet instead of popup)
- simplify hooks (useAsyncAsHook)
- updateNotification from backend now filter events by type
- new balance design proposed by Belen
- more information when the withdrawal is in process
- manual withdrawal implementation
- some bugs killed
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx | 94 |
1 files changed, 40 insertions, 54 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx index 1c14c6e0a..d14429ee5 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx @@ -28,34 +28,62 @@ import { ButtonPrimary, PaymentStatus, SmallLightText, - WalletBox, } from "../components/styled"; import { Time } from "../components/Time"; -import { useProviderStatus } from "../hooks/useProviderStatus"; +import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; +import * as wxApi from "../wxApi"; interface Props { pid: string; onBack: () => void; } -export function ProviderDetailPage({ pid, onBack }: Props): VNode { - const status = useProviderStatus(pid); - if (!status) { +export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { + async function getProviderInfo(): Promise<ProviderInfo | null> { + //create a first list of backup info by currency + const status = await wxApi.getBackupInfo(); + + const providers = status.providers.filter( + (p) => p.syncProviderBaseUrl === providerURL, + ); + return providers.length ? providers[0] : null; + } + + const state = useAsyncAsHook(getProviderInfo); + + if (!state) { return ( <div> <i18n.Translate>Loading...</i18n.Translate> </div> ); } - if (!status.info) { + if (state.hasError) { + return ( + <div> + <i18n.Translate> + There was an error loading the provider detail for "{providerURL}" + </i18n.Translate> + </div> + ); + } + + if (state.response === null) { onBack(); - return <div />; + return ( + <div> + <i18n.Translate> + There is not known provider with url "{providerURL}". Redirecting + back... + </i18n.Translate> + </div> + ); } return ( <ProviderView - info={status.info} - onSync={status.sync} - onDelete={() => status.remove().then(onBack)} + info={state.response} + onSync={async () => wxApi.syncOneProvider(providerURL)} + onDelete={async () => wxApi.syncOneProvider(providerURL).then(onBack)} onBack={onBack} onExtend={() => { null; @@ -84,7 +112,7 @@ export function ProviderView({ info.paymentStatus.type === ProviderPaymentType.Paid || info.paymentStatus.type === ProviderPaymentType.TermsChanged; return ( - <WalletBox> + <Fragment> <Error info={info} /> <header> <h3> @@ -167,35 +195,10 @@ export function ProviderView({ </ButtonDestructive> </div> </footer> - </WalletBox> + </Fragment> ); } -// function daysSince(d?: Timestamp): string { -// if (!d || d.t_ms === "never") return "never synced"; -// const duration = intervalToDuration({ -// start: d.t_ms, -// end: new Date(), -// }); -// const str = formatDuration(duration, { -// delimiter: ", ", -// format: [ -// duration?.years -// ? i18n.str`years` -// : duration?.months -// ? i18n.str`months` -// : duration?.days -// ? i18n.str`days` -// : duration?.hours -// ? i18n.str`hours` -// : duration?.minutes -// ? i18n.str`minutes` -// : i18n.str`seconds`, -// ], -// }); -// return `synced ${str} ago`; -// } - function Error({ info }: { info: ProviderInfo }): VNode { if (info.lastError) { return <ErrorMessage title={info.lastError.hint} />; @@ -234,23 +237,6 @@ function Error({ info }: { info: ProviderInfo }): VNode { return <Fragment />; } -// function colorByStatus(status: ProviderPaymentType): string { -// switch (status) { -// case ProviderPaymentType.InsufficientBalance: -// return "rgb(223, 117, 20)"; -// case ProviderPaymentType.Unpaid: -// return "rgb(202, 60, 60)"; -// case ProviderPaymentType.Paid: -// return "rgb(28, 184, 65)"; -// case ProviderPaymentType.Pending: -// return "gray"; -// // case ProviderPaymentType.InsufficientBalance: -// // return "rgb(202, 60, 60)"; -// case ProviderPaymentType.TermsChanged: -// return "rgb(202, 60, 60)"; -// } -// } - function descriptionByStatus(status: ProviderPaymentStatus): VNode { switch (status.type) { // return i18n.str`no enough balance to make the payment` |