Release/v1.10.0 (#2)

* initial

* feat: ⚡ Add 'aspect' tag to transaction tag

* fix: ✏️ rename all rowInput to rawInput

* fix: Delete redundant operations

* feat: ⚡ display number of bound aspects

* fix: 🐛 ts type error

* fix: delete old Screenshot

* fix: remove pw test file

* fix: remove Txs pw file

configs/app/chain.ts

@@ -12,6 +12,7 @@ const chain = Object.freeze({
     decimals: Number(getEnvValue(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS)) || DEFAULT_CURRENCY_DECIMALS,
   },
   rpcUrl: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_RPC_URL),
+  aspectAddress: getEnvValue(process.env.NEXT_PUBLIC_ASPECT_CORE_ADDRESS) || '',
   isTestnet: getEnvValue(process.env.NEXT_PUBLIC_IS_TESTNET) === 'true',
   verificationType: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE) || 'mining',
 });

types/api/address.ts

@@ -39,6 +39,7 @@ export interface AddressCounters {
   token_transfers_count: string;
   gas_usage_count: string;
   validations_count: string | null;
+  aspect_binding_count?: string;
 }
 
 export interface AddressTokenBalance {

ui/address/AddressDetails.tsx

@@ -1,12 +1,15 @@
 import { Box, Text, Grid, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
+import AspectABI from 'aspect/abi/aspect.json';
+import { ethers } from 'ethers';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { Address as TAddress } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
+import chain from 'configs/app/chain';
 import blockIcon from 'icons/block.svg';
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
@@ -43,6 +46,16 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
       placeholderData: ADDRESS_COUNTERS,
     },
   });
+  const provider = new ethers.JsonRpcProvider(chain.rpcUrl);
+  const contract = new ethers.Contract(chain.aspectAddress, AspectABI, provider);
+
+  contract.aspectsOf(addressHash).then(res => {
+    if (countersQuery.data) {
+      countersQuery.data.aspect_binding_count = res.length;
+    }
+  }).catch(err => {
+    return Promise.reject(err);
+  });
 
   const handleCounterItemClick = React.useCallback(() => {
     window.setTimeout(() => {
@@ -184,6 +197,22 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
           ) :
             0 }
         </DetailsInfoItem>
+        <DetailsInfoItem
+          title="Binding Aspect"
+          hint="The number of bound Aspect"
+          isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+        >
+          { addressQuery.data ? (
+            <AddressCounterItem
+              prop="aspect_binding_count"
+              query={ countersQuery }
+              address={ data.hash }
+              onClick={ handleCounterItemClick }
+              isAddressQueryLoading={ addressQuery.isPlaceholderData }
+            />
+          ) :
+            0 }
+        </DetailsInfoItem>
         { data.has_validated_blocks && (
           <DetailsInfoItem
             title="Blocks validated"

ui/address/details/AddressCounterItem.tsx

@@ -33,8 +33,8 @@ const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoadi
   if (query.isError || data === null || data === undefined) {
     return <span>0</span>;
   }
-
   switch (prop) {
+    case 'aspect_binding_count': return <span>{ data }</span>;
     case 'gas_usage_count':
       return <span>{ BigNumber(data).toFormat() }</span>;
     case 'transactions_count':