Set authority for record name from backend config (#104)

* Fix format of eth address to display

* Set authority for record name from backend config

* Add functionality to open repo button

* Use commit author image and commit url in activity card

* Handle review changes

* Fix commit author as null

* Add timeout to move to next page on project creation

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

README.md

@@ -85,6 +85,8 @@
     # 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"
@@ -125,6 +127,8 @@
     laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 9473
     # 0.0.0.0:32771
     ```
+  - 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

packages/backend/environments/local.toml

@@ -24,6 +24,7 @@
   chainId = "laconic_9000-1"
   privateKey = ""
   bondId = ""
+  authority = ""
   [registryConfig.fee]
     amount = "200000"
     denom = "aphoton"

packages/backend/src/config.ts

@@ -34,6 +34,7 @@ export interface RegistryConfig {
   privateKey: string;
   bondId: string;
   fetchDeploymentRecordDelay: number;
+  authority: string;
   fee: {
     amount: string;
     denom: string;

packages/backend/src/registry.ts

@@ -81,7 +81,7 @@ export class Registry {
     log('Application record data:', applicationRecord);
 
     // TODO: Discuss computation of CRN
-    const crn = this.getCrn(packageJSON.name, appName);
+    const crn = this.getCrn(appName);
     log(`Setting name: ${crn} for record ID: ${result.data.id}`);
 
     await this.registry.setName({ cid: result.data.id, crn }, this.registryConfig.privateKey, this.registryConfig.fee);
@@ -101,7 +101,7 @@ export class Registry {
     applicationDeploymentRequestId: string,
     applicationDeploymentRequestData: ApplicationDeploymentRequest
   }> {
-    const crn = this.getCrn(data.packageJsonName, data.appName);
+    const crn = this.getCrn(data.appName);
     const records = await this.registry.resolveNames([crn]);
     const applicationRecord = records[0];
 
@@ -160,10 +160,8 @@ export class Registry {
     return records.filter((record: AppDeploymentRecord) => deployments.some(deployment => deployment.applicationRecordId === record.attributes.application));
   }
 
-  getCrn (packageJsonName: string, appName: string): string {
-    const [arg1] = packageJsonName.split('/');
-    const authority = arg1.replace('@', '');
-
-    return `crn://${authority}/applications/${appName}`;
+  getCrn (appName: string): string {
+    assert(this.registryConfig.authority, "Authority doesn't exist");
+    return `crn://${this.registryConfig.authority}/applications/${appName}`;
   }
 }

packages/backend/test/initialize-registry.ts

@@ -11,19 +11,19 @@ const log = debug('snowball:initialize-registry');
 const DENOM = 'aphoton';
 const BOND_AMOUNT = '1000000000';
 
