Beet protocol deeplinks + QR codes + UX changes#213

grctest · 2022-09-27T16:39:34Z

Continued the action branch with a new PR since testing electron protocols requires building Beet; that's why there's action PR changes included.

Changelog:

Introduced QR code functionality - Scan, Drag/Drop & Upload QR codes -> launch prompt
- https://github.com/BTS-CM/BTS-QRCodes
Introduced TOTP functionality
- Electron based URI / Deeplinks as alternative to websocket communications #212
- https://github.com/BTS-CM/beet-deeplinks
Replace footer navigation bar with header floating menu button navigation
Split the settings page into separate pages for backup & linked apps
Split up components for improved maintainability/modularity

Demonstrations:
https://hive.blog/bitshares/@nftea.gallery/generating-bitshares-qr-codes-and-scanning-them-with-beet-for-blockchain-broadcast
https://hive.blog/bitshares/@nftea.gallery/generating-encrypted-bitshares-beet-deeplinks-for-bitshares-blockchain-operations

babel runtime installed and added to allowlist small babel config change build script uses npm

Additional os packages

Avoid adding duplicate accounts in the same wallet Fix wallet name bug during creation Avoid using text component

Deeplinks with query strings

Steps required to launch createPopup from deeplink triggered main function

Created a one time counter token page Deeplinks will only work if this page is in view. 30 seconds use time per OTC

Operations required from PR #211

One time use passwords every 45 seconds User can select which operations they want to receive deeplinks for.

Avoid constantly generating tokens, only generate token once the user has selected ops and clicked a button

Decoding request Getting ready to prompt user & handling approval/rejection

Rename otc component to totp Solve some warnings Start saving totp selected rows to settings store - chain based preference storage, not account.

Saving rows to settings

Fix op selection save detection

Progress indicator Decrypt deeplink request with generated totp Detect unsupported chain Add warning about sharing the token

Timeout was broken, now automatically logs out after a period of inactivity

Check wallet is unlocked on deeplink trigger Properly triggering prompts Bring additional visualized operations in from other PR for prompts to work as expected New getters in accountstore TODO: Fix examples triggering assert exceptions relating to trx expiry fields

colour changes swapping components fix selected row comparison bug small locale change

Remove actionbar Add menu button to replace actionbar nav Move langselect to mainmenu component for logged in users Initial QR page Change style of lang select button

Menu with icons Initial support for QR codes

Now able to scan and console log QR codes Detect failed webcam initialization Swap camera button Use vue3 package for QR codes

Outline QR code Add Beet logo to QR code during scanning Initial drag & drop code

* Change balance loading animation to skeleton to reduce visual layout changes * Remember which account is currently selected in dashboard * Drag and drop implemented * Fix main menu selection bug

Rename filenames to use similar convention Split components up for reuse Create new component folders Simplify operation specification (custom vs all) Split settings page into 2 new pages - backup and dapps

Extract the operations selection component from totp component Enable the user to quickly select all or customize their preferred operations for TOTP.

Additional 'from' field in operations for matching with accounts available within current beet wallet.

on totp back erase state of discarded totp code use correct field for visualizedAccount input

Add account select dropdown to qr and totp components Some styling tweaks

Upload another QR button Add operation scope prompt to QR code component

Emit from sub qr components to parent qr component on qr decode Introduce new blockchain api function for Bitshares (and default templates) for handling QR codes

QR scanning operational

Terminal generated QR codes might not come with ref block num/prefix; if not present get them from finalize

Notify on failed QR Improve TOTP UX

Support switching to secondary camera (and back) for qr scanning Only scan once per QR Fix locale string Fix enumeratedDevices check on switch camera

src/lib/blockchains/BitShares.js

* Tweaks to translation component * Popup prompts now use an accordion component to provide additional prettified JSON insight into the request and possible payload. Enabling users to dig into prompt details if cautious.

grctest · 2022-11-04T17:46:06Z

@abitmore @sschiessl-bcp @clockworkgr

Unless there are any further requests for change, this pull request is ready for merge IMO.

Once this PR is merged, I'll uplift the other pull requests with the changes this has introduced.

sschiessl-bcp · 2022-11-06T10:47:20Z

I squashed previous PR, can you please rebase? I can also help with that if desired, let me know, although code author usually is much quicker with that

sschiessl-bcp · 2022-11-06T14:23:02Z

