mirror of
https://github.com/Qortal/q-trade.git
synced 2025-06-19 04:31:21 +00:00
911 lines
28 KiB
TypeScript
911 lines
28 KiB
TypeScript
import React, {
|
|
useCallback,
|
|
useContext,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import { AgGridReact } from "ag-grid-react";
|
|
import {
|
|
ColDef,
|
|
RowClassParams,
|
|
RowStyle,
|
|
SizeColumnsToContentStrategy,
|
|
} from "ag-grid-community";
|
|
import "ag-grid-community/styles/ag-grid.css";
|
|
import "ag-grid-community/styles/ag-theme-alpine.css";
|
|
import axios from "axios";
|
|
import { sendRequestToExtension } from "../../App";
|
|
import {
|
|
Alert,
|
|
Box,
|
|
Button,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
Snackbar,
|
|
SnackbarCloseReason,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import gameContext from "../../contexts/gameContext";
|
|
import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
|
|
import { useModal } from "../common/useModal";
|
|
import FileSaver from "file-saver";
|
|
import { Spacer } from "../common/Spacer";
|
|
import { Hourglass } from "react-loader-spinner";
|
|
import ErrorIcon from "@mui/icons-material/Error";
|
|
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
|
import { CountdownCircleTimer } from "react-countdown-circle-timer";
|
|
import { BuyContainer } from "./Table-styles";
|
|
|
|
export const baseLocalHost = window.location.host
|
|
// export const baseLocalHost = "127.0.0.1:12391";
|
|
|
|
interface RowData {
|
|
amountQORT: number;
|
|
priceUSD: number;
|
|
totalUSD: number;
|
|
seller: string;
|
|
}
|
|
|
|
export const saveFileToDisk = async (data) => {
|
|
const dataString = JSON.stringify(data);
|
|
const blob = new Blob([dataString], { type: "application/json" });
|
|
const fileName = "traderecord_" + Date.now() + "_" + ".json";
|
|
|
|
await FileSaver.saveAs(blob, fileName);
|
|
};
|
|
|
|
export const autoSizeStrategy: SizeColumnsToContentStrategy = {
|
|
type: "fitCellContents",
|
|
};
|
|
|
|
export const TradeOffers: React.FC<any> = ({ foreignCoinBalance }: any) => {
|
|
const [offers, setOffers] = useState<any[]>([]);
|
|
const [qortalNames, setQortalNames] = useState({});
|
|
const {
|
|
fetchOngoingTransactions,
|
|
onGoingTrades,
|
|
updateTransactionInDB,
|
|
isUsingGateway,
|
|
getCoinLabel,
|
|
selectedCoin,
|
|
} = useContext(gameContext);
|
|
const listOfOngoingTradesAts = useMemo(() => {
|
|
return (
|
|
onGoingTrades
|
|
?.filter((item) => item?.status !== "trade-failed")
|
|
?.map((trade) => trade?.qortalAtAddress) || []
|
|
);
|
|
}, [onGoingTrades]);
|
|
const {
|
|
isShow: isShowInfo,
|
|
onCancel: onCancelInfo,
|
|
onOk: onOkInfo,
|
|
show: showInfo,
|
|
message: messageInfo,
|
|
} = useModal();
|
|
|
|
const offersWithoutOngoing = useMemo(() => {
|
|
return offers.filter(
|
|
(item) => !listOfOngoingTradesAts.includes(item.qortalAtAddress)
|
|
);
|
|
}, [listOfOngoingTradesAts, offers]);
|
|
const initiatedFetchPresence = useRef(false);
|
|
const initiatedFetchPresenceSocket = useRef(false);
|
|
const [isShowBuyInProgress, setIsShowBuyInProgress] = useState(null);
|
|
const socketRef = useRef(null);
|
|
const socketPresenceRef = useRef(null);
|
|
const [selectedOffer, setSelectedOffer] = useState<any>(null);
|
|
const [selectedOffers, setSelectedOffers] = useState<any>([]);
|
|
const [record, setRecord] = useState(null);
|
|
const tradePresenceTxns = useRef<any[]>([]);
|
|
const offeringTrades = useRef<any[]>([]);
|
|
const blockedTradesList = useRef([]);
|
|
const gridRef = useRef<any>(null);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [info, setInfo] = useState<any>(null);
|
|
const BuyButton = () => {
|
|
return (
|
|
<button
|
|
onClick={buyOrder}
|
|
style={{
|
|
borderRadius: "8px",
|
|
width: "74px",
|
|
height: "30px",
|
|
background: "#4D7345",
|
|
color: "white",
|
|
cursor: "pointer",
|
|
border: "1px solid #375232",
|
|
boxShadow: "0px 2.77px 2.21px 0px #00000005",
|
|
}}
|
|
>
|
|
BUY
|
|
</button>
|
|
);
|
|
};
|
|
|
|
const defaultColDef = {
|
|
resizable: true, // Make columns resizable by default
|
|
sortable: true, // Make columns sortable by default
|
|
suppressMovable: true, // Prevent columns from being movable
|
|
};
|
|
|
|
const getName = async (address) => {
|
|
try {
|
|
const response = await fetch("/names/address/" + address);
|
|
const nameData = await response.json();
|
|
if (nameData?.length > 0) {
|
|
setQortalNames((prev) => {
|
|
return {
|
|
...prev,
|
|
[address]: nameData[0].name,
|
|
};
|
|
});
|
|
} else {
|
|
setQortalNames((prev) => {
|
|
return {
|
|
...prev,
|
|
[address]: null,
|
|
};
|
|
});
|
|
}
|
|
} catch (error) {
|
|
// error
|
|
}
|
|
};
|
|
|
|
const restartTradeOffers = () => {
|
|
if (socketRef.current) {
|
|
socketRef.current.close(1000, "forced"); // Close with a custom reason
|
|
socketRef.current = null;
|
|
}
|
|
offeringTrades.current = [];
|
|
setOffers([]);
|
|
setSelectedOffer(null);
|
|
};
|
|
|
|
const restartPresence = () => {
|
|
if (socketPresenceRef.current) {
|
|
socketPresenceRef.current.close(1000, "forced"); // Close with a custom reason
|
|
socketPresenceRef.current = null;
|
|
}
|
|
};
|
|
|
|
const columnDefs: ColDef[] = useMemo(() => {
|
|
return [
|
|
{
|
|
headerCheckboxSelection: true, // Adds a checkbox in the header for selecting all rows
|
|
checkboxSelection: true, // Adds checkboxes in each row for selection
|
|
headerName: "", // You can customize the header name
|
|
width: 50, // Adjust the width as needed
|
|
pinned: "left", // Optional, to pin this column on the left
|
|
resizable: false,
|
|
},
|
|
{
|
|
headerName: "QORT AMOUNT",
|
|
field: "qortAmount",
|
|
flex: 1, // Flex makes this column responsive
|
|
minWidth: 150, // Ensure it doesn't shrink too much
|
|
resizable: true,
|
|
},
|
|
{
|
|
headerName: `${getCoinLabel()}/QORT`,
|
|
valueGetter: (params) =>
|
|
+params.data.foreignAmount / +params.data.qortAmount,
|
|
sortable: true,
|
|
sort: "asc",
|
|
flex: 1, // Flex makes this column responsive
|
|
minWidth: 150, // Ensure it doesn't shrink too much
|
|
resizable: true,
|
|
},
|
|
{
|
|
headerName: `Total ${getCoinLabel()} Value`,
|
|
field: "foreignAmount",
|
|
flex: 1, // Flex makes this column responsive
|
|
minWidth: 150, // Ensure it doesn't shrink too much
|
|
resizable: true,
|
|
},
|
|
{
|
|
headerName: "Seller",
|
|
field: "qortalCreator",
|
|
flex: 1, // Flex makes this column responsive
|
|
minWidth: 300, // Ensure it doesn't shrink too much
|
|
resizable: true,
|
|
valueGetter: (params) => {
|
|
if (params?.data?.qortalCreator) {
|
|
if (qortalNames[params?.data?.qortalCreator]) {
|
|
return qortalNames[params?.data?.qortalCreator];
|
|
} else if (qortalNames[params?.data?.qortalCreator] === undefined) {
|
|
getName(params?.data?.qortalCreator);
|
|
|
|
return params?.data?.qortalCreator;
|
|
} else {
|
|
return params?.data?.qortalCreator;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
];
|
|
}, [qortalNames]);
|
|
|
|
// const onRowClicked = (event: any) => {
|
|
// if(listOfOngoingTradesAts.includes(event.data.qortalAtAddress)) return
|
|
// setSelectedOffer(event.data)
|
|
|
|
// };
|
|
|
|
const restartTradePresenceWebSocket = () => {
|
|
restartPresence();
|
|
setTimeout(() => initTradePresenceWebSocket(true), 50);
|
|
};
|
|
|
|
const getNewBlockedTrades = async () => {
|
|
const unconfirmedTransactionsList = async () => {
|
|
const unconfirmedTransactionslUrl = `/transactions/unconfirmed?txType=MESSAGE&limit=0&reverse=true`;
|
|
|
|
var addBlockedTrades = JSON.parse(
|
|
localStorage.getItem("failedTrades") || "[]"
|
|
);
|
|
|
|
await fetch(unconfirmedTransactionslUrl)
|
|
.then((response) => {
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
data.map((item: any) => {
|
|
const unconfirmedNessageTimeDiff = Date.now() - item.timestamp;
|
|
const timeOneHour = 60 * 60 * 1000;
|
|
if (Number(unconfirmedNessageTimeDiff) > Number(timeOneHour)) {
|
|
const addBlocked = {
|
|
timestamp: item.timestamp,
|
|
recipient: item.recipient,
|
|
};
|
|
addBlockedTrades.push(addBlocked);
|
|
}
|
|
});
|
|
localStorage.setItem(
|
|
"failedTrades",
|
|
JSON.stringify(addBlockedTrades)
|
|
);
|
|
blockedTradesList.current = JSON.parse(
|
|
localStorage.getItem("failedTrades") || "[]"
|
|
);
|
|
});
|
|
};
|
|
|
|
await unconfirmedTransactionsList();
|
|
|
|
const filterUnconfirmedTransactionsList = async () => {
|
|
let cleanBlockedTrades = blockedTradesList.current.reduce(
|
|
(newArray, cut: any) => {
|
|
if (
|
|
cut &&
|
|
!newArray.some((obj: any) => obj.recipient === cut.recipient)
|
|
) {
|
|
newArray.push(cut);
|
|
}
|
|
return newArray;
|
|
},
|
|
[] as any[]
|
|
);
|
|
localStorage.setItem("failedTrades", JSON.stringify(cleanBlockedTrades));
|
|
blockedTradesList.current = JSON.parse(
|
|
localStorage.getItem("failedTrades") || "[]"
|
|
);
|
|
};
|
|
|
|
await filterUnconfirmedTransactionsList();
|
|
processOffersWithPresence();
|
|
};
|
|
|
|
const executeGetNewBlockTrades = useCallback(() => {
|
|
getNewBlockedTrades();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
subscribeToEvent("execute-get-new-block-trades", executeGetNewBlockTrades);
|
|
|
|
return () => {
|
|
unsubscribeFromEvent(
|
|
"execute-get-new-block-trades",
|
|
executeGetNewBlockTrades
|
|
);
|
|
};
|
|
}, []);
|
|
|
|
const processOffersWithPresence = () => {
|
|
if (offeringTrades.current === null) return;
|
|
async function asyncForEach(array: any, callback: any) {
|
|
for (let index = 0; index < array.length; index++) {
|
|
await callback(array[index], index, array);
|
|
}
|
|
}
|
|
|
|
const filterOffersUsingTradePresence = (offeringTrade: any) => {
|
|
return offeringTrade.tradePresenceExpiry > Date.now();
|
|
};
|
|
|
|
const startOfferPresenceMapping = async () => {
|
|
if (tradePresenceTxns.current) {
|
|
for (const tradePresence of tradePresenceTxns.current) {
|
|
const offerIndex = offeringTrades.current.findIndex(
|
|
(offeringTrade) =>
|
|
offeringTrade.qortalCreatorTradeAddress ===
|
|
tradePresence.tradeAddress
|
|
);
|
|
if (offerIndex !== -1) {
|
|
offeringTrades.current[offerIndex].tradePresenceExpiry =
|
|
tradePresence.timestamp;
|
|
}
|
|
}
|
|
}
|
|
|
|
let filteredOffers =
|
|
offeringTrades.current?.filter((offeringTrade) =>
|
|
filterOffersUsingTradePresence(offeringTrade)
|
|
) || [];
|
|
let tradesPresenceCleaned: any[] = filteredOffers;
|
|
|
|
blockedTradesList.current.forEach((item: any) => {
|
|
const toDelete = item.recipient;
|
|
tradesPresenceCleaned =
|
|
tradesPresenceCleaned?.filter((el) => {
|
|
return el.qortalCreatorTradeAddress !== toDelete;
|
|
}) || [];
|
|
});
|
|
|
|
if (tradesPresenceCleaned) {
|
|
updateGridData(tradesPresenceCleaned);
|
|
}
|
|
};
|
|
|
|
startOfferPresenceMapping();
|
|
};
|
|
|
|
const restartTradeOffersWebSocket = () => {
|
|
setTimeout(() => initTradeOffersWebSocket(true), 50);
|
|
};
|
|
|
|
const initTradePresenceWebSocket = (restarted = false) => {
|
|
if (socketPresenceRef.current) return;
|
|
let socketTimeout: any;
|
|
let socketLink;
|
|
if (isUsingGateway) {
|
|
socketLink = `wss://appnode.qortal.org/websockets/crosschain/tradepresence`;
|
|
} else {
|
|
socketLink = `${
|
|
window.location.protocol === "https:" ? "wss:" : "ws:"
|
|
}//${baseLocalHost}/websockets/crosschain/tradepresence`;
|
|
}
|
|
|
|
socketPresenceRef.current = new WebSocket(socketLink);
|
|
socketPresenceRef.current.onopen = () => {
|
|
setTimeout(pingSocket, 50);
|
|
};
|
|
socketPresenceRef.current.onmessage = (e) => {
|
|
tradePresenceTxns.current = !initiatedFetchPresenceSocket.current
|
|
? JSON.parse(e.data)
|
|
: [...tradePresenceTxns.current, ...JSON.parse(e.data)];
|
|
initiatedFetchPresenceSocket.current = true;
|
|
processOffersWithPresence();
|
|
restarted = false;
|
|
};
|
|
socketPresenceRef.current.onclose = (event) => {
|
|
clearTimeout(socketTimeout);
|
|
if (event.reason === "forced") {
|
|
return;
|
|
}
|
|
restartTradePresenceWebSocket();
|
|
};
|
|
socketPresenceRef.current.onerror = (e) => {
|
|
clearTimeout(socketTimeout);
|
|
restartTradePresenceWebSocket();
|
|
};
|
|
const pingSocket = () => {
|
|
socketPresenceRef.current.send("ping");
|
|
socketTimeout = setTimeout(pingSocket, 295000);
|
|
};
|
|
};
|
|
|
|
const initTradeOffersWebSocket = (restarted = false) => {
|
|
if (socketRef.current) return;
|
|
let socketTimeout: any;
|
|
|
|
let socketLink;
|
|
if (isUsingGateway) {
|
|
socketLink = `wss://appnode.qortal.org/websockets/crosschain/tradeoffers?foreignBlockchain=${selectedCoin}&includeHistoric=true`;
|
|
} else {
|
|
socketLink = `${
|
|
window.location.protocol === "https:" ? "wss:" : "ws:"
|
|
}//${baseLocalHost}/websockets/crosschain/tradeoffers?foreignBlockchain=${selectedCoin}&includeHistoric=true`;
|
|
}
|
|
socketRef.current = new WebSocket(socketLink);
|
|
socketRef.current.onopen = () => {
|
|
setTimeout(pingSocket, 50);
|
|
};
|
|
socketRef.current.onmessage = (e) => {
|
|
offeringTrades.current = [
|
|
...offeringTrades.current?.filter(
|
|
(coin) => coin?.foreignBlockchain === selectedCoin
|
|
),
|
|
...JSON.parse(e.data)?.filter(
|
|
(coin) => coin?.foreignBlockchain === selectedCoin
|
|
),
|
|
];
|
|
restarted = false;
|
|
processOffersWithPresence();
|
|
};
|
|
socketRef.current.onclose = (event) => {
|
|
clearTimeout(socketTimeout);
|
|
if (event.reason === "forced") {
|
|
return;
|
|
}
|
|
restartTradeOffersWebSocket();
|
|
socketRef.current = null;
|
|
};
|
|
socketRef.current.onerror = (e) => {
|
|
clearTimeout(socketTimeout);
|
|
};
|
|
const pingSocket = () => {
|
|
socketRef.current.send("ping");
|
|
socketTimeout = setTimeout(pingSocket, 295000);
|
|
};
|
|
};
|
|
|
|
useEffect(() => {
|
|
blockedTradesList.current = JSON.parse(
|
|
localStorage.getItem("failedTrades") || "[]"
|
|
);
|
|
if (!initiatedFetchPresence.current) {
|
|
initiatedFetchPresence.current = true;
|
|
initTradePresenceWebSocket();
|
|
}
|
|
getNewBlockedTrades();
|
|
const intervalBlockTrades = setInterval(() => {
|
|
initiatedFetchPresenceSocket.current = false;
|
|
restartPresence();
|
|
initTradePresenceWebSocket();
|
|
getNewBlockedTrades();
|
|
}, 150000);
|
|
|
|
return () => {
|
|
clearInterval(intervalBlockTrades);
|
|
};
|
|
}, [isUsingGateway]);
|
|
|
|
useEffect(() => {
|
|
if (selectedCoin === null) return;
|
|
restartTradeOffers();
|
|
setTimeout(() => {
|
|
initTradeOffersWebSocket();
|
|
}, 500);
|
|
return () => {
|
|
if (socketRef.current) {
|
|
socketRef.current.close(1000, "forced");
|
|
}
|
|
};
|
|
}, [isUsingGateway, selectedCoin]);
|
|
|
|
const selectedTotalLTC = useMemo(() => {
|
|
return selectedOffers.reduce((acc: number, curr: any) => {
|
|
return acc + (+curr.foreignAmount || 0); // Ensure qortAmount is defined
|
|
}, 0);
|
|
}, [selectedOffers]);
|
|
|
|
const buyOrder = async () => {
|
|
try {
|
|
if(+foreignCoinBalance < +selectedTotalLTC.toFixed(4)){
|
|
setOpen(true)
|
|
setInfo({
|
|
type: 'error',
|
|
message: `You don't have enough ${getCoinLabel()} or your balance was not retrieved`
|
|
})
|
|
return
|
|
}
|
|
|
|
if (selectedOffers?.length < 1) return;
|
|
|
|
setIsShowBuyInProgress({ status: "buying" });
|
|
|
|
// setOpen(true)
|
|
// setInfo({
|
|
// type: 'info',
|
|
// message: "Attempting to submit buy order. Please wait..."
|
|
// })
|
|
const listOfATs = selectedOffers;
|
|
const response = await qortalRequestWithTimeout(
|
|
{
|
|
action: "CREATE_TRADE_BUY_ORDER",
|
|
crosschainAtInfo: listOfATs,
|
|
foreignBlockchain: selectedCoin,
|
|
},
|
|
900000
|
|
);
|
|
|
|
if (response?.error) {
|
|
setIsShowBuyInProgress({
|
|
status: "error",
|
|
message: response?.error || "Failed to submit trade order.",
|
|
});
|
|
// setOpen(true)
|
|
// setInfo({
|
|
// type: 'error',
|
|
// message: response?.error || "Failed to submit trade order."
|
|
// })
|
|
return;
|
|
}
|
|
if (response?.extra?.atAddresses) {
|
|
setIsShowBuyInProgress({ status: "success" });
|
|
setSelectedOffers([]);
|
|
const transactionData = {
|
|
qortalAtAddresses: response?.extra?.atAddresses,
|
|
qortAddress: response?.extra?.senderAddress,
|
|
node: response?.extra?.node,
|
|
status: response?.extra?.status
|
|
? response?.extra?.status
|
|
: response.callResponse === true
|
|
? "trade-ongoing"
|
|
: "trade-failed",
|
|
encryptedMessageToBase58: response?.encryptedMessageToBase58,
|
|
chatSignature: response?.chatSignature,
|
|
sender: response?.extra?.senderAddress,
|
|
senderPublicKey: response?.extra?.senderPublicKey,
|
|
reference: response?.callResponse?.reference,
|
|
};
|
|
|
|
// Update transactions in IndexedDB
|
|
const result = await updateTransactionInDB(transactionData);
|
|
setOpen(true);
|
|
setInfo({
|
|
type: "success",
|
|
message: "Submitted Order",
|
|
});
|
|
fetchOngoingTransactions();
|
|
if (isUsingGateway) {
|
|
setRecord(transactionData);
|
|
await showInfo({
|
|
message: `Keep a record of your order in case your trade gets stuck`,
|
|
});
|
|
}
|
|
}
|
|
} catch (error) {
|
|
setIsShowBuyInProgress({
|
|
status: "error",
|
|
message:
|
|
error?.error || error?.message || "Failed to submit trade order.",
|
|
});
|
|
// setOpen(true)
|
|
// setInfo({
|
|
// type: 'error',
|
|
// message: error?.error || error?.message || "Failed to submit trade order."
|
|
// })
|
|
// console.error(error)
|
|
}
|
|
};
|
|
|
|
const getRowStyle = (
|
|
params: RowClassParams<any, any>
|
|
): RowStyle | undefined => {
|
|
if (listOfOngoingTradesAts.includes(params.data.qortalAtAddress)) {
|
|
return { background: "#D9D9D91A" };
|
|
}
|
|
if (params.data.qortalAtAddress === selectedOffer?.qortalAtAddress) {
|
|
return { background: "#6D94F533" };
|
|
}
|
|
return undefined;
|
|
};
|
|
// const onGridReady = (params) => {
|
|
// const allColumnIds = params.columnApi.getAllColumns().map(col => col.getColId());
|
|
// params.columnApi.autoSizeColumns(allColumnIds, false);
|
|
// };
|
|
|
|
const onSelectionChanged = (event: any) => {
|
|
const selectedRows = event.api.getSelectedRows();
|
|
|
|
setSelectedOffers([...selectedRows]); // Set all selected rows
|
|
};
|
|
|
|
const onRowClicked = (event: any) => {
|
|
if (listOfOngoingTradesAts.includes(event.data.qortalAtAddress)) return;
|
|
const selectedRows = gridRef.current?.api.getSelectedRows();
|
|
setSelectedOffers([...selectedRows]); // Always spread the array to ensure state updates correctly
|
|
};
|
|
|
|
const updateGridData = (newData: any) => {
|
|
if (gridRef.current) {
|
|
setOffers(newData);
|
|
}
|
|
};
|
|
|
|
const getRowId = useCallback(function (params: any) {
|
|
return String(params.data.qortalAtAddress);
|
|
}, []);
|
|
|
|
const selectedTotalQORT = useMemo(() => {
|
|
return selectedOffers.reduce((acc: number, curr: any) => {
|
|
return acc + (+curr.qortAmount || 0); // Ensure qortAmount is defined
|
|
}, 0);
|
|
}, [selectedOffers]);
|
|
|
|
const onGridReady = useCallback((params: any) => {
|
|
params.api.sizeColumnsToFit(); // Adjust columns to fit the grid width
|
|
const allColumnIds = params.columnApi
|
|
.getAllColumns()
|
|
.map((col: any) => col.getColId());
|
|
params.columnApi.autoSizeColumns(allColumnIds); // Automatically adjust the width to fit content
|
|
}, []);
|
|
|
|
const handleClose = (
|
|
event?: React.SyntheticEvent | Event,
|
|
reason?: SnackbarCloseReason
|
|
) => {
|
|
if (reason === "clickaway") {
|
|
return;
|
|
}
|
|
|
|
setOpen(false);
|
|
setInfo(null);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<div
|
|
className="ag-theme-alpine-dark"
|
|
style={{ height: 400, width: "100%" }}
|
|
>
|
|
<AgGridReact
|
|
ref={gridRef}
|
|
columnDefs={columnDefs}
|
|
defaultColDef={defaultColDef}
|
|
rowData={offersWithoutOngoing}
|
|
onRowClicked={onRowClicked}
|
|
onSelectionChanged={onSelectionChanged}
|
|
getRowStyle={getRowStyle}
|
|
autoSizeStrategy={autoSizeStrategy}
|
|
rowSelection={selectedCoin === "PIRATECHAIN" ? "single" : "multiple"} // Enable multi-select
|
|
rowMultiSelectWithClick={true}
|
|
suppressHorizontalScroll={false} // Allow horizontal scroll on mobile if needed
|
|
suppressCellFocus={true} // Prevents cells from stealing focus in mobile
|
|
// pagination={true}
|
|
// paginationPageSize={10}
|
|
onGridReady={onGridReady}
|
|
// domLayout='autoHeight'
|
|
getRowId={(params) => params.data.qortalAtAddress} // Ensure rows have unique IDs
|
|
/>
|
|
{/* {selectedOffer && (
|
|
<Button onClick={buyOrder}>Buy</Button>
|
|
|
|
)} */}
|
|
</div>
|
|
<div style={{
|
|
height: '120px'
|
|
}} />
|
|
<BuyContainer>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
gap: '5px',
|
|
flexDirection: 'column',
|
|
width: '100%'
|
|
}}>
|
|
<Typography sx={{
|
|
fontSize: '16px',
|
|
color: 'white',
|
|
width: 'calc(100% - 75px)'
|
|
}}>{selectedTotalQORT?.toFixed(3)} QORT</Typography>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
gap: '20px',
|
|
alignItems: 'center',
|
|
width: 'calc(100% - 75px)'
|
|
}}>
|
|
<Typography sx={{
|
|
fontSize: '16px',
|
|
color: selectedTotalLTC > foreignCoinBalance ? 'red' : 'white',
|
|
}}><span>{selectedTotalLTC?.toFixed(4)}</span> <span style={{
|
|
marginLeft: 'auto'
|
|
}}>{`${getCoinLabel()} `}</span></Typography>
|
|
|
|
|
|
</Box>
|
|
<Typography sx={{
|
|
fontSize: '16px',
|
|
color: 'white',
|
|
|
|
}}><span>{foreignCoinBalance?.toFixed(4)}</span> <span style={{
|
|
marginLeft: 'auto'
|
|
}}>{`${getCoinLabel()} `} balance</span></Typography>
|
|
</Box>
|
|
{BuyButton()}
|
|
</BuyContainer>
|
|
<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} open={open} onClose={handleClose}>
|
|
<Alert
|
|
onClose={handleClose}
|
|
severity={info?.type}
|
|
variant="filled"
|
|
sx={{ width: "100%" }}
|
|
>
|
|
{info?.message}
|
|
</Alert>
|
|
</Snackbar>
|
|
{isShowInfo && (
|
|
<Dialog
|
|
open={isShowInfo}
|
|
aria-labelledby="alert-dialog-title"
|
|
aria-describedby="alert-dialog-description"
|
|
>
|
|
<DialogTitle id="alert-dialog-title">{"Download record"}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText
|
|
id="alert-dialog-description"
|
|
sx={{
|
|
color: "white",
|
|
}}
|
|
>
|
|
{messageInfo.message}
|
|
</DialogContentText>
|
|
<Button
|
|
onClick={async () => {
|
|
try {
|
|
const fileName = "traderecord_" + Date.now() + "_" + ".json";
|
|
const dataString = JSON.stringify(record);
|
|
const blob = new Blob([dataString], {
|
|
type: "application/json",
|
|
});
|
|
await qortalRequest({
|
|
action: "SAVE_FILE",
|
|
filename: fileName,
|
|
blob,
|
|
});
|
|
} catch (error) {}
|
|
}}
|
|
>
|
|
Save Record
|
|
</Button>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button variant="contained" onClick={onOkInfo} autoFocus>
|
|
Close
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
)}
|
|
{isShowBuyInProgress && (
|
|
<Dialog
|
|
open={isShowBuyInProgress}
|
|
aria-labelledby="alert-dialog-title"
|
|
aria-describedby="alert-dialog-description"
|
|
PaperProps={{
|
|
style: {
|
|
backgroundColor: "rgb(39, 40, 44)",
|
|
background: "rgb(39, 40, 44)",
|
|
},
|
|
}}
|
|
>
|
|
<DialogContent
|
|
sx={{
|
|
width: "450px",
|
|
height: "450px",
|
|
maxHeight: "calc(90vh - 55px)",
|
|
maxWidth: "90%",
|
|
background: "rgb(39, 40, 44)",
|
|
overflow: "auto",
|
|
}}
|
|
>
|
|
{isShowBuyInProgress?.status === "error" && (
|
|
<Box>
|
|
<Typography>
|
|
<ErrorIcon
|
|
sx={{
|
|
color: "red",
|
|
}}
|
|
/>
|
|
{` Failed to submit buy order.`}
|
|
</Typography>
|
|
<Spacer height="20px" />
|
|
<Typography>{isShowBuyInProgress?.message}</Typography>
|
|
</Box>
|
|
)}
|
|
{isShowBuyInProgress?.status === "success" && (
|
|
<Box>
|
|
<Typography>
|
|
<CheckCircleIcon
|
|
sx={{
|
|
color: "green",
|
|
}}
|
|
/>
|
|
{` Successfully submitted order.`}
|
|
</Typography>
|
|
<Spacer height="20px" />
|
|
<Typography>
|
|
You can see the progress of your
|
|
order in the "Pending" table.
|
|
</Typography>
|
|
<Spacer height="20px" />
|
|
<Typography>
|
|
Note: Submission of an order does not necessarily mean that
|
|
your submission will be the one completing the order. Another
|
|
account may have submitted it before you.
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
{isShowBuyInProgress?.status === "buying" && (
|
|
<Box>
|
|
<Typography>
|
|
<Hourglass
|
|
visible={true}
|
|
height="25"
|
|
width="25"
|
|
ariaLabel="hourglass-loading"
|
|
wrapperStyle={{}}
|
|
wrapperClass=""
|
|
colors={["#306cce", "#72a1ed"]}
|
|
/>
|
|
{` Attempting to submit buy order`}
|
|
</Typography>
|
|
<Spacer height="20px" />
|
|
<Typography>
|
|
Please do not leave this application until there is a
|
|
response. Please wait!
|
|
</Typography>
|
|
<Spacer height="20px" />
|
|
{isUsingGateway && (
|
|
<>
|
|
<Typography>
|
|
Using gateway: might take up to 3 minutes to submit the buy order.
|
|
</Typography>
|
|
<Spacer height="20px" />
|
|
<Box sx={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
justifyContent: 'center'
|
|
}}>
|
|
<CountdownCircleTimer
|
|
isPlaying
|
|
duration={180}
|
|
colors={["#004777", "#F7B801", "#A30000", "#A30000"]}
|
|
colorsTime={[7, 5, 2, 0]}
|
|
onComplete={() => {
|
|
//nothing
|
|
}}
|
|
size={60}
|
|
strokeWidth={4}
|
|
>
|
|
{({ remainingTime }) => <Typography>{remainingTime}</Typography>}
|
|
</CountdownCircleTimer>
|
|
</Box>
|
|
</>
|
|
)}
|
|
</Box>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions
|
|
sx={{
|
|
background: "rgb(39, 40, 44)",
|
|
}}
|
|
>
|
|
<Button
|
|
disabled={isShowBuyInProgress?.status === "buying"}
|
|
variant="outlined"
|
|
onClick={() => {
|
|
setIsShowBuyInProgress(null);
|
|
}}
|
|
autoFocus
|
|
>
|
|
Close
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|