headings

Author: jonesmac

src/components/Onboarding.tsx

@@ -1,3 +1,5 @@
+import type { TypographyProps } from '@mui/material'
+import { Typography } from '@mui/material'
 import React from 'react'
 
 import { useOnBoarding } from '../hooks/index.ts'
@@ -12,11 +14,19 @@ export const Onboarding: React.FC = () => {
 
   return (
     <>
+      <SectionHeadingTypography active={!producerIsReachable}>Start Producer and Copy Seed Phrase</SectionHeadingTypography>
       {producerIsReachable ? <RunProducerAlerts.Found /> : <RunProducerAlerts.NotFound />}
       {producerIsReachable && <RunProducerAlerts.CopyPhrase />}
+      <SectionHeadingTypography active={walletIsNotInstalled}>Install and Setup Wallet</SectionHeadingTypography>
       {walletIsNotInstalled === true && <WalletAlerts.NotInstalled />}
       {walletIsInstalled === true && <WalletAlerts.Installed />}
       {walletIsInstalled === true && <WalletAlerts.Setup />}
     </>
   )
 }
+
+export const SectionHeadingTypography: React.FC<TypographyProps & { active?: boolean }> = ({ active, ...props }) => {
+  return (
+    <Typography variant="subtitle1" sx={{ opacity: active ? 1 : 0.33 }} {...props} />
+  )
+}

src/components/alerts/CollapsibleAlert.tsx

@@ -6,7 +6,11 @@ import {
 import { isDefined } from '@xylabs/typeof'
 import React, { useState } from 'react'
 
-export const CollapsibleAlert: React.FC<AlertProps & { alertTitle: string }> = ({
+export interface CollapsableAlertProps extends AlertProps {
+  alertTitle?: string
+}
+
+export const CollapsibleAlert: React.FC<CollapsableAlertProps> = ({
   alertTitle, sx, ...props
 }) => {
   const [open, setOpen] = useState(true)

src/components/alerts/InstallWalletAlerts.tsx

@@ -4,6 +4,7 @@ import {
   Stack,
 } from '@mui/material'
 
+import type { CollapsableAlertProps } from './CollapsibleAlert.tsx'
 import { CollapsibleAlert } from './CollapsibleAlert.tsx'
 
 const InstallWalletAlert: React.FC<AlertProps> = (props) => {
@@ -30,7 +31,7 @@ const WalletInstalledAlert: React.FC<AlertProps> = (props) => {
   )
 }
 
-const WalletSetupAlert: React.FC<AlertProps> = (props) => {
+const WalletSetupAlert: React.FC<CollapsableAlertProps> = (props) => {
   return (
     <CollapsibleAlert alertTitle="Wallet Setup Required" severity="info" {...props}>
       Once the wallet is installed:

src/components/alerts/RunProducerAlerts.tsx

@@ -6,6 +6,7 @@ import {
 import { grey } from '@mui/material/colors'
 import { useState } from 'react'
 
+import type { CollapsableAlertProps } from './CollapsibleAlert.tsx'
 import { CollapsibleAlert } from './CollapsibleAlert.tsx'
 
 const START_COMMAND = 'npm run start-cli'
@@ -65,15 +66,15 @@ const StartProducerAlert: React.FC<AlertProps> = (props) => {
   )
 }
 
-const ProducerFoundAlert: React.FC<AlertProps> = (props) => {
+const ProducerFoundAlert: React.FC<CollapsableAlertProps> = (props) => {
   return (
     <CollapsibleAlert severity="success" alertTitle="Connected to Local Blockchain" {...props}>
       You can now submit transactions to your local XYO Layer One blockchain.
     </CollapsibleAlert>
   )
 }
 
-const CopyProducerPhraseAlert: React.FC<AlertProps> = (props) => {
+const CopyProducerPhraseAlert: React.FC<CollapsableAlertProps> = (props) => {
   return (
     <CollapsibleAlert alertTitle="Copy the Producer Phrase" severity="info" {...props}>
       Check the CLI output for the producer seed phrase. You will need this to see balances and submit transactions in your wallet.