Reverted previous PR (#211) as agreed upon as this one should be merged first

sschiessl-bcp · 2022-11-06T14:29:15Z

@grctest please rebase to latest develop

grctest · 2022-11-07T19:58:21Z

@grctest please rebase to latest develop

New rebased PR: #219

* Rebased PR #213 Add QR code support Add TOTP code support Improve menu UX Improve prompt UX with accordion components Fix wallet idle/timeout functionality * Fix logout warning Dashboard contents were attempting render during logout * Update lang-select.vue Remove 50px top margin on language dropdown button * Fix reported issues rename settings store totp to chainPermissions fix qr/totp not showing fix several warnings on logout from certain routes * Update de.json * requested changes Prompt language selector moved to new settings accordion segment Swapped language selector button type UX improvements in transactionrequestpopup

grctest added 10 commits September 10, 2022 04:04

Create node.js.yml

a22ed75

Build ops fixes

fa8cb94

babel runtime installed and added to allowlist small babel config change build script uses npm

Build packages for macos linux

46a34d8

Additional os packages

Fix add account bug

d7810ce

Avoid adding duplicate accounts in the same wallet Fix wallet name bug during creation Avoid using text component

Initial support for deeplinks

6eb4eef

Deeplinks with query strings

main to render comms

27005b8

Steps required to launch createPopup from deeplink triggered main function

OTC page

ef2fa78

Created a one time counter token page Deeplinks will only work if this page is in view. 30 seconds use time per OTC

Operations

5a88eb3

Operations required from PR #211

Work on TOTP page

01f76b3

One time use passwords every 45 seconds User can select which operations they want to receive deeplinks for.

Generate TOPT on demand

1ef3167

Avoid constantly generating tokens, only generate token once the user has selected ops and clicked a button

sschiessl-bcp force-pushed the develop branch 2 times, most recently from d468adf to e54fd5a Compare September 28, 2022 16:35

grctest added 7 commits September 28, 2022 18:37

Handling args and prompting

f9e6558

Decoding request Getting ready to prompt user & handling approval/rejection

Continued totp development

33ca205

Rename otc component to totp Solve some warnings Start saving totp selected rows to settings store - chain based preference storage, not account.

Update totp.vue

0c3cc7a

Saving rows to settings

Update totp.vue

a637668

Fix op selection save detection

More protocol development

1d78616

Progress indicator Decrypt deeplink request with generated totp Detect unsupported chain Add warning about sharing the token

Fix timeout

18f228b

Timeout was broken, now automatically logs out after a period of inactivity

grctest mentioned this pull request Oct 4, 2022

Electron based URI / Deeplinks as alternative to websocket communications #212

Closed

grctest added 6 commits October 5, 2022 13:05

UX tweaks

462963a

colour changes swapping components fix selected row comparison bug small locale change

UX work

91f5780

Remove actionbar Add menu button to replace actionbar nav Move langselect to mainmenu component for logged in users Initial QR page Change style of lang select button

UX changes

a779ee5

Menu with icons Initial support for QR codes

QR Codes scannable

4428a15

Now able to scan and console log QR codes Detect failed webcam initialization Swap camera button Use vue3 package for QR codes

QR commit

0ba3c20

Outline QR code Add Beet logo to QR code during scanning Initial drag & drop code

Fixes and features

ea57fe7

* Change balance loading animation to skeleton to reduce visual layout changes * Remember which account is currently selected in dashboard * Drag and drop implemented * Fix main menu selection bug

grctest changed the title ~~Beet protocol~~ Beet protocol deeplinks + QR codes + UX changes Oct 7, 2022

grctest added 3 commits October 7, 2022 15:43

Refactoring

164e50c

Rename filenames to use similar convention Split components up for reuse Create new component folders Simplify operation specification (custom vs all) Split settings page into 2 new pages - backup and dapps

New operations component

67909da

Extract the operations selection component from totp component Enable the user to quickly select all or customize their preferred operations for TOTP.

Additional operation fields

41d8f97

Additional 'from' field in operations for matching with accounts available within current beet wallet.

grctest added 8 commits October 8, 2022 13:02

bug fixes

94230fa

on totp back erase state of discarded totp code use correct field for visualizedAccount input

account select

171317b

Add account select dropdown to qr and totp components Some styling tweaks

QR UX

8fa84cb

Upload another QR button Add operation scope prompt to QR code component

QR progress

d4493e8

Emit from sub qr components to parent qr component on qr decode Introduce new blockchain api function for Bitshares (and default templates) for handling QR codes

QR Scanning

07548dd

QR scanning operational

Handle custom QRs

a8364f3

Terminal generated QR codes might not come with ref block num/prefix; if not present get them from finalize

QR & TOTP changes

685a3b2

Notify on failed QR Improve TOTP UX

QR Scan component fixes

4306013

Support switching to secondary camera (and back) for qr scanning Only scan once per QR Fix locale string Fix enumeratedDevices check on switch camera

grctest mentioned this pull request Oct 19, 2022

Further Bitshares operations support #207

Closed

grctest commented Oct 19, 2022

View reviewed changes

src/lib/blockchains/BitShares.js Show resolved Hide resolved

grctest mentioned this pull request Oct 19, 2022

"view more/source" in prompts #217

Closed

Additional info in prompts

3c5dd44

* Tweaks to translation component * Popup prompts now use an accordion component to provide additional prettified JSON insight into the request and possible payload. Enabling users to dig into prompt details if cautious.

grctest mentioned this pull request Oct 21, 2022

Limit operation types per linkage #211

Merged

grctest mentioned this pull request Nov 6, 2022

Rebased PR #213 #219

Merged

grctest closed this Nov 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Beet protocol deeplinks + QR codes + UX changes#213

Beet protocol deeplinks + QR codes + UX changes#213
grctest wants to merge 35 commits intobitshares:developfrom
grctest:beetProtocol

grctest commented Sep 27, 2022 •

edited

Loading

Uh oh!

Uh oh!

grctest commented Nov 4, 2022

Uh oh!

sschiessl-bcp commented Nov 6, 2022 •

edited

Loading

Uh oh!

sschiessl-bcp commented Nov 6, 2022

Uh oh!

sschiessl-bcp commented Nov 6, 2022

Uh oh!

grctest commented Nov 7, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

grctest commented Sep 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

grctest commented Nov 4, 2022

Uh oh!

sschiessl-bcp commented Nov 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sschiessl-bcp commented Nov 6, 2022

Uh oh!

sschiessl-bcp commented Nov 6, 2022

Uh oh!

grctest commented Nov 7, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

grctest commented Sep 27, 2022 •

edited

Loading

sschiessl-bcp commented Nov 6, 2022 •

edited

Loading