Skip to content

Commit 2e73433

Browse files
clemente-xyzBalanced02
clemente-xyz
and
Balanced02
authored
Fix request tokens from new account zero balance showing not data available 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 <[email protected]>
1 parent 1f20790 commit 2e73433

File tree

4 files changed

+150
-4
lines changed

4 files changed

+150
-4
lines changed

‎ios/Lisk.xcodeproj/project.pbxproj

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1372,7 +1372,7 @@
13721372
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
13731373
CLANG_ENABLE_MODULES = YES;
13741374
CODE_SIGN_ENTITLEMENTS = Lisk/Lisk.entitlements;
1375-
CURRENT_PROJECT_VERSION = 58;
1375+
CURRENT_PROJECT_VERSION = 61;
13761376
DEVELOPMENT_TEAM = 58UK9RE9TP;
13771377
ENABLE_BITCODE = NO;
13781378
EXCLUDED_ARCHS = arm64;
@@ -1402,7 +1402,7 @@
14021402
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
14031403
CLANG_ENABLE_MODULES = YES;
14041404
CODE_SIGN_ENTITLEMENTS = Lisk/Lisk.entitlements;
1405-
CURRENT_PROJECT_VERSION = 58;
1405+
CURRENT_PROJECT_VERSION = 61;
14061406
DEVELOPMENT_TEAM = 58UK9RE9TP;
14071407
EXCLUDED_ARCHS = arm64;
14081408
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;

‎src/modules/RequestToken/components/RequestTokenSelectField.js

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React from 'react';
2+
import { Text, View, Image } from 'react-native';
3+
import i18next from 'i18next';
4+
5+
import { useTheme } from 'contexts/ThemeContext';
6+
import { useCurrentAccount } from 'modules/Accounts/hooks/useCurrentAccount';
7+
import { useAccountTokenBalancesQuery } from 'modules/Accounts/api/useAccountTokenBalancesQuery';
8+
import { useApplicationSupportedTokensQuery } from 'modules/BlockchainApplication/api/useApplicationSupportedTokensQuery';
9+
import Picker from 'components/shared/Picker';
10+
import InfiniteScrollList from 'components/shared/InfiniteScrollList';
11+
import Skeleton from 'components/shared/Skeleton/Skeleton';
12+
import DataRenderer from 'components/shared/DataRenderer';
13+
import { fromBaseToDisplayDenom } from 'utilities/conversions.utils';
14+
import { deviceWidth } from 'utilities/device';
15+
16+
import getStyles from './RequestTokenSelectField.styles';
17+
18+
export function RequestTokenSelectField({
19+
value,
20+
onChange,
21+
recipientApplication,
22+
errorMessage,
23+
style,
24+
}) {
25+
const {
26+
data: supportedTokensData,
27+
isLoading: isLoadingSupportedTokens,
28+
isError: isSupportedTokensError,
29+
} = useApplicationSupportedTokensQuery(recipientApplication);
30+
31+
const [currentAccount] = useCurrentAccount();
32+
33+
const { data: tokenBalanceData } = useAccountTokenBalancesQuery(currentAccount.metadata.address, {
34+
params: { tokenID: value },
35+
});
36+
37+
const { styles } = useTheme({ styles: getStyles() });
38+
39+
const selectedToken = supportedTokensData?.find((token) => token.tokenID === value);
40+
41+
const tokenBalance =
42+
selectedToken && tokenBalanceData
43+
? fromBaseToDisplayDenom({
44+
amount: tokenBalanceData?.data[0]?.availableBalance || 0,
45+
displayDenom: selectedToken.displayDenom,
46+
denomUnits: selectedToken.denomUnits,
47+
symbol: selectedToken.symbol,
48+
withSymbol: true,
49+
formatAmount: true,
50+
})
51+
: 0;
52+
53+
const renderOptions = (data = supportedTokensData) => (
54+
<InfiniteScrollList
55+
data={data}
56+
keyExtractor={(item) => item.tokenID}
57+
renderItem={(item) => (
58+
<Picker.Item
59+
key={item.tokenID}
60+
value={item.tokenID}
61+
onChange={onChange}
62+
testID={`token-select-${item.symbol}`}
63+
>
64+
<Text style={[styles.theme.text]}>{item.symbol}</Text>
65+
<Image source={{ uri: item.logo.png }} style={styles.logo} />
66+
</Picker.Item>
67+
)}
68+
/>
69+
);
70+
71+
const { showOptions } = Picker.usePickerMenu(renderOptions());
72+
73+
return (
74+
<Picker value={value} error={errorMessage}>
75+
<View style={{ ...styles.row, justifyContent: 'space-between' }}>
76+
<Picker.Label style={style?.label}>
77+
{i18next.t('sendToken.tokenSelect.tokenIDFieldLabel')}
78+
</Picker.Label>
79+
80+
{selectedToken && (
81+
<Picker.Label style={style?.label}>
82+
{i18next.t('sendToken.tokenSelect.tokenIDBalanceLabel')}:{' '}
83+
<Text style={[styles.primaryText]}>{tokenBalance}</Text>
84+
</Picker.Label>
85+
)}
86+
</View>
87+
88+
<DataRenderer
89+
data={supportedTokensData}
90+
isLoading={isLoadingSupportedTokens}
91+
error={isSupportedTokensError}
92+
renderData={() => (
93+
<Picker.Toggle style={style?.toggle} openMenu={showOptions}>
94+
{selectedToken && (
95+
<View style={[styles.row]} testID="select-token-picker">
96+
<Text style={[styles.text, styles.theme.text]}>{selectedToken.symbol}</Text>
97+
<Image source={{ uri: selectedToken.logo?.png }} style={styles.logo} />
98+
</View>
99+
)}
100+
</Picker.Toggle>
101+
)}
102+
renderLoading={() => (
103+
<Skeleton height={48} width={deviceWidth() - 44} style={{ container: styles.skeleton }} />
104+
)}
105+
/>
106+
</Picker>
107+
);
108+
}

