feat(transactions): add toggleable memo field option #7351
Conversation
yhabib
force-pushed
the
yhabib/transactions/memo
branch
from
25af712 to
206ed35
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR adds a toggleable memo field option for ICP transactions through the Command Palette. Users can show or hide a memo input field in transaction modals, enabling advanced transaction workflows while keeping the interface clean by default.
- Adds Command Palette options to show/hide the transaction memo field
- Implements memo input field in ICP transaction modal when enabled
- Updates transaction utilities to handle memo text display
Reviewed Changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/lib/stores/transaction-memo-option.store.ts | Creates new store for managing memo field visibility |
| frontend/src/lib/utils/alfred.utils.ts | Adds Command Palette actions for toggling memo field |
| frontend/src/lib/modals/accounts/IcpTransactionModal.svelte | Implements conditional memo input and review display |
| frontend/src/lib/services/icp-accounts.services.ts | Updates transfer service to handle memo parameter |
| frontend/src/lib/utils/icp-transactions.utils.ts | Adds memo text mapping for ICP transactions |
| frontend/src/lib/utils/icrc-transactions.utils.ts | Adds memo text mapping for ICRC transactions |
| frontend/src/lib/components/accounts/TransactionCard.svelte | Displays memo text in transaction cards when enabled |
| frontend/src/lib/i18n/en.json | Adds internationalization strings for memo functionality |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
yhabib
force-pushed
the
yhabib/transactions/memo
branch
from
06a9184 to
7ce3cc7
Compare
yhabib
force-pushed
the
yhabib/transactions/memo
branch
from
5d90cb6 to
64f7cd6
Compare
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 15 out of 16 changed files in this pull request and generated 1 comment.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
yhabib
force-pushed
the
yhabib/transactions/memo
branch
2 times, most recently
from
f69c4e2 to
dd86a80
Compare
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
yhabib
force-pushed
the
yhabib/transactions/memo
branch
from
dd86a80 to
080bdf6
Compare
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| <Input | ||
| testId="transaction-memo-input" | ||
| name="memo" | ||
| inputType="number" | ||
| step={1} | ||
| placeholderLabelKey={$i18n.accounts.icp_transaction_memo_label} | ||
| bind:value={memo} | ||
| autocomplete="off" | ||
| showInfo | ||
| > |
There was a problem hiding this comment.
The memo field is configured as a number input with step={1}, but memo values can be arbitrary strings or hex values. Consider using inputType='text' to allow more flexible memo formats.
Copilot uses AI. Check for mistakes.
|
|
||
| const memoText = nonNullish(icrc1Memo) | ||
| ? uint8ArrayToHexString(icrc1Memo) | ||
| : !isNullish(memo) |
| <Identifier size="medium" {label} identifier={otherParty} /> | ||
| {/if} | ||
| {#if nonNullish(memoText) && $transactionMemoOptionStore === "show"} | ||
| <p class="value memo" data-tid="transaction-memo" |
There was a problem hiding this comment.
Is there a plan to use this id data-tid="transaction-memo"?
| } | ||
|
|
||
| const feeE8s = get(mainTransactionFeeE8sStore); | ||
| const icpMemo = nonNullish(memo) ? BigInt(memo) : undefined; |
There was a problem hiding this comment.
Quick double-check — is it safe to use BigInt(memo) without wrapping it in a try/catch?
# Motivation Support the transaction memo for both ICP and ICRC1 addresses for ICP transaction flows. This PR adds utils to validate the provided memo: * The `memo` field for ICP account transactions is an unsigned 64-bit integer. * The `icrc1Memo` field for ICRC1 account transactions is a byte array with a length of up to 32 bytes. # Changes - Updated `mapIcpTransactionToUi` to prepare the `memo` field for the UI when the value is present. It check first for `icrc1Memo` as this value is optional, if not present it uses the value from the `memo` field that is always present. - Added `isValidIcpMemo`, `isValidIcrc1Memo`, and `validateTransactionMemo` to validate the different types of memos. # Tests - Added unit tests for the utils - Tested the completed feature in #7351. # Todos - [x] Accessibility (a11y) – any impact? - [x] Changelog – is it needed?
|
Duplicated |
2 participants
Motivation
The memo field in an ICP transaction modal enables specific advanced user flows. This PR makes this field visible within the transaction modal after it is activated through a Command Palette command.
It supports both types of accounts: ICP and ICRC1
Screen.Recording.2025-10-04.at.22.03.35.mov
Some examples of transactions using the defined memo field can be found here
Changes
Tests
Todos