Skip to content

Commit

Permalink
Bean UI - 24H/7D/30D APY Display (#809)
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeanstalkFarmsOperations
BeanstalkFarmsOperations authored Apr 5, 2024
2 parents 7af05fa + ce46433 commit 6991176
Show file tree
Hide file tree
Showing 10 changed files with 297 additions and 191 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.ui.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,4 @@ jobs:
run: yarn ui:test
env:
VITE_ALCHEMY_API_KEY: ${{ secrets.VITE_ALCHEMY_API_KEY }}
VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.VITE_WALLETCONNECT_PROJECT_ID }}
VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.VITE_WALLETCONNECT_PROJECT_ID }}
2 changes: 1 addition & 1 deletion projects/ui/src/components/Analytics/Silo/APY.graphql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ query SeasonalAPY(
$token: Bytes
) {
seasons: tokenYields(
where: { season_lte: $season_lte, season_gt: $season_gt, token: $token }
where: { season_lte: $season_lte, season_gt: $season_gt, token: $token, siloYield_: {window: ROLLING_30_DAY} }
first: $first
orderBy: season
orderDirection: desc
Expand Down
10 changes: 5 additions & 5 deletions projects/ui/src/components/Analytics/Silo/APY.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ const metricToKey = {
};

const metricTitles = {
Bean: 'Bean vAPY',
Bean3Curve: 'BEAN3CRV vAPY',
BeanETHWell: 'BEANETH Well vAPY',
UnripeBean: 'urBEAN vAPY',
UnripeBeanETH: 'urBEANETH Well vAPY',
Bean: 'Bean 30D vAPY',
Bean3Curve: 'BEAN3CRV 30D vAPY',
BeanETHWell: 'BEANETH 30D vAPY',
UnripeBean: 'urBEAN 30D vAPY',
UnripeBeanETH: 'urBEANETH 30D vAPY',
};

const APY: FC<{
Expand Down
20 changes: 10 additions & 10 deletions projects/ui/src/components/Analytics/Silo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ const SLUGS = [
'deposited_urlp',
'stalk',
// 'seeds',
'bean_vAPY',
'bean_3crv_vAPY',
'bean_eth_well_vAPY',
'ur_bean_vAPY',
'ur_bean_eth_vAPY',
'bean_30d_vapy',
'bean3crv_30d_vapy',
'beaneth_30d_vapy',
'urbean_vapy',
'urbeaneth_vapy',
];

const SiloAnalytics: FC<{}> = () => {
Expand All @@ -45,11 +45,11 @@ const SiloAnalytics: FC<{}> = () => {
<Tab label="Deposited urBEANETH" />
<Tab label="Stalk" />
{/* <Tab label="Seeds" /> */}
<Tab label="BEAN vAPY" />
<Tab label="BEAN3CRV vAPY" />
<Tab label="BEANETH vAPY" />
<Tab label="urBEAN vAPY" />
<Tab label="urBEANETH vAPY" />
<Tab label="BEAN 30D vAPY" />
<Tab label="BEAN3CRV 30D vAPY" />
<Tab label="BEANETH 30D vAPY" />
<Tab label="urBEAN 30D vAPY" />
<Tab label="urBEANETH 30D vAPY" />
</Tabs>
{tab === 0 && (
<DepositedAsset
Expand Down
129 changes: 96 additions & 33 deletions projects/ui/src/components/Silo/SiloAssetApyChip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import { Box, Chip, Link, Tooltip, Typography } from '@mui/material';
import React from 'react';
import { Box, Chip, Link, Stack, Tooltip, Typography } from '@mui/material';
import Token from '~/classes/Token';
import { BEAN } from '~/constants/tokens';
import useAPY from '~/hooks/beanstalk/useAPY';
import Row from '../Common/Row';
import TokenIcon from '../Common/TokenIcon';
import stalkIconBlue from '~/img/beanstalk/stalk-icon-blue.svg';
import { displayFullBN } from '~/util';

import Stat from '../Common/Stat';
import useChainConstant from '~/hooks/chain/useChainConstant';

import { FC } from '~/types';
import BigNumber from 'bignumber.js';
import Row from '../Common/Row';
import TokenIcon from '../Common/TokenIcon';
import BeanProgressIcon from '../Common/BeanProgressIcon';

const TOOLTIP_COMPONENT_PROPS = {
tooltip: {
sx: {
maxWidth: 'none !important',
// boxShadow: '0px 6px 20px 10px rgba(255,255,255,0.3) !important',
/// boxShadow: '0px 6px 20px 10px rgba(255,255,255,0.3) !important',
},
},
};
Expand All @@ -33,7 +32,7 @@ const SiloAssetApyChip: FC<SiloAssetApyChipProps> = ({
metric,
variant = 'default',
}) => {
const { data: latestYield } = useAPY();
const { data: latestYield, loading: isLoading } = useAPY();
const Bean = useChainConstant(BEAN);
const isBean = metric === 'bean';

Expand All @@ -43,10 +42,9 @@ const SiloAssetApyChip: FC<SiloAssetApyChipProps> = ({
? Bean
: ({ symbol: 'Stalk', logo: stalkIconBlue } as Token);

const val = apys ? apys[metric].times(100) : null;
const displayString = `${
val ? (val.gt(0) && val.lt(0.1) ? '< 0.1' : val.toFixed(1)) : '0.0'
}%`;
function getDisplayString(val: (BigNumber | null)) {
return `${val ? (val.gt(0) && val.lt(0.1) ? '< 0.1' : val.toFixed(1)) : '0.0'}%`;
}

return (
<Tooltip
Expand All @@ -56,25 +54,41 @@ const SiloAssetApyChip: FC<SiloAssetApyChipProps> = ({
<Row gap={0}>
{metric === 'bean' && (
<Box sx={{ px: 1, py: 0.5, maxWidth: 245 }}>
<Stat
title={
<Row gap={0.5}>
<TokenIcon token={Bean} />
Total Beans per Season
</Row>
}
gap={0.25}
variant="h4"
amount={
latestYield
? displayFullBN(
latestYield.beansPerSeasonEMA,
Bean.displayDecimals
)
: '0'
}
subtitle="30-day exponential moving average of Beans earned by all Stalkholders per Season."
/>
<Stack gap={0.25}>
<Row gap={0.5}>
<TokenIcon token={Bean} />
Total Beans per Season
</Row>
<Box display='flex'>
<Stack width='33%'>
<Typography variant='h4'>
24H
</Typography>
<Typography variant='h4'>
{latestYield ? displayFullBN(latestYield.beansPerSeasonEMA24h, Bean.displayDecimals) : '0'}
</Typography>
</Stack>
<Stack width='33%'>
<Typography variant='h4'>
7D
</Typography>
<Typography variant='h4'>
{latestYield ? displayFullBN(latestYield.beansPerSeasonEMA7d, Bean.displayDecimals) : '0'}
</Typography>
</Stack>
<Stack width='33%'>
<Typography variant='h4'>
30D
</Typography>
<Typography variant='h4'>
{latestYield ? displayFullBN(latestYield.beansPerSeasonEMA30d, Bean.displayDecimals) : '0'}
</Typography>
</Stack>
</Box>
<Typography variant="bodySmall" color="text.primary">
24-hour/7-day/30-day exponential moving average of Beans earned by all Stalkholders per Season.
</Typography>
</Stack>
</Box>
)}
<Box
Expand Down Expand Up @@ -114,15 +128,64 @@ const SiloAssetApyChip: FC<SiloAssetApyChipProps> = ({
<Chip
variant="filled"
color={metric === 'bean' ? 'primary' : 'secondary'}
sx={{
"& .MuiChip-label": {
overflow: "visible"
}
}}
label={
<Typography sx={{ whiteSpace: 'nowrap' }}>
<Row gap={0.5} flexWrap="nowrap" justifyContent="center">
<Row gap={0.5} flexWrap="nowrap" justifyContent="center" alignItems="center">
{variant === 'labeled' && (
<>
<TokenIcon token={tokenProps} /> vAPY:{' '}
</>
)}
{displayString}
{metric === 'bean' ?
<>
<Box display='flex' justifyContent='center' width={isLoading ? '40px' : 'auto'}>
{isLoading ? (
<BeanProgressIcon
size={10}
enabled
variant="indeterminate"
/>
) : (
<>
{getDisplayString(apys ? apys['24h'][metric].times(100) : null)}
</>
)}
</Box>
<Typography color='white' marginTop={-0.25}>|</Typography>
<Box display='flex' justifyContent='center' width={isLoading ? '40px' : 'auto'}>
{isLoading ? (
<BeanProgressIcon
size={10}
enabled
variant="indeterminate"
/>
) : (
<>
{getDisplayString(apys ? apys['7d'][metric].times(100) : null)}
</>
)}
</Box>
<Typography color='white' marginTop={-0.25}>|</Typography>
</>
: null }
<Box display='flex' justifyContent='center' width={isLoading ? '40px' : 'auto'}>
{isLoading ? (
<BeanProgressIcon
size={10}
enabled
variant="indeterminate"
/>
) : (
<>
{getDisplayString(apys ? apys['30d'][metric].times(100) : null)}
</>
)}
</Box>
</Row>
</Typography>
}
Expand Down
56 changes: 30 additions & 26 deletions projects/ui/src/components/Silo/SiloAssetOverviewCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,8 @@
import React from 'react';

import CallMadeIcon from '@mui/icons-material/CallMade';
import { Link, Stack, Typography } from '@mui/material';

import { Box, Link, Stack, Typography } from '@mui/material';
import { FC } from '~/types';
import { SEEDS, STALK, BEAN_ETH_WELL_LP } from '~/constants/tokens';
import { FontSize } from '../App/muiTheme';
import Stat from '../Common/Stat';
import TokenIcon from '../Common/TokenIcon';
import { BASIN_WELL_LINK, BEANSTALK_ADDRESSES, CURVE_LINK } from '~/constants';
import DepositedAsset from '../Analytics/Silo/DepositedAsset';

import SiloCarousel from './SiloCarousel';
import Token, { ERC20Token } from '~/classes/Token';
import Row from '~/components/Common/Row';
import {
Expand All @@ -20,29 +12,39 @@ import {
} from '~/components/Common/Module';
import useTVD from '~/hooks/beanstalk/useTVD';
import { displayFullBN } from '~/util';
import { BASIN_WELL_LINK, BEANSTALK_ADDRESSES, CURVE_LINK } from '~/constants';
import useWhitelist from '~/hooks/beanstalk/useWhitelist';
import { FontSize } from '../App/muiTheme';
import Stat from '../Common/Stat';
import TokenIcon from '../Common/TokenIcon';
import DepositedAsset from '../Analytics/Silo/DepositedAsset';
import SiloCarousel from './SiloCarousel';
import EmbeddedCard from '../Common/EmbeddedCard';
import SiloAssetApyChip from './SiloAssetApyChip';
import useWhitelist from '~/hooks/beanstalk/useWhitelist';

import { FC } from '~/types';

const DepositRewards: FC<{ token: ERC20Token }> = ({ token }) => (
<Row gap={1} justifyContent="center">
<Row gap={0.5} justifyContent="center">
<Typography variant="bodyLarge">
<TokenIcon token={STALK} css={{ marginTop: '7px', height: '0.7em' }} />
{token.rewards?.stalk}
</Typography>
<Row>
<TokenIcon token={SEEDS} css={{ fontSize: 'inherit' }} />
<Typography variant="bodyLarge">{token.rewards?.seeds}</Typography>
<Box>
<Row gap={1} justifyContent="start">
<Row gap={0.5} justifyContent="center">
<Typography variant="bodyLarge">
<TokenIcon token={STALK} css={{ marginTop: '7px', height: '0.7em' }} />
{token.rewards?.stalk}
</Typography>
<Row>
<TokenIcon token={SEEDS} css={{ fontSize: 'inherit' }} />
<Typography variant="bodyLarge">{token.rewards?.seeds}</Typography>
</Row>
</Row>
{/* This vAPY chip is only shown on larger screens */}
<Row sx={{ display: { xs: 'none', sm: 'block' } }}>
<SiloAssetApyChip token={token as Token} metric="bean" variant="labeled" />
</Row>
</Row>
<SiloAssetApyChip token={token as Token} metric="bean" variant="labeled" />
</Row>
</Box>
);

const SiloAssetOverviewCard: FC<{ token: ERC20Token }> = ({ token }) => {

const { total, tvdByToken } = useTVD();
const whitelist = useWhitelist();

Expand All @@ -51,7 +53,6 @@ const SiloAssetOverviewCard: FC<{ token: ERC20Token }> = ({ token }) => {
const tokenTVD = tvdByToken[token.address];
const tokenPctTVD = tokenTVD.div(total).times(100);


return (
<Module>
<ModuleHeader>
Expand Down Expand Up @@ -106,7 +107,10 @@ const SiloAssetOverviewCard: FC<{ token: ERC20Token }> = ({ token }) => {
amount={<DepositRewards token={token} />}
/>
</Row>

{/* This vAPY chip is only shown on mobile screens */}
<Row justifyContent="center" sx={{ display: { xs: 'flex', sm: 'none' } }}>
<SiloAssetApyChip token={token as Token} metric="bean" variant="labeled" />
</Row>
{/* Card Carousel */}
<SiloCarousel token={token} />
</Stack>
Expand Down
Loading

0 comments on commit 6991176

Please sign in to comment.