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

…eploy/progress

package.json

@@ -163,6 +163,7 @@
     "store": "^2.0.12",
     "strip-markdown": "^4.0.0",
     "url-loader": "^4.1.1",
+    "use-local-storage": "^3.0.0",
     "yup": "^0.32.9",
     "zod": "^3.22.4"
   }

src/components/comments/CommentTree.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useMemo, useState } from 'react'
-import { useSelectSpace } from 'src/rtk/app/hooks'
+import { useFilterOutLowValuePosts, useSelectSpace } from 'src/rtk/app/hooks'
 import { useAppDispatch } from 'src/rtk/app/store'
 import { useSelectPost } from 'src/rtk/features/posts/postsHooks'
 import { fetchPostReplyIds } from 'src/rtk/features/replies/repliesSlice'
@@ -13,19 +13,22 @@ import { useRepliesData } from './utils'
 import ViewComment from './ViewComment'
 
 type CommentsTreeProps = {
+  rootPostId: PostId
   parentId: PostId
   eventProps: CommentEventProps
   directlyExpandReplies?: boolean
+  showAllReplies: boolean
 }
 
 type CommentByIdProps = {
   commentId: PostId
   eventProps: CommentEventProps
   directlyExpandReplies?: boolean
+  showAllReplies: boolean
 }
 
 const CommentById = React.memo(
-  ({ commentId: id, eventProps, directlyExpandReplies }: CommentByIdProps) => {
+  ({ commentId: id, eventProps, directlyExpandReplies, showAllReplies }: CommentByIdProps) => {
     const comment = useSelectPost(id)
 
     const rootPostId = comment ? asCommentStruct(comment.post.struct).rootPostId : undefined
@@ -36,6 +39,7 @@ const CommentById = React.memo(
 
     return (
       <ViewComment
+        showAllReplies={showAllReplies}
         withShowReplies={directlyExpandReplies}
         rootPost={rootPost}
         space={space}
@@ -50,6 +54,8 @@ export const ViewCommentsTree: FC<CommentsTreeProps> = ({
   parentId,
   eventProps,
   directlyExpandReplies,
+  showAllReplies,
+  rootPostId,
 }) => {
   const dispatch = useAppDispatch()
   const myAddress = useMyAddress()
@@ -62,6 +68,9 @@ export const ViewCommentsTree: FC<CommentsTreeProps> = ({
     return replyIds.slice().reverse()
   }, [replyIds])
 
+  const filteredIds = useFilterOutLowValuePosts(rootPostId, reversedReplyIds)
+  const usedIds = showAllReplies ? reversedReplyIds : filteredIds
+
   useSubsocialEffect(
     ({ subsocial }) => {
       if (!repliesCount) return setLoading(false)
@@ -90,13 +99,14 @@ export const ViewCommentsTree: FC<CommentsTreeProps> = ({
 
   return (
     <DataList
-      dataSource={reversedReplyIds}
+      dataSource={usedIds}
       getKey={replyId => replyId}
       className='mt-2.5'
       listClassName='GapSmall d-flex flex-column'
       renderItem={replyId => (
         <CommentById
           directlyExpandReplies={directlyExpandReplies}
+          showAllReplies={showAllReplies}
           commentId={replyId}
           eventProps={eventProps}
         />

src/components/comments/CommentsSection.tsx

@@ -1,6 +1,8 @@
+import { Checkbox } from 'antd'
 import clsx from 'clsx'
 import { FC } from 'react'
 import { PostWithSomeDetails, SpaceStruct } from 'src/types'
+import useLocalStorage from 'use-local-storage'
 import { useIsMyAddress } from '../auth/MyAccountsContext'
 import { Pluralize } from '../utils/Plularize'
 import Section from '../utils/Section'
@@ -28,21 +30,39 @@ export const CommentSection: FC<CommentSectionProps> = ({
   const { id, repliesCount, ownerId } = struct
   const isPostAuthor = useIsMyAddress(ownerId)
 
+  let [showAllComments, setShowAllComments] = useLocalStorage<boolean>('showAllComments', false, {
+    parser: str => str === 'true',
+    serializer: bool => String(bool),
+  })
+
   return (
     <Section
       id={hashId}
       className={clsx('DfCommentSection', {
         TopBorder: withBorder,
       })}
     >
-      <h3>
-        <Pluralize count={repliesCount || 0} singularText='comment' />
-      </h3>
+      <div className='d-flex GapNormal justify-content-between align-items-center'>
+        <h3>
+          <Pluralize count={repliesCount || 0} singularText='comment' />
+        </h3>
+        <Checkbox
+          checked={showAllComments}
+          style={{ marginRight: '-8px' }}
+          onChange={e => setShowAllComments(e.target.checked)}
+        >
+          <span className='ColorMuted' style={{ userSelect: 'none' }}>
+            Show all comments
+          </span>
+        </Checkbox>
+      </div>
       <NewComment post={struct} asStub eventProps={{ eventSource, level: 0, isPostAuthor }} />
       <ViewCommentsTree
+        rootPostId={id}
         eventProps={{ eventSource, level: 1, isPostAuthor }}
         parentId={id}
         directlyExpandReplies
+        showAllReplies={showAllComments}
       />
     </Section>
   )

src/components/comments/ViewComment.tsx

@@ -37,6 +37,7 @@ type Props = {
   comment: PostWithSomeDetails
   withShowReplies?: boolean
   eventProps: CommentEventProps
+  showAllReplies: boolean
 }
 
 export const InnerViewComment: FC<Props> = props => {
@@ -46,6 +47,7 @@ export const InnerViewComment: FC<Props> = props => {
     comment: commentDetails,
     withShowReplies = false,
     eventProps,
+    showAllReplies,
   } = props
 
   const { post: comment } = commentDetails
@@ -187,8 +189,10 @@ export const InnerViewComment: FC<Props> = props => {
             {hasReplies && (
               <div className='pb-2'>
                 {!withShowReplies && <ViewRepliesLink />}
-                {showReplies && (
+                {showReplies && rootPost?.id && (
                   <ViewCommentsTree
+                    rootPostId={rootPost.id}
+                    showAllReplies={showAllReplies}
                     eventProps={{ ...eventProps, level: eventProps.level + 1 }}
                     parentId={commentStruct.id}
                   />

src/components/creators/TopUsersCard.tsx

@@ -70,7 +70,7 @@ export default function TopUsersCard({ ...props }: TopUsersCardProps) {
     <>
       <div className='d-flex justify-content-between align-items-center'>
         <div className='d-flex align-items-center FontWeightSemibold GapMini'>
-          <span className='FontSemilarge'>Top users (this week)</span>
+          <span className='FontSemilarge'>Weekly Top Users</span>
         </div>
         {isMobile && seeMoreButton}
       </div>

src/components/main/HomePageFilters.tsx

@@ -1,6 +1,8 @@
 import { Col, Radio, RadioChangeEvent, Row, Select } from 'antd'
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
+import { MdVerified } from 'react-icons/md'
+import { ReactNode } from 'react-markdown'
 import config from 'src/config'
 import { useIsMyAddressWhitelisted } from 'src/config/constants'
 import LatestPostsPage from '../posts/LatestPostsPage'
@@ -29,15 +31,25 @@ const commonFilterOption = [{ label: 'Latest', value: 'latest' }]
 //     ]
 //   : []
 
-export const postFilterOpt = [
-  { label: 'Featured Posts', value: 'suggested' },
+type Filter = { label: string; value: string; icon?: ReactNode }
+
+const verifiedIcon = (
+  <MdVerified className='VerifiedIcon FontSemilarge' style={{ top: '4px', position: 'relative' }} />
+)
+
+export const postFilterOpt: Filter[] = [
+  {
+    label: 'Featured Posts',
+    icon: verifiedIcon,
+    value: 'suggested',
+  },
+  { label: 'Hot Posts', icon: '🔥', value: 'hot' },
   { label: 'All Posts', value: 'latest' },
-  { label: 'Hot Posts', value: 'hot' },
   // removed most liked and commented
   // ...offchainPostFilterOpt,
 ]
 
-export const commentFilterOpt = enableGraphQl
+export const commentFilterOpt: Filter[] = enableGraphQl
   ? [
       ...commonFilterOption,
       { label: 'Most liked', value: 'liked' },
@@ -53,13 +65,17 @@ export const commentFilterOpt = enableGraphQl
 //     ]
 //   : []
 
-export const spaceFilterOpt = [
-  { label: 'Featured Creators', value: 'suggested' },
+export const spaceFilterOpt: Filter[] = [
+  {
+    label: 'Featured Creators',
+    icon: verifiedIcon,
+    value: 'suggested',
+  },
   { label: 'Creators Staking', value: 'creators' },
   // ...offchainSpaceFilterOpt,
 ]
 
-export const dateFilterOpt = [
+export const dateFilterOpt: Filter[] = [
   { label: '1 day', value: 'day' },
   { label: '7 days', value: 'week' },
   { label: '30 days', value: 'month' },
@@ -115,7 +131,7 @@ export const Filters = (props: Props) => {
 
   let filters = filterByKey[tabKey]
   if (!isWhitelisted && tabKey === 'posts') {
-    filters = filters.slice(0, -1)
+    filters = filters.filter(({ value }) => value !== 'hot')
   }
 
   return (
@@ -124,7 +140,15 @@ export const Filters = (props: Props) => {
         {!isMobile ? (
           <Col className={needDateFilter ? style.DfCol : 'ant-col-24'}>
             <Radio.Group
-              options={filters}
+              options={filters.map(({ label, value, icon }) => ({
+                label: (
+                  <span>
+                    <span className='mr-1'>{icon}</span>
+                    {label}
+                  </span>
+                ),
+                value,
+              }))}
               onChange={onChangeWrap(onFilterChange)}
               value={type}
               optionType={'button'}
@@ -137,9 +161,10 @@ export const Filters = (props: Props) => {
               onChange={onFilterChange}
               className={clsx('w-100', style.FilterSelect)}
             >
-              {filters.map(({ label, value }) => (
+              {filters.map(({ label, value, icon }) => (
                 <Select.Option key={value} value={value}>
                   {label}
+                  {icon && <span className='ml-1'>{icon}</span>}
                 </Select.Option>
               ))}
             </Select>

src/components/spaces/helpers/OfficialSpaceStatus.tsx

@@ -1,7 +1,8 @@
-import { CheckCircleFilled, HourglassOutlined } from '@ant-design/icons'
+import { HourglassOutlined } from '@ant-design/icons'
 import { Tag, Tooltip } from 'antd'
 import clsx from 'clsx'
 import Link from 'next/link'
+import { MdVerified } from 'react-icons/md'
 import { useIsMobileWidthOrDevice } from 'src/components/responsive'
 import messages from 'src/messages'
 import { SpaceStruct } from 'src/types'
@@ -19,7 +20,7 @@ type InnerIconProps = {
   icon: JSX.Element
 }
 
-const officialSpaceIcon = <CheckCircleFilled className={styles.ClaimedOfficialSpaceIcon} />
+const officialSpaceIcon = <MdVerified className={styles.ClaimedOfficialSpaceIcon} />
 
 const unclaimedSpaceIcon = <HourglassOutlined className={styles.ClaimSpacePendingIcon} />
 

src/components/spaces/spaces.module.sass

@@ -8,12 +8,13 @@
     text-align: left
 
 .OfficialSpaceIcon
-  margin-left: $space_tiny
-  font-size: $font_big
+  margin-left: $space_mini
+  font-size: 1.1em
 
 .ClaimedOfficialSpaceIcon
   @extend .OfficialSpaceIcon
-  color: $color_green
+  color: #1D9AF1
+  vertical-align: -0.15em
 
 .ClaimSpacePendingIcon
   padding: $space_mini

src/components/utils/datahub/posts.ts

@@ -1,4 +1,5 @@
 import gql from 'graphql-tag'
+import { LowValueIds } from 'src/rtk/features/replies/lowValueIdsSlice'
 import { datahubQueryRequest } from './utils'
 
 // QUERIES
@@ -36,3 +37,33 @@ export async function getHotPosts(variables: { offset: number; limit: number })
 
   return res.data.activeStakingRankedPostIdsByActiveStakingActivity
 }
+
+const GET_LOW_VALUE_IDS = gql`
+  query GetLowValueIds($rootPostId: String!) {
+    findPosts(where: { rootPostPersistentId: $rootPostId, lowValue: true }) {
+      data {
+        persistentId
+      }
+    }
+  }
+`
+export async function getLowValueIds(rootPostId: string): Promise<LowValueIds> {
+  const res = await datahubQueryRequest<
+    {
+      findPosts: {
+        data: {
+          persistentId: string
+        }[]
+      }
+    },
+    { rootPostId: string }
+  >({
+    query: GET_LOW_VALUE_IDS,
+    variables: { rootPostId },
+  })
+
+  return {
+    rootPostId,
+    lowValueIds: res.data.findPosts.data.map(post => post.persistentId),
+  }
+}

src/config/app/polkaverse/polkaverseSpaces.ts

@@ -48,5 +48,7 @@ export default [
   // PolkaWarriors
   '1573',
   // Polkadotters
-  '10533'
+  '10533',
+  // olehmell
+  '3',
 ]

src/config/constants.ts

@@ -23,6 +23,12 @@ const WHITELISTED_FOR_NEW_FEATURES = [
   '3oGjkULuNKRqi513BbohWiSgA2oKMrbSnPrcddpXYC4mtW1G',
   '3pMj2r2t8q9qPtZUsEBg19eiy621Go9tKowy3ktBsRGNsCGg',
   '3q8uTV4HTCd4M8tP4fTKrGdopfKxAfLGfNdsmLbLP7hYj7JM',
+  '3tPAVaHYAFRfUVpNP1DAq4E3BxTPanzkGN4uukn3b4ZAefkj',
+  '3pjRboNv5rSDoy3thDse1KgaWtfVh3x2rrHqrabxjT7dJQdJ',
+  // filippo
+  '3sVFfCTpfWE5aqodJT5tpcK13uY9HMJNMDKDQYNpzPKmqVwA',
+  // jay TheKus
+  '3pYyydiZfeTL7iVxcYqw9bVyPbFXdVHSomUNzg4SpdycD5tg',
 ]
 export function useIsMyAddressWhitelisted() {
   const myAddress = useMyAddress()

src/layout/SideMenuItems.tsx

@@ -14,6 +14,7 @@ import React from 'react'
 import { FaDiscord } from 'react-icons/fa'
 import { FiTwitter } from 'react-icons/fi'
 import { IoFlashOutline } from 'react-icons/io5'
+import { MdOutlineLeaderboard } from 'react-icons/md'
 import { accountUrl } from 'src/components/urls'
 import { SubIcon } from 'src/components/utils'
 import config from 'src/config'
@@ -57,8 +58,13 @@ export const DefaultMenu: MenuItem[] = [
   //   icon: <BlockOutlined />,
   // },
   {
-    name: 'Statistics',
+    name: 'Leaderboard',
     page: ['/leaderboard'],
+    icon: <SubIcon Icon={MdOutlineLeaderboard} />,
+  },
+  {
+    name: 'Statistics',
+    page: ['/stats'],
     icon: <LineChartOutlined />,
   },
   Divider,

src/messages/index.ts

@@ -93,7 +93,7 @@ export default {
   },
   spaces: {
     offical: {
-      officialSpace: 'Official space',
+      officialSpace: 'Verified space',
       unclaimedSpace: 'Claim ownership is pending',
     },
   },