Skip to content

chore(Sync): Refactor and improve Sync Code Instructions component#20563

Open
caybro wants to merge 1 commit into
masterfrom
19439-refactor-and-improve-sync-code-instructions-component-mobile-desktop
Open

chore(Sync): Refactor and improve Sync Code Instructions component#20563
caybro wants to merge 1 commit into
masterfrom
19439-refactor-and-improve-sync-code-instructions-component-mobile-desktop

Conversation

@caybro
Copy link
Copy Markdown
Member

@caybro caybro commented Apr 23, 2026

What does the PR do

  • simplify the instructions into coherent sentences, easier to translate, no repetitions; automatic numbering
  • present the instructions in a responsive/wrappable manner
  • remove the obsolete GetSyncCodeMobileInstructions.qml

Fixes #19439

Affected areas

Sync/Pair instructions

Quality checklist

Screencapture of the functionality

Normal layout/popup:
Snímek obrazovky z 2026-04-23 17-07-18

Narrow layout:
Snímek obrazovky z 2026-04-23 17-07-32

Impact on end user

  • cleaner UI

How to test

...

Risk

low

- simplify the instructions into coherent sentences, easier to
translate, no repetitions; automatic numbering
- present the instructions in a responsive/wrappable manner
- remove the obsolete GetSyncCodeMobileInstructions.qml

Fixes #19439
@caybro caybro force-pushed the 19439-refactor-and-improve-sync-code-instructions-component-mobile-desktop branch from f08bdee to 2f4db8e Compare April 23, 2026 15:13
@status-im-auto
Copy link
Copy Markdown
Member

status-im-auto commented Apr 23, 2026

Jenkins Builds

Click to see older builds (29)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 2f4db8e 1 2026-04-23 15:26:55 ~7 min tests/nim 📄log
✔️ 2f4db8e 1 2026-04-23 15:28:35 ~9 min android/arm64 🤖apk 📲
✔️ 2f4db8e 1 2026-04-23 15:32:14 ~13 min tests/ui 📄log
✔️ 2f4db8e 1 2026-04-23 15:35:51 ~16 min linux/x86_64 📦tgz
✔️ 2f4db8e 1 2026-04-23 15:35:55 ~16 min ios/aarch64 📱ipa 📲
✔️ 2f4db8e 1 2026-04-23 15:40:15 ~21 min macos/aarch64 🍎dmg
✔️ 2f4db8e 1 2026-04-23 15:43:59 ~24 min windows/x86_64 💿exe
✖️ 2f4db8e 10871 2026-04-23 16:04:40 ~28 min tests/e2e 📊rpt
✖️ 2f4db8e 2754 2026-04-23 16:10:42 ~42 min tests/e2e-android 📦pkg
✖️ 2f4db8e 2816 2026-04-25 07:20:53 ~1 hr 50 min tests/e2e-android 📦pkg
✖️ 2f4db8e 2853 2026-04-28 06:14:07 ~44 min tests/e2e-android 📦pkg
✖️ 2f4db8e 2888 2026-04-29 06:02:11 ~30 min tests/e2e-android 📦pkg
✖️ 2f4db8e 2917 2026-04-30 06:12:30 ~41 min tests/e2e-android 📦pkg
✖️ 2f4db8e 2978 2026-05-05 05:40:42 ~11 min tests/e2e-android 📦pkg
✖️ 2f4db8e 3017 2026-05-06 06:28:57 ~58 min tests/e2e-android 📦pkg
✖️ 2f4db8e 3112 2026-05-09 05:57:40 ~26 min tests/e2e-android 📦pkg
✖️ 2f4db8e 3127 2026-05-11 05:46:51 ~16 min tests/e2e-android 📦pkg
✔️ c4ca9600 2 2026-04-25 05:30:10 ~11 min android/arm64 🤖apk 📲
✔️ 3efe1437 3 2026-04-28 05:29:43 ~11 min android/arm64 🤖apk 📲
✔️ 5b2b5b46 4 2026-04-29 05:31:37 ~13 min android/arm64 🤖apk 📲
✔️ 47172b2b 5 2026-04-30 05:31:11 ~12 min android/arm64 🤖apk 📲
✔️ d15e0989 6 2026-05-05 05:29:19 ~10 min android/arm64 🤖apk 📲
✔️ 73433061 7 2026-05-06 05:30:29 ~11 min android/arm64 🤖apk 📲
✔️ 60266716 8 2026-05-07 05:31:49 ~13 min android/arm64 🤖apk 📲
✔️ c5e2b666 9 2026-05-09 05:30:56 ~12 min android/arm64 🤖apk 📲
✔️ 056eeaf1 10 2026-05-11 05:30:33 ~11 min android/arm64 🤖apk 📲
✔️ 27279797 11 2026-05-16 05:31:32 ~13 min android/arm64 🤖apk 📲
✔️ 0d8d8c56 12 2026-05-20 05:32:18 ~13 min android/arm64 🤖apk 📲
✔️ e82355b9 13 2026-05-21 05:31:08 ~12 min android/arm64 🤖apk 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 1c9f7a48 14 2026-05-22 05:30:54 ~12 min android/arm64 🤖apk 📲
✔️ 83dad1fa 15 2026-05-23 05:31:22 ~12 min android/arm64 🤖apk 📲

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Removed as it's no longer relevant

qsTr("Click %1", "Click Setup Syncing").arg(colorTag(qsTr("Setup Syncing"))), // 5.
qsTr("%1 on this device", "Scan QR on this device").arg(colorTag(qsTr("Scan QR"))), // 6.
qsTr("Scan or enter the code") // 7.
]
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Simple model of text instructions

Copy link
Copy Markdown
Member

@micieslak micieslak left a comment

Choose a reason for hiding this comment

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

Nice cleanup, code looks ok in general hovewer:

The old approach:
Image

The icons within the circle look better to me, they also seem to be better aligned in relation to text.

New one:
Image
Lack of circle, color not matching theme (probably bc of default parameter)

I also wonder if instead of separating it into multiple strings we could use just single string containing the whole content. Additionally it could be markdown, solving such details like wrapped line and proper indentation for numbering, what is not ideal now:

Image

@caybro
Copy link
Copy Markdown
Member Author

caybro commented Apr 24, 2026

Nice cleanup, code looks ok in general hovewer:
The icons within the circle look better to me, they also seem to be better aligned in relation to text.

Yeah, it's because it was a QML component :(

I also wonder if instead of separating it into multiple strings we could use just single string containing the whole content. Additionally it could be markdown, solving such details like wrapped line and proper indentation for numbering, what is not ideal now:

Good idea but with HTML (Markdown can't be styled like with CSS); the only problem remains how to either inject QML components into the markdown, or at least restyle/recolor the SVG icons

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.

Refactor and improve Sync Code Instructions component (mobile & desktop)

3 participants