Fix request tokens from new account zero balance showing not data ava…

…ilable for token selection (#2087) * 🐛 Use useApplicationSupportedTokensQuery instead of useTransferableTokens on token field of request token form Created a new component for this * ⬆️ Bump version for iOS --------- Co-authored-by: Daniel Ayomide <adebalanced02@gmail.com>
LiskHQ · Oct 18, 2023 · 2e73433 · 2e73433
1 parent 1f20790
commit 2e73433
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 4 deletions.
diff --git a/ios/Lisk.xcodeproj/project.pbxproj b/ios/Lisk.xcodeproj/project.pbxproj
@@ -1372,7 +1372,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Lisk/Lisk.entitlements;
-				CURRENT_PROJECT_VERSION = 58;
+				CURRENT_PROJECT_VERSION = 61;
 				DEVELOPMENT_TEAM = 58UK9RE9TP;
 				ENABLE_BITCODE = NO;
 				EXCLUDED_ARCHS = arm64;
@@ -1402,7 +1402,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Lisk/Lisk.entitlements;
-				CURRENT_PROJECT_VERSION = 58;
+				CURRENT_PROJECT_VERSION = 61;
 				DEVELOPMENT_TEAM = 58UK9RE9TP;
 				EXCLUDED_ARCHS = arm64;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;

diff --git a/src/modules/RequestToken/components/RequestTokenSelectField.js b/src/modules/RequestToken/components/RequestTokenSelectField.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import { Text, View, Image } from 'react-native';
+import i18next from 'i18next';
+
+import { useTheme } from 'contexts/ThemeContext';
+import { useCurrentAccount } from 'modules/Accounts/hooks/useCurrentAccount';
+import { useAccountTokenBalancesQuery } from 'modules/Accounts/api/useAccountTokenBalancesQuery';
+import { useApplicationSupportedTokensQuery } from 'modules/BlockchainApplication/api/useApplicationSupportedTokensQuery';
+import Picker from 'components/shared/Picker';
+import InfiniteScrollList from 'components/shared/InfiniteScrollList';
+import Skeleton from 'components/shared/Skeleton/Skeleton';
+import DataRenderer from 'components/shared/DataRenderer';
+import { fromBaseToDisplayDenom } from 'utilities/conversions.utils';
+import { deviceWidth } from 'utilities/device';
+
+import getStyles from './RequestTokenSelectField.styles';
+
+export function RequestTokenSelectField({
+  value,
+  onChange,
+  recipientApplication,
+  errorMessage,
+  style,
+}) {
+  const {
+    data: supportedTokensData,
+    isLoading: isLoadingSupportedTokens,
+    isError: isSupportedTokensError,
+  } = useApplicationSupportedTokensQuery(recipientApplication);
+
+  const [currentAccount] = useCurrentAccount();
+
+  const { data: tokenBalanceData } = useAccountTokenBalancesQuery(currentAccount.metadata.address, {
+    params: { tokenID: value },
+  });
+
+  const { styles } = useTheme({ styles: getStyles() });
+
+  const selectedToken = supportedTokensData?.find((token) => token.tokenID === value);
+
+  const tokenBalance =
+    selectedToken && tokenBalanceData
+      ? fromBaseToDisplayDenom({
+          amount: tokenBalanceData?.data[0]?.availableBalance || 0,
+          displayDenom: selectedToken.displayDenom,
+          denomUnits: selectedToken.denomUnits,
+          symbol: selectedToken.symbol,
+          withSymbol: true,
+          formatAmount: true,
+        })
+      : 0;
+
+  const renderOptions = (data = supportedTokensData) => (
+    <InfiniteScrollList
+      data={data}
+      keyExtractor={(item) => item.tokenID}
+      renderItem={(item) => (
+        <Picker.Item
+          key={item.tokenID}
+          value={item.tokenID}
+          onChange={onChange}
+          testID={`token-select-${item.symbol}`}
+        >
+          <Text style={[styles.theme.text]}>{item.symbol}</Text>
+          <Image source={{ uri: item.logo.png }} style={styles.logo} />
+        </Picker.Item>
+      )}
+    />
+  );
+
+  const { showOptions } = Picker.usePickerMenu(renderOptions());
+
+  return (
+    <Picker value={value} error={errorMessage}>
+      <View style={{ ...styles.row, justifyContent: 'space-between' }}>
+        <Picker.Label style={style?.label}>
+          {i18next.t('sendToken.tokenSelect.tokenIDFieldLabel')}
+        </Picker.Label>
+
+        {selectedToken && (
+          <Picker.Label style={style?.label}>
+            {i18next.t('sendToken.tokenSelect.tokenIDBalanceLabel')}:{' '}
+            <Text style={[styles.primaryText]}>{tokenBalance}</Text>
+          </Picker.Label>
+        )}
+      </View>
+
+      <DataRenderer
+        data={supportedTokensData}
+        isLoading={isLoadingSupportedTokens}
+        error={isSupportedTokensError}
+        renderData={() => (
+          <Picker.Toggle style={style?.toggle} openMenu={showOptions}>
+            {selectedToken && (
+              <View style={[styles.row]} testID="select-token-picker">
+                <Text style={[styles.text, styles.theme.text]}>{selectedToken.symbol}</Text>
+                <Image source={{ uri: selectedToken.logo?.png }} style={styles.logo} />
+              </View>
+            )}
+          </Picker.Toggle>
+        )}
+        renderLoading={() => (
+          <Skeleton height={48} width={deviceWidth() - 44} style={{ container: styles.skeleton }} />
+        )}
+      />
+    </Picker>
+  );
+}
diff --git a/src/modules/RequestToken/components/RequestTokenSelectField.styles.js b/src/modules/RequestToken/components/RequestTokenSelectField.styles.js
@@ -0,0 +1,38 @@
+import { themes, colors } from 'constants/styleGuide';
+
+export default function getRequestTokenSelectFieldStyles() {
+  return {
+    common: {
+      row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      logo: {
+        height: 24,
+        width: 24,
+        borderRadius: 16,
+        marginLeft: 8,
+      },
+      primaryText: {
+        color: colors.light.ultramarineBlue,
+      },
+      text: {
+        fontSize: 16,
+      },
+      skeleton: {
+        marginBottom: 16,
+      },
+    },
+    [themes.light]: {
+      text: {
+        color: colors.light.zodiacBlue,
+      },
+    },
+    [themes.dark]: {
+      text: {
+        color: colors.light.whiteSmoke,
+      },
+    },
+  };
+}
diff --git a/src/modules/RequestToken/index.js b/src/modules/RequestToken/index.js
@@ -18,7 +18,6 @@ import { useApplicationSupportedTokensQuery } from 'modules/BlockchainApplicatio
 import {
   SendTokenMessageField,
   SendTokenAmountField,
-  TokenSelectField,
 } from 'modules/SendToken/components/SelectTokenStep/components';
 import { SendTokenRecipientApplicationField } from 'modules/SendToken/components/SelectApplicationsStep/components';
 import DataRenderer from 'components/shared/DataRenderer';
@@ -39,6 +38,7 @@ import CheckSvg from 'assets/svgs/CheckSvg';
 
 import { useRequestTokenAmountValidation } from './hook/useRequestTokenAmountValidation';
 import getStyles from './styles';
+import { RequestTokenSelectField } from './components/RequestTokenSelectField';
 
 export default function RequestToken() {
   const navigation = useNavigation();
@@ -186,7 +186,7 @@ export default function RequestToken() {
             )}
           />
 
-          <TokenSelectField
+          <RequestTokenSelectField
             value={tokenID}
             onChange={setTokenID}
             recipientApplication={currentApplication.data}