Feat/collectibles the return (#12970)
* Wire collectibles frontend UI with controller datafeature/default_network_editable
Alex Donesky
3 years ago
committed by
GitHub
parent
c03b6dd19b
commit
1b6e58c417
|
After Width: | Height: | Size: 59 KiB |
@ -0,0 +1,251 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
import { useHistory } from 'react-router-dom'; |
||||
import { getTokenTrackerLink } from '@metamask/etherscan-link'; |
||||
import Box from '../../ui/box'; |
||||
import Card from '../../ui/card'; |
||||
import Typography from '../../ui/typography/typography'; |
||||
import { |
||||
COLORS, |
||||
TYPOGRAPHY, |
||||
FONT_WEIGHT, |
||||
JUSTIFY_CONTENT, |
||||
FLEX_DIRECTION, |
||||
OVERFLOW_WRAP, |
||||
DISPLAY, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
import { |
||||
getAssetImageURL, |
||||
isEqualCaseInsensitive, |
||||
shortenAddress, |
||||
} from '../../../helpers/utils/util'; |
||||
import { |
||||
getCurrentChainId, |
||||
getIpfsGateway, |
||||
getRpcPrefsForCurrentProvider, |
||||
getSelectedIdentity, |
||||
} from '../../../selectors'; |
||||
import AssetNavigation from '../../../pages/asset/components/asset-navigation'; |
||||
import { getCollectibleContracts } from '../../../ducks/metamask/metamask'; |
||||
import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'; |
||||
import { removeAndIgnoreCollectible } from '../../../store/actions'; |
||||
import { |
||||
GOERLI_CHAIN_ID, |
||||
KOVAN_CHAIN_ID, |
||||
MAINNET_CHAIN_ID, |
||||
POLYGON_CHAIN_ID, |
||||
RINKEBY_CHAIN_ID, |
||||
ROPSTEN_CHAIN_ID, |
||||
} from '../../../../shared/constants/network'; |
||||
import { getEnvironmentType } from '../../../../app/scripts/lib/util'; |
||||
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; |
||||
import CollectibleOptions from '../collectible-options/collectible-options'; |
||||
|
||||
export default function CollectibleDetails({ collectible }) { |
||||
const { image, name, description, address, tokenId } = collectible; |
||||
const t = useI18nContext(); |
||||
const history = useHistory(); |
||||
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); |
||||
const ipfsGateway = useSelector(getIpfsGateway); |
||||
const collectibleContracts = useSelector(getCollectibleContracts); |
||||
const currentNetwork = useSelector(getCurrentChainId); |
||||
|
||||
const collectibleContractName = collectibleContracts.find( |
||||
({ address: contractAddress }) => |
||||
isEqualCaseInsensitive(contractAddress, address), |
||||
)?.name; |
||||
const selectedAccountName = useSelector( |
||||
(state) => getSelectedIdentity(state).name, |
||||
); |
||||
const collectibleImageURL = getAssetImageURL(image, ipfsGateway); |
||||
const dispatch = useDispatch(); |
||||
|
||||
const onRemove = () => { |
||||
dispatch(removeAndIgnoreCollectible(address, tokenId)); |
||||
history.push(DEFAULT_ROUTE); |
||||
}; |
||||
|
||||
const getOpenSeaLink = () => { |
||||
switch (currentNetwork) { |
||||
case MAINNET_CHAIN_ID: |
||||
return `https://opensea.io/assets/${address}/${tokenId}`; |
||||
case POLYGON_CHAIN_ID: |
||||
return `https://opensea.io/assets/matic/${address}/${tokenId}`; |
||||
case GOERLI_CHAIN_ID: |
||||
case KOVAN_CHAIN_ID: |
||||
case ROPSTEN_CHAIN_ID: |
||||
case RINKEBY_CHAIN_ID: |
||||
return `https://testnets.opensea.io/assets/${address}/${tokenId}`; |
||||
default: |
||||
return null; |
||||
} |
||||
}; |
||||
|
||||
const openSeaLink = getOpenSeaLink(); |
||||
return ( |
||||
<> |
||||
<AssetNavigation |
||||
accountName={selectedAccountName} |
||||
assetName={collectibleContractName} |
||||
onBack={() => history.push(DEFAULT_ROUTE)} |
||||
optionsButton={ |
||||
<CollectibleOptions |
||||
onViewOnOpensea={ |
||||
openSeaLink |
||||
? () => global.platform.openTab({ url: openSeaLink }) |
||||
: null |
||||
} |
||||
onRemove={onRemove} |
||||
/> |
||||
} |
||||
/> |
||||
<Box className="collectible-details"> |
||||
<div className="collectible-details__top-section"> |
||||
<Card |
||||
padding={0} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
className="collectible-details__card" |
||||
> |
||||
<img |
||||
className="collectible-details__image" |
||||
src={collectibleImageURL} |
||||
/> |
||||
</Card> |
||||
<Box |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
className="collectible-details__top-section__info" |
||||
> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H4} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ margin: 0, marginBottom: 4 }} |
||||
> |
||||
{name} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H5} |
||||
boxProps={{ margin: 0, marginBottom: 4 }} |
||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD} |
||||
> |
||||
{`#${tokenId}`} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H6} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
className="collectible-details__description" |
||||
boxProps={{ margin: 0, marginBottom: 2 }} |
||||
> |
||||
{t('description')} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.UI4} |
||||
variant={TYPOGRAPHY.H6} |
||||
boxProps={{ margin: 0 }} |
||||
> |
||||
{description} |
||||
</Typography> |
||||
</Box> |
||||
</div> |
||||
<Box> |
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H6} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ |
||||
margin: 0, |
||||
marginBottom: 4, |
||||
marginRight: 2, |
||||
}} |
||||
className="collectible-details__link-title" |
||||
> |
||||
{t('source')} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.PRIMARY1} |
||||
variant={TYPOGRAPHY.H6} |
||||
boxProps={{ |
||||
margin: 0, |
||||
marginBottom: 4, |
||||
}} |
||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD} |
||||
> |
||||
<a |
||||
target="_blank" |
||||
href={collectibleImageURL} |
||||
rel="noopener noreferrer" |
||||
className="collectible-details__image-link" |
||||
> |
||||
{image} |
||||
</a> |
||||
</Typography> |
||||
</Box> |
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H6} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ |
||||
margin: 0, |
||||
marginBottom: 4, |
||||
marginRight: 2, |
||||
}} |
||||
className="collectible-details__link-title" |
||||
> |
||||
{t('contractAddress')} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H6} |
||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD} |
||||
boxProps={{ |
||||
margin: 0, |
||||
marginBottom: 4, |
||||
}} |
||||
> |
||||
<a |
||||
target="_blank" |
||||
className="collectible-details__contract-link" |
||||
href={getTokenTrackerLink( |
||||
address, |
||||
currentNetwork, |
||||
null, |
||||
null, |
||||
rpcPrefs, |
||||
)} |
||||
rel="noopener noreferrer" |
||||
> |
||||
{getEnvironmentType() === ENVIRONMENT_TYPE_POPUP |
||||
? shortenAddress(address) |
||||
: address} |
||||
</a> |
||||
</Typography> |
||||
</Box> |
||||
</Box> |
||||
</Box> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
CollectibleDetails.propTypes = { |
||||
collectible: PropTypes.shape({ |
||||
address: PropTypes.string.isRequired, |
||||
tokenId: PropTypes.string.isRequired, |
||||
name: PropTypes.string, |
||||
description: PropTypes.string, |
||||
image: PropTypes.string, |
||||
standard: PropTypes.string, |
||||
imageThumbnail: PropTypes.string, |
||||
imagePreview: PropTypes.string, |
||||
creator: PropTypes.shape({ |
||||
address: PropTypes.string, |
||||
config: PropTypes.string, |
||||
profile_img_url: PropTypes.string, |
||||
}), |
||||
}), |
||||
}; |
||||
@ -0,0 +1,31 @@ |
||||
import React from 'react'; |
||||
import CollectibleDetails from './collectible-details'; |
||||
|
||||
export default { |
||||
title: 'Components/App/CollectiblesDetail', |
||||
id: __filename, |
||||
argTypes: { |
||||
collectible: { |
||||
control: 'object', |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
const collectible = { |
||||
name: 'Catnip Spicywright', |
||||
tokenId: '1124157', |
||||
address: '0x06012c8cf97bead5deae237070f9587f8e7a266d', |
||||
image: './catnip-spicywright.png', |
||||
description: |
||||
"Good day. My name is Catnip Spicywight, which got me teased a lot in high school. If I want to put low fat mayo all over my hamburgers, I shouldn't have to answer to anyone about it, am I right? One time I beat Arlene in an arm wrestle.", |
||||
}; |
||||
|
||||
export const DefaultStory = () => { |
||||
return <CollectibleDetails collectible={collectible} />; |
||||
}; |
||||
|
||||
DefaultStory.storyName = 'Default'; |
||||
|
||||
DefaultStory.args = { |
||||
collectible, |
||||
}; |
||||
@ -0,0 +1,72 @@ |
||||
$card-width-break-large: 224px; |
||||
$link-title-width: 160px; |
||||
$spacer-break-large: 24px; |
||||
$spacer-break-small: 16px; |
||||
|
||||
.collectible-details { |
||||
padding: 0 $spacer-break-small; |
||||
|
||||
@media screen and (min-width: $break-large) { |
||||
padding: 0 $spacer-break-large; |
||||
} |
||||
|
||||
&__top-section { |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-bottom: $spacer-break-small; |
||||
|
||||
@media screen and (min-width: $break-large) { |
||||
margin-bottom: $spacer-break-large; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
&__info { |
||||
@media screen and (min-width: $break-large) { |
||||
max-width: calc(100% - #{$card-width-break-large} - #{$spacer-break-large}); |
||||
flex: 0 0 calc(100% - #{$card-width-break-large} - #{$spacer-break-large}); |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__card { |
||||
overflow: hidden; |
||||
margin-bottom: $spacer-break-small; |
||||
|
||||
@media screen and (min-width: $break-large) { |
||||
margin-right: $spacer-break-large; |
||||
margin-bottom: 0; |
||||
max-width: $card-width-break-large; |
||||
flex: 0 0 $card-width-break-large; |
||||
height: $card-width-break-large; |
||||
} |
||||
} |
||||
|
||||
&__image { |
||||
width: 100%; |
||||
|
||||
@media screen and (min-width: $break-large) { |
||||
width: $card-width-break-large; |
||||
} |
||||
} |
||||
|
||||
&__address { |
||||
overflow-wrap: break-word; |
||||
} |
||||
|
||||
&__contract-link, |
||||
&__image-link { |
||||
color: $primary-1; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
word-break: break-all; |
||||
|
||||
&:hover { |
||||
color: $primary-3; |
||||
} |
||||
} |
||||
|
||||
&__link-title { |
||||
flex: 0 0 $link-title-width; |
||||
max-width: 0 0 $link-title-width; |
||||
} |
||||
} |
||||
@ -0,0 +1,61 @@ |
||||
import React, { useContext, useState } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
import { I18nContext } from '../../../contexts/i18n'; |
||||
import { Menu, MenuItem } from '../../ui/menu'; |
||||
|
||||
const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => { |
||||
const t = useContext(I18nContext); |
||||
const [ |
||||
collectibleOptionsButtonElement, |
||||
setCollectibleOptionsButtonElement, |
||||
] = useState(null); |
||||
const [collectibleOptionsOpen, setCollectibleOptionsOpen] = useState(false); |
||||
|
||||
return ( |
||||
<> |
||||
<button |
||||
className="fas fa-ellipsis-v collectible-options__button" |
||||
data-testid="collectible-options__button" |
||||
onClick={() => setCollectibleOptionsOpen(true)} |
||||
ref={setCollectibleOptionsButtonElement} |
||||
/> |
||||
{collectibleOptionsOpen ? ( |
||||
<Menu |
||||
anchorElement={collectibleOptionsButtonElement} |
||||
onHide={() => setCollectibleOptionsOpen(false)} |
||||
> |
||||
{onViewOnOpensea ? ( |
||||
<MenuItem |
||||
iconClassName="fas fa-qrcode" |
||||
data-testid="collectible-options__view-on-opensea" |
||||
onClick={() => { |
||||
setCollectibleOptionsOpen(false); |
||||
onViewOnOpensea(); |
||||
}} |
||||
> |
||||
{t('viewOnOpensea')} |
||||
</MenuItem> |
||||
) : null} |
||||
<MenuItem |
||||
iconClassName="fas fa-trash-alt collectible-options__icon" |
||||
data-testid="collectible-options__hide" |
||||
onClick={() => { |
||||
setCollectibleOptionsOpen(false); |
||||
onRemove(); |
||||
}} |
||||
> |
||||
{t('removeNFT')} |
||||
</MenuItem> |
||||
</Menu> |
||||
) : null} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
CollectibleOptions.propTypes = { |
||||
onRemove: PropTypes.func.isRequired, |
||||
onViewOnOpensea: PropTypes.func.isRequired, |
||||
}; |
||||
|
||||
export default CollectibleOptions; |
||||
@ -0,0 +1,12 @@ |
||||
.collectible-options { |
||||
&__button { |
||||
font-size: $font-size-paragraph; |
||||
color: $Black-100; |
||||
background-color: inherit; |
||||
padding: 2px 0 2px 8px; |
||||
} |
||||
|
||||
&__icon { |
||||
font-weight: 900; |
||||
} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export { default } from './collectibles-detection-notice'; |
||||
@ -0,0 +1,31 @@ |
||||
.collectibles-detection-notice { |
||||
&__message { |
||||
position: relative; |
||||
padding: 0 1rem 1rem 1rem !important; |
||||
|
||||
&__close-button { |
||||
background-color: transparent; |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
content: '\00D7'; |
||||
font-size: 29px; |
||||
font-weight: 200; |
||||
color: $black; |
||||
background-color: transparent; |
||||
top: 0; |
||||
right: 12px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
a.collectibles-detection-notice__message__link { |
||||
@include H6; |
||||
|
||||
width: 60%; |
||||
padding: 0; |
||||
justify-content: flex-start; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
} |
||||
@ -1,148 +0,0 @@ |
||||
import React, { useState } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import Box from '../../ui/box'; |
||||
import Button from '../../ui/button'; |
||||
import Typography from '../../ui/typography/typography'; |
||||
import { |
||||
COLORS, |
||||
TYPOGRAPHY, |
||||
TEXT_ALIGN, |
||||
JUSTIFY_CONTENT, |
||||
FLEX_DIRECTION, |
||||
ALIGN_ITEMS, |
||||
DISPLAY, |
||||
BLOCK_SIZES, |
||||
SIZES, |
||||
FLEX_WRAP, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
import { getEnvironmentType } from '../../../../app/scripts/lib/util'; |
||||
|
||||
export default function CollectiblesItems({ onAddNFT, onRefreshList }) { |
||||
const t = useI18nContext(); |
||||
const collections = {}; |
||||
const defaultDropdownState = {}; |
||||
|
||||
Object.keys(collections).forEach((key) => { |
||||
defaultDropdownState[key] = true; |
||||
}); |
||||
|
||||
const [dropdownState, setDropdownState] = useState(defaultDropdownState); |
||||
const width = |
||||
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP |
||||
? BLOCK_SIZES.ONE_THIRD |
||||
: BLOCK_SIZES.ONE_SIXTH; |
||||
return ( |
||||
<div className="collectibles-items"> |
||||
<Box padding={[4, 6, 4, 6]} flexDirection={FLEX_DIRECTION.COLUMN}> |
||||
<> |
||||
{Object.keys(collections).map((key, index) => { |
||||
const { icon, collectibles } = collections[key]; |
||||
const isExpanded = dropdownState[key]; |
||||
|
||||
return ( |
||||
<div key={`collection-${index}`}> |
||||
<Box |
||||
marginTop={4} |
||||
marginBottom={4} |
||||
display={DISPLAY.FLEX} |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN} |
||||
> |
||||
<Box alignItems={ALIGN_ITEMS.CENTER}> |
||||
<img width="28" src={icon} /> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H4} |
||||
margin={[0, 0, 0, 2]} |
||||
> |
||||
{`${key} (${collectibles.length})`} |
||||
</Typography> |
||||
</Box> |
||||
<Box alignItems={ALIGN_ITEMS.FLEX_END}> |
||||
<i |
||||
className={`fa fa-lg fa-chevron-${ |
||||
isExpanded ? 'down' : 'right' |
||||
}`}
|
||||
onClick={() => { |
||||
setDropdownState((_dropdownState) => ({ |
||||
..._dropdownState, |
||||
[key]: !isExpanded, |
||||
})); |
||||
}} |
||||
/> |
||||
</Box> |
||||
</Box> |
||||
{isExpanded ? ( |
||||
<Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP}> |
||||
{collectibles.map((collectible, i) => { |
||||
return ( |
||||
<Box width={width} padding={2} key={`collectible-${i}`}> |
||||
<Box |
||||
borderRadius={SIZES.MD} |
||||
backgroundColor={collectible.backgroundColor} |
||||
> |
||||
<img src={collectible.icon} /> |
||||
</Box> |
||||
</Box> |
||||
); |
||||
})} |
||||
</Box> |
||||
) : null} |
||||
</div> |
||||
); |
||||
})} |
||||
<Box |
||||
marginTop={6} |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H5} |
||||
align={TEXT_ALIGN.CENTER} |
||||
> |
||||
{t('missingNFT')} |
||||
</Typography> |
||||
<Box |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
> |
||||
<Box justifyContent={JUSTIFY_CONTENT.FLEX_END}> |
||||
<Button |
||||
type="link" |
||||
onClick={onRefreshList} |
||||
style={{ padding: '4px' }} |
||||
> |
||||
{t('refreshList')} |
||||
</Button> |
||||
</Box> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H4} |
||||
align={TEXT_ALIGN.CENTER} |
||||
> |
||||
{t('or')} |
||||
</Typography> |
||||
<Box justifyContent={JUSTIFY_CONTENT.FLEX_START}> |
||||
<Button |
||||
type="link" |
||||
onClick={onAddNFT} |
||||
style={{ padding: '4px' }} |
||||
> |
||||
{t('addNFTLowerCase')} |
||||
</Button> |
||||
</Box> |
||||
</Box> |
||||
</Box> |
||||
</> |
||||
</Box> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
CollectiblesItems.propTypes = { |
||||
onAddNFT: PropTypes.func.isRequired, |
||||
onRefreshList: PropTypes.func.isRequired, |
||||
}; |
||||
@ -0,0 +1,164 @@ |
||||
import React, { useState } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { useSelector } from 'react-redux'; |
||||
import { useHistory } from 'react-router-dom'; |
||||
import Box from '../../ui/box'; |
||||
import Typography from '../../ui/typography/typography'; |
||||
import { |
||||
COLORS, |
||||
TYPOGRAPHY, |
||||
JUSTIFY_CONTENT, |
||||
FLEX_DIRECTION, |
||||
ALIGN_ITEMS, |
||||
DISPLAY, |
||||
BLOCK_SIZES, |
||||
FLEX_WRAP, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; |
||||
import { getEnvironmentType } from '../../../../app/scripts/lib/util'; |
||||
import { getIpfsGateway } from '../../../selectors'; |
||||
import { ASSET_ROUTE } from '../../../helpers/constants/routes'; |
||||
import { getAssetImageURL } from '../../../helpers/utils/util'; |
||||
|
||||
const width = |
||||
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP |
||||
? BLOCK_SIZES.ONE_THIRD |
||||
: BLOCK_SIZES.ONE_SIXTH; |
||||
export default function CollectiblesItems({ collections = {} }) { |
||||
const defaultDropdownState = {}; |
||||
const ipfsGateway = useSelector(getIpfsGateway); |
||||
|
||||
Object.keys(collections).forEach((key) => { |
||||
defaultDropdownState[key] = true; |
||||
}); |
||||
const history = useHistory(); |
||||
|
||||
const [dropdownState, setDropdownState] = useState(defaultDropdownState); |
||||
return ( |
||||
<div className="collectibles-items"> |
||||
<Box padding={[6, 4]} flexDirection={FLEX_DIRECTION.COLUMN}> |
||||
<> |
||||
{Object.keys(collections).map((key, index) => { |
||||
const { |
||||
collectibles, |
||||
collectionName, |
||||
collectionImage, |
||||
} = collections[key]; |
||||
|
||||
const isExpanded = dropdownState[key]; |
||||
return ( |
||||
<div |
||||
className="collectibles-items__item" |
||||
key={`collection-${index}`} |
||||
onClick={() => { |
||||
setDropdownState((_dropdownState) => ({ |
||||
..._dropdownState, |
||||
[key]: !isExpanded, |
||||
})); |
||||
}} |
||||
> |
||||
<Box |
||||
marginBottom={2} |
||||
display={DISPLAY.FLEX} |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN} |
||||
className="collectibles-items__item__accordion-title" |
||||
> |
||||
<Box |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
className="collectibles-items__item__collection-header" |
||||
> |
||||
{collectionImage ? ( |
||||
<img |
||||
src={collectionImage} |
||||
className="collectibles-items__item__collection-image" |
||||
/> |
||||
) : ( |
||||
<div className="collectibles-items__item__collection-image-alt"> |
||||
{collectionName[0]} |
||||
</div> |
||||
)} |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H5} |
||||
margin={[0, 0, 0, 2]} |
||||
> |
||||
{`${collectionName} (${collectibles.length})`} |
||||
</Typography> |
||||
</Box> |
||||
<Box alignItems={ALIGN_ITEMS.FLEX_END}> |
||||
<i |
||||
className={`fa fa-chevron-${ |
||||
isExpanded ? 'down' : 'right' |
||||
}`}
|
||||
/> |
||||
</Box> |
||||
</Box> |
||||
{isExpanded ? ( |
||||
<Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP} gap={4}> |
||||
{collectibles.map((collectible, i) => { |
||||
const { |
||||
image, |
||||
address, |
||||
tokenId, |
||||
backgroundColor, |
||||
} = collectible; |
||||
const collectibleImage = getAssetImageURL( |
||||
image, |
||||
ipfsGateway, |
||||
); |
||||
return ( |
||||
<Box width={width} key={`collectible-${i}`}> |
||||
<div |
||||
className="collectibles-items__image__wrapper" |
||||
style={{ |
||||
backgroundColor, |
||||
}} |
||||
> |
||||
<img |
||||
onClick={() => |
||||
history.push( |
||||
`${ASSET_ROUTE}/${address}/${tokenId}`, |
||||
) |
||||
} |
||||
className="collectibles-items__image" |
||||
src={collectibleImage} |
||||
/> |
||||
</div> |
||||
</Box> |
||||
); |
||||
})} |
||||
</Box> |
||||
) : null} |
||||
</div> |
||||
); |
||||
})} |
||||
</> |
||||
</Box> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
CollectiblesItems.propTypes = { |
||||
collections: PropTypes.shape({ |
||||
collectibles: PropTypes.arrayOf( |
||||
PropTypes.shape({ |
||||
address: PropTypes.string.isRequired, |
||||
tokenId: PropTypes.string.isRequired, |
||||
name: PropTypes.string, |
||||
description: PropTypes.string, |
||||
image: PropTypes.string, |
||||
standard: PropTypes.string, |
||||
imageThumbnail: PropTypes.string, |
||||
imagePreview: PropTypes.string, |
||||
creator: PropTypes.shape({ |
||||
address: PropTypes.string, |
||||
config: PropTypes.string, |
||||
profile_img_url: PropTypes.string, |
||||
}), |
||||
}), |
||||
), |
||||
collectionImage: PropTypes.string, |
||||
collectionName: PropTypes.string, |
||||
}), |
||||
}; |
||||
@ -1 +1 @@ |
||||
export { default } from './collectibles-items.component'; |
||||
export { default } from './collectibles-items'; |
||||
|
||||
@ -0,0 +1,41 @@ |
||||
.collectibles-items { |
||||
&__image__wrapper { |
||||
border-radius: 4px; |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&__image { |
||||
border-radius: 4px; |
||||
width: 100%; |
||||
height: 100%; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&__item { |
||||
margin-bottom: 24px; |
||||
|
||||
&__accordion-title { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&__collection-image { |
||||
width: 32px; |
||||
height: 32px; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
&__collection-image-alt { |
||||
border-radius: 50%; |
||||
width: 32px; |
||||
height: 32px; |
||||
padding: 8px; |
||||
background: $ui-4; |
||||
color: $ui-white; |
||||
text-align: center; |
||||
line-height: 1; |
||||
} |
||||
} |
||||
} |
||||
@ -1,90 +0,0 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import Box from '../../ui/box'; |
||||
import Button from '../../ui/button'; |
||||
import Typography from '../../ui/typography/typography'; |
||||
import NewCollectiblesNotice from '../new-collectibles-notice'; |
||||
import CollectiblesItems from '../collectibles-items'; |
||||
import { |
||||
COLORS, |
||||
TYPOGRAPHY, |
||||
TEXT_ALIGN, |
||||
JUSTIFY_CONTENT, |
||||
FLEX_DIRECTION, |
||||
FONT_WEIGHT, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
|
||||
export default function CollectiblesTab({ onAddNFT }) { |
||||
const collectibles = []; |
||||
const newNFTsDetected = false; |
||||
const t = useI18nContext(); |
||||
|
||||
return ( |
||||
<div className="collectibles-tab"> |
||||
{collectibles.length > 0 ? ( |
||||
<CollectiblesItems |
||||
onAddNFT={onAddNFT} |
||||
onRefreshList={() => { |
||||
console.log('refreshing collectibles'); |
||||
}} |
||||
/> |
||||
) : ( |
||||
<Box padding={[6, 12, 6, 12]}> |
||||
{newNFTsDetected ? <NewCollectiblesNotice /> : null} |
||||
<Box justifyContent={JUSTIFY_CONTENT.CENTER}> |
||||
<img src="./images/no-nfts.svg" /> |
||||
</Box> |
||||
<Box |
||||
marginTop={4} |
||||
marginBottom={12} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H4} |
||||
align={TEXT_ALIGN.CENTER} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
> |
||||
{t('noNFTs')} |
||||
</Typography> |
||||
<Button |
||||
type="link" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
href="https://metamask.zendesk.com/hc/en-us/articles/360058238591-NFT-tokens-in-MetaMask-wallet" |
||||
style={{ padding: 0, fontSize: '1rem' }} |
||||
> |
||||
{t('learnMore')} |
||||
</Button> |
||||
</Box> |
||||
<Box |
||||
marginBottom={4} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H5} |
||||
align={TEXT_ALIGN.CENTER} |
||||
> |
||||
{t('missingNFT')} |
||||
</Typography> |
||||
<Button |
||||
type="link" |
||||
onClick={onAddNFT} |
||||
style={{ padding: 0, fontSize: '1rem' }} |
||||
> |
||||
{t('addNFT')} |
||||
</Button> |
||||
</Box> |
||||
</Box> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
CollectiblesTab.propTypes = { |
||||
onAddNFT: PropTypes.func.isRequired, |
||||
}; |
||||
@ -0,0 +1,162 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
import { useHistory } from 'react-router-dom'; |
||||
import Box from '../../ui/box'; |
||||
import Button from '../../ui/button'; |
||||
import Typography from '../../ui/typography/typography'; |
||||
import CollectiblesDetectionNotice from '../collectibles-detection-notice'; |
||||
import CollectiblesItems from '../collectibles-items'; |
||||
import { |
||||
COLORS, |
||||
TYPOGRAPHY, |
||||
TEXT_ALIGN, |
||||
JUSTIFY_CONTENT, |
||||
FLEX_DIRECTION, |
||||
FONT_WEIGHT, |
||||
ALIGN_ITEMS, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
import { |
||||
getCollectibles, |
||||
getCollectibleContracts, |
||||
getCollectiblesDetectionNoticeDismissed, |
||||
} from '../../../ducks/metamask/metamask'; |
||||
import { getIsMainnet, getUseCollectibleDetection } from '../../../selectors'; |
||||
import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes'; |
||||
import { detectCollectibles } from '../../../store/actions'; |
||||
|
||||
export default function CollectiblesTab({ onAddNFT }) { |
||||
const collectibles = useSelector(getCollectibles); |
||||
const collectibleContracts = useSelector(getCollectibleContracts); |
||||
const useCollectibleDetection = useSelector(getUseCollectibleDetection); |
||||
const isMainnet = useSelector(getIsMainnet); |
||||
const collectibleDetectionNoticeDismissed = useSelector( |
||||
getCollectiblesDetectionNoticeDismissed, |
||||
); |
||||
const history = useHistory(); |
||||
const t = useI18nContext(); |
||||
const dispatch = useDispatch(); |
||||
|
||||
const collections = {}; |
||||
collectibles.forEach((collectible) => { |
||||
if (collections[collectible.address]) { |
||||
collections[collectible.address].collectibles.push(collectible); |
||||
} else { |
||||
const collectionContract = collectibleContracts.find( |
||||
({ address }) => address === collectible.address, |
||||
); |
||||
collections[collectible.address] = { |
||||
collectionName: collectionContract?.name || collectible.name, |
||||
collectionImage: |
||||
collectionContract?.logo || collectible.collectionImage, |
||||
collectibles: [collectible], |
||||
}; |
||||
} |
||||
}); |
||||
|
||||
const onEnableAutoDetect = () => { |
||||
history.push(EXPERIMENTAL_ROUTE); |
||||
}; |
||||
|
||||
return ( |
||||
<div className="collectibles-tab"> |
||||
{collectibles.length > 0 ? ( |
||||
<CollectiblesItems collections={collections} /> |
||||
) : ( |
||||
<Box padding={[6, 12, 6, 12]}> |
||||
{isMainnet && |
||||
!useCollectibleDetection && |
||||
!collectibleDetectionNoticeDismissed ? ( |
||||
<CollectiblesDetectionNotice /> |
||||
) : null} |
||||
<Box justifyContent={JUSTIFY_CONTENT.CENTER}> |
||||
<img src="./images/no-nfts.svg" /> |
||||
</Box> |
||||
<Box |
||||
marginTop={4} |
||||
marginBottom={12} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H4} |
||||
align={TEXT_ALIGN.CENTER} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
> |
||||
{t('noNFTs')} |
||||
</Typography> |
||||
<Button |
||||
type="link" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
href="https://metamask.zendesk.com/hc/en-us/articles/360058238591-NFT-tokens-in-MetaMask-wallet" |
||||
style={{ padding: 0, fontSize: '1rem' }} |
||||
> |
||||
{t('learnMoreUpperCase')} |
||||
</Button> |
||||
</Box> |
||||
</Box> |
||||
)} |
||||
<Box |
||||
marginBottom={4} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H5} |
||||
align={TEXT_ALIGN.CENTER} |
||||
> |
||||
{t('missingNFT')} |
||||
</Typography> |
||||
<Box |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
> |
||||
{isMainnet ? ( |
||||
<> |
||||
<Box |
||||
className="collectibles-tab__link" |
||||
justifyContent={JUSTIFY_CONTENT.FLEX_END} |
||||
> |
||||
{useCollectibleDetection ? ( |
||||
<Button |
||||
type="link" |
||||
onClick={() => dispatch(detectCollectibles())} |
||||
> |
||||
{t('refreshList')} |
||||
</Button> |
||||
) : ( |
||||
<Button type="link" onClick={onEnableAutoDetect}> |
||||
{t('enableAutoDetect')} |
||||
</Button> |
||||
)} |
||||
</Box> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H4} |
||||
align={TEXT_ALIGN.CENTER} |
||||
> |
||||
{t('or')} |
||||
</Typography> |
||||
</> |
||||
) : null} |
||||
<Box |
||||
justifyContent={JUSTIFY_CONTENT.FLEX_START} |
||||
className="collectibles-tab__link" |
||||
> |
||||
<Button type="link" onClick={onAddNFT}> |
||||
{t('importNFTs')} |
||||
</Button> |
||||
</Box> |
||||
</Box> |
||||
</Box> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
CollectiblesTab.propTypes = { |
||||
onAddNFT: PropTypes.func.isRequired, |
||||
}; |
||||
@ -0,0 +1,300 @@ |
||||
import React from 'react'; |
||||
import { fireEvent, screen } from '@testing-library/react'; |
||||
import reactRouterDom from 'react-router-dom'; |
||||
import configureStore from '../../../store/store'; |
||||
import { renderWithProvider } from '../../../../test/jest/rendering'; |
||||
import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes'; |
||||
import { setBackgroundConnection } from '../../../../test/jest'; |
||||
import CollectiblesTab from '.'; |
||||
|
||||
const COLLECTIBLES = [ |
||||
{ |
||||
address: '0x495f947276749Ce646f68AC8c248420045cb7b5e', |
||||
tokenId: |
||||
'58076532811975507823669075598676816378162417803895263482849101575514658701313', |
||||
name: 'Punk #4', |
||||
creator: { |
||||
user: { |
||||
username: null, |
||||
}, |
||||
profile_img_url: null, |
||||
address: '0x806627172af48bd5b0765d3449a7def80d6576ff', |
||||
config: '', |
||||
}, |
||||
description: 'Red Mohawk bam!', |
||||
image: |
||||
'https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE', |
||||
standard: 'ERC1155', |
||||
}, |
||||
{ |
||||
address: '0x495f947276749Ce646f68AC8c248420045cb7b5e', |
||||
tokenId: |
||||
'58076532811975507823669075598676816378162417803895263482849101574415147073537', |
||||
name: 'Punk #3', |
||||
creator: { |
||||
user: { |
||||
username: null, |
||||
}, |
||||
profile_img_url: null, |
||||
address: '0x806627172af48bd5b0765d3449a7def80d6576ff', |
||||
config: '', |
||||
}, |
||||
description: 'Clown PUNK!!!', |
||||
image: |
||||
'https://lh3.googleusercontent.com/H7VrxaalZv4PF1B8U7ADuc8AfuqTVyzmMEDQ5OXKlx0Tqu5XiwsKYj4j_pAF6wUJjLMQbSN_0n3fuj84lNyRhFW9hyrxqDfY1IiQEQ', |
||||
standard: 'ERC1155', |
||||
}, |
||||
{ |
||||
address: '0x495f947276749Ce646f68AC8c248420045cb7b5e', |
||||
tokenId: |
||||
'58076532811975507823669075598676816378162417803895263482849101573315635445761', |
||||
name: 'Punk #2', |
||||
creator: { |
||||
user: { |
||||
username: null, |
||||
}, |
||||
profile_img_url: null, |
||||
address: '0x806627172af48bd5b0765d3449a7def80d6576ff', |
||||
config: '', |
||||
}, |
||||
description: 'Got glasses and black hair!', |
||||
image: |
||||
'https://lh3.googleusercontent.com/CHNTSlKB_Gob-iwTq8jcag6XwBkTqBMLt_vEKeBv18Q4AoPFAEPceqK6mRzkad2s5djx6CT5zbGQwDy81WwtNzViK5dQbG60uAWv', |
||||
standard: 'ERC1155', |
||||
}, |
||||
{ |
||||
address: '0x495f947276749Ce646f68AC8c248420045cb7b5e', |
||||
tokenId: |
||||
'58076532811975507823669075598676816378162417803895263482849101572216123817985', |
||||
name: 'Punk #1', |
||||
creator: { |
||||
user: { |
||||
username: null, |
||||
}, |
||||
profile_img_url: null, |
||||
address: '0x806627172af48bd5b0765d3449a7def80d6576ff', |
||||
config: '', |
||||
}, |
||||
image: |
||||
'https://lh3.googleusercontent.com/4jfPi-nQNWCUXD5qVNVWX7LX2UufU_elEJcvICFlsTdcBXv70asnDEOlI8oKECZxlXq1wseeIXMwmP5tLyOUxMKk', |
||||
standard: 'ERC1155', |
||||
}, |
||||
{ |
||||
address: '0x495f947276749Ce646f68AC8c248420045cb7b5e', |
||||
tokenId: |
||||
'58076532811975507823669075598676816378162417803895263482849101571116612190209', |
||||
name: 'Punk #4651', |
||||
creator: { |
||||
user: { |
||||
username: null, |
||||
}, |
||||
profile_img_url: null, |
||||
address: '0x806627172af48bd5b0765d3449a7def80d6576ff', |
||||
config: '', |
||||
}, |
||||
image: |
||||
'https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE', |
||||
standard: 'ERC1155', |
||||
}, |
||||
{ |
||||
address: '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414', |
||||
tokenId: '1', |
||||
name: 'MUNK #1', |
||||
description: null, |
||||
image: 'ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL', |
||||
standard: 'ERC721', |
||||
}, |
||||
{ |
||||
address: '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414', |
||||
tokenId: '2', |
||||
name: 'MUNK #2', |
||||
description: null, |
||||
image: 'ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL', |
||||
standard: 'ERC721', |
||||
}, |
||||
{ |
||||
address: '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414', |
||||
tokenId: '3', |
||||
name: 'MUNK #3', |
||||
description: null, |
||||
image: 'ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL', |
||||
standard: 'ERC721', |
||||
}, |
||||
]; |
||||
|
||||
const COLLECTIBLES_CONTRACTS = [ |
||||
{ |
||||
address: '0x495f947276749Ce646f68AC8c248420045cb7b5e', |
||||
name: 'PUNKS', |
||||
symbol: 'PNKS', |
||||
schemaName: 'ERC1155', |
||||
}, |
||||
{ |
||||
address: '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414', |
||||
name: 'Munks', |
||||
symbol: 'MNKS', |
||||
}, |
||||
]; |
||||
|
||||
const ACCOUNT_1 = '0x123'; |
||||
const ACCOUNT_2 = '0x456'; |
||||
|
||||
const render = ({ |
||||
collectibleContracts = [], |
||||
collectibles = [], |
||||
selectedAddress, |
||||
chainId = '0x1', |
||||
collectiblesDetectionNoticeDismissed = false, |
||||
useCollectibleDetection, |
||||
onAddNFT = jest.fn(), |
||||
}) => { |
||||
const store = configureStore({ |
||||
metamask: { |
||||
allCollectibles: { |
||||
[ACCOUNT_1]: { |
||||
[chainId]: collectibles, |
||||
}, |
||||
}, |
||||
allCollectibleContracts: { |
||||
[ACCOUNT_1]: { |
||||
[chainId]: collectibleContracts, |
||||
}, |
||||
}, |
||||
provider: { chainId }, |
||||
selectedAddress, |
||||
collectiblesDetectionNoticeDismissed, |
||||
useCollectibleDetection, |
||||
}, |
||||
}); |
||||
return renderWithProvider(<CollectiblesTab onAddNFT={onAddNFT} />, store); |
||||
}; |
||||
|
||||
describe('Collectible Items', () => { |
||||
const detectCollectiblesStub = jest.fn(); |
||||
const setCollectiblesDetectionNoticeDismissedStub = jest.fn(); |
||||
setBackgroundConnection({ |
||||
setCollectiblesDetectionNoticeDismissed: setCollectiblesDetectionNoticeDismissedStub, |
||||
detectCollectibles: detectCollectiblesStub, |
||||
}); |
||||
const historyPushMock = jest.fn(); |
||||
|
||||
jest |
||||
.spyOn(reactRouterDom, 'useHistory') |
||||
.mockImplementation() |
||||
.mockReturnValue({ push: historyPushMock }); |
||||
|
||||
afterEach(() => { |
||||
jest.clearAllMocks(); |
||||
}); |
||||
|
||||
describe('Collectibles Detection Notice', () => { |
||||
it('should render the Collectibles Detection Notice when currently selected network is Mainnet and currently selected account has no collectibles', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_2, |
||||
collectibles: COLLECTIBLES, |
||||
}); |
||||
expect(screen.queryByText('New! NFT detection')).toBeInTheDocument(); |
||||
}); |
||||
it('should not render the Collectibles Detection Notice when currently selected network is Mainnet and currently selected account has collectibles', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_1, |
||||
collectibles: COLLECTIBLES, |
||||
}); |
||||
expect(screen.queryByText('New! NFT detection')).not.toBeInTheDocument(); |
||||
}); |
||||
it('should take user to the experimental settings tab in setings when user clicks "Turn on NFT detection in Settings"', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_2, |
||||
collectibles: COLLECTIBLES, |
||||
}); |
||||
fireEvent.click(screen.queryByText('Turn on NFT detection in Settings')); |
||||
expect(historyPushMock).toHaveBeenCalledTimes(1); |
||||
expect(historyPushMock).toHaveBeenCalledWith(EXPERIMENTAL_ROUTE); |
||||
}); |
||||
it('should not render the Collectibles Detection Notice when currently selected network is Mainnet and currently selected account has no collectibles but use collectible autodetection preference is set to true', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_1, |
||||
collectibles: COLLECTIBLES, |
||||
useCollectibleDetection: true, |
||||
}); |
||||
expect(screen.queryByText('New! NFT detection')).not.toBeInTheDocument(); |
||||
}); |
||||
it('should not render the Collectibles Detection Notice when currently selected network is Mainnet and currently selected account has no collectibles but user has dismissed the notice before', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_1, |
||||
collectibles: COLLECTIBLES, |
||||
collectiblesDetectionNoticeDismissed: true, |
||||
}); |
||||
expect(screen.queryByText('New! NFT detection')).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should call setCollectibesDetectionNoticeDismissed when users clicks "X"', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_2, |
||||
collectibles: COLLECTIBLES, |
||||
}); |
||||
expect( |
||||
setCollectiblesDetectionNoticeDismissedStub, |
||||
).not.toHaveBeenCalled(); |
||||
fireEvent.click( |
||||
screen.queryByTestId('collectibles-detection-notice-close'), |
||||
); |
||||
expect(setCollectiblesDetectionNoticeDismissedStub).toHaveBeenCalled(); |
||||
}); |
||||
}); |
||||
|
||||
describe('Collections', () => { |
||||
it('should render the name of the collections and number of collectibles in each collection if current account/chainId combination has collectibles', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_1, |
||||
collectibles: COLLECTIBLES, |
||||
collectibleContracts: COLLECTIBLES_CONTRACTS, |
||||
}); |
||||
expect(screen.queryByText('PUNKS (5)')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Munks (3)')).toBeInTheDocument(); |
||||
}); |
||||
it('should not render collections if current account/chainId combination has collectibles', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_2, |
||||
collectibles: COLLECTIBLES, |
||||
collectibleContracts: COLLECTIBLES_CONTRACTS, |
||||
}); |
||||
expect(screen.queryByText('PUNKS (5)')).not.toBeInTheDocument(); |
||||
expect(screen.queryByText('Munks (3)')).not.toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
describe('Collectibles options', () => { |
||||
it('should render a link "Refresh list" when some collectibles are present and collectible auto-detection preference is set to true, which, when clicked calls a method DetectCollectibles', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_1, |
||||
collectibles: COLLECTIBLES, |
||||
useCollectibleDetection: true, |
||||
}); |
||||
expect(detectCollectiblesStub).not.toHaveBeenCalled(); |
||||
fireEvent.click(screen.queryByText('Refresh list')); |
||||
expect(detectCollectiblesStub).toHaveBeenCalled(); |
||||
}); |
||||
|
||||
it('should render a link "Enable Autodetect" when some collectibles are present and collectible auto-detection preference is set to false, which, when clicked sends user to the experimental tab of settings', () => { |
||||
render({ |
||||
selectedAddress: ACCOUNT_1, |
||||
collectibles: COLLECTIBLES, |
||||
}); |
||||
expect(historyPushMock).toHaveBeenCalledTimes(0); |
||||
fireEvent.click(screen.queryByText('Enable Autodetect')); |
||||
expect(historyPushMock).toHaveBeenCalledTimes(1); |
||||
expect(historyPushMock).toHaveBeenCalledWith(EXPERIMENTAL_ROUTE); |
||||
}); |
||||
it('should render a link "Import NFTs" when some collectibles are present, which, when clicked calls the passed in onAddNFT method', () => { |
||||
const onAddNFTStub = jest.fn(); |
||||
render({ |
||||
selectedAddress: ACCOUNT_1, |
||||
collectibles: COLLECTIBLES, |
||||
onAddNFT: onAddNFTStub, |
||||
}); |
||||
expect(onAddNFTStub).toHaveBeenCalledTimes(0); |
||||
fireEvent.click(screen.queryByText('Import NFTs')); |
||||
expect(onAddNFTStub).toHaveBeenCalledTimes(1); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1 +1 @@ |
||||
export { default } from './collectibles-tab.component'; |
||||
export { default } from './collectibles-tab'; |
||||
|
||||
@ -0,0 +1,8 @@ |
||||
.collectibles-tab { |
||||
&__link { |
||||
a { |
||||
padding: 4px; |
||||
font-size: 1rem; |
||||
} |
||||
} |
||||
} |
||||
@ -1 +0,0 @@ |
||||
export { default } from './new-collectibles-notice.component'; |
||||
@ -1 +1 @@ |
||||
export { default } from './add-collectible.component'; |
||||
export { default } from './add-collectible'; |
||||
|
||||
Loading…
Reference in new issue