1  import {
 2    Stat,
 3    StatGroup,
 4    StatLabel,
 5    StatNumber,
 6    StatHelpText,
 7    StatArrow,
 8  } from '@chakra-ui/react';
 9  import { mockPools } from 'mocks/mock-pool-data';
10  import { toDollars } from 'utils/displayFunctions';
11  
12  const netTotalValue = toDollars(
13    mockPools.reduce(
14      (acc, curr) => acc + curr.totalSuppliedValue - curr.totalBorrowedValue,
15      0,
16    ),
17    0,
18  );
19  
20  const grossTotalValue = toDollars(
21    mockPools.reduce(
22      (acc, curr) => acc + curr.totalSuppliedValue + curr.totalBorrowedValue,
23      0,
24    ),
25    0,
26  );
27  
28  type Stat = {
29    label: string;
30    value: string | number;
31    change?: number;
32  };
33  
34  const defaultStats: Stat[] = [
35    {
36      label: 'Net TVL',
37      value: netTotalValue,
38      change: 6.36,
39    },
40    {
41      label: 'Gross TVL',
42      value: grossTotalValue,
43      change: 5.46,
44    },
45    {
46      label: 'Active Accounts (30D)',
47      value: 538,
48      change: 4.05,
49    },
50    {
51      label: 'New Loans (7D)',
52      value: 22,
53      change: 5.05,
54    },
55  ];
56  
57  type ProtocolStatsProps = {
58    stats?: Stat[];
59  };
60  
61  const ProtocolStats = ({ stats = defaultStats }: ProtocolStatsProps) => {
62    return (
63      <StatGroup>
64        {stats?.map(({ label, value, change }) => (
65          <Stat>
66            <StatLabel>{label}</StatLabel>
67            <StatNumber>{value}</StatNumber>
68            {change ? (
69              <StatHelpText>
70                <StatArrow type={change >= 0 ? 'increase' : 'decrease'} />
71                {change}%
72              </StatHelpText>
73            ) : null}
74          </Stat>
75        ))}
76      </StatGroup>
77    );
78  };
79  
80  export { ProtocolStats };