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 (