[#8026] Add loading state for currency conversion

rachelhamlin commented 5 years ago

Description

Type: Feature

Summary: Continuation of the work done in this PR for #8026.

New overview screen shows fiat values for the total amount + gas. This can sometimes take time to load, so we need to add a loading state.

Expected behavior

Designs found here: preferred implementation, back-up option

When converted currency in the following fields is not yet available, we display a loading state instead.

Loaded currencies

Preferred design is an in-line animation (see comment)

hesterbruikman commented 5 years ago

A related issue:

In case of errors, the expected pattern is the "Tooltip error" that has a little tip at the bottom and hovers slightly above the list item that contains the error. In the merged build, the tool misses the tip. It has appeared, in the correct position, in an earlier test build, which is where the image on the right comes from.

cc @andmironov

Frame 2

andmironov commented 5 years ago

I'd suggest something like this to indicate no ETH for gas:

Using "network fee" rather than "Gas" for consistency;
Letting know that you have to have the required amount on the wallet you're sending the transaction from;
Providing a helpful call-to-action.

As for the wrong password, I'd use the default tooltip

errorists commented 5 years ago

for the loader I'd use an inline spinner

inlineLoader

engineers activityIndicator, color: grey, size: iOS: small Android: 16

andmironov commented 5 years ago

FIgured it might be better to re-use this thing to dosplay the warning:

hesterbruikman commented 5 years ago

FIgured it might be better to re-use this thing to dosplay the warning:

Looks like this should be a new issue to update the 'Not enough ETH'-warning. Love the entry to Receive ETH on there!

hesterbruikman commented 5 years ago

FIgured it might be better to re-use this thing to dosplay the warning:

Seperate the loading state update (this issue) from the warning update: https://github.com/status-im/status-react/issues/8485

hesterbruikman commented 5 years ago

I believe we also need a loading state for the fiat value shown in the wallet overview and individual accounts. It currently shows '0' until conversion is fetched.

@flexsurfer @rachelhamlin should that be a seprate issue or can it be takn along with this one? cc @andmironov

flexsurfer commented 5 years ago

@hesterbruikman can be done here

hesterbruikman commented 5 years ago

@andmironov can you share a design here for loading state of fiat value in Account overview and on Account card?

hesterbruikman commented 5 years ago

@andmironov can you share a design here for loading state of fiat value in Account overview and on Account card?

And also what should happen on refresh. Referring to "Refresh wallet should work like it worked before"

andmironov commented 5 years ago

Refresh wallet should work like it worked before

Pull-to-refresh, a spinner is shown while loading:

Here's an old GIF with the old design, but the concept is the same https://dribbble.com/shots/3777816-Status-Wallet

can you share a design here for loading state of fiat value

Here's what I've had in Figma prepared, made under the impression that it might take a lot of time to load the list of assets and balance:

If it's not the case, maybe it would be better to go with something like we did in the Dapp Store (shining placeholders):

up to @flexsurfer to decide which approach fits better technically. Also, the little spinner is used in the transaction overview, which might be another reason not to use the "placeholder" approach

hesterbruikman commented 5 years ago

🙌 thanks @andmironov

rachelhamlin commented 4 years ago

I'm about to put a bounty on this and want to clarify-

I believe the error tool tip is already fixed. We're also planning on using a different 'not enough ETH' warning in issue #8485, so I'm going to reduce the scope of this issue to just the inline spinner.

Okay for you @andmironov?

andmironov commented 4 years ago

Yes, thanks @rachelhamlin ! The scope of this issue (for the transaction overview modal) I believe boils down to the awesome animation @errorists have made! As a fallback solution I can suggest doing:

Screen Shot 2019-09-06 at 19 51 08

I like the animation more, just being careful if it takes more time/is harder to implement

And the error states will look like this:

Screen Shot 2019-09-06 at 19 55 23

Note: As far as I understand it's part of https://github.com/status-im/status-react/issues/8485 but it exceeds that issue's scope a bit as well 🤷‍♂️

rachelhamlin commented 4 years ago

Okay, awesome, I’ll update and bounty :) thanks for your input.

On Fri, Sep 6, 2019 at 5:52 PM Andrei Mironov notifications@github.com wrote:

Yes, thanks @rachelhamlin https://github.com/rachelhamlin ! The scope of this issue I believe boils down the awesome animation @errorists https://github.com/errorists have made! As a fallback solution I can suggest doing:

[image: Screen Shot 2019-09-06 at 19 51 08] https://user-images.githubusercontent.com/3115606/64445674-b2596c00-d0df-11e9-8d2a-00e38bd2bb0d.png

I like the animation more, just being careful if it takes more time/is harder to implement

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/status-im/status-react/issues/8443?email_source=notifications&email_token=ADWA6YZCTTYTCFUPXVNTI6DQIKDERA5CNFSM4HZRH3M2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6DNLRY#issuecomment-528930247, or mute the thread https://github.com/notifications/unsubscribe-auth/ADWA6Y2NYR5OK3XUJJYSJYDQIKDERANCNFSM4HZRH3MQ .

