Created a new token component (#15617)

Co-authored-by: ryanml <ryanlanese@gmail.com>

ui/components/ui/contract-token-values/contract-token-values.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconCopy from '../icon/icon-copy';
+import IconBlockExplorer from '../icon/icon-block-explorer';
+import Box from '../box/box';
+import Tooltip from '../tooltip/tooltip';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import Identicon from '../identicon/identicon.component';
+import Typography from '../typography/typography';
+import {
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+  DISPLAY,
+  COLORS,
+  ALIGN_ITEMS,
+  JUSTIFY_CONTENT,
+} from '../../../helpers/constants/design-system';
+import Button from '../button';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+
+export default function ContractTokenValues({ address, tokenName }) {
+  const t = useI18nContext();
+  const [copied, handleCopy] = useCopyToClipboard();
+
+  return (
+    <Box
+      display={DISPLAY.FLEX}
+      alignItems={ALIGN_ITEMS.CENTER}
+      justifyContent={JUSTIFY_CONTENT.CENTER}
+      className="contract-token-values"
+    >
+      <Box marginRight={2}>
+        <Identicon address={address} diameter={24} />
+      </Box>
+      <Typography
+        variant={TYPOGRAPHY.H2}
+        fontWeight={FONT_WEIGHT.BOLD}
+        color={COLORS.TEXT_ALTERNATIVE}
+        marginTop={0}
+        marginBottom={0}
+      >
+        {tokenName}
+      </Typography>
+      <Box className="contract-token-values__copy-address">
+        <Tooltip
+          position="top"
+          title={copied ? t('copiedExclamation') : t('copyToClipboard')}
+        >
+          <Button
+            type="link"
+            className="contract-token-values__copy-address__button"
+            onClick={() => {
+              handleCopy(address);
+            }}
+          >
+            <IconCopy size={24} color="var(--color-icon-muted)" />
+          </Button>
+        </Tooltip>
+      </Box>
+      <Box className="contract-token-values__block-explorer">
+        <Tooltip position="top" title={t('openInBlockExplorer')}>
+          <Button
+            type="link"
+            className="contract-token-values__block-explorer__button"
+          >
+            <IconBlockExplorer size={24} color="var(--color-icon-muted)" />
+          </Button>
+        </Tooltip>
+      </Box>
+    </Box>
+  );
+}
+
+ContractTokenValues.propTypes = {
+  /**
+   * Address used for generating token image
+   */
+  address: PropTypes.string,
+  /**
+   * Displayed the token name currently tracked in state
+   */
+  tokenName: PropTypes.string,
+};

ui/components/ui/contract-token-values/contract-token-values.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import ContractTokenValues from './contract-token-values';
+
+export default {
+  title: 'Components/UI/ContractTokenValues',
+  id: __filename,
+  argTypes: {
+    tokenName: {
+      control: {
+        type: 'text',
+      },
+    },
+    address: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    tokenName: 'DAI',
+    address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+  },
+};
+
+export const DefaultStory = (args) => <ContractTokenValues {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/ui/contract-token-values/index.scss

@@ -0,0 +1,17 @@
+.contract-token-values {
+  &__copy-address {
+    margin-inline-start: 8px;
+
+    &__button {
+      padding: 0;
+    }
+  }
+
+  &__block-explorer {
+    margin-inline-start: 8px;
+
+    &__button {
+      padding: 0;
+    }
+  }
+}

ui/components/ui/icon/README.mdx

@@ -15,6 +15,9 @@ import SunCheck from './sun-check-icon.component';
 import Swap from './swap-icon-for-list.component';
 import SwapIcon from './overview-send-icon.component';
 import SwapIconComponent from './swap-icon.component';
+import IconCopy from './icon-copy'
+import IconBlockExplorer from './icon-block-explorer';
+
 
 # Icon
 
@@ -190,3 +193,19 @@ Use the `className` prop to add an additional class to the icon. This additional
 </Canvas>
 
 <ArgsTable of={Preloader} />
+
+## IconCopy
+
+<Canvas>
+  <Story id="ui-components-ui-icon-icon-stories-js--icon-copy-story" />
+</Canvas>
+
+<ArgsTable of={IconCopy} />
+
+## IconBlockExplorer
+
+<Canvas>
+  <Story id="ui-components-ui-icon-icon-stories-js--icon-block-explorer-story" />
+</Canvas>
+
+<ArgsTable of={IconBlockExplorer} />

ui/components/ui/icon/icon-block-explorer.js

@@ -18,7 +18,7 @@ const IconBlockExplorer = ({
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
   >
-    <path d="m328 482l-128 0c-115 0-168-52-168-169l0-128c0-115 53-168 168-168l43 0c5 0 10 2 14 6 3 3 5 8 5 13 0 5-2 10-5 14-4 3-9 5-14 5l-43 0c-96 0-130 34-130 130l0 128c0 96 34 131 130 131l128 0c96 0 130-35 130-131l0-42c0-5 3-10 6-14 4-3 9-5 14-5 5 0 10 2 13 5 4 4 6 9 6 14l0 42c0 117-52 169-169 169z m-42-235c-5 0-10-2-14-5-3-4-5-9-5-14 0-5 2-10 5-13l159-160-56 0c-5 0-10-2-13-5-4-4-6-9-6-14 0-5 2-10 6-13 3-4 8-6 13-6l103 0c2 0 5 0 7 1 2 1 5 3 6 5 2 1 4 3 5 6 0 2 1 5 1 7l0 103c0 5-2 10-6 13-3 4-8 6-13 6-5 0-10-2-14-6-3-3-6-8-6-13l0-56-159 159c-3 3-8 5-13 5z" />
+    <path d="m316 444l-106 0c-96 0-141-43-141-140l0-107c0-96 45-140 141-140l35 0c5 0 9 2 12 5 3 3 4 7 4 11 0 4-1 8-4 11-3 3-7 5-12 5l-35 0c-80 0-109 28-109 108l0 107c0 80 29 108 109 108l106 0c80 0 109-28 109-108l0-36c0-4 1-8 4-11 3-3 8-5 12-5 4 0 8 2 11 5 3 3 5 7 5 11l0 36c0 97-44 140-141 140z m-35-195c-4 0-9-2-12-5-3-3-4-7-4-11 0-4 1-8 4-11l133-133-47 0c-4 0-8-2-11-5-3-3-5-7-5-11 0-4 2-8 5-11 3-3 7-5 11-5l86 0c2 0 4 0 6 1 2 1 4 2 5 3 2 2 3 4 4 6 0 2 1 4 1 6l0 85c0 4-2 9-5 12-3 3-7 4-11 4-4 0-9-1-12-4-3-3-4-8-4-12l0-47-133 133c-3 3-7 5-11 5z" />
   </svg>
 );
 

ui/components/ui/icon/icon.stories.js

@@ -39,6 +39,8 @@ import IconEye from './icon-eye';
 import IconEyeSlash from './icon-eye-slash';
 import IconTokenSearch from './icon-token-search';
 import SearchIcon from './search-icon';
+import IconCopy from './icon-copy';
+import IconBlockExplorer from './icon-block-explorer';
 
 const validColors = [
   'var(--color-icon-default)',
@@ -129,6 +131,8 @@ export const DefaultStory = (args) => (
         <IconItem Component={<IconCog {...args} />} />
         <IconItem Component={<IconTokenSearch {...args} />} />
         <IconItem Component={<SearchIcon {...args} />} />
+        <IconItem Component={<IconCopy {...args} />} />
+        <IconItem Component={<IconBlockExplorer {...args} />} />
       </div>
     </Box>
     <Typography
@@ -317,3 +321,15 @@ PreloaderStory.args = {
   size: 40,
 };
 PreloaderStory.storyName = 'Preloader';
+
+export const IconCopyStory = (args) => <IconCopy {...args} />;
+IconCopyStory.args = {
+  size: 40,
+};
+IconCopyStory.storyName = 'IconCopy';
+
+export const IconBlockExplorerStory = (args) => <IconBlockExplorer {...args} />;
+IconBlockExplorerStory.args = {
+  size: 40,
+};
+IconBlockExplorerStory.storyName = 'IconBlockExplorer';

ui/components/ui/ui-components.scss

@@ -60,3 +60,4 @@
 @import 'url-icon/index';
 @import 'update-nickname-popover/index';
 @import 'disclosure/disclosure';
+@import 'contract-token-values/index.scss';