m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-21 17:37:01 +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",
"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": {
"message": "Don't see your token?"
},
@ -1573,10 +1576,7 @@
"message": "No Conversion Rate Available"
},
"noNFTs": {
"message": "No NFTs to show"
},
"noNFTsDetails": {
"message": "Your NFTs will show up here. If you don't see your NFT, try importing manually."
"message": "No NFTs yet"
},
"noThanks": {
"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,
TYPOGRAPHY,
TEXT_ALIGN,
BLOCK_SIZES,
JUSTIFY_CONTENT,
FLEX_DIRECTION,
FONT_WEIGHT,
} from '../../../helpers/constants/design-system';
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 }) {
const collectibles = [];
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 (
<div className="collectibles-list">
{collectibles.length > 0 ? (
<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}>
<img src="./images/diamond.png" />
<img src="./images/no-nfts.svg" />
</Box>
<Typography
color={COLORS.UI3}
variant={TYPOGRAPHY.H3}
align={TEXT_ALIGN.CENTER}
<Box
marginTop={4}
marginBottom={12}
justifyContent={JUSTIFY_CONTENT.CENTER}
flexDirection={FLEX_DIRECTION.COLUMN}
>
{t('noNFTs')}
</Typography>
<Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<Box width={blockSizes.copy}>
<Typography
color={COLORS.UI3}
variant={TYPOGRAPHY.H5}
align={TEXT_ALIGN.CENTER}
>
{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}>
<Typography
color={COLORS.UI3}
variant={TYPOGRAPHY.H4}
align={TEXT_ALIGN.CENTER}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('noNFTs')}
</Typography>
<Button
href="https://community.metamask.io/"
target="_blank"
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>