Ptd 1273 (#941) [PTD-1273]

* fix(dashboard): adjust recent TXs column widths * fix(dashboard): do not 404 for virtual badges [PTD-1273]
radixdlt · Mar 26, 2024 · 0b052f4 · 0b052f4
1 parent dce6494
commit 0b052f4
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 46 deletions.
diff --git a/apps/dashboard/src/lib/recent-transactions/BalanceChangesColumn.svelte b/apps/dashboard/src/lib/recent-transactions/BalanceChangesColumn.svelte
@@ -125,6 +125,7 @@
   }
 
   .nft-info {
+    align-items: flex-start;
     display: flex;
     flex-direction: column;
   }

diff --git a/apps/dashboard/src/lib/recent-transactions/ColumnDefinition.svelte b/apps/dashboard/src/lib/recent-transactions/ColumnDefinition.svelte
@@ -15,8 +15,12 @@
 
   export const messageColumnDefinition = {
     id: 'message',
-    width: '50px',
+    width: '100px',
     hideMobile: true,
+    header: {
+      label: 'Message',
+      alignment: 'center' as const
+    },
     component: TxMessageColumn,
     componentProps: {
       message: (tx: CommittedTransactionInfo) => {
@@ -43,7 +47,7 @@
   export const dateAndTxIdColumnDefinition = {
     id: 'date-and-tx-id',
     hideMobile: true,
-    width: '140px',
+    width: '150px',
     header: {
       label: 'ID/DATE (GMT +00)'
     },
@@ -70,7 +74,7 @@
   }: { label?: string } = {}) => {
     return {
       id: 'other-balance-changes',
-      width: '190px',
+      width: '300px',
       header: {
         label: label || 'Other Balance Changes'
       },
@@ -99,7 +103,7 @@
   }: { alignment?: 'right' } = {}) => {
     return {
       id: 'fee',
-      width: '160px',
+      width: '130px',
       ...(alignment ? { alignment } : undefined),
       header: {
         label: 'Transaction Fee'

diff --git a/apps/dashboard/src/lib/recent-transactions/MobileHeaderColumn.svelte b/apps/dashboard/src/lib/recent-transactions/MobileHeaderColumn.svelte
@@ -10,14 +10,20 @@
 </script>
 
 <div class="header-column">
-  <TxMessageColumn {message} />
+  <div class="message">
+    <TxMessageColumn {message} />
+  </div>
+
   <DateAndTxIdColumn {id} {date} />
   <div class="ml-auto">
     <IconNew icon={ChevronRight} />
   </div>
 </div>
 
 <style lang="scss">
+  .message {
+    max-width: 100px;
+  }
   .header-column {
     display: flex;
     align-items: center;

diff --git a/apps/dashboard/src/lib/recent-transactions/RecentTransactions.svelte b/apps/dashboard/src/lib/recent-transactions/RecentTransactions.svelte
@@ -51,7 +51,6 @@
       header: {
         label: 'Withdrawn'
       },
-      width: '190px',
       component: BalanceChangesColumn,
       componentProps: {
         balanceChanges: '$$withdrawals'
@@ -62,7 +61,6 @@
       header: {
         label: 'Deposited'
       },
-      width: '190px',
       component: BalanceChangesColumn,
       componentProps: {
         balanceChanges: '$$deposits'

diff --git a/apps/dashboard/src/pages/search-pages/nft/Nft.svelte b/apps/dashboard/src/pages/search-pages/nft/Nft.svelte
@@ -6,7 +6,7 @@
   import type { NonFungible } from '@api/utils/nfts'
   import type { NonFungibleResource } from '@api/utils/entities/resource/non-fungible'
 
-  export let nft: Promise<NonFungible>
+  export let nft: Promise<NonFungible | undefined>
   export let resource: Promise<NonFungibleResource>
   export let associatedDapps: Promise<
     {
@@ -17,13 +17,13 @@
   >
 
   $: imageUrl = Promise.all([nft, resource]).then(([nft, resource]) =>
-    nft.type === 'generalNft'
+    nft?.type === 'generalNft'
       ? nft.nftData.expected.key_image_url?.value
       : resource.metadata.expected.icon_url?.typed.value
   )
 
   $: description = Promise.all([nft, resource]).then(([nft, resource]) =>
-    nft.type === 'generalNft'
+    nft?.type === 'generalNft'
       ? nft.nftData.expected.description?.value
       : resource.metadata.expected.description?.typed.value
   )
@@ -43,9 +43,16 @@
   <h2>
     {#await nft}
       <SkeletonLoader />
-    {:then { nftData: { expected: { name } } }}
-      {#if name?.value}
-        {name?.value}
+    {:then nft}
+      {#if nft}
+        {@const {
+          nftData: {
+            expected: { name }
+          }
+        } = nft}
+        {#if name?.value}
+          {name?.value}
+        {/if}
       {/if}
     {/await}
   </h2>
@@ -61,10 +68,14 @@
     {#await nft}
       <SkeletonLoader />
     {:then nft}
-      <NftDataRow value={{ kind: 'String', field_name: 'ID', value: nft.id }} />
-      {#each nft.type === 'generalNft' ? nft.nftData.nonStandard : Object.values(nft.nftData.expected).filter((data) => data.field_name !== 'name') as value}
-        <NftDataRow {value} />
-      {/each}
+      {#if nft}
+        <NftDataRow
+          value={{ kind: 'String', field_name: 'ID', value: nft.id }}
+        />
+        {#each nft.type === 'generalNft' ? nft.nftData.nonStandard : Object.values(nft.nftData.expected).filter((data) => data.field_name !== 'name') as value}
+          <NftDataRow {value} />
+        {/each}
+      {/if}
     {/await}
   </div>
 </div>

diff --git a/apps/dashboard/src/routes/(search-pages)/account/[account]/recent-transactions/+page.svelte b/apps/dashboard/src/routes/(search-pages)/account/[account]/recent-transactions/+page.svelte
@@ -5,19 +5,4 @@
   export let data: LayoutData
 </script>
 
-<div class="information">
-  List of balance changes on this specific account. Click on Transaction ID to
-  get more information.
-</div>
 <RecentTransactions entityAddress={data.account} />
-
-<style lang="scss">
-  .information {
-    color: var(--color-grey-2);
-    margin-bottom: var(--space-md);
-
-    @include mixins.desktop {
-      padding-top: var(--space-md);
-    }
-  }
-</style>
diff --git a/apps/dashboard/src/routes/(search-pages)/nft/[nft]/+page.svelte b/apps/dashboard/src/routes/(search-pages)/nft/[nft]/+page.svelte
@@ -6,9 +6,9 @@
   export let data: PageData
 </script>
 
-{#await Promise.all( [data.promises.nft, data.promises.authResources] ) then [nft, tokenInfo]}
+{#await data.promises.nft then nft}
   <SearchPage
-    title={nft.type === 'generalNft'
+    title={nft?.type === 'generalNft'
       ? 'Non Fungible'
       : 'Radix Network Stake Claim Non-fungible'}
     address={data.nftAddress}

diff --git a/apps/dashboard/src/routes/(search-pages)/nft/[nft]/+page.ts b/apps/dashboard/src/routes/(search-pages)/nft/[nft]/+page.ts
@@ -1,18 +1,15 @@
 import { callApi } from '@api/_deprecated/gateway'
 import type { PageLoad } from './$types'
 import { getLinkedDappDefinitions } from '@api/utils/two-way-linking'
-import {
-  getDappDefinitionData,
-  getLookupEntity,
-  getResourcesFromAuth
-} from '../../utils'
+import { getDappDefinitionData, getLookupEntity } from '../../utils'
 import { map, pipe } from 'ramda'
 import { transformNft } from '@api/utils/nfts'
 import { handleGatewayResult } from '../../../../utils'
 import { transformNonFungibleResource } from '@api/utils/entities/resource/non-fungible'
 import { errorPage } from '@dashboard/stores'
+import type { KnownAddresses } from '@common/ret'
 
-export const load: PageLoad = async ({ params }) => {
+export const load: PageLoad = async ({ params, fetch }) => {
   const [resourceAddress, nftId] = decodeURIComponent(params.nft).split(':')
 
   const resourceEntity = getLookupEntity(resourceAddress, {
@@ -26,9 +23,22 @@ export const load: PageLoad = async ({ params }) => {
 
   nftData.then((data) => {
     if (data.length === 0) {
-      errorPage.set({
-        message: 'NFT not found'
-      })
+      return fetch('/api/ret/known-addresses')
+        .then((response) => response.json())
+        .then(({ resourceAddresses }: KnownAddresses) => {
+          if (
+            ![
+              resourceAddresses.ed25519SignatureVirtualBadge,
+              resourceAddresses.packageOfDirectCallerVirtualBadge,
+              resourceAddresses.secp256k1SignatureVirtualBadge,
+              resourceAddresses.globalCallerVirtualBadge
+            ].includes(resourceAddress)
+          ) {
+            errorPage.set({
+              message: 'NFT not found'
+            })
+          }
+        })
     }
   })
 
@@ -42,11 +52,11 @@ export const load: PageLoad = async ({ params }) => {
     nftAddress: params.nft,
     promises: {
       nft: Promise.all([nftData, resourceEntity]).then(
-        ([nftData, { address }]) => transformNft(address, nftData[0])
+        ([nftData, { address }]) =>
+          nftData?.[0] ? transformNft(address, nftData?.[0]) : undefined
       ),
       resource,
-      associatedDapps,
-      authResources: resource.then(({ auth }) => getResourcesFromAuth(auth))
+      associatedDapps
     }
   }
 }
diff --git a/apps/dashboard/src/routes/api/ret/known-addresses/+server.ts b/apps/dashboard/src/routes/api/ret/known-addresses/+server.ts
@@ -0,0 +1,17 @@
+import { RadixEngineToolkit } from '@common/ret'
+import { CURRENT_NETWORK } from '@networks'
+import { error, json } from '@sveltejs/kit'
+
+export const GET = async () => {
+  try {
+    const knownAddresses = await RadixEngineToolkit.Utils.knownAddresses(
+      CURRENT_NETWORK.id
+    )
+
+    return json(knownAddresses, {
+      status: 200
+    })
+  } catch (e) {
+    return error(400)
+  }
+}