Status-react: Amount and Network Fee text overlap in 'Sending' screen when there are long values

Created on 18 Oct 2019 · 12Comments · Source: status-im/status-react

Bug Report

Problem

Transaction amount and network fee often calculated up to eighteenth digit precision (in case of 18-decimals asset). In that case the 'Amount' and 'Network Fee' text on the 'Sending...' screen overlapped by it's value.

Expected behavior

Long values of amount and network fee does not overlap the text

I would ask to truncate … the numeric values at the end so that the entire text label of Amount / Network Fee is visible. Both are already displayed in their entirety in the header of the bottom sheet.

Actual behavior

Screenshot 2019-10-18 at 09 48 49

Reproduction

Open Status and create new account
Navigate to Wallet -> Status account-> Send and select any Recipient
Enter in Amount field the 0.0848969596969696969 value -> Sign transaction
Tap Network Fee and update gas price to 1.0989898

Additional Information

Status version: develop nightly 0.14.0 (2019171002)
Operating System:

design-input-required bounty-xs bug

Source

Serhy

All 12 comments

@errorists, @andmironov need your design input here

Serhy on 18 Oct 2019

agree it's not great. I would ask to truncate … the numeric values at the end so that the entire text label of Amount / Network Fee is visible. Both are already displayed in their entirety in the header of the bottom sheet.

errorists on 18 Oct 2019

👍1

@rachelhamlin is it a good candidate for bounty?

Serhy on 18 Oct 2019

👍1

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

__This issue now has a funding of 60.0 DAI (60.0 USD @ $1.0/DAI) 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
- $121,411.07 more funded OSS Work available on the Gitcoin Issue Explorer

gitcoinbot on 30 Oct 2019

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

__Work has been started__.

These users each claimed they can complete the work by 1 week, 1 day from now.
Please review their action plans below:

1) acolytec3 has been approved to start work.

I will resolve the bug described. What is the number of digits we should truncate to in the resolution?
2) kingcocomango has applied to start work _(Funders only: approve worker | reject worker)_.

I'll fix this issue such that it'll show as many digits as possible without truncating the text.

Learn more on the Gitcoin Issue Details page.

gitcoinbot on 30 Oct 2019

@rachelhamlin just applied for this one. Can I pick it up?

acolytec3 on 30 Oct 2019

Approved @acolytec3! Can we truncate to the maximum amount that fits the screen while still displaying the Amount and Network Fee text in full?

rachelhamlin on 1 Nov 2019

@rachelhamlin Yep, I think there are probably a couple of ways to approach this one but need to experiment a little bit. I've tried directly truncating the values for Amount and Network Fee but that yields the situation but the most straight forward method for doing so yields a fixed length decimal (i.e. the two amounts are always X.XXXX ETH). This would have the benefit of always having a guaranteed maximum size displayed like (1.23456 ETH) but also results in (1.00000 ETH) which I'm assuming we don't want. I'm going to try overriding the width props on the columns and see if that works and explore some other string formatting ideas if that doesn't do it.

acolytec3 on 1 Nov 2019

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

__Work for 60.0 DAI (60.0 USD @ $1.0/DAI) has been submitted by__: