Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

APT-1658 APT-1660 APT-1665 APT-1667 APT-1668 APT-1666 APT-1662 #25

Merged
merged 8 commits into from
Jan 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/assets/svgs/arrow-back-white.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 40 additions & 0 deletions src/assets/svgs/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions src/components/loginView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,19 @@ const CustomConnectButton = () => {
// Not connected
if (!account || !chain) {
return (
<button
<Button
onClick={openConnectModal}
className="btn-primary-gradient-aqua !w-fit px-14 group flex items-center"
>
Sign In / Connect Wallet
Connect Wallet
<Image
className="ml-3 h-[24px] w-[24px] transform transition-transform ease-out duration-500 group-hover:translate-x-2"
src={ArrowRight}
alt={`arrow icon`}
width={24}
height={24}
/>
</button>
</Button>
);
}

Expand Down Expand Up @@ -85,7 +85,7 @@ const LoginView: React.FC = () => {
loading={isDummyWalletConnecting}
className="btn-primary-gradient-aqua-lg !w-fit px-14 group"
>
Sign In / Connect Wallet
Connect Wallet
<Image
className="ml-3 h-[24px] w-[24px] transform transition-transform ease-out duration-500 group-hover:translate-x-2"
src={ArrowRight}
Expand Down
2 changes: 1 addition & 1 deletion src/components/sortBtn.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const SortBtn: React.FC<SortBtnProps> = ({ variable, isClicked, onClick }) => {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={`duration-700 stroke-gray-600 group-hover:stroke-white ease-in-out ${isClicked ? 'scale-y-[-1]' : ''}`}
className={`duration-700 stroke-gray1 group-hover:stroke-white ease-in-out ${isClicked ? 'scale-y-[-1]' : ''}`}
>
<path
d="M16 3V21"
Expand Down
10 changes: 6 additions & 4 deletions src/components/stakingCalculator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,11 @@ const StakingCalculator: React.FC = () => {
<div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
<div className="h-fit self-center">
<Input
className={`h3 flex items-baseline !bg-transparent !border-transparent ${
zilToStakeOk ? '!text-gray4' : '!text-red1'
}`}
className='h3 flex items-baseline !bg-transparent !border-transparent !text-white1'
// ${
// zilToStakeOk ? '!text-white1' : '!text-red1'
// }

value={zilToStake}
onChange={handleChange}
onFocus={handleFocus}
Expand Down Expand Up @@ -171,7 +173,7 @@ const StakingCalculator: React.FC = () => {
)}
</div>
<div className=" regular-base text-aqua1 flex flex-row xl:gap-5">
<Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
<Tooltip placement='top' arrow={true} color='#555555' className=' mr-1' title="Annual Percentage Rate">
<span>APR </span>
</Tooltip>
{stakingPoolForView!.stakingPool.data ? (
Expand Down
8 changes: 4 additions & 4 deletions src/components/stakingPoolCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
className={`${
isStakingPoolSelected
? 'gradient-bottom-border '
: 'border-b-[1.5px] border-black2 rounded-10 gradient-bottom-border-hover bg-black3'
: 'border-b-[1.5px] border-black2 rounded-10 gradient-bottom-border-hover bg-black1'
} ${isStakingPoolSelected && 'bg-black'} hover:cursor-pointer`}
onClick={onClick}
>
Expand All @@ -43,7 +43,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
<div className="grid w-full">
<div className="flex justify-between items-center lg:mb-2">
<div className="flex ">
<h3 className="h4 text-white2">
<h3 className="h4 text-white1">
{stakingPoolData.definition.name}
</h3>
<div className="base2 ml-2.5">
Expand Down Expand Up @@ -112,7 +112,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({


<div className="flex base-medium max-md:order-1 ">
<Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
<Tooltip placement='top' arrow={true} color='#555555' className=' mr-1' title="Annual Percentage Rate">
<span>APR </span>
</Tooltip>

Expand All @@ -137,7 +137,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
)}`}
</>
) : (
<span className="text-gray2">- {stakingPoolData.definition.tokenSymbol}</span>
<span className="text-gray1">- {stakingPoolData.definition.tokenSymbol}</span>
)}
</div>
</div>
Expand Down
11 changes: 6 additions & 5 deletions src/components/stakingPoolDetailsView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const StakingPoolDetailsView: React.FC<
) : (
<div className="animated-gradient h-[1.5em] w-[4em]"></div>
)}
<div className="text-gray2 info-label xl:whitespace-nowrap">
<div className="text-gray1 info-label xl:whitespace-nowrap">
{title}
</div>
</div>
Expand Down Expand Up @@ -108,11 +108,12 @@ const StakingPoolDetailsView: React.FC<
return (
<div
className="relative overflow-y-auto max-h-[calc(90vh-10vh)] sm:max-h-[calc(90vh-15vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-2"
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray1 hover:scrollbar-thumb-gray1 pb-2
pr-4"
>
<div className="items-center flex justify-between py-1 lg:py-7.5">
<div className="max-lg:ms-1 items-center flex">
<span className="hero lg:h2 text-white2">
<span className="hero lg:h2 text-white1">
{stakingPoolData.definition.name}
</span>
<span className="body1 lg:h4 text-black2 ml-2.5">
Expand Down Expand Up @@ -208,8 +209,8 @@ const StakingPoolDetailsView: React.FC<
key={pane}
className={`body1 lg:base text-center py-7 cursor-pointer border-solid border-b ${
selectedPane === pane
? 'text-white2 border-gradient-1'
: 'text-gray2 border-black2'
? 'text-white1 border-gradient-1'
: 'text-gray1 border-black2'
} `}
onClick={() => setSelectedPane(pane)}
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/stakingPoolsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const StakingPoolsList: React.FC = () => {

return (
<>
<div className="h3 text-white2 sm:max-lg:w-1/4 mb-4 max-h-[10vh]">
<div className="h3 text-white1 sm:max-lg:w-1/4 mb-4 max-h-[10vh]">
Liquid Validators
</div>

Expand All @@ -73,7 +73,7 @@ const StakingPoolsList: React.FC = () => {
</div>

<div className="grid grid-cols-1 gap-2.5 lg:gap-4 overflow-y-auto max-h-[calc(90vh-25vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-20 md:px-7 lg:px-2 xl:px-8">
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray1 hover:scrollbar-thumb-gray1 pb-20 pr-4">
{sortedStakingPoolsData.map(({ stakingPool, userData }) => (
<StakingPoolCard
key={stakingPool.definition.id}
Expand Down
9 changes: 5 additions & 4 deletions src/components/unstakingCalculator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,10 @@ const UnstakingCalculator: React.FC = () => {
<div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
<div className="h-fit self-center">
<Input
className={`h3 flex items-baseline !bg-transparent !border-transparent ${
zilToUnstakeOk ? '!text-gray4' : '!text-red1'
}`}
className='h3 flex items-baseline !bg-transparent !border-transparent !text-white1'
// ${
// zilToUnstakeOk ? '!text-white1' : '!text-red1'
// }
value={zilToUnstake}
onChange={handleChange}
onBlur={handleBlur}
Expand Down Expand Up @@ -187,7 +188,7 @@ const UnstakingCalculator: React.FC = () => {
</div>
</div>
<div className=" regular-base flex flex-row xl:gap-5">
<Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
<Tooltip placement='top' arrow={true} color='#555555' className=' mr-1' title="Annual Percentage Rate">
<span>APR </span>
</Tooltip>
{stakingPoolForView!.stakingPool.data ? (
Expand Down
12 changes: 6 additions & 6 deletions src/components/withdrawUnstakedZilPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
<div className="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full"
key={claimIdx}
>
<div className="items-center h4 w-full flex justify-between text-gray4">
<div className="items-center h4 w-full flex justify-between text-white1">
{stakingPoolData.data ? (
<div className='flex'>
<div>
Expand Down Expand Up @@ -92,9 +92,9 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
))
) : !!pendingUnstake?.length ? (
<div className="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full">
<div className="body2 text-gray2">
<div className="body2 text-gray1">
Next available reward </div>
<div className=" h4 mt-2 w-full flex justify-between text-gray4">
<div className=" h4 mt-2 w-full flex justify-between text-white1">

{stakingPoolData.data ? (
<div>
Expand All @@ -112,7 +112,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
</div>
</div>
) : (
<div className="flex justify-center items-center my-32 body2 text-gray2 ">
<div className="flex justify-center items-center my-32 body2 text-gray1 ">
No available Claims
</div>
)}
Expand All @@ -127,7 +127,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
<div className="flex justify-between mb-3 items-center" key={claimIdx}>
{stakingPoolData.data ? (
<div className='flex gap-2.5'>
<div className='body1 text-gray4'>
<div className='body1 text-white1'>
{parseFloat(
formatUnits(claim.zilAmount, 18)
).toFixed(3)}{' '}
Expand All @@ -137,7 +137,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
) : (
<div className="w-[4em] h-[1em] animated-gradient" />
)}
<div className='regular-base text-gray4'>{getHumanFormDuration(claim.availableAt)}</div>
<div className='regular-base text-white1'>{getHumanFormDuration(claim.availableAt)}</div>
</div>
))}
</div>
Expand Down
8 changes: 5 additions & 3 deletions src/components/withdrawZilView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const WithdrawZilView: React.FC = () => {

return (
<div className="relative overflow-y-auto max-h-[calc(90vh-15vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray1 hover:scrollbar-thumb-gray1
flex flex-col gap-2" >
<div className=" text-center lg:text-end max-h-[20vh]">
<h1 className="hero text-white mt-4">
Expand All @@ -39,7 +39,9 @@ const WithdrawZilView: React.FC = () => {
unstakingItems.length > 0 ? (

<div className="grid grid-cols-1 gap-4 lg:gap-5 overflow-y-auto max-h-[calc(90vh-30vh)]
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 lg:pb-10">
scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray1 hover:scrollbar-thumb-gray1 lg:pb-10
pr-4
">
{
unstakingItems.map((item, claimIdx) => (
<div
Expand Down Expand Up @@ -93,7 +95,7 @@ const WithdrawZilView: React.FC = () => {
</div>
<div className="max-lg:w-1/2 lg:mt-2.5">
<Button
className="btn-primary-white2"
className="btn-primary-white1"
onClick={() => selectStakingPoolForView(item.stakingPool.definition.id)}
>
View
Expand Down
Loading