Merge pull request #12 from artela-network/feature/aspect

Feature/aspect
artela-network · Jul 1, 2024 · ccf53fe · ccf53fe
2 parents 15d3f91 + f8ea34d
commit ccf53fe
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 15 deletions.
diff --git a/lib/api/resources.ts b/lib/api/resources.ts
@@ -1,4 +1,7 @@
-import type { AspectBindingResponse, AspectTxsResponse } from '../../types/api/aspect';
+import type {
+  AspectBindingResponse, AspectDetail,
+  AspectTxsResponse,
+} from '../../types/api/aspect';
 import { getFeaturePayload } from 'configs/app/features/types';
 import type {
   UserInfo,
@@ -793,6 +796,8 @@ export type ResourcePayload<Q extends ResourceName> = Q extends 'user_info'
   ? AspectBindingResponse
   : Q extends 'aspect_transactions'
   ? AspectTxsResponse
+  : Q extends 'aspects'
+  ? AspectDetail
   : never;
 /* eslint-enable @typescript-eslint/indent */
 

diff --git a/stubs/aspect.ts b/stubs/aspect.ts
@@ -1,4 +1,4 @@
-import type { AspectBinding, AspectTxs } from '../types/api/aspect';
+import type { AspectBinding, AspectDetail, AspectTxs } from '../types/api/aspect';
 
 export const BINDING: AspectBinding = {
   bind_aspect_transaction_hash: '0x3680cabce3118a0d25e3820536815e4c499c20af3c65c3d44fbf8a22fffeef8a',
@@ -30,3 +30,25 @@ export const ASPECTTXS: AspectTxs = {
   type: 'operation',
   value: '0',
 };
+
+export const ASPECTDETAIL: AspectDetail = {
+  bound_address_count: 21,
+  deployed_tx: '0x0a4c5218e7c96fcc7305cb844b34a747312bd4866e571064b656b2729ec88ec5',
+  hash: '0x9639aea2f55e44a5b352a62c80976fae574b7d97',
+  join_points: [
+    'verify_tx',
+  ],
+  properties: { },
+  versions: [
+    {
+      aspect_transaction_hash: '0x0a4c5218e7c96fcc7305cb844b34a747312bd4866e571064b656b2729ec88ec5',
+      aspect_transaction_index: 0,
+      block_number: 996291,
+      join_points: [
+        'verify_tx',
+      ],
+      properties: { },
+      version: 1,
+    },
+  ],
+};
diff --git a/ui/aspect/AspectDetails.tsx b/ui/aspect/AspectDetails.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid } from '@chakra-ui/react';
+import { Box, Grid, Skeleton, Tag } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -55,9 +55,10 @@ const AspectDetails = ({ aspectQuery }: Props) => {
     return null;
   }
 
+  const loading = aspectQuery.isPlaceholderData;
   return (
     <Box>
-      <AddressHeadingInfo aspect={ data } isLoading={ aspectQuery.isPlaceholderData } isLinkDisabled/>
+      <AddressHeadingInfo aspect={ data } isLoading={ loading } isLinkDisabled/>
       <Grid
         mt={ 8 }
         columnGap={ 8 }
@@ -66,35 +67,36 @@ const AspectDetails = ({ aspectQuery }: Props) => {
       >
         <DetailsInfoItem
           title="Version"
-          hint="The number of bound Aspect"
-          isLoading={ aspectQuery.isPlaceholderData }
+          hint="Latest version of this Aspect"
+          isLoading={ loading }
         >
-          { lastVersion }
+          <Skeleton isLoaded={ !loading }>{ lastVersion }</Skeleton>
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Deployed"
-          hint="The number of bound Aspect"
-          isLoading={ aspectQuery.isPlaceholderData }
+          hint="Deployment transaction hash of this Aspect"
+          isLoading={ loading }
         >
           <AddressLink
             hash={ aspectQuery.data?.deployed_tx }
             type="transaction"
             fontWeight="700"
+            isLoading={ loading }
           />
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Join Points"
-          hint="The number of bound Aspect"
-          isLoading={ aspectQuery.isPlaceholderData }
+          hint="Enabled join points of this Aspect, containing verify tx, pre tx execution, post tx execution, pre contract call and post contract call"
+          isLoading={ loading }
         >
-          { aspectQuery.data?.join_points.join(' ') }
+          { aspectQuery.data?.join_points.map(item => <Skeleton key={ item } isLoaded={ !loading }><Tag colorScheme="green">{ item }</Tag></Skeleton>) }
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Bound Addresses"
-          hint="The number of bound Aspect"
-          isLoading={ aspectQuery.isPlaceholderData }
+          hint="Number of accounts those are bound with this Aspect"
+          isLoading={ loading }
         >
-          { aspectQuery.data?.bound_address_count }
+          <Skeleton isLoaded={ !loading }>{ aspectQuery.data?.bound_address_count }</Skeleton>
         </DetailsInfoItem>
       </Grid>
     </Box>

diff --git a/ui/pages/Aspect.tsx b/ui/pages/Aspect.tsx
@@ -14,6 +14,7 @@ import EntityTags from 'ui/shared/EntityTags';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
+import { ASPECTDETAIL } from '../../stubs/aspect';
 import AspectBindings from '../aspect/AspectBindings';
 import AspectProperties from '../aspect/AspectProperties';
 import AspectTxs from '../aspect/AspectTxs';
@@ -31,6 +32,7 @@ const AddressPageContent = () => {
     pathParams: { hash },
     queryOptions: {
       enabled: Boolean(hash),
+      placeholderData: ASPECTDETAIL,
     },
   });
 

diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
@@ -80,6 +80,24 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
     if (marketplaceApps.displayedApps.length) {
       map.app = marketplaceApps.displayedApps;
     }
+    Object.keys(map).forEach(key => {
+      if (key === 'aspect') {
+        const aspectValue = map[key];
+        const addressValue = map.address;
+        map.address = addressValue?.filter(item => {
+          const index = aspectValue?.findIndex(v => {
+            if (item.type === 'address' && v.type === 'aspect') {
+              return item.address.toLowerCase() === v.aspect_hash.toLowerCase();
+            }
+            return false;
+          }) || -1;
+          return index > -1;
+        });
+        if (map.address?.length === 0) {
+          delete map.address;
+        }
+      }
+    });
     return map;
   }, [ query.data?.items, marketplaceApps.displayedApps ]);