Merge pull request #83 from dappforce/creator-staking-fixes

Fix creator staking page

public/tailwind.css

@@ -933,6 +933,10 @@ video {
   flex-shrink: 0;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1089,6 +1093,10 @@ video {
   gap: 2px;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1139,6 +1147,10 @@ video {
   border-radius: 0.5rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-e-2xl {
   border-start-end-radius: 1rem;
   border-end-end-radius: 1rem;
@@ -1187,6 +1199,11 @@ video {
   border-color: rgb(212 226 239 / var(--tw-border-opacity));
 }
 
+.border-background-lighter {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--background-lighter) / var(--tw-border-opacity));
+}
+
 .border-background-lightest {
   --tw-border-opacity: 1;
   border-color: rgb(var(--background-lightest) / var(--tw-border-opacity));
@@ -1310,6 +1327,19 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-\[\] {
+  background-color: ;
+}
+
+.bg-\[F1F5F9\] {
+  background-color: F1F5F9;
+}
+
+.bg-\[\#F1F5F9\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-25 {
   --tw-bg-opacity: 0.25;
 }
@@ -1396,6 +1426,16 @@ video {
   padding-right: 0px;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1650,6 +1690,11 @@ video {
   color: rgb(34 34 34 / var(--tw-text-opacity));
 }
 
+.text-\[\#64748B\] {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
 .text-\[\#6C727F33\]\/20 {
   color: rgb(108 114 127 / 0.2);
 }
@@ -1719,6 +1764,19 @@ video {
   color: rgb(255 255 255 / 0.8);
 }
 
+.text-\[\#\#64748B\] {
+  color: ##64748B;
+}
+
+.text-\[\] {
+  color: ;
+}
+
+.underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -1879,6 +1937,10 @@ video {
   transition-duration: 75ms;
 }
 
+.duration-0 {
+  transition-duration: 0s;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }

src/components/chat/ChatIframe.tsx

@@ -30,7 +30,7 @@ function generateGrillConfig ({
         resource: new Resource({
           schema: 'chain',
           chainType: 'substrate',
-          chainName: 'soonsocial',
+          chainName: 'subsocial',
           resourceType: 'creator',
           resourceValue: {
             id: spaceId,

src/components/creatorsStaking/Banner/calculateApr.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useGeneralEraInfo } from 'src/rtk/features/creatorStaking/generalEraInfo/generalEraInfoHooks'
+import BN from 'bignumber.js'
+import { convertToBalanceWithDecimal } from '@subsocial/utils'
+import { useGetDecimalsAndSymbolByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
+
+const blockReward = new BN(6)
+const eraReward = blockReward.multipliedBy(new BN(7200))
+const annualReward = eraReward.multipliedBy(new BN(365))
+const backerPercent = new BN(0.6)
+
+export const useCalculateApr = () => {
+  const generalEraInfo = useGeneralEraInfo()
+  const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
+
+  const apr = useMemo(() => {
+    if (!generalEraInfo) return
+
+    const totalStakedWithDecimal = convertToBalanceWithDecimal(
+      generalEraInfo.staked,
+      decimal
+    )
+
+    return annualReward
+      .dividedBy(totalStakedWithDecimal)
+      .multipliedBy(backerPercent)
+      .multipliedBy(100)
+  }, [ !!generalEraInfo ])
+
+  return apr
+}

src/components/creatorsStaking/Banner/index.tsx

@@ -9,10 +9,8 @@ import { useCreatorsList } from 'src/rtk/features/creatorStaking/creatorsList/cr
 import ValueOrSkeleton from '../utils/ValueOrSkeleton'
 import { NextEraStartDate } from '../utils/NextEraStartDate'
 import { DashboardCard, TotalStakedBalance } from './utils'
-import { useStakingConsts } from 'src/rtk/features/creatorStaking/stakingConsts/stakingConstsHooks'
-import BN from 'bignumber.js'
-import { useMemo } from 'react'
 import { formatTime, useGetOneEraTime } from '../utils/DaysToWithdraw'
+import { useCalculateApr } from './calculateApr'
 
 const skeletonClassName = 'h-[20px] mb-1'
 
@@ -26,29 +24,21 @@ const TimeInEra = () => {
 const StatsCards = () => {
   const generalEraInfo = useGeneralEraInfo()
   const creatorsList = useCreatorsList()
-  const stakingConsts = useStakingConsts()
-
-  const { currentAnnualInflation } = stakingConsts || {}
-
-  const apr = useMemo(() => {
-    if (!currentAnnualInflation) return undefined
-
-    return new BN(currentAnnualInflation).dividedBy(2).toString()
-  }, [ currentAnnualInflation ])
+  const apr = useCalculateApr()
 
   const creatorsCount = creatorsList?.length
 
   const dashboardData = [
     {
       title: 'Total Staked',
       value: <TotalStakedBalance value={generalEraInfo?.staked || 0} />,
-      infoTitle: 'The total amount of tokens stakes on the Subsocial network',
+      infoTitle: 'The total amount of tokens staked on the Subsocial network',
     },
     {
       title: 'Estimated APR',
       value: (
         <ValueOrSkeleton
-          value={apr ? `${apr}%` : undefined}
+          value={apr && `${apr.toFixed(2)}%`}
           skeletonClassName={skeletonClassName}
         />
       ),
@@ -71,8 +61,7 @@ const StatsCards = () => {
       ),
       infoTitle: (
         <>
-          Rewards are available at the end of each era, which lasts{' '}
-          <TimeInEra />
+          Rewards are available at the end of each era, which last <TimeInEra />
         </>
       ),
     },
@@ -109,8 +98,11 @@ const Banner = () => {
     >
       <div className='flex md:flex-row gap-6 flex-col justify-between md:items-start items-center w-full'>
         <div className='flex flex-col gap-2 text-white md:items-start items-center'>
-          <div className='text-4xl UnboundedFont'>Create2Earn</div>
-          <div className='text-[20px]'>An innovative way to stake</div>
+          <div className='text-4xl UnboundedFont'>Creator Staking Beta</div>
+          <div className='text-[20px]'>
+            An innovative way to stake for your favorite dapp and content
+            creators
+          </div>
         </div>
 
         <Button

src/components/creatorsStaking/Creators/CreatorCard.tsx

@@ -7,7 +7,7 @@ import { FormatBalance } from 'src/components/common/balances'
 import { useBackerInfo } from 'src/rtk/features/creatorStaking/backerInfo/backerInfoHooks'
 import { useMyAddress } from 'src/components/providers/MyExtensionAccountsContext'
 import AboutModal from './modals/AboutModal'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import StakingModal, { StakingModalVariant } from './modals/StakeModal'
 import ValueOrSkeleton from '../utils/ValueOrSkeleton'
 import { ContactInfo } from '../utils/socialLinks'
@@ -17,6 +17,55 @@ import { useModalContext } from '../contexts/ModalContext'
 import Button from '../tailwind-components/Button'
 import { useChatContext } from 'src/components/providers/ChatContext'
 import { Tooltip } from 'antd'
+import FloatingWrapper from '../tailwind-components/floating/FloatingWrapper'
+import { pluralize } from '@subsocial/utils'
+
+type CreatorNameProps = {
+  name?: string
+  loading?: boolean
+  cardRef: React.RefObject<HTMLDivElement>
+}
+
+const CreatorName = ({ name, loading, cardRef }: CreatorNameProps) => {
+  const nameRef = useRef<any>(null)
+
+  const isEllipsis = () => {
+    if (!nameRef.current || !cardRef.current || !name) return false
+
+    return nameRef.current?.offsetWidth >= cardRef.current?.scrollWidth
+  }
+
+  return (
+    <FloatingWrapper
+      allowedPlacements={[ 'top' ]}
+      mainAxisOffset={4}
+      panel={() => (
+        <div className='rounded-md border border-background-lighter bg-white px-1.5 text-sm py-1'>
+          {name}
+        </div>
+      )}
+      showOnHover={isEllipsis()}
+    >
+      {({ referenceProps, onClick }) => (
+        <span
+          {...referenceProps}
+          onClick={(e) => {
+            onClick?.(e)
+          }}
+        >
+          <span ref={nameRef}>
+            <ValueOrSkeleton
+              value={name || '<Unnamed>'}
+              loading={loading}
+              skeletonClassName='w-full h-[16px]'
+              className='whitespace-nowrap'
+            />
+          </span>
+        </span>
+      )}
+    </FloatingWrapper>
+  )
+}
 
 type CreatorCardTotalValueProps = {
   label: string
@@ -61,6 +110,7 @@ const CreatorCard = ({ spaceId, era }: CreatorCardProps) => {
   const [ openStakeModal, setOpenStakeModal ] = useState(false)
   const [ modalVariant, setModalVariant ] = useState<StakingModalVariant>('stake')
   const { setOpen, setSpaceId, setMetadata } = useChatContext()
+  const cardRef = useRef<HTMLDivElement>(null)
 
   const { space, loading: spaceLoading } = creatorSpaceEntity || {}
   const { info: eraStakeInfo, loading: eraStakeLoading } = eraStake || {}
@@ -71,7 +121,8 @@ const CreatorCard = ({ spaceId, era }: CreatorCardProps) => {
 
   const isStake = totalStaked === '0'
 
-  const { name, about, ownedByAccount, image, links, email } = space || {}
+  const { name, about, postsCount, ownedByAccount, image, links, email } =
+    space || {}
 
   const owner = ownedByAccount?.id
 
@@ -129,6 +180,20 @@ const CreatorCard = ({ spaceId, era }: CreatorCardProps) => {
     }
   }
 
+  const postsLink = (
+    <a
+      href={`https://polkaverse.com/${spaceId}`}
+      onClick={(e) => e.stopPropagation()}
+      target='_blank'
+      rel='noreferrer'
+      className={clsx(
+        'text-[#64748B] text-sm font-normal hover:text-text-primary leading-none duration-0'
+      )}
+    >
+      {pluralize({ count: parseInt(postsCount || '0'), singularText: 'post' })}
+    </a>
+  )
+
   return (
     <>
       <div
@@ -139,24 +204,24 @@ const CreatorCard = ({ spaceId, era }: CreatorCardProps) => {
       >
         <div className='flex flex-col gap-2'>
           <div
-            className='cursor-pointer'
+            className='cursor-pointer flex flex-col gap-3'
             onClick={() => setOpenAboutModal(true)}
           >
             <div className='w-full flex justify-between gap-2'>
               <CreatorPreview
                 title={
-                  <ValueOrSkeleton
-                    value={name || '<Unnamed>'}
+                  <CreatorName
+                    cardRef={cardRef}
+                    name={name}
                     loading={spaceLoading}
-                    skeletonClassName='w-full h-[16px]'
-                    className='whitespace-nowrap'
                   />
                 }
-                desc={<ContactInfo {...contactInfo} />}
+                desc={!!postsCount && postsLink}
                 avatar={image}
                 owner={owner}
-                descClassName='p-[1px]'
+                descClassName='p-[1px] leading-none'
                 infoClassName='flex flex-col gap-1'
+                titleRef={cardRef}
               />
 
               <div>
@@ -172,6 +237,11 @@ const CreatorCard = ({ spaceId, era }: CreatorCardProps) => {
                 </Tooltip>
               </div>
             </div>
+            <ContactInfo
+              className={clsx('text-[#64748B]')}
+              spaceId={spaceId}
+              {...contactInfo}
+            />
             {aboutText}
           </div>
           <div className='border-b border-[#D4E2EF]'></div>

src/components/creatorsStaking/Creators/index.tsx

@@ -170,7 +170,7 @@ const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
         open={showSuccessModal}
         closeModal={() => setShowSuccessModal(false)}
         spaceId={stakedSpaceId || '0'}
-        tokenSymbol={'SOON'}
+        tokenSymbol={'SUB'}
         amount={amount}
       />
     </div>