add provider examples
This commit is contained in:
Sebastian
parent
26a1280960
commit
550905f0e7
@ -99,7 +99,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element {
|
||||
{dateStr && <div style={{ fontSize: "small", color: "gray" }}>{dateStr}</div>}
|
||||
{!dateStr && <div style={{ fontSize: "small", color: "red" }}>never synced</div>}
|
||||
<div style={{ fontVariant: "small-caps", fontSize: "x-large" }}>
|
||||
<a href={Pages.provider.replace(':currency', props.id)}><span>{props.title}</span></a>
|
||||
<a href={Pages.provider_detail.replace(':currency', props.id)}><span>{props.title}</span></a>
|
||||
</div>
|
||||
|
||||
<div>{props.subtitle}</div>
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2021 Taler Systems S.A.
|
||||
|
||||
GNU Taler is free software; you can redistribute it and/or modify it under the
|
||||
terms of the GNU General Public License as published by the Free Software
|
||||
Foundation; either version 3, or (at your option) any later version.
|
||||
|
||||
GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
|
||||
A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License along with
|
||||
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* @author Sebastian Javier Marchano (sebasjm)
|
||||
*/
|
||||
|
||||
import { FunctionalComponent } from 'preact';
|
||||
import { ConfirmProviderView as TestedComponent } from './ProviderAddPage';
|
||||
|
||||
export default {
|
||||
title: 'popup/backup/confirm',
|
||||
component: TestedComponent,
|
||||
argTypes: {
|
||||
onRetry: { action: 'onRetry' },
|
||||
onDelete: { action: 'onDelete' },
|
||||
onBack: { action: 'onBack' },
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
|
||||
const r = (args: any) => <Component {...args} />
|
||||
r.args = props
|
||||
return r
|
||||
}
|
||||
|
||||
export const DemoService = createExample(TestedComponent, {
|
||||
currency: 'KUDOS',
|
||||
url: 'https://sync.demo.taler.net/',
|
||||
provider: {
|
||||
annual_fee: 'KUDOS:0.1',
|
||||
storage_limit_in_megabytes: 20,
|
||||
supported_protocol_version: '1'
|
||||
}
|
||||
});
|
||||
|
||||
export const FreeService = createExample(TestedComponent, {
|
||||
currency: 'ARS',
|
||||
url: 'https://sync.taler:9667/',
|
||||
provider: {
|
||||
annual_fee: 'ARS:0',
|
||||
storage_limit_in_megabytes: 20,
|
||||
supported_protocol_version: '1'
|
||||
}
|
||||
});
|
||||
107
packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
Normal file
107
packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
import { Amounts, BackupBackupProviderTerms, i18n } from "@gnu-taler/taler-util";
|
||||
import { privateDecrypt } from "crypto";
|
||||
import { add, addYears } from "date-fns";
|
||||
import { VNode } from "preact";
|
||||
import { useState } from "preact/hooks";
|
||||
import * as wxApi from "../wxApi";
|
||||
import ProviderAddConfirmProviderStories from "./ProviderAddConfirmProvider.stories";
|
||||
|
||||
interface Props {
|
||||
currency: string;
|
||||
}
|
||||
|
||||
export function ProviderAddPage({ currency }: Props): VNode {
|
||||
const [verifying, setVerifying] = useState<{ url: string, provider: BackupBackupProviderTerms } | undefined>(undefined)
|
||||
if (!verifying) {
|
||||
return <SetUrlView
|
||||
currency={currency}
|
||||
onCancel={() => {
|
||||
setVerifying(undefined);
|
||||
}}
|
||||
onVerify={(url) => {
|
||||
return fetch(url).then(r => r.json())
|
||||
.then((provider) => setVerifying({ url, provider }))
|
||||
.catch((e) => e.message)
|
||||
}}
|
||||
/>
|
||||
}
|
||||
return <ConfirmProviderView
|
||||
provider={verifying.provider}
|
||||
currency={currency}
|
||||
url={verifying.url}
|
||||
onCancel={() => {
|
||||
setVerifying(undefined);
|
||||
}}
|
||||
onConfirm={() => {
|
||||
wxApi.addBackupProvider(verifying.url).then(_ => history.go(-1))
|
||||
}}
|
||||
|
||||
/>
|
||||
}
|
||||
|
||||
export interface SetUrlViewProps {
|
||||
currency: string,
|
||||
onCancel: () => void;
|
||||
onVerify: (s: string) => Promise<string | undefined>;
|
||||
}
|
||||
|
||||
export function SetUrlView({ currency, onCancel, onVerify }: SetUrlViewProps) {
|
||||
const [value, setValue] = useState<string>("")
|
||||
const [error, setError] = useState<string | undefined>(undefined)
|
||||
return <div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<section style={{ height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
|
||||
<div>
|
||||
Add backup provider for storing <b>{currency}</b>
|
||||
</div>
|
||||
{error && <div class="errorbox" style={{ marginTop: 10 }} >
|
||||
<p>{error}</p>
|
||||
</div>}
|
||||
<h3>Backup provider URL</h3>
|
||||
<input style={{ width: 'calc(100% - 8px)' }} value={value} onChange={(e) => setValue(e.currentTarget.value)} />
|
||||
<p>
|
||||
Backup providers may charge for their service
|
||||
</p>
|
||||
</section>
|
||||
<footer style={{ marginTop: 'auto', display: 'flex', flexShrink: 0 }}>
|
||||
<button class="pure-button" onClick={onCancel}><i18n.Translate>cancel</i18n.Translate></button>
|
||||
<div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}>
|
||||
<button class="pure-button button-secondary" style={{ marginLeft: 5 }} onClick={() => onVerify(value).then(r => r ? setError(r) : undefined)}><i18n.Translate>verify service terms</i18n.Translate></button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
}
|
||||
|
||||
export interface ConfirmProviderViewProps {
|
||||
provider: BackupBackupProviderTerms,
|
||||
currency: string,
|
||||
url: string,
|
||||
onCancel: () => void;
|
||||
onConfirm: () => void
|
||||
}
|
||||
export function ConfirmProviderView({ url, provider, currency, onCancel, onConfirm }: ConfirmProviderViewProps) {
|
||||
return <div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
<section style={{ height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
|
||||
<div>
|
||||
Verify provider service terms for storing <b>{currency}</b>
|
||||
</div>
|
||||
<h3>{url}</h3>
|
||||
<p>
|
||||
{Amounts.isZero(provider.annual_fee) ? 'free of charge' : provider.annual_fee} for a year of backup service
|
||||
</p>
|
||||
<p>
|
||||
{provider.storage_limit_in_megabytes} megabytes of storage
|
||||
</p>
|
||||
</section>
|
||||
<footer style={{ marginTop: 'auto', display: 'flex', flexShrink: 0 }}>
|
||||
<button class="pure-button" onClick={onCancel}>
|
||||
<i18n.Translate>cancel</i18n.Translate>
|
||||
</button>
|
||||
<div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}>
|
||||
<button class="pure-button button-success" style={{ marginLeft: 5 }} onClick={onConfirm}>
|
||||
<i18n.Translate>confirm</i18n.Translate>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2021 Taler Systems S.A.
|
||||
|
||||
GNU Taler is free software; you can redistribute it and/or modify it under the
|
||||
terms of the GNU General Public License as published by the Free Software
|
||||
Foundation; either version 3, or (at your option) any later version.
|
||||
|
||||
GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
|
||||
A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License along with
|
||||
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* @author Sebastian Javier Marchano (sebasjm)
|
||||
*/
|
||||
|
||||
import { ProviderPaymentType } from '@gnu-taler/taler-wallet-core';
|
||||
import { FunctionalComponent } from 'preact';
|
||||
import { SetUrlView as TestedComponent } from './ProviderAddPage';
|
||||
|
||||
export default {
|
||||
title: 'popup/backup/add',
|
||||
component: TestedComponent,
|
||||
argTypes: {
|
||||
onRetry: { action: 'onRetry' },
|
||||
onDelete: { action: 'onDelete' },
|
||||
onBack: { action: 'onBack' },
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
|
||||
const r = (args: any) => <Component {...args} />
|
||||
r.args = props
|
||||
return r
|
||||
}
|
||||
|
||||
export const SetUrl = createExample(TestedComponent, {
|
||||
currency: 'ARS',
|
||||
});
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
import { ProviderPaymentType } from '@gnu-taler/taler-wallet-core';
|
||||
import { FunctionalComponent } from 'preact';
|
||||
import { ProviderView as TestedComponent } from './ProviderPage';
|
||||
import { ProviderView as TestedComponent } from './ProviderDetailPage';
|
||||
|
||||
export default {
|
||||
title: 'popup/backup/details',
|
||||
@ -77,6 +77,9 @@ export const ActiveErrorSync = createExample(TestedComponent, {
|
||||
"lastSuccessfulBackupTimestamp": {
|
||||
"t_ms": 1625063925078
|
||||
},
|
||||
lastAttemptedBackupTimestamp: {
|
||||
"t_ms": 1625063925078
|
||||
},
|
||||
"paymentProposalIds": [
|
||||
"43Q5WWRJPNS4SE9YKS54H9THDS94089EDGXW9EHBPN6E7M184XEG"
|
||||
],
|
||||
@ -15,48 +15,34 @@
|
||||
*/
|
||||
|
||||
|
||||
import { i18n, Timestamp } from "@gnu-taler/taler-util";
|
||||
import { BackupBackupProviderTerms, i18n, Timestamp } from "@gnu-taler/taler-util";
|
||||
import { ProviderInfo, ProviderPaymentType } from "@gnu-taler/taler-wallet-core";
|
||||
import { formatDuration, intervalToDuration } from "date-fns";
|
||||
import { VNode } from "preact";
|
||||
import { formatDuration, intervalToDuration, format } from "date-fns";
|
||||
import { Fragment, VNode } from "preact";
|
||||
import { useRef, useState } from "preact/hooks";
|
||||
import { useBackupStatus } from "../hooks/useProvidersByCurrency";
|
||||
import * as wxApi from "../wxApi";
|
||||
|
||||
interface Props {
|
||||
currency: string;
|
||||
onAddProvider: (c: string) => void;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export function ProviderPage({ currency }: Props): VNode {
|
||||
export function ProviderDetailPage({ currency, onAddProvider, onBack }: Props): VNode {
|
||||
const status = useBackupStatus()
|
||||
const [adding, setAdding] = useState<boolean>(false)
|
||||
if (!status) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
if (adding) {
|
||||
return <AddProviderView onConfirm={(value) => {
|
||||
console.log(value)
|
||||
wxApi.addBackupProvider(value).then(_ => history.go(-1))
|
||||
setAdding(false)
|
||||
}} />
|
||||
}
|
||||
const info = status.providers[currency];
|
||||
return <ProviderView currency={currency} info={info}
|
||||
onSync={() => { null }}
|
||||
onDelete={() => { null }}
|
||||
onBack={() => { history.go(-1); }}
|
||||
onAddProvider={() => { setAdding(true) }}
|
||||
onBack={onBack}
|
||||
onAddProvider={() => onAddProvider(currency)}
|
||||
/>;
|
||||
}
|
||||
|
||||
function AddProviderView({ onConfirm }: { onConfirm: (s: string) => void }) {
|
||||
const textInput = useRef<HTMLInputElement>(null)
|
||||
return <div>
|
||||
<input ref={textInput} />
|
||||
<button onClick={() => onConfirm(textInput?.current.value)}>confirm</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
export interface ViewProps {
|
||||
currency: string;
|
||||
info?: ProviderInfo;
|
||||
@ -69,7 +55,7 @@ export interface ViewProps {
|
||||
export function ProviderView({ currency, info, onDelete, onSync, onBack, onAddProvider }: ViewProps): VNode {
|
||||
function Footer() {
|
||||
return <footer style={{ marginTop: 'auto', display: 'flex', flexShrink: 0 }}>
|
||||
<button onClick={onBack}><i18n.Translate>back</i18n.Translate></button>
|
||||
<button class="pure-button" onClick={onBack}><i18n.Translate>back</i18n.Translate></button>
|
||||
<div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}>
|
||||
{info && <button class="pure-button button-destructive" onClick={onDelete}><i18n.Translate>remove</i18n.Translate></button>}
|
||||
{info && <button class="pure-button button-secondary" style={{ marginLeft: 5 }} onClick={onSync}><i18n.Translate>sync now</i18n.Translate></button>}
|
||||
@ -79,9 +65,12 @@ export function ProviderView({ currency, info, onDelete, onSync, onBack, onAddPr
|
||||
}
|
||||
function Error() {
|
||||
if (info?.lastError) {
|
||||
return <div class="errorbox" style={{ marginTop: 10 }} >
|
||||
<p>{info.lastError.hint}</p>
|
||||
</div>
|
||||
return <Fragment>
|
||||
<div class="errorbox" style={{ marginTop: 10 }} >
|
||||
<div style={{ height: 0, textAlign: 'right', color: 'gray', fontSize: 'small' }}>{!info.lastAttemptedBackupTimestamp || info.lastAttemptedBackupTimestamp.t_ms === 'never' ? 'never' : format(new Date(info.lastAttemptedBackupTimestamp.t_ms), 'dd/MM/yyyy HH:mm:ss')}</div>
|
||||
<p>{info.lastError.hint}</p>
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
if (info?.backupProblem) {
|
||||
switch (info.backupProblem.type) {
|
||||
@ -129,7 +118,7 @@ export function ProviderView({ currency, info, onDelete, onSync, onBack, onAddPr
|
||||
}
|
||||
`}</style>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<section style={{ flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
|
||||
<section style={{ flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
|
||||
<span style={{ padding: 5, display: 'inline-block', backgroundColor: colorByStatus(info?.paymentStatus.type), borderRadius: 5, color: 'white' }}>{info?.paymentStatus.type}</span>
|
||||
{info && <span style={{ float: "right", fontSize: "small", color: "gray", padding: 5 }}>
|
||||
From <b>{info.syncProviderBaseUrl}</b>
|
||||
@ -62,7 +62,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
|
||||
|
||||
function Footer() {
|
||||
return <footer style={{ marginTop: 'auto', display: 'flex', flexShrink: 0 }}>
|
||||
<button onClick={onBack}><i18n.Translate>back</i18n.Translate></button>
|
||||
<button class="pure-button" onClick={onBack}><i18n.Translate>back</i18n.Translate></button>
|
||||
<div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}>
|
||||
{transaction?.error ? <button class="pure-button button-secondary" style={{marginRight: 5}} onClick={onRetry}><i18n.Translate>retry</i18n.Translate></button> : null }
|
||||
<button class="pure-button button-destructive" onClick={onDelete}><i18n.Translate>delete</i18n.Translate></button>
|
||||
@ -96,7 +96,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
|
||||
).amount
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }} >
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
|
||||
<span style="font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
|
||||
<span style="float: right; font-size:small; color:gray">
|
||||
From <b>{transaction.exchangeBaseUrl}</b>
|
||||
@ -122,7 +122,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }} >
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
|
||||
<span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
|
||||
<span style="float: right; font-size:small; color:gray">
|
||||
To <b>{transaction.info.merchant.name}</b>
|
||||
@ -161,7 +161,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
|
||||
).amount
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }} >
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
|
||||
<span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
|
||||
<span style="float: right; font-size:small; color:gray">
|
||||
To <b>{transaction.targetPaytoUri}</b>
|
||||
@ -182,7 +182,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
|
||||
).amount
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }} >
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
|
||||
<span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
|
||||
<span style="float: right; font-size:small; color:gray">
|
||||
From <b>{transaction.exchangeBaseUrl}</b>
|
||||
@ -203,7 +203,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
|
||||
).amount
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }} >
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
|
||||
<span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
|
||||
<span style="float: right; font-size:small; color:gray">
|
||||
From <b>{transaction.merchantBaseUrl}</b>
|
||||
@ -224,7 +224,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
|
||||
).amount
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }} >
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 45px - 16px)', overflow: 'auto' }}>
|
||||
<section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
|
||||
<span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
|
||||
<span style="float: right; font-size:small; color:gray">
|
||||
From <b>{transaction.info.merchant.name}</b>
|
||||
|
||||
@ -36,7 +36,8 @@ export enum Pages {
|
||||
backup = '/backup',
|
||||
history = '/history',
|
||||
transaction = '/transaction/:tid',
|
||||
provider = '/provider/:currency',
|
||||
provider_detail = '/provider/:currency',
|
||||
provider_add = '/provider/:currency/add',
|
||||
}
|
||||
|
||||
interface TabProps {
|
||||
@ -47,7 +48,7 @@ interface TabProps {
|
||||
|
||||
function Tab(props: TabProps): JSX.Element {
|
||||
let cssClass = "";
|
||||
if (props.current === props.target) {
|
||||
if (props.current?.startsWith(props.target)) {
|
||||
cssClass = "active";
|
||||
}
|
||||
return (
|
||||
|
||||
@ -20,25 +20,25 @@
|
||||
* @author Florian Dold <dold@taler.net>
|
||||
*/
|
||||
|
||||
import { Fragment, render } from "preact";
|
||||
import { setupI18n } from "@gnu-taler/taler-util";
|
||||
import { strings } from "./i18n/strings";
|
||||
import { createHashHistory } from "history";
|
||||
import { render } from "preact";
|
||||
import Router, { route, Route } from "preact-router";
|
||||
import { useEffect } from "preact/hooks";
|
||||
import { DevContextProvider } from "./context/useDevContext";
|
||||
import { useTalerActionURL } from "./hooks/useTalerActionURL";
|
||||
import { strings } from "./i18n/strings";
|
||||
import { BackupPage } from "./popup/BackupPage";
|
||||
import { BalancePage } from "./popup/Balance";
|
||||
import { DeveloperPage as DeveloperPage } from "./popup/Debug";
|
||||
import { HistoryPage } from "./popup/History";
|
||||
import {
|
||||
Pages, WalletNavBar
|
||||
} from "./popup/popup";
|
||||
import { HistoryPage } from "./popup/History";
|
||||
import { DeveloperPage as DeveloperPage } from "./popup/Debug";
|
||||
import { ProviderAddPage } from "./popup/ProviderAddPage";
|
||||
import { ProviderDetailPage } from "./popup/ProviderDetailPage";
|
||||
import { SettingsPage } from "./popup/Settings";
|
||||
import { TransactionPage } from "./popup/Transaction";
|
||||
import { BalancePage } from "./popup/Balance";
|
||||
import Match from "preact-router/match";
|
||||
import Router, { getCurrentUrl, route, Route } from "preact-router";
|
||||
import { useTalerActionURL } from "./hooks/useTalerActionURL";
|
||||
import { createHashHistory } from "history";
|
||||
import { DevContextProvider } from "./context/useDevContext";
|
||||
import { BackupPage } from "./popup/BackupPage";
|
||||
import { ProviderPage } from "./popup/ProviderPage.js";
|
||||
|
||||
function main(): void {
|
||||
try {
|
||||
@ -100,7 +100,8 @@ function Application() {
|
||||
<Route path={Pages.dev} component={DeveloperPage} />
|
||||
<Route path={Pages.history} component={HistoryPage} />
|
||||
<Route path={Pages.backup} component={BackupPage} />
|
||||
<Route path={Pages.provider} component={ProviderPage} />
|
||||
<Route path={Pages.provider_detail} component={ProviderDetailPage} />
|
||||
<Route path={Pages.provider_add} component={ProviderAddPage} />
|
||||
<Route path={Pages.transaction} component={TransactionPage} />
|
||||
<Route default component={Redirect} to={Pages.balance} />
|
||||
</Router>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user