Dapp update

dapp/src/components/Commit.astro

@@ -1,6 +1,7 @@
 ---
 import Topic from "./utils/Topic.astro";
 import Loading from "./utils/Loading.astro";
+import PrimaryButton from "./utils/PrimaryButton.astro";
 ---
 
 <div id="update-commit-section" class="hidden">
@@ -9,9 +10,9 @@ import Loading from "./utils/Loading.astro";
   </div>
 
   <div
-    class="relative flex flex-col items-center md:flex-row my-6 bg-zinc-100 rounded-[45px]"
+    class="relative flex flex-col items-center md:flex-row my-6 bg-zinc-100 rounded-3xl sm:rounded-[45px]"
   >
-    <div class="row items-center py-12 px-4 md:px-20 md:w-8/12 md:py-10">
+    <div class="row items-center py-8 sm:py-12 px-6 sm:px-12 md:px-20 w-full md:w-8/12 md:py-10">
       <div class="space-y-8 md:w-full">
         <label class="block mb-2 text-base font-medium text-black">
           Commit hash
@@ -22,21 +23,16 @@ import Loading from "./utils/Loading.astro";
             class="block p-3 w-full text-base text-black bg-white rounded-lg border shadow-sm focus:ring-black focus:border-black"
             placeholder="Last commit hash"
             required
-            minlength="40"
-            maxlength="40"
+            minlength="64"
+            maxlength="64"
           />
         </label>
-        <div id="wrap-commit-button">
-          <button
-            data-commit-hash
-            aria-controls="commit-hash"
-            class="w-full py-5 bg-zinc-900 rounded-[14px] justify-center gap-2.5 inline-flex"
-          >
-            <span class="text-center text-white text-xl font-normal leading-7"
-              >Commit on-chain</span
-            >
-          </button>
-        </div>
+        <PrimaryButton
+          wrapId="wrap-commit-button"
+          dataAttr="data-commit-hash"
+          ariaControls="commit-hash"
+          buttonText="Commit on-chain"
+        />
       </div>
       <div id="wrap-commit-loader" class="hidden">
         <Loading />
@@ -51,17 +47,22 @@ import Loading from "./utils/Loading.astro";
   import { loadedPublicKey } from "./stellar-wallets-kit";
 
   document.addEventListener("astro:page-load", () => {
-    const projectInfo = loadProjectInfo();
-
-    if (projectInfo) {
-      const connectedPublicKey = loadedPublicKey();
-
-      const isMaintainer = connectedPublicKey ? projectInfo.maintainers.includes(connectedPublicKey) : false;
-      const updateCommitSection = document.getElementById("update-commit-section");
-      if (updateCommitSection) {
-        updateCommitSection.classList.toggle("hidden", !isMaintainer);
+    function updateCommitSectionVisibility() {
+      const projectInfo = loadProjectInfo();
+
+      if (projectInfo) {
+        const connectedPublicKey = loadedPublicKey();
+        const isMaintainer = connectedPublicKey ? projectInfo.maintainers.includes(connectedPublicKey) : false;
+        const updateCommitSection = document.getElementById("update-commit-section");
+        if (updateCommitSection) {
+          updateCommitSection.classList.toggle("hidden", !isMaintainer);
+        }
       }
     }
+
+    // Call the function when the page loads
+    updateCommitSectionVisibility();
+
     const commit_hash = document.getElementById(
       "commit_hash",
     ) as HTMLInputElement;
@@ -83,16 +84,19 @@ import Loading from "./utils/Loading.astro";
         try {
           const commit_status = await commitHash(commit_hash.value);
 
-        wrap_loader.style.display = "none";
-        wrap_button.style.display = "block";
-        if (!commit_status) {
-          alert("Hash could not be committed! Please retry.");
-        } else {
-          wrap_button.innerHTML = "Hash committed!";
+          wrap_loader.style.display = "none";
+          wrap_button.style.display = "block";
+          if (!commit_status) {
+            alert("Hash could not be committed! Please retry.");
+          } else {
+            wrap_button.innerHTML = "Hash committed!";
+          }
+        } catch (e) {
+          console.error(e);
         }
-      } catch (e) {
-        console.error(e);
-      }
-    });
-  }});
+    })};
+
+    // Add event listener for wallet connection
+    window.addEventListener('walletConnected', updateCommitSectionVisibility);
+  });
 </script>

dapp/src/components/CommitHistory.jsx

@@ -1,22 +1,35 @@
 import React from 'react';
+import { useState, useEffect } from 'react';
 import { getCommitHistory } from '../service/GithubService';
 import CommitRecord from './CommitRecord.jsx';
 import { formatDate } from '../service/utils';
