Release/v2.4.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "davi",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "Decentralized Autonomous Voting Interface",
   "scripts": {
     "dev": "./scripts/dev.sh",
@@ -44,8 +44,11 @@
     "@nomiclabs/hardhat-truffle5": "^2.0.5",
     "@nomiclabs/hardhat-web3": "^2.0.0",
     "@orbisclub/orbis-sdk": "^0.3.80",
+    "@sentry/integrations": "^7.30.0",
+    "@sentry/react": "^7.30.0",
     "@tiptap/extension-focus": "^2.0.0-beta.39",
     "@tiptap/extension-highlight": "^2.0.0-beta.32",
+    "@tiptap/extension-link": "^2.0.0-beta.209",
     "@tiptap/extension-placeholder": "^2.0.0-beta.48",
     "@tiptap/react": "^2.0.0-beta.105",
     "@tiptap/starter-kit": "^2.0.0-beta.171",
@@ -80,7 +83,6 @@
     "jsonexport": "^3.2.0",
     "jszip": "^3.7.1",
     "lodash": "^4.17.21",
-    "markdown-to-jsx": "^7.1.5",
     "mini-css-extract-plugin": "2.4.5",
     "minisearch": "^3.1.0",
     "moment": "^2.24.0",
@@ -90,7 +92,7 @@
     "react": "^18.2.0",
     "react-app-rewired": "^2.1.8",
     "react-countdown": "^2.3.2",
-    "react-datetime": "^3.1.1",
+    "react-datepicker": "^4.8.0",
     "react-device-detect": "^2.1.2",
     "react-diff-viewer": "^3.1.1",
     "react-dom": "^18.2.0",
@@ -202,4 +204,4 @@
       "text-summary"
     ]
   }
-}
+}

public/index.html

@@ -6,22 +6,22 @@
 
     <meta charset="utf-8" />
     <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/favicon.ico" />
-    <meta name="theme-color" content="#4e69ff" />
+    <meta name="theme-color" content="#1B1D1F" />
     <meta name="title" content="DAVI" />
     <meta name="description" content="DXdao's decentralized governance platform." />
-    <meta name="image" content="%PUBLIC_URL%t/assets/thumb.png" />
+    <meta name="image" content="%PUBLIC_URL%/assets/thumb.png" />
     <meta property="og:title" content="DAVI" />
     <meta property="og:description" content="DXdao's decentralized governance platform." />
     <meta property="og:image" content="%PUBLIC_URL%/assets/thumb.png" />
-    <meta property="og:url" content="https://project-davi.eth.link/" />
+    <meta property="og:url" content="https://projectdavi.eth.limo/" />
     <meta property="og:site_name" content="DAVI" />
     <meta property="og:type" content="website" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="DAVI" />
     <meta name="twitter:description" content="DXdao's decentralized governance platform." />
     <meta name="twitter:image" content="%PUBLIC_URL%/assets/thumb.png" />
     <meta name="twitter:image:alt" content="DAVI" />
-    <meta name="twitter:site" content="@dxgov" />
+    <meta name="twitter:site" content="@ProjectDAVI" />
     <link rel="icon" href="%PUBLIC_URL%/assets/favicon.ico" />
 
     <link rel=”shortcut icon” href=”assets/favicon.ico”>

src/Modules/Guilds/Hooks/useProposalCalls.ts

