Skip to content

Commit

Permalink
Merge branch 'master' into revert-891-link-cloaky
Browse files Browse the repository at this point in the history
  • Loading branch information
@tyler17
tyler17 authored May 27, 2024
2 parents dd237bd + 4d94be9 commit 3aae883
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 294 deletions.
28 changes: 7 additions & 21 deletions modules/app/components/layout/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@ const HeaderMenu = ({ onToggleTheme, mode, ...props }): JSX.Element => {
};

const Header = (): JSX.Element => {
const isProduction = process.env.NODE_ENV === 'production' && process.env.NEXT_PUBLIC_VERCEL_ENV !== 'development';
const isProduction =
process.env.NODE_ENV === 'production' && process.env.NEXT_PUBLIC_VERCEL_ENV !== 'development';

const router = useRouter();
const [showMobileMenu, setShowMobileMenu] = useState(false);
Expand Down Expand Up @@ -195,19 +196,6 @@ const Header = (): JSX.Element => {
</NavLink>
</Flex>

<NavLink
href={'/avcs'}
title="View AVCs page"
p={0}
sx={{
display: ['none', 'flex'],
ml: [0, 4, 4, 5],
color: router?.asPath?.startsWith('/avcs') ? 'primary' : undefined
}}
>
AVCs
</NavLink>

<NavLink
href={'/delegates'}
title="View delegates page"
Expand Down Expand Up @@ -302,7 +290,8 @@ const Header = (): JSX.Element => {
};

const MobileMenu = ({ hide, router, gas, onToggleTheme, mode, network }) => {
const isProduction = process.env.NODE_ENV === 'production' && process.env.NEXT_PUBLIC_VERCEL_ENV !== 'development';
const isProduction =
process.env.NODE_ENV === 'production' && process.env.NEXT_PUBLIC_VERCEL_ENV !== 'development';

useEffect(() => {
if (typeof window !== 'undefined') {
Expand Down Expand Up @@ -358,17 +347,14 @@ const MobileMenu = ({ hide, router, gas, onToggleTheme, mode, network }) => {
<InternalLink title="View executive page" href="/executive">
<Text sx={{ fontWeight: 'semiBold' }}>Executive</Text>
</InternalLink>
<InternalLink title="View emergency shutdown page" href="/esmodule">
<Text sx={{ fontWeight: 'semiBold' }}>ES Module</Text>
</InternalLink>
</Flex>
<Flex sx={{ flexDirection: 'column', alignItems: 'flex-start', gap: 3, width: '50%' }}>
<InternalLink title="View AVCs page" href="/avcs">
<Text sx={{ fontWeight: 'semiBold' }}>AVCs</Text>
</InternalLink>
<InternalLink title="View delegate page" href="/delegates">
<Text sx={{ fontWeight: 'semiBold' }}>Delegates</Text>
</InternalLink>
<InternalLink title="View emergency shutdown page" href="/esmodule">
<Text sx={{ fontWeight: 'semiBold' }}>ES Module</Text>
</InternalLink>
</Flex>
</Flex>
<Divider sx={{ width: '100%' }} />
Expand Down
78 changes: 38 additions & 40 deletions modules/delegates/components/TopDelegates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,39 @@ import BigNumber from 'lib/bigNumberJs';
import { Card, Box, Text, Flex, Button, Heading, Container, Divider } from 'theme-ui';
import { InternalLink } from 'modules/app/components/InternalLink';
import Stack from 'modules/app/components/layout/layouts/Stack';
import { AvcStats } from '../types/avc';
import { DelegatePicture } from './DelegatePicture';
import { DelegatePaginated } from '../types';
import { DelegateModal } from './modals/DelegateModal';
import { useState } from 'react';
import { useAccount } from 'modules/app/hooks/useAccount';

export default function TopDelegates({
topAvcs,
topDelegates,
totalMKRDelegated
}: {
topAvcs: AvcStats[];
topDelegates: DelegatePaginated[];
totalMKRDelegated: BigNumber;
}): React.ReactElement {
const { account } = useAccount();
const [showDelegateModal, setShowDelegateModal] = useState<DelegatePaginated | null>(null);

return (
<Box>
{showDelegateModal && (
<DelegateModal
title={`Delegate to ${showDelegateModal.name}`}
delegate={showDelegateModal}
isOpen={true}
onDismiss={() => setShowDelegateModal(null)}
mutateTotalStaked={() => null}
mutateMKRDelegated={() => null}
/>
)}
<Container sx={{ textAlign: 'center', maxWidth: 'title', mb: 4 }}>
<Stack gap={2}>
<Heading as="h2">Top Aligned Voting Committees</Heading>
<Heading as="h2">Top Aligned Delegates</Heading>
<Text as="p" sx={{ color: 'textSecondary', px: 'inherit', fontSize: [2, 4] }}>
Aligned Voting Committees ranked by the voting weight of their supporting delegates
Aligned Delegates ranked by their voting power
</Text>
</Stack>
</Container>
Expand All @@ -44,7 +60,7 @@ export default function TopDelegates({
>
<Box sx={{ width: ['25%', '40%'] }}>
<Text as="p" variant="caps" sx={{ color: 'secondaryEmphasis' }}>
AVC Name
Name
</Text>
</Box>
<Box sx={{ width: ['50%', '15%'], textAlign: ['right', 'left'] }}>
Expand All @@ -58,7 +74,8 @@ export default function TopDelegates({
</Text>
</Box>
</Flex>
{topAvcs?.map(({ avc_name, mkrDelegated, picture }, index) => {
{topDelegates?.map((delegate, index) => {
const { name, voteDelegateAddress, mkrDelegated } = delegate;
return (
<Box key={`top-delegate-${index}`} data-testid="top-aligned-delegate">
<Flex
Expand All @@ -73,10 +90,10 @@ export default function TopDelegates({
<Text pr={2} sx={{ display: ['none', 'block'] }}>
{index + 1}
</Text>
<InternalLink href={'/delegates'} title="View delegates" queryParams={{ avc: avc_name }}>
<InternalLink href={`/address/${voteDelegateAddress}`} title="View delegates">
<Flex sx={{ alignItems: 'center', gap: 2 }}>
<DelegatePicture avcPicture={picture} showTooltip={false} />
<Text sx={{ color: 'primary', fontWeight: 'semiBold' }}>{avc_name}</Text>
<DelegatePicture delegate={delegate} showTooltip={false} />
<Text sx={{ color: 'primary', fontWeight: 'semiBold' }}>{name}</Text>
</Flex>
</InternalLink>
</Flex>
Expand All @@ -103,12 +120,15 @@ export default function TopDelegates({
display: ['none', 'flex']
}}
>
<Text as="p">{mkrDelegated ? mkrDelegated.toFixed(2) : '0.00'} MKR </Text>
<InternalLink
href={'/delegates'}
title="View delegates"
queryParams={{ avc: avc_name }}
styles={{
<Text as="p">{mkrDelegated ? new BigNumber(mkrDelegated).toFixed(2) : '0.00'} MKR</Text>
<Button
variant="outline"
data-testid="button-delegate"
disabled={!account}
onClick={() => {
setShowDelegateModal(delegate);
}}
sx={{
borderColor: 'secondaryMuted',
color: 'text',
':hover': {
Expand All @@ -117,8 +137,8 @@ export default function TopDelegates({
}
}}
>
<Button variant="outline">Delegate</Button>
</InternalLink>
Delegate
</Button>
</Flex>
</Flex>
</Box>
Expand All @@ -134,28 +154,6 @@ export default function TopDelegates({
justifyContent: 'center'
}}
>
<Box
sx={{
ml: [0, 3],
mr: [2, 3]
}}
>
<InternalLink
href={'/avcs'}
title="View delegates"
styles={{
borderColor: 'secondaryMuted',
color: 'text',
':hover': {
color: 'text',
borderColor: 'onSecondary',
backgroundColor: 'background'
}
}}
>
<Button variant="outline">See all AVCs</Button>
</InternalLink>
</Box>
<Box
sx={{
ml: [0, 3],
Expand Down
2 changes: 0 additions & 2 deletions modules/home/api/fetchLandingPageData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { BigNumber } from 'ethers';
import { fetchJson } from 'lib/fetchJson';
import { PollOrderByEnum } from 'modules/polling/polling.constants';
import { DelegateInfo, DelegatePaginated, DelegatesAPIStats } from 'modules/delegates/types';
import { AvcStats } from 'modules/delegates/types/avc';
import { TagCount } from 'modules/app/types/tag';

export type LandingPageData = {
Expand All @@ -31,7 +30,6 @@ export type LandingPageData = {
delegates: DelegatePaginated[];
delegatesInfo: DelegateInfo[];
stats?: DelegatesAPIStats;
avcs: AvcStats[];
mkrOnHat?: string;
hat?: string;
mkrInChief?: string;
Expand Down
Loading

0 comments on commit 3aae883

Please sign in to comment.