m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Adding new nfts detected notice (#12721)

Browse Source
This commit is contained in:
ryanml 2021-11-18 11:30:56 -07:00 committed by GitHub
parent 0daefe9ea0
commit d6d35d9acb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 70 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1604,6 +1604,12 @@
"newContract": {
"message": "New Contract"
},
"newNFTsDetected": {
"message": "New NFTs detected"
},
"newNFTsDetectedInfo": {
"message": "One or more new NFTs were detected in your wallet."
},
"newNetworkAdded": {
"message": "“$1” was successfully added!"
},
@ -2198,6 +2204,9 @@
"selectHdPath": {
"message": "Select HD Path"
},
"selectNFTPrivacyPreference": {
"message": "Select NFT privacy preference"
},
"selectPathHelp": {
"message": "If you don't see the accounts you expect, try switching the HD path."
},

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

@ -3,6 +3,7 @@ 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 {
COLORS,
TYPOGRAPHY,
@ -15,6 +16,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
export default function CollectiblesList({ onAddNFT }) {
const collectibles = [];
const newNFTsDetected = true;
const t = useI18nContext();
return (
@ -22,7 +24,8 @@ export default function CollectiblesList({ onAddNFT }) {
{collectibles.length > 0 ? (
<span>{JSON.stringify(collectibles)}</span>
) : (
<Box padding={[4, 0, 4, 0]}>
<Box padding={[6, 12, 6, 12]}>
{newNFTsDetected ? <NewCollectiblesNotice /> : null}
<Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<img src="./images/no-nfts.svg" />
</Box>

1
ui/components/app/new-collectibles-notice/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './new-collectibles-notice.component';

56
ui/components/app/new-collectibles-notice/new-collectibles-notice.component.js Normal file
View File

@ -0,0 +1,56 @@
import React from 'react';
import Box from '../../ui/box';
import Dialog from '../../ui/dialog';
import Typography from '../../ui/typography/typography';
import {
COLORS,
TYPOGRAPHY,
TEXT_ALIGN,
FONT_WEIGHT,
DISPLAY,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
export default function NewCollectiblesNotice() {
const t = useI18nContext();
return (
<Box marginBottom={8}>
<Dialog type="message">
<Box display={DISPLAY.FLEX}>
<Box paddingTop={2}>
<i style={{ fontSize: '1rem' }} className="fa fa-info-circle" />
</Box>
<Box paddingLeft={4}>
<Typography
color={COLORS.BLACK}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.Paragraph}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('newNFTsDetected')}
</Typography>
<Typography
color={COLORS.BLACK}
align={TEXT_ALIGN.LEFT}
variant={TYPOGRAPHY.Paragraph}
boxProps={{ marginBottom: 4 }}
>
{t('newNFTsDetectedInfo')}
</Typography>
<a
href="#"
onClick={(e) => {
e.preventDefault();
console.log('show preference popover');
}}
style={{ fontSize: '.9rem' }}
>
{t('selectNFTPrivacyPreference')}
</a>
</Box>
</Box>
</Dialog>
</Box>
);
}