aboutsummaryrefslogtreecommitdiff
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/taler-wallet-webextension/build-fast-with-linaria.mjs2
-rw-r--r--packages/taler-wallet-webextension/src/components/styled/index.tsx2
-rw-r--r--packages/taler-wallet-webextension/src/stories.tsx40
-rw-r--r--packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx4
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx5
5 files changed, 30 insertions, 23 deletions
diff --git a/packages/taler-wallet-webextension/build-fast-with-linaria.mjs b/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
index 9cc776e02..37f6349e2 100644
--- a/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
+++ b/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
@@ -52,7 +52,7 @@ export const buildConfig = {
minify: false,
loader: {
'.svg': 'text',
- '.png': 'file',
+ '.png': 'dataurl',
},
target: [
'es6'
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index f01e97eea..73223859a 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -137,7 +137,6 @@ 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;
@@ -375,7 +374,6 @@ export const CenteredDialog = styled.div`
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
padding: 10px;
- background-color: #f5f5f5;
display: flex;
justify-content: space-between;
}
diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx
index 9b988b0d8..531425bc9 100644
--- a/packages/taler-wallet-webextension/src/stories.tsx
+++ b/packages/taler-wallet-webextension/src/stories.tsx
@@ -22,7 +22,6 @@ import { setupI18n } from "@gnu-taler/taler-util";
import { styled } from "@linaria/react";
import {
ComponentChild,
- ComponentProps,
Fragment,
FunctionComponent,
h,
@@ -60,6 +59,7 @@ const SideBar = styled.div`
height: calc(100vh - 20px);
overflow-y: visible;
overflow-x: hidden;
+ scroll-behavior: smooth;
& > {
ol {
padding: 4px;
@@ -86,9 +86,10 @@ const SideBar = styled.div`
const Content = styled.div`
width: 100%;
+ padding: 20px;
`;
-function parseExampleImport(group: string, im: any) {
+function parseExampleImport(group: string, im: any): ComponentItem {
const component = im.default.title;
return {
name: component,
@@ -113,6 +114,11 @@ const allExamples = Object.entries({ popup, wallet, mui }).map(
}),
);
+interface ComponentItem {
+ name: string;
+ examples: ExampleItem[];
+}
+
interface ExampleItem {
group: string;
component: string;
@@ -127,7 +133,7 @@ function findByGroupComponentName(
group: string,
component: string,
name: string,
-) {
+): ExampleItem | undefined {
const gl = allExamples.filter((e) => e.title === group);
if (gl.length === 0) {
return undefined;
@@ -163,7 +169,7 @@ function ExampleList({
name: string;
examples: ExampleItem[];
}[];
-}) {
+}): VNode {
const [open, setOpen] = useState(true);
return (
<ol>
@@ -173,17 +179,15 @@ function ExampleList({
<li>
<dl>
<dt>{k.name}</dt>
- {k.examples.map((r) => (
- <dd>
- <a
- href={`#${encodeURIComponent(r.group)}-${encodeURIComponent(
- r.component,
- )}-${encodeURIComponent(r.name)}`}
- >
- {r.name}
- </a>
- </dd>
- ))}
+ {k.examples.map((r) => {
+ const e = encodeURIComponent;
+ const eId = `${e(r.group)}-${e(r.component)}-${e(r.name)}`;
+ return (
+ <dd id={eId}>
+ <a href={`#${eId}`}>{r.name}</a>
+ </dd>
+ );
+ })}
</dl>
</li>
))}
@@ -219,7 +223,7 @@ function ErrorReport({
}: {
children: ComponentChild;
selected: ExampleItem | undefined;
-}) {
+}): VNode {
const [error] = useErrorBoundary();
if (error) {
return (
@@ -261,13 +265,13 @@ function getSelectionFromLocationHash(): ExampleItem | undefined {
);
}
-function Application() {
+function Application(): VNode {
const initialSelection = getSelectionFromLocationHash();
const [selected, updateSelected] = useState<ExampleItem | undefined>(
initialSelection,
);
- function updateSelectedFromHashChange({ newURL, oldURL }: any) {
+ function updateSelectedFromHashChange({ newURL, oldURL }: any): void {
const selected = getSelectionFromLocationHash();
updateSelected(selected);
}
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
index 915bde01c..ddd0926be 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
@@ -19,7 +19,7 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { Amounts, Balance, parsePaytoUri } from "@gnu-taler/taler-util";
+import { Balance, parsePaytoUri } from "@gnu-taler/taler-util";
import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
import { createExample } from "../test-utils.js";
import { View as TestedComponent } from "./DepositPage.js";
@@ -46,6 +46,7 @@ export const WithEmptyAccountList = createExample(TestedComponent, {
available: "USD:10",
} as Balance,
],
+ currency: "USD",
onCalculateFee: alwaysReturnFeeToOne,
});
@@ -56,5 +57,6 @@ export const WithSomeBankAccounts = createExample(TestedComponent, {
available: "USD:10",
} as Balance,
],
+ currency: "USD",
onCalculateFee: alwaysReturnFeeToOne,
});
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index f81487c86..b4dfb6ce0 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -32,7 +32,6 @@ import {
TransactionWithdrawal,
WithdrawalType,
} from "@gnu-taler/taler-util";
-import { ComponentChildren, h } from "preact";
import { DevContextProviderForTesting } from "../context/devContext.js";
import {
createExample,
@@ -239,6 +238,8 @@ export const PaymentPending = createExample(TestedComponent, {
transaction: { ...exampleData.payment, pending: true },
});
+import beer from "../../static-dev/beer.png";
+
export const PaymentWithProducts = createExample(TestedComponent, {
transaction: {
...exampleData.payment,
@@ -263,11 +264,13 @@ export const PaymentWithProducts = createExample(TestedComponent, {
description: "beer",
unit: "pint",
quantity: 15,
+ image: beer,
},
{
description: "beer",
unit: "pint",
quantity: 15,
+ image: beer,
},
],
},