Release v3.3.6

Joystream · Jun 23, 2023 · 3e755a0 · 3e755a0
2 parents 2f22d45 + 3cd9d05
commit 3e755a0
Show file tree

Hide file tree

Showing 29 changed files with 645 additions and 493 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,18 @@ 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).
 
+## [3.3.6] - 2023-06-23
+
+### Changed
+
+- Changed YPP rewards
+- Improved request size on video page
+- Analytics plugins removed from bundle if not initialised
+
+### Fixed
+
+- Fixed storage bucket blacklisting
+
 ## [3.3.5] - 2023-06-09
 
 ### Added

diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml
@@ -59,7 +59,8 @@ features:
       - title: Sign Up to YouTube Partner Program
         showInDashboard: false # Optional. If false the reward will be shown only on YouTube partner program landing page. Default true
         shortDescription: Connect your YouTube channels via a simple step-by-step flow and get your first reward.
-        baseAmount: 5000 # Base amount that will be multiplied by tier multiplier
+        baseAmount: null # Base amount that will be multiplied by tier multiplier
+        baseUsdAmount: 20
       - title: Sync videos from your YouTube channel
         shortDescription: Opt in to auto-sync feature upon sign up and all YouTube content will get uploaded to $VITE_APP_NAME automatically. Get paid for every new video synced to your $VITE_APP_NAME channel.
         stepsDescription: Publishing your existing and new content with $VITE_APP_NAME is the fastest way to earn more JOY tokens.
@@ -68,7 +69,8 @@ features:
           - Wait till your videos get synced to your $VITE_APP_NAME channel.
           - Publish new videos to your YouTube channel.
           - Get rewarded for every new video synced to $VITE_APP_NAME.
-        baseAmount: 300
+        baseAmount: null
+        baseUsdAmount: 3
       - title: Refer another YouTube creator
         shortDescription: Get JOY for every new creator who signs up to YPP program using your referral link. Referrals multiplier depends on the popularity tier of the channel signed up using referral link.
         stepsDescription: Earn when another YouTube creator signs up to the program by using your your referral link.
@@ -77,9 +79,10 @@ features:
           - Send it to as many Web3 YouTube creators as you want.
           - Get rewarded for every new successful sign up, that uses your referral link. Referral reward depends on their popularity tier.
           - If signed up without the link they can simply add your channel name to the referral field in the registration flow.
-        baseAmount:
-          min: 1000
-          max: 5000
+        baseAmount: null
+        baseUsdAmount:
+          min: 10
+          max: 50
         actionButtonText: Get referral link
         actionButtonAction: copyReferral
     widgets: # Widgets on Ypp landing page
@@ -465,6 +468,8 @@ analytics:
     id: '$VITE_USERSNAP_ID'
   GA: # Google Analytics
     id: '$VITE_GA_ID'
+  optimize:
+    id: '$VITE_OPTIMIZE_ID'
   segment: # Segment Analytics
     id: '$VITE_SEGMENT_ID'
 

diff --git a/packages/atlas/package.json b/packages/atlas/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "3.3.5",
+  "version": "3.3.6",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",

diff --git a/packages/atlas/plugins/index.ts b/packages/atlas/plugins/index.ts
@@ -118,3 +118,19 @@ export const EmbeddedFallbackPlugin: PluginOption = {
     })
   },
 }
+
+export const OptimizePlugin: PluginOption = {
+  name: 'optimize-init-plugin',
+  transformIndexHtml: {
+    enforce: 'pre',
+    transform: (html) => {
+      const optimizeEnv = 'VITE_OPTIMIZE_ID'
+      const optimizeId = process.env[optimizeEnv] || loadEnv('production', path.join(process.cwd(), 'src'))[optimizeEnv]
+      const optimizeScript = optimizeId
+        ? `<script src="https://www.googleoptimize.com/optimize.js?id=${optimizeId}"></script>`
+        : ''
+
+      return html.replace('<optimize-script />', optimizeScript)
+    },
+  },
+}
diff --git a/packages/atlas/src/.env b/packages/atlas/src/.env
@@ -5,14 +5,16 @@ VITE_ENV=development
 VITE_ENV_SELECTION_ENABLED=true
 # default env in environments admin modal. Can be production, development, next or local. If not provided, VITE_ENV will be used
 VITE_DEFAULT_DATA_ENV=