gitcoinbot commented 4 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 0.472 ETH (99.4 USD @ $210.6/ETH) attached to it.

If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
- Want to chip in? Add your own contribution here.
- Questions? Checkout Gitcoin Help or the Gitcoin Slack
- $153,770.40 more funded OSS Work available on the Gitcoin Issue Explorer

gitcoinbot commented 4 years ago

Issue Status: 1. Open 2. Cancelled

Work has been started.

These users each claimed they can complete the work by 5 months ago. Please review their action plans below:

1) acolytec3 has applied to start work _(Funders only: approve worker | reject worker)_.

I would like to work on this issue following the one of the proposed implementations linked in the bounty issue. 2) rajatkapoor has applied to start work _(Funders only: approve worker | reject worker)_.

I will implement it to exactly match the desired design showing an inline loader 3) alexjg has been approved to start work.

I've enjoyed working with this codebase, but so far I've just been working on styling things. This looks like a chance to get a bit more contact with the reagent subscriptions framework. I have a bit of time this weekend so would love to have a shot at it. 4) morevolk-latei has applied to start work _(Funders only: approve worker | reject worker)_.

I'm good at creating persistent UI's and has a keen eye on frontend design. I would like to work on this feature and I believe I'm befitting for this. I have experience in working with React, AngularJs, JS, Node, Django, Linux, etc. I would love to contribute. :-)

Learn more on the Gitcoin Issue Details page.

rachelhamlin commented 4 years ago

Heyo! Sorry for delay on this issue, just got back from our team offsite.

@alexjg I've approved you :) Welcome back! Approved based on experience w/ codebase, quality past contribution and first come, first serve.

@acolytec3 will hopefully be contributing on #8027 instead.

@bshevchenko are you having any better luck getting Status set up after the issue found in #8657? 🤞we can get that fixed.

@rajatkapoor & @morevolk-latei thank you for applying! Do you both have ClojureScript experience? If so, I'm happy to bounty up other UI issues for you to try if interested :)

bshevchenko commented 4 years ago

@rachelhamlin Pedro answered me back just a few minutes ago on that issue. Trying now what he advised me to do

bshevchenko commented 4 years ago

