diff --git a/app/graphql/types/deposit_order_type.rb b/app/graphql/types/deposit_order_type.rb index e0ae3bd..d3ef59e 100644 --- a/app/graphql/types/deposit_order_type.rb +++ b/app/graphql/types/deposit_order_type.rb @@ -7,7 +7,7 @@ module Types graphql_name "DepositOrder" field :id, ID, null: false - field :status, String, null: false + field :status, ProcessStatusEnum, null: false field :received_amount_cents, Integer, null: false field :paid_amount_cents, Integer, null: false field :created_at, GraphQL::Types::ISO8601DateTime, null: false diff --git a/app/graphql/types/query_type.rb b/app/graphql/types/query_type.rb index 48ae7f8..029e8ec 100644 --- a/app/graphql/types/query_type.rb +++ b/app/graphql/types/query_type.rb @@ -38,7 +38,10 @@ module Types def deposit_orders(filter: nil) scope = Pundit.policy_scope(current_user, DepositOrder) - scope.where(status: filter.status) if filter&.status + + return scope.where(status: filter.status) if filter&.status + + scope end end end diff --git a/app/javascript/__generated__/schema.graphql b/app/javascript/__generated__/schema.graphql index 5b9dc6b..fc23c6a 100644 --- a/app/javascript/__generated__/schema.graphql +++ b/app/javascript/__generated__/schema.graphql @@ -177,7 +177,7 @@ type DepositOrder implements Node { id: ID! paidAmountCents: Int! receivedAmountCents: Int! - status: String! + status: ProcessStatus! updatedAt: ISO8601DateTime! } diff --git a/app/javascript/src/Routes.tsx b/app/javascript/src/Routes.tsx index 391fcdd..9ca3819 100644 --- a/app/javascript/src/Routes.tsx +++ b/app/javascript/src/Routes.tsx @@ -22,6 +22,9 @@ export const Routes: FC = () => { + + + ); }; diff --git a/app/javascript/src/components/SideNav/SideNav.tsx b/app/javascript/src/components/SideNav/SideNav.tsx index eec31e1..c57f116 100644 --- a/app/javascript/src/components/SideNav/SideNav.tsx +++ b/app/javascript/src/components/SideNav/SideNav.tsx @@ -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 = () => { diff --git a/app/javascript/src/pages/Orders/Deposit/Deposit.tsx b/app/javascript/src/pages/Orders/Deposit/Deposit.tsx new file mode 100644 index 0000000..bed7466 --- /dev/null +++ b/app/javascript/src/pages/Orders/Deposit/Deposit.tsx @@ -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( + graphql` + query DepositQuery { + depositOrders { + edges { + node { + id + status + createdAt + paidAmountCents + receivedAmountCents + } + } + } + } + `, + {} + ); + + if (!depositOrders.edges.length) + return ; + + return ( +
+
+
+
+ + {depositOrders.edges.map(({ node }) => { + const [label, textStyles, bgStyles] = getStatusTextAndColors( + node.status + ); + + const status = ( + + + ); + + return ( + + ); + })} +
+
+
+
+
+ ); +}; diff --git a/app/javascript/src/pages/Orders/Deposit/__generated__/DepositQuery.graphql.ts b/app/javascript/src/pages/Orders/Deposit/__generated__/DepositQuery.graphql.ts new file mode 100644 index 0000000..6505c04 --- /dev/null +++ b/app/javascript/src/pages/Orders/Deposit/__generated__/DepositQuery.graphql.ts @@ -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; diff --git a/app/javascript/src/pages/Orders/Deposit/index.ts b/app/javascript/src/pages/Orders/Deposit/index.ts new file mode 100644 index 0000000..e131aa2 --- /dev/null +++ b/app/javascript/src/pages/Orders/Deposit/index.ts @@ -0,0 +1 @@ +export * from "./Deposit"; diff --git a/app/javascript/src/pages/Orders/Stake/Stake.tsx b/app/javascript/src/pages/Orders/Stake/Stake.tsx index c05f2f7..9a24b1a 100644 --- a/app/javascript/src/pages/Orders/Stake/Stake.tsx +++ b/app/javascript/src/pages/Orders/Stake/Stake.tsx @@ -37,7 +37,7 @@ export const Stake: FC = () => {
- +
{stakeOrders.edges.map(({ node }) => { const [label, textStyles, bgStyles] = getStatusTextAndColors( node.status