Skip to content

Commit

Permalink
Finish governance fetching implementation
Browse files Browse the repository at this point in the history 
Update cached proposals with fixes
Implement no-founds gov CTA
  • Loading branch information
@jmrossy
jmrossy committed Feb 18, 2024
1 parent 3d14be9 commit e15b0b7
Show file tree
Hide file tree
Showing 10 changed files with 259 additions and 119 deletions.
17 changes: 10 additions & 7 deletions next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const CONNECT_SRC_HOSTS = [
'https://*.walletconnect.com',
'wss://*.walletconnect.com',
'wss://*.walletconnect.org',
'https://api.github.com',
'https://raw.githubusercontent.com',
'https://celo-mainnet.infura.io',
];
Expand All @@ -33,7 +34,9 @@ const cspHeader = `
frame-ancestors 'none';
${!isDev ? 'block-all-mixed-content;' : ''}
${!isDev ? 'upgrade-insecure-requests;' : ''}
`.replace(/\s{2,}/g, ' ').trim();
`
.replace(/\s{2,}/g, ' ')
.trim();

const securityHeaders = [
{
Expand All @@ -59,13 +62,13 @@ const securityHeaders = [
value: cspHeader,
},
]
: [])
: []),
];

module.exports = {
webpack: (config) => {
config.externals = [...config.externals, 'pino-pretty']
return config
config.externals = [...config.externals, 'pino-pretty'];
return config;
},

async headers() {
Expand All @@ -74,14 +77,14 @@ module.exports = {
source: '/(.*)',
headers: securityHeaders,
},
]
];
},

images: {
remotePatterns: [
{
protocol: "https",
hostname: "**",
protocol: 'https',
hostname: '**',
},
],
},
Expand Down
12 changes: 6 additions & 6 deletions src/app/account/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ import { useTransactionModal } from 'src/features/transactions/TransactionModal'
import { TxModalType } from 'src/features/transactions/types';
import { ValidatorGroup } from 'src/features/validators/types';
import { useValidatorGroups } from 'src/features/validators/useValidatorGroups';
import Lock from 'src/images/icons/lock.svg';
import Unlock from 'src/images/icons/unlock.svg';
import Withdraw from 'src/images/icons/withdraw.svg';
import LockIcon from 'src/images/icons/lock.svg';
import UnlockIcon from 'src/images/icons/unlock.svg';
import WithdrawIcon from 'src/images/icons/withdraw.svg';
import { usePageInvariant } from 'src/utils/navigation';
import { useAccount } from 'wagmi';

Expand Down Expand Up @@ -88,23 +88,23 @@ function LockButtons({ className }: { className?: string }) {
onClick={() => showTxModal(TxModalType.Lock, { defaultAction: LockActionType.Lock })}
>
<div className="flex items-center space-x-1.5">
<Image src={Lock} width={12} height={12} alt="" />
<Image src={LockIcon} width={12} height={12} alt="" />
<span>Lock</span>
</div>
</SolidButton>
<SolidButton
onClick={() => showTxModal(TxModalType.Lock, { defaultAction: LockActionType.Unlock })}
>
<div className="flex items-center space-x-1.5">
<Image src={Unlock} width={12} height={12} alt="" />
<Image src={UnlockIcon} width={12} height={12} alt="" />
<span>Unlock</span>
</div>
</SolidButton>
<SolidButton
onClick={() => showTxModal(TxModalType.Lock, { defaultAction: LockActionType.Withdraw })}
>
<div className="flex items-center space-x-1.5">
<Image src={Withdraw} width={12} height={12} alt="" />
<Image src={WithdrawIcon} width={12} height={12} alt="" />
<span>Withdraw</span>
</div>
</SolidButton>
Expand Down
56 changes: 11 additions & 45 deletions src/app/governance/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,23 @@ import Image from 'next/image';
import { useMemo, useState } from 'react';
import { Fade } from 'src/components/animation/Fade';
import { SpinnerWithLabel } from 'src/components/animation/Spinner';
import { ExternalLink } from 'src/components/buttons/ExternalLink';
import { TabHeaderFilters } from 'src/components/buttons/TabHeaderButton';
import { SearchField } from 'src/components/input/SearchField';
import { Section } from 'src/components/layout/Section';
import { DropdownModal } from 'src/components/menus/Dropdown';
import { H1 } from 'src/components/text/headers';
import { links } from 'src/config/links';
import { useLockedBalance } from 'src/features/account/hooks';
import { ProposalCard } from 'src/features/governance/ProposalCard';
import { ProposalStage } from 'src/features/governance/contractTypes';
import { GetInvolvedCtaCard, NoFundsLockedCtaCard } from 'src/features/governance/ctaCards';
import {
MergedProposalData,
useGovernanceProposals,
} from 'src/features/governance/useGovernanceProposals';
import BookIcon from 'src/images/icons/book.svg';
import EllipsisIcon from 'src/images/icons/ellipsis.svg';
import CeloIcon from 'src/images/logos/celo.svg';
import DiscordIcon from 'src/images/logos/discord.svg';
import { useIsMobile } from 'src/styles/mediaQueries';
import { isNullish } from 'src/utils/typeof';
import { useAccount } from 'wagmi';

enum Filter {
All = 'All',
Expand All @@ -38,7 +37,7 @@ export default function Page() {
<ProposalList />
</Section>
<div className="fixed bottom-10 right-5 hidden md:block">
<CtaModal />
<GetInvolvedCtaCard />
</div>
</>
);
Expand All @@ -48,6 +47,8 @@ function ProposalList() {
const isMobile = useIsMobile();

const { proposals } = useGovernanceProposals();
const { address } = useAccount();
const { lockedBalance } = useLockedBalance(address);

const [searchQuery, setSearchQuery] = useState<string>('');
const [filter, setFilter] = useState<Filter>(Filter.All);
Expand All @@ -66,14 +67,14 @@ function ProposalList() {
}, [proposals]);

return (
<div className="space-y-6 md:min-w-[38rem]">
<div className="space-y-5 md:min-w-[38rem]">
<div className="flex flex-col items-stretch gap-3 md:flex-row md:items-center md:justify-between">
<div className="flex items-center justify-between gap-12">
<H1>Proposals</H1>
<DropdownModal
buttonClasses="md:hidden"
button={() => <Image src={EllipsisIcon} width={24} height={24} alt="..." />}
modal={() => <CtaModal />}
modal={() => <GetInvolvedCtaCard />}
/>
</div>
<SearchField
Expand All @@ -83,15 +84,15 @@ function ProposalList() {
className="w-full text-sm md:w-64"
/>
</div>
<div></div>
{address && !isNullish(lockedBalance) && lockedBalance <= 0n && <NoFundsLockedCtaCard />}
{filteredProposals ? (
<Fade show>
<TabHeaderFilters
activeFilter={filter}
setFilter={setFilter}
counts={headerCounts}
showCount={!isMobile}
className="border-b border-taupe-300 pb-2 all:space-x-4 md:space-x-6"
className="border-b border-taupe-300 pb-2 pt-1 all:space-x-4 md:space-x-6"
/>
<div className="mt-6 divide-y divide-taupe-300">
{filteredProposals.length ? (
Expand All @@ -116,41 +117,6 @@ function ProposalList() {
);
}

function CtaModal() {
return (
<div className="flex w-fit flex-col space-y-2 border border-taupe-300 bg-taupe-100 bg-diamond-texture bg-right-bottom py-2.5 pl-4 pr-8 md:pr-14">
<h2 className="font-serif text-xl">Get Involved</h2>
<ExternalLink
href={links.docs}
className="flex items-center space-x-2 text-sm font-medium hover:underline"
>
<div className="w-4">
<Image src={BookIcon} alt="" />
</div>
<span>Explore the docs</span>
</ExternalLink>
<ExternalLink
href={links.discord}
className="flex items-center space-x-2 text-sm font-medium hover:underline"
>
<div className="w-4">
<Image src={DiscordIcon} alt="" />
</div>
<span>Join the chat</span>
</ExternalLink>
<ExternalLink
href={links.forum}
className="flex items-center space-x-2 text-sm font-medium hover:underline"
>
<div className="w-4 p-px">
<Image src={CeloIcon} alt="" />
</div>
<span>Join the forum</span>
</ExternalLink>
</div>
);
}

function useFilteredProposals({
proposals,
filter,
Expand Down
Loading

0 comments on commit e15b0b7

Please sign in to comment.