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

[#8348] [Multi-Account] Account overview + individual wallet UI #8425

Merged
merged 1 commit into from
Jun 18, 2019

Conversation

flexsurfer
Copy link
Member

@flexsurfer flexsurfer commented Jun 17, 2019

fixes #8348

Replaced wallet main screen by account screen
Introduced new accounts explorer screen
Moved all events from wallet ui ns to wallet core
Removed unused wallet screens

For QA:
test all wallet screens

and these two
#8370

@flexsurfer flexsurfer requested a review from a team as a code owner June 17, 2019 09:43
@flexsurfer flexsurfer requested a review from a team June 17, 2019 09:43
@flexsurfer flexsurfer self-assigned this Jun 17, 2019
@auto-assign auto-assign bot removed request for a team June 17, 2019 09:43
@status-github-bot
Copy link

Pull Request Checklist

  • Have you updated the documentation, if impacted (e.g. docs.status.im)?

@flexsurfer
Copy link
Member Author

@errorists could you check assets management list rendering on ios, thanks

@status-im-auto
Copy link
Member

status-im-auto commented Jun 17, 2019

Jenkins Builds

Click to see older builds (25)
Commit #️⃣ Finished (UTC) Duration Platform Result
6178076 #1 2019-06-17 09:47:54 ~3 min ios 📄 log
✔️ 6178076 #1 2019-06-17 09:56:03 ~12 min linux 📦 App
✔️ 6178076 #1 2019-06-17 09:57:51 ~13 min windows 📦 exe
✔️ 6178076 #1 2019-06-17 09:58:48 ~14 min macos 📦 dmg
✔️ 6178076 #1 2019-06-17 10:04:24 ~20 min android 📦 apk
✔️ 6178076 #1 2019-06-17 10:04:39 ~20 min android-e2e 📦 apk
✔️ 6178076 #2 2019-06-17 14:15:28 ~11 min ios 📦 ipa
✔️ 62285db #3 2019-06-18 10:38:00 ~12 min ios 📦 ipa
✔️ 62285db #2 2019-06-18 10:41:26 ~15 min macos 📦 dmg
62285db #2 2019-06-18 10:42:13 ~16 min android 📄 log
62285db #2 2019-06-18 10:42:30 ~16 min android-e2e 📄 log
✔️ 62285db #2 2019-06-18 10:48:04 ~22 min linux 📦 App
✔️ 62285db #2 2019-06-18 10:49:18 ~23 min windows 📦 exe
✔️ 56e6979 #4 2019-06-18 11:11:41 ~13 min ios 📦 ipa
✔️ 56e6979 #3 2019-06-18 11:13:15 ~14 min android 📦 apk
56e6979 #3 2019-06-18 11:13:26 ~15 min android-e2e 📄 log
✔️ 56e6979 #3 2019-06-18 11:14:16 ~15 min macos 📦 dmg
✔️ 56e6979 #3 2019-06-18 11:20:24 ~22 min linux 📦 App
✔️ 56e6979 #3 2019-06-18 11:26:07 ~27 min windows 📦 exe
✔️ 30d9aee #6 2019-06-18 11:53:30 ~13 min ios 📦 ipa
✔️ 30d9aee #5 2019-06-18 11:56:13 ~15 min macos 📦 dmg
✔️ 30d9aee #5 2019-06-18 11:56:30 ~16 min android 📦 apk
✔️ 30d9aee #5 2019-06-18 11:56:38 ~16 min android-e2e 📦 apk
✔️ 30d9aee #5 2019-06-18 11:57:17 ~17 min linux 📦 App
✔️ 30d9aee #5 2019-06-18 11:58:53 ~18 min windows 📦 exe
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 3a320f0 #7 2019-06-18 12:57:39 ~12 min ios 📦 ipa
✔️ 3a320f0 #6 2019-06-18 12:57:39 ~12 min macos 📦 dmg
✔️ 3a320f0 #6 2019-06-18 13:15:45 ~31 min android 📦 apk
✔️ 3a320f0 #6 2019-06-18 13:19:25 ~34 min android-e2e 📦 apk
✔️ 3a320f0 #6 2019-06-18 13:22:03 ~37 min linux 📦 App
✔️ 3a320f0 #6 2019-06-18 13:24:12 ~39 min windows 📦 exe
✔️ 881412e #8 2019-06-18 13:34:17 ~13 min ios 📦 ipa
✔️ 881412e #7 2019-06-18 13:35:32 ~14 min macos 📦 dmg
881412e #7 2019-06-18 13:43:28 ~22 min android-e2e 📄 log
✔️ 881412e #7 2019-06-18 13:48:13 ~27 min android 📦 apk
✔️ 881412e #7 2019-06-18 13:52:57 ~31 min linux 📦 App
✔️ 881412e #7 2019-06-18 13:53:48 ~32 min windows 📦 exe
✔️ 881412e #8 2019-06-18 14:09:38 ~14 min android-e2e 📦 apk

(let [request-command (get-in db [:id->command ["request" #{:personal-chats}]])]
(fx/merge cofx
(chat/start-chat public-key nil)
Copy link
Contributor

Choose a reason for hiding this comment

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

Why that?

Copy link
Member Author

Choose a reason for hiding this comment

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

i just moved this code, i think we want to send a message and . if there is no chat we want to start it

(let [price (get-in prices [symbol (-> currency :code keyword) :price])]
(assoc token
:price price
:value (when (and balance price)
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe value shouldn't be in the map at all when nil

@asemiankevich asemiankevich self-assigned this Jun 17, 2019
@asemiankevich
Copy link
Contributor

asemiankevich commented Jun 17, 2019

checks:

  • added custom token on mainnet
  • breed a cat on mainnet
  • managed assets enable / disable
  • all transactions in simple dapp
  • can check collectibles / assets / switching between
  • send / receive from wallet / chat
  • can install stickers

@errorists
@flexsurfer some issues, please take a look:

  • on android when having a lot of decimals, amount value is cut, values are not aligned (looks ok on iOS)
  • Add account button is cut on android (no borders)

image

  • Set currency is now in wallet, please remove from Profile
  • when set currency from new wallet screen -> tapping back does not redirect me to wallet, i have to tap the wallet tap again (some kind of UX)
  • token values (prices) are not shown when account is recovered, should force it by currency switch
    (then shown fine)

image

image

  • can't capture screenshot on Android, says that screenshots are not allowed by app / organization
  • View signing phrase button is not tappable
  • Disable (gray-out) Add account / Add a watch only account bottom sheet options until developed
  • no incoming chat message when sending eth / tokens from wallet to contact

@flexsurfer
Copy link
Member Author

flexsurfer commented Jun 17, 2019

thanks @asemiankevich

when set currency from new wallet screen -> tapping back does not redirect me to wallet, i have to tap the wallet tap again (some kind of UX)

this is how react navigation works, it's not only in this case

can't capture screenshot on Android, says that screenshots are not allowed by app / organization

not related to this PR

View signing phrase button is not tappable

not in the scope of this PR, will disable it for now

no incoming chat message when sending eth / tokens from wallet to contact

this is how it works, we should discuss this with UX team, but i think you expect message only when you use command in chat, it's kind of weird that when you send tokens from somewhere not from chat you send a message, maybe we could add a checkbox, send a message or smth, but again not in scope of this PR, i didn't change anything related to send tokens in this PR

@hesterbruikman
Copy link
Contributor

@flexsurfer first of all major kudos on getting this done so quickly! Below some observations, 1,2,4,7 need design follow-up. Hope the rest is more actionable.

  1. The shadow on Android; Know you're already looking into this:)
  2. The number of asset decimals throws off the fiat amount. Wraps over 2 lines instead of one. Width should be set to accommodate default 4 digits, 2 decimals. That conflicts with nr of decimals for assets which should be 18. As well as the use of the longer 3 letter currency denotation. This is currently in the designs and I believe we should follow this as the $ symbol can be used to denote different currencies. Will explore in Figma and ping once there is a more solid solution. cc @errorists @andmironov
  3. Share icon opens native share dialog; should open popover with QR code and option to copy address. https://www.figma.com/file/XUehMnhyD1FGcWzvGz6SXqvh/Mobile-wallet?node-id=2556%3A31102 Not blocking, we can update this through a bounty later.
  4. The from Account explorer to Single account view and vice versa shows grey boxed of the Account explorer cards during transition. Also getting a frowny face with the transition and navigation direction. Think we can specify this better in design. Can we have a call on the transitions that are possible?
  5. The collectibles tab should persist with an empty state in case the user does not have collectibles. Added an empty state here: https://www.figma.com/file/XUehMnhyD1FGcWzvGz6SXqvh/Mobile-wallet?node-id=2840%3A55
  6. As you followed on Figma, the cards for Account explorer and viewer are updated to accommodate Keycard identifier as well as increasing contrast ratio (now white or 70% white, instead of 40%), and standardizing the wallet address truncation. @andmironov can you confirm the font should be SF Mono and checksummed? (showing lower case and upper case)
  7. Account settings not included yet, assuming you were waiting for me. Let me ping you once I've received feedback on the latest version.
  8. After setting currency, navigation should go back to the Account explorer. In the PR returns to it's current settings location. Personally I'd be happy if we remove it from settings if it's an issue to specify different navigation behavior for each. All things transactional and financial in Wallet.
  9. It took suspiciously long to include the token value in the total asset amount. I didn't time it, so it could just be deceiving, but would appreciate if you can check if there's anything that can cause a significant delay.

@flexsurfer
Copy link
Member Author

thanks @hesterbruikman
1 in progress
2 in progress
3 yes popup component isn't ready, so will be implemented in a separate issue
4 it's a common issue, we've spoken about, on Android we don't have a background
5 to be done in this PR
6 to be done in this PR
7 in the separate issue, disabled for now
8 to be done in this PR
9 separate issue

@errorists
Copy link
Contributor

errorists commented Jun 18, 2019

heya @flexsurfer

Account explorer:

  • The correct on scroll behaviour of the navigation bar is not implemented yet. Lmk if you need help visualising it.
  • The screen doesn't have the black status bar style applied to it, if you go to Send (white status bar) and then back, the white style stays instead of reverting back to black
  • The '~' character shouldn't be used when the total value is 0
  • The bottom padding on cards is too small, it should be 12.
  • The share icon on cards should be white
  • The horizontal scroll container is clipping its content on the left side, to observe scroll to the left, you'll see the cards disappear immediately under some arbitrary white bound, instead when scrolled they should be visible all the way to device's edge
  • there is no touchable feedback on the Assets - Collectibles tabs, at least none that I can observe
  • the touchable for tabs is too small, I get a lot of missed taps when hitting Assets - Collectibles - History
  • we removed the long press gesture right? Imo it shouldn't really be there, I doubt anyone would expect it other than looking for a way to remove an account.

Account details:

  • on scroll if scroll position is larger than 0 the top navigation bar should reveal the 1px light grey divider on the bottom, and in reverse, hide it if the position is 0.

  • imo this could use a Pinterest style transition on opening-closing accounts instead of the regular React Navigation push, not a bug or anything, just a suggestion for v2.

  • I know it's not in Figma but it looks super weird with only a single account. When there's nothing to swipe and no other accounts, the single card should imo have the right padding at 16, so it's the same on both sides.

  • We're missing monospaced fonts for account numbers. To get that working try fontFamily: 'SF Mono' : 'Roboto Mono' : 'monospace'

thanks buddy 🙏

@flexsurfer
Copy link
Member Author

flexsurfer commented Jun 18, 2019

@hesterbruikman @errorists

before after after 2
image image image

the layout doesn't work great with big numbers, we need to find the better layout, maybe remove a token name, because there is no sense to have it here, and show fiat value under asset value

@hesterbruikman
Copy link
Contributor

@flexsurfer I think that's a good solution. The focus of this PR should be enabling an account explorer and viewing multiple accounts. We can iterate on the other solutions to support big numbers/decimals. wdyt @errorists

We do need to use the Currency acronym (USD) instead of symbols ($). As multiple currencies are denoted with the $ symbol. Could you add that after the fiat amount?

@errorists
Copy link
Contributor

@flexsurfer For the short term sure, I guess we can replace the full token name with the fiat value. Long term what I miss the most here is some indication of how much has the asset's value gone up/down.

@flexsurfer
Copy link
Member Author

@hesterbruikman like this?
image

@flexsurfer
Copy link
Member Author

@errorists

we removed the long press gesture right?

from where?

@errorists
Copy link
Contributor

@errorists

we removed the long press gesture right?

from where?

from account cards in account explorer, I recall it was there to allow sending-receiving, wanted to make sure that was still the case

@flexsurfer
Copy link
Member Author

@errorists it works fine on ios simulator, doesn't it work for you?

@statustestbot
Copy link

55% of end-end tests have passed

Total executed tests: 47
Failed tests: 21
Passed tests: 26

Failed tests (21)

Click to expand
1. test_block_user_from_public_chat

Device 1: Tap on SignInButton
Device 1: Tap on PlusButton

Device 1: 'JoinPublicChatButton' is not found on the screen

Device sessions

2. test_request_and_receive_tokens_in_1_1_chat

Device 2: Wait for SetUpButton
Device 2: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

3. test_deploy_contract_from_daap

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

4. test_open_transaction_on_etherscan

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

5. test_sign_typed_message (TestRail link is not found)

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

6. test_logcat_send_transaction_from_daap

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

7. test_logcat_send_transaction_from_wallet

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

8. test_send_token_with_7_decimals

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

9. test_send_eth_from_wallet_to_address

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

10. test_manage_assets

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

11. test_logcat_send_transaction_in_1_1_chat

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

12. test_request_and_receive_eth_in_1_1_chat

Device 2: Wait for SetUpButton
Device 2: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

13. test_send_tokens_in_1_1_chat

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

14. test_network_mismatch_for_send_request_commands

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

15. test_send_stt_from_wallet

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

16. test_send_eth_from_wallet_to_contact

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

17. test_send_two_transactions_one_after_another_in_dapp

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

18. test_offline_status

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'home_button'

Device sessions

19. test_share_contact_code_and_wallet_address

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

20. test_request_eth_in_wallet

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

21. test_backup_recovery_phrase_warning_from_wallet

Device 1: Wait for SetUpButton
Device 1: Wait for SendTransactionButton

'NoneType' object has no attribute 'set_up_wallet'

Device sessions

Passed tests (26)

Click to expand
1. test_filters_from_daap
Device sessions

2. test_copy_and_paste_messages
Device sessions

3. test_send_transaction_from_daap
Device sessions

4. test_public_chat_messaging
Device sessions

5. test_long_press_to_delete_1_1_chat
Device sessions

6. test_password_in_logcat_sign_in
Device sessions

7. test_text_message_1_1_chat
Device sessions

8. test_add_to_contacts
Device sessions

9. test_unread_messages_counter_1_1_chat
Device sessions

10. test_send_message_in_group_chat
Device sessions

11. test_long_press_to_delete_public_chat
Device sessions

12. test_send_emoji
Device sessions

13. test_search_chat_on_home
Device sessions

14. test_logcat_recovering_account
Device sessions

15. test_messaging_in_different_networks
Device sessions

16. test_logcat_sign_message_from_daap
Device sessions

17. test_switch_users_and_add_new_account
Device sessions

18. test_login_with_new_account
Device sessions

19. test_add_contact_from_public_chat
Device sessions

20. test_password_in_logcat_creating_account
Device sessions

21. test_backup_recovery_phrase
Device sessions

22. test_open_google_com_via_open_dapp
Device sessions

23. test_unread_messages_counter_public_chat
Device sessions

24. test_sign_message_from_daap
Device sessions

25. test_user_can_remove_profile_picture
Device sessions

26. test_refresh_button_browsing_app_webview
Device sessions

@asemiankevich
Copy link
Contributor

so how it looks like:

  1. wallet screen collectibles

image

  1. wallet screen assets

image

  1. account details
    image

  2. history
    image

:<- [:wallet/visible-tokens-symbols]
(fn [[all-tokens visible-tokens]]
(let [vt-set (set visible-tokens)]
(group-by :custom? (map #(assoc % :checked? (boolean (get vt-set (keyword (:symbol %))))) all-tokens)))))
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe can be replaced with ->> for better readability.

[react/view {:margin-right 8 :flex-shrink 1}
(cond
(string? accessory)
[react/text {:style styles/accessory-text :number-of-lines 1}
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need any ellipsize-mode here?

[react/view {:flex-direction :row :margin-bottom 8 :margin-horizontal 4}
[tab-title state :assets (i18n/label :t/wallet-assets) (= tab :assets)]
[tab-title state :nft (i18n/label :t/wallet-collectibles) (= tab :nft)]]
(if (= tab :assets)
Copy link
Contributor

Choose a reason for hiding this comment

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

cond could work to avoid nested if.

[react/view {:flex 1 :padding-left 16}
(when-not seed-backed-up?
[react/view {:flex-direction :row :align-items :center}
[react/view {:width 14 :height 14 :background-color colors/gray :border-radius 7 :align-items :center
Copy link
Contributor

Choose a reason for hiding this comment

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

Weird formatting.

{:events [:wallet.send/set-symbol]}
[{:keys [db]} symbol]
{:db (-> db
Copy link
Contributor

Choose a reason for hiding this comment

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

Using update-in with assoc would be more readable.

[{:keys [db]} amount symbol decimals]
(let [{:keys [value error]} (wallet.db/parse-amount amount decimals)]
{:db (-> db
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here

@asemiankevich
Copy link
Contributor

@flexsurfer issue found:

  • can't manage assets, they are always enabled (Ropsten oO not mainnet)

Checks that are passed:

  • can share wallet address
  • can switch between collectibles / assets
  • can add custom token
  • can set new currency
  • can send / receive funds from wallet / chat
  • can see account details
  • can check transaction history, switch between history / assets

NOTE:

  • view signing phrase is out of scope for this PR
  • add account is out of scope for this PR

@flexsurfer
Copy link
Member Author

@asemiankevich known issue #8254

@hesterbruikman
Copy link
Contributor

Thanks for the screenshots @asemiankevich.
Current behavior: If fiat currency is smaller than 0,00, only acronym is shown
Expected behavior: If fiat currency is smaller than 0,00, $0.00 and acronym are shown

@flexsurfer Given the conversation on Core UI call just now, I can create a seperate issue for this. What do you think?

@flexsurfer
Copy link
Member Author

flexsurfer commented Jun 18, 2019

@hesterbruikman should be fixed already, in the latest build

@antdanchenko
Copy link
Contributor

@flexsurfer I am going to fix tests today, please mind my commits before force push

@errorists
Copy link
Contributor

Pinterest style transition [separate issue]

https://www.dropbox.com/s/7ugg3cugo174j4m/andrey.gif?dl=0

The correct on scroll behaviour of the navigation bar is not implemented yet. [separate issue]

https://www.dropbox.com/s/1iawojw2i68dphf/andrey2.gif?dl=0

…just adding previews for context 👀

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
@flexsurfer flexsurfer merged commit 26bbac8 into develop Jun 18, 2019
@delete-merged-branch delete-merged-branch bot deleted the feature/accounts-explorer branch June 18, 2019 15:45
@hesterbruikman
Copy link
Contributor

@flexsurfer I noticed Account settings is not included. Do you plan on a seperate PR for that?

Next to that these are the todo's I noted for design. Am I missing anything?

  • Manage assets icon
  • Export account flow

Current behavior: If fiat currency is smaller than 0,00, only acronym is shown
Expected behavior: If fiat currency is smaller than 0,00, $0.00 and acronym are shown
@hesterbruikman should be fixed already, in the latest build
Doesn't show in the latest build for me. @asemiankevich can you check in case I'm using the wrong build?

cc @guylouis

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.

[Multi-Account] Account overview + individual wallet UI
9 participants