Skip to content

feat: show network fee for send tx, create token and create nano dialogs #144

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

Merged
pedroferreira1 merged 2 commits into from
Mar 9, 2026
Merged

feat: show network fee for send tx, create token and create nano dialogs #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0399a7
feat: show network fee for send tx, create token and create nano dialogs
pedroferreira1 Mar 9, 2026
652b060
feat: use correct network fee and deposit fee. Adjust create token di…
pedroferreira1 Mar 9, 2026
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
2 changes: 1 addition & 1 deletion packages/snap/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
},
"dependencies": {
"@hathor/hathor-rpc-handler": "workspace:*",
"@hathor/wallet-lib": "2.14.0",
"@hathor/wallet-lib": "2.16.0",
"@metamask/snaps-sdk": "9.2.0",
"node-stdlib-browser": "1.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/snap/snap.manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "Hathor Network Snap integration",
"proposedName": "Hathor Wallet",
"source": {
"shasum": "GSxSmcmiD0HXf+qm3n/2QBYBgd+lt/2sxRwJxNoNVlc=",
"shasum": "zuKLrJeNvUp9ImMD6+3cJ8ShO6sN9CSWjwFrwwitSFc=",
"location": {
"npm": {
"filePath": "dist/bundle.js",
Expand Down
25 changes: 25 additions & 0 deletions packages/snap/src/components/NetworkFee.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/**
* Copyright (c) Hathor Labs and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

import { Bold, Box, Divider, Text } from '@metamask/snaps-sdk/jsx';
import { constants as libConstants, numberUtils } from '@hathor/wallet-lib';

export const formatHtrAmount = (amount?: bigint): string => {
if (amount === undefined || amount === 0n) {
return '-';
}
return `${numberUtils.prettyValue(amount)} ${libConstants.DEFAULT_NATIVE_TOKEN_CONFIG.symbol}`;
}
Comment on lines +11 to +16
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 9, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Render zero fees as 0, not -.

0n is still a real amount. Treating it as missing data makes zero-fee or zero-deposit confirmations ambiguous in every dialog that reuses this helper.

🛠 Proposed fix 
 export const formatHtrAmount = (amount?: bigint): string => {
-  if (amount === undefined || amount === 0n) {
+  if (amount === undefined) {
     return '-';
   }
   return `${numberUtils.prettyValue(amount)} ${libConstants.DEFAULT_NATIVE_TOKEN_CONFIG.symbol}`;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const formatHtrAmount = (amount?: bigint): string => {
if (amount === undefined || amount === 0n) {
return '-';
}
return `${numberUtils.prettyValue(amount)} ${libConstants.DEFAULT_NATIVE_TOKEN_CONFIG.symbol}`;
}
export const formatHtrAmount = (amount?: bigint): string => {
if (amount === undefined) {
return '-';
}
return `${numberUtils.prettyValue(amount)} ${libConstants.DEFAULT_NATIVE_TOKEN_CONFIG.symbol}`;
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/snap/src/components/NetworkFee.tsx` around lines 11 - 16, The helper
formatHtrAmount currently treats 0n as missing and returns '-', which hides
legitimate zero fees; update formatHtrAmount so only undefined (or null if
applicable) returns '-' and 0n is formatted via numberUtils.prettyValue and
appended with libConstants.DEFAULT_NATIVE_TOKEN_CONFIG.symbol (e.g., "0
SYMBOL"); locate formatHtrAmount and adjust the conditional (remove the amount
=== 0n check) so zero values render as "0 <symbol>" using the existing
numberUtils.prettyValue and symbol constant.

Copy link
Copy Markdown
Contributor

@tuliomir tuliomir Mar 9, 2026

Choose a reason for hiding this comment

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

@pedroferreira1 I was about to make the same comment as the rabbit: shouldn't we hide the "Network fee" entirely when it is zero? Or maybe show explicitly zero instead of -?

Not a blocking comment, as this was probably discussed in a design somewhere before, but it feels weird to me as it is now.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 9, 2026

Choose a reason for hiding this comment

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

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

Copy link
Copy Markdown
Member Author

@pedroferreira1 pedroferreira1 Mar 9, 2026

Choose a reason for hiding this comment

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

As we discussed, this is the UI defined for the screen on figma. I actually liked it, to be honest


export const NetworkFee = ({ networkFee, showDivider = false }: { networkFee?: bigint; showDivider?: boolean }) => {
return (
<Box>
{showDivider ? <Divider /> : null}
<Text><Bold>Network fee:</Bold> {formatHtrAmount(networkFee)}</Text>
</Box>
);
}
1 change: 1 addition & 0 deletions packages/snap/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@
*/

export { PushTxWarning } from './PushTxWarning';
export { NetworkFee, formatHtrAmount } from './NetworkFee';
3 changes: 2 additions & 1 deletion packages/snap/src/dialogs/createNano.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { REQUEST_METHODS, DIALOG_TYPES } from '../constants';
import { Bold, Box, Card, Container, Copyable, Heading, Icon, Section, Text, Tooltip } from '@metamask/snaps-sdk/jsx';
import { constants as libConstants, bigIntUtils, dateUtils, NanoContractActionType, numberUtils } from '@hathor/wallet-lib';
import { PushTxWarning } from '../components';
import { NetworkFee, PushTxWarning } from '../components';

const renderOptionalContractDetail = (param, title) => {
if (!param) return null;
Expand Down Expand Up @@ -187,6 +187,7 @@ export const createNanoPage = async (data, params, origin) => (
</Section>
{renderArguments(data.parsedArgs)}
{renderActions(params.actions, data.tokenDetails)}
<NetworkFee networkFee={data.fee} />
<PushTxWarning pushTx={data.pushTx} />
</Box>
</Container>
Expand Down
35 changes: 30 additions & 5 deletions packages/snap/src/dialogs/createToken.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import { REQUEST_METHODS, DIALOG_TYPES } from '../constants';
import { Box, Card, Container, Divider, Heading, Section, Text } from '@metamask/snaps-sdk/jsx';
import { numberUtils } from '@hathor/wallet-lib';
import { formatHtrAmount } from '../components';

const renderConditionalCard = (title, value, parsedValue = null) => {
if (value == null) {
Expand All @@ -21,8 +22,28 @@ const boolToString = (bool) => {
return bool ? 'true' : 'false';
}

export const createTokenPage = async (data, params, origin) => (
await snap.request({
/**
* Get the fee model label based on token version
*/
const getFeeModelLabel = (version?: 'deposit' | 'fee'): string => {
switch (version) {
case 'fee':
return 'Fee Token';
case 'deposit':
default:
return 'Deposit Token';
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}

export const createTokenPage = async (data, params, origin) => {
const amount = BigInt(params.amount);
const feeModelLabel = getFeeModelLabel(params.version);

// Use pre-calculated values from the RPC handler (passed via data)
const networkFee = data.fee;
const depositAmount = data.deposit;

return await snap.request({
method: REQUEST_METHODS.DIALOG,
params: {
type: DIALOG_TYPES.CONFIRMATION,
Expand All @@ -36,7 +57,11 @@ export const createTokenPage = async (data, params, origin) => (
<Section>
<Card title="Name" value="" description={params.name} />
<Card title="Symbol" value="" description={params.symbol} />
<Card title="Amount" value="" description={numberUtils.prettyValue(params.amount)} />
<Card title="Fee model" value="" description={feeModelLabel} />
<Card title="Network fee" value="" description={formatHtrAmount(networkFee)} />
<Card title="Deposit amount" value="" description={formatHtrAmount(depositAmount)} />
<Divider />
<Card title="Amount" value="" description={numberUtils.prettyValue(amount)} />
{renderConditionalCard('Address', params.address)}
{renderConditionalCard('Change address', params.change_address)}
{renderConditionalCard('Create mint authority', params.create_mint, boolToString(params.create_mint))}
Expand All @@ -51,5 +76,5 @@ export const createTokenPage = async (data, params, origin) => (
</Container>
),
},
})
)
});
}
5 changes: 3 additions & 2 deletions packages/snap/src/dialogs/sendTransaction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { REQUEST_METHODS, DIALOG_TYPES } from '../constants';
import { Bold, Box, Container, Divider, Heading, Icon, Section, Text, Tooltip } from '@metamask/snaps-sdk/jsx';
import { constants as libConstants, numberUtils, helpersUtils } from '@hathor/wallet-lib';
import { PushTxWarning } from '../components';
import { NetworkFee, PushTxWarning } from '../components';

const renderInputs = (inputs) => {
if (!inputs) {
Expand Down Expand Up @@ -122,11 +122,12 @@ export const sendTransactionPage = async (data, params, origin) => (
<Divider />
{renderOutputs(params.outputs, data.tokenDetails)}
{renderChangeAddress(params.changeAddress)}
<NetworkFee networkFee={data.fee} showDivider />
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Dialog consumers:"
rg -n -C2 '\bdata\.(fee|networkFee|depositAmount)\b' packages/snap/src/dialogs

echo
echo "Potential producers / assignments:"
rg -n -C3 '\b(networkFee|fee|depositAmount)\s*:' packages -g '!**/dist/**' -g '!**/node_modules/**'

Repository: HathorNetwork/hathor-rpc-lib

Length of output: 21306

🏁 Script executed:

# Find type definitions for different prompt types
rg -n 'CreateTokenConfirmationPrompt|SendNanoContractTxConfirmationPrompt|SendTransactionConfirmationPrompt' packages/hathor-rpc-handler/src/types --type ts

# Look for where networkFee and depositAmount are assigned
rg -n -B3 -A3 'networkFee\s*=' packages/hathor-rpc-handler/src -g '!**/*test.ts'

# Check if there's a field mapping or transform in the handler files
rg -n 'depositAmount|networkFee' packages/hathor-rpc-handler/src/rpcMethods -g '!**/*test.ts'

Repository: HathorNetwork/hathor-rpc-lib

Length of output: 1303

🏁 Script executed:

# Read the type definitions to see what fields they have
sed -n '223,250p' packages/hathor-rpc-handler/src/types/prompt.ts
sed -n '228,250p' packages/hathor-rpc-handler/src/types/prompt.ts  
sed -n '312,330p' packages/hathor-rpc-handler/src/types/prompt.ts

Repository: HathorNetwork/hathor-rpc-lib

Length of output: 2146

🏁 Script executed:

# Find CreateTokenParams and NanoContractParams definitions
rg -n 'type CreateTokenParams|interface CreateTokenParams' packages/hathor-rpc-handler/src/types -A15

rg -n 'type NanoContractParams|interface NanoContractParams' packages/hathor-rpc-handler/src/types -A15

Repository: HathorNetwork/hathor-rpc-lib

Length of output: 2608

This dialog is correct; the bugs are in the other dialogs.

sendTransaction.tsx correctly reads data.fee matching the actual type definition. The issues are in packages/snap/src/dialogs/createToken.tsx (lines 44-45) and packages/snap/src/dialogs/createNano.tsx (line 190), which incorrectly read data.networkFee when the backend provides fee. Both dialogs will display - (fallback value) instead of the actual fee.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/snap/src/dialogs/sendTransaction.tsx` at line 125, The other dialogs
are reading the wrong property for fees; in the CreateToken dialog (component
CreateToken, around where NetworkFee is rendered) replace uses of
data.networkFee with data.fee so the NetworkFee component receives the
backend-provided fee, and in the CreateNano dialog (component CreateNano, where
NetworkFee is rendered near the submit/summary) do the same replacement of
data.networkFee -> data.fee to prevent the fallback "-" from showing; update any
related prop names or typings if needed to match the fee field.

</Section>
<PushTxWarning pushTx={data.pushTx} />
</Box>
</Container>
),
},
})
)
)
2 changes: 1 addition & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2507,7 +2507,7 @@ __metadata:
resolution: "@hathor/snap@workspace:packages/snap"
dependencies:
"@hathor/hathor-rpc-handler": "workspace:*"
"@hathor/wallet-lib": "npm:2.14.0"
"@hathor/wallet-lib": "npm:2.16.0"
"@jest/globals": "npm:29.7.0"
"@metamask/auto-changelog": "npm:3.4.4"
"@metamask/eslint-config": "npm:12.2.0"
Expand Down
Loading