♻️ refactor: update pr review

feat: prettify select in sidebar

.gitignore

@@ -1 +1,7 @@
 node_modules/
+yarn-error.log
+.yarnrc.yml
+.yarn/
+.yarnrc
+
+packages/backend/environments/local.toml

README.md

@@ -1,8 +1,8 @@
-# snowballtools
+# snowballtools-base
 
 ## Setup
 
-- Clone the  `snowballtools` repo
+- Clone the `snowballtools-base` repo
 
   ```bash
   git clone git@github.com:snowball-tools/snowballtools-base.git
@@ -28,63 +28,144 @@
   cd packages/backend
   ```
 
-- Load fixtures in database
+- Rename backend config file from [environments/local.toml.example](packages/backend/environments/local.toml.example) to `local.toml`
 
   ```bash
-  yarn test:db:load:fixtures
+  mv environments/local.toml.example environments/local.toml
   ```
 
 - Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
-  - Client ID and secret will be available after creating Github OAuth app
-    - https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app
+  - Client ID and secret will be available after [creating an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)
     - In "Homepage URL", type `http://localhost:3000`
     - In "Authorization callback URL", type `http://localhost:3000/organization/projects/create`
     - Generate a new client secret after app is created
 
-- Run the laconicd stack following this [doc](https://git.vdb.to/cerc-io/stack-orchestrator/src/branch/main/docs/laconicd-with-console.md)
+### Backend Production
 
-- Get the private key and set `registryConfig.privateKey` in backend [config file](packages/backend/environments/local.toml)
+- Let us assume the following domains for backend and frontend
+  - Backend server: `api.snowballtools.com`
+  - Frontend app: `dashboard.snowballtools.com`
 
-  ```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
+- 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 = ""
   ```
 
-- 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)
+- Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
+  - Client ID and secret will be available after [creating an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)
+    - In "Homepage URL", type `https://dashboard.snowballtools.com`
+    - In "Authorization callback URL", type `https://dashboard.snowballtools.com/organization/projects/create`
+    - Generate a new client secret after app is created
 
-  ```bash
-  # For registryConfig.restEndpoint
-  laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 1317
-  # 0.0.0.0:32777
+- Set `gitHub.webhookUrl` in backend [config file](packages/backend/environments/local.toml)
 
-  # For registryConfig.gqlEndpoint
-  laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 9473
-  # 0.0.0.0:32771
+  ```toml
+  ...
+  [gitHub]
+    webhookUrl = "https://api.snowballtools.com"
+  ...
   ```
 
-- Run the script to create bond, reserve the authority and set authority bond
+- Let us assume domain for Laconicd to be `api.laconic.com` and set the following in backend [config file](packages/backend/environments/local.toml)
 
-  ```bash
-  yarn test:registry:init
-  # snowball:initialize-registry bondId: 6af0ab81973b93d3511ae79841756fb5da3fd2f70ea1279e81fae7c9b19af6c4 +0ms
+  ```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"
+  ...
   ```
 
-  - Get the bond id and set `registryConfig.bondId` in backend [config file](packages/backend/environments/local.toml)
+- Start the server in `packages/backend`
+
+  ```bash
+  yarn start
+  ```
+
+### Backend Development
+
+- Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
+  - Client ID and secret will be available after [creating an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)
+    - In "Homepage URL", type `http://localhost:3000`
+    - In "Authorization callback URL", type `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
-  - https://ngrok.com/docs/getting-started/
+  - [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]
@@ -95,7 +176,7 @@
 - Start the server in `packages/backend`
 
   ```bash
-  yarn start
+  yarn start:dev
   ```
 
 ## Frontend
@@ -106,10 +187,10 @@
   cd packages/frontend
   ```
 
-- Copy the graphQL endpoint from terminal and add the endpoint in the [.env](packages/frontend/.env) file present in `packages/frontend`
+- Rename [.env.example](packages/frontend/.env.example) to `.env`
 
-  ```env
-  REACT_APP_GQL_SERVER_URL = 'http://localhost:8000/graphql'
+  ```bash
+  mv .env.example .env
   ```
 
 - Copy the GitHub OAuth app client ID from previous steps and set it in frontend [.env](packages/frontend/.env) file
@@ -118,23 +199,36 @@
   REACT_APP_GITHUB_CLIENT_ID = <CLIENT_ID>
   ```
 
-- Set `REACT_APP_GITHUB_TEMPLATE_REPO` in [.env](packages/frontend/.env) file
+- 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_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_PWA_TEMPLATE_REPO = cerc-io/test-progressive-web-app
+  REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = cerc-io/image-upload-pwa-example
   ```
 
-### Development
+### Frontend Production
 
-- Start the React application
+- Let us assume the following domains for backend and frontend
+  - Backend server: `api.snowballtools.com`
+  - Frontend app: `dashboard.snowballtools.com`
 
-  ```bash
-  yarn start
+- Set the following values in [.env](packages/frontend/.env) file
+
+  ```env
+  # Backend server endpoint
+  REACT_APP_SERVER_URL = 'https://api.snowballtools.com'
   ```
 
-- The React application will be running in `http://localhost:3000/`
+- 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
 
-### Production
+  ```env
+  REACT_APP_WALLET_CONNECT_ID = <PROJECT_ID>
+  ```
 
 - Build the React application
 
@@ -148,3 +242,28 @@
   python3 -m http.server -d build 3000
   ```
 
+### Frontend 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>
+  ```
+
+- Start the React application
+
+  ```bash
+  yarn start
+  ```
+
+- The React application will be running in `http://localhost:3000/`

build-webapp.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+PKG_DIR="./packages/frontend"
+OUTPUT_DIR="${PKG_DIR}/build"
+DEST_DIR=${1:-/data}
+
+if [[ -d "$DEST_DIR" ]]; then
+  echo "${DEST_DIR} already exists." 1>&2
+  exit 1
+fi
+
+if [[ -f "$PKG_DIR/.env" ]]; then
+  echo "Using existing .env file"
+else
+  mv "$PKG_DIR/.env.example" "$PKG_DIR/.env"
+  echo "Created .env file. Please populate with the correct values."
+  exit 1
+fi
+
+cat > $PKG_DIR/.env <<EOF
+REACT_APP_SERVER_URL = 'LACONIC_HOSTED_CONFIG_app_server_url'
+REACT_APP_GITHUB_CLIENT_ID = 'LACONIC_HOSTED_CONFIG_app_github_clientid'
+REACT_APP_GITHUB_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_app_github_pwa_templaterepo'
+REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_app_github_image_upload_templaterepo'
+REACT_APP_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_app_wallet_connect_id'
+EOF
+
+yarn || exit 1
+yarn build || exit 1
+
+if [[ ! -d "$OUTPUT_DIR" ]]; then
+  echo "Missing output directory: $OUTPUT_DIR" 1>&2
+  exit 1
+fi
+
+mv "$OUTPUT_DIR" "$DEST_DIR"

packages/backend/.eslintrc.json

@@ -25,6 +25,9 @@
         "allowArgumentsExplicitlyTypedAsAny": true
       }
     ],
-    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "ignoreRestSiblings": true }
+    ]
   }
 }

packages/backend/.gitignore

@@ -1,2 +1,3 @@
 db
 dist
+environments/local.toml

packages/backend/environments/local.toml.example

@@ -2,6 +2,11 @@
   host = "127.0.0.1"
   port = 8000
   gqlPath = "/graphql"
+  [server.session]
+    secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi"
+    appOriginUrl = "http://localhost:3000"
+    trustProxy = false
+    domain = "localhost"
 
 [database]
   dbPath = "db/snowball"
@@ -19,7 +24,11 @@
   chainId = "laconic_9000-1"
   privateKey = ""
   bondId = ""
+  authority = ""
   [registryConfig.fee]
     amount = "200000"
     denom = "aphoton"
-    gas = "550000"
+    gas = "750000"
+
+[misc]
+  projectDomain = "apps.snowballtools.com"

packages/backend/package.json

@@ -12,8 +12,10 @@
     "@types/node": "^20.11.0",
     "apollo-server-core": "^3.13.0",
     "apollo-server-express": "^3.13.0",
+    "cors": "^2.8.5",
     "debug": "^4.3.1",
     "express": "^4.18.2",
+    "express-session": "^1.18.0",
     "fs-extra": "^11.2.0",
     "graphql": "^16.8.1",
     "luxon": "^3.4.4",
@@ -42,6 +44,7 @@
     "test:db:delete": "DEBUG=snowball:* ts-node ./test/delete-db.ts"
   },
   "devDependencies": {
+    "@types/express-session": "^1.17.10",
     "@types/fs-extra": "^11.0.4",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",

packages/backend/src/config.ts

@@ -1,7 +1,18 @@
+export interface SessionConfig {
+  secret: string;
+  appOriginUrl: string;
+  trustProxy: boolean;
+  domain: string;
+}
+
 export interface ServerConfig {
   host: string;
   port: number;
   gqlPath?: string;
+  sessionSecret: string;
+  appOriginUrl: string;
+  isProduction: boolean;
+  session: SessionConfig;
 }
 
 export interface DatabaseConfig {
@@ -13,7 +24,7 @@ export interface GitHubConfig {
   oAuth: {
     clientId: string;
     clientSecret: string;
-  }
+  };
 }
 
 export interface RegistryConfig {
@@ -23,11 +34,16 @@ export interface RegistryConfig {
   privateKey: string;
   bondId: string;
   fetchDeploymentRecordDelay: number;
+  authority: string;
   fee: {
     amount: string;
     denom: string;
     gas: string;
-  }
+  };
+}
+
+export interface MiscConfig {
+  projectDomain: string;
 }
 
 export interface Config {
@@ -35,4 +51,5 @@ export interface Config {
   database: DatabaseConfig;
   gitHub: GitHubConfig;
   registryConfig: RegistryConfig;
+  misc: MiscConfig;
 }

packages/backend/src/constants.ts

@@ -1,8 +1,6 @@
-export const DEFAULT_CONFIG_FILE_PATH = 'environments/local.toml';
+import process from 'process';
+
+export const DEFAULT_CONFIG_FILE_PATH =
+  process.env.SNOWBALL_BACKEND_CONFIG_FILE_PATH || 'environments/local.toml';
 
 export const DEFAULT_GQL_PATH = '/graphql';
-
-// Note: temporary hardcoded user, later to be derived from auth token
-export const USER_ID = '59f4355d-9549-4aac-9b54-eeefceeabef0';
-
-export const PROJECT_DOMAIN = 'snowball.xyz';

packages/backend/src/database.ts

@@ -1,11 +1,17 @@
-import { DataSource, DeepPartial, FindManyOptions, FindOneOptions, FindOptionsWhere } from 'typeorm';
+import {
+  DataSource,
+  DeepPartial,
+  FindManyOptions,
+  FindOneOptions,
+  FindOptionsWhere
+} from 'typeorm';
 import path from 'path';
 import debug from 'debug';
 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';
@@ -13,7 +19,10 @@ import { Deployment } from './entity/Deployment';
 import { ProjectMember } from './entity/ProjectMember';
 import { EnvironmentVariable } from './entity/EnvironmentVariable';
 import { Domain } from './entity/Domain';
-import { PROJECT_DOMAIN } from './constants';
+import { getEntities, loadAndSaveData } from './utils';
+import { UserOrganization } from './entity/UserOrganization';
+
+const ORGANIZATION_DATA_PATH = '../test/fixtures/organizations.json';
 
 const log = debug('snowball:database');
 
@@ -22,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,
@@ -31,11 +41,21 @@ export class Database {
       synchronize: true,
       logging: false
     });
+
+    this.projectDomain = projectDomain;
   }
 
   async init (): Promise<void> {
     await this.dataSource.initialize();
     log('database initialized');
+
+    const organizations = await this.getOrganizations({});
+
+    // Load an organization if none exist
+    if (!organizations.length) {
+      const orgEntities = await getEntities(path.resolve(__dirname, ORGANIZATION_DATA_PATH));
+      await loadAndSaveData(Organization, this.dataSource, [orgEntities[0]]);
+    }
   }
 
   async getUser (options: FindOneOptions<User>): Promise<User | null> {
@@ -52,15 +72,26 @@ export class Database {
     return user;
   }
 
-  async updateUser (userId: string, 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: userId }, data);
+    const updateResult = await userRepository.update({ id: user.id }, data);
     assert(updateResult.affected);
 
     return updateResult.affected > 0;
   }
 
