Skip to content

Commit

Permalink
Update workflows of on chain interaction (#47)
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xExp-po
0xExp-po authored Sep 15, 2024
1 parent cd5cb45 commit a6ab9f0
Show file tree
Hide file tree
Showing 8 changed files with 229 additions and 54 deletions.
20 changes: 13 additions & 7 deletions dapp/src/components/ProjectCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,12 @@ const ProjectCard = ({ config }) => {
githubLink: tomlData.DOCUMENTATION?.ORG_GITHUB || "",
},
socialLinks: {
twitter: "",
telegram: "",
discord: "",
instagram: "",
...(tomlData.DOCUMENTATION?.ORG_TWITTER && { twitter: tomlData.DOCUMENTATION.ORG_TWITTER }),
...(tomlData.DOCUMENTATION?.ORG_TELEGRAM && { telegram: tomlData.DOCUMENTATION.ORG_TELEGRAM }),
...(tomlData.DOCUMENTATION?.ORG_DISCORD && { discord: tomlData.DOCUMENTATION.ORG_DISCORD }),
...(tomlData.DOCUMENTATION?.ORG_INSTAGRAM && { instagram: tomlData.DOCUMENTATION.ORG_INSTAGRAM }),
...(tomlData.DOCUMENTATION?.ORG_FACEBOOK && { facebook: tomlData.DOCUMENTATION.ORG_FACEBOOK }),
...(tomlData.DOCUMENTATION?.ORG_REDDIT && { reddit: tomlData.DOCUMENTATION.ORG_REDDIT }),
},
authorGithubNames: tomlData.PRINCIPALS?.map((p) => p.github) || [],
maintainersAddresses: tomlData.ACCOUNTS || [],
Expand Down Expand Up @@ -69,8 +71,8 @@ const ProjectCard = ({ config }) => {
/>
</div>
<div className="px-2 pb-2">
<h3 className="project-name text-xl font-bold mt-2 mb-1">{config.projectName}</h3>
<p className="description text-sm line-clamp-2 h-10">{config.description}</p>
<h3 className="project-name text-xl font-bold mt-2 mb-1">{config.projectName || "No project name"}</h3>
<p className="description text-sm line-clamp-2 h-10">{config.description || "No description"}</p>
<div className="links mt-4 ml-2 flex gap-2 items-center">
{config.officials.websiteLink && (
<a href={config.officials.websiteLink} target="_blank" rel="noopener noreferrer">
Expand All @@ -90,7 +92,11 @@ const ProjectCard = ({ config }) => {
)
))}
</div>
<p className="company-name mt-3 text-right">by <span className="font-bold">{config.companyName}</span></p>
{config.companyName ? (
<p className="company-name mt-3 text-right">by <span className="font-bold">{config.companyName}</span></p>
) : (
<p className="company-name mt-3 text-right">No company name</p>
)}
</div>
</div>
);
Expand Down
114 changes: 99 additions & 15 deletions dapp/src/components/ProjectList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,19 @@ import ProjectInfoModal from './utils/ProjectInfoModal.jsx';
import { getDemoConfigData } from '../constants/demoConfigData';
import { refreshLocalStorage, setProjectId, loadConfigData } from '../service/StateService';
import { projectCardModalOpen } from '../utils/store.js';
import { convertGitHubLink } from '../utils/editLinkFunctions';
import { convertGitHubLink, getAuthorRepo } from '../utils/editLinkFunctions';
import { getProjectFromName } from '../service/ReadContractService';
import { fetchTOMLFromConfigUrl } from '../service/GithubService';

const ProjectList = () => {
const isProjectInfoModalOpen = useStore(projectCardModalOpen);
const [projects, setProjects] = useState(undefined);
const [filteredProjects, setFilteredProjects] = useState(undefined);
const [searchTerm, setSearchTerm] = useState('');
const [category, setCategory] = useState('all');
const [isLoading, setIsLoading] = useState(false);
const [isInOnChain, setIsInOnChain] = useState(false);
const [configInfo, setConfigInfo] = useState();
const [registerButtonVisible, setRegisterButtonVisible] = useState(false);

const [isModalOpen, setModalOpen] = useState(false);
const [projectInfo, setProjectInfo] = useState(null);
Expand All @@ -38,13 +43,22 @@ const ProjectList = () => {

useEffect(() => {
if (projects) {
setRegisterButtonVisible(false);
const filtered = projects.filter(project =>
project?.projectName.toLowerCase().includes(searchTerm.toLowerCase()) &&
(category === 'all')
project?.projectName.toLowerCase().includes(searchTerm.toLowerCase())
);
setFilteredProjects(filtered);

if (searchTerm && filtered.length === 0) {
const timer = setTimeout(() => {
checkProjectOnChain(searchTerm);
setRegisterButtonVisible(true);
}, 1000);

return () => clearTimeout(timer);
}
}
}, [searchTerm, category, projects]);
}, [searchTerm, projects]);

