Merge pull request Qsilver97#77 from Qsilver97/staging

Staging

app/client/src/components/commons/Select.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 
-export interface SelectOption {
+export interface TokenOption {
     value: string | boolean;
     label: string;
 }
 
 interface TokenSelectProps {
-    options: SelectOption[];
+    options: TokenOption[];
     placeholder?: string;
     font?: "base" | "sm";
     isBorderStyle?: boolean;
@@ -19,15 +19,15 @@ const Select: React.FC<TokenSelectProps> = ({
     isBorderStyle,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedOption, setSelectedOption] = useState<SelectOption | null>(
+    const [selectedOption, setSelectedOption] = useState<TokenOption | null>(
         null
     );
 
     const toggleSelect = () => {
         setIsOpen(!isOpen);
     };
 
-    const handleOptionClick = (option: SelectOption) => {
+    const handleOptionClick = (option: TokenOption) => {
         setSelectedOption(option);
         setIsOpen(false);
     };

app/client/src/components/dashboard/select/TokenSelect.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 
 import { assetsItems } from "../../../utils/constants";
-import { SelectOption } from "../../commons/Select";
+import { TokenOption } from "../../commons/Select";
+import { useAuth } from "../../../contexts/AuthContext";
 
 interface TokenSelectProps {
-    options: SelectOption[];
+    options: TokenOption[];
     showSelectDescription?: boolean;
     hideTokenValue?: boolean;
 }
@@ -15,33 +16,36 @@ const TokenSelect: React.FC<TokenSelectProps> = ({
     hideTokenValue,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedOption, setSelectedOption] = useState<SelectOption>(
-        options[0]
-    );
+    // const [selectedOption, setSelectedOption] = useState<TokenOption>(
+    //     options[0]
+    // );
+
+    const { currentToken, setCurrentToken } = useAuth();
 
     const toggleSelect = () => {
         setIsOpen(!isOpen);
     };
 
-    const handleOptionClick = (option: SelectOption) => {
-        setSelectedOption(option);
+    const handleOptionClick = (option: TokenOption) => {
+        setCurrentToken(option);
         setIsOpen(false);
     };
+
     const selectedToken = assetsItems.find((item) => {
-        return selectedOption.value === item.name;
+        return currentToken.value === item.name;
     });
 
     const style = showSelectDescription
         ? {
-              container: "px-4 py-3 rounded-xl",
-              img: "w-6 h-6",
-              chevronIcon: "assets/images/ui/chevron-down-light.svg",
-          }
+            container: "px-4 py-3 rounded-xl",
+            img: "w-6 h-6",
+            chevronIcon: "assets/images/ui/chevron-down-light.svg",
+        }
         : {
-              container: "px-3 py-2 rounded-3xl",
-              img: "w-4 h-4",
-              chevronIcon: "assets/images/ui/chevron-down.svg",
-          };
+            container: "px-3 py-2 rounded-3xl",
+            img: "w-4 h-4",
+            chevronIcon: "assets/images/ui/chevron-down.svg",
+        };
 
     return (
         <div className="relative">
@@ -51,20 +55,20 @@ const TokenSelect: React.FC<TokenSelectProps> = ({
                     onClick={toggleSelect}
                 >
                     <img
-                        src={selectedOption.label}
+                        src={currentToken.label}
                         alt="Selected Option"
                         className={`${style.img} mr-2`}
                     />
 
                     <div className="flex flex-wrap gap-[2px] items-center">
                         <span className="w-full font-Inter font-medium text-xs mr-2">
-                            {selectedOption.value}
+                            {currentToken.value}
                         </span>
-                        {showSelectDescription && (
+                        {/* {showSelectDescription && (
                             <span className="font-Inter font-medium text-[10px] text-inactive">
                                 OPTIONS CONTRACTS
                             </span>
-                        )}
+                        )} */}
                     </div>
 
                     <img src={style.chevronIcon} alt="chevron-down" />

app/client/src/components/layout/Navbar.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { useAuth } from "../../contexts/AuthContext";
 import { handleCopy } from "../../utils/helper";
 import { Text } from "../commons";
-import SwitchButton from "../dashboard/SwitchButton";
 
 const Navbar = () => {
     const { accountInfo, currentAddress, setCurrentAddress } = useAuth();
@@ -52,7 +51,6 @@ const Navbar = () => {
                             </div>
                         )}
                     </div>
-                    <SwitchButton />
                 </div>
             </div>
         </>

app/client/src/contexts/AuthContext.tsx

@@ -8,17 +8,20 @@ import React, {
     SetStateAction,
 } from "react";
 import { useNavigate } from "react-router-dom";
-import { MODES, SERVER_URL, sideBarItems } from "../utils/constants";
+import { MODES, SERVER_URL, assetsItems, sideBarItems } from "../utils/constants";
 import { io, Socket } from "socket.io-client";
 import axios from "axios";
 import {
     AccountInfoInterface,
     MarketcapInterface,
     ModeProps,
+    OrderInterface,
     RichListInterface,
 } 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;
@@ -34,8 +37,15 @@ interface AuthContextType {
     richlist: RichListInterface;
     currentAddress: string;
     tokenBalances: { [name: string]: Balances };
+    totalBalance: string;
     recoverStatus: boolean;
     mode: ModeProps;
+    tokenOptions: TokenOption[];
+    currentToken: TokenOption;
+    orders: OrderInterface | undefined;
+    tradingPageLoading: boolean;
+    setCurrentToken: Dispatch<SetStateAction<TokenOption>>;
+    fetchTradingInfoPage: () => Promise<void>;
     setRecoverStatus: Dispatch<SetStateAction<boolean>>;
     setSeedType: Dispatch<SetStateAction<"55chars" | "24words">>;
     setMode: Dispatch<SetStateAction<ModeProps>>;
@@ -46,6 +56,7 @@ interface AuthContextType {
     create: () => void;
     restoreAccount: () => void;
     handleAddAccount: () => void;
+    handleBuyCell: (flag: 'buy' | 'sell' | 'cancelbuy' | 'cancelsell', amount: string, price: string) => Promise<void>;
     toAccountOption: (password: string, confirmPassword: string) => void;
     handleClickSideBar: (idx: number) => void;
 }
@@ -73,6 +84,8 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
     const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
     const [activeTabIdx, setActiveTabIdx] = useState(0);
     const [accountInfo, setAccountInfo] = useState<AccountInfoInterface>();
+    const [totalBalance, _] = useState<string>('0');
+    // const [totalBalance, setTotalBalance] = useState<string>('0');
 
     const [tick, setTick] = useState("");
     const [balances, setBalances] = useState<Balances>({});
@@ -85,6 +98,17 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
     const [currentAddress, setCurrentAddress] = useState<string>("");
     const [recoverStatus, setRecoverStatus] = useState<boolean>(false);
 
+    // trading page
+    const [orders, setOrders] = useState<OrderInterface>();
+    const [tradingPageLoading, setTradingPageLoading] = useState<boolean>(false);
+
+    const tokenOptions: TokenOption[] = assetsItems.map((item) => ({
+        label: item.icon,
+        value: item.name,
+    }));
+
+    const [currentToken, setCurrentToken] = useState<TokenOption>(tokenOptions[5]);
+
     const [password, setPassword] = useState<string>("");
 
     const [loading, setLoading] = useState<boolean>(true);
@@ -245,6 +269,39 @@ 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)
+        setTradingPageLoading(false);
+        return mockOrders;
+    }
+
+    const handleBuyCell = async (flag: 'buy' | 'sell' | 'cancelbuy' | 'cancelsell', amount: string, price: string): Promise<any> => {
+        try {
+            const resp = await axios.post(`${SERVER_URL}/api/buy-cell`, {
+                flag,
+                password,
+                index: accountInfo?.addresses.indexOf(currentAddress),
+                tick: parseInt(tick) + 10,
+                currentToken: currentToken.value,
+                amount,
+                price,
+            })
+            console.log(resp.data);
+        } catch (error) {
+
+        }
+    }
+
     useEffect(() => {
         const newSocket = io(wsUrl);
         setSocket(newSocket);
@@ -305,8 +362,27 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
             await fetchInfo();
             setLoading(false);
         }
-        init();
-    }, []);
+        if (isAuthenticated)
+            init();
+    }, [isAuthenticated]);
+
+    useEffect(() => {
+        async function checkAuthenticated() {
+            setLoading(true);
+            try {
+                const resp = await axios
+                    .post(`${SERVER_URL}/api/check-authenticated`, () => {
+                    })
+                if (resp.status == 200) {
+                    setIsAuthenticated(true)
+                }
+            } catch (error) {
+
+            }
+            setLoading(false);
+        }
+        checkAuthenticated();
+    }, [])
 
     return (
         <AuthContext.Provider
@@ -322,10 +398,17 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
                 richlist,
                 tick,
                 balances,
+                totalBalance,
                 mode,
                 tokenBalances,
                 currentAddress,
                 recoverStatus,
+                currentToken,
+                tokenOptions,
+                orders,
+                tradingPageLoading,
+                fetchTradingInfoPage,
+                setCurrentToken,
                 setRecoverStatus,
                 setSeeds,
                 handleAddAccount,
@@ -334,6 +417,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
                 handleClickSideBar,
                 login,
                 logout,
+                handleBuyCell,
                 toAccountOption,
                 create,
                 restoreAccount,

app/client/src/enums/SettingsItems.ts

@@ -1,6 +1,4 @@
 export enum SettingsItems {
     GENERAL = 'General',
-    SECURITY = 'Security & Privacy',
-    SUPPORT = 'Support',
     ABOUT = 'About Qubic'
 }

app/client/src/index.css

@@ -61,15 +61,18 @@ img {
 }
 
 .scrolling::-webkit-scrollbar {
-    display: none; /* Hide the scrollbar in WebKit browsers (Chrome, Safari) */
+    display: none;
+    /* Hide the scrollbar in WebKit browsers (Chrome, Safari) */
 }
 
 /* This targets the scrollbar thumb */
 .scrolling::-webkit-scrollbar-thumb {
-    background-color: transparent; /* Set color of the scrollbar thumb */
+    background-color: transparent;
+    /* Set color of the scrollbar thumb */
 }
 
 /* This targets the scrollbar track */
 .scrolling::-webkit-scrollbar-track {
-    background-color: transparent; /* Set color of the scrollbar track */
+    background-color: transparent;
+    /* Set color of the scrollbar track */
 }

app/client/src/pages/CliSocket.tsx

@@ -42,7 +42,7 @@ const CliSocket: React.FC = () => {
 
     const handleWasmSend = () => {
         axios.post(
-            `${SERVER_URL}/api/ccall`,
+            `${SERVER_URL}/api/ccall-v1request`,
             {
                 command: wasmCommand,
                 flag: 'cli',