decompose sample into smaller components

Author: jonesmac

src/Sample.tsx

@@ -9,12 +9,8 @@ import { PayloadBuilder } from '@xyo-network/payload-builder'
 import { type HashPayload } from '@xyo-network/xl1-protocol'
 import { useState } from 'react'
 
-import {
-  RunProducerAlerts, TxConfirmedAlert, WalletAlerts,
-} from './components/index.ts'
+import { Onboarding, TxConfirmedAlert, WelcomeStack } from './components/index.ts'
 import { useDefaultGateway, useOnBoarding } from './hooks/index.ts'
-// eslint-disable-next-line import-x/no-internal-modules
-import Xl13DLogo from './images/XL1_3D_Token_Mainnet.svg'
 
 // Data to store off-chain
 const offChainPayloads: Id[] = [0, 1].map(index => ({
@@ -26,9 +22,7 @@ export const XL1BrowserSample = () => {
   const [error, setError] = useState<Error>()
   const [confirmed, setConfirmed] = useState<Hash>()
   const { gateway, error: gatewayError } = useDefaultGateway()
-  const {
-    producerIsReachable, walletIsInstalled, walletIsNotInstalled, showSubmitTransaction,
-  } = useOnBoarding()
+  const { showSubmitTransaction } = useOnBoarding()
 
   const submitTransaction = async () => {
     setError(undefined)
@@ -57,29 +51,14 @@ export const XL1BrowserSample = () => {
     }}
     >
       <Stack width={{ xs: '100%', sm: '600px' }} gap={2} p={2}>
-        <Stack gap={1}>
-          {gatewayError ? <Alert severity="error">{gatewayError.message}</Alert> : null}
-          <Typography variant="h4" sx={{ display: 'inline-flex' }}>
-            <img src={Xl13DLogo} height={38} width={38} style={{ marginRight: '10px' }} />
-            XL1 Browser Sample
-          </Typography>
-          <Typography variant="subtitle1">This is a sample page for adding payloads to the XL1 chain for the browser environment.</Typography>
-        </Stack>
-
-        {/* Onboarding */}
-        {producerIsReachable ? <RunProducerAlerts.Found /> : <RunProducerAlerts.NotFound />}
-        {producerIsReachable && <RunProducerAlerts.CopyPhrase />}
-        {walletIsNotInstalled === true && <WalletAlerts.NotInstalled />}
-        {walletIsInstalled === true && <WalletAlerts.Installed />}
-        {walletIsInstalled === true && <WalletAlerts.Setup />}
+        {gatewayError ? <Alert severity="error">{gatewayError.message}</Alert> : null}
         {error ? <Alert severity="error">{error.message}</Alert> : null}
+        <WelcomeStack />
+        <Onboarding />
 
         {/* Transaction Submission */}
         {showSubmitTransaction === true && (
-          <Stack alignItems="start">
-            {/* {gatewayError ? <Alert severity="error">{gatewayError.message}</Alert> : null} */}
-            <Button variant="contained" onClick={() => void submitTransaction()} disabled={isUndefined(gateway)}>Submit Transaction</Button>
-          </Stack>
+          <Button variant="contained" onClick={() => void submitTransaction()} disabled={isUndefined(gateway)} sx={{ alignSelf: 'start' }}>Submit Transaction</Button>  
         )}
         {isDefined(confirmed) && <TxConfirmedAlert hash={confirmed} />}
       </Stack>

src/components/Onboarding.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useOnBoarding } from '../hooks/index.ts'
+import { WalletAlerts } from './alerts/index.ts'
+import { RunProducerAlerts } from './alerts/index.ts'
+
+export const Onboarding: React.FC = () => {
+  const {
+    producerIsReachable,
+    walletIsInstalled,
+    walletIsNotInstalled,
+  } = useOnBoarding()
+
+  return <>
+    {producerIsReachable ? <RunProducerAlerts.Found /> : <RunProducerAlerts.NotFound />}
+    {producerIsReachable && <RunProducerAlerts.CopyPhrase />}
+    {walletIsNotInstalled === true && <WalletAlerts.NotInstalled />}
+    {walletIsInstalled === true && <WalletAlerts.Installed />}
+    {walletIsInstalled === true && <WalletAlerts.Setup />}
+  </>
+}

src/components/WelcomeStack.tsx

@@ -0,0 +1,15 @@
+import { Stack, StackProps, Typography } from "@mui/material";
+// eslint-disable-next-line import-x/no-internal-modules
+import Xl13DLogo from '../images/XL1_3D_Token_Mainnet.svg'
+
+export const WelcomeStack: React.FC<StackProps> = (props) => {
+  return (
+    <Stack gap={1} {...props}>
+      <Typography variant="h4" sx={{ display: 'inline-flex' }}>
+        <img src={Xl13DLogo} height={38} width={38} style={{ marginRight: '10px' }} />
+        XL1 Browser Sample
+      </Typography>
+      <Typography variant="subtitle1">This is a sample page for adding payloads to the XL1 chain for the browser environment.</Typography>
+    </Stack>
+  )
+}

src/components/index.ts

@@ -1 +1,3 @@
 export * from './alerts/index.ts'
+export * from './Onboarding.tsx'
+export * from './WelcomeStack.tsx'