Add Testnet Rewards Section in Astral Explorer

.env

@@ -29,4 +29,4 @@ REDIS_PORT=6379
 
 BULL_USERNAME=bull
 BULL_PASSWORD=board
-BULL_PORT=3020
+BULL_PORT=3020

explorer/src/app/[chain]/testnet-rewards/layout.tsx

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

explorer/src/app/[chain]/testnet-rewards/page.tsx

@@ -0,0 +1,38 @@
+import { TestnetRewardsPage } from '@/components/TestnetRewards'
+import { indexers } from 'constants/indexers'
+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 = indexers.find((c) => c.network === chain)?.title || 'Unknown chain'
+  const title = `${metadata.title} - ${chainTitle} - Testnet Rewards`
+  const images = {
+    url: url + '/images/share-testnet-rewards.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 <TestnetRewardsPage />
+}
+
+export default Page

explorer/src/components/TestnetRewards/FAQ.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { FC, useState } from 'react'
+
+export const FAQ: FC = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  const toggleFAQ = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index)
+  }
+
+  return (
+    <div className='mt-8 w-full max-w-xl'>
+      <h2 className='text-center text-xl font-bold text-gray-900 dark:text-white '>FAQ</h2>
+      <div className='mt-4'>
+        {[
+          {
+            question: 'How will testnet rewards be distributed?',
+            answer:
+              'Testnet rewards will be minted into the genesis block of the Autonomys Network Mainnet.\n\nThis will happen at the launch of Phase-1, and testnet farmers will be able to query the balances of their wallets immediately.',
+          },
+          {
+            question: 'What are the phases of the mainnet launch?',
+            answer:
+              'What has been referred to previously as Mainnet Beta will be deployed in two distinct phases.\n\n- Phase-1 will launch the consensus chain.\nThis allows us to establish the farmer network and secure the PoAS consensus with a healthy amount of space pledged. Consensus chain token transfers will be disabled at the protocol level in Phase-1.\n\n- Phase-2 will introduce our decoupled execution environments which are known as domains. Consensus chain token transfers will be enabled.',
+          },
+          {
+            question: 'What can I do with my mainnet rewards?',
+            answer:
+              'During Mainnet Phase-1 it will be possible to use them as gas to submit transactions on the consensus chain.\n\nFor example a testnet farmer could pay to store data on-chain using the system.remark extrinsic.\nThings get exciting at Phase-2 as token holders will be able to transfer them, convert them to domain tokens using XDM (Cross Domain Messaging) and stake them to run an operator and earn transaction fees.\n\nIf the commitment of running operator infrastructure is not practical, it is also possible to nominate operators to receive a share of the transaction fees being earned by the operators. Transferring consensus tokens to a domain opens up the possibilities afforded by the ecosystem of dApps that live and operate within them.',
+          },
+        ].map((question, index) => (
+          <div key={index} className='m-4'>
+            <button
+              className='w-full rounded-lg bg-white p-8 text-left text-gray-900 shadow-md  dark:border-none dark:bg-gray-800 dark:bg-gradient-to-r dark:from-gradientFrom dark:via-gradientVia dark:to-gradientTo dark:text-white'
+              onClick={() => toggleFAQ(index)}
+            >
+              <span className='font-semibold'>
+                {index + 1}. {question.question}
+              </span>
+              <span className='float-right'>{openIndex === index ? '▲' : '▼'}</span>
+            </button>
+            {openIndex === index && (
+              <div className='mt-2 rounded-lg bg-gray-100 p-4 dark:bg-gray-700'>
+                <p className='whitespace-pre-line text-gray-700 dark:text-white'>
+                  {question.answer}
+                </p>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

explorer/src/components/TestnetRewards/RewardHistory.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import { formatAddress } from '@/utils/formatAddress'
+import { shortString } from '@/utils/string'
+import { TrashIcon } from '@heroicons/react/24/outline'
+import { WalletButton } from 'components/WalletButton'
+import AccountListDropdown from 'components/WalletButton/AccountListDropdown'
+import { INTERNAL_ROUTES, Routes } from 'constants/routes'
+import { WalletType } from 'constants/wallet'
+import useChains from 'hooks/useChains'
+import useWallet from 'hooks/useWallet'
+import Link from 'next/link'
+import { FC, useCallback, useMemo } from 'react'
+import { useViewStates } from 'states/view'
+import { AccountIcon } from '../common/AccountIcon'
+
+export const RewardHistory: FC = () => {
+  const { network } = useChains()
+  const { actingAccount, subspaceAccount, accounts } = useWallet()
+  const { mySubspaceWallets, addSubspaceWallet, removeSubspaceWallet } = useViewStates()
+
+  const isSubspaceWalletConnected = useMemo(
+    () => (subspaceAccount ? mySubspaceWallets.includes(subspaceAccount) : false),
+    [subspaceAccount, mySubspaceWallets],
+  )
+
+  const handleAddSubspaceWallet = useCallback(() => {
+    if (subspaceAccount && !isSubspaceWalletConnected) {
+      addSubspaceWallet(subspaceAccount)
+    }
+  }, [addSubspaceWallet, subspaceAccount, isSubspaceWalletConnected])
+
+  const handleRemoveSubspaceWallet = useCallback(() => {
+    if (subspaceAccount && isSubspaceWalletConnected) {
+      removeSubspaceWallet(subspaceAccount)
+    }
+  }, [removeSubspaceWallet, subspaceAccount, isSubspaceWalletConnected])
+
+  const connectedWallets = useMemo(
+    () => (
+      <div className='mt-4 w-full px-4 py-2'>
+        <h2 className='pb-4 text-center text-xl font-semibold text-gray-800 dark:text-gray-200'>
+          Connected Wallets
+        </h2>
+        <ul className='mt-2 list-inside list-disc space-y-4 text-gray-700 dark:text-gray-300'>
+          {mySubspaceWallets.map((wallet) => (
+            <div key={`${wallet}-account-id`} className='flex items-center justify-between gap-3'>
+              <div className='flex items-center gap-3'>
+                <AccountIcon address={wallet} size={26} theme='beachball' />
+                <Link
+                  data-testid={`account-link-${wallet}`}
+                  href={INTERNAL_ROUTES.accounts.id.page(network, Routes.consensus, wallet)}
+                  className='hover:text-primaryAccent'
+                >
+                  <div>
+                    {shortString(wallet)}{' '}
+                    {
+                      accounts?.find((account) =>
+                        account.type === WalletType.subspace ||
+                        (account as { type: string }).type === 'sr25519'
+                          ? formatAddress(account.address) === wallet
+                          : account.address === wallet,
+                      )?.name
+                    }
+                  </div>
+                </Link>
+              </div>
+              <button
+                onClick={() => removeSubspaceWallet(wallet)}
+                className='ml-2 text-red-500 hover:text-red-700'
+                aria-label={`Remove ${wallet}`}
+              >
+                <TrashIcon className='h-5 w-5' />
+              </button>
+            </div>
+          ))}
+        </ul>
+      </div>
+    ),
+    [accounts, mySubspaceWallets, network, removeSubspaceWallet],
+  )
+
+  return (
+    <div className='w-full max-w-xl'>
+      <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-gradientFrom dark:via-gradientVia dark:to-gradientTo sm:p-6'>
+        <div className='mb-6 flex flex-col items-center justify-center'>
+          <h1 className='mb-2 text-center text-2xl font-bold text-gray-900 dark:text-white'>
+            Reward History
+          </h1>
+        </div>
+        <div className='m-4 flow-root text-gray-900 dark:text-white'>
+          <div className='mb-8 flex w-full flex-col items-center gap-3'>
+            <p className='mb-1 text-center text-lg font-semibold text-gray-700 dark:text-gray-300'>
+              Congratulations!
+            </p>
+            <p className='mb-2 text-center text-gray-600 dark:text-gray-400'>
+              We sincerely appreciate your continued support and belief in the Network throughout
+              the years.
+            </p>
+            <p className='mb-4 text-center text-gray-600 dark:text-gray-400'>
+              Please review your Subspace Network rewards for the testnet phases.
+            </p>
+            <div className='flex justify-center'>
+              {!actingAccount ? <WalletButton /> : <AccountListDropdown />}
+            </div>
+            {actingAccount && !subspaceAccount && (
+              <div className='flex justify-center'>
+                <span className='py-4 text-red-500'>
+                  Please connect a substrate-compatible wallet to view your rewards.
+                </span>
+              </div>
+            )}
+            {actingAccount && (
+              <div className='flex justify-center'>
+                <button
+                  className={`rounded-full px-6 py-2 font-semibold text-white ${
+                    isSubspaceWalletConnected
+                      ? 'cursor-not-allowed bg-blue-300'
+                      : 'bg-blue-600 hover:bg-blue-700'
+                  }`}
+                  onClick={handleAddSubspaceWallet}
+                  disabled={isSubspaceWalletConnected}
+                >
+                  ⚡ Connect more Wallets ⚡
+                </button>
+              </div>
+            )}
+            {isSubspaceWalletConnected && (
+              <div className='flex justify-center'>
+                <button
+                  className='rounded-full bg-red-600 px-6 py-2 font-semibold text-white hover:bg-red-700'
+                  onClick={handleRemoveSubspaceWallet}
+                >
+                  ⚡ Remove Wallet ⚡
+                </button>
+              </div>
+            )}
+            {mySubspaceWallets.length > 0 && connectedWallets}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}