Merge pull request #2211 from santiment/enhance/signals/pro

enhance/signals/pro

src/components/Illustrations/Crown.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const Icon = ({ className }) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 24 24'
+    className={className}
+    fill='none'
+  >
+    <rect width='24' height='24' fill='var(--texas-rose-light)' rx='12' />
+    <path
+      fill='var(--texas-rose)'
+      d='M16.5 9.41c0-.51-.6-.77-.96-.4l-1.29 1.33-1.85-1.92a.55.55 0 00-.8 0l-1.85 1.92L8.46 9c-.35-.36-.96-.1-.96.42v5c0 .32.25.58.56.58h7.88c.3 0 .56-.26.56-.58v-5z'
+    />
+  </svg>
+)
+
+export default Icon

src/pages/Index/Section/KeystackeholdersEvents/KeystackeholdersEvents.js

@@ -1,12 +1,14 @@
-import React, { useState, useMemo, useEffect } from 'react'
+import React, { useState, useMemo, useEffect, Fragment } from 'react'
 import { HashLink } from 'react-router-hash-link'
 import {
   TEMPORARY_HIDDEN_LABELS,
   useGroupedBySlugs,
   useRawSignals
 } from './hooks'
 import Accordion from '../../Accordion'
-import StackholderTitle from './StackholderTitle/StackholderTitle'
+import StackholderTitle, {
+  StakeholderProBanner
+} from './StackholderTitle/StackholderTitle'
 import Range from '../../../../ducks/Watchlists/Widgets/WatchlistOverview/WatchlistAnomalies/Range'
 import Skeleton from '../../../../components/Skeleton/Skeleton'
 import { KEYSTACKHOLDERS_ANCHOR } from '../Personal'
