m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Updating default collectibles tab view (#12575)

Browse Source
This commit is contained in:
ryanml 2021-11-05 14:23:28 -07:00 committed by GitHub
parent ea0192df7b
commit accfd0b049
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/_locales/en/messages.json
View File

@ -1439,6 +1439,9 @@
"message": "verify the network details", "message": "verify the network details",
"description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key." "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
}, },
"missingNFT": {
"message": "Don't see your NFT?"
},
"missingToken": { "missingToken": {
"message": "Don't see your token?" "message": "Don't see your token?"
}, },
@ -1573,10 +1576,7 @@
"message": "No Conversion Rate Available" "message": "No Conversion Rate Available"
}, },
"noNFTs": { "noNFTs": {
"message": "No NFTs to show" "message": "No NFTs yet"
},
"noNFTsDetails": {
"message": "Your NFTs will show up here. If you don't see your NFT, try importing manually."
}, },
"noThanks": { "noThanks": {
"message": "No Thanks" "message": "No Thanks"

BIN
app/images/diamond.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

10
app/images/no-nfts.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

81
ui/components/app/collectibles-list/collectibles-list.component.js
View File

@ -7,72 +7,69 @@ import {
COLORS, COLORS,
TYPOGRAPHY, TYPOGRAPHY,
TEXT_ALIGN, TEXT_ALIGN,
BLOCK_SIZES,
JUSTIFY_CONTENT, JUSTIFY_CONTENT,
FLEX_DIRECTION, FLEX_DIRECTION,
FONT_WEIGHT,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
export default function CollectiblesList({ onAddNFT }) { export default function CollectiblesList({ onAddNFT }) {
const collectibles = []; const collectibles = [];
const t = useI18nContext(); const t = useI18nContext();
const blockSizes = {
copy:
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
? BLOCK_SIZES.TWO_THIRDS
: BLOCK_SIZES.ONE_THIRD,
button:
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
? BLOCK_SIZES.HALF
: BLOCK_SIZES.ONE_FIFTH,
};
return ( return (
<div className="collectibles-list"> <div className="collectibles-list">
{collectibles.length > 0 ? ( {collectibles.length > 0 ? (
<span>{JSON.stringify(collectibles)}</span> <span>{JSON.stringify(collectibles)}</span>
) : ( ) : (
<Box padding={[4, 0, 4, 0]} flexDirection={FLEX_DIRECTION.COLUMN}> <Box padding={[4, 0, 4, 0]}>
<Box justifyContent={JUSTIFY_CONTENT.CENTER}> <Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<img src="./images/diamond.png" /> <img src="./images/no-nfts.svg" />
</Box> </Box>
<Typography <Box
color={COLORS.UI3} marginTop={4}
variant={TYPOGRAPHY.H3} marginBottom={12}
align={TEXT_ALIGN.CENTER} justifyContent={JUSTIFY_CONTENT.CENTER}
flexDirection={FLEX_DIRECTION.COLUMN}
> >
{t('noNFTs')} <Typography
</Typography> color={COLORS.UI3}
<Box justifyContent={JUSTIFY_CONTENT.CENTER}> variant={TYPOGRAPHY.H4}
<Box width={blockSizes.copy}> align={TEXT_ALIGN.CENTER}
<Typography fontWeight={FONT_WEIGHT.BOLD}
color={COLORS.UI3} >
variant={TYPOGRAPHY.H5} {t('noNFTs')}
align={TEXT_ALIGN.CENTER} </Typography>
>
{t('noNFTsDetails')}
</Typography>
</Box>
</Box>
<Box marginTop={6} justifyContent={JUSTIFY_CONTENT.CENTER}>
<Box width={blockSizes.button}>
<Button type="primary" onClick={onAddNFT}>
{t('addNFT')}
</Button>
</Box>
</Box>
<Box marginTop={2}>
<Button <Button
href="https://community.metamask.io/"
target="_blank"
type="link" type="link"
target="_blank"
rel="noopener noreferrer" 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')} {t('learnMore')}
</Button> </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>
<Button
type="link"
onClick={onAddNFT}
style={{ padding: 0, fontSize: '1rem' }}
>
{t('addNFT')}
</Button>
</Box>
</Box> </Box>
)} )}
</div> </div>