dd53: Android has different order of items on top

1 files changed, 82 insertions, 68 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index b27bf3f51..3d1ab15b6 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -20,7 +20,7 @@ import {
   NotificationType,
   ScopeType,
   Transaction,
-  WalletBalance
+  WalletBalance,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
@@ -62,14 +62,15 @@ export function HistoryPage({
   const [balanceIndex, setBalanceIndex] = useState<number>(0);
   const [settings] = useSettings();
   const state = useAsyncAsHook(async () => {
-    const b = await api.wallet.call(WalletApiOperation.GetBalances, {})
-    const balance = b.balances.length > 0 ? b.balances[balanceIndex] : undefined
+    const b = await api.wallet.call(WalletApiOperation.GetBalances, {});
+    const balance =
+      b.balances.length > 0 ? b.balances[balanceIndex] : undefined;
     const tx = await api.wallet.call(WalletApiOperation.GetTransactions, {
       scopeInfo: balance?.scopeInfo,
       sort: "descending",
       includeRefreshes: settings.showRefeshTransactions,
-    })
-    return { b, tx }
+    });
+    return { b, tx };
   }, [balanceIndex]);
 
   useEffect(() => {
@@ -108,7 +109,7 @@ export function HistoryPage({
   return (
     <HistoryView
       balanceIndex={balanceIndex}
-      changeBalanceIndex={b => setBalanceIndex(b)}
+      changeBalanceIndex={(b) => setBalanceIndex(b)}
       balances={state.response.b.balances}
       goToWalletManualWithdraw={goToWalletManualWithdraw}
       goToWalletDeposit={goToWalletDeposit}
@@ -125,7 +126,7 @@ export function HistoryView({
   goToWalletManualWithdraw,
   goToWalletDeposit,
 }: {
-  balanceIndex: number,
+  balanceIndex: number;
   changeBalanceIndex: (s: number) => void;
   goToWalletDeposit: (currency: string) => Promise<void>;
   goToWalletManualWithdraw: (currency?: string) => Promise<void>;
@@ -141,86 +142,45 @@ export function HistoryView({
     : undefined;
 
   const datesWithTransaction: string[] = [];
-  const byDate = transactions.reduce((rv, x) => {
-    const startDay =
-      x.timestamp.t_s === "never" ? 0 : startOfDay(x.timestamp.t_s * 1000).getTime();
-    if (startDay) {
-      if (!rv[startDay]) {
-        rv[startDay] = [];
-        datesWithTransaction.push(String(startDay));
+  const byDate = transactions.reduce(
+    (rv, x) => {
+      const startDay =
+        x.timestamp.t_s === "never"
+          ? 0
+          : startOfDay(x.timestamp.t_s * 1000).getTime();
+      if (startDay) {
+        if (!rv[startDay]) {
+          rv[startDay] = [];
+          datesWithTransaction.push(String(startDay));
+        }
+        rv[startDay].push(x);
       }
-      rv[startDay].push(x);
-    }
 
-    return rv;
-  }, {} as { [x: string]: Transaction[] });
+      return rv;
+    },
+    {} as { [x: string]: Transaction[] },
+  );
 
   return (
     <Fragment>
       <section>
-        <SubTitle style={{marginBottom: 0}}>
-          <i18n.Translate>Balance</i18n.Translate>
-        </SubTitle>
         <div
           style={{
             display: "flex",
             flexWrap: "wrap",
             alignItems: "center",
             justifyContent: "space-between",
+            marginRight: 20,
           }}
         >
-          <div
-            style={{
-              width: "fit-content",
-              display: "flex",
-            }}
-          >
-            {balances.length === 1 ? (
-              <CenteredText style={{ fontSize: "x-large", margin: 8 }}>
-                {balance.scopeInfo.currency}
-              </CenteredText>
-            ) : (
-              <NiceSelect style={{ flexDirection: "column" }}>
-                <select
-                  style={{
-                    fontSize: "x-large",
-                  }}
-                  value={balanceIndex}
-                  onChange={(e) => {
-                    changeBalanceIndex(Number.parseInt(e.currentTarget.value, 10));
-                  }}
-                >
-                  {balances.map((entry, index) => {
-                    return (
-                      <option value={index} key={entry.scopeInfo.currency}>
-                        {entry.scopeInfo.currency}
-                      </option>
-                    );
-                  })}
-                </select>
-                <div style={{ fontSize: "small", color: "grey" }}>
-                  {balance.scopeInfo.type === ScopeType.Exchange || balance.scopeInfo.type === ScopeType.Auditor ? balance.scopeInfo.url : undefined}
-                </div>
-              </NiceSelect>
-            )}
-            {available && (
-              <CenteredBoldText
-                style={{
-                  display: "inline-block",
-                  fontSize: "x-large",
-                  margin: 8,
-                }}
-              >
-                {Amounts.stringifyValue(available, 2)}
-              </CenteredBoldText>
-            )}
-          </div>
           <div>
             <Button
               tooltip="Transfer money to the wallet"
               startIcon={DownloadIcon}
               variant="contained"
-              onClick={() => goToWalletManualWithdraw(balance.scopeInfo.currency)}
+              onClick={() =>
+                goToWalletManualWithdraw(balance.scopeInfo.currency)
+              }
             >
               <i18n.Translate>Receive</i18n.Translate>
             </Button>
@@ -236,6 +196,60 @@ export function HistoryView({
               </Button>
             )}
           </div>
+          <div style={{display:"flex", flexDirection:"column"}}>
+            <h3 style={{marginBottom: 0}}>Balance</h3>
+            <div
+              style={{
+                width: "fit-content",
+                display: "flex",
+              }}
+            >
+              {balances.length === 1 ? (
+                <CenteredText style={{ fontSize: "x-large", margin: 8 }}>
+                  {balance.scopeInfo.currency}
+                </CenteredText>
+              ) : (
+                <NiceSelect style={{ flexDirection: "column" }}>
+                  <select
+                    style={{
+                      fontSize: "x-large",
+                    }}
+                    value={balanceIndex}
+                    onChange={(e) => {
+                      changeBalanceIndex(
+                        Number.parseInt(e.currentTarget.value, 10),
+                      );
+                    }}
+                  >
+                    {balances.map((entry, index) => {
+                      return (
+                        <option value={index} key={entry.scopeInfo.currency}>
+                          {entry.scopeInfo.currency}
+                        </option>
+                      );
+                    })}
+                  </select>
+                  <div style={{ fontSize: "small", color: "grey" }}>
+                    {balance.scopeInfo.type === ScopeType.Exchange ||
+                    balance.scopeInfo.type === ScopeType.Auditor
+                      ? balance.scopeInfo.url
+                      : undefined}
+                  </div>
+                </NiceSelect>
+              )}
+              {available && (
+                <CenteredBoldText
+                  style={{
+                    display: "inline-block",
+                    fontSize: "x-large",
+                    margin: 8,
+                  }}
+                >
+                  {Amounts.stringifyValue(available, 2)}
+                </CenteredBoldText>
+              )}
+            </div>
+          </div>
         </div>
       </section>
       {datesWithTransaction.length === 0 ? (