Skip to content

fix(decimal): render Reown/WalletConnect amounts with the network's decimal places #898

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
raul-oliveira wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(decimal): render Reown/WalletConnect amounts with the network's decimal places #898

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 45 additions & 41 deletions src/components/Reown/CreateTokenRequest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,48 +89,52 @@ function renderVersionFormatter(version) {
return versionMap[version] || t`Unknown`;
}

export const CreateTokenRequestData = ({ data }) => (
<View style={[commonStyles.card, commonStyles.cardSplit]}>
<View style={[{
flexDirection: 'column',
alignSelf: 'stretch',
gap: 8,
flex: 1
}]}
>
{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 (
<View style={[commonStyles.card, commonStyles.cardSplit]}>
<View style={[{
flexDirection: 'column',
alignSelf: 'stretch',
gap: 8,
flex: 1
}]}
>
{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) : '-'))}
</View>
</View>
</View>
);
);
};

export const CreateTokenRequest = ({ createTokenRequest }) => {
const { dapp, data } = createTokenRequest;
Expand Down
19 changes: 13 additions & 6 deletions src/components/Reown/GetUtxosRequest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -119,23 +120,23 @@ export const GetUtxosRequestData = ({ data }) => {
<View style={styles.filterRow}>
<Text style={styles.filterLabel}>{t`Amount smaller than:`}</Text>
<Text style={styles.filterValue}>
{renderValue(params.amountSmallerThan, isNFT)}
{renderValue(params.amountSmallerThan, isNFT, decimalPlaces)}
</Text>
</View>
)}
{params.amountBiggerThan != null && (
<View style={styles.filterRow}>
<Text style={styles.filterLabel}>{t`Amount bigger than:`}</Text>
<Text style={styles.filterValue}>
{renderValue(params.amountBiggerThan, isNFT)}
{renderValue(params.amountBiggerThan, isNFT, decimalPlaces)}
</Text>
</View>
)}
{params.maximumAmount != null && (
<View style={styles.filterRow}>
<Text style={styles.filterLabel}>{t`Maximum amount:`}</Text>
<Text style={styles.filterValue}>
{renderValue(params.maximumAmount, isNFT)}
{renderValue(params.maximumAmount, isNFT, decimalPlaces)}
</Text>
</View>
)}
Expand All @@ -160,7 +161,7 @@ export const GetUtxosRequestData = ({ data }) => {
<View style={styles.summaryRow}>
<Text style={styles.summaryLabel}>{t`Total amount:`}</Text>
<Text style={styles.summaryValue}>
{renderValue(totalAmount, isNFT)} {displaySymbol}
{renderValue(totalAmount, isNFT, decimalPlaces)} {displaySymbol}
</Text>
</View>
</View>
Expand Down Expand Up @@ -281,7 +282,7 @@ const styles = StyleSheet.create({
filterRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
alignItems: 'flex-start',
marginBottom: 8,
},
filterLabel: {
Expand All @@ -292,6 +293,9 @@ const styles = StyleSheet.create({
fontSize: 14,
fontWeight: '600',
color: COLORS.textColor,
flexShrink: 1,
marginLeft: 8,
textAlign: 'right',
},
filterValueAddress: {
fontSize: 12,
Expand All @@ -314,7 +318,7 @@ const styles = StyleSheet.create({
summaryRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
alignItems: 'flex-start',
marginBottom: 8,
},
summaryLabel: {
Expand All @@ -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,
Expand Down
157 changes: 83 additions & 74 deletions src/components/Reown/NanoContract/NanoContractActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
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,
Expand Down Expand Up @@ -143,6 +144,8 @@
value: [commonStyles.text, commonStyles.field],
addressSection: {
marginTop: 8,
marginLeft: DEFAULT_ICON_SIZE + 16,
paddingRight: 16,
},
contentWrapper: {
flex: 1,
Expand All @@ -154,88 +157,91 @@
const titleParts = isAuthority ? splitAuthorityTitle(title) : null;

return (
<View style={[commonStyles.cardSplit, commonStyles.listItem]}>
<NanoContractActionIcon type={action.type} />
<View style={[commonStyles.cardSplitContent, styles.contentWrapper]}>
{isAuthority && titleParts ? (
<View style={styles.authorityRow}>
<Text style={styles.authorityTitle}>{titleParts[0]}</Text>
<Text style={styles.authorityType}>{titleParts[1]}</Text>
</View>
) : (
<View style={styles.actionRow}>
<Text style={styles.action}>{title}</Text>
{!isRegistered && tokenSymbol && (
<TouchableOpacity onPress={() => showTokenInfo(action.token)}>
<FontAwesomeIcon
icon={faCircleInfo}
size={16}
color={COLORS.textColor}
/>
</TouchableOpacity>
)}
</View>
)}

{/* WITHDRAWAL: Show only address (address to send the amount and create the output) */}
{action.type === NanoContractActionType.WITHDRAWAL
&& action.address && (
<View style={styles.addressSection}>
<Text style={styles.valueLabel}>{t`Address to send amount:`}</Text>
<Text style={styles.value}>{action.address}</Text>
<View style={[{display: 'flex', flexDirection: 'column'}, commonStyles.listItem]}>

Check failure on line 160 in src/components/Reown/NanoContract/NanoContractActions.js

View workflow job for this annotation

GitHub Actions / test (22.x) 

A space is required before '}'

Check failure on line 160 in src/components/Reown/NanoContract/NanoContractActions.js

View workflow job for this annotation

GitHub Actions / test (22.x) 

A space is required after '{'
<View style={[commonStyles.cardSplit]}>
<NanoContractActionIcon type={action.type} />
<View style={[commonStyles.cardSplitContent, styles.contentWrapper]}>
{isAuthority && titleParts ? (
<View style={styles.authorityRow}>
<Text style={styles.authorityTitle}>{titleParts[0]}</Text>
<Text style={styles.authorityType}>{titleParts[1]}</Text>
</View>
)}
) : (
<View style={styles.actionRow}>
<Text style={styles.action}>{title}</Text>
{!isRegistered && tokenSymbol && (
<TouchableOpacity onPress={() => showTokenInfo(action.token)}>
<FontAwesomeIcon
icon={faCircleInfo}
size={16}
color={COLORS.textColor}
/>
</TouchableOpacity>
)}
</View>
)}

{/* DEPOSIT: Show address (to filter UTXOs) and changeAddress (change address) */}
{action.type === NanoContractActionType.DEPOSIT && (
<View style={[(action.address || action.changeAddress) && styles.addressSection]}>
{action.address && (
<View style={{ marginBottom: 8 }}>
<Text style={styles.valueLabel}>{t`Address to filter UTXOs:`}</Text>
<Text style={styles.value}>{action.address}</Text>
</View>
)}
{action.changeAddress && (
<View>
<Text style={styles.valueLabel}>{t`Change address:`}</Text>
<Text style={styles.value}>{action.changeAddress}</Text>
</View>
)}
</View>
)}
</View>

{/* GRANT_AUTHORITY: Show address (filter UTXOs) and authorityAddress (send authority) */}
{action.type === NanoContractActionType.GRANT_AUTHORITY && (
<View style={[(action.address || action.authorityAddress) && styles.addressSection]}>
{action.address && (
<View style={{ marginBottom: 8 }}>
<Text style={styles.valueLabel}>{t`Address to filter UTXOs:`}</Text>
<Text style={styles.value}>{action.address}</Text>
</View>
)}
{action.authorityAddress && (
<View>
<Text style={styles.valueLabel}>{t`Address to send new authority:`}</Text>
<Text style={styles.value}>{action.authorityAddress}</Text>
</View>
)}
</View>
{/* Show amount for deposit/withdrawal actions */}
{action.type !== NanoContractActionType.GRANT_AUTHORITY
&& action.type !== NanoContractActionType.ACQUIRE_AUTHORITY
&& action.amount != null && action.amount !== undefined && (
<Amount amount={action.amount} isNft={isNft} />
)}
</View>

{/* 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) */}

@tuliomir tuliomir Jul 31, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion(non-blocking): the layout restyle isn't covered by the acceptance criteria

This action item is restructured (addresses moved out of the icon row, indented by DEFAULT_ICON_SIZE + 16), and four files gain alignItems: 'flex-start' / textAlign: 'right' / maxWidth. Those render differently on a 2-decimal network too, so AC bullet 3 ("no behavior change on a 2-decimal network") no longer holds. Presumably it's making room for longer amounts — worth saying so in the description, so a reviewer knows to check the layout at the old precision as well.

{action.type === NanoContractActionType.WITHDRAWAL
&& action.address && (
<View style={styles.addressSection}>
<Text style={styles.valueLabel}>{t`Address to send authority:`}</Text>
<Text style={styles.valueLabel}>{t`Address to send amount:`}</Text>
<Text style={styles.value}>{action.address}</Text>
</View>
)}
</View>
)}

{/* DEPOSIT: Show address (to filter UTXOs) and changeAddress (change address) */}
{action.type === NanoContractActionType.DEPOSIT && (
<View style={[(action.address || action.changeAddress) && styles.addressSection]}>
{action.address && (
<View style={{ marginBottom: 8 }}>
<Text style={styles.valueLabel}>{t`Address to filter UTXOs:`}</Text>
<Text style={styles.value}>{action.address}</Text>
</View>
)}
{action.changeAddress && (
<View>
<Text style={styles.valueLabel}>{t`Change address:`}</Text>
<Text style={styles.value}>{action.changeAddress}</Text>
</View>
)}
</View>
)}

{/* GRANT_AUTHORITY: Show address (filter UTXOs) and authorityAddress (send authority) */}
{action.type === NanoContractActionType.GRANT_AUTHORITY && (
<View style={[(action.address || action.authorityAddress) && styles.addressSection]}>
{action.address && (
<View style={{ marginBottom: 8 }}>
<Text style={styles.valueLabel}>{t`Address to filter UTXOs:`}</Text>
<Text style={styles.value}>{action.address}</Text>
</View>
)}
{action.authorityAddress && (
<View>
<Text style={styles.valueLabel}>{t`Address to send new authority:`}</Text>
<Text style={styles.value}>{action.authorityAddress}</Text>
</View>
)}
</View>
)}

{/* Show amount for deposit/withdrawal actions */}
{action.type !== NanoContractActionType.GRANT_AUTHORITY
&& action.type !== NanoContractActionType.ACQUIRE_AUTHORITY
&& action.amount != null && action.amount !== undefined && (
<Amount amount={action.amount} isNft={isNft} />
{/* ACQUIRE_AUTHORITY: Show only address (send the authority and create the output) */}
{action.type === NanoContractActionType.ACQUIRE_AUTHORITY && action.address && (
<View style={styles.addressSection}>
<Text style={styles.valueLabel}>{t`Address to send authority:`}</Text>
<Text style={styles.value}>{action.address}</Text>
</View>
)}
</View>
)
Expand All @@ -249,13 +255,16 @@
* @param {boolean} props.isNft
*/
const Amount = ({ amount, isNft }) => {
const amountToRender = renderValue(amount, isNft);
const decimalPlaces = useSelector((state) => state.serverInfo?.decimal_places);

@tuliomir tuliomir Jul 31, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question(non-blocking): should these amounts honour the compressed/expanded preference?

renderValue's fourth argument is the wallet-wide amount format added in PR 891; TxDetailsModal passes getDisplayAmountFormat(state), the Reown screens don't, so they stay EXPANDED. Deliberate — full precision on a screen you're signing from — or just out of this slice's scope?

const amountToRender = renderValue(amount, isNft, decimalPlaces);

const styles = StyleSheet.create({
wrapper: {
marginLeft: 'auto',
marginRight: 0,
paddingRight: 16,
maxWidth: '50%',
flexShrink: 1,
},
amount: {
fontSize: 16,
Expand Down
4 changes: 3 additions & 1 deletion src/components/Reown/NanoContract/NanoContractMethodArgs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <SignedDataDisplay value={value} />;
Expand All @@ -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') {
Expand Down
Loading
Loading