feat(dashboard): Mobile Staking (#967)

* fix(dashboard): unstaking small amounts * feat(dashboard): mobile friendly UI * fix(dashboard): improvements * wip: change deployment network * feat(dashboard): dynamic header * fix(dashboard): adjust row heights * fix(dashboard): refresh validator filters * fix(dashboard): remove obsolete label * fix(ui): hide header responsiveness * fix(dashboard): typo * fix(dashboard): svelte check * fix: stake input use type="number" * fix(dashboard): popover wrapper display * fix(dashboard): numberic input mode for staking * fix(dashboard): change default filter * fix(ui): focus/blur handling for input * fix(dashboard): validator name limit * fix(ui): improve hide header * fix(ui): hide header scroll ux * Revert "wip: change deployment network" This reverts commit 5dcbf96. * fix(dashboard): logo replace + improvements
radixdlt · Jul 26, 2024 · df999f5 · df999f5
1 parent 409c17b
commit df999f5
Show file tree

Hide file tree

Showing 35 changed files with 513 additions and 147 deletions.
diff --git a/apps/dashboard/src/lib/staking-card/StakingCard.svelte b/apps/dashboard/src/lib/staking-card/StakingCard.svelte
@@ -39,14 +39,30 @@
 <style lang="scss">
   .staking-card {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--spacing-lg);
     padding: var(--spacing-xl);
     max-width: 80rem;
+
+    @include mixins.desktop {
+      flex-wrap: nowrap;
+    }
   }
 
   .section {
-    width: 33.33%;
-    border-right: var(--border-divider) var(--theme-border);
+    width: 100%;
+
+    @include mixins.mobile {
+      &:not(:last-child) {
+        border-bottom: var(--border-divider) var(--theme-border);
+        padding-bottom: var(--spacing-lg);
+      }
+    }
+    @include mixins.desktop {
+      width: 33.33%;
+      border-right: var(--border-divider) var(--theme-border);
+    }
+
     padding: 0 var(--spacing-lg);
   }
 

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/TopValidatorWarning.svelte b/apps/dashboard/src/pages/navbar-pages/staking/TopValidatorWarning.svelte
@@ -33,6 +33,9 @@
       color: var(--color-alert-1);
     }
     display: flex;
+    @include mixins.mobile {
+      flex-wrap: wrap;
+    }
     gap: var(--spacing-lg);
   }
 

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/Validators.svelte b/apps/dashboard/src/pages/navbar-pages/staking/Validators.svelte
@@ -280,10 +280,19 @@
   }
 
   .selected-validators {
-    position: absolute;
+    position: sticky;
     top: var(--spacing-xl);
     right: var(--spacing-2xl);
     z-index: 2;
+
+    @include mixins.mobile {
+      margin-top: var(--spacing-lg);
+      top: var(--spacing-md);
+    }
+
+    @include mixins.desktop {
+      position: absolute;
+    }
   }
 
   #staked-validators {
@@ -312,9 +321,14 @@
   .header-section {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: var(--spacing-xl);
     margin-bottom: var(--spacing-2xl);
 
+    @include mixins.desktop {
+      flex-wrap: nowrap;
+    }
+
     .title {
       margin: 0;
     }
@@ -336,8 +350,16 @@
       }
     }
 
-    .available-to-stake {
-      margin-left: auto;
+    @include mixins.mobile {
+      .available-to-stake {
+        width: 100%;
+      }
+    }
+
+    @include mixins.desktop {
+      .available-to-stake {
+        margin-left: auto;
+      }
     }
   }
 </style>
diff --git a/apps/dashboard/src/pages/navbar-pages/staking/filter-details/FilterDetails.svelte b/apps/dashboard/src/pages/navbar-pages/staking/filter-details/FilterDetails.svelte
@@ -1,3 +1,18 @@
+<script lang="ts" context="module">
+  export const DEFAULT_VALIDATORS_FILTER = {
+    feeFilter: [0, 100] as [number, number],
+    withinTop100Filter: true,
+    totalXRDStakeFilter: [0, 100] as [number, number],
+    uptimeFilterPercentage: 0,
+    uptimeFilter: {
+      timeframe: '1month' as '1month',
+      percentage: 0
+    },
+    acceptsStakeFilter: false,
+    bookmarkedFilter: false
+  }
+</script>
+
 <script lang="ts">
   import Divider from '@components/_base/divider/Divider.svelte'
   import SidePanel from '@components/_base/side-panel/SidePanel.svelte'
