Copy updates (#38)

Co-authored-by: zramsay <zach@bluecollarcoding.ca>
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Reviewed-on: #38
Co-authored-by: zramsay <zramsay@noreply.git.vdb.to>
Co-committed-by: zramsay <zramsay@noreply.git.vdb.to>

.gitea/workflows/deploy-frontend.yaml

@@ -0,0 +1,61 @@
+name: Deploy Snowball frontend
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  REGISTRY_USER_KEY: ${{ secrets.REGISTRY_USER_KEY }}
+  REGISTRY_BOND_ID: ${{ secrets.REGISTRY_BOND_ID }}
+  DEPLOYER_LRN: lrn://vaasl-provider/deployers/webapp-deployer-api.apps.vaasl.io
+  AUTHORITY: laconic-deploy
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Download yarn
+        run: |
+          curl -fsSL -o /usr/local/bin/yarn https://github.com/yarnpkg/yarn/releases/download/v1.22.21/yarn-1.22.21.js
+          chmod +x /usr/local/bin/yarn
+
+      - name: Install dependencies
+        run: |
+          yarn install
+
+      - name: Set up environment
+        run: |
+          # Create a .env file with the necessary variables
+          echo "REGISTRY_BOND_ID=$REGISTRY_BOND_ID" > packages/deployer/.env
+          echo "DEPLOYER_LRN=$DEPLOYER_LRN" >> packages/deployer/.env
+          echo "AUTHORITY=$AUTHORITY" >> packages/deployer/.env
+
+          # Create a config file with necessary endpoints and secrets
+          cat > packages/deployer/config.yml <<EOF
+          services:
+            registry:
+              rpcEndpoint: https://laconicd-sapo.laconic.com
+              gqlEndpoint: https://laconicd-sapo.laconic.com/api
+              userKey: $REGISTRY_USER_KEY
+              bondId: $REGISTRY_BOND_ID
+              chainId: laconic-testnet-2
+              gasPrice: 0.001alnt
+          EOF
+
+      - name: Run deploy script
+        run: |
+          cd packages/deployer
+          ./deploy-frontend.sh

.gitea/workflows/lint.yaml

@@ -0,0 +1,30 @@
+name: Lint
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - staging
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Download yarn
+        run: |
+          curl -fsSL -o /usr/local/bin/yarn https://github.com/yarnpkg/yarn/releases/download/v1.22.21/yarn-1.22.21.js
+          chmod +x /usr/local/bin/yarn
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn
+      - name: Build libs
+        run: yarn workspace gql-client run build
+      - name: Linter check
+        run: yarn lint

.gitignore

@@ -7,3 +7,6 @@ yarn-error.log
 packages/backend/environments/local.toml
 packages/backend/dev/
 packages/frontend/dist/
+
+# ignore all .DS_Store files
+**/.DS_Store

README.md

@@ -1,220 +1,23 @@
 # snowballtools-base
 
-## Setup
+This is a [yarn workspace](https://yarnpkg.com/features/workspaces) monorepo for the dashboard.
 
-- Clone the `snowballtools-base` repo
+## Getting Started
 
-  ```bash
-  git clone git@github.com:snowball-tools/snowballtools-base.git
-  cd snowballtools-base
-  ```
+### Install dependencies
 
-- Install dependencies in root
+In the root of the project, run:
 
-  ```bash
+```zsh
 yarn
 ```
 
-- Build packages
+### Build backend
 
-  ```bash
+```zsh
 yarn build --ignore frontend
 ```
 
-Let us assume the following domains for backend and frontend
-  - Backend server: `api.snowballtools.com`
-  - Frontend app: `dashboard.snowballtools.com`
+### Environment variables, running the development server, and deployment
 
-- Configuration Files
-
-  - For Backend:
-  
-    ```bash
-    cp packages/backend/environments/local.toml.example packages/backend/environments/local.toml
-    ```
-
-    - Production
-      
-      - Update the following in backend [config file](packages/backend/environments/local.toml)
-        
-        ```toml
-        [server]
-          ...
-          [server.session]
-            # Secret should be changed to a different random string
-            secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7sidnc382"
-            # Set URL of the frontend app
-            appOriginUrl = "https://dashboard.snowballtools.com"
-            # Set to true for session cookies to work behind proxy
-            trustProxy = true
-            # Set empty domain when using secure connection
-            domain = ""
-        ```
-      
-      - Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
-        - [OAuth App Creation](https://github.com/organizations/<org>/settings/applications/new)
-          - Homepage URL: `https://dashboard.snowballtools.com`
-          - Authorization callback URL: `https://dashboard.snowballtools.com/organization/projects/create`
-          - Generate a new client secret after app is created
-      
-      - Set `gitHub.webhookUrl` in backend [config file](packages/backend/environments/local.toml)
-      
-        ```toml
-        [gitHub]
-          webhookUrl = "https://api.snowballtools.com"
-        ```
-      
-      - Let us assume domain for Laconicd to be `api.laconic.com` and set the following in backend [config file](packages/backend/environments/local.toml)
-      
-        ```toml
-        [registryConfig]
-          fetchDeploymentRecordDelay = 5000
-          # Use actual port for REST endpoint
-          restEndpoint = "http://api.laconic.com:1317"
-          # Use actual port for GQL endpoint
-          gqlEndpoint = "http://api.laconic.com:9473/api"
-          # Set private key of account to be used in Laconicd
-          privateKey = "0wtu92cd4f1y791ezpjwgzzazni4dmd3q3mzqc3t6i6r9v06ji784tey6hwmnn69"
-          # Set Bond ID to be used for publishing records
-          bondId = "8xk8c2pb61kajwixpm223zvptr2x2ncajq0vd998p6aqhvqqep2reu6pik245epf"
-          chainId = "laconic_9000-1"
-          # Set authority that is existing in the chain
-          authority = "laconic"
-          [registryConfig.fee]
-            amount = "200000"
-            denom = "aphoton"
-            gas = "750000"
-        ```
-
-    - Development
-    
-      - Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
-        - [OAuth App Creation](https://github.com/organizations/<org>/settings/applications/new)
-          - Homepage URL: `http://localhost:3000`
-          - Authorization callback URL: `http://localhost:3000/organization/projects/create`
-          - Generate a new client secret after app is created
-      
-      - Setup Laconicd
-        - Run the laconicd stack following this [doc](https://git.vdb.to/cerc-io/stack-orchestrator/src/branch/main/docs/laconicd-with-console.md)
-        - Get the private key and set `registryConfig.privateKey` in backend [config file](packages/backend/environments/local.toml)
-      
-          ```bash
-          laconic-so deployment --dir laconic-loaded-deployment exec laconicd "laconicd keys export mykey --unarmored-hex --unsafe"
-          # WARNING: The private key will be exported as an unarmored hexadecimal string. USE AT YOUR OWN RISK. Continue? [y/N]: y
-          # 754cca7b4b729a99d156913aea95366411d072856666e95ba09ef6c664357d81
-          ```
-
-        - Set authority in `registryConfig.authority` in backend [config file](packages/backend/environments/local.toml)
-
-        - Run the script to create bond, reserve the authority and set authority bond
-      
-          ```bash
-          yarn test:registry:init
-          # snowball:initialize-registry bondId: 6af0ab81973b93d3511ae79841756fb5da3fd2f70ea1279e81fae7c9b19af6c4 +0ms
-          ```
-      
-          - Get the bond id and set `registryConfig.bondId` in backend [config file](packages/backend/environments/local.toml)
-      
-      - Setup ngrok for GitHub webhooks
-        - [ngrok getting started](https://ngrok.com/docs/getting-started/)
-        - Start ngrok and point to backend server endpoint
-      
-          ```bash
-          ngrok http http://localhost:8000
-          ```
-      
-        - Look for the forwarding URL in ngrok
-      
-          ```bash
-          Forwarding                    https://19c1-61-95-158-116.ngrok-free.app -> http://localhost:8000
-          ```
-      
-        - Set `gitHub.webhookUrl` in backend [config file](packages/backend/environments/local.toml)
-      
-          ```toml
-          [gitHub]
-            webhookUrl = "https://19c1-61-95-158-116.ngrok-free.app"
-          ```
-
-  - For Frontend:
-  
-    ```bash
-    cp packages/frontend/.env.example packages/frontend/.env
-    ```
-
-    - Copy the GitHub OAuth app client ID from previous steps and set it in frontend [.env](packages/frontend/.env) file
-
-      ```env
-      VITE_GITHUB_CLIENT_ID = <CLIENT_ID>
-      ```
-    
-    - Set `VITE_GITHUB_PWA_TEMPLATE_REPO` and `VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO` in [.env](packages/frontend/.env) file
-    
-      ```env
-      VITE_GITHUB_PWA_TEMPLATE_REPO = 'cerc-io/test-progressive-web-app'   # Set actual owner/name of the template repo that will be used for creating new repo
-      VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'cerc-io/image-upload-pwa-example'  # Set actual owner/name of the template repo that will be used for creating new repo
-      ```
-
-    - Production
-    
-      - Set the following values in [.env](packages/frontend/.env) file
-      
-        ```env
-        VITE_SERVER_URL = 'https://api.snowballtools.com'   # Backend server endpoint
-        ```
-      
-      - Sign in to [wallet connect](https://cloud.walletconnect.com/sign-in) to create a project ID
-        - Create a project and add information to use wallet connect SDK
-          - Add project name and select project type as `App`
-          - Set project home page URL to `https://dashboard.snowballtools.com`
-        - On creation of project, use the `Project ID` and set it in `VITE_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file
-      
-        ```env
-        VITE_WALLET_CONNECT_ID = <PROJECT_ID>
-        ```
-      
-      - Build the React application
-      
-        ```bash
-        yarn build
-        ```
-      
-      - Use a web server for hosting static built files
-      
-        ```bash
-        python3 -m http.server -d build 3000
-        ```
-
-    - Development
-    
-      - Copy the graphQL endpoint from terminal and add the endpoint in the [.env](packages/frontend/.env) file present in `packages/frontend`
-      
-        ```env
-        VITE_SERVER_URL = 'http://localhost:8000'
-        ```
-      
-      - Sign in to [wallet connect](https://cloud.walletconnect.com/sign-in) to create a project ID.
-        - Create a project and add information to use wallet connect SDK
-          - Add project name and select project type as `App`
-          - Project home page URL is not required to be set
-        - On creation of project, use the `Project ID` and set it in `VITE_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file
-      
-        ```env
-        VITE_WALLET_CONNECT_ID = <Project_ID>
-        ```
-      
-      - The React application will be running in `http://localhost:3000/`
-
-## Development
-
-- Start the backend server
-
-  ```bash
-  yarn start:backend
-  ```
-
-- Start the frontend
-
-  ```bash
-  yarn start
-  ```
+Follow the instructions in the README.md files of the [backend](packages/backend/README.md) and [frontend](packages/frontend/README.md) packages.

build-webapp.sh

@@ -14,17 +14,18 @@ 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_WALLET_IFRAME_URL = 'LACONIC_HOSTED_CONFIG_wallet_iframe_url'
 VITE_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'
-VITE_ALCHEMY_API_KEY = 'LACONIC_HOSTED_CONFIG_aplchemy_api_key'
 VITE_BUGSNAG_API_KEY = 'LACONIC_HOSTED_CONFIG_bugsnag_api_key'
 VITE_PASSKEY_WALLET_RPID = 'LACONIC_HOSTED_CONFIG_passkey_wallet_rpid'
 VITE_TURNKEY_API_BASE_URL = 'LACONIC_HOSTED_CONFIG_turnkey_api_base_url'
-VITE_TURNKEY_ORGANIZATION_ID = 'LACONIC_HOSTED_CONFIG_turnkey_organization_id'
 EOF
 
 yarn || exit 1
-yarn build || exit 1
+yarn build --ignore backend || exit 1
 
 if [[ ! -d "$OUTPUT_DIR" ]]; then
   echo "Missing output directory: $OUTPUT_DIR" 1>&2

packages/backend/README.md

@@ -1 +1,76 @@
-# Backend for Snowball Tools
+# backend
+
+This backend is a [node.js](https://nodejs.org/) [express.js](https://expressjs.com/) [apollo server](https://www.apollographql.com/docs/apollo-server/) project in a [yarn workspace](https://yarnpkg.com/features/workspaces).
+
+## Getting Started
+
+### Install dependencies
+
+In the root of the project, run:
+
+```zsh
+yarn
+```
+
+### Build backend
+
+```zsh
+yarn build --ignore frontend
+```
+
+### Environment variables
+
+#### Local
+
+Copy the `environments/local.toml.example` file to `environments/local.toml`:
+
+```zsh
+cp environments/local.toml.example environments/local.toml
+```
+
+#### Staging environment variables
+
+In the deployment repository, update staging [staging/configmaps/config/prod.toml](https://git.vdb.to/cerc-io/snowballtools-base-api-deployments/src/commit/318c2bc09f334dca79c3501838512749f9431bf1/deployments/staging/configmaps/config/prod.toml)
+
+#### Production environment variables
+
+In the deployment repository, update production [production/configmaps/config/prod.toml](https://git.vdb.to/cerc-io/snowballtools-base-api-deployments/src/commit/318c2bc09f334dca79c3501838512749f9431bf1/deployments/production/configmaps/config/prod.toml)
+
+### Run development server
+
+```zsh
+yarn start
+```
+
+## Deployment
+
+Clone the [deployer repository](https://git.vdb.to/cerc-io/snowballtools-base-api-deployments):
+
+```zsh
+git clone git@git.vdb.to:cerc-io/snowballtools-base-api-deployments.git
+```
+
+### Staging
+
+```zsh
+echo trigger >> .gitea/workflows/triggers/staging-deploy
+git commit -a -m "Deploy v0.0.8"  # replace with version number
+git push
+```
+
+### Production
+
+```zsh
+echo trigger >> .gitea/workflows/triggers/production-deploy
+git commit -a -m "Deploy v0.0.8" # replace with version number
+git push
+```
+
+### Deployment status
+
+Dumb for now
+
+- [Staging](https://snowballtools-base-api.staging.apps.snowballtools.com/staging/version)
+- [Production](https://snowballtools-base-api.apps.snowballtools.com/staging/version)
+
+Update version number manually in [routes/staging.ts](/packages/backend/src/routes/staging.ts)

packages/backend/environments/local.toml.example

@@ -3,9 +3,12 @@
   port = 8000
   gqlPath = "/graphql"
   [server.session]
-    secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi"
+    secret = ""
+    # Frontend webapp URL origin
     appOriginUrl = "http://localhost:3000"
+    # Set to true if server running behind proxy
     trustProxy = false
+    # Backend URL hostname
     domain = "localhost"
 
 [database]
@@ -19,6 +22,7 @@
 
 [registryConfig]
   fetchDeploymentRecordDelay = 5000
+  checkAuctionStatusDelay = 5000
   restEndpoint = "http://localhost:1317"
   gqlEndpoint = "http://localhost:9473/api"
   chainId = "laconic_9000-1"
@@ -26,9 +30,14 @@
   bondId = ""
   authority = ""
   [registryConfig.fee]
-    amount = "200000"
-    denom = "aphoton"
-    gas = "750000"
+    gas = ""
+    fees = ""
+    gasPrice = "1alnt"
 
-[misc]
-  projectDomain = "apps.snowballtools.com"
+# Durations are set to 2 mins as deployers may take time with ongoing deployments and auctions
+[auction]
+  commitFee = "100000"
+  commitsDuration = "120s"
+  revealFee = "100000"
+  revealsDuration = "120s"
+  denom = "alnt"

packages/backend/package.json

@@ -4,10 +4,10 @@
   "version": "1.0.0",
   "main": "index.js",
   "dependencies": {
+    "@cerc-io/registry-sdk": "^0.2.11",
     "@graphql-tools/schema": "^10.0.2",
     "@graphql-tools/utils": "^10.0.12",
     "@octokit/oauth-app": "^6.1.0",
-    "@snowballtools/laconic-sdk": "^0.1.17",
     "@turnkey/sdk-server": "^0.1.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",

packages/backend/src/config.ts

@@ -34,16 +34,21 @@ export interface RegistryConfig {
   privateKey: string;
   bondId: string;
   fetchDeploymentRecordDelay: number;
+  checkAuctionStatusDelay: number;
   authority: string;
   fee: {
-    amount: string;
-    denom: string;
     gas: string;
+    fees: string;
+    gasPrice: string;
   };
 }
 
-export interface MiscConfig {
-  projectDomain: string;
+export interface AuctionConfig {
+  commitFee: string;
+  commitsDuration: string;
+  revealFee: string;
+  revealsDuration: string;
+  denom: string;
 }
 
 export interface Config {
@@ -51,7 +56,7 @@ export interface Config {
   database: DatabaseConfig;
   gitHub: GitHubConfig;
   registryConfig: RegistryConfig;
-  misc: MiscConfig;
+  auction: AuctionConfig;
   turnkey: {
     apiBaseUrl: string;
     apiPublicKey: string;

packages/backend/src/database.ts

@@ -3,7 +3,9 @@ import {
   DeepPartial,
   FindManyOptions,
   FindOneOptions,
-  FindOptionsWhere
+  FindOptionsWhere,
+  IsNull,
+  Not
 } from 'typeorm';
 import path from 'path';
 import debug from 'debug';
@@ -11,7 +13,7 @@ import assert from 'assert';
 import { customAlphabet } from 'nanoid';
 import { lowercase, numbers } from 'nanoid-dictionary';
 
-import { DatabaseConfig, MiscConfig } from './config';
+import { DatabaseConfig } from './config';
 import { User } from './entity/User';
 import { Organization } from './entity/Organization';
 import { Project } from './entity/Project';
@@ -21,6 +23,7 @@ import { EnvironmentVariable } from './entity/EnvironmentVariable';
 import { Domain } from './entity/Domain';
 import { getEntities, loadAndSaveData } from './utils';
 import { UserOrganization } from './entity/UserOrganization';
+import { Deployer } from './entity/Deployer';
 
 const ORGANIZATION_DATA_PATH = '../test/fixtures/organizations.json';
 
@@ -31,9 +34,8 @@ const nanoid = customAlphabet(lowercase + numbers, 8);
 // TODO: Fix order of methods
 export class Database {
   private dataSource: DataSource;
-  private projectDomain: string;
 
-  constructor ({ dbPath } : DatabaseConfig, { projectDomain } : MiscConfig) {
+  constructor({ dbPath }: DatabaseConfig) {
     this.dataSource = new DataSource({
       type: 'better-sqlite3',
       database: dbPath,
@@ -41,20 +43,31 @@ export class Database {
       synchronize: true,
       logging: false
     });
-
-    this.projectDomain = projectDomain;
   }
 
   async init(): Promise<void> {
     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);
@@ -140,7 +161,9 @@ export class Database {
       )
       .leftJoinAndSelect('deployments.createdBy', 'user')
       .leftJoinAndSelect('deployments.domain', 'domain')
+      .leftJoinAndSelect('deployments.deployer', 'deployer')
       .leftJoinAndSelect('project.owner', 'owner')
+      .leftJoinAndSelect('project.deployers', 'deployers')
       .leftJoinAndSelect('project.organization', 'organization')
       .where('project.id = :projectId', {
         projectId
@@ -150,6 +173,24 @@ export class Database {
     return project;
   }
 
+  async allProjectsWithoutDeployments(): Promise<Project[]> {
+    const allProjects = await this.getProjects({
+      where: {
+        auctionId: Not(IsNull()),
+      },
+      relations: ['deployments'],
+      withDeleted: true,
+    });
+
+    const projects = allProjects.filter(project => {
+      if (project.deletedAt !== null) return false;
+
+      return project.deployments.length === 0;
+    });
+
+    return projects;
+  }
+
   async getProjectsInOrganization(
     userId: string,
     organizationSlug: string
@@ -195,7 +236,8 @@ export class Database {
       relations: {
         project: true,
         domain: true,
-        createdBy: true
+        createdBy: true,
+        deployer: true,
       },
       where: {
         project: {
@@ -465,11 +507,15 @@ export class Database {
       id: organizationId
     });
 
-    newProject.subDomain = `${newProject.name}.${this.projectDomain}`;
-
     return projectRepository.save(newProject);
   }
 
+  async saveProject(project: Project): Promise<Project> {
+    const projectRepository = this.dataSource.getRepository(Project);
+
+    return projectRepository.save(project);
+  }
+
   async updateProjectById(
     projectId: string,
     data: DeepPartial<Project>
@@ -555,4 +601,24 @@ export class Database {
 
     return domains;
   }
+
+  async addDeployer(data: DeepPartial<Deployer>): Promise<Deployer> {
+    const deployerRepository = this.dataSource.getRepository(Deployer);
+    const newDomain = await deployerRepository.save(data);
+
+    return newDomain;
+  }
+
+  async getDeployers(): Promise<Deployer[]> {
+    const deployerRepository = this.dataSource.getRepository(Deployer);
+    const deployers = await deployerRepository.find();
+    return deployers;
+  }
+
+  async getDeployerByLRN(deployerLrn: string): Promise<Deployer | null> {
+    const deployerRepository = this.dataSource.getRepository(Deployer);
+    const deployer = await deployerRepository.findOne({ where: { deployerLrn } });
+
+    return deployer;
+  }
 }

packages/backend/src/entity/Deployer.ts

@@ -0,0 +1,26 @@
+import { Entity, PrimaryColumn, Column, ManyToMany } from 'typeorm';
+import { Project } from './Project';
+
+@Entity()
+export class Deployer {
+  @PrimaryColumn('varchar')
+    deployerLrn!: string;
+
+  @Column('varchar')
+    deployerId!: string;
+
+  @Column('varchar')
+    deployerApiUrl!: string;
+
+  @Column('varchar')
+    baseDomain!: string;
+
+  @Column('varchar', { nullable: true })
+    minimumPayment!: string | null;
+
+  @Column('varchar', { nullable: true })
+    paymentAddress!: string | null;
+
+  @ManyToMany(() => Project, (project) => project.deployers)
+    projects!: Project[];
+}

packages/backend/src/entity/Deployment.ts

@@ -13,6 +13,7 @@ import {
 import { Project } from './Project';
 import { Domain } from './Domain';
 import { User } from './User';
+import { Deployer } from './Deployer';
 import { AppDeploymentRecordAttributes, AppDeploymentRemovalRecordAttributes } from '../types';
 
 export enum Environment {
@@ -33,21 +34,21 @@ export interface ApplicationDeploymentRequest {
   version: string;
   name: string;
   application: string;
+  lrn?: string;
+  auction?: string;
   config: string;
   meta: string;
+  payment?: string;
 }
 
 export interface ApplicationDeploymentRemovalRequest {
   type: string;
   version: string;
   deployment: string;
+  auction?: string;
+  payment?: string;
 }
 
-export interface ApplicationDeploymentRemovalRequest {
-  type: string;
-  version: string;
-  deployment: string;
-}
 
 export interface ApplicationRecord {
   type: string;
@@ -125,6 +126,10 @@ export class Deployment {
   @Column('simple-json', { nullable: true })
     applicationDeploymentRemovalRecordData!: AppDeploymentRemovalRecordAttributes | null;
 
+  @ManyToOne(() => Deployer)
+  @JoinColumn({ name: 'deployerLrn' })
+    deployer!: Deployer;
+
   @Column({
     enum: Environment
   })

packages/backend/src/entity/Project.ts

@@ -7,13 +7,16 @@ import {
   ManyToOne,
   JoinColumn,
   OneToMany,
-  DeleteDateColumn
+  DeleteDateColumn,
+  JoinTable,
+  ManyToMany
 } from 'typeorm';
 
 import { User } from './User';
 import { Organization } from './Organization';
 import { ProjectMember } from './ProjectMember';
 import { Deployment } from './Deployment';
+import { Deployer } from './Deployer';
 
 @Entity()
 export class Project {
@@ -46,6 +49,20 @@ export class Project {
   @Column('text', { default: '' })
     description!: string;
 
+  @Column('varchar', { nullable: true })
+    auctionId!: string | null;
+
+  // Tx hash for sending coins from snowball to deployer
+  @Column('varchar', { nullable: true })
+    txHash!: string | null;
+
+  @ManyToMany(() => Deployer, (deployer) => (deployer.projects))
+  @JoinTable()
+    deployers!: Deployer[]
+
+  @Column('boolean', { default: false, nullable: true })
+    fundsReleased!: boolean;
+
   // TODO: Compute template & framework in import repository
   @Column('varchar', { nullable: true })
     template!: string | null;
@@ -53,6 +70,10 @@ export class Project {
   @Column('varchar', { nullable: true })
     framework!: string | null;
 
+  // Address of the user who created the project i.e. requested deployments
+  @Column('varchar')
+    paymentAddress!: string;
+
   @Column({
     type: 'simple-array'
   })
@@ -61,9 +82,6 @@ export class Project {
   @Column('varchar')
     icon!: string;
 
-  @Column('varchar')
-    subDomain!: string;
-
   @CreateDateColumn()
     createdAt!: Date;
 

packages/backend/src/index.ts

@@ -17,7 +17,7 @@ const log = debug('snowball:server');
 const OAUTH_CLIENT_TYPE = 'oauth-app';
 
 export const main = async (): Promise<void> => {
-  const { server, database, gitHub, registryConfig, misc } = await getConfig();
+  const { server, database, gitHub, registryConfig } = await getConfig();
 
   const app = new OAuthApp({
     clientType: OAUTH_CLIENT_TYPE,
@@ -25,7 +25,7 @@ export const main = async (): Promise<void> => {
     clientSecret: gitHub.oAuth.clientSecret,
   });
 
-  const db = new Database(database, misc);
+  const db = new Database(database);
   await db.init();
 
   const registry = new Registry(registryConfig);

packages/backend/src/registry.ts

@@ -1,9 +1,12 @@
-import debug from 'debug';
 import assert from 'assert';
-import { inc as semverInc } from 'semver';
+import debug from 'debug';
 import { DateTime } from 'luxon';
+import { Octokit } from 'octokit';
+import { inc as semverInc } from 'semver';
+import { DeepPartial } from 'typeorm';
 
-import { Registry as LaconicRegistry } from '@snowballtools/laconic-sdk';
+import { Account, DEFAULT_GAS_ESTIMATION_MULTIPLIER, Registry as LaconicRegistry, getGasPrice, parseGasAndFees } from '@cerc-io/registry-sdk';
+import { DeliverTxResponse, IndexedTx } from '@cosmjs/stargate';
 
 import { RegistryConfig } from './config';
 import {
@@ -12,49 +15,53 @@ import {
   ApplicationDeploymentRequest,
   ApplicationDeploymentRemovalRequest
 } from './entity/Deployment';
-import { AppDeploymentRecord, AppDeploymentRemovalRecord, PackageJSON } from './types';
-import { sleep } from './utils';
+import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord } from './types';
+import { getConfig, getRepoDetails, registryTransactionWithRetry, sleep } from './utils';
 
 const log = debug('snowball:registry');
 
 const APP_RECORD_TYPE = 'ApplicationRecord';
+const APP_DEPLOYMENT_AUCTION_RECORD_TYPE = 'ApplicationDeploymentAuction';
 const APP_DEPLOYMENT_REQUEST_TYPE = 'ApplicationDeploymentRequest';
 const APP_DEPLOYMENT_REMOVAL_REQUEST_TYPE = 'ApplicationDeploymentRemovalRequest';
 const APP_DEPLOYMENT_RECORD_TYPE = 'ApplicationDeploymentRecord';
 const APP_DEPLOYMENT_REMOVAL_RECORD_TYPE = 'ApplicationDeploymentRemovalRecord';
+const WEBAPP_DEPLOYER_RECORD_TYPE = 'WebappDeployer'
 const SLEEP_DURATION = 1000;
 
-// TODO: Move registry code to laconic-sdk/watcher-ts
+// TODO: Move registry code to registry-sdk/watcher-ts
 export class Registry {
   private registry: LaconicRegistry;
   private registryConfig: RegistryConfig;
 
   constructor(registryConfig: RegistryConfig) {
     this.registryConfig = registryConfig;
+
+    const gasPrice = getGasPrice(registryConfig.fee.gasPrice);
+
     this.registry = new LaconicRegistry(
       registryConfig.gqlEndpoint,
       registryConfig.restEndpoint,
-      registryConfig.chainId
+      { chainId: registryConfig.chainId, gasPrice }
     );
   }
 
   async createApplicationRecord({
-    appName,
-    packageJSON,
+    octokit,
+    repository,
     commitHash,
     appType,
-    repoUrl
   }: {
-    appName: string;
-    packageJSON: PackageJSON;
+    octokit: Octokit
+    repository: string;
     commitHash: string;
     appType: string;
-    repoUrl: string;
   }): Promise<{
     applicationRecordId: string;
     applicationRecordData: ApplicationRecord;
   }> {
-    // Use laconic-sdk to publish record
+    const { repo, repoUrl, packageJSON } = await getRepoDetails(octokit, repository, commitHash)
+    // Use registry-sdk to publish record
     // Reference: https://git.vdb.to/cerc-io/test-progressive-web-app/src/branch/main/scripts/publish-app-record.sh
     // Fetch previous records
     const records = await this.registry.queryRecords(
@@ -87,7 +94,7 @@ export class Registry {
       repository_ref: commitHash,
       repository: [repoUrl],
       app_type: appType,
-      name: appName,
+      name: repo,
       ...(packageJSON.description && { description: packageJSON.description }),
       ...(packageJSON.homepage && { homepage: packageJSON.homepage }),
       ...(packageJSON.license && { license: packageJSON.license }),
@@ -100,68 +107,158 @@ export class Registry {
       ...(packageJSON.version && { app_version: packageJSON.version })
     };
 
-    const result = await this.registry.setRecord(
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+
+    const result = await registryTransactionWithRetry(() =>
+      this.registry.setRecord(
         {
           privateKey: this.registryConfig.privateKey,
           record: applicationRecord,
           bondId: this.registryConfig.bondId
         },
-      '',
-      this.registryConfig.fee
+        this.registryConfig.privateKey,
+        fee
+      )
     );
 
+    log(`Published application record ${result.id}`);
     log('Application record data:', applicationRecord);
 
-    // TODO: Discuss computation of CRN
-    const crn = this.getCrn(appName);
-    log(`Setting name: ${crn} for record ID: ${result.data.id}`);
+    // TODO: Discuss computation of LRN
+    const lrn = this.getLrn(repo);
+    log(`Setting name: ${lrn} for record ID: ${result.id}`);
 
     await sleep(SLEEP_DURATION);
-    await this.registry.setName(
-      { cid: result.data.id, crn },
-      this.registryConfig.privateKey,
-      this.registryConfig.fee
-    );
-
-    await sleep(SLEEP_DURATION);
-    await this.registry.setName(
-      { cid: result.data.id, crn: `${crn}@${applicationRecord.app_version}` },
-      this.registryConfig.privateKey,
-      this.registryConfig.fee
-    );
-
-    await sleep(SLEEP_DURATION);
-    await this.registry.setName(
+    await registryTransactionWithRetry(() =>
+      this.registry.setName(
         {
-        cid: result.data.id,
-        crn: `${crn}@${applicationRecord.repository_ref}`
+          cid: result.id,
+          lrn
         },
         this.registryConfig.privateKey,
-      this.registryConfig.fee
+        fee
+      )
+    );
+
+    await sleep(SLEEP_DURATION);
+    await registryTransactionWithRetry(() =>
+      this.registry.setName(
+        {
+          cid: result.id,
+          lrn: `${lrn}@${applicationRecord.app_version}`
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
+    );
+
+    await sleep(SLEEP_DURATION);
+    await registryTransactionWithRetry(() =>
+      this.registry.setName(
+        {
+          cid: result.id,
+          lrn: `${lrn}@${applicationRecord.repository_ref}`
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
     );
 
     return {
-      applicationRecordId: result.data.id,
+      applicationRecordId: result.id,
       applicationRecordData: applicationRecord
     };
   }
 
+  async createApplicationDeploymentAuction(
+    appName: string,
+    octokit: Octokit,
+    auctionParams: AuctionParams,
+    data: DeepPartial<Deployment>,
+  ): Promise<{
+    applicationDeploymentAuctionId: string;
+  }> {
+    assert(data.project?.repository, 'Project repository not found');
+
+    await this.createApplicationRecord({
+      octokit,
+      repository: data.project.repository,
+      appType: data.project!.template!,
+      commitHash: data.commitHash!,
+    });
+
+    const lrn = this.getLrn(appName);
+    const config = await getConfig();
+    const auctionConfig = config.auction;
+
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+    const auctionResult = await registryTransactionWithRetry(() =>
+      this.registry.createProviderAuction(
+        {
+          commitFee: auctionConfig.commitFee,
+          commitsDuration: auctionConfig.commitsDuration,
+          revealFee: auctionConfig.revealFee,
+          revealsDuration: auctionConfig.revealsDuration,
+          denom: auctionConfig.denom,
+          maxPrice: auctionParams.maxPrice,
+          numProviders: auctionParams.numProviders,
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
+    );
+
+    if (!auctionResult.auction) {
+      throw new Error('Error creating auction');
+    }
+
+    // Create record of type applicationDeploymentAuction and publish
+    const applicationDeploymentAuction = {
+      application: lrn,
+      auction: auctionResult.auction.id,
+      type: APP_DEPLOYMENT_AUCTION_RECORD_TYPE,
+    };
+
+    const result = await registryTransactionWithRetry(() =>
+      this.registry.setRecord(
+        {
+          privateKey: this.registryConfig.privateKey,
+          record: applicationDeploymentAuction,
+          bondId: this.registryConfig.bondId
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
+    );
+
+    log(`Application deployment auction created: ${auctionResult.auction.id}`);
+    log(`Application deployment auction record published: ${result.id}`);
+    log('Application deployment auction data:', applicationDeploymentAuction);
+
+    return {
+      applicationDeploymentAuctionId: auctionResult.auction.id,
+    };
+  }
+
   async createApplicationDeploymentRequest(data: {
     deployment: Deployment,
     appName: string,
     repository: string,
+    auctionId?: string | null,
+    lrn: string,
     environmentVariables: { [key: string]: string },
     dns: string,
+    payment?: string | null
   }): Promise<{
     applicationDeploymentRequestId: string;
     applicationDeploymentRequestData: ApplicationDeploymentRequest;
   }> {
-    const crn = this.getCrn(data.appName);
-    const records = await this.registry.resolveNames([crn]);
+    const lrn = this.getLrn(data.appName);
+    const records = await this.registry.resolveNames([lrn]);
     const applicationRecord = records[0];
 
     if (!applicationRecord) {
-      throw new Error(`No record found for ${crn}`);
+      throw new Error(`No record found for ${lrn}`);
     }
 
     // Create record of type ApplicationDeploymentRequest and publish
@@ -169,12 +266,9 @@ export class Registry {
       type: APP_DEPLOYMENT_REQUEST_TYPE,
       version: '1.0.0',
       name: `${applicationRecord.attributes.name}@${applicationRecord.attributes.app_version}`,
-      application: `${crn}@${applicationRecord.attributes.app_version}`,
+      application: `${lrn}@${applicationRecord.attributes.app_version}`,
       dns: data.dns,
 
-      // TODO: Not set in test-progressive-web-app CI
-      // deployment: '$CERC_REGISTRY_DEPLOYMENT_CRN',
-
       // https://git.vdb.to/cerc-io/laconic-registry-cli/commit/129019105dfb93bebcea02fde0ed64d0f8e5983b
       config: JSON.stringify({
         env: data.environmentVariables
@@ -185,28 +279,83 @@ export class Registry {
         )}`,
         repository: data.repository,
         repository_ref: data.deployment.commitHash
-      })
+      }),
+      deployer: data.lrn,
+      ...(data.auctionId && { auction: data.auctionId }),
+      ...(data.payment && { payment: data.payment }),
     };
 
     await sleep(SLEEP_DURATION);
-    const result = await this.registry.setRecord(
+
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+
+    const result = await registryTransactionWithRetry(() =>
+      this.registry.setRecord(
         {
           privateKey: this.registryConfig.privateKey,
           record: applicationDeploymentRequest,
           bondId: this.registryConfig.bondId
         },
-      '',
-      this.registryConfig.fee
+        this.registryConfig.privateKey,
+        fee
+      )
     );
-    log(`Application deployment request record published: ${result.data.id}`);
+
+    log(`Application deployment request record published: ${result.id}`);
     log('Application deployment request data:', applicationDeploymentRequest);
 
     return {
-      applicationDeploymentRequestId: result.data.id,
+      applicationDeploymentRequestId: result.id,
       applicationDeploymentRequestData: applicationDeploymentRequest
     };
   }
 
+  async getAuctionWinningDeployerRecords(
+    auctionId: string
+  ): Promise<DeployerRecord[]> {
+    const records = await this.registry.getAuctionsByIds([auctionId]);
+    const auctionResult = records[0];
+
+    let deployerRecords = [];
+    const { winnerAddresses } = auctionResult;
+
+    for (const auctionWinner of winnerAddresses) {
+      const records = await this.getDeployerRecordsByFilter({
+        paymentAddress: auctionWinner,
+      });
+
+      const newRecords = records.filter(record => {
+        return record.names !== null && record.names.length > 0;
+      });
+
+      for (const record of newRecords) {
+        if (record.id) {
+          deployerRecords.push(record);
+          break;
+        }
+      }
+    }
+
+    return deployerRecords;
+  }
+
+  async releaseDeployerFunds(
+    auctionId: string
+  ): Promise<any> {
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+    const auction = await registryTransactionWithRetry(() =>
+      this.registry.releaseFunds(
+        {
+          auctionId
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
+    );
+
+    return auction;
+  }
+
   /**
    * Fetch ApplicationDeploymentRecords for deployments
    */
@@ -222,16 +371,29 @@ export class Registry {
       true
     );
 
-    // Filter records with ApplicationRecord ID and Deployment specific URL
+    // Filter records with ApplicationDeploymentRequestId ID and Deployment specific URL
     return records.filter((record: AppDeploymentRecord) =>
       deployments.some(
         (deployment) =>
-          deployment.applicationRecordId === record.attributes.application &&
+          deployment.applicationDeploymentRequestId === record.attributes.request &&
           record.attributes.url.includes(deployment.id)
       )
     );
   }
 
+  /**
+   * Fetch WebappDeployer Records by filter
+   */
+  async getDeployerRecordsByFilter(filter: { [key: string]: any }): Promise<DeployerRecord[]> {
+    return this.registry.queryRecords(
+      {
+        type: WEBAPP_DEPLOYER_RECORD_TYPE,
+        ...filter
+      },
+      true
+    );
+  }
+
   /**
    * Fetch ApplicationDeploymentRecords by filter
    */
@@ -271,6 +433,9 @@ export class Registry {
 
   async createApplicationDeploymentRemovalRequest(data: {
     deploymentId: string;
+    deployerLrn: string;
+    auctionId?: string | null;
+    payment?: string | null;
   }): Promise<{
     applicationDeploymentRemovalRequestId: string;
     applicationDeploymentRemovalRequestData: ApplicationDeploymentRemovalRequest;
@@ -278,30 +443,93 @@ export class Registry {
     const applicationDeploymentRemovalRequest = {
       type: APP_DEPLOYMENT_REMOVAL_REQUEST_TYPE,
       version: '1.0.0',
-      deployment: data.deploymentId
+      deployment: data.deploymentId,
+      deployer: data.deployerLrn,
+      ...(data.auctionId && { auction: data.auctionId }),
+      ...(data.payment && { payment: data.payment }),
     };
 
-    const result = await this.registry.setRecord(
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+
+    const result = await registryTransactionWithRetry(() =>
+      this.registry.setRecord(
         {
           privateKey: this.registryConfig.privateKey,
           record: applicationDeploymentRemovalRequest,
           bondId: this.registryConfig.bondId
         },
-      '',
-      this.registryConfig.fee
+        this.registryConfig.privateKey,
+        fee
+      )
     );
 
-    log(`Application deployment removal request record published: ${result.data.id}`);
+    log(`Application deployment removal request record published: ${result.id}`);
     log('Application deployment removal request data:', applicationDeploymentRemovalRequest);
 
     return {
-      applicationDeploymentRemovalRequestId: result.data.id,
+      applicationDeploymentRemovalRequestId: result.id,
       applicationDeploymentRemovalRequestData: applicationDeploymentRemovalRequest
     };
   }
 
-  getCrn (appName: string): string {
+  async getCompletedAuctionIds(auctionIds: string[]): Promise<string[]> {
+    if (auctionIds.length === 0) {
+      return [];
+    }
+
+    const auctions = await this.registry.getAuctionsByIds(auctionIds);
+
+    const completedAuctions = auctions
+      .filter((auction: { id: string, status: string }) => auction.status === 'completed')
+      .map((auction: { id: string, status: string }) => auction.id);
+
+    return completedAuctions;
+  }
+
+  async getRecordsByName(name: string): Promise<any> {
+    return this.registry.resolveNames([name]);
+  }
+
+  async getAuctionData(auctionId: string): Promise<any> {
+    return this.registry.getAuctionsByIds([auctionId]);
+  }
+
+  async sendTokensToAccount(receiverAddress: string, amount: string): Promise<DeliverTxResponse> {
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+    const account = await this.getAccount();
+    const laconicClient = await this.registry.getLaconicClient(account);
+    const txResponse: DeliverTxResponse =
+      await registryTransactionWithRetry(() =>
+        laconicClient.sendTokens(account.address, receiverAddress,
+          [
+            {
+              denom: 'alnt',
+              amount
+            }
+          ],
+          fee || DEFAULT_GAS_ESTIMATION_MULTIPLIER)
+      );
+
+    return txResponse;
+  }
+
+  async getAccount(): Promise<Account> {
+    const account = new Account(Buffer.from(this.registryConfig.privateKey, 'hex'));
+    await account.init();
+
+    return account;
+  }
+
+  async getTxResponse(txHash: string): Promise<IndexedTx | null> {
+    const account = await this.getAccount();
+    const laconicClient = await this.registry.getLaconicClient(account);
+    const txResponse: IndexedTx | null = await laconicClient.getTx(txHash);
+
+    return txResponse;
+  }
+
+  getLrn(appName: string): string {
     assert(this.registryConfig.authority, "Authority doesn't exist");
-    return `crn://${this.registryConfig.authority}/applications/${appName}`;
+    return `lrn://${this.registryConfig.authority}/applications/${appName}`;
   }
 }

packages/backend/src/resolvers.ts

@@ -6,6 +6,7 @@ import { Permission } from './entity/ProjectMember';
 import { Domain } from './entity/Domain';
 import { Project } from './entity/Project';
 import { EnvironmentVariable } from './entity/EnvironmentVariable';
+import { AddProjectFromTemplateInput, AuctionParams, EnvironmentVariables } from './types';
 
 const log = debug('snowball:resolver');
 
@@ -21,8 +22,8 @@ export const createResolvers = async (service: Service): Promise<any> => {
         return service.getOrganizationsByUserId(context.user);
       },
 
-      project: async (_: any, { projectId }: { projectId: string }) => {
-        return service.getProjectById(projectId);
+      project: async (_: any, { projectId }: { projectId: string }, context: any) => {
+        return service.getProjectById(context.user, projectId);
       },
 
       projectsInOrganization: async (
@@ -68,6 +69,32 @@ export const createResolvers = async (service: Service): Promise<any> => {
       ) => {
         return service.getDomainsByProjectId(projectId, filter);
       },
+
+      getAuctionData: async (
+        _: any,
+        { auctionId }: { auctionId: string },
+      ) => {
+        return service.getAuctionData(auctionId);
+      },
+
+      deployers: async (_: any, __: any, context: any) => {
+        return service.getDeployers();
+      },
+
+      address: async (_: any, __: any, context: any) => {
+        return service.getAddress();
+      },
+
+      verifyTx: async (
+        _: any,
+        {
+          txHash,
+          amount,
+          senderAddress,
+        }: { txHash: string; amount: string; senderAddress: string },
+      ) => {
+        return service.verifyTx(txHash, amount, senderAddress);
+      },
     },
 
     // TODO: Return error in GQL response
@@ -197,16 +224,64 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
+      addProjectFromTemplate: async (
+        _: any,
+        {
+          organizationSlug,
+          data,
+          lrn,
+          auctionParams,
+          environmentVariables
+        }: {
+          organizationSlug: string;
+          data: AddProjectFromTemplateInput;
+          lrn: string;
+          auctionParams: AuctionParams;
+          environmentVariables: EnvironmentVariables[];
+        },
+        context: any,
+      ) => {
+        try {
+          return await service.addProjectFromTemplate(
+            context.user,
+            organizationSlug,
+            data,
+            lrn,
+            auctionParams,
+            environmentVariables
+          );
+        } catch (err) {
+          log(err);
+          throw err;
+        }
+      },
+
       addProject: async (
         _: any,
         {
           organizationSlug,
           data,
-        }: { organizationSlug: string; data: DeepPartial<Project> },
+          lrn,
+          auctionParams,
+          environmentVariables
+        }: {
+          organizationSlug: string;
+          data: DeepPartial<Project>;
+          lrn: string;
+          auctionParams: AuctionParams,
+          environmentVariables: EnvironmentVariables[];
+        },
         context: any,
       ) => {
         try {
-          return await service.addProject(context.user, organizationSlug, data);
+          return await service.addProject(
+            context.user,
+            organizationSlug,
+            data,
+            lrn,
+            auctionParams,
+            environmentVariables
+          );
         } catch (err) {
           log(err);
           throw err;

packages/backend/src/routes/auth.ts

@@ -5,19 +5,6 @@ import { authenticateUser, createUser } from '../turnkey-backend';
 
 const router = Router();
 
-//
-// Access Code
-//
-router.post('/accesscode', async (req, res) => {
-  console.log('Access Code', req.body);
-  const { accesscode } = req.body;
-  if (accesscode === '44444') {
-    return res.send({ isValid: true });
-  } else {
-    return res.sendStatus(204);
-  }
-});
-
 //
 // Turnkey
 //
@@ -40,7 +27,7 @@ router.post('/register', async (req, res) => {
     userEmail: email,
     userName: email.split('@')[0],
   });
-  req.session.userId = user.id;
+  req.session.address = user.id;
   res.sendStatus(200);
 });
 
@@ -52,7 +39,7 @@ router.post('/authenticate', async (req, res) => {
     signedWhoamiRequest,
   );
   if (user) {
-    req.session.userId = user.id;
+    req.session.address = user.id;
     res.sendStatus(200);
   } else {
     res.sendStatus(401);
@@ -60,11 +47,10 @@ router.post('/authenticate', async (req, res) => {
 });
 
 //
-// Lit
+// SIWE Auth
 //
-
 router.post('/validate', async (req, res) => {
-  const { message, signature, action } = req.body;
+  const { message, signature } = req.body;
   const { success, data } = await new SiweMessage(message).verify({
     signature,
   });
@@ -75,23 +61,20 @@ router.post('/validate', async (req, res) => {
   const service: Service = req.app.get('service');
   const user = await service.getUserByEthAddress(data.address);
 
-  if (action === 'signup') {
-    if (user) {
-      return res.send({ success: false, error: 'user_already_exists' });
-    }
+  if (!user) {
     const newUser = await service.createUser({
       ethAddress: data.address,
-      email: '',
-      name: '',
+      email: `${data.address}@example.com`,
       subOrgId: '',
       turnkeyWalletId: '',
     });
-    req.session.userId = newUser.id;
-  } else if (action === 'login') {
-    if (!user) {
-      return res.send({ success: false, error: 'user_not_found' });
-    }
-    req.session.userId = user.id;
+
+    // SIWESession from the web3modal library requires both address and chain ID
+    req.session.address = newUser.id;
+    req.session.chainId = data.chainId;
+  } else {
+    req.session.address = user.id;
+    req.session.chainId = data.chainId;
   }
 
   res.send({ success });
@@ -101,9 +84,10 @@ router.post('/validate', async (req, res) => {
 // General
 //
 router.get('/session', (req, res) => {
-  if (req.session.userId) {
+  if (req.session.address && req.session.chainId) {
     res.send({
-      userId: req.session.userId,
+      address: req.session.address,
+      chainId: req.session.chainId
     });
   } else {
     res.status(401).send({ error: 'Unauthorized: No active session' });
@@ -111,9 +95,12 @@ router.get('/session', (req, res) => {
 });
 
 router.post('/logout', (req, res) => {
-  // This is how you clear cookie-session
-  (req as any).session = null;
+  req.session.destroy((err) => {
+    if (err) {
+      return res.send({ success: false });
+    }
     res.send({ success: true });
   });
+});
 
 export default router;

packages/backend/src/routes/staging.ts

@@ -3,7 +3,7 @@ import { Router } from 'express';
 const router = Router();
 
 router.get('/version', async (req, res) => {
-  return res.send({ version: '0.0.7' });
+  return res.send({ version: '0.0.9' });
 });
 
 export default router;

packages/backend/src/schema.gql

@@ -22,6 +22,13 @@ enum DeploymentStatus {
   Deleting
 }
 
+enum AuctionStatus {
+  completed
+  reveal
+  commit
+  expired
+}
+
 enum DomainStatus {
   Live
   Pending
@@ -65,8 +72,13 @@ type Project {
   repository: String!
   prodBranch: String!
   description: String
+  deployers: [Deployer!]
+  auctionId: String
+  fundsReleased: Boolean
   template: String
   framework: String
+  paymentAddress: String!
+  txHash: String!
   webhooks: [String!]
   members: [ProjectMember!]
   environmentVariables: [EnvironmentVariable!]
@@ -74,7 +86,7 @@ type Project {
   updatedAt: String!
   organization: Organization!
   icon: String
-  subDomain: String
+  baseDomains: [String!]
 }
 
 type ProjectMember {
@@ -94,7 +106,10 @@ type Deployment {
   commitMessage: String!
   url: String
   environment: Environment!
+  deployer: Deployer
+  applicationDeploymentRequestId: String
   isCurrent: Boolean!
+  baseDomain: String
   status: DeploymentStatus!
   createdAt: String!
   updatedAt: String!
@@ -120,6 +135,17 @@ type EnvironmentVariable {
   updatedAt: String!
 }
 
+type Deployer {
+  deployerLrn: String!
+  deployerId: String!
+  deployerApiUrl: String!
+  minimumPayment: String
+  paymentAddress: String
+  createdAt: String!
+  updatedAt: String!
+  baseDomain: String
+}
+
 type AuthResult {
   token: String!
 }
@@ -130,11 +156,23 @@ input AddEnvironmentVariableInput {
   value: String!
 }
 
+input AddProjectFromTemplateInput {
+  templateOwner: String!
+  templateRepo: String!
+  owner: String!
+  name: String!
+  isPrivate: Boolean!
+  paymentAddress: String!
+  txHash: String!
+}
+
 input AddProjectInput {
   name: String!
   repository: String!
   prodBranch: String!
   template: String
+  paymentAddress: String!
+  txHash: String!
 }
 
 input UpdateProjectInput {
@@ -174,6 +212,48 @@ input FilterDomainsInput {
   status: DomainStatus
 }
 
+type Fee {
+  type: String!
+  quantity: String!
+}
+
+type Bid {
+  auctionId: String!
+  bidderAddress: String!
+  status: String!
+  commitHash: String!
+  commitTime: String
+  commitFee: Fee
+  revealTime: String
+  revealFee: Fee
+  bidAmount: Fee
+}
+
+type Auction {
+  id: String!
+  kind: String!
+  status: String!
+  ownerAddress: String!
+  createTime: String!
+  commitsEndTime: String!
+  revealsEndTime: String!
+  commitFee: Fee!
+  revealFee: Fee!
+  minimumBid: Fee
+  winnerAddresses: [String!]!
+  winnerBids: [Fee!]
+  winnerPrice: Fee
+  maxPrice: Fee
+  numProviders: Int!
+  fundsReleased: Boolean!
+  bids: [Bid!]!
+}
+
+input AuctionParams {
+  maxPrice: String,
+  numProviders: Int,
+}
+
 type Query {
   user: User!
   organizations: [Organization!]
@@ -184,7 +264,11 @@ type Query {
   environmentVariables(projectId: String!): [EnvironmentVariable!]
   projectMembers(projectId: String!): [ProjectMember!]
   searchProjects(searchText: String!): [Project!]
+  getAuctionData(auctionId: String!): Auction!
   domains(projectId: String!, filter: FilterDomainsInput): [Domain]
+  deployers: [Deployer]
+  address: String!
+  verifyTx(txHash: String!, amount: String!, senderAddress: String!): Boolean!
 }
 
 type Mutation {
@@ -204,7 +288,20 @@ type Mutation {
   ): Boolean!
   removeEnvironmentVariable(environmentVariableId: String!): Boolean!
   updateDeploymentToProd(deploymentId: String!): Boolean!
-  addProject(organizationSlug: String!, data: AddProjectInput): Project!
+  addProjectFromTemplate(
+    organizationSlug: String!
+    data: AddProjectFromTemplateInput
+    lrn: String
+    auctionParams: AuctionParams
+    environmentVariables: [AddEnvironmentVariableInput!]
+  ): Project!
+  addProject(
+    organizationSlug: String!
+    data: AddProjectInput!
+    lrn: String
+    auctionParams: AuctionParams
+    environmentVariables: [AddEnvironmentVariableInput!]
+  ): Project!
   updateProject(projectId: String!, data: UpdateProjectInput): Boolean!
   redeployToProd(deploymentId: String!): Boolean!
   deleteProject(projectId: String!): Boolean!

packages/backend/src/server.ts

@@ -8,7 +8,7 @@ import {
   ApolloServerPluginLandingPageLocalDefault,
   AuthenticationError,
 } from 'apollo-server-core';
-import cookieSession from 'cookie-session';
+import session from 'express-session';
 
 import { TypeSource } from '@graphql-tools/utils';
 import { makeExecutableSchema } from '@graphql-tools/schema';
@@ -22,9 +22,13 @@ import { Service } from './service';
 
 const log = debug('snowball:server');
 
+// Set cookie expiration to 1 month in milliseconds
+const COOKIE_MAX_AGE = 30 * 24 * 60 * 60 * 1000;
+
 declare module 'express-session' {
   interface SessionData {
-    userId: string;
+    address: string;
+    chainId: number;
   }
 }
 
@@ -54,14 +58,13 @@ export const createAndStartServer = async (
     context: async ({ req }) => {
       // https://www.apollographql.com/docs/apollo-server/v3/security/authentication#api-wide-authorization
 
-      const { userId } = req.session;
+      const { address } = req.session;
 
-      if (!userId) {
+      if (!address) {
         throw new AuthenticationError('Unauthorized: No active session');
       }
 
-      const user = await service.getUser(userId);
-
+      const user = await service.getUser(address);
       return { user };
     },
     plugins: [
@@ -80,20 +83,25 @@ export const createAndStartServer = async (
     }),
   );
 
+  const sessionOptions: session.SessionOptions = {
+    secret: secret,
+    resave: false,
+    saveUninitialized: true,
+    cookie: {
+      secure: new URL(appOriginUrl).protocol === 'https:',
+      maxAge: COOKIE_MAX_AGE,
+      domain: domain || undefined,
+      sameSite: new URL(appOriginUrl).protocol === 'https:' ? 'none' : 'lax',
+    }
+  };
+
   if (trustProxy) {
     // trust first proxy
     app.set('trust proxy', 1);
   }
 
   app.use(
-    cookieSession({
-      secret: secret,
-      secure: new URL(appOriginUrl).protocol === 'https:',
-      // 23 hours (less than 24 hours to avoid sessionSigs expiration issues)
-      maxAge: 23 * 60 * 60 * 1000,
-      sameSite: new URL(appOriginUrl).protocol === 'https:' ? 'none' : 'lax',
-      domain: domain || undefined,
-    }),
+    session(sessionOptions)
   );
 
   server.applyMiddleware({

packages/backend/src/service.ts

@@ -1,12 +1,12 @@
 import assert from 'assert';
 import debug from 'debug';
-import { DeepPartial, FindOptionsWhere } from 'typeorm';
+import { DeepPartial, FindOptionsWhere, IsNull, Not } from 'typeorm';
 import { Octokit, RequestError } from 'octokit';
 
 import { OAuthApp } from '@octokit/oauth-app';
 
 import { Database } from './database';
-import { Deployment, DeploymentStatus, Environment } from './entity/Deployment';
+import { ApplicationRecord, Deployment, DeploymentStatus, Environment } from './entity/Deployment';
 import { Domain } from './entity/Domain';
 import { EnvironmentVariable } from './entity/EnvironmentVariable';
 import { Organization } from './entity/Organization';
@@ -14,14 +14,19 @@ import { Project } from './entity/Project';
 import { Permission, ProjectMember } from './entity/ProjectMember';
 import { User } from './entity/User';
 import { Registry } from './registry';
+import { Deployer } from './entity/Deployer';
 import { GitHubConfig, RegistryConfig } from './config';
 import {
+  AddProjectFromTemplateInput,
   AppDeploymentRecord,
   AppDeploymentRemovalRecord,
+  AuctionParams,
+  DeployerRecord,
+  EnvironmentVariables,
   GitPushEventPayload,
-  PackageJSON,
 } from './types';
 import { Role } from './entity/UserOrganization';
+import { getRepoDetails } from './utils';
 
 const log = debug('snowball:service');
 
@@ -38,15 +43,16 @@ interface Config {
 export class Service {
   private db: Database;
   private oauthApp: OAuthApp;
-  private registry: Registry;
+  private laconicRegistry: Registry;
   private config: Config;
 
   private deployRecordCheckTimeout?: NodeJS.Timeout;
+  private auctionStatusCheckTimeout?: NodeJS.Timeout;
 
   constructor(config: Config, db: Database, app: OAuthApp, registry: Registry) {
     this.db = db;
     this.oauthApp = app;
-    this.registry = registry;
+    this.laconicRegistry = registry;
     this.config = config;
     this.init();
   }
@@ -59,6 +65,8 @@ export class Service {
     this.checkDeployRecordsAndUpdate();
     // Start check for ApplicationDeploymentRemovalRecords asynchronously
     this.checkDeploymentRemovalRecordsAndUpdate();
+    // Start check for Deployment Auctions asynchronously
+    this.checkAuctionStatus();
   }
 
   /**
@@ -66,6 +74,7 @@ export class Service {
    */
   destroy(): void {
     clearTimeout(this.deployRecordCheckTimeout);
+    clearTimeout(this.auctionStatusCheckTimeout);
   }
 
   /**
@@ -107,7 +116,7 @@ export class Service {
       }
 
       // Fetch ApplicationDeploymentRecord for deployments
-      const records = await this.registry.getDeploymentRecords(deployments);
+      const records = await this.laconicRegistry.getDeploymentRecords(deployments);
       log(`Found ${records.length} ApplicationDeploymentRecords`);
 
       // Update deployments for which ApplicationDeploymentRecords were returned
@@ -140,7 +149,7 @@ export class Service {
 
       // Fetch ApplicationDeploymentRemovalRecords for deployments
       const records =
-        await this.registry.getDeploymentRemovalRecords(deployments);
+        await this.laconicRegistry.getDeploymentRemovalRecords(deployments);
       log(`Found ${records.length} ApplicationDeploymentRemovalRecords`);
 
       // Update deployments for which ApplicationDeploymentRemovalRecords were returned
@@ -156,41 +165,28 @@ export class Service {
 
   /**
    * Update deployments with ApplicationDeploymentRecord data
+   * Deployments that are completed but not updated in DB
    */
   async updateDeploymentsWithRecordData(
     records: AppDeploymentRecord[],
   ): Promise<void> {
-    // Get deployments for ApplicationDeploymentRecords
+    // Fetch the deployments to be updated using deployment requestId
     const deployments = await this.db.getDeployments({
       where: records.map((record) => ({
-        applicationRecordId: record.attributes.application,
+        applicationDeploymentRequestId: record.attributes.request,
       })),
+      relations: {
+        deployer: true,
+        project: true,
+      },
       order: {
         createdAt: 'DESC',
       },
     });
 
-    // Get project IDs of deployments that are in production environment
-    const productionDeploymentProjectIds = deployments.reduce(
-      (acc, deployment): Set<string> => {
-        if (deployment.environment === Environment.Production) {
-          acc.add(deployment.projectId);
-        }
-
-        return acc;
-      },
-      new Set<string>(),
-    );
-
-    // Set old deployments isCurrent to false
-    await this.db.updateDeploymentsByProjectIds(
-      Array.from(productionDeploymentProjectIds),
-      { isCurrent: false },
-    );
-
     const recordToDeploymentsMap = deployments.reduce(
       (acc: { [key: string]: Deployment }, deployment) => {
-        acc[deployment.applicationRecordId] = deployment;
+        acc[deployment.applicationDeploymentRequestId!] = deployment;
         return acc;
       },
       {},
@@ -198,22 +194,57 @@ export class Service {
 
     // Update deployment data for ApplicationDeploymentRecords
     const deploymentUpdatePromises = records.map(async (record) => {
-      const deployment = recordToDeploymentsMap[record.attributes.application];
+      const deployment = recordToDeploymentsMap[record.attributes.request];
 
-      await this.db.updateDeploymentById(deployment.id, {
-        applicationDeploymentRecordId: record.id,
-        applicationDeploymentRecordData: record.attributes,
-        url: record.attributes.url,
-        status: DeploymentStatus.Ready,
-        isCurrent: deployment.environment === Environment.Production,
+      if (!deployment.project) {
+        log(`Project ${deployment.projectId} not found`);
+        return;
+      } else {
+        deployment.applicationDeploymentRecordId = record.id;
+        deployment.applicationDeploymentRecordData = record.attributes;
+        deployment.url = record.attributes.url;
+        deployment.status = DeploymentStatus.Ready;
+        deployment.isCurrent = deployment.environment === Environment.Production;
+
+        await this.db.updateDeploymentById(deployment.id, deployment);
+
+        // Release deployer funds on successful deployment
+        if (!deployment.project.fundsReleased) {
+          const fundsReleased = await this.releaseDeployerFundsByProjectId(deployment.projectId);
+
+          // Return remaining amount to owner
+          await this.returnUserFundsByProjectId(deployment.projectId, true);
+
+          await this.db.updateProjectById(deployment.projectId, {
+            fundsReleased,
           });
+        }
 
         log(
           `Updated deployment ${deployment.id} with URL ${record.attributes.url}`,
         );
+      }
     });
 
     await Promise.all(deploymentUpdatePromises);
+
+    // Get deployments that are in production environment
+    const prodDeployments = Object.values(recordToDeploymentsMap).filter(deployment => deployment.isCurrent);
+
+    // Set the isCurrent state to false for the old deployments
+    for (const deployment of prodDeployments) {
+      const projectDeployments = await this.db.getDeploymentsByProjectId(deployment.projectId);
+      const oldDeployments = projectDeployments
+        .filter(projectDeployment => projectDeployment.deployer.deployerLrn === deployment.deployer.deployerLrn && projectDeployment.id !== deployment.id);
+      for (const oldDeployment of oldDeployments) {
+        await this.db.updateDeployment(
+          { id: oldDeployment.id },
+          { isCurrent: false }
+        );
+      }
+    }
+
+    await Promise.all(deploymentUpdatePromises);
   }
 
   /**
@@ -261,6 +292,45 @@ export class Service {
     await Promise.all(deploymentUpdatePromises);
   }
 
+  /**
+   * Checks the status for all ongoing auctions
+   * Calls the createDeploymentFromAuction method for deployments with completed auctions
+   */
+  async checkAuctionStatus(): Promise<void> {
+    const projects = await this.db.allProjectsWithoutDeployments();
+
+    const validAuctionIds = projects.map((project) => project.auctionId)
+      .filter((id): id is string => Boolean(id));
+    const completedAuctionIds = await this.laconicRegistry.getCompletedAuctionIds(validAuctionIds);
+
+    const projectsToBedeployed = projects.filter((project) =>
+      completedAuctionIds.includes(project.auctionId!)
+    );
+
+    for (const project of projectsToBedeployed) {
+      const deployerRecords = await this.laconicRegistry.getAuctionWinningDeployerRecords(project!.auctionId!);
+
+      if (!deployerRecords) {
+        log(`No winning deployer for auction ${project!.auctionId}`);
+
+        // Return all funds to the owner
+        await this.returnUserFundsByProjectId(project.id, false)
+      } else {
+        const deployers = await this.saveDeployersByDeployerRecords(deployerRecords);
+        for (const deployer of deployers) {
+          log(`Creating deployment for deployer ${deployer.deployerLrn}`);
+          await this.createDeploymentFromAuction(project, deployer);
+          // Update project with deployer
+          await this.updateProjectWithDeployer(project.id, deployer);
+        }
+      }
+    }
+
+    this.auctionStatusCheckTimeout = setTimeout(() => {
+      this.checkAuctionStatus();
+    }, this.config.registryConfig.checkAuctionStatusDelay);
+  }
+
   async getUser(userId: string): Promise<User | null> {
     return this.db.getUser({
       where: {
@@ -294,7 +364,7 @@ export class Service {
   }
 
   async createUser(params: {
-    name: string;
+    name?: string;
     email: string;
     subOrgId: string;
     ethAddress: string;
@@ -337,8 +407,13 @@ export class Service {
     return dbOrganizations;
   }
 
-  async getProjectById(projectId: string): Promise<Project | null> {
+  async getProjectById(user: User, projectId: string): Promise<Project | null> {
     const dbProject = await this.db.getProjectById(projectId);
+
+    if (dbProject && dbProject.owner.id !== user.id) {
+      return null;
+    }
+
     return dbProject;
   }
 
@@ -518,6 +593,7 @@ export class Service {
       domain: prodBranchDomains[0],
       commitHash: oldDeployment.commitHash,
       commitMessage: oldDeployment.commitMessage,
+      deployer: oldDeployment.deployer
     });
 
     return newDeployment;
@@ -527,44 +603,20 @@ export class Service {
     userId: string,
     octokit: Octokit,
     data: DeepPartial<Deployment>,
+    deployerLrn?: string
   ): Promise<Deployment> {
     assert(data.project?.repository, 'Project repository not found');
     log(
       `Creating deployment in project ${data.project.name} from branch ${data.branch}`,
     );
-    const [owner, repo] = data.project.repository.split('/');
-
-    const { data: packageJSONData } = await octokit.rest.repos.getContent({
-      owner,
-      repo,
-      path: 'package.json',
-      ref: data.commitHash,
-    });
-
-    if (!packageJSONData) {
-      throw new Error('Package.json file not found');
-    }
-
-    assert(!Array.isArray(packageJSONData) && packageJSONData.type === 'file');
-    const packageJSON: PackageJSON = JSON.parse(atob(packageJSONData.content));
-
-    assert(packageJSON.name, "name field doesn't exist in package.json");
-
-    const repoUrl = (
-      await octokit.rest.repos.get({
-        owner,
-        repo,
-      })
-    ).data.html_url;
 
     // TODO: Set environment variables for each deployment (environment variables can`t be set in application record)
     const { applicationRecordId, applicationRecordData } =
-      await this.registry.createApplicationRecord({
-        appName: repo,
-        packageJSON,
+      await this.laconicRegistry.createApplicationRecord({
+        octokit,
+        repository: data.project.repository,
         appType: data.project!.template!,
         commitHash: data.commitHash!,
-        repoUrl,
       });
 
     // Update previous deployment with prod branch domain
@@ -580,6 +632,138 @@ export class Service {
       );
     }
 
+    let deployer;
+    if (deployerLrn) {
+      deployer = await this.db.getDeployerByLRN(deployerLrn);
+    } else {
+      deployer = data.deployer;
+    }
+
+    const newDeployment = await this.createDeploymentFromData(userId, data, deployer!.deployerLrn!, applicationRecordId, applicationRecordData);
+
+    const { repo, repoUrl } = await getRepoDetails(octokit, data.project.repository, data.commitHash);
+    const environmentVariablesObj = await this.getEnvVariables(data.project!.id!);
+    // To set project DNS
+    if (data.environment === Environment.Production) {
+      // On deleting deployment later, project DNS deployment is also deleted
+      // So publish project DNS deployment first so that ApplicationDeploymentRecord for the same is available when deleting deployment later
+      await this.laconicRegistry.createApplicationDeploymentRequest({
+        deployment: newDeployment,
+        appName: repo,
+        repository: repoUrl,
+        environmentVariables: environmentVariablesObj,
+        dns: `${newDeployment.project.name}`,
+        lrn: deployer!.deployerLrn!,
+        payment: data.project.txHash,
+        auctionId: data.project.auctionId
+      });
+    }
+
+    const { applicationDeploymentRequestId, applicationDeploymentRequestData } =
+      await this.laconicRegistry.createApplicationDeploymentRequest({
+        deployment: newDeployment,
+        appName: repo,
+        repository: repoUrl,
+        lrn: deployer!.deployerLrn!,
+        environmentVariables: environmentVariablesObj,
+        dns: `${newDeployment.project.name}-${newDeployment.id}`,
+        payment: data.project.txHash,
+        auctionId: data.project.auctionId
+      });
+
+    await this.db.updateDeploymentById(newDeployment.id, {
+      applicationDeploymentRequestId,
+      applicationDeploymentRequestData,
+    });
+
+    return newDeployment;
+  }
+
+  async createDeploymentFromAuction(
+    project: DeepPartial<Project>,
+    deployer: Deployer
+  ): Promise<Deployment> {
+    const octokit = await this.getOctokit(project.ownerId!);
+    const [owner, repo] = project.repository!.split('/');
+
+    const repoUrl = (
+      await octokit.rest.repos.get({
+        owner,
+        repo,
+      })
+    ).data.html_url;
+
+    const {
+      data: [latestCommit],
+    } = await octokit.rest.repos.listCommits({
+      owner,
+      repo,
+      sha: project.prodBranch,
+      per_page: 1,
+    });
+
+    const lrn = this.laconicRegistry.getLrn(repo);
+    const [record] = await this.laconicRegistry.getRecordsByName(lrn);
+    const applicationRecordId = record.id;
+    const applicationRecordData = record.attributes;
+
+    const deployerLrn = deployer!.deployerLrn
+
+    // Create deployment with prod branch and latest commit
+    const deploymentData = {
+      project,
+      branch: project.prodBranch,
+      environment: Environment.Production,
+      domain: null,
+      commitHash: latestCommit.sha,
+      commitMessage: latestCommit.commit.message,
+    };
+
+    const newDeployment = await this.createDeploymentFromData(project.ownerId!, deploymentData, deployerLrn, applicationRecordId, applicationRecordData);
+
+    const environmentVariablesObj = await this.getEnvVariables(project!.id!);
+    // To set project DNS
+    if (deploymentData.environment === Environment.Production) {
+      // On deleting deployment later, project DNS deployment is also deleted
+      // So publish project DNS deployment first so that ApplicationDeploymentRecord for the same is available when deleting deployment later
+      await this.laconicRegistry.createApplicationDeploymentRequest({
+        deployment: newDeployment,
+        appName: repo,
+        repository: repoUrl,
+        environmentVariables: environmentVariablesObj,
+        dns: `${newDeployment.project.name}`,
+        auctionId: project.auctionId!,
+        lrn: deployerLrn,
+      });
+    }
+
+    const { applicationDeploymentRequestId, applicationDeploymentRequestData } =
+      // Create requests for all the deployers
+      await this.laconicRegistry.createApplicationDeploymentRequest({
+        deployment: newDeployment,
+        appName: repo,
+        repository: repoUrl,
+        auctionId: project.auctionId!,
+        lrn: deployerLrn,
+        environmentVariables: environmentVariablesObj,
+        dns: `${newDeployment.project.name}-${newDeployment.id}`,
+      });
+
+    await this.db.updateDeploymentById(newDeployment.id, {
+      applicationDeploymentRequestId,
+      applicationDeploymentRequestData,
+    });
+
+    return newDeployment;
+  }
+
+  async createDeploymentFromData(
+    userId: string,
+    data: DeepPartial<Deployment>,
+    deployerLrn: string,
+    applicationRecordId: string,
+    applicationRecordData: ApplicationRecord,
+  ): Promise<Deployment> {
     const newDeployment = await this.db.addDeployment({
       project: data.project,
       branch: data.branch,
@@ -593,72 +777,112 @@ export class Service {
       createdBy: Object.assign(new User(), {
         id: userId,
       }),
+      deployer: Object.assign(new Deployer(), {
+        deployerLrn,
+      }),
     });
 
-    log(
-      `Created deployment ${newDeployment.id} and published application record ${applicationRecordId}`,
-    );
-
-    const environmentVariables =
-      await this.db.getEnvironmentVariablesByProjectId(data.project.id!, {
-        environment: Environment.Production,
-      });
-
-    const environmentVariablesObj = environmentVariables.reduce(
-      (acc, env) => {
-        acc[env.key] = env.value;
-
-        return acc;
-      },
-      {} as { [key: string]: string },
-    );
-
-    // To set project DNS
-    if (data.environment === Environment.Production) {
-      // On deleting deployment later, project DNS deployment is also deleted
-      // So publish project DNS deployment first so that ApplicationDeploymentRecord for the same is available when deleting deployment later
-      await this.registry.createApplicationDeploymentRequest({
-        deployment: newDeployment,
-        appName: repo,
-        repository: repoUrl,
-        environmentVariables: environmentVariablesObj,
-        dns: `${newDeployment.project.name}`,
-      });
-    }
-
-    const { applicationDeploymentRequestId, applicationDeploymentRequestData } =
-      await this.registry.createApplicationDeploymentRequest({
-        deployment: newDeployment,
-        appName: repo,
-        repository: repoUrl,
-        environmentVariables: environmentVariablesObj,
-        dns: `${newDeployment.project.name}-${newDeployment.id}`,
-      });
-
-    await this.db.updateDeploymentById(newDeployment.id, {
-      applicationDeploymentRequestId,
-      applicationDeploymentRequestData,
-    });
+    log(`Created deployment ${newDeployment.id}`);
 
     return newDeployment;
   }
 
+  async updateProjectWithDeployer(
+    projectId: string,
+    deployer: Deployer
+  ): Promise<Deployer> {
+    const deploymentProject = await this.db.getProjects({
+      where: { id: projectId },
+      relations: ['deployers']
+    });
+
+    if (!deploymentProject[0].deployers) {
+      deploymentProject[0].deployers = [];
+    }
+
+    deploymentProject[0].deployers.push(deployer);
+
+    await this.db.saveProject(deploymentProject[0]);
+
+    return deployer;
+  }
+
+  async addProjectFromTemplate(
+    user: User,
+    organizationSlug: string,
+    data: AddProjectFromTemplateInput,
+    lrn?: string,
+    auctionParams?: AuctionParams,
+    environmentVariables?: EnvironmentVariables[],
+  ): Promise<Project | undefined> {
+    try {
+      const octokit = await this.getOctokit(user.id);
+
+      const gitRepo = await octokit?.rest.repos.createUsingTemplate({
+        template_owner: data.templateOwner,
+        template_repo: data.templateRepo,
+        owner: data.owner,
+        name: data.name,
+        include_all_branches: false,
+        private: data.isPrivate,
+      });
+
+      if (!gitRepo) {
+        throw new Error('Failed to create repository from template');
+      }
+
+      const createdTemplateRepo = await octokit.rest.repos.get({
+        owner: data.owner,
+        repo: data.name,
+      });
+
+      const prodBranch = createdTemplateRepo.data.default_branch ?? 'main';
+
+      const project = await this.addProject(user, organizationSlug, {
+        name: `${gitRepo.data.owner!.login}-${gitRepo.data.name}`,
+        prodBranch,
+        repository: gitRepo.data.full_name,
+        // TODO: Set selected template
+        template: 'webapp',
+        paymentAddress: data.paymentAddress,
+        txHash: data.txHash
+      }, lrn, auctionParams, environmentVariables);
+
+      if (!project || !project.id) {
+        throw new Error('Failed to create project from template');
+      }
+
+      return project;
+    } catch (error) {
+      console.error('Error creating project from template:', error);
+      throw error;
+    }
+  }
+
   async addProject(
     user: User,
     organizationSlug: string,
     data: DeepPartial<Project>,
+    lrn?: string,
+    auctionParams?: AuctionParams,
+    environmentVariables?: EnvironmentVariables[],
   ): Promise<Project | undefined> {
     const organization = await this.db.getOrganization({
       where: {
         slug: organizationSlug,
       },
     });
+
     if (!organization) {
       throw new Error('Organization does not exist');
     }
 
     const project = await this.db.addProject(user, organization.id, data);
 
+    if (environmentVariables) {
+      await this.addEnvironmentVariables(project.id, environmentVariables);
+    }
+
     const octokit = await this.getOctokit(user.id);
     const [owner, repo] = project.repository.split('/');
 
@@ -671,15 +895,56 @@ export class Service {
       per_page: 1,
     });
 
+    if (auctionParams) {
       // Create deployment with prod branch and latest commit
-    await this.createDeployment(user.id, octokit, {
+      const deploymentData = {
         project,
         branch: project.prodBranch,
         environment: Environment.Production,
         domain: null,
         commitHash: latestCommit.sha,
         commitMessage: latestCommit.commit.message,
-    });
+      };
+      const { applicationDeploymentAuctionId } = await this.laconicRegistry.createApplicationDeploymentAuction(repo, octokit, auctionParams!, deploymentData);
+      await this.updateProject(project.id, { auctionId: applicationDeploymentAuctionId });
+    } else {
+      const deployer = await this.db.getDeployerByLRN(lrn!);
+
+      if (!deployer) {
+        log('Invalid deployer LRN');
+        return;
+      }
+
+      if (deployer.minimumPayment && project.txHash) {
+        const amountToBePaid = deployer?.minimumPayment.replace(/\D/g, '').toString();
+
+        const txResponse = await this.laconicRegistry.sendTokensToAccount(
+          deployer?.paymentAddress!,
+          amountToBePaid
+        );
+
+        const txHash = txResponse.transactionHash;
+        if (txHash) {
+          await this.updateProject(project.id, { txHash });
+          project.txHash = txHash;
+          log('Funds transferrend to deployer');
+        }
+      }
+
+      const deploymentData = {
+        project,
+        branch: project.prodBranch,
+        environment: Environment.Production,
+        domain: null,
+        commitHash: latestCommit.sha,
+        commitMessage: latestCommit.commit.message,
+        deployer
+      };
+
+      const newDeployment = await this.createDeployment(user.id, octokit, deploymentData);
+      // Update project with deployer
+      await this.updateProjectWithDeployer(newDeployment.projectId, newDeployment.deployer);
+    }
 
     await this.createRepoHook(octokit, project);
 
@@ -732,6 +997,9 @@ export class Service {
     );
     const projects = await this.db.getProjects({
       where: { repository: repository.full_name },
+      relations: {
+        deployers: true,
+      }
     });
 
     if (!projects.length) {
@@ -748,8 +1016,16 @@ export class Service {
         branch,
       });
 
+      const deployers = project.deployers;
+      if (!deployers) {
+        log(`No deployer present for project ${project.id}`)
+        return;
+      }
+
+      for (const deployer of deployers) {
         // Create deployment with branch and latest commit in GitHub data
-      await this.createDeployment(project.ownerId, octokit, {
+        await this.createDeployment(project.ownerId, octokit,
+          {
             project,
             branch,
             environment:
@@ -759,7 +1035,10 @@ export class Service {
             domain,
             commitHash: headCommit.id,
             commitMessage: headCommit.message,
-      });
+            deployer: deployer
+          },
+        );
+      }
     }
   }
 
@@ -796,6 +1075,7 @@ export class Service {
       relations: {
         project: true,
         domain: true,
+        deployer: true,
         createdBy: true,
       },
       where: {
@@ -809,7 +1089,13 @@ export class Service {
 
     const octokit = await this.getOctokit(user.id);
 
-    const newDeployment = await this.createDeployment(user.id, octokit, {
+    let newDeployment: Deployment;
+
+    if (oldDeployment.project.auctionId) {
+      newDeployment = await this.createDeploymentFromAuction(oldDeployment.project, oldDeployment.deployer);
+    } else {
+      newDeployment = await this.createDeployment(user.id, octokit,
+        {
           project: oldDeployment.project,
           // TODO: Put isCurrent field in project
           branch: oldDeployment.branch,
@@ -817,7 +1103,10 @@ export class Service {
           domain: oldDeployment.domain,
           commitHash: oldDeployment.commitHash,
           commitMessage: oldDeployment.commitMessage,
-    });
+          deployer: oldDeployment.deployer
+        }
+      );
+    }
 
     return newDeployment;
   }
@@ -863,16 +1152,18 @@ export class Service {
       },
       relations: {
         project: true,
+        deployer: true,
       },
     });
 
     if (deployment && deployment.applicationDeploymentRecordId) {
       // If deployment is current, remove deployment for project subdomain as well
       if (deployment.isCurrent) {
-        const currentDeploymentURL = `https://${deployment.project.subDomain}`;
+        const currentDeploymentURL = `https://${(deployment.project.name).toLowerCase()}.${deployment.deployer.baseDomain}`;
 
+        // TODO: Store the latest DNS deployment record
         const deploymentRecords =
-          await this.registry.getDeploymentRecordsByFilter({
+          await this.laconicRegistry.getDeploymentRecordsByFilter({
             application: deployment.applicationRecordId,
             url: currentDeploymentURL,
           });
@@ -885,14 +1176,24 @@ export class Service {
           return false;
         }
 
-        await this.registry.createApplicationDeploymentRemovalRequest({
-          deploymentId: deploymentRecords[0].id,
+        // Multiple records are fetched, take the latest record
+        const latestRecord = deploymentRecords
+          .sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())[0];
+
+        await this.laconicRegistry.createApplicationDeploymentRemovalRequest({
+          deploymentId: latestRecord.id,
+          deployerLrn: deployment.deployer.deployerLrn,
+          auctionId: deployment.project.auctionId,
+          payment: deployment.project.txHash
         });
       }
 
       const result =
-        await this.registry.createApplicationDeploymentRemovalRequest({
+        await this.laconicRegistry.createApplicationDeploymentRemovalRequest({
           deploymentId: deployment.applicationDeploymentRecordId,
+          deployerLrn: deployment.deployer.deployerLrn,
+          auctionId: deployment.project.auctionId,
+          payment: deployment.project.txHash
         });
 
       await this.db.updateDeploymentById(deployment.id, {
@@ -1027,4 +1328,157 @@ export class Service {
   ): Promise<boolean> {
     return this.db.updateUser(user, data);
   }
+
+  async getEnvVariables(
+    projectId: string,
+  ): Promise<{ [key: string]: string }> {
+    const environmentVariables = await this.db.getEnvironmentVariablesByProjectId(projectId, {
+      environment: Environment.Production,
+    });
+
+    const environmentVariablesObj = environmentVariables.reduce(
+      (acc, env) => {
+        acc[env.key] = env.value;
+        return acc;
+      },
+      {} as { [key: string]: string },
+    );
+
+    return environmentVariablesObj;
+  }
+
+  async getAuctionData(
+    auctionId: string
+  ): Promise<any> {
+    const auctions = await this.laconicRegistry.getAuctionData(auctionId);
+    return auctions[0];
+  }
+
+  async releaseDeployerFundsByProjectId(projectId: string): Promise<boolean> {
+    const project = await this.db.getProjectById(projectId);
+
+    if (!project || !project.auctionId) {
+      log(`Project ${projectId} ${!project ? 'not found' : 'does not have an auction'}`);
+
+      return false;
+    }
+
+    const auction = await this.laconicRegistry.releaseDeployerFunds(project.auctionId);
+
+    if (auction.auction.fundsReleased) {
+      log(`Funds released for auction ${project.auctionId}`);
+      await this.db.updateProjectById(projectId, { fundsReleased: true });
+
+      return true;
+    }
+
+    log(`Error releasing funds for auction ${project.auctionId}`);
+
+    return false;
+  }
+
+  async returnUserFundsByProjectId(projectId: string, winningDeployersPresent: boolean) {
+    const project = await this.db.getProjectById(projectId);
+
+    if (!project || !project.auctionId) {
+      log(`Project ${projectId} ${!project ? 'not found' : 'does not have an auction'}`);
+
+      return false;
+    }
+
+    const auction = await this.getAuctionData(project.auctionId);
+    const totalAuctionPrice = Number(auction.maxPrice.quantity) * auction.numProviders;
+
+    let amountToBeReturned;
+    if (winningDeployersPresent) {
+      amountToBeReturned = totalAuctionPrice - auction.winnerAddresses.length * Number(auction.winnerPrice.quantity);
+    } else {
+      amountToBeReturned = totalAuctionPrice;
+    }
+
+    if (amountToBeReturned !== 0) {
+      await this.laconicRegistry.sendTokensToAccount(
+        project.paymentAddress,
+        amountToBeReturned.toString()
+      );
+    }
+  }
+
+  async getDeployers(): Promise<Deployer[]> {
+    const dbDeployers = await this.db.getDeployers();
+
+    if (dbDeployers.length > 0) {
+      // Call asynchronously to fetch the records from the registry and update the DB
+      this.updateDeployersFromRegistry();
+      return dbDeployers;
+    } else {
+      // Fetch from the registry and populate empty DB
+      return await this.updateDeployersFromRegistry();
+    }
+  }
+
+  async updateDeployersFromRegistry(): Promise<Deployer[]> {
+    const deployerRecords = await this.laconicRegistry.getDeployerRecordsByFilter({});
+    await this.saveDeployersByDeployerRecords(deployerRecords);
+
+    return await this.db.getDeployers();
+  }
+
+  async saveDeployersByDeployerRecords(deployerRecords: DeployerRecord[]): Promise<Deployer[]> {
+    const deployers: Deployer[] = [];
+
+    for (const record of deployerRecords) {
+      if (record.names && record.names.length > 0) {
+        const deployerId = record.id;
+        const deployerLrn = record.names[0];
+        const deployerApiUrl = record.attributes.apiUrl;
+        const minimumPayment = record.attributes.minimumPayment;
+        const paymentAddress = record.attributes.paymentAddress;
+        const baseDomain = deployerApiUrl.substring(deployerApiUrl.indexOf('.') + 1);
+
+        const deployerData = {
+          deployerLrn,
+          deployerId,
+          deployerApiUrl,
+          baseDomain,
+          minimumPayment,
+          paymentAddress
+        };
+
+        // TODO: Update deployers table in a separate job
+        const deployer = await this.db.addDeployer(deployerData);
+        deployers.push(deployer);
+      }
+    }
+
+    return deployers;
+  }
+
+  async getAddress(): Promise<any> {
+    const account = await this.laconicRegistry.getAccount();
+
+    return account.address;
+  }
+
+  async verifyTx(txHash: string, amountSent: string, senderAddress: string): Promise<boolean> {
+    const txResponse = await this.laconicRegistry.getTxResponse(txHash);
+    if (!txResponse) {
+      log('Transaction response not found');
+      return false;
+    }
+
+    const transfer = txResponse.events.find(e => e.type === 'transfer' && e.attributes.some(a => a.key === 'msg_index'));
+    if (!transfer) {
+      log('No transfer event found');
+      return false;
+    }
+
+    const sender = transfer.attributes.find(a => a.key === 'sender')?.value;
+    const recipient = transfer.attributes.find(a => a.key === 'recipient')?.value;
+    const amount = transfer.attributes.find(a => a.key === 'amount')?.value;
+
+    const recipientAddress = await this.getAddress();
+
+    return amount === amountSent && sender === senderAddress && recipient === recipientAddress;
+  }
 }

packages/backend/src/types.ts

@@ -29,6 +29,8 @@ export interface GitPushEventPayload {
 
 export interface AppDeploymentRecordAttributes {
   application: string;
+  auction: string;
+  deployer: string;
   dns: string;
   meta: string;
   name: string;
@@ -41,7 +43,7 @@ export interface AppDeploymentRecordAttributes {
 export interface AppDeploymentRemovalRecordAttributes {
   deployment: string;
   request: string;
-  type: "ApplicationDeploymentRemovalRecord";
+  type: 'ApplicationDeploymentRemovalRecord';
   version: string;
 }
 
@@ -61,3 +63,42 @@ export interface AppDeploymentRecord extends RegistryRecord {
 export interface AppDeploymentRemovalRecord extends RegistryRecord {
   attributes: AppDeploymentRemovalRecordAttributes;
 }
+
+export interface AddProjectFromTemplateInput {
+  templateOwner: string;
+  templateRepo: string;
+  owner: string;
+  name: string;
+  isPrivate: boolean;
+  paymentAddress: string;
+  txHash: string;
+}
+
+export interface AuctionParams {
+  maxPrice: string,
+  numProviders: number,
+}
+
+export interface EnvironmentVariables {
+  environments: string[],
+  key: string,
+  value: string,
+}
+
+export interface DeployerRecord {
+  id: string;
+  names: string[];
+  owners: string[];
+  bondId: string;
+  createTime: string;
+  expiryTime: string;
+  attributes: {
+    apiUrl: string;
+    minimumPayment: string | null;
+    name: string;
+    paymentAddress: string;
+    publicKey: string;
+    type: string;
+    version: string;
+  };
+}

packages/backend/src/utils.ts

@@ -1,10 +1,14 @@
+import assert from 'assert';
+import debug from 'debug';
 import fs from 'fs-extra';
+import { Octokit } from 'octokit';
 import path from 'path';
 import toml from 'toml';
-import debug from 'debug';
 import { DataSource, DeepPartial, EntityTarget, ObjectLiteral } from 'typeorm';
+
 import { Config } from './config';
 import { DEFAULT_CONFIG_FILE_PATH } from './constants';
+import { PackageJSON } from './types';
 
 const log = debug('snowball:utils');
 
@@ -76,3 +80,64 @@ export const loadAndSaveData = async <Entity extends ObjectLiteral>(
 
 export const sleep = async (ms: number): Promise<void> =>
   new Promise((resolve) => setTimeout(resolve, ms));
+
+export const getRepoDetails = async (
+  octokit: Octokit,
+  repository: string,
+  commitHash: string | undefined,
+): Promise<{
+  repo: string;
+  packageJSON: PackageJSON;
+  repoUrl: string;
+}> => {
+  const [owner, repo] = repository.split('/');
+  const { data: packageJSONData } = await octokit.rest.repos.getContent({
+    owner,
+    repo,
+    path: 'package.json',
+    ref: commitHash,
+  });
+
+  if (!packageJSONData) {
+    throw new Error('Package.json file not found');
+  }
+
+  assert(!Array.isArray(packageJSONData) && packageJSONData.type === 'file');
+  const packageJSON: PackageJSON = JSON.parse(atob(packageJSONData.content));
+
+  assert(packageJSON.name, "name field doesn't exist in package.json");
+
+  const repoUrl = (
+    await octokit.rest.repos.get({
+      owner,
+      repo,
+    })
+  ).data.html_url;
+
+  return {
+    repo,
+    packageJSON,
+    repoUrl
+  };
+}
+
+// Wrapper method for registry txs to retry once if 'account sequence mismatch' occurs
+export const registryTransactionWithRetry = async (
+  txMethod: () => Promise<any>
+): Promise<any> => {
+  try {
+    return await txMethod();
+  } catch (error: any) {
+    if (!error.message.includes('account sequence mismatch')) {
+      throw error;
+    }
+
+    console.error(`Transaction failed due to account sequence mismatch. Retrying...`);
+
+    try {
+      return await txMethod();
+    } catch (retryError: any) {
+      throw new Error(`Transaction failed again after retry: ${retryError.message}`);
+    }
+  }
+}

packages/backend/test/delete-db.ts

@@ -2,8 +2,6 @@ import * as fs from 'fs/promises';
 import debug from 'debug';
 
 import { getConfig } from '../src/utils';
-import { Config } from '../src/config';
-import { DEFAULT_CONFIG_FILE_PATH } from '../src/constants';
 
 const log = debug('snowball:delete-database');
 
@@ -13,7 +11,7 @@ const deleteFile = async (filePath: string) => {
 };
 
 const main = async () => {
-  const config = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
+  const config = await getConfig();
 
   deleteFile(config.database.dbPath);
 };

packages/backend/test/fixtures/organizations.json

@@ -1,12 +1,7 @@
 [
   {
     "id": "2379cf1f-a232-4ad2-ae14-4d881131cc26",
-    "name": "Snowball Tools",
-    "slug": "snowball-tools-1"
-  },
-  {
-    "id": "7eb9b3eb-eb74-4b53-b59a-69884c82a7fb",
-    "name": "Laconic",
-    "slug": "laconic-2"
+    "name": "Deploy Tools",
+    "slug": "deploy-tools"
   }
 ]

packages/backend/test/initialize-db.ts

@@ -16,8 +16,6 @@ import {
   getEntities,
   loadAndSaveData
 } from '../src/utils';
-import { Config } from '../src/config';
-import { DEFAULT_CONFIG_FILE_PATH } from '../src/constants';
 
 const log = debug('snowball:initialize-database');
 
@@ -156,7 +154,7 @@ const generateTestData = async (dataSource: DataSource) => {
 };
 
 const main = async () => {
-  const config = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
+  const config = await getConfig();
   const isDbPresent = await checkFileExists(config.database.dbPath);
 
   if (!isDbPresent) {

packages/backend/test/initialize-registry.ts

@@ -1,39 +1,40 @@
 import debug from 'debug';
 
-import { Registry } from '@snowballtools/laconic-sdk';
+import { parseGasAndFees, Registry } from '@cerc-io/registry-sdk';
 
-import { DEFAULT_CONFIG_FILE_PATH } from '../src/constants';
-import { Config } from '../src/config';
 import { getConfig } from '../src/utils';
 
 const log = debug('snowball:initialize-registry');
 
-const DENOM = 'aphoton';
+const DENOM = 'alnt';
 const BOND_AMOUNT = '1000000000';
 
 async function main () {
-  const { registryConfig } = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
+  const { registryConfig } = await getConfig();
 
   // TODO: Get authority names from args
   const authorityNames = ['snowballtools', registryConfig.authority];
 
-  const registry = new Registry(registryConfig.gqlEndpoint, registryConfig.restEndpoint, registryConfig.chainId);
+  const registry = new Registry(registryConfig.gqlEndpoint, registryConfig.restEndpoint, {chainId: registryConfig.chainId});
 
   const bondId = await registry.getNextBondId(registryConfig.privateKey);
   log('bondId:', bondId);
+
+  const fee = parseGasAndFees(registryConfig.fee.gas, registryConfig.fee.fees);
+
   await registry.createBond(
     { denom: DENOM, amount: BOND_AMOUNT },
     registryConfig.privateKey,
-    registryConfig.fee
+    fee
   );
 
   for await (const name of authorityNames) {
-    await registry.reserveAuthority({ name }, registryConfig.privateKey, registryConfig.fee);
+    await registry.reserveAuthority({ name }, registryConfig.privateKey, fee);
     log('Reserved authority name:', name);
     await registry.setAuthorityBond(
       { name, bondId },
       registryConfig.privateKey,
-      registryConfig.fee
+      fee
     );
     log(`Bond ${bondId} set for authority ${name}`);
   }

packages/backend/test/publish-deploy-records.ts

@@ -2,22 +2,20 @@ import debug from 'debug';
 import { DataSource } from 'typeorm';
 import path from 'path';
 
-import { Registry } from '@snowballtools/laconic-sdk';
+import { parseGasAndFees, Registry } from '@cerc-io/registry-sdk';
 
-import { Config } from '../src/config';
-import { DEFAULT_CONFIG_FILE_PATH } from '../src/constants';
 import { getConfig } from '../src/utils';
 import { Deployment, DeploymentStatus, Environment } from '../src/entity/Deployment';
 
 const log = debug('snowball:publish-deploy-records');
 
 async function main() {
-  const { registryConfig, database, misc } = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
+  const { registryConfig, database, misc } = await getConfig();
 
   const registry = new Registry(
     registryConfig.gqlEndpoint,
     registryConfig.restEndpoint,
-    registryConfig.chainId
+    { chainId: registryConfig.chainId }
   );
 
   const dataSource = new DataSource({
@@ -40,7 +38,7 @@ async function main () {
   });
 
   for await (const deployment of deployments) {
-    const url = `https://${deployment.project.name}-${deployment.id}.${misc.projectDomain}`;
+    const url = `https://${(deployment.project.name).toLowerCase()}-${deployment.id}.${deployment.deployer.baseDomain}`;
 
     const applicationDeploymentRecord = {
       type: 'ApplicationDeploymentRecord',
@@ -61,6 +59,8 @@ async function main () {
       url
     };
 
+    const fee = parseGasAndFees(registryConfig.fee.gas, registryConfig.fee.fees);
+
     const result = await registry.setRecord(
       {
         privateKey: registryConfig.privateKey,
@@ -68,12 +68,12 @@ async function main () {
         bondId: registryConfig.bondId
       },
       '',
-      registryConfig.fee
+      fee
     );
 
     // Remove deployment for project subdomain if deployment is for production environment
     if (deployment.environment === Environment.Production) {
-      applicationDeploymentRecord.url = `https://${deployment.project.subDomain}`
+      applicationDeploymentRecord.url = `https://${deployment.project.name}.${deployment.deployer.baseDomain}`;
 
       await registry.setRecord(
         {
@@ -82,12 +82,12 @@ async function main () {
           bondId: registryConfig.bondId
         },
         '',
-        registryConfig.fee
+        fee
       );
     }
 
     log('Application deployment record data:', applicationDeploymentRecord);
-    log(`Application deployment record published: ${result.data.id}`);
+    log(`Application deployment record published: ${result.id}`);
   }
 }
 

packages/backend/test/publish-deployment-removal-records.ts

@@ -2,22 +2,20 @@ import debug from 'debug';
 import { DataSource } from 'typeorm';
 import path from 'path';
 
-import { Registry } from '@cerc-io/laconic-sdk';
+import { parseGasAndFees, Registry } from '@cerc-io/registry-sdk';
 
-import { Config } from '../src/config';
-import { DEFAULT_CONFIG_FILE_PATH } from '../src/constants';
 import { getConfig } from '../src/utils';
 import { Deployment, DeploymentStatus } from '../src/entity/Deployment';
 
 const log = debug('snowball:publish-deployment-removal-records');
 
 async function main () {
-  const { registryConfig, database, misc } = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
+  const { registryConfig, database } = await getConfig();
 
   const registry = new Registry(
     registryConfig.gqlEndpoint,
     registryConfig.restEndpoint,
-    registryConfig.chainId
+    { chainId: registryConfig.chainId }
   );
 
   const dataSource = new DataSource({
@@ -47,6 +45,8 @@ async function main () {
       request: deployment.applicationDeploymentRemovalRequestId,
     }
 
+    const fee = parseGasAndFees(registryConfig.fee.gas, registryConfig.fee.fees);
+
     const result = await registry.setRecord(
       {
         privateKey: registryConfig.privateKey,
@@ -54,11 +54,11 @@ async function main () {
         bondId: registryConfig.bondId
       },
       '',
-      registryConfig.fee
+      fee
     );
 
     log('Application deployment removal record data:', applicationDeploymentRemovalRecord);
-    log(`Application deployment removal record published: ${result.data.id}`);
+    log(`Application deployment removal record published: ${result.id}`);
   }
 }
 

packages/deployer/.env.example

@@ -0,0 +1,3 @@
+REGISTRY_BOND_ID=
+DEPLOYER_LRN=
+AUTHORITY=

packages/deployer/.gitignore

@@ -0,0 +1 @@
+records/*.yml

packages/deployer/README.md

@@ -1,9 +1,11 @@
 # deployer
 
 - Install dependencies
+
   ```bash
   yarn
   ```
+
   ```bash
   brew install jq # if you do not have jq installed already
   ```
@@ -12,13 +14,13 @@
 
   - To deploy frontend app to `dashboard.staging.apps.snowballtools.com`
 
-    ```
+    ```bash
     ./deploy-frontend.staging.sh
     ```
 
   - To deploy frontend app to `dashboard.apps.snowballtools.com`
 
-    ```
+    ```bash
     ./deploy-frontend.sh
     ```
 
@@ -27,6 +29,7 @@
 ## Notes
 
 - Any config env can be updated in [records/application-deployment-request.yml](records/application-deployment-request.yml)
+
   ```yml
   record:
     ...
@@ -35,6 +38,7 @@
         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
@@ -44,14 +48,17 @@
 
 - If deployment fails due to low bond balance
   - Check balances
+
     ```bash
     # Account balance
-    yarn laconic cns account get
+    yarn laconic registry account get
 
     # Bond balance
-    yarn laconic cns bond get --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32
+    yarn laconic registry bond get --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32
     ```
+
   - Command to refill bond
+
     ```bash
-    yarn laconic cns bond refill --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32 --type aphoton --quantity 10000000
+    yarn laconic registry bond refill --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32 --type alnt --quantity 10000000
     ```

packages/deployer/config.staging.yml

@@ -1,9 +1,10 @@
 services:
-  cns:
+  registry:
     restEndpoint: 'http://console.laconic.com:1317'
     gqlEndpoint: 'http://console.laconic.com:9473/api'
     userKey: 87d00f66a73e2ca428adeb49ba9164d0ad9a87edc60e33d46ad3031b9c5701fe
     bondId: 89c75c7bc5759861d10285aff6f9e7227d6855e446b77ad5d8324822dfec7deb
     chainId: laconic_9000-1
-    gas: 1200000
-    fees: 200000aphoton
+    gas:
+    fees:
+    gasPrice: 1

packages/deployer/config.yml

@@ -1,9 +1,8 @@
 services:
-  cns:
-    restEndpoint: http://console.laconic.com:1317
-    gqlEndpoint: http://console.laconic.com:9473/api
-    userKey: 489c9dd3931c2a2d4dd77973302dc5eb01e2a49552f9d932c58d9da823512311
-    bondId: 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32
-    chainId: laconic_9000-1
-    gas: 1200000
-    fees: 200000aphoton
+  registry:
+    rpcEndpoint: https://laconicd-sapo.laconic.com
+    gqlEndpoint: https://laconicd-sapo.laconic.com/api
+    userKey:
+    bondId:
+    chainId: laconic-testnet-2
+    gasPrice: 0.001alnt

packages/deployer/deploy-frontend.sh

@@ -1,10 +1,18 @@
 #!/bin/bash
 
+source .env
+echo "Using REGISTRY_BOND_ID: $REGISTRY_BOND_ID"
+echo "Using DEPLOYER_LRN: $DEPLOYER_LRN"
+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)
@@ -13,40 +21,17 @@ PACKAGE_VERSION=$(jq -r '.version' ../frontend/package.json)
 CURRENT_DATE_TIME=$(date -u)
 
 CONFIG_FILE=config.yml
-REGISTRY_BOND_ID="99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32"
 
 # 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=$(yarn --silent laconic -c $CONFIG_FILE cns record list --type ApplicationRecord --all --name "snowballtools-base-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=$(yarn --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}')
 
 if [ -z "$NEW_APPLICATION_VERSION" ] || [ "1" == "$NEW_APPLICATION_VERSION" ]; then
   # Set application-record version if no previous records were found
   NEW_APPLICATION_VERSION=0.0.1
 fi
 
-# Generate application-deployment-request.yml
-cat > ./records/application-deployment-request.yml <<EOF
-record:
-  type: ApplicationDeploymentRequest
-  version: '1.0.0'
-  name: snowballtools-base-frontend@$PACKAGE_VERSION
-  application: crn://snowballtools/applications/snowballtools-base-frontend@$PACKAGE_VERSION
-  dns: dashboard
-  config:
-    env:
-      LACONIC_HOSTED_CONFIG_server_url: https://snowballtools-base-api-001.apps.snowballtools.com
-      LACONIC_HOSTED_CONFIG_github_clientid: b7c63b235ca1dd5639ab
-      LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools-platform/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools-platform/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools-platform/image-upload-pwa-example
-      LACONIC_HOSTED_CONFIG_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
-  meta:
-    note: Added by Snowball @ $CURRENT_DATE_TIME
-    repository: "$REPO_URL"
-    repository_ref: $LATEST_HASH
-EOF
-
 # Generate application-record.yml with incremented version
 cat >./records/application-record.yml <<EOF
 record:
@@ -55,16 +40,16 @@ record:
   repository_ref: $LATEST_HASH
   repository: ["$REPO_URL"]
   app_type: webapp
-  name: snowballtools-base-frontend
+  name: deploy-frontend
   app_version: $PACKAGE_VERSION
 EOF
 
-echo "Files generated successfully."
+echo "Files generated successfully"
 
 RECORD_FILE=records/application-record.yml
 
 # Publish ApplicationRecord
-publish_response=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE)
+publish_response=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $RECORD_FILE)
 rc=$?
 if [ $rc -ne 0 ]; then
   echo "FATAL: Failed to publish record"
@@ -75,17 +60,17 @@ echo "ApplicationRecord published"
 echo $RECORD_ID
 
 # Set name to record
-REGISTRY_APP_CRN="crn://snowballtools/applications/snowballtools-base-frontend"
+REGISTRY_APP_LRN="lrn://$AUTHORITY/applications/deploy-frontend"
 
 sleep 2
-yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${PACKAGE_VERSION}" "$RECORD_ID"
+yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${PACKAGE_VERSION}" "$RECORD_ID"
 rc=$?
 if [ $rc -ne 0 ]; then
-  echo "FATAL: Failed to set name: $REGISTRY_APP_CRN@${PACKAGE_VERSION}"
+  echo "FATAL: Failed to set name: $REGISTRY_APP_LRN@${PACKAGE_VERSION}"
   exit $rc
 fi
 sleep 2
-yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${LATEST_HASH}" "$RECORD_ID"
+yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${LATEST_HASH}" "$RECORD_ID"
 rc=$?
 if [ $rc -ne 0 ]; then
   echo "FATAL: Failed to set hash"
@@ -93,16 +78,16 @@ if [ $rc -ne 0 ]; then
 fi
 sleep 2
 # Set name if latest release
-yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN" "$RECORD_ID"
+yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN" "$RECORD_ID"
 rc=$?
 if [ $rc -ne 0 ]; then
   echo "FATAL: Failed to set release"
   exit $rc
 fi
-echo "$REGISTRY_APP_CRN set for ApplicationRecord"
+echo "$REGISTRY_APP_LRN set for ApplicationRecord"
 
-# Check if record found for REGISTRY_APP_CRN
-query_response=$(yarn --silent laconic -c $CONFIG_FILE cns name resolve "$REGISTRY_APP_CRN")
+# Check if record found for REGISTRY_APP_LRN
+query_response=$(yarn --silent laconic -c $CONFIG_FILE registry name resolve "$REGISTRY_APP_LRN")
 rc=$?
 if [ $rc -ne 0 ]; then
   echo "FATAL: Failed to query name"
@@ -110,14 +95,58 @@ if [ $rc -ne 0 ]; then
 fi
 APP_RECORD=$(echo $query_response | jq '.[0]')
 if [ -z "$APP_RECORD" ] || [ "null" == "$APP_RECORD" ]; then
-  echo "No record found for $REGISTRY_APP_CRN."
+  echo "No record found for $REGISTRY_APP_LRN."
   exit 1
 fi
 
+# Get payment address for deployer
+paymentAddress=$(yarn --silent laconic -c config.yml registry name resolve "$DEPLOYER_LRN" | jq -r '.[0].attributes.paymentAddress')
+paymentAmount=$(yarn --silent laconic -c config.yml registry name resolve "$DEPLOYER_LRN" | jq -r '.[0].attributes.minimumPayment' | sed 's/alnt//g')
+
+echo "Paying address: $paymentAddress with amount $paymentAmount..."
+
+# Pay deployer if paymentAmount is not null
+if [[ -n "$paymentAmount" && "$paymentAmount" != "null" ]]; then
+  payment=$(yarn --silent laconic -c config.yml registry tokens send --address "$paymentAddress" --type alnt --quantity "$paymentAmount")
+
+  # Extract the transaction hash
+  txHash=$(echo "$payment" | jq -r '.tx.hash')
+  echo "Paid deployer with txHash as $txHash"
+
+else
+  echo "Payment amount is null; skipping payment."
+fi
+
+# Generate application-deployment-request.yml
+cat >./records/application-deployment-request.yml <<EOF
+record:
+  type: ApplicationDeploymentRequest
+  version: '1.0.0'
+  name: deploy-frontend@$PACKAGE_VERSION
+  application: lrn://$AUTHORITY/applications/deploy-frontend@$PACKAGE_VERSION
+  deployer: $DEPLOYER_LRN
+  dns: deploy.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_wallet_connect_id: 63cad7ba97391f63652161f484670e15
+      LACONIC_HOSTED_CONFIG_laconicd_chain_id: laconic-testnet-2
+      LACONIC_HOSTED_CONFIG_wallet_iframe_url: https://wallet.laconic.com
+  meta:
+    note: Added @ $CURRENT_DATE_TIME
+    repository: "$REPO_URL"
+    repository_ref: $LATEST_HASH
+  payment: $txHash
+EOF
+
 RECORD_FILE=records/application-deployment-request.yml
 
 sleep 2
-deployment_response=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE)
+deployment_response=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $RECORD_FILE)
 if [ $rc -ne 0 ]; then
   echo "FATAL: Failed to query deployment request"
   exit $rc

packages/deployer/deploy-frontend.staging.sh

@@ -1,133 +0,0 @@
-#!/bin/bash
-
-# 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}')
-
-# Extract version from ../frontend/package.json
-PACKAGE_VERSION=$(jq -r '.version' ../frontend/package.json)
-
-# Current date and time for note
-CURRENT_DATE_TIME=$(date -u)
-
-CONFIG_FILE=config.staging.yml
-REGISTRY_BOND_ID="098c906850b87412f02200e41f449bc79e055eab77acfef32c0b22443bb46661"
-
-# 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=$(yarn --silent laconic -c $CONFIG_FILE cns record list --type ApplicationRecord --all --name "staging-snowballtools-base-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
-  NEW_APPLICATION_VERSION=0.0.1
-fi
-
-# Generate application-deployment-request.yml
-cat > ./staging-records/application-deployment-request.yml <<EOF
-record:
-  type: ApplicationDeploymentRequest
-  version: '1.0.0'
-  name: staging-snowballtools-base-frontend@$PACKAGE_VERSION
-  application: crn://staging-snowballtools/applications/staging-snowballtools-base-frontend@$PACKAGE_VERSION
-  dns: dashboard.staging.apps.snowballtools.com
-  config:
-    env:
-      LACONIC_HOSTED_CONFIG_server_url: https://snowballtools-base-api.staging.apps.snowballtools.com
-      LACONIC_HOSTED_CONFIG_github_clientid: 905c09553f527d2cdff5
-      LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools/image-upload-pwa-example
-      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools-platform/image-upload-pwa-example
-      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
-      LACONIC_HOSTED_CONFIG_bugsnag_api_key: 8c480cd5386079f9dd44f9581264a073
-      LACONIC_HOSTED_CONFIG_passkey_wallet_rpid: dashboard.staging.apps.snowballtools.com
-      LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com
-      LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
-  meta:
-    note: Added by Snowball @ $CURRENT_DATE_TIME
-    repository: "$REPO_URL"
-    repository_ref: $LATEST_HASH
-EOF
-
-# Generate application-record.yml with incremented version
-cat > ./staging-records/application-record.yml <<EOF
-record:
-  type: ApplicationRecord
-  version: $NEW_APPLICATION_VERSION
-  repository_ref: $LATEST_HASH
-  repository: ["$REPO_URL"]
-  app_type: webapp
-  name: staging-snowballtools-base-frontend
-  app_version: $PACKAGE_VERSION
-EOF
-
-echo "Files generated successfully."
-
-RECORD_FILE=staging-records/application-record.yml
-
-# Publish ApplicationRecord
-publish_response=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE)
-rc=$?
-if [ $rc -ne 0 ]; then
-  echo "FATAL: Failed to publish record"
-  exit $rc
-fi
-RECORD_ID=$(echo $publish_response | jq -r '.id')
-echo "ApplicationRecord published"
-echo $RECORD_ID
-
-# Set name to record
-REGISTRY_APP_CRN="crn://staging-snowballtools/applications/staging-snowballtools-base-frontend"
-
-sleep 2
-yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${PACKAGE_VERSION}" "$RECORD_ID"
-rc=$?
-if [ $rc -ne 0 ]; then
-  echo "FATAL: Failed to set name: $REGISTRY_APP_CRN@${PACKAGE_VERSION}"
-  exit $rc
-fi
-sleep 2
-yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${LATEST_HASH}" "$RECORD_ID"
-rc=$?
-if [ $rc -ne 0 ]; then
-  echo "FATAL: Failed to set hash"
-  exit $rc
-fi
-sleep 2
-# Set name if latest release
-yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN" "$RECORD_ID"
-rc=$?
-if [ $rc -ne 0 ]; then
-  echo "FATAL: Failed to set release"
-  exit $rc
-fi
-echo "$REGISTRY_APP_CRN set for ApplicationRecord"
-
-# Check if record found for REGISTRY_APP_CRN
-query_response=$(yarn --silent laconic -c $CONFIG_FILE cns name resolve "$REGISTRY_APP_CRN")
-rc=$?
-if [ $rc -ne 0 ]; then
-  echo "FATAL: Failed to query name"
-  exit $rc
-fi
-APP_RECORD=$(echo $query_response | jq '.[0]')
-if [ -z "$APP_RECORD" ] || [ "null" == "$APP_RECORD" ]; then
-  echo "No record found for $REGISTRY_APP_CRN."
-  exit 1
-fi
-
-RECORD_FILE=staging-records/application-deployment-request.yml
-
-sleep 2
-deployment_response=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE)
-if [ $rc -ne 0 ]; then
-  echo "FATAL: Failed to query deployment request"
-  exit $rc
-fi
-DEPLOYMENT_REQUEST_ID=$(echo $deployment_response | jq -r '.id')
-echo "ApplicationDeploymentRequest published"
-echo $DEPLOYMENT_REQUEST_ID

packages/deployer/deploy-frontend.vaasl.sh

@@ -0,0 +1,149 @@
+#!/bin/bash
+
+source .env
+echo "Using REGISTRY_BOND_ID: $REGISTRY_BOND_ID"
+echo "Using DEPLOYER_LRN: $DEPLOYER_LRN"
+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}')
+
+# Extract version from ../frontend/package.json
+PACKAGE_VERSION=$(jq -r '.version' ../frontend/package.json)
+
+# Current date and time for note
+CURRENT_DATE_TIME=$(date -u)
+
+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=$(yarn --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}')
+
+if [ -z "$NEW_APPLICATION_VERSION" ] || [ "1" == "$NEW_APPLICATION_VERSION" ]; then
+  # Set application-record version if no previous records were found
+  NEW_APPLICATION_VERSION=0.0.1
+fi
+
+# Generate application-record.yml with incremented version
+cat >./records/application-record.yml <<EOF
+record:
+  type: ApplicationRecord
+  version: $NEW_APPLICATION_VERSION
+  repository_ref: $LATEST_HASH
+  repository: ["$REPO_URL"]
+  app_type: webapp
+  name: deploy-frontend
+  app_version: $PACKAGE_VERSION
+EOF
+
+echo "Files generated successfully"
+
+RECORD_FILE=records/application-record.yml
+
+# Publish ApplicationRecord
+publish_response=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $RECORD_FILE)
+rc=$?
+if [ $rc -ne 0 ]; then
+  echo "FATAL: Failed to publish record"
+  exit $rc
+fi
+RECORD_ID=$(echo $publish_response | jq -r '.id')
+echo "ApplicationRecord published"
+echo $RECORD_ID
+
+# Set name to record
+REGISTRY_APP_LRN="lrn://$AUTHORITY/applications/deploy-frontend"
+
+sleep 2
+yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${PACKAGE_VERSION}" "$RECORD_ID"
+rc=$?
+if [ $rc -ne 0 ]; then
+  echo "FATAL: Failed to set name: $REGISTRY_APP_LRN@${PACKAGE_VERSION}"
+  exit $rc
+fi
+sleep 2
+yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${LATEST_HASH}" "$RECORD_ID"
+rc=$?
+if [ $rc -ne 0 ]; then
+  echo "FATAL: Failed to set hash"
+  exit $rc
+fi
+sleep 2
+# Set name if latest release
+yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN" "$RECORD_ID"
+rc=$?
+if [ $rc -ne 0 ]; then
+  echo "FATAL: Failed to set release"
+  exit $rc
+fi
+echo "$REGISTRY_APP_LRN set for ApplicationRecord"
+
+# Check if record found for REGISTRY_APP_LRN
+query_response=$(yarn --silent laconic -c $CONFIG_FILE registry name resolve "$REGISTRY_APP_LRN")
+rc=$?
+if [ $rc -ne 0 ]; then
+  echo "FATAL: Failed to query name"
+  exit $rc
+fi
+APP_RECORD=$(echo $query_response | jq '.[0]')
+if [ -z "$APP_RECORD" ] || [ "null" == "$APP_RECORD" ]; then
+  echo "No record found for $REGISTRY_APP_LRN."
+  exit 1
+fi
+
+# Get payment address for deployer
+paymentAddress=$(yarn --silent laconic -c config.yml registry name resolve "$DEPLOYER_LRN" | jq -r '.[0].attributes.paymentAddress')
+paymentAmount=$(yarn --silent laconic -c config.yml registry name resolve "$DEPLOYER_LRN" | jq -r '.[0].attributes.minimumPayment' | sed 's/alnt//g')
+# Pay deployer if paymentAmount is not null
+if [[ -n "$paymentAmount" && "$paymentAmount" != "null" ]]; then
+  payment=$(yarn --silent laconic -c config.yml registry tokens send --address "$paymentAddress" --type alnt --quantity "$paymentAmount")
+
+  # Extract the transaction hash
+  txHash=$(echo "$payment" | jq -r '.tx.hash')
+  echo "Paid deployer with txHash as $txHash"
+
+else
+  echo "Payment amount is null; skipping payment."
+fi
+
+# Generate application-deployment-request.yml
+cat >./records/application-deployment-request.yml <<EOF
+record:
+  type: ApplicationDeploymentRequest
+  version: '1.0.0'
+  name: deploy-frontend@$PACKAGE_VERSION
+  application: lrn://$AUTHORITY/applications/deploy-frontend@$PACKAGE_VERSION
+  deployer: $DEPLOYER_LRN
+  dns: deploy
+  config:
+    env:
+      LACONIC_HOSTED_CONFIG_server_url: https://deploy-backend.apps.vaasl.io
+      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:
+    note: Added by Snowball @ $CURRENT_DATE_TIME
+    repository: "$REPO_URL"
+    repository_ref: $LATEST_HASH
+  payment: $txHash
+EOF
+
+RECORD_FILE=records/application-deployment-request.yml
+
+sleep 2
+deployment_response=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $RECORD_FILE)
+if [ $rc -ne 0 ]; then
+  echo "FATAL: Failed to query deployment request"
+  exit $rc
+fi
+DEPLOYMENT_REQUEST_ID=$(echo $deployment_response | jq -r '.id')
+echo "ApplicationDeploymentRequest published"
+echo $DEPLOYMENT_REQUEST_ID

packages/deployer/package.json

@@ -4,6 +4,6 @@
   "main": "index.js",
   "private": true,
   "devDependencies": {
-    "@snowballtools/laconic-registry-cli": "^0.1.13"
+    "@cerc-io/laconic-registry-cli": "^0.2.9"
   }
 }

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

@@ -1,18 +0,0 @@
-record:
-  type: ApplicationDeploymentRequest
-  version: '1.0.0'
-  name: snowballtools-base-frontend@0.1.8
-  application: crn://snowballtools/applications/snowballtools-base-frontend@0.1.8
-  dns: dashboard
-  config:
-    env:
-      LACONIC_HOSTED_CONFIG_app_server_url: https://snowballtools-base-api-001.apps.snowballtools.com
-      LACONIC_HOSTED_CONFIG_app_github_clientid: b7c63b235ca1dd5639ab
-      LACONIC_HOSTED_CONFIG_app_github_templaterepo: snowball-tools-platform/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_app_github_pwa_templaterepo: snowball-tools-platform/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_app_github_image_upload_templaterepo: snowball-tools-platform/image-upload-pwa-example
-      LACONIC_HOSTED_CONFIG_app_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
-  meta:
-    note: Added by Snowball @ Thu Apr  4 14:49:41 UTC 2024
-    repository: "https://git.vdb.to/cerc-io/snowballtools-base"
-    repository_ref: 351db16336eacc3e1f9119ceb8d1282b8e27a27e

packages/deployer/records/application-record.yml

@@ -1,8 +0,0 @@
-record:
-  type: ApplicationRecord
-  version: 0.0.2
-  repository_ref: 351db16336eacc3e1f9119ceb8d1282b8e27a27e
-  repository: ["https://git.vdb.to/cerc-io/snowballtools-base"]
-  app_type: webapp
-  name: snowballtools-base-frontend
-  app_version: 0.1.8

packages/deployer/remove-deployment.sh

@@ -0,0 +1,56 @@
+#!/bin/bash
+
+source .env
+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

@@ -1,24 +0,0 @@
-record:
-  type: ApplicationDeploymentRequest
-  version: '1.0.0'
-  name: staging-snowballtools-base-frontend@0.0.0
-  application: crn://staging-snowballtools/applications/staging-snowballtools-base-frontend@0.0.0
-  dns: dashboard.staging.apps.snowballtools.com
-  config:
-    env:
-      LACONIC_HOSTED_CONFIG_server_url: https://snowballtools-base-api.staging.apps.snowballtools.com
-      LACONIC_HOSTED_CONFIG_github_clientid: 905c09553f527d2cdff5
-      LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools/image-upload-pwa-example
-      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools-platform/image-upload-pwa-example
-      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
-      LACONIC_HOSTED_CONFIG_bugsnag_api_key: 8c480cd5386079f9dd44f9581264a073
-      LACONIC_HOSTED_CONFIG_passkey_wallet_rpid: localhost
-      LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com/
-      LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
-  meta:
-    note: Added by Snowball @ Tuesday 21 May 2024 06:17:23 AM UTC
-    repository: "https://git.vdb.to/cerc-io/snowballtools-base"
-    repository_ref: 8488cfab8353321ed05c4234bf1b914c9ad3aa99

packages/deployer/staging-records/application-record.yml

@@ -1,8 +0,0 @@
-record:
-  type: ApplicationRecord
-  version: 0.0.2
-  repository_ref: 8488cfab8353321ed05c4234bf1b914c9ad3aa99
-  repository: ["https://git.vdb.to/cerc-io/snowballtools-base"]
-  app_type: webapp
-  name: staging-snowballtools-base-frontend
-  app_version: 0.0.0

packages/deployer/test/README.md

@@ -2,7 +2,7 @@
 
 Check if the live web app deployer is in a working state
 
-- Web app repo used: https://github.com/snowball-tools-platform/test-progressive-web-app (main branch)
+- Web app repo used: <https://github.com/snowball-tools/test-progressive-web-app> (main branch)
 - Config used: [../config.yml](../config.yml)
 - The script [test-webapp-deployment-undeployment.sh](./test-webapp-deployment-undeployment.sh) performs the following:
   - Create / update [`ApplicationRecord`](./records/application-record.yml) and [`ApplicationDeploymentRequest`](./records/application-deployment-request.yml) records with latest meta data from the repo

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

@@ -1,6 +1,6 @@
 record:
   type: ApplicationDeploymentRequest
-  version: '1.0.0'
+  version: "1.0.0"
   name: deployment-test-app@0.1.24
   application: crn://snowballtools/applications/deployment-test-app@0.1.24
   dns: deployment-ci-test
@@ -11,5 +11,5 @@ record:
       CERC_WEBAPP_DEBUG: 0
   meta:
     note: Deployment test @ Thu 11 Apr 2024 07:29:19 AM UTC
-    repository: "https://github.com/snowball-tools-platform/test-progressive-web-app"
+    repository: "https://github.com/snowball-tools/test-progressive-web-app"
     repository_ref: 05819619487a0d2dbc5453b6d1ccff3044c0dd26

packages/deployer/test/records/application-record.yml

@@ -2,7 +2,7 @@ record:
   type: ApplicationRecord
   version: 0.0.1
   repository_ref: 05819619487a0d2dbc5453b6d1ccff3044c0dd26
-  repository: ["https://github.com/snowball-tools-platform/test-progressive-web-app"]
+  repository: ["https://github.com/snowball-tools/test-progressive-web-app"]
   app_type: webapp
   name: deployment-test-app
   app_version: 0.1.24

packages/deployer/test/test-webapp-deployment-undeployment.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Repository URL
-REPO_URL="https://github.com/snowball-tools-platform/test-progressive-web-app"
+REPO_URL="https://github.com/snowball-tools/test-progressive-web-app"
 
 # Get the latest commit hash from the repository
 LATEST_HASH=$(git ls-remote $REPO_URL HEAD | awk '{print $1}')
@@ -22,7 +22,7 @@ REGISTRY_BOND_ID="99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be
 APP_NAME=deployment-test-app
 
 # Get latest version from registry and increment application-record version
-NEW_APPLICATION_VERSION=$(yarn --silent laconic -c $CONFIG_FILE cns record list --type ApplicationRecord --all --name "$APP_NAME" 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=$(yarn --silent laconic -c $CONFIG_FILE registry record list --type ApplicationRecord --all --name "$APP_NAME" 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
@@ -51,7 +51,7 @@ record:
   type: ApplicationDeploymentRequest
   version: '1.0.0'
   name: $APP_NAME@$PACKAGE_VERSION
-  application: crn://snowballtools/applications/$APP_NAME@$PACKAGE_VERSION
+  application: lrn://snowballtools/applications/$APP_NAME@$PACKAGE_VERSION
   dns: deployment-ci-test
   config:
     env:
@@ -67,31 +67,31 @@ EOF
 echo "Record files generated successfully."
 
 # Publish ApplicationRecord
-RECORD_ID=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE | jq -r '.id')
+RECORD_ID=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $RECORD_FILE | jq -r '.id')
 echo "ApplicationRecord published"
 echo $RECORD_ID
 
 # Set name to record
-REGISTRY_APP_CRN="crn://snowballtools/applications/$APP_NAME"
+REGISTRY_APP_LRN="lrn://snowballtools/applications/$APP_NAME"
 
 sleep 2
-yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${PACKAGE_VERSION}" "$RECORD_ID"
+yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${PACKAGE_VERSION}" "$RECORD_ID"
 sleep 2
-yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${LATEST_HASH}" "$RECORD_ID"
+yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${LATEST_HASH}" "$RECORD_ID"
 sleep 2
 # Set name if latest release
-yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN" "$RECORD_ID"
-echo "$REGISTRY_APP_CRN set for ApplicationRecord"
+yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN" "$RECORD_ID"
+echo "$REGISTRY_APP_LRN set for ApplicationRecord"
 
-# Check if record exists for REGISTRY_APP_CRN
-APP_RECORD=$(yarn --silent laconic -c $CONFIG_FILE cns name resolve "$REGISTRY_APP_CRN" | jq '.[0]')
+# Check if record exists for REGISTRY_APP_LRN
+APP_RECORD=$(yarn --silent laconic -c $CONFIG_FILE registry name resolve "$REGISTRY_APP_LRN" | jq '.[0]')
 if [ -z "$APP_RECORD" ] || [ "null" == "$APP_RECORD" ]; then
-  echo "No record found for $REGISTRY_APP_CRN."
+  echo "No record found for $REGISTRY_APP_LRN."
   exit 1
 fi
 
 sleep 2
-DEPLOYMENT_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $REQUEST_RECORD_FILE | jq -r '.id')
+DEPLOYMENT_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $REQUEST_RECORD_FILE | jq -r '.id')
 echo "ApplicationDeploymentRequest published"
 echo $DEPLOYMENT_REQUEST_ID
 
@@ -102,7 +102,7 @@ MAX_RETRIES=20
 # Check that a ApplicationDeploymentRecord is published
 retry_count=0
 while true; do
-  deployment_records_response=$(yarn --silent laconic -c $CONFIG_FILE cns record list --type ApplicationDeploymentRecord --all --name "$APP_NAME" request $DEPLOYMENT_REQUEST_ID)
+  deployment_records_response=$(yarn --silent laconic -c $CONFIG_FILE registry record list --type ApplicationDeploymentRecord --all --name "$APP_NAME" request $DEPLOYMENT_REQUEST_ID)
   len_deployment_records=$(echo $deployment_records_response | jq 'length')
 
   # Check if number of records returned is 0
@@ -140,7 +140,7 @@ fetched_url=$(echo $deployment_records_response | jq -r '.[0].attributes.url')
 
 retry_count=0
 max_retries=10
-retry_interval=5
+retry_interval=10
 while true; do
   url_response=$(curl -s -o /dev/null -I -w "%{http_code}" $fetched_url)
   if [ "$url_response" = "200" ]; then
@@ -170,14 +170,14 @@ record:
 EOF
 
 sleep 2
-REMOVAL_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $REMOVAL_REQUEST_RECORD_FILE | jq -r '.id')
+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
 
 # Check that an ApplicationDeploymentRemovalRecord is published
 retry_count=0
 while true; do
-  removal_records_response=$(yarn --silent laconic -c $CONFIG_FILE cns record list --type ApplicationDeploymentRemovalRecord --all request $REMOVAL_REQUEST_ID)
+  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

packages/frontend/.env.example

@@ -3,15 +3,16 @@ 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=
 
 VITE_LIT_RELAY_API_KEY=
 
-VITE_ALCHEMY_API_KEY=
-
 VITE_BUGSNAG_API_KEY=
 
 VITE_PASSKEY_WALLET_RPID=
 VITE_TURNKEY_API_BASE_URL=
-VITE_TURNKEY_ORGANIZATION_ID=
+
+VITE_LACONICD_CHAIN_ID=
+VITE_WALLET_IFRAME_URL=

packages/frontend/.storybook/main.ts

@@ -9,6 +9,7 @@ import { join, dirname } from 'path';
 function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
 }
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -26,6 +27,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../public'],
 };
 
 export default config;

packages/frontend/README.md

@@ -1,30 +1,63 @@
-# React + TypeScript + Vite
+# frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is a [vite](https://vitejs.dev/) [react](https://reactjs.org/) [nextjs](https://nextjs.org/) project in a [yarn workspace](https://yarnpkg.com/features/workspaces).
 
-Currently, two official plugins are available:
+## Getting Started
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+### Install dependencies
 
-## Expanding the ESLint configuration
+In the root of the project, run:
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-};
+```zsh
+yarn
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+### Build backend
+
+```zsh
+yarn build --ignore frontend
+```
+
+### Environment variables
+
+#### Local
+
+Copy the `.env.example` file to `.env`:
+
+```zsh
+cp .env.example .env
+```
+
+#### Staging environment variables
+
+Change in [deployer/deploy-frontend.staging.sh](/packages/deployer/deploy-frontend.staging.sh)
+
+#### Production environment variables
+
+Change in [deployer/deploy-frontend.sh](/packages/deployer/deploy-frontend.sh)
+
+### Run development server
+
+```zsh
+yarn dev
+```
+
+## Deployment
+
+From the root of the project,
+
+### Staging
+
+```zsh
+cd packages/deployer && ./deploy-frontend.staging.sh
+```
+
+### Production
+
+```zsh
+cd packages/deployer && ./deploy-frontend.sh
+```
+
+### Deployment status
+
+Check the status of the deployment [here](https://webapp-deployer.apps.snowballtools.com)

packages/frontend/index.html

@@ -1,19 +1,21 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark dark:bg-background dark:text-foreground">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="snowball tools dashboard" />
+    <meta name="description" content="laconic tools dashboard" />
     <link rel="icon" href="/favicon.ico" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <meta name="msapplication-TileColor" content="#2d89ef" />
     <meta name="theme-color" content="#ffffff" />
     <link rel="manifest" href="/manifest.json" />
-    <title>Snowball</title>
+    <title>Laconic</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

packages/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
@@ -16,8 +16,11 @@
     "@bugsnag/browser-performance": "^2.4.1",
     "@bugsnag/js": "^7.22.7",
     "@bugsnag/plugin-react": "^7.22.7",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@fontsource-variable/jetbrains-mono": "^5.0.19",
     "@fontsource/inter": "^5.0.16",
+    "@mui/material": "^6.1.3",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -27,10 +30,6 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@snowballtools/auth": "^0.2.0",
-    "@snowballtools/auth-lit": "^0.2.0",
-    "@snowballtools/js-sdk": "^0.1.1",
-    "@snowballtools/link-lit-alchemy-light": "^0.2.0",
     "@snowballtools/material-tailwind-react-fork": "^2.1.10",
     "@snowballtools/smartwallet-alchemy-light": "^0.2.0",
     "@snowballtools/types": "^0.2.0",
@@ -42,9 +41,9 @@
     "@turnkey/http": "^2.10.0",
     "@turnkey/sdk-react": "^0.1.0",
     "@turnkey/webauthn-stamper": "^0.5.0",
-    "@walletconnect/ethereum-provider": "^2.12.2",
-    "@web3modal/siwe": "^4.0.5",
-    "@web3modal/wagmi": "^4.0.5",
+    "@walletconnect/ethereum-provider": "^2.16.1",
+    "@web3modal/siwe": "4.0.5",
+    "@web3modal/wagmi": "4.0.5",
     "assert": "^2.1.0",
     "axios": "^1.6.7",
     "clsx": "^2.1.0",
@@ -62,15 +61,15 @@
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
     "react-hook-form": "^7.49.0",
-    "react-hot-toast": "^2.4.1",
     "react-oauth-popup": "^1.0.5",
     "react-router-dom": "^6.20.1",
     "react-timer-hook": "^3.0.7",
-    "siwe": "^2.1.4",
+    "siwe": "2.1.4",
     "tailwind-variants": "^0.2.0",
     "usehooks-ts": "^2.15.1",
     "uuid": "^9.0.1",
     "viem": "^2.7.11",
+    "wagmi": "2.5.7",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

packages/frontend/public/.well-known/walletconnect.txt

@@ -0,0 +1 @@
+350e9ac2-8b27-4a79-9a82-78cfdb68ef71=0eacb7ae462f82c8b0199d28193b0bfa5265973dbb1fe991eec2cab737dfc1ec

packages/frontend/public/laconic-logo.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="4" fill="#29292E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0494 24.6233C18.8425 21.8302 20.5713 17.973 20.5706 13.7142C20.5717 13.1361 20.5396 12.5645 20.4762 12L12 12.0008L12.0003 28.2867C11.9996 30.2608 12.7522 32.2356 14.2578 33.7411C15.7633 35.2466 17.7395 36.0001 19.7139 35.9991L19.7134 35.9996L36 36L35.9995 27.5227C35.4362 27.4605 34.8645 27.4285 34.2852 27.4284C30.0275 27.4289 26.1701 29.1577 23.377 31.9507C21.3446 33.9321 18.0858 33.9325 16.0785 31.9252C14.0722 29.9191 14.0715 26.6593 16.0494 24.6233ZM34.2419 13.7624C31.9012 11.4217 28.0982 11.4208 25.7566 13.7624C23.4151 16.1038 23.4159 19.9067 25.7566 22.2473C28.0986 24.5892 31.9004 24.5889 34.2419 22.2473C36.5835 19.9059 36.5839 16.1042 34.2419 13.7624Z" fill="#FBFBFB"/>
+</svg>

packages/frontend/public/logo.svg

@@ -1 +1,10 @@
-<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="500" height="500" fill="#0F86F5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M191.873 125.126C224.893 126.765 250.458 150.121 274.042 172.995C297.925 196.158 323.089 221.108 324.868 254.114C326.718 288.42 308.902 321.108 283.281 344.355C258.67 366.687 225.288 373.859 191.873 374.788C157.228 375.752 119.038 374.394 95.1648 349.588C71.6207 325.125 74.6696 287.843 75.7341 254.114C76.7518 221.865 79.2961 188.525 101.009 164.41C123.845 139.047 157.543 123.423 191.873 125.126Z" fill="#4BA4F7"/><path fill-rule="evenodd" clip-rule="evenodd" d="M229.373 125.126C262.393 126.765 287.958 150.121 311.542 172.995C335.425 196.158 360.589 221.108 362.368 254.114C364.218 288.42 346.402 321.108 320.781 344.355C296.17 366.687 262.788 373.859 229.373 374.788C194.728 375.752 156.538 374.394 132.665 349.588C109.121 325.125 112.17 287.843 113.234 254.114C114.252 221.865 116.796 188.525 138.509 164.41C161.345 139.047 195.043 123.423 229.373 125.126Z" fill="#8AC4FA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M266.873 125.126C299.893 126.765 325.458 150.121 349.042 172.995C372.925 196.158 398.089 221.108 399.868 254.114C401.718 288.42 383.902 321.108 358.281 344.355C333.67 366.687 300.288 373.859 266.873 374.788C232.228 375.752 194.038 374.394 170.165 349.588C146.621 325.125 149.67 287.843 150.734 254.114C151.752 221.865 154.296 188.525 176.009 164.41C198.845 139.047 232.543 123.423 266.873 125.126Z" fill="#CAE4FD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M304.373 125.126C337.393 126.765 362.958 150.121 386.542 172.995C410.425 196.158 435.589 221.108 437.368 254.114C439.218 288.42 421.402 321.108 395.781 344.355C371.17 366.687 337.788 373.859 304.373 374.788C269.728 375.752 231.538 374.394 207.665 349.588C184.121 325.125 187.17 287.843 188.234 254.114C189.252 221.865 191.796 188.525 213.509 164.41C236.345 139.047 270.043 123.423 304.373 125.126Z" fill="white"/></svg>
+<svg width="115" height="20" viewBox="0 0 115 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.37388 10.5194C5.70149 8.19185 7.14225 4.97748 7.1416 1.42853C7.14246 0.94681 7.11586 0.470456 7.063 0L-0.000488281 0.000643078L-0.000273922 13.5723C-0.000917354 15.2174 0.62632 16.863 1.88091 18.1175C3.1356 19.3721 4.78235 20.0001 6.42772 19.9993L6.42729 19.9997L19.9995 20L19.999 12.9355C19.5296 12.8838 19.0532 12.857 18.5704 12.8569C15.0224 12.8574 11.8079 14.298 9.48026 16.6255C7.78654 18.2768 5.07093 18.2771 3.39812 16.6043C1.72638 14.9325 1.72562 12.2161 3.37388 10.5194ZM18.5344 1.46863C16.5837 -0.481929 13.4146 -0.48268 11.4633 1.46863C9.512 3.41984 9.51276 6.58895 11.4633 8.53941C13.415 10.491 16.5831 10.4907 18.5344 8.53941C20.4857 6.5882 20.4861 3.42016 18.5344 1.46863Z" fill="#FBFBFB"/>
+<path d="M31.4741 18.5838H39.2552V16.3302H34.075V1.41351H31.4741V18.5838Z" fill="#FBFBFB"/>
+<path d="M49.8108 1.41351H45.4976L40.9893 18.5838H43.6769L44.8039 14.2913H50.3744L51.5014 18.5838H54.3191L49.8108 1.41351ZM45.3458 12.145L47.6 3.2593H47.6866L49.8541 12.145H45.3458Z" fill="#FBFBFB"/>
+<path d="M62.9292 8.06885H65.9636C65.9636 3.17534 64.3813 1.07196 60.6967 1.07196C56.8169 1.07196 55.1479 3.73341 55.1479 9.97909C55.1479 16.2462 56.8169 18.9291 60.6967 18.9291C64.3813 18.9291 65.9636 16.8901 65.9853 12.1468H62.9508C62.9292 15.8599 62.474 16.7828 60.6967 16.7828C58.6593 16.7828 58.1607 15.4307 58.1824 9.97909C58.1824 4.54896 58.6809 3.19678 60.6967 3.21823C62.474 3.21823 62.9292 4.18413 62.9292 8.06885Z" fill="#FBFBFB"/>
+<path d="M73.7781 1.07209C77.7229 1.09364 79.4135 3.77643 79.4135 10.0007C79.4135 16.2249 77.7229 18.9078 73.7781 18.9292C69.8117 18.9507 68.1211 16.2678 68.1211 10.0007C68.1211 3.73354 69.8117 1.05064 73.7781 1.07209ZM71.1555 10.0007C71.1555 15.4308 71.6757 16.783 73.7781 16.783C75.8589 16.783 76.3791 15.4308 76.3791 10.0007C76.3791 4.54909 75.8589 3.19691 73.7781 3.21847C71.6757 3.23992 71.1555 4.59209 71.1555 10.0007Z" fill="#FBFBFB"/>
+<path d="M85.0819 18.5624L82.481 18.5838V1.41351H87.0544L91.3243 15.4073H91.3676V1.41351H93.968V18.5838H89.677L85.1254 3.51689H85.0819V18.5624Z" fill="#FBFBFB"/>
+<path d="M100.468 1.41351H97.8677V18.5838H100.468V1.41351Z" fill="#FBFBFB"/>
+<path d="M111.139 8.06885H114.174C114.174 3.17534 112.591 1.07196 108.906 1.07196C105.028 1.07196 103.358 3.73341 103.358 9.97909C103.358 16.2462 105.028 18.9291 108.906 18.9291C112.591 18.9291 114.174 16.8901 114.195 12.1468H111.161C111.139 15.8599 110.684 16.7828 108.906 16.7828C106.869 16.7828 106.371 15.4307 106.393 9.97909C106.393 4.54896 106.891 3.19678 108.906 3.21823C110.684 3.21823 111.139 4.18413 111.139 8.06885Z" fill="#FBFBFB"/>
+</svg>

packages/frontend/public/site.webmanifest

@@ -1,5 +1,5 @@
 {
-  "name": "Snowball Tools Dashboard",
+  "name": "Laconic Tools Dashboard",
   "short_name": "snowball tools",
   "icons": [
     {

packages/frontend/src/App.tsx

@@ -12,7 +12,7 @@ import Index from './pages';
 import AuthPage from './pages/AuthPage';
 import { DashboardLayout } from './pages/org-slug/layout';
 import Web3Provider from 'context/Web3Provider';
-import { baseUrl } from 'utils/constants';
+import { BASE_URL } from 'utils/constants';
 
 const router = createBrowserRouter([
   {
@@ -50,25 +50,26 @@ const router = createBrowserRouter([
     path: '/login',
     element: <AuthPage />,
   },
-  {
-    path: '/signup',
-    element: <AuthPage />,
-  },
 ]);
 
 function App() {
   // Hacky way of checking session
   // TODO: Handle redirect backs
   useEffect(() => {
-    fetch(`${baseUrl}/auth/session`, {
+    fetch(`${BASE_URL}/auth/session`, {
       credentials: 'include',
     }).then((res) => {
+      const path = window.location.pathname;
       if (res.status !== 200) {
         localStorage.clear();
-        const path = window.location.pathname;
-        if (path !== '/login' && path !== '/signup') {
+
+        if (path !== '/login') {
           window.location.pathname = '/login';
         }
+      } else {
+        if (path === '/login') {
+          window.location.pathname = '/';
+        }
       }
     });
   }, []);

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/Logo.tsx

@@ -1,5 +1,4 @@
 import { Link } from 'react-router-dom';
-import { Heading } from './shared/Heading';
 
 interface LogoProps {
   orgSlug?: string;
@@ -9,14 +8,7 @@ export const Logo = ({ orgSlug }: LogoProps) => {
   return (
     <Link to={`/${orgSlug}`}>
       <div className="flex items-center gap-3 px-0 lg:px-2">
-        <img
-          src="/logo.svg"
-          alt="Snowball Logo"
-          className="lg:h-10 lg:w-10 h-8 w-8 rounded-lg"
-        />
-        <Heading className="lg:text-[24px] text-[19px] font-semibold">
-          Snowball
-        </Heading>
+        <img src="/logo.svg" alt="Snowball Logo" />
       </div>
     </Link>
   );

packages/frontend/src/components/SearchBar.tsx

@@ -10,7 +10,7 @@ const SearchBar: React.ForwardRefRenderFunction<
   return (
     <div className="relative flex w-full">
       <Input
-        leftIcon={<SearchIcon />}
+        leftIcon={<SearchIcon className="text-foreground-secondary" />}
         onChange={onChange}
         value={value}
         type="search"

packages/frontend/src/components/Stepper.tsx

@@ -24,8 +24,8 @@ const Stepper = ({ activeStep, stepperValues }: StepperProps) => {
             <div
               className={`text-sm ${
                 activeStep === stepperValue.step
-                  ? 'text-black font-semibold'
-                  : 'text-gray-600'
+                  ? 'text-black font-semibold dark:text-foreground'
+                  : 'text-gray-600 dark:text-foreground-secondary'
               }`}
             >
               {stepperValue.label}

packages/frontend/src/components/StopWatch.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useStopwatch } from 'react-timer-hook';
 
 import FormatMillisecond, { FormatMilliSecondProps } from './FormatMilliSecond';
@@ -12,14 +13,19 @@ const setStopWatchOffset = (time: string) => {
 
 interface StopwatchProps extends Omit<FormatMilliSecondProps, 'time'> {
   offsetTimestamp: Date;
+  isPaused: boolean;
 }
 
-const Stopwatch = ({ offsetTimestamp, ...props }: StopwatchProps) => {
-  const { totalSeconds } = useStopwatch({
+const Stopwatch = ({ offsetTimestamp, isPaused, ...props }: StopwatchProps) => {
+  const { totalSeconds, pause, start } = useStopwatch({
     autoStart: true,
     offsetTimestamp: offsetTimestamp,
   });
 
+  useEffect(() => {
+    isPaused ? pause() : start();
+  }, [isPaused]);
+
   return <FormatMillisecond time={totalSeconds * 1000} {...props} />;
 };
 

packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx

@@ -10,11 +10,16 @@ import {
   LinkChainIcon,
 } from 'components/shared/CustomIcon';
 import { TagProps } from 'components/shared/Tag';
+import {
+  ArrowRightCircleFilledIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
 
 interface ChangeStateToProductionDialogProps extends ConfirmDialogProps {
   deployment: Deployment;
   newDeployment?: Deployment;
   domains: Domain[];
+  isConfirmButtonLoading?: boolean;
 }
 
 export const ChangeStateToProductionDialog = ({
@@ -24,6 +29,7 @@ export const ChangeStateToProductionDialog = ({
   open,
   handleCancel,
   handleConfirm,
+  isConfirmButtonLoading,
   ...props
 }: ChangeStateToProductionDialogProps) => {
   const currentChip = {
@@ -41,6 +47,15 @@ export const ChangeStateToProductionDialog = ({
       handleCancel={handleCancel}
       open={open}
       handleConfirm={handleConfirm}
+      confirmButtonTitle={isConfirmButtonLoading ? 'Redeploying' : 'Redeploy'}
+      confirmButtonProps={{
+        disabled: isConfirmButtonLoading,
+        rightIcon: isConfirmButtonLoading ? (
+          <LoadingIcon className="animate-spin" />
+        ) : (
+          <ArrowRightCircleFilledIcon />
+        ),
+      }}
     >
       <div className="flex flex-col gap-7">
         <div className="flex flex-col gap-3">

packages/frontend/src/components/projects/Dialog/DeleteDeploymentDialog.tsx

@@ -0,0 +1,47 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import {
+  ArrowRightCircleFilledIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
+
+interface DeleteDeploymentDialogProps extends ConfirmDialogProps {
+  isConfirmButtonLoading?: boolean;
+}
+
+export const DeleteDeploymentDialog = ({
+  open,
+  handleCancel,
+  handleConfirm,
+  isConfirmButtonLoading,
+  ...props
+}: DeleteDeploymentDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Delete deployment?"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle={
+        isConfirmButtonLoading
+          ? 'Deleting deployment'
+          : 'Yes, delete deployment'
+      }
+      handleConfirm={handleConfirm}
+      confirmButtonProps={{
+        variant: 'danger',
+        disabled: isConfirmButtonLoading,
+        rightIcon: isConfirmButtonLoading ? (
+          <LoadingIcon className="animate-spin" />
+        ) : (
+          <ArrowRightCircleFilledIcon />
+        ),
+      }}
+    >
+      <p className="text-sm text-elements-high-em">
+        Once deleted, the deployment will not be accessible.
+      </p>
+    </ConfirmDialog>
+  );
+};

packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts

@@ -4,7 +4,9 @@ export const projectCardTheme = tv({
   slots: {
     wrapper: [
       'bg-surface-card',
+      'dark:bg-overlay2',
       'shadow-card',
+      'dark:shadow-background',
       'rounded-2xl',
       'flex',
       'flex-col',
@@ -17,10 +19,16 @@ export const projectCardTheme = tv({
       'text-sm',
       'font-medium',
       'text-elements-high-em',
+      'dark:text-foreground',
       'tracking-[-0.006em]',
       'truncate',
     ],
-    description: ['text-xs', 'text-elements-low-em', 'truncate'],
+    description: [
+      'text-xs',
+      'text-elements-low-em',
+      'dark:text-foreground-secondary',
+      'truncate',
+    ],
     icons: ['flex', 'items-center', 'gap-1'],
     lowerContent: [
       'transition-colors',
@@ -32,6 +40,7 @@ export const projectCardTheme = tv({
       'gap-2',
       'rounded-b-2xl',
       'group-hover:bg-surface-card-hovered',
+      'dark:group-hover:bg-overlay3',
     ],
     latestDeployment: ['flex', 'items-center', 'gap-2'],
     deploymentStatusContainer: [
@@ -42,10 +51,15 @@ export const projectCardTheme = tv({
       'justify-center',
     ],
     deploymentStatus: ['w-1', 'h-1', 'rounded-full'],
-    deploymentName: ['text-xs', 'text-elements-low-em'],
+    deploymentName: [
+      'text-xs',
+      'text-elements-low-em',
+      'dark:text-foreground-secondary',
+    ],
     deploymentText: [
       'text-xs',
       'text-elements-low-em',
+      'dark:text-foreground-secondary',
       'font-mono',
       'flex',
       'items-center',
@@ -53,9 +67,11 @@ export const projectCardTheme = tv({
     ],
     wavyBorder: [
       'bg-surface-card',
+      'dark:bg-background',
       'transition-colors',
       'duration-150',
       'group-hover:bg-surface-card-hovered',
+      'dark:group-hover:bg-overlay2',
     ],
   },
   variants: {
@@ -67,7 +83,7 @@ export const projectCardTheme = tv({
         deploymentStatus: ['bg-orange-400'],
       },
       failure: {
-        deploymentStatus: ['bg-rose-500'],
+        deploymentStatus: ['bg-error'],
       },
       pending: {
         deploymentStatus: ['bg-gray-500'],

packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx

@@ -88,7 +88,7 @@ export const ProjectCard = ({
         </div>
         {/* Icons */}
         <div className={theme.icons()}>
-          {hasError && <WarningDiamondIcon className="text-elements-danger" />}
+          {hasError && <WarningDiamondIcon className="text-error" />}
           <Menu placement="bottom-end">
             <MenuHandler>
               <Button
@@ -101,12 +101,15 @@ export const ProjectCard = ({
                 <HorizontalDotIcon />
               </Button>
             </MenuHandler>
-            <MenuList>
-              <MenuItem onClick={navigateToSettingsOnClick}>
+            <MenuList className="dark:bg-overlay3 dark:shadow-background dark:border-none">
+              <MenuItem
+                onClick={navigateToSettingsOnClick}
+                className="text-foreground"
+              >
                 Project settings
               </MenuItem>
               <MenuItem
-                className="text-red-500"
+                className="text-error"
                 onClick={navigateToSettingsOnClick}
               >
                 Delete project

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCombobox } from 'downshift';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 
 import SearchBar from 'components/SearchBar';
 import { useGQLClient } from 'context/GQLClientContext';
@@ -42,7 +42,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
     },
   });
 
-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {
@@ -59,12 +59,12 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
   }, [fetchProjects, debouncedInputValue]);
 
   return (
-    <div className="relative w-full lg:w-fit">
+    <div className="relative w-full lg:w-fit dark:bg-overlay">
       <SearchBar {...getInputProps()} />
       <div
-        {...getMenuProps()}
+        {...getMenuProps({}, { suppressRefError: true })}
         className={cn(
-          'flex flex-col shadow-dropdown rounded-xl bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
+          'flex flex-col shadow-dropdown rounded-xl dark:bg-overlay2 bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
           { hidden: !inputValue || !isOpen },
         )}
       >

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx

@@ -5,7 +5,7 @@ import { CrossIcon, SearchIcon } from 'components/shared/CustomIcon';
 import { Input } from 'components/shared/Input';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 import { ProjectSearchBarItem } from './ProjectSearchBarItem';
 import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty';
 import { useNavigate } from 'react-router-dom';
@@ -27,8 +27,13 @@ export const ProjectSearchBarDialog = ({
   const client = useGQLClient();
   const navigate = useNavigate();
 
-  const { getInputProps, getItemProps, inputValue, setInputValue } =
-    useCombobox({
+  const {
+    getInputProps,
+    getItemProps,
+    getMenuProps,
+    inputValue,
+    setInputValue,
+  } = useCombobox({
     items,
     itemToString(item) {
       return item ? item.name : '';
@@ -45,7 +50,7 @@ export const ProjectSearchBarDialog = ({
     },
   });
 
-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {
@@ -75,7 +80,7 @@ export const ProjectSearchBarDialog = ({
           <div className="h-full flex flex-col fixed top-0 inset-0">
             <div className="py-2.5 px-4 flex items-center justify-between border-b border-border-separator/[0.06]">
               <Input
-                {...getInputProps()}
+                {...getInputProps({}, { suppressRefError: true })}
                 leftIcon={<SearchIcon />}
                 placeholder="Search"
                 appearance="borderless"
@@ -86,23 +91,33 @@ export const ProjectSearchBarDialog = ({
               </Button>
             </div>
             {/* Content */}
-            <div className="flex flex-col gap-1 px-2 py-2">
-              {items.length > 0
-                ? items.map((item, index) => (
+            <div
+              className="flex flex-col gap-1 px-2 py-2"
+              {...getMenuProps(
+                {},
+                {
+                  suppressRefError: true,
+                },
+              )}
+            >
+              {items.length > 0 ? (
                 <>
                   <div className="px-2 py-2">
                     <p className="text-elements-mid-em text-xs font-medium">
                       Suggestions
                     </p>
                   </div>
+                  {items.map((item, index) => (
                     <ProjectSearchBarItem
                       key={item.id}
                       item={item}
                       {...getItemProps({ item, index })}
                     />
+                  ))}
                 </>
-                  ))
-                : inputValue && <ProjectSearchBarEmpty />}
+              ) : (
+                inputValue && <ProjectSearchBarEmpty />
+              )}
             </div>
           </div>
         </Dialog.Content>

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarEmpty.tsx

@@ -13,10 +13,10 @@ export const ProjectSearchBarEmpty = ({
       {...props}
       className={cn('flex items-center px-2 py-2 gap-3', className)}
     >
-      <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-orange-50 text-elements-warning">
+      <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-orange-50 text-elements-warning dark:bg-red-50 text-error">
         <InfoRoundFilledIcon size={16} />
       </div>
-      <p className="text-elements-low-em text-sm tracking-[-0.006em]">
+      <p className="text-elements-low-em text-sm dark:text-foreground-secondary tracking-[-0.006em]">
         No projects matching this name
       </p>
     </div>

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

@@ -0,0 +1,60 @@
+import {
+  Select,
+  Option,
+  Spinner,
+} from '@snowballtools/material-tailwind-react-fork';
+
+const AccountsDropdown = ({
+  accounts,
+  isDataReceived,
+  onAccountChange,
+}: {
+  accounts: string[];
+  isDataReceived: boolean;
+  onAccountChange: (selectedAccount: string) => void;
+}) => {
+  return (
+    <div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
+      {isDataReceived ? (
+        !accounts.length ? (
+          <div className="text-center">
+            <p className="text-gray-700 dark:text-gray-300 mb-4">
+              No accounts found. Please visit{' '}
+              <a
+                href="https://store.laconic.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 underline dark:text-blue-400"
+              >
+                store.laconic.com
+              </a>{' '}
+              to create a wallet.
+            </p>
+          </div>
+        ) : (
+          <div>
+            <Select
+              label="Select Account"
+              defaultValue={accounts[0]}
+              onChange={(value) => value && onAccountChange(value)}
+              className="dark:bg-overlay2 dark:text-foreground"
+              aria-label="Wallet Account Selector"
+            >
+              {accounts.map((account, index) => (
+                <Option key={index} value={account}>
+                  {account}
+                </Option>
+              ))}
+            </Select>
+          </div>
+        )
+      ) : (
+        <div className="flex items-center justify-center h-12">
+          <Spinner className="h-6 w-6" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AccountsDropdown;

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

@@ -0,0 +1,630 @@
+import { useCallback, useState, useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { FormProvider, FieldValues } from 'react-hook-form';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useMediaQuery } from 'usehooks-ts';
+import {
+  AddEnvironmentVariableInput,
+  AuctionParams,
+  Deployer,
+} from 'gql-client';
+
+import { Select, MenuItem, FormControl, FormHelperText } from '@mui/material';
+
+import {
+  ArrowRightCircleFilledIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
+import { Heading } from '../../shared/Heading';
+import { Button } from '../../shared/Button';
+import { Input } from 'components/shared/Input';
+import { useToast } from 'components/shared/Toast';
+import { useGQLClient } from '../../../context/GQLClientContext';
+import IFrameModal from './IFrameModal';
+import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
+import { EnvironmentVariablesFormValues } from 'types/types';
+import {
+  VITE_LACONICD_CHAIN_ID,
+  VITE_WALLET_IFRAME_URL,
+} from 'utils/constants';
+import AccountsDropdown from './AccountsDropdown';
+
+type ConfigureDeploymentFormValues = {
+  option: string;
+  lrn?: string;
+  numProviders?: number;
+  maxPrice?: string;
+};
+
+type ConfigureFormValues = ConfigureDeploymentFormValues &
+  EnvironmentVariablesFormValues;
+
+const DEFAULT_MAX_PRICE = '10000';
+const TX_APPROVAL_TIMEOUT_MS = 60000;
+
+const Configure = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [deployers, setDeployers] = useState<Deployer[]>([]);
+  const [selectedAccount, setSelectedAccount] = useState<string>();
+  const [accounts, setAccounts] = useState<string[]>([]);
+  const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
+  const [isPaymentLoading, setIsPaymentLoading] = useState(false);
+  const [isPaymentDone, setIsPaymentDone] = useState(false);
+  const [isFrameVisible, setIsFrameVisible] = useState(false);
+  const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
+
+  const [searchParams] = useSearchParams();
+  const templateId = searchParams.get('templateId');
+  const queryParams = new URLSearchParams(location.search);
+
+  const owner = queryParams.get('owner');
+  const name = queryParams.get('name');
+  const defaultBranch = queryParams.get('defaultBranch');
+  const fullName = queryParams.get('fullName');
+  const orgSlug = queryParams.get('orgSlug');
+  const templateOwner = queryParams.get('templateOwner');
+  const templateRepo = queryParams.get('templateRepo');
+  const isPrivate = queryParams.get('isPrivate') === 'true';
+
+  const navigate = useNavigate();
+  const { toast, dismiss } = useToast();
+  const client = useGQLClient();
+
+  const methods = useForm<ConfigureFormValues>({
+    defaultValues: {
+      option: 'Auction',
+      maxPrice: DEFAULT_MAX_PRICE,
+      lrn: '',
+      numProviders: 1,
+      variables: [],
+    },
+  });
+
+  const selectedOption = methods.watch('option');
+
+  const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
+  const buttonSize = isTabletView ? { size: 'lg' as const } : {};
+
+  const createProject = async (
+    data: FieldValues,
+    envVariables: AddEnvironmentVariableInput[],
+    senderAddress: string,
+    txHash: string,
+  ): Promise<string> => {
+    setIsLoading(true);
+    let projectId: string | null = null;
+
+    try {
+      let lrn: string | undefined;
+      let auctionParams: AuctionParams | undefined;
+
+      if (data.option === 'LRN') {
+        lrn = data.lrn;
+      } else if (data.option === 'Auction') {
+        auctionParams = {
+          numProviders: Number(data.numProviders!),
+          maxPrice: data.maxPrice!.toString(),
+        };
+      }
+
+      if (templateId) {
+        const projectData: any = {
+          templateOwner,
+          templateRepo,
+          owner,
+          name,
+          isPrivate,
+          paymentAddress: senderAddress,
+          txHash,
+        };
+
+        const { addProjectFromTemplate } = await client.addProjectFromTemplate(
+          orgSlug!,
+          projectData,
+          lrn,
+          auctionParams,
+          envVariables,
+        );
+
+        projectId = addProjectFromTemplate.id;
+      } else {
+        const { addProject } = await client.addProject(
+          orgSlug!,
+          {
+            name: `${owner}-${name}`,
+            prodBranch: defaultBranch!,
+            repository: fullName!,
+            template: 'webapp',
+            paymentAddress: senderAddress,
+            txHash,
+          },
+          lrn,
+          auctionParams,
+          envVariables,
+        );
+
+        projectId = addProject.id;
+      }
+    } catch (error) {
+      console.error('Error creating project:', error);
+      toast({
+        id: 'error-creating-project',
+        title: 'Error creating project',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+
+    if (projectId) {
+      return projectId;
+    } else {
+      throw new Error('Project creation failed');
+    }
+  };
+
+  const verifyTx = async (
+    senderAddress: string,
+    txHash: string,
+    amount: string,
+  ): Promise<boolean> => {
+    const isValid = await client.verifyTx(
+      txHash,
+      `${amount.toString()}alnt`,
+      senderAddress,
+    );
+
+    return isValid;
+  };
+
+  const handleFormSubmit = useCallback(
+    async (createFormData: FieldValues) => {
+      try {
+        const deployerLrn = createFormData.lrn;
+        const deployer = deployers.find(
+          (deployer) => deployer.deployerLrn === deployerLrn,
+        );
+
+        let amount: string;
+        let senderAddress: string;
+        let txHash: string | null = null;
+        if (createFormData.option === 'LRN' && !deployer?.minimumPayment) {
+          toast({
+            id: 'no-payment-required',
+            title: 'No payment required. Deploying app...',
+            variant: 'info',
+            onDismiss: dismiss,
+          });
+
+          txHash = '';
+          senderAddress = '';
+        } else {
+          if (!selectedAccount) return;
+
+          senderAddress = selectedAccount;
+
+          if (createFormData.option === 'LRN') {
+            amount = deployer?.minimumPayment!;
+          } else {
+            amount = (
+              createFormData.numProviders * createFormData.maxPrice
+            ).toString();
+          }
+
+          const amountToBePaid = amount.replace(/\D/g, '').toString();
+
+          txHash = await cosmosSendTokensHandler(senderAddress, amountToBePaid);
+
+          if (!txHash) {
+            toast({
+              id: 'unsuccessful-tx',
+              title: 'Transaction rejected',
+              variant: 'error',
+              onDismiss: dismiss,
+            });
+            setIsFrameVisible(false);
+            setIsPaymentLoading(false);
+            throw new Error('Transaction rejected');
+          }
+
+          // Validate transaction hash
+          const isTxHashValid = await verifyTx(
+            senderAddress,
+            txHash,
+            amountToBePaid,
+          );
+          setIsPaymentLoading(false);
+
+          if (isTxHashValid) {
+            toast({
+              id: 'payment-successful',
+              title: 'Payment successful',
+              variant: 'success',
+              onDismiss: dismiss,
+            });
+            setIsPaymentDone(true);
+          } else {
+            toast({
+              id: 'invalid-tx-hash',
+              title: 'Transaction validation failed',
+              variant: 'error',
+              onDismiss: dismiss,
+            });
+            throw new Error('Transaction validation failed');
+          }
+        }
+
+        const environmentVariables = createFormData.variables.map(
+          (variable: any) => {
+            return {
+              key: variable.key,
+              value: variable.value,
+              environments: Object.entries(createFormData.environment)
+                .filter(([, value]) => value === true)
+                .map(([key]) => key.charAt(0).toUpperCase() + key.slice(1)),
+            };
+          },
+        );
+
+        const projectId = await createProject(
+          createFormData,
+          environmentVariables,
+          senderAddress,
+          txHash!,
+        );
+
+        await client.getEnvironmentVariables(projectId);
+
+        if (templateId) {
+          createFormData.option === 'Auction'
+            ? navigate(
+                `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`,
+              )
+            : navigate(
+                `/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`,
+              );
+        } else {
+          createFormData.option === 'Auction'
+            ? navigate(
+                `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`,
+              )
+            : navigate(
+                `/${orgSlug}/projects/create/deploy?projectId=${projectId}`,
+              );
+        }
+      } catch (error: any) {
+        toast({
+          id: 'error-deploying-app',
+          title: 'Error deploying app',
+          variant: 'error',
+          onDismiss: dismiss,
+        });
+        throw new Error(error);
+      }
+    },
+    [client, createProject, dismiss, toast],
+  );
+
+  const fetchDeployers = useCallback(async () => {
+    const res = await client.getDeployers();
+    setDeployers(res.deployers);
+  }, [client]);
+
+  const onAccountChange = useCallback((account: string) => {
+    setSelectedAccount(account);
+  }, []);
+
+  const onDeployerChange = useCallback(
+    (selectedLrn: string) => {
+      const deployer = deployers.find((d) => d.deployerLrn === selectedLrn);
+      setSelectedDeployer(deployer);
+    },
+    [deployers],
+  );
+
+  const cosmosSendTokensHandler = useCallback(
+    async (selectedAccount: string, amount: string) => {
+      if (!selectedAccount) {
+        throw new Error('Account not selected');
+      }
+
+      const senderAddress = selectedAccount;
+      const snowballAddress = await client.getAddress();
+      let timeoutId;
+
+      try {
+        setIsPaymentDone(false);
+        setIsPaymentLoading(true);
+
+        await requestTx(senderAddress, snowballAddress, amount);
+
+        const txHash = await new Promise<string | null>((resolve, reject) => {
+          const handleTxStatus = async (event: MessageEvent) => {
+            if (event.origin !== VITE_WALLET_IFRAME_URL) return;
+
+            if (event.data.type === 'TRANSACTION_RESPONSE') {
+              const txResponse = event.data.data;
+              resolve(txResponse);
+            } else if (event.data.type === 'ERROR') {
+              console.error('Error from wallet:', event.data.message);
+              reject(new Error('Transaction failed'));
+              toast({
+                id: 'error-transaction',
+                title: 'Error during transaction',
+                variant: 'error',
+                onDismiss: dismiss,
+              });
+            }
+            setIsFrameVisible(false);
+
+            window.removeEventListener('message', handleTxStatus);
+          };
+
+          window.addEventListener('message', handleTxStatus);
+
+          // Set a timeout, consider unsuccessful after 1 min
+          timeoutId = setTimeout(() => {
+            reject(new Error('Transaction timeout'));
+            window.removeEventListener('message', handleTxStatus);
+            toast({
+              id: 'transaction-timeout',
+              title: 'The transaction request timed out. Please try again',
+              variant: 'error',
+              onDismiss: dismiss,
+            });
+            setIsFrameVisible(false);
+            setIsPaymentLoading(false);
+          }, TX_APPROVAL_TIMEOUT_MS);
+        });
+        return txHash;
+      } catch (error) {
+        console.error('Error in transaction:', error);
+        throw new Error('Error in transaction');
+      } finally {
+        clearTimeout(timeoutId);
+      }
+    },
+    [client, dismiss, toast],
+  );
+
+  const requestTx = async (
+    sender: string,
+    recipient: string,
+    amount: string,
+  ) => {
+    const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
+
+    if (!iframe.contentWindow) {
+      console.error('Iframe not found or not loaded');
+      throw new Error('Iframe not found or not loaded');
+    }
+
+    iframe.contentWindow.postMessage(
+      {
+        type: 'REQUEST_TX',
+        chainId: VITE_LACONICD_CHAIN_ID,
+        fromAddress: sender,
+        toAddress: recipient,
+        amount,
+      },
+      VITE_WALLET_IFRAME_URL,
+    );
+
+    setIsFrameVisible(true);
+  };
+
+  useEffect(() => {
+    fetchDeployers();
+  }, []);
+
+  return (
+    <div className="space-y-7 px-4 py-6">
+      <div className="flex justify-between mb-6">
+        <div className="space-y-1.5">
+          <Heading as="h4" className="md:text-lg font-medium">
+            Configure deployment
+          </Heading>
+          <Heading
+            as="h5"
+            className="text-sm font-sans text-elements-low-em dark:text-foreground-secondaryu"
+          >
+            The app can be deployed by setting the deployer LRN for a single
+            deployment or by creating a deployer auction for multiple
+            deployments
+          </Heading>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-6 lg:gap-8 w-full">
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleFormSubmit)}>
+            <div className="flex flex-col justify-start gap-4 mb-6">
+              <Controller
+                name="option"
+                control={methods.control}
+                render={({ field: { value, onChange } }) => (
+                  <Select
+                    value={value}
+                    onChange={(event) => onChange(event.target.value)}
+                    size="small"
+                    displayEmpty
+                    className="dark:bg-overlay2 dark:text-foreground"
+                    sx={{
+                      fontFamily: 'inherit',
+                      '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#e0e0e0',
+                        borderRadius: '8px',
+                      },
+                    }}
+                  >
+                    <MenuItem value="Auction">Create Auction</MenuItem>
+                    <MenuItem value="LRN">Deployer LRN</MenuItem>
+                  </Select>
+                )}
+              />
+            </div>
+
+            {selectedOption === 'LRN' && (
+              <div className="flex flex-col justify-start gap-4 mb-6">
+                <Heading
+                  as="h5"
+                  className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
+                >
+                  The app will be deployed by the configured deployer
+                </Heading>
+                <Controller
+                  name="lrn"
+                  control={methods.control}
+                  rules={{ required: true }}
+                  render={({ field: { value, onChange }, fieldState }) => (
+                    <FormControl fullWidth error={Boolean(fieldState.error)}>
+                      <span className="text-sm dark:text-foreground text-elements-high-em dark:text-foreground mb-4">
+                        Select deployer LRN
+                      </span>
+                      <Select
+                        value={value}
+                        onChange={(event) => {
+                          onChange(event.target.value);
+                          onDeployerChange(event.target.value);
+                        }}
+                        displayEmpty
+                        size="small"
+                        className="dark:bg-overlay2 dark:text-foreground"
+                      >
+                        {deployers.map((deployer) => (
+                          <MenuItem
+                            key={deployer.deployerLrn}
+                            value={deployer.deployerLrn}
+                          >
+                            {`${deployer.deployerLrn} ${deployer.minimumPayment ? `(${deployer.minimumPayment})` : ''}`}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                      {fieldState.error && (
+                        <FormHelperText>
+                          {fieldState.error.message}
+                        </FormHelperText>
+                      )}
+                    </FormControl>
+                  )}
+                />
+              </div>
+            )}
+
+            {selectedOption === 'Auction' && (
+              <>
+                <div className="flex flex-col justify-start gap-4 mb-6">
+                  <Heading
+                    as="h5"
+                    className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
+                  >
+                    Set the number of deployers and maximum price for each
+                    deployment
+                  </Heading>
+                  <span className="text-sm text-elements-high-em dark:text-foreground">
+                    Number of Deployers
+                  </span>
+                  <Controller
+                    name="numProviders"
+                    control={methods.control}
+                    rules={{ required: true }}
+                    render={({ field: { value, onChange } }) => (
+                      <Input
+                        type="number"
+                        value={value}
+                        onChange={(e) => onChange(e)}
+                      />
+                    )}
+                  />
+                </div>
+                <div className="flex flex-col justify-start gap-4 mb-6">
+                  <span className="text-sm text-elements-high-em dark:text-foreground">
+                    Maximum Price (alnt)
+                  </span>
+                  <Controller
+                    name="maxPrice"
+                    control={methods.control}
+                    rules={{ required: true }}
+                    render={({ field: { value, onChange } }) => (
+                      <Input type="number" value={value} onChange={onChange} />
+                    )}
+                  />
+                </div>
+              </>
+            )}
+
+            <Heading as="h4" className="md:text-lg font-medium mb-3">
+              Environment Variables
+            </Heading>
+            <div className="p-4 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6">
+              <EnvironmentVariablesForm />
+            </div>
+
+            {selectedOption === 'LRN' && !selectedDeployer?.minimumPayment ? (
+              <div>
+                <Button
+                  {...buttonSize}
+                  type="submit"
+                  disabled={isLoading || !selectedDeployer || !selectedAccount}
+                  rightIcon={
+                    isLoading ? (
+                      <LoadingIcon className="animate-spin" />
+                    ) : (
+                      <ArrowRightCircleFilledIcon />
+                    )
+                  }
+                >
+                  {isLoading ? 'Deploying' : 'Deploy'}
+                </Button>
+              </div>
+            ) : (
+              <>
+                <AccountsDropdown
+                  accounts={accounts}
+                  onAccountChange={onAccountChange}
+                  isDataReceived={isAccountsDataReceived}
+                />
+                {accounts.length > 0 && (
+                  <div>
+                    <Button
+                      {...buttonSize}
+                      type="submit"
+                      shape="default"
+                      disabled={
+                        isLoading || isPaymentLoading || !selectedAccount
+                      }
+                      rightIcon={
+                        isLoading || isPaymentLoading ? (
+                          <LoadingIcon className="animate-spin" />
+                        ) : (
+                          <ArrowRightCircleFilledIcon />
+                        )
+                      }
+                    >
+                      {!isPaymentDone
+                        ? isPaymentLoading
+                          ? 'Transaction Requested'
+                          : 'Pay and Deploy'
+                        : isLoading
+                          ? 'Deploying'
+                          : 'Deploy'}
+                    </Button>
+                  </div>
+                )}
+              </>
+            )}
+          </form>
+        </FormProvider>
+
+        <IFrameModal
+          setAccounts={setAccounts}
+          setIsDataReceived={setIsAccountsDataReceived}
+          isVisible={isFrameVisible}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Configure;

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

@@ -6,7 +6,6 @@ import { Button } from '../../shared/Button';
 import {
   GitIcon,
   EllipsesIcon,
-  SnowballIcon,
   GithubIcon,
   GitTeaIcon,
 } from '../../shared/CustomIcon';
@@ -15,8 +14,9 @@ import { IconWithFrame } from '../../shared/IconWithFrame';
 import { Heading } from '../../shared/Heading';
 import { MockConnectGitCard } from './MockConnectGitCard';
 import { VITE_GITHUB_CLIENT_ID } from 'utils/constants';
+import { LaconicIcon } from 'components/shared/CustomIcon/LaconicIcon';
 
-const SCOPES = 'repo user';
+const SCOPES = 'public_repo user';
 const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${VITE_GITHUB_CLIENT_ID}&scope=${encodeURIComponent(SCOPES)}`;
 
 interface ConnectAccountInterface {
@@ -46,20 +46,24 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
 
   // TODO: Use correct height
   return (
-    <div className="bg-gray-100 flex flex-col p-4 gap-7 justify-center items-center text-center text-sm h-full rounded-2xl">
+    <div className="dark:bg-overlay bg-gray-100 flex flex-col p-4 gap-7 justify-center items-center text-center text-sm h-full rounded-2xl">
       <div className="flex flex-col items-center max-w-[420px]">
         {/** Icons */}
         <div className="w-52 h-16 justify-center items-center gap-4 inline-flex mb-7">
-          <IconWithFrame icon={<GitIcon />} />
+          <IconWithFrame icon={<GitIcon />} hasHighlight={false} />
           <EllipsesIcon className="items-center gap-1.5 flex" />
-          <IconWithFrame className="bg-blue-400" icon={<SnowballIcon />} />
+          <IconWithFrame
+            className="bg-background"
+            icon={<LaconicIcon />}
+            hasHighlight={false}
+          />
         </div>
         {/** Text */}
         <div className="flex flex-col gap-1.5 mb-6">
-          <Heading className="text-xl font-medium">
+          <Heading className="text-xl font-medium dark:text-foreground">
             Connect to your Git account
           </Heading>
-          <p className="text-center text-elements-mid-em">
+          <p className="text-center text-elements-mid-em dark:text-foreground-secondary">
             Once connected, you can import a repository from your account or
             start with one of our templates.
           </p>
@@ -70,14 +74,14 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
             url={GITHUB_OAUTH_URL}
             onCode={handleCode}
             onClose={() => {}}
-            title="Snowball"
+            title="Laconic"
             width={1000}
             height={1000}
           >
             <Button
               className="w-full sm:w-auto"
               leftIcon={<GithubIcon />}
-              variant="tertiary"
+              variant="primary"
             >
               Connect to GitHub
             </Button>
@@ -85,7 +89,7 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
           <Button
             className="w-full sm:w-auto"
             leftIcon={<GitTeaIcon />}
-            variant="tertiary"
+            variant="primary"
           >
             Connect to GitTea
           </Button>

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

@@ -1,5 +1,7 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import axios from 'axios';
+import { Deployment } from 'gql-client';
 
 import { DeployStep, DeployStatus } from './DeployStep';
 import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
@@ -7,13 +9,37 @@ import { Heading } from '../../shared/Heading';
 import { Button } from '../../shared/Button';
 import { ClockOutlineIcon, WarningIcon } from '../../shared/CustomIcon';
 import { CancelDeploymentDialog } from '../../projects/Dialog/CancelDeploymentDialog';
+import { useGQLClient } from 'context/GQLClientContext';
+
+const FETCH_DEPLOYMENTS_INTERVAL = 5000;
+
+type RequestState =
+  | 'SUBMITTED'
+  | 'DEPLOYING'
+  | 'DEPLOYED'
+  | 'REMOVED'
+  | 'CANCELLED'
+  | 'ERROR';
+
+type Record = {
+  id: string;
+  createTime: string;
+  app: string;
+  lastState: RequestState;
+  lastUpdate: string;
+  logAvailable: boolean;
+};
 
-const TIMEOUT_DURATION = 5000;
 const Deploy = () => {
+  const client = useGQLClient();
+
   const [searchParams] = useSearchParams();
   const projectId = searchParams.get('projectId');
 
   const [open, setOpen] = React.useState(false);
+  const [deployment, setDeployment] = useState<Deployment>();
+  const [record, setRecord] = useState<Record>();
+
   const handleOpen = () => setOpen(!open);
 
   const navigate = useNavigate();
@@ -23,13 +49,67 @@ const Deploy = () => {
     navigate(`/${orgSlug}/projects/create`);
   }, []);
 
-  useEffect(() => {
-    const timerID = setTimeout(() => {
-      navigate(`/${orgSlug}/projects/create/success/${projectId}`);
-    }, TIMEOUT_DURATION);
+  const isDeploymentFailed = useMemo(() => {
+    if (!record) {
+      return false;
+    }
 
-    return () => clearInterval(timerID);
-  }, []);
+    // Not checking for `REMOVED` status as this status is received for a brief period before receiving `DEPLOYED` status
+    if (record.lastState === 'CANCELLED' || record.lastState === 'ERROR') {
+      return true;
+    } else {
+      return false;
+    }
+  }, [record]);
+
+  const fetchDeploymentRecords = useCallback(async () => {
+    if (!deployment) {
+      return;
+    }
+
+    try {
+      const response = await axios.get(
+        `${deployment.deployer.deployerApiUrl}/${deployment.applicationDeploymentRequestId}`,
+      );
+
+      const record: Record = response.data;
+      setRecord(record);
+    } catch (err: any) {
+      console.log('Error fetching data from deployer', err);
+    }
+  }, [deployment]);
+
+  const fetchDeployment = useCallback(async () => {
+    if (!projectId) {
+      return;
+    }
+
+    const { deployments } = await client.getDeployments(projectId);
+    setDeployment(deployments[0]);
+  }, [client, projectId]);
+
+  useEffect(() => {
+    fetchDeployment();
+    fetchDeploymentRecords();
+
+    const interval = setInterval(() => {
+      fetchDeploymentRecords();
+    }, FETCH_DEPLOYMENTS_INTERVAL);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [fetchDeployment, fetchDeploymentRecords]);
+
+  useEffect(() => {
+    if (!record) {
+      return;
+    }
+
+    if (record.lastState === 'DEPLOYED') {
+      navigate(`/${orgSlug}/projects/create/success/${projectId}`);
+    }
+  }, [record]);
 
   return (
     <div className="space-y-7">
@@ -42,6 +122,7 @@ const Deploy = () => {
             <ClockOutlineIcon size={16} className="text-elements-mid-em" />
             <Stopwatch
               offsetTimestamp={setStopWatchOffset(Date.now().toString())}
+              isPaused={isDeploymentFailed}
             />
           </div>
         </div>
@@ -60,30 +141,36 @@ const Deploy = () => {
         />
       </div>
 
+      {!isDeploymentFailed ? (
         <div>
           <DeployStep
-          title="Building"
-          status={DeployStatus.COMPLETE}
+            title={record ? 'Submitted' : 'Submitting'}
+            status={record ? DeployStatus.COMPLETE : DeployStatus.PROCESSING}
             step="1"
-          processTime="72000"
           />
+
           <DeployStep
-          title="Deployment summary"
-          status={DeployStatus.PROCESSING}
+            title={
+              record && record.lastState === 'DEPLOYED'
+                ? 'Deployed'
+                : 'Deploying'
+            }
+            status={
+              !record
+                ? DeployStatus.NOT_STARTED
+                : record.lastState === 'DEPLOYED'
+                  ? DeployStatus.COMPLETE
+                  : DeployStatus.PROCESSING
+            }
             step="2"
             startTime={Date.now().toString()}
           />
-        <DeployStep
-          title="Running checks"
-          status={DeployStatus.NOT_STARTED}
-          step="3"
-        />
-        <DeployStep
-          title="Assigning domains"
-          status={DeployStatus.NOT_STARTED}
-          step="4"
-        />
         </div>
+      ) : (
+        <div>
+          <DeployStep title={record!.lastState} status={DeployStatus.ERROR} />
+        </div>
+      )}
     </div>
   );
 };

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

@@ -1,27 +1,16 @@
-import { useState } from 'react';
-
-import { Collapse } from '@snowballtools/material-tailwind-react-fork';
-
 import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
-import FormatMillisecond from '../../FormatMilliSecond';
-import processLogs from '../../../assets/process-logs.json';
 import { cn } from 'utils/classnames';
 import {
   CheckRoundFilledIcon,
   ClockOutlineIcon,
-  CopyIcon,
   LoaderIcon,
-  MinusCircleIcon,
-  PlusIcon,
 } from 'components/shared/CustomIcon';
-import { Button } from 'components/shared/Button';
-import { useToast } from 'components/shared/Toast';
-import { useIntersectionObserver } from 'usehooks-ts';
 
 enum DeployStatus {
   PROCESSING = 'progress',
   COMPLETE = 'complete',
   NOT_STARTED = 'notStarted',
+  ERROR = 'error',
 }
 
 interface DeployStepsProps {
@@ -32,35 +21,11 @@ interface DeployStepsProps {
   processTime?: string;
 }
 
-const DeployStep = ({
-  step,
-  status,
-  title,
-  startTime,
-  processTime,
-}: DeployStepsProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const { toast, dismiss } = useToast();
-  const { isIntersecting: hideGradientOverlay, ref } = useIntersectionObserver({
-    threshold: 1,
-  });
-
-  const disableCollapse = status !== DeployStatus.COMPLETE;
-
+const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
   return (
     <div className="border-b border-border-separator">
-      {/* Collapisble trigger */}
       <button
-        className={cn(
-          'flex justify-between w-full py-5 gap-2',
-          disableCollapse && 'cursor-auto',
-        )}
-        tabIndex={disableCollapse ? -1 : undefined}
-        onClick={() => {
-          if (!disableCollapse) {
-            setIsOpen((val) => !val);
-          }
-        }}
+        className={cn('flex justify-between w-full py-5 gap-2', 'cursor-auto')}
       >
         <div className={cn('grow flex items-center gap-3')}>
           {/* Icon */}
@@ -71,13 +36,7 @@ const DeployStep = ({
               </div>
             )}
             {status === DeployStatus.PROCESSING && (
-              <LoaderIcon className="animate-spin text-elements-link" />
-            )}
-            {status === DeployStatus.COMPLETE && (
-              <div className="text-controls-primary">
-                {!isOpen && <PlusIcon size={24} />}
-                {isOpen && <MinusCircleIcon size={24} />}
-              </div>
+              <LoaderIcon className="animate-spin text-elements-link dark:text-foreground" />
             )}
           </div>
 
@@ -85,7 +44,8 @@ const DeployStep = ({
           <span
             className={cn(
               'text-left text-sm md:text-base',
-              status === DeployStatus.PROCESSING && 'text-elements-link',
+              status === DeployStatus.PROCESSING &&
+                'text-elements-link dark:text-foreground',
             )}
           >
             {title}
@@ -95,8 +55,14 @@ const DeployStep = ({
         {/* Timer */}
         {status === DeployStatus.PROCESSING && (
           <div className="flex items-center gap-1.5">
-            <ClockOutlineIcon size={16} className="text-elements-low-em" />
-            <Stopwatch offsetTimestamp={setStopWatchOffset(startTime!)} />
+            <ClockOutlineIcon
+              size={16}
+              className="text-elements-low-em dark:text-foreground-secondary"
+            />
+            <Stopwatch
+              offsetTimestamp={setStopWatchOffset(startTime!)}
+              isPaused={false}
+            />
           </div>
         )}
         {status === DeployStatus.COMPLETE && (
@@ -107,51 +73,9 @@ const DeployStep = ({
                 size={15}
               />
             </div>
-            <FormatMillisecond time={Number(processTime)} />{' '}
           </div>
         )}
       </button>
-
-      {/* Collapsible */}
-      <Collapse open={isOpen}>
-        <div className="relative text-xs text-elements-low-em h-36 overflow-y-auto">
-          {/* Logs */}
-          {processLogs.map((log, key) => {
-            return (
-              <p className="font-mono" key={key}>
-                {log}
-              </p>
-            );
-          })}
-
-          {/* End of logs ref used for hiding gradient overlay */}
-          <div ref={ref} />
-
-          {/* Overflow gradient overlay  */}
-          {!hideGradientOverlay && (
-            <div className="h-14 w-full sticky bottom-0 inset-x-0 bg-gradient-to-t from-white to-transparent" />
-          )}
-
-          {/* Copy log button */}
-          <div className={cn('sticky bottom-4 left-1/2 flex justify-center')}>
-            <Button
-              size="xs"
-              onClick={() => {
-                navigator.clipboard.writeText(processLogs.join('\n'));
-                toast({
-                  title: 'Logs copied',
-                  variant: 'success',
-                  id: 'logs',
-                  onDismiss: dismiss,
-                });
-              }}
-              leftIcon={<CopyIcon size={16} />}
-            >
-              Copy log
-            </Button>
-          </div>
-        </div>
-      </Collapse>
     </div>
   );
 };

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

@@ -0,0 +1,88 @@
+import { useCallback, useEffect } from 'react';
+
+import { Box, Modal } from '@mui/material';
+
+import {
+  VITE_LACONICD_CHAIN_ID,
+  VITE_WALLET_IFRAME_URL,
+} from 'utils/constants';
+
+const IFrameModal = ({
+  setAccounts,
+  setIsDataReceived,
+  isVisible,
+}: {
+  setAccounts: (accounts: string[]) => void;
+  setIsDataReceived: (isReceived: boolean) => void;
+  isVisible: boolean;
+}) => {
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== VITE_WALLET_IFRAME_URL) return;
+
+      setIsDataReceived(true);
+      if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
+        setAccounts(event.data.data);
+      } else if (event.data.type === 'ERROR') {
+        console.error('Error from wallet:', event.data.message);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  const getDataFromWallet = useCallback(() => {
+    const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
+
+    if (!iframe.contentWindow) {
+      console.error('Iframe not found or not loaded');
+      return;
+    }
+
+    iframe.contentWindow.postMessage(
+      {
+        type: 'REQUEST_WALLET_ACCOUNTS',
+        chainId: VITE_LACONICD_CHAIN_ID,
+      },
+      VITE_WALLET_IFRAME_URL,
+    );
+  }, []);
+
+  return (
+    <Modal open={isVisible} disableEscapeKeyDown keepMounted>
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '90%',
+          maxWidth: '1200px',
+          height: '600px',
+          maxHeight: '80vh',
+          overflow: 'auto',
+          boxShadow: 24,
+          borderRadius: '8px',
+          outline: 'none',
+          bgcolor: 'background.paper',
+        }}
+      >
+        <iframe
+          onLoad={getDataFromWallet}
+          id="walletIframe"
+          src={`${VITE_WALLET_IFRAME_URL}/wallet-embed`}
+          width="100%"
+          height="100%"
+          sandbox="allow-scripts allow-same-origin"
+          className="border rounded-md shadow-sm"
+        ></iframe>
+      </Box>
+    </Modal>
+  );
+};
+
+export default IFrameModal;

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

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
 import { SegmentedControls } from 'components/shared/SegmentedControls';
 import { useState } from 'react';
+import { useMediaQuery } from 'usehooks-ts';
+
 import {
   GithubIcon,
   LockIcon,
@@ -8,7 +10,7 @@ import {
   TemplateIconType,
 } from 'components/shared/CustomIcon';
 import { relativeTimeISO } from 'utils/time';
-import { useMediaQuery } from 'usehooks-ts';
+import templates from 'assets/templates';
 
 export const MockConnectGitCard = () => {
   const [segmentedControlsValue, setSegmentedControlsValue] =
@@ -46,29 +48,6 @@ export const MockConnectGitCard = () => {
     },
   ];
 
-  const TEMPLATE_CONTENT = [
-    {
-      name: 'Web app',
-      icon: 'web',
-    },
-    {
-      name: 'Progressive Web App (PWA)',
-      icon: 'pwa',
-    },
-    {
-      name: 'React Native',
-      icon: 'react-native',
-    },
-    {
-      name: 'Kotlin',
-      icon: 'kotlin',
-    },
-    {
-      name: 'Swift',
-      icon: 'swift',
-    },
-  ];
-
   const renderContent = useMemo(() => {
     if (segmentedControlsValue === 'import') {
       return (
@@ -86,7 +65,7 @@ export const MockConnectGitCard = () => {
     }
     return (
       <div className="grid grid-cols-1 lg:grid-cols-2 relative z-0">
-        {TEMPLATE_CONTENT.map((template, index) => (
+        {templates.map((template, index) => (
           <MockTemplateCard key={index} {...template} />
         ))}
       </div>
@@ -94,7 +73,7 @@ export const MockConnectGitCard = () => {
   }, [segmentedControlsValue]);
 
   return (
-    <div className="relative bg-base-bg shadow-card rounded-2xl px-2 py-2 w-full max-w-[560px] flex flex-col gap-2">
+    <div className="relative dark:bg-overlay bg-base-bg shadow-card dark:shadow-background rounded-2xl px-2 py-2 w-full max-w-[560px] flex flex-col gap-2">
       {/* Content */}
       <SegmentedControls
         value={segmentedControlsValue}
@@ -106,7 +85,7 @@ export const MockConnectGitCard = () => {
       {renderContent}
 
       {/* Shade */}
-      <div className="pointer-events-none z-99 absolute inset-0 rounded-2xl bg-gradient-to-t from-white to-transparent" />
+      <div className="pointer-events-none z-99 absolute inset-0 rounded-2xl bg-gradient-to-t from-white dark:from-overlay to-transparent" />
     </div>
   );
 };
@@ -121,18 +100,18 @@ const MockProjectCard = ({
   visibility?: string;
 }) => {
   return (
-    <div className="group flex items-start sm:items-center gap-3 pl-3 py-3 cursor-pointer rounded-xl hover:bg-base-bg-emphasized relative">
+    <div className="group flex items-start sm:items-center gap-3 pl-3 py-3 cursor-pointer rounded-xl hover:bg-base-bg-emphasized dark:hover:bg-background relative">
       {/* Icon container */}
-      <div className="w-10 h-10 bg-base-bg rounded-md justify-center items-center flex">
+      <div className="w-10 h-10 bg-base-bg dark:bg-background rounded-md justify-center items-center flex">
         <GithubIcon />
       </div>
       {/* Content */}
       <div className="flex flex-1 gap-3 flex-wrap">
         <div className="flex flex-col items-start gap-1">
-          <p className="text-elements-high-em text-sm font-medium tracking-[-0.006em]">
+          <p className="text-elements-high-em text-sm dark:text-foreground font-medium tracking-[-0.006em]">
             {full_name}
           </p>
-          <p className="text-elements-low-em text-xs">
+          <p className="text-elements-low-em text-xs dark:text-foreground-secondary">
             {updated_at && relativeTimeISO(updated_at)}
           </p>
         </div>
@@ -149,13 +128,13 @@ const MockProjectCard = ({
 
 const MockTemplateCard = ({ icon, name }: { icon: string; name: string }) => {
   return (
-    <div className="flex items-center gap-3 px-3 py-3 hover:bg-base-bg-emphasized rounded-2xl group relative cursor-default">
+    <div className="flex items-center gap-3 px-3 py-3 hover:bg-base-bg-emphasized dark:hover:bg-background relative rounded-2xl group relative cursor-default">
       {/* Icon */}
-      <div className="px-1 py-1 rounded-xl bg-base-bg border border-border-interactive/10 shadow-card-sm">
+      <div className="px-1 py-1 rounded-xl bg-base-bg dark:bg-background border border-border-interactive/10 shadow-card-sm">
         <TemplateIcon type={icon as TemplateIconType} />
       </div>
       {/* Name */}
-      <p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em">
+      <p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em dark:text-foreground">
         {name}
       </p>
     </div>

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

@@ -38,36 +38,9 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
       });
     }
 
-    try {
-      setIsLoading(true);
-      const { addProject } = await client.addProject(orgSlug, {
-        name: `${repository.owner?.login}-${repository.name}`,
-        prodBranch: repository.default_branch as string,
-        repository: repository.full_name,
-        // TODO: Compute template from repo
-        template: 'webapp',
-      });
-      if (addProject) {
-        navigate(`import?projectId=${addProject.id}`);
-      } else {
-        toast({
-          id: 'failed-to-create-project',
-          title: 'Failed to create project',
-          variant: 'error',
-          onDismiss: dismiss,
-        });
-      }
-    } catch (error) {
-      console.error((error as Error).message);
-      toast({
-        id: 'failed-to-create-project',
-        title: 'Failed to create project',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
-    } finally {
-      setIsLoading(false);
-    }
+    navigate(
+      `configure?owner=${repository.owner?.login}&name=${repository.name}&defaultBranch=${repository.default_branch}&fullName=${repository.full_name}&orgSlug=${orgSlug}`,
+    );
   }, [client, repository, orgSlug, setIsLoading, navigate, toast]);
 
   return (
@@ -76,21 +49,21 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
       onClick={createProject}
     >
       {/* Icon container */}
-      <div className="w-10 h-10 bg-base-bg rounded-md justify-center items-center flex">
+      <div className="w-10 h-10 bg-base-bg rounded-md justify-center items-center flex dark:bg-overlay">
         <GithubIcon />
       </div>
       {/* Content */}
       <div className="flex flex-1 gap-3 flex-wrap">
         <div className="flex flex-col gap-1">
-          <p className="text-elements-high-em text-sm font-medium tracking-[-0.006em]">
+          <p className="text-elements-high-em dark:text-foreground text-sm font-medium tracking-[-0.006em]">
             {repository.full_name}
           </p>
-          <p className="text-elements-low-em text-xs">
+          <p className="text-elements-low-em dark:text-foreground-secondary text-xs">
             {repository.updated_at && relativeTimeISO(repository.updated_at)}
           </p>
         </div>
         {repository.visibility === 'private' && (
-          <div className="bg-orange-50 border border-orange-200 px-2 py-1 flex items-center gap-1 rounded-lg text-xs text-orange-600 h-fit">
+          <div className="bg-orange-50 border border-orange-200 px-2 py-1 flex items-center gap-1 rounded-lg text-xs text-orange-600 dark:text-error h-fit">
             <LockIcon />
             Private
           </div>

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

@@ -64,9 +64,9 @@ export const RepositoryList = () => {
 
         // Check if selected account is an organization
         if (selectedAccount.value === gitUser.login) {
-          query = query + ` user:${selectedAccount}`;
+          query = query + ` user:${selectedAccount.value}`;
         } else {
-          query = query + ` org:${selectedAccount}`;
+          query = query + ` org:${selectedAccount.value}`;
         }
 
         const result = await octokit.rest.search.repos({
@@ -166,7 +166,9 @@ export const RepositoryList = () => {
         </div>
       ) : (
         <div className="mt-4 p-6 flex flex-col gap-4 items-center justify-center">
-          <p className="text-elements-high-em font-sans">No repository found</p>
+          <p className="text-elements-high-em dark:text-foreground font-sans">
+            No repository found
+          </p>
           <Button
             variant="tertiary"
             leftIcon={<RefreshIcon />}

packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import {
   Deployment,
   DeploymentStatus,
@@ -6,6 +6,15 @@ import {
   Environment,
   Project,
 } from 'gql-client';
+
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Tooltip,
+} from '@mui/material';
+
 import { Avatar } from 'components/shared/Avatar';
 import {
   BranchStrokeIcon,
@@ -18,12 +27,23 @@ import {
 import { Heading } from 'components/shared/Heading';
 import { OverflownText } from 'components/shared/OverflownText';
 import { Tag, TagTheme } from 'components/shared/Tag';
+import { Button } from 'components/shared/Button';
 import { getInitials } from 'utils/geInitials';
 import { relativeTimeMs } from 'utils/time';
 import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
 import { formatAddress } from '../../../../utils/format';
 import { DeploymentMenu } from './DeploymentMenu';
 
+const DEPLOYMENT_LOGS_STYLE = {
+  backgroundColor: 'rgba(0,0,0, .9)',
+  padding: '2em',
+  borderRadius: '0.5em',
+  marginLeft: '0.5em',
+  marginRight: '0.5em',
+  color: 'gray',
+  fontSize: 'small',
+};
+
 interface DeployDetailsCardProps {
   deployment: Deployment;
   currentDeployment: Deployment;
@@ -48,6 +68,14 @@ const DeploymentDetailsCard = ({
   project,
   prodBranchDomains,
 }: DeployDetailsCardProps) => {
+  const [openDialog, setOpenDialog] = useState<boolean>(false);
+  const [deploymentLogs, setDeploymentLogs] = useState<string>(
+    'No deployment logs available',
+  );
+
+  const handleOpenDialog = () => setOpenDialog(true);
+  const handleCloseDialog = () => setOpenDialog(false);
+
   const getIconByDeploymentStatus = (status: DeploymentStatus) => {
     if (
       status === DeploymentStatus.Building ||
@@ -64,26 +92,47 @@ const DeploymentDetailsCard = ({
     }
   };
 
+  const fetchDeploymentLogs = useCallback(async () => {
+    setDeploymentLogs('Loading logs...');
+    handleOpenDialog();
+    const statusUrl = `${deployment.deployer.deployerApiUrl}/${deployment.applicationDeploymentRequestId}`;
+    const statusRes = await fetch(statusUrl, { cache: 'no-store' }).then(
+      (res) => res.json(),
+    );
+    if (!statusRes.logAvailable) {
+      setDeploymentLogs(statusRes.lastState);
+    } else {
+      const logsUrl = `${deployment.deployer.deployerApiUrl}/log/${deployment.applicationDeploymentRequestId}`;
+      const logsRes = await fetch(logsUrl, { cache: 'no-store' }).then((res) =>
+        res.text(),
+      );
+      setDeploymentLogs(logsRes);
+    }
+  }, [deployment.deployer, deployment.applicationDeploymentRequestId]);
+
   const renderDeploymentStatus = useCallback(
     (className?: string) => {
       return (
-        <div className={className}>
+        <Tooltip title="Click to view build logs">
+          <div className={className} style={{ cursor: 'pointer' }}>
             <Tag
               leftIcon={getIconByDeploymentStatus(deployment.status)}
               size="xs"
               type={STATUS_COLORS[deployment.status] ?? 'neutral'}
+              onClick={fetchDeploymentLogs}
             >
               {deployment.status}
             </Tag>
           </div>
+        </Tooltip>
       );
     },
-    [deployment.status, deployment.commitHash],
+    [deployment.status, deployment.commitHash, fetchDeploymentLogs],
   );
 
   return (
     <div className="flex md:flex-row flex-col gap-6 py-4 px-3 pb-6 mb-2 last:mb-0 last:pb-4 border-b border-border-separator last:border-b-transparent relative">
-      <div className="flex-1 flex justify-between w-full md:max-w-[25%] lg:max-w-[28%]">
+      <div className="flex-1 flex justify-between w-full md:max-w-[30%] lg:max-w-[33%]">
         <div className="flex-1 w-full space-y-2 max-w-[90%] sm:max-w-full">
           {/* DEPLOYMENT URL */}
           {deployment.url && (
@@ -96,7 +145,12 @@ const DeploymentDetailsCard = ({
               </OverflownText>
             </Heading>
           )}
-          <span className="text-sm text-elements-low-em tracking-tight">
+          {deployment.deployer.deployerLrn && (
+            <span className="text-sm text-elements-low-em tracking-tight block mt-2">
+              Deployer LRN: {deployment.deployer.deployerLrn}
+            </span>
+          )}
+          <span className="text-sm text-elements-low-em tracking-tight block">
             {deployment.environment === Environment.Production
               ? `Production ${deployment.isCurrent ? '(Current)' : ''}`
               : 'Preview'}
@@ -162,6 +216,20 @@ const DeploymentDetailsCard = ({
           prodBranchDomains={prodBranchDomains}
         />
       </div>
+      <Dialog
+        open={openDialog}
+        onClose={handleCloseDialog}
+        fullWidth
+        maxWidth="md"
+      >
+        <DialogTitle>Deployment logs</DialogTitle>
+        <DialogContent style={DEPLOYMENT_LOGS_STYLE}>
+          {deploymentLogs && <pre>{deploymentLogs}</pre>}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialog}>Close</Button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 };

packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx

@@ -23,6 +23,7 @@ import { useGQLClient } from 'context/GQLClientContext';
 import { cn } from 'utils/classnames';
 import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
 import { useToast } from 'components/shared/Toast';
+import { DeleteDeploymentDialog } from 'components/projects/Dialog/DeleteDeploymentDialog';
 
 interface DeploymentMenuProps extends ComponentPropsWithRef<'div'> {
   deployment: Deployment;
@@ -46,12 +47,16 @@ export const DeploymentMenu = ({
 
   const [changeToProduction, setChangeToProduction] = useState(false);
   const [redeployToProduction, setRedeployToProduction] = useState(false);
+  const [deleteDeploymentDialog, setDeleteDeploymentDialog] = useState(false);
+  const [isConfirmDeleteLoading, setIsConfirmDeleteLoading] = useState(false);
   const [rollbackDeployment, setRollbackDeployment] = useState(false);
   const [assignDomainDialog, setAssignDomainDialog] = useState(false);
+  const [isConfirmButtonLoading, setConfirmButtonLoadingLoading] =
+    useState(false);
 
   const updateDeployment = async () => {
     const isUpdated = await client.updateDeploymentToProd(deployment.id);
-    if (isUpdated) {
+    if (isUpdated.updateDeploymentToProd) {
       await onUpdate();
       toast({
         id: 'deployment_changed_to_production',
@@ -71,7 +76,8 @@ export const DeploymentMenu = ({
 
   const redeployToProd = async () => {
     const isRedeployed = await client.redeployToProd(deployment.id);
-    if (isRedeployed) {
+    setConfirmButtonLoadingLoading(false);
+    if (isRedeployed.redeployToProd) {
       await onUpdate();
       toast({
         id: 'redeployed_to_production',
@@ -94,7 +100,7 @@ export const DeploymentMenu = ({
       project.id,
       deployment.id,
     );
-    if (isRollbacked) {
+    if (isRollbacked.rollbackDeployment) {
       await onUpdate();
       toast({
         id: 'deployment_rolled_back',
@@ -114,11 +120,15 @@ export const DeploymentMenu = ({
 
   const deleteDeployment = async () => {
     const isDeleted = await client.deleteDeployment(deployment.id);
-    if (isDeleted) {
+
+    setIsConfirmDeleteLoading(false);
+    setDeleteDeploymentDialog((preVal) => !preVal);
+
+    if (isDeleted.deleteDeployment) {
       await onUpdate();
       toast({
-        id: 'deployment_deleted',
-        title: 'Deployment deleted',
+        id: 'deployment_removal_requested',
+        title: 'Deployment removal requested',
         variant: 'success',
         onDismiss: dismiss,
       });
@@ -202,7 +212,7 @@ export const DeploymentMenu = ({
             </MenuItem>
             <MenuItem
               className="hover:bg-base-bg-emphasized flex items-center gap-3"
-              onClick={() => deleteDeployment()}
+              onClick={() => setDeleteDeploymentDialog((preVal) => !preVal)}
             >
               <CrossCircleIcon /> Delete deployment
             </MenuItem>
@@ -228,11 +238,13 @@ export const DeploymentMenu = ({
         open={redeployToProduction}
         confirmButtonTitle="Redeploy"
         handleConfirm={async () => {
+          setConfirmButtonLoadingLoading(true);
           await redeployToProd();
           setRedeployToProduction((preVal) => !preVal);
         }}
         deployment={deployment}
         domains={deployment.domain ? [deployment.domain] : []}
+        isConfirmButtonLoading={isConfirmButtonLoading}
       />
       {Boolean(currentDeployment) && (
         <ChangeStateToProductionDialog
@@ -253,6 +265,15 @@ export const DeploymentMenu = ({
         open={assignDomainDialog}
         handleOpen={() => setAssignDomainDialog(!assignDomainDialog)}
       />
+      <DeleteDeploymentDialog
+        open={deleteDeploymentDialog}
+        handleConfirm={async () => {
+          setIsConfirmDeleteLoading(true);
+          await deleteDeployment();
+        }}
+        handleCancel={() => setDeleteDeploymentDialog((preVal) => !preVal)}
+        isConfirmButtonLoading={isConfirmDeleteLoading}
+      />
     </>
   );
 };

packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx

@@ -16,7 +16,7 @@ export const Activity = ({
       <div className="flex items-center justify-between">
         <Heading className="text-lg leading-6 font-medium">Activity</Heading>
         <Button variant="tertiary" size="sm">
-          See all
+          SEE ALL
         </Button>
       </div>
       <div className="mt-5">

packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx

@@ -0,0 +1,182 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Auction, Deployer, Project } from 'gql-client';
+
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from '@mui/material';
+
+import {
+  CheckRoundFilledIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Button, Heading, Tag } from 'components/shared';
+
+const WAIT_DURATION = 5000;
+
+const DIALOG_STYLE = {
+  padding: '2em',
+  borderRadius: '0.5em',
+  marginLeft: '0.5em',
+  marginRight: '0.5em',
+  color: 'gray',
+  fontSize: 'small',
+};
+
+export const AuctionCard = ({ project }: { project: Project }) => {
+  const [auctionStatus, setAuctionStatus] = useState<string>('');
+  const [deployers, setDeployers] = useState<Deployer[]>([]);
+  const [fundsStatus, setFundsStatus] = useState<boolean>(false);
+  const [auctionDetails, setAuctionDetails] = useState<Auction | null>(null);
+  const [openDialog, setOpenDialog] = useState<boolean>(false);
+  const client = useGQLClient();
+
+  const getIconByAuctionStatus = (status: string) =>
+    status === 'completed' ? (
+      <CheckRoundFilledIcon />
+    ) : (
+      <LoadingIcon className="animate-spin" />
+    );
+
+  const checkAuctionStatus = useCallback(async () => {
+    const result = await client.getAuctionData(project.auctionId);
+    setAuctionStatus(result.status);
+    setAuctionDetails(result);
+  }, [project.auctionId, project.deployers, project.fundsReleased]);
+
+  const fetchUpdatedProject = useCallback(async () => {
+    const updatedProject = await client.getProject(project.id);
+    setDeployers(updatedProject.project!.deployers!);
+    setFundsStatus(updatedProject.project!.fundsReleased!);
+  }, [project.id]);
+
+  const fetchData = useCallback(async () => {
+    await Promise.all([checkAuctionStatus(), fetchUpdatedProject()]);
+  }, [checkAuctionStatus, fetchUpdatedProject]);
+
+  useEffect(() => {
+    fetchData();
+
+    const timerId = setInterval(() => {
+      fetchData();
+    }, WAIT_DURATION);
+
+    return () => clearInterval(timerId);
+  }, [fetchData]);
+
+  const renderAuctionStatus = useCallback(
+    () => (
+      <Tag
+        leftIcon={getIconByAuctionStatus(auctionStatus)}
+        size="xs"
+        type={auctionStatus === 'completed' ? 'positive' : 'emphasized'}
+      >
+        {auctionStatus.toUpperCase()}
+      </Tag>
+    ),
+    [auctionStatus],
+  );
+
+  const handleOpenDialog = () => setOpenDialog(true);
+  const handleCloseDialog = () => setOpenDialog(false);
+
+  return (
+    <>
+      <div className="p-3 gap-2 rounded-xl border dark:border-overlay3 border-gray-200 transition-colors hover:bg-base-bg-alternate dark:hover:bg-overlay3 flex flex-col mt-8">
+        <div className="flex justify-between items-center">
+          <Heading className="text-lg leading-6 font-medium">
+            Auction details
+          </Heading>
+          <Button onClick={handleOpenDialog} variant="tertiary" size="sm">
+            VIEW DETAILS
+          </Button>
+        </div>
+
+        <div className="flex justify-between items-center mt-2">
+          <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
+            Auction Id
+          </span>
+          <span className="text-elements-mid-em dark:text-foreground text-sm text-right">
+            {project.auctionId}
+          </span>
+        </div>
+
+        <div className="flex justify-between items-center mt-1">
+          <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
+            Auction Status
+          </span>
+          <div className="ml-2">{renderAuctionStatus()}</div>
+        </div>
+
+        {auctionStatus === 'completed' && (
+          <>
+            {deployers?.length > 0 ? (
+              <div>
+                <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
+                  Deployer LRNs
+                </span>
+                {deployers.map((deployer, index) => (
+                  <p
+                    key={index}
+                    className="text-elements-mid-em dark:text-foreground text-sm"
+                  >
+                    {'\u2022'} {deployer.deployerLrn}
+                  </p>
+                ))}
+
+                <div className="flex justify-between items-center mt-1">
+                  <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
+                    Deployer Funds Status
+                  </span>
+                  <div className="ml-2">
+                    <Tag
+                      size="xs"
+                      type={fundsStatus ? 'positive' : 'emphasized'}
+                    >
+                      {fundsStatus ? 'RELEASED' : 'WAITING'}
+                    </Tag>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="mt-3">
+                <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
+                  No winning deployers
+                </span>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      <Dialog
+        open={openDialog}
+        onClose={handleCloseDialog}
+        fullWidth
+        maxWidth="md"
+        PaperProps={{
+          className: 'dark:bg-overlay2',
+        }}
+      >
+        <DialogTitle className="dark:text-foreground">
+          Auction Details
+        </DialogTitle>
+        <DialogContent style={DIALOG_STYLE}>
+          {auctionDetails && (
+            <pre className="dark:text-foreground-secondary">
+              {JSON.stringify(auctionDetails, null, 2)}
+            </pre>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialog} shape="default">
+            CLOSE
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};

packages/frontend/src/components/projects/project/overview/OverviewInfo.tsx

@@ -18,7 +18,7 @@ export const OverviewInfo = ({
 
   return (
     <div className="flex justify-between gap-2 py-3 text-sm items-center">
-      <div className="flex gap-2 items-center text-elements-high-em">
+      <div className="flex gap-2 items-center text-elements-high-em dark:text-foreground-secondary">
         {styledIcon}
         {label}
       </div>

packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx

@@ -93,11 +93,11 @@ const AddMemberDialog = ({
             />
           </Modal.Body>
           <Modal.Footer>
-            <Button onClick={handleOpen} variant="secondary">
+            <Button onClick={handleOpen} variant="danger" shape="default">
               Cancel
             </Button>
-            <Button type="submit" disabled={!isValid}>
-              Send invite
+            <Button type="submit" disabled={!isValid} shape="default">
+              SEND INVITE
             </Button>
           </Modal.Footer>
         </form>

packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx

@@ -61,7 +61,9 @@ const DeleteProjectDialog = ({
             <Input
               label={
                 "Deleting your project is irreversible. Enter your project's name " +
+                '"' +
                 project.name +
+                '"' +
                 ' below to confirm you want to permanently delete it:'
               }
               id="input"

packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx

@@ -24,7 +24,7 @@ const DisplayEnvironmentVariables = ({
   return (
     <>
       <div
-        className="flex gap-4 p-2"
+        className="flex gap-4 p-2 dark:text-foreground"
         onClick={() => setOpenCollapse((cur) => !cur)}
       >
         {openCollapse ? <ChevronUpSmallIcon /> : <ChevronDownSmallIcon />}
@@ -33,7 +33,7 @@ const DisplayEnvironmentVariables = ({
       </div>
       <Collapse open={openCollapse}>
         {variables.length === 0 ? (
-          <div className="bg-slate-100 rounded-xl flex-col p-4">
+          <div className="bg-slate-100 dark:bg-overlay2 dark:text-foreground rounded-xl flex-col p-4">
             No environment variables added yet. Once you add them, they'll show
             up here.
           </div>

packages/frontend/src/components/projects/project/settings/DomainCard.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Domain, DomainStatus, Project } from 'gql-client';
 
 import {
-  Chip,
   Typography,
   Menu,
   MenuHandler,
@@ -15,6 +14,15 @@ import EditDomainDialog from './EditDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
 import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
 import { useToast } from 'components/shared/Toast';
+import { Tag } from 'components/shared/Tag';
+import {
+  CheckIcon,
+  CrossIcon,
+  GearIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
+import { Heading } from 'components/shared/Heading';
+import { Button } from 'components/shared/Button';
 
 enum RefreshStatus {
   IDLE,
@@ -79,22 +87,29 @@ const DomainCard = ({
     <>
       <div className="flex justify-between py-3">
         <div className="flex justify-start gap-1">
-          <Typography variant="h6">
-            <i>^</i> {domain.name}
-          </Typography>
-          <Chip
-            className="w-fit capitalize"
-            value={domain.status}
-            color={domain.status === DomainStatus.Live ? 'green' : 'orange'}
-            variant="ghost"
-            icon={<i>^</i>}
-          />
+          <Heading as="h6" className="flex-col">
+            {domain.name}{' '}
+            <Tag
+              type={
+                domain.status === DomainStatus.Live ? 'positive' : 'negative'
+              }
+              leftIcon={
+                domain.status === DomainStatus.Live ? (
+                  <CheckIcon />
+                ) : (
+                  <CrossIcon />
+                )
+              }
+            >
+              {domain.status}
+            </Tag>
+          </Heading>
         </div>
 
         <div className="flex justify-start gap-1">
           <i
             id="refresh"
-            className="cursor-pointer w-8 h-8"
+            className="cursor-pointer"
             onClick={() => {
               SetRefreshStatus(RefreshStatus.CHECKING);
               setTimeout(() => {
@@ -102,11 +117,17 @@ const DomainCard = ({
               }, CHECK_FAIL_TIMEOUT);
             }}
           >
-            {refreshStatus === RefreshStatus.CHECKING ? 'L' : 'R'}
+            {refreshStatus === RefreshStatus.CHECKING ? (
+              <LoadingIcon className="animate-spin" />
+            ) : (
+              'L'
+            )}
           </i>
           <Menu placement="bottom-end">
             <MenuHandler>
-              <button className="border-2 rounded-full w-8 h-8">...</button>
+              <Button iconOnly>
+                <GearIcon />
+              </Button>
             </MenuHandler>
             <MenuList>
               <MenuItem
@@ -143,13 +164,13 @@ const DomainCard = ({
       {domain.status === DomainStatus.Pending && (
         <Card className="bg-slate-100 p-4 text-sm">
           {refreshStatus === RefreshStatus.IDLE ? (
-            <Typography variant="small">
+            <Heading>
               ^ Add these records to your domain and refresh to check
-            </Typography>
+            </Heading>
           ) : refreshStatus === RefreshStatus.CHECKING ? (
-            <Typography variant="small" className="text-blue-500">
+            <Heading className="text-blue-500">
               ^ Checking records for {domain.name}
-            </Typography>
+            </Heading>
           ) : (
             <div className="flex gap-2 text-red-500 mb-2">
               <div className="grow">

packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Controller, useForm, SubmitHandler } from 'react-hook-form';
-import toast from 'react-hot-toast';
 import { Domain } from 'gql-client';
 
 import {
@@ -9,10 +8,11 @@ import {
   Option,
 } from '@snowballtools/material-tailwind-react-fork';
 
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
 import { Modal } from 'components/shared/Modal';
 import { Button } from 'components/shared/Button';
 import { Input } from 'components/shared/Input';
+import { useToast } from 'components/shared/Toast';
 
 const DEFAULT_REDIRECT_OPTIONS = ['none'];
 
@@ -40,6 +40,7 @@ const EditDomainDialog = ({
   onUpdate,
 }: EditDomainDialogProp) => {
   const client = useGQLClient();
+  const { toast, dismiss } = useToast();
 
   const getRedirectUrl = (domain: Domain) => {
     const redirectDomain = domain.redirectTo;
@@ -99,10 +100,20 @@ const EditDomainDialog = ({
 
       if (updateDomain) {
         await onUpdate();
-        toast.success(`Domain ${domain.name} has been updated`);
+        toast({
+          id: 'domain_id_updated',
+          title: `Domain ${domain.name} has been updated`,
+          variant: 'success',
+          onDismiss: dismiss,
+        });
       } else {
         reset();
-        toast.error(`Error updating domain ${domain.name}`);
+        toast({
+          id: 'domain_id_error_update',
+          title: `Error updating domain ${domain.name}`,
+          variant: 'error',
+          onDismiss: dismiss,
+        });
       }
 
       handleOpen();