diff --git a/src/components/Reown/CreateTokenRequest.js b/src/components/Reown/CreateTokenRequest.js index aa309c0e9..deafcdbdb 100644 --- a/src/components/Reown/CreateTokenRequest.js +++ b/src/components/Reown/CreateTokenRequest.js @@ -89,48 +89,52 @@ function renderVersionFormatter(version) { return versionMap[version] || t`Unknown`; } -export const CreateTokenRequestData = ({ data }) => ( - - - {condRenderData(data.name, t`Name`, false)} - {condRenderData(data.symbol, t`Symbol`, true)} - {condRenderData(data.amount, t`Amount`, true, numberUtils.prettyValue)} - {condRenderData(data.version ?? TokenVersion.DEPOSIT, t`Type`, true, renderVersionFormatter)} - {condRenderData(data.address, t`Address to send newly minted ${data.symbol}`, true)} - {condRenderData(data.changeAddress, t`Address to send change ${DEFAULT_TOKEN.symbol}`, true)} - {condRenderData(data.createMint, t`Create mint authority?`, true, renderBooleanFormatter)} - {condRenderData(data.createMelt, t`Create melt authority?`, true, renderBooleanFormatter)} - {condRenderData(data.mintAuthorityAddress, t`Address to send the mint authority`, true)} - {condRenderData(data.meltAuthorityAddress, t`Address to send the melt authority`, true)} - {data.mintAuthorityAddress != null - && condRenderData( - data.allowExternalMintAuthorityAddress, - t`Allow external mint authority addresses?`, - true, - renderBooleanFormatter, - )} - {data.meltAuthorityAddress != null - && condRenderData( - data.allowExternalMeltAuthorityAddress, - t`Allow external melt authority addresses?`, - true, - renderBooleanFormatter, - )} - {condRenderData(data.contractPaysTokenDeposit, t`Contract pays token deposit?`, true, renderBooleanFormatter)} - {condRenderData(data.contractPaysFees, t`Contract pays fees?`, true, renderBooleanFormatter)} - {condRenderData(data.data, t`Token data`, true, (tokenData) => tokenData.join('\n'))} - {/* in this case we want to render only if data.deposit is not null and not 0 */} - {data.deposit && condRenderData(data.deposit, t`Deposit`, true, (value) => renderAmountAndSymbol(value, DEFAULT_TOKEN))} - {condRenderData(true, t`Network Fee`, true, () => (data.fee ? renderAmountAndSymbol(data.fee, DEFAULT_TOKEN) : '-'))} +export const CreateTokenRequestData = ({ data }) => { + const decimalPlaces = useSelector((state) => state.serverInfo?.decimal_places); + + return ( + + + {condRenderData(data.name, t`Name`, false)} + {condRenderData(data.symbol, t`Symbol`, true)} + {condRenderData(data.amount, t`Amount`, true, (value) => numberUtils.prettyValue(value, decimalPlaces))} + {condRenderData(data.version ?? TokenVersion.DEPOSIT, t`Type`, true, renderVersionFormatter)} + {condRenderData(data.address, t`Address to send newly minted ${data.symbol}`, true)} + {condRenderData(data.changeAddress, t`Address to send change ${DEFAULT_TOKEN.symbol}`, true)} + {condRenderData(data.createMint, t`Create mint authority?`, true, renderBooleanFormatter)} + {condRenderData(data.createMelt, t`Create melt authority?`, true, renderBooleanFormatter)} + {condRenderData(data.mintAuthorityAddress, t`Address to send the mint authority`, true)} + {condRenderData(data.meltAuthorityAddress, t`Address to send the melt authority`, true)} + {data.mintAuthorityAddress != null + && condRenderData( + data.allowExternalMintAuthorityAddress, + t`Allow external mint authority addresses?`, + true, + renderBooleanFormatter, + )} + {data.meltAuthorityAddress != null + && condRenderData( + data.allowExternalMeltAuthorityAddress, + t`Allow external melt authority addresses?`, + true, + renderBooleanFormatter, + )} + {condRenderData(data.contractPaysTokenDeposit, t`Contract pays token deposit?`, true, renderBooleanFormatter)} + {condRenderData(data.contractPaysFees, t`Contract pays fees?`, true, renderBooleanFormatter)} + {condRenderData(data.data, t`Token data`, true, (tokenData) => tokenData.join('\n'))} + {/* in this case we want to render only if data.deposit is not null and not 0 */} + {data.deposit && condRenderData(data.deposit, t`Deposit`, true, (value) => renderAmountAndSymbol(value, DEFAULT_TOKEN, decimalPlaces))} + {condRenderData(true, t`Network Fee`, true, () => (data.fee ? renderAmountAndSymbol(data.fee, DEFAULT_TOKEN, decimalPlaces) : '-'))} + - -); + ); +}; export const CreateTokenRequest = ({ createTokenRequest }) => { const { dapp, data } = createTokenRequest; diff --git a/src/components/Reown/GetUtxosRequest.js b/src/components/Reown/GetUtxosRequest.js index c57ed45a0..3cabc2da1 100644 --- a/src/components/Reown/GetUtxosRequest.js +++ b/src/components/Reown/GetUtxosRequest.js @@ -30,6 +30,7 @@ import { renderValue, isTokenNFT } from '../../utils'; export const GetUtxosRequestData = ({ data }) => { const tokenMetadata = useSelector((state) => state.tokenMetadata); const tokens = useSelector((state) => state.tokens); + const decimalPlaces = useSelector((state) => state.serverInfo?.decimal_places); // data contains utxoDetails from wallet.getUtxos() plus filterParams from request const { @@ -119,7 +120,7 @@ export const GetUtxosRequestData = ({ data }) => { {t`Amount smaller than:`} - {renderValue(params.amountSmallerThan, isNFT)} + {renderValue(params.amountSmallerThan, isNFT, decimalPlaces)} )} @@ -127,7 +128,7 @@ export const GetUtxosRequestData = ({ data }) => { {t`Amount bigger than:`} - {renderValue(params.amountBiggerThan, isNFT)} + {renderValue(params.amountBiggerThan, isNFT, decimalPlaces)} )} @@ -135,7 +136,7 @@ export const GetUtxosRequestData = ({ data }) => { {t`Maximum amount:`} - {renderValue(params.maximumAmount, isNFT)} + {renderValue(params.maximumAmount, isNFT, decimalPlaces)} )} @@ -160,7 +161,7 @@ export const GetUtxosRequestData = ({ data }) => { {t`Total amount:`} - {renderValue(totalAmount, isNFT)} {displaySymbol} + {renderValue(totalAmount, isNFT, decimalPlaces)} {displaySymbol} @@ -281,7 +282,7 @@ const styles = StyleSheet.create({ filterRow: { flexDirection: 'row', justifyContent: 'space-between', - alignItems: 'center', + alignItems: 'flex-start', marginBottom: 8, }, filterLabel: { @@ -292,6 +293,9 @@ const styles = StyleSheet.create({ fontSize: 14, fontWeight: '600', color: COLORS.textColor, + flexShrink: 1, + marginLeft: 8, + textAlign: 'right', }, filterValueAddress: { fontSize: 12, @@ -314,7 +318,7 @@ const styles = StyleSheet.create({ summaryRow: { flexDirection: 'row', justifyContent: 'space-between', - alignItems: 'center', + alignItems: 'flex-start', marginBottom: 8, }, summaryLabel: { @@ -325,6 +329,9 @@ const styles = StyleSheet.create({ fontSize: 14, fontWeight: '600', color: COLORS.textColor, + flexShrink: 1, + marginLeft: 8, + textAlign: 'right', }, privacyNotice: { backgroundColor: COLORS.cardBackground, diff --git a/src/components/Reown/NanoContract/NanoContractActions.js b/src/components/Reown/NanoContract/NanoContractActions.js index dd61571ef..80fdeba88 100644 --- a/src/components/Reown/NanoContract/NanoContractActions.js +++ b/src/components/Reown/NanoContract/NanoContractActions.js @@ -23,6 +23,7 @@ import { isTokenNFT, renderValue } from '../../../utils'; import { AlertUI, COLORS } from '../../../styles/themes'; import { WarnTextValue } from '../../WarnTextValue'; import { CircleError } from '../../Icons/CircleError.icon'; +import { DEFAULT_ICON_SIZE } from '../../Icons/constants'; import { getActionTitle, isAuthorityAction, @@ -143,6 +144,8 @@ const ActionItem = ({ action, title, isNft, tokens, isTokenRegistered, showToken value: [commonStyles.text, commonStyles.field], addressSection: { marginTop: 8, + marginLeft: DEFAULT_ICON_SIZE + 16, + paddingRight: 16, }, contentWrapper: { flex: 1, @@ -154,88 +157,91 @@ const ActionItem = ({ action, title, isNft, tokens, isTokenRegistered, showToken const titleParts = isAuthority ? splitAuthorityTitle(title) : null; return ( - - - - {isAuthority && titleParts ? ( - - {titleParts[0]} - {titleParts[1]} - - ) : ( - - {title} - {!isRegistered && tokenSymbol && ( - showTokenInfo(action.token)}> - - - )} - - )} - - {/* WITHDRAWAL: Show only address (address to send the amount and create the output) */} - {action.type === NanoContractActionType.WITHDRAWAL - && action.address && ( - - {t`Address to send amount:`} - {action.address} + + + + + {isAuthority && titleParts ? ( + + {titleParts[0]} + {titleParts[1]} - )} + ) : ( + + {title} + {!isRegistered && tokenSymbol && ( + showTokenInfo(action.token)}> + + + )} + + )} - {/* DEPOSIT: Show address (to filter UTXOs) and changeAddress (change address) */} - {action.type === NanoContractActionType.DEPOSIT && ( - - {action.address && ( - - {t`Address to filter UTXOs:`} - {action.address} - - )} - {action.changeAddress && ( - - {t`Change address:`} - {action.changeAddress} - - )} - - )} + - {/* GRANT_AUTHORITY: Show address (filter UTXOs) and authorityAddress (send authority) */} - {action.type === NanoContractActionType.GRANT_AUTHORITY && ( - - {action.address && ( - - {t`Address to filter UTXOs:`} - {action.address} - - )} - {action.authorityAddress && ( - - {t`Address to send new authority:`} - {action.authorityAddress} - - )} - + {/* Show amount for deposit/withdrawal actions */} + {action.type !== NanoContractActionType.GRANT_AUTHORITY + && action.type !== NanoContractActionType.ACQUIRE_AUTHORITY + && action.amount != null && action.amount !== undefined && ( + )} + - {/* ACQUIRE_AUTHORITY: Show only address (send the authority and create the output) */} - {action.type === NanoContractActionType.ACQUIRE_AUTHORITY && action.address && ( + {/* WITHDRAWAL: Show only address (address to send the amount and create the output) */} + {action.type === NanoContractActionType.WITHDRAWAL + && action.address && ( - {t`Address to send authority:`} + {t`Address to send amount:`} {action.address} - )} - + )} + + {/* DEPOSIT: Show address (to filter UTXOs) and changeAddress (change address) */} + {action.type === NanoContractActionType.DEPOSIT && ( + + {action.address && ( + + {t`Address to filter UTXOs:`} + {action.address} + + )} + {action.changeAddress && ( + + {t`Change address:`} + {action.changeAddress} + + )} + + )} + + {/* GRANT_AUTHORITY: Show address (filter UTXOs) and authorityAddress (send authority) */} + {action.type === NanoContractActionType.GRANT_AUTHORITY && ( + + {action.address && ( + + {t`Address to filter UTXOs:`} + {action.address} + + )} + {action.authorityAddress && ( + + {t`Address to send new authority:`} + {action.authorityAddress} + + )} + + )} - {/* Show amount for deposit/withdrawal actions */} - {action.type !== NanoContractActionType.GRANT_AUTHORITY - && action.type !== NanoContractActionType.ACQUIRE_AUTHORITY - && action.amount != null && action.amount !== undefined && ( - + {/* ACQUIRE_AUTHORITY: Show only address (send the authority and create the output) */} + {action.type === NanoContractActionType.ACQUIRE_AUTHORITY && action.address && ( + + {t`Address to send authority:`} + {action.address} + )} ) @@ -249,13 +255,16 @@ const ActionItem = ({ action, title, isNft, tokens, isTokenRegistered, showToken * @param {boolean} props.isNft */ const Amount = ({ amount, isNft }) => { - const amountToRender = renderValue(amount, isNft); + const decimalPlaces = useSelector((state) => state.serverInfo?.decimal_places); + const amountToRender = renderValue(amount, isNft, decimalPlaces); const styles = StyleSheet.create({ wrapper: { marginLeft: 'auto', marginRight: 0, paddingRight: 16, + maxWidth: '50%', + flexShrink: 1, }, amount: { fontSize: 16, diff --git a/src/components/Reown/NanoContract/NanoContractMethodArgs.js b/src/components/Reown/NanoContract/NanoContractMethodArgs.js index 889e100d7..ed3f52c28 100644 --- a/src/components/Reown/NanoContract/NanoContractMethodArgs.js +++ b/src/components/Reown/NanoContract/NanoContractMethodArgs.js @@ -108,6 +108,8 @@ export const NanoContractMethodArgs = ({ blueprintId, method, ncArgs }) => { * @param {Object} props.tokens A map of registered tokens */ const ArgValueRenderer = ({ type, value, network, tokens }) => { + const decimalPlaces = useSelector((state) => state.serverInfo?.decimal_places); + // Handle SignedData types with custom component if (type && type.startsWith('SignedData')) { return ; @@ -117,7 +119,7 @@ const ArgValueRenderer = ({ type, value, network, tokens }) => { let displayValue = value; if (type === 'Amount') { - displayValue = renderValue(value); + displayValue = renderValue(value, false, decimalPlaces); } else if (type === 'Timestamp') { displayValue = getTimestampFormat(value); } else if (type === 'TxOutputScript') { diff --git a/src/components/Reown/SendTransactionRequest.js b/src/components/Reown/SendTransactionRequest.js index 73a649086..e5390eb16 100644 --- a/src/components/Reown/SendTransactionRequest.js +++ b/src/components/Reown/SendTransactionRequest.js @@ -71,15 +71,19 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 12, - alignItems: 'center', + alignItems: 'flex-start', }, itemTitle: { fontWeight: 'bold', fontSize: 16, + flexShrink: 0, + marginRight: 8, }, valueText: { fontSize: 16, fontWeight: '600', + flexShrink: 1, + textAlign: 'right', }, labelText: { fontSize: 14, @@ -145,7 +149,9 @@ const styles = StyleSheet.create({ }, valueWithIcon: { flexDirection: 'row', - alignItems: 'center', + alignItems: 'flex-start', + maxWidth: '60%', + flexShrink: 1, }, errorActions: { width: '100%', @@ -173,11 +179,13 @@ export const SendTransactionRequest = ({ sendTransactionRequest, onAccept, onRej unregisteredTokens, reown, tokenMetadata, + decimalPlaces, } = useSelector((state) => ({ tokens: state.tokens, tokenMetadata: state.tokenMetadata, unregisteredTokens: state.unregisteredTokens, - reown: state.reown + reown: state.reown, + decimalPlaces: state.serverInfo?.decimal_places, })); // Combine registered and unregistered tokens @@ -267,7 +275,7 @@ export const SendTransactionRequest = ({ sendTransactionRequest, onAccept, onRej const isNFT = tokenId && isTokenNFT(tokenId, tokenMetadata); - return numberUtils.prettyValue(value, isNFT ? 0 : constants.DECIMAL_PLACES); + return numberUtils.prettyValue(value, isNFT ? 0 : decimalPlaces); }; const truncateTxId = (txId) => { diff --git a/src/components/Reown/TransactionFees.js b/src/components/Reown/TransactionFees.js index 602c8e481..87e686bde 100644 --- a/src/components/Reown/TransactionFees.js +++ b/src/components/Reown/TransactionFees.js @@ -11,6 +11,7 @@ import { View, Text, } from 'react-native'; +import { useSelector } from 'react-redux'; import { t } from 'ttag'; import { constants } from '@hathor/wallet-lib'; import { HathorFlatList } from '../HathorFlatList'; @@ -26,6 +27,8 @@ const styles = StyleSheet.create({ marginLeft: 'auto', marginRight: 0, paddingRight: 16, + maxWidth: '50%', + flexShrink: 1, }, amountText: { fontSize: 16, @@ -79,7 +82,8 @@ export const TransactionFees = ({ fee }) => { * @param {boolean} props.isNft Whether the token is an NFT */ const FeeItem = ({ fee, symbol, isNft }) => { - const amountToRender = renderValue(fee, isNft); + const decimalPlaces = useSelector((state) => state.serverInfo?.decimal_places); + const amountToRender = renderValue(fee, isNft, decimalPlaces); return (