5.5.0: CRT listing fixes

CHANGELOG.md

@@ -5,6 +5,17 @@ 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).
 
+## [5.5.0] - 2024-11-07
+
+**IMPORTANT:** Depends on Orion release `4.1.0`
+
+### Changed
+
+- Removed _Hot tokens_ section from `CrtMarketplaceView`
+- Updated Orion schema following `4.1.0` release
+- Added minimum volume requirement for `TopCrtMovers`
+- Changed default sorting of _All creator tokens_ from _Price % 30D_ to _Liquidity_
+
 ## [5.4.1] - 2024-11-05
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "license": "GPL-3.0",
   "workspaces": [
     "packages/*"

packages/atlas/package.json

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

packages/atlas/src/api/queries/creatorTokens.graphql

@@ -115,8 +115,20 @@ query GetMarketplaceTokens($where: MarketplaceTokenWhereInput, $limit: Int, $off
   }
 }
 
-query GetHotAndColdTokens($where: CreatorTokenWhereInput, $periodDays: Int!, $priceDesc: Boolean, $limit: Int) {
-  tokensWithPriceChange(periodDays: $periodDays, orderByPriceDesc: $priceDesc, limit: $limit, where: $where) {
+query GetHotAndColdTokens(
+  $where: CreatorTokenWhereInput
+  $periodDays: Int!
+  $priceDesc: Boolean
+  $limit: Int
+  $minVolume: BigInt
+) {
+  tokensWithPriceChange(
+    periodDays: $periodDays
+    orderByPriceDesc: $priceDesc
+    limit: $limit
+    minVolume: $minVolume
+    where: $where
+  ) {
     pricePercentageChange
     creatorToken {
       ...BasicCreatorToken

packages/atlas/src/components/TopCrtMovers/TopCrtMovers.tsx

@@ -52,13 +52,22 @@ const tableEmptyState = {
   icon: <SvgEmptyStateIllustration />,
 }
 
-export const TopMovingTokens = ({ interval, tableTitle }: { interval: number; tableTitle: string }) => {
+export const TopMovingTokens = ({
+  interval,
+  tableTitle,
+  minVolumeJoy,
+}: {
+  interval: number
+  tableTitle: string
+  minVolumeJoy: number
+}) => {
   const [orderDesc, setOrderDesc] = useState(true)
   const { data, loading } = useGetHotAndColdTokensQuery({
     variables: {
       periodDays: interval,
       priceDesc: orderDesc,
       limit: 10,
+      minVolume: BigInt(minVolumeJoy * 10_000_000_000).toString(),
     },
   })
   const columns = getColumns(interval)

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

@@ -129,14 +129,16 @@ export const MarketplaceCrtTable = ({ data, emptyState, isLoading, ...tableProps
         />
       ),
       status: <CrtStatus status={row.status} />,
-      marketCap: (
+      marketCap: !row.marketCap.isZero() ? (
         <NumberFormat
           icon={<JoyTokenIcon size={16} variant="gray" />}
           format="short"
           withDenomination
           value={row.marketCap}
           as="p"
         />
+      ) : (
+        '–'
       ),
       totalRevenue: (
         <NumberFormat

packages/atlas/src/hooks/useTokensPagniation.ts

@@ -12,7 +12,7 @@ export const useTokensPagination = ({ initialPageSize = 10 }: { initialPageSize?
   // TODO: we should add where clause to url params as well, but currently they are so small that it was omitted
   const pagination = useQueryTableState<MarketplaceTokenOrderByInput>({
     initialPerPage: initialPageSize,
-    initialOrderBy: MarketplaceTokenOrderByInput.PriceChangeDesc,
+    initialOrderBy: MarketplaceTokenOrderByInput.LiquidityDesc,
   })
   const { setOrderBy, orderBy } = pagination
 

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

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled'
 
 import { CreatorTokenOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
-import { HotCreatorTokens } from '@/components/HotCreatorTokens'
 import { LastestCrtTrades } from '@/components/LastestCrtTrades'
 import { LimitedWidthContainer } from '@/components/LimitedWidthContainer'
 import { TopMovingTokens } from '@/components/TopCrtMovers'
@@ -23,13 +22,7 @@ export const CrtMarketplaceView = () => {
 
         <TableFullWitdhtWrapper>
           <LimitedWidthContainer big noBottomPadding>
-            <HotCreatorTokens interval={30} tableTitle="Hot Tokens" />
-          </LimitedWidthContainer>
-        </TableFullWitdhtWrapper>
-
-        <TableFullWitdhtWrapper>
-          <LimitedWidthContainer big noBottomPadding>
-            <TopMovingTokens interval={30} tableTitle="Top Movers" />
+            <TopMovingTokens interval={30} minVolumeJoy={100} tableTitle="Top Movers" />
           </LimitedWidthContainer>
         </TableFullWitdhtWrapper>