Merge pull request Qsilver97#81 from Qsilver97/staging

Staging
serendipity-seeker · May 11, 2024 · 4d10b3f · 4d10b3f
2 parents 4bc177b + eec178a
commit 4d10b3f
Show file tree

Hide file tree

Showing 73 changed files with 2,667 additions and 536 deletions.
diff --git a/app/client/src/components/dashboard/Summary.tsx b/app/client/src/components/dashboard/Summary.tsx
@@ -7,7 +7,7 @@ import { useAuth } from "../../contexts/AuthContext";
 import MetricsChart from "./chart/MetricsChart";
 
 const Summary: React.FC = () => {
-    const { tick, balances, marketcap } = useAuth();
+    const { tick, totalBalance, marketcap } = useAuth();
 
     const options = assetsItems.map((item) => ({
         label: item.icon,
@@ -21,13 +21,13 @@ const Summary: React.FC = () => {
                     <SummaryItem
                         label="Total assets"
                         icon="/assets/images/dashboard/totalAssets.svg"
-                        amount={`$${(Object.keys(balances).reduce((sum, key) => sum + balances[key], 0) * parseFloat(marketcap?.price)).toFixed(3)}`}
+                        amount={`$${(parseInt(totalBalance) * parseFloat(marketcap?.price)).toFixed(3)}`}
                     />
                 }
                 <SummaryItem
-                    label="Total deposits"
+                    label="Total QU"
                     icon="/assets/images/dashboard/totalDeposit.svg"
-                    amount={`QU ${0}`}
+                    amount={`QU ${totalBalance}`}
                 />
                 <SummaryItem
                     label="Tick"

diff --git a/app/client/src/components/dashboard/TokenComponent.tsx b/app/client/src/components/dashboard/TokenComponent.tsx
@@ -41,9 +41,9 @@ const TokenComponent: React.FC<TokensProps> = ({ tokens, onSend }) => {
                                 </div>
                             </td>
                             {
-                                tokenBalances[token.name]?
-                                <td className="text-white py-2">{tokenBalances[token.name][currentAddress]}</td>:
-                                <td className="text-white py-2">0</td>
+                                tokenBalances[token.name] ?
+                                    <td className="text-white py-2">{tokenBalances[token.name][currentAddress] | 0}</td> :
+                                    <td className="text-white py-2">0</td>
                             }
                             <td className="py-2 flex justify-center">
                                 <button

diff --git a/app/client/src/components/dashboard/modal/TokenFormsModal.tsx b/app/client/src/components/dashboard/modal/TokenFormsModal.tsx
@@ -24,7 +24,7 @@ const TokenFormsModal = ({
     expectedTick,
     sendingStatus,
 }: TokenFormsModalProps) => {
-    const { balances, currentAddress } = useAuth();
+    const { tokenBalances, currentAddress, tick } = useAuth();
     return (
         <div className="py-5 px-6 space-y-6 border-white/60 border rounded-2xl">
             {sendingStatus === 'init' && (
@@ -64,7 +64,7 @@ const TokenFormsModal = ({
                                 Available
                             </label>
                             <span className="font-Inter font-light text-xs">
-                                {balances[currentAddress]} {tokenName}
+                                {tokenBalances[tokenName][currentAddress]} {tokenName}
                             </span>
                         </div>
                     </div>
@@ -82,6 +82,7 @@ const TokenFormsModal = ({
                     Sending...
                     <br />
                     transactionId: {transactionId}<br />
+                    currentTick: {tick}<br />
                     expectedTick: {expectedTick}
                 </div>
             }

diff --git a/app/client/src/components/dashboard/modal/TokenModal.tsx b/app/client/src/components/dashboard/modal/TokenModal.tsx
@@ -13,7 +13,7 @@ type TokenModalProps = {
 };
 
 const TokenModal: React.FC<TokenModalProps> = ({ onClose, token }) => {
-    const { currentAddress, accountInfo, tick, balances } = useAuth();
+    const { currentAddress, accountInfo, tick, tokenBalances } = useAuth();
     const [amount, setAmount] = useState("");
     const [toAddress, setToAddress] = useState("");
     const [sendingStatus, setSendingStatus] = useState<'init' | 'confirm' | 'open' | 'pending' | 'success' | 'rejected'>('init');
@@ -38,7 +38,7 @@ const TokenModal: React.FC<TokenModalProps> = ({ onClose, token }) => {
     const transfer = async () => {
         setSendingStatus('open');
 
-        if (toAddress == '' || amount == '' || parseFloat(amount) > balances[currentAddress]) {
+        if (toAddress == '' || amount == '' || parseFloat(amount) > tokenBalances[selectedToken.name][currentAddress]) {
             toast.error('Invaild address or amount');
             return
         }
@@ -55,7 +55,7 @@ const TokenModal: React.FC<TokenModalProps> = ({ onClose, token }) => {
             .then(() => {
                 const _statusInterval = setInterval(() => {
                     axios.post(
-                        `${SERVER_URL}/api/transfer-status`
+                        `${SERVER_URL}/api/tx-status`
                     ).then((resp) => {
                         console.log(resp.data);
                         if (resp.data.value.result == '0') {

diff --git a/app/client/src/components/dashboard/modal/TxFormsModal.tsx b/app/client/src/components/dashboard/modal/TxFormsModal.tsx
@@ -0,0 +1,37 @@
+import { useAuth } from "../../../contexts/AuthContext";
+import { Text } from "../../commons";
+
+const TxFormsModal = () => {
+    const { txId, expectedTick, txStatus } = useAuth();
+
+    return (
+        <div className="py-5 px-6 space-y-6 border-white/60 border rounded-2xl">
+            {txStatus.includes('broadcast for tick') &&
+                <div className="break-all">
+                    Sending...
+                    <br />
+                    transactionId: {txId}<br />
+                    expectedTick: {expectedTick}
+                </div>
+            }
+            {txStatus.includes('no command pending') &&
+
+                <div className="space-y-7 grid justify-center">
+                    <img
+                        src="assets/images/ui/checked-blue.svg"
+                        alt="Checked Blue"
+                        className="mx-auto"
+                    />
+
+                    <div className="space-y-5">
+                        <Text className="text-2xl text-center">
+                            Success
+                        </Text>
+                    </div>
+                </div>
+            }
+        </div>
+    );
+};
+
+export default TxFormsModal;
diff --git a/app/client/src/components/dashboard/modal/TxModal.tsx b/app/client/src/components/dashboard/modal/TxModal.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import TxFormsModal from "./TxFormsModal";
+import { useAuth } from "../../../contexts/AuthContext";
+type TxModalProps = {
+
+};
+
+const TxModal: React.FC<TxModalProps> = ({ }) => {
+    const { txStatus, setTxStatus } = useAuth();
+
+    const handleCloseModal = () => {
+        setTxStatus("");
+    }
+    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="w-full px-14 py-5 space-y-6">
+                    <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"
+                        onClick={() => handleCloseModal()}
+                    >
+                        Close
+                    </button>
+                }
+            </div>
+        </div>
+    );
+};
+
+export default TxModal;
diff --git a/app/client/src/contexts/AuthContext.tsx b/app/client/src/contexts/AuthContext.tsx
@@ -44,6 +44,10 @@ interface AuthContextType {
     currentToken: TokenOption;
     orders: OrderInterface | undefined;
     tradingPageLoading: boolean;
+    txStatus: string;
+    txId: string;
+    expectedTick: number;
+    setTxStatus: Dispatch<SetStateAction<string>>;
     setCurrentToken: Dispatch<SetStateAction<TokenOption>>;
     fetchTradingInfoPage: () => Promise<void>;
     setRecoverStatus: Dispatch<SetStateAction<boolean>>;
@@ -52,6 +56,7 @@ interface AuthContextType {
     setSeeds: Dispatch<SetStateAction<string | string[]>>;
     setCurrentAddress: Dispatch<SetStateAction<string>>;
     login: (password: string) => void;
+    updateUserState: (data: any) => void;
     logout: () => void;
     create: () => void;
     restoreAccount: () => void;
@@ -84,10 +89,10 @@ 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 [totalBalance, setTotalBalance] = useState<string>('0');
 
-    const [tick, setTick] = useState("");
+    const [tick, setTick] = useState("0");
     const [balances, setBalances] = useState<Balances>({});
     const [tokenBalances, setTokenBalances] = useState<{
         [name: string]: Balances;
@@ -101,6 +106,10 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
     // trading page
     const [orders, setOrders] = useState<OrderInterface>();
     const [tradingPageLoading, setTradingPageLoading] = useState<boolean>(false);
+    const [txStatus, setTxStatus] = useState<string>("");
+    const [txInterval, setTxInterval] = useState<any>();
+    const [txId, setTxId] = useState<string>("");
+    const [expectedTick, setExpectedTick] = useState<number>(0);
 
     const tokenOptions: TokenOption[] = assetsItems.map((item) => ({
         label: item.icon,
@@ -240,6 +249,10 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
             })
     }
 
+    const updateUserState = (data: any) => {
+        axios.post(`${SERVER_URL}/api/update-userstate`, data)
+    }
+
     const fetchInfo = async () => {
         let resp;
         try {
@@ -286,22 +299,44 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
     }
 
     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) {
+        await axios.post(`${SERVER_URL}/api/buy-cell`, {
+            flag,
+            password,
+            index: accountInfo?.addresses.indexOf(currentAddress),
+            tick: parseInt(tick) + 10,
+            currentToken: currentToken.value,
+            amount,
+            price,
+        }).then(() => {
+            const _statusInterval = setInterval(() => {
+                axios.post(
+                    `${SERVER_URL}/api/tx-status`
+                ).then((resp) => {
+                    console.log(resp.data);
+                    if (resp.data.value.result == '0') {
+                    } else if (resp.data.value.result == '1') {
+                        setTxStatus(resp.data.value.display);
+                    } else {
+                    }
+                }).catch(() => {
+                })
+            }, 2000)
+            setTxInterval(_statusInterval);
+        }).catch(() => {
 
-        }
+        })
     }
 
+    useEffect(() => {
+        if (txStatus.includes('broadcast for tick')) {
+            const sendingResultSplit = txStatus.split(' ');
+            setTxId(sendingResultSplit[1]);
+            setExpectedTick(parseInt(sendingResultSplit[sendingResultSplit.length - 1]));
+        } else if (txStatus.includes('no command pending')) {
+            clearInterval(txInterval);
+        }
+    }, [txStatus])
+
     useEffect(() => {
         const newSocket = io(wsUrl);
         setSocket(newSocket);
@@ -318,7 +353,13 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
                             [data.address]: parseFloat(data.balance),
                         };
                     });
+                if (data.tokens) {
+                    data.tokens.map((item: [string, string]) => {
+                        setTokenBalances((prev) => { return { ...prev, [item[0]]: { [data.address]: parseInt(item[1]) } } })
+                    })
+                }
             } else if (data.balances) {
+                setTotalBalance(data.total);
                 data.balances.map((item: [number, string]) => {
                     if (data[0])
                         setBalances((prev) => {
@@ -366,6 +407,10 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
             init();
     }, [isAuthenticated]);
 
+    useEffect(() => {
+        updateUserState({ currentAddress })
+    }, [currentAddress])
+
     useEffect(() => {
         async function checkAuthenticated() {
             setLoading(true);
@@ -407,6 +452,10 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
                 tokenOptions,
                 orders,
                 tradingPageLoading,
+                txStatus,
+                txId,
+                expectedTick,
+                setTxStatus,
                 fetchTradingInfoPage,
                 setCurrentToken,
                 setRecoverStatus,
@@ -422,6 +471,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
                 create,
                 restoreAccount,
                 setCurrentAddress,
+                updateUserState,
             }}
         >
             {loading ? <Loading /> : children}

diff --git a/app/client/src/pages/Trading/TradingAside.tsx b/app/client/src/pages/Trading/TradingAside.tsx
@@ -6,9 +6,10 @@ 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";
 
 const TradingAside = () => {
-    const { handleBuyCell } = useAuth();
+    const { handleBuyCell, txStatus } = useAuth();
 
     const [quantity, setQuantity] = useState<string>();
     const [price, setPrice] = useState<string>();
@@ -36,6 +37,9 @@ const TradingAside = () => {
 
     return (
         <Section>
+            {txStatus != "" &&
+                <TxModal />
+            }
             {/* <Text size="xs" weight="medium" className="text-celestialBlue">
                 SELECT A STRIKE PRICE
             </Text> */}

diff --git a/app/client/src/utils/constants.ts b/app/client/src/utils/constants.ts
@@ -113,6 +113,13 @@ const assetsItems: AssetItemProps[] = [
         percentage: 0,
         colorClassName: 'bg-[#FB03F5]',
     },
+    {
+        icon: '/assets/images/tokens/qft.svg',
+        name: 'QWALLET',
+        amount: '0',
+        percentage: 0,
+        colorClassName: 'bg-[#50AF00]',
+    },
     {
         icon: '/assets/images/tokens/qtry.svg',
         name: 'QTRY',
@@ -141,13 +148,6 @@ const assetsItems: AssetItemProps[] = [
         percentage: 0,
         colorClassName: 'bg-[#50AF95]',
     },
-    {
-        icon: '/assets/images/tokens/qft.svg',
-        name: 'QWALLET',
-        amount: '0',
-        percentage: 0,
-        colorClassName: 'bg-[#50AF00]',
-    },
 ]
 
 const marketOptions = [