some changes:

 - simplify design to reuse more components (from wallet instead of popup)
 - simplify hooks (useAsyncAsHook)
 - updateNotification from backend now filter events by type
 - new balance design proposed by Belen
 - more information when the withdrawal is in process
 - manual withdrawal implementation
 - some bugs killed

1 files changed, 42 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index c9a3f47cb..a25e2ca80 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -61,6 +61,7 @@ const exampleData = {
     exchangeBaseUrl: "http://exchange.taler",
     withdrawalDetails: {
       confirmed: false,
+      reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
       exchangePaytoUris: ["payto://x-taler-bank/bank/account"],
       type: WithdrawalType.ManualTransfer,
     },
@@ -134,10 +135,49 @@ export const WithdrawError = createExample(TestedComponent, {
   },
 });
 
-export const WithdrawPending = createExample(TestedComponent, {
-  transaction: { ...exampleData.withdraw, pending: true },
+export const WithdrawPendingManual = createExample(TestedComponent, {
+  transaction: {
+    ...exampleData.withdraw,
+    withdrawalDetails: {
+      type: WithdrawalType.ManualTransfer,
+      exchangePaytoUris: ["payto://iban/asdasdasd"],
+      reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
+    },
+    pending: true,
+  },
 });
 
+export const WithdrawPendingTalerBankUnconfirmed = createExample(
+  TestedComponent,
+  {
+    transaction: {
+      ...exampleData.withdraw,
+      withdrawalDetails: {
+        type: WithdrawalType.TalerBankIntegrationApi,
+        confirmed: false,
+        reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
+        bankConfirmationUrl: "http://bank.demo.taler.net",
+      },
+      pending: true,
+    },
+  },
+);
+
+export const WithdrawPendingTalerBankConfirmed = createExample(
+  TestedComponent,
+  {
+    transaction: {
+      ...exampleData.withdraw,
+      withdrawalDetails: {
+        type: WithdrawalType.TalerBankIntegrationApi,
+        confirmed: true,
+        reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
+      },
+      pending: true,
+    },
+  },
+);
+
 export const Payment = createExample(TestedComponent, {
   transaction: exampleData.payment,
 });