-# forces maintenance screen. Set to true if Orion service is unavailable for a longer time 
+# forces maintenance screen. Set to true if Orion service is unavailable for a longer time
 VITE_FORCE_MAINTENANCE=
 
 # App configuration
 VITE_APP_ID=4414-2
 VITE_APP_NAME=Atlas
 
+
 VITE_AVATAR_SERVICE_URL=https://atlas-services.joystream.org/avatars
+VITE_ASSET_LOGS_URL=
 VITE_GEOLOCATION_SERVICE_URL=https://geolocation.joystream.org
 VITE_HCAPTCHA_SITE_KEY=41cae189-7676-4f6b-aa56-635be26d3ceb
 VITE_GOOGLE_CONSOLE_CLIENT_ID=
@@ -24,6 +26,13 @@ VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps
 VITE_YOUTUBE_SYNC_API_URL=https://52.204.147.11.nip.io
 VITE_YOUTUBE_COLLABORATOR_MEMBER_ID=18
 
+# Analytics tools
+VITE_GA_ID=
+VITE_SEGMENT_ID=
+VITE_SENTRY_DSN=
+VITE_OPTIMIZE_ID=
+VITE_USERSNAP_ID=
+
 # Production env URLs
 VITE_PRODUCTION_ORION_URL=https://orion.joystream.org/graphql
 VITE_PRODUCTION_QUERY_NODE_SUBSCRIPTION_URL=wss://orion.joystream.org/graphql

