Analytics, My Wallet, and Notification center

merge dev into main

package.json

@@ -25,6 +25,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@rollup/plugin-inject": "^5.0.3",
+    "@tanstack/react-query": "^4.29.7",
     "@tippyjs/react": "^4.2.6",
     "@xpla/wallet-controller": "^0.4.1",
     "@xpla/wallet-provider": "^0.4.1",
@@ -35,12 +36,12 @@
     "decimal.js": "^10.2.1",
     "emotion-reset": "^3.0.1",
     "jotai": "^2.1.0",
+    "rc-slider": "^10.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-grid-system": "^8.1.6",
     "react-hook-form": "^7.40.0",
     "react-modal": "^3.16.1",
-    "react-query": "^3.39.2",
     "react-router-dom": "^6.4.3",
     "react-tiny-popover": "^7.2.0",
     "resize-observer-polyfill": "^1.5.1",
@@ -69,7 +70,7 @@
     "husky": "^8.0.2",
     "lint-staged": "^13.0.4",
     "prettier": "^2.7.1",
-    "typescript": "^5.0.4",
+    "typescript": "^5.3.3",
     "vite": "^4.1.4",
     "vite-compatible-readable-stream": "^3.6.1",
     "vite-plugin-node-polyfills": "^0.8.2",

src/App.tsx

@@ -1,38 +1,18 @@
-import { Route, Routes } from "react-router-dom";
-import routes, { RouteObject } from "routes";
-import { Fragment, useCallback, useEffect, useMemo } from "react";
+import { RouterProvider } from "react-router-dom";
+import routes from "routes";
+import { useEffect } from "react";
 import GlobalStyles from "styles/GlobalStyles";
 import {
+  ScreenClassProvider,
   setConfiguration as setGridConfiguration,
   useScreenClass,
 } from "react-grid-system";
 import { gridConfiguration, SCREEN_CLASSES } from "constants/layout";
