From 33eab6c54953ed639a384439bcfcfcfdf869229f Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Sat, 26 Aug 2023 17:37:29 +0700
Subject: [PATCH] [Issue-917]: Update UI - Update show/hide balance feature

---
 src/components/HideBalanceItem.tsx            | 30 ++++++++++++
 src/components/common/HistoryItem/index.tsx   | 44 ++++++++++-------
 .../common/TokenGroupBalanceItem/index.tsx    | 26 ++--------
 src/screens/Home/Crowdloans/CrowdloanItem.tsx | 48 +++++++++++--------
 src/screens/Home/Crowdloans/index.tsx         | 16 ++++---
 src/screens/Home/History/index.tsx            |  5 +-
 .../Staking/Balance/StakingBalanceItem.tsx    | 34 ++++++++-----
 .../Staking/Balance/StakingBalanceList.tsx    |  6 ++-
 8 files changed, 126 insertions(+), 83 deletions(-)
 create mode 100644 src/components/HideBalanceItem.tsx

diff --git a/src/components/HideBalanceItem.tsx b/src/components/HideBalanceItem.tsx
new file mode 100644
index 000000000..946d15967
--- /dev/null
+++ b/src/components/HideBalanceItem.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Typography } from 'components/design-system-ui';
+import { FontMedium, FontSemiBold } from 'styles/sharedStyles';
+import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+
+export const HideBalanceItem = () => {
+  const theme = useSubWalletTheme().swThemes;
+  return (
+    <>
+      <Typography.Text
+        style={{
+          fontSize: theme.fontSizeLG,
+          ...FontSemiBold,
+          lineHeight: theme.lineHeightLG * theme.fontSizeLG,
+          color: theme.colorTextLight1,
+        }}>
+        ******
+      </Typography.Text>
+      <Typography.Text
+        style={{
+          ...FontMedium,
+          fontSize: theme.fontSizeSM,
+          lineHeight: theme.lineHeightSM * theme.fontSizeSM,
+          color: theme.colorTextLight4,
+        }}>
+        ******
+      </Typography.Text>
+    </>
+  );
+};
diff --git a/src/components/common/HistoryItem/index.tsx b/src/components/common/HistoryItem/index.tsx
index 486563740..90df74074 100644
--- a/src/components/common/HistoryItem/index.tsx
+++ b/src/components/common/HistoryItem/index.tsx
@@ -9,11 +9,13 @@ import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import HistoryItemStyles from './style';
 import { ThemeTypes } from 'styles/themes';
 import { HistoryStatusMap } from 'screens/Home/History/shared';
+import { HideBalanceItem } from 'components/HideBalanceItem';
 
 interface Props {
   item: TransactionHistoryDisplayItem;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
+  isShowBalance?: boolean;
 }
 
 function getIconColor(status: ExtrinsicStatus, theme: ThemeTypes): string | undefined {
@@ -23,7 +25,7 @@ function getIconColor(status: ExtrinsicStatus, theme: ThemeTypes): string | unde
   return theme[color || ''];
 }
 
