Merge pull request #1384 from autonomys/main

Sync main w/ production

Author: marc-aurele-besner

explorer/package.json

@@ -14,6 +14,9 @@
   "bugs": {
     "url": "https://github.com/autonomys/astral/issues"
   },
+  "engines": {
+    "node": ">=20.8.0"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -31,10 +34,10 @@
   "dependencies": {
     "@apollo/client": "^3.13.2",
     "@apollo/experimental-nextjs-app-support": "^0.11.9",
-    "@autonomys/auto-consensus": "^1.3.4",
-    "@autonomys/auto-drive": "^1.3.4",
-    "@autonomys/auto-utils": "^1.3.4",
-    "@autonomys/auto-xdm": "^1.3.4",
+    "@autonomys/auto-consensus": "^1.4.0",
+    "@autonomys/auto-drive": "^1.4.0",
+    "@autonomys/auto-utils": "^1.4.0",
+    "@autonomys/auto-xdm": "^1.4.0",
     "@floating-ui/react": "^0.27.5",
     "@headlessui/react": "^1.7.19",
     "@headlessui/tailwindcss": "^0.2.2",
@@ -97,7 +100,7 @@
   "devDependencies": {
     "@discordjs/rest": "^2.2.0",
     "@graphql-codegen/cli": "^5.0.5",
-    "@graphql-codegen/client-preset": "^4.6.4",
+    "@graphql-codegen/client-preset": "^4.7.0",
     "@graphql-codegen/typescript-react-apollo": "^4.3.2",
     "@next/eslint-plugin-next": "^14.1.3",
     "@svgr/webpack": "^8.1.0",

explorer/src/components/Consensus/Account/AccountTransfersList.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable camelcase */
+import { utcToLocalRelativeTime } from '@/utils/time'
 import { useApolloClient } from '@apollo/client'
 import { SortingState } from '@tanstack/react-table'
 import { AccountIconWithLink } from 'components/common/AccountIcon'
@@ -28,7 +29,6 @@ import { hasValue, isLoading, useQueryStates } from 'states/query'
 import type { Cell } from 'types/table'
 import { downloadFullData } from 'utils/downloadFullData'
 import { bigNumberToNumber } from 'utils/number'
-import { formatExtrinsicId } from 'utils/string'
 import { countTablePages } from 'utils/table'
 
 type Props = {
@@ -157,7 +157,7 @@ export const AccountTransfersList: FC<Props> = ({ accountId }) => {
               )}
               className='hover:text-primaryAccent'
             >
-              <div>{formatExtrinsicId(row.original.extrinsic_id)}</div>
+              <div>{row.original.extrinsic_id}</div>
             </Link>
           </div>
         ),
@@ -242,7 +242,7 @@ export const AccountTransfersList: FC<Props> = ({ accountId }) => {
         enableSorting: true,
         cell: ({ row }: Cell<Row>) => (
           <div key={`${row.original.id}-created_at-${row.index}`}>
-            {row.original.timestamp(row.original.timestamp)}
+            {utcToLocalRelativeTime(row.original.timestamp)}
           </div>
         ),
       },

explorer/src/components/Staking/OperatorsList.tsx

@@ -280,9 +280,15 @@ export const OperatorsList: FC<OperatorsListProps> = ({ domainId }) => {
               excludeActions.push(OperatorActionType.Deregister, OperatorActionType.UnlockNominator)
             if (row.original.status === OperatorStatus.PENDING_NEXT_EPOCH)
               excludeActions.push(OperatorActionType.Nominating)
-            if (row.original.status === OperatorStatus.ACTIVE)
+            if (
+              row.original.status === OperatorStatus.ACTIVE &&
+              !row.original.rawStatus.includes('deregistered')
+            )
               excludeActions.push(OperatorActionType.UnlockNominator)
-            if (row.original.status === OperatorStatus.DEREGISTERED)
+            if (
+              row.original.status === OperatorStatus.DEREGISTERED ||
+              row.original.rawStatus.includes('deregistered')
+            )
               excludeActions.push(OperatorActionType.Nominating, OperatorActionType.Deregister)
             if (row.original.status === OperatorStatus.SLASHED) return <></>
             const rowData = {

explorer/src/components/common/AccountIcon.tsx

@@ -2,6 +2,7 @@ import { shortString } from '@autonomys/auto-utils'
 import Identicon from '@polkadot/react-identicon'
 import { IconTheme } from '@polkadot/react-identicon/types'
 import { INTERNAL_ROUTES } from 'constants/routes'
+import { isAddress } from 'ethers'
 import useMediaQuery from 'hooks/useMediaQuery'
 import Link from 'next/link'
 import { FC } from 'react'
@@ -49,15 +50,25 @@ export const AccountIconWithLink = ({
   forceShortString?: boolean
 }) => {
   const isDesktop = useMediaQuery('(min-width: 1440px)')
+  const isEthereumAddress = isAddress(address)
   return (
     <div className='flex items-center gap-2'>
-      <AccountIcon address={address} size={26} theme='beachball' {...props} />
-      <Link
-        href={link ?? INTERNAL_ROUTES.accounts.id.page(network, section, address)}
-        className='hover:text-primaryAccent'
-      >
-        <div>{!isDesktop || forceShortString ? shortString(address) : address}</div>
-      </Link>
+      {!isEthereumAddress ? (
+        <>
+          <AccountIcon address={address} size={26} theme='beachball' {...props} />
+          <Link
+            href={link ?? INTERNAL_ROUTES.accounts.id.page(network, section, address)}
+            className='hover:text-primaryAccent'
+          >
+            <div>{!isDesktop || forceShortString ? shortString(address) : address}</div>
+          </Link>
+        </>
+      ) : (
+        <>
+          <AccountIcon address={address} size={26} theme='ethereum' {...props} />
+          <div>{address}</div>
+        </>
+      )}
     </div>
   )
 }

explorer/src/components/common/OutOfSyncBanner.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@apollo/client'
-import { blockNumber } from '@autonomys/auto-consensus'
+// import { blockNumber } from '@autonomys/auto-consensus' // To re-implement as soon as the fix is released
 import { activate, NetworkId } from '@autonomys/auto-utils'
 import { EXTERNAL_ROUTES } from 'constants/routes'
 import { LastBlockDocument, LastBlockQuery } from 'gql/graphql'
@@ -60,7 +60,9 @@ export const useOutOfSyncBanner = () => {
   const getChainLastBlock = useCallback(async () => {
     try {
       const api = await activate({ networkId: network })
-      setLastBlockNumber(network, await blockNumber(api))
+      const block = await api.rpc.chain.getBlock()
+      const lastBlock = parseInt(block.block.header.number.toString())
+      setLastBlockNumber(network, lastBlock)
       await api.disconnect()
     } catch (error) {
       console.error('Error getting chain last block', error)

explorer/src/components/layout/HeaderChainDropdown.tsx

@@ -31,7 +31,7 @@ export const HeaderChainDropdown: FC = () => {
   return (
     <Listbox value={indexerSet} onChange={handleChainChange}>
       <div className='relative'>
-        <Listbox.Button className='relative w-full cursor-default rounded-full bg-white py-2 pl-3 pr-10 text-left font-["Montserrat"] shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 dark:bg-blueAccent dark:text-white sm:text-sm'>
+        <Listbox.Button className='relative cursor-default rounded-full bg-white py-2 pl-3 pr-10 text-left font-["Montserrat"] shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 dark:bg-blueAccent dark:text-white sm:w-full sm:text-sm md:w-48 lg:w-48'>
           <div className='flex items-center justify-center'>
             <AutonomysSymbol />
             <span className='ml-2 hidden w-5 truncate text-sm sm:block md:w-full '>

explorer/src/utils/string.ts

@@ -10,10 +10,3 @@ export const allCapsToNormal = (text: string) =>
 
 export const limitText = (text: string, limit = 20) =>
   text.length > limit ? text.slice(0, limit) + '...' : text
-
-export const formatExtrinsicId = (extrinsicId: string): string => {
-  const parts = extrinsicId.split('-')
-  const part1 = parts[0].replace(/^0+/, '')
-  const part2 = parts[2].replace(/^0+/, '')
-  return part1 + '-' + part2
-}