[Issue-815] Update FreeBalance UI for send fund

Koniverse · Jul 13, 2023 · 6a82281 · 6a82281
1 parent 83e0401
commit 6a82281
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 86 deletions.
diff --git a/src/screens/Transaction/SendFundV2/index.tsx b/src/screens/Transaction/SendFundV2/index.tsx
@@ -12,7 +12,7 @@ import {
   _isTokenTransferredByEvm,
 } from '@subwallet/extension-base/services/chain-service/utils';
 import { SWTransactionResponse } from '@subwallet/extension-base/services/transaction-service/types';
-import { isSameAddress } from '@subwallet/extension-base/utils';
+import { addLazy, isSameAddress, removeLazy } from '@subwallet/extension-base/utils';
 import BigN from 'bignumber.js';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -56,7 +56,6 @@ import i18n from 'utils/i18n/i18n';
 import { TokenSelectField } from 'components/Field/TokenSelect';
 import { InputAddress } from 'components/Input/InputAddressV2';
 import { NetworkField } from 'components/Field/Network';
-import { FreeBalance } from 'screens/Transaction/parts/FreeBalance';
 import { Button, Icon, Typography } from 'components/design-system-ui';
 import { AccountSelector } from 'components/Modal/common/AccountSelector';
 import { ChainSelector } from 'components/Modal/common/ChainSelector';
@@ -67,8 +66,9 @@ import { ArrowCircleRight, PaperPlaneRight, PaperPlaneTilt } from 'phosphor-reac
 import { getButtonIcon } from 'utils/button';
 import { UseControllerReturn } from 'react-hook-form/dist/types';
 import { AmountValueConverter } from 'screens/Transaction/SendFundV2/AmountValueConverter';
-import { addLazy, removeLazy } from 'utils/lazyUpdate';
 import createStylesheet from './styles';