-import { loadProjectRepoInfo } from '../service/StateService';
+import { loadProjectRepoInfo, loadConfigData } from '../service/StateService';
 
 const CommitHistory = () => {
-  const [commitHistory, setCommitHistory] = React.useState([]);
+  const [commitHistory, setCommitHistory] = useState([]);
+  const [authors, setAuthors] = useState([]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const fetchCommitHistory = async () => {
       const projectRepoInfo = loadProjectRepoInfo();
       if (projectRepoInfo?.author && projectRepoInfo?.repository) {
         const history = await getCommitHistory(projectRepoInfo.author, projectRepoInfo.repository);
-        console.log("history:", history);
         setCommitHistory(history);
       }
     };
+
+    const addMaintainerBadge = () => {
+      const configData = loadConfigData();
+      if (configData) {
+        const authors = configData.authorGithubNames.map(name => name.toLowerCase());
+        setAuthors(authors);
+      } else {
+        console.log("Can not read config data.");
+      }
+    }
+
     fetchCommitHistory();
+    addMaintainerBadge();
   }, []);
 
   return (
@@ -37,6 +50,7 @@ const CommitHistory = () => {
                   authorGithubLink={commit.author.html_url}
                   sha={commit.sha}
                   commitLink={commit.html_url}
+                  isMaintainer={authors ? authors.includes(commit.author.name.toLowerCase()) : false}
                 />
               </div>
             ))}

dapp/src/components/CommitRecord.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { formatTime } from '../service/utils';
 import { loadProjectLatestSha } from '../service/StateService';
 
