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

feat: add call to getCollection to get more collection data #4443

Merged
merged 9 commits into from
Jul 10, 2024

Conversation

sahar-fehri
Copy link
Contributor

@sahar-fehri sahar-fehri commented Jun 21, 2024

Explanation

We wanted to fetch more collection related data to populate the new NFT details designs.
When an NFT is either detected or manually imported, i added a call to NFT-API get collections API to fetch more collection data.

References

Changelog

@metamask/assets-controllers

  • ADDED: Added a batch call to get collections API in detectNfts function.
  • ADDED: Added a call to get collections API inside getNftInformationFromApi

Checklist

  • I've updated the test suite for new or updated code as appropriate
  • I've updated documentation (JSDoc, Markdown, etc.) for new or updated code as appropriate
  • I've highlighted breaking changes using the "BREAKING" category above as appropriate

@sahar-fehri sahar-fehri marked this pull request as ready for review June 24, 2024 12:15
@sahar-fehri sahar-fehri requested a review from a team as a code owner June 24, 2024 12:15
bergeron
bergeron previously approved these changes Jun 27, 2024
@sahar-fehri sahar-fehri marked this pull request as draft July 1, 2024 13:07
@sahar-fehri sahar-fehri force-pushed the feat/call-get-collections-v2 branch from d0c49fd to 5eb7be9 Compare July 2, 2024 10:04
const collections = apiNfts.reduce<string[]>((acc, currValue) => {
if (
!acc.includes(currValue.token.contract) &&
currValue.token.contract === currValue?.token?.collection?.id
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Pushing only when token.contract is equal collection.id which will exclude cases of shared contract addresses where collection.id can be equal "0xaddress...:1234:3445".
This can change in future to support these contracts once NFT-API also supports it 🙏

@sahar-fehri sahar-fehri marked this pull request as ready for review July 2, 2024 13:24
salimtb
salimtb previously approved these changes Jul 9, 2024
Copy link
Contributor

@mcmire mcmire left a comment

Choose a reason for hiding this comment

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

Overall I don't have many comments here, just a couple of nitpicks. I do notice a lot of checks for the existence of various properties and it might make the code easier to work with if we figured out a way to remove those (i.e. if we handled filling in default values at some earlier point in the process). But, I am not 100% familiar with this code so I'm not sure how feasible that is.

packages/assets-controllers/src/NftDetectionController.ts Outdated Show resolved Hide resolved
packages/assets-controllers/src/assetsUtil.ts Outdated Show resolved Hide resolved
@sahar-fehri sahar-fehri requested a review from mcmire July 10, 2024 16:56
@sahar-fehri sahar-fehri merged commit 973acd8 into main Jul 10, 2024
116 checks passed
@sahar-fehri sahar-fehri deleted the feat/call-get-collections-v2 branch July 10, 2024 17:37
@sahar-fehri sahar-fehri mentioned this pull request Jul 15, 2024
3 tasks
sahar-fehri added a commit to MetaMask/metamask-extension that referenced this pull request Jul 16, 2024
## **Description**

PR that updates the design for the NFT page.
Designs are here:
https://www.figma.com/design/TfVzSMJA8KwpWX8TTWQ2iO/Asset-list-and-details?node-id=3717-47944&m=dev

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25524?quickstart=1)

## **Related issues**

Fixes:
Related: MetaMask/core#4443

## **Manual testing steps**

1. Go to NFT tab
2. Click on any NFT you have
3. You should be able to see the new NFT page with no errors even if
some data is not available.


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**



https://github.com/MetaMask/metamask-extension/assets/10994169/dc6ca128-5f2a-45e2-9289-d84f5403d772


### **After**



https://github.com/MetaMask/metamask-extension/assets/10994169/58fd8cd4-24d9-42e9-931a-c33f8ae812d6



## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: MetaMask Bot <[email protected]>
sahar-fehri added a commit that referenced this pull request Jul 16, 2024
## Explanation

Releases assets-controllers to new version `36.0.0`

## References

<!--
Are there any issues that this pull request is tied to? Are there other
links that reviewers should consult to understand these changes better?

For example:

* Fixes #12345
* Related to #67890
-->

## Changelog

<!--
If you're making any consumer-facing changes, list those changes here as
if you were updating a changelog, using the template below as a guide.

(CATEGORY is one of BREAKING, ADDED, CHANGED, DEPRECATED, REMOVED, or
FIXED. For security-related issues, follow the Security Advisory
process.)

Please take care to name the exact pieces of the API you've added or
changed (e.g. types, interfaces, functions, or methods).

If there are any breaking changes, make sure to offer a solution for
consumers to follow once they upgrade to the changes.

Finally, if you're only making changes to development scripts or tests,
you may replace the template below with "None".
-->

### `@metamask/assets-controllers`

### Added

- **Added**: Add optional `topBid` property to the `NftMetadata` type.
This property must be of type `TopBid`.
([#4522](#4522))
- **Added**: Add optional `floorAsk` property to the `TokenCollection`
type. This property must be of type `FloorAskCollection`.
([#4522](#4522))
- **Added**: Add linea mainnet support to nft detection supported
networks ([#4515](#4515))
- **Added**: Fetch NFT collections data from the NFT-API
`getCollections` API when calling the `detectNfts` method of
`NftDetectionController`, and the `updateNftMetadata` and `watchNft`
methods of `NftController`.
([#4443](#4443))

### Changed

- **Changed**: Bump `@metamask/utils` to `^9.0.0`
([#4508](#4516))
- **Changed**: Bump `@metamask/rpc-errors` to `^6.3.1`
([#4498](#4516))

### Fixed

- **Breaking**: Changed attributes type in `NftMetadata` to
`Attributes[]` ([#4522](#4522))

## Checklist

- [ ] I've updated the test suite for new or updated code as appropriate
- [ ] I've updated documentation (JSDoc, Markdown, etc.) for new or
updated code as appropriate
- [ ] I've highlighted breaking changes using the "BREAKING" category
above as appropriate
sahar-fehri added a commit to MetaMask/metamask-mobile that referenced this pull request Aug 1, 2024
## **Description**

This PR modifies the design of the NFT details page.
Designs:
https://www.figma.com/design/TfVzSMJA8KwpWX8TTWQ2iO/Asset-list-and-details?node-id=1242-143952&m=dev


## **Related issues**

Fixes:
Related: MetaMask/core#4522
Related: MetaMask/core#4443

## **Manual testing steps**

1. Go to this NFT tab
2. Click and browse through your NFTs
3. You should be able to see basic things like tokenId, contract
address, description. Other fields will be displayed if they exist.
4. Click on the contract address and you should be redirected to
etherscan.
5. Click on the image in the NFT details page and you should see the
image in a new page without any of the details.
6. Try clicking on the navbar and go to "See on opensea"
7. Removing NFT flow and Sending NFT flow should not be affected


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/97679ba6-c8bb-483d-adb1-f3ebfdfb4337



### **After**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/024f389a-9feb-4fef-8b20-81fa59f232fd

Also we added a new bottom sheet when token ID is too long



https://github.com/user-attachments/assets/1434b08b-ab1a-4e56-acde-189b303b88e9



## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Curtis <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

4 participants