-restructure a bit the main page

1 files changed, 50 insertions, 41 deletions

diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
index 3a4bfd6..54a5ebd 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -200,9 +200,9 @@ function parseAmount(val: string): Amount {
  * exception if not found.
  */
 function getUsername(backendState: BackendStateTypeOpt): string {
-  if (typeof backendState === 'undefined') 
+  if (typeof backendState === 'undefined')
     throw Error('Username can\'t be found in a undefined backend state.')
-  
+
   return backendState.username;
 }
 
@@ -216,9 +216,9 @@ async function postToBackend(
   backendState: BackendStateTypeOpt,
   body: string
 ): Promise<any> {
-  if (typeof backendState === 'undefined') 
+  if (typeof backendState === 'undefined')
     throw Error('Credentials can\'t be found in a undefined backend state.')
-  
+
   const { username, password } = backendState;
   const headers = prepareHeaders(username, password);
   // Backend URL must have been stored _with_ a final slash.
@@ -708,9 +708,9 @@ async function loginCall(
    * whether the credentials are valid.  */
   pageStateSetter((prevState) => ({ ...prevState, isLoggedIn: true }));
   let baseUrl = getRootPath();
-  if (!baseUrl.endsWith('/')) 
+  if (!baseUrl.endsWith('/'))
     baseUrl += '/';
-  
+
   backendStateSetter((prevState) => ({
     ...prevState,
     url: baseUrl,
@@ -744,9 +744,9 @@ async function registrationCall(
    * is not empty, then the concatenation made by URL()
    * drops the last path element.
    */
-  if (!baseUrl.endsWith('/')) 
+  if (!baseUrl.endsWith('/'))
     baseUrl += '/'
-  
+
   const headers = new Headers();
   headers.append(
     'Content-Type',
@@ -795,9 +795,9 @@ async function registrationCall(
 
 function Currency(): VNode {
   const { data, error } = useSWR(`${getRootPath()}integration-api/config`, fetcher);
-  if (typeof error !== 'undefined') 
+  if (typeof error !== 'undefined')
     return <b>error: currency could not be retrieved</b>;
-  
+
   if (typeof data === 'undefined') return <Fragment>"..."</Fragment>;
   console.log('found bank config', data);
   return data.currency;
@@ -854,9 +854,9 @@ function BankFrame(Props: any): VNode {
     ['Survey', '__DEMO_SITE_SURVEY_URL__'],
   ];
   const demo_sites = [];
-  for (const i in DEMO_SITES) 
+  for (const i in DEMO_SITES)
     demo_sites.push(<a href={DEMO_SITES[i][1]}>{DEMO_SITES[i][0]}</a>)
-  
+
   return (
     <Fragment>
       <header class="demobar" style="display: flex; flex-direction: row; justify-content: space-between;">
@@ -1180,15 +1180,15 @@ function TalerWithdrawalQRCode(Props: any): VNode {
   }
 
   // data didn't arrive yet and wallet didn't communicate:
-  if (typeof data === 'undefined') 
+  if (typeof data === 'undefined')
     return <p>{i18n`Waiting the bank to create the operaion...`}</p>
-  
+
 
   /**
    * Wallet didn't communicate withdrawal details yet:
    */
   console.log('withdrawal status', data);
-  if (data.aborted) 
+  if (data.aborted)
     pageStateSetter((prevState: PageStateType) => {
       const {
         withdrawalOutcome,
@@ -1202,7 +1202,7 @@ function TalerWithdrawalQRCode(Props: any): VNode {
         error: i18n`This withdrawal was aborted!`
       };
     })
-  
+
 
   if (!data.selection_done) {
     setTimeout(() => mutate(), 1000); // check again after 1 second.
@@ -1536,9 +1536,9 @@ function Account(Props: any): VNode {
    */
   const [txPageNumber, setTxPageNumber] = useTransactionPageNumber()
   const txsPages = []
-  for (let i = 0; i <= txPageNumber; i++) 
+  for (let i = 0; i <= txPageNumber; i++)
     txsPages.push(<Transactions accountLabel={accountLabel} pageNumber={i} />)
-  
+
   if (typeof error !== 'undefined') {
     console.log('account error', error);
     /**
@@ -1598,7 +1598,7 @@ function Account(Props: any): VNode {
    * such state is usually successful, as errors should
    * have been reported earlier.
    */
-  if (transferOutcome) 
+  if (transferOutcome)
     return <BankFrame>
       <p>{transferOutcome}</p>
       <button onClick={() => {
@@ -1613,12 +1613,12 @@ function Account(Props: any): VNode {
         {i18n`Close wire transfer`}
       </button>
     </BankFrame>
-  
+
 
   /**
    * Withdrawal reached a final state: show it.
    */
-  if (withdrawalOutcome) 
+  if (withdrawalOutcome)
     return <BankFrame>
       <p>{withdrawalOutcome}</p>
       <button onClick={() => {
@@ -1633,7 +1633,7 @@ function Account(Props: any): VNode {
         {i18n`Close Taler withdrawal`}
       </button>
     </BankFrame>
-  
+
 
   /**
    * This block shows the withdrawal QR code.
@@ -1661,38 +1661,47 @@ function Account(Props: any): VNode {
     );
   }
   const balance = parseAmount(data.balance.amount)
-  if (tryManualTransfer) 
+  if (tryManualTransfer)
     return (
       <BankFrame>
         <CurrencyContext.Provider value={balance.currency}>
           <PaytoWireTransfer backendState={backendState} />
         </CurrencyContext.Provider></BankFrame>);
-  
+
   return (<BankFrame>
     <div>
       <h1 class="nav">
         <Translate>Welcome, {accountLabel} ({getIbanFromPayto(data.paytoUri)})!</Translate>
       </h1>
     </div>
-    <section id="menu">
-      <p>{i18n`Bank account balance:`} <br />
-        {data.balance.credit_debit_indicator == 'debit' ? (<b>-</b>) : null}
-        <b>{`${balance.value} ${balance.currency}`}</b></p>
+    <section id="assets">
+      <div class="asset-summary">
+      <h2>{i18n`Assets`}</h2>
+      { data.balance.credit_debit_indicator == "debit" ? (<b>-</b>) : null }
+      <div class="large amount"><span class="value">{`${balance.value}`}</span>&nbsp;<span class="currency">{`${balance.currency}`}</span></div>
+      </div>
     </section>
+    <section id="payments">
+      <div class="payments">
+      <h2>{i18n`Payments`}</h2>
+    {/* FIXME: turn into button! */}
     <CurrencyContext.Provider value={balance.currency}>
       {Props.children}
       <TalerWithdrawal
         backendState={backendState}
         pageStateSetter={pageStateSetter} />
     </CurrencyContext.Provider>
+        {/* FIXME: turn into button!? */}
+        <p><a href="#" onClick={() =>
+          pageStateSetter((prevState: PageStateType) =>
+	    ({...prevState, tryManualTransfer: true}))
+	}>{i18n`credit other bank account`}</a></p>
+      </div>
+    </section>
     <section id="main">
       <article>
         <h2>{i18n`Latest transactions:`}</h2>
         <Transactions pageNumber="0" accountLabel={accountLabel} />
-        <p><a href="#" onClick={() =>
-          pageStateSetter((prevState: PageStateType) =>
-            ({ ...prevState, tryManualTransfer: true }))
-        }>{i18n`Transfer money manually`}</a></p>
       </article>
     </section>
   </BankFrame>);
@@ -1715,9 +1724,9 @@ function SWRWithCredentials(props: any): VNode {
         fetcher: (url) =>
           fetch(backendUrl + url || '', { headers }).then(
             (r) => {
-              if (!r.ok) 
+              if (!r.ok)
                 throw { status: r.status, json: r.json() };
-              
+
               return r.json()
             }
           ),
@@ -1734,9 +1743,9 @@ function SWRWithoutCredentials(Props: any): VNode {
         fetcher: (url) =>
           fetch(baseUrl + url || '').then(
             (r) => {
-              if (!r.ok) 
+              if (!r.ok)
                 throw { status: r.status, json: r.json() };
-              
+
               return r.json()
             }
           ),
@@ -1826,7 +1835,7 @@ export function BankHome(): VNode {
   const setTxPageNumber = useTransactionPageNumber()[1];
   const i18n = useTranslator();
 
-  if (pageState.showPublicHistories) 
+  if (pageState.showPublicHistories)
     return (<SWRWithoutCredentials baseUrl={getRootPath()}>
       <PageContext.Provider value={[pageState, pageStateSetter]}>
         <BankFrame>
@@ -1840,12 +1849,12 @@ export function BankHome(): VNode {
         </BankFrame>
       </PageContext.Provider>
     </SWRWithoutCredentials>);
-  
+
   if (pageState.tryRegister) {
     // @ts-expect-error Global variable unknown to ts
     console.log('allow registrations?', __LIBEUFIN_UI_ALLOW_REGISTRATIONS__)
     // @ts-expect-error Global variable unknown to ts
-    if (__LIBEUFIN_UI_ALLOW_REGISTRATIONS__) 
+    if (__LIBEUFIN_UI_ALLOW_REGISTRATIONS__)
       return (
         <PageContext.Provider value={[pageState, pageStateSetter]}>
           <BankFrame>
@@ -1853,7 +1862,7 @@ export function BankHome(): VNode {
           </BankFrame>
         </PageContext.Provider>
       );
-    
+
     return (
       <PageContext.Provider value={[pageState, pageStateSetter]}>
         <BankFrame>
@@ -1890,7 +1899,7 @@ export function BankHome(): VNode {
    * bank did.)  FIXME: currency needed at startup too.  */
   const regMsg = function () {
     // @ts-expect-error Global variable unknown to ts
-    if (__LIBEUFIN_UI_ALLOW_REGISTRATIONS__) 
+    if (__LIBEUFIN_UI_ALLOW_REGISTRATIONS__)
       return (<Fragment>
         <p><Translate>If you are a new customer please&nbsp;
           <a href="#" onClick={() => {