manage account instead of add account

5 files changed, 87 insertions, 77 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts
index 77661fe15..85896da26 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts
@@ -24,7 +24,7 @@ import {
 } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { wxApi } from "../../wxApi.js";
-import { AddAccountPage } from "../AddAccount/index.js";
+import { ManageAccountPage } from "../ManageAccount/index.js";
 import { useComponentState } from "./state.js";
 import {
   AmountOrCurrencyErrorView,
@@ -62,7 +62,7 @@ export namespace State {
   }
 
   export interface AddingAccount {
-    status: "adding-account";
+    status: "manage-account";
     error: undefined;
     currency: string;
     onAccountAdded: (p: string) => void;
@@ -94,7 +94,7 @@ export namespace State {
     error: undefined;
     currency: string;
 
-    selectedAccount: PaytoUri | undefined;
+    currentAccount: PaytoUri;
     totalFee: AmountJson;
     totalToDeposit: AmountJson;
 
@@ -112,7 +112,7 @@ const viewMapping: StateViewMap<State> = {
   "amount-or-currency-error": AmountOrCurrencyErrorView,
   "no-enough-balance": NoEnoughBalanceView,
   "no-accounts": NoAccountToDepositView,
-  "adding-account": AddAccountPage,
+  "manage-account": ManageAccountPage,
   ready: ReadyView,
 };
 
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
index b3a377040..fe692e80d 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
@@ -50,9 +50,7 @@ export function useComponentState(
   // const [accountIdx, setAccountIdx] = useState<number>(0);
   const [amount, setAmount] = useState(initialValue);
 
-  const [selectedAccount, setSelectedAccount] = useState<
-    PaytoUri | undefined
-  >();
+  const [selectedAccount, setSelectedAccount] = useState<PaytoUri>();
 
   const [fee, setFee] = useState<DepositGroupFees | undefined>(undefined);
   const [addingAccount, setAddingAccount] = useState(false);
@@ -82,7 +80,7 @@ export function useComponentState(
 
   if (addingAccount) {
     return {
-      status: "adding-account",
+      status: "manage-account",
       error: undefined,
       currency,
       onAccountAdded: (p: string) => {
@@ -92,6 +90,7 @@ export function useComponentState(
       },
       onCancel: () => {
         setAddingAccount(false);
+        hook.retry();
       },
     };
   }
@@ -122,13 +121,12 @@ export function useComponentState(
       },
     };
   }
+  const firstAccount = accounts[0].uri
+  const currentAccount = !selectedAccount ? firstAccount : selectedAccount;
 
   const accountMap = createLabelsForBankAccount(accounts);
-  accountMap[""] = "Select one account...";
 
   async function updateAccountFromList(accountStr: string): Promise<void> {
-    // const newSelected = !accountMap[accountStr] ? undefined : accountMap[accountStr];
-    // if (!newSelected) return;
     const uri = !accountStr ? undefined : parsePaytoUri(accountStr);
     if (uri && parsedAmount) {
       try {
@@ -136,7 +134,6 @@ export function useComponentState(
         setSelectedAccount(uri);
         setFee(result);
       } catch (e) {
-        console.error(e)
         setSelectedAccount(uri);
         setFee(undefined);
       }
@@ -145,13 +142,12 @@ export function useComponentState(
 
   async function updateAmount(numStr: string): Promise<void> {
     const parsed = Amounts.parse(`${currency}:${numStr}`);
-    if (parsed && selectedAccount) {
+    if (parsed) {
       try {
-        const result = await getFeeForAmount(selectedAccount, parsed, api);
+        const result = await getFeeForAmount(currentAccount, parsed, api);
         setAmount(numStr);
         setFee(result);
       } catch (e) {
-        console.error(e)
         setAmount(numStr);
         setFee(undefined);
       }
@@ -179,15 +175,14 @@ export function useComponentState(
 
   const unableToDeposit =
     !parsedAmount || //no amount specified
-    selectedAccount === undefined || //no account selected
     Amounts.isZero(totalToDeposit) || //deposit may be zero because of fee
     fee === undefined || //no fee calculated yet
     amountError !== undefined; //amount field may be invalid
 
   async function doSend(): Promise<void> {
-    if (!selectedAccount || !parsedAmount || !currency) return;
+    if (!parsedAmount || !currency) return;
 
-    const depositPaytoUri = `payto://${selectedAccount.targetType}/${selectedAccount.targetPath}`;
+    const depositPaytoUri = `payto://${currentAccount.targetType}/${currentAccount.targetPath}`;
     const amount = Amounts.stringify(parsedAmount);
     await api.wallet.call(WalletApiOperation.CreateDepositGroup, {
       amount, depositPaytoUri
@@ -211,10 +206,10 @@ export function useComponentState(
     },
     account: {
       list: accountMap,
-      value: !selectedAccount ? "" : stringifyPaytoUri(selectedAccount),
+      value: stringifyPaytoUri(currentAccount),
       onChange: updateAccountFromList,
     },
-    selectedAccount,
+    currentAccount,
     cancelHandler: {
       onClick: async () => {
         onCancel(currency);
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
index ed5945c06..64b2c91a7 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
@@ -55,6 +55,13 @@ export const WithNoAccountForIBAN = createExample(ReadyView, {
       null;
     },
   },
+  currentAccount: {
+    isKnown: true,
+    targetType: "iban",
+    iban: "ABCD1234",
+    params: {},
+    targetPath: "/ABCD1234",
+  },
   currency: "USD",
   amount: {
     onInput: async () => {
@@ -83,6 +90,13 @@ export const WithIBANAccountTypeSelected = createExample(ReadyView, {
       null;
     },
   },
+  currentAccount: {
+    isKnown: true,
+    targetType: "iban",
+    iban: "ABCD1234",
+    params: {},
+    targetPath: "/ABCD1234",
+  },
   currency: "USD",
   amount: {
     onInput: async () => {
@@ -111,6 +125,13 @@ export const NewBitcoinAccountTypeSelected = createExample(ReadyView, {
       null;
     },
   },
+  currentAccount: {
+    isKnown: true,
+    targetType: "iban",
+    iban: "ABCD1234",
+    params: {},
+    targetPath: "/ABCD1234",
+  },
   onAddAccount: {},
   currency: "USD",
   amount: {
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
index 62097c3e4..4a648312e 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
@@ -172,7 +172,7 @@ describe("DepositPage states", () => {
       if (r.status !== "ready") expect.fail();
       expect(r.cancelHandler.onClick).not.undefined;
       expect(r.currency).eq(currency);
-      expect(r.account.value).eq("");
+      expect(r.account.value).eq(stringifyPaytoUri(ibanPayto.uri));
       expect(r.amount.value).eq("0");
       expect(r.depositHandler.onClick).undefined;
     }
@@ -195,7 +195,7 @@ describe("DepositPage states", () => {
       }],
     })
     handler.addWalletCallResponse(WalletApiOperation.ListKnownBankAccounts, undefined, {
-      accounts: [ibanPayto]
+      accounts: [talerBankPayto, ibanPayto]
     });
     handler.addWalletCallResponse(WalletApiOperation.GetFeeForDeposit, undefined, withoutFee())
     handler.addWalletCallResponse(WalletApiOperation.GetFeeForDeposit, undefined, withoutFee())
@@ -221,7 +221,7 @@ describe("DepositPage states", () => {
       if (r.status !== "ready") expect.fail();
       expect(r.cancelHandler.onClick).not.undefined;
       expect(r.currency).eq(currency);
-      expect(r.account.value).eq("");
+      expect(r.account.value).eq(stringifyPaytoUri(talerBankPayto.uri));
       expect(r.amount.value).eq("0");
       expect(r.depositHandler.onClick).undefined;
       expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
@@ -328,7 +328,7 @@ describe("DepositPage states", () => {
       }],
     })
     handler.addWalletCallResponse(WalletApiOperation.ListKnownBankAccounts, undefined, {
-      accounts: [ibanPayto]
+      accounts: [talerBankPayto, ibanPayto]
     });
     handler.addWalletCallResponse(WalletApiOperation.GetFeeForDeposit, undefined, withSomeFee())
     handler.addWalletCallResponse(WalletApiOperation.GetFeeForDeposit, undefined, withSomeFee())
@@ -353,7 +353,7 @@ describe("DepositPage states", () => {
       if (r.status !== "ready") expect.fail();
       expect(r.cancelHandler.onClick).not.undefined;
       expect(r.currency).eq(currency);
-      expect(r.account.value).eq("");
+      expect(r.account.value).eq(stringifyPaytoUri(talerBankPayto.uri));
       expect(r.amount.value).eq("0");
       expect(r.depositHandler.onClick).undefined;
       expect(r.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
index ddb23c9bb..e864c8413 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
@@ -160,61 +160,55 @@ export function ReadyView(state: State.Ready): VNode {
             variant="text"
             style={{ marginLeft: "auto" }}
           >
-            <i18n.Translate>Add another account</i18n.Translate>
+            <i18n.Translate>Manage accounts</i18n.Translate>
           </Button>
         </div>
 
-        {state.selectedAccount && (
-          <Fragment>
-            <p>
-              <AccountDetails account={state.selectedAccount} />
-            </p>
-            <InputWithLabel invalid={!!state.amount.error}>
-              <label>
-                <i18n.Translate>Amount</i18n.Translate>
-              </label>
-              <div>
-                <span>{state.currency}</span>
-                <input
-                  type="number"
-                  value={state.amount.value}
-                  onInput={(e) => state.amount.onInput(e.currentTarget.value)}
-                />
-              </div>
-              {state.amount.error && (
-                <ErrorText>{state.amount.error}</ErrorText>
-              )}
-            </InputWithLabel>
-
-            <InputWithLabel>
-              <label>
-                <i18n.Translate>Deposit fee</i18n.Translate>
-              </label>
-              <div>
-                <span>{state.currency}</span>
-                <input
-                  type="number"
-                  disabled
-                  value={Amounts.stringifyValue(state.totalFee)}
-                />
-              </div>
-            </InputWithLabel>
-
-            <InputWithLabel>
-              <label>
-                <i18n.Translate>Total deposit</i18n.Translate>
-              </label>
-              <div>
-                <span>{state.currency}</span>
-                <input
-                  type="number"
-                  disabled
-                  value={Amounts.stringifyValue(state.totalToDeposit)}
-                />
-              </div>
-            </InputWithLabel>
-          </Fragment>
-        )}
+        <p>
+          <AccountDetails account={state.currentAccount} />
+        </p>
+        <InputWithLabel invalid={!!state.amount.error}>
+          <label>
+            <i18n.Translate>Amount</i18n.Translate>
+          </label>
+          <div>
+            <span>{state.currency}</span>
+            <input
+              type="number"
+              value={state.amount.value}
+              onInput={(e) => state.amount.onInput(e.currentTarget.value)}
+            />
+          </div>
+          {state.amount.error && <ErrorText>{state.amount.error}</ErrorText>}
+        </InputWithLabel>
+
+        <InputWithLabel>
+          <label>
+            <i18n.Translate>Deposit fee</i18n.Translate>
+          </label>
+          <div>
+            <span>{state.currency}</span>
+            <input
+              type="number"
+              disabled
+              value={Amounts.stringifyValue(state.totalFee)}
+            />
+          </div>
+        </InputWithLabel>
+
+        <InputWithLabel>
+          <label>
+            <i18n.Translate>Total deposit</i18n.Translate>
+          </label>
+          <div>
+            <span>{state.currency}</span>
+            <input
+              type="number"
+              disabled
+              value={Amounts.stringifyValue(state.totalToDeposit)}
+            />
+          </div>
+        </InputWithLabel>
       </section>
       <footer>
         <Button