fix: contrast with new elements

Reviewed-on: #12

.gitea/workflows/deploy-frontend.yaml

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

build-webapp.sh

@@ -14,12 +14,13 @@ VITE_SERVER_URL = 'LACONIC_HOSTED_CONFIG_server_url'
 VITE_GITHUB_CLIENT_ID = 'LACONIC_HOSTED_CONFIG_github_clientid'
 VITE_GITHUB_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_pwa_templaterepo'
 VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo'
-VITE_GITHUB_NEXT_APP_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_next_app_templaterepo'
-VITE_WALLET_IFRAME_URL = 'LACONIC_HOSTED_CONFIG_wallet_iframe_url'
+VITE_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_wallet_connect_id'
+VITE_LACONICD_CHAIN_ID = 'LACONIC_HOSTED_CONFIG_laconicd_chain_id'
 VITE_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'
 VITE_BUGSNAG_API_KEY = 'LACONIC_HOSTED_CONFIG_bugsnag_api_key'
 VITE_PASSKEY_WALLET_RPID = 'LACONIC_HOSTED_CONFIG_passkey_wallet_rpid'
 VITE_TURNKEY_API_BASE_URL = 'LACONIC_HOSTED_CONFIG_turnkey_api_base_url'
+VITE_TURNKEY_ORGANIZATION_ID = 'LACONIC_HOSTED_CONFIG_turnkey_organization_id'
 EOF
 
 yarn || exit 1

package.json

@@ -14,6 +14,5 @@
     "prepare": "husky install",
     "build": "lerna run build --stream",
     "lint": "lerna run lint --stream"
-  },
-  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
-}
+  }
+}

packages/backend/package.json

@@ -27,7 +27,6 @@
     "nanoid": "3",
     "nanoid-dictionary": "^5.0.0-beta.1",
     "octokit": "^3.1.2",
-    "openpgp": "^6.0.1",
     "reflect-metadata": "^0.2.1",
     "semver": "^7.6.0",
     "toml": "^3.0.0",

packages/backend/src/database.ts

@@ -5,7 +5,7 @@ import {
   FindOneOptions,
   FindOptionsWhere,
   IsNull,
-  Not,
+  Not
 } from 'typeorm';
 import path from 'path';
 import debug from 'debug';
@@ -16,15 +16,14 @@ import { lowercase, numbers } from 'nanoid-dictionary';
 import { DatabaseConfig } from './config';
 import { User } from './entity/User';
 import { Organization } from './entity/Organization';
-import { AuctionStatus, Project } from './entity/Project';
-import { Deployment, DeploymentStatus } from './entity/Deployment';
+import { Project } from './entity/Project';
+import { Deployment } from './entity/Deployment';
 import { ProjectMember } from './entity/ProjectMember';
 import { EnvironmentVariable } from './entity/EnvironmentVariable';
 import { Domain } from './entity/Domain';
 import { getEntities, loadAndSaveData } from './utils';
 import { UserOrganization } from './entity/UserOrganization';
 import { Deployer } from './entity/Deployer';
-import { DNSRecordAttributes } from './types';
 
 const ORGANIZATION_DATA_PATH = '../test/fixtures/organizations.json';
 
@@ -42,7 +41,7 @@ export class Database {
       database: dbPath,
       entities: [path.join(__dirname, '/entity/*')],
       synchronize: true,
-      logging: false,
+      logging: false
     });
   }
 
@@ -50,28 +49,12 @@ export class Database {
     await this.dataSource.initialize();
     log('database initialized');
 
-    let organizations = await this.getOrganizations({});
+    const organizations = await this.getOrganizations({});
 
     // Load an organization if none exist
     if (!organizations.length) {
-      const orgEntities = await getEntities(
-        path.resolve(__dirname, ORGANIZATION_DATA_PATH),
-      );
-      organizations = await loadAndSaveData(Organization, this.dataSource, [
-        orgEntities[0],
-      ]);
-    }
-
-    // Hotfix for updating old DB data
-    if (organizations[0].slug === 'snowball-tools-1') {
-      const [orgEntity] = await getEntities(
-        path.resolve(__dirname, ORGANIZATION_DATA_PATH),
-      );
-
-      await this.updateOrganization(organizations[0].id, {
-        slug: orgEntity.slug as string,
-        name: orgEntity.name as string,
-      });
+      const orgEntities = await getEntities(path.resolve(__dirname, ORGANIZATION_DATA_PATH));
+      await loadAndSaveData(Organization, this.dataSource, [orgEntities[0]]);
     }
   }
 
@@ -98,7 +81,7 @@ export class Database {
   }
 
   async getOrganizations(
-    options: FindManyOptions<Organization>,
+    options: FindManyOptions<Organization>
   ): Promise<Organization[]> {
     const organizationRepository = this.dataSource.getRepository(Organization);
     const organizations = await organizationRepository.find(options);
@@ -107,7 +90,7 @@ export class Database {
   }
 
   async getOrganization(
-    options: FindOneOptions<Organization>,
+    options: FindOneOptions<Organization>
   ): Promise<Organization | null> {
     const organizationRepository = this.dataSource.getRepository(Organization);
     const organization = await organizationRepository.findOne(options);
@@ -122,39 +105,22 @@ export class Database {
       where: {
         userOrganizations: {
           member: {
-            id: userId,
-          },
-        },
-      },
+            id: userId
+          }
+        }
+      }
     });
 
     return userOrgs;
   }
 
