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

add deposit form

Browse Source
This commit is contained in:
João Geonizeli
2021-09-06 11:29:33 -03:00
parent 4eb0f94dd7
commit ccfc35aa01
17 changed files with 453 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/__generated__/schema.graphql generated
View File

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

3
app/javascript/src/messages/NoHistory.tsx
View File

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

41
app/javascript/src/pages/Orders/Deposit/Create/Create.tsx Normal file
View File

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

46
app/javascript/src/pages/Orders/Deposit/Create/Form.tsx Normal file
View File

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

197
app/javascript/src/pages/Orders/Deposit/Create/__generated__/commitCreateDepositOrderMutation.graphql.ts generated Normal file
View File

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

33
app/javascript/src/pages/Orders/Deposit/Create/commitCreateDepositOrder.tsx Normal file
View File

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

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

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

41
app/javascript/src/pages/Orders/Deposit/Deposit.tsx
View File

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

43
app/javascript/src/pages/Orders/Deposit/DepositProvider.tsx Normal file
View File

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

17
app/javascript/src/pages/Orders/Deposit/History/History.tsx
View File

@@ -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 (
<>
{openOrder && <Show orderRef={openOrder.node} onClose={onClose} />}
<div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
<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>
);
};

19
app/javascript/src/pages/Orders/Deposit/Show/Show.tsx
View File

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

10
app/javascript/src/pages/Orders/Deposit/Show/__generated__/Show_deposit_order.graphql.ts generated
View File

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

5
app/javascript/src/pages/Orders/Deposit/__generated__/DepositQuery.graphql.ts generated
View File

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