-import { useAtomValue, useSetAtom } from "jotai";
-import { verifiedAssetsAtom, verifiedIbcAssetsAtom } from "stores/assets";
-import { useAPI } from "hooks/useAPI";
-import MainLayout from "layout/Main";
-import disclaimerLastSeenAtom from "stores/disclaimer";
-import DisclaimerModal from "components/Modal/DisclaimerModal";
-import globalElementsAtom from "stores/globalElements";
-import { VerifiedIbcAssets } from "types/token";
-import { useNetwork } from "./hooks/useNetwork";
 
 setGridConfiguration(gridConfiguration);
 
 function App() {
-  const setKnownAssets = useSetAtom(verifiedAssetsAtom);
-  const setKnownIbcAssets = useSetAtom(verifiedIbcAssetsAtom);
-  const disclaimerLastSeen = useAtomValue(disclaimerLastSeenAtom);
-  const globalElements = useAtomValue(globalElementsAtom);
-  const api = useAPI();
-  const network = useNetwork();
   const screenClass = useScreenClass();
-  const isDisclaimerAgreed = useMemo(() => {
-    if (!disclaimerLastSeen) return false;
-    const date = new Date();
-    date.setDate(date.getDate() - 3);
-    return disclaimerLastSeen > date;
-  }, [disclaimerLastSeen]);
 
   useEffect(() => {
     SCREEN_CLASSES.forEach((item) => {
@@ -51,62 +31,11 @@ function App() {
     });
   }, []);
 
-  useEffect(() => {
-    api.getVerifiedTokenInfo().then((assets) => {
-      setKnownAssets(assets);
-    });
-    api.getVerifiedIbcTokenInfo().then((ibcAssets: VerifiedIbcAssets) => {
-      const updatedIbcAssets = ibcAssets[network.name];
-      if (updatedIbcAssets) {
-        Promise.all(
-          Object.entries(updatedIbcAssets).map(([k, v]) =>
-            api.getDecimal(v?.denom || "").then((d) => {
-              const asset =
-                updatedIbcAssets && updatedIbcAssets?.[k]
-                  ? updatedIbcAssets?.[k]
-                  : undefined;
-              if (d && asset) {
-                asset.decimals = d;
-              }
-            }),
-          ),
-        ).then(() => {
-          setKnownIbcAssets((current) => ({
-            ...current,
-            [network.name]: updatedIbcAssets,
-          }));
-        });
-      }
-    });
-  }, [api, setKnownAssets, setKnownIbcAssets]);
-
-  const renderRoute = useCallback(
-    ({ children, element, index, ...props }: RouteObject) => {
-      return (
-        <Route
-          {...(index
-            ? { index: true }
-            : { children: children?.map(renderRoute) })}
-          key={`${props.path}`}
-          element={element}
-          {...props}
-        />
-      );
-    },
-    [],
-  );
-
   return (
-    <>
+    <ScreenClassProvider>
       <GlobalStyles />
-      <MainLayout>
-        <DisclaimerModal isOpen={!isDisclaimerAgreed} />
-        {isDisclaimerAgreed && <Routes>{routes.map(renderRoute)}</Routes>}
-      </MainLayout>
-      {globalElements.map(({ element, id }) => (
-        <Fragment key={id}>{element}</Fragment>
-      ))}
-    </>
+      <RouterProvider router={routes} />
+    </ScreenClassProvider>
   );
 }
 

src/api/index.ts

@@ -0,0 +1,170 @@
+import axios from "axios";
+import { apiAddresses } from "constants/dezswap";
+import { Notification } from "stores/notifications";
+import { Pair, Pairs, Pool, Token } from "types/api";
+import { NetworkName } from "types/common";
+import {
+  DashboardChartDuration,
+  DashboardChartResponse,
+  DashboardChartType,
+  DashboardPoolDetailResponse,
+  DashboardPoolsResponse,
+  DashboardRecentResponse,
+  DashboardStatisticsResponse,
+  DashboardTokenChartType,
+  DashboardTokenDetailResponse,
+  DashboardTokensResponse,
+  DashboardTransactionsResponse,
+} from "types/dashboard-api";
+
+export type ApiVersion = "v1";
+
+const getBaseUrl = (networkName: NetworkName, version: ApiVersion = "v1") => {
+  return `${apiAddresses[networkName]?.baseUrl || ""}/${version}`;
+};
+
+const api = (networkName: NetworkName, version: ApiVersion = "v1") => {
+  const apiClient = axios.create({
+    baseURL: getBaseUrl(networkName, version),
+  });
+
+  apiClient.interceptors.request.use((config) => {
+    const newConfig = { ...config };
+    newConfig.params = { [Date.now()]: "", ...newConfig.params };
+    return newConfig;
+  });
+
+  if (version === "v1") {
+    return {
+      async getPairs() {
+        const res = await apiClient.get<Pairs>(`/pairs`);
+        return res.data;
+      },
+      async getPair(address: string) {
+        const res = await apiClient.get<Pair>(`/pairs/${address}`);
+        return res.data;
+      },
+      async getPools() {
+        const res = await apiClient.get<Pool[]>(`/pools`);
+        return res.data;
+      },
+      async getPool(address: string) {
+        const res = await apiClient.get<Pool>(`/pools/${address}`);
+        return res.data;
+      },
+      async getTokens() {
+        const res = await apiClient.get<Token[]>(`/tokens`);
+        return res.data;
+      },
+      async getToken(address: string) {
+        const res = await apiClient.get<Token>(`/tokens/${address}`);
+        return res.data;
+      },
+      async getNotices(params?: {
+        chain?: string;
+        after?: number;
+        limit?: number;
+        asc?: boolean;
+      }) {
+        const res = await apiClient.get<Notification[]>(`/notices`, {
+          params,
+          baseURL: getBaseUrl("mainnet", version),
+        });
+        return res.data;
+      },
+      dashboard: {
+        async getPools(token?: string) {
+          const res = await apiClient.get<DashboardPoolsResponse>(
+            `/dashboard/pools`,
+            { params: { token } },
+          );
+          return res.data;
+        },
+        async getPoolDetail(address: string) {
+          const res = await apiClient.get<DashboardPoolDetailResponse>(
+            `dashboard/pools/${address}`,
+          );
+          return res.data;
+        },
+        async getRecent() {
+          const res = await apiClient.get<DashboardRecentResponse>(
+            `/dashboard/recent`,
+          );
+          return res.data;
+        },
+        async getChart({
+          type,
+          duration,
+        }: {
+          duration?: DashboardChartDuration;
+          type: DashboardChartType;
+        }) {
+          const res = await apiClient.get<DashboardChartResponse>(
+            `/dashboard/chart/${type}`,
+            { params: { duration } },
+          );
+          return res.data;
+        },
+        async getTokenChart({
+          address,
+          duration,
+          type,
+        }: {
+          address: string;
+          duration?: DashboardChartDuration;
+          type: DashboardTokenChartType;
+        }) {
+          const res = await apiClient.get<DashboardChartResponse>(
+            `/dashboard/chart/tokens/${encodeURIComponent(address)}/${type}`,
+            { params: { duration } },
+          );
+          return res.data;
+        },
+        async getPoolChart({
+          address,
+          duration,
+          type,
+        }: {
+          address: string;
+          duration?: DashboardChartDuration;
+          type: DashboardChartType;
+        }) {
+          const res = await apiClient.get<DashboardChartResponse>(
+            `/dashboard/chart/pools/${encodeURIComponent(address)}/${type}`,
+            { params: { duration } },
+          );
+          return res.data;
+        },
+        async getStatistics() {
+          const res = await apiClient.get<DashboardStatisticsResponse>(
+            `/dashboard/statistics`,
+          );
+          return res.data;
+        },
+        async getTokens() {
+          const res = await apiClient.get<DashboardTokensResponse>(
+            `/dashboard/tokens`,
+          );
+          return res.data;
+        },
+        async getTokenDetail(address: string) {
+          const res = await apiClient.get<DashboardTokenDetailResponse>(
+            `/dashboard/tokens/${encodeURIComponent(address)}`,
+          );
+          return res.data;
+        },
+        async getTransactions(params?: { pool?: string; token?: string }) {
+          const res = await apiClient.get<DashboardTransactionsResponse>(
+            `/dashboard/txs`,
+            { params },
+          );
+          return res.data;
+        },
+      },
+    };
+  }
+
+  throw new Error(`Unsupported API version: ${version}`);
+};
+
+export default api;