mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Adding collectibles items overview (#12506)
* Adding collectibles items overview * addressing feedback Co-authored-by: Alex <adonesky@gmail.com>
This commit is contained in:
ryanml
GitHub
parent
0bed51b936
commit
279c8072ed
@ -139,6 +139,9 @@
|
||||
"addNFT": {
|
||||
"message": "Add NFT"
|
||||
},
|
||||
"addNFTLowerCase": {
|
||||
"message": "add NFT"
|
||||
},
|
||||
"addNetwork": {
|
||||
"message": "Add Network"
|
||||
},
|
||||
|
||||
@ -0,0 +1,148 @@
|
||||
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,
|
||||
};
|
||||
1
ui/components/app/collectibles-items/index.js
Normal file
1
ui/components/app/collectibles-items/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './collectibles-items.component';
|
||||
@ -1 +0,0 @@
|
||||
export { default } from './collectibles-list.component';
|
||||
@ -4,6 +4,7 @@ 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,
|
||||
@ -14,15 +15,20 @@ import {
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
|
||||
export default function CollectiblesList({ onAddNFT }) {
|
||||
export default function CollectiblesTab({ onAddNFT }) {
|
||||
const collectibles = [];
|
||||
const newNFTsDetected = true;
|
||||
const newNFTsDetected = false;
|
||||
const t = useI18nContext();
|
||||
|
||||
return (
|
||||
<div className="collectibles-list">
|
||||
<div className="collectibles-tab">
|
||||
{collectibles.length > 0 ? (
|
||||
<span>{JSON.stringify(collectibles)}</span>
|
||||
<CollectiblesItems
|
||||
onAddNFT={onAddNFT}
|
||||
onRefreshList={() => {
|
||||
console.log('refreshing collectibles');
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Box padding={[6, 12, 6, 12]}>
|
||||
{newNFTsDetected ? <NewCollectiblesNotice /> : null}
|
||||
@ -79,6 +85,6 @@ export default function CollectiblesList({ onAddNFT }) {
|
||||
);
|
||||
}
|
||||
|
||||
CollectiblesList.propTypes = {
|
||||
CollectiblesTab.propTypes = {
|
||||
onAddNFT: PropTypes.func.isRequired,
|
||||
};
|
||||
1
ui/components/app/collectibles-tab/index.js
Normal file
1
ui/components/app/collectibles-tab/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './collectibles-tab.component';
|
||||
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import { Redirect, Route } from 'react-router-dom';
|
||||
import { formatDate } from '../../helpers/utils/util';
|
||||
import AssetList from '../../components/app/asset-list';
|
||||
import CollectiblesList from '../../components/app/collectibles-list';
|
||||
import CollectiblesTab from '../../components/app/collectibles-tab';
|
||||
import HomeNotification from '../../components/app/home-notification';
|
||||
import MultipleNotifications from '../../components/app/multiple-notifications';
|
||||
import TransactionList from '../../components/app/transaction-list';
|
||||
@ -454,7 +454,7 @@ export default class Home extends PureComponent {
|
||||
data-testid="home__nfts-tab"
|
||||
name={t('nfts')}
|
||||
>
|
||||
<CollectiblesList
|
||||
<CollectiblesTab
|
||||
onAddNFT={() => {
|
||||
history.push(ADD_COLLECTIBLE_ROUTE);
|
||||
}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user