feat: started simple Homepage to showcase SW (coinbase#483)

Author: Zizzamia

.changeset/little-spies-watch.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/build-onchain-apps': patch
+---
+
+- **feat**: started simple Homepage to showcase SW. By @zizzamia

src/README.md

@@ -7,3 +7,9 @@ This folder contains cli code for `build-onchain-apps`
 ## How to modify blank app
 
 We eject a blank page.tsx file to `template/web/app/pages`. `create/setupProject.ts` → `setupBlankApp` function contains the blank page file.
+
+## To test from root
+
+```
+ts-node src/index.ts create
+```

src/create/setupProject.ts

@@ -13,22 +13,27 @@ import {
 import { experiences } from './experiences';
 
 function generateNavbarExperiencesList(projectDir: string, experiences) {
-  const filePath = path.join(projectDir, '/web/src/components/layout/header/Experiences.tsx');
+  const filePath = path.join(
+    projectDir,
+    '/web/src/components/layout/header/Experiences.tsx'
+  );
   const content = `
 import { ListItem } from './ListItem';
 
 export function Experiences() {
   return (
     <>
-${experiences.map(({ value, label }) => (
-    `      <ListItem href="/${value}">${label}</ListItem>`
-  )).join('\n')}
+${experiences
+  .map(
+    ({ value, label }) => `      <ListItem href="/${value}">${label}</ListItem>`
+  )
+  .join('\n')}
     </>
   );
 }
-`
+`;
   fs.writeFileSync(filePath, content);
-};
+}
 
 async function execAsync(command: string, options = {}) {
   return new Promise((resolve, reject) => {
@@ -122,10 +127,17 @@ export async function setupProject(projectDir: string, project) {
       process.exit(1);
     }
 
+    // Prepare simple homepage
+    removeDownloadedApps(projectDir + '/web/app/home');
+    renameDownloadedFile(
+      projectDir + '/web/app/simple',
+      projectDir + '/web/app/home'
+    );
+
     if (project.selectedModules.length === 0) {
       experiences.map(({ value }) => {
         removeDownloadedApps(projectDir + `/web/app/${value}`);
-      })
+      });
 
       generateNavbarExperiencesList(projectDir, []);
     } else {
@@ -143,17 +155,25 @@ export async function setupProject(projectDir: string, project) {
     }
 
     if (project.pickSmartWallet) {
-      removeDownloadedApps(projectDir + '/web/src/store/createWagmiConfigWithRK.ts');
+      removeDownloadedApps(
+        projectDir + '/web/src/store/createWagmiConfigWithRK.ts'
+      );
       removeDownloadedApps(projectDir + '/web/src/OnchainProvidersWithRK.tsx');
     } else {
       // Replace createWagmiConfig.ts with createWagmiConfigWithRK.ts content
       removeDownloadedApps(projectDir + '/web/src/store/createWagmiConfig.ts');
       const newFilename = projectDir + '/web/src/store/createWagmiConfig.ts';
-      renameDownloadedFile(projectDir + '/web/src/store/createWagmiConfigWithRK.ts', newFilename);
+      renameDownloadedFile(
+        projectDir + '/web/src/store/createWagmiConfigWithRK.ts',
+        newFilename
+      );
       // Replace OnchainProviders.ts with OnchainProvidersWithRK.ts content
       removeDownloadedApps(projectDir + '/web/src/OnchainProviders.tsx');
       const newProviderFilename = projectDir + '/web/src/OnchainProviders.tsx';
-      renameDownloadedFile(projectDir + '/web/src/OnchainProvidersWithRK.tsx', newProviderFilename);
+      renameDownloadedFile(
+        projectDir + '/web/src/OnchainProvidersWithRK.tsx',
+        newProviderFilename
+      );
     }
 
     await execAsync('git add .', { cwd: projectDir, stdio: 'ignore' });

template/web/app/simple/HomePage.tsx

@@ -0,0 +1,37 @@
+'use client';
+import { useAccount } from 'wagmi';
+import Footer from '@/components/layout/footer/Footer';
+import Header from '@/components/layout/header/Header';
+
+/**
+ * Use the page component to wrap the components
+ * that you want to render on the page.
+ */
+export default function HomePage() {
+  const account = useAccount();
+
+  return (
+    <>
+      <Header />
+      <main className="container mx-auto flex flex-col px-8 py-16">
+        <div>
+          <h2 className="text-xl">Developer information</h2>
+          <br />
+          <h3 className="text-lg">Account</h3>
+          <ul>
+            <li>
+              <b>status</b>: {account.status}
+            </li>
+            <li>
+              <b>addresses</b>: {JSON.stringify(account.addresses)}
+            </li>
+            <li>
+              <b>chainId</b>: {account.chainId}
+            </li>
+          </ul>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}

tsconfig.json

@@ -10,12 +10,17 @@
     "importHelpers": true,
     "target": "es2015",
     "module": "commonjs",
-    "lib": ["es2020", "dom"],
+    "lib": [
+      "es2020",
+      "dom"
+    ],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@coinbase/build-onchain-apps": ["src/index.ts"]
+      "@coinbase/build-onchain-apps": [
+        "src/index.ts"
+      ]
     }
   },
   "files": [],