@@ -42,22 +44,25 @@ const KeystackeholdersEvents = () => {
   const { data: signals, loading } = useRawSignals(settings)
   const [hiddenLabels, setHiddenLabels] = useState(TEMPORARY_HIDDEN_LABELS)
 
-  const { slugs, projects, visibleSlugs, groups, labels } = useGroupedBySlugs(
-    signals,
-    hiddenLabels,
-    selectedAssets
-  )
+  const {
+    slugs,
+    projects,
+    visibleSlugs,
+    groups,
+    labels,
+    restrictedSignals
+  } = useGroupedBySlugs(signals, hiddenLabels, selectedAssets)
 
   const signalsCount = useMemo(
-    () => {
-      return Object.values(groups).reduce(
-        (acc, { list }) => acc + list.length,
-        0
-      )
-    },
+    () => Object.values(groups).reduce((acc, { list }) => acc + list.length, 0),
     [groups]
   )
 
+  const visibleRestrictedSignals = useMemo(
+    () => restrictedSignals.filter(signal => !hiddenLabels[signal]),
+    [restrictedSignals, hiddenLabels]
+  )
+
   useEffect(
     () => {
       setSelectedAssets(
@@ -70,6 +75,8 @@ const KeystackeholdersEvents = () => {
     [signals]
   )
 
+  const proBannerIdx = visibleSlugs.length > 3 ? 2 : visibleSlugs.length - 1
+
   return (
     <div className={styles.container}>
       <div className={styles.title}>
@@ -114,6 +121,7 @@ const KeystackeholdersEvents = () => {
           labels={labels}
           hidden={hiddenLabels}
           setHidden={setHiddenLabels}
+          restrictedSignals={restrictedSignals}
         />
       )}
 
@@ -133,32 +141,41 @@ const KeystackeholdersEvents = () => {
       )}
       {!loading && visibleSlugs.length > 0 && (
         <div className={styles.accordions}>
-          {visibleSlugs.map((s, index) => {
-            const { types, list } = groups[s]
+          {visibleSlugs.length === 0 && visibleRestrictedSignals.length > 0 && (
+            <StakeholderProBanner signals={visibleRestrictedSignals} />
+          )}
+          {visibleSlugs.map((slug, index) => {
+            const { types, list } = groups[slug]
+
             return (
-              <Accordion
-                key={s}
-                title={
-                  <StackholderTitle
-                    project={projects[s]}
-                    slug={s}
-                    count={list.length}
-                    labels={types}
-                  />
-                }
-                isOpenedDefault={index === 0}
-                classes={styles}
-              >
-                <div className={styles.list}>
-                  {list.map(item => (
-                    <StakeholderSignal
-                      key={`${item.datetime}_${item.slug}_${item.signal}`}
-                      data={item}
-                      settings={settings}
+              <Fragment key={slug}>
+                {index === proBannerIdx &&
+                  visibleRestrictedSignals.length > 0 && (
+                  <StakeholderProBanner signals={visibleRestrictedSignals} />
+                )}
+                <Accordion
+                  title={
+                    <StackholderTitle
+                      slug={slug}
+                      labels={types}
+                      count={list.length}
+                      project={projects[slug]}
                     />
-                  ))}
-                </div>
-              </Accordion>
+                  }
+                  isOpenedDefault={index === 0}
+                  classes={styles}
+                >
+                  <div className={styles.list}>
+                    {list.map(item => (
+                      <StakeholderSignal
+                        key={`${item.datetime}_${item.slug}_${item.signal}`}
+                        data={item}
+                        settings={settings}
+                      />
+                    ))}
+                  </div>
+                </Accordion>
+              </Fragment>
             )
           })}
         </div>

src/pages/Index/Section/KeystackeholdersEvents/StackholderTitle/Labels.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { READABLE_NAMES } from '../hooks'
+import styles from './Labels.module.scss'
+
+const CardLabels = ({ labels }) => (
+  <div className={styles.labels}>
+    {labels.map(label => (
+      <div key={label} className={styles.label}>
+        {READABLE_NAMES[label] || label}
+      </div>
+    ))}
+  </div>
+)
+
+export default CardLabels

src/pages/Index/Section/KeystackeholdersEvents/StackholderTitle/Labels.module.scss

@@ -0,0 +1,19 @@
+@import '~@santiment-network/ui/mixins';
+
+.labels {
+  display: flex;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.label {
+  @include text('caption');
+
+  color: var(--rhino);
+  padding: 4px 8px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  border-radius: $border-radius;
+  border: 1px solid var(--porcelain);
+  background-color: var(--white);
+}

src/pages/Index/Section/KeystackeholdersEvents/StackholderTitle/StackholderTitle.js

@@ -1,19 +1,48 @@
 import React from 'react'
-import { ProjectIcon } from '../../../../../components/ProjectIcon/ProjectIcon'
+import cx from 'classnames'
+import { Link } from 'react-router-dom'
+import Button from '@santiment-network/ui/Button'
+import Labels from './Labels'
 import { useProject } from '../../../../../hooks/project'
-import { READABLE_NAMES } from '../hooks'
 import Skeleton from '../../../../../components/Skeleton/Skeleton'
+import { ProjectIcon } from '../../../../../components/ProjectIcon/ProjectIcon'
+import Crown from '../../../../../components/Illustrations/Crown'
 import styles from './StackholderTitle.module.scss'
 
+const OBJ = {}
+
+const getUniqueLabels = labels => [...new Set(labels)]
+
 function onLinkClick (e) {
   e.stopPropagation()
 }
 
+export const StakeholderProBanner = ({ signals }) => {
+  const uniqueLabels = getUniqueLabels(signals)
+
+  return (
+    <Link to='/pricing' className={styles.containerPro} target='_blank'>
+      <span className={styles.info}>
+        <Crown className={styles.imgPro} />
+        <div className={styles.name}>
+          PRO signals
+          <div className={cx(styles.count, styles.countPro)}>
+            {signals.length}
+          </div>
+        </div>
+      </span>
+      <Button className={styles.upgrade} accent='orange' variant='fill'>
+        Upgrade
+      </Button>
+      <Labels labels={uniqueLabels} />
+    </Link>
+  )
+}
+
 const StackholderTitle = ({ project: targetProject, count, slug, labels }) => {
-  const uniqueLabels = [...new Set(labels)]
+  const uniqueLabels = getUniqueLabels(labels)
   const [project = targetProject, loading] = useProject(!targetProject && slug)
-
-  const { logoUrl, name, ticker } = project || {}
+  const { logoUrl, name, ticker } = project || OBJ
 
   return (
     <div className={styles.container}>
@@ -27,33 +56,22 @@ const StackholderTitle = ({ project: targetProject, count, slug, labels }) => {
         {!loading && (
           <>
             <ProjectIcon slug={slug} size={20} logoUrl={logoUrl} />
-
             <div className={styles.name}>{name}</div>
-
             <div className={styles.ticker}>
-              {ticker}
-              <div className={styles.count}>{count}</div>
+              {ticker} <div className={styles.count}>{count}</div>
             </div>
           </>
         )}
 
-        {loading && (
-          <Skeleton
-            repeat={1}
-            show={loading}
-            className={styles.skeleton}
-            wrapperClassName={styles.skeletonWrapper}
-          />
-        )}
+        <Skeleton
+          repeat={1}
+          show={loading}
+          className={styles.skeleton}
+          wrapperClassName={styles.skeletonWrapper}
+        />
       </a>
 
-      <div className={styles.labels}>
-        {uniqueLabels.map(l => (
-          <div key={l} className={styles.label}>
-            {READABLE_NAMES[l] || l}
-          </div>
-        ))}
-      </div>
+      <Labels labels={uniqueLabels} />
     </div>
   )
 }