Merge pull request #779 from autonomys/main

Sync production with main

.vscode/astral.code-workspace

@@ -48,6 +48,7 @@
     "editor.formatOnSave": true,
     "cSpell.words": [
       "autonomys",
+      "autoid",
       "extrinsics",
       "gemini",
       "graphiql",

.vscode/settings.json

@@ -13,6 +13,7 @@
   "editor.formatOnSave": true,
   "cSpell.words": [
     "autonomys",
+    "autoid",
     "extrinsics",
     "gemini",
     "graphiql",

README.md

@@ -1,4 +1,4 @@
-![build](https://github.com/autonomys//blockexplorer/actions/workflows/build.yaml/badge.svg)
+![build](https://github.com/autonomys/astral/actions/workflows/build.yaml/badge.svg)
 
 # Astral
 

explorer/gql/oldSquidTypes.ts

@@ -2602,6 +2602,7 @@ export type AllRewardForAccountByIdQuery = { __typename?: 'Query', accountReward
 export type BlocksConnectionQueryVariables = Exact<{
   first: Scalars['Int']['input'];
   after?: InputMaybe<Scalars['String']['input']>;
+  orderBy: Array<BlockOrderByInput> | BlockOrderByInput;
 }>;
 
 

explorer/next.config.js

@@ -1,6 +1,17 @@
 /** @type {import('next').NextConfig;} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'docs.subspace.network',
+        port: '',
+        pathname: '**',
+      },
+    ],
+  },
   webpack: (config, { isServer }) => {
     config.module.rules.push({
       test: /\.svg$/,

explorer/src/app/[chain]/autoid/layout.tsx

@@ -0,0 +1,7 @@
+import { DomainHeader } from 'components/layout/DomainHeader'
+import { MainLayout } from 'components/layout/Layout'
+import type { ChildrenPageProps } from 'types/app'
+
+export default async function Layout({ children }: ChildrenPageProps) {
+  return <MainLayout subHeader={<DomainHeader />}>{children}</MainLayout>
+}

explorer/src/app/[chain]/autoid/page.tsx

@@ -0,0 +1,29 @@
+import { AutoIdPage } from '@/components/AutoId'
+import { chains } from 'constants/chains'
+import { metadata } from 'constants/metadata'
+import { Metadata } from 'next'
+import { FC } from 'react'
+import type { ChainPageProps } from 'types/app'
+
+export async function generateMetadata({ params: { chain } }: ChainPageProps): Promise<Metadata> {
+  const chainTitle = chains.find((c) => c.urls.page === chain)?.title || 'Unknown chain'
+  const title = `${metadata.title} - ${chainTitle} - Auto ID`
+  return {
+    ...metadata,
+    title,
+    openGraph: {
+      ...metadata.openGraph,
+      title,
+    },
+    twitter: {
+      ...metadata.twitter,
+      title,
+    },
+  }
+}
+
+const Page: FC = () => {
+  return <AutoIdPage />
+}
+
+export default Page

explorer/src/app/[chain]/domains/layout.tsx

@@ -0,0 +1,7 @@
+import { DomainHeader } from 'components/layout/DomainHeader'
+import { MainLayout } from 'components/layout/Layout'
+import type { ChildrenPageProps } from 'types/app'
+
+export default async function Layout({ children }: ChildrenPageProps) {
+  return <MainLayout subHeader={<DomainHeader />}>{children}</MainLayout>
+}

explorer/src/app/[chain]/domains/page.tsx

@@ -0,0 +1,29 @@
+import { DomainPage } from 'components/Domain'
+import { chains } from 'constants/chains'
+import { metadata } from 'constants/metadata'
+import { Metadata } from 'next'
+import { FC } from 'react'
+import type { ChainPageProps } from 'types/app'
+
+export async function generateMetadata({ params: { chain } }: ChainPageProps): Promise<Metadata> {
+  const chainTitle = chains.find((c) => c.urls.page === chain)?.title || 'Unknown chain'
+  const title = `${metadata.title} - ${chainTitle} - Domain`
+  return {
+    ...metadata,
+    title,
+    openGraph: {
+      ...metadata.openGraph,
+      title,
+    },
+    twitter: {
+      ...metadata.twitter,
+      title,
+    },
+  }
+}
+
+const Page: FC = () => {
+  return <DomainPage />
+}
+
+export default Page

explorer/src/app/[chain]/farming/layout.tsx

@@ -0,0 +1,7 @@
+import { FarmingHeader } from 'components/layout/FarmingHeader'
+import { MainLayout } from 'components/layout/Layout'
+import type { ChildrenPageProps } from 'types/app'
+
+export default async function Layout({ children }: ChildrenPageProps) {
+  return <MainLayout subHeader={<FarmingHeader />}>{children}</MainLayout>
+}

explorer/src/app/[chain]/farming/page.tsx

@@ -0,0 +1,38 @@
+import { DownloadPage } from '@/components/Farming'
+import { chains } from 'constants/chains'
+import { metadata, url } from 'constants/metadata'
+import { Metadata } from 'next'
+import { FC } from 'react'
+import type { ChainPageProps } from 'types/app'
+
+export async function generateMetadata({ params: { chain } }: ChainPageProps): Promise<Metadata> {
+  const chainTitle = chains.find((c) => c.urls.page === chain)?.title || 'Unknown chain'
+  const title = `${metadata.title} - ${chainTitle} - Farming`
+  const images = {
+    url: url + '/images/share-farming.png',
+    secureUrl: url + 'image/png',
+    width: 900,
+    height: 600,
+    alt: title,
+  }
+  return {
+    ...metadata,
+    title,
+    openGraph: {
+      ...metadata.openGraph,
+      title,
+      images,
+    },
+    twitter: {
+      ...metadata.twitter,
+      title,
+      images,
+    },
+  }
+}
+
+const Page: FC = () => {
+  return <DownloadPage />
+}
+
+export default Page

explorer/src/components/Account/AccountRewardList.tsx

@@ -8,7 +8,7 @@ import { SortingState } from '@tanstack/react-table'
 import { SortedTable } from 'components/common/SortedTable'
 import { Spinner } from 'components/common/Spinner'
 import { PAGE_SIZE } from 'constants/general'
-import { INTERNAL_ROUTES } from 'constants/routes'
+import { INTERNAL_ROUTES, Routes } from 'constants/routes'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { RewardEventOrderByInput, RewardsListQueryVariables } from 'gql/graphql'
@@ -73,6 +73,8 @@ export const AccountRewardList: FC = () => {
       skip: !inFocus,
       pollInterval: 6000,
     },
+    selectedChain?.isDomain ? Routes.nova : Routes.consensus,
+    'accountReward',
   )
 
   const {
@@ -208,9 +210,12 @@ export const AccountRewardList: FC = () => {
   useEffect(() => {
     setIsVisible(inView)
   }, [inView, setIsVisible])
+
   return (
     <div className='flex w-full flex-col align-middle'>
-      <AccountDetailsCard account={account} accountAddress={convertedAddress ?? '0x'} />
+      {convertedAddress && (
+        <AccountDetailsCard account={account} accountAddress={convertedAddress} />
+      )}
 
       <div className='mt-5 flex w-full justify-between'>
         <div className='text-base font-medium text-grayDark dark:text-white'>{`Rewards (${totalLabel})`}</div>

explorer/src/components/AutoId/index.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { FC } from 'react'
+
+export const AutoIdPage: FC = () => {
+  return (
+    <div className='flex w-full flex-col items-center space-y-4'>
+      <div className='w-full max-w-4xl'>
+        <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset sm:p-6'>
+          <div className='mb-10 flex flex-col items-center justify-center'>
+            <h1 className='mb-8 mt-6 text-center text-4xl font-bold text-gray-900 dark:text-white'>
+              Auto-ID
+            </h1>
+          </div>
+          <div className='m-6 flow-root text-gray-900 dark:text-white'>
+            <div className='mb-12 flex w-full items-center gap-5 overflow-x-auto'>
+              <p>
+                Auto ID is our first primitive enabling identity infrastructure at massive scale.
+                Documentation coming soon.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

explorer/src/components/Block/BlockList.tsx

@@ -12,6 +12,7 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import {
   Block,
+  BlockOrderByInput,
   BlocksConnectionDomainQuery,
   BlocksConnectionDomainQueryVariables,
   BlocksConnectionQuery,
@@ -49,15 +50,17 @@ export const BlockList: FC = () => {
     [selectedChain.isDomain],
   )
 
+  const orderBy = useMemo(() => BlockOrderByInput.HeightDesc, [])
   const variables = useMemo(
     () => ({
       first: pagination.pageSize,
       after:
         pagination.pageIndex > 0
           ? (pagination.pageIndex * pagination.pageSize).toString()
           : undefined,
+      orderBy,
     }),
-    [pagination.pageSize, pagination.pageIndex],
+    [pagination.pageSize, pagination.pageIndex, orderBy],
   )
 
   const { setIsVisible } = useSquidQuery<

explorer/src/components/Block/query.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client'
 
 export const QUERY_BLOCK_LIST_CONNECTION = gql`
-  query BlocksConnection($first: Int!, $after: String) {
-    blocksConnection(orderBy: height_DESC, first: $first, after: $after) {
+  query BlocksConnection($first: Int!, $after: String, $orderBy: [BlockOrderByInput!]!) {
+    blocksConnection(orderBy: $orderBy, first: $first, after: $after) {
       edges {
         cursor
         node {

explorer/src/components/Domain/index.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { BlockIcon, DocIcon } from '@/components/icons'
+import { Routes } from 'constants/routes'
+import useDomains from 'hooks/useDomains'
+import Link from 'next/link'
+import { FC, useMemo } from 'react'
+
+export const DomainPage: FC = () => {
+  const { selectedChain } = useDomains()
+
+  const listOfCards = useMemo(
+    () => [
+      {
+        title: 'Nova',
+        description: 'EVM domain',
+        href: `/${selectedChain.urls.page}/${Routes.nova}`,
+        icon: <BlockIcon />,
+        darkBgClass:
+          'dark:bg-gradient-to-b dark:from-purpleLighterAccent dark:via-purpleMedium dark:to-purplePale',
+      },
+      {
+        title: 'Auto-ID',
+        description: 'Identity domain',
+        href: `/${selectedChain.urls.page}/${Routes.autoid}`,
+        icon: <DocIcon />,
+        darkBgClass: 'dark:bg-gradient-to-b dark:from-purpleDeep dark:to-purplePastel',
+      },
+    ],
+    [selectedChain.urls.page],
+  )
+
+  return (
+    <div className='flex w-full flex-col items-center space-y-4'>
+      <div className='w-full max-w-4xl'>
+        <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset sm:p-6'>
+          <div className='mb-10 flex flex-col items-center justify-center'>
+            <h1 className='mb-8 mt-6 text-center text-4xl font-bold text-gray-900 dark:text-white'>
+              Domains
+            </h1>
+          </div>
+          <div className='m-6 flow-root text-gray-900 dark:text-white'>
+            <div className='mb-12 flex w-full items-center gap-5 overflow-x-auto'>
+              <p>
+                The Autonomys Network can run multiple domains, each with different runtimes,
+                genesis configurations, and validator sets. Each domain is a separate blockchain
+                with its own state and history. Operators for each domain are responsible for
+                preparing blocks of transactions. Committing these domain blocks as bundles to the
+                Consensus Layer is done on a per-domain basis.
+              </p>
+            </div>
+            <div className='mb-12 flex w-full items-center gap-5 overflow-x-auto'>
+              <p>
+                At the moment, we have an EVM (Ethereum Virtual Machine) domain and a custom
+                decentralized identity domain. However, more custom or existing runtime domains
+                could be deployed in the future.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className='m-4 p-4'>
+          <div className='m-6 flow-root'>
+            <div className='mb-12 flex w-full items-center justify-center gap-5 overflow-x-auto'>
+              {listOfCards.map(({ title, description, href, icon, darkBgClass }, index) => (
+                <Link key={index} href={href}>
+                  <div
+                    key={index}
+                    className={'h-[216px] w-1/5 min-w-[200px] grow cursor-pointer md:min-w-[228px]'}
+                  >
+                    <div
+                      className={`flex h-full flex-col justify-center rounded-[20px] bg-white ${darkBgClass}`}
+                    >
+                      <div className='mb-6 flex w-full items-center justify-center align-middle'>
+                        {icon}
+                      </div>
+                      <div className='flex w-full flex-col  items-center justify-center align-middle'>
+                        <h2 className='mb-2.5 text-center  text-2xl font-normal text-gray-900 dark:text-white'>
+                          {title}
+                        </h2>
+                        <p className='text-md text-center font-medium leading-relaxed dark:text-white'>
+                          {description}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}