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

add sell and buy orders list

Browse Source
This commit is contained in:
João Geonizeli
2021-08-15 18:02:06 -03:00
parent 29175f14b0
commit 64bc21195c
17 changed files with 1185 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/src/components/Poo.tsx
View File

@@ -38,12 +38,12 @@ export const Pool = ({ pool }: PoolProps) => {
}: ${JSON.stringify(totalStaked)}`
);
const aprValue = getApr(
stakingPrice,
earningPrice,
totalStaked,
parseFloat(pool.tokenPerBlock) / 1e-18
);
const aprValue = getApr({
rewardTokenPrice: stakingPrice,
stakingTokenPrice: earningPrice,
tokenPerBlock: totalStaked,
totalStaked: parseFloat(pool.tokenPerBlock) / 1e-18,
});
if (aprValue) {
setApr({

187
app/javascript/src/pages/Orders/Exchange/CreateExchangeOrderModel/CreateExchangeOrderModal.tsx Normal file
View File

@@ -0,0 +1,187 @@
import React, { useState } from "react";
import type { FC } from "react";
import { graphql } from "babel-plugin-relay/macro";
import { useFragment } from "react-relay";
import { BigNumber } from "bignumber.js";
import cx from "classnames";
import { useCurrentUser } from "../../../../contexts/UserProvider";
import { Unauthenticated } from "../../../../messages/Unauthenticated";
import type { CreateExchangeOrderModal_fiatBalances$key } from "./__generated__/CreateExchangeOrderModal_fiatBalances.graphql";
import type { CreateExchangeOrderModal_balances$key } from "./__generated__/CreateExchangeOrderModal_balances.graphql";
const tabBaseStyles =
"w-full text-base font-bold text-black px-4 py-2 focus:ring-blue-500";
const selectedTabStyles =
"bg-blue-600 hover:bg-blue-700 rounded-l-frounded-full text-white";
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";
type Props = {
fiatBalancesRefs: CreateExchangeOrderModal_fiatBalances$key;
balancesRefs: CreateExchangeOrderModal_balances$key;
};
export const CreateExchangeOrderModal: FC<Props> = ({
fiatBalancesRefs,
balancesRefs,
}) => {
const { isAuthenticated } = useCurrentUser();
const [exchangeOption, setExchangeOption] = useState<"BUY" | "SELL">("BUY");
const [cryptoDock, setCryptoDock] = useState<string>("0");
const [fiatDock, setFiatDock] = useState<string>("0.00");
const fiatBalances = useFragment<CreateExchangeOrderModal_fiatBalances$key>(
graphql`
fragment CreateExchangeOrderModal_fiatBalances on FiatBalanceConnection {
edges {
node {
amountCents
}
}
}
`,
fiatBalancesRefs
);
const balances = useFragment<CreateExchangeOrderModal_balances$key>(
graphql`
fragment CreateExchangeOrderModal_balances on BalanceConnection {
edges {
node {
amount
}
}
}
`,
balancesRefs
);
if (!isAuthenticated) return <Unauthenticated />;
const [crypto] = balances.edges;
const [fiat] = fiatBalances.edges;
const avaliableCrypto = new BigNumber(crypto.node.amount);
const avaliableFiat = (
fiat.node.amountCents ? fiat.node.amountCents / 100 : 0
).toFixed(2);
const handleSellTabClick = () => {
setExchangeOption("SELL");
setCryptoDock("0");
};
const handleBuyTabClick = () => {
setExchangeOption("BUY");
setCryptoDock("0");
};
const handleCryptoAmountChange = ({
currentTarget: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
const newCryptoAmount = new BigNumber(value);
if (newCryptoAmount.isLessThanOrEqualTo(avaliableCrypto)) {
setCryptoDock(value);
}
};
const handleFiatAmountChange = ({
currentTarget: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
const newFiatAmount = Number(value);
if (Number(avaliableFiat) >= newFiatAmount) {
setFiatDock(value);
}
};
const handleMaxFiatDockButton = () => {
setFiatDock(avaliableFiat);
};
const handleMaxCryptoButton = () => {
setCryptoDock(avaliableCrypto.toString());
};
return (
<div className="max-w-lg">
<div className="flex items-center bg-white rounded-full border border-gray-200 mb-3">
<button
type="button"
className={cx(
tabBaseStyles,
"rounded-full",
exchangeOption === "BUY" && selectedTabStyles
)}
onClick={handleBuyTabClick}
>
Comprar
</button>
<button
type="button"
className={cx(
tabBaseStyles,
"rounded-full",
exchangeOption === "SELL" && selectedTabStyles
)}
onClick={handleSellTabClick}
>
Vender
</button>
</div>
<form className="bg-white p-4 rounded-2xl border border-gray-200">
<span className="mb-2">
{exchangeOption === "SELL" ? "CAKE" : "BRL"} disponível:{" "}
{exchangeOption === "SELL" ? crypto.node.amount : avaliableFiat}
</span>
<div className="flex flex-row">
{exchangeOption === "BUY" ? (
<>
<input
className={cx(inputBaseStyles)}
type="number"
value={fiatDock}
onChange={handleFiatAmountChange}
/>
<button
type="button"
disabled={fiatDock === avaliableFiat}
className="flex items-center mb-3 ml-3 font-bold rounded-full text-red-500"
onClick={handleMaxFiatDockButton}
>
Max
</button>
</>
) : (
<>
<input
className={cx(inputBaseStyles)}
type="number"
value={cryptoDock}
onChange={handleCryptoAmountChange}
/>
<button
type="button"
disabled={avaliableCrypto.isEqualTo(cryptoDock)}
className="flex items-center mb-3 ml-3 font-bold rounded-full text-red-500"
onClick={handleMaxCryptoButton}
>
Max
</button>
</>
)}
</div>
<button
className="cursor-pointer py-2 px-4 bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
type="submit"
>
{exchangeOption === "BUY" ? "Comprar" : "Vender"} CAKE
</button>
</form>
</div>
);
};

63
app/javascript/src/pages/Orders/Exchange/CreateExchangeOrderModel/__generated__/CreateExchangeOrderModal_balances.graphql.ts generated Normal file
View File

@@ -0,0 +1,63 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type CreateExchangeOrderModal_balances = {
readonly edges: ReadonlyArray<{
readonly node: {
readonly amount: string;
};
}>;
readonly " $refType": "CreateExchangeOrderModal_balances";
};
export type CreateExchangeOrderModal_balances$data = CreateExchangeOrderModal_balances;
export type CreateExchangeOrderModal_balances$key = {
readonly " $data"?: CreateExchangeOrderModal_balances$data;
readonly " $fragmentRefs": FragmentRefs<"CreateExchangeOrderModal_balances">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "CreateExchangeOrderModal_balances",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "BalanceEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Balance",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "BalanceConnection",
"abstractKey": null
};
(node as any).hash = '42aad1bd63f1135b4d99ec236cd945b5';
export default node;

63
app/javascript/src/pages/Orders/Exchange/CreateExchangeOrderModel/__generated__/CreateExchangeOrderModal_fiatBalances.graphql.ts generated Normal file
View File

@@ -0,0 +1,63 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type CreateExchangeOrderModal_fiatBalances = {
readonly edges: ReadonlyArray<{
readonly node: {
readonly amountCents: number;
};
}>;
readonly " $refType": "CreateExchangeOrderModal_fiatBalances";
};
export type CreateExchangeOrderModal_fiatBalances$data = CreateExchangeOrderModal_fiatBalances;
export type CreateExchangeOrderModal_fiatBalances$key = {
readonly " $data"?: CreateExchangeOrderModal_fiatBalances$data;
readonly " $fragmentRefs": FragmentRefs<"CreateExchangeOrderModal_fiatBalances">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "CreateExchangeOrderModal_fiatBalances",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FiatBalanceEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FiatBalance",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCents",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "FiatBalanceConnection",
"abstractKey": null
};
(node as any).hash = 'b3a734bd9e34e02aacfa42b6b95776a5';
export default node;

1
app/javascript/src/pages/Orders/Exchange/CreateExchangeOrderModel/index.ts Normal file
View File

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

181
app/javascript/src/pages/Orders/Exchange/Exchange.tsx
View File

@@ -1,176 +1,47 @@
import React, { useState } from "react";
import type { FC } from "react";
/* eslint-disable relay/must-colocate-fragment-spreads */
import { graphql } from "babel-plugin-relay/macro";
import React, { useState } from "react";
import { useLazyLoadQuery } from "react-relay";
import { BigNumber } from "bignumber.js";
import cx from "classnames";
import { useCurrentUser } from "../../../contexts/UserProvider";
import { Unauthenticated } from "../../../messages/Unauthenticated";
import { CreateExchangeOrderModal } from "./CreateExchangeOrderModel";
import { ExchangeHistory } from "./ExchangeHistory";
import type { ExchangeQuery } from "./__generated__/ExchangeQuery.graphql";
const tabBaseStyles =
"w-full text-base font-bold text-black px-4 py-2 focus:ring-blue-500";
export const Exchange = () => {
const [modelOpen] = useState<boolean>(false);
const selectedTabStyles =
"bg-blue-600 hover:bg-blue-700 rounded-l-frounded-full text-white";
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 Exchange: FC = () => {
const { isAuthenticated } = useCurrentUser();
const [exchangeOption, setExchangeOption] = useState<"BUY" | "SELL">("BUY");
const [cryptoDock, setCryptoDock] = useState<string>("0");
const [fiatDock, setFiatDock] = useState<string>("0.00");
const { balances, fiatBalances } = useLazyLoadQuery<ExchangeQuery>(
const data = useLazyLoadQuery<ExchangeQuery>(
graphql`
query ExchangeQuery {
fiatBalances {
edges {
node {
amountCents
}
}
...CreateExchangeOrderModal_fiatBalances
}
balances {
edges {
node {
amount
}
}
...CreateExchangeOrderModal_balances
}
buyCryptoOrders {
...ExchangeHistory_buyCryptoOrders
}
sellCryptoOrders {
...ExchangeHistory_sellCryptoOrders
}
}
`,
{}
);
if (!isAuthenticated) return <Unauthenticated />;
const [crypto] = balances.edges;
const [fiat] = fiatBalances.edges;
const avaliableCrypto = new BigNumber(crypto.node.amount);
const avaliableFiat = (
fiat.node.amountCents ? fiat.node.amountCents / 100 : 0
).toFixed(2);
const handleSellTabClick = () => {
setExchangeOption("SELL");
setCryptoDock("0");
};
const handleBuyTabClick = () => {
setExchangeOption("BUY");
setCryptoDock("0");
};
const handleCryptoAmountChange = ({
currentTarget: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
const newCryptoAmount = new BigNumber(value);
if (newCryptoAmount.isLessThanOrEqualTo(avaliableCrypto)) {
setCryptoDock(value);
}
};
const handleFiatAmountChange = ({
currentTarget: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
const newFiatAmount = Number(value);
if (Number(avaliableFiat) >= newFiatAmount) {
setFiatDock(value);
}
};
const handleMaxFiatDockButton = () => {
setFiatDock(avaliableFiat);
};
const handleMaxCryptoButton = () => {
setCryptoDock(avaliableCrypto.toString());
};
return (
<div className="grid place-items-center w-full">
<div className="max-w-lg">
<div className="flex items-center bg-white rounded-full border border-gray-200 mb-3">
<button
type="button"
className={cx(
tabBaseStyles,
"rounded-full",
exchangeOption === "BUY" && selectedTabStyles
)}
onClick={handleBuyTabClick}
>
Comprar
</button>
<button
type="button"
className={cx(
tabBaseStyles,
"rounded-full",
exchangeOption === "SELL" && selectedTabStyles
)}
onClick={handleSellTabClick}
>
Vender
</button>
</div>
<form className="bg-white p-4 rounded-2xl border border-gray-200">
<span className="mb-2">
{exchangeOption === "SELL" ? "CAKE" : "BRL"} disponível:{" "}
{exchangeOption === "SELL" ? crypto.node.amount : avaliableFiat}
</span>
<div className="flex flex-row">
{exchangeOption === "BUY" ? (
<>
<input
className={cx(inputBaseStyles)}
type="number"
value={fiatDock}
onChange={handleFiatAmountChange}
/>
<button
type="button"
disabled={fiatDock === avaliableFiat}
className="flex items-center mb-3 ml-3 font-bold rounded-full text-red-500"
onClick={handleMaxFiatDockButton}
>
Max
</button>
</>
) : (
<>
<input
className={cx(inputBaseStyles)}
type="number"
value={cryptoDock}
onChange={handleCryptoAmountChange}
/>
<button
type="button"
disabled={avaliableCrypto.isEqualTo(cryptoDock)}
className="flex items-center mb-3 ml-3 font-bold rounded-full text-red-500"
onClick={handleMaxCryptoButton}
>
Max
</button>
</>
)}
</div>
<button
className="cursor-pointer py-2 px-4 bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
type="submit"
>
{exchangeOption === "BUY" ? "Comprar" : "Vender"} CAKE
</button>
</form>
</div>
<div className="w-full">
<ExchangeHistory
sellCryptoOrdersRefs={data.sellCryptoOrders}
buyCryptoOrdersRefs={data.buyCryptoOrders}
/>
{modelOpen && (
<CreateExchangeOrderModal
balancesRefs={data.balances}
fiatBalancesRefs={data.fiatBalances}
/>
)}
</div>
);
};

165
app/javascript/src/pages/Orders/Exchange/ExchangeHistory/ExchangeHistory.tsx Normal file
View File

@@ -0,0 +1,165 @@
import { graphql } from "babel-plugin-relay/macro";
import type { FC } from "react";
import React from "react";
import { useFragment } from "react-relay";
import { centsToUnit } from "../../../../utils/fiatMoney";
import type { CryptoExchangeOrderProps } from "./components/CryptoExchangeOrder";
import { CryptoExchangeOrder } from "./components/CryptoExchangeOrder";
import type {
ExchangeHistory_buyCryptoOrders$key,
ProcessStatus,
} from "./__generated__/ExchangeHistory_buyCryptoOrders.graphql";
import type { ExchangeHistory_sellCryptoOrders$key } from "./__generated__/ExchangeHistory_sellCryptoOrders.graphql";
type Props = {
buyCryptoOrdersRefs: ExchangeHistory_buyCryptoOrders$key;
sellCryptoOrdersRefs: ExchangeHistory_sellCryptoOrders$key;
};
type SellOrBuyOrder = {
readonly node: {
readonly id: string;
readonly status: ProcessStatus;
readonly paidAmount: string;
readonly receivedAmountCents: number | null;
readonly createdAt: unknown;
readonly paidAmountCents: number;
readonly receivedAmount: string | null;
readonly currency: {
readonly name: string;
};
readonly __typename: string;
};
};
export const ExchangeHistory: FC<Props> = ({
buyCryptoOrdersRefs,
sellCryptoOrdersRefs,
}) => {
const buyCryptoOrders = useFragment<ExchangeHistory_buyCryptoOrders$key>(
graphql`
fragment ExchangeHistory_buyCryptoOrders on BuyCryptoOrderConnection {
edges {
node {
id
status
createdAt
paidAmountCents
receivedAmount
currency {
name
}
__typename
}
}
}
`,
buyCryptoOrdersRefs
);
const sellCryptoOrders = useFragment<ExchangeHistory_sellCryptoOrders$key>(
graphql`
fragment ExchangeHistory_sellCryptoOrders on SellCryptoOrderConnection {
edges {
node {
id
status
paidAmount
receivedAmountCents
createdAt
currency {
name
}
__typename
}
}
}
`,
sellCryptoOrdersRefs
);
const allResults = [...buyCryptoOrders.edges, ...sellCryptoOrders.edges];
const allResultsOrdeneds = allResults.sort((item1, item2) => {
return (
new Date(item1.node.createdAt as string).getTime() -
new Date(item2.node.createdAt as string).getTime()
);
}) as SellOrBuyOrder[];
const orderRows: Array<(CryptoExchangeOrderProps & { id: string }) | null> =
allResultsOrdeneds.map((edge) => {
const node = edge?.node;
if (node?.__typename === "SellCryptoOrder") {
return {
id: node.id,
payed: `${node.paidAmount} ${node.currency.name}`,
received: `${centsToUnit(node.receivedAmountCents)} BRL`,
createdAt: new Date(node.createdAt as string).toLocaleString(),
kind: node.__typename,
status: node.status,
};
}
if (node?.__typename === "BuyCryptoOrder") {
return {
id: node.id,
payed: `${centsToUnit(node.paidAmountCents)} BRL`,
received: `${node.receivedAmount} ${node.currency.name}`,
createdAt: new Date(node.createdAt as string).toLocaleString(),
kind: node.__typename,
status: node.status,
};
}
return null;
});
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 className="min-w-full leading-normal">
<thead>
<tr>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Valor pago
</th>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Valor recebido
</th>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Criado em
</th>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Status
</th>
</tr>
</thead>
<tbody>
{orderRows.map((order) => {
return <CryptoExchangeOrder key={order?.id} {...order} />;
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
};

125
app/javascript/src/pages/Orders/Exchange/ExchangeHistory/__generated__/ExchangeHistory_buyCryptoOrders.graphql.ts generated Normal file
View File

@@ -0,0 +1,125 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type ProcessStatus = "CANCELED" | "COMPLETED" | "PROCESSING" | "%future added value";
export type ExchangeHistory_buyCryptoOrders = {
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly status: ProcessStatus;
readonly createdAt: unknown;
readonly paidAmountCents: number;
readonly receivedAmount: string | null;
readonly currency: {
readonly name: string;
};
readonly __typename: string;
};
}>;
readonly " $refType": "ExchangeHistory_buyCryptoOrders";
};
export type ExchangeHistory_buyCryptoOrders$data = ExchangeHistory_buyCryptoOrders;
export type ExchangeHistory_buyCryptoOrders$key = {
readonly " $data"?: ExchangeHistory_buyCryptoOrders$data;
readonly " $fragmentRefs": FragmentRefs<"ExchangeHistory_buyCryptoOrders">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "ExchangeHistory_buyCryptoOrders",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "BuyCryptoOrderEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "BuyCryptoOrder",
"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": "receivedAmount",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "BuyCryptoOrderConnection",
"abstractKey": null
};
(node as any).hash = 'da0e93160594d0e07defe123a9bd755b';
export default node;

125
app/javascript/src/pages/Orders/Exchange/ExchangeHistory/__generated__/ExchangeHistory_sellCryptoOrders.graphql.ts generated Normal file
View File

@@ -0,0 +1,125 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type ProcessStatus = "CANCELED" | "COMPLETED" | "PROCESSING" | "%future added value";
export type ExchangeHistory_sellCryptoOrders = {
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly status: ProcessStatus;
readonly paidAmount: string;
readonly receivedAmountCents: number | null;
readonly createdAt: unknown;
readonly currency: {
readonly name: string;
};
readonly __typename: string;
};
}>;
readonly " $refType": "ExchangeHistory_sellCryptoOrders";
};
export type ExchangeHistory_sellCryptoOrders$data = ExchangeHistory_sellCryptoOrders;
export type ExchangeHistory_sellCryptoOrders$key = {
readonly " $data"?: ExchangeHistory_sellCryptoOrders$data;
readonly " $fragmentRefs": FragmentRefs<"ExchangeHistory_sellCryptoOrders">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "ExchangeHistory_sellCryptoOrders",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "SellCryptoOrderEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "SellCryptoOrder",
"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": "paidAmount",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "receivedAmountCents",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "SellCryptoOrderConnection",
"abstractKey": null
};
(node as any).hash = '384d1326525240c150d450555796a621';
export default node;

61
app/javascript/src/pages/Orders/Exchange/ExchangeHistory/components/CryptoExchangeOrder.tsx Normal file
View File

@@ -0,0 +1,61 @@
import type { FC } from "react";
import React from "react";
import cx from "classnames";
import type { ProcessStatus } from "../__generated__/ExchangeHistory_buyCryptoOrders.graphql";
export type CryptoExchangeOrderProps = {
payed?: string;
received?: string;
status?: ProcessStatus;
createdAt?: string;
};
const getStatusTextAndColors = (status: ProcessStatus) => {
if (status === "PROCESSING") {
return ["Processando", "text-yellow-900", "bg-yellow-200"];
}
if (status === "CANCELED") {
return ["Cancelado", "text-red-900", "bg-red-200"];
}
return ["Completado", "text-green-900", "bg-green-200"];
};
export const CryptoExchangeOrder: FC<CryptoExchangeOrderProps> = ({
createdAt = "",
payed = "",
received = "",
status = "PROCESSING",
}) => {
const [label, textStyles, bgStyles] = getStatusTextAndColors(status);
return (
<tr>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-nowrap">{payed}</p>
</td>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-nowrap">{received}</p>
</td>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-nowrap">{createdAt}</p>
</td>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<span
className={cx(
"relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",
textStyles
)}
>
<span
aria-hidden="true"
className={cx("absolute inset-0 opacity-50 rounded-full", bgStyles)}
/>
<span className="relative">{label}</span>
</span>
</td>
</tr>
);
};

78
app/javascript/src/pages/Orders/Exchange/ExchangeHistory/components/__generated__/SellOrder_order.graphql.ts generated Normal file
View File

@@ -0,0 +1,78 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type ProcessStatus = "CANCELED" | "COMPLETED" | "PROCESSING" | "%future added value";
export type SellOrder_order = {
readonly id: string;
readonly status: ProcessStatus;
readonly paidAmount: string;
readonly receivedAmountCents: number | null;
readonly createdAt: unknown;
readonly __typename: "SellCryptoOrder";
readonly " $refType": "SellOrder_order";
};
export type SellOrder_order$data = SellOrder_order;
export type SellOrder_order$key = {
readonly " $data"?: SellOrder_order$data;
readonly " $fragmentRefs": FragmentRefs<"SellOrder_order">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "SellOrder_order",
"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": "paidAmount",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "receivedAmountCents",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
}
],
"type": "SellCryptoOrder",
"abstractKey": null
};
(node as any).hash = 'f621be85ef9b711e1c720d4fc07187c7';
export default node;

1
app/javascript/src/pages/Orders/Exchange/ExchangeHistory/index.ts Normal file
View File

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

321
app/javascript/src/pages/Orders/Exchange/__generated__/ExchangeQuery.graphql.ts generated
View File

@@ -3,21 +3,20 @@
// @ts-nocheck
import { ConcreteRequest } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type ExchangeQueryVariables = {};
export type ExchangeQueryResponse = {
readonly fiatBalances: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly amountCents: number;
};
}>;
readonly " $fragmentRefs": FragmentRefs<"CreateExchangeOrderModal_fiatBalances">;
};
readonly balances: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly amount: string;
};
}>;
readonly " $fragmentRefs": FragmentRefs<"CreateExchangeOrderModal_balances">;
};
readonly buyCryptoOrders: {
readonly " $fragmentRefs": FragmentRefs<"ExchangeHistory_buyCryptoOrders">;
};
readonly sellCryptoOrders: {
readonly " $fragmentRefs": FragmentRefs<"ExchangeHistory_sellCryptoOrders">;
};
};
export type ExchangeQuery = {
@@ -30,19 +29,67 @@ export type ExchangeQuery = {
/*
query ExchangeQuery {
fiatBalances {
edges {
node {
amountCents
id
}
}
...CreateExchangeOrderModal_fiatBalances
}
balances {
edges {
node {
amount
...CreateExchangeOrderModal_balances
}
buyCryptoOrders {
...ExchangeHistory_buyCryptoOrders
}
sellCryptoOrders {
...ExchangeHistory_sellCryptoOrders
}
}
fragment CreateExchangeOrderModal_balances on BalanceConnection {
edges {
node {
amount
id
}
}
}
fragment CreateExchangeOrderModal_fiatBalances on FiatBalanceConnection {
edges {
node {
amountCents
id
}
}
}
fragment ExchangeHistory_buyCryptoOrders on BuyCryptoOrderConnection {
edges {
node {
id
status
createdAt
paidAmountCents
receivedAmount
currency {
name
id
}
__typename
}
}
}
fragment ExchangeHistory_sellCryptoOrders on SellCryptoOrderConnection {
edges {
node {
id
status
paidAmount
receivedAmountCents
createdAt
currency {
name
id
}
__typename
}
}
}
@@ -53,21 +100,47 @@ var v0 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCents",
"name": "id",
"storageKey": null
},
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"name": "status",
"storageKey": null
},
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"name": "createdAt",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
(v0/*: any*/)
],
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
};
return {
@@ -86,27 +159,9 @@ return {
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FiatBalanceEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FiatBalance",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v0/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
"kind": "FragmentSpread",
"name": "CreateExchangeOrderModal_fiatBalances"
}
],
"storageKey": null
@@ -120,27 +175,41 @@ return {
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "BalanceEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Balance",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
"kind": "FragmentSpread",
"name": "CreateExchangeOrderModal_balances"
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "BuyCryptoOrderConnection",
"kind": "LinkedField",
"name": "buyCryptoOrders",
"plural": false,
"selections": [
{
"args": null,
"kind": "FragmentSpread",
"name": "ExchangeHistory_buyCryptoOrders"
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "SellCryptoOrderConnection",
"kind": "LinkedField",
"name": "sellCryptoOrders",
"plural": false,
"selections": [
{
"args": null,
"kind": "FragmentSpread",
"name": "ExchangeHistory_sellCryptoOrders"
}
],
"storageKey": null
@@ -179,8 +248,14 @@ return {
"name": "node",
"plural": false,
"selections": [
(v0/*: any*/),
(v2/*: any*/)
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCents",
"storageKey": null
},
(v0/*: any*/)
],
"storageKey": null
}
@@ -214,8 +289,118 @@ return {
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
(v0/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "BuyCryptoOrderConnection",
"kind": "LinkedField",
"name": "buyCryptoOrders",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "BuyCryptoOrderEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "BuyCryptoOrder",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v0/*: any*/),
(v1/*: any*/),
(v2/*: any*/)
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "paidAmountCents",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "receivedAmount",
"storageKey": null
},
(v3/*: any*/),
(v4/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "SellCryptoOrderConnection",
"kind": "LinkedField",
"name": "sellCryptoOrders",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "SellCryptoOrderEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "SellCryptoOrder",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v0/*: any*/),
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "paidAmount",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "receivedAmountCents",
"storageKey": null
},
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/)
],
"storageKey": null
}
@@ -228,14 +413,14 @@ return {
]
},
"params": {
"cacheID": "bb1b8283beba2daf38bacec716816383",
"cacheID": "ddb6670ea93a9fdc62c7627c3ed09925",
"id": null,
"metadata": {},
"name": "ExchangeQuery",
"operationKind": "query",
"text": "query ExchangeQuery {\n fiatBalances {\n edges {\n node {\n amountCents\n id\n }\n }\n }\n balances {\n edges {\n node {\n amount\n id\n }\n }\n }\n}\n"
"text": "query ExchangeQuery {\n fiatBalances {\n ...CreateExchangeOrderModal_fiatBalances\n }\n balances {\n ...CreateExchangeOrderModal_balances\n }\n buyCryptoOrders {\n ...ExchangeHistory_buyCryptoOrders\n }\n sellCryptoOrders {\n ...ExchangeHistory_sellCryptoOrders\n }\n}\n\nfragment CreateExchangeOrderModal_balances on BalanceConnection {\n edges {\n node {\n amount\n id\n }\n }\n}\n\nfragment CreateExchangeOrderModal_fiatBalances on FiatBalanceConnection {\n edges {\n node {\n amountCents\n id\n }\n }\n}\n\nfragment ExchangeHistory_buyCryptoOrders on BuyCryptoOrderConnection {\n edges {\n node {\n id\n status\n createdAt\n paidAmountCents\n receivedAmount\n currency {\n name\n id\n }\n __typename\n }\n }\n}\n\nfragment ExchangeHistory_sellCryptoOrders on SellCryptoOrderConnection {\n edges {\n node {\n id\n status\n paidAmount\n receivedAmountCents\n createdAt\n currency {\n name\n id\n }\n __typename\n }\n }\n}\n"
}
};
})();
(node as any).hash = '517d3bf7bc6330021f8eb615e78417f5';
(node as any).hash = 'cc0eaddc68f5bd14d39ce9e148876535';
export default node;

19
app/javascript/src/utils/apr.ts
View File

@@ -2,12 +2,19 @@ import BigNumber from "bignumber.js";
import { BLOCKS_PER_YEAR } from "../constants";
export const getApr = (
stakingTokenPrice: number,
rewardTokenPrice: number,
totalStaked: number,
tokenPerBlock: number
) => {
type Props = {
stakingTokenPrice: number;
rewardTokenPrice: number;
totalStaked: number;
tokenPerBlock: number;
};
export const getApr = ({
rewardTokenPrice,
stakingTokenPrice,
tokenPerBlock,
totalStaked,
}: Props) => {
const totalRewardPricePerYear = new BigNumber(rewardTokenPrice)
.times(tokenPerBlock)
.times(BLOCKS_PER_YEAR);

5
app/javascript/src/utils/fiatMoney.ts Normal file
View File

@@ -0,0 +1,5 @@
export const centsToUnit = (value?: number | null) => {
if (!value) return "0.00";
return (value / 100).toFixed(2);
};