use Table component on Stake and Exhcange history

app/javascript/src/components/Table/Table.tsx

@@ -0,0 +1,27 @@
+import type { FC } from "react";
+import React from "react";
+
+type Props = {
+  columns: string[];
+};
+
+export const Table: FC<Props> = ({ columns, children }) => {
+  return (
+    <table className="min-w-full leading-normal">
+      <thead>
+        <tr>
+          {columns.map((column, index) => (
+            <th
+              key={index}
+              scope="col"
+              className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
+            >
+              {column}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </table>
+  );
+};

app/javascript/src/components/Table/TableRow.tsx

@@ -0,0 +1,21 @@
+import type { FC, ReactNode } from "react";
+import React from "react";
+
+type Props = {
+  items?: Array<ReactNode | string>;
+};
+
+export const TableRow: FC<Props> = ({ items }) => {
+  return (
+    <tr>
+      {items?.map((item, index) => (
+        <td
+          key={index}
+          className="px-5 py-5 border-b border-gray-200 bg-white text-sm"
+        >
+          <p className="text-gray-900 whitespace-nowrap">{item}</p>
+        </td>
+      ))}
+    </tr>
+  );
+};

app/javascript/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export * from "./Table";
+export * from "./TableRow";

app/javascript/src/components/index.ts

@@ -4,3 +4,4 @@ export * from "./Modal";
 export * from "./Input";
 export * from "./Button";
 export * from "./Spinner";
+export * from "./Table";

app/javascript/src/pages/Orders/Exchange/ExchangeHistory/ExchangeHistory.tsx

@@ -3,6 +3,7 @@ import type { FC } from "react";
 import React from "react";
 import { useFragment } from "react-relay";
 
+import { Table } from "../../../../components";
 import { Messages } from "../../../../messages";
 import { centsToUnit } from "../../../../utils/fiatMoney";
 import type { CryptoExchangeOrderProps } from "./components/CryptoExchangeOrder";
@@ -119,41 +120,13 @@ export const ExchangeHistory: FC<Props> = ({
       <div className="py-8">
         <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
           <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
-            <table className="min-w-full leading-normal">
+            <Table
-              <thead>
+              columns={["Valor pago", "Valor recebido", "Criado em", "Status"]}
-                <tr>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
             >
-                    Valor pago
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Valor recebido
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Criado em
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Status
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
               {orderRows.map((order) => {
                 return <CryptoExchangeOrder key={order?.id} {...order} />;
               })}
-              </tbody>
+            </Table>
-            </table>
           </div>
         </div>
       </div>

app/javascript/src/pages/Orders/Stake/Stake.tsx

@@ -7,6 +7,7 @@ import cx from "classnames";
 import { getStatusTextAndColors } from "../utils/processStatus";
 import type { StakeQuery } from "./__generated__/StakeQuery.graphql";
 import { Messages } from "../../../messages";
+import { Table, TableRow } from "../../../components";
 
 export const Stake: FC = () => {
   const { stakeOrders } = useLazyLoadQuery<StakeQuery>(
@@ -36,61 +37,13 @@ export const Stake: FC = () => {
       <div className="py-8">
         <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
           <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
-            <table className="min-w-full leading-normal">
+            <Table columns={["Pool", "Montante", "Criado Em", "Status"]}>
-              <thead>
-                <tr>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Pool
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Montante
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Criado em
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Status
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
               {stakeOrders.edges.map(({ node }) => {
                 const [label, textStyles, bgStyles] = getStatusTextAndColors(
                   node.status
                 );
 
-                  return (
+                const status = (
-                    <tr key={node.id}>
-                      <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <p className="text-gray-900 whitespace-nowrap">
-                          {node.poolName}
-                        </p>
-                      </td>
-                      <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <p className="text-gray-900 whitespace-nowrap">
-                          {node.amount}
-                        </p>
-                      </td>
-                      <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <p className="text-gray-900 whitespace-nowrap">
-                          {new Date(
-                            node.createdAt as string
-                          ).toLocaleTimeString()}
-                        </p>
-                      </td>
-                      <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                   <span
                     className={cx(
                       "relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",
@@ -106,12 +59,21 @@ export const Stake: FC = () => {
                     />
                     <span className="relative">{label}</span>
                   </span>
-                      </td>
+                );
-                    </tr>
+
+                return (
+                  <TableRow
+                    key={node.id}
+                    items={[
+                      node.poolName,
+                      node.amount,
+                      new Date(node.createdAt as string).toLocaleTimeString(),
+                      status,
+                    ]}
+                  />
                 );
               })}
-              </tbody>
+            </Table>
-            </table>
           </div>
         </div>
       </div>

app/javascript/src/pages/Orders/index.ts

@@ -1,7 +1,9 @@
 import { Exchange } from "./Exchange";
 import { Stake } from "./Stake";
+import { Deposit } from "./Deposit";
 
 export const Orders = {
+  Deposit,
   Exchange,
   Stake,
 };