fix: improve skip logic

Author: gabitoesmiapodo

source/app.tsx

@@ -17,7 +17,7 @@ const App = () => {
   const [setupType, setSetupType] = useState<InstallationSelectItem | undefined>()
   const [selectedFeatures, setSelectedFeatures] = useState<Array<MultiSelectItem> | undefined>()
 
-  const finishStep = useCallback(() => setCurrentStep(currentStep + 1), [currentStep])
+  const finishStep = useCallback(() => setCurrentStep((prevStep) => prevStep + 1), [])
   const onSelectSetupType = useCallback((item: InstallationSelectItem) => setSetupType(item), [])
   const onSelectSelectedFeatures = useCallback(
     (selectedItems: Array<MultiSelectItem>) => setSelectedFeatures([...selectedItems]),

source/components/steps/OptionalPackages.tsx

@@ -1,5 +1,5 @@
 import { Text } from 'ink'
-import { type FC, useState } from 'react'
+import { type FC, useEffect, useState } from 'react'
 import type { MultiSelectItem } from '../../types/types.js'
 import MultiSelect from '../Multiselect/index.js'
 
@@ -42,10 +42,13 @@ interface Props {
 const OptionalPackages: FC<Props> = ({ onCompletion, onSubmit, skip = false }) => {
   const [isFocused, setIsFocused] = useState(true)
 
-  // full installation, do nothing
-  if (skip) {
-    onCompletion()
-  }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Run this only once, no matter what
+  useEffect(() => {
+    // full installation, do nothing
+    if (skip) {
+      onCompletion()
+    }
+  }, [])
 
   const onHandleSubmit = (selectedItems: Array<MultiSelectItem>) => {
     onSubmit(selectedItems)

source/components/steps/PostInstall.tsx

@@ -26,16 +26,16 @@ const SubgraphWarningMessage: FC = () => (
         {figures.warning}
       </Text>
     </Box>
-    <Text bold>Follow these steps:</Text>
+    <Text color={'whiteBright'}>Follow these steps:</Text>
     <Box flexDirection={'column'}>
       <Text>
-        1- Provide your own API key for <Text bold>PUBLIC_SUBGRAPHS_API_KEY</Text> in{' '}
-        <Text bold>.env.local</Text> You can get one{' '}
+        1- Provide your own API key for <Text color={'gray'}>PUBLIC_SUBGRAPHS_API_KEY</Text> in{' '}
+        <Text color={'gray'}>.env.local</Text> You can get one{' '}
         <Link url="https://thegraph.com/studio/apikeys">here</Link>
       </Text>
       <Text>
-        2- After the API key is correctly configured, run <Text bold>pnpm subgraph-codegen</Text> in
-        your console from the project's folder
+        2- After the API key is correctly configured, run{' '}
+        <Text color={'gray'}>pnpm subgraph-codegen</Text> in your console from the project's folder
       </Text>
     </Box>
     <Text>
@@ -57,23 +57,23 @@ const PostInstallMessage: FC<{ projectName: string }> = ({ projectName }) => (
     rowGap={1}
     paddingBottom={2}
   >
-    <Text bold>To start development on your project:</Text>
+    <Text color={'whiteBright'}>To start development on your project:</Text>
     <Box flexDirection={'column'}>
       <Text>
-        1- Move into the project's folder with <Text bold>cd {projectName}</Text>
+        1- Move into the project's folder with <Text color={'gray'}>cd {projectName}</Text>
       </Text>
       <Text>
-        2- Start the development server with <Text bold>pnpm dev</Text>
+        2- Start the development server with <Text color={'gray'}>pnpm dev</Text>
       </Text>
     </Box>
-    <Text bold>More info:</Text>
+    <Text color={'whiteBright'}>More info:</Text>
     <Box flexDirection={'column'}>
       <Text>
-        - Check out <Text bold>.env.local</Text> for more configurations.
+        - Check out <Text color={'gray'}>.env.local</Text> for more configurations.
       </Text>
       <Text>
         - Read <Link url="https://docs.dappbooster.dev">the docs</Link> to know more about{' '}
-        <Text bold>dAppBooster</Text>!
+        <Text color={'gray'}>dAppBooster</Text>!
       </Text>
       <Text>
         - Report issues with this installer{' '}