ux improvements (#764)

* fix: accordion issues * fix: icons in validator list * feat: disable addstake and select if !acceptsStake * feat: change uptime display when 0 * feat: set apy as N/A for validator not in top 100 * fix: icon url * fix: nft placeholder image * feat: add test network banner * fix: CI
radixdlt · Oct 16, 2023 · 8b5ad62 · 8b5ad62
1 parent ebe367b
commit 8b5ad62
Show file tree

Hide file tree

Showing 20 changed files with 206 additions and 103 deletions.
diff --git a/apps/dashboard/src/pages/navbar-pages/send-tokens/manifests.test.ts b/apps/dashboard/src/pages/navbar-pages/send-tokens/manifests.test.ts
@@ -1,9 +1,7 @@
 import { RadixEngineToolkit } from '@common/ret'
 import { getSendNFTManifest, getSendTokenManifest } from './manifests'
-import { RadixNetwork } from '@common/gateway-sdk'
 
 describe('send tokens manifests', () => {
-  const NETWORK_ID = RadixNetwork.RCnetV2
   it('should create a send tokens manifest', async () => {
     const stringManifest = getSendTokenManifest(
       'resource_tdx_d_1tkx7f4tdf9zlqnhvtjrftddxvpjtvwqshjw5p9v0qslka44un68w6k',
@@ -17,7 +15,7 @@ describe('send tokens manifests', () => {
         kind: 'String',
         value: stringManifest
       },
-      NETWORK_ID
+      13
     )
 
     await expect(manifest.kind).toEqual('Valid')
@@ -46,7 +44,7 @@ describe('send tokens manifests', () => {
         kind: 'String',
         value: stringManifest
       },
-      NETWORK_ID
+      13
     )
 
     await expect(manifest.kind).toEqual('Valid')

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/Validators.stories.svelte b/apps/dashboard/src/pages/navbar-pages/staking/Validators.stories.svelte
@@ -61,7 +61,8 @@
         nonStandard: [],
         all: [],
         explicit: []
-      }
+      },
+      rank: i + 1
     }))
 </script>
 

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/select-validator/SelectValidator.svelte b/apps/dashboard/src/pages/navbar-pages/staking/select-validator/SelectValidator.svelte
@@ -18,6 +18,7 @@
       on:unchecked={() => {
         $selectedValidators = $selectedValidators
       }}
+      disabled={!validator.acceptsStake}
       --label-color="var(--theme-subtext)"
     >
       {text}

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/manifests.test.ts b/apps/dashboard/src/pages/navbar-pages/staking/stake-unstake/manifests.test.ts
@@ -5,7 +5,6 @@ import {
   getStakeManifest,
   getUnstakeManifest
 } from './manifests'
-import { RadixNetwork } from '@common/gateway-sdk'
 
 const fixtures = [
   {
@@ -70,7 +69,7 @@ describe('staking manifests', () => {
               kind: 'String',
               value: manifest
             },
-            RadixNetwork.RCnetV2
+            13
           )
         ).kind
       ).toEqual('Valid')

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/validator-details/ExtendedStakingCard.svelte b/apps/dashboard/src/pages/navbar-pages/staking/validator-details/ExtendedStakingCard.svelte
@@ -12,6 +12,7 @@
   export let readyToClaim: ComponentProps<StakingCard>['readyToClaim']
   export let claimText: ComponentProps<StakingCard>['claimText']
   export let validatorAddress: Promise<string>
+  export let acceptsStake: Promise<boolean>
 
   const isUnstaking = writable(false)
 
@@ -34,11 +35,13 @@
   on:click={() => dispatchEvent('claim')}
 >
   <div slot="staking-section" class="stake-unstake">
-    <button
-      class="stake-unstake-button"
-      on:click={() => dispatchEvent('add-stake')}>Add Stake</button
-    >
-    {#await staked then staked}
+    {#await Promise.all([staked, acceptsStake]) then [staked, acceptsStake]}
+      <button
+        class="stake-unstake-button"
+        class:disabled={!acceptsStake}
+        disabled={!acceptsStake}
+        on:click={() => dispatchEvent('add-stake')}>Add Stake</button
+      >
       {#if new BigNumber(staked).gt(0)}
         <button
           class="stake-unstake-button"
@@ -81,4 +84,9 @@
     flex-direction: column;
     gap: var(--spacing-sm);
   }
+
+  .disabled {
+    cursor: not-allowed;
+    pointer-events: all;
+  }
 </style>
diff --git a/apps/dashboard/src/pages/navbar-pages/staking/validator-details/RecentUptimeDetail.svelte b/apps/dashboard/src/pages/navbar-pages/staking/validator-details/RecentUptimeDetail.svelte
@@ -26,7 +26,9 @@
   <div class="picker">
     <SimplePicker {options} bind:selected />
   </div>
-  {truncateNumber(uptimes[selected.value])}%
+  {uptimes[selected.value] > 0
+    ? `${truncateNumber(uptimes[selected.value])}%`
+    : 'Not Measurable'}
 </div>
 
 <style>

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/validator-details/ValidatorDetails.svelte b/apps/dashboard/src/pages/navbar-pages/staking/validator-details/ValidatorDetails.svelte
@@ -42,7 +42,13 @@
       ],
       ['accepts stake', validator.acceptsStake, 'Bool'],
       ['fee (%)', `${truncateNumber(validator.fee.percentage)} %`, 'String'],
-      ['apy', `${truncateNumber(validator.apy)} %`, 'String'],
+      [
+        'apy',
+        `${
+          validator.rank <= 100 ? `${truncateNumber(validator.apy)} %` : 'N/A'
+        }`,
+        'String'
+      ],
       ['recent uptime', validator.uptimePercentages, 'String'],
       ['owner stake', formatXRDValue(validator.ownerStake.toString()), 'String']
     ],
@@ -97,6 +103,7 @@
         )}
         claimText="Claim"
         validatorAddress={validator.then((v) => v.address)}
