User profile and repository view improvements

CHANGELOG.md

@@ -1,5 +1,23 @@
 ## Changelog
 
+### Unreleased
+
+- Don't show proposals tab in user profile
+- Show treasury balance upto two decimal places only
+- Don't re-render header everytime we switch tab
+- Show link to parent repo in case of fork repo
+
+### v3.1.0 - 2nd Dec 2024
+
+- Add button for Member Dashboard in public view (if member) and public view in Member dashboard
+- Improve the dao dashboard and some other minor improvements
+- Fix overflow of voting chart in dao creation step
+- Sanitize dao names before posting the transaction
+
+### v3.0.0 - 2nd Dec 2024
+
+- Implement the new dao creation and proposal workflows
+
 ### v2.2.2 - 3rd Sep 2024
 
 - Fix missing apiClient in getUser and getRepository methods

components/account/DaoTreasuryStats.js

@@ -14,8 +14,12 @@ function DaoTreasuryStats({ dao, className = "", getBalance, advanceUser }) {
       const balance = await getBalance(cosmosBankApiClient, dao.address);
       setTreasuryBalance(
         advanceUser === true
-          ? balance + " " + process.env.NEXT_PUBLIC_ADVANCE_CURRENCY_TOKEN
-          : balance / 1000000 + " " + process.env.NEXT_PUBLIC_CURRENCY_TOKEN
+          ? balance.toFixed(2) +
+              " " +
+              process.env.NEXT_PUBLIC_ADVANCE_CURRENCY_TOKEN
+          : (balance / 1000000).toFixed(2) +
+              " " +
+              process.env.NEXT_PUBLIC_CURRENCY_TOKEN
       );
     }
     initBalance();

components/account/daoHeader.js

@@ -117,7 +117,6 @@ function AccountDaoHeader(props) {
         )}
       </div>
 
-      {/* Add the treasury stats component */}
       <DaoTreasuryStats dao={props.dao} className="mb-8" />
     </>
   );

components/dashboard/publicTabs.js

@@ -60,32 +60,34 @@ export default function PublicTabs({
       ) : null}
 
       {showPeople ? (
-        <Link
-          href={hrefBase + "?tab=people"}
-          className={
-            "tab tab-md tab-bordered" +
-            (active === "people" ? " tab-active" : "")
-          }
-        >
-          <span className="icon mr-2">
-            <Users size={24} stroke="#ADBECB" />
-          </span>
-          <span>People</span>
-        </Link>
-      ) : null}
+        <>
+          <Link
+            href={hrefBase + "?tab=people"}
+            className={
+              "tab tab-md tab-bordered" +
+              (active === "people" ? " tab-active" : "")
+            }
+          >
+            <span className="icon mr-2">
+              <Users size={24} stroke="#ADBECB" />
+            </span>
+            <span>People</span>
+          </Link>
 
