[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 01/03: some fixes
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 01/03: some fixes |
|
Date: |
Fri, 04 Jun 2021 17:42:46 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit b023bb502edf8d62f51257aff2105f3c33713b42
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Fri Jun 4 10:46:47 2021 -0300
some fixes
how the id is shown
refactoring some settings to use hooks
---
.../src/pages/popup.stories.tsx | 4 +-
.../taler-wallet-webextension/src/pages/popup.tsx | 69 +++++++++++++++++-----
.../src/pages/welcome.tsx | 26 ++++----
3 files changed, 71 insertions(+), 28 deletions(-)
diff --git a/packages/taler-wallet-webextension/src/pages/popup.stories.tsx
b/packages/taler-wallet-webextension/src/pages/popup.stories.tsx
index e9202fbe..5e1d0c3a 100644
--- a/packages/taler-wallet-webextension/src/pages/popup.stories.tsx
+++ b/packages/taler-wallet-webextension/src/pages/popup.stories.tsx
@@ -72,7 +72,7 @@ const exampleData = {
summary: 'the summary',
fulfillmentMessage: '',
},
- proposalId: '#proposalId',
+ proposalId: '1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0',
status: PaymentStatus.Accepted,
} as TransactionPayment,
deposit: {
@@ -94,7 +94,7 @@ const exampleData = {
refund: {
...commonTransaction,
type: TransactionType.Refund,
- refundedTransactionId: '#refundId',
+ refundedTransactionId:
'payment:1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0',
info: {
contractTermsHash: 'ASDZXCASD',
merchant: {
diff --git a/packages/taler-wallet-webextension/src/pages/popup.tsx
b/packages/taler-wallet-webextension/src/pages/popup.tsx
index 4693c94c..ea496ac0 100644
--- a/packages/taler-wallet-webextension/src/pages/popup.tsx
+++ b/packages/taler-wallet-webextension/src/pages/popup.tsx
@@ -46,7 +46,7 @@ import { useEffect, useState } from "preact/hooks";
import * as i18n from "../i18n";
import { PageLink, renderAmount } from "../renderHtml";
import * as wxApi from "../wxApi";
-import { PermissionsCheckbox } from "./welcome";
+import { PermissionsCheckbox, useExtendedPermissions, Diagnostics } from
"./welcome";
interface TabProps {
target: string;
@@ -452,7 +452,7 @@ export function WalletTransactionView({ transaction,
onDelete, onBack }: WalletT
function Pending() {
if (!transaction?.pending) return null
- return <span style={{fontWeight:'normal', fontSize:16, color:
'gray'}}>(pending...)</span>
+ return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'gray'
}}>(pending...)</span>
}
function CommonFields() {
@@ -503,7 +503,7 @@ export function WalletTransactionView({ transaction,
onDelete, onBack }: WalletT
return (
<div style={{ display: 'flex', flexDirection: 'column', flex: 1,
minHeight: '20rem' }} >
<section>
- <h1>Payment ({transaction.proposalId}) <Pending /></h1>
+ <h1>Payment ({transaction.proposalId.substring(0, 10)}...) <Pending
/></h1>
<p>
To <b>{transaction.info.merchant.name}</b>
</p>
@@ -519,7 +519,7 @@ export function WalletTransactionView({ transaction,
onDelete, onBack }: WalletT
{transaction.info.products && transaction.info.products.length > 0
&&
<tr>
<td>Products</td>
- <td><ol style={{margin:0, textAlign:'left'}}>
+ <td><ol style={{ margin: 0, textAlign: 'left' }}>
{transaction.info.products.map(p =>
<li>{p.description}</li>
)}</ol></td>
@@ -584,11 +584,12 @@ export function WalletTransactionView({ transaction,
onDelete, onBack }: WalletT
);
}
+ const TRANSACTION_FROM_REFUND = /[a-z]*:([\w]{10}).*/
if (transaction.type === TransactionType.Refund) {
return (
<div style={{ display: 'flex', flexDirection: 'column', flex: 1,
minHeight: '20rem' }} >
<section>
- <h1>Refund ({transaction.refundedTransactionId}) <Pending /></h1>
+ <h1>Refund
({TRANSACTION_FROM_REFUND.exec(transaction.refundedTransactionId)![1]}...)
<Pending /></h1>
<p>
From <b>{transaction.info.merchant.name}</b>
</p>
@@ -633,6 +634,8 @@ function WalletTransaction({ tid }: { tid: string }):
JSX.Element {
const ts = res.transactions.filter(t => t.transactionId === tid)
if (ts.length === 1) {
setTransaction(ts[0]);
+ } else {
+ route(Pages.history)
}
};
fetchData();
@@ -640,20 +643,55 @@ function WalletTransaction({ tid }: { tid: string }):
JSX.Element {
return <WalletTransactionView
transaction={transaction}
- onDelete={() => wxApi.deleteTransaction(tid)}
+ onDelete={() => wxApi.deleteTransaction(tid).then(_ => history.go(-1))}
onBack={() => { history.go(-1) }}
/>
}
-class WalletSettings extends Component<any, any> {
- render(): JSX.Element {
- return (
- <div>
- <h2>Permissions</h2>
- <PermissionsCheckbox />
- </div>
- );
- }
+function WalletSettings() {
+ const [permissionsEnabled, togglePermissions] = useExtendedPermissions()
+ return (
+ <div>
+ <h2>Permissions</h2>
+ <PermissionsCheckbox enabled={permissionsEnabled}
onToggle={togglePermissions} />
+ {/*
+ <h2>Developer mode</h2>
+ <DebugCheckbox enabled={permissionsEnabled} onToggle={togglePermissions}
/>
+ */}
+ </div>
+ );
+}
+
+
+export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean,
onToggle: () => void }): JSX.Element {
+ return (
+ <div>
+ <input
+ checked={enabled}
+ onClick={onToggle}
+ type="checkbox"
+ id="checkbox-perm"
+ style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }}
+ />
+ <label
+ htmlFor="checkbox-perm"
+ style={{ marginLeft: "0.5em", fontWeight: "bold" }}
+ >
+ Automatically open wallet based on page content
+ </label>
+ <span
+ style={{
+ color: "#383838",
+ fontSize: "smaller",
+ display: "block",
+ marginLeft: "2em",
+ }}
+ >
+ (Enabling this option below will make using the wallet faster, but
+ requires more permissions from your browser.)
+ </span>
+ </div>
+ );
}
function reload(): void {
@@ -685,6 +723,7 @@ function WalletDebug(props: any): JSX.Element {
<br />
<button onClick={confirmReset}>reset</button>
<button onClick={reload}>reload chrome extension</button>
+ <Diagnostics />
</div>
);
}
diff --git a/packages/taler-wallet-webextension/src/pages/welcome.tsx
b/packages/taler-wallet-webextension/src/pages/welcome.tsx
index cdc4913e..80814318 100644
--- a/packages/taler-wallet-webextension/src/pages/welcome.tsx
+++ b/packages/taler-wallet-webextension/src/pages/welcome.tsx
@@ -29,7 +29,7 @@ import { extendedPermissions } from "../permissions";
import { WalletDiagnostics } from "@gnu-taler/taler-util";
import { Fragment, JSX } from "preact/jsx-runtime";
-function Diagnostics(): JSX.Element | null {
+export function Diagnostics(): JSX.Element | null {
const [timedOut, setTimedOut] = useState(false);
const [diagnostics, setDiagnostics] = useState<WalletDiagnostics |
undefined>(
undefined,
@@ -128,29 +128,32 @@ async function handleExtendedPerm(isEnabled: boolean):
Promise<boolean> {
return nextVal ?? false
}
-export function PermissionsCheckbox(): JSX.Element {
- const [extendedPermissionsEnabled, setExtendedPermissionsEnabled] =
useState(false);
+export function useExtendedPermissions(): [boolean, () => void] {
+ const [enabled, setEnabled] = useState(false);
- const togglePermission = () => {
- setExtendedPermissionsEnabled(v => !v)
- handleExtendedPerm(extendedPermissionsEnabled).then( result => {
- setExtendedPermissionsEnabled(result)
+ const toggle = () => {
+ setEnabled(v => !v)
+ handleExtendedPerm(enabled).then( result => {
+ setEnabled(result)
} )
}
useEffect(() => {
async function getExtendedPermValue(): Promise<void> {
const res = await wxApi.getExtendedPermissions();
- setExtendedPermissionsEnabled(res.newValue);
+ setEnabled(res.newValue);
}
getExtendedPermValue();
},[]);
+ return [enabled, toggle]
+}
+export function PermissionsCheckbox({enabled, onToggle}: {enabled:boolean,
onToggle: () => void}): JSX.Element {
return (
<div>
<input
- checked={extendedPermissionsEnabled}
- onClick={togglePermission}
+ checked={enabled}
+ onClick={onToggle}
type="checkbox"
id="checkbox-perm"
style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }}
@@ -177,12 +180,13 @@ export function PermissionsCheckbox(): JSX.Element {
}
export function Welcome(): JSX.Element {
+ const [permissionsEnabled, togglePermissions] = useExtendedPermissions()
return (
<>
<p>Thank you for installing the wallet.</p>
<Diagnostics />
<h2>Permissions</h2>
- <PermissionsCheckbox />
+ <PermissionsCheckbox enabled={permissionsEnabled}
onToggle={togglePermissions}/>
<h2>Next Steps</h2>
<a href="https://demo.taler.net/"; style={{ display: "block" }}>
Try the demo ยป
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.