Page MenuHomePhabricator

[Cashtab] Added eToken icon to send page
ClosedPublic

Authored by kieran709 on Dec 8 2021, 16:54.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Commits
rABC08eca63147ed: [Cashtab] Added eToken icon to send page
Summary

Using the same logic as TokenListItem, eToken icon added to send page. Related to task T1988.

Custom Token:

resize-token-icons-send-page.png (1×1 px, 356 KB)

Generated Token:

resize-token-icons-send-page-2.png (1×1 px, 250 KB)

Test Plan

cd web/cashtab
npm start
navigate to eTokens tab
select a token with a custom icon
ensure icon displays at top of token table
navigate back to eTokens tab
select a token with a generated icon
ensure icon displays at top of token table

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

The cropping of the icon is fairly noticeable when testing on mobile devices with no ability to scroll to see the full image.

  • Can you play around with auto sizing the table width to a percentage of the screen? The icon may need to be dynamically sized within the width of the table row, so ideally a % as well.
  • Alternatively restrict it to a small size but give users the ability to hover/click on it and view the full icon in an ant design popover
  • Was also going to suggest invisible scrollbars but it doesn't fix the initial jarring visual of the crop.

image.png (1×500 px, 197 KB)

Reverted custom icon back to 32x32 on token info page. Added popover to image, on click a 256x256 image will appear. Background color on tooltip set to transparent, although the area around the picture is slightly lighter than the rest of the page. Attempted in various ways to remove the black arrow from the tooltip but haven't been successful.

transparent-tooltip.png (293×396 px, 112 KB)

First level review is green - tested ok on mobile device

This revision is now accepted and ready to land.Dec 14 2021, 18:45
This revision was automatically updated to reflect the committed changes.