Skip to content
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.

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

Feature: Ledger Wallet Support for Signing Messages #562

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

blouflashdb
Copy link

Feature: Ledger Wallet Support for Signing Messages

This pull request introduces the ability to use Ledger Wallets to sign messages.

Key Notes

1. StatusMessage Component

  • I was unable to get the StatusMessage component to work as expected.
  • The issue seems to be related to CSS, which I have limited experience with.
  • To avoid blocking this feature, I decided to exclude the StatusMessage from this PR.
  • If needed, I’m happy to provide the groundwork for it, and someone more experienced with CSS can finalize the styling and integration.

2. Tab Space UI Feature

  • This PR does not include the Tab Space UI feature.
  • If this feature is deemed necessary, I suggest someone submits an issue to prioritize and address it in a separate iteration.

Focus

The primary goal of this PR is to enable message signing with Ledger Wallets, which I believe is the most critical functionality at this time.

Please review and let me know if there are additional adjustments needed!

Copy link
Member

@danimoh danimoh left a comment

Choose a reason for hiding this comment

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

Hello @blouflashdb,

thank you very much for this PR. The functionality is already mostly there 🔥
However, there are some things that need to be addressed. I will take it from here and work on these changes in the new year.

I wish you a happy new year 🍾

msgid "Sign Message"
msgstr "Mensahe sa Pag-sign"

#: src/views/SignMessageLedger.vue:17
msgid "Signer"
msgstr "Signer"
Copy link
Member

Choose a reason for hiding this comment

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

Missing translations should be left empty, otherwise, our translators don't know that they'll need to work on those.

Also, missing translations automatically fall back to English, so no English fallback needs to be provided manually.

Comment on lines +97 to +99
case WalletType.LEDGER:
this.$router.push({name: `${RequestType.SIGN_MESSAGE}-ledger`});
return;
Copy link
Member

Choose a reason for hiding this comment

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

Have to ensure the active account is set to the signer address, even when the address was not selected by the user but requested via the API. Otherwise, SignTransactionLedger will sign with the wrong address.

Comment on lines +21 to +23
<div class="bottom-container">
<LedgerUi small></LedgerUi>
</div>
Copy link
Member

Choose a reason for hiding this comment

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

StatusScreen missing here.

<Identicon :address="activeAccount.userFriendlyAddress"></Identicon>
</div>
<div class="account-text">
<div class="label" id="signer-label">{{ activeAccount.defaultLabel }}</div>
Copy link
Member

Choose a reason for hiding this comment

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

Should show the user label instead of the default label.

Comment on lines +40 to +42
import { WalletInfo } from '@/lib/WalletInfo';
import { AccountInfo } from '@/lib/AccountInfo';
import LedgerApi from '@nimiq/ledger-api';
Copy link
Member

Choose a reason for hiding this comment

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

Mixed syntax of @ and ...

Comment on lines +79 to +143
.small-page#sign-message .page-body {
display: flex;
flex-direction: column;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 0;
}

.account {
display: flex;
flex-direction: row;
align-items: center;
padding: 3rem 2rem;
}

.account .identicon {
width: 5.625rem;
height: 5.625rem;
margin-right: 2rem;
flex-shrink: 0;
}

.account-text {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-grow: 1;
font-size: 2rem;
max-width: calc(100% - 5.625rem - 2rem);
/* .identicon width and margin-right */
}

.account .label {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.account .label-right {
opacity: 0.7;
margin-left: 2rem;
}

#message {
font-size: 1.75rem;
line-height: 1.2;
color: rgba(31, 35, 72, .7);
/* Based on Nimiq Blue */
background-color: rgba(31, 35, 72, .05);
/* Based on Nimiq Blue */
border: solid 1px rgba(31, 35, 72, .1);
/* Based on Nimiq Blue */
border-radius: 0.5rem;
outline: none;
width: 100%;
padding: 1.5rem;
flex-grow: 1;
resize: none;
font-family: 'Fira Mono', monospace;
}

.bottom-container {
height: 23rem;
}
Copy link
Member

Choose a reason for hiding this comment

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

Some styling issues regarding sizes and paddings..

</PageHeader>

<PageBody>
<textarea id="message" readonly="readonly" :value="request.message"></textarea>
Copy link
Member

Choose a reason for hiding this comment

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

Would be theoretically better to use a class instead of an id here, as if there were to be a second SignMessageLedger instance on the page, it would be a duplicate identifier. Not that it's an actual issue here though, as there won't be two SignMessageLedger instances at the same time :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants