🟣 Release 5.2.1

CHANGELOG.md

@@ -5,6 +5,20 @@ 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.2.1] - 2024-05-06
+
+### Added
+
+- VWO feature
+- WalletConnect integration
+- YPP Dashboard remake
+
+### Fixed
+
+- HTML tags fixed
+- YPP variation page
+- Small CRT fixes
+
 ## [5.2.0] - 2024-04-22
 
 ### Added

packages/atlas/atlas.config.yml

@@ -116,8 +116,8 @@ features:
         actionButtonText: Get referral link
         actionButtonAction: copyReferral
     widgets: # Widgets on Ypp landing page
-      - title: Program details
-        link: https://www.notion.so/joystream/YPP-programme-d492c2eb88ff4ace955b5f2902ec21fb
+      - title: Creators Wiki
+        link: https://www.notion.so/joystream/79e2c624887a4183afa6de8c3dbaf905?v=0b160770d22b4426aaf1f85a1a28f75e&pvs=4
         linkText: Go to Notion # Used only on YPP Dashboard - if empty defaults to "Go to {title}"
         label: Notion # Used for YPP Dashboard to inform user which vendor given feature uses - if empty defaults to title
         icon: info # Optional icon to be displayed. Possible icons: message, info, tokenStack
@@ -126,8 +126,8 @@ features:
         linkText: Go to Payments
         label: Studio
         icon: tokenStack
-      - title: Support
-        link: https://discord.com/channels/811216481340751934/1053294778529353788
+      - title: Community
+        link: https://discord.com/channels/811216481340751934/1224709788592767136
         linkText: Go to Discord
         label: Discord
         icon: message
@@ -270,6 +270,12 @@ features:
   members:
     avatarServiceUrl: '$VITE_AVATAR_SERVICE_URL' # URL for avatar service - used to upload member's avatar
     hcaptchaSiteKey: '$VITE_HCAPTCHA_SITE_KEY' # Site key for hCaptcha - used to verify users are not bots when creating memberships - depends on hCaptcha being enabled in the faucet
+  walletConnect:
+    walletConnectProjectId: '$VITE_WALLET_CONNECT_PROJECT_ID' # WalletConnect project ID - used to connect to WalletConnect
+    metadata:
+      name: Atlas
+      description: Web3 video streaming platform
+      icons: ['https://dev.gleev.xyz/favicon.ico']
   playback:
     playbackRates: [2, 1.5, 1.25, 1, 0.5, 0.25] # Playback rates available in the player
   comments:

packages/atlas/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",
@@ -50,6 +50,8 @@
     "@sentry/react": "^7.53.1",
     "@talismn/connect-wallets": "^1.2.1",
     "@tippyjs/react": "^4.2.6",
+    "@walletconnect/modal": "^2.6.2",
+    "@walletconnect/universal-provider": "^2.11.1",
     "aos": "^2.3.4",
     "awesome-debounce-promise": "^2.1.0",
     "axios": "^1.2.1",

packages/atlas/plugins/index.ts

@@ -134,3 +134,32 @@ export const OptimizePlugin: PluginOption = {
     },
   },
 }
+
+export const VwoScriptPlugin: PluginOption = {
+  name: 'vwo-script-plugin',
+  transformIndexHtml: {
+    enforce: 'pre',
+    transform: (html) => {
+      const accountIdEnv = 'VITE_VWO_ACCOUNT_ID'
+      const accountId =
+        process.env[accountIdEnv] || loadEnv('production', path.join(process.cwd(), 'src'))[accountIdEnv]
+      const vwoScript = accountId
+        ? `<!-- Start VWO Async SmartCode -->
+<link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com" />
+<script type='text/javascript' id='vwoCode'>
+window._vwo_code || (function() {
+var account_id=${accountId},
+version=2.1,
+settings_tolerance=2000,
+hide_element='body',
+hide_element_style = 'opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important',
+/* DO NOT EDIT BELOW THIS LINE */
+f=false,w=window,d=document,v=d.querySelector('#vwoCode'),cK='_vwo_'+account_id+'_settings',cc={};try{var c=JSON.parse(localStorage.getItem('_vwo_'+account_id+'_config'));cc=c&&typeof c==='object'?c:{}}catch(e){}var stT=cc.stT==='session'?w.sessionStorage:w.localStorage;code={use_existing_jquery:function(){return typeof use_existing_jquery!=='undefined'?use_existing_jquery:undefined},library_tolerance:function(){return typeof library_tolerance!=='undefined'?library_tolerance:undefined},settings_tolerance:function(){return cc.sT||settings_tolerance},hide_element_style:function(){return'{'+(cc.hES||hide_element_style)+'}'},hide_element:function(){if(performance.getEntriesByName('first-contentful-paint')[0]){return''}return typeof cc.hE==='string'?cc.hE:hide_element},getVersion:function(){return version},finish:function(e){if(!f){f=true;var t=d.getElementById('_vis_opt_path_hides');if(t)t.parentNode.removeChild(t);if(e)(new Image).src='https://dev.visualwebsiteoptimizer.com/ee.gif?a='+account_id+e}},finished:function(){return f},addScript:function(e){var t=d.createElement('script');t.type='text/javascript';if(e.src){t.src=e.src}else{t.text=e.text}d.getElementsByTagName('head')[0].appendChild(t)},load:function(e,t){var i=this.getSettings(),n=d.createElement('script'),r=this;t=t||{};if(i){n.textContent=i;d.getElementsByTagName('head')[0].appendChild(n);if(!w.VWO||VWO.caE){stT.removeItem(cK);r.load(e)}}else{var o=new XMLHttpRequest;o.open('GET',e,true);o.withCredentials=!t.dSC;o.responseType=t.responseType||'text';o.onload=function(){if(t.onloadCb){return t.onloadCb(o,e)}if(o.status===200){_vwo_code.addScript({text:o.responseText})}else{_vwo_code.finish('&e=loading_failure:'+e)}};o.onerror=function(){if(t.onerrorCb){return t.onerrorCb(e)}_vwo_code.finish('&e=loading_failure:'+e)};o.send()}},getSettings:function(){try{var e=stT.getItem(cK);if(!e){return}e=JSON.parse(e);if(Date.now()>e.e){stT.removeItem(cK);return}return e.s}catch(e){return}},init:function(){if(d.URL.indexOf('__vwo_disable__')>-1)return;var e=this.settings_tolerance();w._vwo_settings_timer=setTimeout(function(){_vwo_code.finish();stT.removeItem(cK)},e);var t;if(this.hide_element()!=='body'){t=d.createElement('style');var i=this.hide_element(),n=i?i+this.hide_element_style():'',r=d.getElementsByTagName('head')[0];t.setAttribute('id','_vis_opt_path_hides');v&&t.setAttribute('nonce',v.nonce);t.setAttribute('type','text/css');if(t.styleSheet)t.styleSheet.cssText=n;else t.appendChild(d.createTextNode(n));r.appendChild(t)}else{t=d.getElementsByTagName('head')[0];var n=d.createElement('div');n.style.cssText='z-index: 2147483647 !important;position: fixed !important;left: 0 !important;top: 0 !important;width: 100% !important;height: 100% !important;background: white !important;';n.setAttribute('id','_vis_opt_path_hides');n.classList.add('_vis_hide_layer');t.parentNode.insertBefore(n,t.nextSibling)}var o='https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&vn='+version;if(w.location.search.indexOf('_vwo_xhr')!==-1){this.addScript({src:o})}else{this.load(o+'&x=true')}}};w._vwo_code=code;code.init();})();
+</script>
+<!-- End VWO Async SmartCode -->`
+        : ''
+
+      return html.replace('<vwo-script />', vwoScript)
+    },
+  },
+}

packages/atlas/src/.env

@@ -17,6 +17,7 @@ VITE_ASSET_LOGS_URL=
 VITE_GEOLOCATION_SERVICE_URL=https://geolocation.joystream.org
 VITE_HCAPTCHA_SITE_KEY=41cae189-7676-4f6b-aa56-635be26d3ceb
 VITE_CHANGENOW_PUBLIC_API_KEY=0d8a58104f82b860a70e9460bccf62ae1e0fca4a93fd7e0c27c90448187b988f
+VITE_WALLET_CONNECT_PROJECT_ID=33b2609463e399daee8c51726546c8dd
 
 # YPP configuration
 VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com