@@ -13,19 +28,21 @@
   export let totalXRDStakeValues: number[]
 
   export const reset = () => {
-    feeFilter = [0, 100]
-    totalXRDStakeFilter = [0, 100]
-    uptimeFilterPercentage = 0
-    acceptsStakeFilter = false
-    bookmarkedFilter = false
+    feeFilter = DEFAULT_VALIDATORS_FILTER.feeFilter
+    bookmarkedFilter = DEFAULT_VALIDATORS_FILTER.bookmarkedFilter
+    withinTop100Filter = DEFAULT_VALIDATORS_FILTER.withinTop100Filter
+    acceptsStakeFilter = DEFAULT_VALIDATORS_FILTER.acceptsStakeFilter
+    totalXRDStakeFilter = DEFAULT_VALIDATORS_FILTER.totalXRDStakeFilter
+    uptimeFilterPercentage = DEFAULT_VALIDATORS_FILTER.uptimeFilterPercentage
   }
-
-  let feeFilter: [number, number] = [0, 100]
-
-  let totalXRDStakeFilter: [number, number] = [0, 100]
-
-  let acceptsStakeFilter = false
-  let bookmarkedFilter = false
+  let {
+    feeFilter,
+    bookmarkedFilter,
+    withinTop100Filter,
+    acceptsStakeFilter,
+    totalXRDStakeFilter,
+    uptimeFilterPercentage
+  } = DEFAULT_VALIDATORS_FILTER
 
   const recentUptimeOptions: {
     label: string
@@ -55,8 +72,6 @@
     recentUptimeOptions.find((option) => option.default) ||
     recentUptimeOptions[0]
 
-  let uptimeFilterPercentage = 0
-
   $: uptimeFilter = {
     timeframe: selectedUptime.value,
     percentage: uptimeFilterPercentage
@@ -67,6 +82,7 @@
       feeFilter,
       totalXRDStakeFilter,
       uptimeFilter,
+      withinTop100Filter,
       acceptsStakeFilter,
       bookmarkedFilter
     })
