Skip to content

Commit 39584dc

Browse files
aalavandhanaalavandhan
committed
UI cleanup
1 parent 1149e9d commit 39584dc

File tree

13 files changed

+89
-69
lines changed

13 files changed

+89
-69
lines changed

‎frontend/src/components/GeyserFirst/GeyserStakeView.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { WalletContext } from 'context/WalletContext'
1111
import { StatsContext } from 'context/StatsContext'
1212
import Web3Context from 'context/Web3Context'
1313
import { TxStateMachine } from 'hooks/useTxStateMachine'
14-
import { amountOrZero } from 'utils/amount'
14+
import { amountOrZero, formatTokenBalance } from 'utils/amount'
1515
import { PositiveInput } from 'components/PositiveInput'
1616
import { SingleTxModal } from 'components/SingleTxModal'
1717
import { GeyserInteractionButton } from './GeyserInteractionButton'
@@ -43,8 +43,7 @@ export const GeyserStakeView = () => {
4343
geyserAction,
4444
} = useContext(GeyserContext)
4545
const { decimals: stakingTokenDecimals, symbol: stakingTokenSymbol, address: stakingTokenAddress } = stakingTokenInfo
46-
const { decimals: rewardTokenDecimals, symbol: rewardTokenSymbol, address: rewardTokenAddress } = rewardTokenInfo
47-
// const { signer } = useContext(Web3Context)
46+
const { symbol: rewardTokenSymbol, address: rewardTokenAddress } = rewardTokenInfo
4847
const { selectedVault, currentLock, withdrawUnlockedFromVault, rewardAmountClaimedOnUnstake } =
4948
useContext(VaultContext)
5049
const { stakingTokenBalance, underlyingTokenBalance, refreshWalletBalances } = useContext(WalletContext)
@@ -56,7 +55,6 @@ export const GeyserStakeView = () => {
5655

5756
const currentStakeAmount = BigNumber.from(ready && currentLock ? currentLock.amount : '0')
5857
const [unstakeConfirmModalOpen, setUnstakeConfirmModalOpen] = useState<boolean>(false)
59-
const [actualRewardsFromUnstake, setActualRewardsFromUnstake] = useState<BigNumber>(BigNumber.from('0'))
6058
const [actualStakingTokensFromUnstake, setActualStakingTokensFromUnstake] = useState<BigNumber>(BigNumber.from('0'))
6159
const [txModalOpen, setTxModalOpen] = useState<boolean>(false)
6260
const [wrapToken, setWrapToken] = useState<number>(1)
@@ -169,7 +167,7 @@ export const GeyserStakeView = () => {
169167
<WithdrawTxMessage
170168
txStateMachine={txStateMachine}
171169
symbol={rewardTokenSymbol}
172-
amount={formatUnits(actualRewardsFromUnstake, rewardTokenDecimals)}
170+
amount={formatUnits(actualStakingTokensFromUnstake, stakingTokenDecimals)}
173171
/>
174172
)
175173

@@ -209,7 +207,7 @@ export const GeyserStakeView = () => {
209207
<span>
210208
Successfully staked{' '}
211209
<b>
212-
{userInput} {stakingTokenSymbol}
210+
{formatTokenBalance(userInput)} {stakingTokenSymbol}
213211
</b>
214212
.
215213
</span>
@@ -257,9 +255,9 @@ export const GeyserStakeView = () => {
257255
<span>
258256
Successfully unstaked{' '}
259257
<b>
260-
{userInput} {stakingTokenSymbol}
258+
{formatTokenBalance(userInput)} {stakingTokenSymbol}
261259
</b>
262-
. Switch to the vault tab to withdraw tokens to your wallet.
260+
.
263261
</span>
264262
}
265263
onClose={onCloseTxModal}

‎frontend/src/components/GeyserFirst/UnstakeTxModal.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,18 @@ export const UnstakeTxModal: React.FC<Props> = ({
5959
if (unstakeTxStateMachine.state !== TxState.MINED)
6060
return <SingleTxMessage txStateMachine={unstakeTxStateMachine} successMessage={unstakeSuccessMessage} />
6161
return (
62-
<div className="flex flex-col space-y-2">
63-
<div>
62+
<div className="flex flex-col space-y-4">
63+
<div className="border-b border-lightGray border-b-2">
6464
<SingleTxMessage txStateMachine={unstakeTxStateMachine} successMessage={unstakeSuccessMessage} />
6565
</div>
66-
<div>{withdrawStakingTxMessage(withdrawStakeStateMachine)}</div>
67-
<div>{withdrawRewardTxMessage(withdrawRewardStateMachine)}</div>
66+
<div className="border-b border-lightGray border-b-2">
67+
{withdrawStakingTxMessage(withdrawStakeStateMachine)}
68+
</div>
69+
<div className="border-b border-lightGray border-b-2">
70+
{withdrawRewardTxMessage(withdrawRewardStateMachine)}
71+
</div>
6872
<span className="text-gray text-xs">
69-
<i>Unlocked tokens can be withdrawn from your vault view at anytime.</i>
73+
<i>Unlocked tokens can be withdrawn from the vault view to your wallet at anytime.</i>
7074
</span>
7175
</div>
7276
)

‎frontend/src/components/GeyserFirst/WithdrawTxMessage.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { TxStateMachine } from 'hooks/useTxStateMachine'
22
import { EtherscanLink } from 'components/EtherscanLink'
3+
import { formatTokenBalance } from 'utils/amount'
34
import { TxState } from '../../constants'
45

56
interface Props {
@@ -20,19 +21,23 @@ export const WithdrawTxMessage: React.FC<Props> = ({
2021
const getTxMessage = () => {
2122
switch (state) {
2223
case TxState.PENDING:
23-
return <span>Withdrawing {symbol} from your vault...</span>
24+
return (
25+
<span>
26+
Withdrawing <b>{symbol}</b> to your wallet...
27+
</span>
28+
)
2429
case TxState.SUBMITTED:
2530
return (
2631
<span>
27-
Withdrawing {symbol} from your vault... View on <EtherscanLink txHash={response?.hash} />
32+
Submitted <b>{symbol}</b> withdrawal transaction. View on <EtherscanLink txHash={response?.hash} />
2833
</span>
2934
)
3035
case TxState.MINED:
3136
return (
3237
<span>
3338
Successfully withdrew{' '}
3439
<b>
35-
{amount} {symbol}
40+
{formatTokenBalance(amount)} {symbol}
3641
</b>{' '}
3742
to your wallet. View on <EtherscanLink txHash={response?.hash} />. {successMessage}
3843
</span>
@@ -42,9 +47,9 @@ export const WithdrawTxMessage: React.FC<Props> = ({
4247
<span>
4348
Unlocked{' '}
4449
<b>
45-
{amount} {symbol}
46-
</b>
47-
. {errorMessage}
50+
{formatTokenBalance(amount)} {symbol}
51+
</b>{' '}
52+
from the vault. {errorMessage}
4853
</span>
4954
)
5055
default:

‎frontend/src/components/Home.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const Home = () => {
7272
<Container>
7373
<WelcomeMessage />
7474
<WelcomeHero tvl={totalTVL} totalRewards={totalRewards} />
75-
{geysersToShow.length > 0 ? (
75+
{geysersToShow.length > 0 && totalTVL > 0 ? (
7676
<GeysersTable>
7777
<thead>
7878
<tr>

‎frontend/src/components/Modal.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const ModalContext = createContext<{
1313
})
1414

1515
const Title: React.FC = ({ children }) => (
16-
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
16+
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900 mb-5">
1717
{children}
1818
</Dialog.Title>
1919
)
@@ -86,15 +86,15 @@ const Container = styled.div`
8686
`
8787

8888
const ContentContainer = styled.div`
89-
${tw`inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl`}
89+
${tw`inline-block min-h-180px w-full w-sm p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl`}
9090
`
9191

9292
const MessageContainer = styled.div`
9393
${tw`mt-2`}
9494
`
9595

9696
const Message = styled.div`
97-
${tw`text-sm`}
97+
${tw`text-sm leading-5`}
9898
`
9999

100100
const FooterContainer = styled.div`

‎frontend/src/components/SingleTxMessage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const SingleTxMessage: React.FC<Props> = ({ txStateMachine: { state, resp
2424
<>
2525
{successMessage}{' '}
2626
<span>
27-
View on <EtherscanLink txHash={response?.hash} />
27+
View on <EtherscanLink txHash={response?.hash} />.
2828
</span>
2929
</>
3030
)

‎frontend/src/components/Table.tsx

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ReactNode } from 'react'
22
import styled from 'styled-components/macro'
33
import tw from 'twin.macro'
4+
import { LoaderDark } from 'styling/styles'
45
import { Align } from '../constants'
56

67
export type Column = {
@@ -20,9 +21,10 @@ export type DataSource = {
2021
interface Props {
2122
columns: Column[]
2223
dataSource: DataSource[]
24+
loading: bool
2325
}
2426

25-
export const Table: React.FC<Props> = ({ columns, dataSource }) => {
27+
export const Table: React.FC<Props> = ({ columns, loading, dataSource }) => {
2628
const getRowFromSource = (source: DataSource) =>
2729
columns.map(({ dataIndex }) => (Object.getOwnPropertyDescriptor(source, dataIndex) ? source[dataIndex] : ''))
2830

@@ -63,28 +65,36 @@ export const Table: React.FC<Props> = ({ columns, dataSource }) => {
6365
</TableHead>
6466

6567
<TableBody>
66-
{rows.length === 0 ? (
68+
{loading ? (
6769
<EmptyRow>
6870
<RowCell colSpan={columns.length}>
69-
<i>Not Avaiable</i>
71+
<LoaderContainer>
72+
<LoaderDark />
73+
</LoaderContainer>
7074
</RowCell>
7175
</EmptyRow>
72-
) : null}
73-
{rows.map((row, rowNumber) => (
74-
<TableRow key={dataSource[rowNumber].key}>
75-
{row.map((cell, colNumber) => (
76-
<RowCell
77-
key={`${dataSource[rowNumber].key}-${columns[colNumber].key}`}
78-
className={`${getAlignmentClass(columns[colNumber].textAlign || Align.LEFT)} ${getPaddingClass(
79-
colNumber,
80-
columns.length,
81-
)}`}
82-
>
83-
{cell}
84-
</RowCell>
85-
))}
86-
</TableRow>
87-
))}
76+
) : (
77+
<></>
78+
)}
79+
{!loading ? (
80+
rows.map((row, rowNumber) => (
81+
<TableRow key={dataSource[rowNumber].key}>
82+
{row.map((cell, colNumber) => (
83+
<RowCell
84+
key={`${dataSource[rowNumber].key}-${columns[colNumber].key}`}
85+
className={`${getAlignmentClass(columns[colNumber].textAlign || Align.LEFT)} ${getPaddingClass(
86+
colNumber,
87+
columns.length,
88+
)}`}
89+
>
90+
{cell}
91+
</RowCell>
92+
))}
93+
</TableRow>
94+
))
95+
) : (
96+
<></>
97+
)}
8898
<Spacer />
8999
</TableBody>
90100
</TableContent>
@@ -121,3 +131,7 @@ const EmptyRow = styled.tr`
121131
${tw`text-xs bg-gray text-white h-40px`}
122132
${tw`sm:px-6 sm:text-base whitespace-nowrap`}
123133
`
134+
135+
const LoaderContainer = styled.div`
136+
${tw`m-auto my-4 flex flex-col flex-wrap w-full items-center justify-center`}
137+
`

‎frontend/src/components/VaultFirst/VaultBalanceView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,15 +108,15 @@ export const VaultBalanceView = () => {
108108

109109
return (
110110
<Container>
111-
<Table columns={columns} dataSource={dataSource} />
111+
<Table columns={columns} dataSource={dataSource} loading={dataSource.length === 0} />
112112
<SingleTxModal
113113
open={modalOpen}
114114
submit={submit}
115115
txSuccessMessage={
116116
<span>
117117
Successfully withdrawn{' '}
118118
<b>
119-
{tokenBalance?.unlockedBalance} {tokenBalance?.symbol}
119+
{formatTokenBalance(tokenBalance?.unlockedBalance)} {tokenBalance?.symbol}
120120
</b>
121121
.
122122
</span>

‎frontend/src/components/VaultFirst/VaultFirstContainer.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@ import { VaultBalanceView } from './VaultBalanceView'
1212
import { UNIVERSAL_VAULT_MSG } from '../../constants'
1313

1414
export const VaultFirstContainer = () => {
15-
const { ready, connectWallet, validNetwork, loading } = useContext(Web3Context)
16-
const { vaults } = useContext(VaultContext)
15+
const { ready, connectWallet, validNetwork } = useContext(Web3Context)
16+
const { vaults, loading } = useContext(VaultContext)
1717
const navigate = useNavigate()
18-
1918
if (loading) return <PageLoader />
2019

2120
if (ready && validNetwork === false) {
@@ -45,7 +44,6 @@ export const VaultFirstContainer = () => {
4544
]}
4645
/>
4746
</Title>
48-
4947
<VaultBalanceView />
5048
</Overlay>
5149
</Container>

‎frontend/src/constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,4 +129,4 @@ export const INFURA_PROJECT_ID = 'dee1a87a734042fcabc2fd116a7b776d'
129129
export const WITHDRAW_UNLOCKED_STAKING_TOKENS_WHEN_UNSTAKING = false
130130

131131
// Enable withdrawing whole unlocked balance of reward tokens when unstaking
132-
export const WITHDRAW_UNLOCKED_REWARD_TOKENS_WHEN_UNSTAKING = true
132+
export const WITHDRAW_UNLOCKED_REWARD_TOKENS_WHEN_UNSTAKING = false

0 commit comments

Comments
 (0)