Skip to content

Commit

Permalink
Merge branch 'develop' into feat/dex-update
Browse files Browse the repository at this point in the history
  • Loading branch information
pietro-maximoff authored Sep 16, 2024
2 parents e1905c4 + 04f2b6f commit 07c8b44
Show file tree
Hide file tree
Showing 55 changed files with 1,187 additions and 11,754 deletions.
20 changes: 20 additions & 0 deletions apps/frontend/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,25 @@
# frontend

## 1.1.21

### Patch Changes

- 5f000110: SOV-4453: Fixed issue with Portfolio page crashing on RSK chain
- Updated dependencies [5f000110]
- @sovryn/sdex@0.3.14

## 1.1.20

### Patch Changes

- b8351846: SOV-4388: Fix USD prices on Portfolio page
- 6d7e3402: feat: pull TVL and 24 hour volume from Sovryn Indexer
- 2136f594: SOV-4393: Fix deposit button on Market Making page
- 8ce58dc6: SOV-4344: consolidate spice leaderboard
- Updated dependencies [d9898545]
- Updated dependencies [e9a94007]
- @sovryn/ui@1.0.30

## 1.1.19

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "frontend",
"version": "1.1.19",
"version": "1.1.21",
"homepage": ".",
"private": true,
"dependencies": {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React, { FC, useMemo } from 'react';

import { getCurrencyPrecision } from '../../5_pages/PortfolioPage/components/ProtocolSection/ProtocolSection.utils';
import { useGetNativeTokenPrice } from '../../../hooks/useGetNativeTokenPrice';
import { decimalic } from '../../../utils/math';
import { AmountRenderer } from '../AmountRenderer/AmountRenderer';

type NativeTokenAmountProps = {
usdValue?: string | number;
dataAttribute?: string;
precision?: number;
};

export const NativeTokenAmount: FC<NativeTokenAmountProps> = ({
usdValue,
dataAttribute,
precision,
}) => {
const { price: nativeTokenPrice, nativeToken } = useGetNativeTokenPrice();

const value = useMemo(
() =>
!!Number(nativeTokenPrice)
? decimalic(usdValue || 0)
.div(nativeTokenPrice)
.toString()
: '0',
[nativeTokenPrice, usdValue],
);

return (
<AmountRenderer
value={value}
suffix={nativeToken}
precision={precision || getCurrencyPrecision(nativeToken)}
dataAttribute={dataAttribute}
/>
);
};
2 changes: 1 addition & 1 deletion apps/frontend/src/app/3_organisms/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const Header: FC = () => {
<ProductLinks />
{isBobChain(chainId) && (
<Button
text={t(translations.header.nav.claimLp)}
text={t(translations.header.nav.spicePoints)}
style={ButtonStyle.primary}
className="bg-[#24BFB74D]/[0.3] border-[#24BFB74D]/[0.3] hover:bg-[#24BFB74D]"
onClick={() => navigate('/claim-lp')}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,48 +1,42 @@
import { getGraphWrapperUrl } from '../../../../../utils/helpers';
import { getIndexerUrl } from '../../../../../utils/helpers';
import { LockedDataResult, VolumeDataResult } from './ProtocolData.types';

export const DEFAULT_LOCKED_DATA: LockedDataResult = {
tvlLending: {
totalBtc: 0,
totalUsd: 0,
totalUsd: '0',
},
tvlAmm: {
totalBtc: 0,
totalUsd: 0,
totalUsd: '0',
},
tvlProtocol: {
totalBtc: 0,
totalUsd: 0,
totalUsd: '0',
},
tvlStaking: {
totalBtc: 0,
totalUsd: 0,
totalUsd: '0',
},
tvlSubprotocols: {
totalBtc: 0,
totalUsd: 0,
totalUsd: '0',
},
tvlZero: {
totalBtc: 0,
totalUsd: 0,
totalUsd: '0',
},
tvlMynt: {
totalBtc: 0,
totalUsd: 0,
totalUsd: '0',
},
total_btc: 0,
total_usd: 0,
tvlSdex: {
totalUsd: '0',
},
total_usd: '0',
};

export const DEFAULT_VOLUME_DATA: VolumeDataResult = {
btc: 0,
usd: 0,
};

const graphWrapper = getGraphWrapperUrl();
const indexer = getIndexerUrl();

export const LOCKED_DATA_URL = `${graphWrapper}/cmc/tvl`;
export const VOLUME_DATA_URL = `${graphWrapper}/cmc/summary`;
export const LOCKED_DATA_URL = `${indexer}legacy/cmc/tvl`;
export const VOLUME_DATA_URL = `${indexer}legacy/cmc/summary`;

export const BTC_VALUE_PRECISION = 4;
export const USD_VALUE_PRECISION = 2;
Original file line number Diff line number Diff line change
@@ -1,29 +1,66 @@
import React, { FC, useCallback, useReducer } from 'react';
import React, { FC, useCallback, useMemo, useReducer } from 'react';

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

import { Accordion, Button, ButtonStyle, Paragraph } from '@sovryn/ui';
import { Accordion, Button, ButtonStyle } from '@sovryn/ui';

import { BOB_CHAIN_ID, RSK_CHAIN_ID } from '../../../../../config/chains';

import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
import { BITCOIN, USD } from '../../../../../constants/currencies';
import { NativeTokenAmount } from '../../../../2_molecules/NativeTokenAmount/NativeTokenAmount';
import { USD } from '../../../../../constants/currencies';
import { translations } from '../../../../../locales/i18n';
import {
BTC_VALUE_PRECISION,
USD_VALUE_PRECISION,
} from './ProtocolData.constants';
import { decimalic } from '../../../../../utils/math';
import { USD_VALUE_PRECISION } from './ProtocolData.constants';
import styles from './ProtocolData.module.css';
import { useGetData } from './hooks/useGetData';
import { useGetBOBVolume } from './hooks/useGetBOBVolume';
import { useGetLockedData } from './hooks/useGetLockedData';
import { useGetRSKVolume } from './hooks/useGetRSKVolume';

const pageTranslations = translations.landingPage.protocolDataSection;

export const ProtocolData: FC = () => {
const { lockedData, volumeData } = useGetData();
const lockedData = useGetLockedData(RSK_CHAIN_ID);
const rskVolume = useGetRSKVolume();

const bobLockedData = useGetLockedData(BOB_CHAIN_ID);
const bobVolume = useGetBOBVolume();

const navigate = useNavigate();
const [open, toggle] = useReducer(v => !v, false);

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

const rskTVL = useMemo(
() =>
decimalic(lockedData.tvlAmm?.totalUsd || '0')
.add(lockedData.tvlLending?.totalUsd || '0')
.add(lockedData.tvlMynt?.totalUsd || '0')
.add(lockedData.tvlProtocol?.totalUsd || '0')
.add(lockedData.tvlStaking?.totalUsd || '0')
.add(lockedData.tvlSubprotocols?.totalUsd || '0')
.add(lockedData.tvlZero?.totalUsd || '0')
.toString(),
[
lockedData.tvlAmm?.totalUsd,
lockedData.tvlLending?.totalUsd,
lockedData.tvlMynt?.totalUsd,
lockedData.tvlProtocol?.totalUsd,
lockedData.tvlStaking?.totalUsd,
lockedData.tvlSubprotocols?.totalUsd,
lockedData.tvlZero?.totalUsd,
],
);

const total = useMemo(() => {
return {
lockedData:
Number(rskTVL || '0') + Number(bobLockedData.total_usd || '0'),
volumeData: Number(rskVolume || '0') + Number(bobVolume || '0'),
};
}, [bobLockedData.total_usd, bobVolume, rskTVL, rskVolume]);

return (
<div>
<div className="text-base font-medium text-gray-10">
Expand All @@ -46,17 +83,13 @@ export const ProtocolData: FC = () => {
<div className="text-xs text-gray-30 mb-2">
{t(pageTranslations.totalValueLockedAllNetworks)}
</div>
<div className="sm:text-2xl text-gray-10 text-sm sm:font-medium font-semibold leading-8">
<AmountRenderer
value={lockedData.total_btc}
suffix={BITCOIN}
precision={BTC_VALUE_PRECISION}
/>
<div className="sm:text-xl text-gray-10 text-sm sm:font-medium font-semibold leading-8">
<NativeTokenAmount usdValue={total.lockedData} precision={4} />
</div>

<div className="text-gray-50 text-sm">
<AmountRenderer
value={lockedData.total_usd}
value={total.lockedData}
suffix={USD}
precision={USD_VALUE_PRECISION}
/>
Expand All @@ -68,16 +101,12 @@ export const ProtocolData: FC = () => {
{t(pageTranslations.volumeAllNetworks)}
</div>
<div className="sm:text-2xl text-gray-10 text-sm sm:font-medium font-semibold leading-8">
<AmountRenderer
value={volumeData.btc}
suffix={BITCOIN}
precision={BTC_VALUE_PRECISION}
/>
<NativeTokenAmount usdValue={total.volumeData} />
</div>

<div className="text-gray-50 text-sm">
<AmountRenderer
value={volumeData.usd}
value={total.volumeData}
suffix={USD}
precision={USD_VALUE_PRECISION}
/>
Expand All @@ -93,16 +122,12 @@ export const ProtocolData: FC = () => {
{t(pageTranslations.tvlRskNetwork)}
</div>
<div className="text-gray-10 text-sm sm:font-medium font-semibold">
<AmountRenderer
value={lockedData.total_btc}
suffix={BITCOIN}
precision={BTC_VALUE_PRECISION}
/>
<NativeTokenAmount usdValue={rskTVL} />
</div>

<div className="text-gray-50 text-sm">
<AmountRenderer
value={lockedData.total_usd}
value={rskTVL}
suffix={USD}
precision={USD_VALUE_PRECISION}
/>
Expand All @@ -114,16 +139,12 @@ export const ProtocolData: FC = () => {
{t(pageTranslations.volumeRskNetwork)}
</div>
<div className="text-gray-10 text-sm sm:font-medium font-semibold">
<AmountRenderer
value={volumeData.btc}
suffix={BITCOIN}
precision={BTC_VALUE_PRECISION}
/>
<NativeTokenAmount usdValue={rskVolume} />
</div>

<div className="text-gray-50 text-sm">
<AmountRenderer
value={volumeData.usd}
value={rskVolume}
suffix={USD}
precision={USD_VALUE_PRECISION}
/>
Expand All @@ -136,17 +157,32 @@ export const ProtocolData: FC = () => {
<div className="text-xs text-gray-30 mb-2">
{t(pageTranslations.tvlBobNetwork)}
</div>
<div className="text-gray-10 text-sm italic">
<Paragraph children={t(pageTranslations.dataComingSoon)} />
<div className="text-gray-10 text-sm">
<NativeTokenAmount usdValue={bobLockedData.total_usd} />
</div>
<div className="text-gray-50 text-sm">
<AmountRenderer
value={bobLockedData.total_usd}
suffix={USD}
precision={USD_VALUE_PRECISION}
/>
</div>
</div>

<div className="ml-10 mr-5 flex flex-col items-start sm:min-w-44">
<div className="text-xs text-gray-30 mb-2">
{t(pageTranslations.volumeBobNetwork)}
</div>
<div className="text-gray-10 text-sm italic">
<Paragraph children={t(pageTranslations.dataComingSoon)} />
<div className="text-gray-10 text-sm sm:font-medium font-semibold">
<NativeTokenAmount usdValue={bobVolume} />
</div>

<div className="text-gray-50 text-sm">
<AmountRenderer
value={bobVolume}
suffix={USD}
precision={USD_VALUE_PRECISION}
/>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 07c8b44

Please sign in to comment.