Merge pull request #45 from exstake/feature/deposit-form

add deposit form

app/graphql/mutations/create_deposit_order.rb

@@ -3,14 +3,14 @@ module Mutations
   class CreateDepositOrder < BaseMutation
     field :order, Types::DepositOrderType, null: true
 
-    argument :order, Inputs::CreateStakeOrderAttributesInput, required: true
+    argument :order, Inputs::CreateDepositOrderAttributesInput, required: true
 
     def resolve(order:)
       ActiveRecord::Base.transaction do
-        record = BuildDepositOrder.new(paid_amount_cents: order[:amount_cents], user: current_user.id)
+        record = BuildDepositOrder.new(paid_amount_cents: order[:amount_cents], user_id: current_user.id).build
         record.save!
 
-        { order: record }
+        { order: record.reload }
       rescue ActiveRecord::RecordInvalid => e
         { errors: Resolvers::ModelErrors.from_active_record_model(e.record) }
       end

app/javascript/__generated__/schema.graphql

@@ -77,6 +77,13 @@ type CreateBuyCryptoOrderPayload {
   order: BuyCryptoOrder
 }
 
+input CreateDepositOrderAttributesInput {
+  """
+  Amount to be paid
+  """
+  amountCents: Int!
+}
+
 """
 Autogenerated input type of CreateDepositOrder
 """
@@ -85,7 +92,7 @@ input CreateDepositOrderInput {
   A unique identifier for the client performing the mutation.
   """
   clientMutationId: String
-  order: CreateStakeOrderAttributesInput!
+  order: CreateDepositOrderAttributesInput!
 }
 
 """

app/javascript/src/components/SideNav/SideNav.tsx

@@ -20,20 +20,20 @@ const MenuItems: MenuItem[] = [
     label: "Minhas Posições",
     path: "/dashboard",
   },
+  {
+    label: "Histórico de Investimentos",
+    path: "/orders/stake",
+  },
   {
     label: "Carteira",
     path: "/wallet",
   },
   {
-    label: "Ordem de Troca",
+    label: "Pedidos de Troca",
     path: "/orders/exchange",
   },
   {
-    label: "Ordem de Stake",
+    label: "Pedidos de Depósito",
-    path: "/orders/stake",
-  },
-  {
-    label: "Ordem de Depósito",
     path: "/orders/deposit",
   },
 ];

app/javascript/src/messages/NoHistory.tsx

@@ -7,7 +7,7 @@ type Props = {
   historyName: string;
 };
 
