From 25a835bba845eb6c628b5ec3582c894017beae99 Mon Sep 17 00:00:00 2001
From: Pivi <pivi@Pivis-MacBook-Air.local>
Date: Mon, 31 Jul 2023 15:17:50 +0200
Subject: [PATCH] Add token component

---
 src/components/Token/Token.stories.tsx | 19 ++++++++++
 src/components/Token/Token.test.tsx    | 13 +++++++
 src/components/Token/Token.tsx         | 52 ++++++++++++++++++++++++++
 src/components/Token/index.ts          |  1 +
 4 files changed, 85 insertions(+)
 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/Token/Token.stories.tsx b/src/components/Token/Token.stories.tsx
new file mode 100644
index 00000000..c4b94766
--- /dev/null
+++ b/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')}
+      />
+    </>
+  ),
+};
diff --git a/src/components/Token/Token.test.tsx b/src/components/Token/Token.test.tsx
new file mode 100644
index 00000000..c2ff6804
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/components/Token/Token.tsx b/src/components/Token/Token.tsx
new file mode 100644
index 00000000..e38843f1
--- /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';
+
+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>
+  );
+}
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';