Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@carina-akaia
carina-akaia committed Nov 26, 2024
1 parent 9ce6de9 commit 7e36117
Show file tree
Hide file tree
Showing 7 changed files with 253 additions and 272 deletions.
1 change: 1 addition & 0 deletions src/modules/pot/components/DonationsTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const DonationsTable = ({ potId }: Props) => {
potId,
page_size: 999,
});

const [currentPage, setCurrentPage] = useState(1);

// Filter (amount | date)
Expand Down
51 changes: 38 additions & 13 deletions src/modules/pot/components/PotApplicationRequirements.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { MdAppRegistration } from "react-icons/md";

import { ByPotId } from "@/common/api/indexer";
import { cn } from "@/common/ui/utils";

Expand All @@ -11,25 +13,48 @@ export const PotApplicationRequirements: React.FC<PotApplicationRequirementsProp
return (
<div
className={cn(
"flex h-44 flex-col",
"items-start justify-start gap-4 self-stretch",
"rounded-lg bg-white p-4 shadow",
"xl:w-126.5 flex h-[232px] w-full flex-col items-start justify-start",
"rounded-2xl bg-[#f7f7f7] p-2",
)}
>
{POT_METAPOOL_APPLICATION_REQUIREMENTS.map((text) => (
<div className={cn("inline-flex items-center justify-start gap-2 self-stretch")} key={text}>
<div className="relative h-6 w-6" />
<div className={cn("inline-flex items-center", "justify-start gap-2 self-stretch py-2")}>
<MdAppRegistration className="h-6 w-6" />

<div
className={cn(
"shrink grow basis-0",
"text-[17px] font-semibold leading-normal text-[#292929]",
)}
>
{"Application Requirements"}
</div>
</div>

<div
className={cn(
"flex h-44 flex-col",
"items-start justify-start gap-4 self-stretch",
"rounded-lg bg-white p-4 shadow",
)}
>
{POT_METAPOOL_APPLICATION_REQUIREMENTS.map((text) => (
<div
className={cn(
"shrink grow basis-0",
"text-sm font-normal leading-tight text-neutral-600",
)}
className={cn("inline-flex items-center justify-start gap-2 self-stretch")}
key={text}
>
{text}
<div className="relative h-6 w-6" />

<div
className={cn(
"shrink grow basis-0",
"text-sm font-normal leading-tight text-neutral-600",
)}
>
{text}
</div>
</div>
</div>
))}
))}
</div>
</div>
);
};
251 changes: 106 additions & 145 deletions src/modules/pot/components/PotHero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState } from "react";

import { MdAppRegistration } from "react-icons/md";
import { MdArrowOutward } from "react-icons/md";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

Expand Down Expand Up @@ -72,182 +72,143 @@ export const PotHero: React.FC<PotHeroProps> = ({ potId }) => {

<div
className={cn(
"md:p-2 h-140 flex flex-col items-center justify-start",
"lg:p-2 flex flex-col items-center justify-start",
"rounded-2xl bg-[#f7f7f7] p-2",
)}
>
{pot ? <PotTimeline {...{ potId }} /> : <Skeleton className="h-96 w-full" />}

<div
className={cn(
"flex h-[488px] flex-col",
"items-start justify-start",
"gap-0.5 self-stretch rounded-lg bg-background",
"min-h-122 flex flex-col items-start justify-start p-14",
"lg:gap-8 gap-10 self-stretch rounded-lg bg-background",
)}
>
<div
className={cn(
"flex h-[488px] flex-col",
"items-start justify-start gap-8 self-stretch p-14",
)}
>
<div className="inline-flex items-start justify-between self-stretch">
<div
className={cn(
"inline-flex w-[506px] flex-col",
"items-start justify-start gap-10 self-stretch",
)}
>
{pot ? (
<div
className={cn(
"self-stretch font-lora",
"text-[53px] font-medium uppercase leading-[61px] text-[#292929]",
)}
>
{pot.name}
</div>
) : (
<Skeleton className="h-8 w-32" />
)}

<div className="lg:flex-row flex flex-col items-start justify-between gap-10 self-stretch">
<div
className={cn(
"inline-flex w-[506px] flex-col",
"items-start justify-start gap-10 self-stretch",
)}
>
{pot ? (
<div
className={cn("flex h-32 flex-col items-start justify-start gap-4 self-stretch")}
>
{pot ? (
<div
className={cn(
"self-stretch",
"text-[17px] font-normal leading-normal text-neutral-600",
)}
>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
a: ({ node: _, ...props }) => (
<a
{...props}
className="text-blue-500 underline"
target="_blank"
rel="noopener noreferrer"
onClick={(event) => {
event.stopPropagation();
}}
>
{"More Info"}
</a>
),
}}
className="markdown-link"
>
{pot.description}
</ReactMarkdown>
</div>
) : (
<Skeleton className="h-9 w-full" />
className={cn(
"self-stretch font-lora",
"text-[53px] font-medium uppercase leading-[61px] text-[#292929]",
)}

{pot ? (
<Button variant="brand-outline">
<div className="relative h-[18px] w-[18px]" />

<div className="text-center text-sm font-medium leading-tight text-[#292929]">
{"More info"}
</div>
</Button>
) : null}
>
{pot.name}
</div>
</div>
) : (
<Skeleton className="h-8 w-32" />
)}

<div
className={cn("inline-flex w-[506px] flex-col", "items-end justify-start gap-6")}
className={cn("flex h-32 flex-col items-start justify-start gap-4 self-stretch")}
>
<div
className={cn(
"flex h-[232px] flex-col",
"items-start justify-start self-stretch",
"rounded-2xl bg-[#f7f7f7] p-2",
)}
>
{pot ? (
<div
className={cn(
"inline-flex items-center",
"justify-start gap-2 self-stretch py-2",
"self-stretch",
"text-[17px] font-normal leading-normal text-neutral-600",
)}
>
<MdAppRegistration className="h-6 w-6" />

<div
className={cn(
"shrink grow basis-0",
"text-[17px] font-semibold leading-normal text-[#292929]",
)}
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
a: ({ node: _, ...props }) => (
<a
{...props}
className="text-blue-500 underline"
target="_blank"
rel="noopener noreferrer"
onClick={(event) => {
event.stopPropagation();
}}
>
{"More Info"}
</a>
),
}}
className="markdown-link"
>
{"Application Requirements"}
</div>
{pot.description}
</ReactMarkdown>
</div>
) : (
<Skeleton className="h-9 w-full" />
)}

