diff --git a/src/api/client.ts b/src/api/client.ts index efce244..e16ea60 100644 --- a/src/api/client.ts +++ b/src/api/client.ts @@ -93,6 +93,11 @@ export function getTransactionCountLast14Days() { return transport("getTransactionCountLast14Days", []) as Promise; } + +export function getWalletsCountLast14Days() { + return transport("getWalletsCountLast14Days", []) as Promise; +} + export function getContractsByField(params: any[]) { return transport("getContractsByField", params) as Promise; } diff --git a/src/components/metrics/index.tsx b/src/components/metrics/index.tsx index 60e403a..27b90ff 100644 --- a/src/components/metrics/index.tsx +++ b/src/components/metrics/index.tsx @@ -9,7 +9,7 @@ import styled from "styled-components"; import { useMediaQuery } from "react-responsive"; import { breakpoints } from "src/Responive/breakpoints"; import { useONEExchangeRate } from "../../hooks/useONEExchangeRate"; -import { getTransactionCountLast14Days } from "src/api/client"; +import { getTransactionCountLast14Days, getWalletsCountLast14Days } from "src/api/client"; import { getCount } from "src/api/client"; @@ -38,7 +38,7 @@ export const Metrics = (params: { }} style={{ height: isLessMobileM ? "auto" : "140px", - flex: isLessLaptop ? "1 1 50%" : "1 1 100%", + flex: isLessLaptop ? "1 1 40%" : "1 1 100%", }} gap={isLessMobileM ? "small" : "0"} > @@ -82,6 +82,25 @@ export const Metrics = (params: { > + + {isLessLaptop && ( + + )} + + + + + ); }; @@ -337,6 +356,94 @@ function BlockTransactionsHistory() { ); } + +interface WalletHitoryItem { + date: string; + count: string; +} + +function WalletsHistory() { + const [result, setResult] = useState([]); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + const getElements = async () => { + setIsLoading(true); + const res = await getWalletsCountLast14Days(); + setResult(res); + setIsLoading(false); + }; + + getElements(); + }, []); + + const data = result.map((i) => ({ + date: i.date, + count: +i.count, + })); + + return ( + + + {"WALLETS"} + + + {isLoading && ( + + + + )} + {!isLoading && ( + ( + + {value} + + ), + }, + { + property: "count", + label: "Wallets", + render: (value) => ( + + {formatNumber(value)} + + ), + }, + ]} + size="fill" + chart={[ + { + property: "count", + type: "bar", + color: "brand", + opacity: "medium", + thickness: "small", + }, + ]} + /> + )} + + + ); +} + const Line = styled.div<{ horizontal?: boolean; vertical?: boolean }>` display: flex; width: ${(props) => (props.horizontal ? "100%" : "1px")};