9604048749

Committed 20 Jun 2024 08:37PM UTC coverage: 15.011% (+0.005%) from 15.006%

Build # 9604048749

Build Type

push

github

Committed by

web-flow

Commit Message

Upgrade Canvas packages to 0.10 (#7395)

* update lockfile with node-gyp dependencies

* revert test-api changes

* don't change cosmos bech32 prefix when verifying

* keplr wallets should use bech32 prefix

* leap wallet should use bech32 prefix

* give terra station web wallet the right type, use bech32Prefix

* move tsx from devDependencies to dependencies

* replace ts-node-dev with tsx watch

* remove ts-node dep

* add ethereumjs-wallet dev dependency

* use tsx to run tests

* remove ethereumjs-wallet and generateEthAddress

* use type: module in subpackages

* set type: module: in libs

* wip: deal with some potentially cjs module imports

* use esm in libs/*

- use fileURLToPath instead of cjs __filename
- replace web3-utils' toBN with ethers.BigNumber.from
- replace remaining require() statements with import statements
- scripts/recompute-count-job: use esm import.meta to detect if we're running the script from cli

* upgrade @magic-sdk/admin from 1.1.0 to 2.4.0

* don't use named imports from lodash

* explicit import for node-jose

* replace requires for sg-mail

* wip

* webpack configs (dev)

* rename createCanvasThing -> createCanvasSignedData

* update yarn.lock for ts-mocha 10.0.0

* use tsx/mocha for api tests

* use type: module in subpackages

* set type: module: in libs

* wip: deal with some potentially cjs module imports

* use esm in libs/*

- use fileURLToPath instead of cjs __filename
- replace web3-utils' toBN with ethers.BigNumber.from
- replace remaining require() statements with import statements
- scripts/recompute-count-job: use esm import.meta to detect if we're running the script from cli

* upgrade @magic-sdk/admin from 1.1.0 to 2.4.0

* don't use named imports from lodash

* explicit import for node-jose

* replace requires for sg-mail

* wip

* webpack configs (dev)

* webpack config (prod)

* fix

* build to nodenext

* libs: rep... (continued)

Run Details

3722 of 26267 branches covered (14.17%)

Branch coverage included in aggregate %.

75 of 212 new or added lines in 36 files covered. (35.38%)

79 existing lines in 16 files now uncovered.

5153 of 32857 relevant lines covered (15.68%)

5.02 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/views/pages/discussions/CommentCard/CommentCard.tsx

import type { DeltaStatic } from 'quill';
import React, { useCallback, useEffect, useState } from 'react';
import app from 'state';

import { GetThreadActionTooltipTextResponse } from 'client/scripts/helpers/threads';
import { SharePopover } from 'client/scripts/views/components/SharePopover';
import {
  ViewCommentUpvotesDrawer,
  ViewUpvotesDrawerTrigger,
} from 'client/scripts/views/components/UpvoteDrawer';
import clsx from 'clsx';
import type Comment from 'models/Comment';
import { verify } from 'shared/canvas';
import { CanvasSignedData, deserializeCanvas } from 'shared/canvas/types';
import { CommentReactionButton } from 'views/components/ReactionButton/CommentReactionButton';
import { PopoverMenu } from 'views/components/component_kit/CWPopoverMenu';
import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
import { CWText } from 'views/components/component_kit/cw_text';
import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
import { CWTag } from 'views/components/component_kit/new_designs/CWTag';
import { CWTooltip } from 'views/components/component_kit/new_designs/CWTooltip';
import { CWThreadAction } from 'views/components/component_kit/new_designs/cw_thread_action';
import { ReactQuillEditor } from 'views/components/react_quill_editor';
import { QuillRenderer } from 'views/components/react_quill_editor/quill_renderer';
import { deserializeDelta } from 'views/components/react_quill_editor/utils';
import { AuthorAndPublishInfo } from '../ThreadCard/AuthorAndPublishInfo';
import './CommentCard.scss';

type CommentCardProps = {
  disabledActionsTooltipText?: GetThreadActionTooltipTextResponse;
  // Edit
  canEdit?: boolean;
  onEditStart?: () => any;
  onEditConfirm?: (comment: DeltaStatic) => any;
  onEditCancel?: (hasContentChanged: boolean) => any;
  isEditing?: boolean;
  isSavingEdit?: boolean;
  editDraft?: string;
  // Delete
  canDelete?: boolean;
  onDelete?: () => any;
  // Reply
  replyBtnVisible?: boolean;
  onReply?: () => any;
  canReply?: boolean;
  maxReplyLimitReached: boolean;
  // Reaction
  canReact?: boolean;
  hideReactButton?: boolean;
  viewUpvotesButtonVisible?: boolean;
  // Spam
  isSpam?: boolean;
  onSpamToggle?: () => any;
  canToggleSpam?: boolean;
  // actual comment
  comment: Comment<any>;
  isThreadArchived: boolean;
  // other
  className?: string;
  shareURL: string;
};

export const CommentCard = ({
  disabledActionsTooltipText = '',
  // edit
  editDraft,
  canEdit,
  onEditStart,
  onEditCancel,
  onEditConfirm,
  isEditing,
  isSavingEdit,
  // delete
  canDelete,
  onDelete,
  // reply
  replyBtnVisible,
  onReply,
  canReply,
  maxReplyLimitReached,
  // reaction
  canReact,
  hideReactButton = false,
  viewUpvotesButtonVisible = true,
  // spam
  isSpam,
  onSpamToggle,
  canToggleSpam,
  // actual comment
  comment,
  isThreadArchived,
  // other
  className,
  shareURL,
}: CommentCardProps) => {
  const [commentText, setCommentText] = useState(comment.text);
  const commentBody = deserializeDelta(
    (editDraft || commentText) ?? comment.text,
  );
  const [commentDelta, setCommentDelta] = useState<DeltaStatic>(commentBody);
  const author =
    comment?.author && app?.chain?.accounts
      ? app.chain.accounts.get(comment?.author)
      : null;

  const [verifiedCanvasSignedData, setVerifiedCanvasSignedData] =
    useState<CanvasSignedData | null>(null);
  const [, setOnReaction] = useState<boolean>(false);
  const [isUpvoteDrawerOpen, setIsUpvoteDrawerOpen] = useState<boolean>(false);

  const doVerify = useCallback(async () => {
    try {
      const canvasSignedData: CanvasSignedData = deserializeCanvas(
        comment.canvasSignedData,
      );
      await verify(canvasSignedData);
      setVerifiedCanvasSignedData(canvasSignedData);
    } catch (err) {
      console.log('Unexpected error while verifying action/session');
      return;
    }
  }, [comment.canvasSignedData]);

  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    doVerify();
  }, [doVerify]);

  const handleReaction = () => {
    setOnReaction((prevOnReaction) => !prevOnReaction);
  };

  return (
    <div className={clsx('comment-body', className)}>
      <div className="comment-header">
        {comment.deleted ? (
          <span>[deleted]</span>
        ) : (
          <AuthorAndPublishInfo
            // @ts-expect-error <StrictNullChecks/>
            authorAddress={app.chain ? author?.address : comment?.author}
            // @ts-expect-error <StrictNullChecks/>
            authorCommunityId={author?.community?.id || author?.profile?.chain}
            publishDate={comment.createdAt}
            discord_meta={comment.discord_meta}
            popoverPlacement="top"
            showUserAddressWithInfo={false}
            profile={comment.profile}
            versionHistory={comment.versionHistory}
            changeContentText={setCommentText}
          />
        )}
      </div>
      {isEditing ? (
        <div className="EditComment">
          <ReactQuillEditor
            contentDelta={commentDelta}
            setContentDelta={setCommentDelta}
          />
          <div className="buttons-row">
            <CWButton
              label="Cancel"
              disabled={isSavingEdit}
              buttonType="tertiary"
              onClick={async (e) => {
                e.preventDefault();
                const hasContentChanged =
                  JSON.stringify(commentBody) !== JSON.stringify(commentDelta);

                // @ts-expect-error <StrictNullChecks/>
                onEditCancel(hasContentChanged);
              }}
            />
            <CWButton
              label="Save"
              buttonWidth="wide"
              disabled={isSavingEdit}
              onClick={async (e) => {
                e.preventDefault();
                e.stopPropagation();
                // @ts-expect-error <StrictNullChecks/>
                await onEditConfirm(commentDelta);
              }}
            />
          </div>
        </div>
      ) : (
        <div className="comment-content">
          {isSpam && <CWTag label="SPAM" type="spam" />}
          <CWText className="comment-text">
            <QuillRenderer doc={commentText} />
          </CWText>
          {!comment.deleted && (
            <div className="comment-footer">
              {!hideReactButton && (
                <CommentReactionButton
                  comment={comment}
                  disabled={!canReact}
                  tooltipText={
                    typeof disabledActionsTooltipText === 'function'
                      ? disabledActionsTooltipText?.('upvote')
                      : disabledActionsTooltipText
                  }
                  onReaction={handleReaction}
                />
              )}

              {viewUpvotesButtonVisible && (
                <>
                  <ViewUpvotesDrawerTrigger
                    onClick={(e) => {
                      e.preventDefault();
                      setIsUpvoteDrawerOpen(true);
                    }}
                  />
                  <ViewCommentUpvotesDrawer
                    comment={comment}
                    isOpen={isUpvoteDrawerOpen}
                    setIsOpen={setIsUpvoteDrawerOpen}
                  />
                </>
              )}

              <SharePopover linkToShare={shareURL} buttonLabel="Share" />

              {!isThreadArchived && replyBtnVisible && (
                <CWThreadAction
                  action="reply"
                  label="Reply"
                  disabled={maxReplyLimitReached || !canReply}
                  tooltipText={
                    (typeof disabledActionsTooltipText === 'function'
                      ? disabledActionsTooltipText?.('reply')
                      : disabledActionsTooltipText) ||
                    (canReply && maxReplyLimitReached
                      ? 'Nested reply limit reached'
                      : '')
                  }
                  onClick={async (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    // @ts-expect-error <StrictNullChecks/>
                    await onReply();
                  }}
                />
              )}

              {!isThreadArchived && (canEdit || canDelete || canToggleSpam) && (
                <PopoverMenu
                  className="CommentActions"
                  renderTrigger={(onClick) => (
                    <CWThreadAction action="overflow" onClick={onClick} />
                  )}
                  // @ts-expect-error <StrictNullChecks/>
                  menuItems={[
                    canEdit && {
                      label: 'Edit',
                      iconLeft: 'notePencil' as const,
                      onClick: onEditStart,
                      iconLeftWeight: 'bold' as const,
                    },
                    canToggleSpam && {
                      onClick: onSpamToggle,
                      label: !isSpam ? 'Flag as spam' : 'Unflag as spam',
                      iconLeft: 'flag' as const,
                      iconLeftWeight: 'bold' as const,
                    },
                    canDelete && {
                      label: 'Delete',
                      iconLeft: 'trash' as const,
                      onClick: onDelete,
                      className: 'danger',
                      iconLeftWeight: 'bold' as const,
                    },
                  ].filter(Boolean)}
                />
              )}

              {verifiedCanvasSignedData && (
                <CWText
                  type="caption"
                  fontWeight="medium"
                  className="verification-icon"
                >
                  <CWTooltip
                    placement="top"
                    content="Signed by author"
                    renderTrigger={(handleInteraction) => (
                      <span
                        onMouseEnter={handleInteraction}
                        onMouseLeave={handleInteraction}
                      >
                        <CWIcon iconName="check" iconSize="xs" />
                      </span>
                    )}
                  ></CWTooltip>
                </CWText>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

1	import type { DeltaStatic } from 'quill';
2	import React, { useCallback, useEffect, useState } from 'react';
3	import app from 'state';
4
5	import { GetThreadActionTooltipTextResponse } from 'client/scripts/helpers/threads';
6	import { SharePopover } from 'client/scripts/views/components/SharePopover';
7	import {
8	ViewCommentUpvotesDrawer,
9	ViewUpvotesDrawerTrigger,
10	} from 'client/scripts/views/components/UpvoteDrawer';
11	import clsx from 'clsx';
12	import type Comment from 'models/Comment';
13	import { verify } from 'shared/canvas';
14	import { CanvasSignedData, deserializeCanvas } from 'shared/canvas/types';
15	import { CommentReactionButton } from 'views/components/ReactionButton/CommentReactionButton';
16	import { PopoverMenu } from 'views/components/component_kit/CWPopoverMenu';
17	import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
18	import { CWText } from 'views/components/component_kit/cw_text';
19	import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
20	import { CWTag } from 'views/components/component_kit/new_designs/CWTag';
21	import { CWTooltip } from 'views/components/component_kit/new_designs/CWTooltip';
22	import { CWThreadAction } from 'views/components/component_kit/new_designs/cw_thread_action';
23	import { ReactQuillEditor } from 'views/components/react_quill_editor';
24	import { QuillRenderer } from 'views/components/react_quill_editor/quill_renderer';
25	import { deserializeDelta } from 'views/components/react_quill_editor/utils';
26	import { AuthorAndPublishInfo } from '../ThreadCard/AuthorAndPublishInfo';
27	import './CommentCard.scss';
28
29	type CommentCardProps = {
30	disabledActionsTooltipText?: GetThreadActionTooltipTextResponse;
31	// Edit
32	canEdit?: boolean;
33	onEditStart?: () => any;
34	onEditConfirm?: (comment: DeltaStatic) => any;
35	onEditCancel?: (hasContentChanged: boolean) => any;
36	isEditing?: boolean;
37	isSavingEdit?: boolean;
38	editDraft?: string;
39	// Delete
40	canDelete?: boolean;
41	onDelete?: () => any;
42	// Reply
43	replyBtnVisible?: boolean;
44	onReply?: () => any;
45	canReply?: boolean;
46	maxReplyLimitReached: boolean;
47	// Reaction
48	canReact?: boolean;
49	hideReactButton?: boolean;
50	viewUpvotesButtonVisible?: boolean;
51	// Spam
52	isSpam?: boolean;
53	onSpamToggle?: () => any;
54	canToggleSpam?: boolean;
55	// actual comment
56	comment: Comment<any>;
57	isThreadArchived: boolean;
58	// other
59	className?: string;
60	shareURL: string;
61	};
62
63	export const CommentCard = ({
64	disabledActionsTooltipText = '',	×
65	// edit	×
66	editDraft,
67	canEdit,
68	onEditStart,
69	onEditCancel,
70	onEditConfirm,
71	isEditing,
72	isSavingEdit,
73	// delete
74	canDelete,
75	onDelete,
76	// reply
77	replyBtnVisible,
78	onReply,
79	canReply,
80	maxReplyLimitReached,
81	// reaction
82	canReact,
83	hideReactButton = false,	×
84	viewUpvotesButtonVisible = true,	×
85	// spam	×
86	isSpam,
87	onSpamToggle,
88	canToggleSpam,
89	// actual comment
90	comment,
91	isThreadArchived,
92	// other
93	className,
94	shareURL,
95	}: CommentCardProps) => {
96	const [commentText, setCommentText] = useState(comment.text);
97	const commentBody = deserializeDelta(	×
98	(editDraft \|\| commentText) ?? comment.text,	×
99	);
100	const [commentDelta, setCommentDelta] = useState<DeltaStatic>(commentBody);
101	const author =
102	comment?.author && app?.chain?.accounts	×
103	? app.chain.accounts.get(comment?.author)	×
104	: null;
105
106	const [verifiedCanvasSignedData, setVerifiedCanvasSignedData] =
107	useState<CanvasSignedData \| null>(null);
108	const [, setOnReaction] = useState<boolean>(false);	×
109	const [isUpvoteDrawerOpen, setIsUpvoteDrawerOpen] = useState<boolean>(false);	×
110
NEW 111	const doVerify = useCallback(async () => {	×
112	try {	×
113	const canvasSignedData: CanvasSignedData = deserializeCanvas(
114	comment.canvasSignedData,
115	);
116	await verify(canvasSignedData);
NEW 117	setVerifiedCanvasSignedData(canvasSignedData);	×
118	} catch (err) {
119	console.log('Unexpected error while verifying action/session');	×
120	return;	×
121	}	×
122	}, [comment.canvasSignedData]);	×
123
124	useEffect(() => {
125	// eslint-disable-next-line @typescript-eslint/no-floating-promises
NEW 126	doVerify();	×
127	}, [doVerify]);
128
129	const handleReaction = () => {	×
130	setOnReaction((prevOnReaction) => !prevOnReaction);	×
131	};
132
133	return (
134	<div className={clsx('comment-body', className)}>
135	<div className="comment-header">
136	{comment.deleted ? (	×
137	<span>[deleted]</span>
138	) : (
139	<AuthorAndPublishInfo
140	// @ts-expect-error <StrictNullChecks/>
141	authorAddress={app.chain ? author?.address : comment?.author}	×
142	// @ts-expect-error <StrictNullChecks/>
143	authorCommunityId={author?.community?.id \|\| author?.profile?.chain}	×
144	publishDate={comment.createdAt}
145	discord_meta={comment.discord_meta}
146	popoverPlacement="top"	×
147	showUserAddressWithInfo={false}
148	profile={comment.profile}
149	versionHistory={comment.versionHistory}
150	changeContentText={setCommentText}
151	/>	×
152	)}
153	</div>	×
154	{isEditing ? (	×
155	<div className="EditComment">
156	<ReactQuillEditor
157	contentDelta={commentDelta}
158	setContentDelta={setCommentDelta}
159	/>
160	<div className="buttons-row">
161	<CWButton
162	label="Cancel"
163	disabled={isSavingEdit}
164	buttonType="tertiary"	×
165	onClick={async (e) => {
166	e.preventDefault();
167	const hasContentChanged =
168	JSON.stringify(commentBody) !== JSON.stringify(commentDelta);
169
170	// @ts-expect-error <StrictNullChecks/>
171	onEditCancel(hasContentChanged);
172	}}
173	/>
174	<CWButton
175	label="Save"
176	buttonWidth="wide"
177	disabled={isSavingEdit}
178	onClick={async (e) => {
179	e.preventDefault();
180	e.stopPropagation();
181	// @ts-expect-error <StrictNullChecks/>
182	await onEditConfirm(commentDelta);
183	}}
184	/>
185	</div>
186	</div>
187	) : (
188	<div className="comment-content">
189	{isSpam && <CWTag label="SPAM" type="spam" />}	×
190	<CWText className="comment-text">
191	<QuillRenderer doc={commentText} />
192	</CWText>
193	{!comment.deleted && (	×
194	<div className="comment-footer">
195	{!hideReactButton && (	×
196	<CommentReactionButton
197	comment={comment}
198	disabled={!canReact}
199	tooltipText={	×
200	typeof disabledActionsTooltipText === 'function'	×
201	? disabledActionsTooltipText?.('upvote')
202	: disabledActionsTooltipText
203	}	×
204	onReaction={handleReaction}
205	/>	×
206	)}
207
208	{viewUpvotesButtonVisible && (	×
209	<>
210	<ViewUpvotesDrawerTrigger	×
211	onClick={(e) => {
212	e.preventDefault();
213	setIsUpvoteDrawerOpen(true);
214	}}
215	/>
216	<ViewCommentUpvotesDrawer
217	comment={comment}
218	isOpen={isUpvoteDrawerOpen}	×
219	setIsOpen={setIsUpvoteDrawerOpen}
220	/>
221	</>
222	)}
223
224	<SharePopover linkToShare={shareURL} buttonLabel="Share" />
225
226	{!isThreadArchived && replyBtnVisible && (	×
227	<CWThreadAction
228	action="reply"
229	label="Reply"
230	disabled={maxReplyLimitReached \|\| !canReply}	×
231	tooltipText={	×
232	(typeof disabledActionsTooltipText === 'function'	×
233	? disabledActionsTooltipText?.('reply')
234	: disabledActionsTooltipText) \|\|
235	(canReply && maxReplyLimitReached	×
236	? 'Nested reply limit reached'	×
237	: '')
238	}
239	onClick={async (e) => {
240	e.preventDefault();	×
241	e.stopPropagation();	×
242	// @ts-expect-error <StrictNullChecks/>	×
243	await onReply();
244	}}
245	/>	×
246	)}
247
248	{!isThreadArchived && (canEdit \|\| canDelete \|\| canToggleSpam) && (	×
249	<PopoverMenu
250	className="CommentActions"
251	renderTrigger={(onClick) => (
252	<CWThreadAction action="overflow" onClick={onClick} />
253	)}
254	// @ts-expect-error <StrictNullChecks/>
255	menuItems={[
256	canEdit && {	×
257	label: 'Edit',
258	iconLeft: 'notePencil' as const,	×
259	onClick: onEditStart,
260	iconLeftWeight: 'bold' as const,
261	},
262	canToggleSpam && {	×
263	onClick: onSpamToggle,
264	label: !isSpam ? 'Flag as spam' : 'Unflag as spam',	×
265	iconLeft: 'flag' as const,
266	iconLeftWeight: 'bold' as const,	×
267	},
268	canDelete && {	×
269	label: 'Delete',
270	iconLeft: 'trash' as const,
271	onClick: onDelete,
272	className: 'danger',	×
273	iconLeftWeight: 'bold' as const,
274	},	×
275	].filter(Boolean)}
276	/>
277	)}
278		×
279	{verifiedCanvasSignedData && (	×
280	<CWText
281	type="caption"
282	fontWeight="medium"
283	className="verification-icon"
284	>
285	<CWTooltip
286	placement="top"
287	content="Signed by author"
288	renderTrigger={(handleInteraction) => (
289	<span	×
290	onMouseEnter={handleInteraction}
291	onMouseLeave={handleInteraction}
292	>
293	<CWIcon iconName="check" iconSize="xs" />
294	</span>
295	)}
296	></CWTooltip>
297	</CWText>
298	)}
299	</div>
300	)}
301	</div>
302	)}	×
303	</div>
304	);
305	};

hicommonwealth / commonwealth / 9604048749

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous