Merge pull request #1394 from LedgerHQ/bugfix/LIVE-3867-fix-cosmos-ba…

…lance-summary-banner Bugfix / LL-3887 - Fix glitch with cosmos and tron account balance summary banner scrollview
LedgerHQ · Sep 28, 2022 · 2da52a7 · 2da52a7
2 parents ba7ede0 + 62c2d62
commit 2da52a7
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 101 deletions.
diff --git a/apps/ledger-live-mobile/src/families/cosmos/AccountBalanceSummaryFooter.tsx b/apps/ledger-live-mobile/src/families/cosmos/AccountBalanceSummaryFooter.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import { ScrollView } from "react-native";
 import { useTranslation } from "react-i18next";
 import { getCryptoCurrencyById } from "@ledgerhq/live-common/currencies/index";
 import { getAccountUnit } from "@ledgerhq/live-common/account/helpers";
@@ -30,65 +30,66 @@ function AccountBalanceSummaryFooter({ account }: Props) {
     (infoName: InfoName) => () => setInfoName(infoName),
     [],
   );
+
   return (
     (delegatedBalance.gt(0) || unbondingBalance.gt(0)) && (
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        style={[
-          styles.root,
-          {
-            paddingHorizontal: 16,
-          },
-        ]}
-      >
+      <>
         <InfoModal
           isOpened={!!infoName}
           onClose={onCloseModal}
           data={infoName ? info[infoName] : []}
         />
-
-        <InfoItem
-          title={t("account.availableBalance")}
-          onPress={onPressInfoCreator("available")}
-          value={
-            <CurrencyUnitValue
-              unit={unit}
-              value={spendableBalance}
-              disableRounding
-            />
-          }
-          isLast={!delegatedBalance.gt(0) && !unbondingBalance.gt(0)}
-        />
-        {delegatedBalance.gt(0) && (
-          <InfoItem
-            title={t("account.delegatedAssets")}
-            onPress={onPressInfoCreator("delegated")}
-            value={
-              <CurrencyUnitValue
-                unit={unit}
-                value={delegatedBalance}
-                disableRounding
-              />
-            }
-            isLast={!unbondingBalance.gt(0)}
-          />
-        )}
-        {unbondingBalance.gt(0) && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={[
+            {
+              paddingHorizontal: 16,
+            },
+          ]}
+        >
           <InfoItem
-            title={t("account.undelegating")}
-            onPress={onPressInfoCreator("undelegating")}
+            title={t("account.availableBalance")}
+            onPress={onPressInfoCreator("available")}
             value={
               <CurrencyUnitValue
                 unit={unit}
-                value={unbondingBalance}
+                value={spendableBalance}
                 disableRounding
               />
             }
-            isLast={true}
+            isLast={!delegatedBalance.gt(0) && !unbondingBalance.gt(0)}
           />
-        )}
-      </ScrollView>
+          {delegatedBalance.gt(0) && (
+            <InfoItem
+              title={t("account.delegatedAssets")}
+              onPress={onPressInfoCreator("delegated")}
+              value={
+                <CurrencyUnitValue
+                  unit={unit}
+                  value={delegatedBalance}
+                  disableRounding
+                />
+              }
+              isLast={!unbondingBalance.gt(0)}
+            />
+          )}
+          {unbondingBalance.gt(0) && (
+            <InfoItem
+              title={t("account.undelegating")}
+              onPress={onPressInfoCreator("undelegating")}
+              value={
+                <CurrencyUnitValue
+                  unit={unit}
+                  value={unbondingBalance}
+                  disableRounding
+                />
+              }
+              isLast={true}
+            />
+          )}
+        </ScrollView>
+      </>
     )
   );
 }
@@ -97,13 +98,6 @@ export default function AccountBalanceFooter({ account }: Props) {
   if (!account.cosmosResources || account.balance.lte(0)) return null;
   return <AccountBalanceSummaryFooter account={account} />;
 }
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: "row",
-    overflow: "visible",
-  },
-});
 
 function useInfo(): Record<InfoName, ModalInfo[]> {
   const { t } = useTranslation();

diff --git a/apps/ledger-live-mobile/src/families/tron/AccountBalanceSummaryFooter.tsx b/apps/ledger-live-mobile/src/families/tron/AccountBalanceSummaryFooter.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import { ScrollView } from "react-native";
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { getCryptoCurrencyById } from "@ledgerhq/live-common/currencies/index";
@@ -46,66 +46,59 @@ function AccountBalanceSummaryFooter({ account }: Props) {
     [],
   );
   return (
-    <ScrollView
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      style={[styles.root]}
-      contentContainerStyle={{
-        paddingHorizontal: 16,
-      }}
-    >
+    <>
       <InfoModal
         isOpened={!!infoName}
         onClose={onCloseModal}
         data={infoName ? infoCandidates[infoName] : []}
       />
-
-      <InfoItem
-        title={t("account.availableBalance")}
-        onPress={onPressInfoCreator("available")}
-        value={
-          <CurrencyUnitValue unit={unit} value={account.spendableBalance} />
-        }
-      />
-      <InfoItem
-        title={t("account.tronFrozen")}
-        onPress={onPressInfoCreator("frozen")}
-        value={tronPower}
-      />
-      <InfoItem
-        title={t("account.bandwidth")}
-        onPress={onPressInfoCreator("bandwidth")}
-        value={
-          formattedBandwidth.isZero()
-            ? "-"
-            : toLocaleString(formattedBandwidth, locale)
-        }
-      />
-      <InfoItem
-        title={t("account.energy")}
-        onPress={onPressInfoCreator("energy")}
-        value={
-          formattedEnergy.isZero()
-            ? "-"
-            : toLocaleString(formattedEnergy, locale)
-        }
-        isLast={true}
-      />
-    </ScrollView>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
+          paddingHorizontal: 16,
+        }}
+      >
+        <InfoItem
+          title={t("account.availableBalance")}
+          onPress={onPressInfoCreator("available")}
+          value={
+            <CurrencyUnitValue unit={unit} value={account.spendableBalance} />
+          }
+        />
+        <InfoItem
+          title={t("account.tronFrozen")}
+          onPress={onPressInfoCreator("frozen")}
+          value={tronPower}
+        />
+        <InfoItem
+          title={t("account.bandwidth")}
+          onPress={onPressInfoCreator("bandwidth")}
+          value={
+            formattedBandwidth.isZero()
+              ? "-"
+              : toLocaleString(formattedBandwidth, locale)
+          }
+        />
+        <InfoItem
+          title={t("account.energy")}
+          onPress={onPressInfoCreator("energy")}
+          value={
+            formattedEnergy.isZero()
+              ? "-"
+              : toLocaleString(formattedEnergy, locale)
+          }
+          isLast={true}
+        />
+      </ScrollView>
+    </>
   );
 }
 
 export default function AccountBalanceFooter({ account }: Props) {
   if (!account.tronResources) return null;
   return <AccountBalanceSummaryFooter account={account} />;
 }
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: "row",
-    overflow: "visible",
-  },
-});
 
 function useInfoCandidates(): Record<InfoName, ModalInfo[]> {
   const { t } = useTranslation();