geonizeli/x-stake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use Table component on Stake and Exhcange history

Browse Source
This commit is contained in:
João Geonizeli
2021-09-05 22:06:16 -03:00
parent 1decb1a2b8
commit d3d7f6b8da
7 changed files with 98 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/javascript/src/components/Table/Table.tsx Normal file
View File

@@ -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>
);
};

21
app/javascript/src/components/Table/TableRow.tsx Normal file
View File

@@ -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>
);
};

2
app/javascript/src/components/Table/index.ts Normal file
View File

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

1
app/javascript/src/components/index.ts
View File

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

43
app/javascript/src/pages/Orders/Exchange/ExchangeHistory/ExchangeHistory.tsx
View File

@@ -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">
<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"
>
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
columns={["Valor pago", "Valor recebido", "Criado em", "Status"]}
>
{orderRows.map((order) => {
return <CryptoExchangeOrder key={order?.id} {...order} />;
})}
</Table>
</div>
</div>
</div>

112
app/javascript/src/pages/Orders/Stake/Stake.tsx
View File

@@ -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,82 +37,43 @@ 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">
<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
);
<Table columns={["Pool", "Montante", "Criado Em", "Status"]}>
{stakeOrders.edges.map(({ node }) => {
const [label, textStyles, bgStyles] = getStatusTextAndColors(
node.status
);
return (
<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",
textStyles
)}
>
<span
aria-hidden="true"
className={cx(
"absolute inset-0 opacity-50 rounded-full",
bgStyles
)}
/>
<span className="relative">{label}</span>
</span>
</td>
</tr>
);
})}
</tbody>
</table>
const status = (
<span
className={cx(
"relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",
textStyles
)}
>
<span
aria-hidden="true"
className={cx(
"absolute inset-0 opacity-50 rounded-full",
bgStyles
)}
/>
<span className="relative">{label}</span>
</span>
);
return (
<TableRow
key={node.id}
items={[
node.poolName,
node.amount,
new Date(node.createdAt as string).toLocaleTimeString(),
status,
]}
/>
);
})}
</Table>
</div>
</div>
</div>

2
app/javascript/src/pages/Orders/index.ts
View File

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