-      <Link
-        href={hrefBase + "?tab=proposals"}
-        className={
-          "tab tab-md tab-bordered" +
-          (active === "proposals" ? " tab-active" : "")
-        }
-      >
-        <span className="icon mr-2">
-          <FileText size={24} stroke="#ADBECB" />
-        </span>
-        <span>Proposals</span>
-      </Link>
+          <Link
+            href={hrefBase + "?tab=proposals"}
+            className={
+              "tab tab-md tab-bordered" +
+              (active === "proposals" ? " tab-active" : "")
+            }
+          >
+            <span className="icon mr-2">
+              <FileText size={24} stroke="#ADBECB" />
+            </span>
+            <span>Proposals</span>
+          </Link>
+        </>
+      ) : null}
 
       {showProposal ? (
         <Link

components/repository/header.js

@@ -7,11 +7,12 @@ import {
   Trash2,
   User,
   Users,
+  GitBranch,
 } from "lucide-react";
 import { useRouter } from "next/router";
 import shrinkAddress from "../../helpers/shrinkAddress";
-import getDao from "../../helpers/getDao";
 import { useApiClient } from "../../context/ApiClientContext";
+import getRepositoryById from "../../helpers/getRepositoryById";
 import DAOProtectionBadge from "./DaoProtectionBadge";
 
 const OwnershipBadge = ({ type }) => {
@@ -32,6 +33,43 @@ const OwnershipBadge = ({ type }) => {
   );
 };
 
+const ForkParentInfo = ({ parentId }) => {
+  const [parentRepo, setParentRepo] = useState(null);
+  const { apiClient } = useApiClient();
+
+  useEffect(() => {
+    async function fetchParentRepo() {
+      try {
+        const parentRepo = await getRepositoryById(apiClient, parentId);
+        setParentRepo(parentRepo);
+      } catch (error) {
+        console.error("Error fetching parent repository:", error);
+      }
+    }
+
+    if (parentId) {
+      fetchParentRepo();
+    }
+  }, [parentId, apiClient]);
+
+  if (!parentRepo) return null;
+
+  return (
+    <div className="text-sm text-muted-foreground mt-2 flex items-center gap-2">
+      <GitBranch size={14} className="text-gray-400" />
+      <span>Forked from</span>
+      <Link
+        href={`/${parentRepo.owner.id}/${parentRepo.name}`}
+        className="text-primary hover:text-primary/80 transition-colors flex items-center gap-1.5"
+      >
+        <span>{shrinkAddress(parentRepo.owner.id)}</span>
+        <span className="text-gray-500">/</span>
+        <span>{parentRepo.name}</span>
+      </Link>
+    </div>
+  );
+};
+
 const RepositoryHeader = ({ repository, daoData, selectedAddress }) => {
   const [forkTargetShown, setForkTargetShown] = useState(false);
   const [branchCount, setBranchCount] = useState(0);
@@ -86,45 +124,51 @@ const RepositoryHeader = ({ repository, daoData, selectedAddress }) => {
     <div className="mb-6">
       <div className="flex flex-wrap items-start gap-4 mb-4">
         <div className="flex-1">
-          <div className="flex items-center gap-3 mb-3">
-            <h1 className="text-xl flex items-center gap-2">
-              <div className="flex items-center gap-2 group">
-                {isDAORepository ? (
-                  <Users size={16} className="text-purple-400" />
-                ) : (
-                  <User size={16} className="text-blue-400" />
-                )}
+          <div className="flex flex-col">
+            <div className="flex items-center gap-3 mb-3">
+              <h1 className="text-xl flex items-center gap-2">
+                <div className="flex items-center gap-2 group">
+                  {isDAORepository ? (
+                    <Users size={16} className="text-purple-400" />
+                  ) : (
+                    <User size={16} className="text-blue-400" />
+                  )}
+                  <Link
+                    href={`/${repository.owner.id}`}
+                    className="hover:text-primary transition-colors"
+                  >
+                    {shrinkAddress(repository.owner.id)}
+                  </Link>
+                </div>
+                <span className="text-gray-500">/</span>
                 <Link
-                  href={`/${repository.owner.id}`}
+                  href={`/${repository.owner.id}/${repository.name}`}
                   className="hover:text-primary transition-colors"
+                  data-test="repo_name"
                 >
-                  {shrinkAddress(repository.owner.id)}
+                  {repository.name}
                 </Link>
-              </div>
-              <span className="text-gray-500">/</span>
-              <Link
-                href={`/${repository.owner.id}/${repository.name}`}
-                className="hover:text-primary transition-colors"
-                data-test="repo_name"
-              >
-                {repository.name}
-              </Link>
-            </h1>
-          </div>
+              </h1>
+            </div>
 
-          <div className="flex flex-wrap items-center gap-2 mt-2">
-            <OwnershipBadge type={repository.owner.type} />
-            {isDAORepository && daoData && (
-              <DAOProtectionBadge
-                enabledFeatures={enabledFeatures}
-                governanceFeatures={governanceFeatures}
-              />
-            )}
-            {repository.fork && (
-              <div className="badge badge-outline text-type-tertiary">
-                <GitFork className="h-3 w-3" />
-              </div>
+            {repository.fork && repository.parent && (
+              <ForkParentInfo parentId={repository.parent} />
             )}
+
+            <div className="flex flex-wrap items-center gap-2 mt-2">
+              <OwnershipBadge type={repository.owner.type} />
+              {isDAORepository && daoData && (
+                <DAOProtectionBadge
+                  enabledFeatures={enabledFeatures}
+                  governanceFeatures={governanceFeatures}
+                />
+              )}
+              {repository.fork && (
+                <div className="badge badge-outline text-type-tertiary">
+                  <GitFork className="h-3 w-3" />
+                </div>
+              )}
+            </div>
           </div>
         </div>
 

components/repository/supportOwner.js

@@ -53,10 +53,15 @@ function SupportOwner({ repository, ownerAddress, isMobile, ...props }) {
   useEffect(() => {
     async function initBalance() {
       const balance = await props.getBalance(cosmosBankApiClient, ownerAddress);
+      // In the initBalance function inside useEffect
       setOwnerBalance(
         props.advanceUser === true
-          ? balance + " " + process.env.NEXT_PUBLIC_ADVANCE_CURRENCY_TOKEN
-          : balance / 1000000 + " " + process.env.NEXT_PUBLIC_CURRENCY_TOKEN
+          ? balance.toFixed(2) +
+              " " +
+              process.env.NEXT_PUBLIC_ADVANCE_CURRENCY_TOKEN
+          : (balance / 1000000).toFixed(2) +
+              " " +
+              process.env.NEXT_PUBLIC_CURRENCY_TOKEN
       );
     }
     initBalance();

pages/[userId]/index.js

@@ -1,6 +1,6 @@
 import Head from "next/head";
 import Header from "../../components/header";
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { connect } from "react-redux";
 import { useRouter } from "next/router";
 import Footer from "../../components/footer";
@@ -129,7 +129,6 @@ function AccountView({
   const hrefBase = `/${router.query.userId}`;
 
   const checkMembership = async (daoData) => {
-    console.log(selectedAddress, daoData.group_id);
     if (!selectedAddress || !daoData.group_id) return;
     try {
       const members = await getGroupMembers(
@@ -189,14 +188,14 @@ function AccountView({
         setIsLoading(false);
       }
     },
-    [router, apiClient, setErrorStatusCode]
+    [apiClient, setErrorStatusCode, router.query.userId, selectedAddress]
   );
 
   useEffect(() => {
     getId();
   }, [getId]);
 
-  const renderContent = () => {
+  const content = useMemo(() => {
     const { tab, id } = router.query;
     switch (tab) {
       case "repositories":
@@ -228,7 +227,14 @@ function AccountView({
           />
         );
     }
-  };
+  }, [
+    router.query.tab,
+    router.query.id,
+    user,
+    dao,
+    allRepos,
+    router.query.userId,
+  ]);
 
   const title = user.id ? user.username || user.creator : dao.name;
 
@@ -249,13 +255,11 @@ function AccountView({
           ) : (
             <>
               {dao.address ? (
-                <>
-                  <AccountDaoHeader
-                    dao={dao}
-                    refresh={getId}
-                    isMember={isMember}
-                  />
-                </>
+                <AccountDaoHeader
+                  dao={dao}
+                  refresh={getId}
+                  isMember={isMember}
+                />
               ) : (
                 <UserHeader user={user} refresh={getId} />
               )}
@@ -270,7 +274,7 @@ function AccountView({
                   }
                 />
               </div>
-              {renderContent()}
+              {content}
             </>
           )}
         </main>