Go to file
Vivian Phung f2e59c11fd
Refactor: VerifyCodeInput Component and Modify Access Code Validation (#212)
### TL;DR

Implemented the new `VerifyCodeInput` component and updated the access code validation logic.

### What changed?

1. Added a new reusable `VerifyCodeInput` component for verifying codes in a user-friendly way. This component handles paste events, input changes, and keyboard navigation.
2. Updated the backend route `/accesscode` to accept an arbitrary code for now. 
3. Incorporated the `VerifyCodeInput` component into the `AccessCode` page, replacing the generic `Input` component.
4. Updated the access code validation logic to check for a trimmed length of 5 characters instead of 6.
5. Added a slight pause for UX purposes when validating the access code on the frontend.

### How to test?

1. Go to the Access Code page.
2. Try entering an access code with various inputs (keyboard, paste, etc.) to see if it works seamlessly.
3. Verify that only a 5-digit code is considered valid.
4. Check the backend logs to ensure the validation endpoint is working as expected.

### Why make this change?

This change improves the user experience by providing a custom input component for access code verification and ensures that the access code validation meets the new requirements.

---
2024-06-21 21:13:32 -04:00
.github/workflows Add CI to test web app deployment and undeployment (#174) 2024-04-15 14:10:59 +05:30
.husky Add husky to run pre-commit lint (#3) 2023-12-08 09:59:45 +05:30
.vscode Project Deployments - Deployed line items (#147) 2024-03-01 10:05:50 +05:45
packages Refactor: VerifyCodeInput Component and Modify Access Code Validation (#212) 2024-06-21 21:13:32 -04:00
scripts Switch from cra to vite 2024-04-11 21:48:58 -05:00
.gitignore update gitignore for build output 2024-05-06 13:02:37 -04:00
.node-version Switch from cra to vite 2024-04-11 21:48:58 -05:00
.npmrc Publish app deployment record in Laconic registry on creating new deployments (#62) 2024-02-12 11:34:01 +05:30
build-webapp.sh Laconic frontend deployment 2024-05-22 09:21:00 -05:00
lerna.json Add husky to run pre-commit lint (#3) 2023-12-08 09:59:45 +05:30
package.json Lint using tsc; fix type errors 2024-04-11 21:49:14 -05:00
README.md Replace REACT_APP env with VITE 2024-04-25 16:59:02 +05:30
yarn.lock Support async express handlers 2024-06-19 22:59:20 -05:00

snowballtools-base

Setup

  • Clone the snowballtools-base repo

    git clone git@github.com:snowball-tools/snowballtools-base.git
    cd snowballtools-base
    
  • Install dependencies in root

    yarn
    
  • Build packages

    yarn build --ignore frontend
    

Let us assume the following domains for backend and frontend

  • Backend server: api.snowballtools.com

  • Frontend app: dashboard.snowballtools.com

  • Configuration Files

    • For Backend:

      cp packages/backend/environments/local.toml.example packages/backend/environments/local.toml
      
      • Production

        • Update the following in backend config file

          [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

          • OAuth App Creation
            • 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

          [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

          [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

          • OAuth App Creation
            • 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

          • Get the private key and set registryConfig.privateKey in backend config file

            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

          • Run the script to create bond, reserve the authority and set authority bond

            yarn test:registry:init
            # snowball:initialize-registry bondId: 6af0ab81973b93d3511ae79841756fb5da3fd2f70ea1279e81fae7c9b19af6c4 +0ms
            
            • Get the bond id and set registryConfig.bondId in backend config file
        • Setup ngrok for GitHub webhooks

          • ngrok getting started

          • Start ngrok and point to backend server endpoint

            ngrok http http://localhost:8000
            
          • Look for the forwarding URL in ngrok

            Forwarding                    https://19c1-61-95-158-116.ngrok-free.app -> http://localhost:8000
            
          • Set gitHub.webhookUrl in backend config file

            [gitHub]
              webhookUrl = "https://19c1-61-95-158-116.ngrok-free.app"
            
    • For Frontend:

      cp packages/frontend/.env.example packages/frontend/.env
      
      • Copy the GitHub OAuth app client ID from previous steps and set it in frontend .env file

        VITE_GITHUB_CLIENT_ID = <CLIENT_ID>
        
      • Set VITE_GITHUB_PWA_TEMPLATE_REPO and VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO in .env file

        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 file

          VITE_SERVER_URL = 'https://api.snowballtools.com'   # Backend server endpoint
          
        • Sign in to wallet connect 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 file
          VITE_WALLET_CONNECT_ID = <PROJECT_ID>
          
        • Build the React application

          yarn build
          
        • Use a web server for hosting static built files

          python3 -m http.server -d build 3000
          
      • Development

        • Copy the graphQL endpoint from terminal and add the endpoint in the .env file present in packages/frontend

          VITE_SERVER_URL = 'http://localhost:8000'
          
        • Sign in to wallet connect 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 file
          VITE_WALLET_CONNECT_ID = <Project_ID>
          
        • The React application will be running in http://localhost:3000/

Development

  • Start the backend server

    yarn start:backend
    
  • Start the frontend

    yarn start