f2e59c11fd
### 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. --- |
||
---|---|---|
.github/workflows | ||
.husky | ||
.vscode | ||
packages | ||
scripts | ||
.gitignore | ||
.node-version | ||
.npmrc | ||
build-webapp.sh | ||
lerna.json | ||
package.json | ||
README.md | ||
yarn.lock |
snowballtools-base
Setup
-
Clone the
snowballtools-base
repogit 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
andgitHub.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
- Homepage URL:
- OAuth App Creation
-
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
andgitHub.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
- Homepage URL:
- OAuth App Creation
-
Setup Laconicd
-
Run the laconicd stack following this doc
-
Get the private key and set
registryConfig.privateKey
in backend config filelaconic-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
- Get the bond id and set
-
-
Setup ngrok for GitHub webhooks
-
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
andVITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO
in .env fileVITE_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
- Add project name and select project type as
- On creation of project, use the
Project ID
and set it inVITE_WALLET_CONNECT_ID
in .env file
VITE_WALLET_CONNECT_ID = <PROJECT_ID>
- Create a project and add information to use wallet connect SDK
-
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
- Add project name and select project type as
- On creation of project, use the
Project ID
and set it inVITE_WALLET_CONNECT_ID
in .env file
VITE_WALLET_CONNECT_ID = <Project_ID>
- Create a project and add information to use wallet connect SDK
-
The React application will be running in
http://localhost:3000/
-
-
-
Development
-
Start the backend server
yarn start:backend
-
Start the frontend
yarn start