diff --git a/ios/Lisk.xcodeproj/project.pbxproj b/ios/Lisk.xcodeproj/project.pbxproj index f375911c1..cd8f871a8 100644 --- 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 new file mode 100644 index 000000000..9238506fb --- /dev/null +++ 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) => ( + item.tokenID} + renderItem={(item) => ( + + {item.symbol} + + + )} + /> + ); + + const { showOptions } = Picker.usePickerMenu(renderOptions()); + + return ( + + + + {i18next.t('sendToken.tokenSelect.tokenIDFieldLabel')} + + + {selectedToken && ( + + {i18next.t('sendToken.tokenSelect.tokenIDBalanceLabel')}:{' '} + {tokenBalance} + + )} + + + ( + + {selectedToken && ( + + {selectedToken.symbol} + + + )} + + )} + renderLoading={() => ( + + )} + /> + + ); +} diff --git a/src/modules/RequestToken/components/RequestTokenSelectField.styles.js b/src/modules/RequestToken/components/RequestTokenSelectField.styles.js new file mode 100644 index 000000000..e5304388c --- /dev/null +++ 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 index 39389fe8b..42e3f6f29 100644 --- 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() { )} /> -