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

handle stake submit

Browse Source
This commit is contained in:
João Geonizeli
2021-08-17 20:27:03 -03:00
parent 5cda50bdad
commit 35fcdeb0f8
8 changed files with 301 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -144,6 +144,42 @@ type CreateSellCryptoOrderPayload {
order: SellCryptoOrder
}
input CreateStakeOrderAttributesInput {
"""
Amount to be paid
"""
amount: String!
currencyId: ID!
poolName: String!
}
"""
Autogenerated input type of CreateStakeOrder
"""
input CreateStakeOrderInput {
"""
A unique identifier for the client performing the mutation.
"""
clientMutationId: String
order: CreateStakeOrderAttributesInput!
}
"""
Autogenerated return type of CreateStakeOrder
"""
type CreateStakeOrderPayload {
"""
A unique identifier for the client performing the mutation.
"""
clientMutationId: String
"""
Errors encountered during execution of the mutation.
"""
errors: [RecordInvalid!]
order: StakeOrder
}
type Currency implements Node {
id: ID!
name: String!
@@ -203,6 +239,12 @@ type Mutation {
"""
input: CreateSellCryptoOrderInput!
): CreateSellCryptoOrderPayload
createStakeOrder(
"""
Parameters for CreateStakeOrder
"""
input: CreateStakeOrderInput!
): CreateStakeOrderPayload
}
"""

8
app/javascript/src/pages/Home/Pool.tsx
View File

@@ -10,10 +10,11 @@ import { StakeOrderModal } from "./StakeOrderModal";
type PoolProps = {
pool: PoolConfig;
cakeBalance: string;
balance: string;
currencyId: string;
};
export const Pool: FC<PoolProps> = ({ pool, cakeBalance }) => {
export const Pool: FC<PoolProps> = ({ pool, balance, currencyId }) => {
const {
provider,
pancake: { router },
@@ -92,7 +93,8 @@ export const Pool: FC<PoolProps> = ({ pool, cakeBalance }) => {
</div>
<StakeOrderModal
poolName={pool.earningToken.symbol}
cakeBalance={cakeBalance}
balance={balance}
currencyId={currencyId}
/>
</div>
</div>

17
app/javascript/src/pages/Home/PoolListing.tsx
View File

@@ -14,6 +14,7 @@ export const PoolListing = () => {
edges {
node {
currency {
id
name
}
amount
@@ -25,9 +26,12 @@ export const PoolListing = () => {
{}
);
const cakeBalance =
balances.edges.find((edge) => edge.node.currency.name === "CAKE")?.node
.amount ?? "0";
const cakeBalance = balances.edges.find(
(edge) => edge.node.currency.name === "CAKE"
)?.node;
const balance = cakeBalance?.amount ?? "0";
const currencyId = cakeBalance?.currency.id ?? "????";
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full gap-8 py-4 -mt-16 overflow-x-hidden">
@@ -35,7 +39,12 @@ export const PoolListing = () => {
.filter((pool) => !pool.isFinished)
.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
.map((pool) => (
<Pool key={pool.sousId} pool={pool} cakeBalance={cakeBalance} />
<Pool
key={pool.sousId}
pool={pool}
balance={balance}
currencyId={currencyId}
/>
))}
</div>
);

34
app/javascript/src/pages/Home/StakeOrderModal.tsx → app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx
View File

@@ -2,29 +2,43 @@ import type { ChangeEvent, FC } from "react";
import React, { useState } from "react";
import cx from "classnames";
import { BigNumber } from "bignumber.js";
import { useRelayEnvironment } from "react-relay";
import { Modal } from "../../components";
import { Modal } from "../../../components";
import { commitCreateStakeOrderMutation } from "./createStakeOrder";
type Props = {
poolName: string;
cakeBalance: string;
balance: string;
currencyId: string;
};
const inputBaseStyles =
"rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
export const StakeOrderModal: FC<Props> = ({ poolName, cakeBalance }) => {
export const StakeOrderModal: FC<Props> = ({
poolName,
balance,
currencyId,
}) => {
const environment = useRelayEnvironment();
const [isOpen, setIsOpen] = useState(false);
const [investAmountInput, setInvestAmountInput] = useState("0");
const avaliableCake = new BigNumber(cakeBalance);
const avaliableCake = new BigNumber(balance);
const investAmount = new BigNumber(investAmountInput);
const handleButtonClick = () => {
setIsOpen((prevState) => !prevState);
};
const onSubmit = () => {};
const onSubmit = () => {
commitCreateStakeOrderMutation(environment, {
currencyId,
amount: investAmountInput,
poolName,
});
};
const handleInvestInput = ({
currentTarget: { value },
@@ -39,6 +53,10 @@ export const StakeOrderModal: FC<Props> = ({ poolName, cakeBalance }) => {
}
};
const handleMaxButton = () => {
setInvestAmountInput(balance);
};
const stakeAvaliable =
avaliableCake.isGreaterThan(0) &&
avaliableCake.isLessThanOrEqualTo(investAmount);
@@ -57,7 +75,7 @@ export const StakeOrderModal: FC<Props> = ({ poolName, cakeBalance }) => {
setIsOpen={setIsOpen}
title={`Invista em ${poolName}`}
>
<span className="mb-2">CAKE disponível: {cakeBalance}</span>
<span className="mb-2">CAKE disponível: {balance}</span>
<form onSubmit={onSubmit} className="bg-white py-2">
<div className="flex flex-row">
<input
@@ -68,9 +86,9 @@ export const StakeOrderModal: FC<Props> = ({ poolName, cakeBalance }) => {
/>
<button
type="button"
disabled={investAmountInput === cakeBalance}
disabled={investAmountInput === balance}
className="flex items-center mb-3 ml-3 font-bold rounded-full text-red-500"
onClick={() => {}}
onClick={handleMaxButton}
>
Max
</button>

150
app/javascript/src/pages/Home/StakeOrderModal/__generated__/createStakeOrderMutation.graphql.ts generated Normal file
View File

@@ -0,0 +1,150 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from "relay-runtime";
export type createStakeOrderMutationVariables = {
currencyId: string;
poolName: string;
amount: string;
};
export type createStakeOrderMutationResponse = {
readonly createStakeOrder: {
readonly order: {
readonly id: string;
} | null;
} | null;
};
export type createStakeOrderMutation = {
readonly response: createStakeOrderMutationResponse;
readonly variables: createStakeOrderMutationVariables;
};
/*
mutation createStakeOrderMutation(
$currencyId: ID!
$poolName: String!
$amount: String!
) {
createStakeOrder(input: {order: {currencyId: $currencyId, poolName: $poolName, amount: $amount}}) {
order {
id
}
}
}
*/
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "amount"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "currencyId"
},
v2 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "poolName"
},
v3 = [
{
"alias": null,
"args": [
{
"fields": [
{
"fields": [
{
"kind": "Variable",
"name": "amount",
"variableName": "amount"
},
{
"kind": "Variable",
"name": "currencyId",
"variableName": "currencyId"
},
{
"kind": "Variable",
"name": "poolName",
"variableName": "poolName"
}
],
"kind": "ObjectValue",
"name": "order"
}
],
"kind": "ObjectValue",
"name": "input"
}
],
"concreteType": "CreateStakeOrderPayload",
"kind": "LinkedField",
"name": "createStakeOrder",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "StakeOrder",
"kind": "LinkedField",
"name": "order",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/),
(v2/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "createStakeOrderMutation",
"selections": (v3/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v2/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "createStakeOrderMutation",
"selections": (v3/*: any*/)
},
"params": {
"cacheID": "bfe4935c593947810fbb8d7a52421483",
"id": null,
"metadata": {},
"name": "createStakeOrderMutation",
"operationKind": "mutation",
"text": "mutation createStakeOrderMutation(\n $currencyId: ID!\n $poolName: String!\n $amount: String!\n) {\n createStakeOrder(input: {order: {currencyId: $currencyId, poolName: $poolName, amount: $amount}}) {\n order {\n id\n }\n }\n}\n"
}
};
})();
(node as any).hash = '036f321e28fcb4bd3e274498cd3f116a';
export default node;

39
app/javascript/src/pages/Home/StakeOrderModal/createStakeOrder.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { graphql } from "babel-plugin-relay/macro";
import type { Environment } from "react-relay";
import { commitMutation } from "react-relay";
import type { createStakeOrderMutationVariables } from "./__generated__/createStakeOrderMutation.graphql";
export const commitCreateStakeOrderMutation = (
environment: Environment,
variables: createStakeOrderMutationVariables
) => {
return commitMutation(environment, {
mutation: graphql`
mutation createStakeOrderMutation(
$currencyId: ID!
$poolName: String!
$amount: String!
) {
createStakeOrder(
input: {
order: {
currencyId: $currencyId
poolName: $poolName
amount: $amount
}
}
) {
order {
id
}
}
}
`,
variables: { ...variables },
onCompleted: (_response) => {
window.location.reload();
},
onError: (_error) => {},
});
};

1
app/javascript/src/pages/Home/StakeOrderModal/index.ts Normal file
View File

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

58
app/javascript/src/pages/Home/__generated__/PoolListingQuery.graphql.ts generated
View File

@@ -9,6 +9,7 @@ export type PoolListingQueryResponse = {
readonly edges: ReadonlyArray<{
readonly node: {
readonly currency: {
readonly id: string;
readonly name: string;
};
readonly amount: string;
@@ -29,8 +30,8 @@ query PoolListingQuery {
edges {
node {
currency {
name
id
name
}
amount
id
@@ -45,21 +46,33 @@ var v0 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"name": "id",
"storageKey": null
},
v1 = {
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"name": "name",
"storageKey": null
}
],
"storageKey": null
},
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"name": "amount",
"storageKey": null
};
return {
@@ -93,19 +106,8 @@ return {
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
(v0/*: any*/)
],
"storageKey": null
},
(v1/*: any*/)
(v1/*: any*/),
(v2/*: any*/)
],
"storageKey": null
}
@@ -149,21 +151,9 @@ return {
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
(v0/*: any*/),
(v2/*: any*/)
],
"storageKey": null
},
(v1/*: any*/),
(v2/*: any*/)
(v2/*: any*/),
(v0/*: any*/)
],
"storageKey": null
}
@@ -176,14 +166,14 @@ return {
]
},
"params": {
"cacheID": "6abf5e963429e49993af50df156f8e1c",
"cacheID": "06c9467183eb0e89329ec630a8cc4880",
"id": null,
"metadata": {},
"name": "PoolListingQuery",
"operationKind": "query",
"text": "query PoolListingQuery {\n balances {\n edges {\n node {\n currency {\n name\n id\n }\n amount\n id\n }\n }\n }\n}\n"
"text": "query PoolListingQuery {\n balances {\n edges {\n node {\n currency {\n id\n name\n }\n amount\n id\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = '4fefb238e24b79198799686599255e6c';
(node as any).hash = '570efc1d3b5dac09303b8692d6830bb2';
export default node;