From 6918bff291ead9b2ca2ff1ce9a8e82371d1cf333 Mon Sep 17 00:00:00 2001
From: Adnan Sahovic <63151811+adnansahovic@users.noreply.github.com>
Date: Thu, 6 Oct 2022 16:48:08 +0200
Subject: [PATCH] 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                 |  3 +
 ui/components/ui/nft-info/index.js            |  1 +
 ui/components/ui/nft-info/index.scss          |  9 +++
 ui/components/ui/nft-info/nft-info.js         | 64 +++++++++++++++++++
 ui/components/ui/nft-info/nft-info.stories.js | 29 +++++++++
 ui/components/ui/ui-components.scss           |  1 +
 6 files changed, 107 insertions(+)
 create mode 100644 ui/components/ui/nft-info/index.js
 create mode 100644 ui/components/ui/nft-info/index.scss
 create mode 100644 ui/components/ui/nft-info/nft-info.js
 create mode 100644 ui/components/ui/nft-info/nft-info.stories.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 04d76f58c..2ffc886b6 100644
--- a/app/_locales/en/messages.json
+++ b/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"
   },
diff --git a/ui/components/ui/nft-info/index.js b/ui/components/ui/nft-info/index.js
new file mode 100644
index 000000000..f78c5a99f
--- /dev/null
+++ b/ui/components/ui/nft-info/index.js
@@ -0,0 +1 @@
+export { default } from './nft-info';
diff --git a/ui/components/ui/nft-info/index.scss b/ui/components/ui/nft-info/index.scss
new file mode 100644
index 000000000..8e87ed280
--- /dev/null
+++ b/ui/components/ui/nft-info/index.scss
@@ -0,0 +1,9 @@
+.nft-info {
+  &__content {
+    width: 100%;
+  }
+
+  &__button {
+    padding: 0;
+  }
+}
diff --git a/ui/components/ui/nft-info/nft-info.js b/ui/components/ui/nft-info/nft-info.js
new file mode 100644
index 000000000..41c44947d
--- /dev/null
+++ b/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,
+};
diff --git a/ui/components/ui/nft-info/nft-info.stories.js b/ui/components/ui/nft-info/nft-info.stories.js
new file mode 100644
index 000000000..e13a7415e
--- /dev/null
+++ b/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';
diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss
index 2f004c47e..8cc0e8a0b 100644
--- a/ui/components/ui/ui-components.scss
+++ b/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';