😮‍💨 Small UI fixes (Joystream#6366)

* Correct token symbol in table * Fix owner avatar in nft drawer * Add token symbol to the tab
Joystream · Jun 4, 2024 · b3bf1c0 · b3bf1c0
1 parent e9b5f1d
commit b3bf1c0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx b/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx
@@ -49,9 +49,10 @@ const tableEmptyState = {
 type AmmTransactionsTableProps = {
   data: FullAmmCurveFragment['transactions']
   loading: boolean
+  symbol: string
 }
 
-export const AmmTransactionsTable = ({ data, loading }: AmmTransactionsTableProps) => {
+export const AmmTransactionsTable = ({ data, loading, symbol }: AmmTransactionsTableProps) => {
   const mappedData = useMemo(
     () =>
       data.map((row) => ({
@@ -64,10 +65,12 @@ export const AmmTransactionsTable = ({ data, loading }: AmmTransactionsTableProp
           />
         ),
         pricePerUnit: <TokenAmount tokenAmount={new BN(row.pricePerUnit)} />,
-        quantity: <NumberFormat value={+row.quantity} as="p" withToken customTicker="$JBC" variant="t100-strong" />,
+        quantity: (
+          <NumberFormat value={+row.quantity} as="p" withToken customTicker={`$${symbol}`} variant="t100-strong" />
+        ),
         amount: <TokenAmount tokenAmount={new BN(row.pricePaid)} />,
       })),
-    [data]
+    [data, symbol]
   )
 
   return (

diff --git a/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx b/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx
@@ -64,9 +64,8 @@ export const NftPurchaseBottomDrawer: FC = () => {
   const { userBid, canChangeBid, userBidUnlockDate } = useNftState(nft)
   const thumbnailUrls = nft?.video.thumbnailPhoto?.resolvedUrls
   const creatorAvatarUrls = nft?.video.channel.avatarPhoto?.resolvedUrls
-  const { urls: ownerMemberAvatarUrls } = getMemberAvatar(
-    nft?.owner.__typename === 'NftOwnerMember' ? nft.owner.member : null
-  )
+  const { urls: ownerMemberAvatarUrls } =
+    nft?.owner.__typename === 'NftOwnerMember' ? getMemberAvatar(nft.owner.member) : { urls: creatorAvatarUrls }
   const mdMatch = useMediaMatch('md')
   const { accountBalance } = useSubscribeAccountBalance()
   const timestamp = useMsTimestamp({ shouldStop: !currentAction })

diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx
@@ -100,7 +100,11 @@ export const CrtMarketTab = ({ token }: CrtMarketTabProps) => {
           }}
         />
       </FlexBox>
-      <AmmTransactionsTable loading={loading} data={data?.ammCurves[0].transactions ?? []} />
+      <AmmTransactionsTable
+        symbol={token.symbol ?? 'N/A'}
+        loading={loading}
+        data={data?.ammCurves[0].transactions ?? []}
+      />
     </>
   )
 }
diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx
@@ -7,6 +7,7 @@ import { useParams, useSearchParams } from 'react-router-dom'
 import { useChannelNftCollectors, useFullChannel } from '@/api/hooks/channel'
 import { useVideoCount } from '@/api/hooks/video'
 import { OwnedNftOrderByInput, VideoOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
+import { useGetFullCreatorTokenQuery } from '@/api/queries/__generated__/creatorTokens.generated'
 import { useGetNftsCountQuery } from '@/api/queries/__generated__/nfts.generated'
 import { SvgActionCheck, SvgActionFilters, SvgActionFlag, SvgActionMore, SvgActionPlus } from '@/assets/icons'
 import { ChannelTitle } from '@/components/ChannelTitle'
@@ -92,6 +93,10 @@ export const ChannelView: FC = () => {
   const filteredTabs = TABS.filter((tab) =>
     tab === 'Token' ? !!tab && (isChannelOwner || !!channel?.creatorToken?.token.id) : !!tab
   )
+  const { data: tokenData } = useGetFullCreatorTokenQuery({
+    variables: { id: channel?.creatorToken?.token.id ?? '' },
+    skip: !channel?.creatorToken?.token.id,
+  })
   const { videoCount } = useVideoCount({
     where: getPublicCryptoVideoFilter({
       channel: {
@@ -213,7 +218,14 @@ export const ChannelView: FC = () => {
 
   const mappedTabs = filteredTabs.map((tab) => ({
     name: tab,
-    pillText: tab === 'Videos' ? videoCount : tab === 'NFTs' ? nftCountData?.ownedNftsConnection.totalCount : undefined,
+    pillText:
+      tab === 'Videos'
+        ? videoCount
+        : tab === 'NFTs'
+        ? nftCountData?.ownedNftsConnection.totalCount
+        : tab === 'Token'
+        ? tokenData?.creatorTokenById?.symbol ?? undefined
+        : undefined,
   }))
 
   const getChannelContent = (tab: (typeof TABS)[number]) => {