[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated (147da7c1 -> e22bdd52)
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated (147da7c1 -> e22bdd52) |
|
Date: |
Tue, 24 Aug 2021 20:16:42 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a change to branch master
in repository wallet-core.
from 147da7c1 removing blocked scope due to
babel/issues/8709#issuecomment-421538014
new 0bc235c6 copy from popup to wallet
new e22bdd52 transaction details new ui
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
packages/taler-util/src/amounts.ts | 9 +-
.../.storybook/preview.js | 2 -
.../src/components/styled/index.tsx | 48 +++++++-
.../src/popup/Balance.stories.tsx | 2 +-
.../src/popup/ProviderDetailPage.tsx | 4 +-
.../src/popupEntryPoint.tsx | 2 -
.../src/{popup => wallet}/Backup.stories.tsx | 2 +-
.../src/{popup => wallet}/BackupPage.tsx | 6 +-
.../src/{popup => wallet}/Balance.stories.tsx | 2 +-
.../src/{popup => wallet}/BalancePage.tsx | 6 +-
.../ProviderAddConfirmProvider.stories.tsx | 2 +-
.../src/{popup => wallet}/ProviderAddPage.tsx | 10 +-
.../ProviderAddSetUrl.stories.tsx | 2 +-
.../{popup => wallet}/ProviderDetail.stories.tsx | 2 +-
.../src/{popup => wallet}/ProviderDetailPage.tsx | 10 +-
.../src/{popup => wallet}/Settings.stories.tsx | 2 +-
.../src/{popup => wallet}/Settings.tsx | 0
.../src/{popup => wallet}/Transaction.stories.tsx | 10 +-
.../src/{popup => wallet}/Transaction.tsx | 121 +++++++++++++--------
.../src/walletEntryPoint.tsx | 29 +++--
20 files changed, 177 insertions(+), 94 deletions(-)
copy packages/taler-wallet-webextension/src/{popup =>
wallet}/Backup.stories.tsx (99%)
copy packages/taler-wallet-webextension/src/{popup => wallet}/BackupPage.tsx
(98%)
copy packages/taler-wallet-webextension/src/{popup =>
wallet}/Balance.stories.tsx (98%)
copy packages/taler-wallet-webextension/src/{popup => wallet}/BalancePage.tsx
(96%)
copy packages/taler-wallet-webextension/src/{popup =>
wallet}/ProviderAddConfirmProvider.stories.tsx (97%)
copy packages/taler-wallet-webextension/src/{popup =>
wallet}/ProviderAddPage.tsx (96%)
copy packages/taler-wallet-webextension/src/{popup =>
wallet}/ProviderAddSetUrl.stories.tsx (98%)
copy packages/taler-wallet-webextension/src/{popup =>
wallet}/ProviderDetail.stories.tsx (99%)
copy packages/taler-wallet-webextension/src/{popup =>
wallet}/ProviderDetailPage.tsx (97%)
copy packages/taler-wallet-webextension/src/{popup =>
wallet}/Settings.stories.tsx (97%)
copy packages/taler-wallet-webextension/src/{popup => wallet}/Settings.tsx
(100%)
rename packages/taler-wallet-webextension/src/{popup =>
wallet}/Transaction.stories.tsx (97%)
rename packages/taler-wallet-webextension/src/{popup =>
wallet}/Transaction.tsx (52%)
diff --git a/packages/taler-util/src/amounts.ts
b/packages/taler-util/src/amounts.ts
index e472de50..f0434be0 100644
--- a/packages/taler-util/src/amounts.ts
+++ b/packages/taler-util/src/amounts.ts
@@ -402,6 +402,12 @@ export class Amounts {
*/
static stringify(a: AmountLike): string {
a = Amounts.jsonifyAmount(a);
+ const s = this.stringifyValue(a)
+
+ return `${a.currency}:${s}`;
+ }
+
+ static stringifyValue(a: AmountJson): string {
const av = a.value + Math.floor(a.fraction / amountFractionalBase);
const af = a.fraction % amountFractionalBase;
let s = av.toString();
@@ -417,7 +423,6 @@ export class Amounts {
n = (n * 10) % amountFractionalBase;
}
}
-
- return `${a.currency}:${s}`;
+ return s
}
}
diff --git a/packages/taler-wallet-webextension/.storybook/preview.js
b/packages/taler-wallet-webextension/.storybook/preview.js
index 920e6b1c..48866346 100644
--- a/packages/taler-wallet-webextension/.storybook/preview.js
+++ b/packages/taler-wallet-webextension/.storybook/preview.js
@@ -158,8 +158,6 @@ export const decorators = [
</style>
<LogoHeader />
<NavBar path={path} devMode={path === '/dev'} />
- <link key="1" rel="stylesheet" type="text/css"
href="/static/style/pure.css" />
- <link key="2" rel="stylesheet" type="text/css"
href="/static/style/wallet.css" />
<Story />
</div>
}
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 66595d84..8f795ce8 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -85,6 +85,7 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
flex-direction: row;
justify-content: space-between;
display: flex;
+ background-color: #f7f7f7;
& button {
margin-right: 8px;
margin-left: 8px;
@@ -199,6 +200,33 @@ export const Button = styled.button`
}
`;
+export const FontIcon = styled.div`
+ font-family: monospace;
+ font-size: x-large;
+ text-align: center;
+ font-weight: bold;
+ /* vertical-align: text-top; */
+`
+export const ButtonBox = styled(Button)`
+ padding: .5em;
+ width: 2em;
+ height: 2em;
+
+ & > ${FontIcon} {
+ width: 1em;
+ height: 1em;
+ display: inline;
+ line-height: 0px;
+ }
+ background-color: transparent;
+
+ border: 1px solid;
+ border-radius: 4px;
+ border-color: black;
+ color: black;
+`
+
+
const ButtonVariant = styled(Button)`
color: white;
border-radius: 4px;
@@ -208,18 +236,35 @@ const ButtonVariant = styled(Button)`
export const ButtonPrimary = styled(ButtonVariant)`
background-color: rgb(66, 184, 221);
`
+export const ButtonBoxPrimary = styled(ButtonBox)`
+ color: rgb(66, 184, 221);
+ border-color: rgb(66, 184, 221);
+`
export const ButtonSuccess = styled(ButtonVariant)`
background-color: rgb(28, 184, 65);
`
+export const ButtonBoxSuccess = styled(ButtonBox)`
+ color: rgb(28, 184, 65);
+ border-color: rgb(28, 184, 65);
+`
export const ButtonWarning = styled(ButtonVariant)`
background-color: rgb(223, 117, 20);
`
+export const ButtonBoxWarning = styled(ButtonBox)`
+ color: rgb(223, 117, 20);
+ border-color: rgb(223, 117, 20);
+`
export const ButtonDestructive = styled(ButtonVariant)`
background-color: rgb(202, 60, 60);
`
+export const ButtonBoxDestructive = styled(ButtonBox)`
+ color: rgb(202, 60, 60);
+ border-color: rgb(202, 60, 60);
+`
+
export const BoldLight = styled.div`
color: gray;
@@ -336,6 +381,7 @@ export const CenteredTextBold = styled(CenteredText)`
font-weight: bold;
color: ${((props: any): any => String(props.color) as any) as any};
`
+
export const Input = styled.div<{ invalid?: boolean }>`
& label {
display: block;
@@ -359,7 +405,7 @@ export const ErrorBox = styled.div`
/* margin: 0.5em; */
padding-left: 1em;
padding-right: 1em;
- width: 100%;
+ /* width: 100%; */
color: #721c24;
background: #f8d7da;
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
index 4a2e1045..a0655d37 100644
--- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
@@ -23,7 +23,7 @@ import { createExample, NullLink } from '../test-utils';
import { BalanceView as TestedComponent } from './BalancePage';
export default {
- title: 'popup/balance/detail',
+ title: 'popup/balance',
component: TestedComponent,
argTypes: {
}
diff --git
a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
index bfc32a8f..83d94ac0 100644
--- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
@@ -58,9 +58,7 @@ export function ProviderView({ info, onDelete, onSync,
onBack, onExtend }: ViewP
const isPaid = info.paymentStatus.type === ProviderPaymentType.Paid ||
info.paymentStatus.type === ProviderPaymentType.TermsChanged
return (
<PopupBox>
- {info.backupProblem || info.lastError ? <header>
- <Error info={info} />
- </header> : undefined }
+ <Error info={info} />
<header>
<h3>{info.name}
<SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3>
<PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60,
60)'}>{isPaid ? 'Paid' : 'Unpaid'}</PaymentStatus>
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index 77c19c15..c72ea85c 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -38,7 +38,6 @@ import {
import { ProviderAddPage } from "./popup/ProviderAddPage";
import { ProviderDetailPage } from "./popup/ProviderDetailPage";
import { SettingsPage } from "./popup/Settings";
-import { TransactionPage } from "./popup/Transaction";
function main(): void {
try {
@@ -114,7 +113,6 @@ function Application() {
route(Pages.backup)
}}
/>
- <Route path={Pages.transaction} component={TransactionPage} />
<Route default component={Redirect} to={Pages.balance} />
</Router>
</div>
diff --git a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
similarity index 99%
copy from packages/taler-wallet-webextension/src/popup/Backup.stories.tsx
copy to packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
index d256f6d9..9a53fefe 100644
--- a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
@@ -25,7 +25,7 @@ import { BackupView as TestedComponent } from './BackupPage';
import { createExample } from '../test-utils';
export default {
- title: 'popup/backup/list',
+ title: 'wallet/backup/list',
component: TestedComponent,
argTypes: {
onRetry: { action: 'onRetry' },
diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
similarity index 98%
copy from packages/taler-wallet-webextension/src/popup/BackupPage.tsx
copy to packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index 695f3aba..8b88432e 100644
--- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -22,7 +22,7 @@ import { Fragment, JSX, VNode, h } from "preact";
import {
BoldLight, ButtonPrimary, ButtonSuccess, Centered,
CenteredText, CenteredTextBold, PopupBox, RowBorderGray,
- SmallText, SmallTextLight
+ SmallText, SmallTextLight, WalletBox
} from "../components/styled";
import { useBackupStatus } from "../hooks/useBackupStatus";
import { Pages } from "../NavigationBar";
@@ -47,7 +47,7 @@ export interface ViewProps {
export function BackupView({ providers, onAddProvider, onSyncAll }:
ViewProps): VNode {
return (
- <PopupBox>
+ <WalletBox>
<section>
{providers.map((provider) => <BackupLayout
status={provider.paymentStatus}
@@ -73,7 +73,7 @@ export function BackupView({ providers, onAddProvider,
onSyncAll }: ViewProps):
<ButtonSuccess onClick={onAddProvider}>Add provider</ButtonSuccess>
</div>
</footer>}
- </PopupBox>
+ </WalletBox>
)
}
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/Balance.stories.tsx
similarity index 98%
copy from packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
copy to packages/taler-wallet-webextension/src/wallet/Balance.stories.tsx
index 4a2e1045..1b145345 100644
--- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Balance.stories.tsx
@@ -23,7 +23,7 @@ import { createExample, NullLink } from '../test-utils';
import { BalanceView as TestedComponent } from './BalancePage';
export default {
- title: 'popup/balance/detail',
+ title: 'wallet/balance',
component: TestedComponent,
argTypes: {
}
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
similarity index 96%
copy from packages/taler-wallet-webextension/src/popup/BalancePage.tsx
copy to packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
index 350d4b86..4846d47f 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
@@ -20,7 +20,7 @@ import {
i18n
} from "@gnu-taler/taler-util";
import { JSX, h } from "preact";
-import { PopupBox, Centered } from "../components/styled/index";
+import { WalletBox, Centered } from "../components/styled/index";
import { BalancesHook, useBalances } from "../hooks/useBalances";
import { PageLink, renderAmount } from "../renderHtml";
@@ -97,7 +97,7 @@ function formatPending(entry: Balance): JSX.Element {
function ShowBalances({ wallet }: { wallet: BalancesResponse }) {
- return <PopupBox>
+ return <WalletBox>
<section>
<Centered>{wallet.balances.map((entry) => {
const av = Amounts.parseOrThrow(entry.available);
@@ -113,5 +113,5 @@ function ShowBalances({ wallet }: { wallet:
BalancesResponse }) {
);
})}</Centered>
</section>
- </PopupBox>
+ </WalletBox>
}
diff --git
a/packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
similarity index 97%
copy from
packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx
copy to
packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
index de1f67b9..d1e76c05 100644
---
a/packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from '../test-utils';
import { ConfirmProviderView as TestedComponent } from './ProviderAddPage';
export default {
- title: 'popup/backup/confirm',
+ title: 'wallet/backup/confirm',
component: TestedComponent,
argTypes: {
onRetry: { action: 'onRetry' },
diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
similarity index 96%
copy from packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
copy to packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index 05061497..2b205ebe 100644
--- a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -4,7 +4,7 @@ import { VNode, h } from "preact";
import { useEffect, useState } from "preact/hooks";
import { Checkbox } from "../components/Checkbox";
import { ErrorMessage } from "../components/ErrorMessage";
-import { Button, ButtonPrimary, Input, LightText, PopupBox, SmallTextLight }
from "../components/styled/index";
+import { Button, ButtonPrimary, Input, LightText, WalletBox, SmallTextLight }
from "../components/styled/index";
import * as wxApi from "../wxApi";
interface Props {
@@ -88,7 +88,7 @@ export function SetUrlView({ initialValue, onCancel,
onVerify, onConfirm, withEr
setName(undefined)
}
}, [value])
- return <PopupBox>
+ return <WalletBox>
<section>
<h1> Add backup provider</h1>
<ErrorMessage title={error && "Could not get provider information"}
description={error} />
@@ -113,7 +113,7 @@ export function SetUrlView({ initialValue, onCancel,
onVerify, onConfirm, withEr
return onConfirm(url, name!).then(r => r ? setError(r) : undefined)
}}><i18n.Translate>Next</i18n.Translate></ButtonPrimary>
</footer>
- </PopupBox>
+ </WalletBox>
}
export interface ConfirmProviderViewProps {
@@ -125,7 +125,7 @@ export interface ConfirmProviderViewProps {
export function ConfirmProviderView({ url, provider, onCancel, onConfirm }:
ConfirmProviderViewProps) {
const [accepted, setAccepted] = useState(false);
- return <PopupBox>
+ return <WalletBox>
<section>
<h1>Review terms of service</h1>
<div>Provider URL: <a href={url} target="_blank">{url}</a></div>
@@ -146,5 +146,5 @@ export function ConfirmProviderView({ url, provider,
onCancel, onConfirm }: Conf
disabled={!accepted}
onClick={onConfirm}><i18n.Translate>Add
provider</i18n.Translate></ButtonPrimary>
</footer>
- </PopupBox>
+ </WalletBox>
}
diff --git
a/packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
similarity index 98%
copy from
packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx
copy to
packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
index 2daf49e0..4890e5e9 100644
--- a/packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from '../test-utils';
import { SetUrlView as TestedComponent } from './ProviderAddPage';
export default {
- title: 'popup/backup/add',
+ title: 'wallet/backup/add',
component: TestedComponent,
argTypes: {
onRetry: { action: 'onRetry' },
diff --git
a/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
similarity index 99%
copy from
packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx
copy to packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
index 4416608f..67ff8344 100644
--- a/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from '../test-utils';
import { ProviderView as TestedComponent } from './ProviderDetailPage';
export default {
- title: 'popup/backup/details',
+ title: 'wallet/backup/details',
component: TestedComponent,
argTypes: {
onRetry: { action: 'onRetry' },
diff --git
a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
similarity index 97%
copy from packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
copy to packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
index bfc32a8f..871e30b7 100644
--- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
@@ -20,7 +20,7 @@ import { ProviderInfo, ProviderPaymentStatus,
ProviderPaymentType } from "@gnu-t
import { format, formatDuration, intervalToDuration } from "date-fns";
import { Fragment, VNode, h } from "preact";
import { ErrorMessage } from "../components/ErrorMessage";
-import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, PopupBox,
SmallTextLight } from "../components/styled";
+import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, WalletBox,
SmallTextLight } from "../components/styled";
import { useProviderStatus } from "../hooks/useProviderStatus";
interface Props {
@@ -57,10 +57,8 @@ export function ProviderView({ info, onDelete, onSync,
onBack, onExtend }: ViewP
const lb = info?.lastSuccessfulBackupTimestamp
const isPaid = info.paymentStatus.type === ProviderPaymentType.Paid ||
info.paymentStatus.type === ProviderPaymentType.TermsChanged
return (
- <PopupBox>
- {info.backupProblem || info.lastError ? <header>
- <Error info={info} />
- </header> : undefined }
+ <WalletBox>
+ <Error info={info} />
<header>
<h3>{info.name}
<SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3>
<PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60,
60)'}>{isPaid ? 'Paid' : 'Unpaid'}</PaymentStatus>
@@ -111,7 +109,7 @@ export function ProviderView({ info, onDelete, onSync,
onBack, onExtend }: ViewP
<ButtonDestructive onClick={onDelete}><i18n.Translate>remove
provider</i18n.Translate></ButtonDestructive>
</div>
</footer>
- </PopupBox>
+ </WalletBox>
)
}
diff --git a/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
similarity index 97%
copy from packages/taler-wallet-webextension/src/popup/Settings.stories.tsx
copy to packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
index 06e33c9d..deb30e55 100644
--- a/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from '../test-utils';
import { SettingsView as TestedComponent } from './Settings';
export default {
- title: 'popup/settings',
+ title: 'wallet/settings',
component: TestedComponent,
argTypes: {
setDeviceName: () => Promise.resolve(),
diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx
b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
similarity index 100%
copy from packages/taler-wallet-webextension/src/popup/Settings.tsx
copy to packages/taler-wallet-webextension/src/wallet/Settings.tsx
diff --git
a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
similarity index 97%
rename from packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx
rename to packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index 65302bab..535509ce 100644
--- a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -30,7 +30,7 @@ import { createExample } from '../test-utils';
import { TransactionView as TestedComponent } from './Transaction';
export default {
- title: 'popup/history/details',
+ title: 'wallet/history/details',
component: TestedComponent,
argTypes: {
onRetry: { action: 'onRetry' },
@@ -40,8 +40,8 @@ export default {
};
const commonTransaction = {
- amountRaw: 'USD:10',
- amountEffective: 'USD:9',
+ amountRaw: 'KUDOS:11',
+ amountEffective: 'KUDOS:9.2',
pending: false,
timestamp: {
t_ms: new Date().getTime()
@@ -62,7 +62,7 @@ const exampleData = {
} as TransactionWithdrawal,
payment: {
...commonTransaction,
- amountEffective: 'USD:11',
+ amountEffective: 'KUDOS:11',
type: TransactionType.Payment,
info: {
contractTermsHash: 'ASDZXCASD',
@@ -147,7 +147,7 @@ export const PaymentError = createExample(TestedComponent, {
export const PaymentWithoutFee = createExample(TestedComponent, {
transaction: {
...exampleData.payment,
- amountRaw: 'USD:11',
+ amountRaw: 'KUDOS:11',
}
});
diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.tsx
b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
similarity index 52%
rename from packages/taler-wallet-webextension/src/popup/Transaction.tsx
rename to packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 117a098b..ad00b3d1 100644
--- a/packages/taler-wallet-webextension/src/popup/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -14,7 +14,7 @@
TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-import { AmountJson, Amounts, i18n, Transaction, TransactionType } from
"@gnu-taler/taler-util";
+import { AmountJson, AmountLike, Amounts, i18n, Transaction, TransactionType }
from "@gnu-taler/taler-util";
import { format } from "date-fns";
import { Fragment, JSX, VNode, h } from "preact";
import { route } from 'preact-router';
@@ -22,7 +22,7 @@ import { useEffect, useState } from "preact/hooks";
import * as wxApi from "../wxApi";
import { Pages } from "../NavigationBar";
import emptyImg from "../../static/img/empty.png"
-import { Button, ButtonDestructive, ButtonPrimary, ListOfProducts, PopupBox,
Row, RowBorderGray, SmallTextLight } from "../components/styled";
+import { Button, ButtonBox, ButtonBoxDestructive, ButtonDestructive,
ButtonPrimary, ExtraLargeText, FontIcon, LargeText, ListOfProducts, PopupBox,
Row, RowBorderGray, SmallTextLight, WalletBox } from "../components/styled";
import { ErrorMessage } from "../components/ErrorMessage";
export function TransactionPage({ tid }: { tid: string; }): JSX.Element {
@@ -73,43 +73,54 @@ export function TransactionView({ transaction, onDelete,
onRetry, onBack }: Wall
return null
}
- function Fee({ value }: { value: AmountJson }) {
- if (Amounts.isZero(value)) return null
- return <span style="font-size: 16px;font-weight: normal;color: gray;">(fee
{Amounts.stringify(value)})</span>
- }
-
- function TransactionTemplate({ upperRight, children }: { upperRight: VNode,
children: VNode[] }) {
- return <PopupBox>
- <header>
- <SmallTextLight>
- {transaction.timestamp.t_ms === "never" ? "never" :
format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
- </SmallTextLight>
- <SmallTextLight>
- {upperRight}
- </SmallTextLight>
- </header>
+ function TransactionTemplate({ children }: { children: VNode[] }) {
+ return <WalletBox>
<section>
<ErrorMessage title={transaction?.error?.hint} />
- {children}
+ <div style={{ textAlign: 'center' }}>
+ {children}
+ </div>
</section>
<footer>
- <Button onClick={onBack}><i18n.Translate> <
back</i18n.Translate></Button>
+ <ButtonBox onClick={onBack}><i18n.Translate>
<FontIcon>←</FontIcon> </i18n.Translate></ButtonBox>
<div>
{transaction?.error ? <ButtonPrimary
onClick={onRetry}><i18n.Translate>retry</i18n.Translate></ButtonPrimary> : null}
- <ButtonDestructive
onClick={onDelete}><i18n.Translate>delete</i18n.Translate></ButtonDestructive>
+ <ButtonBoxDestructive
onClick={onDelete}><i18n.Translate>🗑</i18n.Translate></ButtonBoxDestructive>
</div>
</footer>
- </PopupBox>
+ </WalletBox>
+ }
+ type Kind = 'positive' | 'negative' | 'neutral';
+ function Part({ text, title, kind, big }: { title: string, text: AmountLike,
kind: Kind, big?: boolean }) {
+ const Text = big ? ExtraLargeText : LargeText;
+ return <div style={{ margin: '1em' }}>
+ <SmallTextLight style={{ margin: '.5em' }}>{title}</SmallTextLight>
+ <Text style={{ color: kind == 'positive' ? 'green' : (kind == 'negative'
? 'red' : 'black') }}>
+ {text}
+ </Text>
+ </div>
+ }
+
+ function amountToString(text: AmountLike) {
+ const aj = Amounts.jsonifyAmount(text)
+ const amount = Amounts.stringifyValue(aj)
+ return `${amount} ${aj.currency}`
}
+
if (transaction.type === TransactionType.Withdrawal) {
const fee = Amounts.sub(
Amounts.parseOrThrow(transaction.amountRaw),
Amounts.parseOrThrow(transaction.amountEffective),
).amount
- return <TransactionTemplate upperRight={<Fragment>From
<b>{transaction.exchangeBaseUrl}</b></Fragment>}>
- <h3>Withdraw <Status /></h3>
- <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
+ return <TransactionTemplate>
+ <h2>Withdrawal <Status /></h2>
+ <div>{transaction.timestamp.t_ms === 'never' ? 'never':
format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+ <br />
+ <Part title="Total withdrawn"
text={amountToString(transaction.amountEffective)} kind='positive' />
+ <Part title="Chosen amount" text={amountToString(transaction.amountRaw)}
kind='neutral' />
+ <Part title="Exchange fee" text={amountToString(fee)} kind='negative' />
+ <Part title="Exchange" text={new
URL(transaction.exchangeBaseUrl).hostname} kind='neutral' />
</TransactionTemplate>
}
@@ -123,13 +134,17 @@ export function TransactionView({ transaction, onDelete,
onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountRaw),
).amount
- return <TransactionTemplate upperRight={<Fragment>To
<b>{transaction.info.merchant.name}</b></Fragment>}>
- <h3>Payment <Status /></h3>
- <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
- <span style="font-size:small;
color:gray">#{transaction.info.orderId}</span>
- <p>
- {transaction.info.summary}
- </p>
+ return <TransactionTemplate>
+ <h2>Payment <Status /></h2>
+ <div>{transaction.timestamp.t_ms === 'never' ? 'never':
format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+ <br />
+ <Part big title="Total paid"
text={amountToString(transaction.amountEffective)} kind='negative' />
+ <Part big title="Purchase amount"
text={amountToString(transaction.amountRaw)} kind='neutral' />
+ <Part big title="Fee" text={amountToString(fee)} kind='negative' />
+ <Part title="Merchant" text={transaction.info.merchant.name}
kind='neutral' />
+ <Part title="Purchase" text={transaction.info.summary} kind='neutral' />
+ <Part title="Receipt" text={`#${transaction.info.orderId}`}
kind='neutral' />
+
<div>
{transaction.info.products && transaction.info.products.length > 0 &&
<ListOfProducts>
@@ -153,9 +168,13 @@ export function TransactionView({ transaction, onDelete,
onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountRaw),
Amounts.parseOrThrow(transaction.amountEffective),
).amount
- return <TransactionTemplate upperRight={<Fragment>To
<b>{transaction.targetPaytoUri}</b></Fragment>}>
- <h3>Deposit <Status /></h3>
- <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
+ return <TransactionTemplate>
+ <h2>Deposit <Status /></h2>
+ <div>{transaction.timestamp.t_ms === 'never' ? 'never':
format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+ <br />
+ <Part big title="Total deposit"
text={amountToString(transaction.amountEffective)} kind='negative' />
+ <Part big title="Purchase amount"
text={amountToString(transaction.amountRaw)} kind='neutral' />
+ <Part big title="Fee" text={amountToString(fee)} kind='negative' />
</TransactionTemplate>
}
@@ -164,9 +183,13 @@ export function TransactionView({ transaction, onDelete,
onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountRaw),
Amounts.parseOrThrow(transaction.amountEffective),
).amount
- return <TransactionTemplate upperRight={<Fragment>From
<b>{transaction.exchangeBaseUrl}</b></Fragment>}>
- <h3>Refresh <Status /></h3>
- <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
+ return <TransactionTemplate>
+ <h2>Refresh <Status /></h2>
+ <div>{transaction.timestamp.t_ms === 'never' ? 'never':
format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+ <br />
+ <Part big title="Total refresh"
text={amountToString(transaction.amountEffective)} kind='negative' />
+ <Part big title="Refresh amount"
text={amountToString(transaction.amountRaw)} kind='neutral' />
+ <Part big title="Fee" text={amountToString(fee)} kind='negative' />
</TransactionTemplate>
}
@@ -175,9 +198,13 @@ export function TransactionView({ transaction, onDelete,
onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountRaw),
Amounts.parseOrThrow(transaction.amountEffective),
).amount
- return <TransactionTemplate upperRight={<Fragment>From
<b>{transaction.merchantBaseUrl}</b></Fragment>}>
- <h3>Tip <Status /></h3>
- <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
+ return <TransactionTemplate>
+ <h2>Tip <Status /></h2>
+ <div>{transaction.timestamp.t_ms === 'never' ? 'never':
format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+ <br />
+ <Part big title="Total tip"
text={amountToString(transaction.amountEffective)} kind='positive' />
+ <Part big title="Received amount"
text={amountToString(transaction.amountRaw)} kind='neutral' />
+ <Part big title="Fee" text={amountToString(fee)} kind='negative' />
</TransactionTemplate>
}
@@ -186,11 +213,17 @@ export function TransactionView({ transaction, onDelete,
onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountRaw),
Amounts.parseOrThrow(transaction.amountEffective),
).amount
- return <TransactionTemplate upperRight={<Fragment>From
<b>{transaction.info.merchant.name}</b></Fragment>}>
- <h3>Refund <Status /></h3>
- <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
+ return <TransactionTemplate>
+ <h2>Refund <Status /></h2>
+ <div>{transaction.timestamp.t_ms === 'never' ? 'never':
format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+ <br />
+ <Part big title="Total refund"
text={amountToString(transaction.amountEffective)} kind='positive' />
+ <Part big title="Refund amount"
text={amountToString(transaction.amountRaw)} kind='neutral' />
+ <Part big title="Fee" text={amountToString(fee)} kind='negative' />
+ <Part title="Merchant" text={transaction.info.merchant.name}
kind='neutral' />
+ <Part title="Purchase" text={transaction.info.summary} kind='neutral' />
+ <Part title="Receipt" text={`#${transaction.info.orderId}`}
kind='neutral' />
- <span style="font-size:small;
color:gray">#{transaction.info.orderId}</span>
<p>
{transaction.info.summary}
</p>
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index 61df45e7..aa007786 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -20,24 +20,28 @@
* @author Florian Dold <dold@taler.net>
*/
-import { Fragment, render, h } from "preact";
import { setupI18n } from "@gnu-taler/taler-util";
-import { strings } from "./i18n/strings";
import { createHashHistory } from 'history';
-
-import { WelcomePage } from "./wallet/Welcome";
-import { HistoryPage } from "./wallet/History";
-import { WithdrawPage } from "./cta/Withdraw";
+import { Fragment, h, render } from "preact";
+import Router, { route, Route } from "preact-router";
+import { useEffect } from "preact/hooks";
+import { LogoHeader } from "./components/LogoHeader";
+import { DevContextProvider } from "./context/devContext";
import { PayPage } from "./cta/Pay";
import { RefundPage } from "./cta/Refund";
import { TipPage } from './cta/Tip';
-import Router, { route, Route } from "preact-router";
-import { DevContextProvider } from "./context/devContext";
-import { LogoHeader } from "./components/LogoHeader";
-import { useEffect } from "preact/hooks";
+import { WithdrawPage } from "./cta/Withdraw";
+import { strings } from "./i18n/strings";
import {
Pages, WalletNavBar
} from "./NavigationBar";
+import { BalancePage } from "./wallet/BalancePage";
+import { HistoryPage } from "./wallet/History";
+import { SettingsPage } from "./wallet/Settings";
+import { TransactionPage } from './wallet/Transaction';
+import { WelcomePage } from "./wallet/Welcome";
+import { BackupPage } from './wallet/BackupPage';
+
function main(): void {
try {
@@ -76,7 +80,10 @@ function Application() {
<Route path={Pages.welcome} component={withLogoAndNavBar(WelcomePage)}
/>
<Route path={Pages.history} component={withLogoAndNavBar(HistoryPage)}
/>
- <Route path={Pages.transaction}
component={withLogoAndNavBar(HistoryPage)} />
+ <Route path={Pages.transaction}
component={withLogoAndNavBar(TransactionPage)} />
+ <Route path={Pages.balance} component={withLogoAndNavBar(BalancePage)}
/>
+ <Route path={Pages.settings}
component={withLogoAndNavBar(SettingsPage)} />
+ <Route path={Pages.backup} component={withLogoAndNavBar(BackupPage)} />
<Route path={Pages.reset_required} component={() => <div>no yet
implemented</div>} />
<Route path={Pages.payback} component={() => <div>no yet
implemented</div>} />
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
- [taler-wallet-core] branch master updated (147da7c1 -> e22bdd52),
gnunet <=