useEffect(() => {
setModalOpen(isProjectInfoModalOpen);
Expand All @@ -71,6 +85,65 @@ const ProjectList = () => {
window.location.href = '/register';
}

const checkProjectOnChain = async (projectName) => {
console.log("search:", projectName);
setIsLoading(true);
try {
const project = await getProjectFromName(projectName);
if (project && project.name && project.config && project.maintainers) {
const tomlData = await fetchTOMLFromConfigUrl(project.config.url);
if (tomlData) {
const configData = {
projectName: project.name,
logoImageLink: tomlData.DOCUMENTATION?.ORG_LOGO || "",
thumbnailImageLink: tomlData.DOCUMENTATION?.ORG_THUMBNAIL || "",
description: tomlData.DOCUMENTATION?.ORG_DESCRIPTION || "",
companyName: tomlData.DOCUMENTATION?.ORG_NAME || "",
officials: {
websiteLink: tomlData.DOCUMENTATION?.ORG_URL || "",
githubLink: tomlData.DOCUMENTATION?.ORG_GITHUB || "",
},
socialLinks: {
...(tomlData.DOCUMENTATION?.ORG_TWITTER && { twitter: tomlData.DOCUMENTATION.ORG_TWITTER }),
...(tomlData.DOCUMENTATION?.ORG_TELEGRAM && { telegram: tomlData.DOCUMENTATION.ORG_TELEGRAM }),
...(tomlData.DOCUMENTATION?.ORG_DISCORD && { discord: tomlData.DOCUMENTATION.ORG_DISCORD }),
...(tomlData.DOCUMENTATION?.ORG_INSTAGRAM && { instagram: tomlData.DOCUMENTATION.ORG_INSTAGRAM }),
...(tomlData.DOCUMENTATION?.ORG_FACEBOOK && { facebook: tomlData.DOCUMENTATION.ORG_FACEBOOK }),
...(tomlData.DOCUMENTATION?.ORG_REDDIT && { reddit: tomlData.DOCUMENTATION.ORG_REDDIT }),
},
authorGithubNames: tomlData.PRINCIPALS?.map((p) => p.github) || [],
maintainersAddresses: tomlData.ACCOUNTS || [],
};
setConfigInfo(configData);
} else {
// alert("Can not read config data.");
const configData = {
projectName: project.name,
logoImageLink: undefined,
thumbnailImageLink: "",
description: "",
companyName: "",
officials: {
githubLink: project.config.url,
},
socialLinks: {
},
authorGithubNames: [],
maintainersAddresses: project.maintainers,
};
setConfigInfo(configData);
}
setIsInOnChain(true);
} else {
setIsInOnChain(false);
}
} catch (error) {
console.error('Error checking project on-chain:', error);
} finally {
setIsLoading(false);
}
};

return (
<div className="project-list-container">
<div className="filters flex items-center gap-2 sm:gap-4 mb-4">
Expand All @@ -89,7 +162,7 @@ const ProjectList = () => {
>
<img src='/icons/search.svg' width={20} height={20} className='icon-search'/>
</div>
</div>
</div>
</div>

{filteredProjects !== undefined && (
Expand All @@ -100,15 +173,26 @@ const ProjectList = () => {
))}
</div>
) : (
<div className="no-projects h-80 flex flex-col gap-6 justify-center items-center text-center py-4">
{/* <p className="px-3 py-1 text-base sm:text-lg font-semibold border-2 border-zinc-700 rounded-lg">No projects found</p> */}
<button
className="register-btn mr-2 px-3 sm:px-4 py-2 bg-black text-white text-2xl sm:text-3xl rounded-lg"
onClick={handleRegister}
>
Register
</button>
</div>
isLoading ? (
<div className="no-projects h-80 flex flex-col gap-6 justify-center items-center text-center py-4">
<p className="px-3 py-1 text-base sm:text-lg font-semibold border-2 border-zinc-700 rounded-lg"> looking if the project is registered on chain...</p>
</div>
) : (
isInOnChain ? (
<ProjectCard key={1} config={configInfo} />
) : (
registerButtonVisible && (
<div className="no-projects h-80 flex flex-col gap-6 justify-center items-center text-center py-4">
<button
className="register-btn mr-2 px-3 sm:px-4 py-2 bg-black text-white text-2xl sm:text-3xl rounded-lg"
onClick={handleRegister}
>
Register
</button>
</div>
)
)
)
)
)}

Expand Down
12 changes: 6 additions & 6 deletions dapp/src/components/SetProject.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,12 +89,12 @@ const TANSU_CONTRACT_ID = import.meta.env.PUBLIC_TANSU_CONTRACT_ID;
githubLink: tomlData.DOCUMENTATION?.ORG_GITHUB || "",
},
socialLinks: {
twitter: "",
telegram: "",
discord: "",
instagram: "",
facebook: "",
reddit: "",
...(tomlData.DOCUMENTATION?.ORG_TWITTER && { twitter: tomlData.DOCUMENTATION.ORG_TWITTER }),
...(tomlData.DOCUMENTATION?.ORG_TELEGRAM && { telegram: tomlData.DOCUMENTATION.ORG_TELEGRAM }),
...(tomlData.DOCUMENTATION?.ORG_DISCORD && { discord: tomlData.DOCUMENTATION.ORG_DISCORD }),
...(tomlData.DOCUMENTATION?.ORG_INSTAGRAM && { instagram: tomlData.DOCUMENTATION.ORG_INSTAGRAM }),
...(tomlData.DOCUMENTATION?.ORG_FACEBOOK && { facebook: tomlData.DOCUMENTATION.ORG_FACEBOOK }),
...(tomlData.DOCUMENTATION?.ORG_REDDIT && { reddit: tomlData.DOCUMENTATION.ORG_REDDIT }),
},
authorGithubNames: tomlData.PRINCIPALS?.map((p: { github: any; }) => p.github) || [],
maintainersAddresses: tomlData.ACCOUNTS || [],
Expand Down
17 changes: 14 additions & 3 deletions dapp/src/components/utils/Modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,20 @@ import React from 'react';

