Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update workflows of on chain interaction #47

Merged
merged 4 commits into from
Sep 15, 2024
Merged

Update workflows of on chain interaction #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c5d7246
chore: update modal style
0xExp-po Sep 14, 2024
19f7027
feat: add function to get toml file hash
0xExp-po Sep 15, 2024
bfa1f93
chore: update demo data
0xExp-po Sep 15, 2024
9d32efb
feat: add check project in on-chain
0xExp-po Sep 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions dapp/src/components/ProjectCard.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading