forked from forbole/big-dipper-2.0-cosmos
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #8 from stratosnet/feat/qb-2037/change-metrics
Feat/qb 2037/change metrics
- Loading branch information
Showing
103 changed files
with
7,357 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
apps/web-stratos/src/components/nav/components/title_bar/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import Typography from '@mui/material/Typography'; | ||
| import useAppTranslation from '@/hooks/useAppTranslation'; | ||
| import { FC } from 'react'; | ||
| import { useRecoilValue } from 'recoil'; | ||
| import ChainIcon from '@/components/ChainIcon'; | ||
| import useStyles from '@/components/nav/components/title_bar/styles'; | ||
| import { useFormatMarket } from '@/components/nav/components/title_bar/utils'; | ||
| import { readMarket } from '@/recoil/market'; | ||
|
|
||
| type TitleBarProps = { | ||
| className?: string; | ||
| title: string; | ||
| }; | ||
|
|
||
| const TitleBar: FC<TitleBarProps> = ({ className, title }) => { | ||
| const { t } = useAppTranslation('common'); | ||
| const { classes, cx } = useStyles(); | ||
| const marketState = useRecoilValue(readMarket); | ||
|
|
||
| const market = useFormatMarket(marketState); | ||
|
|
||
| return ( | ||
| <div className={cx(classes.root, className)}> | ||
| {!title && <ChainIcon type="logo" className={classes.logo} alt="logo" />} | ||
| {!!title && <Typography variant="h1">{title}</Typography>} | ||
| <div className={classes.content}> | ||
| {market.map((x) => ( | ||
| <div key={x.key} className={classes.item}> | ||
| <Typography variant="body1" className="label"> | ||
| {t(x.key)} | ||
| </Typography> | ||
| <Typography variant="body1">{x.data}</Typography> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default TitleBar; |
59 changes: 59 additions & 0 deletions
59
apps/web-stratos/src/components/nav/components/title_bar/utils.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import numeral from 'numeral'; | ||
| import chainConfig from '@/chainConfig'; | ||
| import { type AtomState } from '@/recoil/market'; | ||
| import { formatNumber } from '@/utils/format_token'; | ||
| import { useTokenomics } from '@/screens/home/components/tokenomics/hooks'; | ||
| import { prettyFormat } from '@/screens/home/components/tokenomics/utils'; | ||
|
|
||
| const { primaryTokenUnit, tokenUnits } = chainConfig(); | ||
|
|
||
| export const useFormatMarket = (data: AtomState) => { | ||
| const { data: tokenomics } = useTokenomics(); | ||
| const exludedItems = [null, 0]; | ||
| const marketCap = exludedItems.includes(data.marketCap) | ||
| ? 'N/A' | ||
| : `$${formatNumber(data.marketCap?.toString() ?? '', 2)}`; | ||
|
|
||
| const miningReward = tokenomics?.miningReward | ||
| ? `${prettyFormat(tokenomics?.miningReward, 18, 0)} ${tokenUnits[ | ||
| primaryTokenUnit | ||
| ].display.toUpperCase()}/epoch` | ||
| : 'N/A'; | ||
|
|
||
| const apr = | ||
| tokenomics?.miningReward && tokenomics?.bonded | ||
| ? `${prettyFormat( | ||
| tokenomics?.miningReward | ||
| .mul(6 * 24 * 365) | ||
| .mul(1_000_000) | ||
| .div(tokenomics?.bonded), | ||
| 4, | ||
| 2 | ||
| )}%` | ||
| : 'N/A'; | ||
|
|
||
| return [ | ||
| { | ||
| key: 'marketCap', | ||
| data: marketCap, | ||
| }, | ||
| { | ||
| key: 'miningReward', | ||
| data: miningReward, | ||
| }, | ||
| { | ||
| key: 'apr', | ||
| data: apr, | ||
| }, | ||
| { | ||
| key: 'supply', | ||
| data: `${formatNumber(data.supply.value, 2)} ${data.supply.displayDenom.toUpperCase()}`, | ||
| }, | ||
| { | ||
| key: 'communityPool', | ||
| data: `${numeral(data.communityPool.value).format( | ||
| '0,0.00' | ||
| )} ${data.communityPool.displayDenom.toUpperCase()}`, | ||
| }, | ||
| ]; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { GetServerSidePropsContext } from 'next'; | ||
| import { UserConfig } from 'next-i18next'; | ||
| import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; | ||
|
|
||
| function withGetServerSideProps(nextI18NextConfig: UserConfig, ...namespacesRequired: string[]) { | ||
| const namespaceForApp = process.env.NEXT_PUBLIC_APP_NAME ?? ''; | ||
| return async ({ locale }: GetServerSidePropsContext) => ({ | ||
| props: { | ||
| ...(await serverSideTranslations( | ||
| locale || 'en', | ||
| ['common', namespaceForApp, ...namespacesRequired], | ||
| nextI18NextConfig | ||
| )), | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| export default withGetServerSideProps; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { GetStaticPropsContext } from 'next'; | ||
| import { UserConfig } from 'next-i18next'; | ||
| import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; | ||
| import { dehydrate, QueryClient } from '@tanstack/react-query'; | ||
| import { getMetrics } from '@/screens/home/components/tokenomics/queries'; | ||
|
|
||
| function withGetStaticProps(nextI18NextConfig: UserConfig, ...namespacesRequired: string[]) { | ||
| const namespaceForApp = process.env.NEXT_PUBLIC_APP_NAME ?? ''; | ||
|
|
||
| return async ({ locale }: GetStaticPropsContext) => { | ||
| const queryClient = new QueryClient(); | ||
| const dehydratedState = dehydrate(queryClient); | ||
| await queryClient.prefetchQuery({ queryKey: ['metrics'], queryFn: getMetrics }); | ||
| return { | ||
| props: { | ||
| dehydratedState, | ||
| ...(await serverSideTranslations( | ||
| locale || 'en', | ||
| ['common', namespaceForApp, ...namespacesRequired], | ||
| nextI18NextConfig | ||
| )), | ||
| }, | ||
| }; | ||
| }; | ||
| } | ||
|
|
||
| export default withGetStaticProps; |
Oops, something went wrong.