@rachelhamlin and again no luck :(

alexjg commented 4 years ago

@rachelhamlin brilliant, I don't have much bandwidth (literal and mental) this week but I should be able to get this sorted the early part of next week.

acolytec3 commented 4 years ago

@alexjg FYI, I'd started poking around the code base trying to figure out how this one would work and it requires the one I'm going to try and finish (#8027) before you'll have anything to work with since the currency conversion isn't currently in the code. Whenever we get there, this is the code that will render the activity indicator they want. I got that much working already. :-)

[react/activity-indicator {
                :color   :colors/gray
                :ios   {:size  :small}
                :android {:size :16}
             }]

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

alexjg commented 4 years ago

@gitcoinbot I'm still planning on working on this, although it looks like it may have already been resolved in #8027

hesterbruikman commented 4 years ago

@alexjg Looks like the in line spinner is implemented in #9063, I'm missing the total value loader @andmironov can you check what remains to be implemented of the loading state design that @alexjg can work on here?

andmironov commented 4 years ago

@andmironov can you check what remains to be implemented of the loading state design

cc @rachelhamlin i'm not sure where I should be looking for the latest build to check that.

The only other loading state of the transaction overview I can remember is "Calculating..." the network fee when interaction with a contract. Do you happen to know if that has been addressed already? I believe it's part of the "error states" issue now, isn't it?

hesterbruikman commented 4 years ago

Seems like the loading state for the Total value and the 'pull to refresh' loading state is not implemented yet.

To test: Install build from #9063 (https://github.com/status-im/status-react/pull/9063#issuecomment-536079760)

Open wallet
Check Total value
Switch to airplane mode
Tap on ... and set currency
Select another currency
Check total value (will now be indicated as 0

@andmironov I imagine for the total value we would include this version you commented above.

However, having this state show indefinitely doesn't seem great. We might need a variation to represent the Offline state. Either the good old snackbar, that I don't see implemented here, or another indicator that says values are not 'live'. Wdyt?

@alexjg I would create a seperate issue for this offline state. For now I'd say this issue includes:

[ ] Pull to refresh
[ ] Total value loading state Does that work for you?

cc @rachelhamlin

andmironov commented 4 years ago

I imagine for the total value we would include this version you commented above.

sorry i'd go with this if it's possible

rachelhamlin commented 4 years ago

Hey @alexjg - apologies that this issue was out of date. Are you still tracking? I'm happy to refocus this on the items from @hesterbruikman's comment.

@hesterbruikman pull to refresh = on wallet overview, and individual wallet?

hesterbruikman commented 4 years ago

Good point. Ideally loading state for wallet overview and individual account screen @andmironov can you point to the design of the loading state for the individual account?

Regarding pull to refresh, @andmironov, wdyt? Not sure how this would behave with the title/header on the individual account screen.

alexjg commented 4 years ago

@rachelhamlin I've been keeping half an eye on this, still keen to work on it. @andmironov suggested creating a new issue, do you want to do that or continue with this one?

rachelhamlin commented 4 years ago

It sounds like the original issue is no longer relevant, but since there's already a bounty attached, I can repurpose it according to the comments :) I'll update the issue once we have alignment. OK for you @alexjg?

Pull to refresh behavior is uncertain - when and how should this work? (@andmironov task)
Loading state should be implemented for multiaccount overview, per this comment (Figma?)
Loading state for individual accounts should be implemented as well - Figma?

@hesterbruikman cc'ing you to sanity check me!

alexjg commented 4 years ago

Works for me, I'll wait for you folks to clarify things before I get started.

andmironov commented 4 years ago

Sorry for a slight change of plans, but after diving a bit deeper into this issue i realized that it's better not to use animated placeholders here, since this screen is not exactly a use-case for those. For instance, it would be pretty annoying if you want just to update the conversion rate but instead you get all your list of assets replaced with placeholders.

And the alternative is a good old spinner which also should be easier to implement. I am not quite sure if there's a "loading spinner" component somewhere in our codebase available, but it it's not the case, it'd better to be implemented as a re-seable element here. cc @flexsurfer Or if it takes too much time we cal always use a native spinner (temporary)

Multiaccount overview

It has two pieces: pull-to-refresh spinner and the loading state. Also, there should be an error state. It's better to create a prototype to illustrate how it should work exactly, but the rough idea is:

The first time the user opens the wallet they see the loading animation

After the loading has finished, the spinner disappears, the screen is "scrolled" back up. Here's a prototype I've made ages ago for the old wallet design https://dribbble.com/shots/3777816-Status-Wallet Notice how once the loading is finished, the spinner disappears and the screen moves up.
If an error happens during loading, there's an error message with a "Retry" button.

The animation of how the spinner disappears and is replaced by the error message, and how a new spinner is shown when user taps "retry" should be simple, I'd suggest translating size and opacity from 1 to 0 and vice versa. Notice that the screen is not moving up or down when the spinner is replaced with the error message.

If the user pulls up, a spinner appears. It must appear gradually, using modulation. Just like on the prototype above: the more the screen is pulled down, the closer the spinner is to its final state. If the user stops before a "final" point, the refresh does not happen. I'd also suggest translating size and opacity from 1 to 0.

All the Figma files are right here https://www.figma.com/file/XUehMnhyD1FGcWzvGz6SXqvh/Mobile-wallet?node-id=1743%3A303

Please notice that we use a design system (we re-use colors, icons, text styles, component) which is located here https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=22%3A0

andmironov commented 4 years ago

Individual accounts

Initial loading and pull-to-refresh works almost exactly the same as the account explorer

But the thing is that when the history tab is opened for the first time, it has a loading state of its own since it would not be wise to pre-load it, as it's the third tab in the UI and it's not the primary information on the individual account screen. The history list might be really long and it might take a long time to load that list. This is where the animated placeholders might be useful, but for simplicity's sake we can do something like this:

The history list has another loading state when it's scrolled to the bottom (scroll-initiated pagination) I'd suggest initially loading only the last 10 items (might change depending on UX testing)

The Figma files are located here https://www.figma.com/file/XUehMnhyD1FGcWzvGz6SXqvh/Mobile-wallet?node-id=1743%3A303

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

alexjg commented 4 years ago

@gitcoinbot I'm still working on this. I've been waiting for the spec to shake out. which looks like it's happened now so I'll look to make a start on it tomorrow.

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

alexjg commented 4 years ago

@gitcoinbot I'm still working on it, going slow due to life intruding on my quiet moments of software engineering. Looking to get it finished this week though.

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

StatusSceptre commented 4 years ago

@alexjg pretty sure you're still making progress in your own time but check in w/ us this week if you can :)

alexjg commented 4 years ago

Apologies, I thought I had responded to @gitcoinbot. Yup I'm still trucking on, hoping to submit a PR tomorrow.

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 4 years ago

@alexjg Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

StatusSceptre commented 4 years ago

Hey @alexjg - checking in, I bet you're still working but want to confirm.

alexjg commented 4 years ago

@StatusSceptre @gitcoinbot I'm still working. Life has been very hectic the last few weeks, hence low productivity. Apologies for that. I am aiming to finish this one off ASAP.

status-im / status-mobile

[#8026] Add loading state for currency conversion #8443

Description

Expected behavior