-  async addUserOrganization(
-    data: DeepPartial<UserOrganization>,
-  ): Promise<UserOrganization> {
-    const userOrganizationRepository =
-      this.dataSource.getRepository(UserOrganization);
+  async addUserOrganization(data: DeepPartial<UserOrganization>): Promise<UserOrganization> {
+    const userOrganizationRepository = this.dataSource.getRepository(UserOrganization);
     const newUserOrganization = await userOrganizationRepository.save(data);
 
     return newUserOrganization;
   }
 
-  async updateOrganization(
-    organizationId: string,
-    data: DeepPartial<Organization>,
-  ): Promise<boolean> {
-    const organizationRepository = this.dataSource.getRepository(Organization);
-    const updateResult = await organizationRepository.update(
-      { id: organizationId },
-      data,
-    );
-    assert(updateResult.affected);
-
-    return updateResult.affected > 0;
-  }
-
   async getProjects(options: FindManyOptions<Project>): Promise<Project[]> {
     const projectRepository = this.dataSource.getRepository(Project);
     const projects = await projectRepository.find(options);
@@ -170,15 +136,16 @@ export class Database {
       .leftJoinAndSelect(
         'project.deployments',
         'deployments',
-        'deployments.isCurrent = true AND deployments.isCanonical = true',
+        'deployments.isCurrent = true'
       )
       .leftJoinAndSelect('deployments.createdBy', 'user')
+      .leftJoinAndSelect('deployments.domain', 'domain')
       .leftJoinAndSelect('deployments.deployer', 'deployer')
       .leftJoinAndSelect('project.owner', 'owner')
       .leftJoinAndSelect('project.deployers', 'deployers')
       .leftJoinAndSelect('project.organization', 'organization')
       .where('project.id = :projectId', {
-        projectId,
+        projectId
       })
       .getOne();
 
@@ -186,28 +153,26 @@ export class Database {
   }
 
   async allProjectsWithoutDeployments(): Promise<Project[]> {
-    // Fetch all projects with auction not completed and wihout any deployments
     const allProjects = await this.getProjects({
       where: {
         auctionId: Not(IsNull()),
-        auctionStatus: Not(AuctionStatus.Completed),
       },
       relations: ['deployments'],
       withDeleted: true,
     });
 
-    const activeProjectsWithoutDeployments = allProjects.filter((project) => {
+    const projects = allProjects.filter(project => {
       if (project.deletedAt !== null) return false;
 
       return project.deployments.length === 0;
     });
 
-    return activeProjectsWithoutDeployments;
+    return projects;
   }
 
   async getProjectsInOrganization(
     userId: string,
-    organizationSlug: string,
+    organizationSlug: string
   ): Promise<Project[]> {
     const projectRepository = this.dataSource.getRepository(Project);
 
@@ -216,16 +181,17 @@ export class Database {
       .leftJoinAndSelect(
         'project.deployments',
         'deployments',
-        'deployments.isCurrent = true AND deployments.isCanonical = true',
+        '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,
-        },
+          organizationSlug
+        }
       )
       .getMany();
 
@@ -236,7 +202,7 @@ export class Database {
    * Get deployments with specified filter
    */
   async getDeployments(
-    options: FindManyOptions<Deployment>,
+    options: FindManyOptions<Deployment>
   ): Promise<Deployment[]> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
     const deployments = await deploymentRepository.find(options);
@@ -248,43 +214,23 @@ export class Database {
     return this.getDeployments({
       relations: {
         project: true,
+        domain: true,
         createdBy: true,
         deployer: true,
       },
       where: {
         project: {
-          id: projectId,
-        },
+          id: projectId
+        }
       },
       order: {
-        createdAt: 'DESC',
-      },
-    });
-  }
-
-  async getNonCanonicalDeploymentsByProjectId(
-    projectId: string,
-  ): Promise<Deployment[]> {
-    return this.getDeployments({
-      relations: {
-        project: true,
-        createdBy: true,
-        deployer: true,
-      },
-      where: {
-        project: {
-          id: projectId,
-        },
-        isCanonical: false,
-      },
-      order: {
-        createdAt: 'DESC',
-      },
+        createdAt: 'DESC'
+      }
     });
   }
 
   async getDeployment(
-    options: FindOneOptions<Deployment>,
+    options: FindOneOptions<Deployment>
   ): Promise<Deployment | null> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
     const deployment = await deploymentRepository.findOne(options);
@@ -306,7 +252,7 @@ export class Database {
 
     const updatedData = {
       ...data,
-      id,
+      id
     };
     const deployment = await deploymentRepository.save(updatedData);
 
@@ -314,7 +260,7 @@ export class Database {
   }
 
   async getProjectMembersByProjectId(
-    projectId: string,
+    projectId: string
   ): Promise<ProjectMember[]> {
     const projectMemberRepository =
       this.dataSource.getRepository(ProjectMember);
@@ -322,13 +268,13 @@ export class Database {
     const projectMembers = await projectMemberRepository.find({
       relations: {
         project: true,
-        member: true,
+        member: true
       },
       where: {
         project: {
-          id: projectId,
-        },
-      },
+          id: projectId
+        }
+      }
     });
 
     return projectMembers;
@@ -336,7 +282,7 @@ export class Database {
 
   async getEnvironmentVariablesByProjectId(
     projectId: string,
-    filter?: FindOptionsWhere<EnvironmentVariable>,
+    filter?: FindOptionsWhere<EnvironmentVariable>
   ): Promise<EnvironmentVariable[]> {
     const environmentVariableRepository =
       this.dataSource.getRepository(EnvironmentVariable);
@@ -344,10 +290,10 @@ export class Database {
     const environmentVariables = await environmentVariableRepository.find({
       where: {
         project: {
-          id: projectId,
+          id: projectId
         },
-        ...filter,
-      },
+        ...filter
+      }
     });
 
     return environmentVariables;
@@ -358,7 +304,7 @@ export class Database {
       this.dataSource.getRepository(ProjectMember);
 
     const deleteResult = await projectMemberRepository.delete({
-      id: projectMemberId,
+      id: projectMemberId
     });
 
     if (deleteResult.affected) {
@@ -370,20 +316,20 @@ export class Database {
 
   async updateProjectMemberById(
     projectMemberId: string,
-    data: DeepPartial<ProjectMember>,
+    data: DeepPartial<ProjectMember>
   ): Promise<boolean> {
     const projectMemberRepository =
       this.dataSource.getRepository(ProjectMember);
     const updateResult = await projectMemberRepository.update(
       { id: projectMemberId },
-      data,
+      data
     );
 
     return Boolean(updateResult.affected);
   }
 
   async addProjectMember(
-    data: DeepPartial<ProjectMember>,
+    data: DeepPartial<ProjectMember>
   ): Promise<ProjectMember> {
     const projectMemberRepository =
       this.dataSource.getRepository(ProjectMember);
@@ -393,7 +339,7 @@ export class Database {
   }
 
   async addEnvironmentVariables(
-    data: DeepPartial<EnvironmentVariable>[],
+    data: DeepPartial<EnvironmentVariable>[]
   ): Promise<EnvironmentVariable[]> {
     const environmentVariableRepository =
       this.dataSource.getRepository(EnvironmentVariable);
@@ -405,25 +351,25 @@ export class Database {
 
   async updateEnvironmentVariable(
     environmentVariableId: string,
-    data: DeepPartial<EnvironmentVariable>,
+    data: DeepPartial<EnvironmentVariable>
   ): Promise<boolean> {
     const environmentVariableRepository =
       this.dataSource.getRepository(EnvironmentVariable);
     const updateResult = await environmentVariableRepository.update(
       { id: environmentVariableId },
-      data,
+      data
     );
 
     return Boolean(updateResult.affected);
   }
 
   async deleteEnvironmentVariable(
-    environmentVariableId: string,
+    environmentVariableId: string
   ): Promise<boolean> {
     const environmentVariableRepository =
       this.dataSource.getRepository(EnvironmentVariable);
     const deleteResult = await environmentVariableRepository.delete({
-      id: environmentVariableId,
+      id: environmentVariableId
     });
 
     if (deleteResult.affected) {
@@ -440,13 +386,13 @@ export class Database {
     const projectMemberWithProject = await projectMemberRepository.find({
       relations: {
         project: {
-          owner: true,
+          owner: true
         },
-        member: true,
+        member: true
       },
       where: {
-        id: projectMemberId,
-      },
+        id: projectMemberId
+      }
     });
 
     if (projectMemberWithProject.length === 0) {
@@ -458,7 +404,7 @@ export class Database {
 
   async getProjectsBySearchText(
     userId: string,
-    searchText: string,
+    searchText: string
   ): Promise<Project[]> {
     const projectRepository = this.dataSource.getRepository(Project);
 
@@ -470,8 +416,8 @@ export class Database {
         '(project.owner = :userId OR projectMembers.member.id = :userId) AND project.name LIKE :searchText',
         {
           userId,
-          searchText: `%${searchText}%`,
-        },
+          searchText: `%${searchText}%`
+        }
       )
       .getMany();
 
@@ -480,14 +426,14 @@ export class Database {
 
   async updateDeploymentById(
     deploymentId: string,
-    data: DeepPartial<Deployment>,
+    data: DeepPartial<Deployment>
   ): Promise<boolean> {
     return this.updateDeployment({ id: deploymentId }, data);
   }
 
   async updateDeployment(
     criteria: FindOptionsWhere<Deployment>,
-    data: DeepPartial<Deployment>,
+    data: DeepPartial<Deployment>
   ): Promise<boolean> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
     const updateResult = await deploymentRepository.update(criteria, data);
@@ -497,7 +443,7 @@ export class Database {
 
   async updateDeploymentsByProjectIds(
     projectIds: string[],
-    data: DeepPartial<Deployment>,
+    data: DeepPartial<Deployment>
   ): Promise<boolean> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
 
@@ -515,8 +461,8 @@ export class Database {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
     const deployment = await deploymentRepository.findOneOrFail({
       where: {
-        id: deploymentId,
-      },
+        id: deploymentId
+      }
     });
 
     const deleteResult = await deploymentRepository.softRemove(deployment);
@@ -524,11 +470,7 @@ export class Database {
     return Boolean(deleteResult);
   }
 
-  async addProject(
-    user: User,
-    organizationId: string,
-    data: DeepPartial<Project>,
-  ): Promise<Project> {
+  async addProject(user: User, organizationId: string, data: DeepPartial<Project>): Promise<Project> {
     const projectRepository = this.dataSource.getRepository(Project);
 
     // TODO: Check if organization exists
@@ -541,7 +483,7 @@ export class Database {
     newProject.owner = user;
 
     newProject.organization = Object.assign(new Organization(), {
-      id: organizationId,
+      id: organizationId
     });
 
     return projectRepository.save(newProject);
@@ -555,12 +497,12 @@ export class Database {
 
   async updateProjectById(
     projectId: string,
-    data: DeepPartial<Project>,
+    data: DeepPartial<Project>
   ): Promise<boolean> {
     const projectRepository = this.dataSource.getRepository(Project);
     const updateResult = await projectRepository.update(
       { id: projectId },
-      data,
+      data
     );
 
     return Boolean(updateResult.affected);
@@ -570,11 +512,11 @@ export class Database {
     const projectRepository = this.dataSource.getRepository(Project);
     const project = await projectRepository.findOneOrFail({
       where: {
-        id: projectId,
+        id: projectId
       },
       relations: {
-        projectMembers: true,
-      },
+        projectMembers: true
+      }
     });
 
     const deleteResult = await projectRepository.softRemove(project);
@@ -610,7 +552,7 @@ export class Database {
 
   async updateDomainById(
     domainId: string,
-    data: DeepPartial<Domain>,
+    data: DeepPartial<Domain>
   ): Promise<boolean> {
     const domainRepository = this.dataSource.getRepository(Domain);
     const updateResult = await domainRepository.update({ id: domainId }, data);
@@ -620,66 +562,25 @@ export class Database {
 
   async getDomainsByProjectId(
     projectId: string,
-    filter?: FindOptionsWhere<Domain>,
+    filter?: FindOptionsWhere<Domain>
   ): Promise<Domain[]> {
     const domainRepository = this.dataSource.getRepository(Domain);
 
     const domains = await domainRepository.find({
       relations: {
-        redirectTo: true,
+        redirectTo: true
       },
       where: {
         project: {
-          id: projectId,
+          id: projectId
         },
-        ...filter,
-      },
+        ...filter
+      }
     });
 
     return domains;
   }
 
-  async getOldestDomainByProjectId(projectId: string): Promise<Domain | null> {
-    const domainRepository = this.dataSource.getRepository(Domain);
-
-    const domain = await domainRepository.findOne({
-      where: {
-        project: {
-          id: projectId,
-        },
-      },
-      order: {
-        createdAt: 'ASC',
-      },
-    });
-
-    return domain;
-  }
-
-  async getLatestDNSRecordByProjectId(
-    projectId: string,
-  ): Promise<DNSRecordAttributes | null> {
-    const deploymentRepository = this.dataSource.getRepository(Deployment);
-
-    const deployment = await deploymentRepository.findOne({
-      where: {
-        project: {
-          id: projectId,
-        },
-        status: DeploymentStatus.Ready,
-      },
-      order: {
-        createdAt: 'DESC',
-      },
-    });
-
-    if (deployment === null) {
-      throw new Error(`No deployment found for project ${projectId}`);
-    }
-
-    return deployment.dnsRecordData;
-  }
-
   async addDeployer(data: DeepPartial<Deployer>): Promise<Deployer> {
     const deployerRepository = this.dataSource.getRepository(Deployer);
     const newDomain = await deployerRepository.save(data);
@@ -695,9 +596,7 @@ export class Database {
 
   async getDeployerByLRN(deployerLrn: string): Promise<Deployer | null> {
     const deployerRepository = this.dataSource.getRepository(Deployer);
-    const deployer = await deployerRepository.findOne({
-      where: { deployerLrn },
-    });
+    const deployer = await deployerRepository.findOne({ where: { deployerLrn } });
 
     return deployer;
   }

packages/backend/src/entity/Deployer.ts

@@ -15,9 +15,6 @@ export class Deployer {
   @Column('varchar')
     baseDomain!: string;
 
-  @Column('varchar', { nullable: true})
-    publicKey!: string | null;
-
   @Column('varchar', { nullable: true })
     minimumPayment!: string | null;
 

packages/backend/src/entity/Deployment.ts

@@ -14,7 +14,7 @@ import { Project } from './Project';
 import { Domain } from './Domain';
 import { User } from './User';
 import { Deployer } from './Deployer';
-import { AppDeploymentRecordAttributes, AppDeploymentRemovalRecordAttributes, DNSRecordAttributes } from '../types';
+import { AppDeploymentRecordAttributes, AppDeploymentRemovalRecordAttributes } from '../types';
 
 export enum Environment {
   Production = 'Production',
@@ -39,7 +39,6 @@ export interface ApplicationDeploymentRequest {
   config: string;
   meta: string;
   payment?: string;
-  dns?: string;
 }
 
 export interface ApplicationDeploymentRemovalRequest {
@@ -78,6 +77,13 @@ export class Deployment {
   @JoinColumn({ name: 'projectId' })
     project!: Project;
 
+  @Column({ nullable: true })
+    domainId!: string | null;
+
+  @OneToOne(() => Domain)
+  @JoinColumn({ name: 'domainId' })
+    domain!: Domain | null;
+
   @Column('varchar')
     branch!: string;
 
@@ -120,9 +126,6 @@ export class Deployment {
   @Column('simple-json', { nullable: true })
     applicationDeploymentRemovalRecordData!: AppDeploymentRemovalRecordAttributes | null;
 
-  @Column('simple-json', { nullable: true })
-    dnsRecordData!: DNSRecordAttributes | null;
-
   @ManyToOne(() => Deployer)
   @JoinColumn({ name: 'deployerLrn' })
     deployer!: Deployer;
@@ -135,9 +138,6 @@ export class Deployment {
   @Column('boolean', { default: false })
     isCurrent!: boolean;
 
-  @Column('boolean', { default: false })
-    isCanonical!: boolean;
-
   @Column({
     enum: DeploymentStatus
   })

packages/backend/src/entity/Project.ts

@@ -9,7 +9,7 @@ import {
   OneToMany,
   DeleteDateColumn,
   JoinTable,
-  ManyToMany,
+  ManyToMany
 } from 'typeorm';
 
 import { User } from './User';
@@ -18,12 +18,6 @@ import { ProjectMember } from './ProjectMember';
 import { Deployment } from './Deployment';
 import { Deployer } from './Deployer';
 
-export enum AuctionStatus {
-  Commit = 'commit',
-  Reveal = 'reveal',
-  Completed = 'completed',
-}
-
 @Entity()
 export class Project {
   @PrimaryGeneratedColumn('uuid')
@@ -55,23 +49,16 @@ export class Project {
   @Column('text', { default: '' })
     description!: string;
 
+  @Column('varchar', { nullable: true })
+    auctionId!: string | null;
+
   // Tx hash for sending coins from snowball to deployer
   @Column('varchar', { nullable: true })
     txHash!: string | null;
 
-  @ManyToMany(() => Deployer, (deployer) => deployer.projects)
+  @ManyToMany(() => Deployer, (deployer) => (deployer.projects))
   @JoinTable()
-    deployers!: Deployer[];
-
-  @Column('varchar', { nullable: true })
-    auctionId!: string | null;
-
-  @Column({
-    enum: AuctionStatus,
-    // TODO: Remove later after all projects auction status have been set
-    default: AuctionStatus.Completed,
-  })
-    auctionStatus!: AuctionStatus;
+    deployers!: Deployer[]
 
   @Column('boolean', { default: false, nullable: true })
     fundsReleased!: boolean;

packages/backend/src/registry.ts

@@ -4,15 +4,8 @@ import { DateTime } from 'luxon';
 import { Octokit } from 'octokit';
 import { inc as semverInc } from 'semver';
 import { DeepPartial } from 'typeorm';
-import * as openpgp from 'openpgp';
 
-import {
-  Account,
-  DEFAULT_GAS_ESTIMATION_MULTIPLIER,
-  Registry as LaconicRegistry,
-  getGasPrice,
-  parseGasAndFees,
-} from '@cerc-io/registry-sdk';
+import { Account, DEFAULT_GAS_ESTIMATION_MULTIPLIER, Registry as LaconicRegistry, getGasPrice, parseGasAndFees } from '@cerc-io/registry-sdk';
 import { DeliverTxResponse, IndexedTx } from '@cosmjs/stargate';
 
 import { RegistryConfig } from './config';
@@ -20,33 +13,20 @@ import {
   ApplicationRecord,
   Deployment,
   ApplicationDeploymentRequest,
-  ApplicationDeploymentRemovalRequest,
+  ApplicationDeploymentRemovalRequest
 } from './entity/Deployment';
-import {
-  AppDeploymentRecord,
-  AppDeploymentRemovalRecord,
-  AuctionParams,
-  DeployerRecord,
-  RegistryRecord,
-} from './types';
-import {
-  getConfig,
-  getRepoDetails,
-  registryTransactionWithRetry,
-  sleep,
-} from './utils';
-import { MsgCreateAuctionResponse } from '@cerc-io/registry-sdk/dist/proto/cerc/auction/v1/tx';
+import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord } from './types';
+import { getConfig, getRepoDetails, registryTransactionWithRetry, sleep } from './utils';
 
 const log = debug('snowball:registry');
 
 const APP_RECORD_TYPE = 'ApplicationRecord';
 const APP_DEPLOYMENT_AUCTION_RECORD_TYPE = 'ApplicationDeploymentAuction';
 const APP_DEPLOYMENT_REQUEST_TYPE = 'ApplicationDeploymentRequest';
-const APP_DEPLOYMENT_REMOVAL_REQUEST_TYPE =
-  'ApplicationDeploymentRemovalRequest';
+const APP_DEPLOYMENT_REMOVAL_REQUEST_TYPE = 'ApplicationDeploymentRemovalRequest';
 const APP_DEPLOYMENT_RECORD_TYPE = 'ApplicationDeploymentRecord';
 const APP_DEPLOYMENT_REMOVAL_RECORD_TYPE = 'ApplicationDeploymentRemovalRecord';
-const WEBAPP_DEPLOYER_RECORD_TYPE = 'WebappDeployer';
+const WEBAPP_DEPLOYER_RECORD_TYPE = 'WebappDeployer'
 const SLEEP_DURATION = 1000;
 
 // TODO: Move registry code to registry-sdk/watcher-ts
@@ -62,7 +42,7 @@ export class Registry {
     this.registry = new LaconicRegistry(
       registryConfig.gqlEndpoint,
       registryConfig.restEndpoint,
-      { chainId: registryConfig.chainId, gasPrice },
+      { chainId: registryConfig.chainId, gasPrice }
     );
   }
 
@@ -72,7 +52,7 @@ export class Registry {
     commitHash,
     appType,
   }: {
-    octokit: Octokit;
+    octokit: Octokit
     repository: string;
     commitHash: string;
     appType: string;
@@ -80,33 +60,29 @@ export class Registry {
     applicationRecordId: string;
     applicationRecordData: ApplicationRecord;
   }> {
-    const { repo, repoUrl, packageJSON } = await getRepoDetails(
-      octokit,
-      repository,
-      commitHash,
-    );
+    const { repo, repoUrl, packageJSON } = await getRepoDetails(octokit, repository, commitHash)
     // Use registry-sdk to publish record
     // Reference: https://git.vdb.to/cerc-io/test-progressive-web-app/src/branch/main/scripts/publish-app-record.sh
     // Fetch previous records
     const records = await this.registry.queryRecords(
       {
         type: APP_RECORD_TYPE,
-        name: packageJSON.name,
+        name: packageJSON.name
       },
-      true,
+      true
     );
 
     // Get next version of record
     const bondRecords = records.filter(
-      (record: any) => record.bondId === this.registryConfig.bondId,
+      (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(),
+        new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
     );
     const nextVersion = semverInc(
       latestBondRecord?.attributes.version ?? '0.0.0',
-      'patch',
+      'patch'
     );
 
     assert(nextVersion, 'Application record version not valid');
@@ -126,12 +102,24 @@ export class Registry {
         author:
           typeof packageJSON.author === 'object'
             ? JSON.stringify(packageJSON.author)
-            : packageJSON.author,
+            : packageJSON.author
       }),
-      ...(packageJSON.version && { app_version: packageJSON.version }),
+      ...(packageJSON.version && { app_version: packageJSON.version })
     };
 
-    const result = await this.publishRecord(applicationRecord);
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+
+    const result = await registryTransactionWithRetry(() =>
+      this.registry.setRecord(
+        {
+          privateKey: this.registryConfig.privateKey,
+          record: applicationRecord,
+          bondId: this.registryConfig.bondId
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
+    );
 
     log(`Published application record ${result.id}`);
     log('Application record data:', applicationRecord);
@@ -140,9 +128,16 @@ export class Registry {
     const lrn = this.getLrn(repo);
     log(`Setting name: ${lrn} for record ID: ${result.id}`);
 
-    const fee = parseGasAndFees(
-      this.registryConfig.fee.gas,
-      this.registryConfig.fee.fees,
+    await sleep(SLEEP_DURATION);
+    await registryTransactionWithRetry(() =>
+      this.registry.setName(
+        {
+          cid: result.id,
+          lrn
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
     );
 
     await sleep(SLEEP_DURATION);
@@ -150,11 +145,11 @@ export class Registry {
       this.registry.setName(
         {
           cid: result.id,
-          lrn,
+          lrn: `${lrn}@${applicationRecord.app_version}`
         },
         this.registryConfig.privateKey,
-        fee,
-      ),
+        fee
+      )
     );
 
     await sleep(SLEEP_DURATION);
@@ -162,28 +157,16 @@ export class Registry {
       this.registry.setName(
         {
           cid: result.id,
-          lrn: `${lrn}@${applicationRecord.app_version}`,
+          lrn: `${lrn}@${applicationRecord.repository_ref}`
         },
         this.registryConfig.privateKey,
-        fee,
-      ),
-    );
-
-    await sleep(SLEEP_DURATION);
-    await registryTransactionWithRetry(() =>
-      this.registry.setName(
-        {
-          cid: result.id,
-          lrn: `${lrn}@${applicationRecord.repository_ref}`,
-        },
-        this.registryConfig.privateKey,
-        fee,
-      ),
+        fee
+      )
     );
 
     return {
       applicationRecordId: result.id,
-      applicationRecordData: applicationRecord,
+      applicationRecordData: applicationRecord
     };
   }
 
@@ -193,7 +176,7 @@ export class Registry {
     auctionParams: AuctionParams,
     data: DeepPartial<Deployment>,
   ): Promise<{
-    applicationDeploymentAuction: MsgCreateAuctionResponse['auction'];
+    applicationDeploymentAuctionId: string;
   }> {
     assert(data.project?.repository, 'Project repository not found');
 
@@ -208,11 +191,8 @@ export class Registry {
     const config = await getConfig();
     const auctionConfig = config.auction;
 
-    const fee = parseGasAndFees(
-      this.registryConfig.fee.gas,
-      this.registryConfig.fee.fees,
-    );
-    const auctionResult = (await registryTransactionWithRetry(() =>
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+    const auctionResult = await registryTransactionWithRetry(() =>
       this.registry.createProviderAuction(
         {
           commitFee: auctionConfig.commitFee,
@@ -224,9 +204,9 @@ export class Registry {
           numProviders: auctionParams.numProviders,
         },
         this.registryConfig.privateKey,
-        fee,
-      ),
-    )) as MsgCreateAuctionResponse;
+        fee
+      )
+    );
 
     if (!auctionResult.auction) {
       throw new Error('Error creating auction');
@@ -239,29 +219,36 @@ export class Registry {
       type: APP_DEPLOYMENT_AUCTION_RECORD_TYPE,
     };
 
-    const result = await this.publishRecord(applicationDeploymentAuction);
+    const result = await registryTransactionWithRetry(() =>
+      this.registry.setRecord(
+        {
+          privateKey: this.registryConfig.privateKey,
+          record: applicationDeploymentAuction,
+          bondId: this.registryConfig.bondId
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
+    );
 
     log(`Application deployment auction created: ${auctionResult.auction.id}`);
     log(`Application deployment auction record published: ${result.id}`);
     log('Application deployment auction data:', applicationDeploymentAuction);
 
     return {
-      applicationDeploymentAuction: auctionResult.auction!,
+      applicationDeploymentAuctionId: auctionResult.auction.id,
     };
   }
 
   async createApplicationDeploymentRequest(data: {
-    deployment: Deployment;
-    appName: string;
-    repository: string;
-    auctionId?: string | null;
-    lrn: string;
-    apiUrl: string;
-    environmentVariables: { [key: string]: string };
-    dns: string;
-    requesterAddress: string;
-    publicKey: string;
-    payment?: string | null;
+    deployment: Deployment,
+    appName: string,
+    repository: string,
+    auctionId?: string | null,
+    lrn: string,
+    environmentVariables: { [key: string]: string },
+    dns: string,
+    payment?: string | null
   }): Promise<{
     applicationDeploymentRequestId: string;
     applicationDeploymentRequestData: ApplicationDeploymentRequest;
@@ -274,16 +261,6 @@ export class Registry {
       throw new Error(`No record found for ${lrn}`);
     }
 
-    let hash;
-    if (Object.keys(data.environmentVariables).length !== 0) {
-      hash = await this.generateConfigHash(
-        data.environmentVariables,
-        data.requesterAddress,
-        data.publicKey,
-        data.apiUrl,
-      );
-    }
-
     // Create record of type ApplicationDeploymentRequest and publish
     const applicationDeploymentRequest = {
       type: APP_DEPLOYMENT_REQUEST_TYPE,
@@ -293,13 +270,15 @@ export class Registry {
       dns: data.dns,
 
       // https://git.vdb.to/cerc-io/laconic-registry-cli/commit/129019105dfb93bebcea02fde0ed64d0f8e5983b
-      config: JSON.stringify(hash ? { ref: hash } : {}),
+      config: JSON.stringify({
+        env: data.environmentVariables
+      }),
       meta: JSON.stringify({
         note: `Added by Snowball @ ${DateTime.utc().toFormat(
-          "EEE LLL dd HH:mm:ss 'UTC' yyyy",
+          "EEE LLL dd HH:mm:ss 'UTC' yyyy"
         )}`,
         repository: data.repository,
-        repository_ref: data.deployment.commitHash,
+        repository_ref: data.deployment.commitHash
       }),
       deployer: data.lrn,
       ...(data.auctionId && { auction: data.auctionId }),
@@ -308,19 +287,31 @@ export class Registry {
 
     await sleep(SLEEP_DURATION);
 
-    const result = await this.publishRecord(applicationDeploymentRequest);
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+
+    const result = await registryTransactionWithRetry(() =>
+      this.registry.setRecord(
+        {
+          privateKey: this.registryConfig.privateKey,
+          record: applicationDeploymentRequest,
+          bondId: this.registryConfig.bondId
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
+    );
 
     log(`Application deployment request record published: ${result.id}`);
     log('Application deployment request data:', applicationDeploymentRequest);
 
     return {
       applicationDeploymentRequestId: result.id,
-      applicationDeploymentRequestData: applicationDeploymentRequest,
+      applicationDeploymentRequestData: applicationDeploymentRequest
     };
   }
 
   async getAuctionWinningDeployerRecords(
-    auctionId: string,
+    auctionId: string
   ): Promise<DeployerRecord[]> {
     const records = await this.registry.getAuctionsByIds([auctionId]);
     const auctionResult = records[0];
@@ -333,7 +324,7 @@ export class Registry {
         paymentAddress: auctionWinner,
       });
 
-      const newRecords = records.filter((record) => {
+      const newRecords = records.filter(record => {
         return record.names !== null && record.names.length > 0;
       });
 
@@ -348,19 +339,18 @@ export class Registry {
     return deployerRecords;
   }
 
-  async releaseDeployerFunds(auctionId: string): Promise<any> {
-    const fee = parseGasAndFees(
-      this.registryConfig.fee.gas,
-      this.registryConfig.fee.fees,
-    );
+  async releaseDeployerFunds(
+    auctionId: string
+  ): Promise<any> {
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
     const auction = await registryTransactionWithRetry(() =>
       this.registry.releaseFunds(
         {
-          auctionId,
+          auctionId
         },
         this.registryConfig.privateKey,
-        fee,
-      ),
+        fee
+      )
     );
 
     return auction;
@@ -370,54 +360,50 @@ export class Registry {
    * Fetch ApplicationDeploymentRecords for deployments
    */
   async getDeploymentRecords(
-    deployments: Deployment[],
+    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,
+        type: APP_DEPLOYMENT_RECORD_TYPE
       },
-      true,
+      true
     );
 
-    // Filter records with ApplicationDeploymentRequestId ID
+    // Filter records with ApplicationDeploymentRequestId ID and Deployment specific URL
     return records.filter((record: AppDeploymentRecord) =>
       deployments.some(
         (deployment) =>
-          deployment.applicationDeploymentRequestId ===
-          record.attributes.request,
-      ),
+          deployment.applicationDeploymentRequestId === record.attributes.request &&
+          record.attributes.url.includes(deployment.id)
+      )
     );
   }
 
   /**
    * Fetch WebappDeployer Records by filter
    */
-  async getDeployerRecordsByFilter(filter: {
-    [key: string]: any;
-  }): Promise<DeployerRecord[]> {
+  async getDeployerRecordsByFilter(filter: { [key: string]: any }): Promise<DeployerRecord[]> {
     return this.registry.queryRecords(
       {
         type: WEBAPP_DEPLOYER_RECORD_TYPE,
-        ...filter,
+        ...filter
       },
-      true,
+      true
     );
   }
 
   /**
    * Fetch ApplicationDeploymentRecords by filter
    */
-  async getDeploymentRecordsByFilter(filter: {
-    [key: string]: any;
-  }): Promise<AppDeploymentRecord[]> {
+  async getDeploymentRecordsByFilter(filter: { [key: string]: any }): Promise<AppDeploymentRecord[]> {
     return this.registry.queryRecords(
       {
         type: APP_DEPLOYMENT_RECORD_TYPE,
-        ...filter,
+        ...filter
       },
-      true,
+      true
     );
   }
 
@@ -425,36 +411,26 @@ export class Registry {
    * Fetch ApplicationDeploymentRemovalRecords for deployments
    */
   async getDeploymentRemovalRecords(
-    deployments: Deployment[],
+    deployments: Deployment[]
   ): Promise<AppDeploymentRemovalRecord[]> {
     // Fetch ApplicationDeploymentRemovalRecords for corresponding ApplicationDeploymentRecord set in deployments
     const records = await this.registry.queryRecords(
       {
-        type: APP_DEPLOYMENT_REMOVAL_RECORD_TYPE,
+        type: APP_DEPLOYMENT_REMOVAL_RECORD_TYPE
       },
-      true,
+      true
     );
 
     // Filter records with ApplicationDeploymentRecord and ApplicationDeploymentRemovalRequest IDs
     return records.filter((record: AppDeploymentRemovalRecord) =>
       deployments.some(
         (deployment) =>
-          deployment.applicationDeploymentRemovalRequestId ===
-            record.attributes.request &&
-          deployment.applicationDeploymentRecordId ===
-            record.attributes.deployment,
-      ),
+          deployment.applicationDeploymentRemovalRequestId === record.attributes.request &&
+          deployment.applicationDeploymentRecordId === record.attributes.deployment
+      )
     );
   }
 
-  /**
-   * Fetch record by Id
-   */
-  async getRecordById(id: string): Promise<RegistryRecord | null> {
-    const [record] = await this.registry.getRecordsByIds([id]);
-    return record ?? null;
-  }
-
   async createApplicationDeploymentRemovalRequest(data: {
     deploymentId: string;
     deployerLrn: string;
@@ -473,22 +449,26 @@ export class Registry {
       ...(data.payment && { payment: data.payment }),
     };
 
-    const result = await this.publishRecord(
-      applicationDeploymentRemovalRequest,
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
+
+    const result = await registryTransactionWithRetry(() =>
+      this.registry.setRecord(
+        {
+          privateKey: this.registryConfig.privateKey,
+          record: applicationDeploymentRemovalRequest,
+          bondId: this.registryConfig.bondId
+        },
+        this.registryConfig.privateKey,
+        fee
+      )
     );
 
-    log(
-      `Application deployment removal request record published: ${result.id}`,
-    );
-    log(
-      'Application deployment removal request data:',
-      applicationDeploymentRemovalRequest,
-    );
+    log(`Application deployment removal request record published: ${result.id}`);
+    log('Application deployment removal request data:', applicationDeploymentRemovalRequest);
 
     return {
       applicationDeploymentRemovalRequestId: result.id,
-      applicationDeploymentRemovalRequestData:
-        applicationDeploymentRemovalRequest,
+      applicationDeploymentRemovalRequestData: applicationDeploymentRemovalRequest
     };
   }
 
@@ -500,36 +480,12 @@ export class Registry {
     const auctions = await this.registry.getAuctionsByIds(auctionIds);
 
     const completedAuctions = auctions
-      .filter(
-        (auction: { id: string; status: string }) =>
-          auction.status === 'completed',
-      )
-      .map((auction: { id: string; status: string }) => auction.id);
+      .filter((auction: { id: string, status: string }) => auction.status === 'completed')
+      .map((auction: { id: string, status: string }) => auction.id);
 
     return completedAuctions;
   }
 
-  async publishRecord(recordData: any): Promise<any> {
-    const fee = parseGasAndFees(
-      this.registryConfig.fee.gas,
-      this.registryConfig.fee.fees,
-    );
-
-    const result = await registryTransactionWithRetry(() =>
-      this.registry.setRecord(
-        {
-          privateKey: this.registryConfig.privateKey,
-          record: recordData,
-          bondId: this.registryConfig.bondId,
-        },
-        this.registryConfig.privateKey,
-        fee,
-      ),
-    );
-
-    return result;
-  }
-
   async getRecordsByName(name: string): Promise<any> {
     return this.registry.resolveNames([name]);
   }
@@ -538,38 +494,27 @@ export class Registry {
     return this.registry.getAuctionsByIds([auctionId]);
   }
 
-  async sendTokensToAccount(
-    receiverAddress: string,
-    amount: string,
-  ): Promise<DeliverTxResponse> {
-    const fee = parseGasAndFees(
-      this.registryConfig.fee.gas,
-      this.registryConfig.fee.fees,
-    );
+  async sendTokensToAccount(receiverAddress: string, amount: string): Promise<DeliverTxResponse> {
+    const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
     const account = await this.getAccount();
     const laconicClient = await this.registry.getLaconicClient(account);
-    const txResponse: DeliverTxResponse = await registryTransactionWithRetry(
-      () =>
-        laconicClient.sendTokens(
-          account.address,
-          receiverAddress,
+    const txResponse: DeliverTxResponse =
+      await registryTransactionWithRetry(() =>
+        laconicClient.sendTokens(account.address, receiverAddress,
           [
             {
               denom: 'alnt',
-              amount,
-            },
+              amount
+            }
           ],
-          fee || DEFAULT_GAS_ESTIMATION_MULTIPLIER,
-        ),
-    );
+          fee || DEFAULT_GAS_ESTIMATION_MULTIPLIER)
+      );
 
     return txResponse;
   }
 
   async getAccount(): Promise<Account> {
-    const account = new Account(
-      Buffer.from(this.registryConfig.privateKey, 'hex'),
-    );
+    const account = new Account(Buffer.from(this.registryConfig.privateKey, 'hex'));
     await account.init();
 
     return account;
@@ -587,43 +532,4 @@ export class Registry {
     assert(this.registryConfig.authority, "Authority doesn't exist");
     return `lrn://${this.registryConfig.authority}/applications/${appName}`;
   }
-
-  async generateConfigHash(
-    environmentVariables: { [key: string]: string },
-    requesterAddress: string,
-    pubKey: string,
-    url: string,
-  ): Promise<string> {
-    // Config to be encrypted
-    const config = {
-      authorized: [requesterAddress],
-      config: { env: environmentVariables },
-    };
-
-    // Serialize the config
-    const serialized = JSON.stringify(config, null, 2);
-
-    const armoredKey = `-----BEGIN PGP PUBLIC KEY BLOCK-----\n\n${pubKey}\n\n-----END PGP PUBLIC KEY BLOCK-----`;
-    const publicKey = await openpgp.readKey({ armoredKey });
-
-    // Encrypt the config
-    const encrypted = await openpgp.encrypt({
-      message: await openpgp.createMessage({ text: serialized }),
-      encryptionKeys: publicKey,
-      format: 'binary',
-    });
-
-    // Get the hash after uploading encrypted config
-    const response = await fetch(`${url}/upload/config`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/octet-stream',
-      },
-      body: encrypted,
-    });
-
-    const configHash = await response.json();
-
-    return configHash.id;
-  }
 }

packages/backend/src/resolvers.ts

@@ -38,7 +38,7 @@ export const createResolvers = async (service: Service): Promise<any> => {
       },
 
       deployments: async (_: any, { projectId }: { projectId: string }) => {
-        return service.getNonCanonicalDeploymentsByProjectId(projectId);
+        return service.getDeploymentsByProjectId(projectId);
       },
 
       environmentVariables: async (
@@ -95,13 +95,6 @@ export const createResolvers = async (service: Service): Promise<any> => {
       ) => {
         return service.verifyTx(txHash, amount, senderAddress);
       },
-
-      latestDNSRecord: async (
-        _: any,
-        { projectId }: { projectId: string },
-      ) => {
-        return service.getLatestDNSRecordByProjectId(projectId);
-      },
     },
 
     // TODO: Return error in GQL response

packages/backend/src/routes/auth.ts

@@ -94,4 +94,13 @@ router.get('/session', (req, res) => {
   }
 });
 
+router.post('/logout', (req, res) => {
+  req.session.destroy((err) => {
+    if (err) {
+      return res.send({ success: false });
+    }
+    res.send({ success: true });
+  });
+});
+
 export default router;

packages/backend/src/schema.gql

@@ -100,6 +100,7 @@ type ProjectMember {
 
 type Deployment {
   id: String!
+  domain: Domain
   branch: String!
   commitHash: String!
   commitMessage: String!
@@ -107,7 +108,6 @@ type Deployment {
   environment: Environment!
   deployer: Deployer
   applicationDeploymentRequestId: String
-  applicationDeploymentRecordData: AppDeploymentRecordAttributes
   isCurrent: Boolean!
   baseDomain: String
   status: DeploymentStatus!
@@ -249,27 +249,6 @@ type Auction {
   bids: [Bid!]!
 }
 
-type DNSRecordAttributes {
-  name: String
-  value: String
-  request: String
-  resourceType: String
-  version: String
-}
-
-type AppDeploymentRecordAttributes {
-  application: String
-  auction: String
-  deployer: String
-  dns: String
-  meta: String
-  name: String
-  request: String
-  type: String
-  url: String
-  version: String
-}
-
 input AuctionParams {
   maxPrice: String,
   numProviders: Int,
@@ -286,7 +265,6 @@ type Query {
   projectMembers(projectId: String!): [ProjectMember!]
   searchProjects(searchText: String!): [Project!]
   getAuctionData(auctionId: String!): Auction!
-  latestDNSRecord(projectId: String!): DNSRecordAttributes
   domains(projectId: String!, filter: FilterDomainsInput): [Domain]
   deployers: [Deployer]
   address: String!

packages/backend/src/types.ts

@@ -40,22 +40,6 @@ export interface AppDeploymentRecordAttributes {
   version: string;
 }
 
-export interface DNSRecordAttributes {
-  name: string;
-  value: string;
-  request: string;
-  resourceType: string;
-  version: string;
-}
-
-export interface RegistryDNSRecordAttributes {
-  name: string;
-  value: string;
-  request: string;
-  resource_type: string;
-  version: string;
-}
-
 export interface AppDeploymentRemovalRecordAttributes {
   deployment: string;
   request: string;
@@ -63,7 +47,7 @@ export interface AppDeploymentRemovalRecordAttributes {
   version: string;
 }
 
-export interface RegistryRecord {
+interface RegistryRecord {
   id: string;
   names: string[] | null;
   owners: string[];
@@ -80,10 +64,6 @@ export interface AppDeploymentRemovalRecord extends RegistryRecord {
   attributes: AppDeploymentRemovalRecordAttributes;
 }
 
-export interface DNSRecord extends RegistryRecord {
-  attributes: RegistryDNSRecordAttributes
-}
-
 export interface AddProjectFromTemplateInput {
   templateOwner: string;
   templateRepo: string;

packages/backend/test/fixtures/organizations.json

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

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

@@ -10,7 +10,7 @@ import { Deployment, DeploymentStatus, Environment } from '../src/entity/Deploym
 const log = debug('snowball:publish-deploy-records');
 
 async function main() {
-  const { registryConfig, database } = await getConfig();
+  const { registryConfig, database, misc } = await getConfig();
 
   const registry = new Registry(
     registryConfig.gqlEndpoint,

packages/deployer/.gitignore

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

packages/deployer/config.yml

@@ -1,8 +1,8 @@
 services:
   registry:
-    rpcEndpoint: https://laconicd-mainnet-1.laconic.com
-    gqlEndpoint: https://laconicd-mainnet-1.laconic.com/api
-    userKey:
-    bondId:
-    chainId: laconic-mainnet
-    gasPrice: 0.001alnt
+    rpcEndpoint: https://laconicd-sapo.laconic.com
+    gqlEndpoint: https://laconicd-sapo.laconic.com/api
+    userKey: 
+    bondId: 
+    chainId: laconic_9000-2
+    gasPrice: 1alnt

packages/deployer/deploy-frontend.sh

@@ -8,11 +8,8 @@ echo "Using AUTHORITY: $AUTHORITY"
 # Repository URL
 REPO_URL="https://git.vdb.to/cerc-io/snowballtools-base"
 
-# Get the latest commit hash for a branch
-BRANCH_NAME="main"
-LATEST_HASH=$(git ls-remote $REPO_URL refs/heads/$BRANCH_NAME | awk '{print $1}')
-
-echo "Latest commit hash for branch $BRANCH_NAME: $LATEST_HASH"
+# Get the latest commit hash from the repository
+LATEST_HASH=$(git ls-remote $REPO_URL HEAD | awk '{print $1}')
 
 # Extract version from ../frontend/package.json
 PACKAGE_VERSION=$(jq -r '.version' ../frontend/package.json)
@@ -102,9 +99,6 @@ fi
 # Get payment address for deployer
 paymentAddress=$(yarn --silent laconic -c config.yml registry name resolve "$DEPLOYER_LRN" | jq -r '.[0].attributes.paymentAddress')
 paymentAmount=$(yarn --silent laconic -c config.yml registry name resolve "$DEPLOYER_LRN" | jq -r '.[0].attributes.minimumPayment' | sed 's/alnt//g')
-
-echo "Paying address: $paymentAddress with amount $paymentAmount..."
-
 # Pay deployer if paymentAmount is not null
 if [[ -n "$paymentAmount" && "$paymentAmount" != "null" ]]; then
   payment=$(yarn --silent laconic -c config.yml registry tokens send --address "$paymentAddress" --type alnt --quantity "$paymentAmount")
@@ -125,17 +119,17 @@ record:
   name: deploy-frontend@$PACKAGE_VERSION
   application: lrn://$AUTHORITY/applications/deploy-frontend@$PACKAGE_VERSION
   deployer: $DEPLOYER_LRN
-  dns: deploy.laconic.com
+  dns: deploy
   config:
     env:
-      LACONIC_HOSTED_CONFIG_server_url: https://deploy-backend.laconic.com
-      LACONIC_HOSTED_CONFIG_github_clientid: Ov23li4NtYybQlF6u5Dk
+      LACONIC_HOSTED_CONFIG_server_url: https://deploy-backend.apps.vaasl.io
+      LACONIC_HOSTED_CONFIG_github_clientid: Ov23liaet4yc0KX0iM1c
       LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: laconic-templates/test-progressive-web-app
       LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: laconic-templates/image-upload-pwa-example
-      LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: laconic-templates/starter.nextjs-react-tailwind
-      LACONIC_HOSTED_CONFIG_wallet_iframe_url: https://wallet.laconic.com
+      LACONIC_HOSTED_CONFIG_wallet_connect_id: 63cad7ba97391f63652161f484670e15
+      LACONIC_HOSTED_CONFIG_laconicd_chain_id: laconic-testnet-2
   meta:
-    note: Added @ $CURRENT_DATE_TIME
+    note: Added by Snowball @ $CURRENT_DATE_TIME
     repository: "$REPO_URL"
     repository_ref: $LATEST_HASH
   payment: $txHash

packages/deployer/deploy-frontend.staging.sh

@@ -1,10 +1,5 @@
 #!/bin/bash
 
-source .env
-echo "Using REGISTRY_BOND_ID: $REGISTRY_BOND_ID"
-echo "Using DEPLOYER_LRN: $DEPLOYER_LRN"
-echo "Using AUTHORITY: $AUTHORITY"
-
 # Repository URL
 REPO_URL="https://git.vdb.to/cerc-io/snowballtools-base"
 
@@ -17,33 +12,63 @@ PACKAGE_VERSION=$(jq -r '.version' ../frontend/package.json)
 # Current date and time for note
 CURRENT_DATE_TIME=$(date -u)
 
-CONFIG_FILE=config.yml
+CONFIG_FILE=config.staging.yml
+REGISTRY_BOND_ID="098c906850b87412f02200e41f449bc79e055eab77acfef32c0b22443bb46661"
 
 # Reference: https://git.vdb.to/cerc-io/test-progressive-web-app/src/branch/main/scripts
 
 # Get latest version from registry and increment application-record version
-NEW_APPLICATION_VERSION=$(yarn --silent laconic -c $CONFIG_FILE registry record list --type ApplicationRecord --all --name "deploy-frontend" 2>/dev/null | jq -r -s ".[] | sort_by(.createTime) | reverse | [ .[] | select(.bondId == \"$REGISTRY_BOND_ID\") ] | .[0].attributes.version" | awk -F. -v OFS=. '{$NF += 1 ; print}')
+NEW_APPLICATION_VERSION=$(yarn --silent laconic -c $CONFIG_FILE registry record list --type ApplicationRecord --all --name "staging-snowballtools-base-frontend" 2>/dev/null | jq -r -s ".[] | sort_by(.createTime) | reverse | [ .[] | select(.bondId == \"$REGISTRY_BOND_ID\") ] | .[0].attributes.version" | awk -F. -v OFS=. '{$NF += 1 ; print}')
 
 if [ -z "$NEW_APPLICATION_VERSION" ] || [ "1" == "$NEW_APPLICATION_VERSION" ]; then
   # Set application-record version if no previous records were found
   NEW_APPLICATION_VERSION=0.0.1
 fi
 
+# Generate application-deployment-request.yml
+cat >./staging-records/application-deployment-request.yml <<EOF
+record:
+  type: ApplicationDeploymentRequest
+  version: '1.0.0'
+  name: staging-snowballtools-base-frontend@$PACKAGE_VERSION
+  application: lrn://staging-snowballtools/applications/staging-snowballtools-base-frontend@$PACKAGE_VERSION
+  dns: dashboard.staging.apps.snowballtools.com
+  config:
+    env:
+      LACONIC_HOSTED_CONFIG_server_url: https://snowballtools-base-api.staging.apps.snowballtools.com
+      LACONIC_HOSTED_CONFIG_github_clientid: Ov23liOaoahRTYd4nSCV
+      LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
+      LACONIC_HOSTED_CONFIG_laconicd_chain_id: laconic-testnet-2
+      LACONIC_HOSTED_CONFIG_lit_relay_api_key: 15DDD969-E75F-404D-AAD9-58A37C4FD354_snowball
+      LACONIC_HOSTED_CONFIG_aplchemy_api_key: THvPart_gqI5x02RNYSBntlmwA66I_qc
+      LACONIC_HOSTED_CONFIG_bugsnag_api_key: 8c480cd5386079f9dd44f9581264a073
+      LACONIC_HOSTED_CONFIG_passkey_wallet_rpid: dashboard.staging.apps.snowballtools.com
+      LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com
+      LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
+  meta:
+    note: Added by Snowball @ $CURRENT_DATE_TIME
+    repository: "$REPO_URL"
+    repository_ref: $LATEST_HASH
+EOF
+
 # Generate application-record.yml with incremented version
-cat >./records/application-record.yml <<EOF
+cat >./staging-records/application-record.yml <<EOF
 record:
   type: ApplicationRecord
   version: $NEW_APPLICATION_VERSION
   repository_ref: $LATEST_HASH
   repository: ["$REPO_URL"]
   app_type: webapp
-  name: deploy-frontend
+  name: staging-snowballtools-base-frontend
   app_version: $PACKAGE_VERSION
 EOF
 
-echo "Files generated successfully"
+echo "Files generated successfully."
 
-RECORD_FILE=records/application-record.yml
+RECORD_FILE=staging-records/application-record.yml
 
 # Publish ApplicationRecord
 publish_response=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $RECORD_FILE)
@@ -57,7 +82,7 @@ echo "ApplicationRecord published"
 echo $RECORD_ID
 
 # Set name to record
-REGISTRY_APP_LRN="lrn://$AUTHORITY/applications/deploy-frontend"
+REGISTRY_APP_LRN="lrn://staging-snowballtools/applications/staging-snowballtools-base-frontend"
 
 sleep 2
 yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${PACKAGE_VERSION}" "$RECORD_ID"
@@ -96,46 +121,7 @@ if [ -z "$APP_RECORD" ] || [ "null" == "$APP_RECORD" ]; then
   exit 1
 fi
 
-# Get payment address for deployer
-paymentAddress=$(yarn --silent laconic -c config.yml registry name resolve "$DEPLOYER_LRN" | jq -r '.[0].attributes.paymentAddress')
-paymentAmount=$(yarn --silent laconic -c config.yml registry name resolve "$DEPLOYER_LRN" | jq -r '.[0].attributes.minimumPayment' | sed 's/alnt//g')
-# Pay deployer if paymentAmount is not null
-if [[ -n "$paymentAmount" && "$paymentAmount" != "null" ]]; then
-  payment=$(yarn --silent laconic -c config.yml registry tokens send --address "$paymentAddress" --type alnt --quantity "$paymentAmount")
-
-  # Extract the transaction hash
-  txHash=$(echo "$payment" | jq -r '.tx.hash')
-  echo "Paid deployer with txHash as $txHash"
-
-else
-  echo "Payment amount is null; skipping payment."
-fi
-
-# Generate application-deployment-request.yml
-cat >./records/application-deployment-request.yml <<EOF
-record:
-  type: ApplicationDeploymentRequest
-  version: '1.0.0'
-  name: deploy-frontend@$PACKAGE_VERSION
-  application: lrn://$AUTHORITY/applications/deploy-frontend@$PACKAGE_VERSION
-  deployer: $DEPLOYER_LRN
-  dns: deploy
-  config:
-    env:
-      LACONIC_HOSTED_CONFIG_server_url: https://deploy-backend.apps.vaasl.io
-      LACONIC_HOSTED_CONFIG_github_clientid: Ov23liaet4yc0KX0iM1c
-      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: laconic-templates/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: laconic-templates/image-upload-pwa-example
-      LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: laconic-templates/starter.nextjs-react-tailwind
-      LACONIC_HOSTED_CONFIG_laconicd_chain_id: laconic-testnet-2
-  meta:
-    note: Added by Snowball @ $CURRENT_DATE_TIME
-    repository: "$REPO_URL"
-    repository_ref: $LATEST_HASH
-  payment: $txHash
-EOF
-
-RECORD_FILE=records/application-deployment-request.yml
+RECORD_FILE=staging-records/application-deployment-request.yml
 
 sleep 2
 deployment_response=$(yarn --silent laconic -c $CONFIG_FILE registry record publish --filename $RECORD_FILE)

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

@@ -0,0 +1,17 @@
+record:
+  type: ApplicationDeploymentRequest
+  version: '1.0.0'
+  name: deploy-frontend@1.0.0
+  application: lrn://vaasl/applications/deploy-frontend@1.0.0
+  dns: deploy
+  config:
+    env:
+      LACONIC_HOSTED_CONFIG_server_url: https://deploy-backend.apps.vaasl.io
+      LACONIC_HOSTED_CONFIG_github_clientid: Ov23liaet4yc0KX0iM1c
+      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: laconic-templates/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: laconic-templates/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_wallet_connect_id: 63cad7ba97391f63652161f484670e15
+  meta:
+    note: Added by Snowball @ Thu Apr  4 14:49:41 UTC 2024
+    repository: "https://git.vdb.to/cerc-io/snowballtools-base"
+    repository_ref: 351db16336eacc3e1f9119ceb8d1282b8e27a27e

packages/deployer/records/application-record.yml

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

packages/deployer/remove-deployment.sh

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

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

@@ -0,0 +1,24 @@
+record:
+  type: ApplicationDeploymentRequest
+  version: '1.0.0'
+  name: staging-snowballtools-base-frontend@0.0.0
+  application: crn://staging-snowballtools/applications/staging-snowballtools-base-frontend@0.0.0
+  dns: dashboard.staging.apps.snowballtools.com
+  config:
+    env:
+      LACONIC_HOSTED_CONFIG_server_url: https://snowballtools-base-api.staging.apps.snowballtools.com
+      LACONIC_HOSTED_CONFIG_github_clientid: Ov23liOaoahRTYd4nSCV
+      LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
+      LACONIC_HOSTED_CONFIG_lit_relay_api_key: 15DDD969-E75F-404D-AAD9-58A37C4FD354_snowball
+      LACONIC_HOSTED_CONFIG_aplchemy_api_key: THvPart_gqI5x02RNYSBntlmwA66I_qc
+      LACONIC_HOSTED_CONFIG_bugsnag_api_key: 8c480cd5386079f9dd44f9581264a073
+      LACONIC_HOSTED_CONFIG_passkey_wallet_rpid: dashboard.staging.apps.snowballtools.com
+      LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com
+      LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
+  meta:
+    note: Added by Snowball @ Mon Jun 24 23:51:48 UTC 2024
+    repository: "https://git.vdb.to/cerc-io/snowballtools-base"
+    repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601

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

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

packages/frontend/.env.example

@@ -3,13 +3,17 @@ VITE_SERVER_URL='http://localhost:8000'
 VITE_GITHUB_CLIENT_ID=
 VITE_GITHUB_PWA_TEMPLATE_REPO="snowball-tools/test-progressive-web-app"
 VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO="snowball-tools/image-upload-pwa-example"
-VITE_GITHUB_NEXT_APP_TEMPLATE_REPO="snowball-tools/starter.nextjs-react-tailwind"
+
+VITE_WALLET_CONNECT_ID=
 
 VITE_LIT_RELAY_API_KEY=
 
+VITE_ALCHEMY_API_KEY=
+
 VITE_BUGSNAG_API_KEY=
 
 VITE_PASSKEY_WALLET_RPID=
 VITE_TURNKEY_API_BASE_URL=
+VITE_TURNKEY_ORGANIZATION_ID=
 
-VITE_WALLET_IFRAME_URL=
+VITE_LACONICD_CHAIN_ID=

packages/frontend/package.json

@@ -41,12 +41,13 @@
     "@turnkey/http": "^2.10.0",
     "@turnkey/sdk-react": "^0.1.0",
     "@turnkey/webauthn-stamper": "^0.5.0",
+    "@walletconnect/ethereum-provider": "^2.12.2",
     "@web3modal/siwe": "4.0.5",
+    "@web3modal/wagmi": "4.0.5",
     "assert": "^2.1.0",
     "axios": "^1.6.7",
     "clsx": "^2.1.0",
     "date-fns": "^3.3.1",
-    "ethers": "^5.6.2",
     "downshift": "^8.3.2",
     "framer-motion": "^11.0.8",
     "gql-client": "^1.0.0",
@@ -68,6 +69,7 @@
     "usehooks-ts": "^2.15.1",
     "uuid": "^9.0.1",
     "viem": "^2.7.11",
+    "wagmi": "2.5.7",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

packages/frontend/public/network.json

@@ -1,11 +0,0 @@
-{
-  "chainId": "laconic-mainnet",
-  "networkName": "laconicd mainnet",
-  "namespace": "cosmos",
-  "rpcUrl": "https://laconicd-mainnet-1.laconic.com",
-  "blockExplorerUrl": "",
-  "nativeDenom": "alnt",
-  "addressPrefix": "laconic",
-  "coinType": 118,
-  "gasPrice": 0.001
-}

packages/frontend/src/App.tsx

@@ -11,8 +11,8 @@ import ProjectSearchLayout from './layouts/ProjectSearch';
 import Index from './pages';
 import AuthPage from './pages/AuthPage';
 import { DashboardLayout } from './pages/org-slug/layout';
+import Web3Provider from 'context/Web3Provider';
 import { BASE_URL } from 'utils/constants';
-import BuyPrepaidService from './pages/BuyPrepaidService';
 
 const router = createBrowserRouter([
   {
@@ -50,10 +50,6 @@ const router = createBrowserRouter([
     path: '/login',
     element: <AuthPage />,
   },
-  {
-    path: '/buy-prepaid-service',
-    element: <BuyPrepaidService />,
-  },
 ]);
 
 function App() {
@@ -79,7 +75,9 @@ function App() {
   }, []);
 
   return (
-    <RouterProvider router={router} />
+    <Web3Provider>
+      <RouterProvider router={router} />
+    </Web3Provider>
   );
 }
 

packages/frontend/src/assets/templates.ts

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

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

@@ -47,7 +47,6 @@ export const ChangeStateToProductionDialog = ({
       handleCancel={handleCancel}
       open={open}
       handleConfirm={handleConfirm}
-      confirmButtonTitle={isConfirmButtonLoading ? 'Redeploying' : 'Redeploy'}
       confirmButtonProps={{
         disabled: isConfirmButtonLoading,
         rightIcon: isConfirmButtonLoading ? (

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

@@ -4,11 +4,7 @@ import {
   MenuItem,
   MenuList,
 } from '@snowballtools/material-tailwind-react-fork';
-import {
-  ComponentPropsWithoutRef,
-  MouseEvent,
-  useCallback,
-} from 'react';
+import { ComponentPropsWithoutRef, MouseEvent, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Project } from 'gql-client';
 import { Avatar } from 'components/shared/Avatar';
@@ -87,7 +83,7 @@ export const ProjectCard = ({
             <p className={theme.title()}>{project.name}</p>
           </Tooltip>
           <p className={theme.description()}>
-            {project.deployments[0]?.applicationDeploymentRecordData?.url ?? 'No domain'}
+            {project.deployments[0]?.domain?.name ?? 'No domain'}
           </p>
         </div>
         {/* Icons */}

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

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

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

@@ -1,67 +0,0 @@
-import { useEffect } from 'react';
-
-import { Modal } from '@mui/material';
-
-import { VITE_WALLET_IFRAME_URL } from 'utils/constants';
-import useCheckBalance from '../../../hooks/useCheckBalance';
-import { useAddNetwork } from '../../../hooks/useAddNetwork';
-
-const CHECK_BALANCE_INTERVAL = 5000;
-const IFRAME_ID = 'checkBalanceIframe';
-
-const CheckBalanceIframe = ({
-  onBalanceChange,
-  isPollingEnabled,
-  amount,
-}: {
-  onBalanceChange: (value: boolean | undefined) => void;
-  isPollingEnabled: boolean;
-  amount: string;
-}) => {
-  const { isBalanceSufficient, checkBalance } = useCheckBalance(
-    amount,
-    IFRAME_ID,
-  );
-
-  const { isNetworkAvailable, setIframe } = useAddNetwork();
-  
-  useEffect(() => {
-    if (!isNetworkAvailable || isBalanceSufficient) {
-      return;
-    }
-
-    checkBalance();
-
-    if (!isPollingEnabled) {
-      return;
-    }
-    
-    const interval = setInterval(() => {
-      checkBalance();
-    }, CHECK_BALANCE_INTERVAL);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [isBalanceSufficient, isPollingEnabled, checkBalance, isNetworkAvailable]);
-
-  useEffect(() => {
-    onBalanceChange(isBalanceSufficient);
-  }, [isBalanceSufficient]);
-
-  return (
-    <Modal open={false} disableEscapeKeyDown keepMounted>
-      <iframe
-        onLoad={(event) => setIframe(event.target as HTMLIFrameElement)}
-        id={IFRAME_ID}
-        src={VITE_WALLET_IFRAME_URL}
-        width="100%"
-        height="100%"
-        sandbox="allow-scripts allow-same-origin"
-        className="border rounded-md shadow-sm"
-      />
-    </Modal>
-  );
-};
-
-export default CheckBalanceIframe;

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

@@ -1,4 +1,4 @@
-import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { FormProvider, FieldValues } from 'react-hook-form';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -8,7 +8,6 @@ import {
   AuctionParams,
   Deployer,
 } from 'gql-client';
-import { BigNumber } from 'ethers';
 
 import { Select, MenuItem, FormControl, FormHelperText } from '@mui/material';
 
@@ -21,19 +20,15 @@ import { Button } from '../../shared/Button';
 import { Input } from 'components/shared/Input';
 import { useToast } from 'components/shared/Toast';
 import { useGQLClient } from '../../../context/GQLClientContext';
-import ApproveTransactionModal from './ApproveTransactionModal';
 import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
 import { EnvironmentVariablesFormValues } from 'types/types';
-import {
-  VITE_WALLET_IFRAME_URL,
-} from 'utils/constants';
-import CheckBalanceIframe from './CheckBalanceIframe';
-import { useAddNetwork } from '../../../hooks/useAddNetwork';
+import ConnectWallet from './ConnectWallet';
+import { useWalletConnectClient } from 'context/WalletConnectContext';
 
 type ConfigureDeploymentFormValues = {
   option: string;
   lrn?: string;
-  numProviders?: string;
+  numProviders?: number;
   maxPrice?: string;
 };
 
@@ -41,19 +36,16 @@ type ConfigureFormValues = ConfigureDeploymentFormValues &
   EnvironmentVariablesFormValues;
 
 const DEFAULT_MAX_PRICE = '10000';
-const TX_APPROVAL_TIMEOUT_MS = 60000;
 
 const Configure = () => {
+  const { signClient, session, accounts } = useWalletConnectClient();
+
   const [isLoading, setIsLoading] = useState(false);
   const [deployers, setDeployers] = useState<Deployer[]>([]);
   const [selectedAccount, setSelectedAccount] = useState<string>();
   const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
   const [isPaymentLoading, setIsPaymentLoading] = useState(false);
   const [isPaymentDone, setIsPaymentDone] = useState(false);
-  const [isFrameVisible, setIsFrameVisible] = useState(false);
-  const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
-  const [balanceMessage, setBalanceMessage] = useState<string>();
-  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
 
   const [searchParams] = useSearchParams();
   const templateId = searchParams.get('templateId');
@@ -71,47 +63,22 @@ const Configure = () => {
   const navigate = useNavigate();
   const { toast, dismiss } = useToast();
   const client = useGQLClient();
-  const { networkData } = useAddNetwork()
 
   const methods = useForm<ConfigureFormValues>({
     defaultValues: {
       option: 'Auction',
       maxPrice: DEFAULT_MAX_PRICE,
       lrn: '',
-      numProviders: '1',
+      numProviders: 1,
       variables: [],
     },
   });
 
   const selectedOption = methods.watch('option');
-  const selectedNumProviders = methods.watch('numProviders') ?? '1';
-  const selectedMaxPrice = methods.watch('maxPrice') ?? DEFAULT_MAX_PRICE;
 
   const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
   const buttonSize = isTabletView ? { size: 'lg' as const } : {};
 
-  const amountToBePaid = useMemo(() => {
-    let amount: string;
-
-    if (selectedOption === 'LRN') {
-      amount = selectedDeployer?.minimumPayment?.replace(/\D/g, '') ?? '0';
-    } else {
-      if (!selectedNumProviders || !selectedMaxPrice) {
-        return '';
-      }
-
-      const bigMaxPrice = BigNumber.from(selectedMaxPrice);
-      amount = bigMaxPrice.mul(selectedNumProviders).toString();
-    }
-
-    return amount;
-  }, [
-    selectedOption,
-    selectedDeployer?.minimumPayment,
-    selectedMaxPrice,
-    selectedNumProviders,
-  ]);
-
   const createProject = async (
     data: FieldValues,
     envVariables: AddEnvironmentVariableInput[],
@@ -213,8 +180,9 @@ const Configure = () => {
           (deployer) => deployer.deployerLrn === deployerLrn,
         );
 
+        let amount: string;
         let senderAddress: string;
-        let txHash: string | null = null;
+        let txHash: string;
         if (createFormData.option === 'LRN' && !deployer?.minimumPayment) {
           toast({
             id: 'no-payment-required',
@@ -228,46 +196,39 @@ const Configure = () => {
         } else {
           if (!selectedAccount) return;
 
-          senderAddress = selectedAccount;
+          senderAddress = selectedAccount.split(':')[2];
 
-          txHash = await cosmosSendTokensHandler(senderAddress, amountToBePaid);
-
-          if (!txHash) {
-            toast({
-              id: 'unsuccessful-tx',
-              title: 'Transaction rejected',
-              variant: 'error',
-              onDismiss: dismiss,
-            });
-            setIsFrameVisible(false);
-            setIsPaymentLoading(false);
-            throw new Error('Transaction rejected');
+          if (createFormData.option === 'LRN') {
+            amount = deployer?.minimumPayment!;
+          } else {
+            amount = (
+              createFormData.numProviders * createFormData.maxPrice
+            ).toString();
           }
 
-          // Validate transaction hash
+          const amountToBePaid = amount.replace(/\D/g, '').toString();
+
+          const txHashResponse = await cosmosSendTokensHandler(
+            selectedAccount,
+            amountToBePaid,
+          );
+
+          if (!txHashResponse) {
+            console.error('Tx not successful');
+            return;
+          }
+
+          txHash = txHashResponse;
+
           const isTxHashValid = await verifyTx(
             senderAddress,
             txHash,
-            amountToBePaid,
+            amountToBePaid.toString(),
           );
-          setIsPaymentLoading(false);
 
-          if (isTxHashValid) {
-            toast({
-              id: 'payment-successful',
-              title: 'Payment successful',
-              variant: 'success',
-              onDismiss: dismiss,
-            });
-            setIsPaymentDone(true);
-          } else {
-            toast({
-              id: 'invalid-tx-hash',
-              title: 'Transaction validation failed',
-              variant: 'error',
-              onDismiss: dismiss,
-            });
-            throw new Error('Transaction validation failed');
+          if (isTxHashValid === false) {
+            console.error('Invalid Tx hash', txHash);
+            return;
           }
         }
 
@@ -287,7 +248,7 @@ const Configure = () => {
           createFormData,
           environmentVariables,
           senderAddress,
-          txHash!,
+          txHash,
         );
 
         await client.getEnvironmentVariables(projectId);
@@ -309,17 +270,17 @@ const Configure = () => {
                 `/${orgSlug}/projects/create/deploy?projectId=${projectId}`,
               );
         }
-      } catch (error: any) {
+      } catch (error) {
+        console.error(error);
         toast({
           id: 'error-deploying-app',
           title: 'Error deploying app',
           variant: 'error',
           onDismiss: dismiss,
         });
-        throw new Error(error);
       }
     },
-    [client, createProject, dismiss, toast, amountToBePaid],
+    [client, createProject, dismiss, toast],
   );
 
   const fetchDeployers = useCallback(async () => {
@@ -327,6 +288,10 @@ const Configure = () => {
     setDeployers(res.deployers);
   }, [client]);
 
+  const onAccountChange = useCallback((account: string) => {
+    setSelectedAccount(account);
+  }, []);
+
   const onDeployerChange = useCallback(
     (selectedLrn: string) => {
       const deployer = deployers.find((d) => d.deployerLrn === selectedLrn);
@@ -337,112 +302,76 @@ const Configure = () => {
 
   const cosmosSendTokensHandler = useCallback(
     async (selectedAccount: string, amount: string) => {
-      if (!selectedAccount) {
-        throw new Error('Account not selected');
+      if (!signClient || !session || !selectedAccount) {
+        return;
       }
 
-      const senderAddress = selectedAccount;
+      const chainId = selectedAccount.split(':')[1];
+      const senderAddress = selectedAccount.split(':')[2];
       const snowballAddress = await client.getAddress();
-      let timeoutId;
 
       try {
         setIsPaymentDone(false);
         setIsPaymentLoading(true);
 
-        await requestTx(senderAddress, snowballAddress, amount);
-
-        const txHash = await new Promise<string | null>((resolve, reject) => {
-          // Call cleanup method only if appropriate event type is recieved
-          const cleanup = () => {
-            setIsFrameVisible(false);
-            window.removeEventListener('message', handleTxStatus);
-          };
-
-          const handleTxStatus = async (event: MessageEvent) => {
-            if (event.origin !== VITE_WALLET_IFRAME_URL) return;
-
-            if (event.data.type === 'TRANSACTION_RESPONSE') {
-              const txResponse = event.data.data;
-              resolve(txResponse);
-
-              cleanup();
-            } else if (event.data.type === 'ERROR') {
-              console.error('Error from wallet:', event.data.message);
-              reject(new Error('Transaction failed'));
-              toast({
-                id: 'error-transaction',
-                title: 'Error during transaction',
-                variant: 'error',
-                onDismiss: dismiss,
-              });
-
-              cleanup();
-            }
-          };
-
-          window.addEventListener('message', handleTxStatus);
-
-          // Set a timeout, consider unsuccessful after 1 min
-          timeoutId = setTimeout(() => {
-            reject(new Error('Transaction timeout'));
-            window.removeEventListener('message', handleTxStatus);
-            toast({
-              id: 'transaction-timeout',
-              title: 'The transaction request timed out. Please try again',
-              variant: 'error',
-              onDismiss: dismiss,
-            });
-            setIsFrameVisible(false);
-            setIsPaymentLoading(false);
-          }, TX_APPROVAL_TIMEOUT_MS);
+        toast({
+          id: 'sending-payment-request',
+          title: 'Check your wallet and approve payment request',
+          variant: 'loading',
+          onDismiss: dismiss,
         });
-        return txHash;
-      } catch (error) {
-        console.error('Error in transaction:', error);
-        throw new Error('Error in transaction');
+
+        const result: { signature: string } = await signClient.request({
+          topic: session.topic,
+          chainId: `cosmos:${chainId}`,
+          request: {
+            method: 'cosmos_sendTokens',
+            params: [
+              {
+                from: senderAddress,
+                to: snowballAddress,
+                value: amount,
+              },
+            ],
+          },
+        });
+
+        if (!result) {
+          throw new Error('Error completing transaction');
+        }
+
+        toast({
+          id: 'payment-successful',
+          title: 'Payment successful',
+          variant: 'success',
+          onDismiss: dismiss,
+        });
+
+        setIsPaymentDone(true);
+
+        return result.signature;
+      } catch (error: any) {
+        console.error('Error sending tokens', error);
+
+        toast({
+          id: 'error-sending-tokens',
+          title: 'Error sending tokens',
+          variant: 'error',
+          onDismiss: dismiss,
+        });
+
+        setIsPaymentDone(false);
       } finally {
-        clearTimeout(timeoutId);
+        setIsPaymentLoading(false);
       }
     },
-    [client, dismiss, toast],
+    [session, signClient, toast],
   );
 
-  const requestTx = async (
-    sender: string,
-    recipient: string,
-    amount: string,
-  ) => {
-    const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
-
-    if (!iframe.contentWindow) {
-      console.error('Iframe not found or not loaded');
-      throw new Error('Iframe not found or not loaded');
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: 'REQUEST_TX',
-        chainId: networkData?.chainId,
-        fromAddress: sender,
-        toAddress: recipient,
-        amount,
-      },
-      VITE_WALLET_IFRAME_URL,
-    );
-
-    setIsFrameVisible(true);
-  };
-
   useEffect(() => {
     fetchDeployers();
   }, []);
 
-  useEffect(() => {
-    if (isBalanceSufficient) {
-      setBalanceMessage(undefined);
-    }
-  }, [isBalanceSufficient]);
-
   return (
     <div className="space-y-7 px-4 py-6">
       <div className="flex justify-between mb-6">
@@ -559,7 +488,6 @@ const Configure = () => {
                         type="number"
                         value={value}
                         onChange={(e) => onChange(e)}
-                        min={1}
                       />
                     )}
                   />
@@ -573,7 +501,7 @@ const Configure = () => {
                     control={methods.control}
                     rules={{ required: true }}
                     render={({ field: { value, onChange } }) => (
-                      <Input type="number" value={value} onChange={onChange} min={1} />
+                      <Input type="number" value={value} onChange={onChange} />
                     )}
                   />
                 </div>
@@ -592,7 +520,7 @@ const Configure = () => {
                 <Button
                   {...buttonSize}
                   type="submit"
-                  disabled={isLoading || !selectedDeployer}
+                  disabled={isLoading || !selectedDeployer || !selectedAccount}
                   rightIcon={
                     isLoading ? (
                       <LoadingIcon className="animate-spin" />
@@ -605,83 +533,42 @@ const Configure = () => {
                 </Button>
               </div>
             ) : (
-              <div className="flex gap-4">
-                <Button
-                  {...buttonSize}
-                  type="submit"
-                  shape="default"
-                  disabled={
-                    isLoading ||
-                    isPaymentLoading ||
-                    !selectedAccount ||
-                    !isBalanceSufficient ||
-                    amountToBePaid === '' ||
-                    selectedNumProviders === ''
-                  }
-                  rightIcon={
-                    isLoading || isPaymentLoading ? (
-                      <LoadingIcon className="animate-spin" />
-                    ) : (
-                      <ArrowRightCircleFilledIcon />
-                    )
-                  }
-                >
-                  {!isPaymentDone
-                    ? isPaymentLoading
-                      ? 'Transaction Requested'
-                      : 'Pay and Deploy'
-                    : isLoading
-                      ? 'Deploying'
-                      : 'Deploy'}
-                </Button>
-                {isAccountsDataReceived && isBalanceSufficient !== undefined ? (
-                  !selectedAccount || !isBalanceSufficient ? (
-                    <div className="flex items-center gap-4">
-                      <Button
-                        {...buttonSize}
-                        shape="default"
-                        onClick={(e: any) => {
-                          e.preventDefault();
-                          setBalanceMessage('Waiting for payment');
-                          window.open(
-                            'https://store.laconic.com',
-                            '_blank',
-                            'noopener,noreferrer',
-                          );
-                        }}
-                      >
-                        Buy prepaid service
-                      </Button>
-                      <p className="text-gray-700 dark:text-gray-300">
-                        {balanceMessage !== undefined ? (
-                          <div className="flex items-center gap-2 text-white">
-                            <LoadingIcon className="animate-spin w-5 h-5" />
-                            <p>{balanceMessage}</p>
-                          </div>
-                        ) : !selectedAccount ? (
-                          'No accounts found. Create a wallet.'
+              <>
+                <Heading as="h4" className="md:text-lg font-medium mb-3">
+                  Connect to your wallet
+                </Heading>
+                <ConnectWallet onAccountChange={onAccountChange} />
+                {accounts && accounts?.length > 0 && (
+                  <div>
+                    <Button
+                      {...buttonSize}
+                      type="submit"
+                      shape="default"
+                      disabled={
+                        isLoading || isPaymentLoading || !selectedAccount
+                      }
+                      rightIcon={
+                        isLoading || isPaymentLoading ? (
+                          <LoadingIcon className="animate-spin" />
                         ) : (
-                          'Insufficient funds.'
-                        )}
-                      </p>
-                    </div>
-                  ) : null
-                ) : null}
-              </div>
+                          <ArrowRightCircleFilledIcon />
+                        )
+                      }
+                    >
+                      {!isPaymentDone
+                        ? isPaymentLoading
+                          ? 'Transaction Requested'
+                          : 'Pay and Deploy'
+                        : isLoading
+                          ? 'Deploying'
+                          : 'Deploy'}
+                    </Button>
+                  </div>
+                )}
+              </>
             )}
           </form>
         </FormProvider>
-
-        <ApproveTransactionModal
-          setAccount={setSelectedAccount}
-          setIsDataReceived={setIsAccountsDataReceived}
-          isVisible={isFrameVisible}
-        />
-        <CheckBalanceIframe
-          onBalanceChange={setIsBalanceSufficient}
-          amount={amountToBePaid}
-          isPollingEnabled={true}
-        />
       </div>
     </div>
   );

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

@@ -16,7 +16,7 @@ import { MockConnectGitCard } from './MockConnectGitCard';
 import { VITE_GITHUB_CLIENT_ID } from 'utils/constants';
 import { LaconicIcon } from 'components/shared/CustomIcon/LaconicIcon';
 
-const SCOPES = 'public_repo user';
+const SCOPES = 'repo user';
 const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${VITE_GITHUB_CLIENT_ID}&scope=${encodeURIComponent(SCOPES)}`;
 
 interface ConnectAccountInterface {

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

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

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

@@ -1,8 +1,6 @@
 import React, { useMemo } from 'react';
 import { SegmentedControls } from 'components/shared/SegmentedControls';
 import { useState } from 'react';
-import { useMediaQuery } from 'usehooks-ts';
-
 import {
   GithubIcon,
   LockIcon,
@@ -10,7 +8,7 @@ import {
   TemplateIconType,
 } from 'components/shared/CustomIcon';
 import { relativeTimeISO } from 'utils/time';
-import templates from 'assets/templates';
+import { useMediaQuery } from 'usehooks-ts';
 
 export const MockConnectGitCard = () => {
   const [segmentedControlsValue, setSegmentedControlsValue] =
@@ -48,6 +46,29 @@ export const MockConnectGitCard = () => {
     },
   ];
 
+  const TEMPLATE_CONTENT = [
+    {
+      name: 'Web app',
+      icon: 'web',
+    },
+    {
+      name: 'Progressive Web App (PWA)',
+      icon: 'pwa',
+    },
+    {
+      name: 'React Native',
+      icon: 'react-native',
+    },
+    {
+      name: 'Kotlin',
+      icon: 'kotlin',
+    },
+    {
+      name: 'Swift',
+      icon: 'swift',
+    },
+  ];
+
   const renderContent = useMemo(() => {
     if (segmentedControlsValue === 'import') {
       return (
@@ -65,7 +86,7 @@ export const MockConnectGitCard = () => {
     }
     return (
       <div className="grid grid-cols-1 lg:grid-cols-2 relative z-0">
-        {templates.map((template, index) => (
+        {TEMPLATE_CONTENT.map((template, index) => (
           <MockTemplateCard key={index} {...template} />
         ))}
       </div>

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

@@ -49,21 +49,21 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
       onClick={createProject}
     >
       {/* Icon container */}
-      <div className="w-10 h-10 bg-base-bg rounded-md justify-center items-center flex dark:bg-overlay">
+      <div className="w-10 h-10 bg-base-bg rounded-md justify-center items-center flex">
         <GithubIcon />
       </div>
       {/* Content */}
       <div className="flex flex-1 gap-3 flex-wrap">
         <div className="flex flex-col gap-1">
-          <p className="text-elements-high-em dark:text-foreground text-sm font-medium tracking-[-0.006em]">
+          <p className="text-elements-high-em text-sm font-medium tracking-[-0.006em]">
             {repository.full_name}
           </p>
-          <p className="text-elements-low-em dark:text-foreground-secondary text-xs">
+          <p className="text-elements-low-em text-xs">
             {repository.updated_at && relativeTimeISO(repository.updated_at)}
           </p>
         </div>
         {repository.visibility === 'private' && (
-          <div className="bg-orange-50 border border-orange-200 px-2 py-1 flex items-center gap-1 rounded-lg text-xs text-orange-600 dark:text-error h-fit">
+          <div className="bg-orange-50 border border-orange-200 px-2 py-1 flex items-center gap-1 rounded-lg text-xs text-orange-600 h-fit">
             <LockIcon />
             Private
           </div>

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

@@ -166,9 +166,7 @@ export const RepositoryList = () => {
         </div>
       ) : (
         <div className="mt-4 p-6 flex flex-col gap-4 items-center justify-center">
-          <p className="text-elements-high-em dark:text-foreground font-sans">
-            No repository found
-          </p>
+          <p className="text-elements-high-em font-sans">No repository found</p>
           <Button
             variant="tertiary"
             leftIcon={<RefreshIcon />}

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

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

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

@@ -92,7 +92,7 @@ const DeploymentDetailsCard = ({
     }
   };
 
-  const fetchDeploymentLogs = useCallback(async () => {
+  const fetchDeploymentLogs = async () => {
     setDeploymentLogs('Loading logs...');
     handleOpenDialog();
     const statusUrl = `${deployment.deployer.deployerApiUrl}/${deployment.applicationDeploymentRequestId}`;
@@ -108,7 +108,7 @@ const DeploymentDetailsCard = ({
       );
       setDeploymentLogs(logsRes);
     }
-  }, [deployment.deployer, deployment.applicationDeploymentRequestId]);
+  };
 
   const renderDeploymentStatus = useCallback(
     (className?: string) => {
@@ -127,7 +127,7 @@ const DeploymentDetailsCard = ({
         </Tooltip>
       );
     },
-    [deployment.status, deployment.commitHash, fetchDeploymentLogs],
+    [deployment.status, deployment.commitHash],
   );
 
   return (

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

@@ -10,6 +10,7 @@ import {
 import { Deployment, Domain, Environment, Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
 import {
+  GlobeIcon,
   HorizontalDotIcon,
   LinkIcon,
   RefreshIcon,
@@ -17,6 +18,7 @@ import {
   UndoIcon,
   CrossCircleIcon,
 } from 'components/shared/CustomIcon';
+import AssignDomainDialog from './AssignDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
 import { cn } from 'utils/classnames';
 import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
@@ -47,8 +49,8 @@ export const DeploymentMenu = ({
   const [redeployToProduction, setRedeployToProduction] = useState(false);
   const [deleteDeploymentDialog, setDeleteDeploymentDialog] = useState(false);
   const [isConfirmDeleteLoading, setIsConfirmDeleteLoading] = useState(false);
-  const [isConfirmUpdateLoading, setIsConfirmUpdateLoading] = useState(false);
   const [rollbackDeployment, setRollbackDeployment] = useState(false);
+  const [assignDomainDialog, setAssignDomainDialog] = useState(false);
   const [isConfirmButtonLoading, setConfirmButtonLoadingLoading] =
     useState(false);
 
@@ -56,8 +58,6 @@ export const DeploymentMenu = ({
     const isUpdated = await client.updateDeploymentToProd(deployment.id);
     if (isUpdated.updateDeploymentToProd) {
       await onUpdate();
-      setIsConfirmUpdateLoading(false);
-
       toast({
         id: 'deployment_changed_to_production',
         title: 'Deployment changed to production',
@@ -102,8 +102,6 @@ export const DeploymentMenu = ({
     );
     if (isRollbacked.rollbackDeployment) {
       await onUpdate();
-      setIsConfirmUpdateLoading(false);
-
       toast({
         id: 'deployment_rolled_back',
         title: 'Deployment rolled back',
@@ -175,6 +173,12 @@ export const DeploymentMenu = ({
                 <LinkIcon /> Visit
               </a>
             </MenuItem>
+            <MenuItem
+              className="hover:bg-base-bg-emphasized flex items-center gap-3"
+              onClick={() => setAssignDomainDialog(!assignDomainDialog)}
+            >
+              <GlobeIcon /> Assign domain
+            </MenuItem>
             <MenuItem
               className="hover:bg-base-bg-emphasized flex items-center gap-3"
               onClick={() => setChangeToProduction(!changeToProduction)}
@@ -222,11 +226,9 @@ export const DeploymentMenu = ({
         handleCancel={() => setChangeToProduction((preVal) => !preVal)}
         open={changeToProduction}
         handleConfirm={async () => {
-          setIsConfirmUpdateLoading(true);
           await updateDeployment();
           setChangeToProduction((preVal) => !preVal);
         }}
-        isConfirmButtonLoading={isConfirmUpdateLoading}
         deployment={deployment}
         domains={prodBranchDomains}
       />
@@ -241,7 +243,7 @@ export const DeploymentMenu = ({
           setRedeployToProduction((preVal) => !preVal);
         }}
         deployment={deployment}
-        domains={prodBranchDomains}
+        domains={deployment.domain ? [deployment.domain] : []}
         isConfirmButtonLoading={isConfirmButtonLoading}
       />
       {Boolean(currentDeployment) && (
@@ -251,16 +253,18 @@ export const DeploymentMenu = ({
           open={rollbackDeployment}
           confirmButtonTitle="Rollback"
           handleConfirm={async () => {
-            setIsConfirmUpdateLoading(true);
             await rollbackDeploymentHandler();
             setRollbackDeployment((preVal) => !preVal);
           }}
           deployment={currentDeployment}
           newDeployment={deployment}
-          domains={prodBranchDomains}
-          isConfirmButtonLoading={isConfirmUpdateLoading}
+          domains={currentDeployment.domain ? [currentDeployment.domain] : []}
         />
       )}
+      <AssignDomainDialog
+        open={assignDomainDialog}
+        handleOpen={() => setAssignDomainDialog(!assignDomainDialog)}
+      />
       <DeleteDeploymentDialog
         open={deleteDeploymentDialog}
         handleConfirm={async () => {

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

@@ -43,11 +43,6 @@ export const AuctionCard = ({ project }: { project: Project }) => {
 
   const checkAuctionStatus = useCallback(async () => {
     const result = await client.getAuctionData(project.auctionId);
-
-    if (!result) {
-      return
-    }
-
     setAuctionStatus(result.status);
     setAuctionDetails(result);
   }, [project.auctionId, project.deployers, project.fundsReleased]);

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

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { DNSRecordAttributes, Domain, DomainStatus, Project } from 'gql-client';
+import { useState } from 'react';
+import { Domain, DomainStatus, Project } from 'gql-client';
 
 import {
   Typography,
@@ -14,27 +14,22 @@ import EditDomainDialog from './EditDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
 import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
 import { useToast } from 'components/shared/Toast';
-import { GearIcon } from 'components/shared/CustomIcon';
+import { Tag } from 'components/shared/Tag';
+import {
+  CheckIcon,
+  CrossIcon,
+  GearIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
 import { Heading } from 'components/shared/Heading';
 import { Button } from 'components/shared/Button';
-import { useParams } from 'react-router-dom';
 
-// NOTE: Commented code for verify domain functionality
-// import { Tag } from 'components/shared/Tag';
-// import {
-//   CheckIcon,
-//   CrossIcon,
-//   LoadingIcon,
-// } from 'components/shared/CustomIcon';
-
-// enum RefreshStatus {
-//   IDLE,
-//   CHECKING,
-//   CHECK_SUCCESS,
-//   CHECK_FAIL,
-// }
-
-// const CHECK_FAIL_TIMEOUT = 5000; // In milliseconds
+enum RefreshStatus {
+  IDLE,
+  CHECKING,
+  CHECK_SUCCESS,
+  CHECK_FAIL,
+}
 
 interface DomainCardProps {
   domains: Domain[];
@@ -44,6 +39,14 @@ interface DomainCardProps {
   onUpdate: () => Promise<void>;
 }
 
+const CHECK_FAIL_TIMEOUT = 5000; // In milliseconds
+
+// TODO: Get domain record
+const DOMAIN_RECORD = {
+  type: 'A',
+  name: '@',
+  value: '56.49.19.21',
+};
 
 const DomainCard = ({
   domains,
@@ -53,11 +56,9 @@ const DomainCard = ({
   onUpdate,
 }: DomainCardProps) => {
   const { toast, dismiss } = useToast();
-  const { id } = useParams();
+  const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
-  const [dnsRecord, setDnsRecord] = useState<DNSRecordAttributes | null>(null);
-  // const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE);
 
   const client = useGQLClient();
 
@@ -82,33 +83,13 @@ const DomainCard = ({
     }
   };
 
-  useEffect(() => {
-    const fetchDNSData = async () => {
-      if (id === undefined) {
-        toast({
-          id: 'domain_cannot_find_project',
-          title: 'Cannot find project',
-          variant: 'error',
-          onDismiss: dismiss,
-        });
-        return;
-      }
-
-      const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id);
-
-      setDnsRecord(dnsRecordResponse.latestDNSRecord);
-    };
-
-    fetchDNSData();
-  }, [id, client]);
-
   return (
     <>
       <div className="flex justify-between py-3">
         <div className="flex justify-start gap-1">
           <Heading as="h6" className="flex-col">
             {domain.name}{' '}
-            {/* <Tag
+            <Tag
               type={
                 domain.status === DomainStatus.Live ? 'positive' : 'negative'
               }
@@ -121,12 +102,12 @@ const DomainCard = ({
               }
             >
               {domain.status}
-            </Tag> */}
+            </Tag>
           </Heading>
         </div>
 
         <div className="flex justify-start gap-1">
-          {/* <i
+          <i
             id="refresh"
             className="cursor-pointer"
             onClick={() => {
@@ -141,7 +122,7 @@ const DomainCard = ({
             ) : (
               'L'
             )}
-          </i> */}
+          </i>
           <Menu placement="bottom-end">
             <MenuHandler>
               <Button iconOnly>
@@ -182,11 +163,11 @@ const DomainCard = ({
       <Typography variant="small">Production</Typography>
       {domain.status === DomainStatus.Pending && (
         <Card className="bg-slate-100 p-4 text-sm">
-          {/* {refreshStatus === RefreshStatus.IDLE ? ( */}
-          <Heading>
-            ^ Add these records to your domain {/* and refresh to check */}
-          </Heading>
-          {/* ) : refreshStatus === RefreshStatus.CHECKING ? (
+          {refreshStatus === RefreshStatus.IDLE ? (
+            <Heading>
+              ^ Add these records to your domain and refresh to check
+            </Heading>
+          ) : refreshStatus === RefreshStatus.CHECKING ? (
             <Heading className="text-blue-500">
               ^ Checking records for {domain.name}
             </Heading>
@@ -197,7 +178,7 @@ const DomainCard = ({
                 hours. Please ensure you added the correct records and refresh.
               </div>
             </div>
-          )} */}
+          )}
 
           <table>
             <thead>
@@ -208,15 +189,11 @@ const DomainCard = ({
               </tr>
             </thead>
             <tbody>
-              {dnsRecord ? (
-                <tr>
-                  <td>{dnsRecord.resourceType}</td>
-                  <td>@</td>
-                  <td>{dnsRecord.value ?? 'Not Configured'}</td>
-                </tr>
-              ) : (
-                <p className={'text-red-500'}>DNS record data not available</p>
-              )}
+              <tr>
+                <td>{DOMAIN_RECORD.type}</td>
+                <td>{DOMAIN_RECORD.name}</td>
+                <td>{DOMAIN_RECORD.value}</td>
+              </tr>
             </tbody>
           </table>
         </Card>

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

@@ -1,15 +1,11 @@
-import {
-  useCallback,
-  useEffect,
-} from 'react';
-import {
-  useForm,
-  SubmitHandler,
-} from 'react-hook-form';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Controller, useForm, SubmitHandler } from 'react-hook-form';
 import { Domain } from 'gql-client';
 
 import {
   Typography,
+  Select,
+  Option,
 } from '@snowballtools/material-tailwind-react-fork';
 
 import { useGQLClient } from 'context/GQLClientContext';
@@ -18,15 +14,7 @@ import { Button } from 'components/shared/Button';
 import { Input } from 'components/shared/Input';
 import { useToast } from 'components/shared/Toast';
 
-// NOTE: Commented code for redirect domain functionality
-// import {
-//   Select,
-//   Option,
-// } from '@snowballtools/material-tailwind-react-fork';
-// import { Controller } from 'react-hook-form';
-// import { useMemo } from 'react';
-
-// const DEFAULT_REDIRECT_OPTIONS = ['none'];
+const DEFAULT_REDIRECT_OPTIONS = ['none'];
 
 interface EditDomainDialogProp {
   domains: Domain[];
@@ -40,7 +28,7 @@ interface EditDomainDialogProp {
 type EditDomainValues = {
   name: string;
   branch: string;
-  // redirectedTo: string;
+  redirectedTo: string;
 };
 
 const EditDomainDialog = ({
@@ -54,58 +42,58 @@ const EditDomainDialog = ({
   const client = useGQLClient();
   const { toast, dismiss } = useToast();
 
-  // const getRedirectUrl = (domain: Domain) => {
-  //   const redirectDomain = domain.redirectTo;
+  const getRedirectUrl = (domain: Domain) => {
+    const redirectDomain = domain.redirectTo;
 
-  //   if (redirectDomain !== null) {
-  //     return redirectDomain?.name;
-  //   } else {
-  //     return 'none';
-  //   }
-  // };
+    if (redirectDomain !== null) {
+      return redirectDomain?.name;
+    } else {
+      return 'none';
+    }
+  };
 
-  // const redirectOptions = useMemo(() => {
-  //   const domainNames = domains
-  //     .filter((domainData) => domainData.id !== domain.id)
-  //     .map((domain) => domain.name);
-  //   return ['none', ...domainNames];
-  // }, [domain, domains]);
+  const redirectOptions = useMemo(() => {
+    const domainNames = domains
+      .filter((domainData) => domainData.id !== domain.id)
+      .map((domain) => domain.name);
+    return ['none', ...domainNames];
+  }, [domain, domains]);
 
-  // const domainRedirectedFrom = useMemo(() => {
-  //   return domains.find(
-  //     (domainData) => domainData.redirectTo?.id === domain.id,
-  //   );
-  // }, [domains, domain]);
+  const domainRedirectedFrom = useMemo(() => {
+    return domains.find(
+      (domainData) => domainData.redirectTo?.id === domain.id,
+    );
+  }, [domains, domain]);
 
-  // const isDisableDropdown = useMemo(() => {
-  //   return domainRedirectedFrom !== undefined;
-  // }, [domain, domains]);
+  const isDisableDropdown = useMemo(() => {
+    return domainRedirectedFrom !== undefined;
+  }, [domain, domains]);
 
   const {
     handleSubmit,
     register,
-    // control,
-    // watch,
+    control,
+    watch,
     reset,
     formState: { isValid, isDirty },
   } = useForm({
     defaultValues: {
       name: domain.name,
       branch: domain.branch,
-      // redirectedTo: getRedirectUrl(domain),
+      redirectedTo: getRedirectUrl(domain),
     },
   });
 
   const updateDomainHandler: SubmitHandler<EditDomainValues> = useCallback(
     async (data) => {
-      // const domainRedirectTo = domains.find(
-      //   (domainData) => data.redirectedTo === domainData.name,
-      // );
+      const domainRedirectTo = domains.find(
+        (domainData) => data.redirectedTo === domainData.name,
+      );
 
       const updates = {
         name: data.name ? data.name : domain.name,
         branch: data.branch ? data.branch : domain.branch,
-        // redirectToId: domainRedirectTo ? domainRedirectTo.id : null,
+        redirectToId: domainRedirectTo ? domainRedirectTo.id : null,
       };
 
       const { updateDomain } = await client.updateDomain(domain.id, updates);
@@ -137,7 +125,7 @@ const EditDomainDialog = ({
     reset({
       name: domain.name,
       branch: domain.branch,
-      // redirectedTo: getRedirectUrl(domain),
+      redirectedTo: getRedirectUrl(domain),
     });
   }, [domain]);
 
@@ -149,7 +137,7 @@ const EditDomainDialog = ({
           <Modal.Body className="flex flex-col gap-2">
             <Typography variant="small">Domain name</Typography>
             <Input {...register('name')} />
-            {/* <Typography variant="small">Redirect to</Typography>
+            <Typography variant="small">Redirect to</Typography>
             <Controller
               name="redirectedTo"
               control={control}
@@ -173,7 +161,7 @@ const EditDomainDialog = ({
                   further.
                 </Typography>
               </div>
-            )} */}
+            )}
             <Typography variant="small">Git branch</Typography>
             <Input
               {...register('branch', {
@@ -181,8 +169,8 @@ const EditDomainDialog = ({
                   Boolean(branches.length) ? branches.includes(value) : true,
               })}
               disabled={
-                !Boolean(branches.length)
-                // || watch('redirectedTo') !== DEFAULT_REDIRECT_OPTIONS[0]
+                !Boolean(branches.length) ||
+                watch('redirectedTo') !== DEFAULT_REDIRECT_OPTIONS[0]
               }
             />
             {!isValid && (

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

@@ -17,7 +17,6 @@ const GitSelectionSection = ({
         <div className="grow">Github</div>
         <div>{'>'}</div>
       </div>
-      {/* 
       <div
         className="flex gap-4 border-b-2 border-gray-200 cursor-pointer p-1"
         onClick={() => {}}
@@ -26,7 +25,6 @@ const GitSelectionSection = ({
         <div className="grow">Gitea</div>
         <div>{'>'}</div>
       </div>
-      */}
     </>
   );
 };

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

@@ -1,14 +1,12 @@
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 
 import { Heading } from 'components/shared/Heading';
+import { InlineNotification } from 'components/shared/InlineNotification';
 import { Input } from 'components/shared/Input';
 import { Button } from 'components/shared/Button';
-
-// NOTE: Commented code for redirect domain functionality
-// import { useEffect, useState } from 'react';
-// import { InlineNotification } from 'components/shared/InlineNotification';
-// import { Radio } from 'components/shared/Radio';
+import { Radio } from 'components/shared/Radio';
 
 interface SetupDomainFormValues {
   domainName: string;
@@ -20,45 +18,47 @@ const SetupDomain = () => {
     register,
     handleSubmit,
     formState: { isValid },
-    // watch,
-    // setValue,
+    watch,
+    setValue,
   } = useForm<SetupDomainFormValues>({
     defaultValues: {
       domainName: '',
-      // isWWW: 'false',
+      isWWW: 'false',
     },
     mode: 'onChange',
   });
 
+  const [domainStr, setDomainStr] = useState<string>('');
   const navigate = useNavigate();
-  // const [domainStr, setDomainStr] = useState<string>('');
-  // const isWWWRadioOptions = [
-  //   { label: domainStr, value: 'false' },
-  //   { label: `www.${domainStr}`, value: 'true' },
-  // ];
+  const isWWWRadioOptions = [
+    { label: domainStr, value: 'false' },
+    { label: `www.${domainStr}`, value: 'true' },
+  ];
 
-  // useEffect(() => {
-  //   const subscription = watch((value, { name }) => {
-  //     if (name === 'domainName' && value.domainName) {
-  //       const domainArr = value.domainName.split('www.');
-  //       const cleanedDomain =
-  //         domainArr.length > 1 ? domainArr[1] : domainArr[0];
-  //       setDomainStr(cleanedDomain);
+  useEffect(() => {
+    const subscription = watch((value, { name }) => {
+      if (name === 'domainName' && value.domainName) {
+        const domainArr = value.domainName.split('www.');
+        const cleanedDomain =
+          domainArr.length > 1 ? domainArr[1] : domainArr[0];
+        setDomainStr(cleanedDomain);
 
-  //       setValue(
-  //         'isWWW',
-  //         value.domainName.startsWith('www.') ? 'true' : 'false',
-  //       );
-  //     }
-  //   });
+        setValue(
+          'isWWW',
+          value.domainName.startsWith('www.') ? 'true' : 'false',
+        );
+      }
+    });
 
-  //   return () => subscription.unsubscribe();
-  // }, [watch, setValue]);
+    return () => subscription.unsubscribe();
+  }, [watch, setValue]);
 
   return (
     <form
-      onSubmit={handleSubmit((e) => {
-        navigate(`config?name=${e.domainName}`)
+      onSubmit={handleSubmit(() => {
+        watch('isWWW') === 'true'
+          ? navigate(`config?name=www.${domainStr}`)
+          : navigate(`config?name=${domainStr}`);
       })}
       className="flex flex-col gap-6 w-full"
     >
@@ -67,7 +67,7 @@ const SetupDomain = () => {
           Setup domain name
         </Heading>
         <p className="text-slate-500 text-sm font-normal leading-tight">
-          Add your domain {/* and setup redirects */}
+          Add your domain and setup redirects
         </p>
       </div>
 
@@ -80,7 +80,7 @@ const SetupDomain = () => {
         label="Domain name"
       />
 
-      {/* {isValid && (
+      {isValid && (
         <div className="self-stretch flex flex-col gap-4">
           <Heading className="text-sky-950 text-lg font-medium leading-normal">
             Primary domain
@@ -99,7 +99,7 @@ const SetupDomain = () => {
             }. Redirect preferences can be changed later`}
           />
         </div>
-      )} */}
+      )}
 
       <div className="self-stretch">
         <Button disabled={!isValid} type="submit" shape="default">

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

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

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

@@ -1,11 +1,14 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { User } from 'gql-client';
 import { motion } from 'framer-motion';
+import { useDisconnect } from 'wagmi';
 
 import { useGQLClient } from 'context/GQLClientContext';
 import {
+  GlobeIcon,
   LifeBuoyIcon,
+  LogoutIcon,
   QuestionMarkRoundIcon,
 } from 'components/shared/CustomIcon';
 import { Tabs } from 'components/shared/Tabs';
@@ -13,9 +16,10 @@ import { Logo } from 'components/Logo';
 import { Avatar } from 'components/shared/Avatar';
 import { formatAddress } from 'utils/format';
 import { getInitials } from 'utils/geInitials';
+import { Button } from 'components/shared/Button';
 import { cn } from 'utils/classnames';
 import { useMediaQuery } from 'usehooks-ts';
-import { SHOPIFY_APP_URL } from '../../../constants';
+import { BASE_URL } from 'utils/constants';
 
 interface SidebarProps {
   mobileOpen?: boolean;
@@ -23,10 +27,12 @@ interface SidebarProps {
 
 export const Sidebar = ({ mobileOpen }: SidebarProps) => {
   const { orgSlug } = useParams();
+  const navigate = useNavigate();
   const client = useGQLClient();
   const isDesktop = useMediaQuery('(min-width: 960px)');
 
   const [user, setUser] = useState<User>();
+  const { disconnect } = useDisconnect();
 
   const fetchUser = useCallback(async () => {
     const { user } = await client.getUser();
@@ -37,6 +43,16 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
     fetchUser();
   }, []);
 
+  const handleLogOut = useCallback(async () => {
+    await fetch(`${BASE_URL}/auth/logout`, {
+      method: 'POST',
+      credentials: 'include',
+    });
+    localStorage.clear();
+    disconnect();
+    navigate('/login');
+  }, [disconnect, navigate]);
+
   return (
     <motion.nav
       initial={{ x: -320 }}
@@ -66,21 +82,20 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
           <Tabs defaultValue="Projects" orientation="vertical">
             {/* // TODO: use proper link buttons */}
             <Tabs.List>
-              <Tabs.Trigger icon={<QuestionMarkRoundIcon />} value="">
-                <a
-                  className="cursor-pointer font-mono"
-                  href={`${SHOPIFY_APP_URL}/pages/instruction-faq`}
-                >
-                  DOCUMENTATION
+              <Tabs.Trigger
+                icon={<GlobeIcon />}
+                value=""
+                className="hidden lg:flex"
+              >
+                <a className="cursor-pointer font-mono" onClick={handleLogOut}>
+                  LOG OUT
                 </a>
               </Tabs.Trigger>
+              <Tabs.Trigger icon={<QuestionMarkRoundIcon />} value="">
+                <a className="cursor-pointer font-mono">DOCUMENTATION</a>
+              </Tabs.Trigger>
               <Tabs.Trigger icon={<LifeBuoyIcon />} value="">
-                <a
-                  className="cursor-pointer font-mono"
-                  href="https://discord.com/invite/ukhbBemyxY"
-                >
-                  SUPPORT
-                </a>
+                <a className="cursor-pointer font-mono">SUPPORT</a>
               </Tabs.Trigger>
             </Tabs.List>
           </Tabs>
@@ -100,6 +115,14 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
             </p>
           </div>
         )}
+        <Button
+          iconOnly
+          variant="ghost"
+          className="text-elements-low-em"
+          onClick={handleLogOut}
+        >
+          <LogoutIcon />
+        </Button>
       </div>
     </motion.nav>
   );

packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx

@@ -1,155 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { generateNonce, SiweMessage } from 'siwe';
-import axios from 'axios';
-import { useNavigate } from 'react-router-dom';
-
-import { Box, Modal } from '@mui/material';
-
-import { BASE_URL, VITE_WALLET_IFRAME_URL } from 'utils/constants';
-import { REQUEST_CREATE_OR_GET_ACCOUNTS, WALLET_ACCOUNTS_DATA } from '../../../constants';
-
-const axiosInstance = axios.create({
-  baseURL: BASE_URL,
-  headers: {
-    'Content-Type': 'application/json',
-    'Access-Control-Allow-Origin': '*',
-  },
-  withCredentials: true,
-});
-
-const AutoSignInIFrameModal = () => {
-  const navigate = useNavigate();
-
-  const [accountAddress, setAccountAddress] = useState();
-
-  useEffect(() => {
-    const handleSignInResponse = async (event: MessageEvent) => {
-      if (event.origin !== VITE_WALLET_IFRAME_URL) return;
-
-      if (event.data.type === 'SIGN_IN_RESPONSE') {
-        try {
-          const { success } = (
-            await axiosInstance.post('/auth/validate', {
-              message: event.data.data.message,
-              signature: event.data.data.signature,
-            })
-          ).data;
-
-          if (success === true) {
-            navigate('/');
-          }
-        } catch (error) {
-          console.error('Error signing in:', error);
-        }
-      }
-    };
-
-    window.addEventListener('message', handleSignInResponse);
-
-    return () => {
-      window.removeEventListener('message', handleSignInResponse);
-    };
-  }, []);
-
-  useEffect(() => {
-    const initiateAutoSignIn = async () => {
-      if (!accountAddress) return;
-
-      const iframe = document.getElementById(
-        'autoSignInFrame',
-      ) as HTMLIFrameElement;
-
-      if (!iframe.contentWindow) {
-        console.error('Iframe not found or not loaded');
-        return;
-      }
-
-      const message = new SiweMessage({
-        version: '1',
-        domain: window.location.host,
-        uri: window.location.origin,
-        chainId: 1,
-        address: accountAddress,
-        nonce: generateNonce(),
-        // Human-readable ASCII assertion that the user will sign, and it must not contain `\n`.
-        statement: 'Sign in With Ethereum.',
-      }).prepareMessage();
-
-      iframe.contentWindow.postMessage(
-        {
-          type: 'AUTO_SIGN_IN',
-          chainId: '1',
-          message,
-        },
-        VITE_WALLET_IFRAME_URL,
-      );
-    };
-
-    initiateAutoSignIn();
-  }, [accountAddress]);
-
-  useEffect(() => {
-    const handleAccountsDataResponse = async (event: MessageEvent) => {
-      if (event.origin !== VITE_WALLET_IFRAME_URL) return;
-
-      if (event.data.type === WALLET_ACCOUNTS_DATA) {
-        setAccountAddress(event.data.data[0]);
-      }
-    };
-
-    window.addEventListener('message', handleAccountsDataResponse);
-
-    return () => {
-      window.removeEventListener('message', handleAccountsDataResponse);
-    };
-  }, []);
-
-  const getAddressFromWallet = useCallback(() => {
-    const iframe = document.getElementById(
-      'autoSignInFrame',
-    ) as HTMLIFrameElement;
-
-    if (!iframe.contentWindow) {
-      console.error('Iframe not found or not loaded');
-      return;
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: REQUEST_CREATE_OR_GET_ACCOUNTS,
-        chainId: '1',
-      },
-      VITE_WALLET_IFRAME_URL,
-    );
-  }, []);
-
-  return (
-    <Modal open={true} disableEscapeKeyDown keepMounted>
-      <Box
-        sx={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          width: '90%',
-          maxWidth: '1200px',
-          height: '600px',
-          maxHeight: '80vh',
-          overflow: 'auto',
-          outline: 'none',
-        }}
-      >
-        <iframe
-          onLoad={getAddressFromWallet}
-          id="autoSignInFrame"
-          src={`${VITE_WALLET_IFRAME_URL}/auto-sign-in`}
-          width="100%"
-          height="100%"
-          sandbox="allow-scripts allow-same-origin"
-        ></iframe>
-      </Box>
-    </Modal>
-  );
-};
-
-export default AutoSignInIFrameModal;

packages/frontend/src/constants.ts

@@ -1,16 +1,3 @@
 export const SHORT_COMMIT_HASH_LENGTH = 8;
 
 export const SERVER_GQL_PATH = 'graphql';
-
-export const SHOPIFY_APP_URL = 'https://store.laconic.com';
-
-// iframe request types
-export const REQUEST_CREATE_OR_GET_ACCOUNTS = 'REQUEST_CREATE_OR_GET_ACCOUNTS';
-export const REQUEST_ADD_NETWORK = 'REQUEST_ADD_NETWORK';
-export const REQUEST_WALLET_ACCOUNTS = 'REQUEST_WALLET_ACCOUNTS';
-
-// iframe response types
-export const WALLET_ACCOUNTS_DATA = 'WALLET_ACCOUNTS_DATA';
-export const NETWORK_ADDED_RESPONSE = "NETWORK_ADDED_RESPONSE";
-export const NETWORK_ALREADY_EXISTS_RESPONSE = "NETWORK_ALREADY_EXISTS_RESPONSE";
-export const NETWORK_ADD_FAILED_RESPONSE = "NETWORK_ADD_FAILED_RESPONSE";

packages/frontend/src/context/WalletConnectContext.tsx

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

packages/frontend/src/context/Web3Provider.tsx

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

packages/frontend/src/hooks/useAddNetwork.ts

@@ -1,92 +0,0 @@
-import { useState, useEffect } from 'react';
-import { VITE_WALLET_IFRAME_URL } from 'utils/constants';
-import { NETWORK_ADD_FAILED_RESPONSE, NETWORK_ADDED_RESPONSE, NETWORK_ALREADY_EXISTS_RESPONSE, REQUEST_ADD_NETWORK } from '../constants';
-
-interface NetworkData {
-  chainId: string;
-  namespace: string;
-  networkName: string;
-  rpcUrl: string;
-  coinType: string;
-  addressPrefix?: string;
-  blockExplorerUrl?: string;
-  nativeDenom?: string;
-  gasPrice?: string;
-}
-
-export const useAddNetwork = () => {
-  const [networkData, setNetworkData] = useState<NetworkData | null>(null);
-  const [iframe, setIframe] = useState<HTMLIFrameElement | null>(null);
-  const [isNetworkAvailable, setIsNetworkAvailable] = useState(false);
-
-  // useEffect to add network in embedded wallet
-  useEffect(() => {
-    if (!networkData) {
-      return;
-    }
-
-    if (!iframe?.contentWindow) {
-      return;
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: REQUEST_ADD_NETWORK,
-        chainId: networkData.chainId,
-        networkData,
-      },
-      VITE_WALLET_IFRAME_URL,
-    );
-  }, [networkData, iframe]);
-
-  // useEffect to listen for network add reponses
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.origin !== VITE_WALLET_IFRAME_URL) return;
-
-      switch (event.data.type) {
-        case NETWORK_ADDED_RESPONSE:
-        case NETWORK_ALREADY_EXISTS_RESPONSE:
-          // Once network is available, set state
-          setIsNetworkAvailable(true);
-          break;
-
-        case NETWORK_ADD_FAILED_RESPONSE:
-          setIsNetworkAvailable(false);
-          console.error("Network could not be added:", event.data.message);
-          break;
-
-        default:
-          break;
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []);
-
-  useEffect(() => {
-    const loadNetworkData = async () => {
-      try {
-        const res = await fetch('/network.json');
-        const json = await res.json();
-
-        setNetworkData(json);
-      } catch (err) {
-        console.error('Failed to load network data:', err);
-      }
-    };
-
-    loadNetworkData();
-  }, []);
-
-  return {
-    networkData,
-    isNetworkAvailable,
-    iframe,
-    setIframe
-  };
-};

packages/frontend/src/hooks/useCheckBalance.tsx

@@ -1,50 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-
-import { useAddNetwork } from './useAddNetwork';
-
-const useCheckBalance = (amount: string, iframeId: string) => {
-  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
-
-  const { networkData } = useAddNetwork()
-
-  const checkBalance = useCallback(() => {
-    if (!networkData) {
-      return;
-    }
-
-    const iframe = document.getElementById(iframeId) as HTMLIFrameElement;
-
-    if (!iframe || !iframe.contentWindow) {
-      console.error(`Iframe with ID "${iframeId}" not found or not loaded`);
-      return;
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: 'CHECK_BALANCE',
-        chainId: networkData.chainId,
-        amount,
-      },
-      import.meta.env.VITE_WALLET_IFRAME_URL
-    );
-  }, [iframeId, amount, networkData]);
-
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.origin !== import.meta.env.VITE_WALLET_IFRAME_URL) return;
-
-      if (event.data.type !== 'IS_SUFFICIENT') return;
-
-      setIsBalanceSufficient(event.data.data);
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []);
-
-  return { isBalanceSufficient, checkBalance };
-};
-
-export default useCheckBalance;

packages/frontend/src/index.tsx

@@ -4,9 +4,10 @@ import assert from 'assert';
 import { GQLClient } from 'gql-client';
 
 import { ThemeProvider } from '@snowballtools/material-tailwind-react-fork';
+
+import './index.css';
 import '@fontsource/inter';
 import '@fontsource-variable/jetbrains-mono';
-
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { GQLClientProvider } from './context/GQLClientContext';
@@ -14,7 +15,8 @@ import { SERVER_GQL_PATH } from './constants';
 import { Toaster } from 'components/shared/Toast';
 import { LogErrorBoundary } from 'utils/log-error';
 import { BASE_URL } from 'utils/constants';
-import './index.css';
+import Web3ModalProvider from './context/Web3Provider';
+import { WalletConnectClientProvider } from 'context/WalletConnectContext';
 
 console.log(`v-0.0.9`);
 
@@ -30,12 +32,16 @@ const gqlClient = new GQLClient({ gqlEndpoint });
 root.render(
   <LogErrorBoundary>
     <React.StrictMode>
-      <ThemeProvider>
-        <GQLClientProvider client={gqlClient}>
-          <App />
-          <Toaster />
-        </GQLClientProvider>
-      </ThemeProvider>
+      <WalletConnectClientProvider>
+        <ThemeProvider>
+          <Web3ModalProvider>
+            <GQLClientProvider client={gqlClient}>
+              <App />
+              <Toaster />
+            </GQLClientProvider>
+          </Web3ModalProvider>
+        </ThemeProvider>
+      </WalletConnectClientProvider>
     </React.StrictMode>
   </LogErrorBoundary>,
 );

packages/frontend/src/pages/AuthPage.tsx

@@ -1,4 +1,4 @@
-import AutoSignInIFrameModal from 'components/shared/auth/AutoSignInIFrameModal';
+import { Login } from './auth/Login';
 
 const AuthPage = () => {
   return (
@@ -13,7 +13,9 @@ const AuthPage = () => {
         </div>
       </div>
       <div className="pb-12 relative z-10 flex-1 flex-center">
-        <AutoSignInIFrameModal />
+        <div className="max-w-[520px] w-full dark:bg-overlay bg-white rounded-xl shadow">
+          <Login />
+        </div>
       </div>
     </div>
   );

packages/frontend/src/pages/BuyPrepaidService.tsx

@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useMediaQuery } from 'usehooks-ts';
-
-import { Button } from 'components/shared';
-import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe';
-import { SHOPIFY_APP_URL } from '../constants';
-
-const BuyPrepaidService = () => {
-  const navigate = useNavigate();
-
-  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
-
-  const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
-  const buttonSize = isTabletView ? { size: 'lg' as const } : {};
-
-  useEffect(() => {
-    if (isBalanceSufficient === true) {
-      navigate('/');
-    }
-  }, [isBalanceSufficient]);
-
-  return (
-    <div className="dark:bg-background flex flex-col min-h-screen">
-      <div className="pb-12 relative z-10 flex-1 flex-center">
-        <Button {...buttonSize} shape={'default'}>
-          <a href={SHOPIFY_APP_URL} target="_blank">
-            Buy prepaid service
-          </a>
-        </Button>
-      </div>
-
-      <CheckBalanceIframe onBalanceChange={setIsBalanceSufficient} isPollingEnabled={true} amount='1'/>
-    </div>
-  );
-};
-
-export default BuyPrepaidService;

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

@@ -9,6 +9,12 @@ export const Login = () => {
         </div>
       </div>
       <WavyBorder className="self-stretch" variant="stroke" />
+
+      <div className="self-stretch p-4 xs:p-6 flex-col justify-center items-center gap-8 flex">
+        <div className="self-stretch flex-col justify-center  items-center gap-3 flex">
+          <w3m-button />
+        </div>
+      </div>
     </div>
   );
 };

packages/frontend/src/pages/components/modals.tsx

@@ -10,7 +10,6 @@ import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableD
 import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
 import { CancelDeploymentDialog } from 'components/projects/Dialog/CancelDeploymentDialog';
 import {
-  AppDeploymentRecordAttributes,
   Deployment,
   DeploymentStatus,
   Domain,
@@ -21,6 +20,15 @@ import { ChangeStateToProductionDialog } from 'components/projects/Dialog/Change
 
 const deployment: Deployment = {
   id: '1',
+  domain: {
+    id: 'domain1',
+    branch: 'main',
+    name: 'example.com',
+    status: DomainStatus.Live,
+    redirectTo: null,
+    createdAt: '1677609600', // 2023-02-25T12:00:00Z
+    updatedAt: '1677613200', // 2023-02-25T13:00:00Z
+  },
   branch: 'main',
   commitHash: 'a1b2c3d',
   commitMessage:
@@ -49,7 +57,6 @@ const deployment: Deployment = {
   updatedAt: '1677680400', // 2023-03-01T13:00:00Z
   applicationDeploymentRequestId:
     'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
-  applicationDeploymentRecordData: {} as AppDeploymentRecordAttributes,
 };
 
 const domains: Domain[] = [
@@ -245,7 +252,7 @@ const ModalsPage: React.FC = () => {
                   setRedeployToProduction((preVal) => !preVal)
                 }
                 deployment={deployment}
-                domains={domains}
+                domains={deployment.domain ? [deployment.domain] : []}
               />
               {/* Rollback to this deployment */}
               <Button onClick={() => setRollbackDeployment(true)}>
@@ -261,7 +268,7 @@ const ModalsPage: React.FC = () => {
                 }
                 deployment={deployment}
                 newDeployment={deployment}
-                domains={domains}
+                domains={deployment.domain ? [deployment.domain] : []}
               />
             </div>
           </div>

packages/frontend/src/pages/org-slug/index.tsx

@@ -1,20 +1,16 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
 import { ProjectCard } from 'components/projects/ProjectCard';
 import { Heading, Badge, Button } from 'components/shared';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
-import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe';
 
 const Projects = () => {
-  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
-  const [projects, setProjects] = useState<Project[]>([]);
-
-  const navigate = useNavigate();
   const client = useGQLClient();
   const { orgSlug } = useParams();
+  const [projects, setProjects] = useState<Project[]>([]);
 
   const fetchProjects = useCallback(async () => {
     const { projectsInOrganization } = await client.getProjectsInOrganization(
@@ -27,12 +23,6 @@ const Projects = () => {
     fetchProjects();
   }, [orgSlug]);
 
-  useEffect(() => {
-    if (isBalanceSufficient === false) {
-      navigate('/buy-prepaid-service');
-    }
-  }, [isBalanceSufficient]);
-
   return (
     <section className="px-4 md:px-6 py-6 flex flex-col gap-6">
       {/* Header */}
@@ -59,8 +49,6 @@ const Projects = () => {
             return <ProjectCard project={project} key={key} />;
           })}
       </div>
-
-      <CheckBalanceIframe onBalanceChange={setIsBalanceSufficient} isPollingEnabled={false} amount='1' />
     </section>
   );
 };

packages/frontend/src/pages/org-slug/projects/Id.tsx

@@ -60,9 +60,9 @@ const Id = () => {
     fetchProject(id);
   }, [id]);
 
-  const onUpdate = useCallback(async () => {
+  const onUpdate = async () => {
     await fetchProject(id);
-  }, [fetchProject, id]);
+  };
 
   return (
     <div className="h-full">
@@ -118,11 +118,9 @@ const Id = () => {
                 <Tabs.Trigger value="deployments">
                   <Link to="deployments">Deployments</Link>
                 </Tabs.Trigger>
-                {/*
                 <Tabs.Trigger value="integrations">
                   <Link to="integrations">Integrations</Link>
                 </Tabs.Trigger>
-	              */}
                 <Tabs.Trigger value="settings">
                   <Link to="settings">Settings</Link>
                 </Tabs.Trigger>

packages/frontend/src/pages/org-slug/projects/create/Template.tsx

@@ -57,7 +57,7 @@ const CreateWithTemplate = () => {
 
   return (
     <div className="flex flex-col items-center gap-6 lg:gap-10 mx-auto w-full lg:w-5/6">
-      <div className="flex flex-col lg:flex-row justify-between w-full my-4 bg-base-bg-alternate dark:bg-overlay rounded-xl p-6 gap-3 items-start lg:items-center">
+      <div className="flex flex-col lg:flex-row justify-between w-full my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
         <div className="flex items-center gap-3">
           <TemplateIcon type={template?.icon as TemplateIconType} size={48} />
           <Heading className="font-medium">{template?.name}</Heading>

packages/frontend/src/pages/org-slug/projects/create/layout.tsx

@@ -1,14 +1,12 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Link, Outlet, useParams } from 'react-router-dom';
-import { useMediaQuery } from 'usehooks-ts';
-
-import * as Dialog from '@radix-ui/react-dialog';
 
 import { Heading } from 'components/shared/Heading';
 import { WavyBorder } from 'components/shared/WavyBorder';
 import { Button } from 'components/shared/Button';
 import { CrossIcon } from 'components/shared/CustomIcon';
 import { cn } from 'utils/classnames';
+import * as Dialog from '@radix-ui/react-dialog';
 
 export interface CreateProjectLayoutProps
   extends ComponentPropsWithoutRef<'section'> {}
@@ -18,7 +16,6 @@ export const CreateProjectLayout = ({
   ...props
 }: CreateProjectLayoutProps) => {
   const { orgSlug } = useParams();
-  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
 
   const closeBtnLink = `/${orgSlug}`;
 
@@ -31,69 +28,72 @@ export const CreateProjectLayout = ({
     </Heading>
   );
 
-  return isDesktopView ? (
-    // Desktop
-    <section
-      {...props}
-      className={cn(
-        'dark:bg-background h-full flex-col hidden md:flex',
-        className,
-      )}
-    >
-      <div className="sticky top-0">
-        <div className="flex px-6 py-4 dark:bg-overlay bg-base-bg items-center gap-4">
-          {heading}
+  return (
+    <>
+      {/* Desktop */}
+      <section
+        {...props}
+        className={cn(
+          'dark:bg-background h-full flex-col hidden md:flex',
+          className,
+        )}
+      >
+        <div className="sticky top-0">
+          <div className="flex px-6 py-4 dark:bg-overlay bg-base-bg items-center gap-4">
+            {heading}
 
-          {/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
-          <Link to={closeBtnLink}>
-            <Button
-              iconOnly
-              variant="primary"
-              leftIcon={<CrossIcon />}
-              aria-label="close"
-            />
-          </Link>
+            {/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
+            <Link to={closeBtnLink}>
+              <Button
+                iconOnly
+                variant="primary"
+                leftIcon={<CrossIcon />}
+                aria-label="close"
+              />
+            </Link>
+          </div>
+          <WavyBorder />
         </div>
-        <WavyBorder />
-      </div>
-      <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
-        <Outlet />
+
+        <section className="px-6 h-full flex-1 py-6 overflow-y-auto">
+          <Outlet />
+        </section>
       </section>
-    </section>
-  ) : (
-    // Mobile
-    // Setting modal={false} so even if modal is active on desktop, it doesn't block clicks
-    <Dialog.Root modal={false} open={true}>
-      <Dialog.Portal>
-        {/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
-        <div className="bg-base-canvas fixed inset-0 md:hidden overflow-y-auto p-1">
-          <Dialog.Content className="min-h-full overflow-hidden rounded-2xl bg-base-bg shadow-card focus:outline-none">
-            {/* Heading */}
-            <div className="flex px-6 py-4 h-20 items-center gap-4">
-              {heading}
-              <Dialog.Close asChild>
-                <Link to={closeBtnLink}>
-                  <Button
-                    iconOnly
-                    variant="tertiary"
-                    leftIcon={<CrossIcon />}
-                    aria-label="close"
-                    size="sm"
-                  />
-                </Link>
-              </Dialog.Close>
-            </div>
 
-            {/* Border */}
-            <WavyBorder />
+      {/* Mobile */}
+      {/* Setting modal={false} so even if modal is active on desktop, it doesn't block clicks */}
+      <Dialog.Root modal={false} open={true}>
+        <Dialog.Portal>
+          {/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
+          <div className="bg-base-canvas fixed inset-0 md:hidden overflow-y-auto p-1">
+            <Dialog.Content className="min-h-full overflow-hidden rounded-2xl bg-base-bg shadow-card focus:outline-none">
+              {/* Heading */}
+              <div className="flex px-6 py-4 h-20 items-center gap-4">
+                {heading}
+                <Dialog.Close asChild>
+                  <Link to={closeBtnLink}>
+                    <Button
+                      iconOnly
+                      variant="tertiary"
+                      leftIcon={<CrossIcon />}
+                      aria-label="close"
+                      size="sm"
+                    />
+                  </Link>
+                </Dialog.Close>
+              </div>
 
-            {/* Page content */}
-            <div className="px-4 py-6">
-              <Outlet />
-            </div>
-          </Dialog.Content>
-        </div>
-      </Dialog.Portal>
-    </Dialog.Root>
+              {/* Border */}
+              <WavyBorder />
+
+              {/* Page content */}
+              <div className="px-4 py-6">
+                <Outlet />
+              </div>
+            </Dialog.Content>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </>
   );
 };

packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx

@@ -55,7 +55,7 @@ const Id = () => {
           </div>
 
           {/* Card */}
-          <div className="bg-base-bg-alternate dark:bg-overlay2 rounded-xl shadow-inset w-full px-1 py-1">
+          <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
             {/* Trigger question */}
             <div className="flex gap-2 justify-center items-center py-3">
               <div className="h-5 w-5">
@@ -67,7 +67,7 @@ const Id = () => {
             </div>
 
             {/* CTA card */}
-            <div className="bg-surface-card dark:bg-overlay rounded-xl shadow-card-sm dark:shadow-background px-4 py-4">
+            <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
               <div className="flex gap-2">
                 <Badge variant="secondary">1</Badge>
                 <div className="space-y-3">
@@ -75,7 +75,7 @@ const Id = () => {
                     <Heading as="h6" className="text-sm font-sans">
                       Add a custom domain
                     </Heading>
-                    <p className="text-xs text-elements-low-em dark:text-foreground-secondary font-sans">
+                    <p className="text-xs text-elements-low-em font-sans">
                       Make it easy for your visitors to remember your URL with a
                       custom domain.
                     </p>

packages/frontend/src/pages/org-slug/projects/create/template/index.tsx

@@ -135,7 +135,7 @@ const CreateRepo = () => {
       framework: 'React',
       repoName: '',
       isPrivate: false,
-      account: '',
+      account: gitAccounts[0],
     },
   });
 
@@ -152,18 +152,13 @@ const CreateRepo = () => {
           <Heading as="h3" className="text-lg font-medium">
             Create a repository
           </Heading>
-          <Heading
-            as="h5"
-            className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
-          >
+          <Heading as="h5" className="text-sm font-sans text-elements-low-em">
             The project will be cloned into this repository
           </Heading>
         </div>
 
         <div className="flex flex-col justify-start gap-3">
-          <span className="text-sm text-elements-high-em dark:text-foreground">
-            Git account
-          </span>
+          <span className="text-sm text-elements-high-em">Git account</span>
           {gitAccounts.length > 0 ? (
             <Controller
               name="account"
@@ -186,9 +181,7 @@ const CreateRepo = () => {
           )}
         </div>
         <div className="flex flex-col justify-start gap-3">
-          <span className="text-sm text-elements-high-em dark:text-foreground">
-            Name the repo
-          </span>
+          <span className="text-sm text-elements-high-em">Name the repo</span>
           <Controller
             name="repoName"
             control={control}

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -1,55 +1,40 @@
 import { useEffect, useState } from 'react';
-import {
-  Link,
-  useOutletContext,
-} from 'react-router-dom';
+import { Link, useNavigate, useOutletContext } from 'react-router-dom';
 import { RequestError } from 'octokit';
 
-import {
-  Heading,
-  Avatar,
-} from 'components/shared';
+import { useOctokit } from 'context/OctokitContext';
+import { GitCommitWithBranch, OutletContextType } from '../../../../types';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Button, Heading, Avatar, Tag } from 'components/shared';
+import { getInitials } from 'utils/geInitials';
 import {
   BranchStrokeIcon,
+  CheckRoundFilledIcon,
+  ClockIcon,
   CursorBoxIcon,
   GithubStrokeIcon,
+  GlobeIcon,
   LinkIcon,
   CalendarDaysIcon,
 } from 'components/shared/CustomIcon';
-import { useOctokit } from 'context/OctokitContext';
-import { GitCommitWithBranch, OutletContextType } from '../../../../types';
-import { getInitials } from 'utils/geInitials';
 import { Activity } from 'components/projects/project/overview/Activity';
 import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo';
 import { relativeTimeMs } from 'utils/time';
+import { Domain, DomainStatus } from 'gql-client';
 import { AuctionCard } from 'components/projects/project/overview/Activity/AuctionCard';
 
-// NOTE: Commented code for verify domain functionality
-// import { useGQLClient } from 'context/GQLClientContext';
-// import { Domain, DomainStatus } from 'gql-client';
-// import {
-//   CheckRoundFilledIcon,
-//   ClockIcon,
-//   GlobeIcon,
-// } from 'components/shared/CustomIcon';
-// import {
-//   Button,
-//   Tag,
-// } from 'components/shared';
-// import { useNavigate } from 'react-router-dom';
-
 const COMMITS_PER_PAGE = 4;
-const PROJECT_UPDATE_WAIT_MS = 5000;
 
 const OverviewTabPanel = () => {
   const { octokit } = useOctokit();
-  // const navigate = useNavigate();
+  const navigate = useNavigate();
   const [activities, setActivities] = useState<GitCommitWithBranch[]>([]);
   const [fetchingActivities, setFetchingActivities] = useState(true);
-  // const [liveDomain, setLiveDomain] = useState<Domain>();
+  const [liveDomain, setLiveDomain] = useState<Domain>();
 
-  // const client = useGQLClient();
-  const { project, onUpdate } = useOutletContext<OutletContextType>();
+  const client = useGQLClient();
+
+  const { project } = useOutletContext<OutletContextType>();
 
   useEffect(() => {
     setFetchingActivities(true);
@@ -111,33 +96,24 @@ const OverviewTabPanel = () => {
     };
 
     fetchRepoActivity();
-  }, [project.repository]);
+  }, [octokit, project]);
 
   useEffect(() => {
-    onUpdate();
-    const timerId = setInterval(() => {
-      onUpdate();
-    }, PROJECT_UPDATE_WAIT_MS);
+    const fetchLiveProdDomain = async () => {
+      const { domains } = await client.getDomains(project.id, {
+        branch: project.prodBranch,
+        status: DomainStatus.Live,
+      });
 
-    return () => clearInterval(timerId);
-  }, [onUpdate]);
+      if (domains.length === 0) {
+        return;
+      }
 
-  // useEffect(() => {
-  //   const fetchLiveProdDomain = async () => {
-  //     const { domains } = await client.getDomains(project.id, {
-  //       branch: project.prodBranch,
-  //       status: DomainStatus.Live,
-  //     });
+      setLiveDomain(domains[0]);
+    };
 
-  //     if (domains.length === 0) {
-  //       return;
-  //     }
-
-  //     setLiveDomain(domains[0]);
-  //   };
-
-  //   fetchLiveProdDomain();
-  // }, [project]);
+    fetchLiveProdDomain();
+  }, [project]);
 
   return (
     <div className="grid grid-cols-5 gap-6 md:gap-[72px]">
@@ -156,16 +132,19 @@ const OverviewTabPanel = () => {
             {project.deployments &&
               project.deployments.length > 0 &&
               project.deployments.map((deployment, index) => (
-                <p
-                  key={index}
-                  className="text-sm text-elements-low-em dark:text-foreground tracking-tight truncate"
-                >
-                  {deployment.deployer.baseDomain}
+                <p>
+                  <a
+                    key={index}
+                    href={`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}
+                    className="text-sm text-elements-low-em dark:text-foreground tracking-tight truncate"
+                  >
+                    {deployment.deployer.baseDomain}
+                  </a>
                 </p>
               ))}
           </div>
         </div>
-        {/* <OverviewInfo label="Domain" icon={<GlobeIcon />}>
+        <OverviewInfo label="Domain" icon={<GlobeIcon />}>
           {liveDomain ? (
             <Tag type="positive" size="xs" leftIcon={<CheckRoundFilledIcon />}>
               Connected
@@ -186,7 +165,7 @@ const OverviewTabPanel = () => {
               </Button>
             </div>
           )}
-        </OverviewInfo> */}
+        </OverviewInfo>
         {project.deployments.length !== 0 ? (
           <>
             {/* SOURCE */}
@@ -204,10 +183,12 @@ const OverviewTabPanel = () => {
               {project.deployments &&
                 project.deployments.length > 0 &&
                 project.deployments.map((deployment) => (
-                  <div key={deployment.id} className="flex gap-2 items-center">
-                    <Link to={deployment.applicationDeploymentRecordData.url}>
+                  <div className="flex gap-2 items-center">
+                    <Link
+                      to={`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}
+                    >
                       <span className="text-controls-primary dark:text-foreground group hover:border-controls-primary transition-colors border-b border-b-transparent flex gap-2 items-center text-sm tracking-tight">
-                        {deployment.applicationDeploymentRecordData.url}
+                        {`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}
                         <LinkIcon className="group-hover:rotate-45 transition-transform" />
                       </span>
                     </Link>

packages/frontend/src/pages/org-slug/projects/id/Settings.tsx

@@ -10,7 +10,7 @@ import {
 } from 'components/shared/Tabs';
 import {
   BranchStrokeIcon,
-  //CollaboratorsIcon,
+  CollaboratorsIcon,
   GearIcon,
   GlobeIcon,
   SwitchIcon,
@@ -37,11 +37,11 @@ const tabsData = [
     icon: <SwitchIcon />,
     value: 'environment-variables',
   },
-  //  {
-  //    label: 'Collaborators',
-  //    icon: <CollaboratorsIcon />,
-  //    value: 'collaborators',
-  //  },
+  {
+    label: 'Collaborators',
+    icon: <CollaboratorsIcon />,
+    value: 'collaborators',
+  },
 ];
 
 const SettingsTabPanel = () => {

packages/frontend/src/pages/org-slug/projects/id/settings/Domains.tsx

@@ -60,39 +60,31 @@ const Domains = () => {
   return (
     <ProjectSettingContainer
       headingText="Domains"
-      {...(!project.auctionId && {
-        button: (
-          <Button
-            as="a"
-            href="add"
-            variant="secondary"
-            leftIcon={<PlusIcon />}
-            size="md"
-          >
-            Add domain
-          </Button>
-        ),
-      })}
+      button={
+        <Button
+          as="a"
+          href="add"
+          variant="secondary"
+          leftIcon={<PlusIcon />}
+          size="md"
+        >
+          Add domain
+        </Button>
+      }
     >
-      {project.auctionId ? (
-        <p className="text-gray-500">
-          Custom domains not supported for auction driven deployments.
-        </p>
-      ) : (
-        domains.map((domain) => {
-          return (
-            <DomainCard
-              domains={domains}
-              domain={domain}
-              key={domain.id}
-              // TODO: Use github API for getting linked repository
-              branches={branches}
-              project={project}
-              onUpdate={fetchDomains}
-            />
-          );
-        })
-      )}
+      {domains.map((domain) => {
+        return (
+          <DomainCard
+            domains={domains}
+            domain={domain}
+            key={domain.id}
+            // TODO: Use github API for getting linked repository
+            branches={branches}
+            project={project}
+            onUpdate={fetchDomains}
+          />
+        );
+      })}
     </ProjectSettingContainer>
   );
 };

packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariablesForm.tsx

@@ -1,15 +1,11 @@
 import { useEffect, useMemo } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
-// TODO: Use custom checkbox component
-// Custom checkbox component does not work with react-hook-form
-import { Checkbox } from '@snowballtools/material-tailwind-react-fork';
-// import { Checkbox } from 'components/shared/Checkbox';
-
 import { Button } from 'components/shared/Button';
 import { InlineNotification } from 'components/shared/InlineNotification';
 import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
 import { EnvironmentVariablesFormValues } from 'types/types';
+import { Checkbox } from 'components/shared/Checkbox';
 
 const EnvironmentVariablesForm = () => {
   const {
@@ -71,19 +67,10 @@ const EnvironmentVariablesForm = () => {
         />
       )}
       <div className="flex gap-2 p-2">
-        <Checkbox
-          label="Production"
-          labelProps={{ className: 'text-gray-900 dark:text-white' }}
-          {...register('environment.production')}
-        />
-        <Checkbox
-          label="Preview"
-          labelProps={{ className: 'text-gray-900 dark:text-white' }}
-          {...register('environment.preview')}
-        />
+        <Checkbox label="Production" {...register('environment.production')} />
+        <Checkbox label="Preview" {...register('environment.preview')} />
         <Checkbox
           label="Development"
-          labelProps={{ className: 'text-gray-900 dark:text-white' }}
           {...register('environment.development')}
         />
       </div>

packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx

@@ -18,6 +18,7 @@ const GeneralTabPanel = () => {
   const client = useGQLClient();
   const { toast } = useToast();
   const { project, onUpdate } = useOutletContext<OutletContextType>();
+  console.log(project);
 
   const [transferOrganizations, setTransferOrganizations] = useState<
     SelectOption[]

packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx

@@ -7,8 +7,6 @@ import { InlineNotification } from 'components/shared/InlineNotification';
 import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
 import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
 import { useToast } from 'components/shared/Toast';
-import { useEffect, useState } from 'react';
-import { DNSRecordAttributes } from 'gql-client';
 
 const Config = () => {
   const { id, orgSlug } = useParams();
@@ -18,8 +16,6 @@ const Config = () => {
   const primaryDomainName = searchParams.get('name');
   const { toast, dismiss } = useToast();
 
-  const [dnsRecord, setDnsRecord] = useState<DNSRecordAttributes | null>(null);
-
   const handleSubmitDomain = async () => {
     if (primaryDomainName === null) {
       toast({
@@ -63,80 +59,54 @@ const Config = () => {
     }
   };
 
-  useEffect(() => {
-    const fetchDNSData = async () => {
-      if (id === undefined) {
-        toast({
-          id: 'domain_cannot_find_project',
-          title: 'Cannot find project',
-          variant: 'error',
-          onDismiss: dismiss,
-        });
-        return;
-      }
-
-      const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id);
-
-      setDnsRecord(dnsRecordResponse.latestDNSRecord);
-    };
-
-    fetchDNSData();
-  }, [id, client]);
-
   // TODO: Figure out DNS Provider if possible and update appropriatly
   return (
     <ProjectSettingContainer headingText="Setup domain name">
-      {dnsRecord ? (
-        <>
-          <p className="text-blue-gray-500">
-            Add the following records to your domain.
-          </p>
+      <p className="text-blue-gray-500">
+        Add the following records to your domain.&nbsp;
+        <a href="https://www.namecheap.com/" target="_blank" rel="noreferrer">
+          <span className="underline">Go to NameCheap</span>
+        </a>
+      </p>
 
-          <Table>
-            <Table.Header>
-              <Table.Row>
-                <Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell>Host</Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
-              </Table.Row>
-            </Table.Header>
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Host</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
+          </Table.Row>
+        </Table.Header>
 
-            <Table.Body>
-              <Table.Row>
-                <Table.RowHeaderCell>
-                  {dnsRecord.resourceType}
-                </Table.RowHeaderCell>
-                <Table.Cell>@</Table.Cell>
-                <Table.Cell>
-                  <p className={!dnsRecord.value ? 'text-red-500' : ''}>
-                    {dnsRecord.value ?? 'Not available'}
-                  </p>
-                </Table.Cell>
-              </Table.Row>
-            </Table.Body>
-          </Table>
+        <Table.Body>
+          <Table.Row>
+            <Table.RowHeaderCell>A</Table.RowHeaderCell>
+            <Table.Cell>@</Table.Cell>
+            <Table.Cell>56.49.19.21</Table.Cell>
+          </Table.Row>
 
-          {dnsRecord?.value && (
-            <InlineNotification
-              variant="info"
-              title={`It can take up to 48 hours for these updates to reflect
-          globally.`}
-            />
-          )}
-          <Button
-            className="w-fit"
-            disabled={!dnsRecord?.value}
-            onClick={handleSubmitDomain}
-            variant="primary"
-            shape="default"
-            rightIcon={<ArrowRightCircleIcon />}
-          >
-            FINISH
-          </Button>
-        </>
-      ) : (
-        <p className={'text-red-500'}>DNS record data not available</p>
-      )}
+          <Table.Row>
+            <Table.RowHeaderCell>CNAME</Table.RowHeaderCell>
+            <Table.Cell>www</Table.Cell>
+            <Table.Cell>cname.snowballtools.xyz</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+
+      <InlineNotification
+        variant="info"
+        title={`It can take up to 48 hours for these updates to reflect
+        globally.`}
+      />
+      <Button
+        className="w-fit"
+        onClick={handleSubmitDomain}
+        variant="primary"
+        shape="default"
+        rightIcon={<ArrowRightCircleIcon />}
+      >
+        FINISH
+      </Button>
     </ProjectSettingContainer>
   );
 };

packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx

@@ -49,6 +49,9 @@ const AddDomain = () => {
       <div className=" w-2/3 mx-auto">
         <div className="bg-blue-gray-50 dark:bg-overlay rounded-lg mt-6 mb-10">
           <div className="flex justify-start gap-3 p-5">
+            <i className="bg-gray-100 dark:bg-overlay dark:text-foreground w-12 h-12 rounded-lg">
+              ^
+            </i>
             <Typography
               className="my-auto w-1/3 dark:text-foreground"
               variant="h5"

packages/frontend/src/stories/MockStoriesData.ts

@@ -12,7 +12,6 @@ import {
   Domain,
   Environment,
   Permission,
-  AppDeploymentRecordAttributes,
 } from 'gql-client';
 
 export const user: User = {
@@ -100,6 +99,7 @@ export const deployment0: Deployment = {
   environment: Environment.Development,
   isCurrent: true,
   commitHash: 'Commit Hash',
+  domain: domain0,
   commitMessage: 'Commit Message',
   createdBy: user,
   deployer: {
@@ -111,7 +111,6 @@ export const deployment0: Deployment = {
   },
   applicationDeploymentRequestId:
     'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
-  applicationDeploymentRecordData: {} as AppDeploymentRecordAttributes,
 };
 
 export const project: Project = {

packages/frontend/src/utils/constants.ts

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

packages/frontend/src/utils/web3modal.ts

@@ -0,0 +1,8 @@
+import { WalletConnectModal } from '@walletconnect/modal';
+
+import { VITE_WALLET_CONNECT_ID } from 'utils/constants';
+
+export const walletConnectModal = new WalletConnectModal({
+  projectId: VITE_WALLET_CONNECT_ID,
+  chains: [],
+});

packages/gql-client/src/client.ts

@@ -414,25 +414,14 @@ export class GQLClient {
     return data;
   }
 
-  async getAuctionData(auctionId: string): Promise<types.Auction | null> {
-    const { data, errors } = await this.client.query({
+  async getAuctionData(auctionId: string): Promise<types.Auction> {
+    const { data } = await this.client.query({
       query: queries.getAuctionData,
       variables: {
         auctionId,
       },
     });
 
-
-    if (errors && errors.length) {
-      const isAuctionNotFound = errors.some((error) =>
-        error.message?.includes('Auction not found')
-      );
-
-      if (isAuctionNotFound) {
-        return data;
-      }
-    }
-
     return data.getAuctionData;
   }
 
@@ -464,15 +453,4 @@ export class GQLClient {
 
     return data.verifyTx;
   }
-
-  async getLatestDNSRecordByProjectId(projectId: string): Promise<types.GetLatestDNSDataResponse> {
-    const { data } = await this.client.query({
-      query: queries.getLatestDNSRecordByProjectId,
-      variables: {
-        projectId,
-      },
-    });
-
-    return data;
-  }
 }

packages/gql-client/src/queries.ts

@@ -57,12 +57,17 @@ query ($projectId: String!) {
       commitHash
       createdAt
       environment
-      applicationDeploymentRecordData {
-        url
-      }
       deployer {
         baseDomain
       }
+      domain {
+        status
+        branch
+        createdAt
+        updatedAt
+        id
+        name
+      }
       createdBy {
         id
         name
@@ -107,8 +112,13 @@ query ($organizationSlug: String!) {
       commitMessage
       createdAt
       environment
-      applicationDeploymentRecordData {
-        url
+      domain {
+        status
+        branch
+        createdAt
+        updatedAt
+        id
+        name
       }
     }
   }
@@ -131,6 +141,14 @@ export const getDeployments = gql`
 query ($projectId: String!)  {
   deployments(projectId: $projectId) {
     id
+    domain{
+      branch
+      createdAt
+      id
+      name
+      status
+      updatedAt
+    }
     branch
     commitHash
     commitMessage
@@ -325,15 +343,3 @@ query ($txHash: String!, $amount: String!, $senderAddress: String!) {
   verifyTx(txHash: $txHash, amount: $amount, senderAddress: $senderAddress)
 }
 `;
-
-export const getLatestDNSRecordByProjectId = gql`
-query($projectId: String!) {
-  latestDNSRecord(projectId: $projectId) {
-    name
-    value
-    request
-    resourceType
-    version
-  }
-}
-`;

packages/gql-client/src/types.ts

@@ -99,6 +99,7 @@ export type User = {
 
 export type Deployment = {
   id: string;
+  domain: Domain;
   branch: string;
   commitHash: string;
   commitMessage: string;
@@ -107,7 +108,6 @@ export type Deployment = {
   environment: Environment;
   isCurrent: boolean;
   baseDomain?: string;
-  applicationDeploymentRecordData: AppDeploymentRecordAttributes;
   status: DeploymentStatus;
   createdBy: User;
   createdAt: string;
@@ -376,28 +376,3 @@ export type AuctionParams = {
   maxPrice: string;
   numProviders: number;
 };
-
-export type DNSRecordAttributes = {
-  name: string;
-  value: string;
-  request: string;
-  resourceType: string;
-  version: string;
-}
-
-export type GetLatestDNSDataResponse = {
-  latestDNSRecord: DNSRecordAttributes | null
-}
-
-export interface AppDeploymentRecordAttributes {
-  application: string;
-  auction: string;
-  deployer: string;
-  dns: string;
-  meta: string;
-  name: string;
-  request: string;
-  type: string;
-  url: string;
-  version: string;
-}

standards/init-commit.md

@@ -1,7 +0,0 @@
-# Initial Commit for QWRK UX Changes
-
-This is the first commit for QWRK UX changes to a fork of the `snowballtools-base` repository in Gitea. This commit sets the foundation for the upcoming user experience improvements and modifications.
-
-- Repository: `snowballtools-base`
-- Platform: Gitea
-- Purpose: QWRK UX changes