add deposit history page

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

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

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!
 }
 

app/javascript/src/Routes.tsx

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

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 = () => {

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

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;

app/javascript/src/pages/Orders/Deposit/index.ts

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

app/javascript/src/pages/Orders/Stake/Stake.tsx

@@ -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