Created the NFT component for single NFT allowance (#15825)

* Created the NFT component for single NFT allowance

* modified NftInfo component

* added assetName

app/_locales/en/messages.json

@@ -4251,6 +4251,9 @@
     "message": "Verify this token on $1 and make sure this is the token you want to trade.",
     "description": "Points the user to etherscan as a place they can verify information about a token. $1 is replaced with the translation for \"etherscan\""
   },
+  "view": {
+    "message": "View"
+  },
   "viewAccount": {
     "message": "View account"
   },

ui/components/ui/nft-info/index.js

@@ -0,0 +1 @@
+export { default } from './nft-info';

ui/components/ui/nft-info/index.scss

@@ -0,0 +1,9 @@
+.nft-info {
+  &__content {
+    width: 100%;
+  }
+
+  &__button {
+    padding: 0;
+  }
+}

ui/components/ui/nft-info/nft-info.js

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { I18nContext } from '../../../contexts/i18n';
+import Box from '../box';
+import Typography from '../typography';
+import {
+  COLORS,
+  DISPLAY,
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+} from '../../../helpers/constants/design-system';
+import Identicon from '../identicon';
+import Button from '../button';
+
+export default function NftInfo({ assetName, tokenAddress, tokenId }) {
+  const t = useContext(I18nContext);
+
+  return (
+    <Box
+      display={DISPLAY.FLEX}
+      className="nft-info"
+      backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+    >
+      <Box display={DISPLAY.FLEX} className="nft-info__content">
+        <Box margin={4}>
+          <Identicon address={tokenAddress} diameter={24} />
+        </Box>
+        <Box>
+          <Typography
+            fontWeight={FONT_WEIGHT.BOLD}
+            variant={TYPOGRAPHY.H6}
+            marginTop={4}
+          >
+            {assetName}
+          </Typography>
+          <Typography
+            variant={TYPOGRAPHY.H7}
+            marginBottom={4}
+            color={COLORS.TEXT_ALTERNATIVE}
+          >
+            {t('tokenId')} #{tokenId}
+          </Typography>
+        </Box>
+      </Box>
+      <Box marginTop={4} marginRight={4}>
+        <Button className="nft-info__button" type="link">
+          <Typography
+            variant={TYPOGRAPHY.H6}
+            marginTop={0}
+            color={COLORS.PRIMARY_DEFAULT}
+          >
+            {t('view')}
+          </Typography>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+NftInfo.propTypes = {
+  assetName: PropTypes.string,
+  tokenAddress: PropTypes.string,
+  tokenId: PropTypes.string,
+};

ui/components/ui/nft-info/nft-info.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import NftInfo from './nft-info';
+
+export default {
+  title: 'Components/UI/NftInfo',
+  id: __filename,
+  argTypes: {
+    assetName: {
+      control: { type: 'text' },
+    },
+    tokenAddress: {
+      control: { type: 'text' },
+    },
+    tokenId: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    assetName: 'Catnip Spicewight',
+    tokenAddress: '0xa3aee8bce55beea1951ef834b99f3ac60d1abeeb',
+    tokenId: '112233',
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <NftInfo {...args} />;
+};
+
+DefaultStory.storyName = 'Default';

ui/components/ui/ui-components.scss

@@ -62,3 +62,4 @@
 @import 'disclosure/disclosure';
 @import 'deprecated-test-networks/index.scss';
 @import 'contract-token-values/index.scss';
+@import 'nft-info/index.scss';