+        acceptsStake={validator.then((v) => v.acceptsStake)}
         on:add-stake
         on:unstake
         on:claim

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/validator-list/ValidatorList.svelte b/apps/dashboard/src/pages/navbar-pages/staking/validator-list/ValidatorList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
   export type TransformedValidator = Validator<true, true, true> &
     Validator<unknown, true, unknown>['uptimePercentages'] & {
+      id: string
       feePercentage: number
     }
 </script>
@@ -37,7 +38,8 @@
       '6months': validator.uptimePercentages['6months'],
       '1year': validator.uptimePercentages['1year'],
       alltime: validator.uptimePercentages['alltime'],
-      feePercentage: validator.fee.percentage
+      feePercentage: validator.fee.percentage,
+      id: validator.address
     }))
   )
 
@@ -156,7 +158,12 @@
 </script>
 
 {#await transformedValidators}
-  <BasicTable {columns} entries={Array(15).fill(undefined)}>
+  <BasicTable
+    columns={[]}
+    entries={Array(15)
+      .fill(undefined)
+      .map((_, i) => ({ id: i.toString() }))}
+  >
     <svelte:fragment slot="row">
       <SkeletonRow columns={columns.length} />
     </svelte:fragment>

diff --git a/apps/dashboard/src/pages/navbar-pages/staking/validator-list/ValidatorRow.svelte b/apps/dashboard/src/pages/navbar-pages/staking/validator-list/ValidatorRow.svelte
@@ -27,6 +27,7 @@
 
     <ResponsiveTableCell>
       <div class="name-and-icon" class:left-padded={!$connected}>
+        <NftImage url={validator.metadata.standard.icon_url?.value.href} />
         <div class="dotted-overflow" style:max-width="15ch">
           {validator.metadata.standard.name?.value ?? ''}
         </div>
@@ -55,7 +56,7 @@
 
     <ResponsiveTableCell>
       <div class="apy apy-text-box no-overflow bold">
-        {truncateNumber(validator.apy)}%
+        {validator.rank <= 100 ? `${truncateNumber(validator.apy)}%` : 'N/A'}
         <span class="subtext">per year</span>
       </div>
     </ResponsiveTableCell>
@@ -68,7 +69,9 @@
 
     <ResponsiveTableCell>
       <div class="uptime apy-text-box no-overflow bold">
-        {truncateNumber(validator[selectedUptime])}%
+        {validator[selectedUptime] > 0
+          ? `${truncateNumber(validator[selectedUptime])}%`
+          : 'Not Measurable'}
       </div>
     </ResponsiveTableCell>
 

diff --git a/apps/dashboard/src/pages/search-pages/SummaryTabHeading.svelte b/apps/dashboard/src/pages/search-pages/SummaryTabHeading.svelte
@@ -6,7 +6,7 @@
   export let entity: Promise<Entity>
 
   $: iconUrl = entity.then(
-    (entity) => (entity.metadata.standard as any).icon_url?.value as string
+    (entity) => (entity.metadata.standard as any).icon_url?.value as URL
   )
 
   $: name = entity.then(
@@ -27,7 +27,7 @@
     <SkeletonLoader />
   {:then [iconUrl, name, symbol]}
     {#if iconUrl}
-      <NftImage url={iconUrl} />
+      <NftImage url={iconUrl.href} />
     {/if}
     {#if name}
       <h2>

diff --git a/apps/dashboard/src/pages/search-pages/account/non-fungible/NonFungibleTokensPage.svelte b/apps/dashboard/src/pages/search-pages/account/non-fungible/NonFungibleTokensPage.svelte
@@ -81,11 +81,11 @@
   }
 </script>
 
-{#await filterOutClaimNfts(nonFungibleResources)}
+{#await Promise.all([filterOutClaimNfts(nonFungibleResources), data])}
   {#each Array(3) as _}
     <NFTAccordion data={new Promise(() => {})} />
   {/each}
-{:then nonFungibleResources}
+{:then [nonFungibleResources, [stateVersion, accountAddress]]}
   {#each nonFungibleResources as { resource, nonFungibles, ownedNonFungibles, nextCursor, vaultAddress }}
     <NFTAccordion
       data={{
@@ -97,10 +97,21 @@
         totalCount: Number(resource.totalSupply)
       }}
     >
-      {#await data then [stateVersion, accountAddress]}
-        <div bind:clientWidth={width}>
-          <div class="nft-cards" class:center={width < 500}>
-            {#each nonFungibles as { address, nftData: { standard: { name, key_image_url } } }}
+      <div bind:clientWidth={width}>
+        <div class="nft-cards" class:center={width < 500}>
+          {#each nonFungibles as { address, nftData: { standard: { name, key_image_url } } }}
+            <NonFungibleTokenCard
+              imgUrl={key_image_url?.value}
+              name={name?.value}
+              {address}
+              on:click={() =>
+                dispatch('click-nft', {
+                  address: address.nonFungibleAddress
+                })}
+            />
+          {/each}
+          {#if loadedLaterNfts[resource.address]}
+            {#each loadedLaterNfts[resource.address] as { address, nftData: { standard: { key_image_url, name } } }}
               <NonFungibleTokenCard
                 imgUrl={key_image_url?.value}
                 name={name?.value}
@@ -111,39 +122,26 @@
                   })}
               />
             {/each}
-            {#if loadedLaterNfts[resource.address]}
-              {#each loadedLaterNfts[resource.address] as { address, nftData: { standard: { key_image_url, name } } }}
-                <NonFungibleTokenCard
-                  imgUrl={key_image_url?.value}
-                  name={name?.value}
-                  {address}
-                  on:click={() =>
-                    dispatch('click-nft', {
-                      address: address.nonFungibleAddress
-                    })}
-                />
-              {/each}
-            {/if}
-          </div>
+          {/if}
         </div>
-
-        <InfiniteScroll
-          on:thresholdReached={() => {
-            fetchMore({
-              stateVersion,
-              componentAddress: accountAddress,
-              cursor: nextCursor,
-              vaultAddress,
-              resourceAddress: resource.address
-            })
-          }}
-        />
-        {#if isLoading}
-          <div class="loader-spacing">
-            <SkeletonLoader />
-          </div>
-        {/if}
-      {/await}
+      </div>
+
+      <InfiniteScroll
+        on:thresholdReached={() => {
+          fetchMore({
+            stateVersion,
+            componentAddress: accountAddress,
+            cursor: nextCursor,
+            vaultAddress,
+            resourceAddress: resource.address
+          })
+        }}
+      />
+      {#if isLoading}
+        <div class="loader-spacing">
+          <SkeletonLoader />
+        </div>
+      {/if}
     </NFTAccordion>
   {/each}
 {/await}

diff --git a/apps/dashboard/src/pages/search-pages/account/pool-units/PoolUnits.svelte b/apps/dashboard/src/pages/search-pages/account/pool-units/PoolUnits.svelte
@@ -42,11 +42,12 @@
   )
 
   const entries = stakeInfo.then((stakeInfo) =>
-    stakeInfo.map((info) => ({
+    stakeInfo.map((info, i) => ({
       validatorName: info.validatorName,
       staking: info.staking.toString(),
       unstaking: info.unstaking.toString(),
-      readyToClaim: info.readyToClaim.toString()
+      readyToClaim: info.readyToClaim.toString(),
+      id: i.toString()
     }))
   )
 

diff --git a/apps/dashboard/src/routes/+layout.svelte b/apps/dashboard/src/routes/+layout.svelte
@@ -28,6 +28,7 @@
   import ErrorPage from '@dashboard-pages/error-page/ErrorPage.svelte'
   import { callApi } from '@api/gateway'
   import { errorPage } from '../stores'
+  import { NETWORK_CONFIG } from '@constants'
 
   let mounted = false
 
@@ -126,6 +127,9 @@
 </svelte:head>
 
 <Theme theme="light">
+  {#if CURRENT_NETWORK.id !== NETWORK_CONFIG['mainnet'].id}
+    <div class="banner">For development only. Not usable on Radix mainnet.</div>
+  {/if}
   {#if mounted}
     <Layout {hideSearch} {routes}>
       <!-- svelte-ignore a11y-missing-content -->
@@ -175,4 +179,10 @@
     display: inline-flex;
     margin-left: var(--spacing-lg);
   }
+
+  .banner {
+    background: var(--color-alert);
+    padding: var(--spacing-md);
+    text-align: center;
+  }
 </style>