add funding rates + kyberscore delta

KyberNetwork · Sep 29, 2023 · 5ee3fb6 · 5ee3fb6
1 parent 045a496
commit 5ee3fb6
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 48 deletions.
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -1,3 +1,4 @@
+import { AnimatePresence, motion } from 'framer-motion'
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
@@ -16,9 +17,13 @@ const SelectWrapper = styled.div`
   font-size: 12px;
   color: ${({ theme }) => theme.subText};
   padding: 12px;
+  :hover {
+    filter: brightness(1.2);
+    z-index: 10;
+  }
 `
 
-const SelectMenu = styled.div`
+const SelectMenu = styled(motion.div)`
   position: absolute;
   top: 40px;
   left: 0;
@@ -124,34 +129,43 @@ function Select({
     >
       <SelectedWrap>{activeRender ? activeRender(selectedInfo) : getOptionLabel(selectedInfo)}</SelectedWrap>
       <DropdownArrowIcon rotate={showMenu} color={arrowColor} />
-      {showMenu && (
-        <SelectMenu style={{ ...menuStyle, ...(menuPlacementTop ? { bottom: 40, top: 'unset' } : {}) }} ref={refMenu}>
-          {options.map(item => {
-            const value = getOptionValue(item)
-            const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
-              e.stopPropagation()
-              e.preventDefault()
-              setShowMenu(prev => !prev)
-              if (item.onSelect) item.onSelect?.()
-              else {
-                setSelected(value)
-                onChange(value)
+      <AnimatePresence>
+        {showMenu && (
+          <SelectMenu
+            initial={{ y: -10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -10, opacity: 0 }}
+            transition={{ duration: 0.1 }}
+            style={{ ...menuStyle, ...(menuPlacementTop ? { bottom: 40, top: 'unset' } : {}) }}
+            ref={refMenu}
+          >
+            {options.map(item => {
+              const value = getOptionValue(item)
+              const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
+                e.stopPropagation()
+                e.preventDefault()
+                setShowMenu(prev => !prev)
+                if (item.onSelect) item.onSelect?.()
+                else {
+                  setSelected(value)
+                  onChange(value)
+                }
               }
-            }
-            return (
-              <Option
-                key={value}
-                role="button"
-                $selected={value === selectedValue || value === getOptionValue(selectedInfo)}
-                onClick={onClick}
-                style={optionStyle}
-              >
-                {optionRender ? optionRender(item) : getOptionLabel(item)}
-              </Option>
-            )
-          })}
-        </SelectMenu>
-      )}
+              return (
+                <Option
+                  key={value}
+                  role="button"
+                  $selected={value === selectedValue || value === getOptionValue(selectedInfo)}
+                  onClick={onClick}
+                  style={optionStyle}
+                >
+                  {optionRender ? optionRender(item) : getOptionLabel(item)}
+                </Option>
+              )
+            })}
+          </SelectMenu>
+        )}
+      </AnimatePresence>
     </SelectWrapper>
   )
 }

diff --git a/src/pages/MyEarnings/MultipleChainSelect/index.tsx b/src/pages/MyEarnings/MultipleChainSelect/index.tsx
@@ -1,4 +1,5 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
+import { AnimatePresence, motion } from 'framer-motion'
 import { ReactNode, useRef, useState } from 'react'
 import { Flex } from 'rebass'
 import styled, { CSSProperties } from 'styled-components'
@@ -50,8 +51,19 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
       className={className}
     >
       <SelectButton expanded={expanded} onClick={() => setExpanded(e => !e)} {...props} />
-
-      {expanded && <PopoverBody onClose={() => setExpanded(false)} {...props} />}
+      <AnimatePresence>
+        {expanded && (
+          <motion.div
+            initial={{ y: -10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -10, opacity: 0 }}
+            transition={{ duration: 0.1 }}
+            style={{ position: 'absolute', left: 0, top: '100%' }}
+          >
+            <PopoverBody onClose={() => setExpanded(false)} {...props} />
+          </motion.div>
+        )}
+      </AnimatePresence>
     </Flex>
   )
 }

diff --git a/src/pages/TrueSightV2/components/TokenFilter.tsx b/src/pages/TrueSightV2/components/TokenFilter.tsx
@@ -43,6 +43,7 @@ const StyledSelect = styled(Select)`
 const StyledChainSelect = styled(MultipleChainSelect)`
   ${shareStyle}
   padding: 12px;
+  background: ${({ theme }) => theme.buttonBlack};
 `
 
 const SelectName = styled.div`
