From 948455ef04e1c3285480f556c996122204e48a02 Mon Sep 17 00:00:00 2001 From: Pivi Date: Mon, 31 Jul 2023 15:17:50 +0200 Subject: [PATCH] Add token component --- src/components/Icons/Svg/Massa/Mrc20.tsx | 183 +++++++++++++++++++ src/components/Icons/Svg/Massa/Mrc721.tsx | 168 +++++++++++++++++ src/components/Icons/Svg/Massa/index.ts | 2 + src/components/Icons/Svg/SvgIcon.stories.tsx | 10 + src/components/Token/Token.stories.tsx | 55 ++++++ src/components/Token/Token.test.tsx | 21 +++ src/components/Token/Token.tsx | 52 ++++++ src/components/Token/index.ts | 1 + src/components/Tooltip/Tooltip.tsx | 2 +- 9 files changed, 493 insertions(+), 1 deletion(-) create mode 100644 src/components/Icons/Svg/Massa/Mrc20.tsx create mode 100644 src/components/Icons/Svg/Massa/Mrc721.tsx create mode 100644 src/components/Token/Token.stories.tsx create mode 100644 src/components/Token/Token.test.tsx create mode 100644 src/components/Token/Token.tsx create mode 100644 src/components/Token/index.ts diff --git a/src/components/Icons/Svg/Massa/Mrc20.tsx b/src/components/Icons/Svg/Massa/Mrc20.tsx new file mode 100644 index 00000000..87bbb989 --- /dev/null +++ b/src/components/Icons/Svg/Massa/Mrc20.tsx @@ -0,0 +1,183 @@ +export function Mrc20({ ...props }) { + const { size } = props; + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/src/components/Icons/Svg/Massa/Mrc721.tsx b/src/components/Icons/Svg/Massa/Mrc721.tsx new file mode 100644 index 00000000..3ee67386 --- /dev/null +++ b/src/components/Icons/Svg/Massa/Mrc721.tsx @@ -0,0 +1,168 @@ +export function Mrc721({ ...props }) { + const { size } = props; + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/components/Icons/Svg/Massa/index.ts b/src/components/Icons/Svg/Massa/index.ts index 8cf91b78..e6fd31e8 100644 --- a/src/components/Icons/Svg/Massa/index.ts +++ b/src/components/Icons/Svg/Massa/index.ts @@ -4,3 +4,5 @@ export * from './MassaWallet'; export * from './StationLogo'; export * from './Certificate'; export * from './BridgeLogo'; +export * from './Mrc20'; +export * from './Mrc721'; diff --git a/src/components/Icons/Svg/SvgIcon.stories.tsx b/src/components/Icons/Svg/SvgIcon.stories.tsx index 59d4c853..6fa921d3 100644 --- a/src/components/Icons/Svg/SvgIcon.stories.tsx +++ b/src/components/Icons/Svg/SvgIcon.stories.tsx @@ -4,6 +4,8 @@ import { MassaWallet, StationLogo, BridgeLogo, + Mrc20, + Mrc721, } from './Massa'; export default { title: 'Icons/Massa' }; @@ -39,3 +41,11 @@ export const _BridgeLogo = { ), }; + +export const _Mrc20 = { + render: () => , +}; + +export const _Mrc721 = { + render: () => , +}; diff --git a/src/components/Token/Token.stories.tsx b/src/components/Token/Token.stories.tsx new file mode 100644 index 00000000..d4451ae1 --- /dev/null +++ b/src/components/Token/Token.stories.tsx @@ -0,0 +1,55 @@ +import { MassaLogo, Mrc20, Mrc721 } from '../Icons'; + +import { Token } from './Token'; + +export default { title: 'Components/Token', component: Token }; + +const massaToken = { + logo: , + formattedBalance: '000,000,000.00', + name: 'Token', + symbol: 'SYMBL', + unformattedBalance: '000,000,000.000000000', +}; + +const mrc20Token = { + logo: , + formattedBalance: '000,000,000.00', + name: 'Token', + symbol: 'SYMBL', + unformattedBalance: '000,000,000.000000000', +}; + +const mrc721Token = { + logo: , + formattedBalance: '000,000,000.00', + name: 'Token', + symbol: 'SYMBL', + unformattedBalance: '000,000,000.000000000', +}; + +export const _TokenMassa = { + render: () => ( + <> + console.log('delete')} /> + + ), +}; + +export const _TokenMrc = { + render: () => ( + <> + console.log('delete')} /> + + ), +}; + +export const _MultipleTokens = { + render: () => ( +
+ console.log('delete')} /> + console.log('delete')} /> + console.log('delete')} /> +
+ ), +}; diff --git a/src/components/Token/Token.test.tsx b/src/components/Token/Token.test.tsx new file mode 100644 index 00000000..de827d64 --- /dev/null +++ b/src/components/Token/Token.test.tsx @@ -0,0 +1,21 @@ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import { Token } from '.'; +import { MassaLogo } from '../Icons'; + +const massaToken = { + logo: , + balance: '000,000,000.00', + name: 'Token', + symbol: 'SYMBL', +}; + +describe('Components | Toggle', () => { + test('it should render', () => { + render(); + + let toggle = screen.getByTestId('token'); + + expect(toggle).toBeInTheDocument(); + }); +}); diff --git a/src/components/Token/Token.tsx b/src/components/Token/Token.tsx new file mode 100644 index 00000000..9321a921 --- /dev/null +++ b/src/components/Token/Token.tsx @@ -0,0 +1,52 @@ +import { ComponentPropsWithoutRef } from 'react'; +import { FiTrash } from 'react-icons/fi'; +import { Button } from '../Button'; +import { Tooltip } from '../Tooltip'; + +interface ITokenData { + logo: string; + name: string; + symbol: string; + formattedBalance: string; + unformattedBalance: string; +} + +export interface ToggleProps extends ComponentPropsWithoutRef<'div'> { + token: ITokenData; + tooltipContent?: string; + customClass?: string; + onDelete?: () => void; +} + +export function Token({ ...props }) { + const { + // token object that BE will send + token: { logo, name, symbol, formattedBalance, unformattedBalance }, + onDelete, + customClass, + ...rest + } = props; + return ( +
+
+ {logo} +
+

{`${name} (${symbol})`}

+ +

{formattedBalance}

+ + +
+
+
+ +
+
+ ); +} diff --git a/src/components/Token/index.ts b/src/components/Token/index.ts new file mode 100644 index 00000000..c467462a --- /dev/null +++ b/src/components/Token/index.ts @@ -0,0 +1 @@ +export * from './Token'; diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 8728c360..655510b3 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -24,7 +24,7 @@ export function Tooltip({ ...props }) { {clonedIcon} {showTooltip && (
{content}