Refactor: AssignDomainDialog using Modal component

2024-06-20 04:30:54 +00:00
43 changed files with 338 additions and 642 deletions
@@ -6,7 +6,4 @@ yarn-error.log

 packages/backend/environments/local.toml
 packages/backend/dev/
-packages/frontend/dist/
-
-# ignore all .DS_Store files
-**/.DS_Store
+packages/frontend/dist/
@@ -1,23 +1,220 @@
 # snowballtools-base

-This is a [yarn workspace](https://yarnpkg.com/features/workspaces) monorepo for the dashboard.
+## Setup

-## Getting Started
+- Clone the `snowballtools-base` repo

-### Install dependencies
+  ```bash
+  git clone git@github.com:snowball-tools/snowballtools-base.git
+  cd snowballtools-base
+  ```

-In the root of the project, run:
+- Install dependencies in root

-```zsh
-yarn
-```
+  ```bash
+  yarn
+  ```

-### Build backend
+- Build packages

-```zsh
-yarn build --ignore-frontend
-```
+  ```bash
+  yarn build --ignore frontend
+  ```

-### Environment variables, running the development server, and deployment
+Let us assume the following domains for backend and frontend
+  - Backend server: `api.snowballtools.com`
+  - Frontend app: `dashboard.snowballtools.com`

-Follow the instructions in the README.md files of the [backend](packages/backend/README.md) and [frontend](packages/frontend/README.md) packages.
+- Configuration Files
+
+  - For Backend:
+  
+    ```bash
+    cp packages/backend/environments/local.toml.example packages/backend/environments/local.toml
+    ```
+
+    - Production
+      
+      - Update the following in backend [config file](packages/backend/environments/local.toml)
+        
+        ```toml
+        [server]
+          ...
+          [server.session]
+            # Secret should be changed to a different random string
+            secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7sidnc382"
+            # Set URL of the frontend app
+            appOriginUrl = "https://dashboard.snowballtools.com"
+            # Set to true for session cookies to work behind proxy
+            trustProxy = true
+            # Set empty domain when using secure connection
+            domain = ""
+        ```
+      
+      - Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
+        - [OAuth App Creation](https://github.com/organizations/<org>/settings/applications/new)
+          - Homepage URL: `https://dashboard.snowballtools.com`
+          - Authorization callback URL: `https://dashboard.snowballtools.com/organization/projects/create`
+          - Generate a new client secret after app is created
+      
+      - Set `gitHub.webhookUrl` in backend [config file](packages/backend/environments/local.toml)
+      
+        ```toml
+        [gitHub]
+          webhookUrl = "https://api.snowballtools.com"
+        ```
+      
+      - Let us assume domain for Laconicd to be `api.laconic.com` and set the following in backend [config file](packages/backend/environments/local.toml)
+      
+        ```toml
+        [registryConfig]
+          fetchDeploymentRecordDelay = 5000
+          # Use actual port for REST endpoint
+          restEndpoint = "http://api.laconic.com:1317"
+          # Use actual port for GQL endpoint
+          gqlEndpoint = "http://api.laconic.com:9473/api"
+          # Set private key of account to be used in Laconicd
+          privateKey = "0wtu92cd4f1y791ezpjwgzzazni4dmd3q3mzqc3t6i6r9v06ji784tey6hwmnn69"
+          # Set Bond ID to be used for publishing records
+          bondId = "8xk8c2pb61kajwixpm223zvptr2x2ncajq0vd998p6aqhvqqep2reu6pik245epf"
+          chainId = "laconic_9000-1"
+          # Set authority that is existing in the chain
+          authority = "laconic"
+          [registryConfig.fee]
+            amount = "200000"
+            denom = "aphoton"
+            gas = "750000"
+        ```
+
+    - Development
+    
+      - Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
+        - [OAuth App Creation](https://github.com/organizations/<org>/settings/applications/new)
+          - Homepage URL: `http://localhost:3000`
+          - Authorization callback URL: `http://localhost:3000/organization/projects/create`
+          - Generate a new client secret after app is created
+      
+      - Setup Laconicd
+        - Run the laconicd stack following this [doc](https://git.vdb.to/cerc-io/stack-orchestrator/src/branch/main/docs/laconicd-with-console.md)
+        - Get the private key and set `registryConfig.privateKey` in backend [config file](packages/backend/environments/local.toml)
+      
+          ```bash
+          laconic-so deployment --dir laconic-loaded-deployment exec laconicd "laconicd keys export mykey --unarmored-hex --unsafe"
+          # WARNING: The private key will be exported as an unarmored hexadecimal string. USE AT YOUR OWN RISK. Continue? [y/N]: y
+          # 754cca7b4b729a99d156913aea95366411d072856666e95ba09ef6c664357d81
+          ```
+
+        - Set authority in `registryConfig.authority` in backend [config file](packages/backend/environments/local.toml)
+
+        - Run the script to create bond, reserve the authority and set authority bond
+      
+          ```bash
+          yarn test:registry:init
+          # snowball:initialize-registry bondId: 6af0ab81973b93d3511ae79841756fb5da3fd2f70ea1279e81fae7c9b19af6c4 +0ms
+          ```
+      
+          - Get the bond id and set `registryConfig.bondId` in backend [config file](packages/backend/environments/local.toml)
+      
+      - Setup ngrok for GitHub webhooks
+        - [ngrok getting started](https://ngrok.com/docs/getting-started/)
+        - Start ngrok and point to backend server endpoint
+      
+          ```bash
+          ngrok http http://localhost:8000
+          ```
+      
+        - Look for the forwarding URL in ngrok
+      
+          ```bash
+          Forwarding                    https://19c1-61-95-158-116.ngrok-free.app -> http://localhost:8000
+          ```
+      
+        - Set `gitHub.webhookUrl` in backend [config file](packages/backend/environments/local.toml)
+      
+          ```toml
+          [gitHub]
+            webhookUrl = "https://19c1-61-95-158-116.ngrok-free.app"
+          ```
+
+  - For Frontend:
+  
+    ```bash
+    cp packages/frontend/.env.example packages/frontend/.env
+    ```
+
+    - Copy the GitHub OAuth app client ID from previous steps and set it in frontend [.env](packages/frontend/.env) file
+
+      ```env
+      VITE_GITHUB_CLIENT_ID = <CLIENT_ID>
+      ```
+    
+    - Set `VITE_GITHUB_PWA_TEMPLATE_REPO` and `VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO` in [.env](packages/frontend/.env) file
+    
+      ```env
+      VITE_GITHUB_PWA_TEMPLATE_REPO = 'cerc-io/test-progressive-web-app'   # Set actual owner/name of the template repo that will be used for creating new repo
+      VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'cerc-io/image-upload-pwa-example'  # Set actual owner/name of the template repo that will be used for creating new repo
+      ```
+
+    - Production
+    
+      - Set the following values in [.env](packages/frontend/.env) file
+      
+        ```env
+        VITE_SERVER_URL = 'https://api.snowballtools.com'   # Backend server endpoint
+        ```
+      
+      - Sign in to [wallet connect](https://cloud.walletconnect.com/sign-in) to create a project ID
+        - Create a project and add information to use wallet connect SDK
+          - Add project name and select project type as `App`
+          - Set project home page URL to `https://dashboard.snowballtools.com`
+        - On creation of project, use the `Project ID` and set it in `VITE_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file
+      
+        ```env
+        VITE_WALLET_CONNECT_ID = <PROJECT_ID>
+        ```
+      
+      - Build the React application
+      
+        ```bash
+        yarn build
+        ```
+      
+      - Use a web server for hosting static built files
+      
+        ```bash
+        python3 -m http.server -d build 3000
+        ```
+
+    - Development
+    
+      - Copy the graphQL endpoint from terminal and add the endpoint in the [.env](packages/frontend/.env) file present in `packages/frontend`
+      
+        ```env
+        VITE_SERVER_URL = 'http://localhost:8000'
+        ```
+      
+      - Sign in to [wallet connect](https://cloud.walletconnect.com/sign-in) to create a project ID.
+        - Create a project and add information to use wallet connect SDK
+          - Add project name and select project type as `App`
+          - Project home page URL is not required to be set
+        - On creation of project, use the `Project ID` and set it in `VITE_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file
+      
+        ```env
+        VITE_WALLET_CONNECT_ID = <Project_ID>
+        ```
+      
+      - The React application will be running in `http://localhost:3000/`
+
+## Development
+
+- Start the backend server
+
+  ```bash
+  yarn start:backend
+  ```
+
+- Start the frontend
+
+  ```bash
+  yarn start
+  ```
@@ -1,76 +1 @@
-# backend
-
-This backend is a [node.js](https://nodejs.org/) [express.js](https://expressjs.com/) [apollo server](https://www.apollographql.com/docs/apollo-server/) project in a [yarn workspace](https://yarnpkg.com/features/workspaces).
-
-## Getting Started
-
-### Install dependencies
-
-In the root of the project, run:
-
-```zsh
-yarn
-```
-
-### Build backend
-
-```zsh
-yarn build --ignore-frontend
-```
-
-### Environment variables
-
-#### Local
-
-Copy the `envionments/local.toml.example` file to `envionments/local.toml`:
-
-```zsh
-cp envionments/local.toml.example envionments/local.toml
-```
-
-#### Staging environment variables
-
-In the deployment repository, update staging [staging/configmaps/config/prod.toml](https://git.vdb.to/cerc-io/snowballtools-base-api-deployments/src/commit/318c2bc09f334dca79c3501838512749f9431bf1/deployments/staging/configmaps/config/prod.toml)
-
-#### Production environment variables
-
-In the deployment repository, update production [production/configmaps/config/prod.toml](https://git.vdb.to/cerc-io/snowballtools-base-api-deployments/src/commit/318c2bc09f334dca79c3501838512749f9431bf1/deployments/production/configmaps/config/prod.toml)
-
-### Run development server
-
-```zsh
-yarn start
-```
-
-## Deployment
-
-Clone the deployer repository:
-
-```zsh
-git clone git@git.vdb.to:cerc-io/snowballtools-base-api-deployments.git
-```
-
-### Staging
-
-```zsh
-echo trigger >> .gitea/workflows/triggers/staging-deploy
-git commit -a -m "Deploy v0.0.8"  # replace with version number
-git push
-```
-
-### Production
-
-```zsh
-echo trigger >> .gitea/workflows/triggers/production-deploy
-git commit -a -m "Deploy v0.0.8" # replace with version number
-git push
-```
-
-### Deployment status
-
-Dumb for now
-
- [Staging](https://snowballtools-base-api.staging.apps.snowballtools.com/staging/version)
- [Production](https://snowballtools-base-api.apps.snowballtools.com/staging/version)
-
-Update version number manually in [routes/staging.ts](/packages/backend/src/routes/staging.ts)
+# Backend for Snowball Tools
@@ -5,19 +5,6 @@ import { authenticateUser, createUser } from '../turnkey-backend';

 const router = Router();

-//
-// Access Code
-//
-router.post('/accesscode', async (req, res) => {
-  console.log('Access Code', req.body);
-  const { accesscode } = req.body;
-  if (accesscode === '44444') {
-    return res.send({ isValid: true });
-  } else {
-    return res.sendStatus(204);
-  }
-});
-
 //
 // Turnkey
 //
@@ -3,7 +3,7 @@ import { Router } from 'express';
 const router = Router();

 router.get('/version', async (req, res) => {
-  return res.send({ version: '0.0.8' });
+  return res.send({ version: '0.0.6' });
 });

 export default router;
@@ -114,7 +114,7 @@ export const createAndStartServer = async (

  app.use((err: any, req: any, res: any, next: any) => {
    console.error(err);
-    res.status(500).json({ error: err.message });
+    res.status(500).json({ error: 'Internal Server Error' });
  });

  httpServer.listen(port, host, () => {
@@ -1,11 +1,9 @@
 # deployer

 - Install dependencies
-
  ```bash
  yarn
  ```
-
  ```bash
  brew install jq # if you do not have jq installed already
  ```
@@ -14,13 +12,13 @@

  - To deploy frontend app to `dashboard.staging.apps.snowballtools.com`

-    ```bash
+    ```
    ./deploy-frontend.staging.sh
    ```
  
  - To deploy frontend app to `dashboard.apps.snowballtools.com`

-    ```bash
+    ```
    ./deploy-frontend.sh
    ```

@@ -29,7 +27,6 @@
 ## Notes

 - Any config env can be updated in [records/application-deployment-request.yml](records/application-deployment-request.yml)
-
  ```yml
  record:
    ...
@@ -38,7 +35,6 @@
        LACONIC_HOSTED_CONFIG_app_server_url: https://snowballtools-base-api-001.apps.snowballtools.com
        ...
  ```
-
  - On changing `LACONIC_HOSTED_CONFIG_app_github_clientid`, the GitHub client ID and secret need to be changed in backend config too

 ## Troubleshoot
@@ -48,7 +44,6 @@

 - If deployment fails due to low bond balance
  - Check balances
-
    ```bash
    # Account balance
    yarn laconic cns account get
@@ -56,9 +51,7 @@
    # Bond balance
    yarn laconic cns bond get --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32
    ```
-
  - Command to refill bond
-
    ```bash
    yarn laconic cns bond refill --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32 --type aphoton --quantity 10000000
    ```
@@ -26,7 +26,7 @@ if [ -z "$NEW_APPLICATION_VERSION" ] || [ "1" == "$NEW_APPLICATION_VERSION" ]; t
 fi

 # Generate application-deployment-request.yml
-cat >./records/application-deployment-request.yml <<EOF
+cat > ./records/application-deployment-request.yml <<EOF
 record:
  type: ApplicationDeploymentRequest
  version: '1.0.0'
@@ -37,9 +37,9 @@ record:
    env:
      LACONIC_HOSTED_CONFIG_server_url: https://snowballtools-base-api-001.apps.snowballtools.com
      LACONIC_HOSTED_CONFIG_github_clientid: b7c63b235ca1dd5639ab
-      LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_github_templaterepo: snowball-tools-platform/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_pwa_templaterepo: snowball-tools-platform/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools-platform/image-upload-pwa-example
      LACONIC_HOSTED_CONFIG_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
  meta:
    note: Added by Snowball @ $CURRENT_DATE_TIME
@@ -48,7 +48,7 @@ record:
 EOF

 # Generate application-record.yml with incremented version
-cat >./records/application-record.yml <<EOF
+cat > ./records/application-record.yml <<EOF
 record:
  type: ApplicationRecord
  version: $NEW_APPLICATION_VERSION
@@ -26,7 +26,7 @@ if [ -z "$NEW_APPLICATION_VERSION" ] || [ "1" == "$NEW_APPLICATION_VERSION" ]; t
 fi

 # Generate application-deployment-request.yml
-cat >./staging-records/application-deployment-request.yml <<EOF
+cat > ./staging-records/application-deployment-request.yml <<EOF
 record:
  type: ApplicationDeploymentRequest
  version: '1.0.0'
@@ -36,16 +36,16 @@ record:
  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_clientid: 905c09553f527d2cdff5
      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_github_pwa_templaterepo: snowball-tools/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools-platform/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_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
@@ -54,7 +54,7 @@ record:
 EOF

 # Generate application-record.yml with incremented version
-cat >./staging-records/application-record.yml <<EOF
+cat > ./staging-records/application-record.yml <<EOF
 record:
  type: ApplicationRecord
  version: $NEW_APPLICATION_VERSION
@@ -1,6 +1,6 @@
 record:
  type: ApplicationDeploymentRequest
-  version: "1.0.0"
+  version: '1.0.0'
  name: snowballtools-base-frontend@0.1.8
  application: crn://snowballtools/applications/snowballtools-base-frontend@0.1.8
  dns: dashboard
@@ -8,9 +8,9 @@ record:
    env:
      LACONIC_HOSTED_CONFIG_app_server_url: https://snowballtools-base-api-001.apps.snowballtools.com
      LACONIC_HOSTED_CONFIG_app_github_clientid: b7c63b235ca1dd5639ab
-      LACONIC_HOSTED_CONFIG_app_github_templaterepo: snowball-tools/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_app_github_pwa_templaterepo: snowball-tools/test-progressive-web-app
-      LACONIC_HOSTED_CONFIG_app_github_image_upload_templaterepo: snowball-tools/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_app_github_templaterepo: snowball-tools-platform/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_app_github_pwa_templaterepo: snowball-tools-platform/test-progressive-web-app
+      LACONIC_HOSTED_CONFIG_app_github_image_upload_templaterepo: snowball-tools-platform/image-upload-pwa-example
      LACONIC_HOSTED_CONFIG_app_wallet_connect_id: eda9ba18042a5ea500f358194611ece2
  meta:
    note: Added by Snowball @ Thu Apr  4 14:49:41 UTC 2024
@@ -7,18 +7,18 @@ record:
  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_clientid: 905c09553f527d2cdff5
      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_github_pwa_templaterepo: snowball-tools/image-upload-pwa-example
+      LACONIC_HOSTED_CONFIG_github_image_upload_templaterepo: snowball-tools-platform/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_passkey_wallet_rpid: localhost
+      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 @ Sat Jun 22 02:49:45 UTC 2024
+    note: Added by Snowball @ Tuesday 21 May 2024 06:17:23 AM UTC
    repository: "https://git.vdb.to/cerc-io/snowballtools-base"
-    repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601
+    repository_ref: 8488cfab8353321ed05c4234bf1b914c9ad3aa99
@@ -1,7 +1,7 @@
 record:
  type: ApplicationRecord
-  version: 0.0.1
-  repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601
+  version: 0.0.2
+  repository_ref: 8488cfab8353321ed05c4234bf1b914c9ad3aa99
  repository: ["https://git.vdb.to/cerc-io/snowballtools-base"]
  app_type: webapp
  name: staging-snowballtools-base-frontend
@@ -2,7 +2,7 @@

 Check if the live web app deployer is in a working state

- Web app repo used: <https://github.com/snowball-tools/test-progressive-web-app> (main branch)
+- Web app repo used: https://github.com/snowball-tools-platform/test-progressive-web-app (main branch)
 - Config used: [../config.yml](../config.yml)
 - The script [test-webapp-deployment-undeployment.sh](./test-webapp-deployment-undeployment.sh) performs the following:
  - Create / update [`ApplicationRecord`](./records/application-record.yml) and [`ApplicationDeploymentRequest`](./records/application-deployment-request.yml) records with latest meta data from the repo
@@ -1,6 +1,6 @@
 record:
  type: ApplicationDeploymentRequest
-  version: "1.0.0"
+  version: '1.0.0'
  name: deployment-test-app@0.1.24
  application: crn://snowballtools/applications/deployment-test-app@0.1.24
  dns: deployment-ci-test
@@ -11,5 +11,5 @@ record:
      CERC_WEBAPP_DEBUG: 0
  meta:
    note: Deployment test @ Thu 11 Apr 2024 07:29:19 AM UTC
-    repository: "https://github.com/snowball-tools/test-progressive-web-app"
+    repository: "https://github.com/snowball-tools-platform/test-progressive-web-app"
    repository_ref: 05819619487a0d2dbc5453b6d1ccff3044c0dd26
@@ -2,7 +2,7 @@ record:
  type: ApplicationRecord
  version: 0.0.1
  repository_ref: 05819619487a0d2dbc5453b6d1ccff3044c0dd26
-  repository: ["https://github.com/snowball-tools/test-progressive-web-app"]
+  repository: ["https://github.com/snowball-tools-platform/test-progressive-web-app"]
  app_type: webapp
  name: deployment-test-app
  app_version: 0.1.24
@@ -1,7 +1,7 @@
 #!/bin/bash

 # Repository URL
-REPO_URL="https://github.com/snowball-tools/test-progressive-web-app"
+REPO_URL="https://github.com/snowball-tools-platform/test-progressive-web-app"

 # Get the latest commit hash from the repository
 LATEST_HASH=$(git ls-remote $REPO_URL HEAD | awk '{print $1}')
@@ -32,7 +32,7 @@ fi
 # Generate application-record.yml with incremented version
 RECORD_FILE=packages/deployer/test/records/application-record.yml

-cat >$RECORD_FILE <<EOF
+cat > $RECORD_FILE <<EOF
 record:
  type: ApplicationRecord
  version: $NEW_APPLICATION_VERSION
@@ -46,7 +46,7 @@ EOF
 # Generate application-deployment-request.yml
 REQUEST_RECORD_FILE=packages/deployer/test/records/application-deployment-request.yml

-cat >$REQUEST_RECORD_FILE <<EOF
+cat > $REQUEST_RECORD_FILE <<EOF
 record:
  type: ApplicationDeploymentRequest
  version: '1.0.0'
@@ -115,7 +115,7 @@ while true; do
    else
      echo "ApplicationDeploymentRecord not found, retrying in $RETRY_INTERVAL sec..."
      sleep $RETRY_INTERVAL
-      retry_count=$((retry_count + 1))
+      retry_count=$((retry_count+1))
    fi
  else
    echo "ApplicationDeploymentRecord found"
@@ -154,7 +154,7 @@ while true; do
    else
      echo "Deployment URL $fetched_url is not active, received code $url_response, retrying in $retry_interval sec..."
      sleep $retry_interval
-      retry_count=$((retry_count + 1))
+      retry_count=$((retry_count+1))
    fi
  fi
 done
@@ -162,7 +162,7 @@ done
 # Generate application-deployment-removal-request.yml
 REMOVAL_REQUEST_RECORD_FILE=packages/deployer/test/records/application-deployment-removal-request.yml

-cat >$REMOVAL_REQUEST_RECORD_FILE <<EOF
+cat > $REMOVAL_REQUEST_RECORD_FILE <<EOF
 record:
  deployment: $DEPLOYMENT_RECORD_ID
  type: ApplicationDeploymentRemovalRequest
@@ -190,7 +190,7 @@ while true; do
    else
      echo "ApplicationDeploymentRemovalRecord not found, retrying in $RETRY_INTERVAL sec..."
      sleep $RETRY_INTERVAL
-      retry_count=$((retry_count + 1))
+      retry_count=$((retry_count+1))
    fi
  else
    echo "ApplicationDeploymentRemovalRecord found"
@@ -217,7 +217,7 @@ while true; do
    else
      echo "Deployment URL $fetched_url is still active, received code $url_response, retrying in $retry_interval sec..."
      sleep $retry_interval
-      retry_count=$((retry_count + 1))
+      retry_count=$((retry_count+1))
    fi
  fi
 done
@@ -14,4 +14,4 @@ VITE_BUGSNAG_API_KEY=

 VITE_PASSKEY_WALLET_RPID=
 VITE_TURNKEY_API_BASE_URL=
-VITE_TURNKEY_ORGANIZATION_ID=
+VITE_TURNKEY_ORGANIZATION_ID=
@@ -9,7 +9,6 @@ import { join, dirname } from 'path';
 function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')));
 }
-
 const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
@@ -27,7 +26,6 @@ const config: StorybookConfig = {
  docs: {
    autodocs: 'tag',
  },
-  staticDirs: ['../public'],
 };

 export default config;
@@ -1,63 +1,30 @@
-# frontend
+# React + TypeScript + Vite

-This is a [vite](https://vitejs.dev/) [react](https://reactjs.org/) [nextjs](https://nextjs.org/) project in a [yarn workspace](https://yarnpkg.com/features/workspaces).
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

-## Getting Started
+Currently, two official plugins are available:

-### Install dependencies
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

-In the root of the project, run:
+## Expanding the ESLint configuration

-```zsh
-yarn
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+};
 ```

-### Build backend
-
-```zsh
-yarn build --ignore-frontend
-```
-
-### Environment variables
-
-#### Local
-
-Copy the `.env.example` file to `.env`:
-
-```zsh
-cp .env.example .env
-```
-
-#### Staging environment variables
-
-Change in [deployer/deploy-frontend.staging.sh](/packages/deployer/deploy-frontend.staging.sh)
-
-#### Production environment variables
-
-Change in [deployer/deploy-frontend.sh](/packages/deployer/deploy-frontend.sh)
-
-### Run development server
-
-```zsh
-yarn dev
-```
-
-## Deployment
-
-From the root of the project, run:
-
-### Staging
-
-```zsh
-cd packages/deployer && ./deploy-frontend.staging.sh
-```
-
-### Production
-
-```zsh
-cd packages/deployer && ./deploy-frontend.sh
-```
-
-### Deployment status
-
-Check the status of the deployment [here](https://webapp-deployer.apps.snowballtools.com)
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';

 import Projects from './pages/org-slug';
@@ -11,8 +10,8 @@ import ProjectSearchLayout from './layouts/ProjectSearch';
 import Index from './pages';
 import AuthPage from './pages/AuthPage';
 import { DashboardLayout } from './pages/org-slug/layout';
+import { useEffect } from 'react';
 import Web3Provider from 'context/Web3Provider';
-import { baseUrl } from 'utils/constants';

 const router = createBrowserRouter([
  {
@@ -60,7 +59,7 @@ function App() {
  // Hacky way of checking session
  // TODO: Handle redirect backs
  useEffect(() => {
-    fetch(`${baseUrl}/auth/session`, {
+    fetch(`${import.meta.env.VITE_SERVER_URL}/auth/session`, {
      credentials: 'include',
    }).then((res) => {
      if (res.status !== 200) {
@@ -1,21 +1,16 @@
-import {
-  VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO,
-  VITE_GITHUB_PWA_TEMPLATE_REPO,
-} from 'utils/constants';
-
 export default [
  {
    id: '1',
    name: 'Progressive Web App (PWA)',
    icon: 'pwa',
-    repoFullName: `${VITE_GITHUB_PWA_TEMPLATE_REPO}`,
+    repoFullName: `${import.meta.env.VITE_GITHUB_PWA_TEMPLATE_REPO}`,
    isComingSoon: false,
  },
  {
    id: '2',
    name: 'Image Upload PWA',
    icon: 'pwa',
-    repoFullName: `${VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
+    repoFullName: `${import.meta.env.VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
    isComingSoon: false,
  },
  {
@@ -14,10 +14,11 @@ import { useToast } from '../../shared/Toast';
 import { IconWithFrame } from '../../shared/IconWithFrame';
 import { Heading } from '../../shared/Heading';
 import { MockConnectGitCard } from './MockConnectGitCard';
-import { VITE_GITHUB_CLIENT_ID } from 'utils/constants';

 const SCOPES = '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=${
+  import.meta.env.VITE_GITHUB_CLIENT_ID
+}&scope=${encodeURIComponent(SCOPES)}`;

 interface ConnectAccountInterface {
  onAuth: (token: string) => void;
@@ -1,12 +1,5 @@
-import { useState, ComponentPropsWithRef } from 'react';
-
-import {
-  Menu,
-  MenuHandler,
-  MenuItem,
-  MenuList,
-} from '@snowballtools/material-tailwind-react-fork';
-
+import { useState } from 'react';
+import toast from 'react-hot-toast';
 import { Deployment, Domain, Environment, Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
 import {
@@ -18,11 +11,17 @@ import {
  UndoIcon,
  CrossCircleIcon,
 } from 'components/shared/CustomIcon';
+import {
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+} from '@snowballtools/material-tailwind-react-fork';
+import { ComponentPropsWithRef } from 'react';
 import AssignDomainDialog from './AssignDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
 import { cn } from 'utils/classnames';
 import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
-import { useToast } from 'components/shared/Toast';

 interface DeploymentMenuProps extends ComponentPropsWithRef<'div'> {
  deployment: Deployment;
@@ -42,7 +41,6 @@ export const DeploymentMenu = ({
  ...props
 }: DeploymentMenuProps) => {
  const client = useGQLClient();
-  const { toast, dismiss } = useToast();

  const [changeToProduction, setChangeToProduction] = useState(false);
  const [redeployToProduction, setRedeployToProduction] = useState(false);
@@ -53,19 +51,9 @@ export const DeploymentMenu = ({
    const isUpdated = await client.updateDeploymentToProd(deployment.id);
    if (isUpdated) {
      await onUpdate();
-      toast({
-        id: 'deployment_changed_to_production',
-        title: 'Deployment changed to production',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Deployment changed to production');
    } else {
-      toast({
-        id: 'deployment_not_changed_to_production',
-        title: 'Error changing deployment to production',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to change deployment to production');
    }
  };

@@ -73,19 +61,9 @@ export const DeploymentMenu = ({
    const isRedeployed = await client.redeployToProd(deployment.id);
    if (isRedeployed) {
      await onUpdate();
-      toast({
-        id: 'redeployed_to_production',
-        title: 'Redeployed to production',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Redeployed to production');
    } else {
-      toast({
-        id: 'redeployed_to_production_failed',
-        title: 'Error redeploying to production',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to redeploy to production');
    }
  };

@@ -96,19 +74,9 @@ export const DeploymentMenu = ({
    );
    if (isRollbacked) {
      await onUpdate();
-      toast({
-        id: 'deployment_rolled_back',
-        title: 'Deployment rolled back',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Deployment rolled back');
    } else {
-      toast({
-        id: 'deployment_rollback_failed',
-        title: 'Error rolling back deployment',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to rollback deployment');
    }
  };

@@ -116,19 +84,9 @@ export const DeploymentMenu = ({
    const isDeleted = await client.deleteDeployment(deployment.id);
    if (isDeleted) {
      await onUpdate();
-      toast({
-        id: 'deployment_deleted',
-        title: 'Deployment deleted',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Deleted deployment');
    } else {
-      toast({
-        id: 'deployment_not_deleted',
-        title: 'Error deleting deployment',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to delete deployment');
    }
  };

@@ -20,7 +20,6 @@ import { cn } from 'utils/classnames';
 import { useMediaQuery } from 'usehooks-ts';
 import { SIDEBAR_MENU } from './constants';
 import { UserSelect } from 'components/shared/UserSelect';
-import { baseUrl } from 'utils/constants';

 interface SidebarProps {
  mobileOpen?: boolean;
@@ -84,7 +83,7 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
  }, [orgSlug]);

  const handleLogOut = useCallback(async () => {
-    await fetch(`${baseUrl}/auth/logout`, {
+    await fetch(`${import.meta.env.VITE_SERVER_URL}/auth/logout`, {
      method: 'POST',
      credentials: 'include',
    });
@@ -1,117 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { Input } from '../Input';
-
-export interface VerifyCodeInputProps {
-  code: string;
-  setCode: (code: string) => void;
-  submitCode: () => void;
-  loading: boolean;
-}
-
-export const VerifyCodeInput = ({
-  code,
-  setCode,
-  submitCode,
-  loading,
-}: VerifyCodeInputProps) => {
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-
-  const handlePaste = (
-    e: React.ClipboardEvent<HTMLInputElement>,
-    i: number,
-  ) => {
-    e.preventDefault();
-    const pasteData = e.clipboardData.getData('text').replace(/\D/g, ''); // Only digits
-    if (pasteData.length > 0) {
-      let newCodeArray = code.split('');
-      for (let j = 0; j < pasteData.length && i + j < 6; j++) {
-        newCodeArray[i + j] = pasteData[j];
-      }
-      const newCode = newCodeArray.join('');
-      setCode(newCode);
-      const nextIndex = Math.min(i + pasteData.length, 5);
-      const nextInput = inputRefs.current[nextIndex];
-      if (nextInput) nextInput.focus();
-      if (!newCode.includes(' ')) {
-        submitCode();
-      }
-    }
-  };
-
-  const handleKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    i: number,
-  ) => {
-    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-
-    if (e.key === 'Backspace') {
-      e.preventDefault();
-      const isEmpty = code[i] === ' ';
-      const newCode = !isEmpty
-        ? code.slice(0, i) + ' ' + code.slice(i + 1, 6)
-        : code.slice(0, i - 1) + ' ' + code.slice(i, 6);
-
-      setCode(newCode.slice(0, 6));
-
-      if (i === 0 || !isEmpty) return;
-      const prev = inputRefs.current[i - 1];
-      if (prev) prev.focus();
-      return;
-    }
-
-    if (!e.key.match(/[0-9]/)) return;
-
-    e.preventDefault(); // Prevent the default event to avoid duplicate input
-
-    const newCode = code.slice(0, i) + e.key + code.slice(i + 1, 6);
-    setCode(newCode);
-
-    if (i === 5) {
-      submitCode();
-      return;
-    }
-
-    const next = inputRefs.current[i + 1];
-    if (next) next.focus();
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {
-    const value = e.target.value.slice(-1);
-    if (!value.match(/[0-9]/)) return;
-
-    const newCode = code.slice(0, i) + value + code.slice(i + 1, 6);
-    setCode(newCode);
-
-    if (i < 5) {
-      const next = inputRefs.current[i + 1];
-      if (next) next.focus();
-    }
-
-    if (!newCode.includes(' ')) {
-      submitCode();
-    }
-  };
-
-  useEffect(() => {
-    if (inputRefs.current[0]) {
-      inputRefs.current[0].focus();
-    }
-  }, []);
-
-  return (
-    <div className="flex gap-2">
-      {code.split('').map((char, i) => (
-        <Input
-          key={i}
-          value={char === ' ' ? '' : char}
-          ref={(el) => (inputRefs.current[i] = el)}
-          onChange={(e) => handleChange(e, i)}
-          onPaste={(e) => handlePaste(e, i)}
-          onKeyDown={(e) => handleKeyDown(e, i)}
-          disabled={!!loading}
-          style={{ textAlign: 'center' }} // Add this line to center text
-        />
-      ))}
-    </div>
-  );
-};
@@ -1 +0,0 @@
-export { VerifyCodeInput } from './VerifyCodeInput';
@@ -1,11 +1,9 @@
 import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

-import { VITE_WALLET_CONNECT_ID } from 'utils/constants';
-
 const queryClient = new QueryClient();

-if (!VITE_WALLET_CONNECT_ID) {
+if (!import.meta.env.VITE_WALLET_CONNECT_ID) {
  throw new Error('Error: REACT_APP_WALLET_CONNECT_ID env config is not set');
 }

@@ -14,7 +14,6 @@ import { GQLClientProvider } from './context/GQLClientContext';
 import { SERVER_GQL_PATH } from './constants';
 import { Toaster } from 'components/shared/Toast';
 import { LogErrorBoundary } from 'utils/log-error';
-import { baseUrl } from 'utils/constants';

 // @ts-ignore
 console.log(`v-${__VERSION__}`);
@@ -23,8 +22,8 @@ const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
 );

-assert(baseUrl, 'VITE_SERVER_URL is not set in env');
-const gqlEndpoint = `${baseUrl}/${SERVER_GQL_PATH}`;
+assert(import.meta.env.VITE_SERVER_URL, 'VITE_SERVER_URL is not set in env');
+const gqlEndpoint = `${import.meta.env.VITE_SERVER_URL}/${SERVER_GQL_PATH}`;

 const gqlClient = new GQLClient({ gqlEndpoint });

@@ -1,99 +0,0 @@
-import React, { useState } from 'react';
-
-import { Button } from 'components/shared/Button';
-import {
-  ArrowRightCircleFilledIcon,
-  LoaderIcon,
-} from 'components/shared/CustomIcon';
-import { WavyBorder } from 'components/shared/WavyBorder';
-import { VerifyCodeInput } from 'components/shared/VerifyCodeInput';
-import { verifyAccessCode } from 'utils/accessCode';
-
-type AccessMethod = 'accesscode' | 'passkey';
-
-type Err = { type: AccessMethod; message: string };
-
-type AccessCodeProps = {
-  onCorrectAccessCode: () => void;
-};
-
-export const AccessCode: React.FC<AccessCodeProps> = ({
-  onCorrectAccessCode,
-}) => {
-  const [accessCode, setAccessCode] = useState('     ');
-  const [error, setError] = useState<Err | null>();
-  const [accessMethod, setAccessMethod] = useState<AccessMethod | false>(false);
-
-  async function validateAccessCode() {
-    setAccessMethod('accesscode');
-    try {
-      const isValidAccessCode = await verifyAccessCode(accessCode);
-
-      // add a pause for ux
-      await new Promise((resolve) => setTimeout(resolve, 250));
-      if (isValidAccessCode) {
-        localStorage.setItem('accessCode', accessCode);
-        onCorrectAccessCode();
-      } else {
-        setError({
-          type: 'accesscode',
-          message: 'Invalid access code',
-        });
-      }
-    } catch (err: any) {
-      setError({ type: 'accesscode', message: err.message });
-    }
-  }
-
-  const loading = accessMethod;
-  const isValidAccessCodeLength = accessCode.trim().length === 5;
-
-  return (
-    <div>
-      <div className="self-stretch p-3 xs:p-6 flex-col justify-center items-center gap-5 flex">
-        <div className="self-stretch text-center text-sky-950 text-2xl font-medium font-display leading-tight">
-          Access Code
-        </div>
-      </div>
-      <WavyBorder className="self-stretch" variant="stroke" />
-      <div className="self-stretch p-4 xs:p-6 flex-col justify-center items-center gap-8 flex">
-        <div className="self-stretch flex-col gap-8 flex">
-          <div className="flex-col justify-start items-start gap-2 inline-flex">
-            <VerifyCodeInput
-              loading={!!loading}
-              code={accessCode}
-              setCode={setAccessCode}
-              submitCode={validateAccessCode}
-            />
-          </div>
-          <Button
-            rightIcon={
-              loading && loading === 'accesscode' ? (
-                <LoaderIcon className="animate-spin" />
-              ) : (
-                <ArrowRightCircleFilledIcon height="16" />
-              )
-            }
-            onClick={validateAccessCode}
-            variant={'secondary'}
-            disabled={!accessCode || !isValidAccessCodeLength || !!loading}
-          >
-            Submit
-          </Button>
-          {error && error.type === 'accesscode' && (
-            <div className="flex flex-col gap-3">
-              <div className="justify-center items-center gap-2 inline-flex">
-                <div className="text-red-500 text-sm">
-                  Error: {error.message}.{' '}
-                  <a href="/signup" className="underline">
-                    Try again?
-                  </a>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
@@ -1,20 +0,0 @@
-import React, { useState } from 'react';
-
-import { AccessCode } from './AccessCode';
-import { SignUp } from './SignUp';
-
-type AccessSignUpProps = {
-  onDone: () => void;
-};
-
-export const AccessSignUp: React.FC<AccessSignUpProps> = ({ onDone }) => {
-  const [isValidAccessCode, setIsValidAccessCode] = useState<boolean>(
-    !!localStorage.getItem('accessCode'),
-  );
-
-  return isValidAccessCode ? (
-    <SignUp onDone={onDone} />
-  ) : (
-    <AccessCode onCorrectAccessCode={() => setIsValidAccessCode(true)} />
-  );
-};
@@ -21,7 +21,6 @@ import {
  turnkeySignin,
  turnkeySignup,
 } from 'utils/turnkey-frontend';
-import { verifyAccessCode } from 'utils/accessCode';

 type Provider = 'google' | 'github' | 'apple' | 'email';

@@ -112,29 +111,6 @@ export const SignUp = ({ onDone }: Props) => {
  const loading = provider;
  const emailValid = /.@./.test(email);

-  useEffect(() => {
-    const validateAccessCode = async () => {
-      const accessCode = localStorage.getItem('accessCode');
-      if (!accessCode) {
-        redirectToSignup();
-        return;
-      }
-
-      try {
-        await verifyAccessCode(accessCode);
-      } catch (err: any) {
-        redirectToSignup();
-      }
-    };
-
-    const redirectToSignup = () => {
-      localStorage.removeItem('accessCode');
-      window.location.href = '/signup';
-    };
-
-    validateAccessCode();
-  }, []);
-
  return (
    <div>
      <div className="self-stretch p-3 xs:p-6 flex-col justify-center items-center gap-5 flex">
@@ -1,15 +1,14 @@
-import React, { useEffect, useState } from 'react';
-
 import { snowball } from 'utils/use-snowball';
 import { Login } from './Login';
+import { SignUp } from './SignUp';
+import { useEffect, useState } from 'react';
 import { Done } from './Done';
-import { AccessSignUp } from './AccessSignUp';

 type Screen = 'login' | 'signup' | 'success';

 const DASHBOARD_URL = '/';

-export const SnowballAuth: React.FC = () => {
+export const SnowballAuth = () => {
  const path = window.location.pathname;
  const [screen, setScreen] = useState<Screen>(
    path === '/login' ? 'login' : 'signup',
@@ -31,7 +30,7 @@ export const SnowballAuth: React.FC = () => {

  if (screen === 'signup') {
    return (
-      <AccessSignUp
+      <SignUp
        onDone={() => {
          setScreen('success');
        }}
@@ -6,13 +6,9 @@ const meta: Meta<typeof ChevronDownSmallIcon> = {
  title: 'Icons/ChevronDownSmallIcon',
  component: ChevronDownSmallIcon,
  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'text',
-    },
-    name: {
-      control: 'text',
-    },
+  args: {
+    size: 'string | number' as unknown as any,
+    name: 'string',
  },
 };

@@ -6,13 +6,9 @@ const meta: Meta<typeof ChevronRight> = {
  title: 'Icons/ChevronRight',
  component: ChevronRight,
  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'text',
-    },
-    name: {
-      control: 'text',
-    },
+  args: {
+    size: 'string | number' as unknown as any,
+    name: 'string',
  },
 };

@@ -6,13 +6,9 @@ const meta: Meta<typeof ChevronUpDown> = {
  title: 'Icons/ChevronUpDown',
  component: ChevronUpDown,
  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'text',
-    },
-    name: {
-      control: 'text',
-    },
+  args: {
+    size: 'string | number' as unknown as any,
+    name: 'string',
  },
 };

@@ -3,16 +3,12 @@ import { Meta, StoryObj } from '@storybook/react';
 import { ChevronUpSmallIcon } from 'components/shared/CustomIcon';

 const meta: Meta<typeof ChevronUpSmallIcon> = {
-  title: 'Icons/ChevronUpSmallIcon',
+  title: 'Components/ChevronUpSmallIcon',
  component: ChevronUpSmallIcon,
  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'text',
-    },
-    name: {
-      control: 'text',
-    },
+  args: {
+    size: 'string | number' as unknown as any,
+    name: 'string',
  },
 };

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { CollaboratorsIcon } from 'components/shared/CustomIcon';

 const meta: Meta<typeof CollaboratorsIcon> = {
-  title: 'Icons/CollaboratorsIcon',
+  title: 'Components/CollaboratorsIcon',
  component: CollaboratorsIcon,
  tags: ['autodocs'],
  argTypes: {
@@ -1,28 +0,0 @@
-import { baseUrl } from './constants';
-
-export async function verifyAccessCode(
-  accesscode: string,
-): Promise<boolean | null> {
-  const res = await fetch(`${baseUrl}/auth/accesscode`, {
-    method: 'POST',
-    body: JSON.stringify({
-      accesscode,
-    }),
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    credentials: 'include',
-  });
-  // If API returns a non-empty 200, this is a valid access code.
-  if (res.status == 200) {
-    const isValid = (await res.json()).isValid as boolean;
-    console.log('isValid', isValid);
-    return isValid;
-  } else if (res.status === 204) {
-    return null;
-  } else {
-    throw new Error(
-      `Unexpected response from access code endpoint: ${res.status}: ${await res.text()}`,
-    );
-  }
-}
@@ -1,11 +0,0 @@
-export const baseUrl = import.meta.env.VITE_SERVER_URL;
-export const PASSKEY_WALLET_RPID = import.meta.env.VITE_PASSKEY_WALLET_RPID!;
-export const TURNKEY_BASE_URL = import.meta.env.VITE_TURNKEY_API_BASE_URL!;
-export const VITE_GITHUB_PWA_TEMPLATE_REPO = import.meta.env
-  .VITE_GITHUB_PWA_TEMPLATE_REPO;
-export const VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = import.meta.env
-  .VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO;
-export const VITE_GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID;
-export const VITE_WALLET_CONNECT_ID = import.meta.env.VITE_WALLET_CONNECT_ID;
-export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;
-export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY;
@@ -1,21 +1,21 @@
-import React from 'react';
 import Bugsnag from '@bugsnag/js';
 import BugsnagPluginReact from '@bugsnag/plugin-react';
 import BugsnagPerformance from '@bugsnag/browser-performance';
+import React from 'react';

-import { VITE_BUGSNAG_API_KEY } from './constants';
+const bugsnagApiKey = import.meta.env.VITE_BUGSNAG_API_KEY;

-if (VITE_BUGSNAG_API_KEY) {
+if (bugsnagApiKey) {
  Bugsnag.start({
-    apiKey: VITE_BUGSNAG_API_KEY,
+    apiKey: bugsnagApiKey,
    plugins: [new BugsnagPluginReact()],
  });
-  BugsnagPerformance.start({ apiKey: VITE_BUGSNAG_API_KEY });
+  BugsnagPerformance.start({ apiKey: bugsnagApiKey });
 }

-export const errorLoggingEnabled = !!VITE_BUGSNAG_API_KEY;
+export const errorLoggingEnabled = !!bugsnagApiKey;

-export const LogErrorBoundary = VITE_BUGSNAG_API_KEY
+export const LogErrorBoundary = bugsnagApiKey
  ? Bugsnag.getPlugin('react')!.createErrorBoundary(React)
  : ({ children }: any) => children;

@@ -28,7 +28,7 @@ export function logError(error: Error) {
  }
  console.error(...errors);

-  if (VITE_BUGSNAG_API_KEY) {
+  if (import.meta.env.VITE_BUGSNAG_API_KEY) {
    Bugsnag.notify(error);
  }
 }
@@ -2,8 +2,6 @@ import { SiweMessage } from 'siwe';
 import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
 import { v4 as uuid } from 'uuid';

-import { baseUrl } from './constants';
-
 const domain = window.location.host;
 const origin = window.location.origin;

@@ -19,7 +17,7 @@ export async function signInWithEthereum(
  );
  const signature = await wallet.signMessage(message);

-  const res = await fetch(`${baseUrl}/auth/validate`, {
+  const res = await fetch(`${import.meta.env.VITE_SERVER_URL}/auth/validate`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
@@ -1,7 +1,10 @@
 import { TurnkeyClient, getWebAuthnAttestation } from '@turnkey/http';
 import { WebauthnStamper } from '@turnkey/webauthn-stamper';

-import { baseUrl, PASSKEY_WALLET_RPID, TURNKEY_BASE_URL } from './constants';
+const baseUrl = import.meta.env.VITE_SERVER_URL;
+
+const PASSKEY_WALLET_RPID = import.meta.env.VITE_PASSKEY_WALLET_RPID!;
+const TURNKEY_BASE_URL = import.meta.env.VITE_TURNKEY_API_BASE_URL!;

 // All algorithms can be found here: https://www.iana.org/assignments/cose/cose.xhtml#algorithms
 // We only support ES256, which is listed here
@@ -5,17 +5,16 @@ import {
  LitGoogleAuth,
  LitPasskeyAuth,
 } from '@snowballtools/auth-lit';
-import { VITE_LIT_RELAY_API_KEY } from './constants';

 export const snowball = Snowball.withAuth({
  google: LitGoogleAuth.configure({
-    litRelayApiKey: VITE_LIT_RELAY_API_KEY!,
+    litRelayApiKey: import.meta.env.VITE_LIT_RELAY_API_KEY!,
  }),
  // apple: LitAppleAuth.configure({
-  //   litRelayApiKey: VITE_LIT_RELAY_API_KEY!,
+  //   litRelayApiKey: import.meta.env.VITE_LIT_RELAY_API_KEY!,
  // }),
  passkey: LitPasskeyAuth.configure({
-    litRelayApiKey: VITE_LIT_RELAY_API_KEY!,
+    litRelayApiKey: import.meta.env.VITE_LIT_RELAY_API_KEY!,
  }),
 }).create({
  initialChain: SnowballChain.sepolia,
				`@@ -1 +0,0 @@`
				`export { VerifyCodeInput } from './VerifyCodeInput';`