diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 3a7af5e2e..856d88103 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -3537,6 +3537,9 @@ "token": { "message": "Token" }, + "tokenAddress": { + "message": "Token address" + }, "tokenAlreadyAdded": { "message": "Token has already been added." }, diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 45d0a84a3..9a53b3f2b 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -83,3 +83,4 @@ @import 'advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-defaults/index'; @import 'currency-input/index'; +@import 'detected-token/detected-token-address/index'; diff --git a/ui/components/app/detected-token/detected-token-address/detected-token-address.js b/ui/components/app/detected-token/detected-token-address/detected-token-address.js new file mode 100644 index 000000000..1e385b4fa --- /dev/null +++ b/ui/components/app/detected-token/detected-token-address/detected-token-address.js @@ -0,0 +1,57 @@ +import React, { useContext } from 'react'; +import PropTypes from 'prop-types'; +import { I18nContext } from '../../../../contexts/i18n'; +import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; + +import Box from '../../../ui/box'; +import Button from '../../../ui/button'; +import Typography from '../../../ui/typography'; +import Tooltip from '../../../ui/tooltip'; + +import { + COLORS, + DISPLAY, + TYPOGRAPHY, +} from '../../../../helpers/constants/design-system'; + +import { shortenAddress } from '../../../../helpers/utils/util'; + +const DetectedTokenAddress = ({ address }) => { + const t = useContext(I18nContext); + const [copied, handleCopy] = useCopyToClipboard(); + + return ( + + + {`${t('tokenAddress')}:`} + + + {shortenAddress(address)} + + + + + + ); +}; + +DetectedTokenAddress.propTypes = { + address: PropTypes.string, +}; + +export default DetectedTokenAddress; diff --git a/ui/components/app/detected-token/detected-token-address/detected-token-address.stories.js b/ui/components/app/detected-token/detected-token-address/detected-token-address.stories.js new file mode 100644 index 000000000..4c328ebff --- /dev/null +++ b/ui/components/app/detected-token/detected-token-address/detected-token-address.stories.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import DetectedTokenAddress from './detected-token-address'; + +export default { + title: 'Components/App/DetectedToken/DetectedTokenAddress', + id: __filename, + argTypes: { + address: { control: 'text' }, + }, + args: { + address: '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f', + }, +}; + +const Template = (args) => { + return ; +}; + +export const DefaultStory = Template.bind({}); + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/detected-token/detected-token-address/detected-token-address.test.js b/ui/components/app/detected-token/detected-token-address/detected-token-address.test.js new file mode 100644 index 000000000..b0daa552d --- /dev/null +++ b/ui/components/app/detected-token/detected-token-address/detected-token-address.test.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { renderWithProvider, screen } from '../../../../../test/jest'; +import configureStore from '../../../../store/store'; + +import DetectedTokenAddress from './detected-token-address'; + +describe('DetectedTokenAddress', () => { + const args = { + address: '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f', + }; + + it('should render the detected token address', async () => { + const store = configureStore({}); + renderWithProvider(, store); + + expect(screen.getByText('Token address:')).toBeInTheDocument(); + expect(screen.getByText('0xc01...2a6f')).toBeInTheDocument(); + }); +}); diff --git a/ui/components/app/detected-token/detected-token-address/index.scss b/ui/components/app/detected-token/detected-token-address/index.scss new file mode 100644 index 000000000..599a4d1d7 --- /dev/null +++ b/ui/components/app/detected-token/detected-token-address/index.scss @@ -0,0 +1,7 @@ +.detected-token-address { + & &__copy-link { + @include H7; + + padding: 4px 0; + } +}