{isVotingBasedPot ? (
<PotApplicationRequirements {...{ potId }} />
) : (
pot && <PoolAllocationTable potDetail={pot} />
)}
</div>
{pot ? (
<Button variant="brand-outline">
<MdArrowOutward />

{isSignedIn && (
<div className="flex items-center gap-[12px] text-[14px]">
<ClipboardCopyButton text={referrerPotLink} customIcon={<VolunteerIcon />} />
<p>{"Earn referral fees"}</p>
</div>
)}
<span className="text-center text-sm font-medium leading-tight text-[#292929]">
{"More info"}
</span>
</Button>
) : null}
</div>
</div>

<div
className={cn(
"inline-flex items-center",
"justify-between self-stretch",
"border-t border-neutral-200 pt-4",
<div className="lg:w-a flex w-full flex-col gap-6">
{isVotingBasedPot ? (
<PotApplicationRequirements {...{ potId }} />
) : (
pot && <PoolAllocationTable potDetail={pot} />
)}
>
<div className="inline-flex flex-col items-start justify-center gap-1">
<span className="self-stretch text-sm font-medium leading-tight text-neutral-500">
{"Matching Funds Available"}
</span>

{pot ? (
<TokenTotalValue
tokenId={NATIVE_TOKEN_ID}
amountBigString={pot.matching_pool_balance}
/>
) : (
<Skeleton className="w-34 h-5" />
)}
</div>
{isSignedIn && (
<div className="flex items-center justify-end gap-2 text-sm">
<ClipboardCopyButton text={referrerPotLink} customIcon={<VolunteerIcon />} />
<p>{"Earn referral fees"}</p>
</div>
)}
</div>
</div>

<div className={cn("flex items-center justify-start gap-4")}>
{potStatuses.canApply && (
<Button
onClick={() => setApplyModalOpen(true)}
>{`Apply to ${isVotingBasedPot ? "Round" : "Pot"}`}</Button>
)}
<div
className={cn(
"inline-flex items-center justify-between self-stretch",
"w-full border-t border-neutral-200 pt-4",
)}
>
<div className="inline-flex flex-col items-start justify-center gap-1">
<span className="self-stretch text-sm font-medium leading-tight text-neutral-500">
{"Matching Funds Available"}
</span>

{pot ? (
<TokenTotalValue
tokenId={NATIVE_TOKEN_ID}
amountBigString={pot.matching_pool_balance}
/>
) : (
<Skeleton className="w-34 h-5" />
)}
</div>

{potStatuses.canDonate && <DonateToPotProjects {...{ potId }} />}
<div className="flex items-center justify-start gap-4">
{potStatuses.canApply && (
<Button
onClick={() => setApplyModalOpen(true)}
>{`Apply to ${isVotingBasedPot ? "Round" : "Pot"}`}</Button>
)}

{potStatuses.canFund && (
<Button variant="tonal-filled" onClick={() => setFundModalOpen(true)}>
{"Fund matching pool"}
</Button>
)}
{potStatuses.canDonate && <DonateToPotProjects {...{ potId }} />}

{potStatuses.canChallengePayouts && (
<Button onClick={() => setChallengeModalOpen(true)}>
{potStatuses.existingChallengeForUser
? "Update challenge"
: "Challenge payouts"}
</Button>
)}
</div>
{potStatuses.canFund && (
<Button variant="tonal-filled" onClick={() => setFundModalOpen(true)}>
{"Fund matching pool"}
</Button>
)}

{potStatuses.canChallengePayouts && (
<Button onClick={() => setChallengeModalOpen(true)}>
{potStatuses.existingChallengeForUser ? "Update challenge" : "Challenge payouts"}
</Button>
)}
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 7e36117

Please sign in to comment.