-export const NoHistory: FC<Props> = ({ historyName }) => {
+export const NoHistory: FC<Props> = ({ historyName, children }) => {
   return (
     <section className="text-gray-600 body-font w-full">
       <div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
@@ -21,6 +21,7 @@ export const NoHistory: FC<Props> = ({ historyName }) => {
             Você não possui históricos de {historyName}
           </h1>
         </div>
+        {children}
       </div>
     </section>
   );

app/javascript/src/pages/Orders/Deposit/Create/Create.tsx

@@ -0,0 +1,41 @@
+import type { FC } from "react";
+import React, { useState } from "react";
+import { useRelayEnvironment } from "react-relay";
+
+import { Button, Modal } from "../../../../components";
+import { useDepositContext } from "../DepositProvider";
+import { commitCreateDepositOrderMutation } from "./commitCreateDepositOrder";
+import { Form } from "./Form";
+
+export const Create: FC = () => {
+  const environment = useRelayEnvironment();
+  const { setOpenOrder } = useDepositContext();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onFormSubmit = (amount: number) => {
+    commitCreateDepositOrderMutation(
+      environment,
+      {
+        amountCents: amount * 100,
+      },
+      (res) => {
+        if (!res.createDepositOrder?.order) return;
+
+        setIsOpen(false);
+        setOpenOrder(res.createDepositOrder?.order);
+      }
+    );
+  };
+
+  return (
+    <div className="flex">
+      <div className="ml-auto">
+        <Button onClick={() => setIsOpen(true)}>Novo deposito</Button>
+        <Modal title="Novo deposito" isOpen={isOpen} setIsOpen={setIsOpen}>
+          <Form className="" submitCallback={onFormSubmit} />
+        </Modal>
+      </div>
+    </div>
+  );
+};

app/javascript/src/pages/Orders/Deposit/Create/Form.tsx

@@ -0,0 +1,46 @@
+import type { FC } from "react";
+import React, { useState } from "react";
+
+import { Button, Input } from "../../../../components";
+
+type Props = {
+  submitCallback: (amount: number) => void;
+  className?: string;
+};
+
+export const Form: FC<Props> = ({ className, submitCallback }) => {
+  const [amountInput, setAmountInput] = useState<number>();
+
+  const handleAmountChange = ({
+    currentTarget: { value },
+  }: React.ChangeEvent<HTMLInputElement>) => {
+    const newFiatAmount = parseInt(value, 10) || 0;
+
+    if (newFiatAmount < 0) return;
+    setAmountInput(newFiatAmount);
+  };
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (amountInput) {
+      submitCallback(amountInput);
+    }
+  };
+
+  const amount = amountInput ?? 0;
+
+  return (
+    <form onSubmit={onSubmit} className={className}>
+      <div>
+        <p className="text-gray-900 mb-1">Quantia em BRL</p>
+        <Input value={amountInput} onChange={handleAmountChange} />
+      </div>
+      <div className="flex">Você recebe: {amount + amount * 0.05} BRL</div>
+      <div className="flex">Taxa de transação: {amount * 0.05} BRL</div>
+      <Button className="mt-2" type="submit" disabled={!amountInput}>
+        Confirmar
+      </Button>
+    </form>
+  );
+};

app/javascript/src/pages/Orders/Deposit/Create/__generated__/commitCreateDepositOrderMutation.graphql.ts

@@ -0,0 +1,197 @@
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from "relay-runtime";
+import { FragmentRefs } from "relay-runtime";
+export type commitCreateDepositOrderMutationVariables = {
+    amountCents: number;
+};
+export type commitCreateDepositOrderMutationResponse = {
+    readonly createDepositOrder: {
+        readonly order: {
+            readonly id: string;
+            readonly " $fragmentRefs": FragmentRefs<"Show_deposit_order">;
+        } | null;
+    } | null;
+};
+export type commitCreateDepositOrderMutation = {
+    readonly response: commitCreateDepositOrderMutationResponse;
+    readonly variables: commitCreateDepositOrderMutationVariables;
+};
+
+
+
+/*
+mutation commitCreateDepositOrderMutation(
+  $amountCents: Int!
+) {
+  createDepositOrder(input: {order: {amountCents: $amountCents}}) {
+    order {
+      id
+      ...Show_deposit_order
+    }
+  }
+}
+
+fragment Show_deposit_order on DepositOrder {
+  id
+  transactionId
+  paidAmountCents
+  receivedAmountCents
+  status
+  createdAt
+}
+*/
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "amountCents"
+  }
+],
+v1 = [
+  {
+    "fields": [
+      {
+        "fields": [
+          {
+            "kind": "Variable",
+            "name": "amountCents",
+            "variableName": "amountCents"
+          }
+        ],
+        "kind": "ObjectValue",
+        "name": "order"
+      }
+    ],
+    "kind": "ObjectValue",
+    "name": "input"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "commitCreateDepositOrderMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "CreateDepositOrderPayload",
+        "kind": "LinkedField",
+        "name": "createDepositOrder",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "DepositOrder",
+            "kind": "LinkedField",
+            "name": "order",
+            "plural": false,
+            "selections": [
+              (v2/*: any*/),
+              {
+                "args": null,
+                "kind": "FragmentSpread",
+                "name": "Show_deposit_order"
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "commitCreateDepositOrderMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "CreateDepositOrderPayload",
+        "kind": "LinkedField",
+        "name": "createDepositOrder",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "DepositOrder",
+            "kind": "LinkedField",
+            "name": "order",
+            "plural": false,
+            "selections": [
+              (v2/*: any*/),
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "transactionId",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "paidAmountCents",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "receivedAmountCents",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "status",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "createdAt",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "f83279e6438b80e14dbeb3efc1a20742",
+    "id": null,
+    "metadata": {},
+    "name": "commitCreateDepositOrderMutation",
+    "operationKind": "mutation",
+    "text": "mutation commitCreateDepositOrderMutation(\n  $amountCents: Int!\n) {\n  createDepositOrder(input: {order: {amountCents: $amountCents}}) {\n    order {\n      id\n      ...Show_deposit_order\n    }\n  }\n}\n\nfragment Show_deposit_order on DepositOrder {\n  id\n  transactionId\n  paidAmountCents\n  receivedAmountCents\n  status\n  createdAt\n}\n"
+  }
+};
+})();
+(node as any).hash = '143549ad827756ac107c08e45b0bc525';
+export default node;

app/javascript/src/pages/Orders/Deposit/Create/commitCreateDepositOrder.tsx

@@ -0,0 +1,33 @@
+import { graphql } from "babel-plugin-relay/macro";
+import type { Environment } from "react-relay";
+import { commitMutation } from "react-relay";
+
+import type {
+  commitCreateDepositOrderMutation as commitCreateDepositOrderMutationType,
+  commitCreateDepositOrderMutationResponse,
+  commitCreateDepositOrderMutationVariables,
+} from "./__generated__/commitCreateDepositOrderMutation.graphql";
+
+export const commitCreateDepositOrderMutation = (
+  environment: Environment,
+  variables: commitCreateDepositOrderMutationVariables,
+  callback: (response: commitCreateDepositOrderMutationResponse) => void
+) => {
+  return commitMutation<commitCreateDepositOrderMutationType>(environment, {
+    mutation: graphql`
+      mutation commitCreateDepositOrderMutation($amountCents: Int!) {
+        createDepositOrder(input: { order: { amountCents: $amountCents } }) {
+          order {
+            id
+            ...Show_deposit_order
+          }
+        }
+      }
+    `,
+    variables,
+    onCompleted: (response) => {
+      callback(response);
+    },
+    onError: (_error) => {},
+  });
+};

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

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

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

@@ -6,8 +6,13 @@ import { useLazyLoadQuery } from "react-relay";
 import type { DepositQuery } from "./__generated__/DepositQuery.graphql";
 import { Messages } from "../../../messages";
 import { History } from "./History";
+import { Create } from "./Create";
+import { DepositProvider, useDepositContext } from "./DepositProvider";
+import { Show } from "./Show";
+
+const Component: FC = () => {
+  const { fetchKey } = useDepositContext();
 
-export const Deposit: FC = () => {
   const { depositOrders } = useLazyLoadQuery<DepositQuery>(
     graphql`
       query DepositQuery {
@@ -17,21 +22,41 @@ export const Deposit: FC = () => {
         }
       }
     `,
-    {}
+    {},
+    {
+      fetchKey,
+      fetchPolicy: "network-only",
+    }
   );
 
   if (!depositOrders.totalCount)
-    return <Messages.NoHistory historyName="depósito" />;
+    return (
+      <Messages.NoHistory historyName="depósito">
+        <Create />
+      </Messages.NoHistory>
+    );
 
   return (
-    <div className="container mx-auto px-4 sm:px-8">
+    <>
-      <div className="py-8">
+      <div className="container mx-auto px-4 sm:px-8">
-        <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
+        <div className="py-8">
-          <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
+          <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
+            <Create />
+          </div>
+          <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
             <History ordersRef={depositOrders} />
           </div>
         </div>
       </div>
-    </div>
+    </>
+  );
+};
+
+export const Deposit: FC = () => {
+  return (
+    <DepositProvider>
+      <Show />
+      <Component />
+    </DepositProvider>
   );
 };

app/javascript/src/pages/Orders/Deposit/DepositProvider.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import React, { useState, createContext, useContext } from "react";
+
+import type { Show_deposit_order$key } from "./Show/__generated__/Show_deposit_order.graphql";
+
+type Order = Show_deposit_order$key & { id: string };
+
+type DepositContext = {
+  openOrder: Order | null;
+  setOpenOrder: React.Dispatch<React.SetStateAction<Order | null>>;
+  fetchKey: string;
+  setFetchKey: React.Dispatch<React.SetStateAction<string>>;
+};
+
+const Context = createContext<DepositContext | null>(null);
+
+export const useDepositContext = (): DepositContext => {
+  const context = useContext(Context);
+
+  if (!context) {
+    throw new Error("You must wrap the component with <DepositProvider />");
+  }
+
+  return context;
+};
+
+export const DepositProvider: FC = ({ children }) => {
+  const [openOrder, setOpenOrder] = useState<Order | null>(null);
+  const [fetchKey, setFetchKey] = useState<string>("empty");
+
+  return (
+    <Context.Provider
+      value={{
+        openOrder,
+        setOpenOrder,
+        fetchKey,
+        setFetchKey,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+};

app/javascript/src/pages/Orders/Deposit/History/History.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable relay/must-colocate-fragment-spreads */
 import { graphql } from "babel-plugin-relay/macro";
 import type { FC } from "react";
-import React, { useState } from "react";
+import React from "react";
 import cs from "classnames";
 import { useFragment } from "react-relay";
 
@@ -8,14 +9,14 @@ import { Table, TableRow } from "../../../../components";
 import { getStatusTextAndColors } from "../../utils/processStatus";
 import { centsToUnit } from "../../../../utils/fiatMoney";
 import type { History_depositOrders$key } from "./__generated__/History_depositOrders.graphql";
-import { Show } from "../Show";
+import { useDepositContext } from "../DepositProvider";
 
 type Props = {
   ordersRef: History_depositOrders$key;
 };
 
 export const History: FC<Props> = ({ ordersRef }) => {
-  const [openOrderId, setOpenOrderId] = useState<string | null>(null);
+  const { setOpenOrder } = useDepositContext();
 
   const { edges } = useFragment<History_depositOrders$key>(
     graphql`
@@ -35,12 +36,8 @@ export const History: FC<Props> = ({ ordersRef }) => {
     ordersRef
   );
 
-  const openOrder = edges.find(({ node }) => node.id === openOrderId);
-  const onClose = () => setOpenOrderId(null);
-
   return (
-    <>
+    <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
-      {openOrder && <Show orderRef={openOrder.node} onClose={onClose} />}
       <Table
         columns={["Montante pago", "Montante recebido", "Criado em", "Status"]}
       >
@@ -70,7 +67,7 @@ export const History: FC<Props> = ({ ordersRef }) => {
           return (
             <TableRow
               key={node.id}
-              onClick={(orderId) => setOpenOrderId(orderId)}
+              onClick={() => setOpenOrder(node)}
               id={node.id}
               items={[
                 `${centsToUnit(node.paidAmountCents)} BRL`,
@@ -82,6 +79,6 @@ export const History: FC<Props> = ({ ordersRef }) => {
           );
         })}
       </Table>
-    </>
+    </div>
   );
 };

app/javascript/src/pages/Orders/Deposit/Show/Show.tsx

@@ -9,16 +9,20 @@ import { usePixQr } from "./hooks/usePixQr";
 import type { Show_deposit_order$key } from "./__generated__/Show_deposit_order.graphql";
 import { centsToUnit } from "../../../../utils/fiatMoney";
 import { getStatusTextAndColors } from "../../utils/processStatus";
+import { useDepositContext } from "../DepositProvider";
 
 type Props = {
   orderRef: Show_deposit_order$key;
   onClose: () => void;
 };
 
-export const Show: FC<Props> = ({ orderRef, onClose }) => {
+const ShowModal: FC<Props> = ({ orderRef, onClose }) => {
+  const { setFetchKey } = useDepositContext();
+
   const order = useFragment<Show_deposit_order$key>(
     graphql`
       fragment Show_deposit_order on DepositOrder {
+        id
         transactionId
         paidAmountCents
         receivedAmountCents
@@ -36,6 +40,7 @@ export const Show: FC<Props> = ({ orderRef, onClose }) => {
 
   const handleClose = (_value: boolean) => {
     onClose();
+    setFetchKey(order.id);
   };
 
   const handleCopy = () => {
@@ -92,3 +97,15 @@ export const Show: FC<Props> = ({ orderRef, onClose }) => {
     </Modal>
   );
 };
+
+export const Show: FC = () => {
+  const { setOpenOrder, openOrder } = useDepositContext();
+
+  if (!openOrder) return null;
+
+  const handleClose = () => {
+    setOpenOrder(null);
+  };
+
+  return <ShowModal orderRef={openOrder} onClose={handleClose} />;
+};

app/javascript/src/pages/Orders/Deposit/Show/__generated__/Show_deposit_order.graphql.ts

@@ -6,6 +6,7 @@ import { ReaderFragment } from "relay-runtime";
 import { FragmentRefs } from "relay-runtime";
 export type ProcessStatus = "CANCELED" | "COMPLETED" | "PROCESSING" | "%future added value";
 export type Show_deposit_order = {
+    readonly id: string;
     readonly transactionId: string;
     readonly paidAmountCents: number;
     readonly receivedAmountCents: number;
@@ -27,6 +28,13 @@ const node: ReaderFragment = {
   "metadata": null,
   "name": "Show_deposit_order",
   "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
     {
       "alias": null,
       "args": null,
@@ -66,5 +74,5 @@ const node: ReaderFragment = {
   "type": "DepositOrder",
   "abstractKey": null
 };
-(node as any).hash = '73e84cef63c17faa3087f19ba2c73e69';
+(node as any).hash = '7bda3158834b0532ddabf9da61984049';
 export default node;

app/javascript/src/pages/Orders/Deposit/__generated__/DepositQuery.graphql.ts

@@ -40,6 +40,7 @@ fragment History_depositOrders on DepositOrderConnection {
 }
 
 fragment Show_deposit_order on DepositOrder {
+  id
   transactionId
   paidAmountCents
   receivedAmountCents
@@ -169,12 +170,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "99f3fbbd023ef8a38b0490275cb58aa6",
+    "cacheID": "c89f24bbd553272fc712f18bb6da0886",
     "id": null,
     "metadata": {},
     "name": "DepositQuery",
     "operationKind": "query",
-    "text": "query DepositQuery {\n  depositOrders {\n    totalCount\n    ...History_depositOrders\n  }\n}\n\nfragment History_depositOrders on DepositOrderConnection {\n  edges {\n    node {\n      id\n      status\n      createdAt\n      paidAmountCents\n      receivedAmountCents\n      ...Show_deposit_order\n    }\n  }\n}\n\nfragment Show_deposit_order on DepositOrder {\n  transactionId\n  paidAmountCents\n  receivedAmountCents\n  status\n  createdAt\n}\n"
+    "text": "query DepositQuery {\n  depositOrders {\n    totalCount\n    ...History_depositOrders\n  }\n}\n\nfragment History_depositOrders on DepositOrderConnection {\n  edges {\n    node {\n      id\n      status\n      createdAt\n      paidAmountCents\n      receivedAmountCents\n      ...Show_deposit_order\n    }\n  }\n}\n\nfragment Show_deposit_order on DepositOrder {\n  id\n  transactionId\n  paidAmountCents\n  receivedAmountCents\n  status\n  createdAt\n}\n"
   }
 };
 })();

app/services/build_deposit_order.rb

@@ -4,7 +4,7 @@ class BuildDepositOrder
 
   attr_reader :paid_amount_cents, :user_id
 
-  def initilize(paid_amount_cents:, user_id:)
+  def initialize(paid_amount_cents:, user_id:)
     @paid_amount_cents = paid_amount_cents
     @user_id = user_id
   end

package.json

@@ -51,6 +51,7 @@
     "webpack-cli": "^3.3.12"
   },
   "devDependencies": {
+    "@types/qrcode": "^1.4.1",
     "@types/ramda": "^0.27.44",
     "@types/react-relay": "^11.0.2",
     "@types/react-router-dom": "^5.1.8",

yarn.lock

@@ -1669,6 +1669,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
+"@types/qrcode@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@types/qrcode/-/qrcode-1.4.1.tgz#0689f400c3a95d2db040c99c99834faa09ee9dc1"
+  integrity sha512-vxMyr7JM7tYPxu8vUE83NiosWX5DZieCyYeJRoOIg0pAkyofCBzknJ2ycUZkPGDFis2RS8GN/BeJLnRnAPxeCA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/ramda@^0.27.44":
   version "0.27.44"
   resolved "https://registry.yarnpkg.com/@types/ramda/-/ramda-0.27.44.tgz#ba2283d67fcff366f7e68bd5124a0466e467967f"