+import { useGetBalance } from 'hooks/balance';
+import { FreeBalanceDisplay } from 'screens/Transaction/parts/FreeBalanceDisplay';
 
 interface TransferFormValues extends TransactionFormValues {
   to: string;
@@ -343,6 +343,14 @@ export const SendFund = ({
     ...getValues(),
   };
 
+  const {
+    error: isGetBalanceError,
+    isLoading: isGetBalanceLoading,
+    nativeTokenBalance,
+    nativeTokenSlug,
+    tokenBalance,
+  } = useGetBalance(chainValue, fromValue, assetValue);
+
   const { chainInfoMap, chainStateMap } = useSelector((root: RootState) => root.chainStore);
   const { assetRegistry, assetSettingMap, multiChainAssetMap, xcmRefMap } = useSelector(
     (root: RootState) => root.assetRegistry,
@@ -698,6 +706,10 @@ export const SendFund = ({
     [assetValue, decimals, forceUpdateValue, onInputChangeAmount, stylesheet.amountValueConverter],
   );
 
+  useEffect(() => {
+    setIsBalanceReady(!isGetBalanceLoading && !isGetBalanceError);
+  }, [isGetBalanceError, isGetBalanceLoading]);
+
   useEffect(() => {
     if (scanRecipient) {
       setValue('to', scanRecipient, {
@@ -934,37 +946,25 @@ export const SendFund = ({
                 </>
               )}
 
-              {viewStep === 2 && (
+              {viewStep === 2 ? (
                 <View style={stylesheet.amountWrapper}>
                   <FormItem control={control} rules={amountRules} render={renderAmountInput} name="value" />
                 </View>
+              ) : (
+                <View style={stylesheet.balanceWrapper}>
+                  {!(!fromValue && !chainValue) && (
+                    <FreeBalanceDisplay
+                      tokenSlug={assetValue}
+                      nativeTokenBalance={nativeTokenBalance}
+                      nativeTokenSlug={nativeTokenSlug}
+                      tokenBalance={tokenBalance}
+                      style={stylesheet.balance}
+                      error={isGetBalanceError}
+                      isLoading={isGetBalanceLoading}
+                    />
+                  )}
+                </View>
               )}
-
-              <View style={stylesheet.balanceWrapper}>
-                <FreeBalance
-                  label={viewStep === 2 ? 'Balance:' : undefined}
-                  address={fromValue}
-                  chain={chainValue}
-                  onBalanceReady={setIsBalanceReady}
-                  tokenSlug={assetValue}
-                  style={stylesheet.balance}
-                />
-
-                {viewStep === 2 && (
-                  <TouchableOpacity
-                    onPress={() => {
-                      setForceUpdateValue({ value: maxTransfer });
-                      const bnMaxTransfer = new BN(maxTransfer);
-
-                      if (!bnMaxTransfer.isZero()) {
-                        setIsTransferAll(true);
-                      }
-                    }}
-                    style={stylesheet.max}>
-                    {<Typography.Text style={stylesheet.maxText}>Max</Typography.Text>}
-                  </TouchableOpacity>
-                )}
-              </View>
             </ScrollView>
 
             <View style={stylesheet.footer}>
@@ -983,14 +983,43 @@ export const SendFund = ({
                 </Button>
               )}
               {viewStep === 2 && (
-                <Button
-                  disabled={isSubmitButtonDisable}
-                  loading={loading}
-                  type={isTransferAll ? 'warning' : undefined}
-                  onPress={checkAction(handleSubmit(onSubmit), extrinsicType)}
-                  icon={getButtonIcon(PaperPlaneTilt)}>
-                  {isTransferAll ? i18n.buttonTitles.transferAll : i18n.buttonTitles.transfer}
-                </Button>
+                <>
+                  <View style={stylesheet.footerBalanceWrapper}>
+                    <FreeBalanceDisplay
+                      label={viewStep === 2 ? 'Balance:' : undefined}
+                      tokenSlug={assetValue}
+                      nativeTokenBalance={nativeTokenBalance}
+                      nativeTokenSlug={nativeTokenSlug}
+                      tokenBalance={tokenBalance}
+                      style={stylesheet.balance}
+                      error={isGetBalanceError}
+                      isLoading={isGetBalanceLoading}
+                    />
+
+                    {viewStep === 2 && (
+                      <TouchableOpacity
+                        onPress={() => {
+                          setForceUpdateValue({ value: maxTransfer });
+                          const bnMaxTransfer = new BN(maxTransfer);
+
+                          if (!bnMaxTransfer.isZero()) {
+                            setIsTransferAll(true);
+                          }
+                        }}
+                        style={stylesheet.max}>
+                        {<Typography.Text style={stylesheet.maxText}>Max</Typography.Text>}
+                      </TouchableOpacity>
+                    )}
+                  </View>
+                  <Button
+                    disabled={isSubmitButtonDisable}
+                    loading={loading}
+                    type={isTransferAll ? 'warning' : undefined}
+                    onPress={checkAction(handleSubmit(onSubmit), extrinsicType)}
+                    icon={getButtonIcon(PaperPlaneTilt)}>
+                    {isTransferAll ? i18n.buttonTitles.transferAll : i18n.buttonTitles.transfer}
+                  </Button>
+                </>
               )}
             </View>
             <SafeAreaView />

diff --git a/src/screens/Transaction/SendFundV2/styles/index.ts b/src/screens/Transaction/SendFundV2/styles/index.ts
@@ -10,11 +10,16 @@ export default (theme: ThemeTypes) =>
     footer: {
       paddingHorizontal: theme.padding,
       paddingTop: theme.padding,
+      gap: theme.size,
       ...MarginBottomForSubmitButton,
     },
+    footerBalanceWrapper: {
+      flexDirection: 'row',
+      marginTop: -theme.margin,
+      marginBottom: -theme.margin,
+    },
     max: {
-      paddingHorizontal: theme.padding,
-      paddingTop: theme.padding,
+      padding: theme.padding,
       marginRight: -theme.margin,
     },
     maxText: {
@@ -46,7 +51,6 @@ export default (theme: ThemeTypes) =>
     },
     amountWrapper: {
       paddingTop: 48,
-      paddingBottom: 56,
     },
     selector: {
       marginBottom: 0,

diff --git a/src/screens/Transaction/parts/FreeBalance.tsx b/src/screens/Transaction/parts/FreeBalance.tsx
@@ -1,9 +1,7 @@
 import React, { useEffect } from 'react';
 import { useGetBalance } from 'hooks/balance';
-import { StyleProp, Text, View, ViewStyle } from 'react-native';
-import { ActivityIndicator, Number, Typography } from 'components/design-system-ui';
-import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
-import { FontMedium } from 'styles/sharedStyles';
+import { StyleProp, ViewStyle } from 'react-native';
+import { FreeBalanceDisplay } from 'screens/Transaction/parts/FreeBalanceDisplay';
 
 interface Props {
   address?: string;
@@ -15,7 +13,6 @@ interface Props {
 }
 
 export const FreeBalance = ({ address, chain, label, onBalanceReady, tokenSlug, style }: Props) => {
-  const theme = useSubWalletTheme().swThemes;
   const { error, isLoading, nativeTokenBalance, nativeTokenSlug, tokenBalance } = useGetBalance(
     chain,
     address,
@@ -31,45 +28,15 @@ export const FreeBalance = ({ address, chain, label, onBalanceReady, tokenSlug,
   }
 
   return (
-    <View style={[{ flexDirection: 'row', marginBottom: 12, alignItems: 'center', flexWrap: 'wrap' }, style]}>
-      {!error && (
-        <Text style={{ fontSize: 14, lineHeight: 22, color: theme.colorTextTertiary, ...FontMedium, paddingRight: 4 }}>
-          {label || 'Sender available balance:'}
-        </Text>
-      )}
-      {isLoading && <ActivityIndicator size={14} indicatorColor={theme.colorTextTertiary} />}
-      {error && (
-        <Typography.Text ellipsis style={{ fontSize: 14, lineHeight: 22, color: theme.colorError, ...FontMedium }}>
-          {error}
-        </Typography.Text>
-      )}
-      {!isLoading && !error && !!nativeTokenSlug && (
-        <Number
-          decimal={nativeTokenBalance.decimals || 18}
-          decimalColor={theme.colorTextTertiary}
-          intColor={theme.colorTextTertiary}
-          size={14}
-          textStyle={{ ...FontMedium }}
-          suffix={nativeTokenBalance.symbol}
-          unitColor={theme.colorTextTertiary}
-          value={nativeTokenBalance.value}
-        />
-      )}
-      {!isLoading && !error && !!tokenSlug && tokenSlug !== nativeTokenSlug && (
-        <>
-          <Text style={{ fontSize: 14, lineHeight: 22, color: theme.colorTextTertiary, ...FontMedium }}>{' and '}</Text>
-          <Number
-            decimal={tokenBalance?.decimals || 18}
-            decimalColor={theme.colorTextTertiary}
-            intColor={theme.colorTextTertiary}
-            size={14}
-            textStyle={{ ...FontMedium }}
-            suffix={tokenBalance?.symbol}
-            unitColor={theme.colorTextTertiary}
-            value={tokenBalance.value}
-          />
-        </>
-      )}
-    </View>
+    <FreeBalanceDisplay
+      label={label}
+      error={error}
+      isLoading={isLoading}
+      nativeTokenSlug={nativeTokenSlug}
+      nativeTokenBalance={nativeTokenBalance}
+      style={style}
+      tokenBalance={tokenBalance}
+      tokenSlug={tokenSlug}
+    />
   );
 };
diff --git a/src/screens/Transaction/parts/FreeBalanceDisplay.tsx b/src/screens/Transaction/parts/FreeBalanceDisplay.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { StyleProp, Text, View, ViewStyle } from 'react-native';
+import { ActivityIndicator, Number, Typography } from 'components/design-system-ui';
+import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import { FontMedium } from 'styles/sharedStyles';
+import { AmountData } from '@subwallet/extension-base/background/KoniTypes';
+
+interface Props {
+  error: string | null;
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+  nativeTokenSlug?: string;
+  nativeTokenBalance?: AmountData;
+  tokenSlug?: string;
+  tokenBalance?: AmountData;
+  isLoading: boolean;
+}
+
+export const FreeBalanceDisplay = ({
+  label,
+  tokenSlug,
+  style,
+  error,
+  isLoading,
+  tokenBalance,
+  nativeTokenSlug,
+  nativeTokenBalance,
+}: Props) => {
+  const theme = useSubWalletTheme().swThemes;
+
+  return (
+    <View style={[{ flexDirection: 'row', marginBottom: 12, alignItems: 'center', flexWrap: 'wrap' }, style]}>
+      {!error && (
+        <Text style={{ fontSize: 14, lineHeight: 22, color: theme.colorTextTertiary, ...FontMedium, paddingRight: 4 }}>
+          {label || 'Sender available balance:'}
+        </Text>
+      )}
+      {isLoading && <ActivityIndicator size={14} indicatorColor={theme.colorTextTertiary} />}
+      {error && (
+        <Typography.Text ellipsis style={{ fontSize: 14, lineHeight: 22, color: theme.colorError, ...FontMedium }}>
+          {error}
+        </Typography.Text>
+      )}
+      {!isLoading && !error && !!nativeTokenSlug && nativeTokenBalance && (
+        <Number
+          decimal={nativeTokenBalance.decimals || 18}
+          decimalColor={theme.colorTextTertiary}
+          intColor={theme.colorTextTertiary}
+          size={14}
+          textStyle={{ ...FontMedium }}
+          suffix={nativeTokenBalance.symbol}
+          unitColor={theme.colorTextTertiary}
+          value={nativeTokenBalance.value}
+        />
+      )}
+      {!isLoading && !error && !!tokenSlug && tokenSlug !== nativeTokenSlug && !!tokenBalance && (
+        <>
+          <Text style={{ fontSize: 14, lineHeight: 22, color: theme.colorTextTertiary, ...FontMedium }}>{' and '}</Text>
+          <Number
+            decimal={tokenBalance.decimals || 18}
+            decimalColor={theme.colorTextTertiary}
+            intColor={theme.colorTextTertiary}
+            size={14}
+            textStyle={{ ...FontMedium }}
+            suffix={tokenBalance.symbol}
+            unitColor={theme.colorTextTertiary}
+            value={tokenBalance.value}
+          />
+        </>
+      )}
+    </View>
+  );
+};