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 <[email protected]> Co-authored-by: Bran <[email protected]> Co-authored-by: cpl121 <[email protected]>
iotaledger · Dec 18, 2024 · 23fc005 · 23fc005
1 parent 8c3a220
commit 23fc005
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 60 deletions.
diff --git a/apps/wallet-dashboard/app/(protected)/home/page.tsx b/apps/wallet-dashboard/app/(protected)/home/page.tsx
@@ -25,15 +25,15 @@ function HomeDashboardPage(): JSX.Element {
         <main className="flex flex-1 flex-col items-center space-y-8 py-md">
             {connectionStatus === 'connected' && account && (
                 <>
-                    <div className="home-page-grid-container h-full w-full">
+                    <div className="home-page-grid-container w-full content-start">
                         <div style={{ gridArea: 'balance' }} className="flex grow overflow-hidden">
                             <AccountBalance />
                         </div>
                         <div style={{ gridArea: 'staking' }} className="flex grow overflow-hidden">
                             <StakingOverview />
                         </div>
                         {stardustMigrationEnabled && <MigrationOverview />}
-                        <div style={{ gridArea: 'coins' }}>
+                        <div style={{ gridArea: 'coins' }} className="flex grow overflow-hidden">
                             <MyCoins />
                         </div>
                         {supplyIncreaseVestingEnabled && <SupplyIncreaseVestingOverview />}

diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css
@@ -35,34 +35,23 @@ 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'
             'migration'
             '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,24 +70,22 @@ 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'
                 'vesting vesting'
                 '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
@@ -71,9 +71,9 @@ function MyCoins(): React.JSX.Element {
 
     return (
         <Panel>
-            <div className="flex w-full flex-col">
+            <div className="flex h-full w-full flex-col">
                 <Title title="My Coins" />
-                <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
@@ -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>