Merge pull request #1 from RealWorld777/staging

Update Socket URL
serendipity-seeker · May 24, 2024 · a5737c8 · a5737c8
2 parents c4d0d3d + dda49cb
commit a5737c8
Show file tree

Hide file tree

Showing 57 changed files with 3,618 additions and 908 deletions.
diff --git a/app/client/src/components/commons/Input.tsx b/app/client/src/components/commons/Input.tsx
@@ -44,7 +44,7 @@ const Input = ({
             outerContainer: `flex flex-col ${gaps[gapVariant]}`,
         },
         modal: {
-            input: `${backgrounds["transparent"]} max-w-xl h-10 p-5 outline-none rounded-2xl border-white/60 border text-sm font-semibold font-Inter`,
+            input: `${backgrounds["transparent"]} h-10 p-5 outline-none rounded-2xl border-white/60 border text-sm font-semibold font-Inter`,
             label: "text-lg",
             outerContainer: `flex flex-col ${gaps["strech"]}`,
         },

diff --git a/app/client/src/components/dashboard/AssetItem.tsx b/app/client/src/components/dashboard/AssetItem.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { assetsItems } from '../../utils/constants';
 import { useAuth } from '../../contexts/AuthContext';
 
-const AssetItem: React.FC<{ token: string }> = ({ token }) => {
+const AssetItem: React.FC<{ token: string, percent: number }> = ({ token, percent }) => {
     const { tokenBalances, currentAddress } = useAuth();
-    const item = assetsItems.find((k) => k.name == token) || assetsItems[0]
+    const item = assetsItems.find((k) => k.name == token) || assetsItems[0];
     return (
         <div className="flex flex-col items-center justify-between pb-3 text-white">
             <div className="flex items-center justify-between w-full">
@@ -24,11 +24,11 @@ const AssetItem: React.FC<{ token: string }> = ({ token }) => {
                 <div className="w-full bg-[#353535] rounded-full h-2">
                     <div
                         className={`${item.colorClassName} h-2 rounded-full`}
-                        style={{ width: `${item.percentage}%` }}
+                        style={{ width: `${percent}%` }}
                     ></div>
                 </div>
                 <div className="ml-4">
-                    <span className="text-sm font-semibold">{item.percentage.toFixed(2)}%</span>
+                    <span className="text-sm font-semibold">{percent.toFixed(2)}%</span>
                 </div>
             </div>
         </div>

diff --git a/app/client/src/components/dashboard/Assets.tsx b/app/client/src/components/dashboard/Assets.tsx
@@ -1,14 +1,32 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import AssetItem from "./AssetItem";
 import { useAuth } from "../../contexts/AuthContext";
 
 const Assets: React.FC = () => {
-    const { tokens } = useAuth();
+    const { tokens, tokenBalances, tokenPrices, currentAddress } = useAuth();
+    const [totalAmount, setTotalAmount] = useState<number>(0);
+    useEffect(() => {
+        let _totalAmount = 0;
+        if (tokens && tokenBalances && currentAddress && tokenPrices) {
+            tokens.forEach(token => {
+                let amount = 0;
+                if (tokenPrices[token][0] !== 0 && tokenBalances[token] && tokenPrices[token]) {
+                    amount = tokenBalances[token][currentAddress] * tokenPrices[token][1] / tokenPrices[token][0];
+                }
+                _totalAmount += amount;
+            })
+        }
+        setTotalAmount(_totalAmount);
+    }, [tokens, tokenBalances, tokenPrices, currentAddress])
 
     return (
         <div className="rounded-lg bg-dark px-6 py-8 flex flex-col text-center">
             {tokens.map((token, idx) => {
-                return <AssetItem token={token} key={idx} />;
+                let percent = 0;
+                if (totalAmount !== 0 && tokenBalances[token]) {
+                    percent = tokenBalances[token][currentAddress] * 100 / totalAmount
+                }
+                return <AssetItem token={token} key={idx} percent={percent} />;
             })}
         </div>
     );

diff --git a/app/client/src/components/dashboard/modal/TokenModal.tsx b/app/client/src/components/dashboard/modal/TokenModal.tsx
@@ -103,7 +103,7 @@ const TokenModal: React.FC<TokenModalProps> = ({ onClose, token }) => {
     return (
         <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="relative w-full max-w-[1024px] h-auto bg-dark p-8 rounded-2xl shadow-lg">
                 <button
                     className="absolute top-0 right-0 p-2 text-gray-600 hover:text-gray-800"
                     onClick={() => handleCloseModal()}

diff --git a/app/client/src/components/dashboard/modal/TxFormsModal.tsx b/app/client/src/components/dashboard/modal/TxFormsModal.tsx
@@ -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">
@@ -11,6 +11,7 @@ const TxFormsModal = () => {
                     Sending...
                     <br />
                     transactionId: {txId}<br />
+                    currentTick: {tick}<br />
                     expectedTick: {expectedTick}
                 </div>
             }

diff --git a/app/client/src/components/dashboard/modal/TxModal.tsx b/app/client/src/components/dashboard/modal/TxModal.tsx
@@ -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 = () => {
@@ -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"
@@ -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 >
     );
 };
 

diff --git a/app/client/src/components/layout/Navbar.tsx b/app/client/src/components/layout/Navbar.tsx
@@ -4,7 +4,7 @@ import { handleCopy } from "../../utils/helper";
 import { Text } from "../commons";
 
 const Navbar = () => {
-    const { accountInfo, currentAddress, setCurrentAddress } = useAuth();
+    const { accountInfo, currentAddress, setCurrentAddress, tokenBalances } = useAuth();
     const [isOpen, setIsOpen] = useState(false);
 
     const handleSelectedAddress = (address: string) => {
@@ -21,20 +21,23 @@ const Navbar = () => {
 
                 <div className="relative flex justify-between  items-center flex-wrap gap-1">
                     <div className="flex gap-2.5 items-center w-max">
-                        <Text
-                            weight="bold"
-                            size="sm"
-                            className="uppercase cursor-pointer"
-                            onClick={() => handleCopy(currentAddress)}
-                        >
-                            {currentAddress}
-                        </Text>
-                        <img
-                            src="assets/images/ui/chevron-down.svg"
-                            alt="Icon"
-                            className="cursor-pointer"
-                            onClick={() => setIsOpen(!isOpen)}
-                        />
+                        <div className="flex items-center gap-2">
+                            <Text
+                                weight="bold"
+                                size="sm"
+                                className="uppercase cursor-pointer"
+                                onClick={() => handleCopy(currentAddress)}
+                            >
+                                {currentAddress}
+                            </Text>
+                            <img
+                                src="assets/images/ui/chevron-down.svg"
+                                alt="Icon"
+                                className="cursor-pointer"
+                                onClick={() => setIsOpen(!isOpen)}
+                            />
+                            <span>{tokenBalances['QU'] ? tokenBalances['QU'][currentAddress] : 0}</span>
+                        </div>
 
                         {isOpen && (
                             <div className="absolute top-8 w-max h-20 bg-[#151B1E] pl-1 pr-4 overflow-auto overflow-x-hidden scrolling">

diff --git a/app/client/src/contexts/AuthContext.tsx b/app/client/src/contexts/AuthContext.tsx
@@ -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 {
@@ -17,11 +17,11 @@ import {
     ModeProps,
     OrderInterface,
     RichListInterface,
+    TokenPriceInterface,
 } from "../utils/interfaces";
 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;
@@ -47,6 +47,7 @@ interface AuthContextType {
     txStatus: string;
     txId: string;
     expectedTick: number;
+    tokenPrices: TokenPriceInterface;
     setTxStatus: Dispatch<SetStateAction<string>>;
     setCurrentToken: Dispatch<SetStateAction<TokenOption>>;
     fetchTradingInfoPage: () => Promise<void>;
@@ -90,6 +91,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
     const [activeTabIdx, setActiveTabIdx] = useState(0);
     const [accountInfo, setAccountInfo] = useState<AccountInfoInterface>();
     const [totalBalance, setTotalBalance] = useState<string>('0');
+    const [tokenPrices, setTokenprices] = useState<TokenPriceInterface>({});
     // const [totalBalance, setTotalBalance] = useState<string>('0');
 
     const [tick, setTick] = useState("0");
@@ -276,6 +278,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
                     });
             });
             setMarketcap(data.marketcap);
+            setTokenprices({ ...data.tokenPrices, 'QU': [1, 1] });
             setTokens(["QU", ...(data?.tokens || [])]);
             setRichlist(data.richlist);
         } else {
@@ -284,26 +287,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,
@@ -455,6 +458,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
                 txStatus,
                 txId,
                 expectedTick,
+                tokenPrices,
                 setTxStatus,
                 fetchTradingInfoPage,
                 setCurrentToken,

diff --git a/app/client/src/pages/Accounts/AccountGrid.tsx b/app/client/src/pages/Accounts/AccountGrid.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useAuth } from '../../contexts/AuthContext';
 
 type AccountGridProps = {
     data: {
@@ -8,23 +9,42 @@ type AccountGridProps = {
     currentPage: number
 }
 
-const AccountGrid: React.FC<AccountGridProps> = ({data}) => {
+const AccountGrid: React.FC<AccountGridProps> = ({ data }) => {
+    console.log(data)
+    const { tokenBalances, tokens, accountInfo } = useAuth();
     return (
-        <div className='space-y-6'>
-            <div className='w-full grid grid-cols-[1fr_minmax(100px,auto)]'>
-                <p className="font-medium font-Inter text-sm text-dark-gray mr-auto">Address</p>
-                <p className="font-medium font-Inter text-sm text-dark-gray text-center">Balance</p>
-            </div>
-
-            <div className='space-y-5'>
-                {data.map(({address, balance}, index) => {
-                    return (
-                        <div key={index} className='w-full grid grid-cols-[1fr_minmax(100px,auto)]'>
-                            <p className="font-semibold font-Inter text-base mr-auto">{address}</p>
-                            <p className="font-semibold font-Inter text-base text-center">{balance}</p>
-                        </div>
-                    )
-                })}
+        <div className="flex flex-col">
+            <div className="-m-1.5 overflow-x-auto">
+                <div className="p-1.5 min-w-full inline-block align-middle">
+                    <div className="overflow-hidden">
+                        <table className="min-w-full divide-y divide-gray-200 dark:divide-neutral-700">
+                            <thead>
+                                <tr>
+                                    <th scope="col" className="px-1 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Address</th>
+                                    {
+                                        tokens.map((token) => {
+                                            return <th scope="col" className="px-1 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">{token}</th>
+                                        })
+                                    }
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-200 dark:divide-neutral-700 font-Montserrat">
+                                {accountInfo?.addresses.map((address, idx) => {
+                                    if (address != "")
+                                        return <tr key={idx}>
+                                            <td className="px-1 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-neutral-200">{address}</td>
+                                            {
+                                                tokens.map((token) => {
+                                                    return <td className="px-1 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-neutral-200 font-mono">{tokenBalances[token] ? (tokenBalances[token][address] || 0) : 0}</td>
+                                                })
+                                            }
+                                        </tr>
+                                })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     );

diff --git a/app/client/src/pages/Activity/ActivityTable.tsx b/app/client/src/pages/Activity/ActivityTable.tsx
@@ -47,12 +47,12 @@ const ActivityTable = () => {
                                         </tr>
                                     </thead>
                                     <tbody className="divide-y divide-gray-200 dark:divide-neutral-700 font-mono">
-                                        {
+                                        {history && history.length > 0 &&
                                             history.map((item, idx) => {
                                                 return <tr key={idx}>
-                                                    <td className="px-1 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-neutral-200">{item[1].slice(0, 10)}...</td>
+                                                    <td className="px-1 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-neutral-200">{item[1]}</td>
                                                     <td className="px-1 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-neutral-200 font-mono">{item[0]}</td>
-                                                    <td className="px-1 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-neutral-200">{item[2].slice(0, 10)}...</td>
+                                                    <td className="px-1 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-neutral-200">{item[2]}</td>
                                                     <td className="px-1 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-neutral-200">{item[3]}</td>
                                                     {/* <td className="px-1 py-4 whitespace-nowrap text-end text-sm font-medium">
                                                         <button type="button" className="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-400 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-400 dark:hover:text-blue-400">Select</button>