Compare commits

..

9 Commits

84 changed files with 2637 additions and 2606 deletions

View File

@ -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

View File

@ -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

View File

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

View File

@ -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",

View File

@ -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;
}

View File

@ -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;

View File

@ -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
})

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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

View File

@ -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;

View File

@ -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!

File diff suppressed because it is too large Load Diff

View File

@ -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;

View File

@ -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"
}
]

View File

@ -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,

View File

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

View File

@ -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

View File

@ -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

View File

@ -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)

View File

@ -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

View File

@ -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

View File

@ -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"

View File

@ -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

View File

@ -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

View File

@ -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=

View File

@ -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": {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -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
}

View File

@ -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>
);
}

View File

@ -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,
},
];

View File

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

View File

@ -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 */}

View File

@ -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;

View File

@ -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;

View File

@ -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>
);

View File

@ -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 {

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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 />}

View File

@ -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;

View File

@ -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 (

View File

@ -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 () => {

View File

@ -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]);

View File

@ -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>

View File

@ -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 && (

View File

@ -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>
*/}
</>
);
};

View File

@ -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">

View File

@ -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}`);
}

View File

@ -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>
);

View File

@ -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;

View File

@ -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";

View File

@ -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>
);
};

View File

@ -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>
);
}

View File

@ -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
};
};

View File

@ -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;

View File

@ -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>,
);

View File

@ -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>
);

View File

@ -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;

View File

@ -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>
);
};

View File

@ -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>

View File

@ -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>
);
};

View File

@ -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>

View File

@ -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>

View File

@ -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>
</>
);
};

View File

@ -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>

View File

@ -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}

View File

@ -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>

View File

@ -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 = () => {

View File

@ -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>
);
};

View File

@ -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>

View File

@ -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[]

View File

@ -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>
);
};

View File

@ -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"

View File

@ -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 = {

View File

@ -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;

View File

@ -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: [],
});

View File

@ -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;
}
}

View File

@ -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
}
}
`;

View File

@ -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;
}

View File

@ -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

1044
yarn.lock

File diff suppressed because it is too large Load Diff