@@ -29,6 +30,7 @@ VITE_SEGMENT_ID=
 VITE_SENTRY_DSN=
 VITE_OPTIMIZE_ID=
 VITE_USERSNAP_ID=
+VITE_VWO_ACCOUNT_ID=
 
 # Production env URLs
 VITE_PRODUCTION_ORION_AUTH_URL=https://auth.gleev.xyz/api/v1
@@ -54,6 +56,7 @@ VITE_NEXT_NODE_URL=wss://3.73.121.180.nip.io/ws-rpc
 VITE_NEXT_FAUCET_URL=https://3.73.121.180.nip.io/member-faucet/register
 VITE_NEXT_YPP_FAUCET_URL=wss://3.73.121.180.nip.io/ws-rpc
 
+
 # Local development env URLs
 VITE_LOCAL_ORION_AUTH_URL=http://localhost:4074/api/v1
 VITE_LOCAL_ORION_URL=http://localhost:4350/graphql

packages/atlas/src/assets/icons/WcLogo.tsx

@@ -0,0 +1,14 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgWcLogo = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg fill="none" height={24} viewBox="0 0 480 332" width={24} xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <path
+      d="M126.613 93.984c62.622-61.312 164.152-61.312 226.775 0l7.536 7.379a7.735 7.735 0 0 1 0 11.102l-25.781 25.242a4.07 4.07 0 0 1-5.67 0l-10.371-10.154c-43.687-42.773-114.517-42.773-158.204 0l-11.107 10.874a4.069 4.069 0 0 1-5.669 0l-25.781-25.242a7.733 7.733 0 0 1 0-11.102zm280.093 52.204 22.946 22.465a7.735 7.735 0 0 1 0 11.102L326.189 281.056c-3.131 3.065-8.208 3.065-11.339 0l-73.432-71.896a2.034 2.034 0 0 0-2.835 0l-73.43 71.896c-3.131 3.065-8.208 3.065-11.339 0L50.348 179.754a7.735 7.735 0 0 1 0-11.102l22.946-22.466c3.131-3.065 8.208-3.065 11.339 0l73.433 71.897a2.033 2.033 0 0 0 2.834 0l73.429-71.897c3.131-3.065 8.208-3.065 11.339 0l73.433 71.897a2.034 2.034 0 0 0 2.835 0l73.431-71.895c3.132-3.066 8.208-3.066 11.339 0z"
+      fill="#3396ff"
+    />
+  </svg>
+))
+SvgWcLogo.displayName = 'SvgWcLogo'
+const Memo = memo(SvgWcLogo)
+export { Memo as SvgWcLogo }

packages/atlas/src/assets/icons/index.ts

@@ -1,4 +1,5 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY
+export * from './WcLogo'
 export * from './ActionAddChannel'
 export * from './ActionAddImage'
 export * from './ActionAddVideo'

packages/atlas/src/components/CrtPreviewLayout/CrtPreviewLayout.tsx