diff --git a/packages/atlas/src/api/client/cache.ts b/packages/atlas/src/api/client/cache.ts
@@ -34,7 +34,9 @@ const getVideoKeyArgs = (
   const idIn = args?.where?.id_in || []
   const isPublic = args?.where?.isPublic_eq ?? ''
   const createdAtGte = args?.where?.createdAt_gte ? JSON.stringify(args.where.createdAt_gte) : ''
+  const createdAtGt = args?.where?.createdAt_gt ? JSON.stringify(args.where.createdAt_gt) : ''
   const createdAtLte = args?.where?.createdAt_lte ? JSON.stringify(args.where.createdAt_lte) : ''
+  const createdAtLt = args?.where?.createdAt_lt ? JSON.stringify(args.where.createdAt_lt) : ''
   const durationGte = args?.where?.duration_gte || ''
   const durationLte = args?.where?.duration_gte || ''
   const titleContains = args?.where?.title_contains || ''
@@ -48,7 +50,7 @@ const getVideoKeyArgs = (
     return `${createdAtGte}:${channel}`
   }
 
-  return `${onlyCount}:${channel}:${category}:${nft}:${language}:${createdAtGte}:${createdAtLte}:${isPublic}:${idEq}:${idIn}:${sorting}:${durationGte}:${durationLte}:${titleContains}:${titleContainsInsensitive}:${offset}`
+  return `${onlyCount}:${channel}:${category}:${nft}:${language}:${createdAtGte}:${createdAtLte}:${isPublic}:${idEq}:${idIn}:${sorting}:${durationGte}:${durationLte}:${titleContains}:${titleContainsInsensitive}:${offset}:${createdAtGt}:${createdAtLt}`
 }
 
 const getNftKeyArgs = (

diff --git a/packages/atlas/src/components/AllNftSection/AllNftSection.tsx b/packages/atlas/src/components/AllNftSection/AllNftSection.tsx
@@ -1,148 +1,37 @@
 import styled from '@emotion/styled'
-import { useMemo, useState } from 'react'
 
-import { OwnedNftOrderByInput, OwnedNftWhereInput } from '@/api/queries/__generated__/baseTypes.generated'
-import { SvgActionSell, SvgActionSettings, SvgActionShoppingCart } from '@/assets/icons'
 import { EmptyFallback } from '@/components/EmptyFallback'
-import { FilterButtonOption, SectionFilter } from '@/components/FilterButton'
 import { Section } from '@/components/Section/Section'
 import { Button } from '@/components/_buttons/Button'
 import { NftTileViewer } from '@/components/_nft/NftTileViewer'
-import { publicVideoFilter } from '@/config/contentFilter'
 import { useInfiniteNftsGrid } from '@/hooks/useInfiniteNftsGrid'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
-import { tokenNumberToHapiBn } from '@/joystream-lib/utils'
+import { SORTING_FILTERS, useNftSectionFilters } from '@/hooks/useNftSectionFilters'
 import { DEFAULT_NFTS_GRID } from '@/styles'
 import { InfiniteLoadingOffsets } from '@/utils/loading.contants'
 
 import { NumberFormat } from '../NumberFormat'
 
-const NFT_STATUSES: FilterButtonOption[] = [
-  {
-    value: 'AuctionTypeEnglish',
-    selected: false,
-    applied: false,
-    label: 'Timed auction',
-  },
-  {
-    value: 'AuctionTypeOpen',
-    selected: false,
-    applied: false,
-    label: 'Open auction',
-  },
-  {
-    value: 'TransactionalStatusBuyNow',
-    selected: false,
-    applied: false,
-    label: 'Fixed price',
-  },
-  {
-    value: 'TransactionalStatusIdle',
-    selected: false,
-    applied: false,
-    label: 'Not for sale',
-  },
-]
-
-const OTHER: FilterButtonOption[] = [
-  { label: 'Exclude paid promotional materials', selected: false, applied: false, value: 'promotional' },
-  { label: 'Exclude mature content rating', selected: false, applied: false, value: 'mature' },
-]
-
-const FILTERS: SectionFilter[] = [
-  {
-    name: 'price',
-    type: 'range',
-    label: 'Last price',
-    icon: <SvgActionSell />,
-    range: { min: undefined, max: undefined },
-  },
-  {
-    name: 'status',
-    label: 'Status',
-    icon: <SvgActionShoppingCart />,
-    type: 'checkbox',
-    options: NFT_STATUSES,
-  },
-  { name: 'other', type: 'checkbox', options: OTHER, label: 'Other', icon: <SvgActionSettings /> },
-]
-
-const sortingOptions = [
-  {
-    label: 'Newest',
-    value: OwnedNftOrderByInput.CreatedAtDesc,
-  },
-  {
-    label: 'Oldest',
-    value: OwnedNftOrderByInput.CreatedAtAsc,
-  },
-]
-
 export const AllNftSection = () => {
-  const [filters, setFilters] = useState<SectionFilter[]>(FILTERS)
-  const [hasAppliedFilters, setHasAppliedFilters] = useState(false)
-  const [order, setOrder] = useState<OwnedNftOrderByInput>(OwnedNftOrderByInput.CreatedAtDesc)
   const smMatch = useMediaMatch('sm')
-  const mappedFilters = useMemo((): OwnedNftWhereInput => {
-    const mappedStatus =
-      filters
-        .find((filter) => filter.name === 'status')
-        ?.options?.filter((option) => option.applied)
-        .map((option) => {
-          if (['AuctionTypeOpen', 'AuctionTypeEnglish'].includes(option.value)) {
-            return {
-              auction: {
-                auctionType: {
-                  isTypeOf_eq: option.value,
-                },
-              },
-            }
-          }
-
-          return { isTypeOf_eq: option.value }
-        }, [] as OwnedNftWhereInput['transactionalStatus'][]) ?? []
-    const otherFilters = filters.find((filter) => filter.name === 'other')
-    const isMatureExcluded = otherFilters?.options?.some((option) => option.value === 'mature' && option.applied)
-    const isPromotionalExcluded = otherFilters?.options?.some(
-      (option) => option.value === 'promotional' && option.applied
-    )
-    const priceFilter = filters.find((filter) => filter.name === 'price')
-    const minPrice = priceFilter?.range?.appliedMin
-    const maxPrice = priceFilter?.range?.appliedMax
-
-    setHasAppliedFilters(
-      Boolean(minPrice || maxPrice || isPromotionalExcluded || isMatureExcluded || mappedStatus.length)
-    )
-
-    const commonFilters = {
-      lastSalePrice_gte: minPrice ? tokenNumberToHapiBn(minPrice).toString() : undefined,
-      lastSalePrice_lte: maxPrice ? tokenNumberToHapiBn(maxPrice).toString() : undefined,
-      video: {
-        ...publicVideoFilter,
-        ...(isMatureExcluded ? { isExcluded_eq: false } : {}),
-        ...(isPromotionalExcluded ? { hasMarketing_eq: false } : {}),
-      },
-    }
-    return {
-      OR: mappedStatus.length
-        ? mappedStatus.map((transactionalStatus) => ({
-            ...commonFilters,
-            transactionalStatus,
-          }))
-        : [commonFilters],
-    }
-  }, [filters])
+  const {
+    ownedNftWhereInput,
+    order,
+    hasAppliedFilters,
+    rawFilters,
+    actions: { onApplyFilters, setOrder, clearFilters },
+  } = useNftSectionFilters()
 
   const { columns, fetchMore, pageInfo, tiles, totalCount } = useInfiniteNftsGrid({
-    where: mappedFilters,
+    where: ownedNftWhereInput,
     orderBy: order,
   })
 
   const children = tiles?.map((nft, idx) => <NftTileViewer key={idx} nftId={nft.id} />)
   return (
     <Section
       headerProps={{
-        onApplyFilters: setFilters,
+        onApplyFilters,
         start: {
           type: 'title',
           title: 'All NFTs',
@@ -151,12 +40,12 @@ export const AllNftSection = () => {
               <NumberFormat value={totalCount} as="p" variant={smMatch ? 'h500' : 'h400'} color="colorTextMuted" />
             ) : undefined,
         },
-        filters,
+        filters: rawFilters,
         sort: {
           type: 'toggle-button',
           toggleButtonOptionTypeProps: {
             type: 'options',
-            options: sortingOptions,
+            options: SORTING_FILTERS,
             value: order,
             onChange: setOrder,
           },
@@ -174,7 +63,7 @@ export const AllNftSection = () => {
                   subtitle="Please, try changing your filtering criteria."
                   button={
                     hasAppliedFilters && (
-                      <Button variant="secondary" onClick={() => setFilters(FILTERS)}>
+                      <Button variant="secondary" onClick={() => clearFilters()}>
                         Clear all filters
                       </Button>
                     )

diff --git a/packages/atlas/src/components/JoyTokenIcon/JoyTokenIcon.tsx b/packages/atlas/src/components/JoyTokenIcon/JoyTokenIcon.tsx
@@ -18,8 +18,10 @@ import {
   SvgJoyTokenSilver48,
 } from '@/assets/icons'
 import { Tooltip } from '@/components/Tooltip'
+import { TooltipText } from '@/components/Tooltip/Tooltip.styles'
 import { atlasConfig } from '@/config'
 import { cVar } from '@/styles'
+import { Anchor } from '@/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles'
 
 type JoyTokenIconVariant = 'primary' | 'silver' | 'regular' | 'gray'
 type JoyTokenIconSize = 16 | 24 | 32 | 48
@@ -70,8 +72,19 @@ export const JoyTokenIcon: FC<JoyTokenIconProps> = ({
   return (
     <>
       <Tooltip
+        interactive
         hidden={withoutInformationTooltip}
-        text={`${atlasConfig.joystream.tokenTicker} token is a native crypto asset of Joystream blockchain. It is used for platform governance, purchasing NFTs, trading creator tokens, and covering blockchain processing fees.`}
+        customContent={
+          <TooltipText as="span" variant="t100">
+            {atlasConfig.joystream.tokenTicker} token is a native crypto asset of Joystream blockchain. It is used for
+            platform governance, purchasing NFTs, trading creator tokens, and covering blockchain processing fees. They
+            are listed on{' '}
+            <Anchor href="https://www.mexc.com/exchange/JOYSTREAM_USDT" target="__blank">
+              MEXC
+            </Anchor>{' '}
+            exchange under JOYSTREAM ticker
+          </TooltipText>
+        }
         multiline
         reference={ref.current}
         delay={1000}

diff --git a/packages/atlas/src/components/NumberFormat/NumberFormat.tsx b/packages/atlas/src/components/NumberFormat/NumberFormat.tsx
@@ -100,21 +100,15 @@ const numberCompactFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 2,
 })
 
-const dollarFormatter = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-})
-
 const dollarSmallNumberFormatter = new Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD',
-  minimumSignificantDigits: 2,
+  minimumSignificantDigits: 1,
   maximumSignificantDigits: 3,
 })
 
 const formatNumberShort = (num: number): string => {
   return numberCompactFormatter.format(num).replaceAll(',', ' ')
 }
 
-const formatDollars = (num: number) =>
-  (num >= 1 ? dollarFormatter.format(num) : dollarSmallNumberFormatter.format(num)).replaceAll(',', ' ')
+const formatDollars = (num: number) => dollarSmallNumberFormatter.format(num).replaceAll(',', ' ')
diff --git a/packages/atlas/src/components/Tabs/Tabs.tsx b/packages/atlas/src/components/Tabs/Tabs.tsx
@@ -93,7 +93,7 @@ export const Tabs: FC<TabsProps> = memo(
                 data-badge={tab.badgeNumber}
               >
                 {tab.name}
-                {tab.pillText && <StyledPill size="small" label={tab.pillText} />}
+                {typeof tab.pillText !== 'undefined' && <StyledPill size="small" label={tab.pillText} />}
               </Text>
             </Tab>
           ))}