Release v4.10.1

CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.10.1] - 2023-10-11
+
+### Changed
+
+- Removed YPP channel requirements
+
+### Fixed
+
+- Fixed issue with failing funds withdrawal
+- Fixed crashes on ypp dashboard and referrals page
+- Fixed channel assets modification
+- Fixed referral link generation
+
 ## [4.10.0] - 2023-10-06
 
 ### Added

packages/atlas/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "4.10.0",
+  "version": "4.10.1",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",

packages/atlas/src/components/ChannelTitle/ChannelTitle.tsx

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled'
+import { ReactNode } from 'react'
+
+import { SvgActionCreatorToken, SvgActionVerified } from '@/assets/icons'
+import { Text, TextVariant } from '@/components/Text'
+import { TextBaseProps } from '@/components/Text/Text.styles'
+import { cVar } from '@/styles'
+
+import { FlexBox } from '../FlexBox'
+
+type ChannelTitleProps = {
+  variant: TextVariant
+  isVerified?: boolean
+  hasToken?: boolean
+  children?: ReactNode
+  as: keyof JSX.IntrinsicElements
+  className?: string
+} & TextBaseProps
+
+// todo: add isVerified and CRT flag for each instance
+export const ChannelTitle = ({ isVerified, hasToken, ...titleProps }: ChannelTitleProps) => {
+  return (
+    <StyledFlexBox alignItems="center">
+      <ChannelTitleText {...titleProps} />
+      {hasToken && <SvgActionCreatorToken />}
+      {isVerified && <SvgActionVerified />}
+    </StyledFlexBox>
+  )
+}
+
+export const ChannelTitleText = styled(Text)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`
+
+const StyledFlexBox = styled(FlexBox)`
+  path {
+    fill: ${cVar('colorText')};
+  }
+`

packages/atlas/src/components/ChannelTitle/index.ts

@@ -0,0 +1 @@
+export * from './ChannelTitle'

packages/atlas/src/components/Searchbar/SearchBox/Result.tsx

@@ -4,6 +4,7 @@ import { BasicChannelFieldsFragment, BasicVideoFieldsFragment } from '@/api/quer
 import { Text } from '@/components/Text'
 import { absoluteRoutes } from '@/config/routes'
 import { useGetAssetUrl } from '@/hooks/useGetAssetUrl'
+import { pluralizeNoun } from '@/utils/misc'
 
 import { ResultTitle } from './ResultTitle'
 import { ResultWrapper } from './ResultWrapper'
@@ -77,9 +78,12 @@ export const Result: FC<ResultProps> = ({
             <ResultTitle title={title} query={query} />
           </Title>
           <Text as="span" color="colorText" variant="t100">
+            {/*todo: add correct checks for verified and token*/}
             {video
               ? video.channel?.title
-              : `${channel?.followsNum} ${channel?.followsNum === 1 ? 'Follower' : 'Followers'}`}
+              : `${pluralizeNoun(channel?.followsNum || 0, 'Follower')} ${
+                  channel?.followsNum === -10 ? '・Verified' : ''
+                } ${channel?.followsNum === -10 ? `・$${channel.title}` : ''}`}
           </Text>
         </div>
       </ResultContent>

packages/atlas/src/components/WelcomeView/WelcomeView.tsx

@@ -58,7 +58,7 @@ interface WelcomeViewProps {
 }
 
 const typeIllustrationsFactory = (
-  isLoggedIn: boolean
+  isLoggedIn?: boolean
 ): Record<WelcomeViewProps['type'], { srcSet: string; alt: string }[]> => ({
   'crt': [
     {

packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx

@@ -14,8 +14,8 @@ import { SentryLogger } from '@/utils/logs'
 import { convertUpperCamelToSentence } from '@/utils/misc'
 import { formatNumber } from '@/utils/number'
 import { formatDateTime } from '@/utils/time'
+import { getTierRewards, yppBackendTierToConfig } from '@/utils/ypp'
 import { YppChannelStatus } from '@/views/global/YppLandingView/YppLandingView.types'
-import { getTierRewards } from '@/views/studio/YppDashboard/YppDashboard.config'
 
 import { COLUMNS, tableLoadingData } from './YppReferralTable.utils'
 
@@ -83,7 +83,7 @@ const Tier = ({ yppStatus }: { yppStatus: YppChannelStatus }) => {
       <FlexBox flow="column" width="fit-content" gap={1}>
         <Text variant="t100" as="p">
           {yppStatus.startsWith('Verified')
-            ? `${yppStatus.split('::')[1]} tier`
+            ? `${yppStatus.split('::')[1] || 'N/A'} tier`
             : yppStatus.startsWith('Suspended')
             ? 'Suspended'
             : yppStatus === 'Unverified'
@@ -112,7 +112,7 @@ const Reward = ({ yppStatus }: { yppStatus: YppChannelStatus }) => {
         : yppStatus === 'Unverified'
         ? 'Pending'
         : yppStatus.startsWith('Verified')
-        ? `$${getTierRewards(yppStatus.split('::')[1].toLowerCase())?.[2]}`
+        ? `$${getTierRewards(yppBackendTierToConfig(yppStatus))?.referral}`
         : 'n/a'}
     </RightAlignText>
   )

packages/atlas/src/components/_channel/ChannelCard/ChannelCard.styles.ts

@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import { Link } from 'react-router-dom'
 
 import { Avatar } from '@/components/Avatar'
+import { ChannelTitle } from '@/components/ChannelTitle'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
 import { breakpoints, cVar, sizes, square } from '@/styles'
@@ -55,11 +56,8 @@ export const InfoWrapper = styled.div`
   align-items: center;
 `
 
-export const ChannelTitle = styled(Text)`
+export const StyledChannelTitle = styled(ChannelTitle)`
   max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 `
 
 export const ChannelFollows = styled(Text)`

packages/atlas/src/components/_channel/ChannelCard/ChannelCard.tsx

@@ -13,10 +13,10 @@ import {
   ChannelCardAnchor,
   ChannelCardArticle,
   ChannelFollows,
-  ChannelTitle,
   FollowButton,
   InfoWrapper,
   StyledAvatar,
+  StyledChannelTitle,
 } from './ChannelCard.styles'
 
 export type ChannelCardProps = {
@@ -62,9 +62,9 @@ export const ChannelCard: FC<ChannelCardProps> = ({
                 </>
               ) : (
                 <>
-                  <ChannelTitle as="h3" variant={mdMatch ? 'h300' : 't200-strong'}>
+                  <StyledChannelTitle as="h3" variant={mdMatch ? 'h300' : 't200-strong'}>
                     {channel.title}
-                  </ChannelTitle>
+                  </StyledChannelTitle>
                   <ChannelFollows as="p" variant={mdMatch ? 't200' : 't100'} color="colorText">
                     <NumberFormat as="span" format="short" value={channel.followsNum || 0} color="colorText" />{' '}
                     followers

packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx

@@ -4,6 +4,7 @@ import { CSSTransition, SwitchTransition } from 'react-transition-group'
 import { useBasicChannel } from '@/api/hooks/channel'
 import { BasicChannelFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
 import { AvatarSize } from '@/components/Avatar'
+import { ChannelTitle } from '@/components/ChannelTitle'
 import { Text, TextVariant } from '@/components/Text'
 import { ProtectedActionWrapper } from '@/components/_auth/ProtectedActionWrapper'
 import { Button } from '@/components/_buttons/Button'
@@ -86,9 +87,13 @@ export const ChannelLink: FC<ChannelLinkProps> = ({
             {displayedChannel ? (
               <TitleWrapper followButton={followButton}>
                 <StyledLink onClick={onClick} to={absoluteRoutes.viewer.channel(id)} disabled={!id || noLink}>
-                  <Text as="span" variant={_textVariant} color={textSecondary ? 'colorCoreNeutral200' : undefined}>
+                  <ChannelTitle
+                    variant={_textVariant}
+                    as="span"
+                    color={textSecondary ? 'colorCoreNeutral200' : undefined}
+                  >
                     {customTitle || displayedChannel.channel.title}
-                  </Text>
+                  </ChannelTitle>
                   {followButton && (
                     <Text as="p" variant="t100" color="colorText" margin={{ top: 1 }}>
                       {displayedChannel.channel.followsNum}{' '}

packages/atlas/src/components/_channel/ChannelWithVideos/ChannelWithVideos.tsx

@@ -2,9 +2,9 @@ import { FC, MouseEvent, memo, useMemo, useState } from 'react'
 
 import { useBasicChannel } from '@/api/hooks/channel'
 import { useChannelPreviewVideos } from '@/api/hooks/video'
+import { ChannelTitle } from '@/components/ChannelTitle'
 import { Grid } from '@/components/Grid'
 import { NumberFormat } from '@/components/NumberFormat'
-import { Text } from '@/components/Text'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { VideoTileViewer } from '@/components/_video/VideoTileViewer'
 import { absoluteRoutes } from '@/config/routes'
@@ -83,9 +83,9 @@ export const ChannelWithVideos: FC<ChannelWithVideosProps> = memo(({ channelId }
           {isLoading ? (
             <SkeletonLoader width="120px" height="20px" bottomSpace="4px" />
           ) : (
-            <Text as="h3" variant="h300">
+            <ChannelTitle variant="h300" as="h3">
               {extendedChannel?.channel?.title}
-            </Text>
+            </ChannelTitle>
           )}
           {isLoading ? (
             <SkeletonLoader width="80px" height="20px" bottomSpace="8px" />

packages/atlas/src/components/_channel/ExpandableChannelsList/ExpandableChannelsList.tsx

@@ -4,9 +4,9 @@ import { FC, Fragment, useState } from 'react'
 import { useBasicChannels, useDiscoverChannels } from '@/api/hooks/channel'
 import { ChannelOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
 import { SvgActionChevronR } from '@/assets/icons'
+import { ChannelTitle } from '@/components/ChannelTitle'
 import { EmptyFallback } from '@/components/EmptyFallback'
 import { GridHeadingContainer, TitleContainer } from '@/components/GridHeading'
-import { Text } from '@/components/Text'
 import { LoadMoreButton } from '@/components/_buttons/LoadMoreButton'
 import { ChannelWithVideos } from '@/components/_channel/ChannelWithVideos'
 import { Select } from '@/components/_inputs/Select'
@@ -78,9 +78,9 @@ export const ExpandableChannelsList: FC<ExpandableChannelsListProps> = ({
             {loading ? (
               <SkeletonLoader height={23} width={250} />
             ) : (
-              <Text as="h2" variant="h500">
+              <ChannelTitle variant="h500" as="h2">
                 {title}
-              </Text>
+              </ChannelTitle>
             )}
             {languageSelector && (
               <LanguageSelectWrapper>

packages/atlas/src/components/_navigation/PrivateRoute/PrivateRoute.tsx

@@ -21,7 +21,7 @@ export const PrivateRoute: FC<PrivateRouteProps> = ({ redirectTo, isAuth, elemen
     )
   }
 
-  if (!isAuth && redirectTo) {
+  if (isAuth === false && redirectTo) {
     return <Navigate to={redirectTo} />
   }
   return element

packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.tsx

@@ -42,7 +42,8 @@ export const MemberDropdown = forwardRef<HTMLDivElement, MemberDropdownProps>(
       return new BN(selectedChannel?.channelStateBloatBond || 0)
     }, [selectedChannel?.channelStateBloatBond])
 
-    const { accountBalance, lockedAccountBalance, totalBalance, totalInvitationLock } = useSubscribeAccountBalance()
+    const { accountBalance, lockedAccountBalance, totalBalance, debt, totalInvitationLock } =
+      useSubscribeAccountBalance()
     const { accountBalance: channelBalance } =
       useSubscribeAccountBalance(selectedChannel?.rewardAccount, {
         channelStateBloatBond: memoizedChannelStateBloatBond,
@@ -126,9 +127,16 @@ export const MemberDropdown = forwardRef<HTMLDivElement, MemberDropdownProps>(
           show={showWithdrawDialog}
           onExitClick={toggleWithdrawDialog}
           channelBalance={channelBalance}
+          totalBalance={totalBalance}
           channelId={channelId}
+          accountDebt={debt}
+        />
+        <SendFundsDialog
+          show={showSendDialog}
+          onExitClick={toggleSendDialog}
+          accountBalance={accountBalance}
+          accountDebt={debt}
         />
-        <SendFundsDialog show={showSendDialog} onExitClick={toggleSendDialog} accountBalance={accountBalance} />
 
         <CSSTransition classNames={transitions.names.dropdown} in={isActive} timeout={0} mountOnEnter unmountOnExit>
           <Container ref={mergeRefs([ref, containerRef])}>

packages/atlas/src/components/_overlays/SendTransferDialogs/SendFundsDialog.tsx

@@ -47,6 +47,8 @@ type SendFundsDialogProps = {
   activeMembership?: FullMembershipFieldsFragment | null
   channelBalance?: BN
   accountBalance?: BN
+  totalBalance?: BN
+  accountDebt?: BN
   channelId?: string | null
   show: boolean
 }
@@ -55,6 +57,8 @@ export const SendFundsDialog: FC<SendFundsDialogProps> = ({
   onExitClick,
   accountBalance = new BN(0),
   channelBalance,
+  totalBalance = new BN(0),
+  accountDebt = new BN(0),
   channelId,
   activeMembership,
   show,
@@ -126,6 +130,12 @@ export const SendFundsDialog: FC<SendFundsDialogProps> = ({
   const handleSendFunds = async () => {
     const handler = await handleSubmit(async (data) => {
       if (!joystream || !data.account || !data.amount || (isWithdrawalMode && (!activeMembership || !channelId))) {
+        SentryLogger.error('Failed to send funds', 'SendFundsDialog', {
+          isWithdrawalMode,
+          activeMembership,
+          channelId,
+          data,
+        })
         return
       }
 
@@ -142,7 +152,8 @@ export const SendFundsDialog: FC<SendFundsDialogProps> = ({
           },
           txFactory: async (updateStatus) => {
             const amount =
-              !isWithdrawalMode && amountBN.add(transferFee).gte(accountBalance) ? amountBN.sub(transferFee) : amountBN
+              !isWithdrawalMode &&
+              amountBN.sub(amountBN.add(transferFee).gte(accountBalance) ? transferFee : new BN(0)).sub(accountDebt)
             return (await joystream.extrinsics).sendFunds(
               formatJoystreamAddress(data.account || ''),
               amount.toString(),
@@ -243,8 +254,16 @@ export const SendFundsDialog: FC<SendFundsDialogProps> = ({
                   return true
                 },
                 accountBalance: (value) => {
-                  if (value && tokenNumberToHapiBn(value).gte(currentBalance)) {
-                    return `Not enough tokens in your ${isWithdrawalMode ? 'channel' : 'account'} balance.`
+                  if (isWithdrawalMode && value && tokenNumberToHapiBn(value).gt(channelBalance)) {
+                    return `Not enough tokens in your channel balance.`
+                  } else if (value && tokenNumberToHapiBn(value).gte(accountBalance)) {
+                    return `Not enough tokens in your account balance.`
+                  }
+                  return true
+                },
+                memberBalance: () => {
+                  if (isWithdrawalMode && fullFee.gt(totalBalance)) {
+                    return 'Membership wallet has insufficient balance to cover transaction fees. Top up your membership wallet and try again. '
                   }
                   return true
                 },

packages/atlas/src/components/_video/VideoTileDetails/VideoTileDetails.styles.ts

@@ -41,12 +41,6 @@ export const StyledLink = styled(Link)`
   text-decoration: none;
 `
 
-export const ChannelTitle = styled(Text)`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`
-
 export const StyledAvatar = styled(Avatar)<{ smallGap: boolean }>`
   margin-right: ${({ smallGap }) => (smallGap ? sizes(3) : sizes(4))};
   cursor: pointer;