@@ -38,39 +38,42 @@ type CrtPreviewViewProps = {
 }
 
 export const getTokenDetails = (token: FullCreatorTokenFragment, cumulativeRevenue?: string) => {
-  const details = []
-  if (cumulativeRevenue)
-    details.push({
-      caption: 'TOTAL REV.',
-      content: new BN(cumulativeRevenue),
-      icon: <JoyTokenIcon size={16} variant="silver" />,
-      tooltipText: 'Total cumulative revenue of this channel on Joystream to date.',
-      withDenomination: true,
-    })
-
-  if (token.revenueShareRatioPermill)
-    details.push({
+  const details: {
+    caption: string
+    content: string | BN | number
+    tooltipText: string
+    withToken?: boolean
+    withDenomination?: boolean
+    customTicker?: string
+    icon?: ReactElement
+  }[] = [
+    {
       caption: 'REV. SHARE',
       content: `${permillToPercentage(token.revenueShareRatioPermill)}%`,
       tooltipText: `Percentage of the future revenue that channel shares with token holders. Each token holder can claim amount of revenue proportionate to their ownership of the channel tokens supply.`,
-    })
-
-  if (token.annualCreatorRewardPermill)
-    details.push({
+    },
+    {
       caption: 'INFLATION',
       content: `${permillToPercentage(token.annualCreatorRewardPermill)}%`,
       tooltipText:
         'This percentage of the token supply gets minted every year and paid to creator for channel management.',
-    })
-
-  if (token.totalSupply)
-    details.push({
+    },
+    {
       caption: 'TOTAL SUPPLY',
       content: +token.totalSupply,
       tooltipText: `Total amount of tokens owned by all holders.`,
-      withToken: true,
-      customTicker: `$${token.symbol}`,
+    },
+  ]
+
+  if (cumulativeRevenue)
+    details.push({
+      caption: 'TOTAL REV.',
+      content: new BN(cumulativeRevenue),
+      icon: <JoyTokenIcon size={16} variant="silver" />,
+      tooltipText: 'Total cumulative revenue of this channel on Joystream to date.',
+      withDenomination: true,
     })
+
   return details
 }
 

packages/atlas/src/components/TablePagination/TablePagination.tsx

@@ -31,7 +31,7 @@ const PER_PAGE_ITEMS: SelectItem[] = [
 ]
 
 export type TablePaginationProps = {
-  setPerPage: (perPage: number) => void
+  setPerPage?: (perPage: number) => void
   onChangePage: (page: number) => void
   className?: string
   itemsPerPage: number
@@ -61,7 +61,7 @@ export const TablePagination: FC<TablePaginationProps> = ({
   const handlePerPageChange = useCallback(
     (value?: string | null) => {
       if (value) {
-        setPerPage(+value)
+        setPerPage?.(+value)
         onChangePage(0)
       }
     },
@@ -70,29 +70,31 @@ export const TablePagination: FC<TablePaginationProps> = ({
 
   return (
     <Container className={className}>
-      <HorizontalContainer>
-        <div>
-          <Select
-            icon={
-              <Text as="p" variant={smMatch ? 't200' : 't100'} color="colorText">
-                {smMatch ? 'Rows per page:' : 'Rows:'}
-              </Text>
-            }
-            value={String(itemsPerPage)}
-            onChange={handlePerPageChange}
-            items={PER_PAGE_ITEMS}
-          />
-        </div>
-        <PageInfo as="p" variant={smMatch ? 't200' : 't100'} color="colorTextStrong">
-          {!totalCount
-            ? 0
-            : `${1 + itemsPerPage * page}-${Math.min(
-                itemsPerPage + itemsPerPage * page,
-                totalCount
-              )} of ${totalCount}`}{' '}
-          items
-        </PageInfo>
-      </HorizontalContainer>
+      {setPerPage ? (
+        <HorizontalContainer>
+          <div>
+            <Select
+              icon={
+                <Text as="p" variant={smMatch ? 't200' : 't100'} color="colorText">
+                  {smMatch ? 'Rows per page:' : 'Rows:'}
+                </Text>
+              }
+              value={String(itemsPerPage)}
+              onChange={handlePerPageChange}
+              items={PER_PAGE_ITEMS}
+            />
+          </div>
+          <PageInfo as="p" variant={smMatch ? 't200' : 't100'} color="colorTextStrong">
+            {!totalCount
+              ? 0
+              : `${1 + itemsPerPage * page}-${Math.min(
+                  itemsPerPage + itemsPerPage * page,
+                  totalCount
+                )} of ${totalCount}`}{' '}
+            items
+          </PageInfo>
+        </HorizontalContainer>
+      ) : null}
 
       <HorizontalContainer>
         <FlexBox gap={4} width="auto" alignItems="center">

packages/atlas/src/components/TopEarningChannels/TopEarningChannels.tsx

@@ -38,7 +38,7 @@ const COLUMNS: TableProps['columns'] = [
     width: 9,
   },
   {
-    Header: () => <RightAlignedHeader>SALES VOLUME</RightAlignedHeader>,
+    Header: () => <RightAlignedHeader>REVENUE VOLUME</RightAlignedHeader>,
     accessor: 'salesVolume',
     width: 4,
   },

packages/atlas/src/components/WidgetTile/WidgetTile.styles.ts

@@ -13,9 +13,9 @@ export const Wrapper = styled.div`
   padding: ${sizes(4)};
   background-color: ${cVar('colorBackgroundMuted')};
   display: grid;
+  grid-template-rows: auto 1fr;
 
   ${media.md} {
-    grid-template-rows: auto 1fr;
     padding: ${sizes(6)};
   }
 `