Add template for NextJS app (#34)

Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

- Add hotfix for updating old DB with new org slug
- Add remove-deployment script (for debugging)
- Part of cerc-io/snowballtools-base#28
![image](/attachments/ceb0d4d6-4fa7-4914-ad18-c57d9d0f5b95)

Co-authored-by: Isha <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#34
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Co-committed-by: Nabarun <nabarun@deepstacksoft.com>

build-webapp.sh

@@ -14,6 +14,7 @@ VITE_SERVER_URL = 'LACONIC_HOSTED_CONFIG_server_url'
 VITE_GITHUB_CLIENT_ID = 'LACONIC_HOSTED_CONFIG_github_clientid'
 VITE_GITHUB_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_pwa_templaterepo'
 VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo'
+VITE_GITHUB_NEXT_APP_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_next_app_templaterepo'
 VITE_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_wallet_connect_id'
 VITE_LACONICD_CHAIN_ID = 'LACONIC_HOSTED_CONFIG_laconicd_chain_id'
 VITE_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'

packages/backend/src/database.ts

@@ -49,12 +49,25 @@ export class Database {
     await this.dataSource.initialize();
     log('database initialized');
 
-    const organizations = await this.getOrganizations({});
+    let organizations = await this.getOrganizations({});
 
     // Load an organization if none exist
     if (!organizations.length) {
       const orgEntities = await getEntities(path.resolve(__dirname, ORGANIZATION_DATA_PATH));
-      await loadAndSaveData(Organization, this.dataSource, [orgEntities[0]]);
+      organizations = await loadAndSaveData(Organization, this.dataSource, [orgEntities[0]]);
+    }
+
+    // Hotfix for updating old DB data
+    if (organizations[0].slug === 'snowball-tools-1') {
+      const [orgEntity] = await getEntities(path.resolve(__dirname, ORGANIZATION_DATA_PATH));
+      
+      await this.updateOrganization(
+        organizations[0].id,
+        {
+          slug: orgEntity.slug as string,
+          name: orgEntity.name as string
+        }
+      )
     }
   }
 
@@ -121,6 +134,14 @@ export class Database {
     return newUserOrganization;
   }
 
+  async updateOrganization(organizationId: string, data: DeepPartial<Organization>): Promise<boolean> {
+    const organizationRepository = this.dataSource.getRepository(Organization);
+    const updateResult = await organizationRepository.update({ id: organizationId }, data);
+    assert(updateResult.affected);
+
+    return updateResult.affected > 0;
+  }
+
   async getProjects(options: FindManyOptions<Project>): Promise<Project[]> {
     const projectRepository = this.dataSource.getRepository(Project);
     const projects = await projectRepository.find(options);

packages/deployer/deploy-frontend.sh

@@ -8,8 +8,11 @@ echo "Using AUTHORITY: $AUTHORITY"
 # Repository URL
 REPO_URL="https://git.vdb.to/cerc-io/snowballtools-base"
 
-# Get the latest commit hash from the repository
-LATEST_HASH=$(git ls-remote $REPO_URL HEAD | awk '{print $1}')
+# Get the latest commit hash for a branch
+BRANCH_NAME="main"
+LATEST_HASH=$(git ls-remote $REPO_URL refs/heads/$BRANCH_NAME | awk '{print $1}')
+
+echo "Latest commit hash for branch $BRANCH_NAME: $LATEST_HASH"
 
 # Extract version from ../frontend/package.json
 PACKAGE_VERSION=$(jq -r '.version' ../frontend/package.json)
@@ -126,6 +129,7 @@ record:
       LACONIC_HOSTED_CONFIG_github_clientid: Ov23liaet4yc0KX0iM1c
       LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: laconic-templates/test-progressive-web-app
       LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: laconic-templates/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: laconic-templates/starter.nextjs-react-tailwind
       LACONIC_HOSTED_CONFIG_wallet_connect_id: 63cad7ba97391f63652161f484670e15
       LACONIC_HOSTED_CONFIG_laconicd_chain_id: laconic-testnet-2
   meta:

packages/deployer/deploy-frontend.staging.sh

@@ -40,6 +40,7 @@ record:
       LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools/test-progressive-web-app
       LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools/test-progressive-web-app
       LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: snowball-tools/starter.nextjs-react-tailwind
       LACONIC_HOSTED_CONFIG_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
       LACONIC_HOSTED_CONFIG_laconicd_chain_id: laconic-testnet-2
       LACONIC_HOSTED_CONFIG_lit_relay_api_key: 15DDD969-E75F-404D-AAD9-58A37C4FD354_snowball

packages/deployer/records/application-deployment-request.yml

@@ -10,6 +10,7 @@ record:
       LACONIC_HOSTED_CONFIG_github_clientid: Ov23liaet4yc0KX0iM1c
       LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: laconic-templates/test-progressive-web-app
       LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: laconic-templates/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: laconic-templates/starter.nextjs-react-tailwind
       LACONIC_HOSTED_CONFIG_wallet_connect_id: 63cad7ba97391f63652161f484670e15
   meta:
     note: Added by Snowball @ Thu Apr  4 14:49:41 UTC 2024

packages/deployer/remove-deployment.sh

@@ -0,0 +1,57 @@
+#!/bin/bash
+
+source .env
+echo "Using REGISTRY_BOND_ID: $REGISTRY_BOND_ID"
+echo "Using DEPLOYER_LRN: $DEPLOYER_LRN"
+
+# Generate application-deployment-removal-request.yml
+REMOVAL_REQUEST_RECORD_FILE=records/application-deployment-removal-request.yml
+# TODO: Pass deployment record ID as arg
+DEPLOYMENT_RECORD_ID=bafyreidjho77xeczaqpyawhc4wbpm5it5atibtuxk6ost6vnpu2svlp3ka
+
+cat > $REMOVAL_REQUEST_RECORD_FILE <<EOF
+record:
+  deployer: $DEPLOYER_LRN
+  deployment: $DEPLOYMENT_RECORD_ID
+  type: ApplicationDeploymentRemovalRequest
+  version: 1.0.0
+EOF
+
+CONFIG_FILE=config.yml
+
+sleep 2
+REMOVAL_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $REMOVAL_REQUEST_RECORD_FILE | jq -r '.id')
+echo "ApplicationDeploymentRemovalRequest published"
+echo $REMOVAL_REQUEST_ID
+
+# Deployment checks
+RETRY_INTERVAL=30
+MAX_RETRIES=20
+
+# Check that an ApplicationDeploymentRemovalRecord is published
+retry_count=0
+while true; do
+  removal_records_response=$(yarn --silent laconic -c $CONFIG_FILE registry record list --type ApplicationDeploymentRemovalRecord --all request $REMOVAL_REQUEST_ID)
+  len_removal_records=$(echo $removal_records_response | jq 'length')
+
+  # Check if number of records returned is 0
+  if [ $len_removal_records -eq 0 ]; then
+    # Check if retries are exhausted
+    if [ $retry_count -eq $MAX_RETRIES ]; then
+      echo "Retries exhausted"
+      echo "ApplicationDeploymentRemovalRecord for deployment removal request $REMOVAL_REQUEST_ID not found"
+      exit 1
+    else
+      echo "ApplicationDeploymentRemovalRecord not found, retrying in $RETRY_INTERVAL sec..."
+      sleep $RETRY_INTERVAL
+      retry_count=$((retry_count+1))
+    fi
+  else
+    echo "ApplicationDeploymentRemovalRecord found"
+    REMOVAL_RECORD_ID=$(echo $removal_records_response | jq -r '.[0].id')
+    echo $REMOVAL_RECORD_ID
+    break
+  fi
+done
+
+echo "Deployment removal successful"

packages/deployer/staging-records/application-deployment-request.yml

@@ -11,6 +11,7 @@ record:
       LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools/test-progressive-web-app
       LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools/test-progressive-web-app
       LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: snowball-tools/starter.nextjs-react-tailwind
       LACONIC_HOSTED_CONFIG_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
       LACONIC_HOSTED_CONFIG_lit_relay_api_key: 15DDD969-E75F-404D-AAD9-58A37C4FD354_snowball
       LACONIC_HOSTED_CONFIG_aplchemy_api_key: THvPart_gqI5x02RNYSBntlmwA66I_qc

packages/frontend/.env.example

@@ -3,6 +3,7 @@ VITE_SERVER_URL='http://localhost:8000'
 VITE_GITHUB_CLIENT_ID=
 VITE_GITHUB_PWA_TEMPLATE_REPO="snowball-tools/test-progressive-web-app"
 VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO="snowball-tools/image-upload-pwa-example"
+VITE_GITHUB_NEXT_APP_TEMPLATE_REPO="snowball-tools/starter.nextjs-react-tailwind"
 
 VITE_WALLET_CONNECT_ID=
 

packages/frontend/src/assets/templates.ts

@@ -1,13 +1,14 @@
 import {
   VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO,
   VITE_GITHUB_PWA_TEMPLATE_REPO,
+  VITE_GITHUB_NEXT_APP_TEMPLATE_REPO,
 } from 'utils/constants';
 
 export default [
   {
     id: '1',
     name: 'Progressive Web App (PWA)',
-    icon: 'pwa',
+    icon: 'web',
     repoFullName: `${VITE_GITHUB_PWA_TEMPLATE_REPO}`,
     isComingSoon: false,
   },
@@ -20,23 +21,9 @@ export default [
   },
   {
     id: '3',
-    name: 'Kotlin',
-    icon: 'kotlin',
-    repoFullName: '',
-    isComingSoon: true,
-  },
-  {
-    id: '4',
-    name: 'React Native',
-    icon: 'react-native',
-    repoFullName: '',
-    isComingSoon: true,
-  },
-  {
-    id: '5',
-    name: 'Swift',
-    icon: 'swift',
-    repoFullName: '',
-    isComingSoon: true,
+    name: 'Next.js + React + TailwindCSS',
+    icon: 'web',
+    repoFullName: `${VITE_GITHUB_NEXT_APP_TEMPLATE_REPO}`,
+    isComingSoon: false,
   },
 ];

packages/frontend/src/components/projects/create/MockConnectGitCard.tsx

@@ -56,16 +56,8 @@ export const MockConnectGitCard = () => {
       icon: 'pwa',
     },
     {
-      name: 'React Native',
-      icon: 'react-native',
-    },
-    {
-      name: 'Kotlin',
-      icon: 'kotlin',
-    },
-    {
-      name: 'Swift',
-      icon: 'swift',
+      name: 'Next.js + React + TailwindCSS',
+      icon: 'next-app',
     },
   ];
 

packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx

@@ -1,18 +1,12 @@
 import { useMemo } from 'react';
 import { CustomIconProps } from '../CustomIcon';
-import { ReactNativeIcon } from './ReactNativeIcon';
 import { cloneIcon } from 'utils/cloneIcon';
 import { PWAIcon } from './PWAIcon';
 import { WebAppIcon } from './WebAppIcon';
-import { KotlinIcon } from './KotlinIcon';
-import { SwitfIcon } from './SwiftIcon';
 
 const TEMPLATE_ICONS = [
-  'react-native',
   'pwa',
-  'web',
-  'kotlin',
-  'swift',
+  'web'
 ] as const;
 export type TemplateIconType = (typeof TEMPLATE_ICONS)[number];
 
@@ -23,16 +17,10 @@ export interface TemplateIconProps extends CustomIconProps {
 export const TemplateIcon = ({ type, ...props }: TemplateIconProps) => {
   const renderIcon = useMemo(() => {
     switch (type) {
-      case 'react-native':
-        return <ReactNativeIcon />;
       case 'pwa':
         return <PWAIcon />;
       case 'web':
         return <WebAppIcon />;
-      case 'kotlin':
-        return <KotlinIcon />;
-      case 'swift':
-        return <SwitfIcon />;
       default:
         throw new Error(`Invalid template icon type: ${type}`);
     }

packages/frontend/src/context/Web3Provider.tsx

@@ -17,7 +17,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { VITE_WALLET_CONNECT_ID, BASE_URL } from 'utils/constants';
 
 if (!VITE_WALLET_CONNECT_ID) {
-  throw new Error('Error: REACT_APP_WALLET_CONNECT_ID env config is not set');
+  throw new Error('Error: VITE_WALLET_CONNECT_ID env config is not set');
 }
 assert(BASE_URL, 'VITE_SERVER_URL is not set in env');
 

packages/frontend/src/utils/constants.ts

@@ -5,6 +5,8 @@ export const VITE_GITHUB_PWA_TEMPLATE_REPO = import.meta.env
   .VITE_GITHUB_PWA_TEMPLATE_REPO;
 export const VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = import.meta.env
   .VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO;
+export const VITE_GITHUB_NEXT_APP_TEMPLATE_REPO = import.meta.env
+  .VITE_GITHUB_NEXT_APP_TEMPLATE_REPO;
 export const VITE_GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID;
 export const VITE_WALLET_CONNECT_ID = import.meta.env.VITE_WALLET_CONNECT_ID;
 export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;