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

Create a landing page #111

Merged
merged 2 commits into from
Jun 3, 2024
Merged

Create a landing page #111

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a6fe71
Create a landing page
claudioantonio Jun 3, 2024
3ed2eee
Styling the learn more action
claudioantonio Jun 3, 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
105 changes: 105 additions & 0 deletions frontend/src/app/explore/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
"use client";
import { FC } from "react";
import {
Box,
Button,
Center,
Stack,
Image,
Card,
Flex,
Text,
Anchor,
SimpleGrid,
Group,
} from "@mantine/core";
import Link from "next/link";
import { useLatestState } from "../../model/reader";
import { AppBounty } from "../../model/state";
import { BountyStatusBadgeGroup } from "../../components/bountyStatus";
import { HasConnectedAccount } from "../../components/hasConnectedAccount";
import { useBlockTimestamp } from "../../hooks/block";
import { getBountyStatus } from "../../utils/bounty";

const Bounty: FC<{
index: number;
bounty: AppBounty;
blockTimestamp: bigint;
}> = ({ index, bounty, blockTimestamp }) => {
const bountyStatus = getBountyStatus(bounty, blockTimestamp);
return (
<Anchor href={"/bounty/" + index} underline="never">
<Card>
<Card.Section>
<Image
h={200}
p={6}
fit="contain"
alt="Bounty Image"
src={bounty.imgLink}
fallbackSrc="/static/default_app.webp"
/>
</Card.Section>
<Box w={400} mt="md">
<Group mb={10}>
<Text truncate="end" fw={700} size="lg">
{bounty.name}
</Text>
<BountyStatusBadgeGroup bountyStatus={bountyStatus} />
</Group>
<Text truncate="end" size="xs" c="dimmend">
{bounty.description}
</Text>
</Box>
</Card>
</Anchor>
);
};

const BountyList: FC = () => {
const stateResult = useLatestState();
const blockTimestamp = useBlockTimestamp();

switch (stateResult.kind) {
case "loading":
return <Center>Loading list of bounties...</Center>;
case "error":
return <Center>{stateResult.message}</Center>;
}

const state = stateResult.response;

return (
<SimpleGrid m="sm" cols={{ base: 1, sm: 2, lg: 3 }}>
{state.bounties.map((bounty, index) => {
return (
<Bounty
key={index}
index={index}
bounty={bounty}
blockTimestamp={blockTimestamp!}
/>
);
})}
</SimpleGrid>
);
};

const Explore: FC = () => {
return (
<Stack>
<HasConnectedAccount>
<Flex mt={20} mr={20} justify="flex-end">
<Link href={"/bounty/create"}>
<Button size="lg">Submit bounty</Button>
</Link>
</Flex>
</HasConnectedAccount>
<Center>
<BountyList />
</Center>
</Stack>
);
};

export default Explore;
109 changes: 24 additions & 85 deletions frontend/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,44 @@
"use client";
import { FC } from "react";
import {
Box,
Button,
Center,
Stack,
Image,
Card,
Flex,
Text,
Anchor,
SimpleGrid,
Group,
} from "@mantine/core";
import Link from "next/link";
import { useLatestState } from "../model/reader";
import { AppBounty } from "../model/state";
import { BountyStatusBadgeGroup } from "../components/bountyStatus";
import { HasConnectedAccount } from "../components/hasConnectedAccount";
import { useBlockTimestamp } from "../hooks/block";
import { getBountyStatus } from "../utils/bounty";

const Bounty: FC<{
index: number;
bounty: AppBounty;
blockTimestamp: bigint;
}> = ({ index, bounty, blockTimestamp }) => {
const bountyStatus = getBountyStatus(bounty, blockTimestamp);
const Home: FC = () => {
return (
<Anchor href={"/bounty/" + index} underline="never">
<Card>
<Card.Section>
<Image
h={200}
p={6}
fit="contain"
alt="Bounty Image"
src={bounty.imgLink}
fallbackSrc="/static/default_app.webp"
/>
</Card.Section>
<Box w={400} mt="md">
<Group mb={10}>
<Text truncate="end" fw={700} size="lg">
{bounty.name}
</Text>
<BountyStatusBadgeGroup bountyStatus={bountyStatus} />
</Group>
<Text truncate="end" size="xs" c="dimmend">
{bounty.description}
</Text>
</Box>
</Card>
</Anchor>
);
};
<Stack align="center">
<Card mt={20} ml={20} mr={20} withBorder>

const BountyList: FC = () => {
const stateResult = useLatestState();
const blockTimestamp = useBlockTimestamp();
<Stack mt="md" mb="md" align="center">
<Text size="40px">A Trustless</Text>
<Text size="40px">Bug Bounty Platform</Text>
</Stack>

switch (stateResult.kind) {
case "loading":
return <Center>Loading list of bounties...</Center>;
case "error":
return <Center>{stateResult.message}</Center>;
}
<Text c="dimmed" w={720} mb="md">
Bug Buster accepts software written in any major programming language.
Through a friendly web interface, hackers can test their exploits right
on the browser, without even having to sign Web3 transactions!
Once the hacker finds a valid exploit, they can finally send a transaction
requesting the reward to be transferred to their account.
All major wallets are supported!
</Text>

const state = stateResult.response;

return (
<SimpleGrid m="sm" cols={{ base: 1, sm: 2, lg: 3 }}>
{state.bounties.map((bounty, index) => {
return (
<Bounty
key={index}
index={index}
bounty={bounty}
blockTimestamp={blockTimestamp!}
/>
);
})}
</SimpleGrid>
);
};

const Home: FC = () => {
return (
<Stack>
<HasConnectedAccount>
<Flex mt={20} mr={20} justify="flex-end">
<Link href={"/bounty/create"}>
<Button size="lg">Submit bounty</Button>
<Group justify="space-between">
<Link href={"/explore"}>
<Button size="lg">Explore Bounties</Button>
</Link>
<Link style={{ textDecoration: "none", color: "white"}} href={"https://github.com/crypto-bug-hunters/bugless/blob/main/README.md"}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know GitHub redirects to the current repository URL, but it's good to have it point to the correct one right off the bat.

Suggested change
<Link style={{ textDecoration: "none", color: "white"}} href={"https://github.com/crypto-bug-hunters/bugless/blob/main/README.md"}>
<Link style={{ textDecoration: "none", color: "white"}} href={"https://github.com/crypto-bug-hunters/bug-buster/blob/main/README.md"}>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing! It was a copy and past from the old PR (before renaming). Good catch!!!

<Text size="lg">Learn More</Text>
</Link>
</Flex>
</HasConnectedAccount>
<Center>
<BountyList />
</Center>
</Group>
</Card>
</Stack>
);
};

export default Home;
export default Home;