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 "./Input";
export * from "./Button"; export * from "./Button";
export * from "./Spinner"; 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 React from "react";
import { useFragment } from "react-relay"; import { useFragment } from "react-relay";
import { Table } from "../../../../components";
import { Messages } from "../../../../messages"; import { Messages } from "../../../../messages";
import { centsToUnit } from "../../../../utils/fiatMoney"; import { centsToUnit } from "../../../../utils/fiatMoney";
import type { CryptoExchangeOrderProps } from "./components/CryptoExchangeOrder"; import type { CryptoExchangeOrderProps } from "./components/CryptoExchangeOrder";
@@ -119,41 +120,13 @@ export const ExchangeHistory: FC<Props> = ({
<div className="py-8"> <div className="py-8">
<div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto"> <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"> <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 {orderRows.map((order) => {
scope="col" return <CryptoExchangeOrder key={order?.id} {...order} />;
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal" })}
> </Table>
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>
</div> </div>
</div> </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 { getStatusTextAndColors } from "../utils/processStatus";
import type { StakeQuery } from "./__generated__/StakeQuery.graphql"; import type { StakeQuery } from "./__generated__/StakeQuery.graphql";
import { Messages } from "../../../messages"; import { Messages } from "../../../messages";
import { Table, TableRow } from "../../../components";
export const Stake: FC = () => { export const Stake: FC = () => {
const { stakeOrders } = useLazyLoadQuery<StakeQuery>( const { stakeOrders } = useLazyLoadQuery<StakeQuery>(
@@ -36,82 +37,43 @@ export const Stake: FC = () => {
<div className="py-8"> <div className="py-8">
<div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto"> <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"> <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> {stakeOrders.edges.map(({ node }) => {
<tr> const [label, textStyles, bgStyles] = getStatusTextAndColors(
<th node.status
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}> <span
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> className={cx(
<p className="text-gray-900 whitespace-nowrap"> "relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",
{node.poolName} textStyles
</p> )}
</td> >
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <span
<p className="text-gray-900 whitespace-nowrap"> aria-hidden="true"
{node.amount} className={cx(
</p> "absolute inset-0 opacity-50 rounded-full",
</td> bgStyles
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> )}
<p className="text-gray-900 whitespace-nowrap"> />
{new Date( <span className="relative">{label}</span>
node.createdAt as string </span>
).toLocaleTimeString()} );
</p>
</td> return (
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <TableRow
<span key={node.id}
className={cx( items={[
"relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight", node.poolName,
textStyles node.amount,
)} new Date(node.createdAt as string).toLocaleTimeString(),
> status,
<span ]}
aria-hidden="true" />
className={cx( );
"absolute inset-0 opacity-50 rounded-full", })}
bgStyles </Table>
)}
/>
<span className="relative">{label}</span>
</span>
</td>
</tr>
);
})}
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>

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

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