Dapp update

dapp/package.json

@@ -4,9 +4,12 @@
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.0",
     "@creit.tech/stellar-wallets-kit": "^1.0.0",
+    "@nanostores/react": "^0.7.3",
     "astro": "^4.2.4",
     "install": "^0.13.0",
     "js-sha3": "^0.9.3",
+    "nanostores": "^0.11.3",
+    "react-hot-toast": "^2.4.1",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4"
   },

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 />
@@ -46,26 +42,39 @@ import Loading from "./utils/Loading.astro";
 </div>
 
 <script>
-  import { commitHash } from "../service/ProjectService";
+  import { commitHash } from "../service/WriteContractService";
   import { loadProjectInfo } from "../service/StateService";
   import { loadedPublicKey } from "./stellar-wallets-kit";
+  import { latestCommit } from "../utils/store";
 
   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;
 
+    // Subscribe to latestCommit changes
+    latestCommit.subscribe((value) => {
+      if (commit_hash) {
+        commit_hash.value = value;
+      }
+    });
+
     const wrap_loader = document.getElementById(
       "wrap-commit-loader",
     ) as HTMLDivElement;
@@ -76,12 +85,11 @@ import Loading from "./utils/Loading.astro";
       "[data-commit-hash]",
     ) as HTMLButtonElement;
 
-    if (button) {
-      button.addEventListener("click", async () => {
-        wrap_loader.style.display = "block";
-        wrap_button.style.display = "none";
-        try {
-          const commit_status = await commitHash(commit_hash.value);
+    async function handleCommit() {
+      wrap_loader.style.display = "block";
+      wrap_button.style.display = "none";
+      try {
+        const commit_status = await commitHash(commit_hash.value);
 
         wrap_loader.style.display = "none";
         wrap_button.style.display = "block";
@@ -93,6 +101,22 @@ import Loading from "./utils/Loading.astro";
       } catch (e) {
         console.error(e);
       }
-    });
-  }});
+    }
+
+    if (button) {
+      button.addEventListener("click", handleCommit);
+    }
+
+    if (commit_hash) {
+      commit_hash.addEventListener("keypress", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          handleCommit();
+        }
+      });
+    }
+
+    // Add event listener for wallet connection
+    window.addEventListener('walletConnected', updateCommitSectionVisibility);
+  });
 </script>

dapp/src/components/CommitHistory.jsx

@@ -1,23 +1,50 @@
 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 { formatDate } from '../utils/formatTimeFunctions.ts';
+import { loadProjectRepoInfo, loadConfigData } from '../service/StateService';
+import { projectInfoLoaded, latestCommit } from '../utils/store.js';
+import { useStore } from '@nanostores/react';
 
 const CommitHistory = () => {
-  const [commitHistory, setCommitHistory] = React.useState([]);
+  const isProjectInfoLoaded = useStore(projectInfoLoaded);
+  const [commitHistory, setCommitHistory] = useState([]);
+  const [authors, setAuthors] = useState([]);
 
-  React.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 fetchCommitHistory = async () => {
+    const projectRepoInfo = loadProjectRepoInfo();
+    if (projectRepoInfo?.author && projectRepoInfo?.repository) {
+      const history = await getCommitHistory(projectRepoInfo.author, projectRepoInfo.repository);
+      setCommitHistory(history);
+
+      // Set the latest commit
+      if (history.length > 0 && history[0].commits.length > 0) {
+        latestCommit.set(history[0].commits[0].sha);
       }
-    };
-    fetchCommitHistory();
-  }, []);
+    }
+  };
+
+  const addMaintainerBadge = () => {
+    const configData = loadConfigData();
+    if (configData.authorGithubNames && configData.authorGithubNames.length > 0) {
+      const authors = configData.authorGithubNames.map(name => name.toLowerCase());
+      setAuthors(authors);
+    } else {
+      console.log("Can not read config data.");
+    }
+  }
+
+  const loadCommitInfo = () => {
+    if (isProjectInfoLoaded) {
+      fetchCommitHistory();
+      addMaintainerBadge();
+    }
+  }
+
+  useEffect(() => {
+    loadCommitInfo();
+  }, [isProjectInfoLoaded]);
 
   return (
     <div className="commit-history-container max-h-[560px] overflow-auto relative pl-8">
@@ -37,6 +64,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

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { formatTime } from '../service/utils';
+import { formatTime } from '../utils/formatTimeFunctions';
 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">
+              verified commit
+            </div>
+          )}
+          {isMaintainer && (
+            <div className="text-xs font-bold tracking-tighter leading-3 bg-blue-200 rounded-sm p-0.5">
+              verified 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,27 +1,21 @@
-<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">Connect</button>
 </div>
 
-<style>
-  .wrap {
-    text-align: center;
-    max-width: 12rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>
-
 <script>
+  import { truncateMiddle } from "../utils/utils";
   import { kit, loadedPublicKey, setPublicKey } from "./stellar-wallets-kit";
 
   document.addEventListener("astro:page-load", () => {
     const button = document.querySelector(
       "[data-connect]",
     ) as HTMLButtonElement;
 
+
     async function setLoggedIn(publicKey: string) {
-      button.textContent = `Signed in as ${publicKey}`;
+      const truncatedKey = truncateMiddle(publicKey, 13);
+      button.textContent = truncatedKey;
+      button.title = publicKey;
     }
 
     const connectedPublicKey = loadedPublicKey();