add deposit history page
This commit is contained in:
João Geonizeli
2
app/javascript/__generated__/schema.graphql
generated
2
app/javascript/__generated__/schema.graphql
generated
@@ -177,7 +177,7 @@ type DepositOrder implements Node {
|
||||
id: ID!
|
||||
paidAmountCents: Int!
|
||||
receivedAmountCents: Int!
|
||||
status: String!
|
||||
status: ProcessStatus!
|
||||
updatedAt: ISO8601DateTime!
|
||||
}
|
||||
|
||||
|
||||
@@ -22,6 +22,9 @@ export const Routes: FC = () => {
|
||||
<Route exact path="/orders/stake">
|
||||
<Orders.Stake />
|
||||
</Route>
|
||||
<Route exact path="/orders/deposit">
|
||||
<Orders.Deposit />
|
||||
</Route>
|
||||
</Switch>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -31,6 +31,10 @@ const MenuItems: MenuItem[] = [
|
||||
label: "Ordem de Stake",
|
||||
path: "/orders/stake",
|
||||
},
|
||||
{
|
||||
label: "Ordem de Depósito",
|
||||
path: "/orders/deposit",
|
||||
},
|
||||
];
|
||||
|
||||
export const SideNav = () => {
|
||||
|
||||
90
app/javascript/src/pages/Orders/Deposit/Deposit.tsx
Normal file
90
app/javascript/src/pages/Orders/Deposit/Deposit.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import { graphql } from "babel-plugin-relay/macro";
|
||||
import type { FC } from "react";
|
||||
import React from "react";
|
||||
import { useLazyLoadQuery } from "react-relay";
|
||||
import cs from "classnames";
|
||||
|
||||
import { Table, TableRow } from "../../../components";
|
||||
import type { DepositQuery } from "./__generated__/DepositQuery.graphql";
|
||||
import { getStatusTextAndColors } from "../utils/processStatus";
|
||||
import { centsToUnit } from "../../../utils/fiatMoney";
|
||||
import { Messages } from "../../../messages";
|
||||
|
||||
export const Deposit: FC = () => {
|
||||
const { depositOrders } = useLazyLoadQuery<DepositQuery>(
|
||||
graphql`
|
||||
query DepositQuery {
|
||||
depositOrders {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
status
|
||||
createdAt
|
||||
paidAmountCents
|
||||
receivedAmountCents
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
if (!depositOrders.edges.length)
|
||||
return <Messages.NoHistory historyName="depósito" />;
|
||||
|
||||
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
|
||||
columns={[
|
||||
"Montante pago",
|
||||
"Montante recebido",
|
||||
"Criado em",
|
||||
"Status",
|
||||
]}
|
||||
>
|
||||
{depositOrders.edges.map(({ node }) => {
|
||||
const [label, textStyles, bgStyles] = getStatusTextAndColors(
|
||||
node.status
|
||||
);
|
||||
|
||||
const status = (
|
||||
<span
|
||||
className={cs(
|
||||
"relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",
|
||||
textStyles
|
||||
)}
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={cs(
|
||||
"absolute inset-0 opacity-50 rounded-full",
|
||||
bgStyles
|
||||
)}
|
||||
/>
|
||||
<span className="relative">{label}</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={node.id}
|
||||
items={[
|
||||
`${centsToUnit(node.paidAmountCents)} BRL`,
|
||||
`${centsToUnit(node.receivedAmountCents)} BRL`,
|
||||
new Date(node.createdAt as string).toLocaleTimeString(),
|
||||
status,
|
||||
]}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
143
app/javascript/src/pages/Orders/Deposit/__generated__/DepositQuery.graphql.ts
generated
Normal file
143
app/javascript/src/pages/Orders/Deposit/__generated__/DepositQuery.graphql.ts
generated
Normal 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 DepositQueryVariables = {};
|
||||
export type DepositQueryResponse = {
|
||||
readonly depositOrders: {
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly id: string;
|
||||
readonly status: ProcessStatus;
|
||||
readonly createdAt: unknown;
|
||||
readonly paidAmountCents: number;
|
||||
readonly receivedAmountCents: number;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
};
|
||||
export type DepositQuery = {
|
||||
readonly response: DepositQueryResponse;
|
||||
readonly variables: DepositQueryVariables;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*
|
||||
query DepositQuery {
|
||||
depositOrders {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
status
|
||||
createdAt
|
||||
paidAmountCents
|
||||
receivedAmountCents
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "DepositOrderConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "depositOrders",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "DepositOrderEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "edges",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "DepositOrder",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "status",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "paidAmountCents",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "receivedAmountCents",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "DepositQuery",
|
||||
"selections": (v0/*: any*/),
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Operation",
|
||||
"name": "DepositQuery",
|
||||
"selections": (v0/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "50b4e177048e536e83735990104fce02",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "DepositQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query DepositQuery {\n depositOrders {\n edges {\n node {\n id\n status\n createdAt\n paidAmountCents\n receivedAmountCents\n }\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
(node as any).hash = 'f4d2d75a8903d262de47e02f44136a65';
|
||||
export default node;
|
||||
1
app/javascript/src/pages/Orders/Deposit/index.ts
Normal file
1
app/javascript/src/pages/Orders/Deposit/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./Deposit";
|
||||
@@ -37,7 +37,7 @@ 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 columns={["Pool", "Montante", "Criado Em", "Status"]}>
|
||||
<Table columns={["Pool", "Montante", "Criado em", "Status"]}>
|
||||
{stakeOrders.edges.map(({ node }) => {
|
||||
const [label, textStyles, bgStyles] = getStatusTextAndColors(
|
||||
node.status
|
||||
|
||||
Reference in New Issue
Block a user