🍎 Public channel balance (#4054)

* Required changes

* Fix balance hook to fetch when there is no active membership

packages/atlas/src/providers/joystream/joystream.hooks.ts

@@ -172,14 +172,14 @@ export const useSubscribeAccountBalance = (
   )
 
   useEffect(() => {
-    if (!activeMembership?.controllerAccount || !joystream) {
+    if (!(controllerAccount || activeMembership?.controllerAccount) || !joystream) {
       return
     }
 
     let unsubscribe: (() => void) | undefined
     const init = async () => {
       unsubscribe = await joystream.subscribeAccountBalance(
-        controllerAccount || activeMembership.controllerAccount,
+        (controllerAccount || activeMembership?.controllerAccount) ?? '',
         proxyCallback(({ availableBalance, lockedBalance, totalInvitationLock }) => {
           setLockedAccountBalance(new BN(lockedBalance))
           setTotalInvitationLock(new BN(totalInvitationLock))

packages/atlas/src/views/viewer/ChannelView/ChannelView.styles.ts

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
+import { SvgJoyTokenMonochrome16 } from '@/assets/icons'
 import { Tabs } from '@/components/Tabs'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
@@ -47,6 +48,30 @@ export const TitleContainer = styled.div`
   }
 `
 
+export const ChannelInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${sizes(2)};
+  margin: ${sizes(2)} 0;
+
+  .divider-dot {
+    display: none;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ${media.xs} {
+    flex-direction: row;
+
+    .divider-dot {
+      display: block;
+    }
+  }
+`
+
 export const StyledSelect = styled(Select)`
   grid-area: sort;
 
@@ -69,6 +94,18 @@ export const SubTitle = styled(Text)`
   display: inline-block;
 `
 
+export const Balance = styled(Text)`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`
+
+export const SvgToken = styled(SvgJoyTokenMonochrome16)`
+  path {
+    fill: ${cVar('colorText')};
+  }
+`
+
 export const StyledChannelLink = styled(ChannelLink)`
   position: relative;
   width: fit-content;

packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx

@@ -25,12 +25,15 @@ import { useHandleFollowChannel } from '@/hooks/useHandleFollowChannel'
 import { useHeadTags } from '@/hooks/useHeadTags'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { useVideoGridRows } from '@/hooks/useVideoGridRows'
+import { useSubscribeAccountBalance } from '@/providers/joystream/joystream.hooks'
 import { transitions } from '@/styles'
 import { SentryLogger } from '@/utils/logs'
 
 import { ChannelSearch } from './ChannelSearch'
 import { useSearchVideos } from './ChannelView.hooks'
 import {
+  Balance,
+  ChannelInfoContainer,
   CollectorsBoxContainer,
   FilterButton,
   NotFoundChannelContainer,
@@ -41,6 +44,7 @@ import {
   StyledTabs,
   SubTitle,
   SubTitleSkeletonLoader,
+  SvgToken,
   TabsContainer,
   TabsWrapper,
   TitleContainer,
@@ -102,6 +106,7 @@ export const ChannelView: FC = () => {
         search: { channelId: id, query: searchQuery },
       }),
   })
+  const { accountBalance } = useSubscribeAccountBalance(channel?.rewardAccount)
   const { channelNftCollectors } = useChannelNftCollectors({ channelId: id || '' })
 
   const { toggleFollowing, isFollowing } = useHandleFollowChannel(id, channel?.title)
@@ -244,14 +249,36 @@ export const ChannelView: FC = () => {
                 <Text as="h1" variant={smMatch ? 'h700' : 'h600'}>
                   {channel.title}
                 </Text>
-                <SubTitle as="p" variant="t300" color="colorText">
-                  {channel.followsNum ? (
-                    <NumberFormat as="span" value={channel.followsNum} format="short" variant="t300" />
-                  ) : (
-                    0
-                  )}{' '}
-                  Followers
-                </SubTitle>
+                <ChannelInfoContainer>
+                  <SubTitle as="p" variant="t300" color="colorText">
+                    {channel.followsNum ? (
+                      <NumberFormat
+                        as="span"
+                        value={channel.followsNum}
+                        format="short"
+                        color="colorText"
+                        variant="t300"
+                      />
+                    ) : (
+                      0
+                    )}{' '}
+                    Followers
+                  </SubTitle>
+                  <SubTitle className="divider-dot" as="p" variant="t300" color="colorText">
+                    •
+                  </SubTitle>
+                  <Balance as="span" variant="t300" color="colorText">
+                    Balance:
+                    <SvgToken />
+                    <NumberFormat
+                      as="span"
+                      value={accountBalance ?? 0}
+                      format="short"
+                      color="colorText"
+                      variant="t300"
+                    />
+                  </Balance>
+                </ChannelInfoContainer>
               </>
             ) : (
               <>