From 23fc005216996a3a96c49a3704e78f829c40a3d7 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Wed, 18 Dec 2024 10:53:54 +0100 Subject: [PATCH] feat(wallet-dashboard): polish homepage scroll (#4502) * feat: add supply increase vesting overview to homepage * fix: linter * fix(dashboard): remove isHoverable prop * fix(dashboard): use showDays in formatCountdown * fix(dashboard): rename vesting by supplyIncreaseVesting * fix: format * fix(dashboard): build * fix(dashboard): format * fix(dashboard): styles * fix(dashboard): isTimelockedStakedObjectsLoading name and join 2 invalidateQueries in 1 * feat: polish homepage scroll * fix(dashboard): format * feat: update styles and add missing dependency * feat: add min height * feat. add padding * fix(dasboard): undo the split of the query invalidation * fix(dashboard): rename unlockAllsupplyIncreaseVesting and disable new stake button * fix grid * feat(dashboard): add object for the options in useCountdownByTimestamp * fix: linter * fix: linter * fix(core): improve naming * fix(core): linter --------- Co-authored-by: cpl121 Co-authored-by: Bran <52735957+brancoder@users.noreply.github.com> Co-authored-by: cpl121 <100352899+cpl121@users.noreply.github.com> --- .../app/(protected)/home/page.tsx | 4 +- apps/wallet-dashboard/app/globals.css | 37 ++++------- .../components/coins/MyCoins.tsx | 64 +++++++++---------- .../transactions/TransactionsOverview.tsx | 2 +- 4 files changed, 47 insertions(+), 60 deletions(-) diff --git a/apps/wallet-dashboard/app/(protected)/home/page.tsx b/apps/wallet-dashboard/app/(protected)/home/page.tsx index 774edce294c..d435d44f630 100644 --- a/apps/wallet-dashboard/app/(protected)/home/page.tsx +++ b/apps/wallet-dashboard/app/(protected)/home/page.tsx @@ -25,7 +25,7 @@ function HomeDashboardPage(): JSX.Element {
{connectionStatus === 'connected' && account && ( <> -
+
@@ -33,7 +33,7 @@ function HomeDashboardPage(): JSX.Element {
{stardustMigrationEnabled && } -
+
{supplyIncreaseVestingEnabled && } diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css index 2d87e758bc0..69ca23f41f2 100644 --- a/apps/wallet-dashboard/app/globals.css +++ b/apps/wallet-dashboard/app/globals.css @@ -35,25 +35,15 @@ body { height: 200px; } } - .home-page-grid-container:has(.with-vesting) { - @apply grid grid-cols-1 gap-lg; + .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { grid-template-areas: 'balance' 'staking' 'vesting' 'coins' 'activity'; - - & - > *:where( - [style*='grid-area: balance'], - [style*='grid-area: staking'], - [style*='grid-area: migration'] - ) { - height: 200px; - } } - .home-page-grid-container:has(.with-migration) { + .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { grid-template-areas: 'balance' 'staking' @@ -61,8 +51,7 @@ body { 'coins' 'activity'; } - .home-page-grid-container:has(.with-migration), - .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-migration):has(.with-vesting) { grid-template-areas: 'balance' 'staking' @@ -81,8 +70,7 @@ body { 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-vesting) { - @apply grid-cols-2; + .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { grid-template-areas: 'balance balance' 'staking staking' @@ -90,15 +78,14 @@ body { 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-migration) { + .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { grid-template-areas: 'balance balance' 'staking migration' 'coins coins' 'activity activity'; } - .home-page-grid-container:has(.with-migration), - .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-migration):has(.with-vesting) { grid-template-areas: 'balance balance' 'staking migration' @@ -110,25 +97,27 @@ body { @screen md { .home-page-grid-container { + min-height: 700px; + height: calc(100vh - 140px); @apply grid-cols-3; grid-template-areas: 'balance staking staking' 'coins activity activity'; } - .home-page-grid-container:has(.with-vesting) { + .home-page-grid-container:has(.with-vesting):not(:has(.with-migration)) { grid-template-areas: 'balance staking staking' 'coins vesting vesting' 'coins activity activity'; } - .home-page-grid-container:has(.with-migration) { - @apply grid-cols-3; + + .home-page-grid-container:has(.with-migration):not(:has(.with-vesting)) { grid-template-areas: 'balance staking migration' 'coins activity activity'; } - .home-page-grid-container:has(.with-migration), - .home-page-grid-container:has(.with-vesting) { + + .home-page-grid-container:has(.with-migration):has(.with-vesting) { grid-template-areas: 'balance staking migration' 'coins vesting vesting' diff --git a/apps/wallet-dashboard/components/coins/MyCoins.tsx b/apps/wallet-dashboard/components/coins/MyCoins.tsx index fc441d76148..411d7cdc702 100644 --- a/apps/wallet-dashboard/components/coins/MyCoins.tsx +++ b/apps/wallet-dashboard/components/coins/MyCoins.tsx @@ -71,9 +71,9 @@ function MyCoins(): React.JSX.Element { return ( -
+
- <div className="px-sm pb-md pt-sm"> + <div className="px-sm py-sm"> <div className="inline-flex"> <SegmentedButton type={SegmentedButtonType.Filled}> {TOKEN_CATEGORIES.map(({ label, value }) => { @@ -96,37 +96,35 @@ function MyCoins(): React.JSX.Element { })} </SegmentedButton> </div> - <div className="pb-md pt-sm"> - {[TokenCategory.All, TokenCategory.Recognized].includes( - selectedTokenCategory, - ) && - recognized?.map((coin, index) => { - return ( - <CoinItem - key={index} - coinType={coin.coinType} - balance={BigInt(coin.totalBalance)} - onClick={() => openSendTokenDialog(coin)} - icon={ - <RecognizedBadge className="h-4 w-4 text-primary-40" /> - } - /> - ); - })} - {[TokenCategory.All, TokenCategory.Unrecognized].includes( - selectedTokenCategory, - ) && - unrecognized?.map((coin, index) => { - return ( - <CoinItem - key={index} - coinType={coin.coinType} - balance={BigInt(coin.totalBalance)} - onClick={() => openSendTokenDialog(coin)} - /> - ); - })} - </div> + </div> + <div className="h-full overflow-y-auto px-sm pb-md pt-sm"> + {[TokenCategory.All, TokenCategory.Recognized].includes( + selectedTokenCategory, + ) && + recognized?.map((coin, index) => { + return ( + <CoinItem + key={index} + coinType={coin.coinType} + balance={BigInt(coin.totalBalance)} + onClick={() => openSendTokenDialog(coin)} + icon={<RecognizedBadge className="h-4 w-4 text-primary-40" />} + /> + ); + })} + {[TokenCategory.All, TokenCategory.Unrecognized].includes( + selectedTokenCategory, + ) && + unrecognized?.map((coin, index) => { + return ( + <CoinItem + key={index} + coinType={coin.coinType} + balance={BigInt(coin.totalBalance)} + onClick={() => openSendTokenDialog(coin)} + /> + ); + })} </div> </div> {selectedCoin && activeAccountAddress && ( diff --git a/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx b/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx index a590e3abcdb..fcaf74eddaa 100644 --- a/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx +++ b/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx @@ -9,7 +9,7 @@ function TransactionsOverview() { return ( <Panel> <Title title="Activity" /> - <div className="px-sm pb-md pt-sm"> + <div className="h-full overflow-y-auto px-sm pb-md pt-sm"> <TransactionsList /> </div> </Panel>