-  async getOrganization (options: FindOneOptions<Organization>): Promise<Organization | null> {
+  async getOrganizations (
+    options: FindManyOptions<Organization>
+  ): Promise<Organization[]> {
+    const organizationRepository = this.dataSource.getRepository(Organization);
+    const organizations = await organizationRepository.find(options);
+
+    return organizations;
+  }
+
+  async getOrganization (
+    options: FindOneOptions<Organization>
+  ): Promise<Organization | null> {
     const organizationRepository = this.dataSource.getRepository(Organization);
     const organization = await organizationRepository.findOne(options);
 
@@ -83,6 +114,13 @@ export class Database {
     return userOrgs;
   }
 
+  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[]> {
     const projectRepository = this.dataSource.getRepository(Project);
     const projects = await projectRepository.find(options);
@@ -95,7 +133,11 @@ export class Database {
 
     const project = await projectRepository
       .createQueryBuilder('project')
-      .leftJoinAndSelect('project.deployments', 'deployments', 'deployments.isCurrent = true')
+      .leftJoinAndSelect(
+        'project.deployments',
+        'deployments',
+        'deployments.isCurrent = true'
+      )
       .leftJoinAndSelect('deployments.createdBy', 'user')
       .leftJoinAndSelect('deployments.domain', 'domain')
       .leftJoinAndSelect('project.owner', 'owner')
@@ -108,19 +150,29 @@ export class Database {
     return project;
   }
 
-  async getProjectsInOrganization (userId: string, organizationSlug: string): Promise<Project[]> {
+  async getProjectsInOrganization (
+    userId: string,
+    organizationSlug: string
+  ): Promise<Project[]> {
     const projectRepository = this.dataSource.getRepository(Project);
 
     const projects = await projectRepository
       .createQueryBuilder('project')
-      .leftJoinAndSelect('project.deployments', 'deployments', 'deployments.isCurrent = true')
+      .leftJoinAndSelect(
+        'project.deployments',
+        'deployments',
+        'deployments.isCurrent = true'
+      )
       .leftJoinAndSelect('deployments.domain', 'domain')
       .leftJoin('project.projectMembers', 'projectMembers')
       .leftJoin('project.organization', 'organization')
-      .where('(project.ownerId = :userId OR projectMembers.userId = :userId) AND organization.slug = :organizationSlug', {
-        userId,
-        organizationSlug
-      })
+      .where(
+        '(project.ownerId = :userId OR projectMembers.userId = :userId) AND organization.slug = :organizationSlug',
+        {
+          userId,
+          organizationSlug
+        }
+      )
       .getMany();
 
     return projects;
@@ -129,7 +181,9 @@ export class Database {
   /**
    * Get deployments with specified filter
    */
-  async getDeployments (options: FindManyOptions<Deployment>): Promise<Deployment[]> {
+  async getDeployments (
+    options: FindManyOptions<Deployment>
+  ): Promise<Deployment[]> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
     const deployments = await deploymentRepository.find(options);
 
@@ -154,7 +208,9 @@ export class Database {
     });
   }
 
-  async getDeployment (options: FindOneOptions<Deployment>): Promise<Deployment | null> {
+  async getDeployment (
+    options: FindOneOptions<Deployment>
+  ): Promise<Deployment | null> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
     const deployment = await deploymentRepository.findOne(options);
 
@@ -182,8 +238,11 @@ export class Database {
     return deployment;
   }
 
-  async getProjectMembersByProjectId (projectId: string): Promise<ProjectMember[]> {
-    const projectMemberRepository = this.dataSource.getRepository(ProjectMember);
+  async getProjectMembersByProjectId (
+    projectId: string
+  ): Promise<ProjectMember[]> {
+    const projectMemberRepository =
+      this.dataSource.getRepository(ProjectMember);
 
     const projectMembers = await projectMemberRepository.find({
       relations: {
@@ -200,8 +259,12 @@ export class Database {
     return projectMembers;
   }
 
-  async getEnvironmentVariablesByProjectId (projectId: string, filter?: FindOptionsWhere<EnvironmentVariable>): Promise<EnvironmentVariable[]> {
-    const environmentVariableRepository = this.dataSource.getRepository(EnvironmentVariable);
+  async getEnvironmentVariablesByProjectId (
+    projectId: string,
+    filter?: FindOptionsWhere<EnvironmentVariable>
+  ): Promise<EnvironmentVariable[]> {
+    const environmentVariableRepository =
+      this.dataSource.getRepository(EnvironmentVariable);
 
     const environmentVariables = await environmentVariableRepository.find({
       where: {
@@ -216,9 +279,12 @@ export class Database {
   }
 
   async removeProjectMemberById (projectMemberId: string): Promise<boolean> {
-    const projectMemberRepository = this.dataSource.getRepository(ProjectMember);
+    const projectMemberRepository =
+      this.dataSource.getRepository(ProjectMember);
 
-    const deleteResult = await projectMemberRepository.delete({ id: projectMemberId });
+    const deleteResult = await projectMemberRepository.delete({
+      id: projectMemberId
+    });
 
     if (deleteResult.affected) {
       return deleteResult.affected > 0;
@@ -227,37 +293,63 @@ export class Database {
     }
   }
 
-  async updateProjectMemberById (projectMemberId: string, data: DeepPartial<ProjectMember>): Promise<boolean> {
-    const projectMemberRepository = this.dataSource.getRepository(ProjectMember);
-    const updateResult = await projectMemberRepository.update({ id: projectMemberId }, data);
+  async updateProjectMemberById (
+    projectMemberId: string,
+    data: DeepPartial<ProjectMember>
+  ): Promise<boolean> {
+    const projectMemberRepository =
+      this.dataSource.getRepository(ProjectMember);
+    const updateResult = await projectMemberRepository.update(
+      { id: projectMemberId },
+      data
+    );
 
     return Boolean(updateResult.affected);
   }
 
-  async addProjectMember (data: DeepPartial<ProjectMember>): Promise<ProjectMember> {
-    const projectMemberRepository = this.dataSource.getRepository(ProjectMember);
+  async addProjectMember (
+    data: DeepPartial<ProjectMember>
+  ): Promise<ProjectMember> {
+    const projectMemberRepository =
+      this.dataSource.getRepository(ProjectMember);
     const newProjectMember = await projectMemberRepository.save(data);
 
     return newProjectMember;
   }
 
-  async addEnvironmentVariables (data: DeepPartial<EnvironmentVariable>[]): Promise<EnvironmentVariable[]> {
-    const environmentVariableRepository = this.dataSource.getRepository(EnvironmentVariable);
-    const savedEnvironmentVariables = await environmentVariableRepository.save(data);
+  async addEnvironmentVariables (
+    data: DeepPartial<EnvironmentVariable>[]
+  ): Promise<EnvironmentVariable[]> {
+    const environmentVariableRepository =
+      this.dataSource.getRepository(EnvironmentVariable);
+    const savedEnvironmentVariables =
+      await environmentVariableRepository.save(data);
 
     return savedEnvironmentVariables;
   }
 
-  async updateEnvironmentVariable (environmentVariableId: string, data: DeepPartial<EnvironmentVariable>): Promise<boolean> {
-    const environmentVariableRepository = this.dataSource.getRepository(EnvironmentVariable);
-    const updateResult = await environmentVariableRepository.update({ id: environmentVariableId }, data);
+  async updateEnvironmentVariable (
+    environmentVariableId: string,
+    data: DeepPartial<EnvironmentVariable>
+  ): Promise<boolean> {
+    const environmentVariableRepository =
+      this.dataSource.getRepository(EnvironmentVariable);
+    const updateResult = await environmentVariableRepository.update(
+      { id: environmentVariableId },
+      data
+    );
 
     return Boolean(updateResult.affected);
   }
 
-  async deleteEnvironmentVariable (environmentVariableId: string): Promise<boolean> {
-    const environmentVariableRepository = this.dataSource.getRepository(EnvironmentVariable);
-    const deleteResult = await environmentVariableRepository.delete({ id: environmentVariableId });
+  async deleteEnvironmentVariable (
+    environmentVariableId: string
+  ): Promise<boolean> {
+    const environmentVariableRepository =
+      this.dataSource.getRepository(EnvironmentVariable);
+    const deleteResult = await environmentVariableRepository.delete({
+      id: environmentVariableId
+    });
 
     if (deleteResult.affected) {
       return deleteResult.affected > 0;
@@ -267,7 +359,8 @@ export class Database {
   }
 
   async getProjectMemberById (projectMemberId: string): Promise<ProjectMember> {
-    const projectMemberRepository = this.dataSource.getRepository(ProjectMember);
+    const projectMemberRepository =
+      this.dataSource.getRepository(ProjectMember);
 
     const projectMemberWithProject = await projectMemberRepository.find({
       relations: {
@@ -279,8 +372,7 @@ export class Database {
       where: {
         id: projectMemberId
       }
-    }
-    );
+    });
 
     if (projectMemberWithProject.length === 0) {
       throw new Error('Member does not exist');
@@ -289,34 +381,49 @@ export class Database {
     return projectMemberWithProject[0];
   }
 
-  async getProjectsBySearchText (userId: string, searchText: string): Promise<Project[]> {
+  async getProjectsBySearchText (
+    userId: string,
+    searchText: string
+  ): Promise<Project[]> {
     const projectRepository = this.dataSource.getRepository(Project);
 
     const projects = await projectRepository
       .createQueryBuilder('project')
       .leftJoinAndSelect('project.organization', 'organization')
       .leftJoin('project.projectMembers', 'projectMembers')
-      .where('(project.owner = :userId OR projectMembers.member.id = :userId) AND project.name LIKE :searchText', {
-        userId,
-        searchText: `%${searchText}%`
-      })
+      .where(
+        '(project.owner = :userId OR projectMembers.member.id = :userId) AND project.name LIKE :searchText',
+        {
+          userId,
+          searchText: `%${searchText}%`
+        }
+      )
       .getMany();
 
     return projects;
   }
 
-  async updateDeploymentById (deploymentId: string, data: DeepPartial<Deployment>): Promise<boolean> {
+  async updateDeploymentById (
+    deploymentId: string,
+    data: DeepPartial<Deployment>
+  ): Promise<boolean> {
     return this.updateDeployment({ id: deploymentId }, data);
   }
 
-  async updateDeployment (criteria: FindOptionsWhere<Deployment>, data: DeepPartial<Deployment>): Promise<boolean> {
+  async updateDeployment (
+    criteria: FindOptionsWhere<Deployment>,
+    data: DeepPartial<Deployment>
+  ): Promise<boolean> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
     const updateResult = await deploymentRepository.update(criteria, data);
 
     return Boolean(updateResult.affected);
   }
 
-  async updateDeploymentsByProjectIds (projectIds: string[], data: DeepPartial<Deployment>): Promise<boolean> {
+  async updateDeploymentsByProjectIds (
+    projectIds: string[],
+    data: DeepPartial<Deployment>
+  ): Promise<boolean> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
 
     const updateResult = await deploymentRepository
@@ -329,7 +436,7 @@ export class Database {
     return Boolean(updateResult.affected);
   }
 
-  async addProject (userId: string, 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
@@ -339,22 +446,26 @@ export class Database {
     // TODO: Set icon according to framework
     newProject.icon = '';
 
-    newProject.owner = Object.assign(new User(), {
-      id: userId
-    });
+    newProject.owner = user;
 
     newProject.organization = Object.assign(new Organization(), {
       id: organizationId
     });
 
-    newProject.subDomain = `${newProject.name}.${PROJECT_DOMAIN}`;
+    newProject.subDomain = `${newProject.name}.${this.projectDomain}`;
 
     return projectRepository.save(newProject);
   }
 
-  async updateProjectById (projectId: string, data: DeepPartial<Project>): Promise<boolean> {
+  async updateProjectById (
+    projectId: string,
+    data: DeepPartial<Project>
+  ): Promise<boolean> {
     const projectRepository = this.dataSource.getRepository(Project);
-    const updateResult = await projectRepository.update({ id: projectId }, data);
+    const updateResult = await projectRepository.update(
+      { id: projectId },
+      data
+    );
 
     return Boolean(updateResult.affected);
   }
@@ -401,14 +512,20 @@ export class Database {
     return domain;
   }
 
-  async updateDomainById (domainId: string, data: DeepPartial<Domain>): Promise<boolean> {
+  async updateDomainById (
+    domainId: string,
+    data: DeepPartial<Domain>
+  ): Promise<boolean> {
     const domainRepository = this.dataSource.getRepository(Domain);
     const updateResult = await domainRepository.update({ id: domainId }, data);
 
     return Boolean(updateResult.affected);
   }
 
-  async getDomainsByProjectId (projectId: string, filter?: FindOptionsWhere<Domain>): Promise<Domain[]> {
+  async getDomainsByProjectId (
+    projectId: string,
+    filter?: FindOptionsWhere<Domain>
+  ): Promise<Domain[]> {
     const domainRepository = this.dataSource.getRepository(Domain);
 
     const domains = await domainRepository.find({

packages/backend/src/entity/Deployment.ts

@@ -26,18 +26,27 @@ export enum DeploymentStatus {
   Error = 'Error',
 }
 
+export interface ApplicationDeploymentRequest {
+  type: string;
+  version: string;
+  name: string;
+  application: string;
+  config: string;
+  meta: string;
+}
+
 export interface ApplicationRecord {
   type: string;
-  version:string
-  name: string
-  description?: string
-  homepage?: string
-  license?: string
-  author?: string
-  repository?: string[],
-  app_version?: string
-  repository_ref: string
-  app_type: string
+  version: string;
+  name: string;
+  description?: string;
+  homepage?: string;
+  license?: string;
+  author?: string;
+  repository?: string[];
+  app_version?: string;
+  repository_ref: string;
+  app_type: string;
 }
 
 @Entity()
@@ -78,6 +87,12 @@ export class Deployment {
   @Column('simple-json')
     applicationRecordData!: ApplicationRecord;
 
+  @Column('varchar', { nullable: true })
+    applicationDeploymentRequestId!: string | null;
+
+  @Column('simple-json', { nullable: true })
+    applicationDeploymentRequestData!: ApplicationDeploymentRequest | null;
+
   @Column('varchar', { nullable: true })
     applicationDeploymentRecordId!: string | null;
 

packages/backend/src/entity/Domain.ts

@@ -39,7 +39,7 @@ export class Domain {
 
   @ManyToOne(() => Domain)
   @JoinColumn({ name: 'redirectToId' })
-    // eslint-disable-next-line no-use-before-define
+  // eslint-disable-next-line no-use-before-define
     redirectTo!: Domain | null;
 
   @Column({

packages/backend/src/entity/Organization.ts

@@ -27,8 +27,12 @@ export class Organization {
   @UpdateDateColumn()
     updatedAt!: Date;
 
-  @OneToMany(() => UserOrganization, userOrganization => userOrganization.organization, {
-    cascade: ['soft-remove']
-  })
+  @OneToMany(
+    () => UserOrganization,
+    (userOrganization) => userOrganization.organization,
+    {
+      cascade: ['soft-remove']
+    }
+  )
     userOrganizations!: UserOrganization[];
 }

packages/backend/src/entity/Project.ts

@@ -15,15 +15,6 @@ import { Organization } from './Organization';
 import { ProjectMember } from './ProjectMember';
 import { Deployment } from './Deployment';
 
-export interface ApplicationDeploymentRequest {
-  type: string
-  version: string
-  name: string
-  application: string
-  config: string,
-  meta: string
-}
-
 @Entity()
 export class Project {
   @PrimaryGeneratedColumn('uuid')
@@ -52,12 +43,6 @@ export class Project {
   @Column('varchar', { length: 255, default: 'main' })
     prodBranch!: string;
 
-  @Column('varchar', { nullable: true })
-    applicationDeploymentRequestId!: string | null;
-
-  @Column('simple-json', { nullable: true })
-    applicationDeploymentRequestData!: ApplicationDeploymentRequest | null;
-
   @Column('text', { default: '' })
     description!: string;
 
@@ -91,7 +76,7 @@ export class Project {
   @OneToMany(() => Deployment, (deployment) => deployment.project)
     deployments!: Deployment[];
 
-  @OneToMany(() => ProjectMember, projectMember => projectMember.project, {
+  @OneToMany(() => ProjectMember, (projectMember) => projectMember.project, {
     cascade: ['soft-remove']
   })
     projectMembers!: ProjectMember[];

packages/backend/src/entity/ProjectMember.ts

@@ -15,7 +15,7 @@ import { User } from './User';
 
 export enum Permission {
   View = 'View',
-  Edit = 'Edit'
+  Edit = 'Edit',
 }
 
 @Entity()

packages/backend/src/entity/User.ts

@@ -12,10 +12,15 @@ import { UserOrganization } from './UserOrganization';
 
 @Entity()
 @Unique(['email'])
+@Unique(['ethAddress'])
 export class User {
   @PrimaryGeneratedColumn('uuid')
     id!: string;
 
+  // TODO: Set ethAddress as ID
+  @Column()
+    ethAddress!: string;
+
   @Column('varchar', { length: 255, nullable: true })
     name!: string | null;
 
@@ -34,13 +39,17 @@ export class User {
   @CreateDateColumn()
     updatedAt!: Date;
 
-  @OneToMany(() => ProjectMember, projectMember => projectMember.project, {
+  @OneToMany(() => ProjectMember, (projectMember) => projectMember.project, {
     cascade: ['soft-remove']
   })
     projectMembers!: ProjectMember[];
 
-  @OneToMany(() => UserOrganization, UserOrganization => UserOrganization.member, {
-    cascade: ['soft-remove']
-  })
+  @OneToMany(
+    () => UserOrganization,
+    (UserOrganization) => UserOrganization.member,
+    {
+      cascade: ['soft-remove']
+    }
+  )
     userOrganizations!: UserOrganization[];
 }

packages/backend/src/entity/UserOrganization.ts

@@ -12,7 +12,7 @@ import {
 import { User } from './User';
 import { Organization } from './Organization';
 
-enum Role {
+export enum Role {
   Owner = 'Owner',
   Maintainer = 'Maintainer',
   Reader = 'Reader',

packages/backend/src/index.ts

@@ -19,7 +19,7 @@ const OAUTH_CLIENT_TYPE = 'oauth-app';
 
 export const main = async (): Promise<void> => {
   // TODO: get config path using cli
-  const { server, database, gitHub, registryConfig } = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
+  const { server, database, gitHub, registryConfig, misc } = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
 
   const app = new OAuthApp({
     clientType: OAUTH_CLIENT_TYPE,
@@ -27,13 +27,20 @@ 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);
-  const service = new Service({ gitHubConfig: gitHub, registryConfig }, db, app, registry);
+  const service = new Service(
+    { gitHubConfig: gitHub, registryConfig },
+    db,
+    app,
+    registry
+  );
 
-  const typeDefs = fs.readFileSync(path.join(__dirname, 'schema.gql')).toString();
+  const typeDefs = fs
+    .readFileSync(path.join(__dirname, 'schema.gql'))
+    .toString();
   const resolvers = await createResolvers(service);
 
   await createAndStartServer(server, typeDefs, resolvers, service);

packages/backend/src/registry.ts

@@ -6,8 +6,11 @@ import { DateTime } from 'luxon';
 import { Registry as LaconicRegistry } from '@cerc-io/laconic-sdk';
 
 import { RegistryConfig } from './config';
-import { ApplicationDeploymentRequest } from './entity/Project';
-import { ApplicationRecord, Deployment } from './entity/Deployment';
+import {
+  ApplicationRecord,
+  Deployment,
+  ApplicationDeploymentRequest
+} from './entity/Deployment';
 import { AppDeploymentRecord, PackageJSON } from './types';
 
 const log = debug('snowball:registry');
@@ -21,35 +24,54 @@ export class Registry {
   private registry: LaconicRegistry;
   private registryConfig: RegistryConfig;
 
-  constructor (registryConfig : RegistryConfig) {
+  constructor (registryConfig: RegistryConfig) {
     this.registryConfig = registryConfig;
-    this.registry = new LaconicRegistry(registryConfig.gqlEndpoint, registryConfig.restEndpoint, registryConfig.chainId);
+    this.registry = new LaconicRegistry(
+      registryConfig.gqlEndpoint,
+      registryConfig.restEndpoint,
+      registryConfig.chainId
+    );
   }
 
   async createApplicationRecord ({
+    appName,
     packageJSON,
     commitHash,
     appType,
     repoUrl
   }: {
-    packageJSON: PackageJSON
-    commitHash: string,
-    appType: string,
-    repoUrl: string
-  }): Promise<{applicationRecordId: string, applicationRecordData: ApplicationRecord}> {
-    assert(packageJSON.name, "name field doesn't exist in package.json");
+    appName: string;
+    packageJSON: PackageJSON;
+    commitHash: string;
+    appType: string;
+    repoUrl: string;
+  }): Promise<{
+    applicationRecordId: string;
+    applicationRecordData: ApplicationRecord;
+  }> {
     // 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({
-      type: APP_RECORD_TYPE,
-      name: packageJSON.name
-    }, true);
+    const records = await this.registry.queryRecords(
+      {
+        type: APP_RECORD_TYPE,
+        name: packageJSON.name
+      },
+      true
+    );
 
     // Get next version of record
-    const bondRecords = records.filter((record: any) => record.bondId === this.registryConfig.bondId);
-    const [latestBondRecord] = bondRecords.sort((a: any, b: any) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime());
-    const nextVersion = semverInc(latestBondRecord?.attributes.version ?? '0.0.0', 'patch');
+    const bondRecords = records.filter(
+      (record: any) => record.bondId === this.registryConfig.bondId
+    );
+    const [latestBondRecord] = bondRecords.sort(
+      (a: any, b: any) =>
+        new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
+    );
+    const nextVersion = semverInc(
+      latestBondRecord?.attributes.version ?? '0.0.0',
+      'patch'
+    );
 
     assert(nextVersion, 'Application record version not valid');
 
@@ -60,11 +82,16 @@ export class Registry {
       repository_ref: commitHash,
       repository: [repoUrl],
       app_type: appType,
-      name: packageJSON.name,
+      name: appName,
       ...(packageJSON.description && { description: packageJSON.description }),
       ...(packageJSON.homepage && { homepage: packageJSON.homepage }),
       ...(packageJSON.license && { license: packageJSON.license }),
-      ...(packageJSON.author && { author: typeof packageJSON.author === 'object' ? JSON.stringify(packageJSON.author) : packageJSON.author }),
+      ...(packageJSON.author && {
+        author:
+          typeof packageJSON.author === 'object'
+            ? JSON.stringify(packageJSON.author)
+            : packageJSON.author
+      }),
       ...(packageJSON.version && { app_version: packageJSON.version })
     };
 
@@ -81,24 +108,43 @@ export class Registry {
     log('Application record data:', applicationRecord);
 
     // TODO: Discuss computation of CRN
-    const crn = this.getCrn(packageJSON.name);
+    const crn = this.getCrn(appName);
     log(`Setting name: ${crn} for record ID: ${result.data.id}`);
 
-    await this.registry.setName({ cid: result.data.id, crn }, this.registryConfig.privateKey, this.registryConfig.fee);
-    await this.registry.setName({ cid: result.data.id, crn: `${crn}@${applicationRecord.app_version}` }, this.registryConfig.privateKey, this.registryConfig.fee);
-    await this.registry.setName({ cid: result.data.id, crn: `${crn}@${applicationRecord.repository_ref}` }, this.registryConfig.privateKey, this.registryConfig.fee);
+    await this.registry.setName(
+      { cid: result.data.id, crn },
+      this.registryConfig.privateKey,
+      this.registryConfig.fee
+    );
+    await this.registry.setName(
+      { cid: result.data.id, crn: `${crn}@${applicationRecord.app_version}` },
+      this.registryConfig.privateKey,
+      this.registryConfig.fee
+    );
+    await this.registry.setName(
+      {
+        cid: result.data.id,
+        crn: `${crn}@${applicationRecord.repository_ref}`
+      },
+      this.registryConfig.privateKey,
+      this.registryConfig.fee
+    );
 
-    return { applicationRecordId: result.data.id, applicationRecordData: applicationRecord };
+    return {
+      applicationRecordId: result.data.id,
+      applicationRecordData: applicationRecord
+    };
   }
 
   async createApplicationDeploymentRequest (data: {
+    deployment: Deployment,
     appName: string,
-    commitHash: string,
+    packageJsonName: string,
     repository: string,
     environmentVariables: { [key: string]: string }
   }): Promise<{
-    applicationDeploymentRequestId: string,
-    applicationDeploymentRequestData: ApplicationDeploymentRequest
+    applicationDeploymentRequestId: string;
+    applicationDeploymentRequestData: ApplicationDeploymentRequest;
   }> {
     const crn = this.getCrn(data.appName);
     const records = await this.registry.resolveNames([crn]);
@@ -114,9 +160,9 @@ export class Registry {
       version: '1.0.0',
       name: `${applicationRecord.attributes.name}@${applicationRecord.attributes.app_version}`,
       application: `${crn}@${applicationRecord.attributes.app_version}`,
+      dns: `${data.deployment.project.name}-${data.deployment.id}`,
 
       // TODO: Not set in test-progressive-web-app CI
-      // dns: '$CERC_REGISTRY_DEPLOYMENT_SHORT_HOSTNAME',
       // deployment: '$CERC_REGISTRY_DEPLOYMENT_CRN',
 
       // https://git.vdb.to/cerc-io/laconic-registry-cli/commit/129019105dfb93bebcea02fde0ed64d0f8e5983b
@@ -124,9 +170,11 @@ export class Registry {
         env: data.environmentVariables
       }),
       meta: JSON.stringify({
-        note: `Added by Snowball @ ${DateTime.utc().toFormat('EEE LLL dd HH:mm:ss \'UTC\' yyyy')}`,
+        note: `Added by Snowball @ ${DateTime.utc().toFormat(
+          "EEE LLL dd HH:mm:ss 'UTC' yyyy"
+        )}`,
         repository: data.repository,
-        repository_ref: data.commitHash
+        repository_ref: data.deployment.commitHash
       })
     };
 
@@ -142,31 +190,38 @@ export class Registry {
     log(`Application deployment request record published: ${result.data.id}`);
     log('Application deployment request data:', applicationDeploymentRequest);
 
-    return { applicationDeploymentRequestId: result.data.id, applicationDeploymentRequestData: applicationDeploymentRequest };
+    return {
+      applicationDeploymentRequestId: result.data.id,
+      applicationDeploymentRequestData: applicationDeploymentRequest
+    };
   }
 
   /**
    * Fetch ApplicationDeploymentRecords for deployments
    */
-  async getDeploymentRecords (deployments: Deployment[]): Promise<AppDeploymentRecord[]> {
+  async getDeploymentRecords (
+    deployments: Deployment[]
+  ): Promise<AppDeploymentRecord[]> {
     // Fetch ApplicationDeploymentRecords for corresponding ApplicationRecord set in deployments
     // TODO: Implement Laconicd GQL query to filter records by multiple values for an attribute
-    const records = await this.registry.queryRecords({
-      type: APP_DEPLOYMENT_RECORD_TYPE
-    }, true);
+    const records = await this.registry.queryRecords(
+      {
+        type: APP_DEPLOYMENT_RECORD_TYPE
+      },
+      true
+    );
 
     // Filter records with ApplicationRecord ids
-    return records.filter((record: AppDeploymentRecord) => deployments.some(deployment => deployment.applicationRecordId === record.attributes.application));
+    return records.filter((record: AppDeploymentRecord) =>
+      deployments.some(
+        (deployment) =>
+          deployment.applicationRecordId === record.attributes.application
+      )
+    );
   }
 
-  getCrn (packageJsonName: string): string {
-    const [arg1, arg2] = packageJsonName.split('/');
-
-    if (arg2) {
-      const authority = arg1.replace('@', '');
-      return `crn://${authority}/applications/${arg2}`;
-    }
-
-    return `crn://${arg1}/applications/${arg1}`;
+  getCrn (appName: string): string {
+    assert(this.registryConfig.authority, "Authority doesn't exist");
+    return `crn://${this.registryConfig.authority}/applications/${appName}`;
   }
 }

packages/backend/src/resolvers.ts

@@ -14,11 +14,11 @@ export const createResolvers = async (service: Service): Promise<any> => {
     Query: {
       // TODO: add custom type for context
       user: (_: any, __: any, context: any) => {
-        return service.getUser(context.userId);
+        return context.user;
       },
 
       organizations: async (_:any, __: any, context: any) => {
-        return service.getOrganizationsByUserId(context.userId);
+        return service.getOrganizationsByUserId(context.user);
       },
 
       project: async (_: any, { projectId }: { projectId: string }) => {
@@ -26,14 +26,17 @@ export const createResolvers = async (service: Service): Promise<any> => {
       },
 
       projectsInOrganization: async (_: any, { organizationSlug }: {organizationSlug: string }, context: any) => {
-        return service.getProjectsInOrganization(context.userId, organizationSlug);
+        return service.getProjectsInOrganization(context.user, organizationSlug);
       },
 
       deployments: async (_: any, { projectId }: { projectId: string }) => {
         return service.getDeploymentsByProjectId(projectId);
       },
 
-      environmentVariables: async (_: any, { projectId }: { projectId: string }) => {
+      environmentVariables: async (
+        _: any,
+        { projectId }: { projectId: string }
+      ) => {
         return service.getEnvironmentVariablesByProjectId(projectId);
       },
 
@@ -42,31 +45,47 @@ export const createResolvers = async (service: Service): Promise<any> => {
       },
 
       searchProjects: async (_: any, { searchText }: { searchText: string }, context: any) => {
-        return service.searchProjects(context.userId, searchText);
+        return service.searchProjects(context.user, searchText);
       },
 
-      domains: async (_:any, { projectId, filter }: { projectId: string, filter?: FindOptionsWhere<Domain> }) => {
+      domains: async (
+        _: any,
+        {
+          projectId,
+          filter
+        }: { projectId: string; filter?: FindOptionsWhere<Domain> }
+      ) => {
         return service.getDomainsByProjectId(projectId, filter);
       }
     },
 
     // TODO: Return error in GQL response
     Mutation: {
-      removeProjectMember: async (_: any, { projectMemberId }: { projectMemberId: string }, context: any) => {
+      removeProjectMember: async (
+        _: any,
+        { projectMemberId }: { projectMemberId: string },
+        context: any
+      ) => {
         try {
-          return await service.removeProjectMember(context.userId, projectMemberId);
+          return await service.removeProjectMember(context.user, projectMemberId);
         } catch (err) {
           log(err);
           return false;
         }
       },
 
-      updateProjectMember: async (_: any, { projectMemberId, data }: {
-        projectMemberId: string,
-        data: {
-          permissions: Permission[]
+      updateProjectMember: async (
+        _: any,
+        {
+          projectMemberId,
+          data
+        }: {
+          projectMemberId: string;
+          data: {
+            permissions: Permission[];
+          };
         }
-      }) => {
+      ) => {
         try {
           return await service.updateProjectMember(projectMemberId, data);
         } catch (err) {
@@ -75,13 +94,19 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
-      addProjectMember: async (_: any, { projectId, data }: {
-        projectId: string,
-        data: {
-          email: string,
-          permissions: Permission[]
+      addProjectMember: async (
+        _: any,
+        {
+          projectId,
+          data
+        }: {
+          projectId: string;
+          data: {
+            email: string;
+            permissions: Permission[];
+          };
         }
-      }) => {
+      ) => {
         try {
           return Boolean(await service.addProjectMember(projectId, data));
         } catch (err) {
@@ -90,25 +115,51 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
-      addEnvironmentVariables: async (_: any, { projectId, data }: { projectId: string, data: { environments: string[], key: string, value: string}[] }) => {
+      addEnvironmentVariables: async (
+        _: any,
+        {
+          projectId,
+          data
+        }: {
+          projectId: string;
+          data: { environments: string[]; key: string; value: string }[];
+        }
+      ) => {
         try {
-          return Boolean(await service.addEnvironmentVariables(projectId, data));
+          return Boolean(
+            await service.addEnvironmentVariables(projectId, data)
+          );
         } catch (err) {
           log(err);
           return false;
         }
       },
 
-      updateEnvironmentVariable: async (_: any, { environmentVariableId, data }: { environmentVariableId: string, data : DeepPartial<EnvironmentVariable>}) => {
+      updateEnvironmentVariable: async (
+        _: any,
+        {
+          environmentVariableId,
+          data
+        }: {
+          environmentVariableId: string;
+          data: DeepPartial<EnvironmentVariable>;
+        }
+      ) => {
         try {
-          return await service.updateEnvironmentVariable(environmentVariableId, data);
+          return await service.updateEnvironmentVariable(
+            environmentVariableId,
+            data
+          );
         } catch (err) {
           log(err);
           return false;
         }
       },
 
-      removeEnvironmentVariable: async (_: any, { environmentVariableId }: { environmentVariableId: string}) => {
+      removeEnvironmentVariable: async (
+        _: any,
+        { environmentVariableId }: { environmentVariableId: string }
+      ) => {
         try {
           return await service.removeEnvironmentVariable(environmentVariableId);
         } catch (err) {
@@ -117,25 +168,39 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
-      updateDeploymentToProd: async (_: any, { deploymentId }: { deploymentId: string }, context: any) => {
+      updateDeploymentToProd: async (
+        _: any,
+        { deploymentId }: { deploymentId: string },
+        context: any
+      ) => {
         try {
-          return Boolean(await service.updateDeploymentToProd(context.userId, deploymentId));
+          return Boolean(await service.updateDeploymentToProd(context.user, deploymentId));
         } catch (err) {
           log(err);
           return false;
         }
       },
 
-      addProject: async (_: any, { organizationSlug, data }: { organizationSlug: string, data: DeepPartial<Project> }, context: any) => {
+      addProject: async (
+        _: any,
+        {
+          organizationSlug,
+          data
+        }: { organizationSlug: string; data: DeepPartial<Project> },
+        context: any
+      ) => {
         try {
-          return await service.addProject(context.userId, organizationSlug, data);
+          return await service.addProject(context.user, organizationSlug, data);
         } catch (err) {
           log(err);
           throw err;
         }
       },
 
-      updateProject: async (_: any, { projectId, data }: { projectId: string, data: DeepPartial<Project> }) => {
+      updateProject: async (
+        _: any,
+        { projectId, data }: { projectId: string; data: DeepPartial<Project> }
+      ) => {
         try {
           return await service.updateProject(projectId, data);
         } catch (err) {
@@ -144,9 +209,13 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
-      redeployToProd: async (_: any, { deploymentId }: { deploymentId: string }, context: any) => {
+      redeployToProd: async (
+        _: any,
+        { deploymentId }: { deploymentId: string },
+        context: any
+      ) => {
         try {
-          return Boolean(await service.redeployToProd(context.userId, deploymentId));
+          return Boolean(await service.redeployToProd(context.user, deploymentId));
         } catch (err) {
           log(err);
           return false;
@@ -157,7 +226,8 @@ export const createResolvers = async (service: Service): Promise<any> => {
         try {
           return await service.deleteProject(projectId);
         } catch (err) {
-          log(err); return false;
+          log(err);
+          return false;
         }
       },
 
@@ -170,7 +240,13 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
-      rollbackDeployment: async (_: any, { projectId, deploymentId }: {deploymentId: string, projectId: string }) => {
+      rollbackDeployment: async (
+        _: any,
+        {
+          projectId,
+          deploymentId
+        }: { deploymentId: string; projectId: string }
+      ) => {
         try {
           return await service.rollbackDeployment(projectId, deploymentId);
         } catch (err) {
@@ -179,7 +255,10 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
-      addDomain: async (_: any, { projectId, data }: { projectId: string, data: { name: string } }) => {
+      addDomain: async (
+        _: any,
+        { projectId, data }: { projectId: string; data: { name: string } }
+      ) => {
         try {
           return Boolean(await service.addDomain(projectId, data));
         } catch (err) {
@@ -188,7 +267,10 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
-      updateDomain: async (_: any, { domainId, data }: { domainId: string, data: DeepPartial<Domain>}) => {
+      updateDomain: async (
+        _: any,
+        { domainId, data }: { domainId: string; data: DeepPartial<Domain> }
+      ) => {
         try {
           return await service.updateDomain(domainId, data);
         } catch (err) {
@@ -197,9 +279,13 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
-      authenticateGitHub: async (_: any, { code }: { code: string }, context: any) => {
+      authenticateGitHub: async (
+        _: any,
+        { code }: { code: string },
+        context: any
+      ) => {
         try {
-          return await service.authenticateGitHub(code, context.userId);
+          return await service.authenticateGitHub(code, context.user);
         } catch (err) {
           log(err);
           return false;
@@ -208,7 +294,7 @@ export const createResolvers = async (service: Service): Promise<any> => {
 
       unauthenticateGitHub: async (_: any, __: object, context: any) => {
         try {
-          return service.unauthenticateGitHub(context.userId, { gitHubToken: null });
+          return service.unauthenticateGitHub(context.user, { gitHubToken: null });
         } catch (err) {
           log(err);
           return false;

packages/backend/src/routes/auth.ts

@@ -0,0 +1,41 @@
+import { Router } from 'express';
+import { SiweMessage, generateNonce } from 'siwe';
+
+const router = Router();
+
+router.get('/nonce', async (_, res) => {
+  res.send(generateNonce());
+});
+
+router.post('/validate', async (req, res) => {
+  const { message, signature } = req.body;
+  const { success, data } = await new SiweMessage(message).verify({
+    signature
+  });
+
+  if (success) {
+    req.session.address = data.address;
+    req.session.chainId = data.chainId;
+  }
+
+  res.send({ success });
+});
+
+router.get('/session', (req, res) => {
+  if (req.session.address && req.session.chainId) {
+    res.send({ address: req.session.address, chainId: req.session.chainId });
+  } else {
+    res.status(401).send({ error: 'Unauthorized: No active session' });
+  }
+});
+
+router.post('/logout', (req, res) => {
+  req.session.destroy((err) => {
+    if (err) {
+      return res.send({ success: false });
+    }
+    res.send({ success: true });
+  });
+});
+
+export default router;

packages/backend/src/schema.gql

@@ -188,10 +188,19 @@ type Query {
 
 type Mutation {
   addProjectMember(projectId: String!, data: AddProjectMemberInput): Boolean!
-  updateProjectMember(projectMemberId: String!, data: UpdateProjectMemberInput): Boolean!
+  updateProjectMember(
+    projectMemberId: String!
+    data: UpdateProjectMemberInput
+  ): Boolean!
   removeProjectMember(projectMemberId: String!): Boolean!
-  addEnvironmentVariables(projectId: String!, data: [AddEnvironmentVariableInput!]): Boolean!
-  updateEnvironmentVariable(environmentVariableId: String!, data: UpdateEnvironmentVariableInput!): Boolean!
+  addEnvironmentVariables(
+    projectId: String!
+    data: [AddEnvironmentVariableInput!]
+  ): Boolean!
+  updateEnvironmentVariable(
+    environmentVariableId: String!
+    data: UpdateEnvironmentVariableInput!
+  ): Boolean!
   removeEnvironmentVariable(environmentVariableId: String!): Boolean!
   updateDeploymentToProd(deploymentId: String!): Boolean!
   addProject(organizationSlug: String!, data: AddProjectInput): Project!

packages/backend/src/server.ts

@@ -1,22 +1,33 @@
 import debug from 'debug';
 import express from 'express';
+import cors from 'cors';
 import { ApolloServer } from 'apollo-server-express';
 import { createServer } from 'http';
 import {
   ApolloServerPluginDrainHttpServer,
-  ApolloServerPluginLandingPageLocalDefault
+  ApolloServerPluginLandingPageLocalDefault,
+  AuthenticationError
 } from 'apollo-server-core';
+import session from 'express-session';
 
 import { TypeSource } from '@graphql-tools/utils';
 import { makeExecutableSchema } from '@graphql-tools/schema';
 
 import { ServerConfig } from './config';
-import { DEFAULT_GQL_PATH, USER_ID } from './constants';
+import { DEFAULT_GQL_PATH } from './constants';
 import githubRouter from './routes/github';
+import authRouter from './routes/auth';
 import { Service } from './service';
 
 const log = debug('snowball:server');
 
+declare module 'express-session' {
+  interface SessionData {
+    address: string;
+    chainId: number;
+  }
+}
+
 export const createAndStartServer = async (
   serverConfig: ServerConfig,
   typeDefs: TypeSource,
@@ -24,6 +35,7 @@ export const createAndStartServer = async (
   service: Service
 ): Promise<ApolloServer> => {
   const { host, port, gqlPath = DEFAULT_GQL_PATH } = serverConfig;
+  const { appOriginUrl, secret, domain, trustProxy } = serverConfig.session;
 
   const app = express();
 
@@ -39,9 +51,19 @@ export const createAndStartServer = async (
   const server = new ApolloServer({
     schema,
     csrfPrevention: true,
-    context: () => {
-      // TODO: Use userId derived from auth token
-      return { userId: USER_ID };
+    context: async ({ req }) => {
+      // https://www.apollographql.com/docs/apollo-server/v3/security/authentication#api-wide-authorization
+
+      const { address } = req.session;
+
+      if (!address) {
+        throw new AuthenticationError('Unauthorized: No active session');
+      }
+
+      // Find/create user from ETH address in request session
+      const user = await service.loadOrCreateUser(address);
+
+      return { user };
     },
     plugins: [
       // Proper shutdown for the HTTP server
@@ -52,13 +74,49 @@ export const createAndStartServer = async (
 
   await server.start();
 
+  app.use(cors({
+    origin: appOriginUrl,
+    credentials: true
+  }));
+
+  const sessionOptions: session.SessionOptions = {
+    secret: secret,
+    resave: false,
+    saveUninitialized: true,
+    cookie: {
+      secure: new URL(appOriginUrl).protocol === 'https:',
+      // TODO: Set cookie maxAge and handle cookie expiry in frontend
+      // maxAge: SESSION_COOKIE_MAX_AGE,
+      sameSite: new URL(appOriginUrl).protocol === 'https:' ? 'none' : 'lax'
+    }
+  };
+
+  if (domain) {
+    sessionOptions.cookie!.domain = domain;
+  }
+
+  if (trustProxy) {
+    // trust first proxy
+    app.set('trust proxy', 1);
+  }
+
+  app.use(
+    session(sessionOptions)
+  );
+
   server.applyMiddleware({
     app,
-    path: gqlPath
+    path: gqlPath,
+    cors: {
+      origin: [appOriginUrl],
+      credentials: true
+    }
   });
 
-  app.set('service', service);
   app.use(express.json());
+
+  app.set('service', service);
+  app.use('/auth', authRouter);
   app.use('/api/github', githubRouter);
 
   httpServer.listen(port, host, () => {

packages/backend/src/service.ts

@@ -15,15 +15,16 @@ import { Permission, ProjectMember } from './entity/ProjectMember';
 import { User } from './entity/User';
 import { Registry } from './registry';
 import { GitHubConfig, RegistryConfig } from './config';
-import { AppDeploymentRecord, GitPushEventPayload } from './types';
+import { AppDeploymentRecord, GitPushEventPayload, PackageJSON } from './types';
+import { Role } from './entity/UserOrganization';
 
 const log = debug('snowball:service');
 
 const GITHUB_UNIQUE_WEBHOOK_ERROR = 'Hook already exists on this repository';
 
 interface Config {
-  gitHubConfig: GitHubConfig
-  registryConfig: RegistryConfig
+  gitHubConfig: GitHubConfig;
+  registryConfig: RegistryConfig;
 }
 
 export class Service {
@@ -71,7 +72,9 @@ export class Service {
     });
 
     if (deployments.length) {
-      log(`Found ${deployments.length} deployments in ${DeploymentStatus.Building} state`);
+      log(
+        `Found ${deployments.length} deployments in ${DeploymentStatus.Building} state`
+      );
 
       // Fetch ApplicationDeploymentRecord for deployments
       const records = await this.registry.getDeploymentRecords(deployments);
@@ -91,10 +94,12 @@ export class Service {
   /**
    * Update deployments with ApplicationDeploymentRecord data
    */
-  async updateDeploymentsWithRecordData (records: AppDeploymentRecord[]): Promise<void> {
+  async updateDeploymentsWithRecordData (
+    records: AppDeploymentRecord[]
+  ): Promise<void> {
     // Get deployments for ApplicationDeploymentRecords
     const deployments = await this.db.getDeployments({
-      where: records.map(record => ({
+      where: records.map((record) => ({
         applicationRecordId: record.attributes.application
       })),
       order: {
@@ -103,38 +108,46 @@ export class Service {
     });
 
     // Get project IDs of deployments that are in production environment
-    const productionDeploymentProjectIds = deployments.reduce((acc, deployment): Set<string> => {
-      if (deployment.environment === Environment.Production) {
-        acc.add(deployment.projectId);
-      }
+    const productionDeploymentProjectIds = deployments.reduce(
+      (acc, deployment): Set<string> => {
+        if (deployment.environment === Environment.Production) {
+          acc.add(deployment.projectId);
+        }
 
-      return acc;
-    }, new Set<string>());
+        return acc;
+      },
+      new Set<string>()
+    );
 
     // Set old deployments isCurrent to false
-    await this.db.updateDeploymentsByProjectIds(Array.from(productionDeploymentProjectIds), { isCurrent: false });
+    await this.db.updateDeploymentsByProjectIds(
+      Array.from(productionDeploymentProjectIds),
+      { isCurrent: false }
+    );
 
-    const recordToDeploymentsMap = deployments.reduce((acc: {[key: string]: Deployment}, deployment) => {
-      acc[deployment.applicationRecordId] = deployment;
-      return acc;
-    }, {});
+    const recordToDeploymentsMap = deployments.reduce(
+      (acc: { [key: string]: Deployment }, deployment) => {
+        acc[deployment.applicationRecordId] = deployment;
+        return acc;
+      },
+      {}
+    );
 
     // Update deployment data for ApplicationDeploymentRecords
     const deploymentUpdatePromises = records.map(async (record) => {
       const deployment = recordToDeploymentsMap[record.attributes.application];
 
-      await this.db.updateDeploymentById(
-        deployment.id,
-        {
-          applicationDeploymentRecordId: record.id,
-          applicationDeploymentRecordData: record.attributes,
-          url: record.attributes.url,
-          status: DeploymentStatus.Ready,
-          isCurrent: deployment.environment === Environment.Production
-        }
-      );
+      await this.db.updateDeploymentById(deployment.id, {
+        applicationDeploymentRecordId: record.id,
+        applicationDeploymentRecordData: record.attributes,
+        url: record.attributes.url,
+        status: DeploymentStatus.Ready,
+        isCurrent: deployment.environment === Environment.Production
+      });
 
-      log(`Updated deployment ${deployment.id} with URL ${record.attributes.url}`);
+      log(
+        `Updated deployment ${deployment.id} with URL ${record.attributes.url}`
+      );
     });
 
     await Promise.all(deploymentUpdatePromises);
@@ -148,15 +161,48 @@ export class Service {
     });
   }
 
+  async loadOrCreateUser (ethAddress: string): Promise<User> {
+    // Get user by ETH address
+    let user = await this.db.getUser({
+      where: {
+        ethAddress
+      }
+    });
+
+    if (!user) {
+      const [org] = await this.db.getOrganizations({});
+      assert(org, 'No organizations exists in database');
+
+      // Create user with new address
+      user = await this.db.addUser({
+        email: `${ethAddress}@example.com`,
+        name: ethAddress,
+        isVerified: true,
+        ethAddress
+      });
+
+      await this.db.addUserOrganization({
+        member: user,
+        organization: org,
+        role: Role.Owner
+      });
+    }
+
+    return user;
+  }
+
   async getOctokit (userId: string): Promise<Octokit> {
     const user = await this.db.getUser({ where: { id: userId } });
-    assert(user && user.gitHubToken, 'User needs to be authenticated with GitHub token');
+    assert(
+      user && user.gitHubToken,
+      'User needs to be authenticated with GitHub token'
+    );
 
     return new Octokit({ auth: user.gitHubToken });
   }
 
-  async getOrganizationsByUserId (userId: string): Promise<Organization[]> {
-    const dbOrganizations = await this.db.getOrganizationsByUserId(userId);
+  async getOrganizationsByUserId (user: User): Promise<Organization[]> {
+    const dbOrganizations = await this.db.getOrganizationsByUserId(user.id);
     return dbOrganizations;
   }
 
@@ -165,8 +211,8 @@ export class Service {
     return dbProject;
   }
 
-  async getProjectsInOrganization (userId:string, organizationSlug: string): Promise<Project[]> {
-    const dbProjects = await this.db.getProjectsInOrganization(userId, organizationSlug);
+  async getProjectsInOrganization (user: User, organizationSlug: string): Promise<Project[]> {
+    const dbProjects = await this.db.getProjectsInOrganization(user.id, organizationSlug);
     return dbProjects;
   }
 
@@ -175,35 +221,49 @@ export class Service {
     return dbDeployments;
   }
 
-  async getEnvironmentVariablesByProjectId (projectId: string): Promise<EnvironmentVariable[]> {
-    const dbEnvironmentVariables = await this.db.getEnvironmentVariablesByProjectId(projectId);
+  async getEnvironmentVariablesByProjectId (
+    projectId: string
+  ): Promise<EnvironmentVariable[]> {
+    const dbEnvironmentVariables =
+      await this.db.getEnvironmentVariablesByProjectId(projectId);
     return dbEnvironmentVariables;
   }
 
-  async getProjectMembersByProjectId (projectId: string): Promise<ProjectMember[]> {
-    const dbProjectMembers = await this.db.getProjectMembersByProjectId(projectId);
+  async getProjectMembersByProjectId (
+    projectId: string
+  ): Promise<ProjectMember[]> {
+    const dbProjectMembers =
+      await this.db.getProjectMembersByProjectId(projectId);
     return dbProjectMembers;
   }
 
-  async searchProjects (userId: string, searchText: string): Promise<Project[]> {
-    const dbProjects = await this.db.getProjectsBySearchText(userId, searchText);
+  async searchProjects (user: User, searchText: string): Promise<Project[]> {
+    const dbProjects = await this.db.getProjectsBySearchText(user.id, searchText);
     return dbProjects;
   }
 
-  async getDomainsByProjectId (projectId: string, filter?: FindOptionsWhere<Domain>): Promise<Domain[]> {
+  async getDomainsByProjectId (
+    projectId: string,
+    filter?: FindOptionsWhere<Domain>
+  ): Promise<Domain[]> {
     const dbDomains = await this.db.getDomainsByProjectId(projectId, filter);
     return dbDomains;
   }
 
-  async updateProjectMember (projectMemberId: string, data: {permissions: Permission[]}): Promise<boolean> {
+  async updateProjectMember (
+    projectMemberId: string,
+    data: { permissions: Permission[] }
+  ): Promise<boolean> {
     return this.db.updateProjectMemberById(projectMemberId, data);
   }
 
-  async addProjectMember (projectId: string,
+  async addProjectMember (
+    projectId: string,
     data: {
-      email: string,
-      permissions: Permission[]
-    }): Promise<ProjectMember> {
+      email: string;
+      permissions: Permission[];
+    }
+  ): Promise<ProjectMember> {
     // TODO: Send invitation
     let user = await this.db.getUser({
       where: {
@@ -231,50 +291,62 @@ export class Service {
     return newProjectMember;
   }
 
-  async removeProjectMember (userId: string, projectMemberId: string): Promise<boolean> {
+  async removeProjectMember (user: User, projectMemberId: string): Promise<boolean> {
     const member = await this.db.getProjectMemberById(projectMemberId);
 
-    if (String(member.member.id) === userId) {
+    if (String(member.member.id) === user.id) {
       throw new Error('Invalid operation: cannot remove self');
     }
 
     const memberProject = member.project;
     assert(memberProject);
 
-    if (String(userId) === String(memberProject.owner.id)) {
+    if (String(user.id) === String(memberProject.owner.id)) {
       return this.db.removeProjectMemberById(projectMemberId);
     } else {
       throw new Error('Invalid operation: not authorized');
     }
   }
 
-  async addEnvironmentVariables (projectId: string, data: { environments: string[], key: string, value: string}[]): Promise<EnvironmentVariable[]> {
-    const formattedEnvironmentVariables = data.map((environmentVariable) => {
-      return environmentVariable.environments.map((environment) => {
-        return ({
-          key: environmentVariable.key,
-          value: environmentVariable.value,
-          environment: environment as Environment,
-          project: Object.assign(new Project(), {
-            id: projectId
-          })
+  async addEnvironmentVariables (
+    projectId: string,
+    data: { environments: string[]; key: string; value: string }[]
+  ): Promise<EnvironmentVariable[]> {
+    const formattedEnvironmentVariables = data
+      .map((environmentVariable) => {
+        return environmentVariable.environments.map((environment) => {
+          return {
+            key: environmentVariable.key,
+            value: environmentVariable.value,
+            environment: environment as Environment,
+            project: Object.assign(new Project(), {
+              id: projectId
+            })
+          };
         });
-      });
-    }).flat();
+      })
+      .flat();
 
-    const savedEnvironmentVariables = await this.db.addEnvironmentVariables(formattedEnvironmentVariables);
+    const savedEnvironmentVariables = await this.db.addEnvironmentVariables(
+      formattedEnvironmentVariables
+    );
     return savedEnvironmentVariables;
   }
 
-  async updateEnvironmentVariable (environmentVariableId: string, data : DeepPartial<EnvironmentVariable>): Promise<boolean> {
+  async updateEnvironmentVariable (
+    environmentVariableId: string,
+    data: DeepPartial<EnvironmentVariable>
+  ): Promise<boolean> {
     return this.db.updateEnvironmentVariable(environmentVariableId, data);
   }
 
-  async removeEnvironmentVariable (environmentVariableId: string): Promise<boolean> {
+  async removeEnvironmentVariable (
+    environmentVariableId: string
+  ): Promise<boolean> {
     return this.db.deleteEnvironmentVariable(environmentVariableId);
   }
 
-  async updateDeploymentToProd (userId: string, deploymentId: string): Promise<Deployment> {
+  async updateDeploymentToProd (user: User, deploymentId: string): Promise<Deployment> {
     const oldDeployment = await this.db.getDeployment({
       where: { id: deploymentId },
       relations: {
@@ -286,11 +358,14 @@ export class Service {
       throw new Error('Deployment does not exist');
     }
 
-    const prodBranchDomains = await this.db.getDomainsByProjectId(oldDeployment.project.id, { branch: oldDeployment.project.prodBranch });
+    const prodBranchDomains = await this.db.getDomainsByProjectId(
+      oldDeployment.project.id,
+      { branch: oldDeployment.project.prodBranch }
+    );
 
-    const octokit = await this.getOctokit(userId);
+    const octokit = await this.getOctokit(user.id);
 
-    const newDeployment = await this.createDeployment(userId,
+    const newDeployment = await this.createDeployment(user.id,
       octokit,
       {
         project: oldDeployment.project,
@@ -311,7 +386,9 @@ export class Service {
     recordData: { repoUrl?: string } = {}
   ): Promise<Deployment> {
     assert(data.project?.repository, 'Project repository not found');
-    log(`Creating deployment in project ${data.project.name} from branch ${data.branch}`);
+    log(
+      `Creating deployment in project ${data.project.name} from branch ${data.branch}`
+    );
     const [owner, repo] = data.project.repository.split('/');
 
     const { data: packageJSONData } = await octokit.rest.repos.getContent({
@@ -326,28 +403,37 @@ export class Service {
     }
 
     assert(!Array.isArray(packageJSONData) && packageJSONData.type === 'file');
-    const packageJSON = JSON.parse(atob(packageJSONData.content));
+    const packageJSON: PackageJSON = JSON.parse(atob(packageJSONData.content));
+
+    assert(packageJSON.name, "name field doesn't exist in package.json");
 
     if (!recordData.repoUrl) {
-      const { data: repoDetails } = await octokit.rest.repos.get({ owner, repo });
+      const { data: repoDetails } = await octokit.rest.repos.get({
+        owner,
+        repo
+      });
       recordData.repoUrl = repoDetails.html_url;
     }
 
     // TODO: Set environment variables for each deployment (environment variables can`t be set in application record)
-    const { applicationRecordId, applicationRecordData } = await this.registry.createApplicationRecord({
-      packageJSON,
-      appType: data.project!.template!,
-      commitHash: data.commitHash!,
-      repoUrl: recordData.repoUrl
-    });
+    const { applicationRecordId, applicationRecordData } =
+      await this.registry.createApplicationRecord({
+        appName: repo,
+        packageJSON,
+        appType: data.project!.template!,
+        commitHash: data.commitHash!,
+        repoUrl: recordData.repoUrl
+      });
 
     // Update previous deployment with prod branch domain
     // TODO: Fix unique constraint error for domain
-    await this.db.updateDeployment({
-      domainId: data.domain?.id
-    }, {
-      domain: null
-    });
+    if (data.domain) {
+      await this.db.updateDeployment({
+        domainId: data.domain.id
+      }, {
+        domain: null
+      });
+    }
 
     const newDeployment = await this.db.addDeployment({
       project: data.project,
@@ -365,10 +451,30 @@ export class Service {
     });
 
     log(`Created deployment ${newDeployment.id} and published application record ${applicationRecordId}`);
+
+    const environmentVariables = await this.db.getEnvironmentVariablesByProjectId(data.project.id!, { environment: Environment.Production });
+
+    const environmentVariablesObj = environmentVariables.reduce((acc, env) => {
+      acc[env.key] = env.value;
+
+      return acc;
+    }, {} as { [key: string]: string });
+
+    const { applicationDeploymentRequestId, applicationDeploymentRequestData } = await this.registry.createApplicationDeploymentRequest(
+      {
+        deployment: newDeployment,
+        appName: repo,
+        packageJsonName: packageJSON.name,
+        repository: recordData.repoUrl,
+        environmentVariables: environmentVariablesObj
+      });
+
+    await this.db.updateDeploymentById(newDeployment.id, { applicationDeploymentRequestId, applicationDeploymentRequestData });
+
     return newDeployment;
   }
 
-  async addProject (userId: string, organizationSlug: string, data: DeepPartial<Project>): Promise<Project | undefined> {
+  async addProject (user: User, organizationSlug: string, data: DeepPartial<Project>): Promise<Project | undefined> {
     const organization = await this.db.getOrganization({
       where: {
         slug: organizationSlug
@@ -378,12 +484,14 @@ export class Service {
       throw new Error('Organization does not exist');
     }
 
-    const project = await this.db.addProject(userId, organization.id, data);
+    const project = await this.db.addProject(user, organization.id, data);
 
-    const octokit = await this.getOctokit(userId);
+    const octokit = await this.getOctokit(user.id);
     const [owner, repo] = project.repository.split('/');
 
-    const { data: [latestCommit] } = await octokit.rest.repos.listCommits({
+    const {
+      data: [latestCommit]
+    } = await octokit.rest.repos.listCommits({
       owner,
       repo,
       sha: project.prodBranch,
@@ -393,7 +501,7 @@ export class Service {
     const { data: repoDetails } = await octokit.rest.repos.get({ owner, repo });
 
     // Create deployment with prod branch and latest commit
-    const newDeployment = await this.createDeployment(userId,
+    await this.createDeployment(user.id,
       octokit,
       {
         project,
@@ -408,27 +516,6 @@ export class Service {
       }
     );
 
-    const environmentVariables = await this.db.getEnvironmentVariablesByProjectId(project.id, { environment: Environment.Production });
-
-    const environmentVariablesObj = environmentVariables.reduce((acc, env) => {
-      acc[env.key] = env.value;
-
-      return acc;
-    }, {} as { [key: string]: string });
-
-    const { applicationDeploymentRequestId, applicationDeploymentRequestData } = await this.registry.createApplicationDeploymentRequest(
-      {
-        appName: newDeployment.applicationRecordData.name!,
-        commitHash: latestCommit.sha,
-        repository: repoDetails.html_url,
-        environmentVariables: environmentVariablesObj
-      });
-
-    await this.db.updateProjectById(project.id, {
-      applicationDeploymentRequestId,
-      applicationDeploymentRequestData
-    });
-
     await this.createRepoHook(octokit, project);
 
     return project;
@@ -441,7 +528,10 @@ export class Service {
         owner,
         repo,
         config: {
-          url: new URL('api/github/webhook', this.config.gitHubConfig.webhookUrl).href,
+          url: new URL(
+            'api/github/webhook',
+            this.config.gitHubConfig.webhookUrl
+          ).href,
           content_type: 'json'
         },
         events: ['push']
@@ -449,9 +539,13 @@ export class Service {
     } catch (err) {
       // https://docs.github.com/en/rest/repos/webhooks?apiVersion=2022-11-28#create-a-repository-webhook--status-codes
       if (
-        !(err instanceof RequestError &&
-        err.status === 422 &&
-        (err.response?.data as any).errors.some((err: any) => err.message === GITHUB_UNIQUE_WEBHOOK_ERROR))
+        !(
+          err instanceof RequestError &&
+          err.status === 422 &&
+          (err.response?.data as any).errors.some(
+            (err: any) => err.message === GITHUB_UNIQUE_WEBHOOK_ERROR
+          )
+        )
       ) {
         throw err;
       }
@@ -463,7 +557,9 @@ export class Service {
   async handleGitHubPush (data: GitPushEventPayload): Promise<void> {
     const { repository, ref, head_commit: headCommit } = data;
     log(`Handling GitHub push event from repository: ${repository.full_name}`);
-    const projects = await this.db.getProjects({ where: { repository: repository.full_name } });
+    const projects = await this.db.getProjects({
+      where: { repository: repository.full_name }
+    });
 
     if (!projects.length) {
       log(`No projects found for repository ${repository.full_name}`);
@@ -475,23 +571,29 @@ export class Service {
 
     for await (const project of projects) {
       const octokit = await this.getOctokit(project.ownerId);
-      const [domain] = await this.db.getDomainsByProjectId(project.id, { branch });
+      const [domain] = await this.db.getDomainsByProjectId(project.id, {
+        branch
+      });
 
       // Create deployment with branch and latest commit in GitHub data
-      await this.createDeployment(project.ownerId,
-        octokit,
-        {
-          project,
-          branch,
-          environment: project.prodBranch === branch ? Environment.Production : Environment.Preview,
-          domain,
-          commitHash: headCommit.id,
-          commitMessage: headCommit.message
-        });
+      await this.createDeployment(project.ownerId, octokit, {
+        project,
+        branch,
+        environment:
+          project.prodBranch === branch
+            ? Environment.Production
+            : Environment.Preview,
+        domain,
+        commitHash: headCommit.id,
+        commitMessage: headCommit.message
+      });
     }
   }
 
-  async updateProject (projectId: string, data: DeepPartial<Project>): Promise<boolean> {
+  async updateProject (
+    projectId: string,
+    data: DeepPartial<Project>
+  ): Promise<boolean> {
     return this.db.updateProjectById(projectId, data);
   }
 
@@ -508,13 +610,15 @@ export class Service {
     });
 
     if (domainsRedirectedFrom.length > 0) {
-      throw new Error('Cannot delete domain since it has redirects from other domains');
+      throw new Error(
+        'Cannot delete domain since it has redirects from other domains'
+      );
     }
 
     return this.db.deleteDomainById(domainId);
   }
 
-  async redeployToProd (userId: string, deploymentId: string): Promise<Deployment> {
+  async redeployToProd (user: User, deploymentId: string): Promise<Deployment> {
     const oldDeployment = await this.db.getDeployment({
       relations: {
         project: true,
@@ -530,9 +634,9 @@ export class Service {
       throw new Error('Deployment not found');
     }
 
-    const octokit = await this.getOctokit(userId);
+    const octokit = await this.getOctokit(user.id);
 
-    const newDeployment = await this.createDeployment(userId,
+    const newDeployment = await this.createDeployment(user.id,
       octokit,
       {
         project: oldDeployment.project,
@@ -547,7 +651,10 @@ export class Service {
     return newDeployment;
   }
 
-  async rollbackDeployment (projectId: string, deploymentId: string): Promise<boolean> {
+  async rollbackDeployment (
+    projectId: string,
+    deploymentId: string
+  ): Promise<boolean> {
     // TODO: Implement transactions
     const oldCurrentDeployment = await this.db.getDeployment({
       relations: {
@@ -565,16 +672,25 @@ export class Service {
       throw new Error('Current deployment doesnot exist');
     }
 
-    const oldCurrentDeploymentUpdate = await this.db.updateDeploymentById(oldCurrentDeployment.id, { isCurrent: false, domain: null });
+    const oldCurrentDeploymentUpdate = await this.db.updateDeploymentById(
+      oldCurrentDeployment.id,
+      { isCurrent: false, domain: null }
+    );
 
-    const newCurrentDeploymentUpdate = await this.db.updateDeploymentById(deploymentId, { isCurrent: true, domain: oldCurrentDeployment?.domain });
+    const newCurrentDeploymentUpdate = await this.db.updateDeploymentById(
+      deploymentId,
+      { isCurrent: true, domain: oldCurrentDeployment?.domain }
+    );
 
     return newCurrentDeploymentUpdate && oldCurrentDeploymentUpdate;
   }
 
-  async addDomain (projectId: string, data: { name: string }): Promise<{
-    primaryDomain: Domain,
-    redirectedDomain: Domain
+  async addDomain (
+    projectId: string,
+    data: { name: string }
+  ): Promise<{
+    primaryDomain: Domain;
+    redirectedDomain: Domain;
   }> {
     const currentProject = await this.db.getProjectById(projectId);
 
@@ -599,12 +715,20 @@ export class Service {
       redirectTo: savedPrimaryDomain
     };
 
-    const savedRedirectedDomain = await this.db.addDomain(redirectedDomainDetails);
+    const savedRedirectedDomain = await this.db.addDomain(
+      redirectedDomainDetails
+    );
 
-    return { primaryDomain: savedPrimaryDomain, redirectedDomain: savedRedirectedDomain };
+    return {
+      primaryDomain: savedPrimaryDomain,
+      redirectedDomain: savedRedirectedDomain
+    };
   }
 
-  async updateDomain (domainId: string, data: DeepPartial<Domain>): Promise<boolean> {
+  async updateDomain (
+    domainId: string,
+    data: DeepPartial<Domain>
+  ): Promise<boolean> {
     const domain = await this.db.getDomain({
       where: {
         id: domainId
@@ -645,7 +769,9 @@ export class Service {
       }
 
       if (redirectedDomain.redirectToId) {
-        throw new Error('Unable to redirect to the domain because it is already redirecting elsewhere. Redirects cannot be chained.');
+        throw new Error(
+          'Unable to redirect to the domain because it is already redirecting elsewhere. Redirects cannot be chained.'
+        );
       }
 
       newDomain.redirectTo = redirectedDomain;
@@ -656,17 +782,17 @@ export class Service {
     return updateResult;
   }
 
-  async authenticateGitHub (code:string, userId: string): Promise<{token: string}> {
+  async authenticateGitHub (code:string, user: User): Promise<{token: string}> {
     const { authentication: { token } } = await this.oauthApp.createToken({
       code
     });
 
-    await this.db.updateUser(userId, { gitHubToken: token });
+    await this.db.updateUser(user, { gitHubToken: token });
 
     return { token };
   }
 
-  async unauthenticateGitHub (userId: string, data: DeepPartial<User>): Promise<boolean> {
-    return this.db.updateUser(userId, data);
+  async unauthenticateGitHub (user: User, data: DeepPartial<User>): Promise<boolean> {
+    return this.db.updateUser(user, data);
   }
 }

packages/backend/src/types.ts

@@ -1,6 +1,6 @@
 export interface PackageJSON {
-  name?: string;
-  version?: string;
+  name: string;
+  version: string;
   author?: string;
   description?: string;
   homepage?: string;
@@ -47,5 +47,5 @@ interface RegistryRecord {
 }
 
 export interface AppDeploymentRecord extends RegistryRecord {
-  attributes: AppDeploymentRecordAttributes
+  attributes: AppDeploymentRecordAttributes;
 }

packages/backend/src/utils.ts

@@ -2,6 +2,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import toml from 'toml';
 import debug from 'debug';
+import { DataSource, DeepPartial, EntityTarget, ObjectLiteral } from 'typeorm';
 
 const log = debug('snowball:utils');
 
@@ -19,3 +20,49 @@ export const getConfig = async <ConfigType>(
 
   return config;
 };
+
+export const checkFileExists = async (filePath: string): Promise<boolean> => {
+  try {
+    await fs.access(filePath, fs.constants.F_OK);
+    return true;
+  } catch (err) {
+    log(err);
+    return false;
+  }
+};
+
+export const getEntities = async (filePath: string): Promise<any> => {
+  const entitiesData = await fs.readFile(filePath, 'utf-8');
+  const entities = JSON.parse(entitiesData);
+  return entities;
+};
+
+export const loadAndSaveData = async <Entity extends ObjectLiteral>(
+  entityType: EntityTarget<Entity>,
+  dataSource: DataSource,
+  entities: any,
+  relations?: any | undefined
+): Promise<Entity[]> => {
+  const entityRepository = dataSource.getRepository(entityType);
+
+  const savedEntity: Entity[] = [];
+
+  for (const entityData of entities) {
+    let entity = entityRepository.create(entityData as DeepPartial<Entity>);
+
+    if (relations) {
+      for (const field in relations) {
+        const valueIndex = String(field + 'Index');
+
+        entity = {
+          ...entity,
+          [field]: relations[field][entityData[valueIndex]]
+        };
+      }
+    }
+    const dbEntity = await entityRepository.save(entity);
+    savedEntity.push(dbEntity);
+  }
+
+  return savedEntity;
+};

packages/backend/test/delete-db.ts

@@ -18,4 +18,4 @@ const main = async () => {
   deleteFile(config.database.dbPath);
 };
 
-main().catch(err => log(err));
+main().catch((err) => log(err));

packages/backend/test/fixtures/deployments.json

@@ -1,14 +1,16 @@
 [
   {
     "projectIndex": 0,
-    "domainIndex":0,
+    "domainIndex": 0,
     "createdByIndex": 0,
-    "id":"ffhae3zq",
+    "id": "ffhae3zq",
     "status": "Ready",
     "environment": "Production",
     "isCurrent": true,
     "applicationRecordId": "qbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "xqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "main",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -16,14 +18,16 @@
   },
   {
     "projectIndex": 0,
-    "domainIndex":1,
+    "domainIndex": 1,
     "createdByIndex": 0,
-    "id":"vehagei8",
+    "id": "vehagei8",
     "status": "Ready",
     "environment": "Preview",
     "isCurrent": false,
     "applicationRecordId": "wbafyreihvzya6ovp4yfpkqnddkui2iw7thbhwq74lbqs7bhobvmfhrowoi",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "wqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "test",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -31,14 +35,16 @@
   },
   {
     "projectIndex": 0,
-    "domainIndex":2,
+    "domainIndex": 2,
     "createdByIndex": 0,
-    "id":"qmgekyte",
+    "id": "qmgekyte",
     "status": "Ready",
     "environment": "Development",
     "isCurrent": false,
     "applicationRecordId": "ebafyreihvzya6ovp4yfpkqnddkui2iw7t6bhwq74lbqs7bhobvmfhrowoi",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "kqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "test",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -48,12 +54,14 @@
     "projectIndex": 0,
     "domainIndex": null,
     "createdByIndex": 0,
-    "id":"f8wsyim6",
+    "id": "f8wsyim6",
     "status": "Ready",
     "environment": "Production",
     "isCurrent": false,
     "applicationRecordId": "rbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhw74lbqs7bhobvmfhrowoi",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "yqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "prod",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -61,14 +69,16 @@
   },
   {
     "projectIndex": 1,
-    "domainIndex":3,
+    "domainIndex": 3,
     "createdByIndex": 1,
-    "id":"eO8cckxk",
+    "id": "eO8cckxk",
     "status": "Ready",
     "environment": "Production",
     "isCurrent": true,
     "applicationRecordId": "tbafyreihvzya6ovp4yfpqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "pqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "main",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -76,14 +86,16 @@
   },
   {
     "projectIndex": 1,
-    "domainIndex":4,
+    "domainIndex": 4,
     "createdByIndex": 1,
-    "id":"yaq0t5yw",
+    "id": "yaq0t5yw",
     "status": "Ready",
     "environment": "Preview",
     "isCurrent": false,
     "applicationRecordId": "ybafyreihvzya6ovp4yfpkqnddkui2iw7t6bhwq74lbqs7bhobvmfhrowoi",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "tqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "test",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -91,14 +103,16 @@
   },
   {
     "projectIndex": 1,
-    "domainIndex":5,
+    "domainIndex": 5,
     "createdByIndex": 1,
-    "id":"hwwr6sbx",
+    "id": "hwwr6sbx",
     "status": "Ready",
     "environment": "Development",
     "isCurrent": false,
     "applicationRecordId": "ubafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvfhrowoi",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "eqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "test",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -106,14 +120,16 @@
   },
   {
     "projectIndex": 2,
-    "domainIndex":9,
+    "domainIndex": 9,
     "createdByIndex": 2,
-    "id":"ndxje48a",
+    "id": "ndxje48a",
     "status": "Ready",
     "environment": "Production",
     "isCurrent": true,
     "applicationRecordId": "ibayreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "dqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "main",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -121,14 +137,16 @@
   },
   {
     "projectIndex": 2,
-    "domainIndex":7,
+    "domainIndex": 7,
     "createdByIndex": 2,
-    "id":"gtgpgvei",
+    "id": "gtgpgvei",
     "status": "Ready",
     "environment": "Preview",
     "isCurrent": false,
     "applicationRecordId": "obafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "aqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "test",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -136,14 +154,16 @@
   },
   {
     "projectIndex": 2,
-    "domainIndex":8,
+    "domainIndex": 8,
     "createdByIndex": 2,
-    "id":"b4bpthjr",
+    "id": "b4bpthjr",
     "status": "Ready",
     "environment": "Development",
     "isCurrent": false,
     "applicationRecordId": "pbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowo",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "uqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "test",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",
@@ -153,12 +173,14 @@
     "projectIndex": 3,
     "domainIndex": 6,
     "createdByIndex": 2,
-    "id":"b4bpthjr",
+    "id": "b4bpthjr",
     "status": "Ready",
     "environment": "Production",
     "isCurrent": true,
     "applicationRecordId": "pbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowo",
     "applicationRecordData": {},
+    "applicationDeploymentRequestId": "pqbafyrehvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
+    "applicationDeploymentRequestData": {},
     "branch": "test",
     "commitHash": "d5dfd7b827226b0d09d897346d291c256e113e00",
     "commitMessage": "subscription added",

packages/backend/test/fixtures/project-members.json

@@ -2,77 +2,55 @@
   {
     "memberIndex": 1,
     "projectIndex": 0,
-    "permissions": [
-      "View"
-    ],
+    "permissions": ["View"],
     "isPending": false
   },
   {
     "memberIndex": 2,
     "projectIndex": 0,
-    "permissions": [
-      "View",
-      "Edit"
-    ],
+    "permissions": ["View", "Edit"],
     "isPending": false
   },
   {
     "memberIndex": 2,
     "projectIndex": 1,
-    "permissions": [
-      "View"
-    ],
+    "permissions": ["View"],
     "isPending": false
   },
   {
     "memberIndex": 0,
     "projectIndex": 2,
-    "permissions": [
-      "View"
-    ],
+    "permissions": ["View"],
     "isPending": false
   },
   {
     "memberIndex": 1,
     "projectIndex": 2,
-    "permissions": [
-      "View",
-      "Edit"
-    ],
+    "permissions": ["View", "Edit"],
     "isPending": false
   },
   {
     "memberIndex": 0,
     "projectIndex": 3,
-    "permissions": [
-      "View"
-    ],
+    "permissions": ["View"],
     "isPending": false
   },
   {
     "memberIndex": 2,
     "projectIndex": 3,
-    "permissions": [
-      "View",
-      "Edit"
-    ],
+    "permissions": ["View", "Edit"],
     "isPending": false
   },
   {
     "memberIndex": 1,
     "projectIndex": 4,
-    "permissions": [
-      "View"
-    ],
+    "permissions": ["View"],
     "isPending": false
   },
   {
     "memberIndex": 2,
     "projectIndex": 4,
-    "permissions": [
-      "View",
-      "Edit"
-    ],
+    "permissions": ["View", "Edit"],
     "isPending": false
   }
 ]

packages/backend/test/fixtures/projects.json

@@ -10,8 +10,6 @@
     "framework": "test",
     "webhooks": [],
     "icon": "",
-    "applicationDeploymentRequestId": "hbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "applicationDeploymentRequestData": {},
     "subDomain": "testProject.snowball.xyz"
   },
   {
@@ -25,8 +23,6 @@
     "framework": "test-2",
     "webhooks": [],
     "icon": "",
-    "applicationDeploymentRequestId": "gbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "applicationDeploymentRequestData": {},
     "subDomain": "testProject-2.snowball.xyz"
   },
   {
@@ -40,8 +36,6 @@
     "framework": "test-3",
     "webhooks": [],
     "icon": "",
-    "applicationDeploymentRequestId": "ebafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "applicationDeploymentRequestData": {},
     "subDomain": "iglootools.snowball.xyz"
   },
   {
@@ -55,8 +49,6 @@
     "framework": "test-4",
     "webhooks": [],
     "icon": "",
-    "applicationDeploymentRequestId": "qbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "applicationDeploymentRequestData": {},
     "subDomain": "iglootools-2.snowball.xyz"
   },
   {
@@ -70,8 +62,6 @@
     "framework": "test-5",
     "webhooks": [],
     "icon": "",
-    "applicationDeploymentRequestId": "xbafyreihvzya6ovp4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi",
-    "applicationDeploymentRequestData": {},
     "subDomain": "snowball-2.snowball.xyz"
   }
 ]

packages/backend/test/fixtures/users.json

@@ -1,20 +1,23 @@
 [
   {
     "id": "59f4355d-9549-4aac-9b54-eeefceeabef0",
-    "name": "Snowball",
+    "name": "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
     "email": "snowball@snowballtools.xyz",
-    "isVerified": true
+    "isVerified": true,
+    "ethAddress": "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
   },
   {
     "id": "e505b212-8da6-48b2-9614-098225dab34b",
-    "name": "Alice Anderson",
+    "name": "0xbe0eb53f46cd790cd13851d5eff43d12404d33e8",
     "email": "alice@snowballtools.xyz",
-    "isVerified": true
+    "isVerified": true,
+    "ethAddress": "0xbe0eb53f46cd790cd13851d5eff43d12404d33e8"
   },
   {
     "id": "cd892fad-9138-4aa2-a62c-414a32776ea7",
-    "name": "Bob Banner",
+    "name": "0x8315177ab297ba92a06054ce80a67ed4dbd7ed3a",
     "email": "bob@snowballtools.xyz",
-    "isVerified": true
+    "isVerified": true,
+    "ethAddress": "0x8315177ab297ba92a06054ce80a67ed4dbd7ed3a"
   }
 ]

packages/backend/test/initialize-db.ts

@@ -1,5 +1,4 @@
-import { DataSource, DeepPartial, EntityTarget, ObjectLiteral } from 'typeorm';
-import * as fs from 'fs/promises';
+import { DataSource } from 'typeorm';
 import debug from 'debug';
 import path from 'path';
 
@@ -11,7 +10,12 @@ import { EnvironmentVariable } from '../src/entity/EnvironmentVariable';
 import { Domain } from '../src/entity/Domain';
 import { ProjectMember } from '../src/entity/ProjectMember';
 import { Deployment } from '../src/entity/Deployment';
-import { getConfig } from '../src/utils';
+import {
+  checkFileExists,
+  getConfig,
+  getEntities,
+  loadAndSaveData
+} from '../src/utils';
 import { Config } from '../src/config';
 import { DEFAULT_CONFIG_FILE_PATH } from '../src/constants';
 
@@ -27,43 +31,35 @@ const DEPLOYMENT_DATA_PATH = './fixtures/deployments.json';
 const ENVIRONMENT_VARIABLE_DATA_PATH = './fixtures/environment-variables.json';
 const REDIRECTED_DOMAIN_DATA_PATH = './fixtures/redirected-domains.json';
 
-const loadAndSaveData = async <Entity extends ObjectLiteral>(entityType: EntityTarget<Entity>, dataSource: DataSource, filePath: string, relations?: any | undefined) => {
-  const entitiesData = await fs.readFile(filePath, 'utf-8');
-  const entities = JSON.parse(entitiesData);
-  const entityRepository = dataSource.getRepository(entityType);
-
-  const savedEntity:Entity[] = [];
-
-  for (const entityData of entities) {
-    let entity = entityRepository.create(entityData as DeepPartial<Entity>);
-
-    if (relations) {
-      for (const field in relations) {
-        const valueIndex = String(field + 'Index');
-
-        entity = {
-          ...entity,
-          [field]: relations[field][entityData[valueIndex]]
-        };
-      }
-    }
-    const dbEntity = await entityRepository.save(entity);
-    savedEntity.push(dbEntity);
-  }
-
-  return savedEntity;
-};
-
 const generateTestData = async (dataSource: DataSource) => {
-  const savedUsers = await loadAndSaveData(User, dataSource, path.resolve(__dirname, USER_DATA_PATH));
-  const savedOrgs = await loadAndSaveData(Organization, dataSource, path.resolve(__dirname, ORGANIZATION_DATA_PATH));
+  const userEntities = await getEntities(
+    path.resolve(__dirname, USER_DATA_PATH)
+  );
+  const savedUsers = await loadAndSaveData(User, dataSource, userEntities);
+
+  const orgEntities = await getEntities(
+    path.resolve(__dirname, ORGANIZATION_DATA_PATH)
+  );
+  const savedOrgs = await loadAndSaveData(
+    Organization,
+    dataSource,
+    orgEntities
+  );
 
   const projectRelations = {
     owner: savedUsers,
     organization: savedOrgs
   };
 
-  const savedProjects = await loadAndSaveData(Project, dataSource, path.resolve(__dirname, PROJECT_DATA_PATH), projectRelations);
+  const projectEntities = await getEntities(
+    path.resolve(__dirname, PROJECT_DATA_PATH)
+  );
+  const savedProjects = await loadAndSaveData(
+    Project,
+    dataSource,
+    projectEntities,
+    projectRelations
+  );
 
   const domainRepository = dataSource.getRepository(Domain);
 
@@ -71,14 +67,30 @@ const generateTestData = async (dataSource: DataSource) => {
     project: savedProjects
   };
 
-  const savedPrimaryDomains = await loadAndSaveData(Domain, dataSource, path.resolve(__dirname, PRIMARY_DOMAIN_DATA_PATH), domainPrimaryRelations);
+  const primaryDomainsEntities = await getEntities(
+    path.resolve(__dirname, PRIMARY_DOMAIN_DATA_PATH)
+  );
+  const savedPrimaryDomains = await loadAndSaveData(
+    Domain,
+    dataSource,
+    primaryDomainsEntities,
+    domainPrimaryRelations
+  );
 
   const domainRedirectedRelations = {
     project: savedProjects,
     redirectTo: savedPrimaryDomains
   };
 
-  await loadAndSaveData(Domain, dataSource, path.resolve(__dirname, REDIRECTED_DOMAIN_DATA_PATH), domainRedirectedRelations);
+  const redirectDomainsEntities = await getEntities(
+    path.resolve(__dirname, REDIRECTED_DOMAIN_DATA_PATH)
+  );
+  await loadAndSaveData(
+    Domain,
+    dataSource,
+    redirectDomainsEntities,
+    domainRedirectedRelations
+  );
 
   const savedDomains = await domainRepository.find();
 
@@ -87,14 +99,30 @@ const generateTestData = async (dataSource: DataSource) => {
     organization: savedOrgs
   };
 
-  await loadAndSaveData(UserOrganization, dataSource, path.resolve(__dirname, USER_ORGANIZATION_DATA_PATH), userOrganizationRelations);
+  const userOrganizationsEntities = await getEntities(
+    path.resolve(__dirname, USER_ORGANIZATION_DATA_PATH)
+  );
+  await loadAndSaveData(
+    UserOrganization,
+    dataSource,
+    userOrganizationsEntities,
+    userOrganizationRelations
+  );
 
   const projectMemberRelations = {
     member: savedUsers,
     project: savedProjects
   };
 
-  await loadAndSaveData(ProjectMember, dataSource, path.resolve(__dirname, PROJECT_MEMBER_DATA_PATH), projectMemberRelations);
+  const projectMembersEntities = await getEntities(
+    path.resolve(__dirname, PROJECT_MEMBER_DATA_PATH)
+  );
+  await loadAndSaveData(
+    ProjectMember,
+    dataSource,
+    projectMembersEntities,
+    projectMemberRelations
+  );
 
   const deploymentRelations = {
     project: savedProjects,
@@ -102,23 +130,29 @@ const generateTestData = async (dataSource: DataSource) => {
     createdBy: savedUsers
   };
 
-  await loadAndSaveData(Deployment, dataSource, path.resolve(__dirname, DEPLOYMENT_DATA_PATH), deploymentRelations);
+  const deploymentsEntities = await getEntities(
+    path.resolve(__dirname, DEPLOYMENT_DATA_PATH)
+  );
+  await loadAndSaveData(
+    Deployment,
+    dataSource,
+    deploymentsEntities,
+    deploymentRelations
+  );
 
   const environmentVariableRelations = {
     project: savedProjects
   };
 
-  await loadAndSaveData(EnvironmentVariable, dataSource, path.resolve(__dirname, ENVIRONMENT_VARIABLE_DATA_PATH), environmentVariableRelations);
-};
-
-const checkFileExists = async (filePath: string) => {
-  try {
-    await fs.access(filePath, fs.constants.F_OK);
-    return true;
-  } catch (err) {
-    log(err);
-    return false;
-  }
+  const environmentVariablesEntities = await getEntities(
+    path.resolve(__dirname, ENVIRONMENT_VARIABLE_DATA_PATH)
+  );
+  await loadAndSaveData(
+    EnvironmentVariable,
+    dataSource,
+    environmentVariablesEntities,
+    environmentVariableRelations
+  );
 };
 
 const main = async () => {

packages/backend/test/initialize-registry.ts

@@ -11,22 +11,30 @@ const log = debug('snowball:initialize-registry');
 const DENOM = 'aphoton';
 const BOND_AMOUNT = '1000000000';
 
-// TODO: Get authority names from args
-const AUTHORITY_NAMES = ['snowballtools', 'cerc-io'];
-
 async function main () {
   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, registryConfig.chainId);
 
   const bondId = await registry.getNextBondId(registryConfig.privateKey);
   log('bondId:', bondId);
-  await registry.createBond({ denom: DENOM, amount: BOND_AMOUNT }, registryConfig.privateKey, registryConfig.fee);
+  await registry.createBond(
+    { denom: DENOM, amount: BOND_AMOUNT },
+    registryConfig.privateKey,
+    registryConfig.fee
+  );
 
-  for await (const name of AUTHORITY_NAMES) {
+  for await (const name of authorityNames) {
     await registry.reserveAuthority({ name }, registryConfig.privateKey, registryConfig.fee);
     log('Reserved authority name:', name);
-    await registry.setAuthorityBond({ name, bondId }, registryConfig.privateKey, registryConfig.fee);
+    await registry.setAuthorityBond(
+      { name, bondId },
+      registryConfig.privateKey,
+      registryConfig.fee
+    );
     log(`Bond ${bondId} set for authority ${name}`);
   }
 }

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

@@ -5,16 +5,20 @@ import path from 'path';
 import { Registry } from '@cerc-io/laconic-sdk';
 
 import { Config } from '../src/config';
-import { DEFAULT_CONFIG_FILE_PATH, PROJECT_DOMAIN } from '../src/constants';
+import { DEFAULT_CONFIG_FILE_PATH } from '../src/constants';
 import { getConfig } from '../src/utils';
 import { Deployment, DeploymentStatus } from '../src/entity/Deployment';
 
 const log = debug('snowball:publish-deploy-records');
 
 async function main () {
-  const { registryConfig, database } = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
+  const { registryConfig, database, misc } = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
 
-  const registry = new Registry(registryConfig.gqlEndpoint, registryConfig.restEndpoint, registryConfig.chainId);
+  const registry = new Registry(
+    registryConfig.gqlEndpoint,
+    registryConfig.restEndpoint,
+    registryConfig.chainId
+  );
 
   const dataSource = new DataSource({
     type: 'better-sqlite3',
@@ -36,7 +40,7 @@ async function main () {
   });
 
   for await (const deployment of deployments) {
-    const url = `${deployment.project.name}-${deployment.id}.${PROJECT_DOMAIN}`;
+    const url = `${deployment.project.name}-${deployment.id}.${misc.projectDomain}`;
 
     const applicationDeploymentRecord = {
       type: 'ApplicationDeploymentRecord',
@@ -53,7 +57,7 @@ async function main () {
         so: '66fcfa49a1664d4cb4ce4f72c1c0e151'
       }),
 
-      request: deployment.project.applicationDeploymentRequestId,
+      request: deployment.applicationDeploymentRequestId,
       url
     };
 

packages/frontend/.env

@@ -1,4 +1,7 @@
-REACT_APP_GQL_SERVER_URL = 'http://localhost:8000/graphql'
+REACT_APP_SERVER_URL = 'http://localhost:8000'
 
 REACT_APP_GITHUB_CLIENT_ID =
-REACT_APP_GITHUB_TEMPLATE_REPO =
+REACT_APP_GITHUB_PWA_TEMPLATE_REPO =
+REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO =
+
+REACT_APP_WALLET_CONNECT_ID =

packages/frontend/.env.example

@@ -0,0 +1,7 @@
+REACT_APP_SERVER_URL = 'http://localhost:8000'
+
+REACT_APP_GITHUB_CLIENT_ID = 
+REACT_APP_GITHUB_PWA_TEMPLATE_REPO =
+REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO =
+
+REACT_APP_WALLET_CONNECT_ID = 

packages/frontend/.eslintrc.json

@@ -16,5 +16,10 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended"
-  ]
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }

packages/frontend/.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

packages/frontend/.vscode/settings.json

@@ -1,39 +0,0 @@
-{
-  // eslint extension options
-  "eslint.enable": true,
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-  "css.customData": [".vscode/tailwind.json"],
-  // prettier extension setting
-  "editor.formatOnSave": true,
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "editor.rulers": [80],
-  "editor.codeActionsOnSave": [
-    "source.addMissingImports",
-    "source.fixAll",
-    "source.organizeImports"
-  ],
-  // Show in vscode "Problems" tab when there are errors
-  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
-  // Use absolute import for typescript files
-  "typescript.preferences.importModuleSpecifier": "non-relative",
-  // IntelliSense for taiwind variants
-  "tailwindCSS.experimental.classRegex": [
-    ["tv\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ]
-}

packages/frontend/logo.svg

@@ -0,0 +1,7 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="500" height="500" fill="#0F86F5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M191.873 125.126C224.893 126.765 250.458 150.121 274.042 172.995C297.925 196.158 323.089 221.108 324.868 254.114C326.718 288.42 308.902 321.108 283.281 344.355C258.67 366.687 225.288 373.859 191.873 374.788C157.228 375.752 119.038 374.394 95.1648 349.588C71.6207 325.125 74.6696 287.843 75.7341 254.114C76.7518 221.865 79.2961 188.525 101.009 164.41C123.845 139.047 157.543 123.423 191.873 125.126Z" fill="#4BA4F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M229.373 125.126C262.393 126.765 287.958 150.121 311.542 172.995C335.425 196.158 360.589 221.108 362.368 254.114C364.218 288.42 346.402 321.108 320.781 344.355C296.17 366.687 262.788 373.859 229.373 374.788C194.728 375.752 156.538 374.394 132.665 349.588C109.121 325.125 112.17 287.843 113.234 254.114C114.252 221.865 116.796 188.525 138.509 164.41C161.345 139.047 195.043 123.423 229.373 125.126Z" fill="#8AC4FA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M266.873 125.126C299.893 126.765 325.458 150.121 349.042 172.995C372.925 196.158 398.089 221.108 399.868 254.114C401.718 288.42 383.902 321.108 358.281 344.355C333.67 366.687 300.288 373.859 266.873 374.788C232.228 375.752 194.038 374.394 170.165 349.588C146.621 325.125 149.67 287.843 150.734 254.114C151.752 221.865 154.296 188.525 176.009 164.41C198.845 139.047 232.543 123.423 266.873 125.126Z" fill="#CAE4FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M304.373 125.126C337.393 126.765 362.958 150.121 386.542 172.995C410.425 196.158 435.589 221.108 437.368 254.114C439.218 288.42 421.402 321.108 395.781 344.355C371.17 366.687 337.788 373.859 304.373 374.788C269.728 375.752 231.538 374.394 207.665 349.588C184.121 325.125 187.17 287.843 188.234 254.114C189.252 221.865 191.796 188.525 213.509 164.41C236.345 139.047 270.043 123.423 304.373 125.126Z" fill="white"/>
+</svg>

packages/frontend/package.json

@@ -5,8 +5,15 @@
   "dependencies": {
     "@fontsource/inter": "^5.0.16",
     "@material-tailwind/react": "^2.1.7",
-    "@radix-ui/react-checkbox": "^1.0.4",
+    "@tanstack/react-query": "^5.22.2",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -14,9 +21,13 @@
     "@types/node": "^16.18.68",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
+    "@web3modal/siwe": "^4.0.5",
+    "@web3modal/wagmi": "^4.0.5",
     "assert": "^2.1.0",
+    "axios": "^1.6.7",
+    "clsx": "^2.1.0",
     "date-fns": "^3.3.1",
-    "downshift": "^8.2.3",
+    "downshift": "^8.3.2",
     "eslint-config-react-app": "^7.0.1",
     "gql-client": "^1.0.0",
     "luxon": "^3.4.4",
@@ -33,10 +44,13 @@
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "react-timer-hook": "^3.0.7",
+    "siwe": "^2.1.4",
     "tailwind-variants": "^0.2.0",
     "typescript": "^4.9.5",
     "usehooks-ts": "^2.10.0",
     "vertical-stepper-nav": "^1.0.2",
+    "viem": "^2.7.11",
+    "wagmi": "^2.5.7",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -76,6 +90,6 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "prettier": "^3.1.0",
-    "tailwindcss": "^3.3.6"
+    "tailwindcss": "^3.4.1"
   }
 }

packages/frontend/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

packages/frontend/public/index.html

@@ -2,42 +2,34 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="snowball tools dashboard" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+    <meta name="msapplication-TileColor" content="#2d89ef" />
+    <meta name="theme-color" content="#ffffff" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Snowball</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

packages/frontend/public/logo.svg

@@ -0,0 +1 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="500" height="500" fill="#0F86F5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M191.873 125.126C224.893 126.765 250.458 150.121 274.042 172.995C297.925 196.158 323.089 221.108 324.868 254.114C326.718 288.42 308.902 321.108 283.281 344.355C258.67 366.687 225.288 373.859 191.873 374.788C157.228 375.752 119.038 374.394 95.1648 349.588C71.6207 325.125 74.6696 287.843 75.7341 254.114C76.7518 221.865 79.2961 188.525 101.009 164.41C123.845 139.047 157.543 123.423 191.873 125.126Z" fill="#4BA4F7"/><path fill-rule="evenodd" clip-rule="evenodd" d="M229.373 125.126C262.393 126.765 287.958 150.121 311.542 172.995C335.425 196.158 360.589 221.108 362.368 254.114C364.218 288.42 346.402 321.108 320.781 344.355C296.17 366.687 262.788 373.859 229.373 374.788C194.728 375.752 156.538 374.394 132.665 349.588C109.121 325.125 112.17 287.843 113.234 254.114C114.252 221.865 116.796 188.525 138.509 164.41C161.345 139.047 195.043 123.423 229.373 125.126Z" fill="#8AC4FA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M266.873 125.126C299.893 126.765 325.458 150.121 349.042 172.995C372.925 196.158 398.089 221.108 399.868 254.114C401.718 288.42 383.902 321.108 358.281 344.355C333.67 366.687 300.288 373.859 266.873 374.788C232.228 375.752 194.038 374.394 170.165 349.588C146.621 325.125 149.67 287.843 150.734 254.114C151.752 221.865 154.296 188.525 176.009 164.41C198.845 139.047 232.543 123.423 266.873 125.126Z" fill="#CAE4FD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M304.373 125.126C337.393 126.765 362.958 150.121 386.542 172.995C410.425 196.158 435.589 221.108 437.368 254.114C439.218 288.42 421.402 321.108 395.781 344.355C371.17 366.687 337.788 373.859 304.373 374.788C269.728 375.752 231.538 374.394 207.665 349.588C184.121 325.125 187.17 287.843 188.234 254.114C189.252 221.865 191.796 188.525 213.509 164.41C236.345 139.047 270.043 123.423 304.373 125.126Z" fill="white"/></svg>

packages/frontend/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Snowball Tools Dashboard",
+  "short_name": "snowball tools",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

packages/frontend/src/App.tsx

@@ -9,8 +9,8 @@ import {
   projectsRoutesWithoutSearch,
 } from './pages/org-slug/projects/routes';
 import ProjectSearchLayout from './layouts/ProjectSearch';
-import { OctokitProvider } from './context/OctokitContext';
 import Index from './pages';
+import Login from './pages/Login';
 
 const router = createBrowserRouter([
   {
@@ -44,14 +44,14 @@ const router = createBrowserRouter([
     path: '/',
     element: <Index />,
   },
+  {
+    path: '/login',
+    element: <Login />,
+  },
 ]);
 
 function App() {
-  return (
-    <OctokitProvider>
-      <RouterProvider router={router} />
-    </OctokitProvider>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;

packages/frontend/src/assets/templates.json

@@ -1,27 +0,0 @@
-[
-  {
-    "id": "1",
-    "name": "Progressive Web App (PWA)",
-    "icon": "^"
-  },
-  {
-    "id": "2",
-    "name": "Kotlin",
-    "icon": "^"
-  },
-  {
-    "id": "3",
-    "name": "React Native",
-    "icon": "^"
-  },
-  {
-    "id": "4",
-    "name": "Swift",
-    "icon": "^"
-  },
-  {
-    "id": "5",
-    "name": "Web app",
-    "icon": "^"
-  }
-]

packages/frontend/src/assets/templates.ts

@@ -0,0 +1,32 @@
+export default [
+  {
+    id: '1',
+    name: 'Progressive Web App (PWA)',
+    icon: '^',
+    repoFullName: `${process.env.REACT_APP_GITHUB_PWA_TEMPLATE_REPO}`,
+  },
+  {
+    id: '2',
+    name: 'Image Upload PWA',
+    icon: '^',
+    repoFullName: `${process.env.REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
+  },
+  {
+    id: '3',
+    name: 'Kotlin',
+    icon: '^',
+    repoFullName: '',
+  },
+  {
+    id: '4',
+    name: 'React Native',
+    icon: '^',
+    repoFullName: '',
+  },
+  {
+    id: '5',
+    name: 'Swift',
+    icon: '^',
+    repoFullName: '',
+  },
+];

packages/frontend/src/components/DatePicker.tsx

@@ -126,7 +126,8 @@ const DatePicker = ({
           crossOrigin={undefined}
         />
       </PopoverHandler>
-      <PopoverContent>
+      {/* TODO: Figure out what placeholder is for */}
+      <PopoverContent placeholder={''}>
         {mode === 'single' && (
           <DayPicker
             mode="single"
@@ -145,19 +146,23 @@ const DatePicker = ({
             />
             <HorizontalLine />
             <div className="flex justify-end">
+              {/* TODO: Figure out what placeholder is for */}
               <Button
                 size="sm"
                 className="rounded-full mr-2"
                 variant="outlined"
                 onClick={() => setIsOpen(false)}
+                placeholder={''}
               >
                 Cancel
               </Button>
+              {/* TODO: Figure out what placeholder is for */}
               <Button
                 size="sm"
                 className="rounded-full"
                 color="gray"
                 onClick={() => handleRangeSelect()}
+                placeholder={''}
               >
                 Select
               </Button>

packages/frontend/src/components/HorizontalLine.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const HorizontalLine = () => {
-  return <hr className="h-px bg-gray-300 border-0" />;
+  return <hr className="h-px bg-gray-100 border-0" />;
 };
 
 export default HorizontalLine;

packages/frontend/src/components/SearchBar.tsx

@@ -1,33 +1,23 @@
 import React, { forwardRef, RefAttributes } from 'react';
 
-import { Input, InputProps } from '@material-tailwind/react';
+import { SearchIcon } from './shared/CustomIcon';
+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 gap-2">
+    <div className="relative flex w-full">
       <Input
+        leftIcon={<SearchIcon />}
         onChange={onChange}
         value={value}
         type="search"
         placeholder={placeholder}
-        containerProps={{
-          className: 'min-w-[288px]',
-        }}
-        className="!border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
-        labelProps={{
-          className: 'before:content-none after:content-none',
-        }}
-        // TODO: Debug issue: https://github.com/creativetimofficial/material-tailwind/issues/427
-        crossOrigin={undefined}
+        appearance={'borderless'}
         {...props}
-        inputRef={ref}
       />
-      <div className="!absolute left-3 top-[13px]">
-        <i>^</i>
-      </div>
     </div>
   );
 };

packages/frontend/src/components/Sidebar.tsx

@@ -2,15 +2,26 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Link, NavLink, useNavigate, useParams } from 'react-router-dom';
 import { Organization } from 'gql-client';
 
-import { Typography, Option } from '@material-tailwind/react';
+import { Option } from '@material-tailwind/react';
+import { useDisconnect } from 'wagmi';
 
 import { useGQLClient } from '../context/GQLClientContext';
 import AsyncSelect from './shared/AsyncSelect';
+import {
+  ChevronGrabberHorizontal,
+  FolderIcon,
+  GlobeIcon,
+  LifeBuoyIcon,
+  QuestionMarkRoundIcon,
+  SettingsSlidersIcon,
+} from './shared/CustomIcon';
+import { Tabs } from 'components/shared/Tabs';
 
 const Sidebar = () => {
   const { orgSlug } = useParams();
   const navigate = useNavigate();
   const client = useGQLClient();
+  const { disconnect } = useDisconnect();
 
   const [selectedOrgSlug, setSelectedOrgSlug] = useState(orgSlug);
   const [organizations, setOrganizations] = useState<Organization[]>([]);
@@ -25,59 +36,101 @@ const Sidebar = () => {
     setSelectedOrgSlug(orgSlug);
   }, [orgSlug]);
 
+  const handleLogOut = useCallback(() => {
+    disconnect();
+    navigate('/login');
+  }, [disconnect, navigate]);
+
   return (
-    <div className="flex flex-col h-full p-4">
+    <div className="flex flex-col h-full p-4 pt-10">
       <div className="grow">
-        <div>
-          <Link to={`/${orgSlug}`}>
-            <h3 className="text-black text-2xl">Snowball</h3>
-          </Link>
-        </div>
+        <Link to={`/${orgSlug}`}>
+          <div className="flex items-center space-x-3 mb-10 ml-2">
+            <img
+              src="/logo.svg"
+              alt="Snowball Logo"
+              className="h-8 w-8 rounded-lg"
+            />
+            <span className="text-2xl font-bold text-snowball-900">
+              Snowball
+            </span>
+          </div>
+        </Link>
         <AsyncSelect
-          className="bg-white py-2"
+          containerProps={{ className: 'h-14 border-none' }}
+          labelProps={{ className: 'before:border-none after:border-none' }}
+          className="bg-white rounded-lg shadow border-none"
           value={selectedOrgSlug}
           onChange={(value) => {
             setSelectedOrgSlug(value!);
             navigate(`/${value}`);
           }}
           selected={(_, index) => (
-            <div className="flex gap-2">
-              <div>^</div>
+            <div className="flex items-center space-x-3">
+              <img
+                src="/logo.svg"
+                alt="Application Logo"
+                className="h-8 w-8 rounded-lg"
+              />
               <div>
-                <span>{organizations[index!]?.name}</span>
-                <Typography>Organization</Typography>
+                <div className="text-sm font-semibold">
+                  {organizations[index!]?.name}
+                </div>
+                <div className="text-xs text-gray-500">Organization</div>
               </div>
             </div>
           )}
+          arrow={<ChevronGrabberHorizontal className="h-4 w-4 text-gray-500" />}
         >
           {/* TODO: Show label organization and manage in option */}
           {organizations.map((org) => (
             <Option key={org.id} value={org.slug}>
-              ^ {org.name}
-              {org.slug === selectedOrgSlug && <p className="float-right">^</p>}
+              <div className="flex items-center space-x-3">
+                <img
+                  src="/logo.svg"
+                  alt="Application Logo"
+                  className="h-8 w-8 rounded-lg"
+                />
+                <div>
+                  <div className="text-sm font-semibold">{org.name}</div>
+                  <div className="text-xs text-gray-500">Organization</div>
+                </div>
+              </div>
             </Option>
           ))}
         </AsyncSelect>
-        <div>
-          <NavLink
-            to={`/${orgSlug}`}
-            className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
-          >
-            <Typography>Projects</Typography>
-          </NavLink>
-        </div>
-        <div>
-          <NavLink
-            to={`/${orgSlug}/settings`}
-            className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
-          >
-            <Typography>Settings</Typography>
-          </NavLink>
-        </div>
+        <Tabs defaultValue="Projects" orientation="vertical" className="mt-10">
+          <Tabs.List>
+            {[
+              { title: 'Projects', icon: <FolderIcon /> },
+              { title: 'Settings', icon: <SettingsSlidersIcon /> },
+            ].map(({ title, icon }, index) => (
+              <NavLink to={`/${orgSlug}/${title}`} key={index}>
+                <Tabs.Trigger icon={icon} value={title}>
+                  {title}
+                </Tabs.Trigger>
+              </NavLink>
+            ))}
+          </Tabs.List>
+        </Tabs>
       </div>
-      <div className="grow flex flex-col justify-end">
-        <div>Documentation</div>
-        <div>Support</div>
+      <div className="grow flex flex-col justify-end mb-8">
+        <Tabs defaultValue="Projects" orientation="vertical">
+          {/* TODO: use proper link buttons */}
+          <Tabs.List>
+            <Tabs.Trigger icon={<GlobeIcon />} value="">
+              <a className="cursor-pointer" onClick={handleLogOut}>
+                Log Out
+              </a>
+            </Tabs.Trigger>
+            <Tabs.Trigger icon={<QuestionMarkRoundIcon />} value="">
+              <a className="cursor-pointer">Documentation</a>
+            </Tabs.Trigger>
+            <Tabs.Trigger icon={<LifeBuoyIcon />} value="">
+              <a className="cursor-pointer">Support</a>
+            </Tabs.Trigger>
+          </Tabs.List>
+        </Tabs>
       </div>
     </div>
   );

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

@@ -21,11 +21,15 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
   return (
     <div className="bg-white border border-gray-200 rounded-lg shadow">
       <div className="flex gap-2 p-2 items-center">
-        <Avatar variant="rounded" src={project.icon || '/gray.png'} />
+        <Avatar
+          variant="rounded"
+          src={project.icon || '/gray.png'}
+          placeholder={''}
+        />
         <div className="grow">
           <Link to={`projects/${project.id}`}>
-            <Typography>{project.name}</Typography>
-            <Typography color="gray" variant="small">
+            <Typography placeholder={''}>{project.name}</Typography>
+            <Typography color="gray" variant="small" placeholder={''}>
               {project.deployments[0]?.domain?.name ??
                 'No Production Deployment'}
             </Typography>
@@ -35,25 +39,27 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
           <MenuHandler>
             <button>...</button>
           </MenuHandler>
-          <MenuList>
-            <MenuItem>^ Project settings</MenuItem>
-            <MenuItem className="text-red-500">^ Delete project</MenuItem>
+          <MenuList placeholder={''}>
+            <MenuItem placeholder={''}>^ Project settings</MenuItem>
+            <MenuItem className="text-red-500" placeholder={''}>
+              ^ Delete project
+            </MenuItem>
           </MenuList>
         </Menu>
       </div>
       <div className="border-t-2 border-solid p-4 bg-gray-50">
         {project.deployments.length > 0 ? (
           <>
-            <Typography variant="small" color="gray">
+            <Typography variant="small" color="gray" placeholder={''}>
               ^ {project.deployments[0].commitMessage}
             </Typography>
-            <Typography variant="small" color="gray">
+            <Typography variant="small" color="gray" placeholder={''}>
               {relativeTimeMs(project.deployments[0].createdAt)} on ^&nbsp;
               {project.deployments[0].branch}
             </Typography>
           </>
         ) : (
-          <Typography variant="small" color="gray">
+          <Typography variant="small" color="gray" placeholder={''}>
             No Production deployment
           </Typography>
         )}

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

@@ -71,12 +71,13 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => {
         className={`absolute w-1/2 max-h-52 -mt-1 overflow-y-auto ${
           (!inputValue || !isOpen) && 'hidden'
         }`}
+        placeholder={''}
       >
         <List {...getMenuProps()}>
           {items.length ? (
             <>
               <div className="p-3">
-                <Typography variant="small" color="gray">
+                <Typography variant="small" color="gray" placeholder={''}>
                   Suggestions
                 </Typography>
               </div>
@@ -84,19 +85,25 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => {
                 <ListItem
                   selected={highlightedIndex === index || selectedItem === item}
                   key={item.id}
+                  placeholder={''}
                   {...getItemProps({ item, index })}
                 >
-                  <ListItemPrefix>
-                    <Avatar src={item.icon || '/gray.png'} variant="rounded" />
+                  <ListItemPrefix placeholder={''}>
+                    <Avatar
+                      src={item.icon || '/gray.png'}
+                      variant="rounded"
+                      placeholder={''}
+                    />
                   </ListItemPrefix>
                   <div>
-                    <Typography variant="h6" color="blue-gray">
+                    <Typography variant="h6" color="blue-gray" placeholder={''}>
                       {item.name}
                     </Typography>
                     <Typography
                       variant="small"
                       color="gray"
                       className="font-normal"
+                      placeholder={''}
                     >
                       {item.organization.name}
                     </Typography>
@@ -106,7 +113,9 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => {
             </>
           ) : (
             <div className="p-3">
-              <Typography>^ No projects matching this name</Typography>
+              <Typography placeholder={''}>
+                ^ No projects matching this name
+              </Typography>
             </div>
           )}
         </List>

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

@@ -1,9 +1,13 @@
-import { Button } from '@material-tailwind/react';
 import React from 'react';
 import OauthPopup from 'react-oauth-popup';
 
 import { useGQLClient } from '../../../context/GQLClientContext';
-import ConnectAccountTabPanel from './ConnectAccountTabPanel';
+import { Button } from 'components/shared/Button';
+import {
+  GitIcon,
+  EllipsesIcon,
+  SnowballIcon,
+} from 'components/shared/CustomIcon';
 
 const SCOPES = 'repo user';
 const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
@@ -14,7 +18,9 @@ interface ConnectAccountInterface {
   onAuth: (token: string) => void;
 }
 
-const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
+const ConnectAccount: React.FC<ConnectAccountInterface> = ({
+  onAuth: onToken,
+}: ConnectAccountInterface) => {
   const client = useGQLClient();
 
   const handleCode = async (code: string) => {
@@ -27,17 +33,26 @@ const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
 
   // TODO: Use correct height
   return (
-    <div className="bg-gray-100 flex flex-col p-4 justify-center items-center text-center text-sm h-full rounded-2xl">
-      <div>^</div>
-      <div>
-        <p>Connect to your git account</p>
-        <p>
-          Once connected, you can import a repository from your
-          <br />
-          account or start with one of our templates.
-        </p>
+    <div className="bg-gray-100 flex flex-col p-4 gap-7 justify-center items-center text-center text-sm h-full rounded-2xl">
+      <div className="w-52 h-16 justify-center items-center gap-4 inline-flex">
+        <div className="w-16 h-16 bg-blue-100 rounded-2xl shadow-inner border border-sky-950 border-opacity-10 justify-center items-center gap-2.5 inline-flex">
+          <GitIcon />
+        </div>
+        <EllipsesIcon className="items-center gap-1.5 flex" />
+        <div className="w-16 h-16 bg-blue-400 rounded-2xl shadow-inner border border-sky-950 border-opacity-10 justify-center items-center gap-2.5 flex">
+          <SnowballIcon />
+        </div>
       </div>
-      <div className="mt-2 flex">
+      <div>
+        <div className="text-center text-slate-900 text-xl font-medium leading-7">
+          Connect to your Git account
+        </div>
+        <div className="text-center text-slate-600 text-base font-normal leading-normal">
+          Once connected, you can import a repository from your account or start
+          with one of our templates.
+        </div>
+      </div>
+      <div className="mt-2 flex gap-3">
         <OauthPopup
           url={GITHUB_OAUTH_URL}
           onCode={handleCode}
@@ -46,11 +61,15 @@ const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
           width={1000}
           height={1000}
         >
-          <Button className="rounded-full mx-2">Connect to Github</Button>
+          <Button>Connect to GitHub</Button>
         </OauthPopup>
-        <Button className="rounded-full mx-2">Connect to Gitea</Button>
+        <Button>Connect to Gitea</Button>
       </div>
-      <ConnectAccountTabPanel />
+
+      {/* TODO: Add ConnectAccountTabPanel */}
+      {/* <div className="rounded-l shadow p-2 flex-col justify-start items-start gap-2 inline-flex">
+        <ConnectAccountTabPanel />
+      </div> */}
     </div>
   );
 };

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

@@ -1,21 +1,24 @@
 import React from 'react';
 
-import { Tabs, TabsHeader, Tab } from '@material-tailwind/react';
+import { Tabs } from 'components/shared/Tabs';
 
-const ConnectAccountTabPanel = () => {
+const ConnectAccountTabPanel: React.FC = () => {
   return (
-    <Tabs className="grid bg-white h-32 p-2 m-4 rounded-md" value="import">
-      <TabsHeader className="grid grid-cols-2">
-        <Tab className="row-span-1" value="import">
-          Import a repository
-        </Tab>
-        <Tab className="row-span-2" value="template">
-          Start with a template
-        </Tab>
-      </TabsHeader>
-      {/* <TabsBody> */}
-      {/* TODO: Add content */}
-      {/* </TabsBody> */}
+    <Tabs
+      defaultValue="Connect Accounts Tab Panel"
+      orientation="horizontal"
+      className="mt-10"
+    >
+      <Tabs.List>
+        {[
+          { title: 'Import a repository' },
+          { title: 'Start with a template' },
+        ].map(({ title }, index) => (
+          <Tabs.Trigger value={title} key={index}>
+            {title}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
     </Tabs>
   );
 };

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

@@ -1,12 +1,13 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import { Button, Typography } from '@material-tailwind/react';
 
 import { DeployStep, DeployStatus } from './DeployStep';
 import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
-import ConfirmDialog from '../../shared/ConfirmDialog';
+import ConfirmDialog from 'components/shared/ConfirmDialog';
 
+const TIMEOUT_DURATION = 5000;
 const Deploy = () => {
   const [searchParams] = useSearchParams();
   const projectId = searchParams.get('projectId');
@@ -21,6 +22,14 @@ const Deploy = () => {
     navigate(`/${orgSlug}/projects/create`);
   }, []);
 
+  useEffect(() => {
+    const timerID = setTimeout(() => {
+      navigate(`/${orgSlug}/projects/create/success/${projectId}`);
+    }, TIMEOUT_DURATION);
+
+    return () => clearInterval(timerID);
+  }, []);
+
   return (
     <div>
       <div className="flex justify-between mb-6">
@@ -34,7 +43,12 @@ const Deploy = () => {
           </div>
         </div>
         <div>
-          <Button onClick={handleOpen} variant="outlined" size="sm">
+          <Button
+            onClick={handleOpen}
+            variant="outlined"
+            size="sm"
+            placeholder={''}
+          >
             ^ Cancel
           </Button>
         </div>
@@ -46,7 +60,7 @@ const Deploy = () => {
           handleConfirm={handleCancel}
           color="red"
         >
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             This will halt the deployment and you will have to start the process
             from scratch.
           </Typography>
@@ -74,14 +88,6 @@ const Deploy = () => {
         status={DeployStatus.NOT_STARTED}
         step="4"
       />
-
-      <Button
-        onClick={() => {
-          navigate(`/${orgSlug}/projects/create/success/${projectId}`);
-        }}
-      >
-        VIEW DEMO
-      </Button>
     </div>
   );
 };

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

@@ -62,7 +62,12 @@ const DeployStep = ({
         <div className="p-2 text-sm text-gray-500 h-36 overflow-y-scroll">
           {processLogs.map((log, key) => {
             return (
-              <Typography variant="small" color="gray" key={key}>
+              <Typography
+                variant="small"
+                color="gray"
+                key={key}
+                placeholder={''}
+              >
                 {log}
               </Typography>
             );
@@ -75,6 +80,7 @@ const DeployStep = ({
                 toast.success('Logs copied');
               }}
               color="blue"
+              placeholder={''}
             >
               ^ Copy log
             </Button>

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

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
+import toast from 'react-hot-toast';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Chip, IconButton } from '@material-tailwind/react';
+import { Chip, IconButton, Spinner } from '@material-tailwind/react';
 
 import { relativeTimeISO } from '../../../utils/time';
 import { GitRepositoryDetails } from '../../../types';
@@ -14,6 +15,7 @@ interface ProjectRepoCardProps {
 const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
   const client = useGQLClient();
   const navigate = useNavigate();
+  const [isLoading, setIsLoading] = React.useState(false);
 
   const { orgSlug } = useParams();
 
@@ -22,6 +24,7 @@ const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
       return;
     }
 
+    setIsLoading(true);
     const { addProject } = await client.addProject(orgSlug!, {
       name: `${repository.owner!.login}-${repository.name}`,
       prodBranch: repository.default_branch!,
@@ -30,7 +33,13 @@ const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
       template: 'webapp',
     });
 
-    navigate(`import?projectId=${addProject.id}`);
+    if (Boolean(addProject)) {
+      setIsLoading(false);
+      navigate(`import?projectId=${addProject.id}`);
+    } else {
+      setIsLoading(false);
+      toast.error('Failed to create project');
+    }
   }, [client, repository]);
 
   return (
@@ -53,9 +62,15 @@ const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
         </div>
         <p>{repository.updated_at && relativeTimeISO(repository.updated_at)}</p>
       </div>
-      <div className="hidden group-hover:block">
-        <IconButton size="sm">{'>'}</IconButton>
-      </div>
+      {isLoading ? (
+        <Spinner className="h-4 w-4" />
+      ) : (
+        <div className="hidden group-hover:block">
+          <IconButton size="sm" placeholder={''}>
+            {'>'}
+          </IconButton>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -136,11 +136,12 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
       ) : (
         <div className="mt-4 p-6 flex items-center justify-center">
           <div className="text-center">
-            <Typography>No repository found</Typography>
+            <Typography placeholder={''}>No repository found</Typography>
             <Button
               className="rounded-full mt-5"
               size="sm"
               onClick={handleResetFilters}
+              placeholder={''}
             >
               ^ Reset filters
             </Button>

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

@@ -18,11 +18,15 @@ interface TemplateCardProps {
 const CardDetails = ({ template }: { template: TemplateDetails }) => {
   return (
     <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
-      <Typography className="grow">
+      <Typography className="grow" placeholder={''}>
         {template.icon} {template.name}
       </Typography>
       <div>
-        <IconButton size="sm" className="rounded-full hidden group-hover:block">
+        <IconButton
+          size="sm"
+          className="rounded-full hidden group-hover:block"
+          placeholder={''}
+        >
           {'>'}
         </IconButton>
       </div>

packages/frontend/src/components/projects/project/ActivityCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Typography, IconButton } from '@material-tailwind/react';
+import { Typography, IconButton, Avatar } from '@material-tailwind/react';
 
 import { relativeTimeISO } from '../../../utils/time';
 import { GitCommitWithBranch } from '../../../types';
@@ -11,21 +11,31 @@ interface ActivityCardProps {
 
 const ActivityCard = ({ activity }: ActivityCardProps) => {
   return (
-    <div className="group flex hover:bg-gray-200 rounded mt-1">
-      <div className="w-4">^</div>
-
+    <div className="group flex gap-2 hover:bg-gray-200 rounded mt-1">
+      <div className="w-8">
+        <Avatar
+          src={activity.author?.avatar_url}
+          variant="rounded"
+          size="sm"
+          placeholder={''}
+        />
+      </div>
       <div className="grow">
-        <Typography>{activity.commit.author?.name}</Typography>
-        <Typography variant="small" color="gray">
+        <Typography placeholder={''}>{activity.commit.author?.name}</Typography>
+        <Typography variant="small" color="gray" placeholder={''}>
           {relativeTimeISO(activity.commit.author!.date!)} ^{' '}
           {activity.branch.name}
         </Typography>
-        <Typography variant="small" color="gray">
+        <Typography variant="small" color="gray" placeholder={''}>
           {activity.commit.message}
         </Typography>
       </div>
       <div className="mr-2 self-center hidden group-hover:block">
-        <IconButton size="sm" className="rounded-full bg-gray-600">
+        <IconButton
+          size="sm"
+          className="rounded-full bg-gray-600"
+          placeholder={''}
+        >
           {'>'}
         </IconButton>
       </div>

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

@@ -17,9 +17,9 @@ interface AssignDomainProps {
 
 const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
   return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader>Assign Domain</DialogHeader>
-      <DialogBody>
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
+      <DialogHeader placeholder={''}>Assign Domain</DialogHeader>
+      <DialogBody placeholder={''}>
         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 */}
@@ -36,12 +36,13 @@ const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
           theme={atomOneLight}
         />
       </DialogBody>
-      <DialogFooter className="flex justify-start">
+      <DialogFooter className="flex justify-start" placeholder={''}>
         <Button
           className="rounded-3xl"
           variant="gradient"
           color="blue"
           onClick={handleOpen}
+          placeholder={''}
         >
           <span>Okay</span>
         </Button>

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

@@ -16,6 +16,7 @@ import {
   Typography,
   Chip,
   ChipProps,
+  Tooltip,
 } from '@material-tailwind/react';
 
 import { relativeTimeMs } from '../../../../utils/time';
@@ -24,6 +25,7 @@ import DeploymentDialogBodyCard from './DeploymentDialogBodyCard';
 import AssignDomainDialog from './AssignDomainDialog';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
+import { formatAddress } from '../../../../utils/format';
 
 interface DeployDetailsCardProps {
   deployment: Deployment;
@@ -87,52 +89,65 @@ const DeploymentDetailsCard = ({
   };
 
   return (
-    <div className="grid grid-cols-4 gap-2 border-b border-gray-300 p-3 my-2">
-      <div className="col-span-2">
+    <div className="grid grid-cols-8 gap-2 border-b border-gray-300 p-3 my-2">
+      <div className="col-span-3">
         <div className="flex">
           {deployment.url && (
-            <Typography className=" basis-3/4">{deployment.url}</Typography>
+            <Typography className="basis-3/4" placeholder={''}>
+              {deployment.url}
+            </Typography>
           )}
-          <Chip
-            value={deployment.status}
-            color={STATUS_COLORS[deployment.status] ?? 'gray'}
-            variant="ghost"
-            icon={<i>^</i>}
-          />
         </div>
-        <Typography color="gray">
+        <Typography color="gray" placeholder={''}>
           {deployment.environment === Environment.Production
             ? `Production ${deployment.isCurrent ? '(Current)' : ''}`
             : 'Preview'}
         </Typography>
       </div>
       <div className="col-span-1">
-        <Typography color="gray">^ {deployment.branch}</Typography>
-        <Typography color="gray">
+        <Chip
+          value={deployment.status}
+          color={STATUS_COLORS[deployment.status] ?? 'gray'}
+          variant="ghost"
+          icon={<i>^</i>}
+        />
+      </div>
+      <div className="col-span-2">
+        <Typography color="gray" placeholder={''}>
+          ^ {deployment.branch}
+        </Typography>
+        <Typography color="gray" placeholder={''}>
           ^ {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
           {deployment.commitMessage}
         </Typography>
       </div>
-      <div className="col-span-1 flex items-center">
-        <Typography color="gray" className="grow">
-          ^ {relativeTimeMs(deployment.createdAt)} ^ {deployment.createdBy.name}
+      <div className="col-span-2 flex items-center">
+        <Typography color="gray" className="grow" placeholder={''}>
+          ^ {relativeTimeMs(deployment.createdAt)} ^{' '}
+          <Tooltip content={deployment.createdBy.name}>
+            {formatAddress(deployment.createdBy.name ?? '')}
+          </Tooltip>
         </Typography>
         <Menu placement="bottom-start">
           <MenuHandler>
             <button className="self-start">...</button>
           </MenuHandler>
-          <MenuList>
+          <MenuList placeholder={''}>
             <a href={deployment.url} target="_blank" rel="noreferrer">
-              <MenuItem disabled={!Boolean(deployment.url)}>^ Visit</MenuItem>
+              <MenuItem disabled={!Boolean(deployment.url)} placeholder={''}>
+                ^ Visit
+              </MenuItem>
             </a>
             <MenuItem
               onClick={() => setAssignDomainDialog(!assignDomainDialog)}
+              placeholder={''}
             >
               ^ Assign domain
             </MenuItem>
             <MenuItem
               onClick={() => setChangeToProduction(!changeToProduction)}
               disabled={!(deployment.environment !== Environment.Production)}
+              placeholder={''}
             >
               ^ Change to production
             </MenuItem>
@@ -145,6 +160,7 @@ const DeploymentDetailsCard = ({
                   deployment.isCurrent
                 )
               }
+              placeholder={''}
             >
               ^ Redeploy to production
             </MenuItem>
@@ -155,6 +171,7 @@ const DeploymentDetailsCard = ({
                 deployment.environment !== Environment.Production ||
                 !Boolean(currentDeployment)
               }
+              placeholder={''}
             >
               ^ Rollback to this version
             </MenuItem>
@@ -173,17 +190,22 @@ const DeploymentDetailsCard = ({
         }}
       >
         <div className="flex flex-col gap-2">
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             Upon confirmation, this deployment will be changed to production.
           </Typography>
           <DeploymentDialogBodyCard deployment={deployment} />
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             The new deployment will be associated with these domains:
           </Typography>
           {prodBranchDomains.length > 0 &&
             prodBranchDomains.map((value) => {
               return (
-                <Typography variant="small" color="blue" key={value.id}>
+                <Typography
+                  variant="small"
+                  color="blue"
+                  key={value.id}
+                  placeholder={''}
+                >
                   ^ {value.name}
                 </Typography>
               );
@@ -202,16 +224,16 @@ const DeploymentDetailsCard = ({
         }}
       >
         <div className="flex flex-col gap-2">
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             Upon confirmation, new deployment will be created with the same
             source code as current deployment.
           </Typography>
           <DeploymentDialogBodyCard deployment={deployment} />
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             These domains will point to your new deployment:
           </Typography>
           {deployment.domain?.name && (
-            <Typography variant="small" color="blue">
+            <Typography variant="small" color="blue" placeholder={''}>
               {deployment.domain?.name}
             </Typography>
           )}
@@ -230,7 +252,7 @@ const DeploymentDetailsCard = ({
           }}
         >
           <div className="flex flex-col gap-2">
-            <Typography variant="small">
+            <Typography variant="small" placeholder={''}>
               Upon confirmation, this deployment will replace your current
               deployment
             </Typography>
@@ -248,10 +270,10 @@ const DeploymentDetailsCard = ({
                 color: 'orange',
               }}
             />
-            <Typography variant="small">
+            <Typography variant="small" placeholder={''}>
               These domains will point to your new deployment:
             </Typography>
-            <Typography variant="small" color="blue">
+            <Typography variant="small" color="blue" placeholder={''}>
               ^ {currentDeployment.domain?.name}
             </Typography>
           </div>

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

@@ -5,6 +5,7 @@ import { Typography, Chip, Card } from '@material-tailwind/react';
 import { color } from '@material-tailwind/react/types/components/chip';
 import { relativeTimeMs } from '../../../../utils/time';
 import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
+import { formatAddress } from '../../../../utils/format';
 
 interface DeploymentDialogBodyCardProps {
   deployment: Deployment;
@@ -19,7 +20,7 @@ const DeploymentDialogBodyCard = ({
   deployment,
 }: DeploymentDialogBodyCardProps) => {
   return (
-    <Card className="p-2 shadow-none">
+    <Card className="p-2 shadow-none" placeholder={''}>
       {chip && (
         <Chip
           className={`w-fit normal-case font-normal`}
@@ -29,17 +30,18 @@ const DeploymentDialogBodyCard = ({
         />
       )}
       {deployment.url && (
-        <Typography variant="small" className="text-black">
+        <Typography variant="small" className="text-black" placeholder={''}>
           {deployment.url}
         </Typography>
       )}
-      <Typography variant="small">
+      <Typography variant="small" placeholder={''}>
         ^ {deployment.branch} ^{' '}
         {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
         {deployment.commitMessage}
       </Typography>
-      <Typography variant="small">
-        ^ {relativeTimeMs(deployment.createdAt)} ^ {deployment.createdBy.name}
+      <Typography variant="small" placeholder={''}>
+        ^ {relativeTimeMs(deployment.createdAt)} ^{' '}
+        {formatAddress(deployment.createdBy.name ?? '')}
       </Typography>
     </Card>
   );

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

@@ -44,18 +44,18 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
   }, [value]);
 
   return (
-    <div className="grid grid-cols-4 gap-2 text-sm text-gray-600">
-      <div className="col-span-2">
+    <div className="grid grid-cols-8 gap-2 text-sm text-gray-600">
+      <div className="col-span-4">
         <SearchBar
           placeholder="Search branches"
           value={searchedBranch}
           onChange={(event) => setSearchedBranch(event.target.value)}
         />
       </div>
-      <div className="col-span-1">
+      <div className="col-span-2">
         <DatePicker mode="range" selected={dateRange} onSelect={setDateRange} />
       </div>
-      <div className="col-span-1 relative">
+      <div className="col-span-2 relative">
         <Select
           value={selectedStatus}
           onChange={(value) => setSelectedStatus(value as StatusOptions)}
@@ -77,6 +77,7 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
               onClick={() => setSelectedStatus(StatusOptions.ALL_STATUS)}
               className="rounded-full"
               size="sm"
+              placeholder={''}
             >
               X
             </IconButton>

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

@@ -21,7 +21,9 @@ const AddEnvironmentVariableRow = ({
   return (
     <div className="flex gap-1 p-2">
       <div>
-        <Typography variant="small">Key</Typography>
+        <Typography variant="small" placeholder={''}>
+          Key
+        </Typography>
         <Input
           crossOrigin={undefined}
           {...register(`variables.${index}.key`, {
@@ -30,7 +32,9 @@ const AddEnvironmentVariableRow = ({
         />
       </div>
       <div>
-        <Typography variant="small">Value</Typography>
+        <Typography variant="small" placeholder={''}>
+          Value
+        </Typography>
         <Input
           crossOrigin={undefined}
           {...register(`variables.${index}.value`, {
@@ -43,6 +47,7 @@ const AddEnvironmentVariableRow = ({
           size="sm"
           onClick={() => onDelete()}
           disabled={isDeleteDisabled}
+          placeholder={''}
         >
           {'>'}
         </IconButton>

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

@@ -61,23 +61,26 @@ const AddMemberDialog = ({
   }, []);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between">
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
+      <DialogHeader className="flex justify-between" placeholder={''}>
         <div>Add member</div>
         <Button
           variant="outlined"
           onClick={handleOpen}
           className="mr-1 rounded-3xl"
+          placeholder={''}
         >
           X
         </Button>
       </DialogHeader>
       <form onSubmit={handleSubmit(submitHandler)}>
-        <DialogBody className="flex flex-col gap-2 p-4">
-          <Typography variant="small">
+        <DialogBody className="flex flex-col gap-2 p-4" placeholder={''}>
+          <Typography variant="small" placeholder={''}>
             We will send an invitation link to this email address.
           </Typography>
-          <Typography variant="small">Email address</Typography>
+          <Typography variant="small" placeholder={''}>
+            Email address
+          </Typography>
           <Input
             type="email"
             crossOrigin={undefined}
@@ -85,8 +88,10 @@ const AddMemberDialog = ({
               required: 'email field cannot be empty',
             })}
           />
-          <Typography variant="small">Permissions</Typography>
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
+            Permissions
+          </Typography>
+          <Typography variant="small" placeholder={''}>
             You can change this later if required.
           </Typography>
           <Checkbox
@@ -102,8 +107,13 @@ const AddMemberDialog = ({
             color="blue"
           />
         </DialogBody>
-        <DialogFooter className="flex justify-start">
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
+        <DialogFooter className="flex justify-start" placeholder={''}>
+          <Button
+            variant="outlined"
+            onClick={handleOpen}
+            className="mr-1"
+            placeholder={''}
+          >
             Cancel
           </Button>
           <Button
@@ -111,6 +121,7 @@ const AddMemberDialog = ({
             color="blue"
             type="submit"
             disabled={!isValid}
+            placeholder={''}
           >
             Send invite
           </Button>

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

@@ -53,20 +53,21 @@ const DeleteProjectDialog = ({
   }, [client, project, handleOpen]);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between">
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
+      <DialogHeader className="flex justify-between" placeholder={''}>
         <div>Delete project?</div>
         <Button
           variant="outlined"
           onClick={handleOpen}
           className="mr-1 rounded-3xl"
+          placeholder={''}
         >
           X
         </Button>
       </DialogHeader>
       <form onSubmit={handleSubmit(deleteProjectHandler)}>
-        <DialogBody className="flex flex-col gap-2">
-          <Typography variant="paragraph">
+        <DialogBody className="flex flex-col gap-2" placeholder={''}>
+          <Typography variant="paragraph" placeholder={''}>
             Deleting your project is irreversible. Enter your project’s
             name&nbsp;
             <span className="bg-blue-100 text-blue-700">({project.name})</span>
@@ -80,12 +81,17 @@ const DeleteProjectDialog = ({
               validate: (value) => value === project.name,
             })}
           />
-          <Typography variant="small" color="red">
+          <Typography variant="small" color="red" placeholder={''}>
             ^ Deleting your project is irreversible.
           </Typography>
         </DialogBody>
-        <DialogFooter className="flex justify-start">
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
+        <DialogFooter className="flex justify-start" placeholder={''}>
+          <Button
+            variant="outlined"
+            onClick={handleOpen}
+            className="mr-1"
+            placeholder={''}
+          >
             Cancel
           </Button>
           <Button
@@ -93,6 +99,7 @@ const DeleteProjectDialog = ({
             color="red"
             type="submit"
             disabled={!isValid}
+            placeholder={''}
           >
             Yes, Delete project
           </Button>

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

@@ -29,11 +29,11 @@ const DisplayEnvironmentVariables = ({
       </div>
       <Collapse open={openCollapse}>
         {variables.length === 0 ? (
-          <Card className="bg-gray-300 flex items-center p-4">
-            <Typography variant="small" className="text-black">
+          <Card className="bg-gray-300 flex items-center p-4" placeholder={''}>
+            <Typography variant="small" className="text-black" placeholder={''}>
               No environment variables added yet.
             </Typography>
-            <Typography variant="small">
+            <Typography variant="small" placeholder={''}>
               Once you add them, they’ll show up here.
             </Typography>
           </Card>

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

@@ -68,7 +68,7 @@ const DomainCard = ({
     <>
       <div className="flex justify-between py-3">
         <div className="flex justify-start gap-1">
-          <Typography variant="h6">
+          <Typography variant="h6" placeholder={''}>
             <i>^</i> {domain.name}
           </Typography>
           <Chip
@@ -97,18 +97,20 @@ const DomainCard = ({
             <MenuHandler>
               <button className="border-2 rounded-full w-8 h-8">...</button>
             </MenuHandler>
-            <MenuList>
+            <MenuList placeholder={''}>
               <MenuItem
                 className="text-black"
                 onClick={() => {
                   setEditDialogOpen((preVal) => !preVal);
                 }}
+                placeholder={''}
               >
                 ^ Edit domain
               </MenuItem>
               <MenuItem
                 className="text-red-500"
                 onClick={() => setDeleteDialogOpen((preVal) => !preVal)}
+                placeholder={''}
               >
                 ^ Delete domain
               </MenuItem>
@@ -127,7 +129,7 @@ const DomainCard = ({
           }}
           color="red"
         >
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             Once deleted, the project{' '}
             <span className="bg-blue-100 rounded-sm p-0.5 text-blue-700">
               {project.name}
@@ -140,15 +142,21 @@ const DomainCard = ({
         </ConfirmDialog>
       </div>
 
-      <Typography variant="small">Production</Typography>
+      <Typography variant="small" placeholder={''}>
+        Production
+      </Typography>
       {domain.status === DomainStatus.Pending && (
-        <Card className="bg-gray-200 p-4 text-sm">
+        <Card className="bg-gray-200 p-4 text-sm" placeholder={''}>
           {refreshStatus === RefreshStatus.IDLE ? (
-            <Typography variant="small">
+            <Typography variant="small" placeholder={''}>
               ^ Add these records to your domain and refresh to check
             </Typography>
           ) : refreshStatus === RefreshStatus.CHECKING ? (
-            <Typography variant="small" className="text-blue-500">
+            <Typography
+              variant="small"
+              className="text-blue-500"
+              placeholder={''}
+            >
               ^ Checking records for {domain.name}
             </Typography>
           ) : (

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

@@ -122,27 +122,32 @@ const EditDomainDialog = ({
   }, [domain]);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between">
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
+      <DialogHeader className="flex justify-between" placeholder={''}>
         <div>Edit domain</div>
         <Button
           variant="outlined"
           onClick={handleOpen}
           className="mr-1 rounded-3xl"
+          placeholder={''}
         >
           X
         </Button>
       </DialogHeader>
       <form onSubmit={handleSubmit(updateDomainHandler)}>
-        <DialogBody className="flex flex-col gap-2 p-4">
-          <Typography variant="small">Domain name</Typography>
+        <DialogBody className="flex flex-col gap-2 p-4" placeholder={''}>
+          <Typography variant="small" placeholder={''}>
+            Domain name
+          </Typography>
           <Input crossOrigin={undefined} {...register('name')} />
-          <Typography variant="small">Redirect to</Typography>
+          <Typography variant="small" placeholder={''}>
+            Redirect to
+          </Typography>
           <Controller
             name="redirectedTo"
             control={control}
             render={({ field }) => (
-              <Select {...field} disabled={isDisableDropdown}>
+              <Select {...field} disabled={isDisableDropdown} placeholder={''}>
                 {redirectOptions.map((option, key) => (
                   <Option key={key} value={option}>
                     ^ {option}
@@ -154,14 +159,16 @@ const EditDomainDialog = ({
           {isDisableDropdown && (
             <div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg">
               <div>^</div>
-              <Typography variant="small">
+              <Typography variant="small" placeholder={''}>
                 Domain “{domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
                 redirects to this domain so you can not redirect this doman
                 further.
               </Typography>
             </div>
           )}
-          <Typography variant="small">Git branch</Typography>
+          <Typography variant="small" placeholder={''}>
+            Git branch
+          </Typography>
           <Input
             crossOrigin={undefined}
             {...register('branch', {
@@ -174,13 +181,22 @@ const EditDomainDialog = ({
             }
           />
           {!isValid && (
-            <Typography variant="small" className="text-red-500">
+            <Typography
+              variant="small"
+              className="text-red-500"
+              placeholder={''}
+            >
               We couldn&apos;t find this branch in the connected Git repository.
             </Typography>
           )}
         </DialogBody>
-        <DialogFooter className="flex justify-start">
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
+        <DialogFooter className="flex justify-start" placeholder={''}>
+          <Button
+            variant="outlined"
+            onClick={handleOpen}
+            className="mr-1"
+            placeholder={''}
+          >
             Cancel
           </Button>
           <Button
@@ -188,6 +204,7 @@ const EditDomainDialog = ({
             color="blue"
             type="submit"
             disabled={!isDirty}
+            placeholder={''}
           >
             Save changes
           </Button>

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

@@ -84,7 +84,9 @@ const EditEnvironmentVariableRow = ({
     <>
       <div className="flex gap-1 p-2">
         <div>
-          <Typography variant="small">Key</Typography>
+          <Typography variant="small" placeholder={''}>
+            Key
+          </Typography>
           <Input
             crossOrigin={undefined}
             disabled={!edit}
@@ -92,7 +94,9 @@ const EditEnvironmentVariableRow = ({
           />
         </div>
         <div>
-          <Typography variant="small">Value</Typography>
+          <Typography variant="small" placeholder={''}>
+            Value
+          </Typography>
           <Input
             crossOrigin={undefined}
             disabled={!edit}
@@ -114,6 +118,7 @@ const EditEnvironmentVariableRow = ({
               <IconButton
                 onClick={handleSubmit(updateEnvironmentVariableHandler)}
                 size="sm"
+                placeholder={''}
               >
                 {'S'}
               </IconButton>
@@ -125,6 +130,7 @@ const EditEnvironmentVariableRow = ({
                   reset();
                   setEdit((preVal) => !preVal);
                 }}
+                placeholder={''}
               >
                 {'C'}
               </IconButton>
@@ -138,6 +144,7 @@ const EditEnvironmentVariableRow = ({
                 onClick={() => {
                   setEdit((preVal) => !preVal);
                 }}
+                placeholder={''}
               >
                 {'E'}
               </IconButton>
@@ -146,6 +153,7 @@ const EditEnvironmentVariableRow = ({
               <IconButton
                 size="sm"
                 onClick={() => setDeleteDialogOpen((preVal) => !preVal)}
+                placeholder={''}
               >
                 {'D'}
               </IconButton>
@@ -162,7 +170,7 @@ const EditEnvironmentVariableRow = ({
         handleConfirm={removeEnvironmentVariableHandler}
         color="red"
       >
-        <Typography variant="small">
+        <Typography variant="small" placeholder={''}>
           Are you sure you want to delete the variable&nbsp;
           <span className="bg-blue-100">{variable.key}</span>?
         </Typography>

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

@@ -7,9 +7,11 @@ import {
   Option,
   Chip,
   IconButton,
+  Tooltip,
 } from '@material-tailwind/react';
 
 import ConfirmDialog from '../../../shared/ConfirmDialog';
+import { formatAddress } from '../../../../utils/format';
 
 const PERMISSION_OPTIONS = [
   {
@@ -48,6 +50,7 @@ const MemberCard = ({
   onRemoveProjectMember,
   onUpdateProjectMember,
 }: MemberCardProps) => {
+  const [ethAddress, emailDomain] = member.email.split('@');
   const [selectedPermission, setSelectedPermission] = useState(
     permissions.join('+'),
   );
@@ -79,8 +82,16 @@ const MemberCard = ({
     >
       <div>^</div>
       <div className="basis-1/2">
-        {member.name && <Typography variant="small">{member.name}</Typography>}
-        <Typography variant="small">{member.email}</Typography>
+        {member.name && (
+          <Tooltip content={member.name}>
+            {formatAddress(member.name ?? '')}
+          </Tooltip>
+        )}
+        <Tooltip content={member.email}>
+          <p>
+            {formatAddress(ethAddress)}@{emailDomain}
+          </p>
+        </Tooltip>
       </div>
       <div className="basis-1/2">
         {!isPending ? (
@@ -93,6 +104,7 @@ const MemberCard = ({
             selected={(_, index) => (
               <span>{DROPDOWN_OPTIONS[index!]?.label}</span>
             )}
+            placeholder={''}
           >
             {DROPDOWN_OPTIONS.map((permission, key) => (
               <Option key={key} value={permission.value}>
@@ -121,6 +133,7 @@ const MemberCard = ({
                 onClick={() => {
                   setRemoveMemberDialogOpen((prevVal) => !prevVal);
                 }}
+                placeholder={''}
               >
                 D
               </IconButton>
@@ -141,9 +154,10 @@ const MemberCard = ({
         }}
         color="red"
       >
-        <Typography variant="small">
-          Once removed, {member.name} ({member.email}) will not be able to
-          access this project.
+        <Typography variant="small" placeholder={''}>
+          Once removed, {formatAddress(member.name ?? '')} (
+          {formatAddress(ethAddress)}@{emailDomain}) will not be able to access
+          this project.
         </Typography>
       </ConfirmDialog>
     </div>

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

@@ -17,14 +17,19 @@ const RepoConnectedSection = ({
     <div className="flex gap-4">
       <div>^</div>
       <div className="grow">
-        <Typography variant="small">{linkedRepo.full_name}</Typography>
-        <Typography variant="small">Connected just now</Typography>
+        <Typography variant="small" placeholder={''}>
+          {linkedRepo.full_name}
+        </Typography>
+        <Typography variant="small" placeholder={''}>
+          Connected just now
+        </Typography>
       </div>
       <div>
         <Button
           onClick={() => setDisconnectRepoDialogOpen(true)}
           variant="outlined"
           size="sm"
+          placeholder={''}
         >
           ^ Disconnect
         </Button>
@@ -39,7 +44,7 @@ const RepoConnectedSection = ({
         }}
         color="red"
       >
-        <Typography variant="small">
+        <Typography variant="small" placeholder={''}>
           Any data tied to your Git project may become misconfigured. Are you
           sure you want to continue?
         </Typography>

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

@@ -54,14 +54,18 @@ const SetupDomain = () => {
       className="flex flex-col gap-6 w-full"
     >
       <div>
-        <Typography variant="h5">Setup domain name</Typography>
-        <Typography variant="small">
+        <Typography variant="h5" placeholder={''}>
+          Setup domain name
+        </Typography>
+        <Typography variant="small" placeholder={''}>
           Add your domain and setup redirects
         </Typography>
       </div>
 
       <div className="w-auto">
-        <Typography variant="small">Domain name</Typography>
+        <Typography variant="small" placeholder={''}>
+          Domain name
+        </Typography>
         <Input
           type="text"
           variant="outlined"
@@ -76,7 +80,7 @@ const SetupDomain = () => {
 
       {isValid && (
         <div>
-          <Typography>Primary domain</Typography>
+          <Typography placeholder={''}>Primary domain</Typography>
           <div className="flex flex-col gap-3">
             <Radio
               label={domainStr}
@@ -108,6 +112,7 @@ const SetupDomain = () => {
         className="w-fit"
         color={isValid ? 'blue' : 'gray'}
         type="submit"
+        placeholder={''}
       >
         <i>^</i> Next
       </Button>

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

@@ -23,6 +23,7 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
             navigator.clipboard.writeText(webhookUrl);
             toast.success('Copied to clipboard');
           }}
+          placeholder={''}
         >
           C
         </Button>
@@ -32,6 +33,7 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
           onClick={() => {
             setDeleteDialogOpen(true);
           }}
+          placeholder={''}
         >
           X
         </Button>
@@ -48,7 +50,7 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
         }}
         color="red"
       >
-        <Typography variant="small">
+        <Typography variant="small" placeholder={''}>
           Are you sure you want to delete the variable{' '}
           <span className="bg-blue-100 p-0.5 rounded-sm">{webhookUrl}</span>?
         </Typography>

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

@@ -9,7 +9,7 @@ const AsyncSelect = React.forwardRef((props: SelectProps, ref: any) => {
 
   useEffect(() => setKey((preVal) => preVal + 1), [props]);
 
-  return <Select key={key} ref={ref} {...props} />;
+  return <Select key={key} ref={ref} {...props} placeholder={''} />;
 });
 
 AsyncSelect.displayName = 'AsyncSelect';

packages/frontend/src/components/shared/Button/Button.theme.ts

@@ -62,7 +62,7 @@ export const buttonTheme = tv(
           'text-elements-on-tertiary',
           'border',
           'border-border-interactive/10',
-          'bg-transparent',
+          'bg-controls-tertiary',
           'hover:bg-controls-tertiary-hovered',
           'hover:border-border-interactive-hovered',
           'hover:border-border-interactive-hovered/[0.14]',
@@ -118,6 +118,29 @@ export const buttonTheme = tv(
           'disabled:border-transparent',
           'disabled:shadow-none',
         ],
+        link: [
+          'p-0',
+          'gap-1.5',
+          'text-elements-link',
+          'rounded',
+          'focus-ring',
+          'hover:underline',
+          'hover:text-elements-link-hovered',
+          'disabled:text-controls-disabled',
+          'disabled:hover:no-underline',
+        ],
+        'link-emphasized': [
+          'p-0',
+          'gap-1.5',
+          'text-elements-high-em',
+          'rounded',
+          'underline',
+          'focus-ring',
+          'hover:text-elements-link-hovered',
+          'disabled:text-controls-disabled',
+          'disabled:hover:no-underline',
+          'dark:text-elements-on-high-contrast',
+        ],
         unstyled: [],
       },
     },

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

@@ -9,7 +9,7 @@ import { cloneIcon } from 'utils/cloneIcon';
 /**
  * Represents the properties of a base button component.
  */
-interface ButtonBaseProps {
+export interface ButtonBaseProps {
   /**
    * The optional left icon element for a component.
    * @type {ReactNode}
@@ -98,19 +98,29 @@ const Button = forwardRef<
               href,
               ...baseLinkProps,
             };
-            return <a {...externalLinkProps}>{_children}</a>;
+            return (
+              // @ts-expect-error - ref
+              <a ref={ref} {...externalLinkProps}>
+                {_children}
+              </a>
+            );
           }
 
           // Internal link
           return (
-            <Link {...baseLinkProps} to={href}>
+            // @ts-expect-error - ref
+            <Link ref={ref} {...baseLinkProps} to={href}>
               {_children}
             </Link>
           );
         } else {
           const { ...buttonProps } = _props;
-          // @ts-expect-error - as prop is not a valid prop for button elements
-          return <button {...buttonProps}>{_children}</button>;
+          return (
+            // @ts-expect-error - as prop is not a valid prop for button elements
+            <button ref={ref} {...buttonProps}>
+              {_children}
+            </button>
+          );
         }
       },
       [],
@@ -161,8 +171,6 @@ const Button = forwardRef<
     return (
       <Component
         {...props}
-        // @ts-expect-error - ref is not a valid prop for button elements
-        ref={ref}
         className={buttonTheme({ ...styleProps, class: className })}
       >
         {cloneIcon(leftIcon, { ...iconSize })}

packages/frontend/src/components/shared/Calendar/Calendar.theme.ts

@@ -5,7 +5,7 @@ export const calendarTheme = tv({
     wrapper: [
       'max-w-[352px]',
       'bg-surface-floating',
-      'shadow-calendar',
+      'shadow-dropdown',
       'rounded-xl',
     ],
     calendar: ['flex', 'flex-col', 'py-2', 'px-2', 'gap-2'],

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

@@ -9,7 +9,6 @@ import {
   Calendar as ReactCalendar,
   CalendarProps as ReactCalendarProps,
 } from 'react-calendar';
-import { Value } from 'react-calendar/dist/cjs/shared/types';
 import { CalendarTheme, calendarTheme } from './Calendar.theme';
 import { Button } from 'components/shared/Button';
 import {
@@ -21,6 +20,8 @@ import {
 import './Calendar.css';
 import { format } from 'date-fns';
 
+type ValuePiece = Date | null;
+export type Value = ValuePiece | [ValuePiece, ValuePiece];
 const CALENDAR_VIEW = ['month', 'year', 'decade'] as const;
 export type CalendarView = (typeof CALENDAR_VIEW)[number];
 

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

@@ -30,23 +30,31 @@ const ConfirmDialog = ({
   color,
 }: ConfirmDialogProp) => {
   return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between">
-        <Typography variant="h6">{dialogTitle} </Typography>
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
+      <DialogHeader className="flex justify-between" placeholder={''}>
+        <Typography variant="h6" placeholder={''}>
+          {dialogTitle}{' '}
+        </Typography>
         <Button
           variant="outlined"
           onClick={handleOpen}
           className=" rounded-full"
+          placeholder={''}
         >
           X
         </Button>
       </DialogHeader>
-      <DialogBody>{children}</DialogBody>
-      <DialogFooter className="flex justify-start gap-2">
-        <Button variant="outlined" onClick={handleOpen}>
+      <DialogBody placeholder={''}>{children}</DialogBody>
+      <DialogFooter className="flex justify-start gap-2" placeholder={''}>
+        <Button variant="outlined" onClick={handleOpen} placeholder={''}>
           Cancel
         </Button>
-        <Button variant="gradient" color={color} onClick={handleConfirm}>
+        <Button
+          variant="gradient"
+          color={color}
+          onClick={handleConfirm}
+          placeholder={''}
+        >
           {confirmButtonTitle}
         </Button>
       </DialogFooter>

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const CalendarIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="18"
+      height="19"
+      viewBox="0 0 18 19"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5 0C5.55228 0 6 0.447715 6 1V2H12V1C12 0.447715 12.4477 0 13 0C13.5523 0 14 0.447715 14 1V2H16C17.1046 2 18 2.89543 18 4V17C18 18.1046 17.1046 19 16 19H2C0.89543 19 0 18.1046 0 17V4C0 2.89543 0.895431 2 2 2H4V1C4 0.447715 4.44772 0 5 0ZM2 9V17H16V9H2Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const CheckRadioIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5ZM7.93079 12.3663L12.3055 7.01944L11.1446 6.06958L7.81944 10.1336L6.37511 8.68932L5.31445 9.74998L7.93079 12.3663Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const CheckRoundFilledIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ChevronDownIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M20 9L13.4142 15.5858C12.6332 16.3668 11.3669 16.3668 10.5858 15.5858L4 9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </CustomIcon>
+  );
+};