feat: add post-install instructions

Author: gabitoesmiapodo

biome.json

@@ -8,9 +8,6 @@
     "enabled": true,
     "useIgnoreFile": true
   },
-  "files": {
-    "ignore": ["source/**/*.js"]
-  },
   "formatter": {
     "attributePosition": "multiline",
     "indentStyle": "space",

package.json

@@ -13,13 +13,16 @@
     "lint": "pnpm biome check",
     "lint:fix": "pnpm biome check --write"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "figures": "^6.1.0",
     "ink": "^5.2.1",
     "ink-big-text": "^2.0.0",
     "ink-divider": "^4.1.1",
     "ink-gradient": "^3.0.0",
+    "ink-link": "^4.1.0",
     "ink-select-input": "^6.2.0",
     "ink-spawn": "^0.1.4",
     "ink-text-input": "^6.0.0",
@@ -34,6 +37,8 @@
     "typescript": "^5.8.3"
   },
   "pnpm": {
-    "onlyBuiltDependencies": ["@biomejs/biome"]
+    "onlyBuiltDependencies": [
+      "@biomejs/biome"
+    ]
   }
 }

pnpm-lock.yaml

@@ -6,6 +6,7 @@ import FileCleanup from './import/components/steps/FileCleanup.js'
 import Install from './import/components/steps/Install/Install.js'
 import InstallationMode from './import/components/steps/InstallationMode.js'
 import OptionalPackages from './import/components/steps/OptionalPackages.js'
+import PostInstall from './import/components/steps/PostInstall.js'
 import ProjectName from './import/components/steps/ProjectName.js'
 import type { InstallationSelectItem, MultiSelectItem } from './import/types/types.js'
 import { canShowStep } from './import/utils/utils.js'
@@ -65,7 +66,14 @@ const App = () => {
         projectName={projectName}
         key={6}
       />,
-      <Text key={7}>Done!</Text>,
+      <PostInstall
+        projectName={projectName}
+        installationConfig={{
+          installationType: setupType?.value,
+          selectedFeatures: selectedFeatures,
+        }}
+        key={7}
+      />,
     ],
     [
       finishStep,
@@ -81,6 +89,7 @@ const App = () => {
     <Box
       flexDirection={'column'}
       rowGap={1}
+      width={80}
     >
       <MainTitle />
       {steps.map((item, index) => canShowStep(currentStep, index + 1) && item)}

source/app.tsx

@@ -6,7 +6,6 @@ const Divider: FC<{ title: string }> = ({ title }) => (
     titlePadding={2}
     titleColor={'whiteBright'}
     title={title}
-    width={80}
   />
 )
 

source/import/components/Divider.tsx

@@ -0,0 +1,106 @@
+import { Box, Text } from 'ink'
+import Link from 'ink-link'
+import React, { type FC } from 'react'
+import type { InstallationType, MultiSelectItem } from '../../types/types.js'
+import { featureSelected } from '../../utils/utils.js'
+import Divider from '../Divider.js'
+
+const SubgraphWarningMessage: FC = () => (
+  <Box
+    flexDirection={'column'}
+    rowGap={1}
+  >
+    <Box
+      alignItems={'center'}
+      borderColor={'yellow'}
+      borderStyle={'bold'}
+      flexDirection={'column'}
+      justifyContent={'center'}
+      padding={1}
+    >
+      <Text color={'yellow'}>
+        <Text bold>WARNING:</Text> You <Text bold>MUST</Text> finish subgraph configuration manually
+      </Text>
+    </Box>
+    <Text bold>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 at{' '}
+        <Link url="https://thegraph.com/studio/apikeys">https://thegraph.com/studio/apikeys</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
+      </Text>
+    </Box>
+    <Text
+      color={'yellow'}
+      bold
+    >
+      Only after you have followed the previous steps you may proceed.
+    </Text>
+  </Box>
+)
+
+const PostInstallMessage: FC<{ projectName: string }> = ({ projectName }) => (
+  <Box
+    flexDirection={'column'}
+    rowGap={1}
+    paddingBottom={2}
+  >
+    <Text bold>To start development on your project:</Text>
+    <Box flexDirection={'column'}>
+      <Text>
+        1- Move into the project's folder with <Text bold>cd {projectName}</Text>
+      </Text>
+      <Text>
+        2- Start the development server with <Text bold>pnpm dev</Text>
+      </Text>
+    </Box>
+    <Text bold>More info:</Text>
+    <Box flexDirection={'column'}>
+      <Text>
+        - Check out <Text bold>.env.local</Text> for more configurations.
+      </Text>
+      <Text>
+        - Read the docs at{' '}
+        <Link url="https://docs.dappbooster.dev">https://docs.dappbooster.dev</Link> to know more
+        about <Text bold>dAppBooster</Text>
+      </Text>
+    </Box>
+  </Box>
+)
+
+interface Props {
+  installationConfig: {
+    installationType: InstallationType | undefined
+    selectedFeatures?: Array<MultiSelectItem>
+  }
+  projectName: string
+}
+
+/**
+ * Component to ask for the project name.
+ * @param selectedFeatures
+ * @param projectName
+ */
+const PostInstall: FC<Props> = ({ installationConfig, projectName }) => {
+  const { selectedFeatures, installationType } = installationConfig
+  const subgraphSupport = featureSelected('subgraph', selectedFeatures)
+
+  return (
+    <>
+      <Divider title={'Post-install instructions'} />
+      <Box
+        flexDirection={'column'}
+        rowGap={2}
+      >
+        {(subgraphSupport || installationType === 'full') && <SubgraphWarningMessage />}
+        <PostInstallMessage projectName={projectName} />
+      </Box>
+    </>
+  )
+}
+
+export default PostInstall

source/import/components/steps/PostInstall.tsx

@@ -39,7 +39,7 @@ const ProjectName: FC<Props> = ({ projectName, onSubmit, onCompletion }) => {
       answer={projectName}
       errorMessage={errorMessage}
       onSubmit={handleSubmit}
-      question={'Project name?'}
+      question={'Project name'}
       tip={'Letters (a–z, A–Z), numbers (0–9), and underscores (_) are allowed.'}
     />
   )