Skip to content

Commit

Permalink
feat: style
Browse files Browse the repository at this point in the history
  • Loading branch information
@PedroLeale
PedroLeale committed Dec 13, 2023
1 parent d66ffdb commit c8068cc
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 131 deletions.
66 changes: 37 additions & 29 deletions front-end/components/Contracts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import { useQuery } from "@apollo/client";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export const Contracts = () => {
interface ContractsProps {
search: string;
}

export const Contracts = ({ search }: ContractsProps) => {
const [
skip,
// setSkip
Expand All @@ -26,36 +30,40 @@ export const Contracts = () => {
}, [data]);

return (
<div className="container mx-auto p-4">
<div className="container mx-8 p-4">
{data?.peerGradingDeployeds &&
data.peerGradingDeployeds.map(
({ id, commitRevealAddr, peerGradingAddress, blockTimestamp }) => (
<div
onClick={() => {
router.push({
pathname: "/contract",
query: {
commitRevealAddr,
peerGradingAddress,
},
});
}}
key={id}
className="bg-white p-4 m-2 rounded border border-gray-300 cursor-pointer"
>
<span className="block font-bold text-gray-900 text-lg">
Peer grading at {peerGradingAddress}
</span>
<span className="block text-gray-700 text-sm mb-2">
Randomness contract: {commitRevealAddr}
</span>

<span>
Deployed at {new Date(blockTimestamp * 1000).toISOString()}
</span>
</div>
data.peerGradingDeployeds
.filter(({ peerGradingAddress }) =>
peerGradingAddress.includes(search)
)
)}
.map(
({ id, commitRevealAddr, peerGradingAddress, blockTimestamp }) => (
<div
onClick={() => {
router.push({
pathname: "/contract",
query: {
commitRevealAddr,
peerGradingAddress,
},
});
}}
key={id}
className="bg-white p-4 m-2 rounded border border-gray-300 cursor-pointer"
>
<span className="block font-bold text-gray-900 text-lg">
Peer grading at {peerGradingAddress}
</span>
<span className="block text-gray-700 text-sm mb-2">
Randomness contract: {commitRevealAddr}
</span>

<span>
Deployed at {new Date(blockTimestamp * 1000).toISOString()}
</span>
</div>
)
)}
</div>
);
};
188 changes: 96 additions & 92 deletions front-end/components/Explanation/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,112 @@
export const Explanation = () => {
return (
<div className="flex flex-row">
<div className="p-4 rounded bg-white w-1/2 m-auto">
<h1 className="text-2xl font-bold mb-4">
Peer Grading: An Ethereum Solution
</h1>
<p className="mb-2">
<strong>Authors:</strong>
Pedro Henrique Bufulin de Almeida, Pedro Henrique Resende Ribeiro,
Pedro Leale
</p>
<p className="mb-2">
<strong>University:</strong>
Federal University of Uberlândia
</p>
<div className="p-4 m-2 bg-white w-1/2 m-auto hover:bg-gray-200 transition-colors duration-200">
<div className="p-4 rounded border border-4 border-emerald-600">
<h1 className="text-2xl font-bold mb-4">
Peer Grading: An Ethereum Solution
</h1>
<p className="mb-2">
<strong>Authors:</strong>
Pedro Henrique Bufulin de Almeida, Pedro Henrique Resende Ribeiro,
Pedro Leale
</p>
<p className="mb-2">
<strong>University:</strong>
Federal University of Uberlândia
</p>

<h2 className="text-xl font-semibold mt-4 mb-2">The Problem</h2>
<p className="mb-4">
A group of individuals needs to grade various works produced by them,
considering some common but imprecise or subjective quality criteria.
For example, students need to grade each {`other's`} reports based on
their quality.
</p>
<h2 className="text-xl font-semibold mt-4 mb-2">The Problem</h2>
<p className="mb-4">
A group of individuals needs to grade various works produced by
them, considering some common but imprecise or subjective quality
criteria. For example, students need to grade each {`other's`}{" "}
reports based on their quality.
</p>

<h2 className="text-xl font-semibold mt-4 mb-2">Protocol</h2>
<p className="mb-4">
A Smart Contract implementing a trustless/Game Theoretic protocol is
used. The protocol is designed such that participants do not need to
act honestly but are incentivized to act in a manner that maximizes
their gains.
</p>
<h2 className="text-xl font-semibold mt-4 mb-2">Protocol</h2>
<p className="mb-4">
A Smart Contract implementing a trustless/Game Theoretic protocol is
used. The protocol is designed such that participants do not need to
act honestly but are incentivized to act in a manner that maximizes
their gains.
</p>

<h2 className="text-xl font-semibold mt-4 mb-2">Objectives</h2>
<ul className="list-disc list-inside mb-4">
<li>To establish a fair grading system.</li>
<li>
To utilize {`Ethereum's`} blockchain technology for transparency.
</li>
<li>
To reduce the subjectivity in grading through a smart contract.
</li>
</ul>
<h2 className="text-xl font-semibold mt-4 mb-2">Objectives</h2>
<ul className="list-disc list-inside mb-4">
<li>To establish a fair grading system.</li>
<li>
To utilize {`Ethereum's`} blockchain technology for transparency.
</li>
<li>
To reduce the subjectivity in grading through a smart contract.
</li>
</ul>

<h2 className="text-xl font-semibold mt-4 mb-2">Contact Us</h2>
<p className="mb-4">
For more information, please reach out to the authors via{" "}
<a href="https://github.com/PedroLeale/Peer-Grading-ETH">
<span className="underline text-[#3366CC]">github</span>
</a>
</p>
<h2 className="text-xl font-semibold mt-4 mb-2">Contact Us</h2>
<p className="mb-4">
For more information, please reach out to the authors via{" "}
<a href="https://github.com/PedroLeale/Peer-Grading-ETH">
<span className="underline text-[#3366CC]">github</span>
</a>
</p>
</div>
</div>

<div className="p-4 w-1/2">
<h1 className="text-2xl font-bold mb-4">
How to use this helper application
</h1>
<div className="p-4 rounded border border-4 border-emerald-600 hover:bg-gray-200 transition-colors duration-200">
<h1 className="text-2xl font-bold mb-4">
How to use this helper application
</h1>

<h2 className="text-xl font-semibold mt-4 mb-2">
Step 1: Have a dedicated RPC url
</h2>
<p className="mb-4">
This application requires reading events from the blockchain and{" "}
{`it's`} more reliable to do that with a dedicated RPC. Just sue some
dedicated RPC node service and it should be enough.
</p>
<h2 className="text-xl font-semibold mt-4 mb-2">
Step 1: Have a dedicated RPC url
</h2>
<p className="mb-4">
This application requires reading events from the blockchain and{" "}
{`it's`} more reliable to do that with a dedicated RPC. Just sue
some dedicated RPC node service and it should be enough.
</p>

<h2 className="text-xl font-semibold mt-4 mb-2">
Step 2: Insert Contract Address
</h2>
<p className="mb-4">
Navigate to{" "}
<code className="text-sm bg-gray-200 p-1 rounded">
/contract/[Your-Contract-Address]
</code>{" "}
in the URL to view the deployed peer grading contract.
<br />
Example:{" "}
<code className="text-sm bg-gray-200 p-1 rounded">
/contract/0x793591f2569B27208Df6ed3CEB396E1C89f4c630
</code>
</p>
<h2 className="text-xl font-semibold mt-4 mb-2">
Step 2: Insert Contract Address
</h2>
<p className="mb-4">
Navigate to{" "}
<code className="text-sm bg-gray-200 p-1 rounded">
/contract/[Your-Contract-Address]
</code>{" "}
in the URL to view the deployed peer grading contract.
<br />
Example:{" "}
<code className="text-sm bg-gray-200 p-1 rounded">
/contract/0x793591f2569B27208Df6ed3CEB396E1C89f4c630
</code>
</p>

<h2 className="text-xl font-semibold mt-4 mb-2">
Step 2: All the participants interact with the contract in the
following order
</h2>
<ul className="list-disc list-inside mb-4">
<li>
First, the participants publish their articles to IPFS. These{" "}
</li>
<li>
then they generate a random value via a RandomnessSource contract
</li>
<li>
Based on the randomness generated, the assignments can be
distributed to each participant
</li>
<li>A participant can then propose a consensus</li>
<li>
Participants evaluate their penalties, and they can repeat sending
consensus. This loop cycles continues until a final consensus is
voted
</li>
</ul>
<h2 className="text-xl font-semibold mt-4 mb-2">
Step 2: All the participants interact with the contract in the
following order
</h2>
<ul className="list-disc list-inside mb-4">
<li>
First, the participants publish their articles to IPFS. These{" "}
</li>
<li>
then they generate a random value via a RandomnessSource contract
</li>
<li>
Based on the randomness generated, the assignments can be
distributed to each participant
</li>
<li>A participant can then propose a consensus</li>
<li>
Participants evaluate their penalties, and they can repeat sending
consensus. This loop cycles continues until a final consensus is
voted
</li>
</ul>
</div>
</div>
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions front-end/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,11 @@ const NavLink = ({
py={1}
rounded={"md"}
color="black"
fontWeight="bold"
_hover={{
color: "black",
textDecoration: "none",
bg: useColorModeValue("gray.200", "gray.700"),
bg: useColorModeValue("rgb(16 185 129)", "rgb(4 120 87)"),
}}
href={"#"}
>
Expand All @@ -56,7 +57,7 @@ export const Navbar = () => {

return (
<>
<Box bg={`#D9D9D9`} px={4}>
<Box bg={`rgb(5 150 105)`} px={4}>
<Flex h={16} alignItems={"center"} justifyContent={"space-between"}>
<div className="flex flex-row items-center">
<Link href="/home">
Expand Down
2 changes: 1 addition & 1 deletion front-end/components/WalletButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const WalletButton = () => {
/>
<span className="ml-3">{renderWalletText(status, address)}</span>
</div>
<BaseModal onClose={onClose} isOpen={isOpen} title="connect wallet">
<BaseModal onClose={onClose} isOpen={isOpen} title="Connect wallet">
<Wallets />
</BaseModal>
</div>
Expand Down
35 changes: 35 additions & 0 deletions front-end/pages/contracts.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { BaseLayout } from "@/components/layouts/BaseLayout";
import type { ReactNode } from "react";
import { Contracts } from "@/components/Contracts";
import { useState } from "react";

interface PageWithLayout extends React.FC {
getLayout?: (page: ReactNode) => ReactNode;
}

const ContractsPage: PageWithLayout = () => {
const [search, setSearch] = useState("");

return (
<div className="py-2 px-4 max-w-3xl mx-auto">
<div className="mb-4">
<input
type="text"
className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-600"
placeholder="Search for contract hash"
value={search}
onChange={(e) => {
setSearch(e.target.value);
}}
/>
</div>
<Contracts search={search} />
</div>
);
};

ContractsPage.getLayout = function getLayout(page: ReactNode) {
return <BaseLayout>{page}</BaseLayout>;
};

export default ContractsPage;
3 changes: 1 addition & 2 deletions front-end/pages/create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,8 @@ const CreatePage = () => {
};

return (
<div className=" p-2 m-auto w-1/2 justify-center flex flex-col items-left rounded-md bg-[##e7e8ea] text-[#444]">
<div className="p-2 mt-8 m-auto w-1/2 justify-center flex flex-col items-left rounded-md bg-[##e7e8ea] text-[#444] rounded border border-4 border-emerald-600">
<h1 className="text-2xl font-bold mb-4">Create a peer review</h1>

<p className="mb-4">
First, add each participant and their respective report. These will be
uploaded to IPFS, and each report will be linked to the participant by
Expand Down
9 changes: 4 additions & 5 deletions front-end/pages/home.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import Link from "next/link";
import { Explanation } from "@/components/Explanation";
import { BaseLayout } from "@/components/layouts/BaseLayout";
import { type ReactNode } from "react";

import { Contracts } from "@/components/Contracts";

function Home() {
return (
<div className=" w-1000 h-screen m-auto flex flex-col ">
<Explanation />

<h1 className="p-2 text-2xl font-bold mb-4">
Some example contracts below:
<Link href="/contracts" className="text-blue-500 hover:underline">
Go to Contracts Page
</Link>
</h1>

<Contracts />
</div>
);
}
Expand Down

0 comments on commit c8068cc

Please sign in to comment.