‎src/modules/RequestToken/components/RequestTokenSelectField.styles.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { themes, colors } from 'constants/styleGuide';
2+
3+
export default function getRequestTokenSelectFieldStyles() {
4+
return {
5+
common: {
6+
row: {
7+
flexDirection: 'row',
8+
alignItems: 'center',
9+
justifyContent: 'center',
10+
},
11+
logo: {
12+
height: 24,
13+
width: 24,
14+
borderRadius: 16,
15+
marginLeft: 8,
16+
},
17+
primaryText: {
18+
color: colors.light.ultramarineBlue,
19+
},
20+
text: {
21+
fontSize: 16,
22+
},
23+
skeleton: {
24+
marginBottom: 16,
25+
},
26+
},
27+
[themes.light]: {
28+
text: {
29+
color: colors.light.zodiacBlue,
30+
},
31+
},
32+
[themes.dark]: {
33+
text: {
34+
color: colors.light.whiteSmoke,
35+
},
36+
},
37+
};
38+
}

‎src/modules/RequestToken/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { useApplicationSupportedTokensQuery } from 'modules/BlockchainApplicatio
1818
import {
1919
SendTokenMessageField,
2020
SendTokenAmountField,
21-
TokenSelectField,
2221
} from 'modules/SendToken/components/SelectTokenStep/components';
2322
import { SendTokenRecipientApplicationField } from 'modules/SendToken/components/SelectApplicationsStep/components';
2423
import DataRenderer from 'components/shared/DataRenderer';
@@ -39,6 +38,7 @@ import CheckSvg from 'assets/svgs/CheckSvg';
3938

4039
import { useRequestTokenAmountValidation } from './hook/useRequestTokenAmountValidation';
4140
import getStyles from './styles';
41+
import { RequestTokenSelectField } from './components/RequestTokenSelectField';
4242

4343
export default function RequestToken() {
4444
const navigation = useNavigation();
@@ -186,7 +186,7 @@ export default function RequestToken() {
186186
)}
187187
/>
188188

189-
<TokenSelectField
189+
<RequestTokenSelectField
190190
value={tokenID}
191191
onChange={setTokenID}
192192
recipientApplication={currentApplication.data}

0 commit comments

Comments
 (0)