Merge branch 'main' into deploy/ref

.nvmrc

@@ -0,0 +1 @@
+16.20.2

README.md

@@ -1,4 +1,5 @@
 # Example dapp on the Subsocial blockchain by [DappForce](https://github.com/dappforce)
+
 ![Production Deploy](https://github.com/dappforce/polkaverse/actions/workflows/build-deploy.yml/badge.svg)
 
 PolkaVerse is a niche social site built on the Subsocial network. It focuses on the Polkadot and Kusama ecosystem. You can use this this code to help you in the development of your own dapps running on or integrated with Subsocial.
@@ -20,9 +21,13 @@ Create an `.env` file with settings that allow the app to connect to Subsocial's
 cp dev.env .env.local
 ```
 
+Install a compatible version of Node.js. The compatible versions are specified in the `package.json` file.
+If you have installed NVM simply run `nvm install && nvm use` to use the Node.js version specified in the .nvmrc file.
+
 Install project dependencies:
 
 ```sh
+npm install --global yarn
 yarn
 ```
 
@@ -31,7 +36,7 @@ yarn
 Dev mode supports hot reloads – this is very helpful when developing UI because you can see changes in your browser without restarting the app. But it takes some time (in seconds) to compile the updated parts of the app, after you made changes to the source code.
 
 ```sh
-yar dev
+yarn dev
 ```
 
 ### Option B: Run in a PROD mode

package.json

@@ -45,6 +45,7 @@
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "17.0.2",
     "@types/react-infinite-scroll-component": "^4.2.5",
+    "@types/react-lottie": "^1.2.10",
     "@types/react-redux": "^7.1.9",
     "@types/react-responsive": "^8.0.3",
     "@types/react-router-hash-link": "^2.0.0",
@@ -153,6 +154,7 @@
     "react-icons": "^4.12.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-lite-youtube-embed": "^2.4.0",
+    "react-lottie": "^1.2.4",
     "react-markdown": "6.0.3",
     "react-redux": "^7.2.0",
     "react-responsive": "^8.2.0",

src/components/comments/CommentEditor.module.sass

@@ -1,4 +1,9 @@
+@import 'src/styles/subsocial-vars.scss'
+
 .DfCommentEditor
 
   \:global .CodeMirror-scroll
     min-height: auto !important
+
+  @media screen and ( min-width: $max_mobile_width)
+    resize: vertical !important

src/components/comments/CommentEditor.tsx

@@ -141,7 +141,7 @@ export const CommentEditor = (props: Props) => {
             <Input.TextArea
               disabled={isLoading}
               placeholder='Write a comment...'
-              autoSize={{ minRows: 1, maxRows: 5 }}
+              autoSize={{ minRows: 1 }}
               autoFocus={autoFocus}
               size='large'
             />

src/components/main/HomePageFilters.tsx

@@ -7,7 +7,7 @@ import config from 'src/config'
 import LatestPostsPage from '../posts/LatestPostsPage'
 import { useShowLikeablePostsContext } from '../posts/ShowLikeablePostsContext'
 import { useResponsiveSize } from '../responsive/ResponsiveContext'
-import LatestSpacesPage, { CreatorsSpaces } from '../spaces/LatestSpacesPage'
+import LatestSpacesPage from '../spaces/LatestSpacesPage'
 import style from './HomePage.module.sass'
 import {
   DateFilterType,
@@ -38,13 +38,8 @@ const verifiedIcon = (
 )
 
 export const postFilterOpt: Filter[] = [
-  {
-    label: 'Featured Posts',
-    icon: verifiedIcon,
-    value: 'suggested',
-  },
   { label: 'Hot Posts', icon: '🔥', value: 'hot' },
-  { label: 'All Posts', value: 'latest' },
+  { label: 'Latest', value: 'latest' },
   // removed most liked and commented
   // ...offchainPostFilterOpt,
 ]
@@ -71,6 +66,7 @@ export const spaceFilterOpt: Filter[] = [
     icon: verifiedIcon,
     value: 'suggested',
   },
+  ...commonFilterOption,
   // { label: 'Creators Staking', value: 'creators' },
   // ...offchainSpaceFilterOpt,
 ]
@@ -101,7 +97,6 @@ export const PostFilterView = ({ filter: { type, date }, ...props }: PostFilterP
 }
 
 export const SpaceFilterView = ({ filter: { type, date }, ...props }: SpaceFilterProps) => {
-  if (type === 'creators') return <CreatorsSpaces />
   return <LatestSpacesPage filter={type} dateFilter={date} {...props} />
 }
 
@@ -119,7 +114,7 @@ export const Filters = (props: Props) => {
 
   if (tabKey === 'feed' || !enableGraphQl) return null
 
-  const onFilterChange: any = (value: PostFilterType = 'suggested') =>
+  const onFilterChange: any = (value: PostFilterType = 'hot') =>
     setFiltersInUrl(router, tabKey, { type: value, date: date as DateFilterType })
 
   const onDateChange: any = (value: DateFilterType = 'week') =>

src/components/main/types.ts

@@ -4,10 +4,10 @@ import { Dispatch } from 'react'
 import { AccountId } from 'src/types'
 import { PostKind } from '../../types/graphql-global-types'
 
-export type PostFilterType = 'latest' | 'suggested' | 'hot'
+export type PostFilterType = 'latest' | 'hot'
 // | 'liked' | 'commented' // removed most liked and commented
 
-export type SpaceFilterType = 'suggested' | 'creators'
+export type SpaceFilterType = 'suggested' | 'latest'
 // 'latest' |  'sortByPosts' | 'sortByFollowers'
 
 export type DateFilterType = 'day' | 'week' | 'month' | 'allTime'

src/components/main/utils.ts

@@ -32,12 +32,12 @@ const getPostsByFilter: GetEntityFilter<PostFilterType> = {
     month: q.GET_LATEST_POST_IDS,
     allTime: q.GET_LATEST_POST_IDS,
   },
-  suggested: {
-    day: q.GET_LATEST_POST_IDS,
-    week: q.GET_LATEST_POST_IDS,
-    month: q.GET_LATEST_POST_IDS,
-    allTime: q.GET_LATEST_POST_IDS,
-  },
+  // suggested: {
+  //   day: q.GET_LATEST_POST_IDS,
+  //   week: q.GET_LATEST_POST_IDS,
+  //   month: q.GET_LATEST_POST_IDS,
+  //   allTime: q.GET_LATEST_POST_IDS,
+  // },
   hot: {
     day: q.GET_LATEST_POST_IDS,
     week: q.GET_LATEST_POST_IDS,
@@ -60,18 +60,12 @@ const getPostsByFilter: GetEntityFilter<PostFilterType> = {
 }
 
 const getSpacesByFilter: GetEntityFilter<Exclude<SpaceFilterType, 'suggested'>> = {
-  creators: {
+  latest: {
     day: q.GET_LATEST_SPACE_IDS,
     week: q.GET_LATEST_SPACE_IDS,
     month: q.GET_LATEST_SPACE_IDS,
     allTime: q.GET_LATEST_SPACE_IDS,
   },
-  // latest: {
-  //   day: q.GET_LATEST_SPACE_IDS,
-  //   week: q.GET_LATEST_SPACE_IDS,
-  //   month: q.GET_LATEST_SPACE_IDS,
-  //   allTime: q.GET_LATEST_SPACE_IDS,
-  // },
   // sortByFollowers: {
   //   day: q.GET_MOST_FOLLOWED_SPACE_IDS_IN_DATE_RANGE,
   //   week: q.GET_MOST_FOLLOWED_SPACE_IDS_IN_DATE_RANGE,

src/components/onboarding/OnBoardingModal/steps/Spaces.tsx

@@ -38,7 +38,7 @@ export default function Spaces(props: OnBoardingContentProps) {
             },
             isFollowed: spaceId => spacesSet.has(spaceId),
           }}
-          maxItems={12}
+          maxItems={20}
         />
       </div>
     </OnBoardingContentContainer>

src/components/posts/LatestPostsPage.tsx

@@ -2,7 +2,6 @@ import { FC, useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useSubsocialApi } from 'src/components/substrate/SubstrateContext'
 import config from 'src/config'
-import { PINNED_POST_ID } from 'src/config/constants'
 import { DEFAULT_PAGE_SIZE } from 'src/config/ListData.config'
 import { useDfApolloClient } from 'src/graphql/ApolloProvider'
 import { GetLatestPostIds } from 'src/graphql/__generated__/GetLatestPostIds'
@@ -17,6 +16,7 @@ import { DateFilterType, LoadMoreValues, PostFilterType } from '../main/types'
 import { isSuggested, loadPostsByQuery } from '../main/utils'
 import { getHotPosts } from '../utils/datahub/posts'
 import { getSuggestedPostIdsByPage, loadSuggestedPostIds } from './loadSuggestedPostIdsFromEnv'
+import { getPinnedPost } from './pinned-post'
 import { PublicPostPreviewById } from './PublicPostPreview'
 
 type Props = {
@@ -49,10 +49,11 @@ export const loadMorePostsFn = async (loadMoreValues: LoadMoreValues<PostFilterT
   if (filter.type === 'hot') {
     const posts = await getHotPosts({ offset, limit: DEFAULT_PAGE_SIZE })
     postIds = posts.data.map(value => value.persistentPostId)
+    const pinnedPostId = await getPinnedPost(client)
     if (offset === 0) {
-      postIds = Array.from(new Set([PINNED_POST_ID, ...postIds]))
+      postIds = Array.from(new Set([pinnedPostId, ...postIds].filter(Boolean) as string[]))
     } else {
-      postIds = postIds.filter(id => id !== PINNED_POST_ID)
+      postIds = postIds.filter(id => id !== pinnedPostId)
     }
   } else if (!isSuggested(filter.type) && client) {
     const data = await loadPostsByQuery({ client, kind, offset, filter })

src/components/posts/WriteSomething.tsx

@@ -1,8 +1,9 @@
 import { InfoCircleFilled } from '@ant-design/icons'
 import { Alert, Button } from 'antd'
+import BN from 'bignumber.js'
 import clsx from 'clsx'
 import { ComponentProps, useState } from 'react'
-import { getNeededLock } from 'src/config/constants'
+import { getNeededLock, MINIMUM_LOCK } from 'src/config/constants'
 import { useSendEvent } from 'src/providers/AnalyticContext'
 import {
   useSelectProfile,
@@ -29,7 +30,7 @@ export default function WriteSomething({ defaultSpaceId, ...props }: WriteSometh
   const [visible, setVisible] = useState(false)
   const myAddress = useMyAddress() ?? ''
   const profileData = useSelectProfile(myAddress)
-  const { data: totalStake, loading: loadingTotalStake } = useFetchTotalStake(myAddress)
+  const { data: totalStake } = useFetchTotalStake(myAddress)
   const neededLock = getNeededLock(totalStake?.amount)
 
   const { isSmallMobile } = useResponsiveSize()
@@ -75,44 +76,68 @@ export default function WriteSomething({ defaultSpaceId, ...props }: WriteSometh
             </a>
           )}
         </div>
-        {!loadingTotalStake && neededLock > 0 && anySpace && (
-          <Alert
-            className={clsx(styles.Alert, 'mt-3')}
-            message={
-              <div
-                className={clsx(
-                  'd-flex align-items-center GapNormal justify-content-between',
-                  isSmallMobile && 'flex-column align-items-stretch',
-                )}
-              >
-                <div className='d-flex flex-column GapMini'>
-                  <div className='d-flex align-items-center justify-content-between GapNormal'>
-                    <div className='d-flex align-items-center'>
-                      <InfoCircleFilled className='FontSmall' style={{ color: '#FAAD14' }} />
-                      <span className='ml-2 FontWeightBold'>Post to Earn</span>
+        {/* {!loadingTotalStake && neededLock > 0 && anySpace && ( */}
+        {totalStake?.amount &&
+          new BN(totalStake?.amount).lt(new BN(MINIMUM_LOCK.toString())) &&
+          anySpace && (
+            <Alert
+              className={clsx(styles.Alert, 'mt-3')}
+              message={
+                <div
+                  className={clsx(
+                    'd-flex align-items-center GapNormal justify-content-between',
+                    isSmallMobile && 'flex-column align-items-stretch',
+                  )}
+                >
+                  <div className='d-flex flex-column GapMini'>
+                    <div className='d-flex align-items-center justify-content-between GapNormal'>
+                      <div className='d-flex align-items-center'>
+                        <InfoCircleFilled className='FontSmall' style={{ color: '#FAAD14' }} />
+                        <span className='ml-2 FontWeightBold'>Post to Earn</span>
+                      </div>
+                    </div>
+                    <div className='d-flex flex-column GapSmall align-items-start'>
+                      <span style={{ color: '#262425CC' }}>
+                        {neededLock > 0 && !new BN(totalStake.amount).isZero() ? (
+                          <>
+                            To start earning SUB rewards, increase your lock by at least{' '}
+                            <FormatBalance
+                              value={neededLock.toString()}
+                              decimals={10}
+                              currency='SUB'
+                              precision={2}
+                            />
+                            .
+                          </>
+                        ) : (
+                          <>
+                            To start earning SUB rewards, lock at least{' '}
+                            <FormatBalance
+                              value={neededLock.toString()}
+                              decimals={10}
+                              currency='SUB'
+                              precision={2}
+                            />
+                          </>
+                        )}
+                      </span>
                     </div>
                   </div>
-                  <div className='d-flex flex-column GapSmall align-items-start'>
-                    <span style={{ color: '#262425CC' }}>
-                      To start earning SUB rewards, increase your lock by at least{' '}
-                      <FormatBalance
-                        value={neededLock.toString()}
-                        decimals={10}
-                        currency='SUB'
-                        precision={2}
-                      />
-                      .
-                    </span>
-                  </div>
+                  <Button
+                    type='primary'
+                    shape='round'
+                    href={getSubIdCreatorsLink()}
+                    target='_blank'
+                  >
+                    {neededLock > 0 && !new BN(totalStake.amount).isZero()
+                      ? 'Increase Lock'
+                      : 'Lock SUB'}
+                  </Button>
                 </div>
-                <Button type='primary' shape='round' href={getSubIdCreatorsLink()} target='_blank'>
-                  Increase Lock
-                </Button>
-              </div>
-            }
-            type='warning'
-          />
-        )}
+              }
+              type='warning'
+            />
+          )}
       </Segment>
       <PostEditorModal
         defaultSpaceId={defaultSpaceId}

src/components/posts/editor/ModalEditor.tsx

@@ -3,6 +3,7 @@ import { IpfsContent } from '@subsocial/api/substrate/wrappers'
 import { newLogger } from '@subsocial/utils'
 import { Button, Col, Form, Modal, ModalProps, Row } from 'antd'
 import { LabeledValue } from 'antd/lib/select'
+import BN from 'bignumber.js'
 import clsx from 'clsx'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
@@ -23,7 +24,7 @@ import { getNonEmptyPostContent } from 'src/components/utils/content'
 import { ButtonLink } from 'src/components/utils/CustomLinks'
 import SelectSpacePreview from 'src/components/utils/SelectSpacePreview'
 import TxButton from 'src/components/utils/TxButton'
-import { getNeededLock } from 'src/config/constants'
+import { getNeededLock, MINIMUM_LOCK } from 'src/config/constants'
 import useExternalStorage from 'src/hooks/useExternalStorage'
 import { useSendEvent } from 'src/providers/AnalyticContext'
 import {
@@ -261,6 +262,7 @@ export const PostEditorModal = ({ defaultSpaceId, ...props }: PostEditorModalPro
   const myAddress = useMyAddress()
   const { data } = useFetchTotalStake(myAddress ?? '')
   const hasStaked = data?.hasStakedEnough
+  const totalStake = new BN(data?.amount || 0)
 
   const neededStake = getNeededLock(data?.amount)
 
@@ -298,7 +300,29 @@ export const PostEditorModal = ({ defaultSpaceId, ...props }: PostEditorModalPro
               return (
                 <p>
                   You can receive extra SUB when others like your posts or comments. However, you
-                  need to first lock at least 2,000 SUB to become eligible.
+                  need to first lock at least{' '}
+                  <FormatBalance
+                    value={MINIMUM_LOCK.toString()}
+                    decimals={10}
+                    currency='SUB'
+                    precision={2}
+                  />{' '}
+                  SUB to become eligible.
+                </p>
+              )
+            }
+
+            if (totalStake.isZero()) {
+              return (
+                <p>
+                  To start earning SUB rewards, lock by at least{' '}
+                  <FormatBalance
+                    value={neededStake.toString()}
+                    decimals={10}
+                    currency='SUB'
+                    precision={2}
+                  />
+                  .
                 </p>
               )
             }