From a64539a54cf8d8a0fee2a878f160dfa75fb39f45 Mon Sep 17 00:00:00 2001 From: Pivi Date: Wed, 2 Aug 2023 17:26:38 +0200 Subject: [PATCH] Rework token component --- package-lock.json | 14 ++--- package.json | 2 +- src/components/Icons/Svg/Massa/Mrc20.tsx | 12 ++-- src/components/Icons/Svg/Massa/Mrc721.tsx | 14 ++--- src/components/Token/Token.stories.tsx | 74 ++++++++++++++--------- src/components/Token/Token.test.tsx | 21 ++++--- src/components/Token/Token.tsx | 39 +++++++++--- 7 files changed, 108 insertions(+), 68 deletions(-) diff --git a/package-lock.json b/package-lock.json index 83854b37..b28a5f48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "copy-to-clipboard": "^3.3.3", "minidenticons": "^3.1.2", "react": "^18.2.0", - "react-currency-input-field": "^3.6.10", + "react-currency-input-field": "^3.6.11", "react-dom": "^18.2.0", "react-hot-toast": "^2.4.1", "react-icons": "^4.8.0", @@ -14360,9 +14360,9 @@ } }, "node_modules/react-currency-input-field": { - "version": "3.6.10", - "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.10.tgz", - "integrity": "sha512-KRAJJaLujarBTLlEVbznsUxQ56+Qyqwoe5w9DnGxmsGnHv4ycQRpRkuuCDfF9BcXHmegzsOXesfIGpW7Cw9mTQ==", + "version": "3.6.11", + "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.11.tgz", + "integrity": "sha512-M9vOx1eaioSaYWirm7W2WSBi4bpLg+LK4Gf7C1kNhy6MvoSoOzd0mYZPxA78OC9UBIQ2nM080Wu9D1CwTY6n3w==", "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18.0.0" } @@ -25996,9 +25996,9 @@ "requires": {} }, "react-currency-input-field": { - "version": "3.6.10", - "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.10.tgz", - "integrity": "sha512-KRAJJaLujarBTLlEVbznsUxQ56+Qyqwoe5w9DnGxmsGnHv4ycQRpRkuuCDfF9BcXHmegzsOXesfIGpW7Cw9mTQ==", + "version": "3.6.11", + "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.11.tgz", + "integrity": "sha512-M9vOx1eaioSaYWirm7W2WSBi4bpLg+LK4Gf7C1kNhy6MvoSoOzd0mYZPxA78OC9UBIQ2nM080Wu9D1CwTY6n3w==", "requires": {} }, "react-docgen": { diff --git a/package.json b/package.json index e39078dd..c24089fe 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "copy-to-clipboard": "^3.3.3", "minidenticons": "^3.1.2", "react": "^18.2.0", - "react-currency-input-field": "^3.6.10", + "react-currency-input-field": "^3.6.11", "react-dom": "^18.2.0", "react-hot-toast": "^2.4.1", "react-icons": "^4.8.0", diff --git a/src/components/Icons/Svg/Massa/Mrc20.tsx b/src/components/Icons/Svg/Massa/Mrc20.tsx index 10ffd094..4dbe3fdd 100644 --- a/src/components/Icons/Svg/Massa/Mrc20.tsx +++ b/src/components/Icons/Svg/Massa/Mrc20.tsx @@ -104,7 +104,7 @@ export function Mrc20(props: SVGProps) { 22.8862H7.57522L5.72778 18.7515V22.8862H5V17.3519H5.78376L7.83115 21.9265L9.87853 17.3519H10.6543Z" stroke="white" - stroke-width="0.25" + strokeWidth="0.25" /> ); diff --git a/src/components/Icons/Svg/Massa/Mrc721.tsx b/src/components/Icons/Svg/Massa/Mrc721.tsx index e19cac7e..f5257bd2 100644 --- a/src/components/Icons/Svg/Massa/Mrc721.tsx +++ b/src/components/Icons/Svg/Massa/Mrc721.tsx @@ -97,7 +97,7 @@ export function Mrc721(props: SVGProps) { 22.9197H6.32564L4.4779 18.7842V22.9197H3.75V17.3844H4.53389L6.58161 21.9598L8.62932 17.3844H9.40522Z" stroke="#FF0000" - stroke-width="0.25" + strokeWidth="0.25" /> ); diff --git a/src/components/Token/Token.stories.tsx b/src/components/Token/Token.stories.tsx index 9c361fd0..e9621023 100644 --- a/src/components/Token/Token.stories.tsx +++ b/src/components/Token/Token.stories.tsx @@ -4,34 +4,18 @@ import { Token } from './Token'; export default { title: 'Components/Token', component: Token }; -const massaToken = { - logo: , - formattedBalance: '000,000,000.00', - name: 'Token', - symbol: 'SYMBL', - rawBalance: '000,000,000.000000000', -}; - -const mrc20Token = { - logo: , - formattedBalance: '000,000,000.00', - name: 'Token', - symbol: 'SYMBL', - rawBalance: '000,000,000.000000000', -}; - -const mrc721Token = { - logo: , - formattedBalance: '000,000,000.00', - name: 'Token', - symbol: 'SYMBL', - rawBalance: '000,000,000.000000000', -}; - export const _TokenMassa = { render: () => ( <> - + } + name={'Massa'} + symbol={'XMA'} + decimals={18} + balance={'1000000000000000000'} + disable={false} + onDelete={() => console.log('delete')} + /> ), }; @@ -39,7 +23,15 @@ export const _TokenMassa = { export const _TokenMrc = { render: () => ( <> - console.log('delete')} /> + } + name={'Massa'} + symbol={'XMA'} + decimals={9} + balance={'1000000000000000000'} + disable={false} + onDelete={() => console.log('delete')} + /> ), }; @@ -47,9 +39,33 @@ export const _TokenMrc = { export const _MultipleTokens = { render: () => (
- console.log('delete')} /> - console.log('delete')} /> - console.log('delete')} /> + } + name={'Massa'} + symbol={'XMA'} + decimals={9} + balance={'18178156156151817'} + disable={false} + onDelete={() => console.log('delete')} + /> + } + name={'Massa'} + symbol={'XMA'} + decimals={18} + balance={'16666155'} + disable={false} + onDelete={() => console.log('delete')} + /> + } + name={'Massa'} + symbol={'XMA'} + decimals={18} + balance={'117871871871'} + disable={false} + onDelete={() => console.log('delete')} + />
), }; diff --git a/src/components/Token/Token.test.tsx b/src/components/Token/Token.test.tsx index 409a6b76..f1fe9fb1 100644 --- a/src/components/Token/Token.test.tsx +++ b/src/components/Token/Token.test.tsx @@ -1,18 +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', -}; +import { Mrc721 } from '../Icons'; describe('Components | Token', () => { test('it should render', () => { - render(); + render( + } + name={'Massa'} + symbol={'XMA'} + decimals={9} + balance={'18178156156151817'} + disable={false} + onDelete={() => console.log('delete')} + />, + ); let token = screen.getByTestId('token'); diff --git a/src/components/Token/Token.tsx b/src/components/Token/Token.tsx index efae356d..59da446c 100644 --- a/src/components/Token/Token.tsx +++ b/src/components/Token/Token.tsx @@ -5,17 +5,14 @@ import { ComponentPropsWithoutRef } from 'react'; import { FiTrash2 } from 'react-icons/fi'; import { Button } from '../Button'; import { Tooltip } from '../Tooltip'; +import { formatValue } from 'react-currency-input-field'; -interface ITokenData { - logo: string; +export interface TokenProps extends ComponentPropsWithoutRef<'div'> { + logo?: React.ReactNode; name: string; symbol: string; - formattedBalance: string; - rawBalance: string; -} - -export interface TokenProps extends ComponentPropsWithoutRef<'div'> { - token: ITokenData; + decimals: number; + balance: string; customClass?: string; disable?: boolean; onDelete?: () => void; @@ -23,12 +20,36 @@ export interface TokenProps extends ComponentPropsWithoutRef<'div'> { export function Token({ ...props }) { const { - token: { logo, name, symbol, formattedBalance, rawBalance }, + logo, + name, + symbol, + decimals, + balance, onDelete, disable, customClass, ...rest } = props; + + const decimaleBalance = + balance.slice(0, balance.length - decimals) + + '.' + + balance.slice(balance.length - decimals); + + const formattedBalance = formatValue({ + value: decimaleBalance, + groupSeparator: ',', + decimalSeparator: '.', + decimalScale: 2, + }); + + const rawBalance = formatValue({ + value: decimaleBalance, + groupSeparator: ',', + decimalSeparator: '.', + decimalScale: 9, + }); + return (