@@ -88,9 +88,12 @@ const useProposalCalls = (guildId: string, proposalId: `0x${string}`) => {
   }, [calls, callsPerOption, totalOptionsNum]);
 
   useEffect(() => {
+    let cancelled = false;
+
     if (!guildId || !proposalId || !splitCalls || !loaded) {
       setOptions([]);
-      return;
+
+      return () => {};
     }
     async function decodeOptions() {
       const encodedOptions: Option[] = await Promise.all(
@@ -152,10 +155,16 @@ const useProposalCalls = (guildId: string, proposalId: `0x${string}`) => {
 
       return bulkDecodeCallsFromOptions(encodedOptions, contracts, chain?.id);
     }
-    decodeOptions().then(options =>
-      // Return options putting default against-call last
-      setOptions([...options.slice(1), options[0]])
-    );
+    decodeOptions().then(options => {
+      if (!cancelled) {
+        // Return options putting default against-call last
+        setOptions([...options.slice(1), options[0]]);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     guildId,

src/Modules/Guilds/pages/AllDiscussions/AllDiscussions.tsx

@@ -6,23 +6,19 @@ import { UnstyledLink } from 'components/primitives/Links';
 import { Button } from 'components/primitives/Button';
 import { ProposalsList } from './AllDiscussions.styled';
 import Discussions from 'Modules/Social/Discussions';
-import useIsProposalCreationAllowed from 'Modules/Guilds/Hooks/useIsProposalCreationAllowed';
 
 const AllDiscussions = ({ guildId }) => {
   const { t } = useTranslation();
   const { chainName } = useTypedParams();
-  const isProposalCreationAllowed = useIsProposalCreationAllowed();
 
   return (
     <>
       <Flex direction="row" justifyContent="right">
-        {isProposalCreationAllowed && (
-          <UnstyledLink to={`/${chainName}/${guildId}/create`}>
-            <Button variant="secondary" data-testid="create-discussion-button">
-              {t('forum.createDiscussion')}
-            </Button>
-          </UnstyledLink>
-        )}
+        <UnstyledLink to={`/${chainName}/${guildId}/create`}>
+          <Button variant="secondary" data-testid="create-discussion-button">
+            {t('forum.createDiscussion')}
+          </Button>
+        </UnstyledLink>
       </Flex>
       <ProposalsList>
         <Discussions />

src/Modules/Guilds/pages/CreateDiscussion.tsx

@@ -25,10 +25,10 @@ import {
   postTemplate,
 } from 'components/Forum';
 import { DiscussionContent } from 'components/Forum/types';
-import { OrbisContext } from 'contexts/Guilds/orbis';
+import { useOrbisContext } from 'contexts/Guilds/orbis';
 
 const CreateDiscussionPage: React.FC = () => {
-  const { orbis } = useContext(OrbisContext);
+  const { orbis } = useOrbisContext();
 
   const { guildId, chainName: chain } = useTypedParams();
   const { isLoading: isGuildAvailabilityLoading } = useContext(

src/Modules/Guilds/pages/CreateProposal.tsx

@@ -45,7 +45,7 @@ import {
   createPost,
   postTemplate,
 } from 'components/Forum';
-import { OrbisContext } from 'contexts/Guilds/orbis';
+import { useOrbisContext } from 'contexts/Guilds/orbis';
 import { DiscussionContent } from 'components/Forum/types';
 
 export const EMPTY_CALL: Call = {
@@ -63,7 +63,7 @@ const CreateProposalPage: React.FC = () => {
   const { isLoading: isGuildAvailabilityLoading } = useContext(
     GuildAvailabilityContext
   );
-  const { orbis } = useContext(OrbisContext);
+  const { orbis } = useOrbisContext();
 
   const navigate = useNavigate();
   const { t } = useTranslation();

src/Modules/Guilds/pages/Discussion/Discussion.styled.tsx

@@ -49,3 +49,17 @@ export const HeaderTopRow = styled(Box)`
   align-items: center;
   margin-bottom: 1rem;
 `;
+
+export const ActionsGroup = styled(Box)`
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  margin: 1rem;
+`;
+
+export const PostDetailsRow = styled(Box)`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;

src/Modules/Guilds/pages/Discussion/Discussion.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import AddressButton from 'components/AddressButton/AddressButton';
 import { ProposalDescription } from 'components/ProposalDescription';
 import { UnstyledLink } from 'components/primitives/Links';
@@ -8,20 +8,24 @@ import { FaChevronLeft } from 'react-icons/fa';
 import { useGuildConfig } from 'Modules/Guilds/Hooks/useGuildConfig';
 import { IOrbisPost } from 'types/types.orbis';
 import {
+  ActionsGroup,
   HeaderTopRow,
   PageContainer,
   PageContent,
   PageHeader,
   PageTitle,
+  PostDetailsRow,
   StyledIconButton,
 } from './Discussion.styled';
 import { useTranslation } from 'react-i18next';
 import { SidebarCard, SidebarCardHeaderSpaced } from 'components/SidebarCard';
 import { Header as CardHeader } from 'components/Card';
 import { Discussion } from 'components/Discussion';
 import useDiscussionContext from 'Modules/Guilds/Hooks/useDiscussionContext';
-import { OrbisContext } from 'contexts/Guilds/orbis';
+import { useOrbisContext } from 'contexts/Guilds/orbis';
 import { StyledButton } from 'Modules/Guilds/styles';
+import PostActions from 'components/Discussion/Post/PostActions';
+import moment from 'moment';
 
 const DiscussionPage: React.FC = () => {
   const { t } = useTranslation();
@@ -30,7 +34,7 @@ const DiscussionPage: React.FC = () => {
   const [op, setOp] = useState<IOrbisPost>();
 
   const { data: guildConfig } = useGuildConfig(guildId);
-  const { orbis } = useContext(OrbisContext);
+  const { orbis } = useOrbisContext();
   const { context } = useDiscussionContext(
     `${guildId}-${discussionId}-discussions`
   );
@@ -45,6 +49,15 @@ const DiscussionPage: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleDelete = () => {
+    const confirmed = window.confirm(
+      `${t('deletionMessage1')}'\r\n${t('deletionMessage2')}`
+    );
+    if (confirmed) {
+      orbis.deletePost(discussionId);
+    }
+  };
+
   return (
     <PageContainer>
       <PageContent>
@@ -74,14 +87,24 @@ const DiscussionPage: React.FC = () => {
             )}
           </PageTitle>
         </PageHeader>
-
-        <AddressButton address={op?.creator_details.metadata?.address} />
+        <PostDetailsRow>
+          <AddressButton address={op?.creator_details.metadata?.address} />
+          {op?.timestamp && moment.unix(op.timestamp).fromNow()}
+        </PostDetailsRow>
 
         <ProposalDescription
           metadata={{ description: op?.content?.body }}
           error={null}
         />
 
+        <ActionsGroup>
+          <PostActions
+            post={op}
+            showThreadButton={false}
+            onClickDelete={handleDelete}
+          />
+        </ActionsGroup>
+
         <SidebarCard
           header={
             <SidebarCardHeaderSpaced>

src/Modules/Guilds/pages/Governance/Governance.tsx

@@ -16,15 +16,13 @@ import { Button } from 'components/primitives/Button';
 import { ProposalsList, StyledHeading, StyledLink } from './Governance.styled';
 import { ProposalState } from 'types/types.guilds.d';
 import Discussions from 'Modules/Social/Discussions';
-import useIsProposalCreationAllowed from 'Modules/Guilds/Hooks/useIsProposalCreationAllowed';
 
 const Governance = ({ guildId }) => {
   const { isLoading } = useContext(GuildAvailabilityContext);
   const { data: proposalIds, error } = useGuildProposalIds(guildId);
   const { t } = useTranslation();
   const { data: activeProposals } = useActiveProposalsNow(guildId);
   const { chainName } = useTypedParams();
-  const isProposalCreationAllowed = useIsProposalCreationAllowed();
 
   /*
   Since filters are a global state, we need to reset all of them
@@ -88,13 +86,11 @@ const Governance = ({ guildId }) => {
           icon={<AiOutlineSearch size={24} />}
           placeholder={t('searchTitleEnsAddress')}
         />
-        {isProposalCreationAllowed && (
-          <UnstyledLink to={`/${chainName}/${guildId}/create`}>
-            <Button variant="secondary" data-testid="create-discussion-button">
-              {t('forum.createDiscussion')}
-            </Button>
-          </UnstyledLink>
-        )}
+        <UnstyledLink to={`/${chainName}/${guildId}/create`}>
+          <Button variant="secondary" data-testid="create-discussion-button">
+            {t('forum.createDiscussion')}
+          </Button>
+        </UnstyledLink>
       </Flex>
       <ProposalsList data-testid="proposals-list">
         <StyledHeading size={2}>{t('proposals')}</StyledHeading>

src/Modules/Social/Discussions.tsx

@@ -1,5 +1,4 @@
-import { useContext, useEffect, useMemo, useState } from 'react';
-// import { Orbis } from '@orbisclub/orbis-sdk';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Virtuoso } from 'react-virtuoso';
 import { DiscussionCard } from 'components/DiscussionCard';
@@ -11,10 +10,10 @@ import { ErrorLabel } from 'components/primitives/Forms/ErrorLabel';
 import { Button } from 'components/primitives/Button';
 import { DISCUSSIONS_TO_SHOW, REFRESH_DISCUSSIONS_INTERVAL } from './constants';
 import { Box } from 'components/primitives/Layout';
-import { OrbisContext } from 'contexts/Guilds/orbis';
+import { useOrbisContext } from 'contexts/Guilds/orbis';
 
 const Discussions = () => {
-  const { orbis } = useContext(OrbisContext);
+  const { orbis } = useOrbisContext();
 
   const [discussions, setDiscussions] = useState<Discussion[]>([]);
   const [error, setError] = useState(null);

src/components/ActionsBuilder/CallDetails/CallDetails.tsx

@@ -155,7 +155,7 @@ export const CallDetails: React.FC<ActionViewProps> = ({
             variant={'secondary'}
             onClick={() => setDisplayRichData(v => !v)}
           >
-            {displayRichData ? t('displayRawData') : t('displayFormatedData')}
+            {displayRichData ? t('displayRawData') : t('displayFormattedData')}
           </DetailsButton>
         </Flex>
       )}

src/components/ActionsBuilder/SupportedActions/ERC20Transfer/ERC20TransferEditor.tsx

@@ -79,7 +79,7 @@ const ERC20TransferEditor: React.FC<ActionEditorProps> = ({
     }
   }, [decodedCall, tokens]);
 
-  const { control, handleSubmit } = useForm({
+  const { control, handleSubmit, getValues } = useForm({
     resolver: validateERC20Transfer,
     context: { t },
     defaultValues: parsedData,
@@ -158,7 +158,7 @@ const ERC20TransferEditor: React.FC<ActionEditorProps> = ({
                   <ControlRow>
                     <TokenAmountInput
                       {...field}
-                      decimals={field.value?.decimals}
+                      decimals={getValues('token.decimals')}
                       isInvalid={!!error}
                     />
                   </ControlRow>

src/components/ActionsBuilder/SupportedActions/GenericCall/GenericCallParamsMatcher.tsx

@@ -4,7 +4,7 @@ import { ChildrenNode, Matcher, MatchResponse, Node } from 'interweave';
 import moment from 'moment';
 import { BlockExplorerLink } from 'components/primitives/Links';
 import { FunctionParamWithValue } from 'components/ActionsBuilder/SupportedActions/GenericCall/GenericCallInfoLine';
-import { capitalizeFirstLetter } from 'utils';
+import { getDurationData } from 'hooks/Guilds/useDuration/getDurationData';
 interface MatcherOptions {
   params: FunctionParamWithValue[];
 }
@@ -37,9 +37,9 @@ export const renderGenericCallParamValue = (
       return `${moment.unix(Number(param.value)).utc().format('LLLL')} UTC`;
     case 'duration':
     case 'time':
-      return capitalizeFirstLetter(
-        moment.duration(Number(param.value), 'seconds').humanize()
-      );
+      return param.value === '0'
+        ? '0 seconds'
+        : getDurationData(Number(param.value))?.string;
     case 'boolean':
       return `${param.value}`;
     case 'tokenAmount':

src/components/ActionsBuilder/SupportedActions/GenericCall/__snapshots__/GenericCallParamsMatcher.test.tsx.snap

@@ -169,7 +169,7 @@ exports[`GenericCallParamsMatcher Should match snapshot for all component types
 exports[`GenericCallParamsMatcher Should match snapshot for all component types 5`] = `
 <div>
 
-  52 years
+  53 years, 2 months, 1 day, 18 hours, 17 minutes and 18 seconds
 
 </div>
 `;
@@ -399,7 +399,7 @@ exports[`GenericCallParamsMatcher replaces all component types correctly 5`] = `
     matchedparam="timeParam"
     style="display: inline-block;"
   >
-    52 years
+    53 years, 2 months, 1 day, 18 hours, 17 minutes and 18 seconds
   </span>
 
 </div>