Merge branch 'crt' into fix/qa-v1

# Conflicts:
#	packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx
#	packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx

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

@@ -514,6 +514,7 @@ fragment BasicCreatorToken on CreatorToken {
 fragment FullCreatorToken on CreatorToken {
   ...BasicCreatorToken
   annualCreatorRewardPermill
+  revenueShareRatioPermill
   description
   revenueShareRatioPermill
   ammCurves {

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

@@ -0,0 +1,16 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgActionShieldLock = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.733 2.948C3.31 3 2.873 3 2 3v3.675c0 .534 0 .801.015 1.043a8 8 0 0 0 5.001 6.939c.225.09.478.174.984.343.506-.169.76-.253.984-.343a8 8 0 0 0 5.001-6.94C14 7.477 14 7.21 14 6.676V3c-.872 0-1.309 0-1.733-.052a7 7 0 0 1-2.292-.694c-.382-.192-.745-.434-1.471-.918L8 1l-.504.336c-.726.484-1.089.726-1.471.918a7 7 0 0 1-2.292.694ZM10 6a2 2 0 0 1-1 1.732V12H7V7.732A2 2 0 1 1 10 6Z"
+      fill="#fff"
+    />
+  </svg>
+))
+SvgActionShieldLock.displayName = 'SvgActionShieldLock'
+const Memo = memo(SvgActionShieldLock)
+export { Memo as SvgActionShieldLock }

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

@@ -87,6 +87,7 @@ export * from './ActionSell'
 export * from './ActionSeparator'
 export * from './ActionSettings'
 export * from './ActionShare'
+export * from './ActionShieldLock'
 export * from './ActionShoppingCart'
 export * from './ActionShow'
 export * from './ActionSoundOff'

packages/atlas/src/assets/illustrations/BenefitCardPatternSm1.tsx

@@ -19,9 +19,9 @@ const SvgBenefitCardPatternSm1 = forwardRef((props: SVGProps<SVGSVGElement>, ref
       fillOpacity={0.2}
     />
     <g clipPath="url(#clip0_1505_4274)" fill="#BCD5FA" fillOpacity={0.08}>
-      <path d="M54 215.98v-6.002c26.146-.778 47.2-21.832 47.978-47.978h6.002c-.782 29.46-24.52 53.198-53.98 53.98Z" />
-      <path d="M95.975 162C95.2 184.832 76.832 203.201 54 203.975v-6.004c19.518-.768 35.203-16.453 35.97-35.971h6.005Z" />
-      <path d="M84 162c0 16.569-13.431 30-30 30v-6c13.255 0 24-10.745 24-24h6Z" />
+      <path d="M54 215.98v-6.002c26.146-.779 47.2-21.832 47.978-47.978h6.002c-.782 29.46-24.52 53.198-53.98 53.98Z" />
+      <path d="M95.975 162C95.2 184.832 76.832 203.201 54 203.974v-6.004c19.518-.767 35.203-16.452 35.97-35.97h6.005Z" />
+      <path d="M84 162c0 16.568-13.431 30-30 30v-6c13.255 0 24-10.745 24-24h6Z" />
       <path d="M72 162c0 9.941-8.059 18-18 18v-6c6.627 0 12-5.373 12-12h6ZM60 162a6 6 0 0 1-6 6v-6h6Z" />
     </g>
     <g clipPath="url(#clip1_1505_4274)">
@@ -55,8 +55,8 @@ const SvgBenefitCardPatternSm1 = forwardRef((props: SVGProps<SVGSVGElement>, ref
       <path d="M54 54.02c29.46.781 53.199 24.52 53.98 53.98H54V54.02Z" fill="#BCD5FA" fillOpacity={0.08} />
     </g>
     <g clipPath="url(#clip3_1505_4274)" fill="#BCD5FA" fillOpacity={0.08}>
-      <path d="M162 .02v6.002C135.854 6.8 114.8 27.854 114.022 54h-6.002C108.802 24.54 132.54.802 162 .02Z" />
-      <path d="M120.025 54c.774-22.832 19.143-41.2 41.975-41.975v6.004c-19.518.768-35.203 16.453-35.971 35.971h-6.004Z" />
+      <path d="M162 .02v6.002C135.854 6.8 114.8 27.854 114.022 54h-6.002C108.802 24.54 132.54.8 162 .02Z" />
+      <path d="M120.025 54c.774-22.832 19.143-41.201 41.975-41.975v6.004c-19.518.768-35.203 16.453-35.971 35.97h-6.004Z" />
       <path d="M132 54c0-16.569 13.431-30 30-30v6c-13.255 0-24 10.745-24 24h-6Z" />
       <path d="M144 54c0-9.941 8.059-18 18-18v6c-6.627 0-12 5.373-12 12h-6ZM156 54a6 6 0 0 1 6-6v6h-6Z" />
     </g>

packages/atlas/src/assets/illustrations/BenefitCardPatternSm3.tsx

@@ -12,9 +12,9 @@ const SvgBenefitCardPatternSm3 = forwardRef((props: SVGProps<SVGSVGElement>, ref
     {...props}
   >
     <g clipPath="url(#clip0_1505_4346)" fill="#C2E0FF" fillOpacity={0.2}>
-      <path d="M216 215.98v-6.002c-26.146-.778-47.2-21.832-47.978-47.978h-6.002c.782 29.46 24.52 53.198 53.98 53.98Z" />
-      <path d="M174.025 162c.774 22.832 19.143 41.201 41.975 41.975v-6.004c-19.518-.768-35.203-16.453-35.971-35.971h-6.004Z" />
-      <path d="M186 162c0 16.569 13.431 30 30 30v-6c-13.255 0-24-10.745-24-24h-6Z" />
+      <path d="M216 215.98v-6.002c-26.146-.779-47.2-21.832-47.978-47.978h-6.002c.782 29.46 24.52 53.198 53.98 53.98Z" />
+      <path d="M174.025 162c.774 22.832 19.143 41.201 41.975 41.974v-6.004c-19.518-.767-35.203-16.452-35.971-35.97h-6.004Z" />
+      <path d="M186 162c0 16.568 13.431 30 30 30v-6c-13.255 0-24-10.745-24-24h-6Z" />
       <path d="M198 162c0 9.941 8.059 18 18 18v-6c-6.627 0-12-5.373-12-12h-6ZM210 162a6 6 0 0 0 6 6v-6h-6Z" />
     </g>
     <g clipPath="url(#clip1_1505_4346)" fill="#BCD5FA" fillOpacity={0.08}>
@@ -55,9 +55,9 @@ const SvgBenefitCardPatternSm3 = forwardRef((props: SVGProps<SVGSVGElement>, ref
       <path d="M108 6h54V0h-54v6ZM108 54h54v-6h-54v6ZM162 42h-54v-6h54v6ZM108 18h54v-6h-54v6ZM162 30h-54v-6h54v6Z" />
     </g>
     <g clipPath="url(#clip3_1505_4346)" fill="#C2E0FF" fillOpacity={0.2}>
-      <path d="M0 .02v6.002C26.146 6.8 47.2 27.854 47.978 54h6.002C53.198 24.54 29.46.802 0 .02Z" />
-      <path d="M41.975 54C41.2 31.168 22.832 12.8 0 12.025v6.004C19.518 18.797 35.203 34.483 35.97 54h6.005Z" />
-      <path d="M30 54c0-16.569-13.431-30-30-30v6c13.255 0 24 10.745 24 24h6Z" />
+      <path d="M0 .02v6.002C26.146 6.801 47.2 27.854 47.978 54h6.002C53.198 24.54 29.46.802 0 .02Z" />
+      <path d="M41.975 54C41.2 31.168 22.832 12.8 0 12.026v6.004c19.518.767 35.203 16.452 35.97 35.97h6.005Z" />
+      <path d="M30 54c0-16.568-13.431-30-30-30v6c13.255 0 24 10.745 24 24h6Z" />
       <path d="M18 54c0-9.941-8.059-18-18-18v6c6.627 0 12 5.373 12 12h6ZM6 54a6 6 0 0 0-6-6v6h6Z" />
     </g>
     <defs>

packages/atlas/src/assets/illustrations/RevenueSharePlaceholder.tsx

@@ -0,0 +1,22 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgRevenueSharePlaceholder = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={256} height={96} viewBox="0 0 256 96" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <path fill="#424E57" d="M8 8h43v8H8zM8 18h34v4H8zM85.667 13h33v4h-33z" />
+    <circle cx={75.667} cy={15} r={6} fill="#424E57" />
+    <path fill="#424E57" d="M153.333 13h33v4h-33zM205 8h43v8h-43zM214 18h34v4h-34z" />
+    <path fill="#343D44" d="M8 30h43v8H8zM8 40h34v4H8zM85.667 35h33v4h-33z" />
+    <circle cx={75.667} cy={37} r={6} fill="#343D44" />
+    <path fill="#343D44" d="M153.333 35h33v4h-33zM205 30h43v8h-43zM214 40h34v4h-34z" />
+    <path fill="#272D33" d="M8 52h43v8H8zM8 62h34v4H8zM85.667 57h33v4h-33z" />
+    <circle cx={75.667} cy={59} r={6} fill="#272D33" />
+    <path fill="#272D33" d="M153.333 57h33v4h-33zM205 52h43v8h-43zM214 62h34v4h-34z" />
+    <path fill="#181C20" d="M8 74h43v8H8zM8 84h34v4H8zM85.667 79h33v4h-33z" />
+    <circle cx={75.667} cy={81} r={6} fill="#181C20" />
+    <path fill="#181C20" d="M153.333 79h33v4h-33zM205 74h43v8h-43zM214 84h34v4h-34z" />
+  </svg>
+))
+SvgRevenueSharePlaceholder.displayName = 'SvgRevenueSharePlaceholder'
+const Memo = memo(SvgRevenueSharePlaceholder)
+export { Memo as SvgRevenueSharePlaceholder }

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

@@ -21,6 +21,7 @@ export * from './OtherThumbsUpIllustrationSvg'
 export * from './OtherVideoTile'
 export * from './PatternAngledLines'
 export * from './PatternCircleLines'
+export * from './RevenueSharePlaceholder'
 export * from './SigninIllustration'
 export * from './SmallCursor'
 export * from './SmallMoneroModified'

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

@@ -37,26 +37,41 @@ type CrtPreviewViewProps = {
 
 export const getTokenDetails = (token: FullCreatorTokenFragment) => {
   const details = []
+  // todo: after resolver is done on orion, redo total rev
   if (token.totalSupply)
     details.push({
       caption: 'TOTAL REV.',
       content: +token.totalSupply,
       icon: <JoyTokenIcon size={16} variant="silver" />,
-      tooltipText: 'Lorem ipsum',
+      tooltipText:
+        'This is the total amount of revenue that the channel made from the time it was created. This information can be useful to determine if the creator had high or low income from their content in the past.',
+      withDenomination: true,
     })
 
   if (token.revenueShareRatioPermill)
     details.push({
       caption: 'REV. SHARE',
       content: `${permillToPercentage(token.revenueShareRatioPermill)}%`,
-      tooltipText: 'Lorem ipsum',
+      tooltipText: `This is a percentage of revenue that creator claims after each revenue share - Channel: ${permillToPercentage(
+        token.revenueShareRatioPermill
+      )}%, Holders: ${100 - permillToPercentage(token.revenueShareRatioPermill)}%.`,
     })
 
   if (token.annualCreatorRewardPermill)
     details.push({
       caption: 'AN. REWARD',
       content: `${permillToPercentage(token.annualCreatorRewardPermill)}%`,
-      tooltipText: 'Lorem ipsum',
+      tooltipText:
+        'This is how much creator will be earning annually from their tokens in % terms from the total supply.',
+    })
+
+  if (token.totalSupply)
+    details.push({
+      caption: 'TOTAL SUPPLY',
+      content: +token.totalSupply,
+      tooltipText: `This is a total supply of all $${token.symbol} tokens owned by token holders. `,
+      withToken: true,
+      customTicker: `$${token.symbol}`,
     })
   return details
 }
@@ -130,7 +145,15 @@ export const CrtPreviewLayout = ({
       </HeaderContainer>
       <FirstColumn>{tokenDetails}</FirstColumn>
       <SecondColumn>
-        <CrtBasicInfoWidget details={basicDetails} name={token.symbol ?? 'N/A'} />
+        <CrtBasicInfoWidget
+          details={basicDetails}
+          name={token.symbol ?? 'N/A'}
+          symbol={token.symbol ?? 'N/A'}
+          avatar={token?.channel?.channel.avatarPhoto?.resolvedUrls?.[0]}
+          accountsNum={token?.accountsNum}
+          size={lgMatch ? 'large' : 'small'}
+          description={token?.description ?? ''}
+        />
         {/* todo all props below creationDate are incorrect and should be calucated on orion side */}
         <CrtStatusWidget token={token} />
         {data ? (

packages/atlas/src/components/FlexBox/FlexBox.ts

@@ -10,6 +10,7 @@ type FlexBoxProps = {
   justifyContent?: string
   equalChildren?: boolean
   width?: string | number
+  height?: string | number
 }
 
 export const FlexBox = styled.div<FlexBoxProps>`
@@ -20,6 +21,7 @@ export const FlexBox = styled.div<FlexBoxProps>`
     align-items: ${props.alignItems ?? 'start'};
     justify-content: ${props.justifyContent ?? 'start'};
     width: ${props.width ?? '100%'};
+    height: ${props.height ?? 'initial'};
   `}
 
   ${(props) =>

packages/atlas/src/components/Table/Table.cells.tsx

@@ -55,15 +55,17 @@ export const LoadingChannelCell = ({ channelId }: { channelId: string }) => {
 export const MemberCell = ({
   member,
   additionalNode,
+  flow = 'row',
 }: {
   member?: BasicMembershipFieldsFragment
   additionalNode?: ReactNode
+  flow?: 'row' | 'column'
 }) => {
   const { urls } = getMemberAvatar(member)
   return (
     <FlexBox alignItems="center" gap={2}>
       <Avatar assetUrls={urls} />
-      <HandleContainer flow="row" justifyContent="start" gap={2}>
+      <HandleContainer flow={flow} justifyContent="start" gap={flow === 'row' ? 2 : 0}>
         <Text variant="t200-strong" as="p" color="colorText" truncate>
           {member?.handle ?? 'Unknown'}
         </Text>
@@ -73,7 +75,15 @@ export const MemberCell = ({
   )
 }
 
-export const LoadingMemberRow = ({ memberId, additionalNode }: { memberId: string; additionalNode?: ReactNode }) => {
+export const LoadingMemberRow = ({
+  memberId,
+  additionalNode,
+  flow,
+}: {
+  memberId: string
+  additionalNode?: ReactNode
+  flow?: 'row' | 'column'
+}) => {
   const { loading, memberships } = useMemberships({
     where: {
       id_eq: memberId,
@@ -91,7 +101,7 @@ export const LoadingMemberRow = ({ memberId, additionalNode }: { memberId: strin
 
   const member = memberships?.[0]
 
-  return <MemberCell member={member} additionalNode={additionalNode} />
+  return <MemberCell member={member} additionalNode={additionalNode} flow={flow} />
 }
 
 const HandleContainer = styled(FlexBox)`

packages/atlas/src/components/Table/Table.tsx

@@ -19,6 +19,7 @@ import {
 
 export type TableProps<T = object> = {
   columns: Column[]
+  onRowClick?: (rowIdx: number) => void
   data: T[]
   title?: string
   pageSize?: number
@@ -38,6 +39,7 @@ export const Table = <T extends object>({
   pageSize = 20,
   emptyState,
   doubleColumn,
+  onRowClick,
   className,
 }: TableProps<T>) => {
   const {
@@ -93,10 +95,15 @@ export const Table = <T extends object>({
                 ))}
               </Thead>
               <tbody {...getTableBodyProps()}>
-                {subpage.map((row) => {
+                {subpage.map((row, idx) => {
                   prepareRow(row)
                   return (
-                    <tr className="table-row" {...row.getRowProps()} key={row.getRowProps().key}>
+                    <tr
+                      className="table-row"
+                      {...row.getRowProps()}
+                      onClick={() => onRowClick?.(idx)}
+                      key={row.getRowProps().key}
+                    >
                       {row.cells.map((cell) => (
                         <Td
                           variant="t100"

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

@@ -23,6 +23,7 @@ export const Content = styled.div<{ withButton?: boolean }>`
   display: grid;
   align-self: flex-end;
   gap: ${sizes(4)};
+  height: 100%;
 
   ${media.md} {
     gap: ${sizes(6)};