fix: moved referendum name into description section

novasamatech · Aug 12, 2024 · e2a7b27 · e2a7b27
1 parent 1403a81
commit e2a7b27
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/src/renderer/features/governance/aggregates/details.ts b/src/renderer/features/governance/aggregates/details.ts
@@ -33,6 +33,7 @@ export const detailsAggregate = {
   $timelines: timelineModel.$currentChainTimelines,
   $votes: votingAggregate.$activeWalletVotes,
   $proposers: proposerIdentityAggregate.$proposers,
+  $isTitlesLoading: titleModel.$isTitlesLoading,
   $isTimelinesLoading: timelineModel.$isTimelineLoading,
   $isProposersLoading: proposerIdentityAggregate.$isProposersLoading,
   $isDescriptionLoading: descriptionsModel.$isDescriptionLoading,

diff --git a/src/renderer/features/governance/components/ReferendumDetails/ProposalDescription.tsx b/src/renderer/features/governance/components/ReferendumDetails/ProposalDescription.tsx
@@ -2,7 +2,7 @@ import { useStoreMap, useUnit } from 'effector-react';
 
 import { type ChainId, type Referendum } from '@shared/core';
 import { pickNestedValue } from '@shared/lib/utils';
-import { Markdown, Shimmering } from '@shared/ui';
+import { HeaderTitleText, Markdown, Shimmering } from '@shared/ui';
 import { TrackInfo, referendumService } from '@entities/governance';
 import { detailsAggregate } from '../../aggregates/details';
 
@@ -19,29 +19,39 @@ export const ProposalDescription = ({ chainId, addressPrefix, referendum }: Prop
   const description = useStoreMap({
     store: detailsAggregate.$descriptions,
     keys: [chainId, referendum.referendumId],
-    fn: (x, [chainId, index]) => pickNestedValue(x, chainId, index),
+    fn: (descriptions, [chainId, index]) => pickNestedValue(descriptions, chainId, index),
+  });
+
+  const isTitlesLoading = useUnit(detailsAggregate.$isTitlesLoading);
+  const title = useStoreMap({
+    store: detailsAggregate.$titles,
+    keys: [referendum.referendumId],
+    fn: (titles, [index]) => titles[index],
   });
 
   return (
-    <div>
-      <div className="mb-4 flex items-center">
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center">
         <ProposerName referendum={referendum} addressPrefix={addressPrefix} />
         <div className="grow" />
         {referendumService.isOngoing(referendum) && <TrackInfo trackId={referendum.track} />}
       </div>
 
-      {isDescriptionLoading && (
-        <div className="flex flex-col gap-4">
-          <Shimmering height={44} />
+      <div className="flex flex-col gap-4">
+        <HeaderTitleText className="text-balance">
+          {isTitlesLoading ? <Shimmering height="1em" /> : title}
+        </HeaderTitleText>
+
+        {isDescriptionLoading && (
           <div className="flex flex-col gap-3">
             <Shimmering height={18} />
             <Shimmering height={18} width={240} />
             <Shimmering height={300} />
           </div>
-        </div>
-      )}
+        )}
 
-      {!isDescriptionLoading && description && <Markdown>{description}</Markdown>}
+        {!isDescriptionLoading && description && <Markdown>{description}</Markdown>}
+      </div>
     </div>
   );
 };
diff --git a/src/renderer/features/governance/components/ReferendumDetails/ReferendumDetailsDialog.tsx b/src/renderer/features/governance/components/ReferendumDetails/ReferendumDetailsDialog.tsx
@@ -40,12 +40,6 @@ export const ReferendumDetailsDialog = ({ chain, referendum, onVoteRequest, onCl
   const votingAsset = useUnit(detailsAggregate.$votingAsset);
   const canVote = useUnit(detailsAggregate.$canVote);
 
-  const title = useStoreMap({
-    store: detailsAggregate.$titles,
-    keys: [referendum.referendumId],
-    fn: (titles, [referendumId]) => titles[referendumId] ?? '',
-  });
-
   const votes = useStoreMap({
     store: detailsAggregate.$votes,
     keys: [referendum.referendumId],
@@ -63,7 +57,7 @@ export const ReferendumDetailsDialog = ({ chain, referendum, onVoteRequest, onCl
   return (
     <BaseModal
       isOpen={isModalOpen}
-      title={title || t('governance.referendums.referendumTitle', { index: referendum.referendumId })}
+      title={t('governance.referendums.referendumTitle', { index: referendum.referendumId })}
       contentClass="min-h-0 h-full w-full bg-main-app-background overflow-y-auto"
       panelClass="flex flex-col w-[944px] h-[678px]"
       headerClass="pl-5 pr-3 py-4 shrink-0"

diff --git a/src/renderer/shared/ui/Markdown/Markdown.tsx b/src/renderer/shared/ui/Markdown/Markdown.tsx
@@ -17,11 +17,20 @@ const remarkPlugins: Options['remarkPlugins'] = [remarkGfm];
 
 const components: Components = {
   h1: ({ node: _, className, ...props }) => (
-    <h1 className={cnTw('mt-6 border-b pb-2 text-large-title', className)} {...props} />
+    <h1
+      className={cnTw('text-balance border-b pb-2 text-button-small [&:not(:first-child)]:mt-6', className)}
+      {...props}
+    />
+  ),
+  h2: ({ node: _, className, ...props }) => (
+    <h2 className={cnTw('text-balance text-header-title [&:not(:first-child)]:mt-4', className)} {...props} />
+  ),
+  h3: ({ node: _, className, ...props }) => (
+    <h3 className={cnTw('text-balance text-footnote [&:not(:first-child)]:mt-2', className)} {...props} />
+  ),
+  h4: ({ node: _, className, ...props }) => (
+    <h4 className={cnTw('text-balance text-small-title [&:not(:first-child)]:mt-2', className)} {...props} />
   ),
-  h2: ({ node: _, className, ...props }) => <h2 className={cnTw('mt-4 text-title', className)} {...props} />,
-  h3: ({ node: _, className, ...props }) => <h3 className={cnTw('mt-2 text-medium-title', className)} {...props} />,
-  h4: ({ node: _, className, ...props }) => <h4 className={cnTw('mt-2 text-small-title', className)} {...props} />,
   ul: ({ node: _, className, ...props }) => (
     <ul
       className={cnTw(
@@ -55,7 +64,7 @@ const components: Components = {
     </InfoLink>
   ),
   p: ({ node: _, className, ...props }) => (
-    <BodyText as="p" className={cnTw('overflow-hidden overflow-ellipsis', className)} {...props} />
+    <BodyText as="p" className={cnTw('overflow-hidden overflow-ellipsis text-balance', className)} {...props} />
   ),
   hr: () => <hr className="bg-current" />,
   input: ({ node: _, type, ...props }) => (type === 'checkbox' ? <Checkbox {...props} /> : <input {...props} />),