Add token component

src/components/Token/Token.stories.tsx

@@ -0,0 +1,19 @@
+import { MassaLogo } from '../Icons';
+import { Token } from './Token';
+
+export default { title: 'Components/Token', component: Token };
+
+export const _Token = {
+  render: () => (
+    <>
+      <Token
+        logo={<MassaLogo size={40} />}
+        balance={'000,000,000.00'}
+        name={'Token'}
+        symbol={'SYMBL'}
+        tooltipContent={'000,000,000.000000000'}
+        onDelete={() => console.log('delete')}
+      />
+    </>
+  ),
+};

src/components/Token/Token.test.tsx

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Token } from '.';
+
+describe('Components | Toggle', () => {
+  test('it should render', () => {
+    render(<Token />);
+
+    let toggle = screen.getByTestId('token');
+
+    expect(toggle).toBeInTheDocument();
+  });
+});

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';
+
+export interface ToggleProps extends ComponentPropsWithoutRef<'div'> {
+  customClass?: string;
+  logo?: JSX.Element;
+  name?: string;
+  symbol?: string;
+  balance?: string;
+  tooltipContent?: string;
+  onDelete?: () => void;
+}
+
+export function Token({ ...props }) {
+  const {
+    string,
+    name,
+    symbol,
+    logo,
+    balance,
+    tooltipContent,
+    onDelete,
+    customClass,
+    ...rest
+  } = props;
+  return (
+    <div data-testid="token" className="w-full h-fit bg-primary" {...rest}>
+      <div
+        className={`w-full flex justify-between items-center text-neutral ${customClass}`}
+      >
+        <div className="flex w-fit gap-2 items-center">
+          {logo}
+          <div>
+            <p>{`${name} (${symbol})`} </p>
+            <span className="flex items-center gap-2">
+              <p>{balance}</p>
+              {/* see wallet for tooltip size */}
+              <Tooltip content={tooltipContent} />
+            </span>
+          </div>
+        </div>
+        <div>
+          <Button variant="icon" onClick={onDelete}>
+            <FiTrash />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Token/index.ts

@@ -0,0 +1 @@
+export * from './Token';