feat: add nfts to new assets redesign #4267
Conversation
Codecov Report
@@ Coverage Diff @@
## main #4267 +/- ##
=======================================
Coverage 83.99% 84.00%
=======================================
Files 711 711
Lines 26131 26178 +47
Branches 3385 3401 +16
=======================================
+ Hits 21950 21992 +42
- Misses 4117 4120 +3
- Partials 64 66 +2
Continue to review full report in Codecov by Sentry.
|
|
I am seeing this warning in development mode: |
This does seem concerning, given that the implication is not completely understood. One another way to implement this would be to make a section be 2 items and the render item function could render a single row with 2 items, which also seems a bit hacky, but maybe will make some of the styling cleaner. |
src/tokens/Assets.test.tsx
Outdated
| @@ -172,6 +184,45 @@ describe('AssetsScreen', () => { | |||
| // TODO(ACT-918): assert nfts are displayed here | |||
There was a problem hiding this comment.
this can be removed now. Also would be good good to assert that NftItem is not found before switching tabs in this test and other tests testing tab click (similar to how TokenBalanceItem and PositionItem is asserted)
src/tokens/Assets.tsx
Outdated
| // For even indexes, add right margin; for odd indexes, add left margin. | ||
| // If the index is even and it's the last image, add a right margin to left-align the image in the last row. | ||
| index % 2 === 0 | ||
| ? { marginRight: Spacing.Regular16 } && | ||
| index === nfts.length - 1 && | ||
| styles.nftsLastImage |
There was a problem hiding this comment.
Not sure I understand this. Is the right margin added for even indices if its not the last item? It seems like index === nfts.length - 1 would be false and this would ultimately result in a false. The right margin seems to be applied only for the last item (from styles.nftsLastImage) which also seems like it shouldn't make any difference since the last row will have only one item in this case.
There was a problem hiding this comment.
If the last image is an even index we only need to apply the right margin. If the last image is an odd index we need to apply special style to align it left, otherwise we get cases where the last image is in the center of the two columns.
src/tokens/Assets.tsx
Outdated
| : nfts.length | ||
| ? [{ data: nfts }] |
There was a problem hiding this comment.
nit: might be worth just doing an if else or switch and avoid the nested ternary.
Description
Adds Nft Collections to the new assets page. Nft items are displayed as groups in a section list instead of a flat list as was previously done in #3912. Now accepts an arbitrary number for
NUM_OF_NFTS_PER_ROWconstant.Test plan
Related issues
Backwards compatibility
Yes