From 23a6a036bfed7532ddcc6f16ab48f49e88287b58 Mon Sep 17 00:00:00 2001 From: GeorginaShall Date: Fri, 27 Dec 2024 11:26:08 +0200 Subject: [PATCH 1/5] overall-home+scroll+back-on-mobile --- src/components/stakingCalculator.tsx | 2 +- src/components/stakingPoolCard.tsx | 10 ++--- src/components/stakingPoolDetailsView.tsx | 4 +- src/components/stakingPoolsList.tsx | 8 ++-- src/components/unstakingCalculator.tsx | 2 +- src/components/withdrawUnstakedZilPanel.tsx | 16 ++++--- src/components/withdrawZilView.tsx | 11 +++-- src/pages/index.tsx | 48 ++++++++++++++++----- 8 files changed, 67 insertions(+), 34 deletions(-) diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx index 450622c..8635548 100644 --- a/src/components/stakingCalculator.tsx +++ b/src/components/stakingCalculator.tsx @@ -206,7 +206,7 @@ const StakingCalculator: React.FC = () => { } {stakeContractCallError && ( -
+
{stakeContractCallError.message}
)} diff --git a/src/components/stakingPoolCard.tsx b/src/components/stakingPoolCard.tsx index 804c6c7..7d3695a 100644 --- a/src/components/stakingPoolCard.tsx +++ b/src/components/stakingPoolCard.tsx @@ -49,7 +49,7 @@ const StakingPoolCard: React.FC = ({ {stakingPoolData.definition.tokenSymbol}
-
+
{userStakingPoolData && userStakingPoolData.stakingTokenAmount ? ( <> @@ -60,7 +60,7 @@ const StakingPoolCard: React.FC = ({ )} ${stakingPoolData.definition.tokenSymbol}`} ) : ( - - + - )}
= ({ { stakingPoolData.data ? (
= 50 ? 'text-red1' : stakingPoolData.data.votingPower * 100 >= 30 @@ -90,7 +90,7 @@ const StakingPoolCard: React.FC = ({
) : ( <> - VP + VP ) @@ -108,7 +108,7 @@ const StakingPoolCard: React.FC = ({ }
-
+
APR{' '} { stakingPoolData.data ? ( diff --git a/src/components/stakingPoolDetailsView.tsx b/src/components/stakingPoolDetailsView.tsx index 1b911d2..11008f1 100644 --- a/src/components/stakingPoolDetailsView.tsx +++ b/src/components/stakingPoolDetailsView.tsx @@ -74,8 +74,8 @@ const StakingPoolDetailsView: React.FC = ({ const humanReadableStakingToken = (value: bigint) => formatUnitsToHumanReadable(value, stakingPoolData.definition.tokenDecimals); return ( -
diff --git a/src/components/stakingPoolsList.tsx b/src/components/stakingPoolsList.tsx index 40f8a95..57ff5d4 100644 --- a/src/components/stakingPoolsList.tsx +++ b/src/components/stakingPoolsList.tsx @@ -50,11 +50,11 @@ const StakingPoolsList: React.FC = () => { return ( <> -
+
Liquid Validators
-
+
{ />
-
+
{sortedStakingPoolsData.map(({ stakingPool, userData }) => ( {
{unstakeContractCallError && ( -
+
{unstakeContractCallError.message}
)} diff --git a/src/components/withdrawUnstakedZilPanel.tsx b/src/components/withdrawUnstakedZilPanel.tsx index 708b69c..faf0e2a 100644 --- a/src/components/withdrawUnstakedZilPanel.tsx +++ b/src/components/withdrawUnstakedZilPanel.tsx @@ -65,12 +65,16 @@ const WithdrawZilPanel: React.FC = ({ >
{stakingPoolData.data ? ( -
- {parseFloat( - formatUnits(item.zilAmount, 18) - ).toFixed(3)}{' '} - ZIL -
+
+
+ {parseFloat( + formatUnits(item.zilAmount, 18) + ).toFixed(3)}{' '} + ZIL +
+
avZIL
+ +
) : (
)} diff --git a/src/components/withdrawZilView.tsx b/src/components/withdrawZilView.tsx index 683792d..2be2c56 100644 --- a/src/components/withdrawZilView.tsx +++ b/src/components/withdrawZilView.tsx @@ -22,20 +22,23 @@ const WithdrawZilView: React.FC = () => { ] return ( -
-
+
+

Staking Portal Claims

-

+

Below are withdrawal claims waiting for you

{ unstakingItems.length > 0 ? ( -
{ unstakingItems.map((item, claimIdx) => ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3bf4d07..b6ce788 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -48,7 +48,7 @@ const HomePage = () => { const [mobileShowClaims, setMobileShowClaims] = useState(false); const mobileOverlayWrapper = (children: React.ReactNode) => ( -
+
{children}
) @@ -59,7 +59,8 @@ const HomePage = () => { !isWalletConnected ? ( ) : stakingPoolForView ? ( -
+
{ selectStakingPoolForView(null); @@ -105,14 +106,14 @@ const HomePage = () => { ) const mobileBottomNavition = ( -
+
{ isWalletConnected ? ( <> { mobileShowClaims && ( -
+
+ ) } +
+ {connectWallet} +
+ + ) - } + })
) @@ -187,7 +212,7 @@ const HomePage = () => {
{/* Header */} -
+
@@ -233,10 +258,11 @@ const HomePage = () => {
-
-
+
+
{/* Left column */} -
+
From 6dd294e9ef7e3d54e352a92cd5dfd6dd711da45f Mon Sep 17 00:00:00 2001 From: GeorginaShall Date: Fri, 27 Dec 2024 12:16:30 +0200 Subject: [PATCH 2/5] APT-1620-APR-basic-tooltip --- src/components/stakingCalculator.tsx | 6 ++++-- src/components/stakingPoolCard.tsx | 10 ++++++++-- src/components/unstakingCalculator.tsx | 6 ++++-- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx index 8635548..71924cf 100644 --- a/src/components/stakingCalculator.tsx +++ b/src/components/stakingCalculator.tsx @@ -1,6 +1,6 @@ import { StakingPoolsStorage } from "@/contexts/stakingPoolsStorage"; import { useEffect, useState } from "react"; -import { Button, Input } from "antd"; +import { Button, Input, Tooltip } from "antd"; import { WalletConnector } from "@/contexts/walletConnector"; import { formatPercentage, convertZilValueInToken, getTxExplorerUrl, formatAddress } from "@/misc/formatting"; import { formatUnits, parseEther } from "viem"; @@ -168,7 +168,9 @@ const StakingCalculator: React.FC = () => { )}
-
APR:
+ + APR + {stakingPoolForView!.stakingPool.data ? ( <> ~{formatPercentage( diff --git a/src/components/stakingPoolCard.tsx b/src/components/stakingPoolCard.tsx index 7d3695a..10a3f52 100644 --- a/src/components/stakingPoolCard.tsx +++ b/src/components/stakingPoolCard.tsx @@ -1,6 +1,7 @@ import { formatPercentage, formatUnitsToHumanReadable } from '@/misc/formatting'; import { StakingPool } from '@/misc/stakingPoolsConfig'; import { UserStakingPoolData } from '@/misc/walletsConfig'; +import { Tooltip } from 'antd'; import Image from 'next/image'; interface StakingPoolCardProps { @@ -108,8 +109,13 @@ const StakingPoolCard: React.FC = ({ }
-
- APR{' '} + + +
+ + APR + + { stakingPoolData.data ? ( <> diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx index cd76563..660ffa7 100644 --- a/src/components/unstakingCalculator.tsx +++ b/src/components/unstakingCalculator.tsx @@ -1,6 +1,6 @@ import { StakingPoolsStorage } from '@/contexts/stakingPoolsStorage'; import { useEffect, useState } from 'react'; -import { Button, Input } from 'antd'; +import { Button, Input, Tooltip } from 'antd'; import { formatPercentage, convertTokenToZil, @@ -186,7 +186,9 @@ const UnstakingCalculator: React.FC = () => {
-
APR:
+ + APR + {stakingPoolForView!.stakingPool.data ? ( <> ~ From c55d58e9a8c1822b4c32d1dd76998d18c2396171 Mon Sep 17 00:00:00 2001 From: GeorginaShall Date: Fri, 27 Dec 2024 13:08:37 +0200 Subject: [PATCH 3/5] APT-1617-conversion-fix --- src/components/stakingCalculator.tsx | 21 ++++++++++++--------- src/components/unstakingCalculator.tsx | 11 ++++++----- src/misc/formatting.ts | 2 +- 3 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx index 71924cf..6bab09c 100644 --- a/src/components/stakingCalculator.tsx +++ b/src/components/stakingCalculator.tsx @@ -32,7 +32,7 @@ const StakingCalculator: React.FC = () => { const [zilToStake, setZilToStake] = useState(formatUnits(stakingPoolForView?.stakingPool.definition.minimumStake || 0n, 18)); useEffect(() => { - setZilToStake("0.00"); + setZilToStake("1"); }, [stakingPoolForView]); const handleChange = (e: React.ChangeEvent) => { @@ -48,7 +48,7 @@ const StakingCalculator: React.FC = () => { }; const handleFocus = () => { - if (zilToStake === '0.00') setZilToStake(''); + if (zilToStake === '') setZilToStake('1'); }; const handleBlur = () => { @@ -62,7 +62,7 @@ const StakingCalculator: React.FC = () => { } setZilToStake(valueTemp.replace(/0*(\d+)/, '$1')); - if (zilToStake === '') setZilToStake('0.00'); + if (zilToStake === '') setZilToStake('1'); }; const zilToStakeNumber = parseFloat(zilToStake); @@ -102,11 +102,14 @@ const StakingCalculator: React.FC = () => { <> ~ - {convertZilValueInToken( - zilToStakeNumber, - stakingPoolForView.stakingPool.data - .zilToTokenRate - )}{' '} + { + !isNaN(zilToStakeNumber) && !isNaN(stakingPoolForView.stakingPool.data + .zilToTokenRate) + ? convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data + .zilToTokenRate) + : "" + } + {' '} { stakingPoolForView.stakingPool.definition .tokenSymbol @@ -164,7 +167,7 @@ const StakingCalculator: React.FC = () => {
Rate
{stakingPoolForView!.stakingPool.data && ( -
{`1 ZIL = ~${convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data.zilToTokenRate)} ${stakingPoolForView.stakingPool.definition.tokenSymbol}`}
+
{`1 ZIL = ~${ stakingPoolForView.stakingPool.data.zilToTokenRate} ${stakingPoolForView.stakingPool.definition.tokenSymbol}`}
)}
diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx index 660ffa7..e12d8cd 100644 --- a/src/components/unstakingCalculator.tsx +++ b/src/components/unstakingCalculator.tsx @@ -32,7 +32,7 @@ const UnstakingCalculator: React.FC = () => { }; const handleFocus = () => { - if (zilToUnstake === '0.00') setZilToUnstake(''); + if (zilToUnstake === '') setZilToUnstake('1'); }; const handleBlur = () => { @@ -44,11 +44,11 @@ const UnstakingCalculator: React.FC = () => { valueTemp = zilToUnstake.slice(0, -1); } setZilToUnstake(valueTemp.replace(/0*(\d+)/, '$1')); - if (zilToUnstake === '') setZilToUnstake('0.00'); + if (zilToUnstake === '') setZilToUnstake('1'); }; useEffect(() => { - setZilToUnstake('0.00'); + setZilToUnstake('1'); }, [stakingPoolForView]); const stakedTokenAvailable = @@ -172,13 +172,14 @@ const UnstakingCalculator: React.FC = () => { = ~ {formatUnitsToHumanReadable( convertTokenToZil( - zilInWei, + parseEther('1'), stakingPoolForView.stakingPool.data .zilToTokenRate ), 18 )} - + + ) : (
)} diff --git a/src/misc/formatting.ts b/src/misc/formatting.ts index 283ea3c..e44681f 100644 --- a/src/misc/formatting.ts +++ b/src/misc/formatting.ts @@ -38,7 +38,7 @@ export function convertTokenToZil(tokenAmount: bigint, zilToTokenRate: number): } export function convertZilValueInToken(zilAmount: number, zilToTokenRate: number) { - return `${(zilAmount * zilToTokenRate).toFixed(2)}` + return `${(zilAmount * zilToTokenRate).toFixed(2)}` } export function formatUnitsToHumanReadable(value: bigint, decimals: number): string { From eff9cbe48835c2cb1ff61076dd45c20f6c90e4e2 Mon Sep 17 00:00:00 2001 From: GeorginaShall Date: Fri, 27 Dec 2024 15:42:04 +0200 Subject: [PATCH 4/5] APT-1612-input+tabs-similarity --- src/components/stakingCalculator.tsx | 12 ++++++------ src/components/unstakingCalculator.tsx | 2 +- src/components/withdrawUnstakedZilPanel.tsx | 4 ++-- src/styles/globals.css | 2 +- tailwind.config.ts | 5 ++--- 5 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx index 6bab09c..1d5a53b 100644 --- a/src/components/stakingCalculator.tsx +++ b/src/components/stakingCalculator.tsx @@ -62,7 +62,7 @@ const StakingCalculator: React.FC = () => { } setZilToStake(valueTemp.replace(/0*(\d+)/, '$1')); - if (zilToStake === '') setZilToStake('1'); + if (zilToStake === '') setZilToStake('0'); }; const zilToStakeNumber = parseFloat(zilToStake); @@ -84,7 +84,7 @@ const StakingCalculator: React.FC = () => { stakingPoolForView && ( <>
-
+
{ prefix="ZIL" status={!zilToStakeOk ? 'error' : undefined} /> - + {stakingPoolForView!.stakingPool.data ? ( <> - + ~ { !isNaN(zilToStakeNumber) && !isNaN(stakingPoolForView.stakingPool.data @@ -115,7 +115,7 @@ const StakingCalculator: React.FC = () => { .tokenSymbol }{' '} - + ~ {formatPercentage( stakingPoolForView!.stakingPool.data.apr @@ -125,7 +125,7 @@ const StakingCalculator: React.FC = () => { ) : (
)} - APR + APR
diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx index e12d8cd..43f2095 100644 --- a/src/components/unstakingCalculator.tsx +++ b/src/components/unstakingCalculator.tsx @@ -82,7 +82,7 @@ const UnstakingCalculator: React.FC = () => { stakingPoolForView && (
-
+
= ({ {!!availableUnstake?.length ? ( availableUnstake.map((item, claimIdx) => ( -
@@ -93,7 +93,7 @@ const WithdrawZilPanel: React.FC = ({
)) ) : !!pendingUnstake?.length ? ( -
+
Next available reward
diff --git a/src/styles/globals.css b/src/styles/globals.css index 8369684..996cce1 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -101,7 +101,7 @@ body { } .btn-secondary-colored { - @apply !gap-0 !bg-transparent !whitespace-normal py-3 px-8 w-full rounded font-int-extrabold text-12 leading-6 tracking-widest !h-auto uppercase border-solid border-2 cursor-pointer duration-500 ease-in-out; + @apply !gap-0 !bg-transparent !whitespace-normal py-1.5 px-4 w-full rounded font-int-extrabold text-12 leading-6 tracking-widest !h-auto uppercase border-solid border-2 cursor-pointer duration-500 ease-in-out; &:hover { @apply !opacity-80; diff --git a/tailwind.config.ts b/tailwind.config.ts index 56631c8..c4cc5d3 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,9 +13,8 @@ const config: Config = { "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 'primary-gradient' : 'radial-gradient(120.62% 683.52% at 110.84% 156.15%, #C5FFFD 6.84%, rgba(111, 255, 194, 0.760784) 48.36%, #00DABA 100%)', - 'gradientbg': 'linear-gradient(129.93deg, rgba(175, 175, 175, 0.12) 16.6%, rgba(17, 243, 179, 0.12) 90.65%)', - 'darkbg': 'linear-gradient(314.92deg, rgba(17, 39, 49, 0.4) 28.08%, rgba(9, 9, 9, 0.4) 97.04%)', - + 'gradientbg': 'linear-gradient(129.93deg, rgba(175, 175, 175, 0.12) 16.6%, rgba(17, 243, 179, 0.12) 90.65%)', + 'darkbg': 'linear-gradient(314.92deg, rgba(17, 39, 49, 0.4) 28.08%, rgba(9, 9, 9, 0.4) 97.04%)', }, colors: { black1: '#010101', From f73e9d6ed6c62f42162781f128b734f02e012af1 Mon Sep 17 00:00:00 2001 From: GeorginaShall Date: Mon, 30 Dec 2024 13:33:13 +0200 Subject: [PATCH 5/5] suggestions-fixes --- src/components/stakingCalculator.tsx | 6 +++--- src/components/unstakingCalculator.tsx | 4 ++-- src/pages/index.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx index 1d5a53b..3498852 100644 --- a/src/components/stakingCalculator.tsx +++ b/src/components/stakingCalculator.tsx @@ -32,7 +32,7 @@ const StakingCalculator: React.FC = () => { const [zilToStake, setZilToStake] = useState(formatUnits(stakingPoolForView?.stakingPool.definition.minimumStake || 0n, 18)); useEffect(() => { - setZilToStake("1"); + onMinClick(); }, [stakingPoolForView]); const handleChange = (e: React.ChangeEvent) => { @@ -48,7 +48,7 @@ const StakingCalculator: React.FC = () => { }; const handleFocus = () => { - if (zilToStake === '') setZilToStake('1'); + if (zilToStake === '') onMinClick(); }; const handleBlur = () => { @@ -62,7 +62,7 @@ const StakingCalculator: React.FC = () => { } setZilToStake(valueTemp.replace(/0*(\d+)/, '$1')); - if (zilToStake === '') setZilToStake('0'); + if (zilToStake === '') onMinClick(); }; const zilToStakeNumber = parseFloat(zilToStake); diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx index 43f2095..153151a 100644 --- a/src/components/unstakingCalculator.tsx +++ b/src/components/unstakingCalculator.tsx @@ -32,7 +32,7 @@ const UnstakingCalculator: React.FC = () => { }; const handleFocus = () => { - if (zilToUnstake === '') setZilToUnstake('1'); + if (zilToUnstake === '') onMaxClick(); }; const handleBlur = () => { @@ -44,7 +44,7 @@ const UnstakingCalculator: React.FC = () => { valueTemp = zilToUnstake.slice(0, -1); } setZilToUnstake(valueTemp.replace(/0*(\d+)/, '$1')); - if (zilToUnstake === '') setZilToUnstake('1'); + if (zilToUnstake === '') onMaxClick(); }; useEffect(() => { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b6ce788..3835179 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -204,7 +204,7 @@ const HomePage = () => { ) - }) + }
)