Compare commits

...

22 Commits

Author SHA1 Message Date
a51765dae5 Support setting custom domain on app deployment (#49)
All checks were successful
Lint / lint (20.x) (push) Successful in 4m46s
Deploy Snowball frontend / deploy (20.x) (push) Successful in 4m54s
Part of https://www.notion.so/Support-custom-domains-in-deploy-laconic-com-18aa6b22d4728067a44ae27090c02ce5 and cerc-io/snowballtools-base#47

- Support setting custom domain in deployments through targeted deployer
  - Store DNS record data for deployments
  - Show service provider IP address for creating required `A` record
  - Comment out verify domain and redirect domain functionality
  - Handle rollback deployment functionality
- Store DNS deployments record in Deployment table

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#49
Co-authored-by: Prathamesh Musale <prathamesh@noreply.git.vdb.to>
Co-committed-by: Prathamesh Musale <prathamesh@noreply.git.vdb.to>
2025-02-04 13:45:47 +00:00
534871a7ae Implement functionality to encrypt environment variables (#48)
All checks were successful
Lint / lint (20.x) (push) Successful in 4m45s
Deploy Snowball frontend / deploy (20.x) (push) Successful in 5m1s
Part of https://www.notion.so/Support-encrypted-config-for-deploy-laconic-com-18aa6b22d4728099bc64fc7a310b530d

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#48
2025-01-30 09:44:18 +00:00
17640d3133 Copy updates (#38)
All checks were successful
Lint / lint (20.x) (push) Successful in 4m39s
Deploy Snowball frontend / deploy (20.x) (push) Successful in 4m47s
Co-authored-by: zramsay <zach@bluecollarcoding.ca>
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Reviewed-on: cerc-io/snowballtools-base#38
Co-authored-by: zramsay <zramsay@noreply.git.vdb.to>
Co-committed-by: zramsay <zramsay@noreply.git.vdb.to>
2024-11-14 09:10:19 +00:00
bba0b57bed Keep records directory for deploy-frontend script (#43)
All checks were successful
Deploy Snowball frontend / deploy (20.x) (push) Successful in 4m39s
Lint / lint (20.x) (push) Successful in 4m44s
Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

Reviewed-on: cerc-io/snowballtools-base#43
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Co-committed-by: Nabarun <nabarun@deepstacksoft.com>
2024-11-13 13:56:15 +00:00
c34e66aa93 Integrate wallet IFrame for payments (#42)
Some checks failed
Deploy Snowball frontend / deploy (20.x) (push) Failing after 4m2s
Lint / lint (20.x) (push) Successful in 4m41s
Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

- Replace wallet connect with iframe to display wallet in modal for deployment payments

![image](/attachments/b253d833-0730-45b7-8b65-b0af6d24678a)

Co-authored-by: Isha <ishavenikar7@gmail.com>
Co-authored-by: Adw8 <adwaitgharpure@gmail.com>
Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#42
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Co-committed-by: Nabarun <nabarun@deepstacksoft.com>
2024-11-13 13:32:27 +00:00
b61682dd20 Fix fetching build logs for redeployments (#39)
All checks were successful
Deploy Snowball frontend / deploy (20.x) (push) Successful in 4m35s
Lint / lint (20.x) (push) Successful in 4m41s
Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#39
2024-11-12 15:18:07 +00:00
bcb6ac241b Fix template tab in GitHub connect page (#41)
All checks were successful
Deploy Snowball frontend / deploy (20.x) (push) Successful in 4m33s
Lint / lint (20.x) (push) Successful in 4m39s
Part of cerc-io/snowballtools-base#40 and [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

Reviewed-on: cerc-io/snowballtools-base#41
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Co-committed-by: Nabarun <nabarun@deepstacksoft.com>
2024-11-12 14:21:10 +00:00
4a9f517d85 Merge pull request 'fix: colors for project template cards' (#37) from zach/ui-fixes into main
All checks were successful
Deploy Snowball frontend / deploy (20.x) (push) Successful in 4m36s
Lint / lint (20.x) (push) Successful in 4m42s
Reviewed-on: cerc-io/snowballtools-base#37
2024-11-06 19:27:32 +00:00
6d1135645b fix: colors for project template cards
All checks were successful
Lint / lint (20.x) (pull_request) Successful in 4m35s
2024-11-06 14:16:23 -05:00
e5748e768c Fix check boxes in environment variables form (#36)
All checks were successful
Deploy Snowball frontend / deploy (20.x) (push) Successful in 4m36s
Lint / lint (20.x) (push) Successful in 4m43s
Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

![image](/attachments/0d90877d-86c7-4e3a-94c9-3c0d480f8b8c)

Co-authored-by: Isha <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#36
2024-11-06 13:11:03 +00:00
9158e3a840 Add a CI workflow to deploy frontend (#35)
All checks were successful
Lint / lint (20.x) (push) Successful in 4m43s
Deploy Snowball frontend / deploy (20.x) (push) Successful in 4m31s
Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

Co-authored-by: Adw8 <adwaitgharpure@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#35
Co-authored-by: Prathamesh Musale <prathamesh.musale0@gmail.com>
Co-committed-by: Prathamesh Musale <prathamesh.musale0@gmail.com>
2024-11-06 09:20:01 +00:00
8bd1e17fd2 Add template for NextJS app (#34)
All checks were successful
Lint / lint (20.x) (push) Successful in 4m33s
Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

- Add hotfix for updating old DB with new org slug
- Add remove-deployment script (for debugging)
- Part of cerc-io/snowballtools-base#28
![image](/attachments/ceb0d4d6-4fa7-4914-ad18-c57d9d0f5b95)

Co-authored-by: Isha <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#34
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Co-committed-by: Nabarun <nabarun@deepstacksoft.com>
2024-11-06 07:26:53 +00:00
3998b60888 style: repository cards
All checks were successful
Lint / lint (20.x) (pull_request) Successful in 4m39s
Lint / lint (20.x) (push) Successful in 4m41s
2024-11-04 15:16:11 +05:30
c5bace0660 fix: contrast with new elements 2024-11-04 15:16:10 +05:30
a033a8a7b3 Update .gitea/workflows/lint.yaml 2024-11-04 15:15:23 +05:30
zramsay
420080b1af rm mock project 2024-11-04 15:15:23 +05:30
f95a64546d chore: rename to laconic 2024-11-04 15:15:23 +05:30
3214cfc1d4 style: projects and settings 2024-11-04 15:15:23 +05:30
07b21a835e style: rename color 2024-11-04 15:15:23 +05:30
15ba278bbc style: more colors 2024-11-04 15:15:23 +05:30
364c62783d style: first pass at laconic colors 2024-11-04 15:15:23 +05:30
b9573474a8 Upgrade WalletConnect version to 2.16.1 (#27)
All checks were successful
Lint / lint (20.x) (push) Successful in 4m38s
Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)
- Upgrade WallectConnect to version `2.16.1`
  - Part of cerc-io/snowballtools-base#24
- Change GitHub access to `public_repo` and `user`
  - Part of cerc-io/snowballtools-base#22

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#27
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Co-committed-by: Nabarun <nabarun@deepstacksoft.com>
2024-11-04 08:59:20 +00:00
131 changed files with 2158 additions and 1433 deletions

View File

@ -0,0 +1,61 @@
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,6 +5,7 @@ on:
push: push:
branches: branches:
- main - main
- staging
jobs: jobs:
lint: lint:

View File

@ -14,13 +14,14 @@ VITE_SERVER_URL = 'LACONIC_HOSTED_CONFIG_server_url'
VITE_GITHUB_CLIENT_ID = 'LACONIC_HOSTED_CONFIG_github_clientid' VITE_GITHUB_CLIENT_ID = 'LACONIC_HOSTED_CONFIG_github_clientid'
VITE_GITHUB_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_pwa_templaterepo' 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_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_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_wallet_connect_id'
VITE_LACONICD_CHAIN_ID = 'LACONIC_HOSTED_CONFIG_laconicd_chain_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_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'
VITE_BUGSNAG_API_KEY = 'LACONIC_HOSTED_CONFIG_bugsnag_api_key' VITE_BUGSNAG_API_KEY = 'LACONIC_HOSTED_CONFIG_bugsnag_api_key'
VITE_PASSKEY_WALLET_RPID = 'LACONIC_HOSTED_CONFIG_passkey_wallet_rpid' VITE_PASSKEY_WALLET_RPID = 'LACONIC_HOSTED_CONFIG_passkey_wallet_rpid'
VITE_TURNKEY_API_BASE_URL = 'LACONIC_HOSTED_CONFIG_turnkey_api_base_url' VITE_TURNKEY_API_BASE_URL = 'LACONIC_HOSTED_CONFIG_turnkey_api_base_url'
VITE_TURNKEY_ORGANIZATION_ID = 'LACONIC_HOSTED_CONFIG_turnkey_organization_id'
EOF EOF
yarn || exit 1 yarn || exit 1

View File

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

View File

@ -17,13 +17,14 @@ import { DatabaseConfig } from './config';
import { User } from './entity/User'; import { User } from './entity/User';
import { Organization } from './entity/Organization'; import { Organization } from './entity/Organization';
import { Project } from './entity/Project'; import { Project } from './entity/Project';
import { Deployment } from './entity/Deployment'; import { Deployment, DeploymentStatus } from './entity/Deployment';
import { ProjectMember } from './entity/ProjectMember'; import { ProjectMember } from './entity/ProjectMember';
import { EnvironmentVariable } from './entity/EnvironmentVariable'; import { EnvironmentVariable } from './entity/EnvironmentVariable';
import { Domain } from './entity/Domain'; import { Domain } from './entity/Domain';
import { getEntities, loadAndSaveData } from './utils'; import { getEntities, loadAndSaveData } from './utils';
import { UserOrganization } from './entity/UserOrganization'; import { UserOrganization } from './entity/UserOrganization';
import { Deployer } from './entity/Deployer'; import { Deployer } from './entity/Deployer';
import { DNSRecordAttributes } from './types';
const ORGANIZATION_DATA_PATH = '../test/fixtures/organizations.json'; const ORGANIZATION_DATA_PATH = '../test/fixtures/organizations.json';
@ -49,12 +50,25 @@ export class Database {
await this.dataSource.initialize(); await this.dataSource.initialize();
log('database initialized'); log('database initialized');
const organizations = await this.getOrganizations({}); let organizations = await this.getOrganizations({});
// Load an organization if none exist // Load an organization if none exist
if (!organizations.length) { if (!organizations.length) {
const orgEntities = await getEntities(path.resolve(__dirname, ORGANIZATION_DATA_PATH)); const orgEntities = await getEntities(path.resolve(__dirname, ORGANIZATION_DATA_PATH));
await loadAndSaveData(Organization, this.dataSource, [orgEntities[0]]); 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
}
)
} }
} }
@ -121,6 +135,14 @@ export class Database {
return newUserOrganization; 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 projectRepository = this.dataSource.getRepository(Project);
const projects = await projectRepository.find(options); const projects = await projectRepository.find(options);
@ -136,10 +158,9 @@ export class Database {
.leftJoinAndSelect( .leftJoinAndSelect(
'project.deployments', 'project.deployments',
'deployments', 'deployments',
'deployments.isCurrent = true' 'deployments.isCurrent = true AND deployments.isCanonical = true'
) )
.leftJoinAndSelect('deployments.createdBy', 'user') .leftJoinAndSelect('deployments.createdBy', 'user')
.leftJoinAndSelect('deployments.domain', 'domain')
.leftJoinAndSelect('deployments.deployer', 'deployer') .leftJoinAndSelect('deployments.deployer', 'deployer')
.leftJoinAndSelect('project.owner', 'owner') .leftJoinAndSelect('project.owner', 'owner')
.leftJoinAndSelect('project.deployers', 'deployers') .leftJoinAndSelect('project.deployers', 'deployers')
@ -181,9 +202,8 @@ export class Database {
.leftJoinAndSelect( .leftJoinAndSelect(
'project.deployments', 'project.deployments',
'deployments', 'deployments',
'deployments.isCurrent = true' 'deployments.isCurrent = true AND deployments.isCanonical = true'
) )
.leftJoinAndSelect('deployments.domain', 'domain')
.leftJoin('project.projectMembers', 'projectMembers') .leftJoin('project.projectMembers', 'projectMembers')
.leftJoin('project.organization', 'organization') .leftJoin('project.organization', 'organization')
.where( .where(
@ -214,7 +234,6 @@ export class Database {
return this.getDeployments({ return this.getDeployments({
relations: { relations: {
project: true, project: true,
domain: true,
createdBy: true, createdBy: true,
deployer: true, deployer: true,
}, },
@ -229,6 +248,25 @@ export class Database {
}); });
} }
async getNonCanonicalDeploymentsByProjectId(projectId: string): Promise<Deployment[]> {
return this.getDeployments({
relations: {
project: true,
createdBy: true,
deployer: true,
},
where: {
project: {
id: projectId
},
isCanonical: false
},
order: {
createdAt: 'DESC'
}
});
}
async getDeployment( async getDeployment(
options: FindOneOptions<Deployment> options: FindOneOptions<Deployment>
): Promise<Deployment | null> { ): Promise<Deployment | null> {
@ -581,6 +619,49 @@ export class Database {
return domains; return domains;
} }
async getOldestDomainByProjectId(
projectId: string,
): Promise<Domain | null> {
const domainRepository = this.dataSource.getRepository(Domain);
const domain = await domainRepository.findOne({
where: {
project: {
id: projectId
},
},
order: {
createdAt: 'ASC'
}
});
return domain;
}
async getLatestDNSRecordByProjectId(
projectId: string,
): Promise<DNSRecordAttributes | null> {
const deploymentRepository = this.dataSource.getRepository(Deployment);
const deployment = await deploymentRepository.findOne({
where: {
project: {
id: projectId,
},
status: DeploymentStatus.Ready,
},
order: {
createdAt: 'DESC'
}
});
if (deployment === null) {
throw new Error(`No deployment found for project ${projectId}`);
}
return deployment.dnsRecordData;
}
async addDeployer(data: DeepPartial<Deployer>): Promise<Deployer> { async addDeployer(data: DeepPartial<Deployer>): Promise<Deployer> {
const deployerRepository = this.dataSource.getRepository(Deployer); const deployerRepository = this.dataSource.getRepository(Deployer);
const newDomain = await deployerRepository.save(data); const newDomain = await deployerRepository.save(data);

View File

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

View File

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

View File

@ -4,6 +4,7 @@ import { DateTime } from 'luxon';
import { Octokit } from 'octokit'; import { Octokit } from 'octokit';
import { inc as semverInc } from 'semver'; import { inc as semverInc } from 'semver';
import { DeepPartial } from 'typeorm'; import { DeepPartial } from 'typeorm';
import * as openpgp from 'openpgp';
import { Account, DEFAULT_GAS_ESTIMATION_MULTIPLIER, Registry as LaconicRegistry, getGasPrice, parseGasAndFees } from '@cerc-io/registry-sdk'; import { Account, DEFAULT_GAS_ESTIMATION_MULTIPLIER, Registry as LaconicRegistry, getGasPrice, parseGasAndFees } from '@cerc-io/registry-sdk';
import { DeliverTxResponse, IndexedTx } from '@cosmjs/stargate'; import { DeliverTxResponse, IndexedTx } from '@cosmjs/stargate';
@ -15,7 +16,7 @@ import {
ApplicationDeploymentRequest, ApplicationDeploymentRequest,
ApplicationDeploymentRemovalRequest ApplicationDeploymentRemovalRequest
} from './entity/Deployment'; } from './entity/Deployment';
import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord } from './types'; import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord, RegistryRecord } from './types';
import { getConfig, getRepoDetails, registryTransactionWithRetry, sleep } from './utils'; import { getConfig, getRepoDetails, registryTransactionWithRetry, sleep } from './utils';
const log = debug('snowball:registry'); const log = debug('snowball:registry');
@ -26,7 +27,7 @@ const APP_DEPLOYMENT_REQUEST_TYPE = 'ApplicationDeploymentRequest';
const APP_DEPLOYMENT_REMOVAL_REQUEST_TYPE = 'ApplicationDeploymentRemovalRequest'; const APP_DEPLOYMENT_REMOVAL_REQUEST_TYPE = 'ApplicationDeploymentRemovalRequest';
const APP_DEPLOYMENT_RECORD_TYPE = 'ApplicationDeploymentRecord'; const APP_DEPLOYMENT_RECORD_TYPE = 'ApplicationDeploymentRecord';
const APP_DEPLOYMENT_REMOVAL_RECORD_TYPE = 'ApplicationDeploymentRemovalRecord'; const APP_DEPLOYMENT_REMOVAL_RECORD_TYPE = 'ApplicationDeploymentRemovalRecord';
const WEBAPP_DEPLOYER_RECORD_TYPE = 'WebappDeployer' const WEBAPP_DEPLOYER_RECORD_TYPE = 'WebappDeployer';
const SLEEP_DURATION = 1000; const SLEEP_DURATION = 1000;
// TODO: Move registry code to registry-sdk/watcher-ts // TODO: Move registry code to registry-sdk/watcher-ts
@ -107,19 +108,7 @@ export class Registry {
...(packageJSON.version && { app_version: packageJSON.version }) ...(packageJSON.version && { app_version: packageJSON.version })
}; };
const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees); const result = await this.publishRecord(applicationRecord);
const result = await registryTransactionWithRetry(() =>
this.registry.setRecord(
{
privateKey: this.registryConfig.privateKey,
record: applicationRecord,
bondId: this.registryConfig.bondId
},
this.registryConfig.privateKey,
fee
)
);
log(`Published application record ${result.id}`); log(`Published application record ${result.id}`);
log('Application record data:', applicationRecord); log('Application record data:', applicationRecord);
@ -128,6 +117,8 @@ export class Registry {
const lrn = this.getLrn(repo); const lrn = this.getLrn(repo);
log(`Setting name: ${lrn} for record ID: ${result.id}`); log(`Setting name: ${lrn} for record ID: ${result.id}`);
const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees);
await sleep(SLEEP_DURATION); await sleep(SLEEP_DURATION);
await registryTransactionWithRetry(() => await registryTransactionWithRetry(() =>
this.registry.setName( this.registry.setName(
@ -219,17 +210,7 @@ export class Registry {
type: APP_DEPLOYMENT_AUCTION_RECORD_TYPE, type: APP_DEPLOYMENT_AUCTION_RECORD_TYPE,
}; };
const result = await registryTransactionWithRetry(() => const result = await this.publishRecord(applicationDeploymentAuction);
this.registry.setRecord(
{
privateKey: this.registryConfig.privateKey,
record: applicationDeploymentAuction,
bondId: this.registryConfig.bondId
},
this.registryConfig.privateKey,
fee
)
);
log(`Application deployment auction created: ${auctionResult.auction.id}`); log(`Application deployment auction created: ${auctionResult.auction.id}`);
log(`Application deployment auction record published: ${result.id}`); log(`Application deployment auction record published: ${result.id}`);
@ -246,8 +227,11 @@ export class Registry {
repository: string, repository: string,
auctionId?: string | null, auctionId?: string | null,
lrn: string, lrn: string,
apiUrl: string,
environmentVariables: { [key: string]: string }, environmentVariables: { [key: string]: string },
dns: string, dns: string,
requesterAddress: string,
publicKey: string,
payment?: string | null payment?: string | null
}): Promise<{ }): Promise<{
applicationDeploymentRequestId: string; applicationDeploymentRequestId: string;
@ -261,6 +245,16 @@ export class Registry {
throw new Error(`No record found for ${lrn}`); throw new Error(`No record found for ${lrn}`);
} }
let hash;
if (Object.keys(data.environmentVariables).length !== 0) {
hash = await this.generateConfigHash(
data.environmentVariables,
data.requesterAddress,
data.publicKey,
data.apiUrl,
);
}
// Create record of type ApplicationDeploymentRequest and publish // Create record of type ApplicationDeploymentRequest and publish
const applicationDeploymentRequest = { const applicationDeploymentRequest = {
type: APP_DEPLOYMENT_REQUEST_TYPE, type: APP_DEPLOYMENT_REQUEST_TYPE,
@ -270,9 +264,7 @@ export class Registry {
dns: data.dns, dns: data.dns,
// https://git.vdb.to/cerc-io/laconic-registry-cli/commit/129019105dfb93bebcea02fde0ed64d0f8e5983b // https://git.vdb.to/cerc-io/laconic-registry-cli/commit/129019105dfb93bebcea02fde0ed64d0f8e5983b
config: JSON.stringify({ config: JSON.stringify(hash ? { ref: hash } : {}),
env: data.environmentVariables
}),
meta: JSON.stringify({ meta: JSON.stringify({
note: `Added by Snowball @ ${DateTime.utc().toFormat( note: `Added by Snowball @ ${DateTime.utc().toFormat(
"EEE LLL dd HH:mm:ss 'UTC' yyyy" "EEE LLL dd HH:mm:ss 'UTC' yyyy"
@ -287,19 +279,7 @@ export class Registry {
await sleep(SLEEP_DURATION); await sleep(SLEEP_DURATION);
const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees); const result = await this.publishRecord(applicationDeploymentRequest);
const result = await registryTransactionWithRetry(() =>
this.registry.setRecord(
{
privateKey: this.registryConfig.privateKey,
record: applicationDeploymentRequest,
bondId: this.registryConfig.bondId
},
this.registryConfig.privateKey,
fee
)
);
log(`Application deployment request record published: ${result.id}`); log(`Application deployment request record published: ${result.id}`);
log('Application deployment request data:', applicationDeploymentRequest); log('Application deployment request data:', applicationDeploymentRequest);
@ -371,12 +351,11 @@ export class Registry {
true true
); );
// Filter records with ApplicationDeploymentRequestId ID and Deployment specific URL // Filter records with ApplicationDeploymentRequestId ID
return records.filter((record: AppDeploymentRecord) => return records.filter((record: AppDeploymentRecord) =>
deployments.some( deployments.some(
(deployment) => (deployment) =>
deployment.applicationDeploymentRequestId === record.attributes.request && deployment.applicationDeploymentRequestId === record.attributes.request
record.attributes.url.includes(deployment.id)
) )
); );
} }
@ -431,6 +410,14 @@ export class Registry {
); );
} }
/**
* Fetch record by Id
*/
async getRecordById(id: string): Promise<RegistryRecord | null> {
const [record] = await this.registry.getRecordsByIds([id]);
return record ?? null;
}
async createApplicationDeploymentRemovalRequest(data: { async createApplicationDeploymentRemovalRequest(data: {
deploymentId: string; deploymentId: string;
deployerLrn: string; deployerLrn: string;
@ -449,18 +436,8 @@ export class Registry {
...(data.payment && { payment: data.payment }), ...(data.payment && { payment: data.payment }),
}; };
const fee = parseGasAndFees(this.registryConfig.fee.gas, this.registryConfig.fee.fees); const result = await this.publishRecord(
applicationDeploymentRemovalRequest,
const result = await registryTransactionWithRetry(() =>
this.registry.setRecord(
{
privateKey: this.registryConfig.privateKey,
record: applicationDeploymentRemovalRequest,
bondId: this.registryConfig.bondId
},
this.registryConfig.privateKey,
fee
)
); );
log(`Application deployment removal request record published: ${result.id}`); log(`Application deployment removal request record published: ${result.id}`);
@ -486,6 +463,27 @@ export class Registry {
return completedAuctions; return completedAuctions;
} }
async publishRecord(recordData: any): Promise<any> {
const fee = parseGasAndFees(
this.registryConfig.fee.gas,
this.registryConfig.fee.fees,
);
const result = await registryTransactionWithRetry(() =>
this.registry.setRecord(
{
privateKey: this.registryConfig.privateKey,
record: recordData,
bondId: this.registryConfig.bondId,
},
this.registryConfig.privateKey,
fee,
),
);
return result;
}
async getRecordsByName(name: string): Promise<any> { async getRecordsByName(name: string): Promise<any> {
return this.registry.resolveNames([name]); return this.registry.resolveNames([name]);
} }
@ -532,4 +530,43 @@ export class Registry {
assert(this.registryConfig.authority, "Authority doesn't exist"); assert(this.registryConfig.authority, "Authority doesn't exist");
return `lrn://${this.registryConfig.authority}/applications/${appName}`; return `lrn://${this.registryConfig.authority}/applications/${appName}`;
} }
async generateConfigHash(
environmentVariables: { [key: string]: string },
requesterAddress: string,
pubKey: string,
url: string,
): Promise<string> {
// Config to be encrypted
const config = {
authorized: [requesterAddress],
config: { env: environmentVariables },
};
// Serialize the config
const serialized = JSON.stringify(config, null, 2);
const armoredKey = `-----BEGIN PGP PUBLIC KEY BLOCK-----\n\n${pubKey}\n\n-----END PGP PUBLIC KEY BLOCK-----`;
const publicKey = await openpgp.readKey({ armoredKey });
// Encrypt the config
const encrypted = await openpgp.encrypt({
message: await openpgp.createMessage({ text: serialized }),
encryptionKeys: publicKey,
format: 'binary',
});
// Get the hash after uploading encrypted config
const response = await fetch(`${url}/upload/config`, {
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream',
},
body: encrypted,
});
const configHash = await response.json();
return configHash.id;
}
} }

View File

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

View File

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

View File

@ -1,7 +1,8 @@
import assert from 'assert'; import assert from 'assert';
import debug from 'debug'; import debug from 'debug';
import { DeepPartial, FindOptionsWhere, IsNull, Not } from 'typeorm'; import { DeepPartial, FindOptionsWhere } from 'typeorm';
import { Octokit, RequestError } from 'octokit'; import { Octokit, RequestError } from 'octokit';
import { DateTime } from 'luxon';
import { OAuthApp } from '@octokit/oauth-app'; import { OAuthApp } from '@octokit/oauth-app';
@ -22,6 +23,8 @@ import {
AppDeploymentRemovalRecord, AppDeploymentRemovalRecord,
AuctionParams, AuctionParams,
DeployerRecord, DeployerRecord,
DNSRecord,
DNSRecordAttributes,
EnvironmentVariables, EnvironmentVariables,
GitPushEventPayload, GitPushEventPayload,
} from './types'; } from './types';
@ -199,12 +202,60 @@ export class Service {
if (!deployment.project) { if (!deployment.project) {
log(`Project ${deployment.projectId} not found`); log(`Project ${deployment.projectId} not found`);
return; return;
} else { }
const registryRecord = await this.laconicRegistry.getRecordById(record.attributes.dns);
if (!registryRecord) {
log(`DNS record not found for deployment ${deployment.id}`);
return;
}
const dnsRecord = registryRecord as DNSRecord;
const dnsRecordData: DNSRecordAttributes = {
name: dnsRecord.attributes.name,
request: dnsRecord.attributes.request,
resourceType: dnsRecord.attributes.resource_type,
value: dnsRecord.attributes.value,
version: dnsRecord.attributes.version,
}
deployment.applicationDeploymentRecordId = record.id; deployment.applicationDeploymentRecordId = record.id;
deployment.applicationDeploymentRecordData = record.attributes; deployment.applicationDeploymentRecordData = record.attributes;
deployment.url = record.attributes.url; deployment.url = record.attributes.url;
deployment.status = DeploymentStatus.Ready; deployment.status = DeploymentStatus.Ready;
deployment.isCurrent = deployment.environment === Environment.Production; deployment.isCurrent = deployment.environment === Environment.Production;
deployment.dnsRecordData = dnsRecordData;
if (deployment.isCanonical) {
const previousCanonicalDeployment = await this.db.getDeployment({
where: {
projectId: deployment.project.id,
deployer: deployment.deployer,
isCanonical: true,
isCurrent: true,
},
relations: {
project: true,
deployer: true,
}
});
if (previousCanonicalDeployment) {
// Send removal request for the previous canonical deployment and delete DB entry
if (previousCanonicalDeployment.url !== deployment.url) {
await this.laconicRegistry.createApplicationDeploymentRemovalRequest({
deploymentId: previousCanonicalDeployment.applicationDeploymentRecordId!,
deployerLrn: previousCanonicalDeployment.deployer.deployerLrn,
auctionId: previousCanonicalDeployment.project.auctionId,
payment: previousCanonicalDeployment.project.txHash
});
}
await this.db.deleteDeploymentById(previousCanonicalDeployment.id);
}
}
await this.db.updateDeploymentById(deployment.id, deployment); await this.db.updateDeploymentById(deployment.id, deployment);
@ -223,28 +274,34 @@ export class Service {
log( log(
`Updated deployment ${deployment.id} with URL ${record.attributes.url}`, `Updated deployment ${deployment.id} with URL ${record.attributes.url}`,
); );
}
}); });
await Promise.all(deploymentUpdatePromises); await Promise.all(deploymentUpdatePromises);
// Get deployments that are in production environment // Get deployments that are in production environment
const prodDeployments = Object.values(recordToDeploymentsMap).filter(deployment => deployment.isCurrent); const prodDeployments = Object.values(recordToDeploymentsMap).filter(
(deployment) => deployment.isCurrent,
);
// Set the isCurrent state to false for the old deployments // Set the isCurrent state to false for the old deployments
for (const deployment of prodDeployments) { for (const deployment of prodDeployments) {
const projectDeployments = await this.db.getDeploymentsByProjectId(deployment.projectId); const projectDeployments = await this.db.getDeploymentsByProjectId(
const oldDeployments = projectDeployments deployment.projectId,
.filter(projectDeployment => projectDeployment.deployer.deployerLrn === deployment.deployer.deployerLrn && projectDeployment.id !== deployment.id); );
const oldDeployments = projectDeployments.filter(
(projectDeployment) =>
projectDeployment.deployer.deployerLrn ===
deployment.deployer.deployerLrn &&
projectDeployment.id !== deployment.id &&
projectDeployment.isCanonical == deployment.isCanonical,
);
for (const oldDeployment of oldDeployments) { for (const oldDeployment of oldDeployments) {
await this.db.updateDeployment( await this.db.updateDeployment(
{ id: oldDeployment.id }, { id: oldDeployment.id },
{ isCurrent: false } { isCurrent: false },
); );
} }
} }
await Promise.all(deploymentUpdatePromises);
} }
/** /**
@ -428,9 +485,14 @@ export class Service {
return dbProjects; return dbProjects;
} }
async getDeploymentsByProjectId(projectId: string): Promise<Deployment[]> { async getNonCanonicalDeploymentsByProjectId(projectId: string): Promise<Deployment[]> {
const dbDeployments = await this.db.getDeploymentsByProjectId(projectId); const nonCanonicalDeployments = await this.db.getNonCanonicalDeploymentsByProjectId(projectId);
return dbDeployments; return nonCanonicalDeployments;
}
async getLatestDNSRecordByProjectId(projectId: string): Promise<DNSRecordAttributes | null> {
const dnsRecord = await this.db.getLatestDNSRecordByProjectId(projectId);
return dnsRecord;
} }
async getEnvironmentVariablesByProjectId( async getEnvironmentVariablesByProjectId(
@ -572,6 +634,7 @@ export class Service {
where: { id: deploymentId }, where: { id: deploymentId },
relations: { relations: {
project: true, project: true,
deployer: true,
}, },
}); });
@ -579,18 +642,12 @@ export class Service {
throw new Error('Deployment does not exist'); throw new Error('Deployment does not exist');
} }
const prodBranchDomains = await this.db.getDomainsByProjectId(
oldDeployment.project.id,
{ branch: oldDeployment.project.prodBranch },
);
const octokit = await this.getOctokit(user.id); const octokit = await this.getOctokit(user.id);
const newDeployment = await this.createDeployment(user.id, octokit, { const newDeployment = await this.createDeployment(user.id, octokit, {
project: oldDeployment.project, project: oldDeployment.project,
branch: oldDeployment.branch, branch: oldDeployment.branch,
environment: Environment.Production, environment: Environment.Production,
domain: prodBranchDomains[0],
commitHash: oldDeployment.commitHash, commitHash: oldDeployment.commitHash,
commitMessage: oldDeployment.commitMessage, commitMessage: oldDeployment.commitMessage,
deployer: oldDeployment.deployer deployer: oldDeployment.deployer
@ -619,19 +676,6 @@ export class Service {
commitHash: data.commitHash!, commitHash: data.commitHash!,
}); });
// Update previous deployment with prod branch domain
// TODO: Fix unique constraint error for domain
if (data.domain) {
await this.db.updateDeployment(
{
domainId: data.domain.id,
},
{
domain: null,
},
);
}
let deployer; let deployer;
if (deployerLrn) { if (deployerLrn) {
deployer = await this.db.getDeployerByLRN(deployerLrn); deployer = await this.db.getDeployerByLRN(deployerLrn);
@ -639,44 +683,62 @@ export class Service {
deployer = data.deployer; deployer = data.deployer;
} }
const newDeployment = await this.createDeploymentFromData(userId, data, deployer!.deployerLrn!, applicationRecordId, applicationRecordData); const deployment = await this.createDeploymentFromData(userId, data, deployer!.deployerLrn!, applicationRecordId, applicationRecordData, false);
const address = await this.getAddress();
const { repo, repoUrl } = await getRepoDetails(octokit, data.project.repository, data.commitHash); const { repo, repoUrl } = await getRepoDetails(octokit, data.project.repository, data.commitHash);
const environmentVariablesObj = await this.getEnvVariables(data.project!.id!); const environmentVariablesObj = await this.getEnvVariables(data.project!.id!);
// To set project DNS // To set project DNS
if (data.environment === Environment.Production) { if (data.environment === Environment.Production) {
// On deleting deployment later, project DNS deployment is also deleted const canonicalDeployment = await this.createDeploymentFromData(userId, data, deployer!.deployerLrn!, applicationRecordId, applicationRecordData, true);
// So publish project DNS deployment first so that ApplicationDeploymentRecord for the same is available when deleting deployment later // If a custom domain is present then use that as the DNS in the deployment request
const customDomain = await this.db.getOldestDomainByProjectId(data.project!.id!);
// On deleting deployment later, project canonical deployment is also deleted
// So publish project canonical deployment first so that ApplicationDeploymentRecord for the same is available when deleting deployment later
const { applicationDeploymentRequestData, applicationDeploymentRequestId } =
await this.laconicRegistry.createApplicationDeploymentRequest({ await this.laconicRegistry.createApplicationDeploymentRequest({
deployment: newDeployment, deployment: canonicalDeployment,
appName: repo, appName: repo,
repository: repoUrl, repository: repoUrl,
environmentVariables: environmentVariablesObj, environmentVariables: environmentVariablesObj,
dns: `${newDeployment.project.name}`, dns: customDomain?.name ?? `${canonicalDeployment.project.name}`,
lrn: deployer!.deployerLrn!, lrn: deployer!.deployerLrn!,
apiUrl: deployer!.deployerApiUrl!,
payment: data.project.txHash, payment: data.project.txHash,
auctionId: data.project.auctionId auctionId: data.project.auctionId,
requesterAddress: address,
publicKey: deployer!.publicKey!
});
await this.db.updateDeploymentById(canonicalDeployment.id, {
applicationDeploymentRequestId,
applicationDeploymentRequestData,
}); });
} }
const { applicationDeploymentRequestId, applicationDeploymentRequestData } = const { applicationDeploymentRequestId, applicationDeploymentRequestData } =
await this.laconicRegistry.createApplicationDeploymentRequest({ await this.laconicRegistry.createApplicationDeploymentRequest({
deployment: newDeployment, deployment: deployment,
appName: repo, appName: repo,
repository: repoUrl, repository: repoUrl,
lrn: deployer!.deployerLrn!, lrn: deployer!.deployerLrn!,
apiUrl: deployer!.deployerApiUrl!,
environmentVariables: environmentVariablesObj, environmentVariables: environmentVariablesObj,
dns: `${newDeployment.project.name}-${newDeployment.id}`, dns: `${deployment.project.name}-${deployment.id}`,
payment: data.project.txHash, payment: data.project.txHash,
auctionId: data.project.auctionId auctionId: data.project.auctionId,
requesterAddress: address,
publicKey: deployer!.publicKey!
}); });
await this.db.updateDeploymentById(newDeployment.id, { await this.db.updateDeploymentById(deployment.id, {
applicationDeploymentRequestId, applicationDeploymentRequestId,
applicationDeploymentRequestData, applicationDeploymentRequestData,
}); });
return newDeployment; return deployment;
} }
async createDeploymentFromAuction( async createDeploymentFromAuction(
@ -719,42 +781,59 @@ export class Service {
commitMessage: latestCommit.commit.message, commitMessage: latestCommit.commit.message,
}; };
const newDeployment = await this.createDeploymentFromData(project.ownerId!, deploymentData, deployerLrn, applicationRecordId, applicationRecordData); const deployment = await this.createDeploymentFromData(project.ownerId!, deploymentData, deployerLrn, applicationRecordId, applicationRecordData, false);
const address = await this.getAddress();
const environmentVariablesObj = await this.getEnvVariables(project!.id!); const environmentVariablesObj = await this.getEnvVariables(project!.id!);
// To set project DNS // To set project DNS
if (deploymentData.environment === Environment.Production) { if (deploymentData.environment === Environment.Production) {
// On deleting deployment later, project DNS deployment is also deleted const canonicalDeployment = await this.createDeploymentFromData(project.ownerId!, deploymentData, deployerLrn, applicationRecordId, applicationRecordData, true);
// So publish project DNS deployment first so that ApplicationDeploymentRecord for the same is available when deleting deployment later // If a custom domain is present then use that as the DNS in the deployment request
const customDomain = await this.db.getOldestDomainByProjectId(project!.id!);
// On deleting deployment later, project canonical deployment is also deleted
// So publish project canonical deployment first so that ApplicationDeploymentRecord for the same is available when deleting deployment later
const { applicationDeploymentRequestId, applicationDeploymentRequestData } =
await this.laconicRegistry.createApplicationDeploymentRequest({ await this.laconicRegistry.createApplicationDeploymentRequest({
deployment: newDeployment, deployment: canonicalDeployment,
appName: repo, appName: repo,
repository: repoUrl, repository: repoUrl,
environmentVariables: environmentVariablesObj, environmentVariables: environmentVariablesObj,
dns: `${newDeployment.project.name}`, dns: customDomain?.name ?? `${canonicalDeployment.project.name}`,
auctionId: project.auctionId!, auctionId: project.auctionId!,
lrn: deployerLrn, lrn: deployerLrn,
apiUrl: deployer!.deployerApiUrl!,
requesterAddress: address,
publicKey: deployer!.publicKey!
});
await this.db.updateDeploymentById(canonicalDeployment.id, {
applicationDeploymentRequestId,
applicationDeploymentRequestData,
}); });
} }
const { applicationDeploymentRequestId, applicationDeploymentRequestData } = const { applicationDeploymentRequestId, applicationDeploymentRequestData } =
// Create requests for all the deployers // Create requests for all the deployers
await this.laconicRegistry.createApplicationDeploymentRequest({ await this.laconicRegistry.createApplicationDeploymentRequest({
deployment: newDeployment, deployment: deployment,
appName: repo, appName: repo,
repository: repoUrl, repository: repoUrl,
auctionId: project.auctionId!, auctionId: project.auctionId!,
lrn: deployerLrn, lrn: deployerLrn,
apiUrl: deployer!.deployerApiUrl!,
environmentVariables: environmentVariablesObj, environmentVariables: environmentVariablesObj,
dns: `${newDeployment.project.name}-${newDeployment.id}`, dns: `${deployment.project.name}-${deployment.id}`,
requesterAddress: address,
publicKey: deployer!.publicKey!
}); });
await this.db.updateDeploymentById(newDeployment.id, { await this.db.updateDeploymentById(deployment.id, {
applicationDeploymentRequestId, applicationDeploymentRequestId,
applicationDeploymentRequestData, applicationDeploymentRequestData,
}); });
return newDeployment; return deployment;
} }
async createDeploymentFromData( async createDeploymentFromData(
@ -763,6 +842,7 @@ export class Service {
deployerLrn: string, deployerLrn: string,
applicationRecordId: string, applicationRecordId: string,
applicationRecordData: ApplicationRecord, applicationRecordData: ApplicationRecord,
isCanonical: boolean,
): Promise<Deployment> { ): Promise<Deployment> {
const newDeployment = await this.db.addDeployment({ const newDeployment = await this.db.addDeployment({
project: data.project, project: data.project,
@ -773,13 +853,13 @@ export class Service {
status: DeploymentStatus.Building, status: DeploymentStatus.Building,
applicationRecordId, applicationRecordId,
applicationRecordData, applicationRecordData,
domain: data.domain,
createdBy: Object.assign(new User(), { createdBy: Object.assign(new User(), {
id: userId, id: userId,
}), }),
deployer: Object.assign(new Deployer(), { deployer: Object.assign(new Deployer(), {
deployerLrn, deployerLrn,
}), }),
isCanonical
}); });
log(`Created deployment ${newDeployment.id}`); log(`Created deployment ${newDeployment.id}`);
@ -1012,9 +1092,6 @@ export class Service {
for await (const project of projects) { for await (const project of projects) {
const octokit = await this.getOctokit(project.ownerId); const octokit = await this.getOctokit(project.ownerId);
const [domain] = await this.db.getDomainsByProjectId(project.id, {
branch,
});
const deployers = project.deployers; const deployers = project.deployers;
if (!deployers) { if (!deployers) {
@ -1032,7 +1109,6 @@ export class Service {
project.prodBranch === branch project.prodBranch === branch
? Environment.Production ? Environment.Production
: Environment.Preview, : Environment.Preview,
domain,
commitHash: headCommit.id, commitHash: headCommit.id,
commitMessage: headCommit.message, commitMessage: headCommit.message,
deployer: deployer deployer: deployer
@ -1074,7 +1150,6 @@ export class Service {
const oldDeployment = await this.db.getDeployment({ const oldDeployment = await this.db.getDeployment({
relations: { relations: {
project: true, project: true,
domain: true,
deployer: true, deployer: true,
createdBy: true, createdBy: true,
}, },
@ -1100,7 +1175,6 @@ export class Service {
// TODO: Put isCurrent field in project // TODO: Put isCurrent field in project
branch: oldDeployment.branch, branch: oldDeployment.branch,
environment: Environment.Production, environment: Environment.Production,
domain: oldDeployment.domain,
commitHash: oldDeployment.commitHash, commitHash: oldDeployment.commitHash,
commitMessage: oldDeployment.commitMessage, commitMessage: oldDeployment.commitMessage,
deployer: oldDeployment.deployer deployer: oldDeployment.deployer
@ -1118,13 +1192,15 @@ export class Service {
// TODO: Implement transactions // TODO: Implement transactions
const oldCurrentDeployment = await this.db.getDeployment({ const oldCurrentDeployment = await this.db.getDeployment({
relations: { relations: {
domain: true, project: true,
deployer: true,
}, },
where: { where: {
project: { project: {
id: projectId, id: projectId,
}, },
isCurrent: true, isCurrent: true,
isCanonical: false,
}, },
}); });
@ -1134,15 +1210,61 @@ export class Service {
const oldCurrentDeploymentUpdate = await this.db.updateDeploymentById( const oldCurrentDeploymentUpdate = await this.db.updateDeploymentById(
oldCurrentDeployment.id, oldCurrentDeployment.id,
{ isCurrent: false, domain: null }, { isCurrent: false },
); );
const newCurrentDeploymentUpdate = await this.db.updateDeploymentById( const newCurrentDeploymentUpdate = await this.db.updateDeploymentById(
deploymentId, deploymentId,
{ isCurrent: true, domain: oldCurrentDeployment?.domain }, { isCurrent: true },
); );
return newCurrentDeploymentUpdate && oldCurrentDeploymentUpdate; if (!newCurrentDeploymentUpdate || !oldCurrentDeploymentUpdate){
return false;
}
const newCurrentDeployment = await this.db.getDeployment({ where: { id: deploymentId }, relations: { project: true, deployer: true } });
if (!newCurrentDeployment) {
throw new Error(`Deployment with Id ${deploymentId} not found`);
}
const applicationDeploymentRequestData = newCurrentDeployment.applicationDeploymentRequestData;
const customDomain = await this.db.getOldestDomainByProjectId(projectId);
if (customDomain && applicationDeploymentRequestData) {
applicationDeploymentRequestData.dns = customDomain.name
}
// Create a canonical deployment for the new current deployment
const canonicalDeployment = await this.createDeploymentFromData(
newCurrentDeployment.project.ownerId,
newCurrentDeployment,
newCurrentDeployment.deployer!.deployerLrn!,
newCurrentDeployment.applicationRecordId,
newCurrentDeployment.applicationRecordData,
true,
);
applicationDeploymentRequestData!.meta = JSON.stringify({
...JSON.parse(applicationDeploymentRequestData!.meta),
note: `Updated by Snowball @ ${DateTime.utc().toFormat(
"EEE LLL dd HH:mm:ss 'UTC' yyyy"
)}`
});
const result = await this.laconicRegistry.publishRecord(
applicationDeploymentRequestData,
);
log(`Application deployment request record published: ${result.id}`)
const updateResult = await this.db.updateDeploymentById(canonicalDeployment.id, {
applicationDeploymentRequestId: result.id,
applicationDeploymentRequestData,
});
return updateResult;
} }
async deleteDeployment(deploymentId: string): Promise<boolean> { async deleteDeployment(deploymentId: string): Promise<boolean> {
@ -1159,9 +1281,23 @@ export class Service {
if (deployment && deployment.applicationDeploymentRecordId) { if (deployment && deployment.applicationDeploymentRecordId) {
// If deployment is current, remove deployment for project subdomain as well // If deployment is current, remove deployment for project subdomain as well
if (deployment.isCurrent) { if (deployment.isCurrent) {
const canonicalDeployment = await this.db.getDeployment({
where: {
projectId: deployment.project.id,
deployer: deployment.deployer,
isCanonical: true
},
relations: {
project: true,
deployer: true,
},
})
// If the canonical deployment is not present then query the chain for the deployment record for backward compatibility
if (!canonicalDeployment) {
log(`Canonical deployment for deployment with id ${deployment.id} not found, querying the chain..`);
const currentDeploymentURL = `https://${(deployment.project.name).toLowerCase()}.${deployment.deployer.baseDomain}`; const currentDeploymentURL = `https://${(deployment.project.name).toLowerCase()}.${deployment.deployer.baseDomain}`;
// TODO: Store the latest DNS deployment record
const deploymentRecords = const deploymentRecords =
await this.laconicRegistry.getDeploymentRecordsByFilter({ await this.laconicRegistry.getDeploymentRecordsByFilter({
application: deployment.applicationRecordId, application: deployment.applicationRecordId,
@ -1186,6 +1322,24 @@ export class Service {
auctionId: deployment.project.auctionId, auctionId: deployment.project.auctionId,
payment: deployment.project.txHash payment: deployment.project.txHash
}); });
} else {
// If canonical deployment is found in the DB, then send the removal request with that deployment record Id
const result =
await this.laconicRegistry.createApplicationDeploymentRemovalRequest({
deploymentId: canonicalDeployment.applicationDeploymentRecordId!,
deployerLrn: canonicalDeployment.deployer.deployerLrn,
auctionId: canonicalDeployment.project.auctionId,
payment: canonicalDeployment.project.txHash
});
await this.db.updateDeploymentById(canonicalDeployment.id, {
status: DeploymentStatus.Deleting,
applicationDeploymentRemovalRequestId:
result.applicationDeploymentRemovalRequestId,
applicationDeploymentRemovalRequestData:
result.applicationDeploymentRemovalRequestData,
});
}
} }
const result = const result =
@ -1215,7 +1369,7 @@ export class Service {
data: { name: string }, data: { name: string },
): Promise<{ ): Promise<{
primaryDomain: Domain; primaryDomain: Domain;
redirectedDomain: Domain; // redirectedDomain: Domain;
}> { }> {
const currentProject = await this.db.getProjectById(projectId); const currentProject = await this.db.getProjectById(projectId);
@ -1231,22 +1385,22 @@ export class Service {
const savedPrimaryDomain = await this.db.addDomain(primaryDomainDetails); const savedPrimaryDomain = await this.db.addDomain(primaryDomainDetails);
const domainArr = data.name.split('www.'); // const domainArr = data.name.split('www.');
const redirectedDomainDetails = { // const redirectedDomainDetails = {
name: domainArr.length > 1 ? domainArr[1] : `www.${domainArr[0]}`, // name: domainArr.length > 1 ? domainArr[1] : `www.${domainArr[0]}`,
branch: currentProject.prodBranch, // branch: currentProject.prodBranch,
project: currentProject, // project: currentProject,
redirectTo: savedPrimaryDomain, // redirectTo: savedPrimaryDomain,
}; // };
const savedRedirectedDomain = await this.db.addDomain( // const savedRedirectedDomain = await this.db.addDomain(
redirectedDomainDetails, // redirectedDomainDetails,
); // );
return { return {
primaryDomain: savedPrimaryDomain, primaryDomain: savedPrimaryDomain,
redirectedDomain: savedRedirectedDomain, // redirectedDomain: savedRedirectedDomain,
}; };
} }
@ -1434,6 +1588,7 @@ export class Service {
const deployerApiUrl = record.attributes.apiUrl; const deployerApiUrl = record.attributes.apiUrl;
const minimumPayment = record.attributes.minimumPayment; const minimumPayment = record.attributes.minimumPayment;
const paymentAddress = record.attributes.paymentAddress; const paymentAddress = record.attributes.paymentAddress;
const publicKey = record.attributes.publicKey;
const baseDomain = deployerApiUrl.substring(deployerApiUrl.indexOf('.') + 1); const baseDomain = deployerApiUrl.substring(deployerApiUrl.indexOf('.') + 1);
const deployerData = { const deployerData = {
@ -1442,7 +1597,8 @@ export class Service {
deployerApiUrl, deployerApiUrl,
baseDomain, baseDomain,
minimumPayment, minimumPayment,
paymentAddress paymentAddress,
publicKey
}; };
// TODO: Update deployers table in a separate job // TODO: Update deployers table in a separate job

View File

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

View File

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

View File

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

1
packages/deployer/.gitignore vendored Normal file
View File

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

View File

@ -4,5 +4,5 @@ services:
gqlEndpoint: https://laconicd-sapo.laconic.com/api gqlEndpoint: https://laconicd-sapo.laconic.com/api
userKey: userKey:
bondId: bondId:
chainId: laconic_9000-2 chainId: laconic-testnet-2
gasPrice: 1alnt gasPrice: 0.001alnt

View File

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

View File

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

View File

View File

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

View File

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

View File

@ -0,0 +1,56 @@
#!/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

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

View File

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

View File

@ -3,17 +3,16 @@ VITE_SERVER_URL='http://localhost:8000'
VITE_GITHUB_CLIENT_ID= VITE_GITHUB_CLIENT_ID=
VITE_GITHUB_PWA_TEMPLATE_REPO="snowball-tools/test-progressive-web-app" 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_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_WALLET_CONNECT_ID=
VITE_LIT_RELAY_API_KEY= VITE_LIT_RELAY_API_KEY=
VITE_ALCHEMY_API_KEY=
VITE_BUGSNAG_API_KEY= VITE_BUGSNAG_API_KEY=
VITE_PASSKEY_WALLET_RPID= VITE_PASSKEY_WALLET_RPID=
VITE_TURNKEY_API_BASE_URL= VITE_TURNKEY_API_BASE_URL=
VITE_TURNKEY_ORGANIZATION_ID=
VITE_LACONICD_CHAIN_ID= VITE_LACONICD_CHAIN_ID=
VITE_WALLET_IFRAME_URL=

View File

@ -1,19 +1,21 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="dark dark:bg-background dark:text-foreground">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="snowball tools dashboard" /> <meta name="description" content="laconic tools dashboard" />
<link rel="icon" href="/favicon.ico" /> <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" /> <link rel="manifest" href="/site.webmanifest" />
<meta name="msapplication-TileColor" content="#2d89ef" /> <meta name="msapplication-TileColor" content="#2d89ef" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<title>Snowball</title> <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"
/>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

View File

@ -41,7 +41,7 @@
"@turnkey/http": "^2.10.0", "@turnkey/http": "^2.10.0",
"@turnkey/sdk-react": "^0.1.0", "@turnkey/sdk-react": "^0.1.0",
"@turnkey/webauthn-stamper": "^0.5.0", "@turnkey/webauthn-stamper": "^0.5.0",
"@walletconnect/ethereum-provider": "^2.12.2", "@walletconnect/ethereum-provider": "^2.16.1",
"@web3modal/siwe": "4.0.5", "@web3modal/siwe": "4.0.5",
"@web3modal/wagmi": "4.0.5", "@web3modal/wagmi": "4.0.5",
"assert": "^2.1.0", "assert": "^2.1.0",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 674 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 989 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

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

After

Width:  |  Height:  |  Size: 892 B

View File

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

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -4,7 +4,11 @@ import {
MenuItem, MenuItem,
MenuList, MenuList,
} from '@snowballtools/material-tailwind-react-fork'; } from '@snowballtools/material-tailwind-react-fork';
import { ComponentPropsWithoutRef, MouseEvent, useCallback } from 'react'; import {
ComponentPropsWithoutRef,
MouseEvent,
useCallback,
} from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Project } from 'gql-client'; import { Project } from 'gql-client';
import { Avatar } from 'components/shared/Avatar'; import { Avatar } from 'components/shared/Avatar';
@ -83,12 +87,12 @@ export const ProjectCard = ({
<p className={theme.title()}>{project.name}</p> <p className={theme.title()}>{project.name}</p>
</Tooltip> </Tooltip>
<p className={theme.description()}> <p className={theme.description()}>
{project.deployments[0]?.domain?.name ?? 'No domain'} {project.deployments[0]?.applicationDeploymentRecordData?.url ?? 'No domain'}
</p> </p>
</div> </div>
{/* Icons */} {/* Icons */}
<div className={theme.icons()}> <div className={theme.icons()}>
{hasError && <WarningDiamondIcon className="text-elements-danger" />} {hasError && <WarningDiamondIcon className="text-error" />}
<Menu placement="bottom-end"> <Menu placement="bottom-end">
<MenuHandler> <MenuHandler>
<Button <Button
@ -101,12 +105,15 @@ export const ProjectCard = ({
<HorizontalDotIcon /> <HorizontalDotIcon />
</Button> </Button>
</MenuHandler> </MenuHandler>
<MenuList> <MenuList className="dark:bg-overlay3 dark:shadow-background dark:border-none">
<MenuItem onClick={navigateToSettingsOnClick}> <MenuItem
onClick={navigateToSettingsOnClick}
className="text-foreground"
>
Project settings Project settings
</MenuItem> </MenuItem>
<MenuItem <MenuItem
className="text-red-500" className="text-error"
onClick={navigateToSettingsOnClick} onClick={navigateToSettingsOnClick}
> >
Delete project Delete project

View File

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

View File

@ -13,10 +13,10 @@ export const ProjectSearchBarEmpty = ({
{...props} {...props}
className={cn('flex items-center px-2 py-2 gap-3', className)} 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"> <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">
<InfoRoundFilledIcon size={16} /> <InfoRoundFilledIcon size={16} />
</div> </div>
<p className="text-elements-low-em text-sm tracking-[-0.006em]"> <p className="text-elements-low-em text-sm dark:text-foreground-secondary tracking-[-0.006em]">
No projects matching this name No projects matching this name
</p> </p>
</div> </div>

View File

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

@ -20,10 +20,14 @@ import { Button } from '../../shared/Button';
import { Input } from 'components/shared/Input'; import { Input } from 'components/shared/Input';
import { useToast } from 'components/shared/Toast'; import { useToast } from 'components/shared/Toast';
import { useGQLClient } from '../../../context/GQLClientContext'; import { useGQLClient } from '../../../context/GQLClientContext';
import IFrameModal from './IFrameModal';
import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm'; import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
import { EnvironmentVariablesFormValues } from 'types/types'; import { EnvironmentVariablesFormValues } from 'types/types';
import ConnectWallet from './ConnectWallet'; import {
import { useWalletConnectClient } from 'context/WalletConnectContext'; VITE_LACONICD_CHAIN_ID,
VITE_WALLET_IFRAME_URL,
} from 'utils/constants';
import AccountsDropdown from './AccountsDropdown';
type ConfigureDeploymentFormValues = { type ConfigureDeploymentFormValues = {
option: string; option: string;
@ -36,16 +40,18 @@ type ConfigureFormValues = ConfigureDeploymentFormValues &
EnvironmentVariablesFormValues; EnvironmentVariablesFormValues;
const DEFAULT_MAX_PRICE = '10000'; const DEFAULT_MAX_PRICE = '10000';
const TX_APPROVAL_TIMEOUT_MS = 60000;
const Configure = () => { const Configure = () => {
const { signClient, session, accounts } = useWalletConnectClient();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [deployers, setDeployers] = useState<Deployer[]>([]); const [deployers, setDeployers] = useState<Deployer[]>([]);
const [selectedAccount, setSelectedAccount] = useState<string>(); const [selectedAccount, setSelectedAccount] = useState<string>();
const [accounts, setAccounts] = useState<string[]>([]);
const [selectedDeployer, setSelectedDeployer] = useState<Deployer>(); const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
const [isPaymentLoading, setIsPaymentLoading] = useState(false); const [isPaymentLoading, setIsPaymentLoading] = useState(false);
const [isPaymentDone, setIsPaymentDone] = useState(false); const [isPaymentDone, setIsPaymentDone] = useState(false);
const [isFrameVisible, setIsFrameVisible] = useState(false);
const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const templateId = searchParams.get('templateId'); const templateId = searchParams.get('templateId');
@ -182,7 +188,7 @@ const Configure = () => {
let amount: string; let amount: string;
let senderAddress: string; let senderAddress: string;
let txHash: string; let txHash: string | null = null;
if (createFormData.option === 'LRN' && !deployer?.minimumPayment) { if (createFormData.option === 'LRN' && !deployer?.minimumPayment) {
toast({ toast({
id: 'no-payment-required', id: 'no-payment-required',
@ -196,7 +202,7 @@ const Configure = () => {
} else { } else {
if (!selectedAccount) return; if (!selectedAccount) return;
senderAddress = selectedAccount.split(':')[2]; senderAddress = selectedAccount;
if (createFormData.option === 'LRN') { if (createFormData.option === 'LRN') {
amount = deployer?.minimumPayment!; amount = deployer?.minimumPayment!;
@ -208,27 +214,44 @@ const Configure = () => {
const amountToBePaid = amount.replace(/\D/g, '').toString(); const amountToBePaid = amount.replace(/\D/g, '').toString();
const txHashResponse = await cosmosSendTokensHandler( txHash = await cosmosSendTokensHandler(senderAddress, amountToBePaid);
selectedAccount,
amountToBePaid,
);
if (!txHashResponse) { if (!txHash) {
console.error('Tx not successful'); toast({
return; id: 'unsuccessful-tx',
title: 'Transaction rejected',
variant: 'error',
onDismiss: dismiss,
});
setIsFrameVisible(false);
setIsPaymentLoading(false);
throw new Error('Transaction rejected');
} }
txHash = txHashResponse; // Validate transaction hash
const isTxHashValid = await verifyTx( const isTxHashValid = await verifyTx(
senderAddress, senderAddress,
txHash, txHash,
amountToBePaid.toString(), amountToBePaid,
); );
setIsPaymentLoading(false);
if (isTxHashValid === false) { if (isTxHashValid) {
console.error('Invalid Tx hash', txHash); toast({
return; 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');
} }
} }
@ -248,7 +271,7 @@ const Configure = () => {
createFormData, createFormData,
environmentVariables, environmentVariables,
senderAddress, senderAddress,
txHash, txHash!,
); );
await client.getEnvironmentVariables(projectId); await client.getEnvironmentVariables(projectId);
@ -270,14 +293,14 @@ const Configure = () => {
`/${orgSlug}/projects/create/deploy?projectId=${projectId}`, `/${orgSlug}/projects/create/deploy?projectId=${projectId}`,
); );
} }
} catch (error) { } catch (error: any) {
console.error(error);
toast({ toast({
id: 'error-deploying-app', id: 'error-deploying-app',
title: 'Error deploying app', title: 'Error deploying app',
variant: 'error', variant: 'error',
onDismiss: dismiss, onDismiss: dismiss,
}); });
throw new Error(error);
} }
}, },
[client, createProject, dismiss, toast], [client, createProject, dismiss, toast],
@ -302,72 +325,95 @@ const Configure = () => {
const cosmosSendTokensHandler = useCallback( const cosmosSendTokensHandler = useCallback(
async (selectedAccount: string, amount: string) => { async (selectedAccount: string, amount: string) => {
if (!signClient || !session || !selectedAccount) { if (!selectedAccount) {
return; throw new Error('Account not selected');
} }
const chainId = selectedAccount.split(':')[1]; const senderAddress = selectedAccount;
const senderAddress = selectedAccount.split(':')[2];
const snowballAddress = await client.getAddress(); const snowballAddress = await client.getAddress();
let timeoutId;
try { try {
setIsPaymentDone(false); setIsPaymentDone(false);
setIsPaymentLoading(true); 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({ toast({
id: 'sending-payment-request', id: 'error-transaction',
title: 'Check your wallet and approve payment request', title: 'Error during transaction',
variant: 'loading',
onDismiss: dismiss,
});
const result: { signature: string } = await signClient.request({
topic: session.topic,
chainId: `cosmos:${chainId}`,
request: {
method: 'cosmos_sendTokens',
params: [
{
from: senderAddress,
to: snowballAddress,
value: amount,
},
],
},
});
if (!result) {
throw new Error('Error completing transaction');
}
toast({
id: 'payment-successful',
title: 'Payment successful',
variant: 'success',
onDismiss: dismiss,
});
setIsPaymentDone(true);
return result.signature;
} catch (error: any) {
console.error('Error sending tokens', error);
toast({
id: 'error-sending-tokens',
title: 'Error sending tokens',
variant: 'error', variant: 'error',
onDismiss: dismiss, onDismiss: dismiss,
}); });
}
setIsFrameVisible(false);
setIsPaymentDone(false); window.removeEventListener('message', handleTxStatus);
} finally { };
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); 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);
} }
}, },
[session, signClient, toast], [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(() => { useEffect(() => {
fetchDeployers(); fetchDeployers();
}, []); }, []);
@ -379,7 +425,10 @@ const Configure = () => {
<Heading as="h4" className="md:text-lg font-medium"> <Heading as="h4" className="md:text-lg font-medium">
Configure deployment Configure deployment
</Heading> </Heading>
<Heading as="h5" className="text-sm font-sans text-elements-low-em"> <Heading
as="h5"
className="text-sm font-sans text-elements-low-em dark:text-foreground-secondaryu"
>
The app can be deployed by setting the deployer LRN for a single The app can be deployed by setting the deployer LRN for a single
deployment or by creating a deployer auction for multiple deployment or by creating a deployer auction for multiple
deployments deployments
@ -400,6 +449,7 @@ const Configure = () => {
onChange={(event) => onChange(event.target.value)} onChange={(event) => onChange(event.target.value)}
size="small" size="small"
displayEmpty displayEmpty
className="dark:bg-overlay2 dark:text-foreground"
sx={{ sx={{
fontFamily: 'inherit', fontFamily: 'inherit',
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
@ -419,7 +469,7 @@ const Configure = () => {
<div className="flex flex-col justify-start gap-4 mb-6"> <div className="flex flex-col justify-start gap-4 mb-6">
<Heading <Heading
as="h5" as="h5"
className="text-sm font-sans text-elements-low-em" className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
> >
The app will be deployed by the configured deployer The app will be deployed by the configured deployer
</Heading> </Heading>
@ -429,7 +479,7 @@ const Configure = () => {
rules={{ required: true }} rules={{ required: true }}
render={({ field: { value, onChange }, fieldState }) => ( render={({ field: { value, onChange }, fieldState }) => (
<FormControl fullWidth error={Boolean(fieldState.error)}> <FormControl fullWidth error={Boolean(fieldState.error)}>
<span className="text-sm text-elements-high-em mb-4"> <span className="text-sm dark:text-foreground text-elements-high-em dark:text-foreground mb-4">
Select deployer LRN Select deployer LRN
</span> </span>
<Select <Select
@ -440,6 +490,7 @@ const Configure = () => {
}} }}
displayEmpty displayEmpty
size="small" size="small"
className="dark:bg-overlay2 dark:text-foreground"
> >
{deployers.map((deployer) => ( {deployers.map((deployer) => (
<MenuItem <MenuItem
@ -466,12 +517,12 @@ const Configure = () => {
<div className="flex flex-col justify-start gap-4 mb-6"> <div className="flex flex-col justify-start gap-4 mb-6">
<Heading <Heading
as="h5" as="h5"
className="text-sm font-sans text-elements-low-em" className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
> >
Set the number of deployers and maximum price for each Set the number of deployers and maximum price for each
deployment deployment
</Heading> </Heading>
<span className="text-sm text-elements-high-em"> <span className="text-sm text-elements-high-em dark:text-foreground">
Number of Deployers Number of Deployers
</span> </span>
<Controller <Controller
@ -488,7 +539,7 @@ const Configure = () => {
/> />
</div> </div>
<div className="flex flex-col justify-start gap-4 mb-6"> <div className="flex flex-col justify-start gap-4 mb-6">
<span className="text-sm text-elements-high-em"> <span className="text-sm text-elements-high-em dark:text-foreground">
Maximum Price (alnt) Maximum Price (alnt)
</span> </span>
<Controller <Controller
@ -506,7 +557,7 @@ const Configure = () => {
<Heading as="h4" className="md:text-lg font-medium mb-3"> <Heading as="h4" className="md:text-lg font-medium mb-3">
Environment Variables Environment Variables
</Heading> </Heading>
<div className="p-4 bg-slate-100 rounded-lg mb-6"> <div className="p-4 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6">
<EnvironmentVariablesForm /> <EnvironmentVariablesForm />
</div> </div>
@ -515,7 +566,7 @@ const Configure = () => {
<Button <Button
{...buttonSize} {...buttonSize}
type="submit" type="submit"
disabled={isLoading || !selectedDeployer || !selectedAccount} disabled={isLoading || !selectedDeployer}
rightIcon={ rightIcon={
isLoading ? ( isLoading ? (
<LoadingIcon className="animate-spin" /> <LoadingIcon className="animate-spin" />
@ -529,15 +580,17 @@ const Configure = () => {
</div> </div>
) : ( ) : (
<> <>
<Heading as="h4" className="md:text-lg font-medium mb-3"> <AccountsDropdown
Connect to your wallet accounts={accounts}
</Heading> onAccountChange={onAccountChange}
<ConnectWallet onAccountChange={onAccountChange} /> isDataReceived={isAccountsDataReceived}
{accounts && accounts?.length > 0 && ( />
{accounts.length > 0 && (
<div> <div>
<Button <Button
{...buttonSize} {...buttonSize}
type="submit" type="submit"
shape="default"
disabled={ disabled={
isLoading || isPaymentLoading || !selectedAccount isLoading || isPaymentLoading || !selectedAccount
} }
@ -563,6 +616,12 @@ const Configure = () => {
)} )}
</form> </form>
</FormProvider> </FormProvider>
<IFrameModal
setAccounts={setAccounts}
setIsDataReceived={setIsAccountsDataReceived}
isVisible={isFrameVisible}
/>
</div> </div>
</div> </div>
); );

View File

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

View File

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

View File

@ -36,7 +36,7 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
</div> </div>
)} )}
{status === DeployStatus.PROCESSING && ( {status === DeployStatus.PROCESSING && (
<LoaderIcon className="animate-spin text-elements-link" /> <LoaderIcon className="animate-spin text-elements-link dark:text-foreground" />
)} )}
</div> </div>
@ -44,7 +44,8 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
<span <span
className={cn( className={cn(
'text-left text-sm md:text-base', 'text-left text-sm md:text-base',
status === DeployStatus.PROCESSING && 'text-elements-link', status === DeployStatus.PROCESSING &&
'text-elements-link dark:text-foreground',
)} )}
> >
{title} {title}
@ -54,7 +55,10 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
{/* Timer */} {/* Timer */}
{status === DeployStatus.PROCESSING && ( {status === DeployStatus.PROCESSING && (
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<ClockOutlineIcon size={16} className="text-elements-low-em" /> <ClockOutlineIcon
size={16}
className="text-elements-low-em dark:text-foreground-secondary"
/>
<Stopwatch <Stopwatch
offsetTimestamp={setStopWatchOffset(startTime!)} offsetTimestamp={setStopWatchOffset(startTime!)}
isPaused={false} isPaused={false}

View File

@ -0,0 +1,88 @@
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,6 +1,8 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { SegmentedControls } from 'components/shared/SegmentedControls'; import { SegmentedControls } from 'components/shared/SegmentedControls';
import { useState } from 'react'; import { useState } from 'react';
import { useMediaQuery } from 'usehooks-ts';
import { import {
GithubIcon, GithubIcon,
LockIcon, LockIcon,
@ -8,7 +10,7 @@ import {
TemplateIconType, TemplateIconType,
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
import { relativeTimeISO } from 'utils/time'; import { relativeTimeISO } from 'utils/time';
import { useMediaQuery } from 'usehooks-ts'; import templates from 'assets/templates';
export const MockConnectGitCard = () => { export const MockConnectGitCard = () => {
const [segmentedControlsValue, setSegmentedControlsValue] = const [segmentedControlsValue, setSegmentedControlsValue] =
@ -46,29 +48,6 @@ 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(() => { const renderContent = useMemo(() => {
if (segmentedControlsValue === 'import') { if (segmentedControlsValue === 'import') {
return ( return (
@ -86,7 +65,7 @@ export const MockConnectGitCard = () => {
} }
return ( return (
<div className="grid grid-cols-1 lg:grid-cols-2 relative z-0"> <div className="grid grid-cols-1 lg:grid-cols-2 relative z-0">
{TEMPLATE_CONTENT.map((template, index) => ( {templates.map((template, index) => (
<MockTemplateCard key={index} {...template} /> <MockTemplateCard key={index} {...template} />
))} ))}
</div> </div>
@ -94,7 +73,7 @@ export const MockConnectGitCard = () => {
}, [segmentedControlsValue]); }, [segmentedControlsValue]);
return ( return (
<div className="relative bg-base-bg shadow-card rounded-2xl px-2 py-2 w-full max-w-[560px] flex flex-col gap-2"> <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">
{/* Content */} {/* Content */}
<SegmentedControls <SegmentedControls
value={segmentedControlsValue} value={segmentedControlsValue}
@ -106,7 +85,7 @@ export const MockConnectGitCard = () => {
{renderContent} {renderContent}
{/* Shade */} {/* Shade */}
<div className="pointer-events-none z-99 absolute inset-0 rounded-2xl bg-gradient-to-t from-white to-transparent" /> <div className="pointer-events-none z-99 absolute inset-0 rounded-2xl bg-gradient-to-t from-white dark:from-overlay to-transparent" />
</div> </div>
); );
}; };
@ -121,18 +100,18 @@ const MockProjectCard = ({
visibility?: string; visibility?: string;
}) => { }) => {
return ( 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 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 dark:hover:bg-background relative">
{/* Icon container */} {/* Icon container */}
<div className="w-10 h-10 bg-base-bg rounded-md justify-center items-center flex"> <div className="w-10 h-10 bg-base-bg dark:bg-background rounded-md justify-center items-center flex">
<GithubIcon /> <GithubIcon />
</div> </div>
{/* Content */} {/* Content */}
<div className="flex flex-1 gap-3 flex-wrap"> <div className="flex flex-1 gap-3 flex-wrap">
<div className="flex flex-col items-start gap-1"> <div className="flex flex-col items-start gap-1">
<p className="text-elements-high-em text-sm font-medium tracking-[-0.006em]"> <p className="text-elements-high-em text-sm dark:text-foreground font-medium tracking-[-0.006em]">
{full_name} {full_name}
</p> </p>
<p className="text-elements-low-em text-xs"> <p className="text-elements-low-em text-xs dark:text-foreground-secondary">
{updated_at && relativeTimeISO(updated_at)} {updated_at && relativeTimeISO(updated_at)}
</p> </p>
</div> </div>
@ -149,13 +128,13 @@ const MockProjectCard = ({
const MockTemplateCard = ({ icon, name }: { icon: string; name: string }) => { const MockTemplateCard = ({ icon, name }: { icon: string; name: string }) => {
return ( return (
<div className="flex items-center gap-3 px-3 py-3 hover:bg-base-bg-emphasized rounded-2xl group relative cursor-default"> <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">
{/* Icon */} {/* Icon */}
<div className="px-1 py-1 rounded-xl bg-base-bg border border-border-interactive/10 shadow-card-sm"> <div className="px-1 py-1 rounded-xl bg-base-bg dark:bg-background border border-border-interactive/10 shadow-card-sm">
<TemplateIcon type={icon as TemplateIconType} /> <TemplateIcon type={icon as TemplateIconType} />
</div> </div>
{/* Name */} {/* Name */}
<p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em"> <p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em dark:text-foreground">
{name} {name}
</p> </p>
</div> </div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -18,7 +18,6 @@ import { Button, Heading, Tag } from 'components/shared';
const WAIT_DURATION = 5000; const WAIT_DURATION = 5000;
const DIALOG_STYLE = { const DIALOG_STYLE = {
backgroundColor: 'rgba(0,0,0, .9)',
padding: '2em', padding: '2em',
borderRadius: '0.5em', borderRadius: '0.5em',
marginLeft: '0.5em', marginLeft: '0.5em',
@ -86,27 +85,27 @@ export const AuctionCard = ({ project }: { project: Project }) => {
return ( return (
<> <>
<div className="p-3 gap-2 rounded-xl border border-gray-200 transition-colors hover:bg-base-bg-alternate flex flex-col mt-8"> <div className="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="flex justify-between items-center"> <div className="flex justify-between items-center">
<Heading className="text-lg leading-6 font-medium"> <Heading className="text-lg leading-6 font-medium">
Auction details Auction details
</Heading> </Heading>
<Button onClick={handleOpenDialog} variant="tertiary" size="sm"> <Button onClick={handleOpenDialog} variant="tertiary" size="sm">
View details VIEW DETAILS
</Button> </Button>
</div> </div>
<div className="flex justify-between items-center mt-2"> <div className="flex justify-between items-center mt-2">
<span className="text-elements-high-em text-sm font-medium tracking-tight"> <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
Auction Id Auction Id
</span> </span>
<span className="text-elements-mid-em text-sm text-right"> <span className="text-elements-mid-em dark:text-foreground text-sm text-right">
{project.auctionId} {project.auctionId}
</span> </span>
</div> </div>
<div className="flex justify-between items-center mt-1"> <div className="flex justify-between items-center mt-1">
<span className="text-elements-high-em text-sm font-medium tracking-tight"> <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
Auction Status Auction Status
</span> </span>
<div className="ml-2">{renderAuctionStatus()}</div> <div className="ml-2">{renderAuctionStatus()}</div>
@ -116,17 +115,20 @@ export const AuctionCard = ({ project }: { project: Project }) => {
<> <>
{deployers?.length > 0 ? ( {deployers?.length > 0 ? (
<div> <div>
<span className="text-elements-high-em text-sm font-medium tracking-tight"> <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
Deployer LRNs Deployer LRNs
</span> </span>
{deployers.map((deployer, index) => ( {deployers.map((deployer, index) => (
<p key={index} className="text-elements-mid-em text-sm"> <p
key={index}
className="text-elements-mid-em dark:text-foreground text-sm"
>
{'\u2022'} {deployer.deployerLrn} {'\u2022'} {deployer.deployerLrn}
</p> </p>
))} ))}
<div className="flex justify-between items-center mt-1"> <div className="flex justify-between items-center mt-1">
<span className="text-elements-high-em text-sm font-medium tracking-tight"> <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
Deployer Funds Status Deployer Funds Status
</span> </span>
<div className="ml-2"> <div className="ml-2">
@ -141,7 +143,7 @@ export const AuctionCard = ({ project }: { project: Project }) => {
</div> </div>
) : ( ) : (
<div className="mt-3"> <div className="mt-3">
<span className="text-elements-high-em text-sm font-medium tracking-tight"> <span className="text-elements-high-em dark:text-foreground-secondary text-sm font-medium tracking-tight">
No winning deployers No winning deployers
</span> </span>
</div> </div>
@ -155,15 +157,24 @@ export const AuctionCard = ({ project }: { project: Project }) => {
onClose={handleCloseDialog} onClose={handleCloseDialog}
fullWidth fullWidth
maxWidth="md" maxWidth="md"
PaperProps={{
className: 'dark:bg-overlay2',
}}
> >
<DialogTitle>Auction Details</DialogTitle> <DialogTitle className="dark:text-foreground">
Auction Details
</DialogTitle>
<DialogContent style={DIALOG_STYLE}> <DialogContent style={DIALOG_STYLE}>
{auctionDetails && ( {auctionDetails && (
<pre>{JSON.stringify(auctionDetails, null, 2)}</pre> <pre className="dark:text-foreground-secondary">
{JSON.stringify(auctionDetails, null, 2)}
</pre>
)} )}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleCloseDialog}>Close</Button> <Button onClick={handleCloseDialog} shape="default">
CLOSE
</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</> </>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -11,7 +11,7 @@ export const GitIcon: React.FC<CustomIconProps> = (props) => {
> >
<path <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" 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="#158FFF" fill="#0000F4"
/> />
</CustomIcon> </CustomIcon>
); );

View File

@ -13,7 +13,7 @@ export const GithubIcon: React.FC<CustomIconProps> = (props) => {
fillRule="evenodd" fillRule="evenodd"
clipRule="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" 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="#0B1D2E" fill="#FBFBFB"
/> />
</CustomIcon> </CustomIcon>
); );

View File

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

View File

@ -1,7 +1,12 @@
import { tv, type VariantProps } from 'tailwind-variants'; import { tv, type VariantProps } from 'tailwind-variants';
export const headingTheme = tv({ export const headingTheme = tv({
base: ['text-elements-high-em', 'font-display', 'font-normal'], base: [
'text-elements-high-em',
'dark:text-foreground',
'font-display',
'font-normal',
],
}); });
export type HeadingVariants = VariantProps<typeof headingTheme>; 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', 'relative justify-center items-center gap-2.5 inline-flex',
'w-16 h-16 rounded-2xl shadow-inner', 'w-16 h-16 rounded-2xl shadow-inner',
'border border-b-[3px] border-border-interactive border-opacity-10', 'border border-b-[3px] border-border-interactive border-opacity-10',
'bg-controls-secondary', 'bg-background',
className, className,
)} )}
{...props} {...props}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -87,15 +87,25 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
value="" value=""
className="hidden lg:flex" className="hidden lg:flex"
> >
<a className="cursor-pointer" onClick={handleLogOut}> <a className="cursor-pointer font-mono" onClick={handleLogOut}>
Log Out LOG OUT
</a> </a>
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger icon={<QuestionMarkRoundIcon />} value=""> <Tabs.Trigger icon={<QuestionMarkRoundIcon />} value="">
<a className="cursor-pointer">Documentation</a> <a
className="cursor-pointer font-mono"
href="https://store.laconic.com/pages/instruction-faq"
>
DOCUMENTATION
</a>
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger icon={<LifeBuoyIcon />} value=""> <Tabs.Trigger icon={<LifeBuoyIcon />} value="">
<a className="cursor-pointer">Support</a> <a
className="cursor-pointer font-mono"
href="https://discord.com/invite/ukhbBemyxY"
>
SUPPORT
</a>
</Tabs.Trigger> </Tabs.Trigger>
</Tabs.List> </Tabs.List>
</Tabs> </Tabs>

View File

@ -45,6 +45,7 @@ export const switchTheme = tv({
true: { true: {
switch: [ switch: [
'bg-controls-primary', 'bg-controls-primary',
'dark:bg-primary',
'hover:bg-controls-primary-hovered', 'hover:bg-controls-primary-hovered',
'focus-visible:bg-controls-primary-hovered', 'focus-visible:bg-controls-primary-hovered',
], ],

View File

@ -8,6 +8,7 @@ export const tableTheme = tv({
'border-b', 'border-b',
'border-sky-950/opacity-5', 'border-sky-950/opacity-5',
'text-sky-950', 'text-sky-950',
'dark:text-foreground-secondary',
'text-sm', 'text-sm',
'font-medium', 'font-medium',
'leading-tight', 'leading-tight',
@ -17,6 +18,7 @@ export const tableTheme = tv({
columnHeaderCell: [ columnHeaderCell: [
'p-4', 'p-4',
'text-sky-950', 'text-sky-950',
'dark:text-foreground-secondary',
'text-sm', 'text-sm',
'font-medium', 'font-medium',
'uppercase', 'uppercase',
@ -26,6 +28,7 @@ export const tableTheme = tv({
rowHeaderCell: [ rowHeaderCell: [
'p-4', 'p-4',
'text-slate-600', 'text-slate-600',
'dark:text-foreground',
'text-sm', 'text-sm',
'font-normal', 'font-normal',
'leading-tight', 'leading-tight',
@ -36,6 +39,7 @@ export const tableTheme = tv({
'whitespace-nowrap', 'whitespace-nowrap',
'text-sm', 'text-sm',
'text-slate-600', 'text-slate-600',
'dark:text-foreground',
'font-normal', 'font-normal',
'text-left', 'text-left',
], ],

View File

@ -11,14 +11,17 @@ export const tabsTheme = tv({
'cursor-default', 'cursor-default',
'select-none', 'select-none',
'text-elements-low-em', 'text-elements-low-em',
'dark:text-foreground',
'border-b-2', 'border-b-2',
'border-transparent', 'border-transparent',
'hover:border-border-interactive/10', 'hover:border-border-interactive/10',
'hover:text-elements-mid-em', 'hover:text-elements-mid-em',
'dark:hover:text-foreground-secondary',
'focus-within:border-border-interactive/10', 'focus-within:border-border-interactive/10',
'data-[state=active]:font-medium', 'data-[state=active]:font-medium',
'data-[state=active]:text-elements-high-em', 'data-[state=active]:text-elements-high-em',
'data-[state=active]:border-elements-high-em', 'data-[state=active]:border-elements-high-em',
'data-[state=active]:border-primary',
// Vertical // Vertical
'data-[orientation=vertical]:px-3', 'data-[orientation=vertical]:px-3',
'data-[orientation=vertical]:py-3', 'data-[orientation=vertical]:py-3',
@ -27,6 +30,7 @@ export const tabsTheme = tv({
'data-[orientation=vertical]:rounded-xl', 'data-[orientation=vertical]:rounded-xl',
'data-[orientation=vertical]:border-transparent', 'data-[orientation=vertical]:border-transparent',
'data-[orientation=vertical]:hover:bg-base-bg-emphasized', 'data-[orientation=vertical]:hover:bg-base-bg-emphasized',
'data-[orientation=vertical]:dark:hover:bg-overlay2',
'data-[orientation=vertical]:hover:text-elements-mid-em', 'data-[orientation=vertical]:hover:text-elements-mid-em',
'data-[orientation=vertical]:hover:border-transparent', 'data-[orientation=vertical]:hover:border-transparent',
'data-[orientation=vertical]:focus-visible:border-transparent', 'data-[orientation=vertical]:focus-visible:border-transparent',
@ -34,13 +38,17 @@ export const tabsTheme = tv({
'data-[orientation=vertical]:focus-visible:text-elements-mid-em', 'data-[orientation=vertical]:focus-visible:text-elements-mid-em',
'data-[orientation=vertical]:data-[state=active]:font-normal', 'data-[orientation=vertical]:data-[state=active]:font-normal',
'data-[orientation=vertical]:data-[state=active]:bg-base-bg-emphasized', 'data-[orientation=vertical]:data-[state=active]:bg-base-bg-emphasized',
'data-[orientation=vertical]:data-[state=active]:dark:bg-overlay',
'data-[orientation=vertical]:data-[state=active]:border-transparent', 'data-[orientation=vertical]:data-[state=active]:border-transparent',
'data-[orientation=vertical]:data-[state=active]:hover:text-elements-high-em', 'data-[orientation=vertical]:data-[state=active]:hover:text-elements-high-em',
'data-[orientation=vertical]:data-[state=active]:focus-visible:text-elements-high-em', 'data-[orientation=vertical]:data-[state=active]:focus-visible:text-elements-high-em',
// TODO: demo additions // TODO: demo additions
'data-[orientation=vertical]:data-[state=active]:bg-snowball-200', 'data-[orientation=vertical]:data-[state=active]:bg-snowball-200',
'data-[orientation=vertical]:data-[state=active]:dark:bg-overlay',
'data-[orientation=vertical]:data-[state=active]:hover:bg-snowball-200', 'data-[orientation=vertical]:data-[state=active]:hover:bg-snowball-200',
'data-[orientation=vertical]:data-[state=active]:dark:hover:bg-overlay2',
'data-[orientation=vertical]:data-[state=active]:text-snowball-800', 'data-[orientation=vertical]:data-[state=active]:text-snowball-800',
'data-[orientation=vertical]:data-[state=active]:dark:text-foreground',
'data-[orientation=vertical]:data-[state=active]:hover:text-snowball-800', 'data-[orientation=vertical]:data-[state=active]:hover:text-snowball-800',
'data-[orientation=vertical]:data-[state=active]:shadow-[0px_1px_0px_0px_rgba(8,47,86,0.06)_inset]', 'data-[orientation=vertical]:data-[state=active]:shadow-[0px_1px_0px_0px_rgba(8,47,86,0.06)_inset]',
], ],

View File

@ -6,8 +6,10 @@ export const tooltipTheme = tv({
'z-tooltip', 'z-tooltip',
'rounded-md', 'rounded-md',
'bg-surface-high-contrast', 'bg-surface-high-contrast',
'dark:bg-overlay3',
'p-2', 'p-2',
'text-elements-on-high-contrast', 'text-elements-on-high-contrast',
'dark:text-foreground-secondary',
], ],
arrow: ['fill-surface-high-contrast'], arrow: ['fill-surface-high-contrast'],
}, },

View File

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

View File

@ -17,7 +17,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { VITE_WALLET_CONNECT_ID, BASE_URL } from 'utils/constants'; import { VITE_WALLET_CONNECT_ID, BASE_URL } from 'utils/constants';
if (!VITE_WALLET_CONNECT_ID) { if (!VITE_WALLET_CONNECT_ID) {
throw new Error('Error: REACT_APP_WALLET_CONNECT_ID env config is not set'); throw new Error('Error: VITE_WALLET_CONNECT_ID env config is not set');
} }
assert(BASE_URL, 'VITE_SERVER_URL is not set in env'); assert(BASE_URL, 'VITE_SERVER_URL is not set in env');

View File

@ -144,6 +144,7 @@
@layer utilities { @layer utilities {
.focus-ring { .focus-ring {
@apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none; @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
@apply focus-visible:ring-[3px] dark:focus-visible:ring-primary focus-visible:ring-offset-1 dark:focus-visible:ring-offset-primary focus-visible:outline-none;
} }
@keyframes dialog-overlay-show { @keyframes dialog-overlay-show {

View File

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

View File

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

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