Feat/spell address hash

lib/theme.js

@@ -338,6 +338,7 @@ export default {
     chevron_right: icons.chevron_right,
     chevron_left: icons.chevron_left,
     chevron_down: icons.chevron_down,
+    chevron_up: icons.chevron_up,
     checkmark: icons.checkmark,
     edit: icons.edit,
     verified: icons.verified,

modules/app/components/Icon/index.tsx

@@ -34,6 +34,37 @@ const icons = {
       </g>
     ),
     viewBox: '0 0 15 15'
+  },
+  sandclock: {
+    path: (
+      <g>
+        <path
+          d="M12.6667 1.66667H1.33333C1.14933 1.66667 1 1.51733 1 1.33333C1 1.14933 1.14933 1 1.33333 1H12.6667C12.8507 1 13 1.14933 13 1.33333C13 1.51733 12.8507 1.66667 12.6667 1.66667Z"
+          fill="#1AAB9B"
+          stroke="#1AAB9B"
+          strokeWidth="0.2"
+        />
+        <path
+          d="M2.66536 17C2.48136 17 2.33203 16.8507 2.33203 16.6667V13.1873C2.33203 12.3387 2.69403 11.526 3.3247 10.9573L4.6747 9.74333C4.88803 9.55133 5.00603 9.28733 5.00603 9C5.00603 8.71267 4.88803 8.44867 4.6747 8.25667L3.32536 7.042C2.69403 6.474 2.33203 5.66133 2.33203 4.81267V1.33333C2.33203 1.14933 2.48136 1 2.66536 1C2.84936 1 2.9987 1.14933 2.9987 1.33333V4.81267C2.9987 5.47267 3.28003 6.10467 3.77136 6.54733L5.12003 7.76133C5.4707 8.07733 5.67203 8.52867 5.67203 9C5.67203 9.47133 5.4707 9.92333 5.1207 10.2387L3.7707 11.4533C3.28003 11.8953 2.9987 12.5273 2.9987 13.1873V16.6667C2.9987 16.8507 2.84936 17 2.66536 17Z"
+          fill="#1AAB9B"
+          stroke="#1AAB9B"
+          strokeWidth="0.2"
+        />
+        <path
+          d="M11.3348 17C11.1508 17 11.0015 16.8507 11.0015 16.6667V13.1873C11.0015 12.5273 10.7201 11.8953 10.2288 11.4527L8.88012 10.2387C8.52946 9.92267 8.32812 9.47133 8.32812 9C8.32812 8.52867 8.52946 8.07667 8.87946 7.76133L10.2295 6.54733C10.7201 6.10467 11.0015 5.47267 11.0015 4.81267V1.33333C11.0015 1.14933 11.1508 1 11.3348 1C11.5188 1 11.6681 1.14933 11.6681 1.33333V4.81267C11.6681 5.66133 11.3061 6.474 10.6755 7.04267L9.32546 8.25667C9.11279 8.44933 8.99479 8.71333 8.99479 9C8.99479 9.28667 9.11279 9.55133 9.32613 9.74333L10.6748 10.9573C11.3061 11.526 11.6681 12.338 11.6681 13.1873V16.6667C11.6681 16.8507 11.5188 17 11.3348 17Z"
+          fill="#1AAB9B"
+          stroke="#1AAB9B"
+          strokeWidth="0.2"
+        />
+        <path
+          d="M12.6667 17.0007H1.33333C1.14933 17.0007 1 16.8513 1 16.6673C1 16.4833 1.14933 16.334 1.33333 16.334H12.6667C12.8507 16.334 13 16.4833 13 16.6673C13 16.8513 12.8507 17.0007 12.6667 17.0007Z"
+          fill="#1AAB9B"
+          stroke="#1AAB9B"
+          strokeWidth="0.2"
+        />
+      </g>
+    ),
+    viewBox: '0 0 14 18'
   }
 };
 

modules/executive/api/fetchExecutives.ts

@@ -41,6 +41,7 @@ export async function getExecutiveProposals(network?: SupportedNetworks): Promis
 
           return parseExecutive(proposalDoc, proposalIndex, proposalLink, currentNetwork);
         } catch (e) {
+          console.log(e);
           // Catch error and return null if failed fetching one proposal
           return null;
         }

modules/executive/api/mocks/proposals.json

@@ -15,6 +15,7 @@
     },
     "verified": false,
     "address": "0x261086981FC6c57EF4679Af6aC253C3755850362",
