Feature/execute state

package.json

@@ -134,6 +134,7 @@
     "@storybook/testing-library": "^0.0.11",
     "@synthetixio/synpress": "^1.2.0",
     "@testing-library/cypress": "^8.0.2",
+    "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react-hooks": "^8.0.0",
     "@types/jest": "^27.4.0",

scripts/dev.ts

@@ -303,7 +303,8 @@ async function main() {
     },
     {
       type: 'transfer',
-      timestamp: moment().subtract(26, 'minutes').unix(),
+      // We use this to reset to local time, in future we should ensure the automatic process works
+      timestamp: moment().subtract(46, 'minutes').unix(),
       from: accounts[0],
       data: {
         asset: ZERO_ADDRESS,

src/Components/ExecuteButton/index.test.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ExecuteButton from '.';
+import { render } from 'utils/tests';
+
+let mockedIsExecutable = true;
+let mockedExecuteProposal = jest.fn();
+jest.mock('hooks/Guilds/useExecutable', () => ({
+  __esModule: true,
+  default: () => ({
+    data: {
+      isExecutable: mockedIsExecutable,
+      executeProposal: mockedExecuteProposal,
+    },
+    loading: false,
+    error: null,
+  }),
+}));
+
+describe('Execute Button', () => {
+  beforeAll(() => {
+    render(<ExecuteButton executeProposal={mockedExecuteProposal} />);
+  });
+
+  it('User is able to click button to execute', async () => {
+    const button = screen.queryByTestId('execute-btn');
+    fireEvent.click(button);
+    await waitFor(() => {
+      expect(mockedExecuteProposal).toHaveBeenCalledTimes(1);
+    });
+  });
+});

src/Components/ExecuteButton/index.tsx

@@ -0,0 +1,19 @@
+import { Button } from 'old-components/Guilds/common/Button';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ExecuteButtonProps {
+  executeProposal: () => void;
+}
+
+const ExecuteButton: React.FC<ExecuteButtonProps> = ({ executeProposal }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Button data-testid="execute-btn" onClick={() => executeProposal()}>
+      {t('execute')}
+    </Button>
+  );
+};
+
+export default ExecuteButton;

src/Components/Fixtures/index.ts

@@ -1,6 +1,7 @@
 import { BigNumber } from 'ethers';
 import moment from 'moment';
-import { Proposal, ENSAvatar, ProposalState } from '../Types';
+import { Proposal, ContractState } from 'types/types.guilds.d';
+import { ENSAvatar } from '../Types';
 
 export const proposalMock: Proposal = {
   id: '0x1234567890123456789012345678901234567890',
@@ -12,7 +13,8 @@ export const proposalMock: Proposal = {
   value: [],
   startTime: moment(),
   endTime: moment(),
-  state: ProposalState.Active,
+  timeDetail: '',
+  contractState: ContractState.Active,
   totalActions: BigNumber.from(0),
   totalVotes: [],
 };
@@ -24,6 +26,6 @@ export const ensAvatarMock: ENSAvatar = {
 
 export const proposalStatusPropsMock = {
   timeDetail: 'Time',
-  status: ProposalState.Active,
+  status: ContractState.Active,
   endTime: moment('2022-05-09T08:00:00'),
 };

src/Components/ProposalCard/__snapshots__/ProposalCard.test.tsx.snap

@@ -83,7 +83,7 @@ exports[`ProposalCard ProposalCard Renders properly with data 1`] = `
             class="sc-hOqruk cHwGYV"
           >
             <div
-              class="sc-jrAFXE sc-dacGJm jLAWlL dTZYfv"
+              class="sc-jrAFXE sc-dacGJm jLAWlL jqIJTf"
             >
               <span
                 title="May 9th, 2022 - 8:00 am"
@@ -229,7 +229,7 @@ exports[`ProposalCard ProposalCard loading 1`] = `
             class="sc-hOqruk cHwGYV"
           >
             <div
-              class="sc-jrAFXE sc-dacGJm jLAWlL dTZYfv"
+              class="sc-jrAFXE sc-dacGJm jLAWlL jqIJTf"
             >
               <div
                 class="sc-bdfBQB"

src/Components/ProposalCard/types.ts

@@ -1,5 +1,6 @@
 import { ProposalStatusProps } from 'Components/ProposalStatus/types';
-import { Proposal, ENSAvatar } from '../Types';
+import { Proposal } from 'types/types.guilds.d';
+import { ENSAvatar } from '../Types';
 import { DecodedAction } from 'old-components/Guilds/ActionsBuilder/types';
 
 export interface ProposalCardProps {

src/Components/ProposalStatus/ProposalStatus.test.tsx

@@ -1,12 +1,12 @@
 import ProposalStatus from './ProposalStatus';
 import { render } from '../../utils/tests';
 import { ProposalStatusProps } from './types';
-import { ProposalState } from 'Components/Types';
+import { ContractState } from 'types/types.guilds.d';
 import moment from 'moment';
 
 const validProps: ProposalStatusProps = {
   timeDetail: 'Time',
-  status: ProposalState.Active,
+  status: ContractState.Active,
   endTime: moment('2022-05-09T08:00:00'),
 };
 

src/Components/ProposalStatus/ProposalStatus.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { Box } from 'Components/Primitives/Layout';
 import { Loading } from 'Components/Primitives/Loading';
-import { ProposalState } from 'Components/Types';
+import { ProposalState } from 'types/types.guilds.d';
 import { ProposalStatusProps } from './types';
 
 const ProposalStatusWrapper = styled.div`
@@ -41,11 +41,11 @@ const ProposalStatusDetail = styled(Box)<{ statusDetail?: ProposalState }>`
 `;
 
 const DetailText = styled(Box)`
-padding: 0 0.2rem;
+  padding: 0 0.2rem;
 
-@media only screen and (min-width: 768px) {
-  padding - right: 0.5rem;
-}
+  @media only screen and (min-width: 768px) {
+    padding-right: 0.5rem;
+  }
 `;
 
 const ProposalStatus: React.FC<ProposalStatusProps> = ({

src/Components/ProposalStatus/__snapshots__/ProposalStatus.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ProposalStatus loading 1`] = `
       class="sc-iBPTik gOtsle"
     >
       <div
-        class="sc-bdfBQB sc-pGacB bmhbKs bjIKgW"
+        class="sc-bdfBQB sc-pGacB bmhbKs bDHuHu"
       >
         <div
           class="sc-eCstlR"
@@ -61,7 +61,7 @@ exports[`ProposalStatus votes 1`] = `
       class="sc-iBPTik gOtsle"
     >
       <div
-        class="sc-bdfBQB sc-pGacB bmhbKs bjIKgW"
+        class="sc-bdfBQB sc-pGacB bmhbKs bDHuHu"
       >
         <span
           title="May 9th, 2022 - 8:00 am"

src/Components/ProposalStatus/fixtures.ts

@@ -1,4 +1,4 @@
-import { ProposalState } from 'Components/Types';
+import { ProposalState } from 'types/types.guilds.d';
 import moment from 'moment';
 import { ProposalStatusProps } from './types';
 

src/Components/Types/index.ts

@@ -3,7 +3,15 @@ import { Moment } from 'moment';
 
 export enum ProposalState {
   Active = 'Active',
-  Passed = 'Passed',
+  Rejected = 'Rejected',
+  Executed = 'Executed',
+  Failed = 'Failed',
+  Finished = 'Finished',
+}
+
+export enum ContractState {
+  Active = 'Active',
+  Rejected = 'Rejected',
   Executed = 'Executed',
   Failed = 'Failed',
 }
@@ -19,7 +27,7 @@ export interface Proposal {
   totalActions: BigNumber;
   title: string;
   contentHash: string;
-  state: ProposalState;
+  contractState: ContractState;
   totalVotes: BigNumber[];
 }
 

src/Modules/Guilds/Wrappers/ProposalCardWrapper.tsx

@@ -4,10 +4,8 @@ import useENSAvatar from 'hooks/Guilds/ether-swr/ens/useENSAvatar';
 import { useProposal } from 'hooks/Guilds/ether-swr/guild/useProposal';
 import useVoteSummary from 'hooks/Guilds/useVoteSummary';
 import { MAINNET_ID } from 'utils/constants';
-import { useMemo } from 'react';
-import { ProposalState } from 'Components/Types';
 import { useProposalSummaryActions } from 'hooks/Guilds/guild/useProposalSummaryActions';
-import moment from 'moment';
+import useProposalState from 'hooks/Guilds/useProposalState';
 
 interface ProposalCardWrapperProps {
   proposalId?: string;
@@ -22,47 +20,19 @@ const ProposalCardWrapper: React.FC<ProposalCardWrapperProps> = ({
 
   const ensAvatar = useENSAvatar(proposal?.creator, MAINNET_ID);
 
-  // Make into hooks
-  const timeDetail = useMemo(() => {
-    if (!proposal?.endTime) return null;
-
-    const currentTime = moment();
-    if (proposal.endTime?.isBefore(currentTime)) {
-      return proposal.endTime.fromNow();
-    } else {
-      return proposal.endTime.toNow();
-    }
-  }, [proposal]);
-
-  // Make into singular guild state hook
-  const status = useMemo(() => {
-    if (!proposal?.endTime) return null;
-    switch (proposal.state) {
-      case ProposalState.Active:
-        const currentTime = moment();
-        if (currentTime.isSameOrAfter(proposal.endTime)) {
-          return ProposalState.Failed;
-        } else {
-          return ProposalState.Active;
-        }
-      case ProposalState.Executed:
-        return ProposalState.Executed;
-      case ProposalState.Passed:
-        return ProposalState.Passed;
-      case ProposalState.Failed:
-        return ProposalState.Failed;
-      default:
-        return proposal.state;
-    }
-  }, [proposal]);
+  const status = useProposalState(proposal);
 
   return (
     <ProposalCard
       proposal={{ ...proposal, id: proposalId }}
       ensAvatar={ensAvatar}
       votes={votes}
       href={`/${chainName}/${guildId}/proposal/${proposalId}`}
-      statusProps={{ timeDetail, status, endTime: proposal?.endTime }}
+      statusProps={{
+        timeDetail: proposal?.timeDetail,
+        status,
+        endTime: proposal?.endTime,
+      }}
       summaryActions={summaryActions}
     />
   );

src/hooks/Guilds/ether-swr/guild/useProposal.ts

@@ -1,34 +1,64 @@
-import { unix } from 'moment';
+import moment, { unix } from 'moment';
 import { Middleware, SWRHook } from 'swr';
-import { Proposal } from '../../../../types/types.guilds';
 import useEtherSWR from '../useEtherSWR';
 import ERC20GuildContract from 'contracts/ERC20Guild.json';
+import { Proposal, ContractState } from 'types/types.guilds.d';
 
 const formatterMiddleware: Middleware =
   (useSWRNext: SWRHook) => (key, fetcher, config) => {
     const swr = useSWRNext(key, fetcher, config);
     if (swr.data) {
       const original = swr.data as any;
-
       const clone: any = Object.assign({}, swr.data);
+
+      //rename state to contractState
+      clone.contractState = clone.state;
+      delete clone.state;
+
+      switch (clone.contractState) {
+        case 1:
+          clone.contractState = ContractState.Active;
+          break;
+        case 2:
+          clone.contractState = ContractState.Rejected;
+          break;
+        case 3:
+          clone.contractState = ContractState.Executed;
+          break;
+        case 4:
+          clone.contractState = ContractState.Failed;
+          break;
+      }
+
       clone.startTime = original.startTime
         ? unix(original.startTime.toNumber())
         : null;
       clone.endTime = original.endTime
         ? unix(original.endTime.toNumber())
         : null;
 
+      // Add timeDetail
+      const currentTime = moment();
+      let differenceInMilliseconds = currentTime.diff(clone.endTime);
+      let timeDifference = moment.duration(differenceInMilliseconds).humanize();
+      if (clone.endTime.isBefore(currentTime)) {
+        clone.timeDetail = `ended ${timeDifference} ago`;
+      } else {
+        clone.timeDetail = `${timeDifference} left`;
+      }
+
       return { ...swr, data: clone };
     }
     return swr;
   };
 
 export const useProposal = (guildId: string, proposalId: string) => {
-  return useEtherSWR<Proposal>(
+  let result = useEtherSWR<Proposal>(
     guildId && proposalId ? [guildId, 'getProposal', proposalId] : [],
     {
       use: [formatterMiddleware],
       ABIs: new Map([[guildId, ERC20GuildContract.abi]]),
     }
   );
+  return result;
 };

src/hooks/Guilds/guild/useProposalCalls.ts

@@ -2,12 +2,12 @@ import { useState, useEffect, useMemo } from 'react';
 import { useTheme } from 'styled-components';
 import { useWeb3React } from '@web3-react/core';
 import { bulkDecodeCallsFromOptions } from '../contracts/useDecodedCall';
-import useProposalMetadata from 'hooks/Guilds/ether-swr/guild/useProposalMetadata';
 import { decodeCall } from 'hooks/Guilds/contracts/useDecodedCall';
 import { useProposal } from '../ether-swr/guild/useProposal';
 import { useVotingResults } from 'hooks/Guilds/ether-swr/guild/useVotingResults';
 import { Call, Option } from 'old-components/Guilds/ActionsBuilder/types';
 import { ZERO_HASH } from 'utils';
+import useProposalMetadata from '../useProposalMetadata';
 import { useRichContractRegistry } from '../contracts/useRichContractRegistry';
 import { ERC20_APPROVE_SIGNATURE } from 'utils';
 import useGuildImplementationTypeConfig from './useGuildImplementationType';