Compare commits

..

34 Commits

Author SHA1 Message Date
IshaVenikar
a9f50a02f0 Set isCurrent to false only for deployments from same deployer
All checks were successful
Lint / lint (20.x) (pull_request) Successful in 4m9s
2024-10-16 15:37:09 +05:30
IshaVenikar
e10c8f4818 Add wait before updating deployer LRNs after auction completion 2024-10-16 15:37:09 +05:30
IshaVenikar
e3931b4bf8 Check for the last DNS deployment record when deleting 2024-10-16 15:37:09 +05:30
IshaVenikar
443a3f2b6e Refactor out common code for creating deployment 2024-10-16 15:37:09 +05:30
IshaVenikar
9d8d2199e2 Update Import project flow to configure deployment 2024-10-16 15:37:09 +05:30
IshaVenikar
f374fa69ff Update project base domains after deployment is deleted 2024-10-16 15:37:09 +05:30
IshaVenikar
55e238d0b9 Update method for deleting deployment 2024-10-16 15:37:09 +05:30
IshaVenikar
bf75dc8acc Update project entity 2024-10-16 15:37:09 +05:30
IshaVenikar
e45cc45f38 Check auction status only if deployments don't exist 2024-10-16 15:37:09 +05:30
IshaVenikar
ed2badebb6 Display bids in auction details 2024-10-16 15:37:09 +05:30
IshaVenikar
b63837d432 Update auction card UI 2024-10-16 15:37:09 +05:30
IshaVenikar
b3ac6e1367 Display auction details in overview page 2024-10-16 15:37:09 +05:30
IshaVenikar
508b4c7367 Update deployments only if valid request Id exists 2024-10-16 15:37:09 +05:30
IshaVenikar
a662ebc018 test 2024-10-16 15:37:09 +05:30
IshaVenikar
614405a2f4 Display auction details in Overview tab 2024-10-16 15:37:09 +05:30
IshaVenikar
fb873d9bc1 Pass auction Id in DNS deployment 2024-10-16 15:37:09 +05:30
IshaVenikar
f67dbd0ff3 Pass auction id in deployment requests 2024-10-16 15:37:09 +05:30
IshaVenikar
22fb9323d7 Store deployer lrn for each deployment 2024-10-16 15:37:09 +05:30
IshaVenikar
a9e69afe08 Update UI for configure deployment step 2024-10-16 15:37:09 +05:30
IshaVenikar
5fe04dd691 Check request Id for updating deployment data 2024-10-16 15:37:09 +05:30
IshaVenikar
012dd63a45 Navigate to success page after auction creation 2024-10-16 15:37:09 +05:30
IshaVenikar
52ae15bf62 Display loader for deploy button 2024-10-16 15:37:09 +05:30
IshaVenikar
82dab8ce21 Fix deployer LRN field in project 2024-10-16 15:37:09 +05:30
IshaVenikar
853a1024b3 Check for auction if deployment request id is not present 2024-10-16 15:37:09 +05:30
IshaVenikar
dfeb281586 Pass auction data when adding project 2024-10-16 15:37:09 +05:30
IshaVenikar
b58d9e6c21 Create deployments after auction creation 2024-10-16 15:37:09 +05:30
IshaVenikar
42d35cae84 Check for auction status in a loop 2024-10-16 15:37:09 +05:30
IshaVenikar
8c824f065b Add method deployment requests after auction completion 2024-10-16 15:37:09 +05:30
IshaVenikar
2a3c5de132 Set gas price in Registry instantiation 2024-10-16 15:37:09 +05:30
IshaVenikar
13730655a4 Implement UI to add configure deployment step 2024-10-16 15:37:09 +05:30
IshaVenikar
ee9bf2de1c Update methods in gql client 2024-10-16 15:37:09 +05:30
IshaVenikar
9931bc74d1 Update schema and resolver functions 2024-10-16 15:37:09 +05:30
IshaVenikar
0e0e5e888f Take auction params from config 2024-10-16 15:37:09 +05:30
IshaVenikar
d77e41f796 Add back-end function to create deployment with auction 2024-10-16 15:37:09 +05:30
163 changed files with 6368 additions and 4553 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-sapo.laconic.com
gqlEndpoint: https://laconicd-sapo.laconic.com/api
userKey: $REGISTRY_USER_KEY
bondId: $REGISTRY_BOND_ID
chainId: laconic-testnet-2
gasPrice: 0.001alnt
EOF
- name: Run deploy script
run: |
cd packages/deployer
./deploy-frontend.sh

View File

@ -5,7 +5,6 @@ on:
push:
branches:
- main
- staging
jobs:
lint:

View File

@ -14,18 +14,17 @@ VITE_SERVER_URL = 'LACONIC_HOSTED_CONFIG_server_url'
VITE_GITHUB_CLIENT_ID = 'LACONIC_HOSTED_CONFIG_github_clientid'
VITE_GITHUB_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_pwa_templaterepo'
VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo'
VITE_GITHUB_NEXT_APP_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_next_app_templaterepo'
VITE_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_wallet_connect_id'
VITE_LACONICD_CHAIN_ID = 'LACONIC_HOSTED_CONFIG_laconicd_chain_id'
VITE_WALLET_IFRAME_URL = 'LACONIC_HOSTED_CONFIG_wallet_iframe_url'
VITE_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'
VITE_ALCHEMY_API_KEY = 'LACONIC_HOSTED_CONFIG_aplchemy_api_key'
VITE_BUGSNAG_API_KEY = 'LACONIC_HOSTED_CONFIG_bugsnag_api_key'
VITE_PASSKEY_WALLET_RPID = 'LACONIC_HOSTED_CONFIG_passkey_wallet_rpid'
VITE_TURNKEY_API_BASE_URL = 'LACONIC_HOSTED_CONFIG_turnkey_api_base_url'
VITE_TURNKEY_ORGANIZATION_ID = 'LACONIC_HOSTED_CONFIG_turnkey_organization_id'
EOF
yarn || exit 1
yarn build --ignore backend || exit 1
yarn build || exit 1
if [[ ! -d "$OUTPUT_DIR" ]]; then
echo "Missing output directory: $OUTPUT_DIR" 1>&2

View File

@ -4,11 +4,8 @@
gqlPath = "/graphql"
[server.session]
secret = ""
# Frontend webapp URL origin
appOriginUrl = "http://localhost:3000"
# Set to true if server running behind proxy
trustProxy = false
# Backend URL hostname
domain = "localhost"
[database]
@ -20,6 +17,16 @@
clientId = ""
clientSecret = ""
[google]
clientId = ""
clientSecret = ""
[turnkey]
apiBaseUrl = "https://api.turnkey.com"
apiPrivateKey = ""
apiPublicKey = ""
defaultOrganizationId = ""
[registryConfig]
fetchDeploymentRecordDelay = 5000
checkAuctionStatusDelay = 5000
@ -34,10 +41,12 @@
fees = ""
gasPrice = "1alnt"
# Durations are set to 2 mins as deployers may take time with ongoing deployments and auctions
[auction]
commitFee = "100000"
commitsDuration = "120s"
revealFee = "100000"
revealsDuration = "120s"
commitFee = "1000"
commitsDuration = "60s"
revealFee = "1000"
revealsDuration = "60s"
denom = "alnt"
[misc]
projectDomain = "apps.snowballtools.com"

View File

