feat: real designs for Keystone hardware wallet signup and signing - #591
Conversation
- render icons - fix steps
|
| label: widget.debugActionLabel, | ||
| onTap: _simulateScan, | ||
| variant: ButtonVariant.danger, | ||
| width: null, |
There was a problem hiding this comment.
why do we have width null?
There was a problem hiding this comment.
Hm... why do we have to create new component for this, we can extend the button variant.
There was a problem hiding this comment.
we already have an underlined text button?
| gradient: const LinearGradient( | ||
| begin: Alignment.topLeft, | ||
| end: Alignment.bottomRight, | ||
| colors: [Color(0xFF1A1A1A), Color(0xFF141210)], |
There was a problem hiding this comment.
Is this a new color or we already have this in the theme?
| accountType: AccountType.keystone, | ||
| ); | ||
| await _accountsService.addAccount(account); | ||
| ref.invalidate(accountsProvider); |
There was a problem hiding this comment.
Do we always invalidate accounts and activeAccount providers?
If so, we could have a refactor of this maybe, to not repeat ourselves many times and one place to handle logic of the account invalidation.
There was a problem hiding this comment.
if we add an account we need to
| final session = KeystoneSigningSession( | ||
| account: signer, | ||
| buildCall: () => widget.buildCall(signer, _callBytes), | ||
| title: widget.labels.title(l10n), |
There was a problem hiding this comment.
Is this intentional removing title? Just confirming it's not unintentionally deleted
| Widget _details(AppColorsV2 colors, AppTextTheme text, KeystoneSigningSession session) { | ||
| Widget _details(AppColorsV2 colors, AppTextTheme text, AppLocalizations l10n, KeystoneSigningSession session) { | ||
| final labelStyle = text.transactionDetailRowLabel?.copyWith(color: colors.textTertiary); | ||
| final valueStyle = text.transactionDetailRowValue?.copyWith( |
There was a problem hiding this comment.
I think we will need to revisit how we manage text style, right now it's already drifting from the original purpose of supporting adaptive font because we supported iPad before. Now it only bring noise since the way we use it now just arbitrary customizing.
We might don't need it anymore except the basic font family and size scaling.
| gradient: LinearGradient( | ||
| begin: Alignment.topCenter, | ||
| end: Alignment.bottomCenter, | ||
| colors: [colors.textError.withValues(alpha: 0.1), const Color(0xFF5A1B14).withValues(alpha: 0.1)], |
There was a problem hiding this comment.
Need to check this color if reused or not.
| height: 40, | ||
| alignment: Alignment.center, | ||
| decoration: BoxDecoration( | ||
| border: Border.all(color: const Color(0xFFFF5B5B).withValues(alpha: 0.1)), |
There was a problem hiding this comment.
Hm.... two ways of controlling alpha ??? kind of smelly to me
There was a problem hiding this comment.
So, we are okay to have repo rule now?
There was a problem hiding this comment.
yeah so AI knows how to check it in without errors
- New theme colors errorLight, errorDeep, surfaceHero replace hardcoded hex values in the keystone hero and warning cards; alpha derivation unified on useOpacity (no withValues in widgets) - UnderlinedTextLink folded into QuantusButton as ButtonVariant.underline - invalidateAccountProviders() replaces the repeated accountsProvider + activeAccountProvider invalidation pairs - Scanner overlay/brackets use theme colors; drop redundant width: null - AGENTS.md: UI conventions (theme colors, useOpacity, theme text styles, extend existing components)
Main landed the Keystone redesign (#591/#594) in a newer form, so the add/add and screen conflicts resolve to main's versions (theme conventions, invalidateAccountProviders, underline button variant, simplified connect steps + matching l10n cleanup). Re-applied on top: - animated_qr_scanner: DetectionSpeed.unrestricted + QR-only formats - keystone_sign_screen: 400-byte fragments via encodeUr maxFragmentLength Regenerated app_localizations from the merged .arb files.
2 participants
Replaces the dev-design Keystone screens with the real designs from the Quantus Redesign Figma.
Screenshots: See below (simulator)
Designs:
Add Keystone flow (2 screens)
AddHardwareAccountScreenrewritten as the intro screen: hero product image, headline, "Connect Hardware Wallet" button, and a "Don't have one? Get a Keystone ↗" link. Constructor unchanged, so existing callers (add-account menu, create-account) are untouched.ConnectKeystoneScreen: firmware reminder + on-device steps with the Figma icons, then "Ready to Scan" opens the QR scanner. The name/address form is gone — the account is created directly after scanning (name defaults to "Keystone Wallet"). Debug test-address path kept inkDebugMode.Send signing flow — now a 3-step journey
Most of the send flow is unchanged; the branch where the user signs with Keystone is redesigned:
KeystoneSignScreen: step indicator, "Scan with your Keystone", bordered QR card, "YOU ARE SIGNING" details (amount/recipient + checksum), "Continue to Sign" / "Cancel Transaction".KeystoneVerifyScreen: "Check your Keystone Screen" — dark summary card with amount and recipient, red mismatch warning, "Continue to Sign" / "It doesn't match".AnimatedQrScannerrestyled: app bar, step header, rounded camera view with corner brackets, "RECEIVING SIGNATURE" progress bar.KeystoneRejectScreen("It doesn't match"): reject-on-device instructions, "I rejected it on Keystone", "Contact Support" mailto.Multisig hardware signing gets the same new flow automatically since it shares these screens.
Supporting changes
textSubtlecolor inAppColorsV2, sharedKeystoneStepLabel/KeystoneWarningCardwidgets,UnderlinedTextLinkcomponentassets/v2/KeystoneSigningSession.title(app bar is "Sign with Keystone" per design)Deliberate deviations from Figma
Testing
melos run formatclean;dart analyze --fatal-infosclean onlib/andtest/(melos' own analyze run kept crashing its analysis server on mobile-app — env flake, not a code issue)AppConstants.debugHardwareWalletto force the Keystone path for testing without hardware