Update staging deployment records with new config values

.gitea/workflows/lint.yaml

@@ -1,29 +0,0 @@
-name: Lint
-
-on:
-  pull_request:
-  push:
-    branches:
-      - main
-
-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

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

README.md

@@ -1,23 +1,232 @@
 # snowballtools-base
 
-This is a [yarn workspace](https://yarnpkg.com/features/workspaces) monorepo for the dashboard.
+## Setup
 
-## Getting Started
+- Clone the `snowballtools-base` repo
 
-### Install dependencies
+  ```bash
+  git clone git@github.com:snowball-tools/snowballtools-base.git
+  cd snowballtools-base
+  ```
 
-In the root of the project, run:
+- Install dependencies in root
 
-```zsh
-yarn
-```
+  ```bash
+  yarn
+  ```
 
-### Build backend
+- Build packages
 
-```zsh
-yarn build --ignore frontend
-```
+  ```bash
+  yarn build --ignore frontend
+  ```
 
-### Environment variables, running the development server, and deployment
+Let us assume the following domains for backend and frontend
+  - Backend server: `api.snowballtools.com`
+  - Frontend app: `dashboard.snowballtools.com`
 
-Follow the instructions in the README.md files of the [backend](packages/backend/README.md) and [frontend](packages/frontend/README.md) packages.
+- 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 --stack fixturenet-laconic-loaded deploy 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
+          ```
+      
+        - Get the REST and GQL endpoint ports of Laconicd and replace the ports for `registryConfig.restEndpoint` and `registryConfig.gqlEndpoint` in backend [config file](packages/backend/environments/local.toml)
+      
+          ```bash
+          # For registryConfig.restEndpoint
+          laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 1317
+          # 0.0.0.0:32777
+      
+          # For registryConfig.gqlEndpoint
+          laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 9473
+          # 0.0.0.0:32771
+          ```
+      
+        - 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
+      REACT_APP_GITHUB_CLIENT_ID = <CLIENT_ID>
+      ```
+    
+    - Set `REACT_APP_GITHUB_PWA_TEMPLATE_REPO` and `REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO` in [.env](packages/frontend/.env) file
+    
+      ```env
+      REACT_APP_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
+      REACT_APP_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
+        REACT_APP_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 `REACT_APP_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file
+      
+        ```env
+        REACT_APP_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
+        REACT_APP_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 `REACT_APP_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file
+      
+        ```env
+        REACT_APP_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
+  ```

build-webapp.sh

@@ -15,8 +15,8 @@ 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_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_wallet_connect_id'
-VITE_LACONICD_CHAIN_ID = 'LACONIC_HOSTED_CONFIG_laconicd_chain_id'
 VITE_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'
+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'
@@ -24,7 +24,7 @@ VITE_TURNKEY_ORGANIZATION_ID = 'LACONIC_HOSTED_CONFIG_turnkey_organization_id'
 EOF
 
 yarn || exit 1
-yarn build --ignore backend || exit 1
+yarn build || exit 1
 
 if [[ ! -d "$OUTPUT_DIR" ]]; then
   echo "Missing output directory: $OUTPUT_DIR" 1>&2

packages/backend/README.md

@@ -1,76 +1 @@
-# 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)
+# Backend for Snowball Tools

packages/backend/environments/local.toml.example

@@ -3,12 +3,9 @@
   port = 8000
   gqlPath = "/graphql"
   [server.session]
-    secret = ""
-    # Frontend webapp URL origin
+    secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi"
     appOriginUrl = "http://localhost:3000"
-    # Set to true if server running behind proxy
     trustProxy = false
-    # Backend URL hostname
     domain = "localhost"
 
 [database]
@@ -22,7 +19,6 @@
 
 [registryConfig]
   fetchDeploymentRecordDelay = 5000
-  checkAuctionStatusDelay = 5000
   restEndpoint = "http://localhost:1317"
   gqlEndpoint = "http://localhost:9473/api"
   chainId = "laconic_9000-1"
@@ -30,14 +26,9 @@
   bondId = ""
   authority = ""
   [registryConfig.fee]
-    gas = ""
-    fees = ""
-    gasPrice = "1alnt"
+    amount = "200000"
+    denom = "aphoton"
+    gas = "750000"
 
-# 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"
+[misc]
+  projectDomain = "apps.snowballtools.com"

packages/backend/package.json

@@ -1,13 +1,12 @@
 {
   "name": "backend",
-  "license": "UNLICENSED",
   "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",
@@ -19,7 +18,6 @@
     "cors": "^2.8.5",
     "debug": "^4.3.1",
     "express": "^4.18.2",
-    "express-async-errors": "^3.1.1",
     "express-session": "^1.18.0",
     "fs-extra": "^11.2.0",
     "graphql": "^16.8.1",
@@ -45,7 +43,6 @@
     "lint": "tsc --noEmit",
     "test:registry:init": "DEBUG=snowball:* ts-node ./test/initialize-registry.ts",
     "test:registry:publish-deploy-records": "DEBUG=snowball:* ts-node ./test/publish-deploy-records.ts",
-    "test:registry:publish-deployment-removal-records": "DEBUG=snowball:* ts-node ./test/publish-deployment-removal-records.ts",
     "test:db:load:fixtures": "DEBUG=snowball:* ts-node ./test/initialize-db.ts",
     "test:db:delete": "DEBUG=snowball:* ts-node ./test/delete-db.ts"
   },

packages/backend/src/config.ts

@@ -34,21 +34,16 @@ 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 AuctionConfig {
-  commitFee: string;
-  commitsDuration: string;
-  revealFee: string;
-  revealsDuration: string;
-  denom: string;
+export interface MiscConfig {
+  projectDomain: string;
 }
 
 export interface Config {
@@ -56,7 +51,7 @@ export interface Config {
   database: DatabaseConfig;
   gitHub: GitHubConfig;
   registryConfig: RegistryConfig;
-  auction: AuctionConfig;
+  misc: MiscConfig;
   turnkey: {
     apiBaseUrl: string;
     apiPublicKey: string;

packages/backend/src/database.ts

@@ -3,9 +3,7 @@ import {
   DeepPartial,
   FindManyOptions,
   FindOneOptions,
-  FindOptionsWhere,
-  IsNull,
-  Not
+  FindOptionsWhere
 } from 'typeorm';
 import path from 'path';
 import debug from 'debug';
@@ -13,7 +11,7 @@ import assert from 'assert';
 import { customAlphabet } from 'nanoid';
 import { lowercase, numbers } from 'nanoid-dictionary';
 
-import { DatabaseConfig } from './config';
+import { DatabaseConfig, MiscConfig } from './config';
 import { User } from './entity/User';
 import { Organization } from './entity/Organization';
 import { Project } from './entity/Project';
@@ -23,7 +21,6 @@ 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';
 
@@ -34,8 +31,9 @@ const nanoid = customAlphabet(lowercase + numbers, 8);
 // TODO: Fix order of methods
 export class Database {
   private dataSource: DataSource;
+  private projectDomain: string;
 
-  constructor({ dbPath }: DatabaseConfig) {
+  constructor ({ dbPath } : DatabaseConfig, { projectDomain } : MiscConfig) {
     this.dataSource = new DataSource({
       type: 'better-sqlite3',
       database: dbPath,
@@ -43,9 +41,11 @@ export class Database {
       synchronize: true,
       logging: false
     });
+
+    this.projectDomain = projectDomain;
   }
 
-  async init(): Promise<void> {
+  async init (): Promise<void> {
     await this.dataSource.initialize();
     log('database initialized');
 
@@ -58,21 +58,21 @@ export class Database {
     }
   }
 
-  async getUser(options: FindOneOptions<User>): Promise<User | null> {
+  async getUser (options: FindOneOptions<User>): Promise<User | null> {
     const userRepository = this.dataSource.getRepository(User);
     const user = await userRepository.findOne(options);
 
     return user;
   }
 
-  async addUser(data: DeepPartial<User>): Promise<User> {
+  async addUser (data: DeepPartial<User>): Promise<User> {
     const userRepository = this.dataSource.getRepository(User);
     const user = await userRepository.save(data);
 
     return user;
   }
 
-  async updateUser(user: User, data: DeepPartial<User>): Promise<boolean> {
+  async updateUser (user: User, data: DeepPartial<User>): Promise<boolean> {
     const userRepository = this.dataSource.getRepository(User);
     const updateResult = await userRepository.update({ id: user.id }, data);
     assert(updateResult.affected);
@@ -80,7 +80,7 @@ export class Database {
     return updateResult.affected > 0;
   }
 
-  async getOrganizations(
+  async getOrganizations (
     options: FindManyOptions<Organization>
   ): Promise<Organization[]> {
     const organizationRepository = this.dataSource.getRepository(Organization);
@@ -89,7 +89,7 @@ export class Database {
     return organizations;
   }
 
-  async getOrganization(
+  async getOrganization (
     options: FindOneOptions<Organization>
   ): Promise<Organization | null> {
     const organizationRepository = this.dataSource.getRepository(Organization);
@@ -98,7 +98,7 @@ export class Database {
     return organization;
   }
 
-  async getOrganizationsByUserId(userId: string): Promise<Organization[]> {
+  async getOrganizationsByUserId (userId: string): Promise<Organization[]> {
     const organizationRepository = this.dataSource.getRepository(Organization);
 
     const userOrgs = await organizationRepository.find({
@@ -114,21 +114,21 @@ export class Database {
     return userOrgs;
   }
 
-  async addUserOrganization(data: DeepPartial<UserOrganization>): Promise<UserOrganization> {
+  async addUserOrganization (data: DeepPartial<UserOrganization>): Promise<UserOrganization> {
     const userOrganizationRepository = this.dataSource.getRepository(UserOrganization);
     const newUserOrganization = await userOrganizationRepository.save(data);
 
     return newUserOrganization;
   }
 
-  async getProjects(options: FindManyOptions<Project>): Promise<Project[]> {
+  async getProjects (options: FindManyOptions<Project>): Promise<Project[]> {
     const projectRepository = this.dataSource.getRepository(Project);
     const projects = await projectRepository.find(options);
 
     return projects;
   }
 
-  async getProjectById(projectId: string): Promise<Project | null> {
+  async getProjectById (projectId: string): Promise<Project | null> {
     const projectRepository = this.dataSource.getRepository(Project);
 
     const project = await projectRepository
@@ -140,9 +140,7 @@ 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
@@ -152,25 +150,7 @@ 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(
+  async getProjectsInOrganization (
     userId: string,
     organizationSlug: string
   ): Promise<Project[]> {
@@ -201,7 +181,7 @@ export class Database {
   /**
    * Get deployments with specified filter
    */
-  async getDeployments(
+  async getDeployments (
     options: FindManyOptions<Deployment>
   ): Promise<Deployment[]> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
@@ -210,13 +190,12 @@ export class Database {
     return deployments;
   }
 
-  async getDeploymentsByProjectId(projectId: string): Promise<Deployment[]> {
+  async getDeploymentsByProjectId (projectId: string): Promise<Deployment[]> {
     return this.getDeployments({
       relations: {
         project: true,
         domain: true,
-        createdBy: true,
-        deployer: true,
+        createdBy: true
       },
       where: {
         project: {
@@ -229,7 +208,7 @@ export class Database {
     });
   }
 
-  async getDeployment(
+  async getDeployment (
     options: FindOneOptions<Deployment>
   ): Promise<Deployment | null> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
@@ -238,14 +217,14 @@ export class Database {
     return deployment;
   }
 
-  async getDomains(options: FindManyOptions<Domain>): Promise<Domain[]> {
+  async getDomains (options: FindManyOptions<Domain>): Promise<Domain[]> {
     const domainRepository = this.dataSource.getRepository(Domain);
     const domains = await domainRepository.find(options);
 
     return domains;
   }
 
-  async addDeployment(data: DeepPartial<Deployment>): Promise<Deployment> {
+  async addDeployment (data: DeepPartial<Deployment>): Promise<Deployment> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
 
     const id = nanoid();
@@ -259,7 +238,7 @@ export class Database {
     return deployment;
   }
 
-  async getProjectMembersByProjectId(
+  async getProjectMembersByProjectId (
     projectId: string
   ): Promise<ProjectMember[]> {
     const projectMemberRepository =
@@ -280,7 +259,7 @@ export class Database {
     return projectMembers;
   }
 
-  async getEnvironmentVariablesByProjectId(
+  async getEnvironmentVariablesByProjectId (
     projectId: string,
     filter?: FindOptionsWhere<EnvironmentVariable>
   ): Promise<EnvironmentVariable[]> {
@@ -299,7 +278,7 @@ export class Database {
     return environmentVariables;
   }
 
-  async removeProjectMemberById(projectMemberId: string): Promise<boolean> {
+  async removeProjectMemberById (projectMemberId: string): Promise<boolean> {
     const projectMemberRepository =
       this.dataSource.getRepository(ProjectMember);
 
@@ -314,7 +293,7 @@ export class Database {
     }
   }
 
-  async updateProjectMemberById(
+  async updateProjectMemberById (
     projectMemberId: string,
     data: DeepPartial<ProjectMember>
   ): Promise<boolean> {
@@ -328,7 +307,7 @@ export class Database {
     return Boolean(updateResult.affected);
   }
 
-  async addProjectMember(
+  async addProjectMember (
     data: DeepPartial<ProjectMember>
   ): Promise<ProjectMember> {
     const projectMemberRepository =
@@ -338,7 +317,7 @@ export class Database {
     return newProjectMember;
   }
 
-  async addEnvironmentVariables(
+  async addEnvironmentVariables (
     data: DeepPartial<EnvironmentVariable>[]
   ): Promise<EnvironmentVariable[]> {
     const environmentVariableRepository =
@@ -349,7 +328,7 @@ export class Database {
     return savedEnvironmentVariables;
   }
 
-  async updateEnvironmentVariable(
+  async updateEnvironmentVariable (
     environmentVariableId: string,
     data: DeepPartial<EnvironmentVariable>
   ): Promise<boolean> {
@@ -363,7 +342,7 @@ export class Database {
     return Boolean(updateResult.affected);
   }
 
-  async deleteEnvironmentVariable(
+  async deleteEnvironmentVariable (
     environmentVariableId: string
   ): Promise<boolean> {
     const environmentVariableRepository =
@@ -379,7 +358,7 @@ export class Database {
     }
   }
 
-  async getProjectMemberById(projectMemberId: string): Promise<ProjectMember> {
+  async getProjectMemberById (projectMemberId: string): Promise<ProjectMember> {
     const projectMemberRepository =
       this.dataSource.getRepository(ProjectMember);
 
@@ -402,7 +381,7 @@ export class Database {
     return projectMemberWithProject[0];
   }
 
-  async getProjectsBySearchText(
+  async getProjectsBySearchText (
     userId: string,
     searchText: string
   ): Promise<Project[]> {
@@ -424,14 +403,14 @@ export class Database {
     return projects;
   }
 
-  async updateDeploymentById(
+  async updateDeploymentById (
     deploymentId: string,
     data: DeepPartial<Deployment>
   ): Promise<boolean> {
     return this.updateDeployment({ id: deploymentId }, data);
   }
 
-  async updateDeployment(
+  async updateDeployment (
     criteria: FindOptionsWhere<Deployment>,
     data: DeepPartial<Deployment>
   ): Promise<boolean> {
@@ -441,7 +420,7 @@ export class Database {
     return Boolean(updateResult.affected);
   }
 
-  async updateDeploymentsByProjectIds(
+  async updateDeploymentsByProjectIds (
     projectIds: string[],
     data: DeepPartial<Deployment>
   ): Promise<boolean> {
@@ -457,20 +436,7 @@ export class Database {
     return Boolean(updateResult.affected);
   }
 
-  async deleteDeploymentById(deploymentId: string): Promise<boolean> {
-    const deploymentRepository = this.dataSource.getRepository(Deployment);
-    const deployment = await deploymentRepository.findOneOrFail({
-      where: {
-        id: deploymentId
-      }
-    });
-
-    const deleteResult = await deploymentRepository.softRemove(deployment);
-
-    return Boolean(deleteResult);
-  }
-
-  async addProject(user: User, organizationId: string, data: DeepPartial<Project>): Promise<Project> {
+  async addProject (user: User, organizationId: string, data: DeepPartial<Project>): Promise<Project> {
     const projectRepository = this.dataSource.getRepository(Project);
 
     // TODO: Check if organization exists
@@ -486,16 +452,12 @@ 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(
+  async updateProjectById (
     projectId: string,
     data: DeepPartial<Project>
   ): Promise<boolean> {
@@ -508,7 +470,7 @@ export class Database {
     return Boolean(updateResult.affected);
   }
 
-  async deleteProjectById(projectId: string): Promise<boolean> {
+  async deleteProjectById (projectId: string): Promise<boolean> {
     const projectRepository = this.dataSource.getRepository(Project);
     const project = await projectRepository.findOneOrFail({
       where: {
@@ -524,7 +486,7 @@ export class Database {
     return Boolean(deleteResult);
   }
 
-  async deleteDomainById(domainId: string): Promise<boolean> {
+  async deleteDomainById (domainId: string): Promise<boolean> {
     const domainRepository = this.dataSource.getRepository(Domain);
 
     const deleteResult = await domainRepository.softDelete({ id: domainId });
@@ -536,21 +498,21 @@ export class Database {
     }
   }
 
-  async addDomain(data: DeepPartial<Domain>): Promise<Domain> {
+  async addDomain (data: DeepPartial<Domain>): Promise<Domain> {
     const domainRepository = this.dataSource.getRepository(Domain);
     const newDomain = await domainRepository.save(data);
 
     return newDomain;
   }
 
-  async getDomain(options: FindOneOptions<Domain>): Promise<Domain | null> {
+  async getDomain (options: FindOneOptions<Domain>): Promise<Domain | null> {
     const domainRepository = this.dataSource.getRepository(Domain);
     const domain = await domainRepository.findOne(options);
 
     return domain;
   }
 
-  async updateDomainById(
+  async updateDomainById (
     domainId: string,
     data: DeepPartial<Domain>
   ): Promise<boolean> {
@@ -560,7 +522,7 @@ export class Database {
     return Boolean(updateResult.affected);
   }
 
-  async getDomainsByProjectId(
+  async getDomainsByProjectId (
     projectId: string,
     filter?: FindOptionsWhere<Domain>
   ): Promise<Domain[]> {
@@ -580,24 +542,4 @@ 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

@@ -1,26 +0,0 @@
-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

@@ -6,15 +6,13 @@ import {
   UpdateDateColumn,
   ManyToOne,
   OneToOne,
-  JoinColumn,
-  DeleteDateColumn
+  JoinColumn
 } from 'typeorm';
 
 import { Project } from './Project';
 import { Domain } from './Domain';
 import { User } from './User';
-import { Deployer } from './Deployer';
-import { AppDeploymentRecordAttributes, AppDeploymentRemovalRecordAttributes } from '../types';
+import { AppDeploymentRecordAttributes } from '../types';
 
 export enum Environment {
   Production = 'Production',
@@ -26,7 +24,6 @@ export enum DeploymentStatus {
   Building = 'Building',
   Ready = 'Ready',
   Error = 'Error',
-  Deleting = 'Deleting',
 }
 
 export interface ApplicationDeploymentRequest {
@@ -34,22 +31,10 @@ 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 ApplicationRecord {
   type: string;
   version: string;
@@ -114,22 +99,6 @@ export class Deployment {
   @Column('simple-json', { nullable: true })
     applicationDeploymentRecordData!: AppDeploymentRecordAttributes | null;
 
-  @Column('varchar', { nullable: true })
-    applicationDeploymentRemovalRequestId!: string | null;
-
-  @Column('simple-json', { nullable: true })
-    applicationDeploymentRemovalRequestData!: ApplicationDeploymentRemovalRequest | null;
-
-  @Column('varchar', { nullable: true })
-    applicationDeploymentRemovalRecordId!: string | null;
-
-  @Column('simple-json', { nullable: true })
-    applicationDeploymentRemovalRecordData!: AppDeploymentRemovalRecordAttributes | null;
-
-  @ManyToOne(() => Deployer)
-  @JoinColumn({ name: 'deployerLrn' })
-    deployer!: Deployer;
-
   @Column({
     enum: Environment
   })
@@ -152,7 +121,4 @@ export class Deployment {
 
   @UpdateDateColumn()
     updatedAt!: Date;
-
-  @DeleteDateColumn()
-    deletedAt!: Date | null;
 }

packages/backend/src/entity/Project.ts

@@ -7,16 +7,13 @@ import {
   ManyToOne,
   JoinColumn,
   OneToMany,
-  DeleteDateColumn,
-  JoinTable,
-  ManyToMany
+  DeleteDateColumn
 } 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 {
@@ -49,20 +46,6 @@ 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;
@@ -70,10 +53,6 @@ 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'
   })
@@ -82,6 +61,9 @@ export class Project {
   @Column('varchar')
     icon!: string;
 
+  @Column('varchar')
+    subDomain!: string;
+
   @CreateDateColumn()
     createdAt!: Date;
 

packages/backend/src/index.ts

@@ -1,4 +1,3 @@
-import 'express-async-errors';
 import 'reflect-metadata';
 import debug from 'debug';
 import fs from 'fs';
@@ -17,7 +16,7 @@ const log = debug('snowball:server');
 const OAUTH_CLIENT_TYPE = 'oauth-app';
 
 export const main = async (): Promise<void> => {
-  const { server, database, gitHub, registryConfig } = await getConfig();
+  const { server, database, gitHub, registryConfig, misc } = await getConfig();
 
   const app = new OAuthApp({
     clientType: OAUTH_CLIENT_TYPE,
@@ -25,7 +24,7 @@ export const main = async (): Promise<void> => {
     clientSecret: gitHub.oAuth.clientSecret,
   });
 
-  const db = new Database(database);
+  const db = new Database(database, misc);
   await db.init();
 
   const registry = new Registry(registryConfig);

packages/backend/src/registry.ts

@@ -1,67 +1,57 @@
-import assert from 'assert';
 import debug from 'debug';
-import { DateTime } from 'luxon';
-import { Octokit } from 'octokit';
+import assert from 'assert';
 import { inc as semverInc } from 'semver';
-import { DeepPartial } from 'typeorm';
+import { DateTime } from 'luxon';
 
-import { Account, DEFAULT_GAS_ESTIMATION_MULTIPLIER, Registry as LaconicRegistry, getGasPrice, parseGasAndFees } from '@cerc-io/registry-sdk';
-import { DeliverTxResponse, IndexedTx } from '@cosmjs/stargate';
+import { Registry as LaconicRegistry } from '@snowballtools/laconic-sdk';
 
 import { RegistryConfig } from './config';
 import {
   ApplicationRecord,
   Deployment,
-  ApplicationDeploymentRequest,
-  ApplicationDeploymentRemovalRequest
+  ApplicationDeploymentRequest
 } from './entity/Deployment';
-import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord } from './types';
-import { getConfig, getRepoDetails, registryTransactionWithRetry, sleep } from './utils';
+import { AppDeploymentRecord, PackageJSON } from './types';
+import { 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 registry-sdk/watcher-ts
+// TODO: Move registry code to laconic-sdk/watcher-ts
 export class Registry {
   private registry: LaconicRegistry;
   private registryConfig: RegistryConfig;
 
-  constructor(registryConfig: RegistryConfig) {
+  constructor (registryConfig: RegistryConfig) {
     this.registryConfig = registryConfig;
-
-    const gasPrice = getGasPrice(registryConfig.fee.gasPrice);
-
     this.registry = new LaconicRegistry(
       registryConfig.gqlEndpoint,
       registryConfig.restEndpoint,
-      { chainId: registryConfig.chainId, gasPrice }
+      registryConfig.chainId
     );
   }
 
-  async createApplicationRecord({
-    octokit,
-    repository,
+  async createApplicationRecord ({
+    appName,
+    packageJSON,
     commitHash,
     appType,
+    repoUrl
   }: {
-    octokit: Octokit
-    repository: string;
+    appName: string;
+    packageJSON: PackageJSON;
     commitHash: string;
     appType: string;
+    repoUrl: string;
   }): Promise<{
     applicationRecordId: string;
     applicationRecordData: ApplicationRecord;
   }> {
-    const { repo, repoUrl, packageJSON } = await getRepoDetails(octokit, repository, commitHash)
-    // Use registry-sdk to publish record
+    // Use laconic-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(
@@ -94,7 +84,7 @@ export class Registry {
       repository_ref: commitHash,
       repository: [repoUrl],
       app_type: appType,
-      name: repo,
+      name: appName,
       ...(packageJSON.description && { description: packageJSON.description }),
       ...(packageJSON.homepage && { homepage: packageJSON.homepage }),
       ...(packageJSON.license && { license: packageJSON.license }),
@@ -107,158 +97,68 @@ export class Registry {
       ...(packageJSON.version && { app_version: packageJSON.version })
     };
 
-    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.privateKey,
-        fee
-      )
+    const result = await this.registry.setRecord(
+      {
+        privateKey: this.registryConfig.privateKey,
+        record: applicationRecord,
+        bondId: this.registryConfig.bondId
+      },
+      '',
+      this.registryConfig.fee
     );
 
-    log(`Published application record ${result.id}`);
     log('Application record data:', applicationRecord);
 
-    // TODO: Discuss computation of LRN
-    const lrn = this.getLrn(repo);
-    log(`Setting name: ${lrn} for record ID: ${result.id}`);
+    // TODO: Discuss computation of CRN
+    const crn = this.getCrn(appName);
+    log(`Setting name: ${crn} for record ID: ${result.data.id}`);
 
     await sleep(SLEEP_DURATION);
-    await registryTransactionWithRetry(() =>
-      this.registry.setName(
-        {
-          cid: result.id,
-          lrn
-        },
-        this.registryConfig.privateKey,
-        fee
-      )
+    await this.registry.setName(
+      { cid: result.data.id, crn },
+      this.registryConfig.privateKey,
+      this.registryConfig.fee
     );
 
     await sleep(SLEEP_DURATION);
-    await registryTransactionWithRetry(() =>
-      this.registry.setName(
-        {
-          cid: result.id,
-          lrn: `${lrn}@${applicationRecord.app_version}`
-        },
-        this.registryConfig.privateKey,
-        fee
-      )
+    await this.registry.setName(
+      { cid: result.data.id, crn: `${crn}@${applicationRecord.app_version}` },
+      this.registryConfig.privateKey,
+      this.registryConfig.fee
     );
 
     await sleep(SLEEP_DURATION);
-    await registryTransactionWithRetry(() =>
-      this.registry.setName(
-        {
-          cid: result.id,
-          lrn: `${lrn}@${applicationRecord.repository_ref}`
-        },
-        this.registryConfig.privateKey,
-        fee
-      )
+    await this.registry.setName(
+      {
+        cid: result.data.id,
+        crn: `${crn}@${applicationRecord.repository_ref}`
+      },
+      this.registryConfig.privateKey,
+      this.registryConfig.fee
     );
 
     return {
-      applicationRecordId: result.id,
+      applicationRecordId: result.data.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: {
+  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 lrn = this.getLrn(data.appName);
-    const records = await this.registry.resolveNames([lrn]);
+    const crn = this.getCrn(data.appName);
+    const records = await this.registry.resolveNames([crn]);
     const applicationRecord = records[0];
 
     if (!applicationRecord) {
-      throw new Error(`No record found for ${lrn}`);
+      throw new Error(`No record found for ${crn}`);
     }
 
     // Create record of type ApplicationDeploymentRequest and publish
@@ -266,9 +166,12 @@ export class Registry {
       type: APP_DEPLOYMENT_REQUEST_TYPE,
       version: '1.0.0',
       name: `${applicationRecord.attributes.name}@${applicationRecord.attributes.app_version}`,
-      application: `${lrn}@${applicationRecord.attributes.app_version}`,
+      application: `${crn}@${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
@@ -279,87 +182,32 @@ 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 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.privateKey,
-        fee
-      )
+    const result = await this.registry.setRecord(
+      {
+        privateKey: this.registryConfig.privateKey,
+        record: applicationDeploymentRequest,
+        bondId: this.registryConfig.bondId
+      },
+      '',
+      this.registryConfig.fee
     );
-
-    log(`Application deployment request record published: ${result.id}`);
+    log(`Application deployment request record published: ${result.data.id}`);
     log('Application deployment request data:', applicationDeploymentRequest);
 
     return {
-      applicationDeploymentRequestId: result.id,
+      applicationDeploymentRequestId: result.data.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
    */
-  async getDeploymentRecords(
+  async getDeploymentRecords (
     deployments: Deployment[]
   ): Promise<AppDeploymentRecord[]> {
     // Fetch ApplicationDeploymentRecords for corresponding ApplicationRecord set in deployments
@@ -371,165 +219,18 @@ export class Registry {
       true
     );
 
-    // Filter records with ApplicationDeploymentRequestId ID and Deployment specific URL
+    // Filter records with ApplicationRecord ID and Deployment specific URL
     return records.filter((record: AppDeploymentRecord) =>
       deployments.some(
         (deployment) =>
-          deployment.applicationDeploymentRequestId === record.attributes.request &&
+          deployment.applicationRecordId === record.attributes.application &&
           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
-   */
-  async getDeploymentRecordsByFilter(filter: { [key: string]: any }): Promise<AppDeploymentRecord[]> {
-    return this.registry.queryRecords(
-      {
-        type: APP_DEPLOYMENT_RECORD_TYPE,
-        ...filter
-      },
-      true
-    );
-  }
-
-  /**
-   * Fetch ApplicationDeploymentRemovalRecords for deployments
-   */
-  async getDeploymentRemovalRecords(
-    deployments: Deployment[]
-  ): Promise<AppDeploymentRemovalRecord[]> {
-    // Fetch ApplicationDeploymentRemovalRecords for corresponding ApplicationDeploymentRecord set in deployments
-    const records = await this.registry.queryRecords(
-      {
-        type: APP_DEPLOYMENT_REMOVAL_RECORD_TYPE
-      },
-      true
-    );
-
-    // Filter records with ApplicationDeploymentRecord and ApplicationDeploymentRemovalRequest IDs
-    return records.filter((record: AppDeploymentRemovalRecord) =>
-      deployments.some(
-        (deployment) =>
-          deployment.applicationDeploymentRemovalRequestId === record.attributes.request &&
-          deployment.applicationDeploymentRecordId === record.attributes.deployment
-      )
-    );
-  }
-
-  async createApplicationDeploymentRemovalRequest(data: {
-    deploymentId: string;
-    deployerLrn: string;
-    auctionId?: string | null;
-    payment?: string | null;
-  }): Promise<{
-    applicationDeploymentRemovalRequestId: string;
-    applicationDeploymentRemovalRequestData: ApplicationDeploymentRemovalRequest;
-  }> {
-    const applicationDeploymentRemovalRequest = {
-      type: APP_DEPLOYMENT_REMOVAL_REQUEST_TYPE,
-      version: '1.0.0',
-      deployment: data.deploymentId,
-      deployer: data.deployerLrn,
-      ...(data.auctionId && { auction: data.auctionId }),
-      ...(data.payment && { payment: data.payment }),
-    };
-
-    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.privateKey,
-        fee
-      )
-    );
-
-    log(`Application deployment removal request record published: ${result.id}`);
-    log('Application deployment removal request data:', applicationDeploymentRemovalRequest);
-
-    return {
-      applicationDeploymentRemovalRequestId: result.id,
-      applicationDeploymentRemovalRequestData: applicationDeploymentRemovalRequest
-    };
-  }
-
-  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 {
+  getCrn (appName: string): string {
     assert(this.registryConfig.authority, "Authority doesn't exist");
-    return `lrn://${this.registryConfig.authority}/applications/${appName}`;
+    return `crn://${this.registryConfig.authority}/applications/${appName}`;
   }
 }

packages/backend/src/resolvers.ts

@@ -6,7 +6,6 @@ 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');
 
@@ -18,23 +17,16 @@ export const createResolvers = async (service: Service): Promise<any> => {
         return context.user;
       },
 
-      organizations: async (_: any, __: any, context: any) => {
+      organizations: async (_:any, __: any, context: any) => {
         return service.getOrganizationsByUserId(context.user);
       },
 
-      project: async (_: any, { projectId }: { projectId: string }, context: any) => {
-        return service.getProjectById(context.user, projectId);
+      project: async (_: any, { projectId }: { projectId: string }) => {
+        return service.getProjectById(projectId);
       },
 
-      projectsInOrganization: async (
-        _: any,
-        { organizationSlug }: { organizationSlug: string },
-        context: any,
-      ) => {
-        return service.getProjectsInOrganization(
-          context.user,
-          organizationSlug,
-        );
+      projectsInOrganization: async (_: any, { organizationSlug }: {organizationSlug: string }, context: any) => {
+        return service.getProjectsInOrganization(context.user, organizationSlug);
       },
 
       deployments: async (_: any, { projectId }: { projectId: string }) => {
@@ -43,7 +35,7 @@ export const createResolvers = async (service: Service): Promise<any> => {
 
       environmentVariables: async (
         _: any,
-        { projectId }: { projectId: string },
+        { projectId }: { projectId: string }
       ) => {
         return service.getEnvironmentVariablesByProjectId(projectId);
       },
@@ -52,11 +44,7 @@ export const createResolvers = async (service: Service): Promise<any> => {
         return service.getProjectMembersByProjectId(projectId);
       },
 
-      searchProjects: async (
-        _: any,
-        { searchText }: { searchText: string },
-        context: any,
-      ) => {
+      searchProjects: async (_: any, { searchText }: { searchText: string }, context: any) => {
         return service.searchProjects(context.user, searchText);
       },
 
@@ -64,37 +52,11 @@ export const createResolvers = async (service: Service): Promise<any> => {
         _: any,
         {
           projectId,
-          filter,
-        }: { projectId: string; filter?: FindOptionsWhere<Domain> },
+          filter
+        }: { projectId: string; filter?: FindOptionsWhere<Domain> }
       ) => {
         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
@@ -102,13 +64,10 @@ export const createResolvers = async (service: Service): Promise<any> => {
       removeProjectMember: async (
         _: any,
         { projectMemberId }: { projectMemberId: string },
-        context: any,
+        context: any
       ) => {
         try {
-          return await service.removeProjectMember(
-            context.user,
-            projectMemberId,
-          );
+          return await service.removeProjectMember(context.user, projectMemberId);
         } catch (err) {
           log(err);
           return false;
@@ -119,13 +78,13 @@ export const createResolvers = async (service: Service): Promise<any> => {
         _: any,
         {
           projectMemberId,
-          data,
+          data
         }: {
           projectMemberId: string;
           data: {
             permissions: Permission[];
           };
-        },
+        }
       ) => {
         try {
           return await service.updateProjectMember(projectMemberId, data);
@@ -139,14 +98,14 @@ export const createResolvers = async (service: Service): Promise<any> => {
         _: any,
         {
           projectId,
-          data,
+          data
         }: {
           projectId: string;
           data: {
             email: string;
             permissions: Permission[];
           };
-        },
+        }
       ) => {
         try {
           return Boolean(await service.addProjectMember(projectId, data));
@@ -160,15 +119,15 @@ export const createResolvers = async (service: Service): Promise<any> => {
         _: any,
         {
           projectId,
-          data,
+          data
         }: {
           projectId: string;
           data: { environments: string[]; key: string; value: string }[];
-        },
+        }
       ) => {
         try {
           return Boolean(
-            await service.addEnvironmentVariables(projectId, data),
+            await service.addEnvironmentVariables(projectId, data)
           );
         } catch (err) {
           log(err);
@@ -180,16 +139,16 @@ export const createResolvers = async (service: Service): Promise<any> => {
         _: any,
         {
           environmentVariableId,
-          data,
+          data
         }: {
           environmentVariableId: string;
           data: DeepPartial<EnvironmentVariable>;
-        },
+        }
       ) => {
         try {
           return await service.updateEnvironmentVariable(
             environmentVariableId,
-            data,
+            data
           );
         } catch (err) {
           log(err);
@@ -199,7 +158,7 @@ export const createResolvers = async (service: Service): Promise<any> => {
 
       removeEnvironmentVariable: async (
         _: any,
-        { environmentVariableId }: { environmentVariableId: string },
+        { environmentVariableId }: { environmentVariableId: string }
       ) => {
         try {
           return await service.removeEnvironmentVariable(environmentVariableId);
@@ -212,76 +171,26 @@ export const createResolvers = async (service: Service): Promise<any> => {
       updateDeploymentToProd: async (
         _: any,
         { deploymentId }: { deploymentId: string },
-        context: any,
+        context: any
       ) => {
         try {
-          return Boolean(
-            await service.updateDeploymentToProd(context.user, deploymentId),
-          );
+          return Boolean(await service.updateDeploymentToProd(context.user, deploymentId));
         } catch (err) {
           log(err);
           return false;
         }
       },
 
-      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,
-          lrn,
-          auctionParams,
-          environmentVariables
-        }: {
-          organizationSlug: string;
-          data: DeepPartial<Project>;
-          lrn: string;
-          auctionParams: AuctionParams,
-          environmentVariables: EnvironmentVariables[];
-        },
-        context: any,
+          data
+        }: { organizationSlug: string; data: DeepPartial<Project> },
+        context: any
       ) => {
         try {
-          return await service.addProject(
-            context.user,
-            organizationSlug,
-            data,
-            lrn,
-            auctionParams,
-            environmentVariables
-          );
+          return await service.addProject(context.user, organizationSlug, data);
         } catch (err) {
           log(err);
           throw err;
@@ -290,7 +199,7 @@ export const createResolvers = async (service: Service): Promise<any> => {
 
       updateProject: async (
         _: any,
-        { projectId, data }: { projectId: string; data: DeepPartial<Project> },
+        { projectId, data }: { projectId: string; data: DeepPartial<Project> }
       ) => {
         try {
           return await service.updateProject(projectId, data);
@@ -303,12 +212,10 @@ export const createResolvers = async (service: Service): Promise<any> => {
       redeployToProd: async (
         _: any,
         { deploymentId }: { deploymentId: string },
-        context: any,
+        context: any
       ) => {
         try {
-          return Boolean(
-            await service.redeployToProd(context.user, deploymentId),
-          );
+          return Boolean(await service.redeployToProd(context.user, deploymentId));
         } catch (err) {
           log(err);
           return false;
@@ -337,8 +244,8 @@ export const createResolvers = async (service: Service): Promise<any> => {
         _: any,
         {
           projectId,
-          deploymentId,
-        }: { deploymentId: string; projectId: string },
+          deploymentId
+        }: { deploymentId: string; projectId: string }
       ) => {
         try {
           return await service.rollbackDeployment(projectId, deploymentId);
@@ -348,21 +255,9 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
-      deleteDeployment: async (
-        _: any,
-        { deploymentId }: { deploymentId: string },
-      ) => {
-        try {
-          return await service.deleteDeployment(deploymentId);
-        } catch (err) {
-          log(err);
-          return false;
-        }
-      },
-
       addDomain: async (
         _: any,
-        { projectId, data }: { projectId: string; data: { name: string } },
+        { projectId, data }: { projectId: string; data: { name: string } }
       ) => {
         try {
           return Boolean(await service.addDomain(projectId, data));
@@ -374,7 +269,7 @@ export const createResolvers = async (service: Service): Promise<any> => {
 
       updateDomain: async (
         _: any,
-        { domainId, data }: { domainId: string; data: DeepPartial<Domain> },
+        { domainId, data }: { domainId: string; data: DeepPartial<Domain> }
       ) => {
         try {
           return await service.updateDomain(domainId, data);
@@ -387,7 +282,7 @@ export const createResolvers = async (service: Service): Promise<any> => {
       authenticateGitHub: async (
         _: any,
         { code }: { code: string },
-        context: any,
+        context: any
       ) => {
         try {
           return await service.authenticateGitHub(code, context.user);
@@ -399,14 +294,12 @@ export const createResolvers = async (service: Service): Promise<any> => {
 
       unauthenticateGitHub: async (_: any, __: object, context: any) => {
         try {
-          return service.unauthenticateGitHub(context.user, {
-            gitHubToken: null,
-          });
+          return service.unauthenticateGitHub(context.user, { gitHubToken: null });
         } catch (err) {
           log(err);
           return false;
         }
-      },
-    },
+      }
+    }
   };
 };

packages/backend/src/routes/auth.ts

@@ -19,7 +19,6 @@ router.get('/registration/:email', async (req, res) => {
 });
 
 router.post('/register', async (req, res) => {
-  console.log('Register', req.body);
   const { email, challenge, attestation } = req.body;
   const user = await createUser(req.app.get('service'), {
     challenge,
@@ -27,19 +26,18 @@ router.post('/register', async (req, res) => {
     userEmail: email,
     userName: email.split('@')[0],
   });
-  req.session.address = user.id;
+  req.session.userId = user.id;
   res.sendStatus(200);
 });
 
 router.post('/authenticate', async (req, res) => {
-  console.log('Authenticate', req.body);
   const { signedWhoamiRequest } = req.body;
   const user = await authenticateUser(
     req.app.get('service'),
     signedWhoamiRequest,
   );
   if (user) {
-    req.session.address = user.id;
+    req.session.userId = user.id;
     res.sendStatus(200);
   } else {
     res.sendStatus(401);
@@ -47,10 +45,11 @@ router.post('/authenticate', async (req, res) => {
 });
 
 //
-// SIWE Auth
+// Lit
 //
+
 router.post('/validate', async (req, res) => {
-  const { message, signature } = req.body;
+  const { message, signature, action } = req.body;
   const { success, data } = await new SiweMessage(message).verify({
     signature,
   });
@@ -61,20 +60,23 @@ router.post('/validate', async (req, res) => {
   const service: Service = req.app.get('service');
   const user = await service.getUserByEthAddress(data.address);
 
-  if (!user) {
+  if (action === 'signup') {
+    if (user) {
+      return res.send({ success: false, error: 'user_already_exists' });
+    }
     const newUser = await service.createUser({
       ethAddress: data.address,
-      email: `${data.address}@example.com`,
+      email: '',
+      name: '',
       subOrgId: '',
       turnkeyWalletId: '',
     });
-
-    // 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;
+    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;
   }
 
   res.send({ success });
@@ -84,10 +86,9 @@ router.post('/validate', async (req, res) => {
 // General
 //
 router.get('/session', (req, res) => {
-  if (req.session.address && req.session.chainId) {
+  if (req.session.userId) {
     res.send({
-      address: req.session.address,
-      chainId: req.session.chainId
+      userId: req.session.userId,
     });
   } else {
     res.status(401).send({ error: 'Unauthorized: No active session' });
@@ -95,12 +96,9 @@ router.get('/session', (req, res) => {
 });
 
 router.post('/logout', (req, res) => {
-  req.session.destroy((err) => {
-    if (err) {
-      return res.send({ success: false });
-    }
-    res.send({ success: true });
-  });
+  // This is how you clear cookie-session
+  (req as any).session = null;
+  res.send({ success: true });
 });
 
 export default router;

packages/backend/src/routes/staging.ts

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

packages/backend/src/schema.gql

@@ -19,14 +19,6 @@ enum DeploymentStatus {
   Building
   Ready
   Error
-  Deleting
-}
-
-enum AuctionStatus {
-  completed
-  reveal
-  commit
-  expired
 }
 
 enum DomainStatus {
@@ -72,13 +64,8 @@ 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!]
@@ -86,7 +73,7 @@ type Project {
   updatedAt: String!
   organization: Organization!
   icon: String
-  baseDomains: [String!]
+  subDomain: String
 }
 
 type ProjectMember {
@@ -106,10 +93,7 @@ type Deployment {
   commitMessage: String!
   url: String
   environment: Environment!
-  deployer: Deployer
-  applicationDeploymentRequestId: String
   isCurrent: Boolean!
-  baseDomain: String
   status: DeploymentStatus!
   createdAt: String!
   updatedAt: String!
@@ -135,17 +119,6 @@ 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!
 }
@@ -156,23 +129,11 @@ 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 {
@@ -212,48 +173,6 @@ 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!]
@@ -264,11 +183,7 @@ 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 {
@@ -288,26 +203,12 @@ type Mutation {
   ): Boolean!
   removeEnvironmentVariable(environmentVariableId: String!): Boolean!
   updateDeploymentToProd(deploymentId: String!): Boolean!
-  addProjectFromTemplate(
-    organizationSlug: String!
-    data: AddProjectFromTemplateInput
-    lrn: String
-    auctionParams: AuctionParams
-    environmentVariables: [AddEnvironmentVariableInput!]
-  ): Project!
-  addProject(
-    organizationSlug: String!
-    data: AddProjectInput!
-    lrn: String
-    auctionParams: AuctionParams
-    environmentVariables: [AddEnvironmentVariableInput!]
-  ): Project!
+  addProject(organizationSlug: String!, data: AddProjectInput): Project!
   updateProject(projectId: String!, data: UpdateProjectInput): Boolean!
   redeployToProd(deploymentId: String!): Boolean!
   deleteProject(projectId: String!): Boolean!
   deleteDomain(domainId: String!): Boolean!
   rollbackDeployment(projectId: String!, deploymentId: String!): Boolean!
-  deleteDeployment(deploymentId: String!): Boolean!
   addDomain(projectId: String!, data: AddDomainInput!): Boolean!
   updateDomain(domainId: String!, data: UpdateDomainInput!): Boolean!
   authenticateGitHub(code: String!): AuthResult!

packages/backend/src/server.ts

@@ -8,7 +8,7 @@ import {
   ApolloServerPluginLandingPageLocalDefault,
   AuthenticationError,
 } from 'apollo-server-core';
-import session from 'express-session';
+import cookieSession from 'cookie-session';
 
 import { TypeSource } from '@graphql-tools/utils';
 import { makeExecutableSchema } from '@graphql-tools/schema';
@@ -17,18 +17,13 @@ import { ServerConfig } from './config';
 import { DEFAULT_GQL_PATH } from './constants';
 import githubRouter from './routes/github';
 import authRouter from './routes/auth';
-import stagingRouter from './routes/staging';
 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 {
-    address: string;
-    chainId: number;
+    userId: string;
   }
 }
 
@@ -58,13 +53,14 @@ export const createAndStartServer = async (
     context: async ({ req }) => {
       // https://www.apollographql.com/docs/apollo-server/v3/security/authentication#api-wide-authorization
 
-      const { address } = req.session;
+      const { userId } = req.session;
 
-      if (!address) {
+      if (!userId) {
         throw new AuthenticationError('Unauthorized: No active session');
       }
 
-      const user = await service.getUser(address);
+      const user = await service.getUser(userId);
+
       return { user };
     },
     plugins: [
@@ -83,25 +79,20 @@ 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(
-    session(sessionOptions)
+    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,
+    }),
   );
 
   server.applyMiddleware({
@@ -118,12 +109,6 @@ export const createAndStartServer = async (
   app.set('service', service);
   app.use('/auth', authRouter);
   app.use('/api/github', githubRouter);
-  app.use('/staging', stagingRouter);
-
-  app.use((err: any, req: any, res: any, next: any) => {
-    console.error(err);
-    res.status(500).json({ error: err.message });
-  });
 
   httpServer.listen(port, host, () => {
     log(`Server is listening on ${host}:${port}${server.graphqlPath}`);

packages/backend/src/types.ts

@@ -29,8 +29,6 @@ export interface GitPushEventPayload {
 
 export interface AppDeploymentRecordAttributes {
   application: string;
-  auction: string;
-  deployer: string;
   dns: string;
   meta: string;
   name: string;
@@ -40,13 +38,6 @@ export interface AppDeploymentRecordAttributes {
   version: string;
 }
 
-export interface AppDeploymentRemovalRecordAttributes {
-  deployment: string;
-  request: string;
-  type: 'ApplicationDeploymentRemovalRecord';
-  version: string;
-}
-
 interface RegistryRecord {
   id: string;
   names: string[] | null;
@@ -59,46 +50,3 @@ interface RegistryRecord {
 export interface AppDeploymentRecord extends RegistryRecord {
   attributes: AppDeploymentRecordAttributes;
 }
-
-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,14 +1,10 @@
-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');
 
@@ -80,64 +76,3 @@ 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,6 +2,8 @@ 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');
 
@@ -11,7 +13,7 @@ const deleteFile = async (filePath: string) => {
 };
 
 const main = async () => {
-  const config = await getConfig();
+  const config = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
 
   deleteFile(config.database.dbPath);
 };

packages/backend/test/fixtures/organizations.json

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

packages/backend/test/initialize-db.ts

@@ -16,6 +16,8 @@ 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');
 
@@ -154,7 +156,7 @@ const generateTestData = async (dataSource: DataSource) => {
 };
 
 const main = async () => {
-  const config = await getConfig();
+  const config = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
   const isDbPresent = await checkFileExists(config.database.dbPath);
 
   if (!isDbPresent) {

packages/backend/test/initialize-registry.ts

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

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

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

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

@@ -1,67 +0,0 @@
-import debug from 'debug';
-import { DataSource } from 'typeorm';
-import path from 'path';
-
-import { parseGasAndFees, Registry } from '@cerc-io/registry-sdk';
-
-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 } = await getConfig();
-
-  const registry = new Registry(
-    registryConfig.gqlEndpoint,
-    registryConfig.restEndpoint,
-    { chainId: registryConfig.chainId }
-  );
-
-  const dataSource = new DataSource({
-    type: 'better-sqlite3',
-    database: database.dbPath,
-    synchronize: true,
-    entities: [path.join(__dirname, '../src/entity/*')]
-  });
-
-  await dataSource.initialize();
-
-  const deploymentRepository = dataSource.getRepository(Deployment);
-  const deployments = await deploymentRepository.find({
-    relations: {
-      project: true
-    },
-    where: {
-      status: DeploymentStatus.Deleting
-    }
-  });
-
-  for await (const deployment of deployments) {
-    const applicationDeploymentRemovalRecord = {
-      type: "ApplicationDeploymentRemovalRecord",
-      version: "1.0.0",
-      deployment: deployment.applicationDeploymentRecordId,
-      request: deployment.applicationDeploymentRemovalRequestId,
-    }
-
-    const fee = parseGasAndFees(registryConfig.fee.gas, registryConfig.fee.fees);
-
-    const result = await registry.setRecord(
-      {
-        privateKey: registryConfig.privateKey,
-        record: applicationDeploymentRemovalRecord,
-        bondId: registryConfig.bondId
-      },
-      '',
-      fee
-    );
-
-    log('Application deployment removal record data:', applicationDeploymentRemovalRecord);
-    log(`Application deployment removal record published: ${result.id}`);
-  }
-}
-
-main().catch((err) => {
-  log(err);
-});

packages/deployer/.env.example

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

packages/deployer/README.md

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

packages/deployer/config.staging.yml

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

packages/deployer/config.yml

@@ -1,8 +1,9 @@
 services:
-  registry:
-    rpcEndpoint: https://laconicd-sapo.laconic.com
-    gqlEndpoint: https://laconicd-sapo.laconic.com/api
-    userKey: 
-    bondId: 
-    chainId: laconic_9000-2
-    gasPrice: 1alnt
+  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

packages/deployer/deploy-frontend.sh

@@ -1,10 +1,5 @@
 #!/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"
 
@@ -18,131 +13,83 @@ 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 registry record list --type ApplicationRecord --all --name "deploy-frontend" 2>/dev/null | jq -r -s ".[] | sort_by(.createTime) | reverse | [ .[] | select(.bondId == \"$REGISTRY_BOND_ID\") ] | .[0].attributes.version" | awk -F. -v OFS=. '{$NF += 1 ; print}')
+NEW_APPLICATION_VERSION=$(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}')
 
 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
+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
+  name: snowballtools-base-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 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')
+RECORD_ID=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE | jq -r '.id')
 echo "ApplicationRecord published"
 echo $RECORD_ID
 
 # Set name to record
-REGISTRY_APP_LRN="lrn://$AUTHORITY/applications/deploy-frontend"
+REGISTRY_APP_CRN="crn://snowballtools/applications/snowballtools-base-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
+yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${PACKAGE_VERSION}" "$RECORD_ID"
 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
+yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${LATEST_HASH}" "$RECORD_ID"
 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"
+yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN" "$RECORD_ID"
+echo "$REGISTRY_APP_CRN 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]')
+# Check if record found for REGISTRY_APP_CRN
+APP_RECORD=$(yarn --silent laconic -c $CONFIG_FILE cns name resolve "$REGISTRY_APP_CRN" | jq '.[0]')
 if [ -z "$APP_RECORD" ] || [ "null" == "$APP_RECORD" ]; then
-  echo "No record found for $REGISTRY_APP_LRN."
+  echo "No record found for $REGISTRY_APP_CRN."
   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_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')
+DEPLOYMENT_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE | jq -r '.id')
 echo "ApplicationDeploymentRequest published"
 echo $DEPLOYMENT_REQUEST_ID

packages/deployer/deploy-frontend.staging.sh

@@ -18,7 +18,7 @@ REGISTRY_BOND_ID="098c906850b87412f02200e41f449bc79e055eab77acfef32c0b22443bb466
 # 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 "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}')
+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
@@ -26,27 +26,26 @@ if [ -z "$NEW_APPLICATION_VERSION" ] || [ "1" == "$NEW_APPLICATION_VERSION" ]; t
 fi
 
 # Generate application-deployment-request.yml
-cat >./staging-records/application-deployment-request.yml <<EOF
+cat > ./staging-records/application-deployment-request.yml <<EOF
 record:
   type: ApplicationDeploymentRequest
   version: '1.0.0'
   name: staging-snowballtools-base-frontend@$PACKAGE_VERSION
-  application: lrn://staging-snowballtools/applications/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: Ov23liOaoahRTYd4nSCV
+      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/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools/image-upload-pwa-example
+      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_laconicd_chain_id: laconic-testnet-2
       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_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 @ $CURRENT_DATE_TIME
@@ -55,7 +54,7 @@ record:
 EOF
 
 # Generate application-record.yml with incremented version
-cat >./staging-records/application-record.yml <<EOF
+cat > ./staging-records/application-record.yml <<EOF
 record:
   type: ApplicationRecord
   version: $NEW_APPLICATION_VERSION
@@ -71,64 +70,32 @@ echo "Files generated successfully."
 RECORD_FILE=staging-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')
+RECORD_ID=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE | jq -r '.id')
 echo "ApplicationRecord published"
 echo $RECORD_ID
 
 # Set name to record
-REGISTRY_APP_LRN="lrn://staging-snowballtools/applications/staging-snowballtools-base-frontend"
+REGISTRY_APP_CRN="crn://staging-snowballtools/applications/staging-snowballtools-base-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
+yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${PACKAGE_VERSION}" "$RECORD_ID"
 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
+yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${LATEST_HASH}" "$RECORD_ID"
 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"
+yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN" "$RECORD_ID"
+echo "$REGISTRY_APP_CRN 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]')
+# Check if record found for REGISTRY_APP_CRN
+APP_RECORD=$(yarn --silent laconic -c $CONFIG_FILE cns name resolve "$REGISTRY_APP_CRN" | jq '.[0]')
 if [ -z "$APP_RECORD" ] || [ "null" == "$APP_RECORD" ]; then
-  echo "No record found for $REGISTRY_APP_LRN."
+  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 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')
+DEPLOYMENT_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE | jq -r '.id')
 echo "ApplicationDeploymentRequest published"
 echo $DEPLOYMENT_REQUEST_ID

packages/deployer/package.json

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

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

@@ -1,16 +1,17 @@
 record:
   type: ApplicationDeploymentRequest
   version: '1.0.0'
-  name: deploy-frontend@1.0.0
-  application: lrn://vaasl/applications/deploy-frontend@1.0.0
-  dns: deploy
+  name: snowballtools-base-frontend@0.1.8
+  application: crn://snowballtools/applications/snowballtools-base-frontend@0.1.8
+  dns: dashboard
   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_wallet_connect_id: 63cad7ba97391f63652161f484670e15
+      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"

packages/deployer/records/application-record.yml

@@ -4,5 +4,5 @@ record:
   repository_ref: 351db16336eacc3e1f9119ceb8d1282b8e27a27e
   repository: ["https://git.vdb.to/cerc-io/snowballtools-base"]
   app_type: webapp
-  name: deploy-frontend
-  app_version: 1.0.0
+  name: snowballtools-base-frontend
+  app_version: 0.1.8

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

@@ -7,18 +7,18 @@ record:
   config:
     env:
       LACONIC_HOSTED_CONFIG_server_url: https://snowballtools-base-api.staging.apps.snowballtools.com
-      LACONIC_HOSTED_CONFIG_github_clientid: Ov23liOaoahRTYd4nSCV
+      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/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools/image-upload-pwa-example
+      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_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 @ Mon Jun 24 23:51:48 UTC 2024
+    note: Added by Snowball @ Tuesday 21 May 2024 06:17:23 AM UTC
     repository: "https://git.vdb.to/cerc-io/snowballtools-base"
-    repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601
+    repository_ref: 8488cfab8353321ed05c4234bf1b914c9ad3aa99

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

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

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/test-progressive-web-app> (main branch)
+- Web app repo used: https://github.com/snowball-tools-platform/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/test-progressive-web-app"
+    repository: "https://github.com/snowball-tools-platform/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/test-progressive-web-app"]
+  repository: ["https://github.com/snowball-tools-platform/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/test-progressive-web-app"
+REPO_URL="https://github.com/snowball-tools-platform/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 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}')
+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}')
 
 if [ -z "$NEW_APPLICATION_VERSION" ] || [ "1" == "$NEW_APPLICATION_VERSION" ]; then
   # Set application-record version if no previous records were found
@@ -32,7 +32,7 @@ fi
 # Generate application-record.yml with incremented version
 RECORD_FILE=packages/deployer/test/records/application-record.yml
 
-cat >$RECORD_FILE <<EOF
+cat > $RECORD_FILE <<EOF
 record:
   type: ApplicationRecord
   version: $NEW_APPLICATION_VERSION
@@ -46,12 +46,12 @@ EOF
 # Generate application-deployment-request.yml
 REQUEST_RECORD_FILE=packages/deployer/test/records/application-deployment-request.yml
 
-cat >$REQUEST_RECORD_FILE <<EOF
+cat > $REQUEST_RECORD_FILE <<EOF
 record:
   type: ApplicationDeploymentRequest
   version: '1.0.0'
   name: $APP_NAME@$PACKAGE_VERSION
-  application: lrn://snowballtools/applications/$APP_NAME@$PACKAGE_VERSION
+  application: crn://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 registry record publish --filename $RECORD_FILE | jq -r '.id')
+RECORD_ID=$(yarn --silent laconic -c $CONFIG_FILE cns record publish --filename $RECORD_FILE | jq -r '.id')
 echo "ApplicationRecord published"
 echo $RECORD_ID
 
 # Set name to record
-REGISTRY_APP_LRN="lrn://snowballtools/applications/$APP_NAME"
+REGISTRY_APP_CRN="crn://snowballtools/applications/$APP_NAME"
 
 sleep 2
-yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${PACKAGE_VERSION}" "$RECORD_ID"
+yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${PACKAGE_VERSION}" "$RECORD_ID"
 sleep 2
-yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${LATEST_HASH}" "$RECORD_ID"
+yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN@${LATEST_HASH}" "$RECORD_ID"
 sleep 2
 # Set name if latest release
-yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN" "$RECORD_ID"
-echo "$REGISTRY_APP_LRN set for ApplicationRecord"
+yarn --silent laconic -c $CONFIG_FILE cns name set "$REGISTRY_APP_CRN" "$RECORD_ID"
+echo "$REGISTRY_APP_CRN set for ApplicationRecord"
 
-# Check if record exists for REGISTRY_APP_LRN
-APP_RECORD=$(yarn --silent laconic -c $CONFIG_FILE registry name resolve "$REGISTRY_APP_LRN" | jq '.[0]')
+# Check if record exists for REGISTRY_APP_CRN
+APP_RECORD=$(yarn --silent laconic -c $CONFIG_FILE cns name resolve "$REGISTRY_APP_CRN" | jq '.[0]')
 if [ -z "$APP_RECORD" ] || [ "null" == "$APP_RECORD" ]; then
-  echo "No record found for $REGISTRY_APP_LRN."
+  echo "No record found for $REGISTRY_APP_CRN."
   exit 1
 fi
 
 sleep 2
-DEPLOYMENT_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $REQUEST_RECORD_FILE | jq -r '.id')
+DEPLOYMENT_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE cns 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 registry record list --type ApplicationDeploymentRecord --all --name "$APP_NAME" request $DEPLOYMENT_REQUEST_ID)
+  deployment_records_response=$(yarn --silent laconic -c $CONFIG_FILE cns 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
@@ -115,7 +115,7 @@ while true; do
     else
       echo "ApplicationDeploymentRecord not found, retrying in $RETRY_INTERVAL sec..."
       sleep $RETRY_INTERVAL
-      retry_count=$((retry_count + 1))
+      retry_count=$((retry_count+1))
     fi
   else
     echo "ApplicationDeploymentRecord found"
@@ -140,7 +140,7 @@ fetched_url=$(echo $deployment_records_response | jq -r '.[0].attributes.url')
 
 retry_count=0
 max_retries=10
-retry_interval=10
+retry_interval=5
 while true; do
   url_response=$(curl -s -o /dev/null -I -w "%{http_code}" $fetched_url)
   if [ "$url_response" = "200" ]; then
@@ -154,7 +154,7 @@ while true; do
     else
       echo "Deployment URL $fetched_url is not active, received code $url_response, retrying in $retry_interval sec..."
       sleep $retry_interval
-      retry_count=$((retry_count + 1))
+      retry_count=$((retry_count+1))
     fi
   fi
 done
@@ -162,7 +162,7 @@ done
 # Generate application-deployment-removal-request.yml
 REMOVAL_REQUEST_RECORD_FILE=packages/deployer/test/records/application-deployment-removal-request.yml
 
-cat >$REMOVAL_REQUEST_RECORD_FILE <<EOF
+cat > $REMOVAL_REQUEST_RECORD_FILE <<EOF
 record:
   deployment: $DEPLOYMENT_RECORD_ID
   type: ApplicationDeploymentRemovalRequest
@@ -170,14 +170,14 @@ record:
 EOF
 
 sleep 2
-REMOVAL_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $REMOVAL_REQUEST_RECORD_FILE | jq -r '.id')
+REMOVAL_REQUEST_ID=$(yarn --silent laconic -c $CONFIG_FILE cns 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 registry record list --type ApplicationDeploymentRemovalRecord --all request $REMOVAL_REQUEST_ID)
+  removal_records_response=$(yarn --silent laconic -c $CONFIG_FILE cns 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
@@ -190,7 +190,7 @@ while true; do
     else
       echo "ApplicationDeploymentRemovalRecord not found, retrying in $RETRY_INTERVAL sec..."
       sleep $RETRY_INTERVAL
-      retry_count=$((retry_count + 1))
+      retry_count=$((retry_count+1))
     fi
   else
     echo "ApplicationDeploymentRemovalRecord found"
@@ -217,7 +217,7 @@ while true; do
     else
       echo "Deployment URL $fetched_url is still active, received code $url_response, retrying in $retry_interval sec..."
       sleep $retry_interval
-      retry_count=$((retry_count + 1))
+      retry_count=$((retry_count+1))
     fi
   fi
 done

packages/frontend/.env.example

@@ -14,6 +14,4 @@ VITE_BUGSNAG_API_KEY=
 
 VITE_PASSKEY_WALLET_RPID=
 VITE_TURNKEY_API_BASE_URL=
-VITE_TURNKEY_ORGANIZATION_ID=
-
-VITE_LACONICD_CHAIN_ID=
+VITE_TURNKEY_ORGANIZATION_ID=

packages/frontend/.prettierignore

@@ -1 +0,0 @@
-dist/

packages/frontend/.storybook/main.ts

@@ -9,7 +9,6 @@ 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: [
@@ -27,7 +26,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
-  staticDirs: ['../public'],
 };
 
 export default config;

packages/frontend/README.md

@@ -1,63 +1,30 @@
-# frontend
+# React + TypeScript + Vite
 
-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).
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-## Getting Started
+Currently, two official plugins are available:
 
-### Install dependencies
+- [@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
 
-In the root of the project, run:
+## Expanding the ESLint configuration
 
-```zsh
-yarn
+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,
+  },
+};
 ```
 
-### 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)
+- 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

packages/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.0.0",
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
@@ -16,11 +16,8 @@
     "@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",
@@ -30,6 +27,10 @@
     "@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,8 +43,8 @@
     "@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",
+    "@web3modal/siwe": "^4.0.5",
+    "@web3modal/wagmi": "^4.0.5",
     "assert": "^2.1.0",
     "axios": "^1.6.7",
     "clsx": "^2.1.0",
@@ -61,15 +62,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": {
@@ -101,4 +102,4 @@
     "typescript": "^5.3.3",
     "vite": "^5.2.0"
   }
-}
+}

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

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

packages/frontend/src/App.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import Projects from './pages/org-slug';
@@ -11,8 +10,8 @@ import ProjectSearchLayout from './layouts/ProjectSearch';
 import Index from './pages';
 import AuthPage from './pages/AuthPage';
 import { DashboardLayout } from './pages/org-slug/layout';
+import { useEffect } from 'react';
 import Web3Provider from 'context/Web3Provider';
-import { BASE_URL } from 'utils/constants';
 
 const router = createBrowserRouter([
   {
@@ -50,26 +49,25 @@ const router = createBrowserRouter([
     path: '/login',
     element: <AuthPage />,
   },
+  {
+    path: '/signup',
+    element: <AuthPage />,
+  },
 ]);
 
 function App() {
   // Hacky way of checking session
   // TODO: Handle redirect backs
   useEffect(() => {
-    fetch(`${BASE_URL}/auth/session`, {
+    fetch(`${import.meta.env.VITE_SERVER_URL}/auth/session`, {
       credentials: 'include',
     }).then((res) => {
-      const path = window.location.pathname;
       if (res.status !== 200) {
         localStorage.clear();
-
-        if (path !== '/login') {
+        const path = window.location.pathname;
+        if (path !== '/login' && path !== '/signup') {
           window.location.pathname = '/login';
         }
-      } else {
-        if (path === '/login') {
-          window.location.pathname = '/';
-        }
       }
     });
   }, []);

packages/frontend/src/assets/templates.ts

@@ -1,21 +1,16 @@
-import {
-  VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO,
-  VITE_GITHUB_PWA_TEMPLATE_REPO,
-} from 'utils/constants';
-
 export default [
   {
     id: '1',
     name: 'Progressive Web App (PWA)',
     icon: 'pwa',
-    repoFullName: `${VITE_GITHUB_PWA_TEMPLATE_REPO}`,
+    repoFullName: `${import.meta.env.VITE_GITHUB_PWA_TEMPLATE_REPO}`,
     isComingSoon: false,
   },
   {
     id: '2',
     name: 'Image Upload PWA',
     icon: 'pwa',
-    repoFullName: `${VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
+    repoFullName: `${import.meta.env.VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
     isComingSoon: false,
   },
   {

packages/frontend/src/components/SearchBar.tsx

@@ -6,7 +6,7 @@ import { Input, InputProps } from './shared/Input';
 const SearchBar: React.ForwardRefRenderFunction<
   HTMLInputElement,
   InputProps & RefAttributes<HTMLInputElement>
-> = ({ value, onChange, placeholder = 'Search', ...props }, ref) => {
+> = ({ value, onChange, placeholder = 'Search', ...props }) => {
   return (
     <div className="relative flex w-full">
       <Input
@@ -18,7 +18,6 @@ const SearchBar: React.ForwardRefRenderFunction<
         appearance="borderless"
         className="w-full lg:w-[459px]"
         {...props}
-        ref={ref}
       />
     </div>
   );

packages/frontend/src/components/StopWatch.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useStopwatch } from 'react-timer-hook';
 
 import FormatMillisecond, { FormatMilliSecondProps } from './FormatMilliSecond';
@@ -13,19 +12,14 @@ const setStopWatchOffset = (time: string) => {
 
 interface StopwatchProps extends Omit<FormatMilliSecondProps, 'time'> {
   offsetTimestamp: Date;
-  isPaused: boolean;
 }
 
-const Stopwatch = ({ offsetTimestamp, isPaused, ...props }: StopwatchProps) => {
-  const { totalSeconds, pause, start } = useStopwatch({
+const Stopwatch = ({ offsetTimestamp, ...props }: StopwatchProps) => {
+  const { totalSeconds } = 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,16 +10,11 @@ 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 = ({
@@ -29,7 +24,6 @@ export const ChangeStateToProductionDialog = ({
   open,
   handleCancel,
   handleConfirm,
-  isConfirmButtonLoading,
   ...props
 }: ChangeStateToProductionDialogProps) => {
   const currentChip = {
@@ -47,14 +41,6 @@ export const ChangeStateToProductionDialog = ({
       handleCancel={handleCancel}
       open={open}
       handleConfirm={handleConfirm}
-      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

@@ -1,47 +0,0 @@
-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.tsx

@@ -53,16 +53,6 @@ export const ProjectCard = ({
     navigate(`projects/${project.id}`);
   }, [project.id, navigate]);
 
-  const navigateToSettingsOnClick = useCallback(
-    (
-      e: React.MouseEvent<HTMLLIElement> | React.MouseEvent<HTMLButtonElement>,
-    ) => {
-      e.stopPropagation();
-      navigate(`projects/${project.id}/settings`);
-    },
-    [project.id, navigate],
-  );
-
   return (
     <div
       {...props}
@@ -102,15 +92,8 @@ export const ProjectCard = ({
               </Button>
             </MenuHandler>
             <MenuList>
-              <MenuItem onClick={navigateToSettingsOnClick}>
-                Project settings
-              </MenuItem>
-              <MenuItem
-                className="text-red-500"
-                onClick={navigateToSettingsOnClick}
-              >
-                Delete project
-              </MenuItem>
+              <MenuItem>Project settings</MenuItem>
+              <MenuItem className="text-red-500">Delete project</MenuItem>
             </MenuList>
           </Menu>
         </div>

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 { useDebounceValue } from 'usehooks-ts';
+import { useDebounce } from 'usehooks-ts';
 
 import SearchBar from 'components/SearchBar';
 import { useGQLClient } from 'context/GQLClientContext';
@@ -42,7 +42,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
     },
   });
 
-  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
+  const debouncedInputValue = useDebounce<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {
@@ -62,7 +62,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
     <div className="relative w-full lg:w-fit">
       <SearchBar {...getInputProps()} />
       <div
-        {...getMenuProps({}, { suppressRefError: true })}
+        {...getMenuProps()}
         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',
           { 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 { useDebounceValue } from 'usehooks-ts';
+import { useDebounce } from 'usehooks-ts';
 import { ProjectSearchBarItem } from './ProjectSearchBarItem';
 import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty';
 import { useNavigate } from 'react-router-dom';
@@ -27,30 +27,25 @@ export const ProjectSearchBarDialog = ({
   const client = useGQLClient();
   const navigate = useNavigate();
 
-  const {
-    getInputProps,
-    getItemProps,
-    getMenuProps,
-    inputValue,
-    setInputValue,
-  } = useCombobox({
-    items,
-    itemToString(item) {
-      return item ? item.name : '';
-    },
-    selectedItem,
-    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
-      if (newSelectedItem) {
-        setSelectedItem(newSelectedItem);
-        onClickItem?.(newSelectedItem);
-        navigate(
-          `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
-        );
-      }
-    },
-  });
+  const { getInputProps, getItemProps, inputValue, setInputValue } =
+    useCombobox({
+      items,
+      itemToString(item) {
+        return item ? item.name : '';
+      },
+      selectedItem,
+      onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+        if (newSelectedItem) {
+          setSelectedItem(newSelectedItem);
+          onClickItem?.(newSelectedItem);
+          navigate(
+            `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
+          );
+        }
+      },
+    });
 
-  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
+  const debouncedInputValue = useDebounce<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {
@@ -80,7 +75,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({}, { suppressRefError: true })}
+                {...getInputProps()}
                 leftIcon={<SearchIcon />}
                 placeholder="Search"
                 appearance="borderless"
@@ -91,33 +86,23 @@ export const ProjectSearchBarDialog = ({
               </Button>
             </div>
             {/* Content */}
-            <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 />
-              )}
+            <div className="flex flex-col gap-1 px-2 py-2">
+              {items.length > 0
+                ? items.map((item, index) => (
+                    <>
+                      <div className="px-2 py-2">
+                        <p className="text-elements-mid-em text-xs font-medium">
+                          Suggestions
+                        </p>
+                      </div>
+                      <ProjectSearchBarItem
+                        {...getItemProps({ item, index })}
+                        key={item.id}
+                        item={item}
+                      />
+                    </>
+                  ))
+                : inputValue && <ProjectSearchBarEmpty />}
             </div>
           </div>
         </Dialog.Content>

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

@@ -1,571 +0,0 @@
-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 EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
-import { EnvironmentVariablesFormValues } from 'types/types';
-import ConnectWallet from './ConnectWallet';
-import { useWalletConnectClient } from 'context/WalletConnectContext';
-
-type ConfigureDeploymentFormValues = {
-  option: string;
-  lrn?: string;
-  numProviders?: number;
-  maxPrice?: string;
-};
-
-type ConfigureFormValues = ConfigureDeploymentFormValues &
-  EnvironmentVariablesFormValues;
-
-const DEFAULT_MAX_PRICE = '10000';
-
-const Configure = () => {
-  const { signClient, session, accounts } = useWalletConnectClient();
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [deployers, setDeployers] = useState<Deployer[]>([]);
-  const [selectedAccount, setSelectedAccount] = useState<string>();
-  const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
-  const [isPaymentLoading, setIsPaymentLoading] = useState(false);
-  const [isPaymentDone, setIsPaymentDone] = 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;
-        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.split(':')[2];
-
-          if (createFormData.option === 'LRN') {
-            amount = deployer?.minimumPayment!;
-          } else {
-            amount = (
-              createFormData.numProviders * createFormData.maxPrice
-            ).toString();
-          }
-
-          const amountToBePaid = amount.replace(/\D/g, '').toString();
-
-          const txHashResponse = await cosmosSendTokensHandler(
-            selectedAccount,
-            amountToBePaid,
-          );
-
-          if (!txHashResponse) {
-            console.error('Tx not successful');
-            return;
-          }
-
-          txHash = txHashResponse;
-
-          const isTxHashValid = await verifyTx(
-            senderAddress,
-            txHash,
-            amountToBePaid.toString(),
-          );
-
-          if (isTxHashValid === false) {
-            console.error('Invalid Tx hash', txHash);
-            return;
-          }
-        }
-
-        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) {
-        console.error(error);
-        toast({
-          id: 'error-deploying-app',
-          title: 'Error deploying app',
-          variant: 'error',
-          onDismiss: dismiss,
-        });
-      }
-    },
-    [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 (!signClient || !session || !selectedAccount) {
-        return;
-      }
-
-      const chainId = selectedAccount.split(':')[1];
-      const senderAddress = selectedAccount.split(':')[2];
-      const snowballAddress = await client.getAddress();
-
-      try {
-        setIsPaymentDone(false);
-        setIsPaymentLoading(true);
-
-        toast({
-          id: 'sending-payment-request',
-          title: 'Check your wallet and approve payment request',
-          variant: 'loading',
-          onDismiss: dismiss,
-        });
-
-        const result: { signature: string } = await signClient.request({
-          topic: session.topic,
-          chainId: `cosmos:${chainId}`,
-          request: {
-            method: 'cosmos_sendTokens',
-            params: [
-              {
-                from: senderAddress,
-                to: snowballAddress,
-                value: amount,
-              },
-            ],
-          },
-        });
-
-        if (!result) {
-          throw new Error('Error completing transaction');
-        }
-
-        toast({
-          id: 'payment-successful',
-          title: 'Payment successful',
-          variant: 'success',
-          onDismiss: dismiss,
-        });
-
-        setIsPaymentDone(true);
-
-        return result.signature;
-      } catch (error: any) {
-        console.error('Error sending tokens', error);
-
-        toast({
-          id: 'error-sending-tokens',
-          title: 'Error sending tokens',
-          variant: 'error',
-          onDismiss: dismiss,
-        });
-
-        setIsPaymentDone(false);
-      } finally {
-        setIsPaymentLoading(false);
-      }
-    },
-    [session, signClient, toast],
-  );
-
-  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">
-            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
-                    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"
-                >
-                  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 text-elements-high-em mb-4">
-                        Select deployer LRN
-                      </span>
-                      <Select
-                        value={value}
-                        onChange={(event) => {
-                          onChange(event.target.value);
-                          onDeployerChange(event.target.value);
-                        }}
-                        displayEmpty
-                        size="small"
-                      >
-                        {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"
-                  >
-                    Set the number of deployers and maximum price for each
-                    deployment
-                  </Heading>
-                  <span className="text-sm text-elements-high-em">
-                    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">
-                    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 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>
-            ) : (
-              <>
-                <Heading as="h4" className="md:text-lg font-medium mb-3">
-                  Connect to your wallet
-                </Heading>
-                <ConnectWallet onAccountChange={onAccountChange} />
-                {accounts && accounts?.length > 0 && (
-                  <div>
-                    <Button
-                      {...buttonSize}
-                      type="submit"
-                      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>
-      </div>
-    </div>
-  );
-};
-
-export default Configure;

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

@@ -14,10 +14,11 @@ import { useToast } from '../../shared/Toast';
 import { IconWithFrame } from '../../shared/IconWithFrame';
 import { Heading } from '../../shared/Heading';
 import { MockConnectGitCard } from './MockConnectGitCard';
-import { VITE_GITHUB_CLIENT_ID } from 'utils/constants';
 
 const SCOPES = 'repo user';
-const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${VITE_GITHUB_CLIENT_ID}&scope=${encodeURIComponent(SCOPES)}`;
+const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
+  import.meta.env.VITE_GITHUB_CLIENT_ID
+}&scope=${encodeURIComponent(SCOPES)}`;
 
 interface ConnectAccountInterface {
   onAuth: (token: string) => void;

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

@@ -1,46 +0,0 @@
-import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
-
-import { Button } from '../../shared/Button';
-import { useWalletConnectClient } from 'context/WalletConnectContext';
-
-const ConnectWallet = ({
-  onAccountChange,
-}: {
-  onAccountChange: (selectedAccount: string) => void;
-}) => {
-  const { onConnect, accounts } = useWalletConnectClient();
-
-  const handleConnect = async () => {
-    await onConnect();
-  };
-
-  return (
-    <div className="p-4 bg-slate-100 rounded-lg mb-6">
-      {!accounts ? (
-        <div>
-          <Button type={'button'} onClick={handleConnect}>
-            Connect Wallet
-          </Button>
-        </div>
-      ) : (
-        <div>
-          <Select
-            label="Select Account"
-            defaultValue={accounts[0].address}
-            onChange={(value) => {
-              value && onAccountChange(value);
-            }}
-          >
-            {accounts.map((account, index) => (
-              <Option key={index} value={account.address}>
-                {account.address.split(':').slice(1).join(':')}
-              </Option>
-            ))}
-          </Select>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ConnectWallet;

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

@@ -1,7 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect } 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';
@@ -9,37 +7,13 @@ 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();
@@ -49,67 +23,13 @@ const Deploy = () => {
     navigate(`/${orgSlug}/projects/create`);
   }, []);
 
-  const isDeploymentFailed = useMemo(() => {
-    if (!record) {
-      return false;
-    }
-
-    // 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') {
+    const timerID = setTimeout(() => {
       navigate(`/${orgSlug}/projects/create/success/${projectId}`);
-    }
-  }, [record]);
+    }, TIMEOUT_DURATION);
+
+    return () => clearInterval(timerID);
+  }, []);
 
   return (
     <div className="space-y-7">
@@ -122,7 +42,6 @@ const Deploy = () => {
             <ClockOutlineIcon size={16} className="text-elements-mid-em" />
             <Stopwatch
               offsetTimestamp={setStopWatchOffset(Date.now().toString())}
-              isPaused={isDeploymentFailed}
             />
           </div>
         </div>
@@ -141,36 +60,30 @@ const Deploy = () => {
         />
       </div>
 
-      {!isDeploymentFailed ? (
-        <div>
-          <DeployStep
-            title={record ? 'Submitted' : 'Submitting'}
-            status={record ? DeployStatus.COMPLETE : DeployStatus.PROCESSING}
-            step="1"
-          />
-
-          <DeployStep
-            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()}
-          />
-        </div>
-      ) : (
-        <div>
-          <DeployStep title={record!.lastState} status={DeployStatus.ERROR} />
-        </div>
-      )}
+      <div>
+        <DeployStep
+          title="Building"
+          status={DeployStatus.COMPLETE}
+          step="1"
+          processTime="72000"
+        />
+        <DeployStep
+          title="Deployment summary"
+          status={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>
   );
 };

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

@@ -1,16 +1,27 @@
+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 {
@@ -21,11 +32,35 @@ interface DeployStepsProps {
   processTime?: string;
 }
 
-const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
+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;
+
   return (
     <div className="border-b border-border-separator">
+      {/* Collapisble trigger */}
       <button
-        className={cn('flex justify-between w-full py-5 gap-2', 'cursor-auto')}
+        className={cn(
+          'flex justify-between w-full py-5 gap-2',
+          disableCollapse && 'cursor-auto',
+        )}
+        tabIndex={disableCollapse ? -1 : undefined}
+        onClick={() => {
+          if (!disableCollapse) {
+            setIsOpen((val) => !val);
+          }
+        }}
       >
         <div className={cn('grow flex items-center gap-3')}>
           {/* Icon */}
@@ -38,6 +73,12 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
             {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>
+            )}
           </div>
 
           {/* Title */}
@@ -55,10 +96,7 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
         {status === DeployStatus.PROCESSING && (
           <div className="flex items-center gap-1.5">
             <ClockOutlineIcon size={16} className="text-elements-low-em" />
-            <Stopwatch
-              offsetTimestamp={setStopWatchOffset(startTime!)}
-              isPaused={false}
-            />
+            <Stopwatch offsetTimestamp={setStopWatchOffset(startTime!)} />
           </div>
         )}
         {status === DeployStatus.COMPLETE && (
@@ -69,9 +107,51 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
                 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/ProjectRepoCard/ProjectRepoCard.tsx

@@ -38,9 +38,36 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
       });
     }
 
-    navigate(
-      `configure?owner=${repository.owner?.login}&name=${repository.name}&defaultBranch=${repository.default_branch}&fullName=${repository.full_name}&orgSlug=${orgSlug}`,
-    );
+    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);
+    }
   }, [client, repository, orgSlug, setIsLoading, navigate, toast]);
 
   return (

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.value}`;
+          query = query + ` user:${selectedAccount}`;
         } else {
-          query = query + ` org:${selectedAccount.value}`;
+          query = query + ` org:${selectedAccount}`;
         }
 
         const result = await octokit.rest.search.repos({
@@ -155,13 +155,13 @@ export const RepositoryList = () => {
       {Boolean(repositoryDetails.length) ? (
         <div className="flex flex-col gap-2">
           {repositoryDetails.map((repo, index) => (
-            <div key={index}>
-              <ProjectRepoCard repository={repo} />
+            <>
+              <ProjectRepoCard repository={repo} key={index} />
               {/* Horizontal line */}
               {index !== repositoryDetails.length - 1 && (
                 <div className="border-b border-border-separator/[0.06] w-full" />
               )}
-            </div>
+            </>
           ))}
         </div>
       ) : (

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

@@ -1,8 +1,13 @@
 import { CopyBlock, atomOneLight } from 'react-code-blocks';
 import { Link } from 'react-router-dom';
 
-import { Modal } from 'components/shared/Modal';
-import { Button } from 'components/shared/Button';
+import {
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+} from '@snowballtools/material-tailwind-react-fork';
 
 interface AssignDomainProps {
   open: boolean;
@@ -11,31 +16,36 @@ interface AssignDomainProps {
 
 const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
   return (
-    <Modal open={open} onOpenChange={handleOpen}>
-      <Modal.Content>
-        <Modal.Header>Assign Domain</Modal.Header>
-        <Modal.Body>
-          In order to assign a domain to your production deployments, configure
-          it in the{' '}
-          {/* TODO: Fix selection of project settings tab on navigation to domains */}
-          <Link to="../settings/domains" className="text-light-blue-800 inline">
-            project settings{' '}
-          </Link>
-          (recommended). If you want to assign to this specific deployment,
-          however, you can do so using our command-line interface:
-          {/* https://github.com/rajinwonderland/react-code-blocks/issues/138 */}
-          <CopyBlock
-            text="snowball alias <deployment> <domain>"
-            language=""
-            showLineNumbers={false}
-            theme={atomOneLight}
-          />
-        </Modal.Body>
-        <Modal.Footer className="flex justify-start">
-          <Button onClick={handleOpen}>Okay</Button>
-        </Modal.Footer>
-      </Modal.Content>
-    </Modal>
+    <Dialog open={open} handler={handleOpen}>
+      <DialogHeader>Assign Domain</DialogHeader>
+      <DialogBody>
+        In order to assign a domain to your production deployments, configure it
+        in the{' '}
+        {/* TODO: Fix selection of project settings tab on navigation to domains */}
+        <Link to="../settings/domains" className="text-light-blue-800 inline">
+          project settings{' '}
+        </Link>
+        (recommended). If you want to assign to this specific deployment,
+        however, you can do so using our command-line interface:
+        {/* https://github.com/rajinwonderland/react-code-blocks/issues/138 */}
+        <CopyBlock
+          text="snowball alias <deployment> <domain>"
+          language=""
+          showLineNumbers={false}
+          theme={atomOneLight}
+        />
+      </DialogBody>
+      <DialogFooter className="flex justify-start">
+        <Button
+          className="rounded-3xl"
+          variant="gradient"
+          color="blue"
+          onClick={handleOpen}
+        >
+          <span>Okay</span>
+        </Button>
+      </DialogFooter>
+    </Dialog>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import {
   Deployment,
   DeploymentStatus,
@@ -6,15 +6,6 @@ import {
   Environment,
   Project,
 } from 'gql-client';
-
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Tooltip,
-} from '@mui/material';
-
 import { Avatar } from 'components/shared/Avatar';
 import {
   BranchStrokeIcon,
@@ -27,23 +18,12 @@ 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;
@@ -58,7 +38,6 @@ const STATUS_COLORS: {
   [DeploymentStatus.Building]: 'emphasized',
   [DeploymentStatus.Ready]: 'positive',
   [DeploymentStatus.Error]: 'negative',
-  [DeploymentStatus.Deleting]: 'neutral',
 };
 
 const DeploymentDetailsCard = ({
@@ -68,19 +47,8 @@ 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 ||
-      status === DeploymentStatus.Deleting
-    ) {
+    if (status === DeploymentStatus.Building) {
       return <LoadingIcon className="animate-spin" />;
     }
     if (status === DeploymentStatus.Ready) {
@@ -92,39 +60,18 @@ const DeploymentDetailsCard = ({
     }
   };
 
-  const fetchDeploymentLogs = 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);
-    }
-  };
-
   const renderDeploymentStatus = useCallback(
     (className?: string) => {
       return (
-        <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>
+        <div className={className}>
+          <Tag
+            leftIcon={getIconByDeploymentStatus(deployment.status)}
+            size="xs"
+            type={STATUS_COLORS[deployment.status] ?? 'neutral'}
+          >
+            {deployment.status}
+          </Tag>
+        </div>
       );
     },
     [deployment.status, deployment.commitHash],
@@ -132,7 +79,7 @@ const DeploymentDetailsCard = ({
 
   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-[30%] lg:max-w-[33%]">
+      <div className="flex-1 flex justify-between w-full md:max-w-[25%] lg:max-w-[28%]">
         <div className="flex-1 w-full space-y-2 max-w-[90%] sm:max-w-full">
           {/* DEPLOYMENT URL */}
           {deployment.url && (
@@ -145,12 +92,7 @@ const DeploymentDetailsCard = ({
               </OverflownText>
             </Heading>
           )}
-          {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">
+          <span className="text-sm text-elements-low-em tracking-tight">
             {deployment.environment === Environment.Production
               ? `Production ${deployment.isCurrent ? '(Current)' : ''}`
               : 'Preview'}
@@ -216,20 +158,6 @@ 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

@@ -1,12 +1,5 @@
-import { useState, ComponentPropsWithRef } from 'react';
-
-import {
-  Menu,
-  MenuHandler,
-  MenuItem,
-  MenuList,
-} from '@snowballtools/material-tailwind-react-fork';
-
+import { useState } from 'react';
+import toast from 'react-hot-toast';
 import { Deployment, Domain, Environment, Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
 import {
@@ -16,14 +9,18 @@ import {
   RefreshIcon,
   RocketIcon,
   UndoIcon,
-  CrossCircleIcon,
 } from 'components/shared/CustomIcon';
+import {
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+} from '@snowballtools/material-tailwind-react-fork';
+import { ComponentPropsWithRef } from 'react';
 import AssignDomainDialog from './AssignDomainDialog';
 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;
@@ -43,55 +40,29 @@ export const DeploymentMenu = ({
   ...props
 }: DeploymentMenuProps) => {
   const client = useGQLClient();
-  const { toast, dismiss } = useToast();
 
   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.updateDeploymentToProd) {
+    if (isUpdated) {
       await onUpdate();
-      toast({
-        id: 'deployment_changed_to_production',
-        title: 'Deployment changed to production',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Deployment changed to production');
     } else {
-      toast({
-        id: 'deployment_not_changed_to_production',
-        title: 'Error changing deployment to production',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to change deployment to production');
     }
   };
 
   const redeployToProd = async () => {
     const isRedeployed = await client.redeployToProd(deployment.id);
-    setConfirmButtonLoadingLoading(false);
-    if (isRedeployed.redeployToProd) {
+    if (isRedeployed) {
       await onUpdate();
-      toast({
-        id: 'redeployed_to_production',
-        title: 'Redeployed to production',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Redeployed to production');
     } else {
-      toast({
-        id: 'redeployed_to_production_failed',
-        title: 'Error redeploying to production',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to redeploy to production');
     }
   };
 
@@ -100,45 +71,11 @@ export const DeploymentMenu = ({
       project.id,
       deployment.id,
     );
-    if (isRollbacked.rollbackDeployment) {
+    if (isRollbacked) {
       await onUpdate();
-      toast({
-        id: 'deployment_rolled_back',
-        title: 'Deployment rolled back',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Deployment rolled back');
     } else {
-      toast({
-        id: 'deployment_rollback_failed',
-        title: 'Error rolling back deployment',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
-    }
-  };
-
-  const deleteDeployment = async () => {
-    const isDeleted = await client.deleteDeployment(deployment.id);
-
-    setIsConfirmDeleteLoading(false);
-    setDeleteDeploymentDialog((preVal) => !preVal);
-
-    if (isDeleted.deleteDeployment) {
-      await onUpdate();
-      toast({
-        id: 'deployment_removal_requested',
-        title: 'Deployment removal requested',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
-    } else {
-      toast({
-        id: 'deployment_not_deleted',
-        title: 'Error deleting deployment',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to rollback deployment');
     }
   };
 
@@ -210,12 +147,6 @@ export const DeploymentMenu = ({
             >
               <UndoIcon /> Rollback to this version
             </MenuItem>
-            <MenuItem
-              className="hover:bg-base-bg-emphasized flex items-center gap-3"
-              onClick={() => setDeleteDeploymentDialog((preVal) => !preVal)}
-            >
-              <CrossCircleIcon /> Delete deployment
-            </MenuItem>
           </MenuList>
         </Menu>
       </div>
@@ -238,13 +169,11 @@ 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
@@ -265,15 +194,6 @@ 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/AuctionCard.tsx

@@ -1,171 +0,0 @@
-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 = {
-  backgroundColor: 'rgba(0,0,0, .9)',
-  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 border-gray-200 transition-colors hover:bg-base-bg-alternate 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 text-sm font-medium tracking-tight">
-            Auction Id
-          </span>
-          <span className="text-elements-mid-em text-sm text-right">
-            {project.auctionId}
-          </span>
-        </div>
-
-        <div className="flex justify-between items-center mt-1">
-          <span className="text-elements-high-em 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 text-sm font-medium tracking-tight">
-                  Deployer LRNs
-                </span>
-                {deployers.map((deployer, index) => (
-                  <p key={index} className="text-elements-mid-em text-sm">
-                    {'\u2022'} {deployer.deployerLrn}
-                  </p>
-                ))}
-
-                <div className="flex justify-between items-center mt-1">
-                  <span className="text-elements-high-em 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 text-sm font-medium tracking-tight">
-                  No winning deployers
-                </span>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-
-      <Dialog
-        open={openDialog}
-        onClose={handleCloseDialog}
-        fullWidth
-        maxWidth="md"
-      >
-        <DialogTitle>Auction Details</DialogTitle>
-        <DialogContent style={DIALOG_STYLE}>
-          {auctionDetails && (
-            <pre>{JSON.stringify(auctionDetails, null, 2)}</pre>
-          )}
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleCloseDialog}>Close</Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  );
-};

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

@@ -19,7 +19,7 @@ const AddEnvironmentVariableRow = ({
   isDeleteDisabled,
 }: AddEnvironmentVariableRowProps) => {
   return (
-    <div className="flex gap-2 py-1 self-stretch items-end">
+    <div className="flex py-4 self-stretch">
       <Input
         size="md"
         {...register(`variables.${index}.key`, {
@@ -34,9 +34,16 @@ const AddEnvironmentVariableRow = ({
           required: 'Value field cannot be empty',
         })}
       />
-      <Button size="md" iconOnly onClick={onDelete} disabled={isDeleteDisabled}>
-        <TrashIcon />
-      </Button>
+      <div className="self-end">
+        <Button
+          size="md"
+          iconOnly
+          onClick={onDelete}
+          disabled={isDeleteDisabled}
+        >
+          <TrashIcon />
+        </Button>
+      </div>
     </div>
   );
 };

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

@@ -1,13 +1,13 @@
 import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
+import { AddProjectMemberInput, Permission } from 'gql-client';
 
 import { Typography } from '@snowballtools/material-tailwind-react-fork';
 
 import { Button } from 'components/shared/Button';
 import { Modal } from 'components/shared/Modal';
 import { Input } from 'components/shared/Input';
-import { Select, SelectOption } from 'components/shared/Select';
-import { AddProjectMemberInput, Permission } from 'gql-client';
+import { Checkbox } from 'components/shared/Checkbox';
 
 interface AddMemberDialogProp {
   open: boolean;
@@ -17,30 +17,18 @@ interface AddMemberDialogProp {
 
 interface formData {
   emailAddress: string;
-  canEdit: boolean;
+  permissions: {
+    view: boolean;
+    edit: boolean;
+  };
 }
 
-const permissionViewOptions: SelectOption = {
-  value: Permission.View,
-  label: Permission.View,
-};
-const permissionEditOptions: SelectOption = {
-  value: Permission.Edit,
-  label: Permission.Edit,
-};
-const permissionsDropdownOptions: SelectOption[] = [
-  permissionViewOptions,
-  permissionEditOptions,
-];
-
 const AddMemberDialog = ({
   open,
   handleOpen,
   handleAddMember,
 }: AddMemberDialogProp) => {
   const {
-    watch,
-    setValue,
     handleSubmit,
     register,
     reset,
@@ -48,7 +36,10 @@ const AddMemberDialog = ({
   } = useForm({
     defaultValues: {
       emailAddress: '',
-      canEdit: false,
+      permissions: {
+        view: true,
+        edit: false,
+      },
     },
   });
 
@@ -56,7 +47,11 @@ const AddMemberDialog = ({
     reset();
     handleOpen();
 
-    const permissions = [data.canEdit ? Permission.Edit : Permission.View];
+    const permissions = Object.entries(data.permissions)
+      .filter(([, value]) => value)
+      .map(
+        ([key]) => key.charAt(0).toUpperCase() + key.slice(1),
+      ) as Permission[];
 
     await handleAddMember({ email: data.emailAddress, permissions });
   }, []);
@@ -77,19 +72,19 @@ const AddMemberDialog = ({
                 required: 'email field cannot be empty',
               })}
             />
-            <Select
-              label="Permissions"
-              description="You can change this later if required."
-              options={permissionsDropdownOptions}
-              value={
-                watch('canEdit') ? permissionEditOptions : permissionViewOptions
-              }
-              onChange={(value) =>
-                setValue(
-                  'canEdit',
-                  (value as SelectOption)!.value === Permission.Edit,
-                )
-              }
+            <Typography variant="small">Permissions</Typography>
+            <Typography variant="small">
+              You can change this later if required.
+            </Typography>
+            <Checkbox
+              label={Permission.View}
+              {...register(`permissions.view`)}
+              color="blue"
+            />
+            <Checkbox
+              label={Permission.Edit}
+              {...register(`permissions.edit`)}
+              color="blue"
             />
           </Modal.Body>
           <Modal.Footer>

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

@@ -1,14 +1,21 @@
 import { useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
-
-import { useGQLClient } from 'context/GQLClientContext';
-import { useToast } from 'components/shared/Toast';
-import { Modal } from 'components/shared/Modal';
-import { Button } from 'components/shared/Button';
-import { Input } from 'components/shared/Input';
 import { Project } from 'gql-client';
 
+import {
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Input,
+  Typography,
+} from '@snowballtools/material-tailwind-react-fork';
+
+import { useGQLClient } from '../../../../context/GQLClientContext';
+import { useToast } from 'components/shared/Toast';
+
 interface DeleteProjectDialogProp {
   open: boolean;
   handleOpen: () => void;
@@ -53,38 +60,51 @@ const DeleteProjectDialog = ({
   }, [client, project, handleOpen]);
 
   return (
-    <Modal open={open} onOpenChange={handleOpen}>
-      <Modal.Content>
-        <Modal.Header>Delete project?</Modal.Header>
-        <form onSubmit={handleSubmit(deleteProjectHandler)}>
-          <Modal.Body>
-            <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"
-              {...register('projectName', {
-                required: 'Project name is required',
-                validate: (value) => value === project.name,
-              })}
-              helperText="Deleting your project is irreversible."
-            />
-          </Modal.Body>
-          <Modal.Footer className="flex justify-start">
-            <Button onClick={handleOpen} variant="tertiary">
-              Cancel
-            </Button>
-            <Button variant="danger" type="submit" disabled={!isValid}>
-              Yes, delete project
-            </Button>
-          </Modal.Footer>
-        </form>
-      </Modal.Content>
-    </Modal>
+    <Dialog open={open} handler={handleOpen}>
+      <DialogHeader className="flex justify-between">
+        <div>Delete project?</div>
+        <Button
+          variant="outlined"
+          onClick={handleOpen}
+          className="mr-1 rounded-3xl"
+        >
+          X
+        </Button>
+      </DialogHeader>
+      <form onSubmit={handleSubmit(deleteProjectHandler)}>
+        <DialogBody className="flex flex-col gap-2">
+          <Typography variant="paragraph">
+            Deleting your project is irreversible. Enter your project’s
+            name&nbsp;
+            <span className="bg-blue-100 text-blue-700">({project.name})</span>
+            &nbsp;below to confirm you want to permanently delete it:
+          </Typography>
+          <Input
+            id="input"
+            {...register('projectName', {
+              required: 'Project name is required',
+              validate: (value) => value === project.name,
+            })}
+          />
+          <Typography variant="small" color="red">
+            ^ Deleting your project is irreversible.
+          </Typography>
+        </DialogBody>
+        <DialogFooter className="flex justify-start">
+          <Button variant="outlined" onClick={handleOpen} className="mr-1">
+            Cancel
+          </Button>
+          <Button
+            variant="gradient"
+            color="red"
+            type="submit"
+            disabled={!isValid}
+          >
+            Yes, Delete project
+          </Button>
+        </DialogFooter>
+      </form>
+    </Dialog>
   );
 };
 

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Domain, DomainStatus, Project } from 'gql-client';
 
 import {
+  Chip,
   Typography,
   Menu,
   MenuHandler,
@@ -14,15 +15,6 @@ 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,
@@ -87,29 +79,22 @@ const DomainCard = ({
     <>
       <div className="flex justify-between py-3">
         <div className="flex justify-start gap-1">
-          <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>
+          <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>}
+          />
         </div>
 
         <div className="flex justify-start gap-1">
           <i
             id="refresh"
-            className="cursor-pointer"
+            className="cursor-pointer w-8 h-8"
             onClick={() => {
               SetRefreshStatus(RefreshStatus.CHECKING);
               setTimeout(() => {
@@ -117,17 +102,11 @@ const DomainCard = ({
               }, CHECK_FAIL_TIMEOUT);
             }}
           >
-            {refreshStatus === RefreshStatus.CHECKING ? (
-              <LoadingIcon className="animate-spin" />
-            ) : (
-              'L'
-            )}
+            {refreshStatus === RefreshStatus.CHECKING ? 'L' : 'R'}
           </i>
           <Menu placement="bottom-end">
             <MenuHandler>
-              <Button iconOnly>
-                <GearIcon />
-              </Button>
+              <button className="border-2 rounded-full w-8 h-8">...</button>
             </MenuHandler>
             <MenuList>
               <MenuItem
@@ -164,13 +143,13 @@ const DomainCard = ({
       {domain.status === DomainStatus.Pending && (
         <Card className="bg-slate-100 p-4 text-sm">
           {refreshStatus === RefreshStatus.IDLE ? (
-            <Heading>
+            <Typography variant="small">
               ^ Add these records to your domain and refresh to check
-            </Heading>
+            </Typography>
           ) : refreshStatus === RefreshStatus.CHECKING ? (
-            <Heading className="text-blue-500">
+            <Typography variant="small" className="text-blue-500">
               ^ Checking records for {domain.name}
-            </Heading>
+            </Typography>
           ) : (
             <div className="flex gap-2 text-red-500 mb-2">
               <div className="grow">

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

@@ -1,5 +1,6 @@
 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 {
@@ -8,11 +9,10 @@ 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,7 +40,6 @@ const EditDomainDialog = ({
   onUpdate,
 }: EditDomainDialogProp) => {
   const client = useGQLClient();
-  const { toast, dismiss } = useToast();
 
   const getRedirectUrl = (domain: Domain) => {
     const redirectDomain = domain.redirectTo;
@@ -100,20 +99,10 @@ const EditDomainDialog = ({
 
       if (updateDomain) {
         await onUpdate();
-        toast({
-          id: 'domain_id_updated',
-          title: `Domain ${domain.name} has been updated`,
-          variant: 'success',
-          onDismiss: dismiss,
-        });
+        toast.success(`Domain ${domain.name} has been updated`);
       } else {
         reset();
-        toast({
-          id: 'domain_id_error_update',
-          title: `Error updating domain ${domain.name}`,
-          variant: 'error',
-          onDismiss: dismiss,
-        });
+        toast.error(`Error updating domain ${domain.name}`);
       }
 
       handleOpen();

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

@@ -1,20 +1,16 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import { EnvironmentVariable } from 'gql-client';
+
+import {
+  IconButton,
+  Typography,
+} from '@snowballtools/material-tailwind-react-fork';
 
 import { useGQLClient } from 'context/GQLClientContext';
 import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog';
 import { Input } from 'components/shared/Input';
-import { Button } from 'components/shared/Button';
-import {
-  CheckRoundFilledIcon,
-  CrossIcon,
-  EditBigIcon,
-  HideEyeOffIcon,
-  ShowEyeIcon,
-  TrashIcon,
-} from 'components/shared/CustomIcon';
-import { EnvironmentVariable } from 'gql-client';
-import { useToast } from 'components/shared/Toast';
 
 const ShowPasswordIcon = ({
   handler,
@@ -30,24 +26,19 @@ const ShowPasswordIcon = ({
       }}
       className="cursor-pointer"
     >
-      {isVisible ? <ShowEyeIcon size={16} /> : <HideEyeOffIcon size={16} />}
+      {isVisible ? '-' : '+'}
     </span>
   );
 };
 
-export interface EditEnvironmentVariableRowProps {
-  variable: EnvironmentVariable;
-  onUpdate: () => Promise<void>;
-  isFirstVariable?: boolean;
-}
-
 const EditEnvironmentVariableRow = ({
   variable,
   onUpdate,
-  isFirstVariable = false,
-}: EditEnvironmentVariableRowProps) => {
+}: {
+  variable: EnvironmentVariable;
+  onUpdate: () => Promise<void>;
+}) => {
   const client = useGQLClient();
-  const { toast, dismiss } = useToast();
 
   const { handleSubmit, register, reset } = useForm({
     defaultValues: {
@@ -67,19 +58,9 @@ const EditEnvironmentVariableRow = ({
     if (isEnvironmentVariableRemoved) {
       await onUpdate();
       setDeleteDialogOpen((preVal) => !preVal);
-      toast({
-        id: 'variable_deleted',
-        title: 'Variable deleted',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Variable deleted');
     } else {
-      toast({
-        id: 'variable_not_deleted',
-        title: 'Variable not deleted',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Variable not deleted');
     }
   }, [variable, onUpdate]);
 
@@ -90,21 +71,10 @@ const EditEnvironmentVariableRow = ({
 
       if (isEnvironmentVariableUpdated) {
         await onUpdate();
-        toast({
-          id: 'variable_updated',
-          title: 'Variable edited',
-          variant: 'success',
-          onDismiss: dismiss,
-        });
-
+        toast.success('Variable edited');
         setEdit((preVal) => !preVal);
       } else {
-        toast({
-          id: 'variable_not_updated',
-          title: 'Variable not edited',
-          variant: 'error',
-          onDismiss: dismiss,
-        });
+        toast.error('Variable not edited');
       }
     },
     [variable, onUpdate],
@@ -116,55 +86,71 @@ const EditEnvironmentVariableRow = ({
 
   return (
     <>
-      <div className="flex gap-1 items-end">
-        <Input
-          disabled={!edit}
-          {...register(`key`)}
-          label={isFirstVariable ? 'Key' : undefined}
-        />
-        <Input
-          disabled={!edit}
-          type={showPassword || edit ? 'text' : 'password'}
-          label={isFirstVariable ? 'Value' : undefined}
-          rightIcon={
-            <ShowPasswordIcon
-              handler={() => {
-                setShowPassword((prevShowPassword) => !prevShowPassword);
-              }}
-              isVisible={showPassword || edit}
-            />
-          }
-          {...register(`value`)}
-        />
-        <Button
-          iconOnly
-          size="md"
-          onClick={() => {
-            edit
-              ? handleSubmit(updateEnvironmentVariableHandler)()
-              : setEdit((preVal) => !preVal);
-          }}
-        >
-          {edit ? (
-            <CheckRoundFilledIcon size={16} />
-          ) : (
-            <EditBigIcon size={16} />
-          )}
-        </Button>
-        <Button
-          iconOnly
-          size="md"
-          onClick={() => {
-            if (edit) {
-              reset();
-              setEdit((preVal) => !preVal);
-            } else {
-              setDeleteDialogOpen((preVal) => !preVal);
+      <div className="flex gap-1 p-2">
+        <div>
+          <Typography variant="small">Key</Typography>
+          <Input disabled={!edit} {...register(`key`)} />
+        </div>
+        <div>
+          <Typography variant="small">Value</Typography>
+          <Input
+            disabled={!edit}
+            type={showPassword ? 'text' : 'password'}
+            leftIcon={
+              <ShowPasswordIcon
+                handler={() => {
+                  setShowPassword((prevShowPassword) => !prevShowPassword);
+                }}
+                isVisible={showPassword}
+              />
             }
-          }}
-        >
-          {edit ? <CrossIcon size={16} /> : <TrashIcon size={16} />}
-        </Button>
+            {...register(`value`)}
+          />
+        </div>
+        {edit ? (
+          <>
+            <div className="self-end">
+              <IconButton
+                onClick={handleSubmit(updateEnvironmentVariableHandler)}
+                size="sm"
+              >
+                {'S'}
+              </IconButton>
+            </div>
+            <div className="self-end">
+              <IconButton
+                size="sm"
+                onClick={() => {
+                  reset();
+                  setEdit((preVal) => !preVal);
+                }}
+              >
+                {'C'}
+              </IconButton>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="self-end">
+              <IconButton
+                size="sm"
+                onClick={() => {
+                  setEdit((preVal) => !preVal);
+                }}
+              >
+                {'E'}
+              </IconButton>
+            </div>
+            <div className="self-end">
+              <IconButton
+                size="sm"
+                onClick={() => setDeleteDialogOpen((preVal) => !preVal)}
+              >
+                {'D'}
+              </IconButton>
+            </div>
+          </>
+        )}
       </div>
       <DeleteVariableDialog
         handleCancel={() => setDeleteDialogOpen((preVal) => !preVal)}

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

@@ -80,7 +80,7 @@ const MemberCard = ({
 
   return (
     <div
-      className={`flex py-1 items-center ${!isFirstCard && 'mt-1 border-t border-gray-300'}`}
+      className={`flex p-1 items-center ${!isFirstCard && 'mt-1 border-t border-gray-300'}`}
     >
       <div className="basis-1/2">
         {member.name && (

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

@@ -3,8 +3,6 @@ import { useState } from 'react';
 import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog';
 import { Button } from 'components/shared/Button';
 import { useToast } from 'components/shared/Toast';
-import { Input } from 'components/shared/Input';
-import { CopyIcon, TrashIcon } from 'components/shared/CustomIcon';
 
 interface WebhookCardProps {
   webhookUrl: string;
@@ -16,12 +14,11 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   return (
-    <div className="flex justify-between w-full mb-3 gap-3">
-      <Input value={webhookUrl} disabled />
+    <div className="flex justify-between w-full mb-3">
+      {webhookUrl}
       <div className="flex gap-3">
         <Button
-          iconOnly
-          size="md"
+          size="sm"
           onClick={() => {
             navigator.clipboard.writeText(webhookUrl);
             toast({
@@ -32,17 +29,16 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
             });
           }}
         >
-          <CopyIcon />
+          Copy
         </Button>
         <Button
-          iconOnly
-          size="md"
+          size="sm"
           variant="danger"
           onClick={() => {
             setDeleteDialogOpen(true);
           }}
         >
-          <TrashIcon />
+          X
         </Button>
       </div>
       <DeleteWebhookDialog

packages/frontend/src/components/shared/Calendar/Calendar.css

@@ -30,7 +30,7 @@ abbr[title] {
   @apply !text-elements-disabled !bg-transparent;
 }
 
-.react-calendar__month-view__days__day--neighboringMonth:focus-visible {
+.react-calendar__month-view__days__day--neighboringMonth {
   @apply !text-elements-disabled !bg-transparent;
 }
 

packages/frontend/src/components/shared/CustomIcon/CollaboratorsIcon.tsx

@@ -12,7 +12,7 @@ export const CollaboratorsIcon = (props: CustomIconProps) => {
       <path
         d="M12.5002 2.08301C14.3411 2.08301 15.8335 3.57539 15.8335 5.41634C15.8335 7.25729 14.3411 8.74968 12.5002 8.74968M14.5835 11.1659C17.2451 12.0374 19.1668 14.498 19.1668 17.083H16.6668M7.50016 8.74968C5.65921 8.74968 4.16683 7.25729 4.16683 5.41634C4.16683 3.57539 5.65921 2.08301 7.50016 2.08301C9.34111 2.08301 10.8335 3.57539 10.8335 5.41634C10.8335 7.25729 9.34111 8.74968 7.50016 8.74968ZM0.833496 17.083C0.833496 13.8613 3.81826 10.833 7.50016 10.833C11.1821 10.833 14.1668 13.8613 14.1668 17.083H0.833496Z"
         stroke="currentColor"
-        strokeLinecap="square"
+        stroke-linecap="square"
       />
     </CustomIcon>
   );

packages/frontend/src/components/shared/CustomIcon/CopyUnfilledIcon.tsx

@@ -12,8 +12,8 @@ export const CopyUnfilledIcon = (props: CustomIconProps) => {
       <path
         d="M6 5.625V5.025C6 4.18492 6 3.76488 6.16349 3.44401C6.3073 3.16177 6.53677 2.9323 6.81901 2.78849C7.13988 2.625 7.55992 2.625 8.4 2.625H12.975C13.8151 2.625 14.2351 2.625 14.556 2.78849C14.8382 2.9323 15.0677 3.16177 15.2115 3.44401C15.375 3.76488 15.375 4.18492 15.375 5.025V9.975C15.375 10.8151 15.375 11.2351 15.2115 11.556C15.0677 11.8382 14.8382 12.0677 14.556 12.2115C14.2351 12.375 13.8151 12.375 12.975 12.375H12.375M12.375 8.025V12.975C12.375 13.8151 12.375 14.2351 12.2115 14.556C12.0677 14.8382 11.8382 15.0677 11.556 15.2115C11.2351 15.375 10.8151 15.375 9.975 15.375H5.025C4.18492 15.375 3.76488 15.375 3.44401 15.2115C3.16177 15.0677 2.9323 14.8382 2.78849 14.556C2.625 14.2351 2.625 13.8151 2.625 12.975V8.025C2.625 7.18492 2.625 6.76488 2.78849 6.44401C2.9323 6.16177 3.16177 5.9323 3.44401 5.78849C3.76488 5.625 4.18492 5.625 5.025 5.625H9.975C10.8151 5.625 11.2351 5.625 11.556 5.78849C11.8382 5.9323 12.0677 6.16177 12.2115 6.44401C12.375 6.76488 12.375 7.18492 12.375 8.025Z"
         stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       />
     </CustomIcon>
   );

packages/frontend/src/components/shared/CustomIcon/EditBigIcon.tsx

@@ -1,26 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const EditBigIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <g>
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M4.61304 1.99935L7.5 1.99935C7.77614 1.99935 8 2.22321 8 2.49935C8 2.77549 7.77614 2.99935 7.5 2.99935H4.63333C4.25171 2.99935 3.99557 2.99974 3.79832 3.01585C3.6069 3.03149 3.51538 3.05941 3.45501 3.09018C3.29821 3.17007 3.17072 3.29755 3.09083 3.45436C3.06007 3.51473 3.03214 3.60625 3.01651 3.79767C3.00039 3.99492 3 4.25106 3 4.63268V11.366C3 11.7476 3.00039 12.0038 3.01651 12.201C3.03214 12.3924 3.06007 12.484 3.09083 12.5443C3.17072 12.7011 3.29821 12.8286 3.45501 12.9085C3.51538 12.9393 3.6069 12.9672 3.79832 12.9828C3.99557 12.999 4.25171 12.9993 4.63333 12.9993H11.3667C11.7483 12.9993 12.0044 12.999 12.2017 12.9828C12.3931 12.9672 12.4846 12.9393 12.545 12.9085C12.7018 12.8286 12.8293 12.7011 12.9092 12.5443C12.9399 12.484 12.9679 12.3924 12.9835 12.201C12.9996 12.0038 13 11.7476 13 11.366V8.49935C13 8.22321 13.2239 7.99935 13.5 7.99935C13.7761 7.99935 14 8.22321 14 8.49935V11.3863C14 11.7424 14 12.0396 13.9802 12.2825C13.9595 12.5357 13.9147 12.7735 13.8002 12.9983C13.6244 13.3433 13.3439 13.6238 12.999 13.7995C12.7741 13.9141 12.5364 13.9588 12.2831 13.9795C12.0403 13.9994 11.7431 13.9994 11.387 13.9993H4.61303C4.25693 13.9994 3.95971 13.9994 3.71689 13.9795C3.46363 13.9588 3.22586 13.9141 3.00102 13.7995C2.65605 13.6238 2.37559 13.3433 2.19982 12.9983C2.08526 12.7735 2.04052 12.5357 2.01983 12.2825C1.99999 12.0396 1.99999 11.7424 2 11.3863V4.61239C1.99999 4.25629 1.99999 3.95906 2.01983 3.71624C2.04052 3.46298 2.08526 3.22521 2.19982 3.00037C2.37559 2.6554 2.65605 2.37494 3.00102 2.19917C3.22586 2.08461 3.46363 2.03987 3.71689 2.01918C3.95971 1.99934 4.25694 1.99934 4.61304 1.99935Z"
-          fill="currentColor"
-        />
-        <path
-          d="M13.963 1.92174C13.2471 1.20578 12.0863 1.20578 11.3703 1.92174L5.67504 7.617C5.45625 7.83579 5.33333 8.13254 5.33333 8.44196V10.1658C5.33333 10.442 5.55719 10.6658 5.83333 10.6658H7.55719C7.86661 10.6658 8.16336 10.5429 8.38215 10.3241L14.0774 4.62884C14.7934 3.91288 14.7934 2.75208 14.0774 2.03612L13.963 1.92174Z"
-          fill="currentColor"
-        />
-      </g>
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/HideEyeOffIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const HideEyeOffIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M2.02012 1.31246C1.82486 1.1172 1.50828 1.1172 1.31301 1.31246C1.11775 1.50772 1.11775 1.82431 1.31301 2.01957L2.02012 1.31246ZM1.62744 7.42685L1.1887 7.18704L1.62744 7.42685ZM11.7196 11.719L12.0731 11.3655L11.7196 11.719ZM13.9797 14.6862C14.1749 14.8815 14.4915 14.8815 14.6868 14.6862C14.8821 14.491 14.8821 14.1744 14.6868 13.9791L13.9797 14.6862ZM1.62804 8.57302L1.18932 8.81287H1.18932L1.62804 8.57302ZM5.2498 3.12216C4.99958 3.23898 4.89145 3.53652 5.00828 3.78674C5.1251 4.03695 5.42264 4.14508 5.67286 4.02826L5.2498 3.12216ZM14.3718 7.42567L14.8105 7.18582L14.3718 7.42567ZM12.3668 10.4904C12.1743 10.6884 12.1786 11.0049 12.3766 11.1975C12.5745 11.39 12.891 11.3857 13.0836 11.1877L12.3668 10.4904ZM14.3724 8.57183L13.9336 8.33203V8.33203L14.3724 8.57183ZM6.58569 6.58512L6.93924 6.23157C6.74398 6.03631 6.4274 6.03631 6.23213 6.23157L6.58569 6.58512ZM9.41411 9.41355L9.76767 9.7671C9.86144 9.67334 9.91411 9.54616 9.91411 9.41355C9.91411 9.28094 9.86144 9.15377 9.76767 9.06L9.41411 9.41355ZM1.31301 2.01957L3.92667 4.63323L4.63378 3.92612L2.02012 1.31246L1.31301 2.01957ZM2.06618 7.66665C2.78183 6.35732 3.64551 5.3672 4.57648 4.68246L3.98397 3.87689C2.91986 4.65956 1.96456 5.76756 1.1887 7.18704L2.06618 7.66665ZM3.92667 4.63323L11.366 12.0726L12.0731 11.3655L4.63378 3.92612L3.92667 4.63323ZM11.366 12.0726L13.9797 14.6862L14.6868 13.9791L12.0731 11.3655L11.366 12.0726ZM1.18932 8.81287C2.47954 11.1728 4.26886 12.674 6.21987 13.243C8.17733 13.8138 10.2399 13.428 12.0158 12.1218L11.4233 11.3162C9.88108 12.4506 8.13835 12.7608 6.49983 12.283C4.85485 11.8033 3.25748 10.5112 2.06675 8.33317L1.18932 8.81287ZM1.1887 7.18704C0.911724 7.69378 0.912792 8.30707 1.18932 8.81287L2.06675 8.33317C1.95313 8.12535 1.95308 7.87358 2.06618 7.66665L1.1887 7.18704ZM5.67286 4.02826C7.09829 3.36272 8.63166 3.32591 10.0669 3.91426C11.5069 4.50457 12.8795 5.7385 13.933 7.66553L14.8105 7.18582C13.6688 5.09759 12.1371 3.68216 10.4462 2.98899C8.75047 2.29385 6.92622 2.33943 5.2498 3.12216L5.67286 4.02826ZM13.0836 11.1877C13.7227 10.5308 14.305 9.7376 14.8111 8.81164L13.9336 8.33203C13.4669 9.18586 12.9371 9.90419 12.3668 10.4904L13.0836 11.1877ZM13.933 7.66553C14.0467 7.87336 14.0467 8.12511 13.9336 8.33203L14.8111 8.81164C15.0881 8.30489 15.087 7.69161 14.8105 7.18582L13.933 7.66553ZM7.9999 9.49934C7.17147 9.49934 6.4999 8.82776 6.4999 7.99934H5.4999C5.4999 9.38005 6.61919 10.4993 7.9999 10.4993V9.49934ZM6.4999 7.99934C6.4999 7.58499 6.66725 7.21067 6.93924 6.93868L6.23213 6.23157C5.78027 6.68343 5.4999 7.30912 5.4999 7.99934H6.4999ZM6.23213 6.93868L9.06056 9.7671L9.76767 9.06L6.93924 6.23157L6.23213 6.93868ZM9.06056 9.06C8.78857 9.33199 8.41425 9.49934 7.9999 9.49934V10.4993C8.69012 10.4993 9.3158 10.219 9.76767 9.7671L9.06056 9.06Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ShowEyeIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ShowEyeIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M1.62774 7.42694L2.06646 7.66677L1.62774 7.42694ZM14.3721 7.42686L13.9333 7.66669V7.66669L14.3721 7.42686ZM1.62774 8.5731L2.06646 8.33327H2.06646L1.62774 8.5731ZM14.3721 8.57302L14.8108 8.81285L14.8108 8.81285L14.3721 8.57302ZM2.06646 7.66677C3.61474 4.83447 5.84609 3.50002 7.99991 3.5C10.1537 3.49998 12.3851 4.8344 13.9333 7.66669L14.8108 7.18703C13.1325 4.11679 10.6049 2.49998 7.9999 2.5C5.39486 2.50002 2.86735 4.11687 1.18901 7.18711L2.06646 7.66677ZM1.18901 8.81293C2.86735 11.8832 5.39486 13.5 7.99991 13.5C10.6049 13.4999 13.1325 11.8831 14.8108 8.81285L13.9333 8.33319C12.3851 11.1655 10.1537 12.4999 7.9999 12.5C5.84609 12.5 3.61473 11.1656 2.06646 8.33327L1.18901 8.81293ZM1.18901 7.18711C0.912257 7.69338 0.912257 8.30665 1.18901 8.81293L2.06646 8.33327C1.95311 8.1259 1.95311 7.87414 2.06646 7.66677L1.18901 7.18711ZM13.9333 7.66669C14.0467 7.87406 14.0467 8.12582 13.9333 8.33319L14.8108 8.81285C15.0875 8.30658 15.0875 7.69331 14.8108 7.18703L13.9333 7.66669ZM9.4999 8C9.4999 8.82843 8.82833 9.5 7.9999 9.5V10.5C9.38062 10.5 10.4999 9.38071 10.4999 8H9.4999ZM7.9999 9.5C7.17148 9.5 6.4999 8.82843 6.4999 8H5.4999C5.4999 9.38071 6.61919 10.5 7.9999 10.5V9.5ZM6.4999 8C6.4999 7.17157 7.17148 6.5 7.9999 6.5V5.5C6.61919 5.5 5.4999 6.61929 5.4999 8H6.4999ZM7.9999 6.5C8.82833 6.5 9.4999 7.17157 9.4999 8H10.4999C10.4999 6.61929 9.38062 5.5 7.9999 5.5V6.5Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/TrashIcon.tsx

@@ -10,8 +10,8 @@ export const TrashIcon: React.FC<CustomIconProps> = (props) => {
       {...props}
     >
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M5.05612 3.33398C5.52062 2.16265 6.66341 1.33398 8.00079 1.33398C9.33816 1.33398 10.481 2.16265 10.9455 3.33398H14.1668C14.443 3.33398 14.6668 3.55784 14.6668 3.83398C14.6668 4.11013 14.443 4.33398 14.1668 4.33398H13.3023L12.7463 12.952C12.684 13.9167 11.8834 14.6673 10.9167 14.6673H5.08358C4.11688 14.6673 3.31629 13.9167 3.25405 12.952L2.69805 4.33398H1.8335C1.55735 4.33398 1.3335 4.11013 1.3335 3.83398C1.3335 3.55784 1.55735 3.33398 1.8335 3.33398H5.05612ZM6.17457 3.33398C6.55973 2.73248 7.23408 2.33398 8.00079 2.33398C8.76749 2.33398 9.44184 2.73248 9.827 3.33398H6.17457ZM7.00016 7.16732C7.00016 6.89118 6.77631 6.66732 6.50016 6.66732C6.22402 6.66732 6.00016 6.89118 6.00016 7.16732V10.834C6.00016 11.1101 6.22402 11.334 6.50016 11.334C6.77631 11.334 7.00016 11.1101 7.00016 10.834V7.16732ZM9.50016 6.66732C9.77631 6.66732 10.0002 6.89118 10.0002 7.16732V10.834C10.0002 11.1101 9.77631 11.334 9.50016 11.334C9.22402 11.334 9.00016 11.1101 9.00016 10.834V7.16732C9.00016 6.89118 9.22402 6.66732 9.50016 6.66732Z"
         fill="currentColor"
       />

packages/frontend/src/components/shared/CustomIcon/index.ts

@@ -73,9 +73,6 @@ export * from './SwitchIcon';
 export * from './CollaboratorsIcon';
 export * from './ChevronUpSmallIcon';
 export * from './ChevronDownSmallIcon';
-export * from './EditBigIcon';
-export * from './ShowEyeIcon';
-export * from './HideEyeOffIcon';
 
 // Templates
 export * from './templates';

packages/frontend/src/components/shared/Input/Input.tsx

@@ -4,6 +4,7 @@ import {
   useMemo,
   ComponentPropsWithoutRef,
 } from 'react';
+import { FieldValues, UseFormRegister } from 'react-hook-form';
 
 import { WarningIcon } from 'components/shared/CustomIcon';
 import { cloneIcon } from 'utils/cloneIcon';
@@ -11,7 +12,7 @@ import { cn } from 'utils/classnames';
 
 import { InputTheme, inputTheme } from './Input.theme';
 
-export interface InputProps
+export interface InputProps<T extends FieldValues = FieldValues>
   extends InputTheme,
     Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
   label?: string;
@@ -19,6 +20,9 @@ export interface InputProps
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
   helperText?: string;
+
+  // react-hook-form optional register
+  register?: ReturnType<UseFormRegister<T>>;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -30,6 +34,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       leftIcon,
       rightIcon,
       helperText,
+      register,
       size,
       state,
       appearance,
@@ -102,11 +107,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         <div className={containerCls({ class: className })}>
           {leftIcon && renderLeftIcon}
           <input
+            {...(register ? register : {})}
             className={cn(inputCls(), {
               'pl-10': leftIcon,
             })}
-            ref={ref}
             {...props}
+            ref={ref}
           />
           {rightIcon && renderRightIcon}
         </div>

packages/frontend/src/components/shared/Sidebar/Sidebar.tsx

@@ -1,8 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { User } from 'gql-client';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { NavLink, useNavigate, useParams } from 'react-router-dom';
+import { Organization, User } from 'gql-client';
 import { motion } from 'framer-motion';
-import { useDisconnect } from 'wagmi';
 
 import { useGQLClient } from 'context/GQLClientContext';
 import {
@@ -19,7 +18,8 @@ import { getInitials } from 'utils/geInitials';
 import { Button } from 'components/shared/Button';
 import { cn } from 'utils/classnames';
 import { useMediaQuery } from 'usehooks-ts';
-import { BASE_URL } from 'utils/constants';
+import { SIDEBAR_MENU } from './constants';
+import { UserSelect } from 'components/shared/UserSelect';
 
 interface SidebarProps {
   mobileOpen?: boolean;
@@ -32,7 +32,6 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
   const isDesktop = useMediaQuery('(min-width: 960px)');
 
   const [user, setUser] = useState<User>();
-  const { disconnect } = useDisconnect();
 
   const fetchUser = useCallback(async () => {
     const { user } = await client.getUser();
@@ -43,15 +42,54 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
     fetchUser();
   }, []);
 
+  const [selectedOrgSlug, setSelectedOrgSlug] = useState(orgSlug);
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+
+  const fetchUserOrganizations = useCallback(async () => {
+    const { organizations } = await client.getOrganizations();
+    setOrganizations(organizations);
+  }, [orgSlug]);
+
+  useEffect(() => {
+    fetchUserOrganizations();
+    setSelectedOrgSlug(orgSlug);
+  }, [orgSlug]);
+
+  const formattedSelected = useMemo(() => {
+    const selected = organizations.find((org) => org.slug === selectedOrgSlug);
+    return {
+      value: selected?.slug ?? '',
+      label: selected?.name ?? '',
+      imgSrc: '/logo.svg',
+    };
+  }, [organizations, selectedOrgSlug, orgSlug]);
+
+  const formattedSelectOptions = useMemo(() => {
+    return organizations.map((org) => ({
+      value: org.slug,
+      label: org.name,
+      imgSrc: '/logo.svg',
+    }));
+  }, [organizations, selectedOrgSlug, orgSlug]);
+
+  const renderMenu = useMemo(() => {
+    return SIDEBAR_MENU(orgSlug).map(({ title, icon, url }, index) => (
+      <NavLink to={url} key={index}>
+        <Tabs.Trigger icon={icon} value={title}>
+          {title}
+        </Tabs.Trigger>
+      </NavLink>
+    ));
+  }, [orgSlug]);
+
   const handleLogOut = useCallback(async () => {
-    await fetch(`${BASE_URL}/auth/logout`, {
+    await fetch(`${import.meta.env.VITE_SERVER_URL}/auth/logout`, {
       method: 'POST',
       credentials: 'include',
     });
     localStorage.clear();
-    disconnect();
     navigate('/login');
-  }, [disconnect, navigate]);
+  }, [navigate]);
 
   return (
     <motion.nav
@@ -75,8 +113,16 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
         <div className="hidden lg:flex">
           <Logo orgSlug={orgSlug} />
         </div>
-        {/* This element ensures the space between logo and navigation */}
-        <div className="flex-1"></div>
+        {/* Switch organization */}
+        <div className="flex flex-1 flex-col gap-4">
+          <UserSelect
+            value={formattedSelected}
+            options={formattedSelectOptions}
+          />
+          <Tabs defaultValue="Projects" orientation="vertical">
+            <Tabs.List>{renderMenu}</Tabs.List>
+          </Tabs>
+        </div>
         {/* Bottom navigation */}
         <div className="flex flex-col gap-5 justify-end">
           <Tabs defaultValue="Projects" orientation="vertical">

packages/frontend/src/components/shared/UserSelect/UserSelect.tsx

@@ -103,12 +103,11 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
     <div className={theme.container()}>
       {/* Input */}
       <div
-        {...getToggleButtonProps(
-          {
-            ref: inputWrapperRef,
-          },
-          { suppressRefError: true },
-        )}
+        {...getToggleButtonProps({
+          ref: inputWrapperRef,
+          suppressRefError: true,
+        })}
+        ref={inputWrapperRef}
         onClick={() => !dropdownOpen && openMenu()}
         className="cursor-pointer relative py-2 pl-2 pr-4 flex min-w-[200px] w-full items-center justify-between rounded-xl bg-surface-card shadow-sm"
       >

packages/frontend/src/components/shared/VerifyCodeInput/VerifyCodeInput.tsx

@@ -1,117 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { Input } from '../Input';
-
-export interface VerifyCodeInputProps {
-  code: string;
-  setCode: (code: string) => void;
-  submitCode: () => void;
-  loading: boolean;
-}
-
-export const VerifyCodeInput = ({
-  code,
-  setCode,
-  submitCode,
-  loading,
-}: VerifyCodeInputProps) => {
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-
-  const handlePaste = (
-    e: React.ClipboardEvent<HTMLInputElement>,
-    i: number,
-  ) => {
-    e.preventDefault();
-    const pasteData = e.clipboardData.getData('text').replace(/\D/g, ''); // Only digits
-    if (pasteData.length > 0) {
-      let newCodeArray = code.split('');
-      for (let j = 0; j < pasteData.length && i + j < 6; j++) {
-        newCodeArray[i + j] = pasteData[j];
-      }
-      const newCode = newCodeArray.join('');
-      setCode(newCode);
-      const nextIndex = Math.min(i + pasteData.length, 5);
-      const nextInput = inputRefs.current[nextIndex];
-      if (nextInput) nextInput.focus();
-      if (!newCode.includes(' ')) {
-        submitCode();
-      }
-    }
-  };
-
-  const handleKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    i: number,
-  ) => {
-    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-
-    if (e.key === 'Backspace') {
-      e.preventDefault();
-      const isEmpty = code[i] === ' ';
-      const newCode = !isEmpty
-        ? code.slice(0, i) + ' ' + code.slice(i + 1, 6)
-        : code.slice(0, i - 1) + ' ' + code.slice(i, 6);
-
-      setCode(newCode.slice(0, 6));
-
-      if (i === 0 || !isEmpty) return;
-      const prev = inputRefs.current[i - 1];
-      if (prev) prev.focus();
-      return;
-    }
-
-    if (!e.key.match(/[0-9]/)) return;
-
-    e.preventDefault(); // Prevent the default event to avoid duplicate input
-
-    const newCode = code.slice(0, i) + e.key + code.slice(i + 1, 6);
-    setCode(newCode);
-
-    if (i === 5) {
-      submitCode();
-      return;
-    }
-
-    const next = inputRefs.current[i + 1];
-    if (next) next.focus();
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {
-    const value = e.target.value.slice(-1);
-    if (!value.match(/[0-9]/)) return;
-
-    const newCode = code.slice(0, i) + value + code.slice(i + 1, 6);
-    setCode(newCode);
-
-    if (i < 5) {
-      const next = inputRefs.current[i + 1];
-      if (next) next.focus();
-    }
-
-    if (!newCode.includes(' ')) {
-      submitCode();
-    }
-  };
-
-  useEffect(() => {
-    if (inputRefs.current[0]) {
-      inputRefs.current[0].focus();
-    }
-  }, []);
-
-  return (
-    <div className="flex gap-2">
-      {code.split('').map((char, i) => (
-        <Input
-          key={i}
-          value={char === ' ' ? '' : char}
-          ref={(el) => (inputRefs.current[i] = el)}
-          onChange={(e) => handleChange(e, i)}
-          onPaste={(e) => handlePaste(e, i)}
-          onKeyDown={(e) => handleKeyDown(e, i)}
-          disabled={!!loading}
-          style={{ textAlign: 'center' }} // Add this line to center text
-        />
-      ))}
-    </div>
-  );
-};

packages/frontend/src/components/shared/VerifyCodeInput/index.ts

@@ -1 +0,0 @@
-export { VerifyCodeInput } from './VerifyCodeInput';

packages/frontend/src/components/shared/index.ts

@@ -1,27 +0,0 @@
-export { Avatar } from './Avatar';
-export { Badge } from './Badge';
-export { Button } from './Button';
-export { Calendar } from './Calendar';
-export { Checkbox } from './Checkbox';
-export { DatePicker } from './DatePicker';
-export { DotBorder } from './DotBorder';
-export { Heading } from './Heading';
-export { IconWithFrame } from './IconWithFrame';
-export { InlineNotification } from './InlineNotification';
-export { Input } from './Input';
-export { Modal } from './Modal';
-export { OverflownText } from './OverflownText';
-export { Radio } from './Radio';
-export { SegmentedControls } from './SegmentedControls';
-export { Select } from './Select';
-export { Sidebar } from './Sidebar';
-export { Step } from './Steps';
-export { Switch } from './Switch';
-export { Table } from './Table';
-export { Tabs } from './Tabs';
-export { Tag } from './Tag';
-export { useToast } from './Toast';
-export { Tooltip } from './Tooltip';
-export { UserSelect } from './UserSelect';
-export { VerifyCodeInput } from './VerifyCodeInput';
-export { WavyBorder } from './WavyBorder';

packages/frontend/src/context/WalletConnectContext.tsx

@@ -1,210 +0,0 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import SignClient from '@walletconnect/sign-client';
-import { getSdkError } from '@walletconnect/utils';
-import { SessionTypes } from '@walletconnect/types';
-
-import { walletConnectModal } from '../utils/web3modal';
-import {
-  VITE_LACONICD_CHAIN_ID,
-  VITE_WALLET_CONNECT_ID,
-} from 'utils/constants';
-
-interface ClientInterface {
-  signClient: SignClient | undefined;
-  session: SessionTypes.Struct | undefined;
-  loadingSession: boolean;
-  onConnect: () => Promise<void>;
-  onDisconnect: () => Promise<void>;
-  onSessionDelete: () => void;
-  accounts: { address: string }[] | undefined;
-}
-
-const ClientContext = createContext({} as ClientInterface);
-
-export const useWalletConnectClient = () => {
-  return useContext(ClientContext);
-};
-
-export const WalletConnectClientProvider = ({
-  children,
-}: {
-  children: JSX.Element;
-}) => {
-  const [signClient, setSignClient] = useState<SignClient>();
-  const [session, setSession] = useState<SessionTypes.Struct>();
-  const [loadingSession, setLoadingSession] = useState(true);
-  const [accounts, setAccounts] = useState<{ address: string }[]>();
-
-  const isSignClientInitializing = useRef<boolean>(false);
-
-  const onSessionConnect = useCallback(async (session: SessionTypes.Struct) => {
-    setSession(session);
-  }, []);
-
-  const subscribeToEvents = useCallback(
-    async (client: SignClient) => {
-      client.on('session_update', ({ topic, params }) => {
-        const { namespaces } = params;
-        const currentSession = client.session.get(topic);
-        const updatedSession = { ...currentSession, namespaces };
-        setSession(updatedSession);
-      });
-    },
-    [setSession],
-  );
-
-  const onConnect = async () => {
-    const proposalNamespace = {
-      cosmos: {
-        methods: ['cosmos_sendTokens'],
-        chains: [`cosmos:${VITE_LACONICD_CHAIN_ID}`],
-        events: [],
-      },
-    };
-
-    try {
-      const { uri, approval } = await signClient!.connect({
-        requiredNamespaces: proposalNamespace,
-      });
-
-      if (uri) {
-        walletConnectModal.openModal({ uri });
-        const session = await approval();
-        onSessionConnect(session);
-        walletConnectModal.closeModal();
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  const onDisconnect = useCallback(async () => {
-    if (typeof signClient === 'undefined') {
-      throw new Error('WalletConnect is not initialized');
-    }
-    if (typeof session === 'undefined') {
-      throw new Error('Session is not connected');
-    }
-
-    await signClient.disconnect({
-      topic: session.topic,
-      reason: getSdkError('USER_DISCONNECTED'),
-    });
-
-    onSessionDelete();
-  }, [signClient, session]);
-
-  const onSessionDelete = () => {
-    setAccounts(undefined);
-    setSession(undefined);
-  };
-
-  const checkPersistedState = useCallback(
-    async (signClient: SignClient) => {
-      if (typeof signClient === 'undefined') {
-        throw new Error('WalletConnect is not initialized');
-      }
-
-      if (typeof session !== 'undefined') return;
-      if (signClient.session.length) {
-        const lastKeyIndex = signClient.session.keys.length - 1;
-        const previousSsession = signClient.session.get(
-          signClient.session.keys[lastKeyIndex],
-        );
-
-        await onSessionConnect(previousSsession);
-        return previousSsession;
-      }
-    },
-    [session, onSessionConnect],
-  );
-
-  const createClient = useCallback(async () => {
-    isSignClientInitializing.current = true;
-    try {
-      const signClient = await SignClient.init({
-        projectId: VITE_WALLET_CONNECT_ID,
-        metadata: {
-          name: 'Deploy App',
-          description: '',
-          url: window.location.href,
-          icons: ['https://avatars.githubusercontent.com/u/92608123'],
-        },
-      });
-
-      setSignClient(signClient);
-      await checkPersistedState(signClient);
-      await subscribeToEvents(signClient);
-      setLoadingSession(false);
-    } catch (e) {
-      console.error('error in createClient', e);
-    }
-    isSignClientInitializing.current = false;
-  }, [setSignClient, checkPersistedState, subscribeToEvents]);
-
-  useEffect(() => {
-    if (!signClient && !isSignClientInitializing.current) {
-      createClient();
-    }
-  }, [signClient, createClient]);
-
-  useEffect(() => {
-    const populateAccounts = async () => {
-      if (!session) {
-        return;
-      }
-      if (!session.namespaces['cosmos']) {
-        console.log('Accounts for cosmos namespace not found');
-        return;
-      }
-
-      const cosmosAddresses = session.namespaces['cosmos'].accounts;
-
-      const cosmosAccounts = cosmosAddresses.map((address) => ({
-        address,
-      }));
-
-      const allAccounts = cosmosAccounts;
-
-      setAccounts(allAccounts);
-    };
-
-    populateAccounts();
-  }, [session]);
-
-  useEffect(() => {
-    if (!signClient) {
-      return;
-    }
-
-    signClient.on('session_delete', onSessionDelete);
-
-    return () => {
-      signClient.off('session_delete', onSessionDelete);
-    };
-  });
-
-  return (
-    <ClientContext.Provider
-      value={{
-        signClient,
-        onConnect,
-        onDisconnect,
-        onSessionDelete,
-        loadingSession,
-        session,
-        accounts,
-      }}
-    >
-      {children}
-    </ClientContext.Provider>
-  );
-};

packages/frontend/src/context/Web3Provider.tsx

@@ -1,116 +1,14 @@
 import { ReactNode } from 'react';
-import assert from 'assert';
-import { SiweMessage, generateNonce } from 'siwe';
-import { WagmiProvider } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
-import axios from 'axios';
-
-import { createWeb3Modal } from '@web3modal/wagmi/react';
-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
-import { createSIWEConfig } from '@web3modal/siwe';
-import type {
-  SIWECreateMessageArgs,
-  SIWEVerifyMessageArgs,
-} from '@web3modal/core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import { VITE_WALLET_CONNECT_ID, BASE_URL } from 'utils/constants';
+const queryClient = new QueryClient();
 
-if (!VITE_WALLET_CONNECT_ID) {
+if (!import.meta.env.VITE_WALLET_CONNECT_ID) {
   throw new Error('Error: REACT_APP_WALLET_CONNECT_ID env config is not set');
 }
-assert(BASE_URL, 'VITE_SERVER_URL is not set in env');
 
-const queryClient = new QueryClient();
-const axiosInstance = axios.create({
-  baseURL: BASE_URL,
-  headers: {
-    'Content-Type': 'application/json',
-    'Access-Control-Allow-Origin': '*',
-  },
-  withCredentials: true,
-});
-const metadata = {
-  name: 'Deploy App Auth',
-  description: '',
-  url: window.location.origin,
-  icons: ['https://avatars.githubusercontent.com/u/37784886'],
-};
-const chains = [mainnet] as const;
-const config = defaultWagmiConfig({
-  chains,
-  projectId: VITE_WALLET_CONNECT_ID,
-  metadata,
-});
-const siweConfig = createSIWEConfig({
-  createMessage: ({ nonce, address, chainId }: SIWECreateMessageArgs) =>
-    new SiweMessage({
-      version: '1',
-      domain: window.location.host,
-      uri: window.location.origin,
-      address,
-      chainId,
-      nonce,
-      // Human-readable ASCII assertion that the user will sign, and it must not contain `\n`.
-      statement: 'Sign in With Ethereum.',
-    }).prepareMessage(),
-  getNonce: async () => {
-    return generateNonce();
-  },
-  getSession: async () => {
-    try {
-      const session = (await axiosInstance.get('/auth/session')).data;
-      const { address, chainId } = session;
-      return { address, chainId };
-    } catch (err) {
-      if (window.location.pathname !== '/login') {
-        window.location.href = '/login';
-      }
-      throw new Error('Failed to get session!');
-    }
-  },
-  verifyMessage: async ({ message, signature }: SIWEVerifyMessageArgs) => {
-    try {
-      const { success } = (
-        await axiosInstance.post('/auth/validate', {
-          message,
-          signature,
-        })
-      ).data;
-      return success;
-    } catch (error) {
-      return false;
-    }
-  },
-  signOut: async () => {
-    try {
-      const { success } = (await axiosInstance.post('/auth/logout')).data;
-      return success;
-    } catch (error) {
-      return false;
-    }
-  },
-  onSignOut: () => {
-    window.location.href = '/login';
-  },
-  onSignIn: () => {
-    window.location.href = '/';
-  },
-});
-
-createWeb3Modal({
-  siweConfig,
-  wagmiConfig: config,
-  projectId: VITE_WALLET_CONNECT_ID,
-});
-export default function Web3ModalProvider({
-  children,
-}: {
-  children: ReactNode;
-}) {
+export default function Web3Provider({ children }: { children: ReactNode }) {
   return (
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </WagmiProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 }

packages/frontend/src/index.tsx

@@ -14,34 +14,28 @@ import { GQLClientProvider } from './context/GQLClientContext';
 import { SERVER_GQL_PATH } from './constants';
 import { Toaster } from 'components/shared/Toast';
 import { LogErrorBoundary } from 'utils/log-error';
-import { BASE_URL } from 'utils/constants';
-import Web3ModalProvider from './context/Web3Provider';
-import { WalletConnectClientProvider } from 'context/WalletConnectContext';
-
-console.log(`v-0.0.9`);
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 
-assert(BASE_URL, 'VITE_SERVER_URL is not set in env');
-const gqlEndpoint = `${BASE_URL}/${SERVER_GQL_PATH}`;
+assert(
+  import.meta.env.VITE_SERVER_URL,
+  'REACT_APP_SERVER_URL is not set in env',
+);
+const gqlEndpoint = `${import.meta.env.VITE_SERVER_URL}/${SERVER_GQL_PATH}`;
 
 const gqlClient = new GQLClient({ gqlEndpoint });
 
 root.render(
   <LogErrorBoundary>
     <React.StrictMode>
-      <WalletConnectClientProvider>
-        <ThemeProvider>
-          <Web3ModalProvider>
-            <GQLClientProvider client={gqlClient}>
-              <App />
-              <Toaster />
-            </GQLClientProvider>
-          </Web3ModalProvider>
-        </ThemeProvider>
-      </WalletConnectClientProvider>
+      <ThemeProvider>
+        <GQLClientProvider client={gqlClient}>
+          <App />
+          <Toaster />
+        </GQLClientProvider>
+      </ThemeProvider>
     </React.StrictMode>
   </LogErrorBoundary>,
 );

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -32,7 +32,7 @@ const ProjectSearch = () => {
   return (
     <section className="h-full flex flex-col">
       {/* Header */}
-      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] hover:z-30">
+      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] z-30">
         <div className="flex pr-6 pl-2 py-2 items-center">
           <div className="flex-1">
             <ProjectSearchBar

packages/frontend/src/pages/AuthPage.tsx

@@ -1,5 +1,5 @@
 import { CloudyFlow } from 'components/CloudyFlow';
-import { Login } from './auth/Login';
+import { SnowballAuth } from './auth/SnowballAuth';
 
 const AuthPage = () => {
   return (
@@ -18,7 +18,7 @@ const AuthPage = () => {
       </div>
       <div className="pb-12 relative z-10 flex-1 flex-center">
         <div className="max-w-[520px] w-full bg-white rounded-xl shadow">
-          <Login />
+          <SnowballAuth />
         </div>
       </div>
     </CloudyFlow>

packages/frontend/src/pages/auth/CreatePasskey.tsx

@@ -0,0 +1,83 @@
+import { Button } from 'components/shared/Button';
+import { LoaderIcon } from 'components/shared/CustomIcon';
+import { KeyIcon } from 'components/shared/CustomIcon/KeyIcon';
+import { InlineNotification } from 'components/shared/InlineNotification';
+import { Input } from 'components/shared/Input';
+import { WavyBorder } from 'components/shared/WavyBorder';
+import { useState } from 'react';
+import { IconRight } from 'react-day-picker';
+import { useSnowball } from 'utils/use-snowball';
+
+type Props = {
+  onDone: () => void;
+};
+
+export const CreatePasskey = ({}: Props) => {
+  const snowball = useSnowball();
+  const [name, setName] = useState('');
+
+  const auth = snowball.auth.passkey;
+  const loading = !!auth.state.loading;
+
+  async function createPasskey() {
+    await auth.register(name);
+  }
+
+  return (
+    <div>
+      <div className="self-stretch p-3 xs:p-6 flex-col justify-center items-center gap-5 flex">
+        <div className="w-16 h-16 p-2 bg-sky-100 rounded-[800px] justify-center items-center gap-2 inline-flex">
+          <KeyIcon />
+        </div>
+        <div>
+          <div className="self-stretch text-center text-sky-950 text-2xl font-medium font-display leading-loose">
+            Create a passkey
+          </div>
+          <div className="text-center text-slate-600 text-sm font-normal font-['Inter'] leading-tight">
+            Passkeys allow you to sign in securely without using passwords.
+          </div>
+        </div>
+      </div>
+      <WavyBorder className="self-stretch" variant="stroke" />
+      <div className="p-6 flex-col justify-center items-center gap-8 inline-flex">
+        <div className="self-stretch h-36 flex-col justify-center items-center gap-2 flex">
+          <div className="self-stretch h-[72px] flex-col justify-start items-start gap-2 flex">
+            <div className="self-stretch h-5 px-1 flex-col justify-start items-start gap-1 flex">
+              <div className="self-stretch text-sky-950 text-sm font-normal font-['Inter'] leading-tight">
+                Give it a name
+              </div>
+            </div>
+            <Input
+              value={name}
+              onInput={(e: any) => {
+                setName(e.target.value);
+              }}
+            />
+          </div>
+
+          {auth.state.error ? (
+            <InlineNotification
+              title={auth.state.error.message}
+              variant="danger"
+            />
+          ) : (
+            <InlineNotification
+              title={`Once you press the "Create passkeys" button, you'll receive a prompt to create the passkey.`}
+              variant="info"
+            />
+          )}
+        </div>
+        <Button
+          rightIcon={
+            loading ? <LoaderIcon className="animate-spin" /> : <IconRight />
+          }
+          className="self-stretch"
+          disabled={!name || loading}
+          onClick={createPasskey}
+        >
+          Create Passkey
+        </Button>
+      </div>
+    </div>
+  );
+};

packages/frontend/src/pages/auth/Login.tsx

@@ -1,6 +1,98 @@
+import { Button } from 'components/shared/Button';
+import {
+  ArrowRightCircleFilledIcon,
+  GithubIcon,
+  LinkIcon,
+  LoaderIcon,
+  QuestionMarkRoundFilledIcon,
+} from 'components/shared/CustomIcon';
+import { GoogleIcon } from 'components/shared/CustomIcon/GoogleIcon';
+import { DotBorder } from 'components/shared/DotBorder';
 import { WavyBorder } from 'components/shared/WavyBorder';
+import { useEffect, useState } from 'react';
+import { CreatePasskey } from './CreatePasskey';
+import { AppleIcon } from 'components/shared/CustomIcon/AppleIcon';
+import { KeyIcon } from 'components/shared/CustomIcon/KeyIcon';
+import { useToast } from 'components/shared/Toast';
+import { Link } from 'react-router-dom';
+import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
+import { signInWithEthereum } from 'utils/siwe';
+import { useSnowball } from 'utils/use-snowball';
+import { logError } from 'utils/log-error';
+
+type Provider = 'google' | 'github' | 'apple' | 'email' | 'passkey';
+
+type Props = {
+  onDone: () => void;
+};
+
+export const Login = ({ onDone }: Props) => {
+  const snowball = useSnowball();
+  const [error, setError] = useState<string>('');
+  const [provider, setProvider] = useState<Provider | false>(false);
+
+  // const loading = snowball.auth.state.loading && provider;
+  const loading = provider;
+  const { toast } = useToast();
+
+  if (provider === 'email') {
+    return <CreatePasskey onDone={onDone} />;
+  }
+
+  async function handleSigninRedirect() {
+    let wallet: PKPEthersWallet | undefined;
+    const { google } = snowball.auth;
+    if (google.canHandleOAuthRedirectBack()) {
+      setProvider('google');
+      console.log('Handling google redirect back');
+      try {
+        await google.handleOAuthRedirectBack();
+        wallet = await google.getEthersWallet();
+        const result = await signInWithEthereum(1, 'login', wallet);
+        if (result.error) {
+          setError(result.error);
+          setProvider(false);
+          wallet = undefined;
+          logError(new Error(result.error));
+          return;
+        }
+      } catch (err: any) {
+        setError(err.message);
+        logError(err);
+        setProvider(false);
+        return;
+      }
+    }
+    // if (apple.canHandleOAuthRedirectBack()) {
+    //   setProvider('apple');
+    //   console.log('Handling apple redirect back');
+    //   try {
+    //     await apple.handleOAuthRedirectBack();
+    //     wallet = await apple.getEthersWallet();
+    //     const result = await signInWithEthereum(1, 'login', wallet);
+    //     if (result.error) {
+    //       setError(result.error);
+    //       setProvider(false);
+    //       wallet = undefined;
+    //       return;
+    //     }
+    //   } catch (err: any) {
+    //     setError(err.message);
+    //     console.log(err.message, err.name, err.details);
+    //     setProvider(false);
+    //     return;
+    //   }
+    // }
+
+    if (wallet) {
+      window.location.pathname = '/';
+    }
+  }
+
+  useEffect(() => {
+    handleSigninRedirect();
+  }, []);
 
-export const Login = () => {
   return (
     <div>
       <div className="self-stretch p-3 xs:p-6 flex-col justify-center items-center gap-5 flex">
@@ -11,8 +103,160 @@ export const Login = () => {
       <WavyBorder className="self-stretch" variant="stroke" />
 
       <div className="self-stretch p-4 xs:p-6 flex-col justify-center items-center gap-8 flex">
+        <div className="self-stretch p-5 bg-slate-50 rounded-xl shadow flex-col justify-center items-center gap-6 flex">
+          <div className="self-stretch flex-col justify-center items-center gap-4 flex">
+            <KeyIcon />
+            <div className="self-stretch flex-col justify-center items-center gap-2 flex">
+              <div className="self-stretch text-center text-sky-950 text-lg font-medium font-display leading-normal">
+                Got a Passkey?
+              </div>
+              <div className="self-stretch text-center text-slate-600 text-sm font-normal font-['Inter'] leading-tight">
+                Use it to sign in securely without using a password.
+              </div>
+            </div>
+          </div>
+          <div className="self-stretch justify-center items-stretch xxs:items-center gap-3 flex flex-col xxs:flex-row">
+            <Button
+              as="a"
+              leftIcon={<QuestionMarkRoundFilledIcon />}
+              variant={'tertiary'}
+              target="_blank"
+              href="https://safety.google/authentication/passkey/"
+            >
+              Learn more
+            </Button>
+            <Button
+              rightIcon={
+                loading && loading === 'passkey' ? (
+                  <LoaderIcon className="animate-spin" />
+                ) : (
+                  <ArrowRightCircleFilledIcon height="16" />
+                )
+              }
+              className="flex-1"
+              disabled={!!loading}
+              onClick={async () => {
+                setProvider('passkey');
+              }}
+            >
+              Sign In with Passkey
+            </Button>
+          </div>
+
+          <div className="h-5 justify-center items-center gap-2 inline-flex">
+            <div className="text-center text-slate-600 text-sm font-normal font-['Inter'] leading-tight">
+              Lost your passkey?
+            </div>
+            <div className="justify-center items-center gap-1.5 flex">
+              <button className="text-sky-950 text-sm font-normal font-['Inter'] underline leading-tight">
+                Recover account
+              </button>
+              <LinkIcon />
+            </div>
+          </div>
+        </div>
+
+        <div className="self-stretch justify-start items-center gap-8 inline-flex">
+          <DotBorder className="flex-1" />
+          <div className="text-center text-slate-400 text-xs font-normal font-['JetBrains Mono'] leading-none">
+            OR
+          </div>
+          <DotBorder className="flex-1" />
+        </div>
+
         <div className="self-stretch flex-col justify-center  items-center gap-3 flex">
-          <w3m-button />
+          <Button
+            leftIcon={<GoogleIcon />}
+            rightIcon={
+              loading && loading === 'google' ? (
+                <LoaderIcon className="animate-spin" />
+              ) : null
+            }
+            onClick={() => {
+              setProvider('google');
+              snowball.auth.google.startOAuthRedirect();
+            }}
+            className="flex-1 self-stretch"
+            variant={'tertiary'}
+            disabled={!!loading}
+          >
+            Continue with Google
+          </Button>
+
+          <Button
+            leftIcon={<GithubIcon />}
+            rightIcon={
+              loading && loading === 'github' ? (
+                <LoaderIcon className="animate-spin" />
+              ) : null
+            }
+            onClick={async () => {
+              setProvider('github');
+              await new Promise((resolve) => setTimeout(resolve, 800));
+              setProvider(false);
+              toast({
+                id: 'coming-soon',
+                title: 'Sign-in with GitHub is coming soon!',
+                variant: 'info',
+                onDismiss() {},
+              });
+            }}
+            className="flex-1 self-stretch"
+            variant={'tertiary'}
+            disabled={!!loading}
+          >
+            Continue with GitHub
+          </Button>
+
+          <Button
+            leftIcon={<AppleIcon />}
+            rightIcon={
+              loading && loading === 'apple' ? (
+                <LoaderIcon className="animate-spin text-white" />
+              ) : null
+            }
+            onClick={async () => {
+              setProvider('apple');
+              // snowball.auth.apple.startOAuthRedirect();
+              await new Promise((resolve) => setTimeout(resolve, 800));
+              setProvider(false);
+              toast({
+                id: 'coming-soon',
+                title: 'Sign-in with Apple is coming soon!',
+                variant: 'info',
+                onDismiss() {},
+              });
+            }}
+            className={`flex-1 self-stretch border-black enabled:bg-black text-white ${
+              loading && loading === 'apple' ? 'disabled:bg-black' : ''
+            }`}
+            variant={'tertiary'}
+            disabled={!!loading}
+          >
+            Continue with Apple
+          </Button>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          {error && (
+            <div className="justify-center items-center gap-2 inline-flex">
+              <div className="text-red-500 text-sm">Error: {error}</div>
+            </div>
+          )}
+
+          <div className="h-5 justify-center items-center gap-2 inline-flex">
+            <div className="text-center text-slate-600 text-sm font-normal font-['Inter'] leading-tight">
+              Don't have an account?
+            </div>
+            <div className="justify-center items-center gap-1.5 flex">
+              <Link
+                to="/signup"
+                className="text-sky-950 text-sm font-normal font-['Inter'] underline leading-tight"
+              >
+                Sign up now
+              </Link>
+            </div>
+          </div>
         </div>
       </div>
     </div>

packages/frontend/src/pages/auth/SignUp.tsx

@@ -0,0 +1,261 @@
+import { Button } from 'components/shared/Button';
+import {
+  ArrowRightCircleFilledIcon,
+  GithubIcon,
+  LoaderIcon,
+} from 'components/shared/CustomIcon';
+import { GoogleIcon } from 'components/shared/CustomIcon/GoogleIcon';
+import { DotBorder } from 'components/shared/DotBorder';
+import { WavyBorder } from 'components/shared/WavyBorder';
+import { useEffect, useState } from 'react';
+import { useSnowball } from 'utils/use-snowball';
+import { Input } from 'components/shared/Input';
+import { AppleIcon } from 'components/shared/CustomIcon/AppleIcon';
+import { Link } from 'react-router-dom';
+import { useToast } from 'components/shared/Toast';
+import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
+import { signInWithEthereum } from 'utils/siwe';
+import { logError } from 'utils/log-error';
+import {
+  subOrganizationIdForEmail,
+  turnkeySignin,
+  turnkeySignup,
+} from 'utils/turnkey-frontend';
+
+type Provider = 'google' | 'github' | 'apple' | 'email';
+
+type Err = { type: 'email' | 'provider'; message: string };
+
+type Props = {
+  onDone: () => void;
+};
+
+export const SignUp = ({ onDone }: Props) => {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState<Err | null>();
+  const [provider, setProvider] = useState<Provider | false>(false);
+
+  const { toast } = useToast();
+  const snowball = useSnowball();
+
+  async function handleSignupRedirect() {
+    let wallet: PKPEthersWallet | undefined;
+    const { google } = snowball.auth;
+    if (google.canHandleOAuthRedirectBack()) {
+      setProvider('google');
+      try {
+        await google.handleOAuthRedirectBack();
+        wallet = await google.getEthersWallet();
+        const result = await signInWithEthereum(1, 'signup', wallet);
+        if (result.error) {
+          setError({ type: 'provider', message: result.error });
+          setProvider(false);
+          wallet = undefined;
+          logError(new Error(result.error));
+          return;
+        }
+      } catch (err: any) {
+        setError({ type: 'provider', message: err.message });
+        setProvider(false);
+        logError(err);
+        return;
+      }
+    }
+    // if (apple.canHandleOAuthRedirectBack()) {
+    //   setProvider('apple');
+    //   try {
+    //     await apple.handleOAuthRedirectBack();
+    //     wallet = await apple.getEthersWallet();
+    //     const result = await signInWithEthereum(1, 'signup', wallet);
+    //     if (result.error) {
+    //       setError({ type: 'provider', message: result.error });
+    //       setProvider(false);
+    //       wallet = undefined;
+    //       return;
+    //     }
+    //   } catch (err: any) {
+    //     setError({ type: 'provider', message: err.message });
+    //     setProvider(false);
+    //     return;
+    //   }
+    // }
+
+    if (wallet) {
+      onDone();
+    }
+  }
+
+  async function authEmail() {
+    setProvider('email');
+    try {
+      const orgId = await subOrganizationIdForEmail(email);
+      console.log('orgId', orgId);
+      if (orgId) {
+        await turnkeySignin(orgId);
+        window.location.href = '/dashboard';
+      } else {
+        await turnkeySignup(email);
+        onDone();
+      }
+    } catch (err: any) {
+      setError({ type: 'email', message: err.message });
+    }
+  }
+
+  useEffect(() => {
+    handleSignupRedirect();
+  }, []);
+
+  const loading = provider;
+  const emailValid = /.@./.test(email);
+
+  return (
+    <div>
+      <div className="self-stretch p-3 xs:p-6 flex-col justify-center items-center gap-5 flex">
+        <div className="self-stretch text-center text-sky-950 text-2xl font-medium font-display leading-tight">
+          Sign up to Snowball
+        </div>
+      </div>
+      <WavyBorder className="self-stretch" variant="stroke" />
+      <div className="self-stretch p-4 xs:p-6 flex-col justify-center items-center gap-8 flex">
+        <div className="self-stretch flex-col justify-center  items-center gap-3 flex">
+          <Button
+            leftIcon={loading && loading === 'google' ? null : <GoogleIcon />}
+            rightIcon={
+              loading && loading === 'google' ? (
+                <LoaderIcon className="animate-spin" />
+              ) : null
+            }
+            onClick={() => {
+              setProvider('google');
+              snowball.auth.google.startOAuthRedirect();
+            }}
+            className="flex-1 self-stretch"
+            variant={'tertiary'}
+            disabled={!!loading}
+          >
+            Continue with Google
+          </Button>
+
+          <Button
+            leftIcon={<GithubIcon />}
+            rightIcon={
+              loading && loading === 'github' ? (
+                <LoaderIcon className="animate-spin" />
+              ) : null
+            }
+            onClick={async () => {
+              setProvider('github');
+              await new Promise((resolve) => setTimeout(resolve, 800));
+              setProvider(false);
+              toast({
+                id: 'coming-soon',
+                title: 'Sign-in with GitHub is coming soon!',
+                variant: 'info',
+                onDismiss() {},
+              });
+            }}
+            className="flex-1 self-stretch"
+            variant={'tertiary'}
+            disabled={!!loading}
+          >
+            Continue with GitHub
+          </Button>
+
+          <Button
+            leftIcon={<AppleIcon />}
+            rightIcon={
+              loading && loading === 'apple' ? (
+                <LoaderIcon className="animate-spin text-white" />
+              ) : null
+            }
+            onClick={async () => {
+              setProvider('apple');
+              // snowball.auth.apple.startOAuthRedirect();
+              await new Promise((resolve) => setTimeout(resolve, 800));
+              setProvider(false);
+              toast({
+                id: 'coming-soon',
+                title: 'Sign-in with Apple is coming soon!',
+                variant: 'info',
+                onDismiss() {},
+              });
+            }}
+            className={`flex-1 self-stretch border-black enabled:bg-black text-white ${
+              loading && loading === 'apple' ? 'disabled:bg-black' : ''
+            }`}
+            variant={'tertiary'}
+            disabled={!!loading}
+          >
+            Continue with Apple
+          </Button>
+        </div>
+
+        {error && error.type === 'provider' && (
+          <div className="-mt-3 justify-center items-center inline-flex">
+            <div className="text-red-500 text-sm">Error: {error.message}</div>
+          </div>
+        )}
+
+        <div className="self-stretch justify-start items-center gap-8 inline-flex">
+          <DotBorder className="flex-1" />
+          <div className="text-center text-slate-400 text-xs font-normal font-['JetBrains Mono'] leading-none">
+            OR
+          </div>
+          <DotBorder className="flex-1" />
+        </div>
+
+        <div className="self-stretch flex-col gap-8 flex">
+          <div className="flex-col justify-start items-start gap-2 inline-flex">
+            <div className="text-sky-950 text-sm font-normal font-['Inter'] leading-tight">
+              Email
+            </div>
+            <Input
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={!!loading}
+            />
+          </div>
+          <Button
+            rightIcon={
+              loading && loading === 'email' ? (
+                <LoaderIcon className="animate-spin" />
+              ) : (
+                <ArrowRightCircleFilledIcon height="16" />
+              )
+            }
+            onClick={() => {
+              authEmail();
+            }}
+            variant={'secondary'}
+            disabled={!email || !emailValid || !!loading}
+          >
+            Continue with Email
+          </Button>
+          <div className="flex flex-col gap-3">
+            {error && error.type === 'email' && (
+              <div className="justify-center items-center gap-2 inline-flex">
+                <div className="text-red-500 text-sm">
+                  Error: {error.message}
+                </div>
+              </div>
+            )}
+            <div className="justify-center items-center gap-2 inline-flex">
+              <div className="text-center text-slate-600 text-sm font-normal font-['Inter'] leading-tight">
+                Already an user?
+              </div>
+              <div className="justify-center items-center gap-1.5 flex">
+                <Link
+                  to="/login"
+                  className="text-sky-950 text-sm font-normal font-['Inter'] underline leading-tight"
+                >
+                  Sign in now
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/frontend/src/pages/auth/SnowballAuth.tsx

@@ -0,0 +1,52 @@
+import { snowball } from 'utils/use-snowball';
+import { Login } from './Login';
+import { SignUp } from './SignUp';
+import { useEffect, useState } from 'react';
+import { Done } from './Done';
+
+type Screen = 'login' | 'signup' | 'success';
+
+const DASHBOARD_URL = '/';
+
+export const SnowballAuth = () => {
+  const path = window.location.pathname;
+  const [screen, setScreen] = useState<Screen>(
+    path === '/login' ? 'login' : 'signup',
+  );
+
+  useEffect(() => {
+    if (snowball.session) {
+      window.location.href = DASHBOARD_URL;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (path === '/login') {
+      setScreen('login');
+    } else if (path === '/signup') {
+      setScreen('signup');
+    }
+  }, [path]);
+
+  if (screen === 'signup') {
+    return (
+      <SignUp
+        onDone={() => {
+          setScreen('success');
+        }}
+      />
+    );
+  }
+  if (screen === 'login') {
+    return (
+      <Login
+        onDone={() => {
+          setScreen('success');
+        }}
+      />
+    );
+  }
+  if (screen === 'success') {
+    return <Done continueTo={DASHBOARD_URL} />;
+  }
+};