-const CommitRecord = ({ message, date, authorName, authorGithubLink, sha, commitLink }) => {
+const CommitRecord = ({ message, date, authorName, authorGithubLink, sha, commitLink, isMaintainer }) => {
   const [isCopied, setIsCopied] = useState(false);
   const [isLatestCommit, setIsLatestCommit] = useState(false);
   const formattedMessage = message.split(/\r?\n/).map(line => line.trim()).filter(Boolean);
@@ -28,10 +28,19 @@ const CommitRecord = ({ message, date, authorName, authorGithubLink, sha, commit
   };
 
   return (
-    <div className={`commit-record relative bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex justify-between items-start ${isLatestCommit ? 'border-2 border-blue-300 bg-zinc-300' : ''}`} data-sha={sha} id={isLatestCommit ? 'latest-commit-record' : undefined}>
-      {isLatestCommit && (
-        <div className="absolute top-0.5 left-1 text-xs font-bold tracking-tighter leading-3 bg-lime rounded-sm p-0.5">
-          latest commit
+    <div className={`commit-record relative bg-white pt-5 pb-3 px-4 rounded-lg border border-gray-200 shadow-sm flex justify-between items-start ${isLatestCommit ? 'border-2 border-blue-300 bg-zinc-300' : ''}`} data-sha={sha} id={isLatestCommit ? 'latest-commit-record' : undefined}>
+      {(isLatestCommit || isMaintainer) && (
+        <div className="absolute top-0.5 left-1 flex space-x-1">
+          {isLatestCommit && (
+            <div className="text-xs font-bold tracking-tighter leading-3 bg-lime rounded-sm p-0.5">
+              latest commit
+            </div>
+          )}
+          {isMaintainer && (
+            <div className="text-xs font-bold tracking-tighter leading-3 bg-blue-200 rounded-sm p-0.5">
+              by maintainer
+            </div>
+          )}
         </div>
       )}
       <div className="commit-info flex-grow overflow-hidden mr-4">
@@ -48,12 +57,22 @@ const CommitRecord = ({ message, date, authorName, authorGithubLink, sha, commit
         )}
         <div className="commit-details text-sm text-gray-600 mt-1">
           <a href={authorGithubLink} target="_blank" rel="noopener noreferrer" className="author-name font-semibold hover:underline hover:text-blue-500">{authorName}</a>
-          <span className="mx-1">committed on</span>
-          <span className="commit-date">{formatTime(date)}</span>
+          <span className="ml-1 hidden sm:inline"> committed on</span>
+          <span className="commit-date ml-1"> {formatTime(date)}</span>
         </div>
       </div>
       <div className="commit-sha flex items-center space-x-2 flex-shrink-0">
-        <a href={commitLink} target="_blank" rel="noopener noreferrer" className="sha text-sm font-mono text-gray-500 hover:bg-zinc-400 transition-colors duration-200 px-2 py-1 rounded">{sha.substring(0, 7)}</a>
+        <div className="relative group">
+          <a href={commitLink} target="_blank" rel="noopener noreferrer" className="sha text-sm font-mono text-gray-500 hover:bg-zinc-400 transition-colors duration-200 px-2 py-1 rounded">
+            {sha.substring(0, 7)}
+          </a>
+          <div className="absolute -left-1/4 sm:-left-full bottom-full mb-2 -translate-x-1/2 hidden group-hover:block">
+            <div className="bg-black text-white text-xs py-1 px-2 rounded shadow-lg max-w-[54vw] sm:max-w-[90vw] break-words">
+              {sha}
+              <div className="absolute left-2/3 sm:left-3/4 top-full border-4 border-transparent border-t-black"></div>
+            </div>
+          </div>
+        </div>
         <button className="copy-button hover:bg-zinc-400 transition-colors duration-200 p-1 rounded" onClick={handleCopy}>
           {isCopied ? (
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 text-green-500">

dapp/src/components/ConnectWallet.astro

@@ -1,17 +1,7 @@
-<div id="connect-wrap" class="wrap" aria-live="polite">
-  <button data-connect aria-controls="connect-wrap">Connect</button>
+<div id="connect-wrap" aria-live="polite">
+  <button data-connect aria-controls="connect-wrap" class="text-center text-sm sm:text-base max-w-28 sm:max-w-36 md:max-w-44 truncate">Connect</button>
 </div>
 
-<style>
-  .wrap {
-    text-align: center;
-    max-width: 12rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>
-
 <script>
   import { kit, loadedPublicKey, setPublicKey } from "./stellar-wallets-kit";
 
@@ -21,7 +11,7 @@
     ) as HTMLButtonElement;
 
     async function setLoggedIn(publicKey: string) {
-      button.textContent = `Signed in as ${publicKey}`;
+      button.textContent = `${publicKey}`;
     }
 
     const connectedPublicKey = loadedPublicKey();

dapp/src/components/GetCommit.astro

@@ -1,27 +1,23 @@
 ---
 import Topic from "./utils/Topic.astro";
 import Loading from "./utils/Loading.astro";
+import PrimaryButton from "./utils/PrimaryButton.astro";
 ---
 
 <div class="relative flex flex-col items-center md:flex-row">
   <Topic title="Latest hash" description="Get the latest hash on-chain" />
 </div>
 
 <div
-  class="relative flex flex-col items-center md:flex-row my-6 bg-zinc-100 rounded-[45px]"
+  class="relative flex flex-col items-center md:flex-row my-6 bg-zinc-100 rounded-3xl sm:rounded-[45px]"
 >
-  <div class="row items-center py-12 px-4 md:px-20 md:w-8/12 md:py-10">
-    <div id="wrap-get-hash-button" class="space-y-8 md:w-full">
-      <button
-        data-project-get-hash
-        aria-controls="get-hash"
-        class="w-full py-5 bg-zinc-900 rounded-[14px] justify-center gap-2.5 inline-flex"
-      >
-        <span class="text-center text-white text-xl font-normal leading-7"
-          >Latest hash</span
-        >
-      </button>
-    </div>
+  <div class="row items-center py-8 sm:py-10 md:py-12 px-6 sm:px-10 md:px-20 w-full md:w-8/12">
+    <PrimaryButton
+      wrapId="wrap-get-hash-button"
+      dataAttr="data-project-get-hash"
+      ariaControls="get-hash"
+      buttonText="Latest hash"
+    />
     <div id="wrap-get-hash-loader" class="hidden">
       <Loading />
     </div>
@@ -51,7 +47,49 @@ import Loading from "./utils/Loading.astro";
 
           wrap_loader.style.display = "none";
           wrap_button.style.display = "block";
-          wrap_button.innerHTML = `${project_hash}`;
+
+          if (project_hash) {
+            const hashDisplay = document.createElement('div');
+            hashDisplay.className = 'max-w-[90%] relative group';
+            const content = document.createElement("p");
+            content.className = 'truncate';
+            content.textContent = project_hash;
+
+            hashDisplay.appendChild(content)
+
+            const popup = document.createElement('div');
+            popup.textContent = project_hash;
+            popup.className = 'absolute left-1/2 -translate-x-1/2 bottom-full mb-2 hidden group-hover:block bg-zinc-800 text-white text-center text-sm px-2 py-1 rounded-md max-w-[90vw] break-all whitespace-normal';
+            popup.style.width = 'max-content';
+
+            const triangle = document.createElement('div');
+            triangle.className = 'absolute left-1/2 -translate-x-1/2 -bottom-1 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-zinc-800';
+
+            popup.appendChild(triangle);
+            hashDisplay.appendChild(popup);
+
+            const copyIcon = document.createElement('button');
+            copyIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="white" stroke="currentColor"><path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/><path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/></svg>';
+            copyIcon.className = 'text-gray-600 hover:text-gray-800 focus:outline-none';
+            copyIcon.addEventListener('click', () => {
+              navigator.clipboard.writeText(project_hash).then(() => {
+                copyIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="green"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
+                setTimeout(() => {
+                  copyIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="white" stroke="currentColor"><path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/><path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/></svg>';
+                }, 2000);
+              });
+            });
+
+            const container = document.createElement('div');
+            container.className = 'flex items-center justify-around w-full max-w-[450px] rounded-md border border-zinc-400';
+            container.appendChild(hashDisplay);
+            container.appendChild(copyIcon);
+
+            wrap_button.innerHTML = '';
+            wrap_button.appendChild(container);
+          } else {
+            wrap_button.innerHTML = '';
+          }
         } catch (e) {
           console.error(e);
         }