From d10ed5ed11e91ce8598b077ec81239c85886bb8b Mon Sep 17 00:00:00 2001 From: Nabarun Date: Tue, 1 Jul 2025 16:10:40 +0530 Subject: [PATCH 1/7] Update deployer script for new frontend app --- apps/deployer/.env.example | 3 +++ apps/deployer/README.md | 35 +++++++++++++++++++++++--------- apps/deployer/config.yml | 6 +++--- apps/deployer/deploy-frontend.sh | 14 ++++++------- 4 files changed, 38 insertions(+), 20 deletions(-) create mode 100644 apps/deployer/.env.example diff --git a/apps/deployer/.env.example b/apps/deployer/.env.example new file mode 100644 index 0000000..732dcfd --- /dev/null +++ b/apps/deployer/.env.example @@ -0,0 +1,3 @@ +REGISTRY_BOND_ID= +DEPLOYER_LRN= +AUTHORITY= diff --git a/apps/deployer/README.md b/apps/deployer/README.md index 51095c3..8f64a98 100644 --- a/apps/deployer/README.md +++ b/apps/deployer/README.md @@ -7,22 +7,37 @@ ``` ```bash - brew install jq # if you do not have jq installed already + # if you do not have jq installed already + brew install jq + # OR + sudo apt-get install jq ``` -- Run script to deploy app +- Copy and update `.env` - - To deploy frontend app to `dashboard.staging.apps.snowballtools.com` + ``` + cp .env.example .env + ``` - ```bash - ./deploy-frontend.staging.sh - ``` + Set the required variables: - - To deploy frontend app to `dashboard.apps.snowballtools.com` + ``` + REGISTRY_BOND_ID= + DEPLOYER_LRN=lrn://vaasl-provider/deployers/webapp-deployer-api.apps.vaasl.io + AUTHORITY=vaasl + ``` - ```bash - ./deploy-frontend.sh - ``` + Note: The bond id should be set to the `vaasl` authority + +- Set the `userKey` and `bondId` in [config.yml](./config.yml) + + Note: The `bondId` should be created by the `userKey` account + +- Run script to deploy app to `deploy.laconic.com` + + ```bash + ./deploy-frontend.sh + ``` - Commit the updated [ApplicationRecord](records/application-record.yml) and [ApplicationDeploymentRequest](records/application-deployment-request.yml) files to the repository diff --git a/apps/deployer/config.yml b/apps/deployer/config.yml index 730022e..38a570b 100644 --- a/apps/deployer/config.yml +++ b/apps/deployer/config.yml @@ -1,8 +1,8 @@ services: registry: - rpcEndpoint: https://laconicd-sapo.laconic.com - gqlEndpoint: https://laconicd-sapo.laconic.com/api + rpcEndpoint: https://laconicd-mainnet-1.laconic.com/ + gqlEndpoint: https://laconicd-mainnet-1.laconic.com/api userKey: bondId: - chainId: laconic-testnet-2 + chainId: laconic-mainnet gasPrice: 0.001alnt diff --git a/apps/deployer/deploy-frontend.sh b/apps/deployer/deploy-frontend.sh index 46ab416..50350b7 100755 --- a/apps/deployer/deploy-frontend.sh +++ b/apps/deployer/deploy-frontend.sh @@ -6,7 +6,7 @@ echo "Using DEPLOYER_LRN: $DEPLOYER_LRN" echo "Using AUTHORITY: $AUTHORITY" # Repository URL -REPO_URL="https://git.vdb.to/cerc-io/snowballtools-base" +REPO_URL="https://git.vdb.to/NasSharaf/laconic-deployer-frontend" # Get the latest commit hash for a branch BRANCH_NAME="main" @@ -25,7 +25,7 @@ CONFIG_FILE=config.yml # Reference: https://git.vdb.to/cerc-io/test-progressive-web-app/src/branch/main/scripts # Get latest version from registry and increment application-record version -NEW_APPLICATION_VERSION=$(pnpm --silent laconic -c $CONFIG_FILE registry record list --type ApplicationRecord --all --name "deploy-frontend" 2>/dev/null | jq -r -s ".[] | sort_by(.createTime) | reverse | [ .[] | select(.bondId == \"$REGISTRY_BOND_ID\") ] | .[0].attributes.version" | awk -F. -v OFS=. '{$NF += 1 ; print}') +NEW_APPLICATION_VERSION=$(pnpm --silent laconic -c $CONFIG_FILE registry record list --type ApplicationRecord --all --name "laconic-deployer-frontend" 2>/dev/null | jq -r -s ".[] | sort_by(.createTime) | reverse | [ .[] | select(.bondId == \"$REGISTRY_BOND_ID\") ] | .[0].attributes.version" | awk -F. -v OFS=. '{$NF += 1 ; print}') if [ -z "$NEW_APPLICATION_VERSION" ] || [ "1" == "$NEW_APPLICATION_VERSION" ]; then # Set application-record version if no previous records were found @@ -40,7 +40,7 @@ record: repository_ref: $LATEST_HASH repository: ["$REPO_URL"] app_type: webapp - name: deploy-frontend + name: laconic-deployer-frontend app_version: $PACKAGE_VERSION EOF @@ -60,7 +60,7 @@ echo "ApplicationRecord published" echo $RECORD_ID # Set name to record -REGISTRY_APP_LRN="lrn://$AUTHORITY/applications/deploy-frontend" +REGISTRY_APP_LRN="lrn://$AUTHORITY/applications/laconic-deployer-frontend" sleep 2 pnpm --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${PACKAGE_VERSION}" "$RECORD_ID" @@ -122,10 +122,10 @@ cat >./records/application-deployment-request.yml < Date: Thu, 3 Jul 2025 16:47:13 +0530 Subject: [PATCH 2/7] Add build and run scripts to be used by webapp-deployer --- apps/deployer/README.md | 7 +++++++ apps/deployer/deploy-frontend.sh | 21 +++++++++++++-------- build-webapp.sh | 19 +++++++++++++++++++ readme.md | 28 +++++++++++++++++++++++++++- run-webapp.sh | 22 ++++++++++++++++++++++ 5 files changed, 88 insertions(+), 9 deletions(-) create mode 100755 build-webapp.sh create mode 100755 run-webapp.sh diff --git a/apps/deployer/README.md b/apps/deployer/README.md index 8f64a98..5f3d8ed 100644 --- a/apps/deployer/README.md +++ b/apps/deployer/README.md @@ -33,6 +33,13 @@ Note: The `bondId` should be created by the `userKey` account +- Set the actual values for env in [deploy-frontend.sh](./deploy-frontend.sh) for the following: + ```sh + NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key + CLERK_SECRET_KEY=your_clerk_secret + NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN=your_github_token + ``` + - Run script to deploy app to `deploy.laconic.com` ```bash diff --git a/apps/deployer/deploy-frontend.sh b/apps/deployer/deploy-frontend.sh index 50350b7..87d85cb 100755 --- a/apps/deployer/deploy-frontend.sh +++ b/apps/deployer/deploy-frontend.sh @@ -39,7 +39,7 @@ record: version: $NEW_APPLICATION_VERSION repository_ref: $LATEST_HASH repository: ["$REPO_URL"] - app_type: webapp + app_type: webapp/next name: laconic-deployer-frontend app_version: $PACKAGE_VERSION EOF @@ -128,13 +128,12 @@ record: dns: deploy-staging.laconic.com config: env: - LACONIC_HOSTED_CONFIG_server_url: https://deploy-backend.laconic.com - LACONIC_HOSTED_CONFIG_github_clientid: Ov23li4NtYybQlF6u5Dk - 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_laconicd_chain_id: laconic-testnet-2 - LACONIC_HOSTED_CONFIG_wallet_iframe_url: https://wallet.laconic.com + NEXT_PUBLIC_WALLET_IFRAME_URL=https://wallet.laconic.com + NEXT_PUBLIC_LACONICD_CHAIN_ID=laconic-mainnet + NEXT_PUBLIC_API_URL=https://deploy-backend.laconic.com + NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key + CLERK_SECRET_KEY=your_clerk_secret + NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN=your_github_token meta: note: Added @ $CURRENT_DATE_TIME repository: "$REPO_URL" @@ -142,6 +141,12 @@ record: payment: $txHash EOF +# Old env values for frontend app +# LACONIC_HOSTED_CONFIG_github_clientid: Ov23li4NtYybQlF6u5Dk +# 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 + RECORD_FILE=records/application-deployment-request.yml sleep 2 diff --git a/build-webapp.sh b/build-webapp.sh new file mode 100755 index 0000000..d550c3f --- /dev/null +++ b/build-webapp.sh @@ -0,0 +1,19 @@ +#!/bin/bash + +PKG_DIR="./apps/deploy-fe" + +cat > $PKG_DIR/.env < + + +- Change branch + ```bash + git checkout ng-support-custom-nextjs + ``` + +- Build the container for app + ```bash + laconic-so build-webapp --source-repo /laconic-deployer-frontend --base-container cerc/nextjs-base + ``` + +- Create an env file as described in [previous steps](#3-configure-environment-variables) + +- Run the webapp container locally + ```bash + docker run -p 3000:3000 --env-file cerc/laconic-deployer-frontend:local + ``` + +- Scripts used for deployment + - App container build : [build-webapp.sh](./build-webapp.sh) + - Run app container : [run-webapp.sh](./run-webapp.sh) diff --git a/run-webapp.sh b/run-webapp.sh new file mode 100755 index 0000000..83e4516 --- /dev/null +++ b/run-webapp.sh @@ -0,0 +1,22 @@ +#!/bin/bash + +PKG_DIR="./apps/deploy-fe" + +cd $PKG_DIR + +cat > .env.local < Date: Wed, 20 Aug 2025 22:43:00 +0530 Subject: [PATCH 3/7] Update deployment readme with bond id --- apps/deployer/README.md | 33 ++++++++++++--------------------- apps/deployer/config.yml | 2 +- readme.md | 2 +- 3 files changed, 14 insertions(+), 23 deletions(-) diff --git a/apps/deployer/README.md b/apps/deployer/README.md index 5f3d8ed..b1a7bec 100644 --- a/apps/deployer/README.md +++ b/apps/deployer/README.md @@ -22,24 +22,30 @@ Set the required variables: ``` - REGISTRY_BOND_ID= + REGISTRY_BOND_ID=230cfedda15e78edc8986dfcb870e1b618f65c56e38d2735476d2a8cb3f25e38 DEPLOYER_LRN=lrn://vaasl-provider/deployers/webapp-deployer-api.apps.vaasl.io - AUTHORITY=vaasl + AUTHORITY=laconic ``` Note: The bond id should be set to the `vaasl` authority -- Set the `userKey` and `bondId` in [config.yml](./config.yml) +- Set the `userKey` in [config.yml](./config.yml) - Note: The `bondId` should be created by the `userKey` account + Note: The `userKey` account should be the owner of the bond set in `config.yml` (account address: `laconic13maulvmjxnyx3g855vk0lsv5aptf3rpxskynef`) - Set the actual values for env in [deploy-frontend.sh](./deploy-frontend.sh) for the following: + ```sh NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key CLERK_SECRET_KEY=your_clerk_secret + NEXT_PUBLIC_WALLET_IFRAME_URL=https://wallet.laconic.com + NEXT_PUBLIC_LACONICD_CHAIN_ID=laconic-mainnet + NEXT_PUBLIC_API_URL=https://deploy-backend.laconic.com NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN=your_github_token ``` + NOTE: Replace `your_clerk_key`, `your_clerk_secret` and `your_github_token` with actual values + - Run script to deploy app to `deploy.laconic.com` ```bash @@ -48,21 +54,6 @@ - Commit the updated [ApplicationRecord](records/application-record.yml) and [ApplicationDeploymentRequest](records/application-deployment-request.yml) files to the repository -## Notes - -- Any config env can be updated in [records/application-deployment-request.yml](records/application-deployment-request.yml) - - ```yml - record: - ... - config: - env: - LACONIC_HOSTED_CONFIG_app_server_url: https://snowballtools-base-api-001.apps.snowballtools.com - ... - ``` - - - On changing `LACONIC_HOSTED_CONFIG_app_github_clientid`, the GitHub client ID and secret need to be changed in backend config too - ## Troubleshoot - Check deployment status in [web-app deployer](https://console.laconic.com/deployer). @@ -76,11 +67,11 @@ pnpm laconic registry account get # Bond balance - pnpm laconic registry bond get --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32 + pnpm laconic registry bond get --id 230cfedda15e78edc8986dfcb870e1b618f65c56e38d2735476d2a8cb3f25e38 ``` - Command to refill bond ```bash - pnpm laconic registry bond refill --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32 --type alnt --quantity 10000000 + pnpm laconic registry bond refill --id 230cfedda15e78edc8986dfcb870e1b618f65c56e38d2735476d2a8cb3f25e38 --type alnt --quantity 10000000 ``` diff --git a/apps/deployer/config.yml b/apps/deployer/config.yml index 38a570b..7f595ef 100644 --- a/apps/deployer/config.yml +++ b/apps/deployer/config.yml @@ -3,6 +3,6 @@ services: rpcEndpoint: https://laconicd-mainnet-1.laconic.com/ gqlEndpoint: https://laconicd-mainnet-1.laconic.com/api userKey: - bondId: + bondId: 230cfedda15e78edc8986dfcb870e1b618f65c56e38d2735476d2a8cb3f25e38 chainId: laconic-mainnet gasPrice: 0.001alnt diff --git a/readme.md b/readme.md index 1c0855f..75d396b 100644 --- a/readme.md +++ b/readme.md @@ -41,7 +41,7 @@ Create a `.env.local` file in the `apps/deploy-fe` directory: NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key CLERK_SECRET_KEY=your_clerk_secret NEXT_PUBLIC_WALLET_IFRAME_URL=http://localhost:4000 -NEXT_PUBLIC_LACONICD_CHAIN_ID=laconic-testnet-2 +NEXT_PUBLIC_LACONICD_CHAIN_ID=laconic-mainnet NEXT_PUBLIC_API_URL=http://localhost:8000 NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN=your_github_token ``` -- 2.45.2 From b77bf4dac46130dc241cff28ad4cb42894f7e92e Mon Sep 17 00:00:00 2001 From: Nabarun Date: Thu, 21 Aug 2025 14:24:47 +0530 Subject: [PATCH 4/7] Set port 80 for server start in deployer --- apps/deployer/README.md | 15 ++++++++------- apps/deployer/deploy-frontend.sh | 12 ++++++------ run-webapp.sh | 4 ++-- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/apps/deployer/README.md b/apps/deployer/README.md index b1a7bec..123776f 100644 --- a/apps/deployer/README.md +++ b/apps/deployer/README.md @@ -33,15 +33,16 @@ Note: The `userKey` account should be the owner of the bond set in `config.yml` (account address: `laconic13maulvmjxnyx3g855vk0lsv5aptf3rpxskynef`) -- Set the actual values for env in [deploy-frontend.sh](./deploy-frontend.sh) for the following: +- Set the app env values in [deploy-frontend.sh](./deploy-frontend.sh): + ```sh - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key - CLERK_SECRET_KEY=your_clerk_secret - NEXT_PUBLIC_WALLET_IFRAME_URL=https://wallet.laconic.com - NEXT_PUBLIC_LACONICD_CHAIN_ID=laconic-mainnet - NEXT_PUBLIC_API_URL=https://deploy-backend.laconic.com - NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN=your_github_token + NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: your_clerk_key + CLERK_SECRET_KEY: your_clerk_secret + NEXT_PUBLIC_WALLET_IFRAME_URL: https://wallet.laconic.com + NEXT_PUBLIC_LACONICD_CHAIN_ID: laconic-mainnet + NEXT_PUBLIC_API_URL: https://deploy-backend.laconic.com + NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN: your_github_token ``` NOTE: Replace `your_clerk_key`, `your_clerk_secret` and `your_github_token` with actual values diff --git a/apps/deployer/deploy-frontend.sh b/apps/deployer/deploy-frontend.sh index 87d85cb..d0b82ee 100755 --- a/apps/deployer/deploy-frontend.sh +++ b/apps/deployer/deploy-frontend.sh @@ -128,12 +128,12 @@ record: dns: deploy-staging.laconic.com config: env: - NEXT_PUBLIC_WALLET_IFRAME_URL=https://wallet.laconic.com - NEXT_PUBLIC_LACONICD_CHAIN_ID=laconic-mainnet - NEXT_PUBLIC_API_URL=https://deploy-backend.laconic.com - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key - CLERK_SECRET_KEY=your_clerk_secret - NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN=your_github_token + NEXT_PUBLIC_WALLET_IFRAME_URL: https://wallet.laconic.com + NEXT_PUBLIC_LACONICD_CHAIN_ID: laconic-mainnet + NEXT_PUBLIC_API_URL: https://deploy-backend.laconic.com + NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: + CLERK_SECRET_KEY: + NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN: your_github_token meta: note: Added @ $CURRENT_DATE_TIME repository: "$REPO_URL" diff --git a/run-webapp.sh b/run-webapp.sh index 83e4516..efb6001 100755 --- a/run-webapp.sh +++ b/run-webapp.sh @@ -17,6 +17,6 @@ EOF # cat .env.local # TODO: Need production build in .next. Check build-webapp.sh -# pnpm start +# pnpm start -p ${CERC_LISTEN_PORT:-80} -pnpm dev +pnpm dev -p ${CERC_LISTEN_PORT:-80} -- 2.45.2 From c34b443b69b2f81e974eb17c4ca9222470b64977 Mon Sep 17 00:00:00 2001 From: Nabarun Date: Thu, 21 Aug 2025 15:13:56 +0530 Subject: [PATCH 5/7] Update readme steps to deploy app --- apps/deployer/README.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/deployer/README.md b/apps/deployer/README.md index 123776f..831e2a6 100644 --- a/apps/deployer/README.md +++ b/apps/deployer/README.md @@ -1,5 +1,9 @@ # deployer +The following steps are for deploying the frontend app to vaasl webapp deployer. + +Run these steps in the `apps/deployer/` directory: + - Install dependencies ```bash @@ -27,13 +31,11 @@ AUTHORITY=laconic ``` - Note: The bond id should be set to the `vaasl` authority - - Set the `userKey` in [config.yml](./config.yml) - Note: The `userKey` account should be the owner of the bond set in `config.yml` (account address: `laconic13maulvmjxnyx3g855vk0lsv5aptf3rpxskynef`) + Note: The `userKey` should be the private key of the account owning the bond set in `config.yml` (account address: `laconic13maulvmjxnyx3g855vk0lsv5aptf3rpxskynef`) -- Set the app env values in [deploy-frontend.sh](./deploy-frontend.sh): +- Set the app env values in [deploy-frontend.sh](./deploy-frontend.sh) (Refer to main [readme](/readme.md#3-configure-environment-variables)): ```sh @@ -58,9 +60,11 @@ ## Troubleshoot - Check deployment status in [web-app deployer](https://console.laconic.com/deployer). + - Check records in [registry console app](https://console.laconic.com/#/registry). - If deployment fails due to low bond balance + - Check balances ```bash -- 2.45.2 From c5fbf0cd8eb87775f188a072b8d0bcf1557c0372 Mon Sep 17 00:00:00 2001 From: Nabarun Date: Thu, 21 Aug 2025 15:23:15 +0530 Subject: [PATCH 6/7] Update readme steps to test deployment locally --- build-webapp.sh | 2 +- readme.md | 10 +++------- run-webapp.sh | 2 +- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/build-webapp.sh b/build-webapp.sh index d550c3f..5758564 100755 --- a/build-webapp.sh +++ b/build-webapp.sh @@ -13,7 +13,7 @@ EOF pnpm install || exit 1 -# TODO: Fix build script to run +# TODO: Fix build script to run # pnpm build --filter deploy-fe || exit 1 pnpm build --filter @workspace/gql-client || exit 1 diff --git a/readme.md b/readme.md index 75d396b..df6e0b0 100644 --- a/readme.md +++ b/readme.md @@ -98,13 +98,8 @@ Make sure you have: - Follow the dev install steps for stack-orchestrator from - -- Change branch - ```bash - git checkout ng-support-custom-nextjs - ``` - - Build the container for app + ```bash laconic-so build-webapp --source-repo /laconic-deployer-frontend --base-container cerc/nextjs-base ``` @@ -112,8 +107,9 @@ Make sure you have: - Create an env file as described in [previous steps](#3-configure-environment-variables) - Run the webapp container locally + ```bash - docker run -p 3000:3000 --env-file cerc/laconic-deployer-frontend:local + docker run -p 3000:80 --env-file cerc/laconic-deployer-frontend:local ``` - Scripts used for deployment diff --git a/run-webapp.sh b/run-webapp.sh index efb6001..1855680 100755 --- a/run-webapp.sh +++ b/run-webapp.sh @@ -16,7 +16,7 @@ EOF # For debugging # cat .env.local -# TODO: Need production build in .next. Check build-webapp.sh +# TODO: Need production build in .next. Check build-webapp.sh # pnpm start -p ${CERC_LISTEN_PORT:-80} pnpm dev -p ${CERC_LISTEN_PORT:-80} -- 2.45.2 From f54737a43f6f2c2314c973879355576f456101b2 Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 21 Aug 2025 16:20:52 +0000 Subject: [PATCH 7/7] working --- apps/backend/package.json | 4 +- .../[provider]/ps/(create)/cr/page.tsx | 310 +++++++++++---- apps/deploy-fe/src/app/layout.tsx | 11 +- .../src/components/onboarding/Onboarding.tsx | 2 +- .../configure-step/configure-step.tsx | 358 ++++++++++++------ .../onboarding/connect-step/connect-step.tsx | 310 +++++++++------ .../onboarding/deploy-step/deploy-step.tsx | 306 ++++++++++----- .../src/components/onboarding/index.ts | 6 +- .../src/components/onboarding/types.ts | 2 +- pnpm-lock.yaml | 50 ++- 10 files changed, 905 insertions(+), 454 deletions(-) diff --git a/apps/backend/package.json b/apps/backend/package.json index fbf128c..72c6aa6 100644 --- a/apps/backend/package.json +++ b/apps/backend/package.json @@ -35,7 +35,7 @@ "siwe": "^3.0.0", "toml": "^3.0.0", "ts-node": "^10.9.2", - "typeorm": "^0.3.19", + "typeorm": "^0.3.26", "typescript": "^5.3.3" }, "scripts": { @@ -60,7 +60,7 @@ "@types/express": "^4.17.21", "@types/express-session": "^1.17.10", "@types/fs-extra": "^11.0.4", - "better-sqlite3": "^9.2.2", + "better-sqlite3": "^12.2.0", "copyfiles": "^2.4.1", "prettier": "^3.1.1", "workspace": "^0.0.1-preview.1" diff --git a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/projects/[provider]/ps/(create)/cr/page.tsx b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/projects/[provider]/ps/(create)/cr/page.tsx index 8fb1258..89b36c1 100644 --- a/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/projects/[provider]/ps/(create)/cr/page.tsx +++ b/apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/projects/[provider]/ps/(create)/cr/page.tsx @@ -1,15 +1,15 @@ 'use client' -import { useEffect, useState } from 'react' -import { useRouter } from 'next/navigation' -import { X } from 'lucide-react' -import { useTheme } from 'next-themes' -import { useOnboarding } from '@/components/onboarding/store' -import { ConnectStep } from '@/components/onboarding/connect-step/connect-step' +import { LaconicMark } from '@/components/assets/laconic-mark' import { ConfigureStep } from '@/components/onboarding/configure-step/configure-step' +import { ConnectStep } from '@/components/onboarding/connect-step/connect-step' import { DeployStep } from '@/components/onboarding/deploy-step/deploy-step' import { SuccessStep } from '@/components/onboarding/success-step/success-step' -import { LaconicMark } from '@/components/assets/laconic-mark' +import { useOnboarding } from '@/components/onboarding/useOnboarding' +import { X } from 'lucide-react' +import { useTheme } from 'next-themes' +import { useRouter } from 'next/navigation' +import { useEffect, useState } from 'react' /** * Parent component for the onboarding flow @@ -19,26 +19,26 @@ export default function CreateProjectFlow() { const router = useRouter() const { resolvedTheme } = useTheme() const [mounted, setMounted] = useState(false) - + const { currentStep, setCurrentStep, resetOnboarding } = useOnboarding() - + // Handle hydration mismatch by waiting for mount useEffect(() => { setMounted(true) }, []) - + // Reset onboarding state when the component unmounts (optional) useEffect(() => { return () => { // Optional cleanup actions } }, [resetOnboarding]) - + // Handle closing the modal const handleClose = () => { router.push('/projects') } - + // Navigate directly to a specific step const navigateToStep = (step: 'connect' | 'configure' | 'deploy') => { setCurrentStep(step) @@ -48,102 +48,216 @@ export default function CreateProjectFlow() { if (!mounted) { return null } - + // Determine if dark mode is active const isDarkMode = resolvedTheme === 'dark' - + return (
{/* Fixed dimensions modal container */} -
+
{/* Left sidebar with fixed width */} -
+
{/* Laconic logo */}
- LACONIC + + LACONIC +
- + {/* Steps - clickable */}
{/* Connect step */} - - + {/* Configure step */} - - + {/* Deploy step */} -
- + {/* Laconic mark (larger, bottom left) */}
- +
- + {/* Main content with fixed dimensions and scrolling */} -
+
{/* Close button */} - - + {/* Scrollable content container */}
{currentStep === 'connect' && } @@ -189,15 +325,21 @@ export default function CreateProjectFlow() { {currentStep === 'deploy' && } {currentStep === 'success' && }
- + {/* Progress indicator */}
-
-
-
+
+
+
) -} \ No newline at end of file +} diff --git a/apps/deploy-fe/src/app/layout.tsx b/apps/deploy-fe/src/app/layout.tsx index 5838072..92c46d9 100644 --- a/apps/deploy-fe/src/app/layout.tsx +++ b/apps/deploy-fe/src/app/layout.tsx @@ -1,10 +1,10 @@ import { Providers } from '@/components/providers' import { ClerkProvider } from '@clerk/nextjs' import '@workspace/ui/globals.css' +import { AutoSignInIFrameModal } from '@/components/iframe/auto-sign-in' +import { CheckBalanceWrapper } from '@/components/iframe/check-balance-iframe/CheckBalanceWrapper' import type { Metadata } from 'next' import { Inter } from 'next/font/google' -import { CheckBalanceWrapper } from '@/components/iframe/check-balance-iframe/CheckBalanceWrapper' -import { AutoSignInIFrameModal } from '@/components/iframe/auto-sign-in' // Add root metadata with template pattern export const metadata: Metadata = { @@ -25,14 +25,17 @@ export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return ( - +
{children}
-
+
diff --git a/apps/deploy-fe/src/components/onboarding/Onboarding.tsx b/apps/deploy-fe/src/components/onboarding/Onboarding.tsx index 089face..c7af0e5 100644 --- a/apps/deploy-fe/src/components/onboarding/Onboarding.tsx +++ b/apps/deploy-fe/src/components/onboarding/Onboarding.tsx @@ -10,7 +10,7 @@ import { ConfigureStep } from '@/components/onboarding/configure-step' import { ConnectStep } from '@/components/onboarding/connect-step' import { DeployStep } from '@/components/onboarding/deploy-step' -import { useOnboarding } from '@/components/onboarding/store' +import { useOnboarding } from '@/components/onboarding/useOnboarding' import { ScrollArea } from '@workspace/ui/components/scroll-area' import { SidebarNav } from './sidebar' diff --git a/apps/deploy-fe/src/components/onboarding/configure-step/configure-step.tsx b/apps/deploy-fe/src/components/onboarding/configure-step/configure-step.tsx index 998176e..bbf2f62 100644 --- a/apps/deploy-fe/src/components/onboarding/configure-step/configure-step.tsx +++ b/apps/deploy-fe/src/components/onboarding/configure-step/configure-step.tsx @@ -1,22 +1,33 @@ // src/components/onboarding/configure-step/configure-step.tsx 'use client' -import { useState, useEffect } from 'react' -import { PlusCircle, Loader2, AlertTriangle, Info } from 'lucide-react' -import { useTheme } from 'next-themes' -import { useOnboarding } from '@/components/onboarding/store' +import { useOnboarding } from '@/components/onboarding/useOnboarding' import { useGQLClient } from '@/context' import { useWallet } from '@/context/WalletContext' -import { Button } from '@workspace/ui/components/button' -import { Input } from '@workspace/ui/components/input' -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@workspace/ui/components/select' -import { Checkbox } from '@workspace/ui/components/checkbox' -import { Label } from '@workspace/ui/components/label' import { Alert, AlertDescription } from '@workspace/ui/components/alert' -import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card' import { Badge } from '@workspace/ui/components/badge' +import { Button } from '@workspace/ui/components/button' +import { + Card, + CardContent, + CardHeader, + CardTitle +} from '@workspace/ui/components/card' +import { Checkbox } from '@workspace/ui/components/checkbox' +import { Input } from '@workspace/ui/components/input' +import { Label } from '@workspace/ui/components/label' +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@workspace/ui/components/select' +import { AlertTriangle, Info, Loader2, PlusCircle } from 'lucide-react' +import { useTheme } from 'next-themes' +import { useEffect, useState } from 'react' import { toast } from 'sonner' -import { adaptDeployers } from '../../../utils/typeAdapters'; +import { adaptDeployers } from '../../../utils/typeAdapters' interface Deployer { deployerLrn: string @@ -35,42 +46,40 @@ export function ConfigureStep() { const { nextStep, previousStep, setFormData, formData } = useOnboarding() const { resolvedTheme } = useTheme() const [mounted, setMounted] = useState(false) - + // Backend data const [deployers, setDeployers] = useState([]) const [organizations, setOrganizations] = useState([]) const [isLoadingDeployers, setIsLoadingDeployers] = useState(true) const [isLoadingOrgs, setIsLoadingOrgs] = useState(true) - + // Form state const [deployOption, setDeployOption] = useState<'auction' | 'lrn'>( - formData.deploymentType as ('auction' | 'lrn') || 'lrn' // Default to LRN for simplicity + (formData.deploymentType as 'auction' | 'lrn') || 'lrn' // Default to LRN for simplicity ) const [numberOfDeployers, setNumberOfDeployers] = useState( - formData.deployerCount || "1" - ) - const [maxPrice, setMaxPrice] = useState( - formData.maxPrice || "1000" + formData.deployerCount || '1' ) + const [maxPrice, setMaxPrice] = useState(formData.maxPrice || '1000') const [selectedLrn, setSelectedLrn] = useState( - formData.selectedLrn || "" + formData.selectedLrn || '' ) const [selectedOrg, setSelectedOrg] = useState( - formData.selectedOrg || "" + formData.selectedOrg || '' ) - const [envVars, setEnvVars] = useState<{ key: string; value: string; environments: string[] }[]>([ - { key: '', value: '', environments: ['Production'] } - ]) - + const [envVars, setEnvVars] = useState< + { key: string; value: string; environments: string[] }[] + >([{ key: '', value: '', environments: ['Production'] }]) + // Contexts const gqlClient = useGQLClient() const { wallet } = useWallet() - + // Handle hydration mismatch by waiting for mount useEffect(() => { setMounted(true) }, []) - + // Fetch deployers and organizations on mount useEffect(() => { if (mounted) { @@ -78,26 +87,35 @@ export function ConfigureStep() { fetchOrganizations() } }, [mounted]) - + // Initialize environment variables from formData if available useEffect(() => { - if (formData.environmentVariables && Array.isArray(formData.environmentVariables)) { - setEnvVars(formData.environmentVariables.length > 0 ? formData.environmentVariables : [ - { key: '', value: '', environments: ['Production'] } - ]) + if ( + formData.environmentVariables && + Array.isArray(formData.environmentVariables) + ) { + setEnvVars( + formData.environmentVariables.length > 0 + ? formData.environmentVariables + : [{ key: '', value: '', environments: ['Production'] }] + ) } }, [formData.environmentVariables]) - + // Fetch deployers from backend const fetchDeployers = async () => { try { setIsLoadingDeployers(true) const deployersData = await gqlClient.getDeployers() console.log('Available deployers:', deployersData) - setDeployers(adaptDeployers(deployersData.deployers || [])); - + setDeployers(adaptDeployers(deployersData.deployers || [])) + // Auto-select first deployer if available and none selected - if (deployersData.deployers && deployersData.deployers.length > 0 && !selectedLrn) { + if ( + deployersData.deployers && + deployersData.deployers.length > 0 && + !selectedLrn + ) { setSelectedLrn(deployersData.deployers[0]!.deployerLrn) } } catch (error) { @@ -107,7 +125,7 @@ export function ConfigureStep() { setIsLoadingDeployers(false) } } - + // Fetch organizations from backend const fetchOrganizations = async () => { try { @@ -115,9 +133,13 @@ export function ConfigureStep() { const orgsData = await gqlClient.getOrganizations() console.log('Available organizations:', orgsData) setOrganizations(orgsData.organizations || []) - + // Auto-select first organization if available and none selected - if (orgsData.organizations && orgsData.organizations.length > 0 && !selectedOrg) { + if ( + orgsData.organizations && + orgsData.organizations.length > 0 && + !selectedOrg + ) { setSelectedOrg(orgsData.organizations[0]!.slug) } } catch (error) { @@ -127,58 +149,66 @@ export function ConfigureStep() { setIsLoadingOrgs(false) } } - + // Add an empty environment variable row const addEnvVar = () => { - setEnvVars([...envVars, { key: '', value: '', environments: ['Production'] }]) + setEnvVars([ + ...envVars, + { key: '', value: '', environments: ['Production'] } + ]) } - + // Remove environment variable row const removeEnvVar = (index: number) => { if (envVars.length > 1) { setEnvVars(envVars.filter((_, i) => i !== index)) } } - + // Update environment variable - const updateEnvVar = (index: number, field: 'key' | 'value', value: string) => { + const updateEnvVar = ( + index: number, + field: 'key' | 'value', + value: string + ) => { const newEnvVars = [...envVars] if (newEnvVars[index]) { newEnvVars[index][field] = value } setEnvVars(newEnvVars) } - + // Toggle environment for variable const toggleEnvironment = (index: number, environment: string) => { const newEnvVars = [...envVars] if (newEnvVars[index]?.environments) { const currentEnvs = newEnvVars[index].environments - if (currentEnvs.includes(environment)) { - newEnvVars[index].environments = currentEnvs.filter(env => env !== environment) + newEnvVars[index].environments = currentEnvs.filter( + (env) => env !== environment + ) } else { newEnvVars[index].environments = [...currentEnvs, environment] } - + // Ensure at least one environment is selected if (newEnvVars[index].environments.length === 0) { newEnvVars[index].environments = ['Production'] } - + setEnvVars(newEnvVars) } } - + // Toggle deployment option const toggleDeployOption = (option: 'auction' | 'lrn') => { setDeployOption(option) } - + // Get selected deployer details - const selectedDeployer = deployers.find(d => d.deployerLrn === selectedLrn) - + const selectedDeployer = deployers.find((d) => d.deployerLrn === selectedLrn) + // Validate form const canProceed = () => { if (deployOption === 'lrn' && !selectedLrn) return false @@ -186,17 +216,19 @@ export function ConfigureStep() { if (!wallet?.address) return false return true } - + // Handle next step const handleNext = () => { if (!canProceed()) { toast.error('Please complete all required fields') return } - + // Filter out empty environment variables - const validEnvVars = envVars.filter(env => env.key.trim() && env.value.trim()) - + const validEnvVars = envVars.filter( + (env) => env.key.trim() && env.value.trim() + ) + // Save configuration to form data setFormData({ deploymentType: deployOption, @@ -207,33 +239,58 @@ export function ConfigureStep() { paymentAddress: wallet?.address, environmentVariables: validEnvVars }) - + nextStep() } - + // Don't render UI until after mount to prevent hydration mismatch if (!mounted) { return null } - + // Determine if dark mode is active const isDarkMode = resolvedTheme === 'dark' - + // Get deployment mode info const isTemplateMode = formData.deploymentMode === 'template' - const selectedItem = isTemplateMode ? formData.template?.name : formData.githubRepo - + const selectedItem = isTemplateMode + ? formData.template?.name + : formData.githubRepo + return (
{/* Configure icon and header */}
- - - + + +
-

Configure

+

+ Configure +

Define the deployment type

@@ -252,7 +309,9 @@ export function ConfigureStep() {
Type: - {isTemplateMode ? 'Template' : 'Repository'} + + {isTemplateMode ? 'Template' : 'Repository'} +
Source: @@ -268,24 +327,33 @@ export function ConfigureStep() { {/* Organization Selection */}
-