Rework token component

massalabs · Aug 2, 2023 · a64539a · a64539a
1 parent a7f8b5c
commit a64539a
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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"
       />
       <path
         d="M14.8237 22.8862L13.4961 20.6069H12.6163V22.8862H11.8885V17.3119H13.688C14.1092 
@@ -117,7 +117,7 @@ export function Mrc20(props: SVGProps) {
 14.5757 18.1836C14.3838 18.0024 14.0879 17.9117 13.688 
 17.9117H12.6163V20.0231Z"
         stroke="white"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
       <path
         d="M16.4823 20.0951C16.4823 19.5512 16.605 19.0634 
@@ -137,12 +137,12 @@ export function Mrc20(props: SVGProps) {
 17.8499 22.5743C17.4287 22.3291 17.0955 21.9905 16.8502 21.5586C16.605 
 21.1268 16.4823 20.6389 16.4823 20.0951Z"
         stroke="white"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
       <path
         d="M25.9712 19.6472V20.263H22.7801V19.6472H25.9712Z"
         stroke="white"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
       <path
         d="M27.1291 22.3024C27.8062 21.7586 28.3367 21.3134 
@@ -158,7 +158,7 @@ export function Mrc20(props: SVGProps) {
 21.4253 28.7472 21.7932 28.2247 
 22.2144H30.9759V22.8222H27.1291V22.3024Z"
         stroke="white"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
       <path
         d="M31.8172 19.9351C31.8172 19.0181 
@@ -184,7 +184,7 @@ export function Mrc20(props: SVGProps) {
 21.1427C35.0882 20.8175 35.1202 20.415 35.1202 
 19.9351Z"
         stroke="white"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
     </svg>
   );

diff --git 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"
       />
       <path
         d="M13.5753 22.9197L12.2474 
@@ -112,7 +112,7 @@ export function Mrc721(props: SVGProps) {
       18.2163C13.1353 18.035 12.8394 17.9443 12.4394 
       17.9443H11.3676V20.0561Z"
         stroke="#FF0000"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
       <path
         d="M15.2342 20.128C15.2342 19.5841 
@@ -133,18 +133,18 @@ export function Mrc721(props: SVGProps) {
       22.9677 17.0286 22.8477 16.602 22.6077C16.1808 22.3624 15.8475 22.0238 
       15.6022 21.5918C15.3569 21.1599 15.2342 20.672 15.2342 20.128Z"
         stroke="#FF0000"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
       <path
         d="M24.7246 19.6801V20.296H21.533V19.6801H24.7246Z"
         stroke="#FF0000"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
       <path
         d="M29.5302 17.7044L27.3065 22.9197H26.5706L28.8263 
       17.7764H25.7387V17.1525H29.5302V17.7044Z"
         stroke="#FF0000"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
       <path
         d="M30.2493 22.3357C30.9265 21.7918 31.4571 21.3465 
@@ -163,13 +163,13 @@ export function Mrc721(props: SVGProps) {
       32.6329 21.1439C32.297 21.4585 31.8677 21.8265 
       31.3451 22.2477H34.0967V22.8557H30.2493V22.3357Z"
         stroke="#FF0000"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
       <path
         d="M34.7462 
       17.8004V17.1365H36.25V22.9197H35.5141V17.8004H34.7462Z"
         stroke="#FF0000"
-        stroke-width="0.25"
+        strokeWidth="0.25"
       />
     </svg>
   );

diff --git a/src/components/Token/Token.stories.tsx b/src/components/Token/Token.stories.tsx
@@ -4,52 +4,68 @@ import { Token } from './Token';
 
 export default { title: 'Components/Token', component: Token };
 
-const massaToken = {
-  logo: <MassaLogo size={40} />,
-  formattedBalance: '000,000,000.00',
-  name: 'Token',
-  symbol: 'SYMBL',
-  rawBalance: '000,000,000.000000000',
-};
-
-const mrc20Token = {
-  logo: <Mrc20 size={40} />,
-  formattedBalance: '000,000,000.00',
-  name: 'Token',
-  symbol: 'SYMBL',
-  rawBalance: '000,000,000.000000000',
-};
-
-const mrc721Token = {
-  logo: <Mrc721 size={40} />,
-  formattedBalance: '000,000,000.00',
-  name: 'Token',
-  symbol: 'SYMBL',
-  rawBalance: '000,000,000.000000000',
-};
-
 export const _TokenMassa = {
   render: () => (
     <>
-      <Token token={massaToken} disable={true} />
+      <Token
+        logo={<MassaLogo size={40} />}
+        name={'Massa'}
+        symbol={'XMA'}
+        decimals={18}
+        balance={'1000000000000000000'}
+        disable={false}
+        onDelete={() => console.log('delete')}
+      />
     </>
   ),
 };
 
 export const _TokenMrc = {
   render: () => (
     <>
-      <Token token={mrc20Token} onDelete={() => console.log('delete')} />
+      <Token
+        logo={<Mrc721 size={40} />}
+        name={'Massa'}
+        symbol={'XMA'}
+        decimals={9}
+        balance={'1000000000000000000'}
+        disable={false}
+        onDelete={() => console.log('delete')}
+      />
     </>
   ),
 };
 
 export const _MultipleTokens = {
   render: () => (
     <div className="flex flex-col w-full h-fit bg-primary gap-4">
-      <Token token={massaToken} onDelete={() => console.log('delete')} />
-      <Token token={mrc20Token} onDelete={() => console.log('delete')} />
-      <Token token={mrc721Token} onDelete={() => console.log('delete')} />
+      <Token
+        logo={<Mrc721 size={40} />}
+        name={'Massa'}
+        symbol={'XMA'}
+        decimals={9}
+        balance={'18178156156151817'}
+        disable={false}
+        onDelete={() => console.log('delete')}
+      />
+      <Token
+        logo={<MassaLogo size={40} />}
+        name={'Massa'}
+        symbol={'XMA'}
+        decimals={18}
+        balance={'16666155'}
+        disable={false}
+        onDelete={() => console.log('delete')}
+      />
+      <Token
+        logo={<Mrc20 size={40} />}
+        name={'Massa'}
+        symbol={'XMA'}
+        decimals={18}
+        balance={'117871871871'}
+        disable={false}
+        onDelete={() => console.log('delete')}
+      />
     </div>
   ),
 };
diff --git 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: <MassaLogo size={40} />,
-  balance: '000,000,000.00',
-  name: 'Token',
-  symbol: 'SYMBL',
-};
+import { Mrc721 } from '../Icons';
 
 describe('Components | Token', () => {
   test('it should render', () => {
-    render(<Token token={massaToken} />);
+    render(
+      <Token
+        logo={<Mrc721 size={40} />}
+        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
@@ -5,30 +5,51 @@ 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;
 }
 
 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 (
     <div
       data-testid="token"