rendring pending transation item

packages/taler-wallet-webextension/.gitignore

@@ -1,3 +1,4 @@
 extension/
 /storybook-static/
 /.linaria-cache/
+/lib

packages/taler-wallet-webextension/src/components/TransactionItem.tsx

@@ -7,7 +7,7 @@ import imageRefresh from '../../static/img/ri-refresh-line.svg';
 import imageRefund from '../../static/img/ri-refund-2-line.svg';
 import imageShoppingCart from '../../static/img/ri-shopping-cart-line.svg';
 import { Pages } from "../NavigationBar";
-import { Column, ExtraLargeText, HistoryRow, SmallTextLight, LargeText } from './styled/index';
+import { Column, ExtraLargeText, HistoryRow, SmallLightText, LargeText, LightText } from './styled/index';
 
 export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean }): JSX.Element {
   const tx = props.tx;
@@ -103,11 +103,11 @@ function TransactionLayout(props: TransactionLayoutProps): JSX.Element {
       <Column>
         <LargeText>
           <span>{props.title}</span>
-          {props.pending ? (
-            <span style={{ color: "darkblue" }}> (Pending)</span>
-          ) : null}
         </LargeText>
-        <SmallTextLight>{dateStr}</SmallTextLight>
+        {props.pending &&
+          <LightText style={{marginTop: 5, marginBottom: 5}}>Waiting for confirmation</LightText>
+        }
+        <SmallLightText>{dateStr}</SmallLightText>
       </Column>
       <TransactionAmount
         pending={props.pending}
@@ -152,6 +152,7 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element {
   }
   return (
     <Column style={{
+      textAlign: 'center',
       color:
         props.pending ? "gray" :
           (sign === '+' ? 'darkgreen' :
@@ -163,6 +164,7 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element {
         {amount}
       </ExtraLargeText>
       {props.multiCurrency && <div>{currency}</div>}
+      {props.pending && <div>PENDING</div>}
     </Column>
   );
 }

packages/taler-wallet-webextension/src/components/styled/index.tsx

@@ -366,7 +366,7 @@ export const ExtraLargeText = styled.div`
   font-size: x-large; 
 `
 
-export const SmallTextLight = styled(SmallText)`
+export const SmallLightText = styled(SmallText)`
   color: gray;
 `
 
@@ -375,7 +375,7 @@ export const CenteredText = styled.div`
   text-align: center;
 `
 
-export const CenteredTextBold = styled(CenteredText)`
+export const CenteredBoldText = styled(CenteredText)`
   white-space: nowrap;
   text-align: center;
   font-weight: bold;

packages/taler-wallet-webextension/src/popup/BackupPage.tsx

@@ -21,8 +21,8 @@ import { differenceInMonths, formatDuration, intervalToDuration } from "date-fns
 import { Fragment, JSX, VNode, h } from "preact";
 import {
   BoldLight, ButtonPrimary, ButtonSuccess, Centered,
-  CenteredText, CenteredTextBold, PopupBox, RowBorderGray,
+  CenteredText, CenteredBoldText, PopupBox, RowBorderGray,
-  SmallText, SmallTextLight
+  SmallText, SmallLightText
 } from "../components/styled";
 import { useBackupStatus } from "../hooks/useBackupStatus";
 import { Pages } from "../NavigationBar";
@@ -99,7 +99,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element {
         <a href={Pages.provider_detail.replace(':pid', encodeURIComponent(props.id))}><span>{props.title}</span></a>
 
         {dateStr && <SmallText style={{marginTop: 5}}>Last synced: {dateStr}</SmallText>}
-        {!dateStr && <SmallTextLight style={{marginTop: 5}}>Not synced</SmallTextLight>}
+        {!dateStr && <SmallLightText style={{marginTop: 5}}>Not synced</SmallLightText>}
       </div>
       <div>
         {props.status?.type === 'paid' ?
@@ -114,7 +114,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element {
 function ExpirationText({ until }: { until: Timestamp }) {
   return <Fragment>
     <CenteredText> Expires in </CenteredText>
-    <CenteredTextBold {...({ color: colorByTimeToExpire(until) })}> {daysUntil(until)} </CenteredTextBold>
+    <CenteredBoldText {...({ color: colorByTimeToExpire(until) })}> {daysUntil(until)} </CenteredBoldText>
   </Fragment>
 }
 

packages/taler-wallet-webextension/src/popup/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, PopupBox, SmallLightText } from "../components/styled/index";
 import * as wxApi from "../wxApi";
 
 interface Props {
@@ -129,7 +129,7 @@ export function ConfirmProviderView({ url, provider, onCancel, onConfirm }: Conf
     <section>
       <h1>Review terms of service</h1>
       <div>Provider URL: <a href={url} target="_blank">{url}</a></div>
-      <SmallTextLight>Please review and accept this provider's terms of service</SmallTextLight>
+      <SmallLightText>Please review and accept this provider's terms of service</SmallLightText>
       <h2>1. Pricing</h2>
       <p>
         {Amounts.isZero(provider.annual_fee) ? 'free of charge' : `${provider.annual_fee} per year of service`}

packages/taler-wallet-webextension/src/popup/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, PopupBox, SmallLightText } from "../components/styled";
 import { useProviderStatus } from "../hooks/useProviderStatus";
 
 interface Props {
@@ -60,7 +60,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP
     <PopupBox>
       <Error info={info} />
       <header>
-        <h3>{info.name} <SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3>
+        <h3>{info.name} <SmallLightText>{info.syncProviderBaseUrl}</SmallLightText></h3>
         <PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60, 60)'}>{isPaid ? 'Paid' : 'Unpaid'}</PaymentStatus>
       </header>
       <section>

packages/taler-wallet-webextension/src/wallet/BackupPage.tsx

@@ -21,8 +21,8 @@ import { differenceInMonths, formatDuration, intervalToDuration } from "date-fns
 import { Fragment, JSX, VNode, h } from "preact";
 import {
   BoldLight, ButtonPrimary, ButtonSuccess, Centered,
-  CenteredText, CenteredTextBold, PopupBox, RowBorderGray,
+  CenteredText, CenteredBoldText, PopupBox, RowBorderGray,
-  SmallText, SmallTextLight, WalletBox
+  SmallText, SmallLightText, WalletBox
 } from "../components/styled";
 import { useBackupStatus } from "../hooks/useBackupStatus";
 import { Pages } from "../NavigationBar";
@@ -99,7 +99,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element {
         <a href={Pages.provider_detail.replace(':pid', encodeURIComponent(props.id))}><span>{props.title}</span></a>
 
         {dateStr && <SmallText style={{marginTop: 5}}>Last synced: {dateStr}</SmallText>}
-        {!dateStr && <SmallTextLight style={{marginTop: 5}}>Not synced</SmallTextLight>}
+        {!dateStr && <SmallLightText style={{marginTop: 5}}>Not synced</SmallLightText>}
       </div>
       <div>
         {props.status?.type === 'paid' ?
@@ -114,7 +114,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element {
 function ExpirationText({ until }: { until: Timestamp }) {
   return <Fragment>
     <CenteredText> Expires in </CenteredText>
-    <CenteredTextBold {...({ color: colorByTimeToExpire(until) })}> {daysUntil(until)} </CenteredTextBold>
+    <CenteredBoldText {...({ color: colorByTimeToExpire(until) })}> {daysUntil(until)} </CenteredBoldText>
   </Fragment>
 }
 

packages/taler-wallet-webextension/src/wallet/History.stories.tsx

@@ -130,6 +130,19 @@ export const One = createExample(TestedComponent, {
   }]
 });
 
+export const OnePending = createExample(TestedComponent, {
+  list: [{...exampleData.withdraw, 
+    pending: true
+  }],
+  balances: [{
+    available: 'USD:10',
+    pendingIncoming: 'USD:0',
+    pendingOutgoing: 'USD:0',
+    hasPendingTransactions: false,
+    requiresUserInput: false,
+  }]
+});
+
 export const Several = createExample(TestedComponent, {
   list: [
     exampleData.withdraw,
@@ -176,114 +189,3 @@ export const SeveralWithTwoCurrencies = createExample(TestedComponent, {
   }]
 });
 
-// export const WithdrawPending = createExample(TestedComponent, {
-//   transaction: { ...exampleData.withdraw, pending: true },
-// });
-
-
-// export const Payment = createExample(TestedComponent, {
-//   transaction: exampleData.payment
-// });
-
-// export const PaymentWithoutFee = createExample(TestedComponent, {
-//   transaction: {
-//     ...exampleData.payment,
-//     amountRaw: 'USD:11',
-
-//   }
-// });
-
-// export const PaymentPending = createExample(TestedComponent, {
-//   transaction: { ...exampleData.payment, pending: true },
-// });
-
-// export const PaymentWithProducts = createExample(TestedComponent, {
-//   transaction: {
-//     ...exampleData.payment,
-//     info: {
-//       ...exampleData.payment.info,
-//       summary: 'this order has 5 products',
-//       products: [{
-//         description: 't-shirt',
-//         unit: 'shirts',
-//         quantity: 1,
-//       }, {
-//         description: 't-shirt',
-//         unit: 'shirts',
-//         quantity: 1,
-//       }, {
-//         description: 'e-book',
-//       }, {
-//         description: 'beer',
-//         unit: 'pint',
-//         quantity: 15,
-//       }, {
-//         description: 'beer',
-//         unit: 'pint',
-//         quantity: 15,
-//       }]
-//     }
-//   } as TransactionPayment,
-// });
-
-// export const PaymentWithLongSummary = createExample(TestedComponent, {
-//   transaction: {
-//     ...exampleData.payment,
-//     info: {
-//       ...exampleData.payment.info,
-//       summary: 'this is a very long summary that will occupy severals lines, this is a very long summary that will occupy severals lines, this is a very long summary that will occupy severals lines, this is a very long summary that will occupy severals lines, ',
-//       products: [{
-//         description: 'an xl sized t-shirt with some drawings on it, color pink',
-//         unit: 'shirts',
-//         quantity: 1,
-//       }, {
-//         description: 'beer',
-//         unit: 'pint',
-//         quantity: 15,
-//       }]
-//     }
-//   } as TransactionPayment,
-// });
-
-
-// export const Deposit = createExample(TestedComponent, {
-//   transaction: exampleData.deposit
-// });
-
-// export const DepositPending = createExample(TestedComponent, {
-//   transaction: { ...exampleData.deposit, pending: true }
-// });
-
-// export const Refresh = createExample(TestedComponent, {
-//   transaction: exampleData.refresh
-// });
-
-// export const Tip = createExample(TestedComponent, {
-//   transaction: exampleData.tip
-// });
-
-// export const TipPending = createExample(TestedComponent, {
-//   transaction: { ...exampleData.tip, pending: true }
-// });
-
-// export const Refund = createExample(TestedComponent, {
-//   transaction: exampleData.refund
-// });
-
-// export const RefundPending = createExample(TestedComponent, {
-//   transaction: { ...exampleData.refund, pending: true }
-// });
-
-// export const RefundWithProducts = createExample(TestedComponent, {
-//   transaction: {
-//     ...exampleData.refund,
-//     info: {
-//       ...exampleData.refund.info,
-//       products: [{
-//         description: 't-shirt',
-//       }, {
-//         description: 'beer',
-//       }]
-//     }
-//   } as TransactionRefund,
-// });

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, WalletBox, SmallTextLight } from "../components/styled/index";
+import { Button, ButtonPrimary, Input, LightText, WalletBox, SmallLightText } from "../components/styled/index";
 import * as wxApi from "../wxApi";
 
 interface Props {
@@ -129,7 +129,7 @@ export function ConfirmProviderView({ url, provider, onCancel, onConfirm }: Conf
     <section>
       <h1>Review terms of service</h1>
       <div>Provider URL: <a href={url} target="_blank">{url}</a></div>
-      <SmallTextLight>Please review and accept this provider's terms of service</SmallTextLight>
+      <SmallLightText>Please review and accept this provider's terms of service</SmallLightText>
       <h2>1. Pricing</h2>
       <p>
         {Amounts.isZero(provider.annual_fee) ? 'free of charge' : `${provider.annual_fee} per year of service`}

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, WalletBox, SmallTextLight } from "../components/styled";
+import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, WalletBox, SmallLightText } from "../components/styled";
 import { useProviderStatus } from "../hooks/useProviderStatus";
 
 interface Props {
@@ -60,7 +60,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP
     <WalletBox>
       <Error info={info} />
       <header>
-        <h3>{info.name} <SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3>
+        <h3>{info.name} <SmallLightText>{info.syncProviderBaseUrl}</SmallLightText></h3>
         <PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60, 60)'}>{isPaid ? 'Paid' : 'Unpaid'}</PaymentStatus>
       </header>
       <section>

packages/taler-wallet-webextension/src/wallet/Transaction.tsx

@@ -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, ButtonBox, ButtonBoxDestructive, ButtonDestructive, ButtonPrimary, ExtraLargeText, FontIcon, LargeText, ListOfProducts, PopupBox, Row, RowBorderGray, SmallTextLight, WalletBox } from "../components/styled";
+import { Button, ButtonBox, ButtonBoxDestructive, ButtonDestructive, ButtonPrimary, ExtraLargeText, FontIcon, LargeText, ListOfProducts, PopupBox, Row, RowBorderGray, SmallLightText, WalletBox } from "../components/styled";
 import { ErrorMessage } from "../components/ErrorMessage";
 
 export function TransactionPage({ tid }: { tid: string; }): JSX.Element {
@@ -94,7 +94,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
   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>
+      <SmallLightText style={{ margin: '.5em' }}>{title}</SmallLightText>
       <Text style={{ color: kind == 'positive' ? 'green' : (kind == 'negative' ? 'red' : 'black') }}>
         {text}
       </Text>
@@ -153,7 +153,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
                 <img src={p.image ? p.image : emptyImg} />
               </a>
               <div>
-                {p.quantity && p.quantity > 0 && <SmallTextLight>x {p.quantity} {p.unit}</SmallTextLight>}
+                {p.quantity && p.quantity > 0 && <SmallLightText>x {p.quantity} {p.unit}</SmallLightText>}
                 <div>{p.description}</div>
               </div>
             </RowBorderGray>)}
@@ -235,7 +235,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
                 <img src={p.image ? p.image : emptyImg} />
               </a>
               <div>
-                {p.quantity && p.quantity > 0 && <SmallTextLight>x {p.quantity} {p.unit}</SmallTextLight>}
+                {p.quantity && p.quantity > 0 && <SmallLightText>x {p.quantity} {p.unit}</SmallLightText>}
                 <div>{p.description}</div>
               </div>
             </RowBorderGray>)}