+    "proposalLink": "https://github.com",
     "about": "# [Executive Vote] Raise the ETH Debt Ceiling\r\n\r\nThe Maker Foundation Interim Governance Facilitator has placed an Executive Vote into the voting system, which will enable the community to approve the following alterations to the protocol:\r\n\r\n- [Raise the Dai ETH Debt Ceiling by 20 million to 140 million Dai](https://vote.makerdao.com/polling-proposal/qmsv7qsmqafardbhun2f9s65nge3xf5oe4we3dswzwbtfy)\r\n\r\nThe Executive Vote ([FAQ](https://community-development.makerdao.com/makerdao-mcd-faqs/faqs#governance)) will continue until the number of votes surpass the total in favor of the previous Executive Vote. This is a [continuous approval](https://community-development.makerdao.com/makerdao-mcd-faqs/faqs/governance#what-is-continuous-approval-voting) vote.\r\n\r\n## Review\r\n\r\nThese changes were discussed in the Governance call on Thursday, June 4. Please review the [Video](https://www.youtube.com/playlist?list=PLLzkWCj8ywWNq5-90-Id6VPSsrk4OWVan), [Audio](https://soundcloud.com/makerdao/sets/governance-calls), and the online [discussion](https://forum.makerdao.com/c/governance) to inform your position before voting.\r\n\r\nThe MakerDAO community is moving forward with an Executive Vote to determine whether it will enact the changes established by the previous [Governance Polls](https://vote.makerdao.com/polling).\r\n\r\n## Action\r\n\r\n**Voting for this proposal will place your MKR in support of implementing the  changes outlined above.**\r\n\r\n---\r\n\r\n## Resources\r\n\r\nAdditional information about the Governance process can be found in the [Governance Risk Framework: Governing MakerDAO](https://community-development.makerdao.com/governance/governance-risk-framework)\r\n\r\nDemos, help and instructional material for the Governance Dashboard can be found at [Awesome MakerDAO](https://awesome.makerdao.com/#voting).\r\n\r\nTo participate in future Governance calls, please [join us](https://community-development.makerdao.com/governance/governance-and-risk-meetings) every Thursday at 16:00 UTC.\r\n\r\nTo add current and upcoming votes to your calendar, please see the [MakerDAO Public Events Calendar](https://calendar.google.com/calendar/embed?src=makerdao.com_3efhm2ghipksegl009ktniomdk%40group.calendar.google.com&ctz=America%2FLos_Angeles)."
   },
   {
@@ -33,6 +34,7 @@
     },
     "verified": false,
     "address": "0x261086981FC6c57EF4679Af6aC253C3755850362",
+    "proposalLink": "https://github.com",
     "about": "# [Executive Vote] Raise the ETH Debt Ceiling\r\n\r\nThe Maker Foundation Interim Governance Facilitator has placed an Executive Vote into the voting system, which will enable the community to approve the following alterations to the protocol:\r\n\r\n- [Raise the Dai ETH Debt Ceiling by 20 million to 140 million Dai](https://vote.makerdao.com/polling-proposal/qmsv7qsmqafardbhun2f9s65nge3xf5oe4we3dswzwbtfy)\r\n\r\nThe Executive Vote ([FAQ](https://community-development.makerdao.com/makerdao-mcd-faqs/faqs#governance)) will continue until the number of votes surpass the total in favor of the previous Executive Vote. This is a [continuous approval](https://community-development.makerdao.com/makerdao-mcd-faqs/faqs/governance#what-is-continuous-approval-voting) vote.\r\n\r\n## Review\r\n\r\nThese changes were discussed in the Governance call on Thursday, June 4. Please review the [Video](https://www.youtube.com/playlist?list=PLLzkWCj8ywWNq5-90-Id6VPSsrk4OWVan), [Audio](https://soundcloud.com/makerdao/sets/governance-calls), and the online [discussion](https://forum.makerdao.com/c/governance) to inform your position before voting.\r\n\r\nThe MakerDAO community is moving forward with an Executive Vote to determine whether it will enact the changes established by the previous [Governance Polls](https://vote.makerdao.com/polling).\r\n\r\n## Action\r\n\r\n**Voting for this proposal will place your MKR in support of implementing the  changes outlined above.**\r\n\r\n---\r\n\r\n## Resources\r\n\r\nAdditional information about the Governance process can be found in the [Governance Risk Framework: Governing MakerDAO](https://community-development.makerdao.com/governance/governance-risk-framework)\r\n\r\nDemos, help and instructional material for the Governance Dashboard can be found at [Awesome MakerDAO](https://awesome.makerdao.com/#voting).\r\n\r\nTo participate in future Governance calls, please [join us](https://community-development.makerdao.com/governance/governance-and-risk-meetings) every Thursday at 16:00 UTC.\r\n\r\nTo add current and upcoming votes to your calendar, please see the [MakerDAO Public Events Calendar](https://calendar.google.com/calendar/embed?src=makerdao.com_3efhm2ghipksegl009ktniomdk%40group.calendar.google.com&ctz=America%2FLos_Angeles)."
   }
 ]

