-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Initial commit for NFTs * Added a comment * Added view more button * Added test cases * Incorporated review comments * Fixed cypress issue * Rename types and files * Fix NFTCard unit tests * Fix the way NFTs are displayed - Display NFTs that don't embed a json - Display NFTs without images - Do not display NFTs without URIs * Add NFT details modal * Do not filter out NFTs without URIs * Add cypress e2e tests * Fix dependencies post rebase * Clean up types * Fix build * Fix NFT cypress tests * Improve NFTCard UI * Fix NFT display when the URI is directly an img link * Fix NFT display when the URI is an ipfs link without the .json extension * Fix NFT display when the URI is in "image_url" property of the json * Handle more NFT display edge cases * Add NFTViewer unit tests * Handle case when the image is an http link * Move NFT image resolver into a dedicated util file * Do not display NFT without data * Fix NFTCard unit tests * Handle .gif direct links in NFT Viewer * Display NFT without data with a fallback description * Cleaning up code * Fix post review * Simplify formatStringToBeDisplayed function * Add post review changes * Wrap fetchNFTs into useCallback * Fix typing in NFTCard.test.tsx * Extract NFT parts into dedicated components * Change code post review * Introduce TruncatedText component * Fix post rebase * Handle parsing of XLS-24 standard * Fix unit tests * Refactor TruncatedText & introduce TruncatedMultiLinesText components * Rework TruncatedText and TruncatedMultiLinesText components * Remove NFTListItem component * Refactor TruncatedText component * Fix code post review * Refactor TruncatedText * Edit default NFT image --------- Co-authored-by: thibautbremand <[email protected]> Co-authored-by: Florian Bouron <[email protected]>
- Loading branch information
3 people
authored
Aug 14, 2023
1 parent
60e0fb8
commit 4215764
Showing
45 changed files
with
988 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export const IPFSResolverPrefix = 'https://ipfs.io/ipfs/'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
packages/extension/src/components/atoms/NFTImage/NFTImage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { CSSProperties, FC } from 'react'; | ||
|
|
||
| import { CircularProgress } from '@mui/material'; | ||
| import { LazyLoadImage } from 'react-lazy-load-image-component'; | ||
|
|
||
| import { GemWallet } from '../index'; | ||
|
|
||
| interface NFTImageProps { | ||
| imageURL?: string; | ||
| height?: number; | ||
| width?: number; | ||
| style?: CSSProperties; | ||
| } | ||
|
|
||
| export const NFTImage: FC<NFTImageProps> = ({ imageURL, height = 250, width = 250, style }) => { | ||
| return imageURL ? ( | ||
| <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', ...style }}> | ||
| <LazyLoadImage | ||
| alt="NFT" | ||
| height={height} | ||
| style={{ borderRadius: '4px', boxShadow: '4px 4px 0px black' }} | ||
| beforeLoad={() => <CircularProgress />} | ||
| effect="blur" | ||
| src={imageURL} | ||
| width={width} | ||
| /> | ||
| </div> | ||
| ) : ( | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| height, | ||
| width, | ||
| backgroundColor: '#1e1e1e', | ||
| borderRadius: '4px', | ||
| boxShadow: '4px 4px 0px black', | ||
| ...style | ||
| }} | ||
| > | ||
| <GemWallet style={{ transform: 'scale(2)' }} /> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './NFTImage'; |
4 changes: 2 additions & 2 deletions
4
packages/extension/src/components/atoms/Tokens/GemWallet/GemWallet.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { ComponentProps, FC, useMemo } from 'react'; | ||
|
|
||
| import { SxProps, Theme, Typography } from '@mui/material'; | ||
|
|
||
| type TruncatedTextProps = ComponentProps<typeof Typography> & { | ||
| isMultiline?: boolean; | ||
| maxLines?: string; | ||
| }; | ||
|
|
||
| export const TruncatedText: FC<TruncatedTextProps> = ({ | ||
| isMultiline = false, | ||
| maxLines = '4', | ||
| sx, | ||
| children, | ||
| ...rest | ||
| }) => { | ||
| const styleProps: SxProps<Theme> | undefined = useMemo( | ||
| () => | ||
| isMultiline | ||
| ? { | ||
| overflow: 'hidden', | ||
| display: '-webkit-box', | ||
| width: '100%', // if the string is very long without spaces, it will not overflow the view | ||
| WebkitBoxOrient: 'vertical', | ||
| WebkitLineClamp: maxLines, // start showing ellipsis when X line is reached | ||
| whiteSpace: 'pre-wrap' // let the text wrap preserving spaces | ||
| } | ||
| : { | ||
| display: 'block', | ||
| overflow: 'hidden', | ||
| textOverflow: 'ellipsis', | ||
| width: '100%' | ||
| }, | ||
| [isMultiline, maxLines] | ||
| ); | ||
|
|
||
| return ( | ||
| <Typography | ||
| sx={{ | ||
| ...styleProps, | ||
| ...sx | ||
| }} | ||
| {...rest} | ||
| > | ||
| {children} | ||
| </Typography> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './TruncatedText'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| export * from './ButtonOption'; | ||
| export * from './Logo'; | ||
| export * from './NFTImage'; | ||
| export * from './NumericInput'; | ||
| export * from './PrivateRoute'; | ||
| export * from './TileLoader'; | ||
| export * from './TokenLoader'; | ||
| export * from './Tokens'; | ||
| export * from './TruncatedText'; | ||
| export * from './WalletIcon'; |
Oops, something went wrong.