Skip to content

Commit

Permalink
Merge pull request #90 from Qsilver97/staging
Browse files Browse the repository at this point in the history 
Staging
  • Loading branch information
@Qsilver97
Qsilver97 authored May 22, 2024
2 parents e22e29b + 4ffdc24 commit 17e1d9c
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 64 deletions.
3 changes: 2 additions & 1 deletion app/client/src/components/dashboard/modal/TxFormsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useAuth } from "../../../contexts/AuthContext";
import { Text } from "../../commons";

const TxFormsModal = () => {
const { txId, expectedTick, txStatus } = useAuth();
const { txId, expectedTick, txStatus, tick } = useAuth();

return (
<div className="py-5 px-6 space-y-6 border-white/60 border rounded-2xl">
Expand All @@ -11,6 +11,7 @@ const TxFormsModal = () => {
Sending...
<br />
transactionId: {txId}<br />
currentTick: {tick}<br />
expectedTick: {expectedTick}
</div>
}
Expand Down
37 changes: 31 additions & 6 deletions app/client/src/components/dashboard/modal/TxModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import React from "react";
import TxFormsModal from "./TxFormsModal";
import { useAuth } from "../../../contexts/AuthContext";
type TxModalProps = {

handleTx: () => void;
quantity?: string;
price?: string;
};

const TxModal: React.FC<TxModalProps> = ({ }) => {
const TxModal: React.FC<TxModalProps> = ({ handleTx, quantity, price }) => {
const { txStatus, setTxStatus } = useAuth();

const handleCloseModal = () => {
Expand All @@ -15,9 +17,16 @@ const TxModal: React.FC<TxModalProps> = ({ }) => {
<div className="fixed inset-0 flex items-center justify-center z-50">
<div className="fixed inset-0 bg-black bg-opacity-50 backdrop-filter backdrop-blur-lg"></div>
<div className="relative w-[500px] h-auto bg-dark p-8 rounded-2xl shadow-lg">
<div className="w-full px-14 py-5 space-y-6">
<TxFormsModal />
</div>
{/* <div className="w-full px-14 py-5 space-y-6"> */}
{txStatus == 'confirm' ?
<div>
<p>Quantity: {quantity}</p>
<p>Price: {price}</p>
</div>
:
<TxFormsModal />
}
{/* </div> */}
{txStatus.includes('no command pending') &&
<button
className="w-full py-4 bg-dark-gray-400 font-Inter font-light rounded-xl cursor-pointer"
Expand All @@ -26,8 +35,24 @@ const TxModal: React.FC<TxModalProps> = ({ }) => {
Close
</button>
}
{txStatus == 'confirm' &&
<div className="flex gap-2">
< button
className="w-full py-4 bg-dark-gray-400 font-Inter font-light rounded-xl cursor-pointer"
onClick={() => handleCloseModal()}
>
Close
</button>
< button
className="w-full py-4 bg-dark-gray-400 font-Inter font-light rounded-xl cursor-pointer"
onClick={() => handleTx()}
>
Confirm
</button>
</div>
}
</div>
</div>
</div >
);
};

Expand Down
27 changes: 13 additions & 14 deletions app/client/src/contexts/AuthContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React, {
SetStateAction,
} from "react";
import { useNavigate } from "react-router-dom";
import { MODES, SERVER_URL, assetsItems, sideBarItems } from "../utils/constants";
import { EXPECTEDTICKGAP, MODES, SERVER_URL, assetsItems, sideBarItems } from "../utils/constants";
import { io, Socket } from "socket.io-client";
import axios from "axios";
import {
Expand All @@ -21,7 +21,6 @@ import {
import { toast } from "react-toastify";
import { Loading } from "../components/commons";
import { TokenOption } from "../components/commons/Select";
import { mockOrders } from "../utils/mock";

interface AuthContextType {
isAuthenticated: boolean;
Expand Down Expand Up @@ -284,26 +283,26 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({

const fetchTradingInfoPage = async (): Promise<any> => {
setTradingPageLoading(true);
// let orders;
// try {
// const resp = await axios.post(`${SERVER_URL}/api/trading-page-info`, {
// token: currentToken.value
// });
// orders = resp.data;
// } catch (error) {
// orders = [];
// }
setOrders(mockOrders)
let orders;
try {
const resp = await axios.post(`${SERVER_URL}/api/trading-page-info`, {
token: currentToken.value
});
orders = resp.data;
} catch (error) {
orders = [];
}
setOrders(orders)
setTradingPageLoading(false);
return mockOrders;
return orders;
}

const handleBuyCell = async (flag: 'buy' | 'sell' | 'cancelbuy' | 'cancelsell', amount: string, price: string): Promise<any> => {
await axios.post(`${SERVER_URL}/api/buy-cell`, {
flag,
password,
index: accountInfo?.addresses.indexOf(currentAddress),
tick: parseInt(tick) + 10,
tick: parseInt(tick) + EXPECTEDTICKGAP,
currentToken: currentToken.value,
amount,
price,
Expand Down
54 changes: 31 additions & 23 deletions app/client/src/pages/Trading/Trading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,41 @@ import TokenSelect from "../../components/dashboard/select/TokenSelect";
import { useEffect, useState } from "react";
import { useAuth } from "../../contexts/AuthContext";
import TradingAside from "./TradingAside";
import { TokenOption } from "../../components/commons/Select";

const tabs = ['Bids', 'Asks']

const Trading = () => {
const { fetchTradingInfoPage, tradingPageLoading, orders, tokens } = useAuth();
const { fetchTradingInfoPage, tradingPageLoading, orders, tokens, setCurrentToken, currentToken } = useAuth();

const [activeTab, setActiveTab] = useState<string>('Bids');

const options = tokens.map((token) => {
const item = assetsItems.find((k) => k.name == token) || assetsItems[0]
return ({
label: item.icon,
value: token,
const options: TokenOption[] = tokens
.map((token) => {
if (token !== "QU") {
const item = assetsItems.find((k) => k.name === token) || assetsItems[0];
return {
label: item.icon,
value: token,
} as TokenOption;
}
return undefined;
})
});
// const dateOptions = [
// "04 Dec 23",
// "05 Dec 23",
// "08 Dec 23",
// "29 Dec 23",
// "26 Jan 24",
// "26 Mar 24",
// ];
.filter((option): option is TokenOption => option !== undefined);

useEffect(() => {
async function init() {
const orders = await fetchTradingInfoPage();
console.log(orders, 'fffffffff')
}
init();
if (currentToken.value !== 'QU') {
init();
}
}, [currentToken])

useEffect(() => {
if (currentToken.value == 'QU') {
setCurrentToken(options[0])
}
}, [])

return (
Expand All @@ -55,11 +60,14 @@ const Trading = () => {
/>

<div className="space-y-2">
<TokenSelect
options={options}
showSelectDescription
hideTokenValue
/>
{
Array.isArray(options) && options.length > 0 &&
<TokenSelect
options={options}
showSelectDescription
hideTokenValue
/>
}

<div className="grid grid-cols-[70%_30%] gap-2">
<div className="flex flex-col gap-2">
Expand Down Expand Up @@ -160,7 +168,7 @@ const Trading = () => {
}
</Section>
</div>
<TradingAside />
<TradingAside options={options} />
</div>
</div>
</MainContent>
Expand Down
41 changes: 22 additions & 19 deletions app/client/src/pages/Trading/TradingAside.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import Button from "../../components/commons/Button";
import Input from "../../components/commons/Input";
import Section from "../../components/commons/Section";
import { assetsItems } from "../../utils/constants";
import { useState } from "react";
import TokenSelect from "../../components/dashboard/select/TokenSelect";
import { useAuth } from "../../contexts/AuthContext";
import { toast } from "react-toastify";
import TxModal from "../../components/dashboard/modal/TxModal";
import { TokenOption } from "../../components/commons/Select";

const TradingAside = () => {
const { handleBuyCell, txStatus, tokens } = useAuth();
const TradingAside = ({ options }: { options: TokenOption[] }) => {
const { handleBuyCell, txStatus, setTxStatus } = useAuth();

const [command, setCommand] = useState<'buy' | 'sell' | 'cancelbuy' | 'cancelsell'>();
const [quantity, setQuantity] = useState<string>();
const [price, setPrice] = useState<string>();

Expand All @@ -22,26 +23,28 @@ const TradingAside = () => {
setPrice(e.target.value);
}

const _handleBuyCell = (flag: 'buy' | 'sell' | 'cancelbuy' | 'cancelsell',) => {
const handleTx = () => {
if (!quantity || !price || !command) {
toast.error('Invalid command.');
return;
}
handleBuyCell(command, quantity, price);
}

const handleAction = (command: 'buy' | 'sell' | 'cancelbuy' | 'cancelsell') => {
if (!quantity || !price) {
toast.error('Input valid quantity or price.')
return
toast.error('Input valid quantity or price.');
return;
}
handleBuyCell(flag, quantity, price)
setTxStatus('confirm');
setCommand(command);
}

const options = tokens.map((token) => {
const item = assetsItems.find((k) => k.name == token) || assetsItems[0]
return ({
label: item.icon,
value: token,
})
});

return (
<Section>
{txStatus != "" &&
<TxModal />
<TxModal handleTx={handleTx} quantity={quantity} price={price} />
}
{/* <Text size="xs" weight="medium" className="text-celestialBlue">
SELECT A STRIKE PRICE
Expand All @@ -66,18 +69,18 @@ const TradingAside = () => {
<Input inputId="price" label="Price" placeholder="0" value={price} onChange={handleChangePrice} gapVariant="xs" />
</div>
<div className="flex gap-2.5">
<Button variant="primary" font="regular" onClick={() => _handleBuyCell('buy')}>
<Button variant="primary" font="regular" onClick={() => handleAction('buy')}>
Buy
</Button>
<Button variant="primary" font="regular" onClick={() => _handleBuyCell('sell')}>
<Button variant="primary" font="regular" onClick={() => handleAction('sell')}>
Sell
</Button>
</div>
<div className="flex gap-2.5">
<Button variant="primary" font="regular" onClick={() => _handleBuyCell('cancelbuy')}>
<Button variant="primary" font="regular" onClick={() => handleAction('cancelbuy')}>
Cancel Buy
</Button>
<Button variant="primary" font="regular" onClick={() => _handleBuyCell('cancelsell')}>
<Button variant="primary" font="regular" onClick={() => handleAction('cancelsell')}>
Cancel Sell
</Button>
</div>
Expand Down
4 changes: 3 additions & 1 deletion app/client/src/utils/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { SettingsItems } from "../enums/SettingsItems";
import { AssetItemProps, ModeProps, SidebarItemProps, SummaryItemProps } from "./interfaces";

const EXPECTEDTICKGAP = 5;

const autoLockTimes = [{
label: '1 minute',
value: '1m'
Expand Down Expand Up @@ -193,4 +195,4 @@ const currencies = [{ label: "US Dollar", value: "USDT" }]

const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000";

export { sideBarItems, summaryItems, assetsItems, summaryAccountItems, marketOptions, SERVER_URL, MODES, settingsSidebarItems, currencies, autoLockTimes };
export { sideBarItems, summaryItems, assetsItems, summaryAccountItems, marketOptions, SERVER_URL, MODES, settingsSidebarItems, currencies, autoLockTimes, EXPECTEDTICKGAP };

0 comments on commit 17e1d9c

Please sign in to comment.