Merge pull request #2 from RealWorld777/staging

Staging
serendipity-seeker · Jun 4, 2024 · 2545217 · 2545217
2 parents a5737c8 + 0f96399
commit 2545217
Show file tree

Hide file tree

Showing 89 changed files with 2,823 additions and 1,636 deletions.
diff --git a/app/client/package-lock.json b/app/client/package-lock.json
diff --git a/app/client/package.json b/app/client/package.json
@@ -12,16 +12,19 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@heroicons/react": "^2.1.3",
     "@mui/material": "^5.15.15",
     "@mui/x-charts": "^7.3.1",
     "axios": "^1.6.8",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-toastify": "^10.0.5",
     "socket.io-client": "^4.7.5"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.4",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

diff --git a/app/client/src/components/commons/Pagination.tsx b/app/client/src/components/commons/Pagination.tsx
@@ -2,17 +2,28 @@ import React from 'react';
 import { PaginationItem, Pagination as PaginationMui } from '@mui/material';
 
 type PaginationProps = {
-    count: number
+    count: number;
+    handleChangePageNum: (pageNum: number) => void;
 }
 
-const Pagination: React.FC<PaginationProps> = ({count}) => {
+const Pagination: React.FC<PaginationProps> = ({ count, handleChangePageNum }) => {
 
-    return <PaginationMui count={count} shape="rounded" color="primary" className="w-fit mx-auto mt-7" renderItem={(item) => (
-        <PaginationItem
-            style={{color: "#fff"}}
-            {...item}
-        />
-        )} 
+    const handleChange = (_: React.ChangeEvent<unknown>, value: number) => {
+        handleChangePageNum(value);
+    };
+
+    return <PaginationMui
+        count={count}
+        shape="rounded"
+        color="primary"
+        className="w-fit mx-auto mt-7"
+        onChange={handleChange}
+        renderItem={(item) => (
+            <PaginationItem
+                style={{ color: "#fff" }}
+                {...item}
+            />
+        )}
     />
 };
 

diff --git a/app/client/src/components/dashboard/Assets.tsx b/app/client/src/components/dashboard/Assets.tsx
@@ -11,8 +11,9 @@ const Assets: React.FC = () => {
             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];
+                    amount = (tokenBalances[token][currentAddress] || 0) * tokenPrices[token][1] / tokenPrices[token][0];
                 }
+                console.log(amount)
                 _totalAmount += amount;
             })
         }
