Skip to content

frontend: use mobile header for back navigation on mobile#4197

Merged
shonsirsha merged 1 commit into
BitBoxSwiss:masterfrom
shonsirsha:frontend-back-chevron
Jul 2, 2026
Merged

frontend: use mobile header for back navigation on mobile#4197
shonsirsha merged 1 commit into
BitBoxSwiss:masterfrom
shonsirsha:frontend-back-chevron

Conversation

@shonsirsha

@shonsirsha shonsirsha commented Jun 22, 2026

Copy link
Copy Markdown
Collaborator

Chevron Back On Mobile

  • Send
  • Receive
  • AddAccount
  • ConnectScreenWalletConnect / WCConnectForm
  • ElectrumSettings (Connect full node)
  • Swap
  • ManageBackups / BackupsList
  • SDCardCheck covered by surrounding ManageBackups header
  • RecoveryWords
  • Bip85
  • Passphrase / EnableInfo / DisableInfo
  • SetupOptions advanced screen
  • SetDeviceName
  • SetDeviceNameWithSDCard via SetDeviceName
  • RestoreFromSDCardBackup

titleOnly Usage

  • MobileHeader gets the new variant="titleOnly" support.
  • ConnectScreenWalletConnect uses it while WalletConnect is loading:
    • variant={loading ? 'titleOnly' : 'back'}. This shows the mobile title without a chevron during connect/pairing loading.

@shonsirsha shonsirsha requested a review from thisconnect June 22, 2026 04:36
@shonsirsha shonsirsha marked this pull request as ready for review June 22, 2026 04:36
@shonsirsha shonsirsha requested a review from a team as a code owner June 22, 2026 04:36
title={
status === 'connect' ? (
<MobileHeader
variant={loading ? 'titleOnly' : 'back'}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

The "loading" state confused me quickly, it is not about loading the UI but gets set to true when doing a new connection while pairing.

tested on Android 👍

Comment thread frontends/web/src/routes/device/bitbox02/setup/name.tsx Outdated
Comment thread frontends/web/src/routes/device/bitbox02/setup/restore.tsx Outdated
Comment thread frontends/web/src/routes/device/bitbox02/bip85.tsx Outdated
Comment thread frontends/web/src/routes/device/bitbox02/bip85.tsx
Comment thread frontends/web/src/routes/device/bitbox02/passphrase.tsx Outdated
Comment thread frontends/web/src/routes/device/bitbox02/recovery-words.tsx Outdated
Comment thread frontends/web/src/routes/account/add/add-account.tsx
Comment thread frontends/web/src/routes/settings/components/mobile-header.tsx
@shonsirsha shonsirsha marked this pull request as draft June 23, 2026 12:32
@shonsirsha shonsirsha force-pushed the frontend-back-chevron branch from 6df31da to 7328cf1 Compare June 25, 2026 15:10
@shonsirsha shonsirsha requested a review from thisconnect June 25, 2026 15:10
@shonsirsha shonsirsha marked this pull request as ready for review June 25, 2026 15:10
@shonsirsha

Copy link
Copy Markdown
Collaborator Author

@thisconnect , thanks a lot for the reviews! PTAL 🙏

@shonsirsha shonsirsha force-pushed the frontend-back-chevron branch 2 times, most recently from 3a0f7fb to 473c147 Compare July 2, 2026 07:26

@thisconnect thisconnect left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

tested Qt + Android LGTM with one small last nit

fullscreen
onClose={isMobile ? undefined : handleClose}
verticallyCentered>
{mobileHeader()}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

nit:

Suggested change
{mobileHeader()}
<MobileHeader
title={t('deviceSettings.expert.bip85.title')}
withViewPadding
/>

fullscreen
onClose={isMobile ? undefined : handleClose}
verticallyCentered>
{mobileHeader(() => setStatus('info-what'))}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

nit: simpler and less mental overhead here and all the other places below

Suggested change
{mobileHeader(() => setStatus('info-what'))}
<MobileHeader
onClick={() => setStatus('info-what')}
title={t('deviceSettings.expert.bip85.title')}
withViewPadding
/>

changed the previously used Back button on page body, to be
the chevron back on mobile header.
@shonsirsha shonsirsha force-pushed the frontend-back-chevron branch from 473c147 to cb9a004 Compare July 2, 2026 16:55
@shonsirsha shonsirsha merged commit 621b949 into BitBoxSwiss:master Jul 2, 2026
11 checks passed
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