-export const HistoryItem = ({ item, onPress, style }: Props) => {
+export const HistoryItem = ({ item, onPress, style, isShowBalance }: Props) => {
   const theme = useSubWalletTheme().swThemes;
   const displayData = item.displayData;
   const _style = HistoryItemStyles(theme);
@@ -54,23 +56,29 @@ export const HistoryItem = ({ item, onPress, style }: Props) => {
 
         <View style={_style.rightPart}>
           <View style={{ alignItems: 'flex-end' }}>
-            <Number
-              decimal={item?.amount?.decimals || 0}
-              decimalOpacity={0.45}
-              suffix={item?.amount?.symbol}
-              value={item?.amount?.value || '0'}
-              textStyle={_style.upperText}
-            />
-            <Number
-              decimal={item?.fee?.decimals || 0}
-              decimalOpacity={1}
-              intOpacity={1}
-              suffix={item.fee?.symbol}
-              unitOpacity={1}
-              value={item.fee?.value || '0'}
-              size={theme.fontSizeSM}
-              textStyle={_style.lowerText}
-            />
+            {isShowBalance && (
+              <>
+                <Number
+                  decimal={item?.amount?.decimals || 0}
+                  decimalOpacity={0.45}
+                  suffix={item?.amount?.symbol}
+                  value={item?.amount?.value || '0'}
+                  textStyle={_style.upperText}
+                />
+                <Number
+                  decimal={item?.fee?.decimals || 0}
+                  decimalOpacity={1}
+                  intOpacity={1}
+                  suffix={item.fee?.symbol}
+                  unitOpacity={1}
+                  value={item.fee?.value || '0'}
+                  size={theme.fontSizeSM}
+                  textStyle={_style.lowerText}
+                />
+              </>
+            )}
+
+            {!isShowBalance && <HideBalanceItem />}
           </View>
 
           <View style={_style.arrowWrapper}>
diff --git a/src/components/common/TokenGroupBalanceItem/index.tsx b/src/components/common/TokenGroupBalanceItem/index.tsx
index fc5c8a19a..2ea185e38 100644
--- a/src/components/common/TokenGroupBalanceItem/index.tsx
+++ b/src/components/common/TokenGroupBalanceItem/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
 import { TokenBalanceItemType } from 'types/balance';
-import { Icon, Logo, Number, Typography } from 'components/design-system-ui';
+import { Icon, Logo, Number } from 'components/design-system-ui';
 import { CaretRight } from 'phosphor-react-native';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import TokenGroupBalanceItemStyles from './style';
 import { FontMedium, FontSemiBold } from 'styles/sharedStyles';
+import { HideBalanceItem } from 'components/HideBalanceItem';
 
 interface Props extends TokenBalanceItemType, TouchableOpacityProps {
   isShowBalance?: boolean;
@@ -72,28 +73,7 @@ export const TokenGroupBalanceItem = ({
               </>
             )}
 
-            {!isShowBalance && (
-              <>
-                <Typography.Text
-                  style={{
-                    fontSize: theme.fontSizeLG,
-                    ...FontSemiBold,
-                    lineHeight: theme.lineHeightLG * theme.fontSizeLG,
-                    color: theme.colorTextLight1,
-                  }}>
-                  ******
-                </Typography.Text>
-                <Typography.Text
-                  style={{
-                    ...FontMedium,
-                    fontSize: theme.fontSizeSM,
-                    lineHeight: theme.lineHeightSM * theme.fontSizeSM,
-                    color: theme.colorTextLight4,
-                  }}>
-                  ******
-                </Typography.Text>
-              </>
-            )}
+            {!isShowBalance && <HideBalanceItem />}
           </View>
           <View style={_style.iconWrapper}>
             <Icon type="phosphor" phosphorIcon={CaretRight} size={'sm'} iconColor={theme.colorTextLight3} />
diff --git a/src/screens/Home/Crowdloans/CrowdloanItem.tsx b/src/screens/Home/Crowdloans/CrowdloanItem.tsx
index 78da05de6..620869a1b 100644
--- a/src/screens/Home/Crowdloans/CrowdloanItem.tsx
+++ b/src/screens/Home/Crowdloans/CrowdloanItem.tsx
@@ -9,9 +9,11 @@ import { FontMedium, FontSemiBold } from 'styles/sharedStyles';
 import { CrowdloanItemType } from 'types/index';
 import i18n from 'utils/i18n/i18n';
 import { ThemeTypes } from 'styles/themes';
+import { HideBalanceItem } from 'components/HideBalanceItem';
 
 interface Props {
   item: CrowdloanItemType;
+  isShowBalance?: boolean;
 }
 
 function getParaStateLabel(paraState: CrowdloanParaState) {
@@ -38,7 +40,7 @@ export function getGroupKey(groupDisplayName: string) {
   }
 }
 
-export const CrowdloanItem = ({ item }: Props) => {
+export const CrowdloanItem = ({ item, isShowBalance }: Props) => {
   const theme = useSubWalletTheme().swThemes;
   const styleSheet = createStyleSheet(theme);
 
@@ -91,25 +93,31 @@ export const CrowdloanItem = ({ item }: Props) => {
           </View>
         </View>
         <View style={styleSheet.crowdloanItemPart2}>
-          <Number
-            value={item.contribute}
-            decimal={0}
-            suffix={item.symbol}
-            intColor={styleSheet.text.color as string}
-            decimalColor={styleSheet.subText.color}
-            size={styleSheet.text.fontSize}
-            textStyle={{ ...styleSheet.text }}
-          />
-          <Number
-            value={item.convertedContribute}
-            decimal={0}
-            prefix={'$'}
-            unitColor={styleSheet.subText.color}
-            intColor={styleSheet.subText.color}
-            decimalColor={styleSheet.subText.color}
-            size={styleSheet.subText.fontSize}
-            textStyle={{ ...styleSheet.subText }}
-          />
+          {isShowBalance && (
+            <>
+              <Number
+                value={item.contribute}
+                decimal={0}
+                suffix={item.symbol}
+                intColor={styleSheet.text.color as string}
+                decimalColor={styleSheet.subText.color}
+                size={styleSheet.text.fontSize}
+                textStyle={{ ...styleSheet.text }}
+              />
+              <Number
+                value={item.convertedContribute}
+                decimal={0}
+                prefix={'$'}
+                unitColor={styleSheet.subText.color}
+                intColor={styleSheet.subText.color}
+                decimalColor={styleSheet.subText.color}
+                size={styleSheet.subText.fontSize}
+                textStyle={{ ...styleSheet.subText }}
+              />
+            </>
+          )}
+
+          {!isShowBalance && <HideBalanceItem />}
         </View>
       </View>
     </TouchableOpacity>
diff --git a/src/screens/Home/Crowdloans/index.tsx b/src/screens/Home/Crowdloans/index.tsx
index 63c04ed53..06a033bde 100644
--- a/src/screens/Home/Crowdloans/index.tsx
+++ b/src/screens/Home/Crowdloans/index.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import i18n from 'utils/i18n/i18n';
-import { ListRenderItemInfo } from 'react-native';
-import { CrowdloanItem } from 'screens/Home/Crowdloans/CrowdloanItem';
 
 import { RocketLaunch } from 'phosphor-react-native';
 import useGetCrowdloanList from 'hooks/screen/Home/Crowdloans/useGetCrowdloanList';
@@ -11,10 +9,10 @@ import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { setAdjustPan } from 'rn-android-keyboard-adjust';
 import { useIsFocused } from '@react-navigation/native';
 import { CrowdloanItemType } from 'types/index';
-
-const renderItem = ({ item }: ListRenderItemInfo<CrowdloanItemType>) => {
-  return <CrowdloanItem item={item} />;
-};
+import { useSelector } from 'react-redux';
+import { RootState } from 'stores/index';
+import { ListRenderItemInfo } from 'react-native';
+import { CrowdloanItem } from 'screens/Home/Crowdloans/CrowdloanItem';
 
 const renderListEmptyComponent = () => {
   return (
@@ -38,12 +36,18 @@ export const CrowdloansScreen = () => {
   const items: CrowdloanItemType[] = useGetCrowdloanList();
   // const [isRefresh, refresh] = useRefresh();
   const isFocused = useIsFocused();
+  const isShowBalance = useSelector((state: RootState) => state.settings.isShowBalance);
   const defaultFilterOpts = [
     { label: i18n.filterOptions.polkadotParachain, value: FilterValue.POLKADOT_PARACHAIN },
     { label: i18n.filterOptions.kusamaParachain, value: FilterValue.KUSAMA_PARACHAIN },
     { label: i18n.filterOptions.win, value: FilterValue.WINNER },
     { label: i18n.filterOptions.fail, value: FilterValue.FAIL },
   ];
+
+  const renderItem = ({ item }: ListRenderItemInfo<CrowdloanItemType>) => {
+    return <CrowdloanItem item={item} isShowBalance={isShowBalance} />;
+  };
+
   const crowdloanData = useMemo(() => {
     const result = items.sort(
       // @ts-ignore
diff --git a/src/screens/Home/History/index.tsx b/src/screens/Home/History/index.tsx
index cadcd17a8..6caf96c8e 100644
--- a/src/screens/Home/History/index.tsx
+++ b/src/screens/Home/History/index.tsx
@@ -230,7 +230,7 @@ function History({
   const [loading, setLoading] = useState<boolean>(true);
   const language = useSelector((state: RootState) => state.mobileSettings.language) as LanguageType;
   const navigation = useNavigation<RootNavigationProps>();
-
+  const isShowBalance = useSelector((state: RootState) => state.settings.isShowBalance);
   const accountMap = useMemo(() => {
     return accounts.reduce((accMap, cur) => {
       accMap[cur.address.toLowerCase()] = cur.name || '';
@@ -363,10 +363,11 @@ function History({
           item={item}
           key={`${item.transactionId || item.extrinsicHash}-${item.address}-${item.direction}`}
           onPress={onOpenDetail(item)}
+          isShowBalance={isShowBalance}
         />
       );
     },
-    [onOpenDetail, theme.marginXS],
+    [isShowBalance, onOpenDetail, theme.marginXS],
   );
 
   const searchFunc = useCallback((items: TransactionHistoryDisplayItem[], searchText: string) => {
diff --git a/src/screens/Home/Staking/Balance/StakingBalanceItem.tsx b/src/screens/Home/Staking/Balance/StakingBalanceItem.tsx
index 11bf286a2..56974139a 100644
--- a/src/screens/Home/Staking/Balance/StakingBalanceItem.tsx
+++ b/src/screens/Home/Staking/Balance/StakingBalanceItem.tsx
@@ -11,14 +11,16 @@ import { getNetworkLogo } from 'utils/index';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { ThemeTypes } from 'styles/themes';
 import i18n from 'utils/i18n/i18n';
+import { HideBalanceItem } from 'components/HideBalanceItem';
 
 interface Props {
   stakingData: StakingDataType;
   priceMap: Record<string, number>;
   onPress: (value: StakingDataType) => () => void;
+  isShowBalance?: boolean;
 }
 
-const StakingBalanceItem = ({ stakingData, priceMap, onPress }: Props) => {
+const StakingBalanceItem = ({ stakingData, priceMap, onPress, isShowBalance }: Props) => {
   const { staking, decimals } = stakingData;
   const theme = useSubWalletTheme().swThemes;
   const styleSheet = createStyleSheet(theme);
@@ -61,18 +63,24 @@ const StakingBalanceItem = ({ stakingData, priceMap, onPress }: Props) => {
         </View>
 
         <View style={styleSheet.balanceInfoContainer}>
-          <Number value={staking.balance || 0} decimal={decimals} suffix={symbol} textStyle={{ ...FontSemiBold }} />
-
-          <Number
-            value={convertedBalanceValue}
-            decimal={decimals}
-            prefix={'$'}
-            size={theme.fontSizeSM}
-            intOpacity={0.45}
-            decimalOpacity={0.45}
-            unitOpacity={0.45}
-            textStyle={{ ...FontMedium, lineHeight: theme.fontSizeSM * theme.lineHeightSM }}
-          />
+          {isShowBalance && (
+            <>
+              <Number value={staking.balance || 0} decimal={decimals} suffix={symbol} textStyle={{ ...FontSemiBold }} />
+
+              <Number
+                value={convertedBalanceValue}
+                decimal={decimals}
+                prefix={'$'}
+                size={theme.fontSizeSM}
+                intOpacity={0.45}
+                decimalOpacity={0.45}
+                unitOpacity={0.45}
+                textStyle={{ ...FontMedium, lineHeight: theme.fontSizeSM * theme.lineHeightSM }}
+              />
+            </>
+          )}
+
+          {!isShowBalance && <HideBalanceItem />}
         </View>
         <View style={styleSheet.iconWrapper}>
           <Icon phosphorIcon={CaretRight} iconColor={theme.colorTextLight3} size={'sm'} />
diff --git a/src/screens/Home/Staking/Balance/StakingBalanceList.tsx b/src/screens/Home/Staking/Balance/StakingBalanceList.tsx
index c3fc9d4bb..af5b53814 100644
--- a/src/screens/Home/Staking/Balance/StakingBalanceList.tsx
+++ b/src/screens/Home/Staking/Balance/StakingBalanceList.tsx
@@ -17,6 +17,8 @@ import { RootNavigationProps } from 'routes/index';
 import { EmptyList } from 'components/EmptyList';
 import { setAdjustPan } from 'rn-android-keyboard-adjust';
 import BigNumber from 'bignumber.js';
+import { useSelector } from 'react-redux';
+import { RootState } from 'stores/index';
 
 enum FilterValue {
   NOMINATED = 'nominated',
@@ -56,6 +58,7 @@ const StakingBalanceList = () => {
   const theme = useSubWalletTheme().swThemes;
   const { data, priceMap } = useGetStakingList();
   const navigation = useNavigation<RootNavigationProps>();
+  const isShowBalance = useSelector((state: RootState) => state.settings.isShowBalance);
   const [isRefresh, refresh] = useRefresh();
   const [selectedItem, setSelectedItem] = useState<StakingDataType | undefined>(undefined);
   const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
@@ -128,10 +131,11 @@ const StakingBalanceList = () => {
           stakingData={stakingData}
           priceMap={priceMap}
           onPress={handleOnPress}
+          isShowBalance={isShowBalance}
         />
       );
     },
-    [handleOnPress, priceMap],
+    [handleOnPress, isShowBalance, priceMap],
   );
 
   const handlePressStartStaking = useCallback(