@@ -3,43 +3,21 @@ import { FC } from 'react';
33import Stack from '@mui/material/Stack' ;
44import Typography from '@mui/material/Typography' ;
55
6- import { useIsMobile } from '@/shared/hooks/useBreakpoints' ;
7- import FormattedNumber from '@/shared/ui/FormattedNumber' ;
86import SectionWrapper from '@/shared/ui/SectionWrapper' ;
97
8+ import TokenAmount from './TokenAmount' ;
9+
1010type Props = {
1111 amountStaked ?: number | null ;
1212 amountLocked ?: number | null ;
1313 amountWithdrawable ?: number | null ;
1414} ;
1515
16- const renderAmount = ( amount : number | null | undefined , isMobile : boolean ) => {
17- return (
18- < Stack direction = "row" whiteSpace = "nowrap" >
19- < Typography variant = "body2" >
20- < FormattedNumber
21- value = { ( amount || 0 ) * 1e18 }
22- decimalScale = { isMobile ? 4 : 9 }
23- />
24- </ Typography >
25- < Typography
26- variant = "body2"
27- color = "text.secondary"
28- component = "span"
29- ml = { 0.5 }
30- >
31- HMT
32- </ Typography >
33- </ Stack >
34- ) ;
35- } ;
36-
3716const StakeInfo : FC < Props > = ( {
3817 amountStaked,
3918 amountLocked,
4019 amountWithdrawable,
4120} ) => {
42- const isMobile = useIsMobile ( ) ;
4321 if ( ! amountStaked && ! amountLocked && ! amountWithdrawable ) return null ;
4422
4523 return (
@@ -53,23 +31,23 @@ const StakeInfo: FC<Props> = ({
5331 < Typography variant = "subtitle2" width = { 300 } >
5432 Staked Tokens
5533 </ Typography >
56- { renderAmount ( amountStaked , isMobile ) }
34+ < TokenAmount amount = { amountStaked } />
5735 </ Stack >
5836 ) }
5937 { Number . isFinite ( amountLocked ) && (
6038 < Stack gap = { { xs : 1 , md : 0 } } direction = { { sm : 'column' , md : 'row' } } >
6139 < Typography variant = "subtitle2" width = { 300 } >
6240 Locked Tokens
6341 </ Typography >
64- { renderAmount ( amountLocked , isMobile ) }
42+ < TokenAmount amount = { amountLocked } />
6543 </ Stack >
6644 ) }
6745 { Number . isFinite ( amountWithdrawable ) && (
6846 < Stack gap = { { xs : 1 , md : 0 } } direction = { { sm : 'column' , md : 'row' } } >
6947 < Typography variant = "subtitle2" width = { 300 } >
7048 Withdrawable Tokens
7149 </ Typography >
72- { renderAmount ( amountWithdrawable , isMobile ) }
50+ < TokenAmount amount = { amountWithdrawable } />
7351 </ Stack >
7452 ) }
7553 </ Stack >
0 commit comments