Merge branch 'main' of https://github.com/dappforce/polkaverse into d…

…eploy/writing

src/components/creators/RewardHistoryModal.tsx

@@ -84,7 +84,7 @@ export function RewardHistoryPanel({
                     currency='SUB'
                     decimals={10}
                     value={usedRewardValue}
-                    precision={2}
+                    fixedDecimalsLength={2}
                   />
                 </span>
               </div>

src/components/leaderboard/ProgressModal.module.sass

@@ -1,43 +1,56 @@
 @import 'src/styles/subsocial-vars.scss'
 
 .ProgressModal
-  border-radius: $border_radius_huge
-  display: flex
-  flex-direction: column
-  align-items: center
-  padding: $space_large $space_big
-  gap: $space_big
-  color: white
-  position: relative
+  :global(.ant-modal-content)
+    overflow: hidden
+    color: white
+
+  .DiamondIcon
+    font-size: 130px
+    position: absolute
+    top: -$space_tiny
+    left: -$space_tiny
 
   &.Full
-    background: linear-gradient(180deg, #9340E6 0%, #7534A9 100%)
+    :global(.ant-modal-content)
+      background: linear-gradient(180deg, #9340E6 0%, #7534A9 100%)
 
   &.Halfway
-    background: linear-gradient(180deg, #F77400 0%, #F57F00 100%)
+    :global(.ant-modal-content)
+      background: linear-gradient(180deg, #F77400 0%, #F57F00 100%)
+
+  :global(.ant-modal-close)
+    color: white
+    top: 8px
+    right: 8px
 
-  .DiamondIcon
-    font-size: 130px
-    position: absolute
-    top: -$space_normal
-    right: -$space_normal
+  .Content
+    overflow: visible !important
 
-  .RewardCard
+  .ProgressModalContent
+    border-radius: $border_radius_huge
     display: flex
     flex-direction: column
     align-items: center
-    border-radius: $border_radius_large
-    background: rgba(248, 250, 252, 0.10)
-    backdrop-filter: blur(24.5px)
-    flex: 1
-    padding: $space_normal
+    gap: $space_big
     position: relative
 
-    .Diamond
-      width: 44px
-      height: 44px
-      position: absolute
-      top: 0
-      right: 0
-      transform: translate(35%, -50%) rotate(-30deg)
-      transform-origin: center
+    .RewardCard
+      display: flex
+      flex-direction: column
+      align-items: center
+      border-radius: $border_radius_large
+      background: rgba(248, 250, 252, 0.10)
+      backdrop-filter: blur(24.5px)
+      flex: 1
+      padding: $space_normal
+      position: relative
+
+      .Diamond
+        width: 44px
+        height: 44px
+        position: absolute
+        top: 0
+        right: 0
+        transform: translate(35%, -50%) rotate(-30deg)
+        transform-origin: center

src/components/leaderboard/ProgressModal.tsx

@@ -116,17 +116,16 @@ function InnerProgressModal() {
       }}
       title={`Your progress ${isUsingLastWeekData ? 'last week' : 'yesterday'}`}
       closable
+      className={clsx(styles.ProgressModal, statusClassName[status])}
+      contentClassName={styles.Content}
     >
-      <div
-        className={clsx(styles.ProgressModal, statusClassName[status], 'mt-2')}
-        style={{ overflowX: 'clip' }}
-      >
-        <DiamondIcon className={styles.DiamondIcon} />
+      <DiamondIcon className={styles.DiamondIcon} />
+      <div className={clsx(styles.ProgressModalContent, 'mt-2')}>
         <div className='d-flex flex-column align-items-center'>
           <div className='mb-2'>
             <Avatar
               noMargin
-              size={50}
+              size={60}
               asLink={false}
               address={myAddress}
               avatar={profile?.content?.image}
@@ -169,7 +168,7 @@ function InnerProgressModal() {
         </div>
       </div>
       <Button
-        type='primary'
+        type='default'
         size='large'
         className='mt-4'
         onClick={() =>

src/components/posts/LatestPostsPage.tsx

@@ -153,7 +153,9 @@ const InfiniteListOfPublicPosts = (props: Props) => {
         totalCount={totalCount}
         noDataDesc={`No ${entity} yet`}
         getKey={postId => postId}
-        renderItem={postId => <PublicPostPreviewById postId={postId} />}
+        renderItem={postId => (
+          <PublicPostPreviewById showPinnedIcon={isSuggested(filter)} postId={postId} />
+        )}
       />
     ) : null
   }, [filter, dateFilter, totalCount, isApiReady])

src/components/posts/PublicPostPreview.tsx

@@ -7,14 +7,15 @@ import { useShowLikeablePostsContext } from './ShowLikeablePostsContext'
 
 type Props = {
   postId: PostId
+  showPinnedIcon?: boolean
 }
 
-export const PublicPostPreviewById = React.memo(({ postId }: Props) => {
+export const PublicPostPreviewById = React.memo(({ postId, showPinnedIcon }: Props) => {
   const post = useSelectPost(postId)
   const { value: showLikeablePostOnly } = useShowLikeablePostsContext()
   const { validByCreatorMinStake } = useCanPostSuperLiked(postId)
 
   if (!post || (showLikeablePostOnly && !validByCreatorMinStake)) return null
 
-  return <PostPreview postDetails={post} withActions />
+  return <PostPreview postDetails={post} withActions showPinnedIcon={showPinnedIcon} />
 })

src/components/posts/loadSuggestedPostIdsFromEnv.ts

@@ -1,5 +1,6 @@
 import { SubsocialApi } from '@subsocial/api'
 import config from 'src/config'
+import { PINNED_POST_IDS } from 'src/config/constants'
 import { getPostIdsBySpaces } from 'src/graphql/apis'
 import { GqlClient } from 'src/graphql/ApolloProvider'
 import { AnySpaceId, PostId } from 'src/types'
@@ -28,7 +29,8 @@ export const loadSuggestedPostIds = async ({
     suggestedPostIds = suggestedPostIdsArray.flat()
     return descSort(suggestedPostIds)
   } else if (client) {
-    return getPostIdsBySpaces(client, { spaceIds: recommendedIds })
+    const postIds = await getPostIdsBySpaces(client, { spaceIds: recommendedIds })
+    return Array.from(new Set([...PINNED_POST_IDS, ...postIds]))
   }
   return []
 }

src/components/posts/view-post/PostPreview.tsx

@@ -1,7 +1,13 @@
 import { newLogger } from '@subsocial/utils'
 import { Segment } from 'src/components/utils/Segment'
 import { PostWithAllDetails, PostWithSomeDetails, SpaceData } from 'src/types'
-import { HiddenPostAlert, RegularPreview, SharedPreview, useIsUnlistedPost } from '.'
+import {
+  HiddenPostAlert,
+  PinnedPostIcon,
+  RegularPreview,
+  SharedPreview,
+  useIsUnlistedPost,
+} from '.'
 import PostNotEnoughMinStakeAlert from './helpers'
 
 const log = newLogger('ViewPost')
@@ -17,10 +23,11 @@ export type BarePreviewProps = {
 export type PreviewProps = BarePreviewProps & {
   postDetails: PostWithSomeDetails
   space?: SpaceData
+  showPinnedIcon?: boolean
 }
 
 export function PostPreview(props: PreviewProps) {
-  const { postDetails, space: externalSpace } = props
+  const { postDetails, space: externalSpace, showPinnedIcon } = props
   const {
     space: globalSpace,
     post: { struct: post },
@@ -39,6 +46,7 @@ export function PostPreview(props: PreviewProps) {
 
   return (
     <Segment className='DfPostPreview'>
+      {showPinnedIcon && <PinnedPostIcon postId={post.id} />}
       <HiddenPostAlert post={post} space={space?.struct} preview />
       {isSharedPost ? (
         <SharedPreview space={space} {...props} />

src/components/posts/view-post/helpers.module.sass

@@ -30,4 +30,4 @@
 
   svg
     color: #FAAD14
-    font-size: $font_normal
+    font-size: $font_normal

src/components/posts/view-post/helpers.tsx

@@ -7,6 +7,7 @@ import isEmpty from 'lodash.isempty'
 import Error from 'next/error'
 import Link from 'next/link'
 import React, { FC, useState } from 'react'
+import { RiPushpin2Fill } from 'react-icons/ri'
 import { TbCoins, TbMessageCircle2 } from 'react-icons/tb'
 import { useIsMobileWidthOrDevice } from 'src/components/responsive'
 import { useIsMySpace } from 'src/components/spaces/helpers'
@@ -19,6 +20,7 @@ import FollowSpaceButton from 'src/components/utils/FollowSpaceButton'
 import Segment from 'src/components/utils/Segment'
 import { ActiveVoters, PostVoters } from 'src/components/voting/ListVoters'
 import SuperLike from 'src/components/voting/SuperLike'
+import { isPinnedPost } from 'src/config/constants'
 import { maintenanceMsg } from 'src/config/env'
 import { resolveIpfsUrl } from 'src/ipfs'
 import messages from 'src/messages'
@@ -523,3 +525,18 @@ export default function PostNotEnoughMinStakeAlert({ post }: { post: PostStruct
     </div>
   )
 }
+
+export function PinnedPostIcon({ postId }: { postId: string }) {
+  const isPinned = isPinnedPost(postId)
+  if (!isPinned) return null
+
+  return (
+    <div
+      className='d-flex align-items-center GapTiny ColorMuted mb-1 FontWeightSemibold'
+      style={{ marginTop: '-12px' }}
+    >
+      <RiPushpin2Fill />
+      <span>Pinned</span>
+    </div>
+  )
+}

src/components/utils/CustomModal/index.module.sass

@@ -5,6 +5,13 @@
     :global(.ant-modal-content)
       height: calc(100vh - 100px)
 
+  &.NoPadding
+    :global(.ant-modal-body)
+      padding: 0
+      > *
+        padding-left: 0
+        padding-right: 0
+
   :global(.ant-modal-content)
     max-height: 700px
     border-radius: $space_normal
@@ -28,7 +35,7 @@
     flex: 1
 
   .CustomModalTitle
+    color: inherit
     font-weight: bold
-    color: #222222
     font-size: $font_big
     margin-bottom: $space_mini

src/components/utils/icons/Diamond.tsx

@@ -6,13 +6,13 @@ export default function DiamondIcon(props: ComponentProps<'svg'>) {
       {...props}
       width='1em'
       height='1em'
-      viewBox='0 0 127 126'
+      viewBox='0 0 85 102'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
     >
       <path
         opacity='0.1'
-        d='M18.9182 30.2914L17.4721 31.4856L19.2695 32.0208L33.8044 36.3492L34.3155 36.5014L34.7266 36.1619L56.2801 18.3616L57.7262 17.1674L55.9288 16.6322L41.3939 12.3038L40.8828 12.1516L40.4717 12.4911L18.9182 30.2914ZM46.9097 38.6271L45.4637 39.8213L47.2611 40.3566L82.3231 50.7978L84.1205 51.3331L83.5634 49.5424L75.2593 22.8507L75.1009 22.3415L74.5898 22.1893L69.3854 20.6395L68.8744 20.4873L68.4633 20.8269L46.9097 38.6271ZM95.1103 54.1438L95.2687 54.653L95.7798 54.8052L110.315 59.1336L112.112 59.6688L111.555 57.8781L103.251 31.1864L103.092 30.6772L102.581 30.5251L88.0465 26.1966L86.2491 25.6614L86.8062 27.4521L95.1103 54.1438ZM93.6469 64.1926L93.0315 64.0093L92.6087 64.4927L67.9767 92.6595L69.2803 94.1524L106.346 69.6884L108.136 68.5073L106.081 67.8954L93.6469 64.1926ZM81.8152 62.1467L82.8404 60.9745L81.3479 60.53L42.7532 49.0367L41.2607 48.5923L41.4775 50.1344L48.2154 98.056L48.5197 100.22L49.9584 98.5751L81.8152 62.1467ZM31.159 46.1933L31.0696 45.5574L30.4542 45.3742L18.0201 41.6714L15.9651 41.0594L16.817 43.027L34.4609 83.7834L36.3688 83.2468L31.159 46.1933ZM38.6542 1.46532L110.804 22.9511L125.093 68.879L41.4042 124.114L1.56745 32.0939L38.6542 1.46532Z'
+        d='M-13.8869 27.9446L-14.3345 28.2344L-14.3434 28.7675L-14.8073 56.7173L-14.8384 58.5924L-13.264 57.5734L-0.532604 49.3327L-0.0849704 49.0429L-0.0761184 48.5098L0.387756 20.56L0.418877 18.6849L-1.15549 19.7039L-13.8869 27.9446ZM10.6315 12.0745L10.1838 12.3643L10.175 12.8974L9.71112 40.8472L9.68 42.7223L11.2544 41.7033L41.9659 21.8245L43.5403 20.8054L41.8168 20.066L16.1278 9.04435L15.6377 8.8341L15.1901 9.12385L10.6315 12.0745ZM26.9771 1.49445L25.4027 2.51349L27.1262 3.25293L52.8152 14.2746L53.3053 14.4848L53.7529 14.1951L66.4843 5.95436L68.0587 4.93532L66.3352 4.19588L40.6461 -6.82576L40.1561 -7.036L39.7085 -6.74626L26.9771 1.49445ZM71.9326 15.8269L72.1968 13.6991L70.3969 14.8642L59.5056 21.9138L58.9665 22.2628L59.0595 22.8982L64.4787 59.9216L66.4605 59.9L71.9326 15.8269ZM55.7473 78.4526L57.5906 79.6268L57.2741 77.4644L50.2655 29.5816L50.0399 28.0407L48.7326 28.8869L14.9267 50.7686L13.6194 51.6148L14.9328 52.4515L55.7473 78.4526ZM5.23443 57.7377L4.69284 57.3927L4.15376 57.7417L-6.73752 64.7913L-8.53746 65.9564L-6.48809 66.5866L35.9614 79.6413L36.7927 77.8421L5.23443 57.7377ZM-23.9075 22.9884L39.29 -17.9178L83.4927 1.04697L71.1376 100.556L-24.7057 71.081L-23.9075 22.9884Z'
         fill='white'
         stroke='white'
         strokeWidth='2'

src/config/constants.ts

@@ -23,6 +23,11 @@ export const CREATORS_CONSTANTS = {
   },
 }
 
+export const PINNED_POST_IDS = ['50297']
+export function isPinnedPost(postId: string) {
+  return PINNED_POST_IDS.includes(postId)
+}
+
 const WHITELISTED_FOR_NEW_FEATURES = [
   '3tJYxJN55FtVeZgX4WdwieZXDp4HF62TRVj11tY2aXHdrYus',
   '3rzZpUCan9uAA9VSH12zX552Y6rfemGR3hWeeLmhNT1EGosL',