🟣 Release/5.6.1 #6508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Lezek123 merged 3 commits into Joystream:master from Lezek123:release/5.6.1

May 9, 2025

CHANGELOG.md

-Original file line number
+Diff line change
@@ Expand Up @@
     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).
+    ## [5.6.1] - 2026-05-09
+    ### Fixed
+    - YPP referrals pagination issue in Gleev studio: https://github.com/Joystream/atlas/issues/6502
+    - Market transactions pagination issue in Gleev studio (CRT dashboard): https://github.com/Joystream/atlas/issues/6438
     ## [5.6.0] - 2024-12-23
     **IMPORTANT:** Depends on Orion release `4.2.0`.
@@ Expand All @@
       - Added hadling for `ExtrinsicFailed` errors
       - Added adequate cleanup of cached optimistic state on error
     - Fixed optimistic actions to be able to handle situations when there are multiple comments in `UNCONFIRMED` state
-    - Fixed a bug with invalid condition inside `transactions.manager.tsx` causing `onTxSync` to errously timeout in some cases.
+    - Fixed a bug with invalid condition inside `transactions.manager.tsx` causing `onTxSync` to errously timeout in some cases.
     ## [5.5.0] - 2024-11-07
@@ Expand Down @@

package.json

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "description": "UI for consuming Joystream - a user governed video platform",
-      "version": "5.6.0",
+      "version": "5.6.1",
       "license": "GPL-3.0",
       "workspaces": [
         "packages/*"
@@ Expand Down @@

packages/atlas/package.json

-Original file line number
+Diff line change
@@ -1,7 +1,7 @@
     {
       "name": "@joystream/atlas",
       "description": "UI for consuming Joystream - a user governed video platform",
-      "version": "5.6.0",
+      "version": "5.6.1",
       "license": "GPL-3.0",
       "scripts": {
         "start": "vite",
@@ Expand Down @@

packages/atlas/src/.env

-Original file line number
+Diff line change
@@ Expand Up @@
     # YPP configuration
     VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com
-    VITE_YOUTUBE_SYNC_API_URL=https://35.156.81.207.nip.io
+    VITE_YOUTUBE_SYNC_API_URL=https://172.236.19.60.nip.io
     VITE_YOUTUBE_COLLABORATOR_MEMBER_ID=18
     # Analytics tools
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -22,9 +22,9 @@ export type YppReferral = { @@
     type YppReferralTableProps = {
       isLoading: boolean
       data: YppReferral[]
-    }
+    } & Pick<TableProps, 'pagination'>
-    export const YppReferralTable = ({ isLoading, data }: YppReferralTableProps) => {
+    export const YppReferralTable = ({ isLoading, data, pagination }: YppReferralTableProps) => {
       const mappedData: TableProps['data'] = useMemo(
         () =>
           data.map((entry) => ({
@@ Expand All @@
           title="Channels you referred"
           columns={COLUMNS}
           data={isLoading ? tableLoadingData : mappedData}
+          pagination={pagination}
+          pageSize={pagination?.itemsPerPage}
         />
       )
     }
@@ Expand Down @@

packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -50,9 +50,9 @@ type AmmTransactionsTableProps = { @@
       data: FullAmmCurveFragment['transactions']
       loading: boolean
       symbol: string
-    }
+    } & Pick<TableProps, 'pagination'>
-    export const AmmTransactionsTable = ({ data, loading, symbol }: AmmTransactionsTableProps) => {
+    export const AmmTransactionsTable = ({ data, loading, symbol, pagination }: AmmTransactionsTableProps) => {
       const mappedData = useMemo(
         () =>
           data.map((row) => ({
@@ Expand Down Expand Up @@
           data={loading ? tableLoadingData : mappedData ?? []}
           columns={COLUMNS}
           emptyState={tableEmptyState}
+          pagination={pagination}
+          pageSize={pagination?.itemsPerPage}
         />
       )
     }
@@ Expand Down @@

packages/atlas/src/hooks/useMarketTransactionsPagination.ts

-Original file line number
+Diff line change
@@ -0,0 +1,54 @@
+    import { useState } from 'react'
+    import { useGetFullAmmCurveQuery } from '@/api/queries/__generated__/creatorTokens.generated'
+    import { SentryLogger } from '@/utils/logs'
+    const separateListIntoChunks = <T>(list: Array<T>, chunkSize: number): Array<T[]> => {
+      const chunks = []
+      for (let index = 0; index < list.length; index += chunkSize) {
+        chunks.push(list.slice(index, index + chunkSize))
+      }
+      return chunks
+    }
+    export const useMarketTransactionsPagination = ({
+      ammId,
+      initialPageSize = 10,
+    }: {
+      ammId?: string
+      initialPageSize?: number
+    }) => {
+      const [currentPage, setCurrentPage] = useState(0)
+      const [perPage, setPerPage] = useState(initialPageSize)
+      const { data, loading } = useGetFullAmmCurveQuery({
+        variables: {
+          where: {
+            id_eq: ammId,
+          },
+        },
+        skip: !ammId,
+        onError: (error) => {
+          SentryLogger.error('Failed to fetch AMM curve', 'CrtMarketTab', error)
+        },
+      })
+      const marketTransactions = data?.ammCurves[0].transactions ?? []
+      const pages = separateListIntoChunks(
+        [...marketTransactions].sort((transactionA, transactionB) => transactionB.createdIn - transactionA.createdIn),
+        perPage
+      )
+      return {
+        currentPage,
+        setCurrentPage,
+        marketTransactions: pages[currentPage] ?? [],
+        totalCount: marketTransactions.length,
+        loading,
+        setPerPage,
+        perPage,
+      }
+    }

packages/atlas/src/hooks/useYppReferralPagination.ts

-Original file line number
+Diff line change
@@ -0,0 +1,59 @@
+    import { useMemo, useState } from 'react'
+    import { useQuery } from 'react-query'
+    import { axiosInstance } from '@/api/axios'
+    import { YppReferral } from '@/components/YppReferralTable/YppReferralTable'
+    import { atlasConfig } from '@/config'
+    import { useUser } from '@/providers/user/user.hooks'
+    import { YppSyncedChannel } from '@/views/global/YppLandingView/YppLandingView.types'
+    const YPP_SYNC_URL = atlasConfig.features.ypp.youtubeSyncApiUrl
+    const separateListIntoChunks = <T>(list: Array<T>, chunkSize: number): Array<T[]> => {
+      const chunks = []
+      for (let index = 0; index < list.length; index += chunkSize) {
+        chunks.push(list.slice(index, index + chunkSize))
+      }
+      return chunks
+    }
+    export const useYppReferralPagination = ({ initialPageSize = 10 }: { initialPageSize?: number }) => {
+      const [currentPage, setCurrentPage] = useState(0)
+      const [perPage, setPerPage] = useState(initialPageSize)
+      const { channelId } = useUser()
+      const { isLoading, data } = useQuery(
+        ['referralsTable', channelId],
+        () => axiosInstance.get<YppSyncedChannel[]>(`${YPP_SYNC_URL}/channels/${channelId}/referrals`),
+        { enabled: !!channelId }
+      )
+      const yppReferrals: YppReferral[] = useMemo(
+        () =>
+          // TODO: For large arrays, the creation of new Date instances for sorting might be a performance consideration.
+          data?.data
+            .sort((channelA, channelB) => new Date(channelB.createdAt).getTime() - new Date(channelA.createdAt).getTime())
+            .map((channelData) => {
+              return {
+                date: new Date(channelData.createdAt),
+                channelId: String(channelData.joystreamChannelId),
+                status: channelData.yppStatus,
+              }
+            }) ?? [],
+        [data?.data]
+      )
+      const pages = separateListIntoChunks(yppReferrals, perPage)
+      return {
+        currentPage,
+        setCurrentPage,
+        yppReferrals: pages[currentPage] ?? [],
+        totalCount: yppReferrals.length,
+        isLoading,
+        setPerPage,
+        perPage,
+      }
+    }

packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx

-Original file line number
+Diff line change
@@ -1,7 +1,6 @@
     import BN from 'bn.js'
     import { useMemo } from 'react'
-    import { useGetFullAmmCurveQuery } from '@/api/queries/__generated__/creatorTokens.generated'
     import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.generated'
     import { SvgJoyTokenMonochrome24 } from '@/assets/icons'
     import { FlexBox } from '@/components/FlexBox'
@@ Expand All / @@ -10,29 +9,23 @@ import { WidgetTile } from '@/components/WidgetTile' @@
     import { AmmTransactionsTable } from '@/components/_crt/AmmTransactionsTable/AmmTransactionsTable'
     import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
     import { atlasConfig } from '@/config'
+    import { useMarketTransactionsPagination } from '@/hooks/useMarketTransactionsPagination'
     import { useMediaMatch } from '@/hooks/useMediaMatch'
     import { HAPI_TO_JOY_RATE } from '@/joystream-lib/config'
     import { calcBuyMarketPricePerToken } from '@/utils/crts'
-    import { SentryLogger } from '@/utils/logs'
     type CrtMarketTabProps = {
       token: FullCreatorTokenFragment
     }
+    const TILES_PER_PAGE = 10
     export const CrtMarketTab = ({ token }: CrtMarketTabProps) => {
       const mdMatch = useMediaMatch('md')
       const currentAmm = token.ammCurves.find((curve) => !curve.finalized)
-      const { data, loading } = useGetFullAmmCurveQuery({
-        variables: {
-          where: {
-            id_eq: currentAmm?.id,
-          },
-        },
-        skip: !currentAmm,
-        onError: (error) => {
-          SentryLogger.error('Failed to fetch AMM curve', 'CrtMarketTab', error)
-        },
-      })
+      const { loading, marketTransactions, currentPage, setCurrentPage, perPage, setPerPage, totalCount } =
+        useMarketTransactionsPagination({ ammId: currentAmm?.id, initialPageSize: TILES_PER_PAGE })
       const pricePerUnit = useMemo(
         () => calcBuyMarketPricePerToken(currentAmm?.mintedByAmm, currentAmm?.ammSlopeParameter, currentAmm?.ammInitPrice),
         [currentAmm?.ammInitPrice, currentAmm?.ammSlopeParameter, currentAmm?.mintedByAmm]
@@ Expand Down Expand Up @@
           <AmmTransactionsTable
             symbol={token.symbol ?? 'N/A'}
             loading={loading}
-            data={data?.ammCurves[0].transactions ?? []}
+            data={marketTransactions}
+            pagination={{ page: currentPage, setPerPage, totalCount, itemsPerPage: perPage, onChangePage: setCurrentPage }}
           />
         </>
       )
@@ Expand Down @@

.../src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,40 +1,18 @@
  
    import { useMemo } from 'react'

    import { useQuery } from 'react-query'

    import { axiosInstance } from '@/api/axios'

    import { SvgActionLinkUrl } from '@/assets/icons'

    import { EmptyFallback } from '@/components/EmptyFallback'

    import { YppReferral, YppReferralTable } from '@/components/YppReferralTable/YppReferralTable'

    import { YppReferralTable } from '@/components/YppReferralTable/YppReferralTable'

    import { ReferralLinkButton } from '@/components/_ypp/ReferralLinkButton'

    import { atlasConfig } from '@/config'

    import { useUser } from '@/providers/user/user.hooks'

    import { YppSyncedChannel } from '@/views/global/YppLandingView/YppLandingView.types'

    import { useYppReferralPagination } from '@/hooks/useYppReferralPagination'

    import { FallbackContainer } from '../YppDashboardTabs.styles'

    const YPP_SYNC_URL = atlasConfig.features.ypp.youtubeSyncApiUrl

    const TILES_PER_PAGE = 10

    export const YppDashboardReferralsTab = () => {

      const { channelId } = useUser()

      const { isLoading, data } = useQuery(

        ['referralsTable', channelId],

        () => axiosInstance.get<YppSyncedChannel[]>(`${YPP_SYNC_URL}/channels/${channelId}/referrals`),

        { enabled: !!channelId }

      )

      const { isLoading, yppReferrals, currentPage, setCurrentPage, perPage, setPerPage, totalCount } =

        useYppReferralPagination({ initialPageSize: TILES_PER_PAGE })

      const mappedData: YppReferral[] = useMemo(

        () =>

          data?.data.map((channelData) => {

            return {

              date: new Date(channelData.createdAt),

              channelId: String(channelData.joystreamChannelId),

              status: channelData.yppStatus,

            }

          }) ?? [],

        [data?.data]

      )

      if (!isLoading && !mappedData?.length) {

      if (!isLoading && totalCount === 0) {

        return (

          <FallbackContainer>

            <EmptyFallback

    @@ -47,5 +25,11 @@ export const YppDashboardReferralsTab = () => {
  
        )

      }

      return <YppReferralTable data={mappedData} isLoading={isLoading} />

      return (

        <YppReferralTable

          data={yppReferrals}

          isLoading={isLoading}

          pagination={{ page: currentPage, setPerPage, totalCount, itemsPerPage: perPage, onChangePage: setCurrentPage }}

        />

      )

    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🟣 Release/5.6.1 #6508

Uh oh!

Diff view

Diff view

There are no files selected for viewing