Skip to content

Commit 1d5e410

Browse files
linkielinklinkielink
authored
Merge pull request #1634 from mars-protocol/develop
v2.11.4
2 parents 58e6d22 + a0cb1bc commit 1d5e410

File tree

2 files changed

+91
-63
lines changed

2 files changed

+91
-63
lines changed

‎src/components/staking/MarsStaking.tsx‎

Lines changed: 90 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import Button from 'components/common/Button'
33
import { Callout, CalloutType } from 'components/common/Callout'
44
import Card from 'components/common/Card'
55
import { FormattedNumber } from 'components/common/FormattedNumber'
6-
import { MarsToken } from 'components/common/Icons'
6+
import { ChevronDown, ChevronRight, MarsToken } from 'components/common/Icons'
77
import Text from 'components/common/Text'
88
import TierProgressBar from 'components/staking/TierProgressBar'
99
import WalletConnectButton from 'components/Wallet/WalletConnectButton'
10+
import { LocalStorageKeys } from 'constants/localStorageKeys'
1011
import { BN_ZERO } from 'constants/math'
1112
import useChainConfig from 'hooks/chain/useChainConfig'
1213
import useCurrentChainId from 'hooks/localStorage/useCurrentChainId'
14+
import useLocalStorage from 'hooks/localStorage/useLocalStorage'
1315
import { useStakedMars, useUnstakedMars } from 'hooks/staking/useNeutronStakingData'
1416
import { useCallback } from 'react'
1517
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
@@ -21,6 +23,10 @@ import { formatReleaseDate } from 'utils/dateTime'
2123
import { getRoute } from 'utils/route'
2224