@@ -23,8 +24,15 @@ const Assets: React.FC = () => {
         <div className="rounded-lg bg-dark px-6 py-8 flex flex-col text-center">
             {tokens.map((token, idx) => {
                 let percent = 0;
+                let amount = 0;
+                if (token == 'QU' && tokenBalances[token]) {
+                    amount = (tokenBalances[token][currentAddress] || 0);
+                }
+                else if (tokenPrices[token][0] !== 0 && tokenBalances[token] && tokenPrices[token]) {
+                    amount = (tokenBalances[token][currentAddress] || 0) * tokenPrices[token][1] / tokenPrices[token][0];
+                }
                 if (totalAmount !== 0 && tokenBalances[token]) {
-                    percent = tokenBalances[token][currentAddress] * 100 / totalAmount
+                    percent = amount * 100 / totalAmount
                 }
                 return <AssetItem token={token} key={idx} percent={percent} />;
             })}

diff --git a/app/client/src/components/dashboard/Summary.tsx b/app/client/src/components/dashboard/Summary.tsx
@@ -24,18 +24,20 @@ const Summary: React.FC = () => {
                     <SummaryItem
                         label="Total assets"
                         icon="/assets/images/dashboard/totalAssets.svg"
-                        amount={`$${(parseInt(totalBalance) * parseFloat(marketcap?.price)).toFixed(3)}`}
+                        unit="$"
+                        amount={parseFloat((parseInt(totalBalance) * parseFloat(marketcap?.price)).toFixed(3))}
                     />
                 }
                 <SummaryItem
                     label="Total QU"
                     icon="/assets/images/dashboard/totalDeposit.svg"
-                    amount={`QU ${totalBalance}`}
+                    unit="QU"
+                    amount={parseInt(totalBalance)}
                 />
                 <SummaryItem
                     label="Tick"
                     icon="/assets/images/dashboard/totalAssets.svg"
-                    amount={`${tick}`}
+                    amount={parseInt(tick)}
                 />
             </div>
             <TokenSelect options={options} />

diff --git a/app/client/src/components/dashboard/SummaryItem.tsx b/app/client/src/components/dashboard/SummaryItem.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { SummaryItemProps } from "../../utils/interfaces";
+import { formatNumberWithCommas } from "../../utils/helper";
 
-const SummaryItem: React.FC<SummaryItemProps> = ({ icon, label, amount }) => {
+const SummaryItem: React.FC<SummaryItemProps> = ({ icon, label, unit, amount }) => {
     return (
         <div className="items-center justify-between rounded-lg inline-block mr-4">
             <div className="flex items-center gap-2">
@@ -15,7 +16,7 @@ const SummaryItem: React.FC<SummaryItemProps> = ({ icon, label, amount }) => {
                         {label}
                     </div>
                     <div className="text-2xl font-bold font-Inter">
-                        {amount}
+                        {unit ? unit : ''} {formatNumberWithCommas(amount)}
                     </div>
                 </div>
             </div>

diff --git a/app/client/src/components/dashboard/Tokens.tsx b/app/client/src/components/dashboard/Tokens.tsx
@@ -2,13 +2,21 @@ import React, { useState } from "react";
 import TokenComponent from "./TokenComponent";
 import { AssetItemProps } from "../../utils/interfaces";
 import TokenModal from "./modal/TokenModal";
+import { useAuth } from "../../contexts/AuthContext";
+import { toast } from "react-toastify";
 
 const Tokens: React.FC = () => {
+    const { tokenBalances } = useAuth();
     const [token, setToken] = useState<AssetItemProps | null>(null);
 
     const handleSend = (token: AssetItemProps) => {
-        setToken(token);
+        if (tokenBalances[token.name]) {
+            setToken(token);
+        } else {
+            toast.error('No available banacle.')
+        }
     };
+
     return (
         <>
             {token?.name && <TokenModal token={token} onClose={setToken} />}

diff --git a/app/client/src/components/dashboard/chart/MetricsChart.tsx b/app/client/src/components/dashboard/chart/MetricsChart.tsx
@@ -16,11 +16,14 @@ const MetricsChart: React.FC = () => {
     const [xAxisData, setXAxisData] = useState<string[]>([]);
     const [data, setData] = useState<number[]>([]);
     const [loading, setLoading] = useState<boolean>(false);
+    const [decimals, setDecimals] = useState<number>(0);
 
     function getYAxisValues(arr: number[], count: number): number[] {
         // Find the minimum and maximum values in the array
-        const min = Math.min(...arr);
-        const max = Math.max(...arr);
+        let min = Math.min(...arr);
+        min = min;
+        let max = Math.max(...arr);
+        max = max;
 
         // Calculate the interval between each Y-axis value
         const interval = (max - min) / (count - 1); // 9 intervals create 10 Y-axis values
@@ -34,6 +37,16 @@ const MetricsChart: React.FC = () => {
         return yAxisValues;
     }
 
+    function formatTimestampToTime(timestamp: number): string {
+        const date = new Date(timestamp * 1000); // Convert to milliseconds
+
+        const hours = date.getUTCHours().toString().padStart(2, '0');
+        const minutes = date.getUTCMinutes().toString().padStart(2, '0');
+        const seconds = date.getUTCSeconds().toString().padStart(2, '0');
+
+        return `${hours}:${minutes}:${seconds}`;
+    }
+
     useEffect(() => {
         async function init() {
             setLoading(true);
@@ -42,8 +55,11 @@ const MetricsChart: React.FC = () => {
                 const prices = (resp.data.prices as [number, string][]).slice(-showLength);
                 const xAxisValues: string[] = prices.map(price => `${price[0]}`)
                 setXAxisData(xAxisValues);
-                setData(prices.map(price => parseFloat(price[1])));
-                const yAxisValues: number[] = getYAxisValues(prices.map(price => parseFloat(price[1]) * 1000000), showLength);
+                let decimals = 0;
+                if (currentToken.value == 'QU') decimals = 6;
+                setDecimals(decimals);
+                setData(prices.map(price => parseFloat(price[1]) * 10 ** decimals));
+                const yAxisValues: number[] = getYAxisValues(prices.map(price => parseFloat(price[1]) * 10 ** decimals), showLength);
                 setYAxisData(yAxisValues);
                 console.log(xAxisValues, yAxisValues,)
             } catch (error) {
@@ -58,7 +74,9 @@ const MetricsChart: React.FC = () => {
     return (
         <div className="relative">
             <Text size="xs" className="absolute top-3 left-4">
-                Price
+                {
+                    currentToken.value == 'QU' ? `USD -${decimals}` : 'QU'
+                }
             </Text>
             {loading ?
                 <div className={`flex items-center justify-center min-h-screen`}>
@@ -68,8 +86,8 @@ const MetricsChart: React.FC = () => {
                     </div>
                 </div> :
                 <LineChart
-                    xAxis={[{ data: xAxisData, hideTooltip: false }]}
-                    yAxis={[{ data: yAxisData }]}
+                    xAxis={[{ data: xAxisData, hideTooltip: false, valueFormatter: (value) => formatTimestampToTime(value) }]}
+                    yAxis={[{ data: yAxisData, min: Math.min(...yAxisData) - Math.min(...yAxisData) * 0.1, max: Math.max(...yAxisData) + Math.max(...yAxisData) * 0.1 }]}
                     series={[
                         {
                             data,

diff --git a/app/client/src/components/dashboard/modal/TokenFormsModal.tsx b/app/client/src/components/dashboard/modal/TokenFormsModal.tsx
@@ -1,5 +1,4 @@
 import { useAuth } from "../../../contexts/AuthContext";
-import { Text } from "../../commons";
 import Input from "../../commons/Input";
 import TokenSubmitModal from "./TokenSubmitModal";
 
@@ -9,9 +8,7 @@ type TokenFormsModalProps = {
     setAmount: React.Dispatch<React.SetStateAction<string>>;
     addressToSend: string;
     setAddressToSend: React.Dispatch<React.SetStateAction<string>>;
-    transactionId: string;
     sendingStatus: 'init' | 'confirm' | 'open' | 'pending' | 'success' | 'rejected' | 'closed';
-    expectedTick: number | undefined;
 };
 
 const TokenFormsModal = ({
@@ -20,18 +17,16 @@ const TokenFormsModal = ({
     setAmount,
     addressToSend,
     setAddressToSend,
-    transactionId,
-    expectedTick,
     sendingStatus,
 }: TokenFormsModalProps) => {
-    const { tokenBalances, currentAddress, tick } = useAuth();
+    const { tokenBalances, currentAddress } = useAuth();
     return (
         <div className="py-5 px-6 space-y-6 border-white/60 border rounded-2xl">
             {sendingStatus === 'init' && (
                 <>
                     <div className="space-y-4">
                         <Input
-                            label="Send Adress"
+                            label="Send Address"
                             placeholder="Send to address"
                             inputId="address"
                             inputStyle="modal"
@@ -77,7 +72,7 @@ const TokenFormsModal = ({
                     token={tokenName}
                 />
             )}
-            {sendingStatus === 'pending' &&
+            {/* {sendingStatus === 'pending' &&
                 <div className="break-all">
                     Sending...
                     <br />
@@ -103,7 +98,7 @@ const TokenFormsModal = ({
 
                     <Text className="text-center break-all">{addressToSend}</Text>
                 </div>
-            )}
+            )} */}
         </div>
     );
 };