Skip to content

Commit 6d7e340

Browse files
rick23pcreed-victortiltom
authored
SOV-4246: statistics updates (#955)
* feat: pull TVL and 24 hour volume from Sovryn Indexer * Create forty-pumpkins-play.md * fix: endpoint issue * feat: ecosystem stats update * fix: protocol stats * chore: fallback indexer urls * feat: update native token amount * feat: update tvl to read usd total instead of btc * Force rebuild * fix: fix bob total value excosystem stats --------- Co-authored-by: Victor Creed <victor@sovryn.app> Co-authored-by: tiltom <tilnak.tomas@gmail.com>
1 parent 8ce58dc commit 6d7e340

20 files changed

Lines changed: 681 additions & 293 deletions

File tree

‎.changeset/forty-pumpkins-play.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"frontend": patch
3+
---
4+
5+
feat: pull TVL and 24 hour volume from Sovryn Indexer

‎apps/frontend/src/app/2_molecules/NativeTokenAmount/NativeTokenAmount.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { FC, useMemo } from 'react';
2+
3+
import { getCurrencyPrecision } from '../../5_pages/PortfolioPage/components/ProtocolSection/ProtocolSection.utils';
4+
import { useGetNativeTokenPrice } from '../../../hooks/useGetNativeTokenPrice';
5+
import { decimalic } from '../../../utils/math';
6+
import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
7+
8+
type NativeTokenAmountProps = {
9+
usdValue?: string | number;
10+
dataAttribute?: string;
11+
precision?: number;
12+
};
13+
14+
export const NativeTokenAmount: FC<NativeTokenAmountProps> = ({
15+
usdValue,
16+
dataAttribute,
17+
precision,
18+
}) => {
19+
const { price: nativeTokenPrice, nativeToken } = useGetNativeTokenPrice();
20+
21+
const value = useMemo(
22+
() =>
23+
!!Number(nativeTokenPrice)
24+
? decimalic(usdValue || 0)
25+
.div(nativeTokenPrice)
26+
.toString()
27+
: '0',
28+
[nativeTokenPrice, usdValue],
29+
);
30+
31+
return (
32+
<AmountRenderer
33+
value={value}
34+
suffix={nativeToken}
35+
precision={precision || getCurrencyPrecision(nativeToken)}
36+
dataAttribute={dataAttribute}
37+
/>
38+
);
39+
};

‎apps/frontend/src/app/5_pages/LandingPage/components/ProtocolData/ProtocolData.constants.ts‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,42 @@
1-
import { getGraphWrapperUrl } from '../../../../../utils/helpers';
1+
import { getIndexerUrl } from '../../../../../utils/helpers';
22
import { LockedDataResult, VolumeDataResult } from './ProtocolData.types';
33

44
export const DEFAULT_LOCKED_DATA: LockedDataResult = {
55
tvlLending: {
6-
totalBtc: 0,
7-
totalUsd: 0,
6+
totalUsd: '0',
87
},
98
tvlAmm: {
10-
totalBtc: 0,
11-
totalUsd: 0,
9+
totalUsd: '0',
1210
},
1311
tvlProtocol: {
14-
totalBtc: 0,
15-
totalUsd: 0,
12+
totalUsd: '0',
1613
},
1714
tvlStaking: {
18-
totalBtc: 0,
19-
totalUsd: 0,
15+
totalUsd: '0',
2016
},
2117
tvlSubprotocols: {
22-
totalBtc: 0,
23-
totalUsd: 0,
18+
totalUsd: '0',
2419
},
2520
tvlZero: {
26-
totalBtc: 0,
27-
totalUsd: 0,
21+
totalUsd: '0',
2822
},
2923
tvlMynt: {
30-
totalBtc: 0,
31-
totalUsd: 0,
24+
totalUsd: '0',
3225
},
33-
total_btc: 0,
34-
total_usd: 0,
26+
tvlSdex: {
27+
totalUsd: '0',
28+
},
29+
total_usd: '0',
3530
};
3631

3732
export const DEFAULT_VOLUME_DATA: VolumeDataResult = {
38-
btc: 0,
3933
usd: 0,
4034
};
4135

42-
const graphWrapper = getGraphWrapperUrl();
36+
const indexer = getIndexerUrl();
4337

44-
export const LOCKED_DATA_URL = `${graphWrapper}/cmc/tvl`;
45-
export const VOLUME_DATA_URL = `${graphWrapper}/cmc/summary`;
38+
export const LOCKED_DATA_URL = `${indexer}legacy/cmc/tvl`;
39+
export const VOLUME_DATA_URL = `${indexer}legacy/cmc/summary`;
4640

4741
export const BTC_VALUE_PRECISION = 4;
4842
export const USD_VALUE_PRECISION = 2;

‎apps/frontend/src/app/5_pages/LandingPage/components/ProtocolData/ProtocolData.tsx‎

Lines changed: 74 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,66 @@
1-
import React, { FC, useCallback, useReducer } from 'react';
1+
import React, { FC, useCallback, useMemo, useReducer } from 'react';
22

33
import { t } from 'i18next';
44
import { useNavigate } from 'react-router-dom';
55

6-
import { Accordion, Button, ButtonStyle, Paragraph } from '@sovryn/ui';
6+
import { Accordion, Button, ButtonStyle } from '@sovryn/ui';
7+
8+
import { BOB_CHAIN_ID, RSK_CHAIN_ID } from '../../../../../config/chains';
79

810
import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
9-
import { BITCOIN, USD } from '../../../../../constants/currencies';
11+
import { NativeTokenAmount } from '../../../../2_molecules/NativeTokenAmount/NativeTokenAmount';
12+
import { USD } from '../../../../../constants/currencies';
1013
import { translations } from '../../../../../locales/i18n';
11-
import {
12-
BTC_VALUE_PRECISION,
13-
USD_VALUE_PRECISION,
14-
} from './ProtocolData.constants';
14+
import { decimalic } from '../../../../../utils/math';
15+
import { USD_VALUE_PRECISION } from './ProtocolData.constants';
1516
import styles from './ProtocolData.module.css';
16-
import { useGetData } from './hooks/useGetData';
17+
import { useGetBOBVolume } from './hooks/useGetBOBVolume';
18+
import { useGetLockedData } from './hooks/useGetLockedData';
19+
import { useGetRSKVolume } from './hooks/useGetRSKVolume';
1720

1821
const pageTranslations = translations.landingPage.protocolDataSection;
1922

2023
export const ProtocolData: FC = () => {
21-
const { lockedData, volumeData } = useGetData();
24+
const lockedData = useGetLockedData(RSK_CHAIN_ID);
25+
const rskVolume = useGetRSKVolume();
26+
27+
const bobLockedData = useGetLockedData(BOB_CHAIN_ID);
28+
const bobVolume = useGetBOBVolume();
29+
2230
const navigate = useNavigate();
2331
const [open, toggle] = useReducer(v => !v, false);
2432

2533
const handleClick = useCallback(() => navigate('/stats'), [navigate]);
2634

35+
const rskTVL = useMemo(
36+
() =>
37+
decimalic(lockedData.tvlAmm?.totalUsd || '0')
38+
.add(lockedData.tvlLending?.totalUsd || '0')
39+
.add(lockedData.tvlMynt?.totalUsd || '0')
40+
.add(lockedData.tvlProtocol?.totalUsd || '0')
41+
.add(lockedData.tvlStaking?.totalUsd || '0')
42+
.add(lockedData.tvlSubprotocols?.totalUsd || '0')
43+
.add(lockedData.tvlZero?.totalUsd || '0')
44+
.toString(),
45+
[
46+
lockedData.tvlAmm?.totalUsd,
47+
lockedData.tvlLending?.totalUsd,
48+
lockedData.tvlMynt?.totalUsd,
49+
lockedData.tvlProtocol?.totalUsd,
50+
lockedData.tvlStaking?.totalUsd,
51+
lockedData.tvlSubprotocols?.totalUsd,
52+
lockedData.tvlZero?.totalUsd,
53+
],
54+
);
55+
56+
const total = useMemo(() => {
57+
return {
58+
lockedData:
59+
Number(rskTVL || '0') + Number(bobLockedData.total_usd || '0'),
60+
volumeData: Number(rskVolume || '0') + Number(bobVolume || '0'),
61+
};
62+
}, [bobLockedData.total_usd, bobVolume, rskTVL, rskVolume]);
63+
2764
return (
2865
<div>
2966
<div className="text-base font-medium text-gray-10">
@@ -46,17 +83,13 @@ export const ProtocolData: FC = () => {
4683
<div className="text-xs text-gray-30 mb-2">
4784
{t(pageTranslations.totalValueLockedAllNetworks)}
4885
</div>
49-
<div className="sm:text-2xl text-gray-10 text-sm sm:font-medium font-semibold leading-8">
50-
<AmountRenderer
51-
value={lockedData.total_btc}
52-
suffix={BITCOIN}
53-
precision={BTC_VALUE_PRECISION}
54-
/>
86+
<div className="sm:text-xl text-gray-10 text-sm sm:font-medium font-semibold leading-8">
87+
<NativeTokenAmount usdValue={total.lockedData} precision={4} />
5588
</div>
5689

5790
<div className="text-gray-50 text-sm">
5891
<AmountRenderer
59-
value={lockedData.total_usd}
92+
value={total.lockedData}
6093
suffix={USD}
6194
precision={USD_VALUE_PRECISION}
6295
/>
@@ -68,16 +101,12 @@ export const ProtocolData: FC = () => {
68101
{t(pageTranslations.volumeAllNetworks)}
69102
</div>
70103
<div className="sm:text-2xl text-gray-10 text-sm sm:font-medium font-semibold leading-8">
71-
<AmountRenderer
72-
value={volumeData.btc}
73-
suffix={BITCOIN}
74-
precision={BTC_VALUE_PRECISION}
75-
/>
104+
<NativeTokenAmount usdValue={total.volumeData} />
76105
</div>
77106

78107
<div className="text-gray-50 text-sm">
79108
<AmountRenderer
80-
value={volumeData.usd}
109+
value={total.volumeData}
81110
suffix={USD}
82111
precision={USD_VALUE_PRECISION}
83112
/>
@@ -93,16 +122,12 @@ export const ProtocolData: FC = () => {
93122
{t(pageTranslations.tvlRskNetwork)}
94123
</div>
95124
<div className="text-gray-10 text-sm sm:font-medium font-semibold">
96-
<AmountRenderer
97-
value={lockedData.total_btc}
98-
suffix={BITCOIN}
99-
precision={BTC_VALUE_PRECISION}
100-
/>
125+
<NativeTokenAmount usdValue={rskTVL} />
101126
</div>
102127

103128
<div className="text-gray-50 text-sm">
104129
<AmountRenderer
105-
value={lockedData.total_usd}
130+
value={rskTVL}
106131
suffix={USD}
107132
precision={USD_VALUE_PRECISION}
108133
/>
@@ -114,16 +139,12 @@ export const ProtocolData: FC = () => {
114139
{t(pageTranslations.volumeRskNetwork)}
115140
</div>
116141
<div className="text-gray-10 text-sm sm:font-medium font-semibold">
117-
<AmountRenderer
118-
value={volumeData.btc}
119-
suffix={BITCOIN}
120-
precision={BTC_VALUE_PRECISION}
121-
/>
142+
<NativeTokenAmount usdValue={rskVolume} />
122143
</div>
123144

124145
<div className="text-gray-50 text-sm">
125146
<AmountRenderer
126-
value={volumeData.usd}
147+
value={rskVolume}
127148
suffix={USD}
128149
precision={USD_VALUE_PRECISION}
129150
/>
@@ -136,17 +157,32 @@ export const ProtocolData: FC = () => {
136157
<div className="text-xs text-gray-30 mb-2">
137158
{t(pageTranslations.tvlBobNetwork)}
138159
</div>
139-
<div className="text-gray-10 text-sm italic">
140-
<Paragraph children={t(pageTranslations.dataComingSoon)} />
160+
<div className="text-gray-10 text-sm">
161+
<NativeTokenAmount usdValue={bobLockedData.total_usd} />
162+
</div>
163+
<div className="text-gray-50 text-sm">
164+
<AmountRenderer
165+
value={bobLockedData.total_usd}
166+
suffix={USD}
167+
precision={USD_VALUE_PRECISION}
168+
/>
141169
</div>
142170
</div>
143171

144172
<div className="ml-10 mr-5 flex flex-col items-start sm:min-w-44">
145173
<div className="text-xs text-gray-30 mb-2">
146174
{t(pageTranslations.volumeBobNetwork)}
147175
</div>
148-
<div className="text-gray-10 text-sm italic">
149-
<Paragraph children={t(pageTranslations.dataComingSoon)} />
176+
<div className="text-gray-10 text-sm sm:font-medium font-semibold">
177+
<NativeTokenAmount usdValue={bobVolume} />
178+
</div>
179+
180+
<div className="text-gray-50 text-sm">
181+
<AmountRenderer
182+
value={bobVolume}
183+
suffix={USD}
184+
precision={USD_VALUE_PRECISION}
185+
/>
150186
</div>
151187
</div>
152188
</div>

‎apps/frontend/src/app/5_pages/LandingPage/components/ProtocolData/ProtocolData.types.ts‎

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
11
export type LockedDataResult = {
2-
tvlLending: {
3-
totalBtc: number;
4-
totalUsd: number;
5-
};
6-
tvlAmm: {
7-
totalBtc: number;
8-
totalUsd: number;
9-
};
10-
tvlProtocol: {
11-
totalBtc: number;
12-
totalUsd: number;
13-
};
14-
tvlStaking: {
15-
totalBtc: number;
16-
totalUsd: number;
17-
};
18-
tvlSubprotocols: {
19-
totalBtc: number;
20-
totalUsd: number;
21-
};
22-
tvlZero: {
23-
totalBtc: number;
24-
totalUsd: number;
25-
};
26-
tvlMynt: {
27-
totalBtc: number;
28-
totalUsd: number;
29-
};
30-
total_btc: number;
31-
total_usd: number;
2+
tvlLending:
3+
| {
4+
totalUsd: string;
5+
}
6+
| undefined;
7+
tvlAmm:
8+
| {
9+
totalUsd: string;
10+
}
11+
| undefined;
12+
tvlProtocol:
13+
| {
14+
totalUsd: string;
15+
}
16+
| undefined;
17+
tvlStaking:
18+
| {
19+
totalUsd: string;
20+
}
21+
| undefined;
22+
tvlSubprotocols:
23+
| {
24+
totalUsd: string;
25+
}
26+
| undefined;
27+
tvlZero:
28+
| {
29+
totalUsd: string;
30+
}
31+
| undefined;
32+
tvlMynt:
33+
| {
34+
totalUsd: string;
35+
}
36+
| undefined;
37+
tvlSdex:
38+
| {
39+
totalUsd: string;
40+
}
41+
| undefined;
42+
total_usd: string;
3243
};
3344

3445
export type VolumeDataResult = {
35-
btc: number;
3646
usd: number;
3747
};

0 commit comments

Comments
 (0)