From 9acb9daacc54960e3c50e4e9afb0406c8699780d Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Thu, 22 Feb 2024 19:24:06 +0530 Subject: [PATCH] Update README after implementation of authentication (#101) * Update README * Add tooltip to display ethereum address * Update README for production deployment --------- Co-authored-by: neeraj --- README.md | 194 +++++++++++++----- packages/backend/environments/local.toml | 2 +- .../deployments/DeploymentDetailsCard.tsx | 5 +- .../projects/project/settings/MemberCard.tsx | 4 +- .../pages/org-slug/projects/id/Overview.tsx | 12 +- 5 files changed, 155 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index 5eb2980b..6ac68010 100644 --- a/README.md +++ b/README.md @@ -28,12 +28,78 @@ cd packages/backend ``` -- Load fixtures in database +- Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml) + - Client ID and secret will be available after creating Github OAuth app + - https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app + - In "Homepage URL", type `http://localhost:3000` + - In "Authorization callback URL", type `http://localhost:3000/organization/projects/create` + - Generate a new client secret after app is created + +### Production + +- Let us assume the following domains for backend and frontend + - Backend server: `api.snowball.com` + - Frontend app: `dashboard.snowball.com` + +- 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.snowball.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) + - Client ID and secret will be available after creating Github OAuth app + - https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app + - In "Homepage URL", type `https://dashboard.snowball.com` + - In "Authorization callback URL", type `https://dashboard.snowball.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.snowball.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" + [registryConfig.fee] + amount = "200000" + denom = "aphoton" + gas = "750000" + ... + ``` + +- Start the server in `packages/backend` ```bash - yarn test:db:load:fixtures + yarn start ``` +### Development + - Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml) - Client ID and secret will be available after creating Github OAuth app - https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app @@ -41,36 +107,30 @@ - In "Authorization callback URL", type `http://localhost:3000/organization/projects/create` - Generate a new client secret after app is created -- Run the laconicd stack following this [doc](https://git.vdb.to/cerc-io/stack-orchestrator/src/branch/main/docs/laconicd-with-console.md) +- 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 --stack fixturenet-laconic-loaded deploy 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 + ``` + - Get the REST and GQL endpoint ports of Laconicd and replace the ports for `registryConfig.restEndpoint` and `registryConfig.gqlEndpoint` in backend [config file](packages/backend/environments/local.toml) + ```bash + # For registryConfig.restEndpoint + laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 1317 + # 0.0.0.0:32777 -- Get the private key and set `registryConfig.privateKey` in backend [config file](packages/backend/environments/local.toml) - - ```bash - laconic-so --stack fixturenet-laconic-loaded deploy 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 - ``` - -- Get the REST and GQL endpoint ports of Laconicd and replace the ports for `registryConfig.restEndpoint` and `registryConfig.gqlEndpoint` in backend [config file](packages/backend/environments/local.toml) - - ```bash - # For registryConfig.restEndpoint - laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 1317 - # 0.0.0.0:32777 - - # For registryConfig.gqlEndpoint - laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 9473 - # 0.0.0.0:32771 - ``` - -- 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) + # For registryConfig.gqlEndpoint + laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 9473 + # 0.0.0.0:32771 + ``` + - 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 - https://ngrok.com/docs/getting-started/ @@ -95,37 +155,74 @@ - Start the server in `packages/backend` ```bash - yarn start + yarn start:dev ``` ## Frontend - Change directory to `packages/frontend` in a new terminal - ```bash cd packages/frontend ``` -- Copy the graphQL endpoint from terminal and add the endpoint in the [.env](packages/frontend/.env) file present in `packages/frontend` - - ```env - REACT_APP_SERVER_URL = 'http://localhost:8000' - ``` - - Copy the GitHub OAuth app client ID from previous steps and set it in frontend [.env](packages/frontend/.env) file - ```env REACT_APP_GITHUB_CLIENT_ID = ``` - Set `REACT_APP_GITHUB_TEMPLATE_REPO` in [.env](packages/frontend/.env) file - ```env + # Set actual owner/name of the template repo that will be used for creating new repo REACT_APP_GITHUB_TEMPLATE_REPO = cerc-io/test-progressive-web-app ``` +### Production + +- Let us assume the following domains for backend and frontend + - Backend server: `api.snowball.com` + - Frontend app: `dashboard.snowball.com` + +- Set the following values in [.env](packages/frontend/.env) file + ``` + # Backend server endpoint + REACT_APP_SERVER_URL = 'https://api.snowball.com' + ``` + +- 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.snowball.com` + - On creation of project, use the `Project ID` and set it in `REACT_APP_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file + ```env + REACT_APP_WALLET_CONNECT_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 + REACT_APP_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 `REACT_APP_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file + ```env + REACT_APP_WALLET_CONNECT_ID = + ``` + - Start the React application ```bash @@ -133,18 +230,3 @@ ``` - The React application will be running in `http://localhost:3000/` - -### Production - -- Build the React application - - ```bash - yarn build - ``` - -- Use a web server for hosting static built files - - ```bash - python3 -m http.server -d build 3000 - ``` - diff --git a/packages/backend/environments/local.toml b/packages/backend/environments/local.toml index b1f92f1b..931da422 100644 --- a/packages/backend/environments/local.toml +++ b/packages/backend/environments/local.toml @@ -4,7 +4,7 @@ gqlPath = "/graphql" [server.session] secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi" - appOriginUrl = 'http://localhost:3000' + appOriginUrl = "http://localhost:3000" trustProxy = false domain = "localhost" diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx index 1bc7bd8d..f76f32e2 100644 --- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx +++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx @@ -16,6 +16,7 @@ import { Typography, Chip, ChipProps, + Tooltip, } from '@material-tailwind/react'; import { relativeTimeMs } from '../../../../utils/time'; @@ -119,7 +120,9 @@ const DeploymentDetailsCard = ({
^ {relativeTimeMs(deployment.createdAt)} ^{' '} - {formatAddress(deployment.createdBy.name ?? '')} + + {formatAddress(deployment.createdBy.name ?? '')} + diff --git a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx index c50d43fc..bd7e5c3b 100644 --- a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx +++ b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx @@ -83,9 +83,9 @@ const MemberCard = ({
^
{member.name && ( - + {formatAddress(member.name ?? '')} - + )}

diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx index 9df08a27..3e485d2c 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx @@ -3,7 +3,13 @@ import { Domain, DomainStatus } from 'gql-client'; import { useNavigate, useOutletContext } from 'react-router-dom'; import { RequestError } from 'octokit'; -import { Typography, Button, Chip, Avatar } from '@material-tailwind/react'; +import { + Typography, + Button, + Chip, + Avatar, + Tooltip, +} from '@material-tailwind/react'; import ActivityCard from '../../../../components/projects/project/ActivityCard'; import { relativeTimeMs } from '../../../../utils/time'; @@ -158,7 +164,9 @@ const OverviewTabPanel = () => {

^ Created

{relativeTimeMs(project.deployments[0].createdAt)} by ^{' '} - {formatAddress(project.deployments[0].createdBy.name ?? '')} + + {formatAddress(project.deployments[0].createdBy.name ?? '')} +