Merge pull request #4 from near-daos/develop

sync main with develop branch
near-daos · Jan 21, 2022 · 1b6ded0 · 1b6ded0
2 parents a91659c + 65c0f44
commit 1b6ded0
Show file tree

Hide file tree

Showing 90 changed files with 1,278 additions and 989 deletions.
diff --git a/src/api/currency/currency.ts b/src/api/currency/currency.ts
@@ -1,9 +1,9 @@
 import { AxiosResponse } from 'axios';
 import { HttpService } from '../http-service';
-import { Currency } from './types';
+import { CurrentCurrency } from './types';
 
 export class CurrencyService extends HttpService {
-  async getCurrency(): Promise<AxiosResponse<Currency>> {
+  async getCurrency(): Promise<AxiosResponse<CurrentCurrency>> {
     return this.get('/api/v3/simple/price?ids=near&vs_currencies=usd', {
       baseURL: 'https://api.coingecko.com',
     });

diff --git a/src/api/currency/types.ts b/src/api/currency/types.ts
@@ -2,6 +2,6 @@ export type Usd = {
   usd: number;
 };
 
-export type Currency = {
+export type CurrentCurrency = {
   near: Usd;
 };
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -1,4 +1,3 @@
-export * from './types';
 export * from './general';
 export * from './governance';
 export * from './users';
@@ -8,3 +7,5 @@ export * from './flow';
 export * from './tokens';
 export * from './currency';
 export * from './tvl';
+export * from './market';
+export * from './types';
diff --git a/src/api/market/index.ts b/src/api/market/index.ts
@@ -0,0 +1,2 @@
+export * from './market';
+export * from './types';
diff --git a/src/api/market/market.ts b/src/api/market/market.ts
@@ -0,0 +1,20 @@
+import { AxiosResponse } from 'axios';
+import queryString from 'query-string';
+
+import { HttpService } from '../http-service';
+import { PriceParamsHistory } from '../types';
+import { Price } from './types';
+
+export class MarketService extends HttpService {
+  async getPrice(params: PriceParamsHistory): Promise<AxiosResponse<Price[]>> {
+    const query = queryString.stringify({
+      from: params.from,
+      to: params.to,
+      currency: params.currency,
+    });
+
+    return this.get(`/market/${params.coin}/price?${query}`);
+  }
+}
+
+export const marketService = new MarketService();
diff --git a/src/api/market/types.ts b/src/api/market/types.ts
@@ -0,0 +1,8 @@
+import { Coin, Currency } from 'src/api/types';
+
+export type Price = {
+  date: number;
+  coin: Coin;
+  currency: Currency;
+  price: string;
+};
diff --git a/src/api/tvl/tvl.ts b/src/api/tvl/tvl.ts
@@ -27,12 +27,6 @@ export class TvlService extends HttpService {
     return this.get(`${params.contract}/tvl/tvl/leaderboard`);
   }
 
-  async getTvlAvgTvl(params: HistoryParams): Promise<AxiosResponse<Metrics>> {
-    const query = queryString.stringify({ from: params.from, to: params.to });
-
-    return this.get(`${params.contract}/tvl/avg-tvl?${query}`);
-  }
-
   async getTvlBountiesAndGrantsVl(
     params: HistoryParams,
   ): Promise<AxiosResponse<Metrics>> {

diff --git a/src/api/types.ts b/src/api/types.ts
@@ -114,3 +114,15 @@ export type MetricsEntity = Metrics & {
 export type FlowMetricsEntity = FlowMetrics & {
   id: string;
 };
+
+export enum Currency {
+  USD = 'USD',
+}
+
+export enum Coin {
+  NEAR = 'NEAR',
+}
+
+export type PriceParams = { currency: Currency; coin: Coin };
+
+export type PriceParamsHistory = PriceParams & History;
diff --git a/src/app/flow-dao/flow-dao.tsx b/src/app/flow-dao/flow-dao.tsx
@@ -20,7 +20,7 @@ import {
 } from 'src/components';
 import { useRoutes } from 'src/hooks';
 import { useAppDispatch, useAppSelector } from 'src/store';
-import { ROUTES } from 'src/constants';
+import { UrlParams, ROUTES } from 'src/constants';
 import styles from 'src/styles/page.module.scss';
 
 import { IncomingFunds } from './funds/incoming';
@@ -31,7 +31,7 @@ import { OutgoingTransactions } from './transactions/outgoing';
 export const FlowDao: FC = () => {
   const location = useLocation();
   const history = useHistory();
-  const { contract, dao } = useParams<{ dao: string; contract: string }>();
+  const { contract, dao } = useParams<UrlParams>();
   const routes = useRoutes();
 
   const dispatch = useAppDispatch();

diff --git a/src/app/flow-dao/funds/incoming/incoming-funds.tsx b/src/app/flow-dao/funds/incoming/incoming-funds.tsx
@@ -1,22 +1,27 @@
 import React, { FC, useState } from 'react';
 import { useParams } from 'react-router';
-import { useMount } from 'react-use';
+import { useMount, useUnmount } from 'react-use';
 
 import { ChartLine, LoadingContainer } from 'src/components';
 import { useFilterMetrics, usePeriods } from 'src/hooks';
 import { useAppDispatch, useAppSelector } from 'src/store';
-import { selectFlowDaoFundsById } from 'src/app/shared/flow/selectors';
-import { getFlowDaoFunds } from 'src/app/shared/flow/slice';
+import {
+  selectFlowDaoFundsById,
+  selectFlowError,
+} from 'src/app/shared/flow/selectors';
+import { clearFlowError, getFlowDaoFunds } from 'src/app/shared/flow/slice';
 import { selectActionLoading } from 'src/store/loading';
 import { isSuccess, isFailed } from 'src/utils';
+import { UrlParams } from 'src/constants';
 
 import styles from 'src/styles/page.module.scss';
 
 export const IncomingFunds: FC = () => {
   const [period, setPeriod] = useState('All');
-  const { contract, dao } = useParams<{ dao: string; contract: string }>();
+  const { contract, dao } = useParams<UrlParams>();
   const dispatch = useAppDispatch();
   const funds = useAppSelector(selectFlowDaoFundsById(dao));
+  const error = useAppSelector(selectFlowError);
   const getFlowDaoFundsLoading = useAppSelector(
     selectActionLoading(getFlowDaoFunds.typePrefix),
   );
@@ -28,12 +33,14 @@ export const IncomingFunds: FC = () => {
           contract,
           dao,
         }),
-      ).catch((error: unknown) => {
-        console.error(error);
-      });
+      ).catch((err: unknown) => console.error(err));
     }
   });
 
+  useUnmount(() => {
+    dispatch(clearFlowError());
+  });
+
   const fundsData = useFilterMetrics(period, funds);
   const periods = usePeriods(fundsData?.metrics);
 
@@ -44,12 +51,12 @@ export const IncomingFunds: FC = () => {
           isSuccess(getFlowDaoFundsLoading) || isFailed(getFlowDaoFundsLoading)
         }
       />
-
+      {fundsData?.metrics?.length === 0 ? 'Not enough data' : null}
+      {error ? <p className={styles.error}>{error}</p> : null}
       <div className={styles.metricsContainer}>
-        {fundsData?.metrics?.length === 0 ? 'Not enough data' : null}
-        {fundsData && fundsData?.metrics?.length ? (
+        {fundsData?.metrics?.length ? (
           <ChartLine
-            isCurrency
+            isNear
             data={fundsData}
             period={period}
             setPeriod={setPeriod}

diff --git a/src/app/flow-dao/funds/outgoing/outgoing-funds.tsx b/src/app/flow-dao/funds/outgoing/outgoing-funds.tsx
@@ -1,22 +1,27 @@
 import React, { FC, useState } from 'react';
 import { useParams } from 'react-router';
-import { useMount } from 'react-use';
+import { useMount, useUnmount } from 'react-use';
 
 import { ChartLine, LoadingContainer } from 'src/components';
 import { useFilterMetrics, usePeriods } from 'src/hooks';
 import { useAppDispatch, useAppSelector } from 'src/store';
-import { selectFlowDaoFundsById } from 'src/app/shared/flow/selectors';
-import { getFlowDaoFunds } from 'src/app/shared/flow/slice';
+import {
+  selectFlowDaoFundsById,
+  selectFlowError,
+} from 'src/app/shared/flow/selectors';
+import { clearFlowError, getFlowDaoFunds } from 'src/app/shared/flow/slice';
 import { selectActionLoading } from 'src/store/loading';
 import { isSuccess, isFailed } from 'src/utils';
+import { UrlParams } from 'src/constants';
 
 import styles from 'src/styles/page.module.scss';
 
 export const OutgoingFunds: FC = () => {
   const [period, setPeriod] = useState('All');
-  const { contract, dao } = useParams<{ dao: string; contract: string }>();
+  const { contract, dao } = useParams<UrlParams>();
   const dispatch = useAppDispatch();
   const funds = useAppSelector(selectFlowDaoFundsById(dao));
+  const error = useAppSelector(selectFlowError);
   const getFlowDaoFundsLoading = useAppSelector(
     selectActionLoading(getFlowDaoFunds.typePrefix),
   );
@@ -28,12 +33,14 @@ export const OutgoingFunds: FC = () => {
           contract,
           dao,
         }),
-      ).catch((error: unknown) => {
-        console.error(error);
-      });
+      ).catch((err: unknown) => console.error(err));
     }
   });
 
+  useUnmount(() => {
+    dispatch(clearFlowError());
+  });
+
   const fundsData = useFilterMetrics(period, funds);
   const periods = usePeriods(funds?.metrics);
 
@@ -44,12 +51,12 @@ export const OutgoingFunds: FC = () => {
           isSuccess(getFlowDaoFundsLoading) || isFailed(getFlowDaoFundsLoading)
         }
       />
-
+      {fundsData?.metrics?.length === 0 ? 'Not enough data' : null}
+      {error ? <p className={styles.error}>{error}</p> : null}
       <div className={styles.metricsContainer}>
-        {fundsData?.metrics?.length === 0 ? 'Not enough data' : null}
         {fundsData && fundsData?.metrics?.length ? (
           <ChartLine
-            isCurrency
+            isNear
             data={fundsData}
             period={period}
             setPeriod={setPeriod}

diff --git a/src/app/flow-dao/transactions/incoming/incoming-transactions.tsx b/src/app/flow-dao/transactions/incoming/incoming-transactions.tsx
@@ -1,21 +1,29 @@
 import React, { FC, useState } from 'react';
 import { useParams } from 'react-router';
-import { useMount } from 'react-use';
+import { useMount, useUnmount } from 'react-use';
 
 import { ChartLine, LoadingContainer } from 'src/components';
 import { useFilterMetrics, usePeriods } from 'src/hooks';
 import { useAppDispatch, useAppSelector } from 'src/store';
-import { selectFlowDaoTransactionsById } from 'src/app/shared/flow/selectors';
-import { getFlowDaoTransactions } from 'src/app/shared/flow/slice';
+import {
+  selectFlowDaoTransactionsById,
+  selectFlowError,
+} from 'src/app/shared/flow/selectors';
+import {
+  clearFlowError,
+  getFlowDaoTransactions,
+} from 'src/app/shared/flow/slice';
 import { selectActionLoading } from 'src/store/loading';
 import { isFailed, isSuccess } from 'src/utils';
+import { UrlParams } from 'src/constants';
 
 import styles from 'src/styles/page.module.scss';
 
 export const IncomingTransactions: FC = () => {
   const [period, setPeriod] = useState('All');
-  const { contract, dao } = useParams<{ dao: string; contract: string }>();
+  const { contract, dao } = useParams<UrlParams>();
   const dispatch = useAppDispatch();
+  const error = useAppSelector(selectFlowError);
   const transactions = useAppSelector(selectFlowDaoTransactionsById(dao));
   const getFlowDaoTransactionLoading = useAppSelector(
     selectActionLoading(getFlowDaoTransactions.typePrefix),
@@ -28,12 +36,14 @@ export const IncomingTransactions: FC = () => {
           contract,
           dao,
         }),
-      ).catch((error: unknown) => {
-        console.error(error);
-      });
+      ).catch((err: unknown) => console.error(err));
     }
   });
 