@@ -181,7 +182,7 @@ export default function TokenFilter({
         {showLoading ? (
           new Array(5)
             .fill(0)
-            .map((_, i) => <StyledSkeleton key={i} baseColor={theme.buttonBlack} highlightColor={theme.border} />)
+            .map((_, i) => <StyledSkeleton key={i} baseColor={theme.background} highlightColor={theme.border} />)
         ) : (
           <>
             <StyledChainSelect
@@ -225,7 +226,7 @@ export default function TokenFilter({
           style={{
             filter: 'drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.16))',
             flexShrink: 0,
-            backgroundColor: theme.background,
+            backgroundColor: theme.tableHeader,
           }}
           onClick={() => setShowShare(true)}
         >

diff --git a/src/pages/TrueSightV2/components/index.tsx b/src/pages/TrueSightV2/components/index.tsx
@@ -28,7 +28,6 @@ export const StyledSectionWrapper = styled.div<{ show?: boolean }>`
   padding: 16px;
   border-radius: 20px;
   border: 1px solid ${({ theme }) => theme.border};
-  /* ${({ theme }) => `background-color: ${theme.background};`} */
   background: ${({ theme }) =>
     theme.darkMode
       ? `linear-gradient(332deg, rgb(32 32 32) 0%, rgba(15, 15, 15, 1) 80%)`

diff --git a/src/pages/TrueSightV2/components/shareContent/TokenAnalysisListShareContent.tsx b/src/pages/TrueSightV2/components/shareContent/TokenAnalysisListShareContent.tsx
@@ -18,9 +18,10 @@ const mapTypeTitle = {
   [KyberAIListType.TOP_CEX_INFLOW]: t`Top CEX Positive Netflow Tokens`,
   [KyberAIListType.TOP_CEX_OUTFLOW]: t`Top CEX Negative Netflow Tokens`,
   [KyberAIListType.TOP_TRADED]: t`Top Trade Tokens`,
-  // [KyberAIListType.TOP_SOCIAL]: t`Top Social Tokens`,
   [KyberAIListType.TRENDING_SOON]: t`Trending Soon Tokens`,
   [KyberAIListType.TRENDING]: t`Top Trending Tokens`,
+  [KyberAIListType.FUNDING_RATE]: t`Funding Rates`,
+  [KyberAIListType.KYBERSWAP_DELTA]: t`Kyberscore Delta`,
 }
 
 export default function TokenAnalysisListShareContent({

diff --git a/src/pages/TrueSightV2/constants/index.tsx b/src/pages/TrueSightV2/constants/index.tsx
@@ -43,6 +43,8 @@ export enum MIXPANEL_KYBERAI_TAG {
   RANKING_TOP_TRADED = 'ranking_top_traded',
   RANKING_TRENDING_SOON = 'ranking_trending_soon',
   RANKING_CURRENTLY_TRENDING = 'ranking_currently_trending',
+  RANKING_FUNDING_RATE = 'ranking_funding_rate',
+  RANKING_KYBERSCORE_DELTA = 'ranking_kyberscore_delta',
   EXPLORE_SHARE_THIS_TOKEN = 'explore_share_this_token',
 }
 
@@ -56,6 +58,8 @@ export const KYBERAI_LISTYPE_TO_MIXPANEL = {
   [KyberAIListType.TOP_TRADED]: MIXPANEL_KYBERAI_TAG.RANKING_TOP_TRADED,
   [KyberAIListType.TRENDING_SOON]: MIXPANEL_KYBERAI_TAG.RANKING_TRENDING_SOON,
   [KyberAIListType.TRENDING]: MIXPANEL_KYBERAI_TAG.RANKING_CURRENTLY_TRENDING,
+  [KyberAIListType.FUNDING_RATE]: MIXPANEL_KYBERAI_TAG.RANKING_FUNDING_RATE,
+  [KyberAIListType.KYBERSWAP_DELTA]: MIXPANEL_KYBERAI_TAG.RANKING_KYBERSCORE_DELTA,
 }
 
 export enum KYBERAI_CHART_ID {

diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -2,7 +2,7 @@ import { Trans, t } from '@lingui/macro'
 import dayjs from 'dayjs'
 import { motion } from 'framer-motion'
 import { rgba } from 'polished'
-import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react'
 import { ArrowDown, ArrowUp } from 'react-feather'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
@@ -33,6 +33,7 @@ import MultipleChainDropdown from '../components/MultipleChainDropdown'
 import SimpleTooltip from '../components/SimpleTooltip'
 import SmallKyberScoreMeter from '../components/SmallKyberScoreMeter'
 import TokenChart from '../components/TokenChartSVG'
+import TokenListVariants from '../components/TokenListVariants'
 import WatchlistButton from '../components/WatchlistButton'
 import KyberScoreChart from '../components/chart/KyberScoreChart'
 import TokenAnalysisListShareContent from '../components/shareContent/TokenAnalysisListShareContent'
@@ -55,6 +56,7 @@ const TradeInfoWrapper = styled.div`
 const ListTokenWrapper = styled(StyledSectionWrapper)`
   height: fit-content;
   padding: 0;
+  background: ${({ theme }) => theme.background};
   @media only screen and (max-width: ${SIZE_MOBILE}) {
     margin-left: -16px;
     margin-right: -16px;
@@ -277,6 +279,17 @@ const tokenTypeList: {
       </span>
     ),
   },
+  {
+    type: KyberAIListType.KYBERSWAP_DELTA,
+    title: t`Kyberscore Delta`,
+    icon: 'bearish',
+    tooltip: theme => (
+      <span>
+        Tokens with a <span style={{ color: theme.text }}>significant change in KyberScore</span> between two
+        consecutive time periods. This may indicate a change in trend of the token
+      </span>
+    ),
+  },
   {
     type: KyberAIListType.TOP_CEX_INFLOW,
     title: t`Top CEX Positive Netflow`,
@@ -299,6 +312,18 @@ const tokenTypeList: {
       </span>
     ),
   },
+  {
+    type: KyberAIListType.FUNDING_RATE,
+    title: t`Funding Rates`,
+    icon: 'coin-bag',
+    tooltip: () => (
+      <span>
+        Tokens with funding rates on centralized exchanges. Positive funding rate suggests traders are bullish and
+        vice-versa for negative funding rates. Extremely positive or negative funding rates may result in leveraged
+        positions getting squeezed.
+      </span>
+    ),
+  },
   {
     type: KyberAIListType.TOP_TRADED,
     title: t`Top Traded`,
@@ -510,6 +535,7 @@ const TokenRow = React.memo(function TokenRow({
 
           <Column gap="8px" style={{ cursor: 'pointer', alignItems: 'flex-start' }}>
             <Text style={{ textTransform: 'uppercase' }}>{token.symbol}</Text>{' '}
+            <TokenListVariants tokens={token.tokens} />
           </Column>
         </Row>
       </td>
@@ -685,6 +711,7 @@ export default function TokenAnalysisList() {
   const [showShare, setShowShare] = useState(false)
   const [isScrolling, setIsScrolling] = useState(false)
   const [listType, setListType] = useState(KyberAIListType.BULLISH)
+  const [, startTransition] = useTransition()
   const wrapperRef = useRef<HTMLDivElement>(null)
   const tableRef = useRef<HTMLTableElement>(null)
   const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
@@ -717,9 +744,11 @@ export default function TokenAnalysisList() {
   }, [data])
 
   const handleTabChange = (tab: KyberAIListType) => {
-    searchParams.set('listType', tab)
-    searchParams.set('page', '1')
-    setSearchParams(searchParams)
+    startTransition(() => {
+      searchParams.set('listType', tab)
+      searchParams.set('page', '1')
+      setSearchParams(searchParams)
+    })
   }
   const handleFilterChange = useCallback(
     (filter: Record<string, string>) => {

diff --git a/src/pages/TrueSightV2/types/index.tsx b/src/pages/TrueSightV2/types/index.tsx
@@ -213,16 +213,17 @@ export type ParticipantInfo = {
 }
 
 export enum KyberAIListType {
-  ALL = 'ALL',
-  MYWATCHLIST = 'MY_WATCHLIST',
-  BULLISH = 'BULLISH',
-  BEARISH = 'BEARISH',
-  TRENDING = 'TRENDING',
-  TOP_CEX_INFLOW = 'TOP_CEX_INFLOW',
-  TOP_CEX_OUTFLOW = 'TOP_CEX_OUTFLOW',
-  TOP_TRADED = 'TOP_TRADED',
-  // TOP_SOCIAL = 'TOP_SOCIAL',
-  TRENDING_SOON = 'TRENDINGSOON',
+  ALL = 'all',
+  MYWATCHLIST = 'my_watchlist',
+  BULLISH = 'bullish',
+  BEARISH = 'bearish',
+  TRENDING = 'trending',
+  TOP_CEX_INFLOW = 'top_cex_inflow',
+  TOP_CEX_OUTFLOW = 'top_cex_outflow',
+  TOP_TRADED = 'top_traded',
+  TRENDING_SOON = 'trendingsoon',
+  FUNDING_RATE = 'funding_rate_asc',
+  KYBERSWAP_DELTA = 'kyber_score_delta_asc',
 }
 
 export type QueryTokenParams = {