2325
export default function MarsStaking({ className }: { className?: string }) {
26+
const [isExpanded, setIsExpanded] = useLocalStorage<boolean>(
27+
LocalStorageKeys.MARS_STAKING_EXPANDED,
28+
true,
29+
)
2430
const { address: urlAddress } = useParams()
2531
const connectedAddress = useStore((s) => s.address)
2632
const chainConfig = useChainConfig()
@@ -109,79 +115,100 @@ export default function MarsStaking({ className }: { className?: string }) {
109115
<Card
110116
className={className}
111117
title={
112-
<div className='flex items-center gap-2 w-full p-4 font-semibold bg-white/10'>
118+
<div
119+
className='flex items-center gap-2 w-full p-4 font-semibold bg-white/10 cursor-pointer hover:bg-white/15 transition-colors'
120+
onClick={() => setIsExpanded(!isExpanded)}
121+
>
113122
<MarsToken className='w-6 h-6' />
114-
<Text size='lg' className=''>
123+
<Text size='lg' className='flex-1'>
115124
MARS Staking
116125
</Text>
126+
{isExpanded ? (
127+
<ChevronDown className='w-4 h-4' />
128+
) : (
129+
<ChevronRight className='w-4 h-4' />
130+
)}
117131
</div>
118132
}
119-
contentClassName='p-4 space-y-4'
133+
contentClassName=''
120134
>
121-
{(connectedAddress || displayAddress) && <TierProgressBar connected={!!connectedAddress} />}
122-
<Callout type={CalloutType.INFO}>
123-
If you want to learn more about the Mars Staking Tiers, you can find the details on our{' '}
124-
<a
125-
className='underline hover:no-underline'
126-
href='https://docs.marsprotocol.io/governance/mars-staking'
127-
target='_blank'
128-
rel='noopener noreferrer'
129-
>
130-
MARS Staking Docs Page
131-
</a>
132-
.
133-
</Callout>
134-
<div className='space-y-3'>
135-
<div className='flex justify-between items-center'>
136-
<Text size='sm' className='text-white/60'>
137-
Currently Staked
138-
</Text>
139-
<FormattedNumber
140-
amount={stakedAmount?.toNumber() || 0}
141-
options={{ abbreviated: false, suffix: ' MARS', maxDecimals: MARS_DECIMALS }}
142-
className='text-sm font-medium'
143-
/>
144-
</div>
135+
<div
136+
className={`grid transition-[grid-template-rows] duration-300 ease-in-out ${
137+
isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
138+
}`}
139+
>
140+
<div className='overflow-hidden'>
141+
<div className='p-4 space-y-4'>
142+
{(connectedAddress || displayAddress) && (
143+
<TierProgressBar connected={!!connectedAddress} />
144+
)}
145+
<Callout type={CalloutType.INFO}>
146+
If you want to learn more about the Mars Staking Tiers, you can find the details on
147+
our{' '}
148+
<a
149+
className='underline hover:no-underline'
150+
href='https://docs.marsprotocol.io/governance/mars-staking'
151+
target='_blank'
152+
rel='noopener noreferrer'
153+
>
154+
MARS Staking Docs Page
155+
</a>
156+
.
157+
</Callout>
158+
<div className='space-y-3'>
159+
<div className='flex justify-between items-center'>
160+
<Text size='sm' className='text-white/60'>
161+
Currently Staked
162+
</Text>
163+
<FormattedNumber
164+
amount={stakedAmount?.toNumber() || 0}
165+
options={{ abbreviated: false, suffix: ' MARS', maxDecimals: MARS_DECIMALS }}
166+
className='text-sm font-medium'
167+
/>
168+
</div>
145169

146-
{unstakedData?.totalUnstaked?.gt(0) && (
147-
<div className='flex justify-between items-center'>
148-
<Text size='sm' className='text-white/60'>
149-
Unstaking
150-
</Text>
151-
<FormattedNumber
152-
amount={unstakedData.totalUnstaked.toNumber()}
153-
options={{ abbreviated: false, suffix: ' MARS', maxDecimals: MARS_DECIMALS }}
154-
className='text-sm font-medium text-warning'
155-
/>
156-
</div>
157-
)}
170+
{unstakedData?.totalUnstaked?.gt(0) && (
171+
<div className='flex justify-between items-center'>
172+
<Text size='sm' className='text-white/60'>
173+
Unstaking
174+
</Text>
175+
<FormattedNumber
176+
amount={unstakedData.totalUnstaked.toNumber()}
177+
options={{ abbreviated: false, suffix: ' MARS', maxDecimals: MARS_DECIMALS }}
178+
className='text-sm font-medium text-warning'
179+
/>
180+
</div>
181+
)}
158182

159-
{unstakedData?.totalReady?.gt(0) && (
160-
<div className='flex justify-between items-center'>
161-
<Text size='sm' className='text-white/60'>
162-
Ready to Withdraw
163-
</Text>
164-
<FormattedNumber
165-
amount={unstakedData.totalReady.toNumber()}
166-
options={{ abbreviated: false, suffix: ' MARS', maxDecimals: MARS_DECIMALS }}
167-
className='text-sm font-medium text-success'
168-
/>
169-
</div>
170-
)}
183+
{unstakedData?.totalReady?.gt(0) && (
184+
<div className='flex justify-between items-center'>
185+
<Text size='sm' className='text-white/60'>
186+
Ready to Withdraw
187+
</Text>
188+
<FormattedNumber
189+
amount={unstakedData.totalReady.toNumber()}
190+
options={{ abbreviated: false, suffix: ' MARS', maxDecimals: MARS_DECIMALS }}
191+
className='text-sm font-medium text-success'
192+
/>
193+
</div>
194+
)}
195+
196+
{unstakedData?.nextReleaseTime && (
197+
<div className='flex justify-between items-center'>
198+
<Text size='sm' className='text-white/60'>
199+
Next Available
200+
</Text>
201+
<Text size='sm' className='text-white/80'>
202+
{formatReleaseDate(unstakedData.nextReleaseTime)}
203+
</Text>
204+
</div>
205+
)}
206+
</div>
171207

172-
{unstakedData?.nextReleaseTime && (
173-
<div className='flex justify-between items-center'>
174-
<Text size='sm' className='text-white/60'>
175-
Next Available
176-
</Text>
177-
<Text size='sm' className='text-white/80'>
178-
{formatReleaseDate(unstakedData.nextReleaseTime)}
179-
</Text>
208+
{renderActionButton()}
180209
</div>
181-
)}
210+
</div>
182211
</div>
183-
184-
{renderActionButton()}
185212
</Card>
186213
</>
187214
)

‎src/constants/localStorageKeys.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,5 @@ export enum LocalStorageKeys {
3434
VAULT_PAGE_WARNING = 'vaultPageWarning',
3535
VAULT_COMMUNITY_INFORMATION = 'vaultCommunityInformation',
3636
MARS_FEE_TOKEN = 'marsFeeToken',
37+
MARS_STAKING_EXPANDED = 'marsStakingExpanded',
3738
}

0 commit comments

Comments
 (0)