+  useUnmount(() => {
+    dispatch(clearFlowError());
+  });
+
   const transactionsData = useFilterMetrics(period, transactions);
   const periods = usePeriods(transactions?.metrics);
 
@@ -45,10 +55,10 @@ export const IncomingTransactions: FC = () => {
           isFailed(getFlowDaoTransactionLoading)
         }
       />
-
+      {error ? <p className={styles.error}>{error}</p> : null}
+      {transactionsData?.metrics?.length === 0 ? 'Not enough data' : null}
       <div className={styles.metricsContainer}>
-        {transactionsData?.metrics?.length === 0 ? 'Not enough data' : null}
-        {transactionsData && transactionsData?.metrics?.length ? (
+        {transactionsData?.metrics?.length ? (
           <ChartLine
             data={transactionsData}
             period={period}

diff --git a/src/app/flow-dao/transactions/outgoing/outgoing-transactions.tsx b/src/app/flow-dao/transactions/outgoing/outgoing-transactions.tsx
@@ -5,18 +5,22 @@ import { useMount } from 'react-use';
 import { ChartLine, LoadingContainer } from 'src/components';
 import { useFilterMetrics, usePeriods } from 'src/hooks';
 import { useAppDispatch, useAppSelector } from 'src/store';
-import { selectFlowDaoTransactionsById } from 'src/app/shared/flow/selectors';
+import {
+  selectFlowDaoTransactionsById,
+  selectFlowError,
+} from 'src/app/shared/flow/selectors';
 import { getFlowDaoTransactions } from 'src/app/shared/flow/slice';
 import { selectActionLoading } from 'src/store/loading';
 import { isFailed, isSuccess } from 'src/utils';
-import { Params } from 'src/constants';
+import { UrlParams } from 'src/constants';
 
 import styles from 'src/styles/page.module.scss';
 
 export const OutgoingTransactions: FC = () => {
   const [period, setPeriod] = useState('All');
-  const { contract, dao } = useParams<Params>();
+  const { contract, dao } = useParams<UrlParams>();
   const dispatch = useAppDispatch();
+  const error = useAppSelector(selectFlowError);
   const transactions = useAppSelector(selectFlowDaoTransactionsById(dao));
   const getFlowDaoTransactionsLoading = useAppSelector(
     selectActionLoading(getFlowDaoTransactions.typePrefix),
@@ -29,9 +33,7 @@ export const OutgoingTransactions: FC = () => {
           contract,
           dao,
         }),
-      ).catch((error: unknown) => {
-        console.error(error);
-      });
+      ).catch((err: unknown) => console.error(err));
     }
   });
 
@@ -46,18 +48,18 @@ export const OutgoingTransactions: FC = () => {
           isFailed(getFlowDaoTransactionsLoading)
         }
       />
-
+      {error ? <p className={styles.error}>{error}</p> : null}
+      {transactionsData?.metrics?.length === 0 ? 'Not enough data' : null}
       <div className={styles.metricsContainer}>
-        {transactionsData?.metrics?.length === 0 ? 'Not enough data' : null}
-        {transactionsData && transactionsData?.metrics?.length ? (
+        {transactionsData?.metrics?.length ? (
           <ChartLine
             data={transactionsData}
             period={period}
             setPeriod={setPeriod}
             periods={periods}
             lines={[
               {
-                name: 'Outgoing of Transactions',
+                name: 'Outgoing Transactions',
                 color: '#E33F84',
                 dataKey: 'outgoing',
               },