modules/executive/api/parseExecutive.ts

@@ -45,6 +45,7 @@ export function parseExecutive(
     key: slugify(title),
     address: address,
     date: String(date),
-    active: proposalIndex[network].includes(proposalLink)
+    active: proposalIndex[network].includes(proposalLink),
+    proposalLink
   };
 }

modules/executive/components/SpellEffectsTab.tsx

@@ -1,9 +1,13 @@
 /** @jsx jsx */
 
-import { Box, Text, jsx, Link as ThemeUILink, Flex } from 'theme-ui';
-import { getNetwork } from 'lib/maker';
-import { getEtherscanLink } from 'lib/utils';
+import { Box, Text, jsx, Link as ThemeUILink } from 'theme-ui';
 import { Proposal, SpellData } from '../types';
+import { useState } from 'react';
+import { Icon as DaiUIIcon } from '@makerdao/dai-ui-icons';
+import Icon from 'modules/app/components/Icon';
+
+import SkeletonThemed from 'modules/app/components/SkeletonThemed';
+import { formatDateWithoutTime } from 'lib/datetime';
 
 export function SpellEffectsTab({
   proposal,
@@ -39,17 +43,168 @@ export function SpellEffectsTab({
         </Flex>
       )}
   */
+  const [expanded, setExpanded] = useState(false);
 
   return (
     <Box>
-      <Flex sx={{ mb: 3, overflow: 'auto' }}>
-        Spell at address
-        <ThemeUILink href={getEtherscanLink(getNetwork(), proposal.address, 'address')} target="_blank">
-          <Text sx={{ ml: 2, color: 'accentBlue', ':hover': { color: 'blueLinkHover' } }}>
-            {proposal.address}
+      <Text
+        as="p"
+        variant="microHeading"
+        sx={{
+          mb: 4
+        }}
+      >
+        Spell details
+      </Text>
+      <Box mb={4}>
+        <Text
+          as="p"
+          sx={{
+            fontWeight: 'semiBold'
+          }}
+        >
+          Executive Hash
+        </Text>
+
+        <Box
+          sx={{
+            background: '#F6F8F9',
+            p: 3,
+            transition: 'all 300ms linear',
+            overflow: 'hidden',
+            borderRadius: '3px'
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between'
+            }}
+          >
+            {spellData?.executiveHash ? (
+              <Text sx={{ mr: 2, fontWeight: 'semiBold', wordBreak: 'break-all' }}>
+                {spellData?.executiveHash}
+              </Text>
+            ) : (
+              <SkeletonThemed width="300px" height="15px" />
+            )}
+
+            <Box sx={{ cursor: 'pointer', ml: 2, minWidth: '99px' }} onClick={() => setExpanded(!expanded)}>
+              <Text color={'textMuted'}>
+                What&apos;s this? <DaiUIIcon name={expanded ? 'chevron_up' : 'chevron_down'} size={2} />
+              </Text>
+            </Box>
+          </Box>
+
+          {expanded && (
+            <Box sx={{ mt: 3 }}>
+              <Text as="p" color="textMuted">
+                This hash allows for manually verifying that the Spell belongs to the correct Executive
+                Proposal. It can be reproduced by hashing the raw markdown text of this Executive Proposal.
+                The hash, the URL to the raw markdown text, and the correct hashing algorithm are all
+                registered on the blockchain in the Spell smart contract.
+              </Text>
+              <Box sx={{ mt: 3 }}>
+                <ThemeUILink
+                  href={'https://makerdao.world/en/learn/governance/audit-exec-spells'}
+                  target="_blank"
+                >
+                  <Text sx={{ color: 'accentBlue', ':hover': { color: 'blueLinkHover' } }}>
+                    Learn more about auditing Executive Spells
+                    <DaiUIIcon ml={2} name="arrowTopRight" size="2" />
+                  </Text>
+                </ThemeUILink>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      </Box>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+        {'proposalLink' in proposal && <Box sx={{ width: ['100%', '50%'] }}>
+          <Text
+            as="p"
+            sx={{
+              fontWeight: 'semiBold'
+            }}
+          >
+            Executive Hash
           </Text>
-        </ThemeUILink>
-      </Flex>
+          <Box>
+            <ThemeUILink href={proposal.proposalLink} target="_blank">
+              <Text sx={{ color: 'accentBlue', ':hover': { color: 'blueLinkHover' } }}>
+                View in GitHub
+                <DaiUIIcon ml={2} name="arrowTopRight" size="2" />
+              </Text>
+            </ThemeUILink>
+          </Box>
+        </Box>}
+        <Box sx={{ width: ['100%', '50%'] }}>
+          <Box mb={3} mt={[3, 0]} sx={{ display: 'flex' }}>
+            <Box
+              mr={2}
+              sx={{
+                color: 'primary',
+                background: '#F6F8F9',
+                borderRadius: '100%',
+                width: '34px',
+                minWidth: '34px',
+                height: '34px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }}
+            >
+              <Icon name={'sandclock'} size={3} />
+            </Box>
+            <Box>
+              <Text
+                as="p"
+                sx={{
+                  fontWeight: 'semiBold'
+                }}
+              >
+                Expiration
+              </Text>
+              <Text as="p" color="textMuted">
+                {formatDateWithoutTime(spellData?.eta)}
+              </Text>
+            </Box>
+          </Box>
+          {spellData?.officeHours && (
+            <Box mb={3} sx={{ display: 'flex' }}>
+              <Box
+                mr={2}
+                sx={{
+                  color: 'primary',
+                  background: '#F6F8F9',
+                  borderRadius: '100%',
+                  width: '34px',
+                  minWidth: '34px',
+                  height: '34px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }}
+              >
+                <DaiUIIcon name={'clock'} size={3} />
+              </Box>
+              <Box>
+                <Text
+                  as="p"
+                  sx={{
+                    fontWeight: 'semiBold'
+                  }}
+                >
+                  Office Hours only
+                </Text>
+                <Text as="p" color="textMuted">
+                  Spell will be executed from monday to friday between 14:00 and 21:00 UTC
+                </Text>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      </Box>
     </Box>
   );
 }

modules/executive/types/proposal.d.ts

@@ -7,6 +7,7 @@ export type CMSProposal = {
   proposalBlurb: string;
   title: string;
   date: string;
+  proposalLink: string;
 };
 
 export type RawAddressProposal = {

modules/executive/types/spellData.d.ts

@@ -6,4 +6,6 @@ export type SpellData = {
   datePassed?: Date;
   dateExecuted?: Date;
   mkrSupport: number;
+  executiveHash?: string;
+  officeHours?: boolean;
 };

package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@makerdao/dai": "^0.32.15",
-    "@makerdao/dai-plugin-governance": "^0.14.3",
+    "@makerdao/dai-plugin-governance": "^0.14.5",
     "@makerdao/dai-plugin-ledger-web": "^0.9.10",
     "@makerdao/dai-plugin-mcd": "^1.6.36",
     "@makerdao/dai-plugin-trezor-web": "^0.9.7",
@@ -64,6 +64,7 @@
     "tiny-invariant": "^1.1.0",
     "uuid": "^8.3.0",
     "valid-url": "^1.0.9",
+    "web3": "^1.6.0",
     "zustand": "^2.2.3"
   },
   "devDependencies": {

pages/api/executive/analyze-spell/[address].ts

@@ -9,8 +9,18 @@ import { SpellData } from 'modules/executive/types/spellData';
 
 // nextCastTime returns when the spell is available for execution, accounting for office hours (only works if the spell has not been executed yet)
 // eta returns when the spell is available for execution, not account for office hours
+// executiveHash returns the hash of the executive proposal
 export const analyzeSpell = async (address: string, maker: any): Promise<SpellData> => {
-  const [done, nextCastTime, eta, datePassed, dateExecuted, mkrSupport] = await Promise.all([
+  const [
+    done,
+    nextCastTime,
+    eta,
+    datePassed,
+    dateExecuted,
+    mkrSupport,
+    executiveHash,
+    officeHours
+  ] = await Promise.all([
     maker
       .service('spell')
       .getDone(address)
@@ -33,7 +43,15 @@ export const analyzeSpell = async (address: string, maker: any): Promise<SpellDa
       .getExecutionDate(address)
       /* tslint:disable:no-empty */
       .catch(_ => null), // this fails if the spell has not been executed
-    maker.service('chief').getApprovalCount(address)
+    maker.service('chief').getApprovalCount(address),
+    maker
+      .service('spell')
+      .getExecutiveHash(address)
+      .catch(_ => null),
+    maker
+      .service('spell')
+      .getOfficeHours(address)
+      .catch(_ => null)
   ]);
 
   return {
@@ -43,7 +61,9 @@ export const analyzeSpell = async (address: string, maker: any): Promise<SpellDa
     nextCastTime,
     datePassed,
     dateExecuted,
-    mkrSupport: mkrSupport.toBigNumber().toString()
+    mkrSupport: mkrSupport.toBigNumber().toString(),
+    executiveHash,
+    officeHours
   };
 };