packages/atlas/src/components/_video/VideoTileDetails/VideoTileDetails.tsx

@@ -4,6 +4,7 @@ import { LinkProps } from 'react-router-dom'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
 import { SvgActionMore } from '@/assets/icons'
+import { ChannelTitle } from '@/components/ChannelTitle'
 import { ListItemProps } from '@/components/ListItem'
 import { Text } from '@/components/Text'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
@@ -12,7 +13,6 @@ import { cVar, transitions } from '@/styles'
 import { formatVideoDate } from '@/utils/video'
 
 import {
-  ChannelTitle,
   KebabMenuButtonIcon,
   PlaylistButton,
   StyledAvatar,

packages/atlas/src/hooks/useChannelFormSubmit.ts

@@ -23,6 +23,7 @@ import { useUploadsStore } from '@/providers/uploads/uploads.store'
 import { useUser } from '@/providers/user/user.hooks'
 import { AssetDimensions, ImageCropData } from '@/types/cropper'
 import { modifyAssetUrlInCache } from '@/utils/cachingAssets'
+import { createId } from '@/utils/createId'
 import { computeFileHash } from '@/utils/hashing'
 import { ConsoleLogger, SentryLogger } from '@/utils/logs'
 
@@ -155,7 +156,7 @@ export const useCreateEditChannelSubmit = () => {
             dimensions: data.assets.avatarPhoto?.assetDimensions ?? undefined,
             imageCropData: data.assets.avatarPhoto?.imageCropData ?? undefined,
             type: 'avatar',
-            name: (data.assets.avatarPhoto?.originalBlob as File).name,
+            name: (data.assets.avatarPhoto?.originalBlob as File)?.name ?? `${channelId}-avatar-${createId()}`,
           })
           uploadPromises.push(uploadPromise)
         }
@@ -170,7 +171,7 @@ export const useCreateEditChannelSubmit = () => {
             dimensions: data.assets.coverPhoto?.assetDimensions ?? undefined,
             imageCropData: data.assets.coverPhoto?.imageCropData ?? undefined,
             type: 'cover',
-            name: (data.assets.coverPhoto?.originalBlob as File).name,
+            name: (data.assets.coverPhoto?.originalBlob as File)?.name ?? `${channelId}-cover-${createId()}`,
           })
           uploadPromises.push(uploadPromise)
         }