Merge pull request #10055 from hicommonwealth/burton/sticky-editor

sticky editor implementation - ready for review
hicommonwealth · Dec 10, 2024 · fa2c886 · fa2c886
2 parents 9cfc0d2 + f89b1ec
commit fa2c886
Show file tree

Hide file tree

Showing 36 changed files with 883 additions and 164 deletions.
diff --git a/packages/commonwealth/client/scripts/controllers/server/sessions.ts b/packages/commonwealth/client/scripts/controllers/server/sessions.ts
@@ -71,14 +71,34 @@ export async function getSessionFromWallet(
   }
 }
 
-function getDidForCurrentAddress(address: string) {
-  const caip2Prefix = chainBaseToCaip2(app.chain.base);
+export function getEthChainIdOrBech32Prefix({
+  base,
+  bech32_prefix,
+  eth_chain_id,
+}: {
+  base: ChainBase;
+  bech32_prefix?: string;
+  eth_chain_id?: number;
+}) {
+  return base === ChainBase.CosmosSDK
+    ? bech32_prefix || 'cosmos'
+    : eth_chain_id || 1;
+}
 
-  const idOrPrefix =
-    app.chain.base === ChainBase.CosmosSDK
-      ? app.chain?.meta.bech32_prefix || 'cosmos'
-      : app.chain?.meta?.ChainNode?.eth_chain_id || 1;
-  const canvasChainId = chainBaseToCanvasChainId(app.chain.base, idOrPrefix);
+function getDidForCurrentAddress(
+  address: string,
+  base?: ChainBase,
+  ethChainIdOrBech32Prefix?: string | number,
+) {
+  const idOrPrefix = ethChainIdOrBech32Prefix
+    ? ethChainIdOrBech32Prefix
+    : app?.chain?.base === ChainBase.CosmosSDK
+      ? app?.chain?.meta?.bech32_prefix || 'cosmos'
+      : app?.chain?.meta?.ChainNode?.eth_chain_id || 1;
+  const chainBase = base || app.chain.base;
+  const caip2Prefix = chainBaseToCaip2(chainBase);
+
+  const canvasChainId = chainBaseToCanvasChainId(chainBase, idOrPrefix);
 
   return `did:pkh:${caip2Prefix}:${canvasChainId}:${address}`;
 }
@@ -92,10 +112,26 @@ async function getClockFromAPI(): Promise<[number, string[]]> {
 // Public signer methods
 export async function signThread(
   address: string,
-  { community, title, body, link, topic },
+  {
+    community,
+    base,
+    title,
+    body,
+    link,
+    topic,
+    ethChainIdOrBech32Prefix,
+  }: {
+    community: string;
+    base: ChainBase;
+    title: string;
+    body?: string;
+    link?: string;
+    topic?: number;
+    ethChainIdOrBech32Prefix?: string | number;
+  },
 ) {
   return await sign(
-    getDidForCurrentAddress(address),
+    getDidForCurrentAddress(address, base, ethChainIdOrBech32Prefix),
     'thread',
     {
       community: community || '',

diff --git a/packages/commonwealth/client/scripts/helpers/feature-flags.ts b/packages/commonwealth/client/scripts/helpers/feature-flags.ts
@@ -30,6 +30,7 @@ const featureFlags = {
   tokenizedCommunity: buildFlag(process.env.FLAG_TOKENIZED_COMMUNITY),
   manageApiKeys: buildFlag(process.env.FLAG_MANAGE_API_KEYS),
   referrals: buildFlag(process.env.FLAG_REFERRALS),
+  stickyEditor: buildFlag(process.env.FLAG_STICKY_EDITOR),
 };
 
 export type AvailableFeatureFlag = keyof typeof featureFlags;

diff --git a/packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx b/packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx
@@ -343,6 +343,14 @@ const CommonDomainRoutes = ({
       scoped: true,
     })}
   />,
+  <Route
+    key="/new/discussion"
+    path="/new/discussion"
+    element={withLayout(NewThreadPage, {
+      scoped: false,
+      type: 'common',
+    })}
+  />,
   <Route
     key="/:scope/proposal/discussion/:identifier"
     path="/:scope/proposal/discussion/:identifier"

diff --git a/packages/commonwealth/client/scripts/state/api/threads/createThread.ts b/packages/commonwealth/client/scripts/state/api/threads/createThread.ts
@@ -1,4 +1,4 @@
-import { toCanvasSignedDataApiArgs } from '@hicommonwealth/shared';
+import { ChainBase, toCanvasSignedDataApiArgs } from '@hicommonwealth/shared';
 import { signThread } from 'controllers/server/sessions';
 import type { Topic } from 'models/Topic';
 import { ThreadStage } from 'models/types';
@@ -15,28 +15,34 @@ interface CreateThreadProps {
   kind: 'discussion' | 'link';
   stage: string;
   communityId: string;
+  communityBase: ChainBase;
   title: string;
   topic: Topic;
   body?: string;
   url?: string;
+  ethChainIdOrBech32Prefix?: string | number;
 }
 
 export const buildCreateThreadInput = async ({
   address,
   kind,
   stage,
   communityId,
+  communityBase,
   title,
   topic,
   body,
   url,
+  ethChainIdOrBech32Prefix,
 }: CreateThreadProps) => {
   const canvasSignedData = await signThread(address, {
     community: communityId,
+    base: communityBase,
     title,
     body,
     link: url,
     topic: topic.id,
+    ethChainIdOrBech32Prefix,
   });
   return {
     community_id: communityId,

diff --git a/...es/commonwealth/client/scripts/views/components/Comments/CommentEditor/CommentEditor.scss b/...es/commonwealth/client/scripts/views/components/Comments/CommentEditor/CommentEditor.scss
@@ -5,6 +5,7 @@
   flex-direction: column;
   gap: 8px;
   margin-top: 16px;
+  flex-grow: 1;
 
   .attribution-row {
     display: flex;

diff --git a/...ges/commonwealth/client/scripts/views/components/Comments/CommentEditor/CommentEditor.tsx b/...ges/commonwealth/client/scripts/views/components/Comments/CommentEditor/CommentEditor.tsx
@@ -10,20 +10,21 @@ import { CWButton } from '../../component_kit/new_designs/CWButton';
 import { ReactQuillEditor } from '../../react_quill_editor';
 import './CommentEditor.scss';
 
-type CommentEditorProps = {
+export type CommentEditorProps = {
   parentType: ContentType;
   canComment: boolean;
   handleSubmitComment: () => void;
   errorMsg: string;
   contentDelta: DeltaStatic;
   setContentDelta: React.Dispatch<React.SetStateAction<DeltaStatic>>;
   disabled: boolean;
-  onCancel: (e: any) => void;
+  onCancel: (e: React.MouseEvent) => void;
   author: Account;
   editorValue: string;
-  shouldFocus: boolean;
+  shouldFocus?: boolean;
   tooltipText?: string;
   isReplying?: boolean;
+  replyingToAuthor?: string;
 };
 
 export const CommentEditor = ({
@@ -36,10 +37,8 @@ export const CommentEditor = ({
   disabled,
   onCancel,
   author,
-  editorValue,
   shouldFocus,
   tooltipText,
-  isReplying,
 }: CommentEditorProps) => {
   return (
     <div className="CommentEditor">
@@ -74,14 +73,12 @@ export const CommentEditor = ({
       />
       <div className="form-bottom">
         <div className="form-buttons">
-          {(editorValue.length > 0 || isReplying) && (
-            <CWButton buttonType="tertiary" onClick={onCancel} label="Cancel" />
-          )}
+          <CWButton buttonType="tertiary" onClick={onCancel} label="Cancel" />
           <CWButton
             buttonWidth="wide"
             disabled={disabled}
             onClick={handleSubmitComment}
-            label="Submit"
+            label="Post"
           />
         </div>
       </div>

diff --git a/packages/commonwealth/client/scripts/views/components/Comments/CreateComment.tsx b/packages/commonwealth/client/scripts/views/components/Comments/CreateComment.tsx
@@ -10,13 +10,13 @@ import React, { useEffect, useMemo, useState } from 'react';
 import app from 'state';
 import { useCreateCommentMutation } from 'state/api/comments';
 import useUserStore from 'state/ui/user';
+import { StickyEditorContainer } from 'views/components/StickEditorContainer';
 import Thread from '../../../models/Thread';
 import { useFetchProfilesByAddressesQuery } from '../../../state/api/profiles/index';
 import { jumpHighlightComment } from '../../pages/discussions/CommentTree/helpers';
 import { createDeltaFromText, getTextFromDelta } from '../react_quill_editor';
 import { serializeDelta } from '../react_quill_editor/utils';
 import { ArchiveMsg } from './ArchiveMsg';
-import { CommentEditor } from './CommentEditor';
 
 type CreateCommentProps = {
   handleIsReplying?: (isReplying: boolean, id?: number) => void;
@@ -26,6 +26,8 @@ type CreateCommentProps = {
   canComment: boolean;
   tooltipText?: string;
   isReplying?: boolean;
+  replyingToAuthor?: string;
+  onCancel?: (event: React.MouseEvent) => void;
 };
 
 export const CreateComment = ({
@@ -36,6 +38,8 @@ export const CreateComment = ({
   canComment,
   tooltipText = '',
   isReplying,
+  replyingToAuthor,
+  onCancel,
 }: CreateCommentProps) => {
   const { saveDraft, restoreDraft, clearDraft } = useDraft<DeltaStatic>(
     !parentCommentId
@@ -135,14 +139,18 @@ export const CreateComment = ({
 
   const disabled = editorValue.length === 0 || sendingComment;
 
-  const handleCancel = (e) => {
-    e.preventDefault();
+  const handleCancel = (event: React.MouseEvent) => {
+    if (event) {
+      event.preventDefault();
+    }
+
     setContentDelta(createDeltaFromText(''));
 
     if (handleIsReplying) {
       handleIsReplying(false);
     }
     clearDraft();
+    onCancel?.(event);
   };
 
   // on content updated, save draft
@@ -151,12 +159,11 @@ export const CreateComment = ({
   }, [handleIsReplying, saveDraft, contentDelta]);
 
   return rootThread.archivedAt === null ? (
-    <CommentEditor
+    <StickyEditorContainer
       parentType={parentType}
       canComment={canComment}
       handleSubmitComment={handleSubmitComment}
-      // @ts-expect-error <StrictNullChecks/>
-      errorMsg={errorMsg}
+      errorMsg={errorMsg ?? ''}
       contentDelta={contentDelta}
       setContentDelta={setContentDelta}
       disabled={disabled}
@@ -165,6 +172,7 @@ export const CreateComment = ({
       editorValue={editorValue}
       tooltipText={tooltipText}
       isReplying={isReplying}
+      replyingToAuthor={replyingToAuthor}
     />
   ) : (
     <ArchiveMsg archivedAt={rootThread.archivedAt!} />

diff --git a/packages/commonwealth/client/scripts/views/components/Mava/Mava.scss b/packages/commonwealth/client/scripts/views/components/Mava/Mava.scss
@@ -3,7 +3,7 @@
 #mava {
   .loadButton {
     @media only screen and (max-width: $breakpoint-small-max-px) {
-      bottom: 75px !important;
+      display: none !important;
     }
   }
 }
diff --git a/packages/commonwealth/client/scripts/views/components/MobileNavigation/MobileNavigation.scss b/packages/commonwealth/client/scripts/views/components/MobileNavigation/MobileNavigation.scss
@@ -2,11 +2,18 @@
 
 .MobileNavigation {
   border-top: 1px solid $neutral-200;
-  height: 56px;
   display: flex;
-  justify-content: space-around;
-  align-items: center;
+
   width: 100%;
-  padding-inline: min(30px, 3%);
-  margin-bottom: 16px;
+
+  flex-direction: column;
+
+  .MobileNavigationInner {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding-inline: min(30px, 3%);
+    margin-top: 8px;
+    margin-bottom: 16px;
+  }
 }
diff --git a/packages/commonwealth/client/scripts/views/components/MobileNavigation/MobileNavigation.tsx b/packages/commonwealth/client/scripts/views/components/MobileNavigation/MobileNavigation.tsx
@@ -58,14 +58,21 @@ const MobileNavigation = () => {
   return (
     <>
       <div className="MobileNavigation">
-        {navigationConfig.map(({ type, selected, onClick }) => (
-          <NavigationButton
-            key={type}
-            type={type}
-            selected={selected}
-            onClick={onClick}
-          />
-        ))}
+        <div id="MobileNavigationHead">
+          {/*react portal container for anyone that wants to put content*/}
+          {/*into the bottom nav.*/}
+        </div>
+
+        <div className="MobileNavigationInner">
+          {navigationConfig.map(({ type, selected, onClick }) => (
+            <NavigationButton
+              key={type}
+              type={type}
+              selected={selected}
+              onClick={onClick}
+            />
+          ))}
+        </div>
       </div>
       <CWDrawer
         size="auto"

diff --git a/...h/client/scripts/views/components/MobileNavigation/NavigationButton/NavigationButton.scss b/...h/client/scripts/views/components/MobileNavigation/NavigationButton/NavigationButton.scss
@@ -14,7 +14,7 @@
   }
 
   .Text {
-    font-size: 8px;
+    font-size: 12px;
     color: $neutral-500;
     line-height: 16px;
   }