Sync production branch with main

.vscode/astral.code-workspace

@@ -43,6 +43,7 @@
     "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
     "editor.formatOnSave": true,
     "cSpell.words": [
+      "autonomys",
       "extrinsics",
       "gemini",
       "graphiql",

.vscode/settings.json

@@ -12,6 +12,7 @@
   "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
   "editor.formatOnSave": true,
   "cSpell.words": [
+    "autonomys",
     "extrinsics",
     "gemini",
     "graphiql",

explorer/.env.sample

@@ -4,6 +4,8 @@ NEXT_PUBLIC_PUBLIC_URL='/'
 NEXTAUTH_SECRET='secret-key-1234'
 NEXTAUTH_URL='http://localhost:3000/'
 
+FAUNA_DB_SECRET="<fauna-db-secret>"
+
 # Google Analytics ID
 GA_MEASUREMENT_ID=G-
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='G-'

explorer/next-auth.d.ts

@@ -1,5 +1,6 @@
+import type { Expr } from 'faunadb'
 import 'next-auth'
-import { DiscordToken, SubspaceToken } from 'types/jwt'
+import type { DiscordToken, SubspaceToken } from 'types/jwt'
 
 // Extending the 'next-auth' module to include custom user and session types
 declare module 'next-auth' {
@@ -16,6 +17,11 @@ declare module 'next-auth' {
     user: User | null
     token: string
   }
+
+  export interface SavedUser extends User {
+    createdAt: Expr
+    updatedAt: Expr
+  }
 }
 
 // Extending the 'next-auth/client' module for client-side usage

explorer/package.json

@@ -44,6 +44,7 @@
     "@vercel/og": "^0.6.2",
     "dayjs": "^1.11.10",
     "ethers": "^6.11.1",
+    "faunadb": "^4.8.0",
     "formik": "^2.4.5",
     "graphql": "^16.6.0",
     "js-cookie": "^3.0.5",

explorer/src/app/[chain]/consensus/accounts/[accountId]/image/route.tsx

@@ -64,9 +64,6 @@ function Screen({
   accountById: AccountByIdQuery['accountById']
 }) {
   dayjs.extend(relativeTime)
-  console.log('chainMatch', chainMatch)
-  console.log('accountId', accountId)
-  console.log('accountById', accountById)
 
   const account = {
     total: accountById?.total ?? '0',
@@ -128,23 +125,24 @@ function Screen({
               }}
               tw='absolute text-xl text-white p-4 ml-30 font-bold'
             >
-              Total {numberWithCommas(bigNumberToNumber(account.total))} tSSC
+              Total {numberWithCommas(bigNumberToNumber(account.total))} ({chainMatch.token.symbol})
             </span>
             <span
               style={{
                 fontFamily: 'Montserrat',
               }}
               tw='absolute text-xl text-white p-4 ml-30 mt-8 font-bold'
             >
-              Reserved {numberWithCommas(bigNumberToNumber(account.reserved))} tSSC
+              Reserved {numberWithCommas(bigNumberToNumber(account.reserved))} (
+              {chainMatch.token.symbol})
             </span>
             <span
               style={{
                 fontFamily: 'Montserrat',
               }}
               tw='absolute text-xl text-white p-4 ml-30  mt-16 font-bold'
             >
-              Free {numberWithCommas(bigNumberToNumber(account.free))} tSSC
+              Free {numberWithCommas(bigNumberToNumber(account.free))} ({chainMatch.token.symbol})
             </span>
           </div>
         </div>

explorer/src/app/[chain]/nova/accounts/[accountId]/image/route.tsx

@@ -128,23 +128,24 @@ function Screen({
               }}
               tw='absolute text-xl text-white p-4 ml-30 font-bold'
             >
-              Total {numberWithCommas(bigNumberToNumber(account.total))} tSSC
+              Total {numberWithCommas(bigNumberToNumber(account.total))} ({chainMatch.token.symbol})
             </span>
             <span
               style={{
                 fontFamily: 'Montserrat',
               }}
               tw='absolute text-xl text-white p-4 ml-30 mt-8 font-bold'
             >
-              Reserved {numberWithCommas(bigNumberToNumber(account.reserved))} tSSC
+              Reserved {numberWithCommas(bigNumberToNumber(account.reserved))} (
+              {chainMatch.token.symbol})
             </span>
             <span
               style={{
                 fontFamily: 'Montserrat',
               }}
               tw='absolute text-xl text-white p-4 ml-30  mt-16 font-bold'
             >
-              Free {numberWithCommas(bigNumberToNumber(account.free))} tSSC
+              Free {numberWithCommas(bigNumberToNumber(account.free))} ({chainMatch.token.symbol})
             </span>
           </div>
         </div>

explorer/src/app/[chain]/operators/layout.tsx → explorer/src/app/[chain]/staking/layout.tsx

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

explorer/src/app/[chain]/operators/stake/page.tsx → explorer/src/app/[chain]/staking/register/page.tsx

@@ -6,7 +6,7 @@ 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} - Stake My Operator`
+  const title = `${metadata.title} - ${chainTitle} - Register Operator`
   return {
     ...metadata,
     title,

explorer/src/components/Account/AccountBalanceStats.tsx

@@ -1,5 +1,6 @@
 import { StatItem } from 'components/common/StatItem'
 import { Account } from 'gql/graphql'
+import useDomains from 'hooks/useDomains'
 import { FC } from 'react'
 import { bigNumberToNumber, numberWithCommas } from 'utils/number'
 import { AccountBalancePieChart } from './AccountBalancePieChart'
@@ -10,6 +11,7 @@ type Props = {
 }
 
 export const AccountBalanceStats: FC<Props> = ({ account, isDesktop = false }) => {
+  const { selectedChain } = useDomains()
   const accountTotal = bigNumberToNumber(account.total || 0)
   const accountFree = bigNumberToNumber(account.free || 0)
   const accountReserved = bigNumberToNumber(account.reserved || 0)
@@ -28,25 +30,27 @@ export const AccountBalanceStats: FC<Props> = ({ account, isDesktop = false }) =
         <div className='text-[26px] font-medium text-gray-900 dark:text-white'>
           {numberWithCommas(accountTotal)}
         </div>
-        <div className='text-[13px] font-semibold text-gray-900 dark:text-white'>tSSC</div>
+        <div className='text-[13px] font-semibold text-gray-900 dark:text-white'>
+          {selectedChain.token.symbol}
+        </div>
       </div>
       <div className='col-span-2 flex size-full items-center justify-center lg:items-end lg:justify-end'>
         <AccountBalancePieChart account={account} />
       </div>
       <div className='flex w-full items-center lg:gap-4 lg:py-8'>
         <div className='flex flex-row justify-center gap-8 lg:flex-none lg:flex-col'>
           <div className='flex items-center'>
-            <div className='mr-2 h-[30px] w-1 bg-purpleElectric' />
+            <div className='bg-purpleElectric mr-2 h-[30px] w-1' />
             <StatItem
               title='Free'
-              value={`${numberWithCommas(accountFree)} tSSC (${freePercent.toFixed(2)}%)`}
+              value={`${numberWithCommas(accountFree)} ${selectedChain.token.symbol} (${freePercent.toFixed(2)}%)`}
             />
           </div>
           <div className='flex items-center'>
-            <div className='mr-2 h-[30px] w-1 bg-blueShade2' />
+            <div className='bg-blueShade2 mr-2 h-[30px] w-1' />
             <StatItem
               title='Reserved'
-              value={`${numberWithCommas(accountReserved)} tSSC (${reservedPercent.toFixed(2)}%)`}
+              value={`${numberWithCommas(accountReserved)} ${selectedChain.token.symbol} (${reservedPercent.toFixed(2)}%)`}
             />
           </div>
         </div>

explorer/src/components/Account/AccountExtrinsicList.tsx

@@ -17,7 +17,6 @@ import { useErrorHandler } from 'react-error-boundary'
 import { downloadFullData } from 'utils/downloadFullData'
 import { sort } from 'utils/sort'
 import { shortString } from 'utils/string'
-import { ExtrinsicListCard } from '../Extrinsic/ExtrinsicListCard'
 import { AccountExtrinsicFilterDropdown } from './AccountExtrinsicFilterDropdown'
 import { QUERY_ACCOUNT_EXTRINSICS } from './query'
 
@@ -176,9 +175,9 @@ export const AccountExtrinsicList: FC<Props> = ({ accountId }) => {
 
   return (
     <div className='mt-5 flex w-full flex-col align-middle'>
-      <div className='mt-6 rounded-[20px] bg-white p-6 dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset'>
+      <div className='dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset mt-6 rounded-[20px] bg-white p-6 dark:border-none dark:bg-gradient-to-r'>
         <div className='flex w-full justify-center gap-2'>
-          <div className='text-sm text-purpleShade2 dark:text-white/75'>Action Filter:</div>
+          <div className='text-purpleShade2 text-sm dark:text-white/75'>Action Filter:</div>
           <AccountExtrinsicFilterDropdown filters={filters} setFilters={setFilters} />
         </div>
       </div>
@@ -194,24 +193,8 @@ export const AccountExtrinsicList: FC<Props> = ({ accountId }) => {
           onPaginationChange={setPagination}
           filename='account-extrinsic-list'
           fullDataDownloader={fullDataDownloader}
-          mobileComponent={<MobileComponent extrinsics={extrinsics} />}
         />
       </div>
     </div>
   )
 }
-
-type MobileComponentProps = {
-  extrinsics: Extrinsic[]
-}
-
-const MobileComponent: FC<MobileComponentProps> = ({ extrinsics }) => (
-  <div className='w-full'>
-    {extrinsics.map((extrinsic, index) => (
-      <ExtrinsicListCard
-        extrinsic={extrinsic}
-        key={`extrinsic-list-card-${extrinsic.id}-${index}`}
-      />
-    ))}
-  </div>
-)

explorer/src/components/Account/AccountGraphTabs.tsx

@@ -1,4 +1,5 @@
 import { TabTitle } from 'components/common/Tabs'
+import useDomains from 'hooks/useDomains'
 import React, { FC, ReactElement, useState } from 'react'
 import { bigNumberToNumber, numberWithCommas } from 'utils/number'
 
@@ -10,6 +11,7 @@ type Props = {
 
 export const AccountGraphTabs: FC<Props> = ({ children, total, isDesktop = false }) => {
   const [selectedTab, setSelectedTab] = useState(0)
+  const { selectedChain } = useDomains()
 
   const tabStyle = isDesktop
     ? 'bg-white border border-slate-100 shadow rounded-[20px] p-4 dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset dark:border-none'
@@ -29,7 +31,9 @@ export const AccountGraphTabs: FC<Props> = ({ children, total, isDesktop = false
             <div className='text-[26px] font-medium text-gray-900 dark:text-white'>
               {total ? numberWithCommas(bigNumberToNumber(total)) : 0}
             </div>
-            <div className='text-[13px] font-semibold text-gray-900 dark:text-white'>tSSC</div>
+            <div className='text-[13px] font-semibold text-gray-900 dark:text-white'>
+              {selectedChain.token.symbol}
+            </div>
           </div>
 
           <div className='w-full lg:w-auto'>

explorer/src/components/Account/AccountLatestRewards.tsx

@@ -18,27 +18,25 @@ interface AccountLatestRewardsProps {
 
 export const AccountLatestRewards: FC<AccountLatestRewardsProps> = ({ rewards }) => {
   const { selectedChain, selectedDomain } = useDomains()
-
   const { accountId } = useParams<AccountIdParam>()
-
   const { push } = useRouter()
 
   return (
-    <div className='flex w-full flex-col rounded-[20px] border border-gray-200 bg-white px-4 dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset'>
+    <div className='dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset flex w-full flex-col rounded-[20px] border border-gray-200 bg-white px-4 dark:border-none dark:bg-gradient-to-r'>
       <div className='flex w-full flex-col gap-6 pl-4'>
         <div className='flex w-full justify-between'>
-          <div className='flex-1 grow text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='text-purpleShade2 flex-1 grow text-[13px] font-normal dark:text-white/75'>
             Block Number
           </div>
-          <div className='flex-1 grow text-center text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='text-purpleShade2 flex-1 grow text-center text-[13px] font-normal dark:text-white/75'>
             Type
           </div>
-          <div className='flex-1 grow text-end text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='text-purpleShade2 flex-1 grow text-end text-[13px] font-normal dark:text-white/75'>
             Amount
           </div>
         </div>
         <div className='w-full'>
-          <ol className='relative w-full border-l border-purpleLight dark:border-blueShade1'>
+          <ol className='border-purpleLight dark:border-blueShade1 relative w-full border-l'>
             {rewards.map(({ id, name, block, amount }, index) => (
               <li
                 key={`${id}-account-rewards-block`}
@@ -75,7 +73,7 @@ export const AccountLatestRewards: FC<AccountLatestRewardsProps> = ({ rewards })
                     .join(' ')}
                 </div>
                 <div className='text-grayDark -mt-1 w-full flex-1 grow text-end text-[13px] font-normal dark:text-white'>
-                  {bigNumberToNumber(amount)} tSSC
+                  {bigNumberToNumber(amount)} {selectedChain.token.symbol}
                 </div>
               </li>
             ))}
@@ -93,7 +91,7 @@ export const AccountLatestRewards: FC<AccountLatestRewardsProps> = ({ rewards })
               ),
             )
           }
-          className='mt-4 w-full rounded-[20px] bg-blueLight py-4 dark:bg-whiteTransparent dark:text-white'
+          className='bg-blueLight dark:bg-whiteTransparent mt-4 w-full rounded-[20px] py-4 dark:text-white'
         >
           See All Rewards
         </button>

explorer/src/components/Account/AccountPreviousRewards.tsx

@@ -218,21 +218,21 @@ export const AccountPreviousRewards: FC<AccountPreviousRewardsProps> = () => {
   }, [handleSearch])
 
   return (
-    <div className='flex w-full flex-col rounded-[20px] border border-gray-200 bg-white p-4 dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset'>
+    <div className='dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset flex w-full flex-col rounded-[20px] border border-gray-200 bg-white p-4 dark:border-none dark:bg-gradient-to-r'>
       <div className='flex w-full flex-col gap-6 py-4 pl-4'>
         <div className='grid w-full grid-cols-3 gap-8 xl:gap-8'>
-          <div className='col-span-1 text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='text-purpleShade2 col-span-1 text-[13px] font-normal dark:text-white/75'>
             Testnet
           </div>
-          <div className='col-span-1 text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
-            Localized tSSC
+          <div className='text-purpleShade2 col-span-1 text-[13px] font-normal dark:text-white/75'>
+            Localized {selectedChain.token.symbol}
           </div>
-          <div className='col-span-1 text-[13px] font-normal text-purpleShade2 dark:text-white/75'>
+          <div className='text-purpleShade2 col-span-1 text-[13px] font-normal dark:text-white/75'>
             Mainnet allocation %
           </div>
         </div>
         <div className='w-full'>
-          <ol className='relative border-l border-purpleLight dark:border-blueShade1'>
+          <ol className='border-purpleLight dark:border-blueShade1 relative border-l'>
             {rewardsPhase.map((phase, index) => (
               <li
                 key={`${index}-account-rewards-block`}

explorer/src/components/Account/AccountRewardGraph.tsx

@@ -6,6 +6,7 @@ import { NotFound } from 'components/layout/NotFound'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import utc from 'dayjs/plugin/utc'
+import useDomains from 'hooks/useDomains'
 import { useTheme } from 'providers/ThemeProvider'
 import { FC, useMemo } from 'react'
 import { LatestRewardsWeekQuery } from '../gql/graphql'
@@ -21,7 +22,7 @@ type Props = {
 
 export const AccountRewardGraph: FC<Props> = ({ accountId, total }) => {
   const { isDark } = useTheme()
-
+  const { selectedChain } = useDomains()
   const lastWeek = dayjs().subtract(3, 'month').utc().format()
 
   const { data, error, loading } = useQuery<LatestRewardsWeekQuery>(QUERY_LAST_WEEK_REWARDS, {
@@ -74,7 +75,9 @@ export const AccountRewardGraph: FC<Props> = ({ accountId, total }) => {
         <div className='text-[26px] font-medium text-gray-900 dark:text-white'>
           {total ? numberWithCommas(bigNumberToNumber(total)) : 0}
         </div>
-        <div className='text-[13px] font-semibold text-gray-900 dark:text-white'>tSSC</div>
+        <div className='text-[13px] font-semibold text-gray-900 dark:text-white'>
+          {selectedChain.token.symbol}
+        </div>
       </div>
       <div className='h-80 w-3/4 md:h-96 md:w-full'>
         {parsedData.length > 0 ? (

explorer/src/components/Account/AccountRewardTable.tsx

@@ -11,7 +11,6 @@ import useDomains from 'hooks/useDomains'
 import useMediaQuery from 'hooks/useMediaQuery'
 import Link from 'next/link'
 import { FC, useMemo } from 'react'
-import { AccountRewardListCard } from './AccountRewardListCard'
 
 dayjs.extend(relativeTime)
 
@@ -102,7 +101,8 @@ export const AccountRewardTable: FC<Props> = ({
         enableSorting: true,
         cell: ({ row }) => (
           <div key={`${row.original.id}-account-balance`}>
-            {row.original.amount ? bigNumberToNumber(row.original.amount) : 0} tSSC
+            {row.original.amount ? bigNumberToNumber(row.original.amount) : 0}{' '}
+            {selectedChain.token.symbol}
           </div>
         ),
       },
@@ -122,17 +122,6 @@ export const AccountRewardTable: FC<Props> = ({
           pagination={pagination}
           pageCount={pageCount}
           onPaginationChange={setPagination}
-          mobileComponent={
-            <div className='w-full'>
-              {rewards.map((reward, index) => (
-                <AccountRewardListCard
-                  index={index}
-                  reward={reward}
-                  key={`account-list-card-${reward.id}`}
-                />
-              ))}
-            </div>
-          }
         />
       </div>
     </div>