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>

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>
-            <Button className="rounded-full" variant="outlined">
-              Open Repo
-            </Button>
+            <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;