From 9d5ed6a7451c0c59523f8ce97b45eeedc855cb18 Mon Sep 17 00:00:00 2001 From: GeorginaShall <123496642+GeorginaShall@users.noreply.github.com> Date: Wed, 11 Dec 2024 13:35:01 +0200 Subject: [PATCH] Apt 1585 - APT-1597 - APT-1856 : Right Cards + Input Design + validator card color (#12) * login-claims-sections * validator-details * btns-left+right-v1 * input+its+surrounding * details+btns+lama-comments * removed-double-list * unstake+input-handle-0 * scrollable-sections * APT-1597 * resolved-conflicts * hide-customCTAbtn-addtransaction --- src/assets/svgs/arrow-back-white.svg | 3 + src/assets/svgs/arrow-next-black.svg | 3 + src/assets/svgs/arrow-right-black.svg | 4 + src/components/loginView.tsx | 105 ++++++-- src/components/stakingCalculator.tsx | 211 ++++++++++----- src/components/stakingPoolCard.tsx | 2 +- src/components/stakingPoolDetailsView.tsx | 73 +++-- src/components/stakingPoolsList.tsx | 2 +- src/components/unstakingCalculator.tsx | 284 +++++++++++++------- src/components/withdrawUnstakedZilPanel.tsx | 2 +- src/components/withdrawZilView.tsx | 70 +++-- src/pages/_document.tsx | 2 +- src/pages/index.tsx | 64 +++-- src/styles/globals.css | 126 ++++++++- tailwind.config.ts | 34 ++- 15 files changed, 704 insertions(+), 281 deletions(-) create mode 100644 src/assets/svgs/arrow-back-white.svg create mode 100644 src/assets/svgs/arrow-next-black.svg create mode 100644 src/assets/svgs/arrow-right-black.svg diff --git a/src/assets/svgs/arrow-back-white.svg b/src/assets/svgs/arrow-back-white.svg new file mode 100644 index 0000000..7006d31 --- /dev/null +++ b/src/assets/svgs/arrow-back-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/arrow-next-black.svg b/src/assets/svgs/arrow-next-black.svg new file mode 100644 index 0000000..ca7da53 --- /dev/null +++ b/src/assets/svgs/arrow-next-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/arrow-right-black.svg b/src/assets/svgs/arrow-right-black.svg new file mode 100644 index 0000000..7ed94d0 --- /dev/null +++ b/src/assets/svgs/arrow-right-black.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/loginView.tsx b/src/components/loginView.tsx index f4a045c..f9ff50a 100644 --- a/src/components/loginView.tsx +++ b/src/components/loginView.tsx @@ -1,11 +1,74 @@ +import Image from 'next/image'; +import ArrowRight from '../assets/svgs/arrow-right-black.svg' import { AppConfigStorage } from "@/contexts/appConfigStorage"; import { WalletConnector } from "@/contexts/walletConnector"; import { MOCK_CHAIN } from "@/misc/chainConfig"; import { ConnectButton } from "@rainbow-me/rainbowkit"; import { Button } from "antd"; -const LoginView: React.FC = () => { +const CustomConnectButton = () => { + return ( + + {({ + account, + chain, + openAccountModal, + openChainModal, + openConnectModal, + }) => { + // Not connected + if (!account || !chain) { + return ( + + ); + } + + // Wrong network + if (chain.unsupported) { + return ( + + ); + } + // Connected and correct network + return ( + + ); + }} + + ); +}; +const LoginView: React.FC = () => { + const { appConfig } = AppConfigStorage.useContainer(); @@ -20,29 +83,35 @@ const LoginView: React.FC = () => { type="primary" onClick={connectDummyWallet} loading={isDummyWalletConnecting} - className="btn-primary-cyan rounded-lg" + className="btn-primary-gradient-aqua-lg !w-fit px-14 group" > - CONNECT WALLET - - ) : ( - - ) + Sign In / Connect Wallet + {`arrow + + ) : ( + + ); return ( -
-
-

Liquid Staking
with Zilliqa

-

- Help us Empower and secure the Zilliqa Chain +

+
+

Staking Portal

+

+ Help us Empower and secure the Zilliqa Chain{' '}

-
- { connectWallet } +
+ {connectWallet}
- ) - -} + ); +}; -export default LoginView; \ No newline at end of file +export default LoginView; diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx index 45fcf87..b0c23de 100644 --- a/src/components/stakingCalculator.tsx +++ b/src/components/stakingCalculator.tsx @@ -5,12 +5,12 @@ import { WalletConnector } from "@/contexts/walletConnector"; import { formatPercentage, convertZilValueInToken, getTxExplorerUrl, formatAddress } from "@/misc/formatting"; import { formatUnits, parseEther } from "viem"; import { StakingOperations } from "@/contexts/stakingOperations"; + import { AppConfigStorage } from "@/contexts/appConfigStorage"; import Link from "next/link"; -import { AppConfigStorage } from "@/contexts/appConfigStorage"; const StakingCalculator: React.FC = () => { - + const { appConfig } = AppConfigStorage.useContainer(); @@ -33,26 +33,41 @@ const StakingCalculator: React.FC = () => { const [zilToStake, setZilToStake] = useState(formatUnits(stakingPoolForView?.stakingPool.definition.minimumStake || 0n, 18)); useEffect(() => { - setZilToStake("0"); + setZilToStake("0.00"); }, [stakingPoolForView]); const handleChange = (e: React.ChangeEvent) => { const { value: inputValue } = e.target; const reg = /^-?\d*(\.\d*)?$/; - if (reg.test(inputValue) || inputValue === '' || inputValue === '-') { + if ( + reg.test(inputValue) || + inputValue === '' || + inputValue === '-' + ) { setZilToStake(inputValue); } }; + const handleFocus = () => { + if (zilToStake === '0.00') setZilToStake(''); + }; + const handleBlur = () => { let valueTemp = zilToStake; - if (zilToStake.charAt(zilToStake.length - 1) === '.' || zilToStake === '-') { + + if ( + zilToStake.charAt(zilToStake.length - 1) === '.' || + zilToStake === '-' + ) { valueTemp = zilToStake.slice(0, -1); } setZilToStake(valueTemp.replace(/0*(\d+)/, '$1')); + + if (zilToStake === '') setZilToStake('0.00'); }; const zilToStakeNumber = parseFloat(zilToStake); + const zilInWei = parseEther(zilToStake); const zilToStakeOk = !isNaN(zilToStakeNumber) && zilToStakeNumber <= (zilAvailable || 0n); const canStake = stakingPoolForView?.stakingPool.data && zilToStakeNumber > 0 && zilToStakeNumber <= (zilAvailable || 0n); @@ -64,59 +79,127 @@ const StakingCalculator: React.FC = () => { const onMaxClick = () => { setZilToStake(`${formatUnits(zilAvailable || 0n, 18) }`) } + + + return ( + stakingPoolForView && ( + <> +
+
+
+ + + {stakingPoolForView!.stakingPool.data ? ( + <> + + ~ + {convertZilValueInToken( + zilToStakeNumber, + stakingPoolForView.stakingPool.data + .zilToTokenRate + )}{' '} + { + stakingPoolForView.stakingPool.definition + .tokenSymbol + }{' '} + + + ~ + {formatPercentage( + stakingPoolForView!.stakingPool.data.apr + )} + + + ) : ( +
+ )} + APR + +
- return stakingPoolForView && ( - <> -
-
-
- -
- { - stakingPoolForView!.stakingPool.data ? <> - ~{convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data.zilToTokenRate)} {stakingPoolForView.stakingPool.definition.tokenSymbol} + {formatPercentage(stakingPoolForView!.stakingPool.data.apr)} - :
- } - APR +
+ +
-
- - + +
+
+
+ Commission Fee:{' '} + {stakingPoolForView!.stakingPool.data ? ( + <> + {formatPercentage( + stakingPoolForView!.stakingPool.data.commission + )} + + ) : ( +
+ )} +
+
+ Max transaction cost: {zilToStake ? '0.01' : '0'}$ +
+
+ Unbonding Period: {zilToStake ? '0.01' : '0'}$ +
+
+
+
+
Rate
+ {stakingPoolForView!.stakingPool.data && ( +
{`1 ZIL = ~${convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data.zilToTokenRate)} ${stakingPoolForView.stakingPool.definition.tokenSymbol}`}
+ )} +
+
+
APR:
+ {stakingPoolForView!.stakingPool.data ? ( + <> + ~{formatPercentage( + stakingPoolForView!.stakingPool.data.apr + )} + + ) : ( +
+ )} +
+
-
-
-

You will receive

-

- Reward fee - { - stakingPoolForView!.stakingPool.data ? <> - {formatPercentage(stakingPoolForView!.stakingPool.data.commission)} - :

- } -

-
- -
-

Max transaction cost {zilToStake ? '0.01' : '0' }$

-

- Annual % rate: - { - stakingPoolForView!.stakingPool.data ? <> - {formatPercentage(stakingPoolForView!.stakingPool.data.apr)} - :

- } -

+
+ +
- + + { stakingCallTxHash !== undefined && (
@@ -125,7 +208,7 @@ const StakingCalculator: React.FC = () => {
) - } + } {stakeContractCallError && (
@@ -133,21 +216,11 @@ const StakingCalculator: React.FC = () => {
)} -
- -
-
+ + - ) -} + ) + ); +}; -export default StakingCalculator; \ No newline at end of file +export default StakingCalculator; \ No newline at end of file diff --git a/src/components/stakingPoolCard.tsx b/src/components/stakingPoolCard.tsx index b3f9897..ae5cd87 100644 --- a/src/components/stakingPoolCard.tsx +++ b/src/components/stakingPoolCard.tsx @@ -21,7 +21,7 @@ const StakingPoolCard: React.FC = ({ className={`${ isStakingPoolSelected ? 'gradient-bottom-border ' - : 'border-b-[1.5px] border-black2 rounded-10 gradient-bottom-border-hover' + : 'border-b-[1.5px] border-black2 rounded-10 gradient-bottom-border-hover bg-black3' } ${isStakingPoolSelected && 'bg-black'} hover:cursor-pointer`} onClick={onClick} > diff --git a/src/components/stakingPoolDetailsView.tsx b/src/components/stakingPoolDetailsView.tsx index 65f2d58..30f8dd5 100644 --- a/src/components/stakingPoolDetailsView.tsx +++ b/src/components/stakingPoolDetailsView.tsx @@ -8,6 +8,7 @@ import { StakingPool } from "@/misc/stakingPoolsConfig"; import { UserStakingPoolData, UserUnstakingPoolData } from "@/misc/walletsConfig"; import { DateTime } from "luxon"; import { useState } from "react"; +import { Button } from "antd"; interface StakingPoolDetailsViewProps { stakingPoolData: StakingPool; @@ -33,28 +34,28 @@ const StakingPoolDetailsView: React.FC = ({ const [selectedPane, setSelectedPane] = useState('Stake'); const colorInfoEntry = (title: string, value: string | null) => ( -
-
+
+
{ value }
-
+
{ title }
) - const greyInfoEntry = (title: string, value: string | null) => ( -
+ const greyInfoEntry = (title: string, value: string | JSX.Element | null) => ( +
{ value ? ( -
+
{ value }
) : (
) } -
+
{ title }
@@ -79,33 +80,47 @@ const StakingPoolDetailsView: React.FC = ({ const humanReadableStakingToken = (value: bigint) => formatUnitsToHumanReadable(value, stakingPoolData.definition.tokenDecimals); return ( -
- - {stakingPoolData.definition.name} - - - {stakingPoolData.definition.tokenSymbol} - - -
- - { doesUserHoldAnyFundsInThisPool && colorInfoEntry("Available to stake", `${formatUnitsToHumanReadable(zilAvailable || 0n, 18)} ZIL`) } - { doesUserHoldAnyFundsInThisPool && colorInfoEntry("Staked", `${humanReadableStakingToken(userStakingPoolData?.stakingTokenAmount || 0n)} ${stakingPoolData.definition.tokenSymbol}`) } - { doesUserHoldAnyFundsInThisPool && colorInfoEntry("Unstake requests", pendingUnstakesValue ? `${humanReadableStakingToken(pendingUnstakesValue)} ${stakingPoolData.definition.tokenSymbol}`: "-" ) } - { doesUserHoldAnyFundsInThisPool && colorInfoEntry("Available to claim", availableToClaim ? `${humanReadableStakingToken(availableToClaim)} ${stakingPoolData.definition.tokenSymbol}` : "-") } - - { greyInfoEntry("Voting power", stakingPoolData.data && formatPercentage(stakingPoolData.data.votingPower)) } - { greyInfoEntry("Total supply", stakingPoolData.data && `${humanReadableStakingToken(stakingPoolData.data.tvl)} ${stakingPoolData.definition.tokenSymbol}`) } - { greyInfoEntry("Commission", stakingPoolData.data && formatPercentage(stakingPoolData.data.commission)) } - { greyInfoEntry("Rate", stakingPoolData.data && `ZIL = ${stakingPoolData.data.zilToTokenRate} ${stakingPoolData.definition.tokenSymbol}`) } +
+
+
+ + {stakingPoolData.definition.name} + + + {stakingPoolData.definition.tokenSymbol} + +
+
- -
+
+ {doesUserHoldAnyFundsInThisPool && +
+ { colorInfoEntry("Available to stake", `${formatUnitsToHumanReadable(zilAvailable || 0n, 18)} ZIL`) } + { colorInfoEntry("Staked", `${humanReadableStakingToken(userStakingPoolData?.stakingTokenAmount || 0n)} ${stakingPoolData.definition.tokenSymbol}`) } + { colorInfoEntry("Unstake requests", pendingUnstakesValue ? `${humanReadableStakingToken(pendingUnstakesValue)} ${stakingPoolData.definition.tokenSymbol}`: "-" ) } + { colorInfoEntry("Available to claim", availableToClaim ? `${humanReadableStakingToken(availableToClaim)} ${stakingPoolData.definition.tokenSymbol}` : "-") } +
+ } +
+ { greyInfoEntry("Voting power", stakingPoolData.data && formatPercentage(stakingPoolData.data.votingPower)) } + { greyInfoEntry("Total supply", stakingPoolData.data && `${humanReadableStakingToken(stakingPoolData.data.tvl)} ${stakingPoolData.definition.tokenSymbol}`) } + { greyInfoEntry("Commission", stakingPoolData.data && formatPercentage(stakingPoolData.data.commission)) } + { greyInfoEntry("", stakingPoolData.data && + ( + <> + 1 ZIL =
+ {stakingPoolData.data.zilToTokenRate} {stakingPoolData.definition.tokenSymbol} + + )) } +
+
+
{ ['Stake', 'Unstake', 'Claim'].map((pane) => (
setSelectedPane(pane)} > {pane} diff --git a/src/components/stakingPoolsList.tsx b/src/components/stakingPoolsList.tsx index 0902b6b..40f8a95 100644 --- a/src/components/stakingPoolsList.tsx +++ b/src/components/stakingPoolsList.tsx @@ -73,7 +73,7 @@ const StakingPoolsList: React.FC = () => {
+ scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 lg:pb-10"> {sortedStakingPoolsData.map(({ stakingPool, userData }) => ( { - const { - stakingPoolForView - } = StakingPoolsStorage.useContainer(); + const { stakingPoolForView } = StakingPoolsStorage.useContainer(); - const { - unstake, - isUnstakingInProgress, - unstakeContractCallError, - } = StakingOperations.useContainer(); + const { unstake, isUnstakingInProgress, unstakeContractCallError } = + StakingOperations.useContainer(); - const [zilToUnstake, setZilToUnstake] = useState("0"); + const [zilToUnstake, setZilToUnstake] = useState('0'); const handleChange = (e: React.ChangeEvent) => { const { value: inputValue } = e.target; const reg = /^-?\d*(\.\d*)?$/; - if (reg.test(inputValue) || inputValue === '' || inputValue === '-') { + if ( + reg.test(inputValue) || + inputValue === '' || + inputValue === '-' + ) { setZilToUnstake(inputValue); } }; + const handleFocus = () => { + if (zilToUnstake === '0.00') setZilToUnstake(''); + }; + const handleBlur = () => { let valueTemp = zilToUnstake; - if (zilToUnstake.charAt(zilToUnstake.length - 1) === '.' || zilToUnstake === '-') { + if ( + zilToUnstake.charAt(zilToUnstake.length - 1) === '.' || + zilToUnstake === '-' + ) { valueTemp = zilToUnstake.slice(0, -1); } setZilToUnstake(valueTemp.replace(/0*(\d+)/, '$1')); + if (zilToUnstake === '') setZilToUnstake('0.00'); }; useEffect(() => { - setZilToUnstake("0"); - }, [stakingPoolForView]) + setZilToUnstake('0.00'); + }, [stakingPoolForView]); - const stakedTokenAvailable = stakingPoolForView?.userData?.staked?.stakingTokenAmount || 0; + const stakedTokenAvailable = + stakingPoolForView?.userData?.staked?.stakingTokenAmount || 0; const zilToUnstakeNumber = parseFloat(zilToUnstake); const zilInWei = parseEther(zilToUnstake); - const zilToUnstakeOk = !isNaN(zilToUnstakeNumber) && zilToUnstakeNumber <= stakedTokenAvailable; - const canUnstake = stakingPoolForView?.stakingPool.data && zilToUnstakeNumber > 0 && zilToUnstakeNumber <= stakedTokenAvailable; + const zilToUnstakeOk = + !isNaN(zilToUnstakeNumber) && + zilToUnstakeNumber <= stakedTokenAvailable; + const canUnstake = + stakingPoolForView?.stakingPool.data && + zilToUnstakeNumber > 0 && + zilToUnstakeNumber <= stakedTokenAvailable; const onMaxClick = () => { - setZilToUnstake(`${formatUnits( - stakingPoolForView?.userData?.staked?.stakingTokenAmount || 0n, - stakingPoolForView?.stakingPool.definition.tokenDecimals || 18) - }`) - } + setZilToUnstake( + `${formatUnits( + stakingPoolForView?.userData?.staked?.stakingTokenAmount || + 0n, + stakingPoolForView?.stakingPool.definition.tokenDecimals || 18 + )}` + ); + }; - return stakingPoolForView && ( -
-
-
-
- +
+
+
+ -
- { - stakingPoolForView!.stakingPool.data ? <> - ~{formatUnitsToHumanReadable( - convertTokenToZil(zilInWei, stakingPoolForView.stakingPool.data.zilToTokenRate), - 18 - )} - :
+ onFocus={handleFocus} + prefix={ + stakingPoolForView.stakingPool.definition + .tokenSymbol } - ZIL + status={!zilToUnstakeOk ? 'error' : undefined} + /> +
+ + {stakingPoolForView!.stakingPool.data ? ( + <> + ~ + {formatUnitsToHumanReadable( + convertTokenToZil( + zilInWei, + stakingPoolForView.stakingPool.data + .zilToTokenRate + ), + 18 + )} + + ) : ( +
+ )} + ZIL + + ~5 days
- -
-
- - +
+
+ + +
-
- -
-

You will receive

-

- Reward fee - { - stakingPoolForView!.stakingPool.data ? <> - {formatPercentage(stakingPoolForView!.stakingPool.data.commission)} - :

- } -

-
- -
-

Max transaction cost {zilToUnstake ? '0.01' : '0' }$

-

- Annual % rate: - { - stakingPoolForView!.stakingPool.data ? <> - {formatPercentage(stakingPoolForView!.stakingPool.data.apr)} - :

- } -

-
- {unstakeContractCallError && ( -
- {unstakeContractCallError.message} +
+
+
+ Commission Fee:{' '} + {stakingPoolForView!.stakingPool.data ? ( + <> + {' '} + {formatPercentage( + stakingPoolForView!.stakingPool.data.commission + )}{' '} + + ) : ( +
+ )} +
+
+ Max transaction cost: {zilToUnstake ? '0.01' : '0'}$ +
+
+ Unbonding Period: {zilToUnstake ? '0.01' : '0'}$ +
+
+
+
+
Rate
+
+ {stakingPoolForView!.stakingPool.data ? ( + <> + 1{' '} + { + stakingPoolForView.stakingPool.definition + .tokenSymbol + }{' '} + = ~ + {formatUnitsToHumanReadable( + convertTokenToZil( + zilInWei, + stakingPoolForView.stakingPool.data + .zilToTokenRate + ), + 18 + )} + + ) : ( +
+ )} + ZIL +
+
+
+
APR:
+ {stakingPoolForView!.stakingPool.data ? ( + <> + ~ + {formatPercentage( + stakingPoolForView!.stakingPool.data.apr + )} + + ) : ( +
+ )} +
+
- )} -
- + {unstakeContractCallError && ( +
+ {unstakeContractCallError.message} +
+ )} +
+ +
-
-
- ) -} + ) + ); +}; -export default UnstakingCalculator; \ No newline at end of file +export default UnstakingCalculator; diff --git a/src/components/withdrawUnstakedZilPanel.tsx b/src/components/withdrawUnstakedZilPanel.tsx index cb972b8..e9c33c7 100644 --- a/src/components/withdrawUnstakedZilPanel.tsx +++ b/src/components/withdrawUnstakedZilPanel.tsx @@ -50,7 +50,7 @@ const WithdrawZilPanel: React.FC = ({ ) ) ) : !!pendingUnstake?.length ? ( -
+
Next available Claim
diff --git a/src/components/withdrawZilView.tsx b/src/components/withdrawZilView.tsx index 6c23c37..97620ec 100644 --- a/src/components/withdrawZilView.tsx +++ b/src/components/withdrawZilView.tsx @@ -20,66 +20,80 @@ const WithdrawZilView: React.FC = () => { ] return ( -
-
-

Liquid Staking
with Zilliqa

-

- Below are withdrawal claims waiting for you +

+
+

+ Staking Portal + Claims +

+

+ Below are withdrawal claims waiting for you

{ unstakingItems.length > 0 ? ( -
+
{ unstakingItems.map((item, claimIdx) => (
-
-
+
+
{`${item.stakingPool.definition.name} -
+
{item.stakingPool.definition.name}
-
-
- {item.unstakeInfo.unstakingTokenAmount} {item.stakingPool.definition.tokenSymbol} -
-
- { +
+
+ { item.stakingPool.data ? <> { formatUnitsToHumanReadable( convertTokenToZil(item.unstakeInfo.unstakingTokenAmount, item.stakingPool.data!.zilToTokenRate), 18 ) - } ZIL + } ZIL + : <>
} -
+
+
{item.unstakeInfo.unstakingTokenAmount} {item.stakingPool.definition.tokenSymbol}
+
+
+
+
+
+
+
-
)) } diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index b2fff8b..6e88672 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -4,7 +4,7 @@ export default function Document() { return ( - +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1879962..3bf4d07 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -8,11 +8,14 @@ import { StakingPoolsStorage } from '@/contexts/stakingPoolsStorage'; import { ConnectedWalletType, WalletConnector } from '@/contexts/walletConnector'; import { MOCK_CHAIN } from '@/misc/chainConfig'; import { formatAddress } from '@/misc/formatting'; -import { LeftOutlined, WalletOutlined } from '@ant-design/icons'; +import { WalletOutlined } from '@ant-design/icons'; import { ConnectButton } from '@rainbow-me/rainbowkit'; import { Button, Modal } from 'antd'; import Image from 'next/image'; import { useState } from 'react'; +import ArrowBack from '../assets/svgs/arrow-back-white.svg' +import ArrowNext from '../assets/svgs/arrow-next-black.svg' + const HomePage = () => { const { @@ -56,7 +59,7 @@ const HomePage = () => { !isWalletConnected ? ( ) : stakingPoolForView ? ( -
+
{ selectStakingPoolForView(null); @@ -93,7 +96,7 @@ const HomePage = () => { type="primary" onClick={connectDummyWallet} loading={isDummyWalletConnecting} - className="btn-primary-cyan rounded-lg" + className="btn-primary-gradient-aqua-lg " > CONNECT WALLET @@ -102,49 +105,74 @@ const HomePage = () => { ) const mobileBottomNavition = ( -
+
+
{ isWalletConnected ? ( <> { mobileShowClaims && ( +
+ {`arrow + { stakingPoolForView ? stakingPoolForView?.stakingPool.definition.name : "Back" } +
) } { !mobileShowClaims && stakingPoolForView && ( +
+ > {`arrow + Back +
) } { - !mobileShowClaims && ( + !mobileShowClaims && availableForUnstaking.length + pendingUnstaking.length != 0 && ( +
+
) } @@ -152,11 +180,11 @@ const HomePage = () => { connectWallet ) } -
+
) return ( -
+
{/* Header */}
@@ -205,7 +233,8 @@ const HomePage = () => {
-
+
+
{/* Left column */}
@@ -215,6 +244,7 @@ const HomePage = () => { { mobileOverlayContent } { mobileBottomNavition } +