@@ -75,6 +91,7 @@
   const dispatch = createEventDispatcher<{
     close: {
       feeFilter: typeof feeFilter
+      withinTop100Filter: boolean
       totalXRDStakeFilter: typeof totalXRDStakeFilter
       uptimeFilter: typeof uptimeFilter
       acceptsStakeFilter: boolean
@@ -87,6 +104,12 @@
   <SidePanelHeader text="Validator Filters" on:closeClick={onClose} />
 
   <div class="cards">
+    <SwitchFilterCard
+      title="Top 100"
+      description="Show only validators that currently generate APY"
+      bind:on={withinTop100Filter}
+    />
+
     <SwitchFilterCard
       title="Accepts Stake"
       description="Show only validators that currently accepts new stake"

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/AccountSection.svelte b/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/AccountSection.svelte
@@ -5,15 +5,20 @@
   export let selectedAccount: Account
 </script>
 
-<div class="account-picker" style:width="var(--width)">
-  <h4><slot name="account-picker-text" /></h4>
+<div class="account-picker">
+  <h4>Stake XRD from account</h4>
   <AccountPicker bind:selected={selectedAccount} />
 </div>
 
-<style>
+<style lang="scss">
   .account-picker {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-md);
+    min-width: 20rem;
+
+    @include mixins.mobile {
+      width: 100%;
+    }
   }
 </style>
diff --git a/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/InfoBox.svelte b/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/InfoBox.svelte
@@ -36,7 +36,9 @@
     border: var(--border) var(--theme-border);
     padding: var(--spacing-lg);
     border-radius: var(--border-radius-lg);
-    max-width: 20rem;
+    @include mixins.desktop {
+      max-width: 20rem;
+    }
 
     .body {
       display: flex;

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/StakePanel.svelte b/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/StakePanel.svelte
@@ -10,7 +10,6 @@
   export let stakeButtonDisabled = false
   export let useBackdrop = false
   export let learnMoreUrl = ''
-  export let rightColumnWidth = '15rem'
 
   const dispatch = createEventDispatcher<{
     close: null | 'invalidate'
@@ -26,7 +25,7 @@
 
   <div class="flex">
     <div />
-    <slot name="account-picker" {rightColumnWidth} />
+    <slot name="account-picker" />
   </div>
 
   <div
@@ -36,12 +35,12 @@
     }`}
   >
     <h4><slot name="heading-text" /></h4>
-    <div class="align-left heading-subtext" style:width={rightColumnWidth}>
+    <div class="align-left heading-subtext">
       <slot name="heading-subtext" />
     </div>
   </div>
 
-  <slot name="content" {rightColumnWidth} />
+  <slot name="content" />
 
   <div class="stake flex">
     <div class="info">
@@ -50,7 +49,7 @@
         <slot name="info-box-explanation" slot="explanation" />
       </InfoBox>
     </div>
-    <div class="summary" style:width={rightColumnWidth}>
+    <div class="summary">
       <slot name="summary" />
       <div class="stake-button">
         <SendTxButton
@@ -61,7 +60,7 @@
             }
             dispatch('tx-response', e.detail)
           }}
-          buttonProps={{ size: 'big', disabled: stakeButtonDisabled }}
+          buttonProps={{ size: 'xl', disabled: stakeButtonDisabled }}
         />
       </div>
     </div>
@@ -73,17 +72,25 @@
     display: flex;
     justify-content: space-between;
     padding-right: var(--spacing-lg);
+    @include mixins.mobile {
+      flex-wrap: wrap;
+    }
 
     .align-left {
       text-align: left;
     }
   }
 
   .summary {
+    min-width: 20rem;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
 
+    @include mixins.mobile {
+      width: 100%;
+    }
+
     .stake-button {
       margin-top: var(--spacing-md);
     }
@@ -96,6 +103,9 @@
   .stake {
     margin-top: var(--spacing-2xl);
     gap: var(--spacing-3xl);
+    @include mixins.mobile {
+      gap: var(--spacing-lg);
+    }
     align-items: flex-start;
   }
 

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/claim/Claim.svelte b/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/claim/Claim.svelte
@@ -75,7 +75,7 @@
     >Claim{accumulatedClaims.length > 1 ? 's' : ''} to redeem:</svelte:fragment
   >
 
-  <svelte:fragment slot="content" let:rightColumnWidth>
+  <svelte:fragment slot="content">
     <div class="card-list">
       {#each accumulatedClaims as { validator, xrdAmount, account }}
         <StakeCard>
@@ -92,7 +92,6 @@
               {account}
               tokenAmount={xrdAmount}
               readonly={true}
-              --card-width={rightColumnWidth}
             />
           </svelte:fragment>
         </StakeCard>

diff --git a/...hboard/src/pages/navbar-pages/staking/stake-unstake/stake-card/OverviewUnstakeCard.svelte b/...hboard/src/pages/navbar-pages/staking/stake-unstake/stake-card/OverviewUnstakeCard.svelte
@@ -27,7 +27,7 @@
   $: invalid = !validUnstakeAmount
 
   const setMax = () => {
-    amountToUnstake = stakedAmount
+    amountToUnstake = new BigNumber(stakedAmount).toFixed()
   }
 </script>
 

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/stake-card/StakeCard.svelte b/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/stake-card/StakeCard.svelte
@@ -23,6 +23,11 @@
     gap: var(--spacing-md);
     align-items: center;
     justify-content: space-between;
+    @include mixins.mobile {
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--spacing-xl);
+    }
 
     .icon-and-info {
       display: flex;

diff --git a/...ashboard/src/pages/navbar-pages/staking/stake-unstake/stake-card/StakeCardMultiple.svelte b/...ashboard/src/pages/navbar-pages/staking/stake-unstake/stake-card/StakeCardMultiple.svelte
@@ -8,7 +8,6 @@
   import { XRDToken } from '@constants'
   import type { ValidatorListItem } from '@api/utils/entities/component/validator'
 
-  export let rightColumnWidth: string
   export let validator: ValidatorListItem
   export let tokenAmount: string = '0'
   export let amountCardDisabled = false
@@ -20,7 +19,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<StakeCard --token-amount-card-width={rightColumnWidth} --shadow="none">
+<StakeCard --shadow="none">
   <div
     slot="icon"
     class="remove-icon"

diff --git a/...es/navbar-pages/staking/stake-unstake/stake-card/token-amount-card/TokenAmountCard.svelte b/...es/navbar-pages/staking/stake-unstake/stake-card/token-amount-card/TokenAmountCard.svelte
@@ -82,18 +82,8 @@
   </div>
 
   {#if $$slots.footer}
-    <div
-      class="slot-content footer"
-      class:disabled
-      style:background={`${
-        invalid ? 'var(--invalid-background-color)' : 'var(--theme-surface-1)'
-      }`}
-      style:border-color={`${invalid ? 'var(--invalid-border-color)' : ''}`}
-    >
-      <Divider
-        --spacing="none"
-        --color={`${invalid ? 'var(--invalid-border-color)' : ''}`}
-      />
+    <div class="slot-content footer" class:disabled class:invalid>
+      <Divider --spacing="none" />
       <div class="content">
         <slot name="footer" />
       </div>
@@ -161,5 +151,12 @@
     border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
     border: var(--border) var(--theme-border);
     border-top: none;
+    background-color: var(--theme-surface-1);
+
+    &.invalid {
+      border-color: var(--invalid-border-color);
+      background-color: var(--invalid-background-color);
+      --color: var(--invalid-border-color);
+    }
   }
 </style>