@ -51,12 +51,17 @@ export interface AuctionConfig {
denom: string;
}
export interface MiscConfig {
projectDomain: string;
}
export interface Config {
server: ServerConfig;
database: DatabaseConfig;
gitHub: GitHubConfig;
registryConfig: RegistryConfig;
auction: AuctionConfig;
misc: MiscConfig;
turnkey: {
apiBaseUrl: string;
apiPublicKey: string;

View File

@ -3,9 +3,7 @@ import {
DeepPartial,
FindManyOptions,
FindOneOptions,
FindOptionsWhere,
IsNull,
Not
FindOptionsWhere
} from 'typeorm';
import path from 'path';
import debug from 'debug';
@ -13,7 +11,7 @@ import assert from 'assert';
import { customAlphabet } from 'nanoid';
import { lowercase, numbers } from 'nanoid-dictionary';
import { DatabaseConfig } from './config';
import { DatabaseConfig, MiscConfig } from './config';
import { User } from './entity/User';
import { Organization } from './entity/Organization';
import { Project } from './entity/Project';
@ -23,7 +21,6 @@ import { EnvironmentVariable } from './entity/EnvironmentVariable';
import { Domain } from './entity/Domain';
import { getEntities, loadAndSaveData } from './utils';
import { UserOrganization } from './entity/UserOrganization';
import { Deployer } from './entity/Deployer';
const ORGANIZATION_DATA_PATH = '../test/fixtures/organizations.json';
@ -34,8 +31,9 @@ const nanoid = customAlphabet(lowercase + numbers, 8);
// TODO: Fix order of methods
export class Database {
private dataSource: DataSource;
private projectDomain: string;
constructor({ dbPath }: DatabaseConfig) {
constructor ({ dbPath } : DatabaseConfig, { projectDomain } : MiscConfig) {
this.dataSource = new DataSource({
type: 'better-sqlite3',
database: dbPath,
@ -43,49 +41,38 @@ export class Database {
synchronize: true,
logging: false
});
this.projectDomain = projectDomain;
}
async init(): Promise<void> {
async init (): Promise<void> {
await this.dataSource.initialize();
log('database initialized');
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
}
)
await loadAndSaveData(Organization, this.dataSource, [orgEntities[0]]);
}
}
async getUser(options: FindOneOptions<User>): Promise<User | null> {
async getUser (options: FindOneOptions<User>): Promise<User | null> {
const userRepository = this.dataSource.getRepository(User);
const user = await userRepository.findOne(options);
return user;
}
async addUser(data: DeepPartial<User>): Promise<User> {
async addUser (data: DeepPartial<User>): Promise<User> {
const userRepository = this.dataSource.getRepository(User);
const user = await userRepository.save(data);
return user;
}
async updateUser(user: User, data: DeepPartial<User>): Promise<boolean> {
async updateUser (user: User, data: DeepPartial<User>): Promise<boolean> {
const userRepository = this.dataSource.getRepository(User);
const updateResult = await userRepository.update({ id: user.id }, data);
assert(updateResult.affected);
@ -93,7 +80,7 @@ export class Database {
return updateResult.affected > 0;
}
async getOrganizations(
async getOrganizations (
options: FindManyOptions<Organization>
): Promise<Organization[]> {
const organizationRepository = this.dataSource.getRepository(Organization);
@ -102,7 +89,7 @@ export class Database {
return organizations;
}
async getOrganization(
async getOrganization (
options: FindOneOptions<Organization>
): Promise<Organization | null> {
const organizationRepository = this.dataSource.getRepository(Organization);
@ -111,7 +98,7 @@ export class Database {
return organization;
}
async getOrganizationsByUserId(userId: string): Promise<Organization[]> {
async getOrganizationsByUserId (userId: string): Promise<Organization[]> {
const organizationRepository = this.dataSource.getRepository(Organization);
const userOrgs = await organizationRepository.find({
@ -127,29 +114,21 @@ export class Database {
return userOrgs;
}
async addUserOrganization(data: DeepPartial<UserOrganization>): Promise<UserOrganization> {
async addUserOrganization (data: DeepPartial<UserOrganization>): Promise<UserOrganization> {
const userOrganizationRepository = this.dataSource.getRepository(UserOrganization);
const newUserOrganization = await userOrganizationRepository.save(data);
return newUserOrganization;
}
async 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[]> {
async getProjects (options: FindManyOptions<Project>): Promise<Project[]> {
const projectRepository = this.dataSource.getRepository(Project);
const projects = await projectRepository.find(options);
return projects;
}
async getProjectById(projectId: string): Promise<Project | null> {
async getProjectById (projectId: string): Promise<Project | null> {
const projectRepository = this.dataSource.getRepository(Project);
const project = await projectRepository
@ -161,9 +140,7 @@ export class Database {
)
.leftJoinAndSelect('deployments.createdBy', 'user')
.leftJoinAndSelect('deployments.domain', 'domain')
.leftJoinAndSelect('deployments.deployer', 'deployer')
.leftJoinAndSelect('project.owner', 'owner')
.leftJoinAndSelect('project.deployers', 'deployers')
.leftJoinAndSelect('project.organization', 'organization')
.where('project.id = :projectId', {
projectId
@ -173,25 +150,7 @@ export class Database {
return project;
}
async allProjectsWithoutDeployments(): Promise<Project[]> {
const allProjects = await this.getProjects({
where: {
auctionId: Not(IsNull()),
},
relations: ['deployments'],
withDeleted: true,
});
const projects = allProjects.filter(project => {
if (project.deletedAt !== null) return false;
return project.deployments.length === 0;
});
return projects;
}
async getProjectsInOrganization(
async getProjectsInOrganization (
userId: string,
organizationSlug: string
): Promise<Project[]> {
@ -222,7 +181,7 @@ export class Database {
/**
* Get deployments with specified filter
*/
async getDeployments(
async getDeployments (
options: FindManyOptions<Deployment>
): Promise<Deployment[]> {
const deploymentRepository = this.dataSource.getRepository(Deployment);
@ -231,13 +190,12 @@ export class Database {
return deployments;
}
async getDeploymentsByProjectId(projectId: string): Promise<Deployment[]> {
async getDeploymentsByProjectId (projectId: string): Promise<Deployment[]> {
return this.getDeployments({
relations: {
project: true,
domain: true,
createdBy: true,
deployer: true,
createdBy: true
},
where: {
project: {
@ -250,7 +208,7 @@ export class Database {
});
}
async getDeployment(
async getDeployment (
options: FindOneOptions<Deployment>
): Promise<Deployment | null> {
const deploymentRepository = this.dataSource.getRepository(Deployment);
@ -259,14 +217,14 @@ export class Database {
return deployment;
}
async getDomains(options: FindManyOptions<Domain>): Promise<Domain[]> {
async getDomains (options: FindManyOptions<Domain>): Promise<Domain[]> {
const domainRepository = this.dataSource.getRepository(Domain);
const domains = await domainRepository.find(options);
return domains;
}
async addDeployment(data: DeepPartial<Deployment>): Promise<Deployment> {
async addDeployment (data: DeepPartial<Deployment>): Promise<Deployment> {
const deploymentRepository = this.dataSource.getRepository(Deployment);
const id = nanoid();
@ -280,7 +238,7 @@ export class Database {
return deployment;
}
async getProjectMembersByProjectId(
async getProjectMembersByProjectId (
projectId: string
): Promise<ProjectMember[]> {
const projectMemberRepository =
@ -301,7 +259,7 @@ export class Database {
return projectMembers;
}
async getEnvironmentVariablesByProjectId(
async getEnvironmentVariablesByProjectId (
projectId: string,
filter?: FindOptionsWhere<EnvironmentVariable>
): Promise<EnvironmentVariable[]> {
@ -320,7 +278,7 @@ export class Database {
return environmentVariables;
}
async removeProjectMemberById(projectMemberId: string): Promise<boolean> {
async removeProjectMemberById (projectMemberId: string): Promise<boolean> {
const projectMemberRepository =
this.dataSource.getRepository(ProjectMember);
@ -335,7 +293,7 @@ export class Database {
}
}
async updateProjectMemberById(
async updateProjectMemberById (
projectMemberId: string,
data: DeepPartial<ProjectMember>
): Promise<boolean> {
@ -349,7 +307,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async addProjectMember(
async addProjectMember (
data: DeepPartial<ProjectMember>
): Promise<ProjectMember> {
const projectMemberRepository =
@ -359,7 +317,7 @@ export class Database {
return newProjectMember;
}
async addEnvironmentVariables(
async addEnvironmentVariables (
data: DeepPartial<EnvironmentVariable>[]
): Promise<EnvironmentVariable[]> {
const environmentVariableRepository =
@ -370,7 +328,7 @@ export class Database {
return savedEnvironmentVariables;
}
async updateEnvironmentVariable(
async updateEnvironmentVariable (
environmentVariableId: string,
data: DeepPartial<EnvironmentVariable>
): Promise<boolean> {
@ -384,7 +342,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async deleteEnvironmentVariable(
async deleteEnvironmentVariable (
environmentVariableId: string
): Promise<boolean> {
const environmentVariableRepository =
@ -400,7 +358,7 @@ export class Database {
}
}
async getProjectMemberById(projectMemberId: string): Promise<ProjectMember> {
async getProjectMemberById (projectMemberId: string): Promise<ProjectMember> {
const projectMemberRepository =
this.dataSource.getRepository(ProjectMember);
@ -423,7 +381,7 @@ export class Database {
return projectMemberWithProject[0];
}
async getProjectsBySearchText(
async getProjectsBySearchText (
userId: string,
searchText: string
): Promise<Project[]> {
@ -445,14 +403,14 @@ export class Database {
return projects;
}
async updateDeploymentById(
async updateDeploymentById (
deploymentId: string,
data: DeepPartial<Deployment>
): Promise<boolean> {
return this.updateDeployment({ id: deploymentId }, data);
}
async updateDeployment(
async updateDeployment (
criteria: FindOptionsWhere<Deployment>,
data: DeepPartial<Deployment>
): Promise<boolean> {
@ -462,7 +420,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async updateDeploymentsByProjectIds(
async updateDeploymentsByProjectIds (
projectIds: string[],
data: DeepPartial<Deployment>
): Promise<boolean> {
@ -478,7 +436,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async deleteDeploymentById(deploymentId: string): Promise<boolean> {
async deleteDeploymentById (deploymentId: string): Promise<boolean> {
const deploymentRepository = this.dataSource.getRepository(Deployment);
const deployment = await deploymentRepository.findOneOrFail({
where: {
@ -491,7 +449,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
@ -510,13 +468,7 @@ export class Database {
return projectRepository.save(newProject);
}
async saveProject(project: Project): Promise<Project> {
const projectRepository = this.dataSource.getRepository(Project);
return projectRepository.save(project);
}
async updateProjectById(
async updateProjectById (
projectId: string,
data: DeepPartial<Project>
): Promise<boolean> {
@ -529,7 +481,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async deleteProjectById(projectId: string): Promise<boolean> {
async deleteProjectById (projectId: string): Promise<boolean> {
const projectRepository = this.dataSource.getRepository(Project);
const project = await projectRepository.findOneOrFail({
where: {
@ -545,7 +497,7 @@ export class Database {
return Boolean(deleteResult);
}
async deleteDomainById(domainId: string): Promise<boolean> {
async deleteDomainById (domainId: string): Promise<boolean> {
const domainRepository = this.dataSource.getRepository(Domain);
const deleteResult = await domainRepository.softDelete({ id: domainId });
@ -557,21 +509,21 @@ export class Database {
}
}
async addDomain(data: DeepPartial<Domain>): Promise<Domain> {
async addDomain (data: DeepPartial<Domain>): Promise<Domain> {
const domainRepository = this.dataSource.getRepository(Domain);
const newDomain = await domainRepository.save(data);
return newDomain;
}
async getDomain(options: FindOneOptions<Domain>): Promise<Domain | null> {
async getDomain (options: FindOneOptions<Domain>): Promise<Domain | null> {
const domainRepository = this.dataSource.getRepository(Domain);
const domain = await domainRepository.findOne(options);
return domain;
}
async updateDomainById(
async updateDomainById (
domainId: string,
data: DeepPartial<Domain>
): Promise<boolean> {
@ -581,7 +533,7 @@ export class Database {
return Boolean(updateResult.affected);
}
async getDomainsByProjectId(
async getDomainsByProjectId (
projectId: string,
filter?: FindOptionsWhere<Domain>
): Promise<Domain[]> {
@ -601,24 +553,4 @@ export class Database {
return domains;
}
async addDeployer(data: DeepPartial<Deployer>): Promise<Deployer> {
const deployerRepository = this.dataSource.getRepository(Deployer);
const newDomain = await deployerRepository.save(data);
return newDomain;
}
async getDeployers(): Promise<Deployer[]> {
const deployerRepository = this.dataSource.getRepository(Deployer);
const deployers = await deployerRepository.find();
return deployers;
}
async getDeployerByLRN(deployerLrn: string): Promise<Deployer | null> {
const deployerRepository = this.dataSource.getRepository(Deployer);
const deployer = await deployerRepository.findOne({ where: { deployerLrn } });
return deployer;
}
}

View File

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

View File

@ -13,7 +13,6 @@ import {
import { Project } from './Project';
import { Domain } from './Domain';
import { User } from './User';
import { Deployer } from './Deployer';
import { AppDeploymentRecordAttributes, AppDeploymentRemovalRecordAttributes } from '../types';
export enum Environment {
@ -38,17 +37,19 @@ export interface ApplicationDeploymentRequest {
auction?: string;
config: string;
meta: string;
payment?: string;
}
export interface ApplicationDeploymentRemovalRequest {
type: string;
version: string;
deployment: string;
auction?: string;
payment?: string;
}
export interface ApplicationDeploymentRemovalRequest {
type: string;
version: string;
deployment: string;
}
export interface ApplicationRecord {
type: string;
@ -126,9 +127,8 @@ export class Deployment {
@Column('simple-json', { nullable: true })
applicationDeploymentRemovalRecordData!: AppDeploymentRemovalRecordAttributes | null;
@ManyToOne(() => Deployer)
@JoinColumn({ name: 'deployerLrn' })
deployer!: Deployer;
@Column('varchar')
deployerLrn!: string;
@Column({
enum: Environment
@ -138,6 +138,9 @@ export class Deployment {
@Column('boolean', { default: false })
isCurrent!: boolean;
@Column('varchar', { nullable: true })
baseDomain!: string | null;
@Column({
enum: DeploymentStatus
})

View File

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

View File

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

View File

@ -5,8 +5,7 @@ import { Octokit } from 'octokit';
import { inc as semverInc } from 'semver';
import { DeepPartial } from 'typeorm';
import { Account, DEFAULT_GAS_ESTIMATION_MULTIPLIER, Registry as LaconicRegistry, getGasPrice, parseGasAndFees } from '@cerc-io/registry-sdk';
import { DeliverTxResponse, IndexedTx } from '@cosmjs/stargate';
import { Registry as LaconicRegistry, getGasPrice, parseGasAndFees } from '@cerc-io/registry-sdk';
import { RegistryConfig } from './config';
import {
@ -15,8 +14,9 @@ import {
ApplicationDeploymentRequest,
ApplicationDeploymentRemovalRequest
} from './entity/Deployment';
import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord } from './types';
import { getConfig, getRepoDetails, registryTransactionWithRetry, sleep } from './utils';
import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionData } from './types';
import { getConfig, getRepoDetails, sleep } from './utils';
import { Auction } from '@cerc-io/registry-sdk/dist/proto/cerc/auction/v1/auction';
const log = debug('snowball:registry');
@ -26,7 +26,6 @@ const APP_DEPLOYMENT_REQUEST_TYPE = 'ApplicationDeploymentRequest';
const APP_DEPLOYMENT_REMOVAL_REQUEST_TYPE = 'ApplicationDeploymentRemovalRequest';
const APP_DEPLOYMENT_RECORD_TYPE = 'ApplicationDeploymentRecord';
const APP_DEPLOYMENT_REMOVAL_RECORD_TYPE = 'ApplicationDeploymentRemovalRecord';
const WEBAPP_DEPLOYER_RECORD_TYPE = 'WebappDeployer'
const SLEEP_DURATION = 1000;
// TODO: Move registry code to registry-sdk/watcher-ts
@ -109,8 +108,7 @@ export class Registry {
const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
const result = await registryTransactionWithRetry(() =>
this.registry.setRecord(
const result = await this.registry.setRecord(
{
privateKey: this.registryConfig.privateKey,
record: applicationRecord,
@ -118,7 +116,6 @@ export class Registry {
},
this.registryConfig.privateKey,
fee
)
);
log(`Published application record ${result.id}`);
@ -129,39 +126,33 @@ export class Registry {
log(`Setting name: ${lrn} for record ID: ${result.id}`);
await sleep(SLEEP_DURATION);
await registryTransactionWithRetry(() =>
this.registry.setName(
await this.registry.setName(
{
cid: result.id,
lrn
},
this.registryConfig.privateKey,
fee
)
);
await sleep(SLEEP_DURATION);
await registryTransactionWithRetry(() =>
this.registry.setName(
await this.registry.setName(
{
cid: result.id,
lrn: `${lrn}@${applicationRecord.app_version}`
},
this.registryConfig.privateKey,
fee
)
);
await sleep(SLEEP_DURATION);
await registryTransactionWithRetry(() =>
this.registry.setName(
await this.registry.setName(
{
cid: result.id,
lrn: `${lrn}@${applicationRecord.repository_ref}`
},
this.registryConfig.privateKey,
fee
)
);
return {
@ -173,7 +164,7 @@ export class Registry {
async createApplicationDeploymentAuction(
appName: string,
octokit: Octokit,
auctionParams: AuctionParams,
auctionData: AuctionData,
data: DeepPartial<Deployment>,
): Promise<{
applicationDeploymentAuctionId: string;
@ -192,21 +183,19 @@ export class Registry {
const auctionConfig = config.auction;
const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
const auctionResult = await registryTransactionWithRetry(() =>
this.registry.createProviderAuction(
const auctionResult = await this.registry.createProviderAuction(
{
commitFee: auctionConfig.commitFee,
commitsDuration: auctionConfig.commitsDuration,
revealFee: auctionConfig.revealFee,
revealsDuration: auctionConfig.revealsDuration,
denom: auctionConfig.denom,
maxPrice: auctionParams.maxPrice,
numProviders: auctionParams.numProviders,
maxPrice: auctionData.maxPrice,
numProviders: auctionData.numProviders,
},
this.registryConfig.privateKey,
fee
)
);
if (!auctionResult.auction) {
throw new Error('Error creating auction');
@ -219,8 +208,7 @@ export class Registry {
type: APP_DEPLOYMENT_AUCTION_RECORD_TYPE,
};
const result = await registryTransactionWithRetry(() =>
this.registry.setRecord(
const result = await this.registry.setRecord(
{
privateKey: this.registryConfig.privateKey,
record: applicationDeploymentAuction,
@ -228,7 +216,6 @@ export class Registry {
},
this.registryConfig.privateKey,
fee
)
);
log(`Application deployment auction created: ${auctionResult.auction.id}`);
@ -244,11 +231,10 @@ export class Registry {
deployment: Deployment,
appName: string,
repository: string,
auctionId?: string | null,
auctionId?: string,
lrn: string,
environmentVariables: { [key: string]: string },
dns: string,
payment?: string | null
}): Promise<{
applicationDeploymentRequestId: string;
applicationDeploymentRequestData: ApplicationDeploymentRequest;
@ -269,6 +255,7 @@ export class Registry {
application: `${lrn}@${applicationRecord.attributes.app_version}`,
dns: data.dns,
// TODO: Not set in test-progressive-web-app CI
// https://git.vdb.to/cerc-io/laconic-registry-cli/commit/129019105dfb93bebcea02fde0ed64d0f8e5983b
config: JSON.stringify({
env: data.environmentVariables
@ -282,15 +269,13 @@ export class Registry {
}),
deployer: data.lrn,
...(data.auctionId && { auction: data.auctionId }),
...(data.payment && { payment: data.payment }),
};
await sleep(SLEEP_DURATION);
const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
const result = await registryTransactionWithRetry(() =>
this.registry.setRecord(
const result = await this.registry.setRecord(
{
privateKey: this.registryConfig.privateKey,
record: applicationDeploymentRequest,
@ -298,9 +283,7 @@ export class Registry {
},
this.registryConfig.privateKey,
fee
)
);
log(`Application deployment request record published: ${result.id}`);
log('Application deployment request data:', applicationDeploymentRequest);
@ -310,50 +293,32 @@ export class Registry {
};
}
async getAuctionWinningDeployerRecords(
async getAuctionWinningDeployers(
auctionId: string
): Promise<DeployerRecord[]> {
): Promise<string[]> {
const records = await this.registry.getAuctionsByIds([auctionId]);
const auctionResult = records[0];
let deployerRecords = [];
let deployerLrns = [];
const { winnerAddresses } = auctionResult;
for (const auctionWinner of winnerAddresses) {
const records = await this.getDeployerRecordsByFilter({
const deployerRecords = await this.registry.queryRecords(
{
paymentAddress: auctionWinner,
});
},
true
);
const newRecords = records.filter(record => {
return record.names !== null && record.names.length > 0;
});
for (const record of newRecords) {
if (record.id) {
deployerRecords.push(record);
for (const record of deployerRecords) {
if (record.names && record.names.length > 0) {
deployerLrns.push(record.names[0]);
break;
}
}
}
return deployerRecords;
}
async releaseDeployerFunds(
auctionId: string
): Promise<any> {
const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
const auction = await registryTransactionWithRetry(() =>
this.registry.releaseFunds(
{
auctionId
},
this.registryConfig.privateKey,
fee
)
);
return auction;
return deployerLrns;
}
/**
@ -381,19 +346,6 @@ export class Registry {
);
}
/**
* Fetch WebappDeployer Records by filter
*/
async getDeployerRecordsByFilter(filter: { [key: string]: any }): Promise<DeployerRecord[]> {
return this.registry.queryRecords(
{
type: WEBAPP_DEPLOYER_RECORD_TYPE,
...filter
},
true
);
}
/**
* Fetch ApplicationDeploymentRecords by filter
*/
@ -434,8 +386,6 @@ export class Registry {
async createApplicationDeploymentRemovalRequest(data: {
deploymentId: string;
deployerLrn: string;
auctionId?: string | null;
payment?: string | null;
}): Promise<{
applicationDeploymentRemovalRequestId: string;
applicationDeploymentRemovalRequestData: ApplicationDeploymentRemovalRequest;
@ -444,15 +394,12 @@ export class Registry {
type: APP_DEPLOYMENT_REMOVAL_REQUEST_TYPE,
version: '1.0.0',
deployment: data.deploymentId,
deployer: data.deployerLrn,
...(data.auctionId && { auction: data.auctionId }),
...(data.payment && { payment: data.payment }),
deployer: data.deployerLrn
};
const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
const result = await registryTransactionWithRetry(() =>
this.registry.setRecord(
const result = await this.registry.setRecord(
{
privateKey: this.registryConfig.privateKey,
record: applicationDeploymentRemovalRequest,
@ -460,7 +407,6 @@ export class Registry {
},
this.registryConfig.privateKey,
fee
)
);
log(`Application deployment removal request record published: ${result.id}`);
@ -472,16 +418,18 @@ export class Registry {
};
}
async getCompletedAuctionIds(auctionIds: string[]): Promise<string[]> {
if (auctionIds.length === 0) {
return [];
async getCompletedAuctionIds(auctionIds: (string | null | undefined)[]): Promise<string[] | null> {
const validAuctionIds = auctionIds.filter((id): id is string => id !== null && id !== undefined);
if (!validAuctionIds.length) {
return null;
}
const auctions = await this.registry.getAuctionsByIds(auctionIds);
const auctions = await this.registry.getAuctionsByIds(validAuctionIds);
const completedAuctions = auctions
.filter((auction: { id: string, status: string }) => auction.status === 'completed')
.map((auction: { id: string, status: string }) => auction.id);
.filter((auction: Auction) => auction.status === 'completed')
.map((auction: Auction) => auction.id);
return completedAuctions;
}
@ -494,40 +442,6 @@ 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);
const account = await this.getAccount();
const laconicClient = await this.registry.getLaconicClient(account);
const txResponse: DeliverTxResponse =
await registryTransactionWithRetry(() =>
laconicClient.sendTokens(account.address, receiverAddress,
[
{
denom: 'alnt',
amount
}
],
fee || DEFAULT_GAS_ESTIMATION_MULTIPLIER)
);
return txResponse;
}
async getAccount(): Promise<Account> {
const account = new Account(Buffer.from(this.registryConfig.privateKey, 'hex'));
await account.init();
return account;
}
async getTxResponse(txHash: string): Promise<IndexedTx | null> {
const account = await this.getAccount();
const laconicClient = await this.registry.getLaconicClient(account);
const txResponse: IndexedTx | null = await laconicClient.getTx(txHash);
return txResponse;
}
getLrn(appName: string): string {
assert(this.registryConfig.authority, "Authority doesn't exist");
return `lrn://${this.registryConfig.authority}/applications/${appName}`;

View File

@ -6,7 +6,7 @@ import { Permission } from './entity/ProjectMember';
import { Domain } from './entity/Domain';
import { Project } from './entity/Project';
import { EnvironmentVariable } from './entity/EnvironmentVariable';
import { AddProjectFromTemplateInput, AuctionParams, EnvironmentVariables } from './types';
import { AddProjectFromTemplateInput, AuctionData } from './types';
const log = debug('snowball:resolver');
@ -22,8 +22,8 @@ export const createResolvers = async (service: Service): Promise<any> => {
return service.getOrganizationsByUserId(context.user);
},
project: async (_: any, { projectId }: { projectId: string }, context: any) => {
return service.getProjectById(context.user, projectId);
project: async (_: any, { projectId }: { projectId: string }) => {
return service.getProjectById(projectId);
},
projectsInOrganization: async (
@ -76,25 +76,6 @@ export const createResolvers = async (service: Service): Promise<any> => {
) => {
return service.getAuctionData(auctionId);
},
deployers: async (_: any, __: any, context: any) => {
return service.getDeployers();
},
address: async (_: any, __: any, context: any) => {
return service.getAddress();
},
verifyTx: async (
_: any,
{
txHash,
amount,
senderAddress,
}: { txHash: string; amount: string; senderAddress: string },
) => {
return service.verifyTx(txHash, amount, senderAddress);
},
},
// TODO: Return error in GQL response
@ -230,15 +211,8 @@ export const createResolvers = async (service: Service): Promise<any> => {
organizationSlug,
data,
lrn,
auctionParams,
environmentVariables
}: {
organizationSlug: string;
data: AddProjectFromTemplateInput;
lrn: string;
auctionParams: AuctionParams;
environmentVariables: EnvironmentVariables[];
},
auctionData
}: { organizationSlug: string; data: AddProjectFromTemplateInput; lrn: string; auctionData: AuctionData },
context: any,
) => {
try {
@ -247,8 +221,7 @@ export const createResolvers = async (service: Service): Promise<any> => {
organizationSlug,
data,
lrn,
auctionParams,
environmentVariables
auctionData
);
} catch (err) {
log(err);
@ -262,26 +235,12 @@ export const createResolvers = async (service: Service): Promise<any> => {
organizationSlug,
data,
lrn,
auctionParams,
environmentVariables
}: {
organizationSlug: string;
data: DeepPartial<Project>;
lrn: string;
auctionParams: AuctionParams,
environmentVariables: EnvironmentVariables[];
},
auctionData
}: { organizationSlug: string; data: DeepPartial<Project>; lrn: string; auctionData: AuctionData },
context: any,
) => {
try {
return await service.addProject(
context.user,
organizationSlug,
data,
lrn,
auctionParams,
environmentVariables
);
return await service.addProject(context.user, organizationSlug, data, lrn, auctionData);
} catch (err) {
log(err);
throw err;

View File

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

View File

@ -72,13 +72,10 @@ type Project {
repository: String!
prodBranch: String!
description: String
deployers: [Deployer!]
deployerLrns: [String]
auctionId: String
fundsReleased: Boolean
template: String
framework: String
paymentAddress: String!
txHash: String!
webhooks: [String!]
members: [ProjectMember!]
environmentVariables: [EnvironmentVariable!]
@ -106,8 +103,7 @@ type Deployment {
commitMessage: String!
url: String
environment: Environment!
deployer: Deployer
applicationDeploymentRequestId: String
deployerLrn: String
isCurrent: Boolean!
baseDomain: String
status: DeploymentStatus!
@ -135,17 +131,6 @@ type EnvironmentVariable {
updatedAt: String!
}
type Deployer {
deployerLrn: String!
deployerId: String!
deployerApiUrl: String!
minimumPayment: String
paymentAddress: String
createdAt: String!
updatedAt: String!
baseDomain: String
}
type AuthResult {
token: String!
}
@ -162,8 +147,6 @@ input AddProjectFromTemplateInput {
owner: String!
name: String!
isPrivate: Boolean!
paymentAddress: String!
txHash: String!
}
input AddProjectInput {
@ -171,8 +154,6 @@ input AddProjectInput {
repository: String!
prodBranch: String!
template: String
paymentAddress: String!
txHash: String!
}
input UpdateProjectInput {
@ -249,7 +230,7 @@ type Auction {
bids: [Bid!]!
}
input AuctionParams {
input AuctionData {
maxPrice: String,
numProviders: Int,
}
@ -266,9 +247,6 @@ type Query {
searchProjects(searchText: String!): [Project!]
getAuctionData(auctionId: String!): Auction!
domains(projectId: String!, filter: FilterDomainsInput): [Domain]
deployers: [Deployer]
address: String!
verifyTx(txHash: String!, amount: String!, senderAddress: String!): Boolean!
}
type Mutation {
@ -292,15 +270,13 @@ type Mutation {
organizationSlug: String!
data: AddProjectFromTemplateInput
lrn: String
auctionParams: AuctionParams
environmentVariables: [AddEnvironmentVariableInput!]
auctionData: AuctionData
): Project!
addProject(
organizationSlug: String!
data: AddProjectInput!
lrn: String
auctionParams: AuctionParams
environmentVariables: [AddEnvironmentVariableInput!]
auctionData: AuctionData
): Project!
updateProject(projectId: String!, data: UpdateProjectInput): Boolean!
redeployToProd(deploymentId: String!): Boolean!

View File

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

View File

@ -14,15 +14,12 @@ import { Project } from './entity/Project';
import { Permission, ProjectMember } from './entity/ProjectMember';
import { User } from './entity/User';
import { Registry } from './registry';
import { Deployer } from './entity/Deployer';
import { GitHubConfig, RegistryConfig } from './config';
import {
AddProjectFromTemplateInput,
AppDeploymentRecord,
AppDeploymentRemovalRecord,
AuctionParams,
DeployerRecord,
EnvironmentVariables,
AuctionData,
GitPushEventPayload,
} from './types';
import { Role } from './entity/UserOrganization';
@ -47,7 +44,6 @@ export class Service {
private config: Config;
private deployRecordCheckTimeout?: NodeJS.Timeout;
private auctionStatusCheckTimeout?: NodeJS.Timeout;
constructor(config: Config, db: Database, app: OAuthApp, registry: Registry) {
this.db = db;
@ -74,7 +70,6 @@ export class Service {
*/
destroy(): void {
clearTimeout(this.deployRecordCheckTimeout);
clearTimeout(this.auctionStatusCheckTimeout);
}
/**
@ -165,25 +160,42 @@ export class Service {
/**
* Update deployments with ApplicationDeploymentRecord data
* Deployments that are completed but not updated in DB
*/
async updateDeploymentsWithRecordData(
records: AppDeploymentRecord[],
): Promise<void> {
// Fetch the deployments to be updated using deployment requestId
// Get deployments for ApplicationDeploymentRecords
// Deployments that are completed but not updated(are in building state and ApplicationDeploymentRecord is present)
const deployments = await this.db.getDeployments({
where: records.map((record) => ({
applicationDeploymentRequestId: record.attributes.request,
applicationRecordId: record.attributes.application,
// Only for the specific deployer
deployerLrn: record.attributes.deployer
})),
relations: {
deployer: true,
project: true,
},
order: {
createdAt: 'DESC',
},
});
// Get deployment IDs of deployments that are in production environment
const productionDeploymentIds: string[] = [];
deployments.forEach(deployment => {
if (deployment.environment === Environment.Production) {
if (!productionDeploymentIds.includes(deployment.id)) {
productionDeploymentIds.push(deployment.id);
}
}
});
// Set old deployments isCurrent to false
// TODO: Only set isCurrent to false for the deployment for that specific deployer
for (const deploymentId of productionDeploymentIds) {
await this.db.updateDeployment(
{ id: deploymentId },
{ isCurrent: false }
);
}
const recordToDeploymentsMap = deployments.reduce(
(acc: { [key: string]: Deployment }, deployment) => {
acc[deployment.applicationDeploymentRequestId!] = deployment;
@ -195,56 +207,37 @@ export class Service {
// Update deployment data for ApplicationDeploymentRecords
const deploymentUpdatePromises = records.map(async (record) => {
const deployment = recordToDeploymentsMap[record.attributes.request];
const project = await this.getProjectById(deployment.projectId)
assert(project)
if (!deployment.project) {
log(`Project ${deployment.projectId} not found`);
return;
} else {
deployment.applicationDeploymentRecordId = record.id;
deployment.applicationDeploymentRecordData = record.attributes;
deployment.url = record.attributes.url;
deployment.status = DeploymentStatus.Ready;
deployment.isCurrent = deployment.environment === Environment.Production;
const parts = record.attributes.url.replace('https://', '').split('.');
const baseDomain = parts.slice(1).join('.');
await this.db.updateDeploymentById(deployment.id, deployment);
// Release deployer funds on successful deployment
if (!deployment.project.fundsReleased) {
const fundsReleased = await this.releaseDeployerFundsByProjectId(deployment.projectId);
// Return remaining amount to owner
await this.returnUserFundsByProjectId(deployment.projectId, true);
await this.db.updateProjectById(deployment.projectId, {
fundsReleased,
await this.db.updateDeploymentById(deployment.id, {
applicationDeploymentRecordId: record.id,
applicationDeploymentRecordData: record.attributes,
url: record.attributes.url,
baseDomain,
status: DeploymentStatus.Ready,
isCurrent: deployment.environment === Environment.Production,
});
const baseDomains = project.baseDomains || [];
if (!baseDomains.includes(baseDomain)) {
baseDomains.push(baseDomain);
}
await this.db.updateProjectById(project.id, {
baseDomains
})
log(
`Updated deployment ${deployment.id} with URL ${record.attributes.url}`,
);
}
});
await Promise.all(deploymentUpdatePromises);
// Get deployments that are in production environment
const prodDeployments = Object.values(recordToDeploymentsMap).filter(deployment => deployment.isCurrent);
// Set the isCurrent state to false for the old deployments
for (const deployment of prodDeployments) {
const projectDeployments = await this.db.getDeploymentsByProjectId(deployment.projectId);
const oldDeployments = projectDeployments
.filter(projectDeployment => projectDeployment.deployer.deployerLrn === deployment.deployer.deployerLrn && projectDeployment.id !== deployment.id);
for (const oldDeployment of oldDeployments) {
await this.db.updateDeployment(
{ id: oldDeployment.id },
{ isCurrent: false }
);
}
}
await Promise.all(deploymentUpdatePromises);
}
/**
@ -287,6 +280,13 @@ export class Service {
);
await this.db.deleteDeploymentById(deployment.id);
const project = await this.db.getProjectById(deployment.projectId);
const updatedBaseDomains = project!.baseDomains!.filter(baseDomain => baseDomain !== deployment.baseDomain);
await this.db.updateProjectById(deployment.projectId, {
baseDomains: updatedBaseDomains
});
});
await Promise.all(deploymentUpdatePromises);
@ -297,36 +297,48 @@ export class Service {
* Calls the createDeploymentFromAuction method for deployments with completed auctions
*/
async checkAuctionStatus(): Promise<void> {
const projects = await this.db.allProjectsWithoutDeployments();
const allProjects = await this.db.getProjects({
where: {
auctionId: Not(IsNull()),
},
relations: ['deployments'],
withDeleted: true,
});
const validAuctionIds = projects.map((project) => project.auctionId)
.filter((id): id is string => Boolean(id));
const completedAuctionIds = await this.laconicRegistry.getCompletedAuctionIds(validAuctionIds);
// Should only check on the first deployment
const projects = allProjects.filter(project => {
if (project.deletedAt !== null) return false;
const deletedDeployments = project.deployments.filter(deployment => deployment.deletedAt !== null).length;
return project.deployments.length === 0 && deletedDeployments === 0;
});
const auctionIds = projects.map((project) => project.auctionId);
const completedAuctionIds = await this.laconicRegistry.getCompletedAuctionIds(auctionIds);
if (completedAuctionIds) {
const projectsToBedeployed = projects.filter((project) =>
completedAuctionIds.includes(project.auctionId!)
);
for (const project of projectsToBedeployed) {
const deployerRecords = await this.laconicRegistry.getAuctionWinningDeployerRecords(project!.auctionId!);
log(`Auction ${project!.auctionId} completed`);
if (!deployerRecords) {
log(`No winning deployer for auction ${project!.auctionId}`);
const deployerLrns = await this.laconicRegistry.getAuctionWinningDeployers(project!.auctionId!);
// Update project with deployer LRNs
await this.db.updateProjectById(project.id!, {
deployerLrns
});
// Return all funds to the owner
await this.returnUserFundsByProjectId(project.id, false)
} else {
const deployers = await this.saveDeployersByDeployerRecords(deployerRecords);
for (const deployer of deployers) {
log(`Creating deployment for deployer ${deployer.deployerLrn}`);
for (const deployer of deployerLrns) {
log(`Creating deployment for deployer LRN ${deployer}`);
await this.createDeploymentFromAuction(project, deployer);
// Update project with deployer
await this.updateProjectWithDeployer(project.id, deployer);
}
}
}
this.auctionStatusCheckTimeout = setTimeout(() => {
this.deployRecordCheckTimeout = setTimeout(() => {
this.checkAuctionStatus();
}, this.config.registryConfig.checkAuctionStatusDelay);
}
@ -364,7 +376,7 @@ export class Service {
}
async createUser(params: {
name?: string;
name: string;
email: string;
subOrgId: string;
ethAddress: string;
@ -407,13 +419,8 @@ export class Service {
return dbOrganizations;
}
async getProjectById(user: User, projectId: string): Promise<Project | null> {
async getProjectById(projectId: string): Promise<Project | null> {
const dbProject = await this.db.getProjectById(projectId);
if (dbProject && dbProject.owner.id !== user.id) {
return null;
}
return dbProject;
}
@ -593,8 +600,7 @@ export class Service {
domain: prodBranchDomains[0],
commitHash: oldDeployment.commitHash,
commitMessage: oldDeployment.commitMessage,
deployer: oldDeployment.deployer
});
}, oldDeployment.deployerLrn);
return newDeployment;
}
@ -603,7 +609,7 @@ export class Service {
userId: string,
octokit: Octokit,
data: DeepPartial<Deployment>,
deployerLrn?: string
deployerLrn: string
): Promise<Deployment> {
assert(data.project?.repository, 'Project repository not found');
log(
@ -632,14 +638,7 @@ export class Service {
);
}
let deployer;
if (deployerLrn) {
deployer = await this.db.getDeployerByLRN(deployerLrn);
} else {
deployer = data.deployer;
}
const newDeployment = await this.createDeploymentFromData(userId, data, deployer!.deployerLrn!, applicationRecordId, applicationRecordData);
const newDeployment = await this.createDeploymentFromData(userId, data, deployerLrn, applicationRecordId, applicationRecordData);
const { repo, repoUrl } = await getRepoDetails(octokit, data.project.repository, data.commitHash);
const environmentVariablesObj = await this.getEnvVariables(data.project!.id!);
@ -653,9 +652,7 @@ export class Service {
repository: repoUrl,
environmentVariables: environmentVariablesObj,
dns: `${newDeployment.project.name}`,
lrn: deployer!.deployerLrn!,
payment: data.project.txHash,
auctionId: data.project.auctionId
lrn: deployerLrn
});
}
@ -664,11 +661,9 @@ export class Service {
deployment: newDeployment,
appName: repo,
repository: repoUrl,
lrn: deployer!.deployerLrn!,
lrn: deployerLrn,
environmentVariables: environmentVariablesObj,
dns: `${newDeployment.project.name}-${newDeployment.id}`,
payment: data.project.txHash,
auctionId: data.project.auctionId
});
await this.db.updateDeploymentById(newDeployment.id, {
@ -676,12 +671,17 @@ export class Service {
applicationDeploymentRequestData,
});
// Save deployer lrn only if present
if (deployerLrn) {
newDeployment.project.deployerLrns = [deployerLrn];
}
return newDeployment;
}
async createDeploymentFromAuction(
project: DeepPartial<Project>,
deployer: Deployer
deployerLrn: string
): Promise<Deployment> {
const octokit = await this.getOctokit(project.ownerId!);
const [owner, repo] = project.repository!.split('/');
@ -707,8 +707,6 @@ export class Service {
const applicationRecordId = record.id;
const applicationRecordData = record.attributes;
const deployerLrn = deployer!.deployerLrn
// Create deployment with prod branch and latest commit
const deploymentData = {
project,
@ -777,9 +775,7 @@ export class Service {
createdBy: Object.assign(new User(), {
id: userId,
}),
deployer: Object.assign(new Deployer(), {
deployerLrn,
}),
});
log(`Created deployment ${newDeployment.id}`);
@ -787,33 +783,12 @@ export class Service {
return newDeployment;
}
async updateProjectWithDeployer(
projectId: string,
deployer: Deployer
): Promise<Deployer> {
const deploymentProject = await this.db.getProjects({
where: { id: projectId },
relations: ['deployers']
});
if (!deploymentProject[0].deployers) {
deploymentProject[0].deployers = [];
}
deploymentProject[0].deployers.push(deployer);
await this.db.saveProject(deploymentProject[0]);
return deployer;
}
async addProjectFromTemplate(
user: User,
organizationSlug: string,
data: AddProjectFromTemplateInput,
lrn?: string,
auctionParams?: AuctionParams,
environmentVariables?: EnvironmentVariables[],
auctionData?: AuctionData
): Promise<Project | undefined> {
try {
const octokit = await this.getOctokit(user.id);
@ -844,9 +819,7 @@ export class Service {
repository: gitRepo.data.full_name,
// TODO: Set selected template
template: 'webapp',
paymentAddress: data.paymentAddress,
txHash: data.txHash
}, lrn, auctionParams, environmentVariables);
}, lrn, auctionData);
if (!project || !project.id) {
throw new Error('Failed to create project from template');
@ -864,24 +837,19 @@ export class Service {
organizationSlug: string,
data: DeepPartial<Project>,
lrn?: string,
auctionParams?: AuctionParams,
environmentVariables?: EnvironmentVariables[],
auctionData?: AuctionData
): Promise<Project | undefined> {
const organization = await this.db.getOrganization({
where: {
slug: organizationSlug,
},
});
if (!organization) {
throw new Error('Organization does not exist');
}
const project = await this.db.addProject(user, organization.id, data);
if (environmentVariables) {
await this.addEnvironmentVariables(project.id, environmentVariables);
}
log(`Project created ${project.id}`);
const octokit = await this.getOctokit(user.id);
const [owner, repo] = project.repository.split('/');
@ -895,7 +863,6 @@ export class Service {
per_page: 1,
});
if (auctionParams) {
// Create deployment with prod branch and latest commit
const deploymentData = {
project,
@ -905,45 +872,12 @@ export class Service {
commitHash: latestCommit.sha,
commitMessage: latestCommit.commit.message,
};
const { applicationDeploymentAuctionId } = await this.laconicRegistry.createApplicationDeploymentAuction(repo, octokit, auctionParams!, deploymentData);
await this.updateProject(project.id, { auctionId: applicationDeploymentAuctionId });
if (auctionData) {
const { applicationDeploymentAuctionId } = await this.laconicRegistry.createApplicationDeploymentAuction(repo, octokit, auctionData!, deploymentData);
await this.updateProject(project.id, { auctionId: applicationDeploymentAuctionId })
} else {
const deployer = await this.db.getDeployerByLRN(lrn!);
if (!deployer) {
log('Invalid deployer LRN');
return;
}
if (deployer.minimumPayment && project.txHash) {
const amountToBePaid = deployer?.minimumPayment.replace(/\D/g, '').toString();
const txResponse = await this.laconicRegistry.sendTokensToAccount(
deployer?.paymentAddress!,
amountToBePaid
);
const txHash = txResponse.transactionHash;
if (txHash) {
await this.updateProject(project.id, { txHash });
project.txHash = txHash;
log('Funds transferrend to deployer');
}
}
const deploymentData = {
project,
branch: project.prodBranch,
environment: Environment.Production,
domain: null,
commitHash: latestCommit.sha,
commitMessage: latestCommit.commit.message,
deployer
};
const newDeployment = await this.createDeployment(user.id, octokit, deploymentData);
// Update project with deployer
await this.updateProjectWithDeployer(newDeployment.projectId, newDeployment.deployer);
await this.createDeployment(user.id, octokit, deploymentData, lrn!);
}
await this.createRepoHook(octokit, project);
@ -997,9 +931,6 @@ export class Service {
);
const projects = await this.db.getProjects({
where: { repository: repository.full_name },
relations: {
deployers: true,
}
});
if (!projects.length) {
@ -1016,9 +947,8 @@ export class Service {
branch,
});
const deployers = project.deployers;
const deployers = project.deployerLrns;
if (!deployers) {
log(`No deployer present for project ${project.id}`)
return;
}
@ -1035,11 +965,12 @@ export class Service {
domain,
commitHash: headCommit.id,
commitMessage: headCommit.message,
deployer: deployer
},
deployer
);
}
}
}
async updateProject(
@ -1075,7 +1006,6 @@ export class Service {
relations: {
project: true,
domain: true,
deployer: true,
createdBy: true,
},
where: {
@ -1092,7 +1022,7 @@ export class Service {
let newDeployment: Deployment;
if (oldDeployment.project.auctionId) {
newDeployment = await this.createDeploymentFromAuction(oldDeployment.project, oldDeployment.deployer);
newDeployment = await this.createDeploymentFromAuction(oldDeployment.project, oldDeployment.deployerLrn);
} else {
newDeployment = await this.createDeployment(user.id, octokit,
{
@ -1103,8 +1033,8 @@ export class Service {
domain: oldDeployment.domain,
commitHash: oldDeployment.commitHash,
commitMessage: oldDeployment.commitMessage,
deployer: oldDeployment.deployer
}
},
oldDeployment.deployerLrn
);
}
@ -1152,14 +1082,13 @@ export class Service {
},
relations: {
project: true,
deployer: true,
},
});
if (deployment && deployment.applicationDeploymentRecordId) {
// If deployment is current, remove deployment for project subdomain as well
if (deployment.isCurrent) {
const currentDeploymentURL = `https://${(deployment.project.name).toLowerCase()}.${deployment.deployer.baseDomain}`;
const currentDeploymentURL = `https://${(deployment.project.name).toLowerCase()}.${deployment.baseDomain}`;
// TODO: Store the latest DNS deployment record
const deploymentRecords =
@ -1182,18 +1111,14 @@ export class Service {
await this.laconicRegistry.createApplicationDeploymentRemovalRequest({
deploymentId: latestRecord.id,
deployerLrn: deployment.deployer.deployerLrn,
auctionId: deployment.project.auctionId,
payment: deployment.project.txHash
deployerLrn: deployment.deployerLrn
});
}
const result =
await this.laconicRegistry.createApplicationDeploymentRemovalRequest({
deploymentId: deployment.applicationDeploymentRecordId,
deployerLrn: deployment.deployer.deployerLrn,
auctionId: deployment.project.auctionId,
payment: deployment.project.txHash
deployerLrn: deployment.deployerLrn
});
await this.db.updateDeploymentById(deployment.id, {
@ -1353,132 +1278,4 @@ export class Service {
const auctions = await this.laconicRegistry.getAuctionData(auctionId);
return auctions[0];
}
async releaseDeployerFundsByProjectId(projectId: string): Promise<boolean> {
const project = await this.db.getProjectById(projectId);
if (!project || !project.auctionId) {
log(`Project ${projectId} ${!project ? 'not found' : 'does not have an auction'}`);
return false;
}
const auction = await this.laconicRegistry.releaseDeployerFunds(project.auctionId);
if (auction.auction.fundsReleased) {
log(`Funds released for auction ${project.auctionId}`);
await this.db.updateProjectById(projectId, { fundsReleased: true });
return true;
}
log(`Error releasing funds for auction ${project.auctionId}`);
return false;
}
async returnUserFundsByProjectId(projectId: string, winningDeployersPresent: boolean) {
const project = await this.db.getProjectById(projectId);
if (!project || !project.auctionId) {
log(`Project ${projectId} ${!project ? 'not found' : 'does not have an auction'}`);
return false;
}
const auction = await this.getAuctionData(project.auctionId);
const totalAuctionPrice = Number(auction.maxPrice.quantity) * auction.numProviders;
let amountToBeReturned;
if (winningDeployersPresent) {
amountToBeReturned = totalAuctionPrice - auction.winnerAddresses.length * Number(auction.winnerPrice.quantity);
} else {
amountToBeReturned = totalAuctionPrice;
}
if (amountToBeReturned !== 0) {
await this.laconicRegistry.sendTokensToAccount(
project.paymentAddress,
amountToBeReturned.toString()
);
}
}
async getDeployers(): Promise<Deployer[]> {
const dbDeployers = await this.db.getDeployers();
if (dbDeployers.length > 0) {
// Call asynchronously to fetch the records from the registry and update the DB
this.updateDeployersFromRegistry();
return dbDeployers;
} else {
// Fetch from the registry and populate empty DB
return await this.updateDeployersFromRegistry();
}
}
async updateDeployersFromRegistry(): Promise<Deployer[]> {
const deployerRecords = await this.laconicRegistry.getDeployerRecordsByFilter({});
await this.saveDeployersByDeployerRecords(deployerRecords);
return await this.db.getDeployers();
}
async saveDeployersByDeployerRecords(deployerRecords: DeployerRecord[]): Promise<Deployer[]> {
const deployers: Deployer[] = [];
for (const record of deployerRecords) {
if (record.names && record.names.length > 0) {
const deployerId = record.id;
const deployerLrn = record.names[0];
const deployerApiUrl = record.attributes.apiUrl;
const minimumPayment = record.attributes.minimumPayment;
const paymentAddress = record.attributes.paymentAddress;
const baseDomain = deployerApiUrl.substring(deployerApiUrl.indexOf('.') + 1);
const deployerData = {
deployerLrn,
deployerId,
deployerApiUrl,
baseDomain,
minimumPayment,
paymentAddress
};
// TODO: Update deployers table in a separate job
const deployer = await this.db.addDeployer(deployerData);
deployers.push(deployer);
}
}
return deployers;
}
async getAddress(): Promise<any> {
const account = await this.laconicRegistry.getAccount();
return account.address;
}
async verifyTx(txHash: string, amountSent: string, senderAddress: string): Promise<boolean> {
const txResponse = await this.laconicRegistry.getTxResponse(txHash);
if (!txResponse) {
log('Transaction response not found');
return false;
}
const transfer = txResponse.events.find(e => e.type === 'transfer' && e.attributes.some(a => a.key === 'msg_index'));
if (!transfer) {
log('No transfer event found');
return false;
}
const sender = transfer.attributes.find(a => a.key === 'sender')?.value;
const recipient = transfer.attributes.find(a => a.key === 'recipient')?.value;
const amount = transfer.attributes.find(a => a.key === 'amount')?.value;
const recipientAddress = await this.getAddress();
return amount === amountSent && sender === senderAddress && recipient === recipientAddress;
}
}

View File

@ -70,35 +70,29 @@ export interface AddProjectFromTemplateInput {
owner: string;
name: string;
isPrivate: boolean;
paymentAddress: string;
txHash: string;
}
export interface AuctionParams {
export interface Auction {
id: string;
kind: string;
status: string;
ownerAddress: string;
createTime: Date;
commitsEndTime: Date;
revealsEndTime: Date;
commitFee: string;
revealFee: string;
minimumBid?: string;
winnerAddresses: string[];
winnerBids?: string[];
winnerPrice?: string;
maxPrice?: string;
numProviders: number;
fundsReleased: boolean;
bids: string[];
}
export interface AuctionData {
maxPrice: string,
numProviders: number,
}
export interface EnvironmentVariables {
environments: string[],
key: string,
value: string,
}
export interface DeployerRecord {
id: string;
names: string[];
owners: string[];
bondId: string;
createTime: string;
expiryTime: string;
attributes: {
apiUrl: string;
minimumPayment: string | null;
name: string;
paymentAddress: string;
publicKey: string;
type: string;
version: string;
};
}

View File

@ -120,24 +120,3 @@ export const getRepoDetails = async (
repoUrl
};
}
// Wrapper method for registry txs to retry once if 'account sequence mismatch' occurs
export const registryTransactionWithRetry = async (
txMethod: () => Promise<any>
): Promise<any> => {
try {
return await txMethod();
} catch (error: any) {
if (!error.message.includes('account sequence mismatch')) {
throw error;
}
console.error(`Transaction failed due to account sequence mismatch. Retrying...`);
try {
return await txMethod();
} catch (retryError: any) {
throw new Error(`Transaction failed again after retry: ${retryError.message}`);
}
}
}

View File

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

View File

@ -38,7 +38,7 @@ async function main() {
});
for await (const deployment of deployments) {
const url = `https://${(deployment.project.name).toLowerCase()}-${deployment.id}.${deployment.deployer.baseDomain}`;
const url = `https://${deployment.project.name}-${deployment.id}.${misc.projectDomain}`;
const applicationDeploymentRecord = {
type: 'ApplicationDeploymentRecord',
@ -73,7 +73,7 @@ async function main() {
// Remove deployment for project subdomain if deployment is for production environment
if (deployment.environment === Environment.Production) {
applicationDeploymentRecord.url = `https://${deployment.project.name}.${deployment.deployer.baseDomain}`;
applicationDeploymentRecord.url = `https://${deployment.project.name}.${deployment.baseDomain}`;
await registry.setRecord(
{

View File

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

View File

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

View File

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

View File

@ -1,18 +1,10 @@
#!/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"
REPO_URL="https://github.com/snowball-tools/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)
@ -21,17 +13,40 @@ PACKAGE_VERSION=$(jq -r '.version' ../frontend/package.json)
CURRENT_DATE_TIME=$(date -u)
CONFIG_FILE=config.yml
REGISTRY_BOND_ID="99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32"
# Reference: https://git.vdb.to/cerc-io/test-progressive-web-app/src/branch/main/scripts
# Get latest version from registry and increment application-record version
NEW_APPLICATION_VERSION=$(yarn --silent laconic -c $CONFIG_FILE registry record list --type ApplicationRecord --all --name "deploy-frontend" 2>/dev/null | jq -r -s ".[] | sort_by(.createTime) | reverse | [ .[] | select(.bondId == \"$REGISTRY_BOND_ID\") ] | .[0].attributes.version" | awk -F. -v OFS=. '{$NF += 1 ; print}')
NEW_APPLICATION_VERSION=$(yarn --silent laconic -c $CONFIG_FILE registry record list --type ApplicationRecord --all --name "snowballtools-base-frontend" 2>/dev/null | jq -r -s ".[] | sort_by(.createTime) | reverse | [ .[] | select(.bondId == \"$REGISTRY_BOND_ID\") ] | .[0].attributes.version" | awk -F. -v OFS=. '{$NF += 1 ; print}')
if [ -z "$NEW_APPLICATION_VERSION" ] || [ "1" == "$NEW_APPLICATION_VERSION" ]; then
# Set application-record version if no previous records were found
NEW_APPLICATION_VERSION=0.0.1
fi
# Generate application-deployment-request.yml
cat >./records/application-deployment-request.yml <<EOF
record:
type: ApplicationDeploymentRequest
version: '1.0.0'
name: snowballtools-base-frontend@$PACKAGE_VERSION
application: lrn://snowballtools/applications/snowballtools-base-frontend@$PACKAGE_VERSION
dns: dashboard
config:
env:
LACONIC_HOSTED_CONFIG_server_url: https://snowballtools-base-api-001.apps.snowballtools.com
LACONIC_HOSTED_CONFIG_github_clientid: b7c63b235ca1dd5639ab
LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools/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
meta:
note: Added by Snowball @ $CURRENT_DATE_TIME
repository: "$REPO_URL"
repository_ref: $LATEST_HASH
EOF
# Generate application-record.yml with incremented version
cat >./records/application-record.yml <<EOF
record:
@ -40,11 +55,11 @@ record:
repository_ref: $LATEST_HASH
repository: ["$REPO_URL"]
app_type: webapp
name: deploy-frontend
name: snowballtools-base-frontend
app_version: $PACKAGE_VERSION
EOF
echo "Files generated successfully"
echo "Files generated successfully."
RECORD_FILE=records/application-record.yml
@ -60,7 +75,7 @@ echo "ApplicationRecord published"
echo $RECORD_ID
# Set name to record
REGISTRY_APP_LRN="lrn://$AUTHORITY/applications/deploy-frontend"
REGISTRY_APP_LRN="lrn://snowballtools/applications/snowballtools-base-frontend"
sleep 2
yarn --silent laconic -c $CONFIG_FILE registry name set "$REGISTRY_APP_LRN@${PACKAGE_VERSION}" "$RECORD_ID"
@ -99,50 +114,6 @@ 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')
echo "Paying address: $paymentAddress with amount $paymentAmount..."
# Pay deployer if paymentAmount is not null
if [[ -n "$paymentAmount" && "$paymentAmount" != "null" ]]; then
payment=$(yarn --silent laconic -c config.yml registry tokens send --address "$paymentAddress" --type alnt --quantity "$paymentAmount")
# Extract the transaction hash
txHash=$(echo "$payment" | jq -r '.tx.hash')
echo "Paid deployer with txHash as $txHash"
else
echo "Payment amount is null; skipping payment."
fi
# Generate application-deployment-request.yml
cat >./records/application-deployment-request.yml <<EOF
record:
type: ApplicationDeploymentRequest
version: '1.0.0'
name: deploy-frontend@$PACKAGE_VERSION
application: lrn://$AUTHORITY/applications/deploy-frontend@$PACKAGE_VERSION
deployer: $DEPLOYER_LRN
dns: deploy.laconic.com
config:
env:
LACONIC_HOSTED_CONFIG_server_url: https://deploy-backend.laconic.com
LACONIC_HOSTED_CONFIG_github_clientid: Ov23li4NtYybQlF6u5Dk
LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: laconic-templates/test-progressive-web-app
LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: laconic-templates/image-upload-pwa-example
LACONIC_HOSTED_CONFIG_github_next_app_templaterepo: laconic-templates/starter.nextjs-react-tailwind
LACONIC_HOSTED_CONFIG_wallet_connect_id: 63cad7ba97391f63652161f484670e15
LACONIC_HOSTED_CONFIG_laconicd_chain_id: laconic-testnet-2
LACONIC_HOSTED_CONFIG_wallet_iframe_url: https://wallet.laconic.com
meta:
note: Added @ $CURRENT_DATE_TIME
repository: "$REPO_URL"
repository_ref: $LATEST_HASH
payment: $txHash
EOF
RECORD_FILE=records/application-deployment-request.yml
sleep 2

View File

@ -1,12 +1,7 @@
#!/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"
REPO_URL="https://github.com/snowball-tools/snowballtools-base"
# Get the latest commit hash from the repository
LATEST_HASH=$(git ls-remote $REPO_URL HEAD | awk '{print $1}')
@ -17,33 +12,62 @@ 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_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 +81,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,47 +120,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_wallet_connect_id: 63cad7ba97391f63652161f484670e15
LACONIC_HOSTED_CONFIG_laconicd_chain_id: laconic-testnet-2
meta:
note: Added by Snowball @ $CURRENT_DATE_TIME
repository: "$REPO_URL"
repository_ref: $LATEST_HASH
payment: $txHash
EOF
RECORD_FILE=records/application-deployment-request.yml
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

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

View File

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

View File

@ -0,0 +1,8 @@
record:
type: ApplicationRecord
version: 0.0.2
repository_ref: 351db16336eacc3e1f9119ceb8d1282b8e27a27e
repository: ["https://github.com/snowball-tools/snowballtools-base"]
app_type: webapp
name: snowballtools-base-frontend
app_version: 0.1.8

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://github.com/snowball-tools/snowballtools-base"
repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601

View File

@ -0,0 +1,8 @@
record:
type: ApplicationRecord
version: 0.0.1
repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601
repository: ["https://github.com/snowball-tools/snowballtools-base"]
app_type: webapp
name: staging-snowballtools-base-frontend
app_version: 0.0.0

View File

@ -3,16 +3,15 @@ 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_LACONICD_CHAIN_ID=
VITE_WALLET_IFRAME_URL=
VITE_TURNKEY_ORGANIZATION_ID=

View File

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

View File

@ -1,7 +1,7 @@
{
"name": "frontend",
"private": true,
"version": "1.0.0",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --port 3000",
@ -30,6 +30,10 @@
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-tooltip": "^1.0.7",
"@snowballtools/auth": "^0.2.0",
"@snowballtools/auth-lit": "^0.2.0",
"@snowballtools/js-sdk": "^0.1.1",
"@snowballtools/link-lit-alchemy-light": "^0.2.0",
"@snowballtools/material-tailwind-react-fork": "^2.1.10",
"@snowballtools/smartwallet-alchemy-light": "^0.2.0",
"@snowballtools/types": "^0.2.0",
@ -41,9 +45,9 @@
"@turnkey/http": "^2.10.0",
"@turnkey/sdk-react": "^0.1.0",
"@turnkey/webauthn-stamper": "^0.5.0",
"@walletconnect/ethereum-provider": "^2.16.1",
"@web3modal/siwe": "4.0.5",
"@web3modal/wagmi": "4.0.5",
"@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",
@ -64,12 +68,11 @@
"react-oauth-popup": "^1.0.5",
"react-router-dom": "^6.20.1",
"react-timer-hook": "^3.0.7",
"siwe": "2.1.4",
"siwe": "^2.1.4",
"tailwind-variants": "^0.2.0",
"usehooks-ts": "^2.15.1",
"uuid": "^9.0.1",
"viem": "^2.7.11",
"wagmi": "2.5.7",
"web-vitals": "^2.1.4"
},
"devDependencies": {

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 674 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 989 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

View File

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

Before

Width:  |  Height:  |  Size: 892 B

View File

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

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

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

View File

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

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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -59,12 +59,12 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
}, [fetchProjects, debouncedInputValue]);
return (
<div className="relative w-full lg:w-fit dark:bg-overlay">
<div className="relative w-full lg:w-fit">
<SearchBar {...getInputProps()} />
<div
{...getMenuProps({}, { suppressRefError: true })}
className={cn(
'flex flex-col shadow-dropdown rounded-xl dark:bg-overlay2 bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
'flex flex-col shadow-dropdown rounded-xl bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
{ hidden: !inputValue || !isOpen },
)}
>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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>
@ -73,7 +94,7 @@ export const MockConnectGitCard = () => {
}, [segmentedControlsValue]);
return (
<div className="relative dark:bg-overlay bg-base-bg shadow-card dark:shadow-background rounded-2xl px-2 py-2 w-full max-w-[560px] flex flex-col gap-2">
<div className="relative bg-base-bg shadow-card rounded-2xl px-2 py-2 w-full max-w-[560px] flex flex-col gap-2">
{/* Content */}
<SegmentedControls
value={segmentedControlsValue}
@ -85,7 +106,7 @@ export const MockConnectGitCard = () => {
{renderContent}
{/* Shade */}
<div className="pointer-events-none z-99 absolute inset-0 rounded-2xl bg-gradient-to-t from-white dark:from-overlay to-transparent" />
<div className="pointer-events-none z-99 absolute inset-0 rounded-2xl bg-gradient-to-t from-white to-transparent" />
</div>
);
};
@ -100,18 +121,18 @@ const MockProjectCard = ({
visibility?: string;
}) => {
return (
<div className="group flex items-start sm:items-center gap-3 pl-3 py-3 cursor-pointer rounded-xl hover:bg-base-bg-emphasized dark:hover:bg-background relative">
<div className="group flex items-start sm:items-center gap-3 pl-3 py-3 cursor-pointer rounded-xl hover:bg-base-bg-emphasized relative">
{/* Icon container */}
<div className="w-10 h-10 bg-base-bg dark:bg-background rounded-md justify-center items-center flex">
<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 items-start gap-1">
<p className="text-elements-high-em text-sm dark:text-foreground font-medium tracking-[-0.006em]">
<p className="text-elements-high-em text-sm font-medium tracking-[-0.006em]">
{full_name}
</p>
<p className="text-elements-low-em text-xs dark:text-foreground-secondary">
<p className="text-elements-low-em text-xs">
{updated_at && relativeTimeISO(updated_at)}
</p>
</div>
@ -128,13 +149,13 @@ const MockProjectCard = ({
const MockTemplateCard = ({ icon, name }: { icon: string; name: string }) => {
return (
<div className="flex items-center gap-3 px-3 py-3 hover:bg-base-bg-emphasized dark:hover:bg-background relative rounded-2xl group relative cursor-default">
<div className="flex items-center gap-3 px-3 py-3 hover:bg-base-bg-emphasized rounded-2xl group relative cursor-default">
{/* Icon */}
<div className="px-1 py-1 rounded-xl bg-base-bg dark:bg-background border border-border-interactive/10 shadow-card-sm">
<div className="px-1 py-1 rounded-xl bg-base-bg border border-border-interactive/10 shadow-card-sm">
<TemplateIcon type={icon as TemplateIconType} />
</div>
{/* Name */}
<p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em dark:text-foreground">
<p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em">
{name}
</p>
</div>

View File

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

@ -64,9 +64,9 @@ export const RepositoryList = () => {
// Check if selected account is an organization
if (selectedAccount.value === gitUser.login) {
query = query + ` user:${selectedAccount.value}`;
query = query + ` user:${selectedAccount}`;
} else {
query = query + ` org:${selectedAccount.value}`;
query = query + ` org:${selectedAccount}`;
}
const result = await octokit.rest.search.repos({
@ -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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -60,10 +60,8 @@ const DeleteProjectDialog = ({
<Modal.Body>
<Input
label={
"Deleting your project is irreversible. Enter your project's name " +
'"' +
project.name +
'"' +
"Deleting your project is irreversible. Enter your project's name " + '"' +
project.name + '"' +
' below to confirm you want to permanently delete it:'
}
id="input"

View File

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

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

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

View File

@ -102,8 +102,8 @@ const SetupDomain = () => {
)}
<div className="self-stretch">
<Button disabled={!isValid} type="submit" shape="default">
NEXT
<Button disabled={!isValid} type="submit">
Next
</Button>
</div>
</form>

View File

@ -30,12 +30,7 @@ export const avatarTheme = tv(
fallback: ['text-elements-warning', 'bg-base-bg-emphasized-warning'],
},
blue: {
fallback: [
'text-elements-info',
'bg-base-bg-emphasized-info',
'dark:text-foreground',
'dark:bg-primary',
],
fallback: ['text-elements-info', 'bg-base-bg-emphasized-info'],
},
},
size: {

View File

@ -16,7 +16,6 @@ export const buttonTheme = tv(
'disabled:cursor-not-allowed',
'transition-colors',
'duration-150',
'font-mono',
],
variants: {
size: {
@ -29,7 +28,7 @@ export const buttonTheme = tv(
true: 'w-full',
},
shape: {
default: 'rounded',
default: 'rounded-lg',
rounded: 'rounded-full',
},
iconOnly: {
@ -40,21 +39,21 @@ export const buttonTheme = tv(
'text-elements-on-primary',
'border',
'border-transparent',
'bg-primary',
'bg-controls-primary',
'shadow-button',
'hover:bg-primary-hovered',
'focus-visible:bg-primary-hovered',
'hover:bg-controls-primary-hovered',
'focus-visible:bg-controls-primary-hovered',
'disabled:text-elements-on-disabled',
'disabled:bg-controls-disabled',
'disabled:border-transparent',
'disabled:shadow-none',
],
secondary: [
'text-primary',
'text-elements-on-secondary',
'border',
'border-transparent',
'bg-secondary',
'hover:bg-overlay2',
'bg-controls-secondary',
'hover:bg-controls-secondary-hovered',
'focus-visible:bg-controls-secondary-hovered',
'disabled:text-elements-on-disabled',
'disabled:bg-controls-disabled',
@ -78,12 +77,10 @@ export const buttonTheme = tv(
],
ghost: [
'text-elements-on-tertiary',
'dark:text-foreground-secondary',
'border',
'border-transparent',
'bg-transparent',
'hover:bg-controls-tertiary-hovered',
'dark:hover:bg-overlay2',
'hover:border-border-interactive-hovered',
'focus-visible:bg-controls-tertiary-hovered',
'focus-visible:border-border-interactive-hovered',
@ -96,7 +93,7 @@ export const buttonTheme = tv(
'text-elements-on-danger',
'border',
'border-transparent',
'bg-error',
'bg-border-danger',
'hover:bg-controls-danger-hovered',
'focus-visible:bg-controls-danger-hovered',
'disabled:text-elements-on-disabled',

View File

@ -40,11 +40,11 @@ abbr[title] {
}
.react-calendar__tile {
@apply h-12 w-12 text-elements-high-em dark:text-foreground;
@apply h-12 w-12 text-elements-high-em;
}
.react-calendar__tile:hover {
@apply bg-base-bg-emphasized dark:bg-overlay3 rounded-lg;
@apply bg-base-bg-emphasized rounded-lg;
}
.react-calendar__tile:focus-visible {
@ -52,7 +52,7 @@ abbr[title] {
}
.react-calendar__tile--now {
@apply bg-base-bg-emphasized dark:bg-overlay3 text-elements-high-em rounded-lg;
@apply bg-base-bg-emphasized text-elements-high-em rounded-lg;
}
.react-calendar__tile--now:hover {
@ -77,7 +77,7 @@ abbr[title] {
/* Range -- START */
.react-calendar__tile--range {
@apply bg-controls-secondary dark:bg-overlay3 text-elements-on-secondary rounded-none;
@apply bg-controls-secondary text-elements-on-secondary rounded-none;
}
.react-calendar__tile--range:hover {
@ -89,7 +89,7 @@ abbr[title] {
}
.react-calendar__tile--rangeStart {
@apply bg-controls-primary dark:bg-primary text-elements-on-primary rounded-lg;
@apply bg-controls-primary text-elements-on-primary rounded-lg;
}
.react-calendar__tile--rangeStart:hover {
@ -101,7 +101,7 @@ abbr[title] {
}
.react-calendar__tile--rangeEnd {
@apply bg-controls-primary dark:bg-primary text-elements-on-primary rounded-lg;
@apply bg-controls-primary text-elements-on-primary rounded-lg;
}
.react-calendar__tile--rangeEnd:hover {

View File

@ -5,9 +5,7 @@ export const calendarTheme = tv({
wrapper: [
'max-w-[352px]',
'bg-surface-floating',
'dark:bg-overlay2',
'shadow-dropdown',
'dark:shadow-background',
'rounded-xl',
],
calendar: ['flex', 'flex-col', 'py-2', 'px-2', 'gap-2'],
@ -30,12 +28,9 @@ export const calendarTheme = tv({
'border',
'border-border-interactive',
'text-elements-high-em',
'dark:text-foreground',
'shadow-field',
'bg-white',
'dark:bg-overlay3',
'hover:bg-base-bg-alternate',
'dark:hover:bg-foreground-secondary',
'focus-visible:bg-base-bg-alternate',
],
footer: [

View File

@ -280,7 +280,6 @@ export const Calendar = ({
showNavigation={false}
selectRange={selectRange}
onChange={handleChange}
// tileClassName="dark:text-foreground-secondary dark:hover:bg-overlay3"
onClickMonth={(date) => handleChangeNavigation('month', date)}
onClickYear={(date) => handleChangeNavigation('year', date)}
/>
@ -298,20 +297,19 @@ export const Calendar = ({
) : (
<>
{value && (
<Button variant="danger" onClick={handleReset} shape="default">
RESET
<Button variant="danger" onClick={handleReset}>
Reset
</Button>
)}
<div className="space-x-3">
<Button variant="tertiary" onClick={onCancel} shape="default">
CANCEL
<Button variant="tertiary" onClick={onCancel}>
Cancel
</Button>
<Button
disabled={!value}
onClick={() => (value ? onSelect?.(value) : null)}
shape="default"
>
SELECT
Select
</Button>
</div>
</>

View File

@ -11,9 +11,7 @@ export const getCheckboxVariant = tv({
'focus-visible:text-controls-disabled',
'group-focus-visible:text-controls-disabled',
'data-[state=checked]:text-elements-on-primary',
'dark:data-[state=checked]:text-foreground',
'data-[state=checked]:group-focus-visible:text-elements-on-primary',
'dark:data-[state=checked]:group-focus-visible:text-foreground',
'data-[state=indeterminate]:text-elements-on-primary',
'data-[state=checked]:data-[disabled]:text-elements-on-disabled-active',
],
@ -25,7 +23,6 @@ export const getCheckboxVariant = tv({
'border',
'border-border-interactive/10',
'bg-controls-tertiary',
'dark:bg-background',
'rounded-md',
'transition-all',
'duration-150',
@ -33,13 +30,9 @@ export const getCheckboxVariant = tv({
'shadow-button',
'group-hover:border-border-interactive/[0.14]',
'group-hover:bg-controls-tertiary',
'dark:group-hover:bg-overlay',
'data-[state=checked]:bg-controls-primary',
'dark:data-[state=checked]:bg-primary',
'data-[state=checked]:hover:bg-controls-primary-hovered',
'dark:data-[state=checked]:hover:bg-primary-hovered',
'data-[state=checked]:focus-visible:bg-controls-primary-hovered',
'dark:data-[state=checked]:focus-visible:bg-primary-hovered',
'data-[disabled]:bg-controls-disabled',
'data-[disabled]:shadow-none',
'data-[disabled]:hover:border-border-interactive/10',
@ -50,17 +43,12 @@ export const getCheckboxVariant = tv({
'text-sm',
'tracking-[-0.006em]',
'text-elements-high-em',
'dark:text-foreground',
'flex',
'flex-col',
'gap-1',
'px-1',
],
description: [
'text-xs',
'text-elements-low-em',
'dark:text-foreground-secondary',
],
description: ['text-xs', 'text-elements-low-em'],
},
variants: {
disabled: {

View File

@ -11,7 +11,7 @@ export const GitIcon: React.FC<CustomIconProps> = (props) => {
>
<path
d="M35.7782 16.4219L20.0791 0.723956C19.864 0.508762 19.6087 0.338053 19.3276 0.221583C19.0466 0.105114 18.7453 0.045166 18.4411 0.045166C18.1368 0.045166 17.8356 0.105114 17.5545 0.221583C17.2735 0.338053 17.0181 0.508762 16.8031 0.723956L13.5443 3.9843L17.6788 8.11882C18.1649 7.95374 18.6875 7.92797 19.1875 8.04442C19.6874 8.16088 20.1448 8.41491 20.5079 8.77778C20.8731 9.14329 21.128 9.60418 21.2435 10.1077C21.359 10.6113 21.3304 11.1372 21.161 11.6253L25.1473 15.6103C25.6355 15.4408 26.1616 15.4122 26.6653 15.5279C27.169 15.6437 27.6299 15.899 27.9952 16.2646C28.251 16.5204 28.454 16.8241 28.5925 17.1584C28.7309 17.4926 28.8022 17.8509 28.8022 18.2127C28.8022 18.5745 28.7309 18.9328 28.5925 19.267C28.454 19.6013 28.251 19.905 27.9952 20.1608C27.4779 20.6776 26.7766 20.9678 26.0455 20.9678C25.3143 20.9678 24.6131 20.6776 24.0958 20.1608C23.7116 19.7759 23.4497 19.286 23.3434 18.7526C23.237 18.2192 23.2907 17.6663 23.4979 17.1634L19.7805 13.4472V23.2287C20.1729 23.4225 20.5134 23.707 20.7739 24.0586C21.0345 24.4103 21.2075 24.8189 21.2786 25.2507C21.3497 25.6825 21.317 26.1251 21.183 26.5417C21.0491 26.9583 20.8178 27.337 20.5083 27.6465C20.2525 27.9023 19.9488 28.1053 19.6146 28.2438C19.2803 28.3822 18.922 28.4535 18.5602 28.4535C18.1984 28.4535 17.8402 28.3822 17.5059 28.2438C17.1716 28.1053 16.8679 27.9023 16.6121 27.6465C16.3562 27.3907 16.1532 27.0869 16.0147 26.7526C15.8762 26.4183 15.8049 26.06 15.8049 25.6982C15.8049 25.3363 15.8762 24.978 16.0147 24.6437C16.1532 24.3094 16.3562 24.0057 16.6121 23.7499C16.8699 23.4916 17.1763 23.2869 17.5137 23.1477V13.2762C17.1777 13.1378 16.8724 12.9344 16.6153 12.6777C16.3582 12.421 16.1543 12.116 16.0154 11.7802C15.8765 11.4445 15.8053 11.0846 15.8059 10.7212C15.8065 10.3579 15.8789 9.9982 16.0189 9.66291L11.9423 5.58552L1.17673 16.3483C0.742912 16.783 0.499268 17.372 0.499268 17.9862C0.499268 18.6003 0.742912 19.1893 1.17673 19.624L16.8766 35.3239C17.3113 35.7576 17.9002 36.0011 18.5143 36.0011C19.1283 36.0011 19.7172 35.7576 20.1519 35.3239L35.7782 19.6975C36.212 19.2629 36.4557 18.6738 36.4557 18.0597C36.4557 17.4456 36.212 16.8566 35.7782 16.4219Z"
fill="#0000F4"
fill="#158FFF"
/>
</CustomIcon>
);

View File

@ -13,7 +13,7 @@ export const GithubIcon: React.FC<CustomIconProps> = (props) => {
fillRule="evenodd"
clipRule="evenodd"
d="M9.9702 0.206024C4.45694 0.206024 0 4.69582 0 10.2503C0 14.6903 2.85571 18.4487 6.81735 19.7789C7.31265 19.8789 7.49408 19.5628 7.49408 19.2968C7.49408 19.064 7.47776 18.2658 7.47776 17.4342C4.70429 18.033 4.12674 16.2368 4.12674 16.2368C3.68102 15.0728 3.02061 14.7736 3.02061 14.7736C2.11286 14.1583 3.08673 14.1583 3.08673 14.1583C4.09367 14.2248 4.62204 15.1893 4.62204 15.1893C5.51327 16.7191 6.94939 16.2868 7.52714 16.0207C7.60959 15.3721 7.87388 14.9232 8.15449 14.6738C5.94245 14.4409 3.6151 13.5762 3.6151 9.71807C3.6151 8.62051 4.01102 7.72256 4.63837 7.02419C4.53939 6.7748 4.19265 5.74358 4.73755 4.36337C4.73755 4.36337 5.57939 4.09725 7.47755 5.39439C8.29022 5.17453 9.12832 5.06268 9.9702 5.06174C10.812 5.06174 11.6702 5.17827 12.4627 5.39439C14.361 4.09725 15.2029 4.36337 15.2029 4.36337C15.7478 5.74358 15.4008 6.7748 15.3018 7.02419C15.9457 7.72256 16.3253 8.62051 16.3253 9.71807C16.3253 13.5762 13.998 14.4242 11.7694 14.6738C12.1327 14.9897 12.4461 15.5883 12.4461 16.5362C12.4461 17.8832 12.4298 18.9642 12.4298 19.2966C12.4298 19.5628 12.6114 19.8789 13.1065 19.7791C17.0682 18.4485 19.9239 14.6903 19.9239 10.2503C19.9402 4.69582 15.4669 0.206024 9.9702 0.206024Z"
fill="#FBFBFB"
fill="#0B1D2E"
/>
</CustomIcon>
);

View File

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

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,12 +1,7 @@
import { tv, type VariantProps } from 'tailwind-variants';
export const headingTheme = tv({
base: [
'text-elements-high-em',
'dark:text-foreground',
'font-display',
'font-normal',
],
base: ['text-elements-high-em', 'font-display', 'font-normal'],
});
export type HeadingVariants = VariantProps<typeof headingTheme>;

View File

@ -18,7 +18,7 @@ export const IconWithFrame = ({
'relative justify-center items-center gap-2.5 inline-flex',
'w-16 h-16 rounded-2xl shadow-inner',
'border border-b-[3px] border-border-interactive border-opacity-10',
'bg-background',
'bg-controls-secondary',
className,
)}
{...props}

View File

@ -14,29 +14,22 @@ export const inputTheme = tv(
'disabled:cursor-not-allowed',
'disabled:bg-controls-disabled',
],
label: [
'text-sm',
'text-elements-high-em',
'dark:text-foreground-secondary',
],
label: ['text-sm', 'text-elements-high-em'],
description: ['text-xs', 'text-elements-low-em'],
input: [
'focus-ring',
'dark:focus:ring-0',
'block',
'w-full',
'h-full',
'shadow-sm',
'border',
'rounded-lg',
'dark:bg-overlay2',
'dark:text-foreground',
'text-elements-mid-em',
'border-border-interactive',
'disabled:shadow-none',
'disabled:border-none',
],
icon: ['text-elements-low-em dark:text-foreground-secondary'],
icon: ['text-elements-low-em'],
iconContainer: [
'absolute',
'inset-y-0',
@ -46,13 +39,7 @@ export const inputTheme = tv(
'cursor-pointer',
],
helperIcon: [],
helperText: [
'flex',
'gap-2',
'items-center',
'text-elements-danger',
'dark:text-primary',
],
helperText: ['flex', 'gap-2', 'items-center', 'text-elements-danger'],
},
variants: {
state: {
@ -67,7 +54,7 @@ export const inputTheme = tv(
'shadow-none',
'focus:outline-border-danger',
],
helperText: 'text-error',
helperText: 'text-elements-danger',
},
},
size: {

View File

@ -31,7 +31,6 @@ export const modalTheme = tv({
'sm:px-6',
'sm:py-5',
'bg-base-bg-alternate',
'dark:bg-overlay2',
],
headerTitle: [
'text-base',
@ -40,11 +39,7 @@ export const modalTheme = tv({
'sm:tracking-normal',
'text-elements-high-em',
],
headerDescription: [
'text-sm',
'text-elements-low-em',
'dark:text-foreground-secondary',
],
headerDescription: ['text-sm', 'text-elements-low-em'],
footer: ['flex', 'gap-3', 'px-4', 'pb-4', 'pt-7', 'sm:pb-6', 'sm:px-6'],
content: [
'h-fit',
@ -58,11 +53,8 @@ export const modalTheme = tv({
'sm:max-w-[562px]',
'rounded-2xl',
'bg-base-bg',
'dark:bg-overlay',
'shadow-card',
'dark:shadow-background',
'text-elements-high-em',
'dark:text-foreground-secondary',
],
body: ['flex-1', 'px-4', 'pt-4', 'sm:pt-6', 'sm:px-6'],
},

View File

@ -4,12 +4,7 @@ export const radioTheme = tv({
slots: {
root: ['flex', 'gap-3'],
wrapper: ['flex', 'items-center', 'gap-2', 'group'],
label: [
'text-sm',
'tracking-[-0.006em]',
'text-elements-high-em',
'dark:text-foreground',
],
label: ['text-sm', 'tracking-[-0.006em]', 'text-elements-high-em'],
radio: [
'w-5',
'h-5',
@ -22,7 +17,6 @@ export const radioTheme = tv({
'focus-ring',
// Checked
'data-[state=checked]:bg-controls-primary',
'data-[state=checked]:bg-controls-primary',
'data-[state=checked]:group-hover:bg-controls-primary-hovered',
],
indicator: [
@ -42,7 +36,6 @@ export const radioTheme = tv({
'after:group-focus-visible:bg-controls-disabled',
// Checked
'after:data-[state=checked]:bg-elements-on-primary',
'dark:after:data-[state=checked]:bg-primary-hovered',
'after:data-[state=checked]:group-hover:bg-elements-on-primary',
'after:data-[state=checked]:group-focus-visible:bg-elements-on-primary',
],

View File

@ -9,7 +9,6 @@ export const segmentedControlsTheme = tv({
'flex',
'items-center',
'bg-base-bg-emphasized',
'dark:bg-background',
'gap-0.5',
'rounded-lg',
],
@ -19,7 +18,6 @@ export const segmentedControlsTheme = tv({
'justify-center',
'gap-2',
'text-elements-mid-em',
'dark:text-foreground',
'bg-transparent',
'border',
'border-transparent',
@ -28,7 +26,6 @@ export const segmentedControlsTheme = tv({
'rounded-lg',
'focus-ring',
'hover:bg-controls-tertiary-hovered',
'dark:hover:bg-overlay2',
'focus-visible:z-20',
'focus-visible:bg-controls-tertiary-hovered',
'disabled:text-controls-disabled',
@ -36,7 +33,6 @@ export const segmentedControlsTheme = tv({
'disabled:cursor-not-allowed',
'disabled:border-transparent',
'data-[active=true]:bg-controls-tertiary',
'dark:data-[active=true]:bg-overlay2',
'data-[active=true]:text-elements-high-em',
'data-[active=true]:border-border-interactive/10',
'data-[active=true]:shadow-field',

View File

@ -3,16 +3,8 @@ import { VariantProps, tv } from 'tailwind-variants';
export const selectTheme = tv({
slots: {
container: ['flex', 'flex-col', 'relative', 'gap-2', 'w-full'],
label: [
'text-sm',
'text-elements-high-em',
'dark:text-foreground-secondary',
],
description: [
'text-xs',
'text-elements-low-em',
'dark:text-foreground-secondary',
],
label: ['text-sm', 'text-elements-high-em'],
description: ['text-xs', 'text-elements-low-em'],
inputWrapper: [
'relative',
'flex',
@ -22,7 +14,6 @@ export const selectTheme = tv({
'w-full',
'rounded-lg',
'bg-transparent',
'dark:bg-overlay2',
'text-elements-mid-em',
'shadow-sm',
'border',
@ -31,7 +22,7 @@ export const selectTheme = tv({
'disabled:shadow-none',
'disabled:border-none',
],
input: ['outline-none', 'dark:bg-overlay2', 'dark:text-foreground'],
input: ['outline-none'],
iconContainer: [
'absolute',
'inset-y-0',
@ -41,15 +32,9 @@ export const selectTheme = tv({
'z-10',
'cursor-pointer',
],
icon: ['text-elements-mid-em', 'dark:text-foreground-secondary'],
icon: ['text-elements-mid-em'],
helperIcon: [],
helperText: [
'flex',
'gap-2',
'items-center',
'text-elements-low-em',
'dark:text-foreground-secondary',
],
helperText: ['flex', 'gap-2', 'items-center', 'text-elements-low-em'],
popover: [
'z-20',
'absolute',
@ -59,14 +44,12 @@ export const selectTheme = tv({
'gap-0.5',
'min-w-full',
'bg-surface-floating',
'dark:bg-overlay2',
'shadow-dropdown',
'w-auto',
'max-h-60',
'overflow-auto',
'border',
'border-gray-200',
'dark:border-overlay',
'rounded-xl',
],
},
@ -96,7 +79,7 @@ export const selectTheme = tv({
'shadow-none',
'focus:outline-border-danger',
],
helperText: ['text-error'],
helperText: ['text-elements-danger'],
},
},
size: {

View File

@ -12,12 +12,11 @@ export const selectItemTheme = tv({
'group',
'data-[disabled]:cursor-not-allowed',
],
icon: ['h-4.5', 'w-4.5', 'text-elements-high-em', 'dark:text-foreground'],
icon: ['h-4.5', 'w-4.5', 'text-elements-high-em'],
content: ['flex', 'flex-1', 'whitespace-nowrap'],
label: [
'text-sm',
'text-elements-high-em',
'dark:text-foreground',
'tracking-[-0.006em]',
'data-[disabled]:text-elements-disabled',
],
@ -48,11 +47,7 @@ export const selectItemTheme = tv({
},
active: {
true: {
wrapper: [
'bg-base-bg-emphasized',
'dark:bg-overlay3',
'data-[disabled]:bg-transparent',
],
wrapper: ['bg-base-bg-emphasized', 'data-[disabled]:bg-transparent'],
},
},
},

Some files were not shown because too many files have changed in this diff Show More