const Modal = ({ id, title, children, onClose }) => {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
<div id={id} className="modal px-3 sm:px-6 pt-3 pb-4 rounded-lg shadow-xl bg-white">
<div className="flex justify-between items-center mb-4">
<div
className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[9999]"
onClick={(e) => {
if (e.target === e.currentTarget) {
onClose();
}
}}
>
<div
id={id}
className="modal px-3 sm:px-6 pt-3 pb-4 rounded-lg shadow-xl bg-white my-4 max-h-[90vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<div className="flex justify-between items-center mb-2 md:mb-4">
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold">
{title && <span className="bg-lime px-2 py-1 rounded-lg inline-block">{title}</span>}
</h2>
Expand Down
8 changes: 4 additions & 4 deletions dapp/src/components/utils/ProjectInfoModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const ProjectInfoModal = ({ id, projectInfo, onClose }) => {

return (
<Modal id={id} title="" onClose={onClose}>
<div className="space-y-6 w-[calc(100vw-80px)] sm:w-[calc(100vw-120px)] md:w-full md:max-w-[800px]">
<div className="space-y-4 sm:space-y-6 w-[calc(100vw-80px)] sm:w-[calc(100vw-120px)] md:w-full md:max-w-[800px]">
{projectInfo && Object.keys(projectInfo).length > 0 ? (
<>
<div className="flex items-center space-x-4">
Expand All @@ -31,10 +31,10 @@ const ProjectInfoModal = ({ id, projectInfo, onClose }) => {
} */}
<h2 id="view-modal-project-name" className="text-2xl sm:text-3xl font-bold">{projectInfo.projectName || "No project name"}</h2>
</div>
<div className="flex flex-col md:flex-row gap-6">
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-3 sm:gap-6">
{/* <img id="project-thumbnail" src={projectInfo?.thumbnailImageLink || "/fallback-image.jpg"} alt="Project Thumbnail" className="w-full md:w-[40%] object-cover rounded-lg" /> */}
<img id="project-thumbnail" src={projectInfo?.logoImageLink || "/fallback-image.jpg"} alt="Project Thumbnail" className="w-full md:w-[40%] object-cover rounded-lg" />
<div className="flex-1 pt-2">
<img id="project-thumbnail" src={projectInfo?.logoImageLink || "/fallback-image.jpg"} alt="Project Thumbnail" className="w-64 sm:w-[40%] object-cover rounded-lg" />
<div className="flex-1 pt-2 w-full">
<p id="project-description" className="flex-1">{projectInfo?.description || "No description"}</p>
</div>
</div>
Expand Down
54 changes: 35 additions & 19 deletions dapp/src/constants/demoConfigData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,41 @@ export const demoConfigData = [
"GDNSSYSCSSJ76FER5WEEXME5G4MTCUBKDRQSKOYP36KUKVDB2VCMERS6"
],
},
{
projectName: "salib",
logoImageLink: "https://raw.githubusercontent.com/SALib/SALib/main/docs/assets/logo.png",
description: "Python implementations of commonly used sensitivity analysis methods. Useful in systems modeling to calculate the effects of model inputs or exogenous factors on outputs of interest.",
companyName: " SALib",
officials: {
websiteLink: "http://salib.github.io/SALib/",
githubLink: "https://github.com/SALib/SALib",
},
socialLinks: {
twitter: "https://twitter.com/",
instagram: "https://instagram.com/",
},
authorGithubNames: ["ConnectedSystems","tupui"],
maintainersAddresses: [
"GCUDW6ZF5SCGCMS3QUTELZ6LSAH6IVVXNRPRLAUNJ2XYLCA7KH7ZCVQS",
"GDQP2KPQGKIHYJGXNUIYOMHARUARCA7DJT5FO2FFOOKY3B2WSQHG4W37"
],
},
// {
// projectName: "salib",
// logoImageLink: "https://raw.githubusercontent.com/SALib/SALib/main/docs/assets/logo.png",
// description: "Python implementations of commonly used sensitivity analysis methods. Useful in systems modeling to calculate the effects of model inputs or exogenous factors on outputs of interest.",
// companyName: " SALib",
// officials: {
// websiteLink: "http://salib.github.io/SALib/",
// githubLink: "https://github.com/SALib/SALib",
// },
// socialLinks: {
// twitter: "https://twitter.com/",
// instagram: "https://instagram.com/",
// },
// authorGithubNames: ["ConnectedSystems","tupui"],
// maintainersAddresses: [
// "GCUDW6ZF5SCGCMS3QUTELZ6LSAH6IVVXNRPRLAUNJ2XYLCA7KH7ZCVQS",
// "GDQP2KPQGKIHYJGXNUIYOMHARUARCA7DJT5FO2FFOOKY3B2WSQHG4W37"
// ],
// },
// {
// projectName: "fff",
// logoImageLink: "https://github.com/0xExp-po/soroban-versioning/blob/main/website/static/img/logo.svg",
// description: "Bringing Git hashes onto Stellar’s blockchain",
// companyName: "Consulting Manao GmbH",
// officials: {
// websiteLink: "https://tansu.dev",
// githubLink: "https://github.com/0xExp-po/soroban-versioning",
// },
// socialLinks: {
// },
// authorGithubNames: ["0xExp-po"],
// maintainersAddresses: [
// "GALDGLKIXR52A5EZTIRZ2IWEZ5PWN55IY2TLA7ORFPG2VVSFVV5PYNOB",
// ],
// },
];

export function getDemoConfigData() {
Expand Down
38 changes: 38 additions & 0 deletions dapp/src/service/GithubService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,46 @@ async function fetchTOMLFromConfigUrl(configUrl: string) {
}
}

async function getTOMLFileHash(configUrl: string) {
try {
const url = getGithubContentUrlFromConfigUrl(configUrl);

if (url) {
const response = await fetch(url);

if (!response.ok) {
throw new Error(`Failed to fetch the file: ${response.statusText}`);
}

let tomlText = await response.text();

tomlText = tomlText.replace(/\r?\n/g, '\r\n');

const encoder = new TextEncoder();
const tomlBytes = encoder.encode(tomlText);

const hashBuffer = await crypto.subtle.digest('SHA-256', tomlBytes);

const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');

return hashHex;
}

return undefined;

} catch (error) {
if (error instanceof Error) {
throw new Error(error.message);
} else {
throw new Error('An unknown error occurred');
}
}
}

export {
getCommitHistory,
fetchTOML,
fetchTOMLFromConfigUrl,
getTOMLFileHash,
};
Loading

0 comments on commit a6ab9f0

Please sign in to comment.