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

add stake orders list

Browse Source
This commit is contained in:
João Geonizeli
2021-08-16 00:58:43 -03:00
parent b065f5dca7
commit 0965333679
27 changed files with 917 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/javascript/src/pages/Orders/Exchange/ExchangeHistory/components/CryptoExchangeOrder.tsx
View File

@@ -3,6 +3,7 @@ import React from "react";
import cx from "classnames";
import type { ProcessStatus } from "../__generated__/ExchangeHistory_buyCryptoOrders.graphql";
import { getStatusTextAndColors } from "../../../utils/processStatus";
export type CryptoExchangeOrderProps = {
payed?: string;
@@ -11,18 +12,6 @@ export type CryptoExchangeOrderProps = {
createdAt?: string;
};
const getStatusTextAndColors = (status: ProcessStatus) => {
if (status === "PROCESSING") {
return ["Processando", "text-yellow-900", "bg-yellow-200"];
}
if (status === "CANCELED") {
return ["Cancelado", "text-red-900", "bg-red-200"];
}
return ["Completado", "text-green-900", "bg-green-200"];
};
export const CryptoExchangeOrder: FC<CryptoExchangeOrderProps> = ({
createdAt = "",
payed = "",

120
app/javascript/src/pages/Orders/Stake/Stake.tsx Normal file
View File

@@ -0,0 +1,120 @@
import { graphql } from "babel-plugin-relay/macro";
import type { FC } from "react";
import React from "react";
import { useLazyLoadQuery } from "react-relay";
import cx from "classnames";
import { getStatusTextAndColors } from "../utils/processStatus";
import type { StakeQuery } from "./__generated__/StakeQuery.graphql";
import { Messages } from "../../../messages";
export const Stake: FC = () => {
const { stakeOrders } = useLazyLoadQuery<StakeQuery>(
graphql`
query StakeQuery {
stakeOrders {
edges {
node {
id
poolName
amount
createdAt
status
}
}
}
}
`,
{}
);
if (!stakeOrders.edges.length)
return <Messages.NoHistory historyName="Stake" />;
return (
<div className="container mx-auto px-4 sm:px-8">
<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
);
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>
</div>
</div>
</div>
</div>
);
};

143
app/javascript/src/pages/Orders/Stake/__generated__/StakeQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,143 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from "relay-runtime";
export type ProcessStatus = "CANCELED" | "COMPLETED" | "PROCESSING" | "%future added value";
export type StakeQueryVariables = {};
export type StakeQueryResponse = {
readonly stakeOrders: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly poolName: string;
readonly amount: string;
readonly createdAt: unknown;
readonly status: ProcessStatus;
};
}>;
};
};
export type StakeQuery = {
readonly response: StakeQueryResponse;
readonly variables: StakeQueryVariables;
};
/*
query StakeQuery {
stakeOrders {
edges {
node {
id
poolName
amount
createdAt
status
}
}
}
}
*/
const node: ConcreteRequest = (function(){
var v0 = [
{
"alias": null,
"args": null,
"concreteType": "StakeOrderConnection",
"kind": "LinkedField",
"name": "stakeOrders",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "StakeOrderEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "StakeOrder",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "poolName",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "status",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "StakeQuery",
"selections": (v0/*: any*/),
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [],
"kind": "Operation",
"name": "StakeQuery",
"selections": (v0/*: any*/)
},
"params": {
"cacheID": "87576f672bf070da8b3a0da1e47f53b1",
"id": null,
"metadata": {},
"name": "StakeQuery",
"operationKind": "query",
"text": "query StakeQuery {\n stakeOrders {\n edges {\n node {\n id\n poolName\n amount\n createdAt\n status\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = '29eb880947d0b6abb92c13928f5fbbe0';
export default node;

1
app/javascript/src/pages/Orders/Stake/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Stake";

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

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

22
app/javascript/src/pages/Orders/utils/processStatus.ts Normal file
View File

@@ -0,0 +1,22 @@
type ProcessStatus =
| "CANCELED"
| "COMPLETED"
| "PROCESSING"
// eslint-disable-next-line relay/no-future-added-value
| "%future added value";
export const getStatusTextAndColors = (status: ProcessStatus) => {
if (status === "PROCESSING") {
return ["Processando", "text-yellow-900", "bg-yellow-200"];
}
if (status === "CANCELED") {
return ["Cancelado", "text-red-900", "bg-red-200"];
}
if (status === "COMPLETED") {
return ["Completado", "text-green-900", "bg-green-200"];
}
return ["", "", ""];
};