-// TODO: Get authority names from args
-const AUTHORITY_NAMES = ['snowballtools', 'cerc-io'];
-
 async function main () {
   const { registryConfig } = await getConfig<Config>(DEFAULT_CONFIG_FILE_PATH);
 
+  // TODO: Get authority names from args
+  const authorityNames = ['snowballtools', registryConfig.authority];
+
   const registry = new Registry(registryConfig.gqlEndpoint, registryConfig.restEndpoint, registryConfig.chainId);
 
   const bondId = await registry.getNextBondId(registryConfig.privateKey);
   log('bondId:', bondId);
   await registry.createBond({ denom: DENOM, amount: BOND_AMOUNT }, registryConfig.privateKey, registryConfig.fee);
 
-  for await (const name of AUTHORITY_NAMES) {
+  for await (const name of authorityNames) {
     await registry.reserveAuthority({ name }, registryConfig.privateKey, registryConfig.fee);
     log('Reserved authority name:', name);
     await registry.setAuthorityBond({ name, bondId }, registryConfig.privateKey, registryConfig.fee);

packages/frontend/public/index.html

@@ -5,10 +5,6 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

packages/frontend/src/components/projects/create/Deploy.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import { Button, Typography } from '@material-tailwind/react';
@@ -7,6 +7,7 @@ import { DeployStep, DeployStatus } from './DeployStep';
 import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
 import ConfirmDialog from '../../shared/ConfirmDialog';
 
+const INTERVAL_DURATION = 5000;
 const Deploy = () => {
   const [searchParams] = useSearchParams();
   const projectId = searchParams.get('projectId');
@@ -21,6 +22,14 @@ const Deploy = () => {
     navigate(`/${orgSlug}/projects/create`);
   }, []);
 
+  useEffect(() => {
+    const timerID = setTimeout(() => {
+      navigate(`/${orgSlug}/projects/create/success/${projectId}`);
+    }, INTERVAL_DURATION);
+
+    return () => clearInterval(timerID);
+  }, []);
+
   return (
     <div>
       <div className="flex justify-between mb-6">
@@ -74,14 +83,6 @@ const Deploy = () => {
         status={DeployStatus.NOT_STARTED}
         step="4"
       />
-
-      <Button
-        onClick={() => {
-          navigate(`/${orgSlug}/projects/create/success/${projectId}`);
-        }}
-      >
-        VIEW DEMO
-      </Button>
     </div>
   );
 };

packages/frontend/src/components/projects/project/ActivityCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Typography, IconButton } from '@material-tailwind/react';
+import { Typography, IconButton, Avatar } from '@material-tailwind/react';
 
 import { relativeTimeISO } from '../../../utils/time';
 import { GitCommitWithBranch } from '../../../types';
@@ -11,9 +11,10 @@ interface ActivityCardProps {
 
 const ActivityCard = ({ activity }: ActivityCardProps) => {
   return (
-    <div className="group flex hover:bg-gray-200 rounded mt-1">
-      <div className="w-4">^</div>
-
+    <div className="group flex gap-2 hover:bg-gray-200 rounded mt-1">
+      <div className="w-8">
+        <Avatar src={activity.author?.avatar_url} variant="rounded" size="sm" />
+      </div>
       <div className="grow">
         <Typography>{activity.commit.author?.name}</Typography>
         <Typography variant="small" color="gray">

packages/frontend/src/pages/org-slug/projects/Id.tsx

@@ -19,19 +19,31 @@ import {
 
 import HorizontalLine from '../../../components/HorizontalLine';
 import { useGQLClient } from '../../../context/GQLClientContext';
+import { useOctokit } from '../../../context/OctokitContext';
 
 const Id = () => {
   const { id } = useParams();
+  const { octokit } = useOctokit();
   const navigate = useNavigate();
   const client = useGQLClient();
   const location = useLocation();
 
   const [project, setProject] = useState<ProjectType | null>(null);
+  const [repoUrl, setRepoUrl] = useState('');
 
   const fetchProject = useCallback(async (id: string | undefined) => {
     if (id) {
       const { project } = await client.getProject(id);
       setProject(project);
+
+      if (project) {
+        const [owner, repo] = project.repository.split('/');
+        const { data: repoDetails } = await octokit.rest.repos.get({
+          owner,
+          repo,
+        });
+        setRepoUrl(repoDetails.html_url);
+      }
     }
   }, []);
 
@@ -68,9 +80,11 @@ const Id = () => {
             <Typography variant="h3" className="grow">
               {project?.name}
             </Typography>
+            <Link to={repoUrl} target="_blank">
               <Button className="rounded-full" variant="outlined">
                 Open Repo
               </Button>
+            </Link>
             <Button className="rounded-full" color="blue">
               Go to app
             </Button>

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Domain, DomainStatus } from 'gql-client';
-import { useNavigate, useOutletContext } from 'react-router-dom';
+import { Link, useNavigate, useOutletContext } from 'react-router-dom';
 import { RequestError } from 'octokit';
 
 import {
@@ -183,7 +183,11 @@ const OverviewTabPanel = () => {
         </div>
         <div className="p-2">
           {activities.map((activity, index) => {
-            return <ActivityCard activity={activity} key={index} />;
+            return (
+              <Link to={activity.html_url} target="_blank" key={index}>
+                <ActivityCard activity={activity} />
+              </Link>
+            );
           })}
         </div>
       </div>

packages/frontend/src/types.ts

@@ -21,6 +21,9 @@ export interface GitBranchDetails {
 }
 
 export interface GitCommitWithBranch {
+  author: {
+    avatar_url: string;
+  } | null;
   branch: GitBranchDetails;
   commit: {
     author: {
@@ -29,6 +32,7 @@ export interface GitCommitWithBranch {
     } | null;
     message: string;
   };
+  html_url: string;
 }
 
 export enum GitSelect {

packages/frontend/src/utils/format.ts

@@ -1,6 +1,6 @@
 export const formatAddress = (address: string) => {
-  if (address.startsWith('0x') && address.length > 8) {
-    return address.slice(0, 4) + '..' + address.slice(-4);
+  if (address.startsWith('0x') && address.length > 10) {
+    return address.slice(0, 6) + '..' + address.slice(-4);
   }
 
   return address;