From 341f761dd78969ed40b69c8349d38a6aaa7a9d3e Mon Sep 17 00:00:00 2001 From: Adnan Sahovic <63151811+adnansahovic@users.noreply.github.com> Date: Fri, 26 Aug 2022 01:01:30 +0200 Subject: [PATCH] Created a new token component (#15617) Co-authored-by: ryanml --- .../contract-token-values.js | 83 +++++++++++++++++++ .../contract-token-values.stories.js | 27 ++++++ .../ui/contract-token-values/index.scss | 17 ++++ ui/components/ui/icon/README.mdx | 19 +++++ ui/components/ui/icon/icon-block-explorer.js | 2 +- ui/components/ui/icon/icon.stories.js | 16 ++++ ui/components/ui/ui-components.scss | 1 + 7 files changed, 164 insertions(+), 1 deletion(-) create mode 100644 ui/components/ui/contract-token-values/contract-token-values.js create mode 100644 ui/components/ui/contract-token-values/contract-token-values.stories.js create mode 100644 ui/components/ui/contract-token-values/index.scss diff --git a/ui/components/ui/contract-token-values/contract-token-values.js b/ui/components/ui/contract-token-values/contract-token-values.js new file mode 100644 index 000000000..1c7f4edb0 --- /dev/null +++ b/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 ( + + + + + + {tokenName} + + + + + + + + + + + + + ); +} + +ContractTokenValues.propTypes = { + /** + * Address used for generating token image + */ + address: PropTypes.string, + /** + * Displayed the token name currently tracked in state + */ + tokenName: PropTypes.string, +}; diff --git a/ui/components/ui/contract-token-values/contract-token-values.stories.js b/ui/components/ui/contract-token-values/contract-token-values.stories.js new file mode 100644 index 000000000..2e863028f --- /dev/null +++ b/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) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/contract-token-values/index.scss b/ui/components/ui/contract-token-values/index.scss new file mode 100644 index 000000000..85c1a6200 --- /dev/null +++ b/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; + } + } +} diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx index 67705ae39..ee6d85055 100644 --- a/ui/components/ui/icon/README.mdx +++ b/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 + +## IconCopy + + + + + + + +## IconBlockExplorer + + + + + + \ No newline at end of file diff --git a/ui/components/ui/icon/icon-block-explorer.js b/ui/components/ui/icon/icon-block-explorer.js index ce09dee9a..827bb647f 100644 --- a/ui/components/ui/icon/icon-block-explorer.js +++ b/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" > - + ); diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index 263ddd11b..15ae752eb 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/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) => ( } /> } /> } /> + } /> + } /> ; +IconCopyStory.args = { + size: 40, +}; +IconCopyStory.storyName = 'IconCopy'; + +export const IconBlockExplorerStory = (args) => ; +IconBlockExplorerStory.args = { + size: 40, +}; +IconBlockExplorerStory.storyName = 'IconBlockExplorer'; diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss index 24dc7e2e7..c0770dfb0 100644 --- a/ui/components/ui/ui-components.scss +++ b/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';