Add hat badge to exec detail

lib/hooks/index.ts

@@ -2,7 +2,5 @@ export * from './useMkrBalance';
 export * from './useTokenAllowance';
 export * from './useMkrDelegated';
 export * from './useLockedMkr';
-export * from './useHat';
-export * from './useAllSlates';
 export * from './useAllUserVotes';
 export * from './useDelegateAddressMap';

modules/executive/components/VoteModal.tsx

@@ -25,7 +25,9 @@ import getMaker, { getNetwork, personalSign } from 'lib/maker';
 import { fadeIn, slideUp } from 'lib/keyframes';
 import { getEtherscanLink, sortBytesArray } from 'lib/utils';
 import { fetchJson } from 'lib/fetchJson';
-import { useLockedMkr, useHat, useAllSlates } from 'lib/hooks';
+import { useLockedMkr } from 'lib/hooks';
+import { useHat } from 'modules/executive/hooks/useHat';
+import { useAllSlates } from 'modules/executive/hooks/useAllSlates';
 import useAccountsStore from 'stores/accounts';
 import useTransactionStore, { transactionsApi, transactionsSelectors } from 'stores/transactions';
 import { TXMined } from 'types/transaction';

modules/home/components/ExecutiveCard.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import useSWR from 'swr';
 import { Button, Text, Flex, Badge, Box, Link as InternalLink, jsx } from 'theme-ui';
 import Skeleton from 'modules/app/components/SkeletonThemed';
-
+import { ZERO_ADDRESS } from 'stores/accounts';
 import Stack from 'modules/app/components/layout/layouts/Stack';
 import getMaker, { getNetwork } from 'lib/maker';
 import { CurrencyObject } from 'types/currency';
@@ -84,7 +84,7 @@ export default function ExecutiveCard({ proposal, isHat, ...props }: Props): JSX
             View proposal
           </Button>
         </Link>
-        {isHat && proposal.address !== '0x0000000000000000000000000000000000000000' ? (
+        {isHat && proposal.address !== ZERO_ADDRESS ? (
           <Badge
             variant="primary"
             sx={{

pages/executive.tsx

@@ -12,7 +12,8 @@ import { Icon } from '@makerdao/dai-ui-icons';
 // lib
 import { getExecutiveProposals } from 'modules/executive/api/fetchExecutives';
 import getMaker, { isDefaultNetwork, getNetwork, MKR } from 'lib/maker';
-import { useLockedMkr, useHat } from 'lib/hooks';
+import { useLockedMkr } from 'lib/hooks';
+import { useHat } from 'modules/executive/hooks/useHat';
 import { useVotedProposals } from 'modules/executive/hooks/useVotedProposals';
 import { fetchJson } from 'lib/fetchJson';
 import oldChiefAbi from 'lib/abis/oldChiefAbi.json';

pages/executive/[proposal-id].tsx

@@ -4,7 +4,19 @@ import { GetStaticProps, GetStaticPaths } from 'next';
 import { useRouter } from 'next/router';
 import ErrorPage from 'next/error';
 import Link from 'next/link';
-import { Button, Card, Flex, Heading, Spinner, Box, Text, Divider, Link as ThemeUILink, jsx } from 'theme-ui';
+import {
+  Badge,
+  Button,
+  Card,
+  Flex,
+  Heading,
+  Spinner,
+  Box,
+  Text,
+  Divider,
+  Link as ThemeUILink,
+  jsx
+} from 'theme-ui';
 import { ethers } from 'ethers';
 import BigNumber from 'bignumber.js';
 import useSWR from 'swr';
@@ -14,6 +26,7 @@ import invariant from 'tiny-invariant';
 import { getExecutiveProposal, getExecutiveProposals } from 'modules/executive/api/fetchExecutives';
 import { useSpellData } from 'modules/executive/hooks/useSpellData';
 import { useVotedProposals } from 'modules/executive/hooks/useVotedProposals';
+import { useHat } from 'modules/executive/hooks/useHat';
 import { useMkrOnHat } from 'modules/executive/hooks/useMkrOnHat';
 import { getNetwork, isDefaultNetwork } from 'lib/maker';
 import { cutMiddle, limitString } from 'lib/string';
@@ -88,6 +101,8 @@ const ProposalView = ({ proposal }: Props): JSX.Element => {
 
   const { data: votedProposals } = useVotedProposals();
   const { data: mkrOnHat } = useMkrOnHat();
+  const { data: hat } = useHat();
+  const isHat = hat && hat.toLowerCase() === proposal.address.toLowerCase();
 
   const { data: comments, error: commentsError } = useSWR(
     `/api/executive/comments/list/${proposal.address}`,
@@ -168,6 +183,20 @@ const ProposalView = ({ proposal }: Props): JSX.Element => {
             <Heading pt={[3, 4]} px={[3, 4]} pb="3" sx={{ fontSize: [5, 6] }}>
               {'title' in proposal ? proposal.title : proposal.address}
             </Heading>
+            {isHat && proposal.address !== ZERO_ADDRESS ? (
+              <Badge
+                variant="primary"
+                sx={{
+                  my: 2,
+                  ml: [3, 4],
+                  borderColor: 'primaryAlt',
+                  color: 'primaryAlt',
+                  textTransform: 'uppercase'
+                }}
+              >
+                Governing proposal
+              </Badge>
+            ) : null}
             <Flex sx={{ mx: [3, 4], mb: 3, justifyContent: 'space-between' }}>
               <StatBox
                 value={

pages/index.tsx

@@ -12,7 +12,7 @@ import { initTestchainPolls } from 'lib/utils';
 import { fetchJson } from 'lib/fetchJson';
 
 import { isActivePoll } from 'modules/polling/helpers/utils';
-import { useHat } from 'lib/hooks';
+import { useHat } from 'modules/executive/hooks/useHat';
 import PrimaryLayout from 'modules/app/components/layout/layouts/Primary';
 import Stack from 'modules/app/components/layout/layouts/Stack';
 import SystemStats from 'modules/home/components/SystemStats';