New and improved Product Hub (#3810)

* simplify hub page and add redirect

* replace nls with pseudo tabs

* new filtering

* basic filters support

* store filters in querystring

* load initial filters from querystring

* remove promo cards

* fix icon on multiselect

* add categories component

* filtering categories

* format fix

* tags component

* filter by tags

* format fix

* group generic select

* featured for navigation only

* featured row

* featured steakhouse

* featured steakhouse on hp

* automations in db

* generic select search

* help button

* remove yield loop filtering

* separator

* sticky row

* help links

* refinance stuff

* bluechip assets

* mobile ver

* format fix

* automations in the table

* ajna weekly rewards

* min liquiditiy

* ajna rewards rate

* yield loop filtering

* tags tooltips

* button border fix

* tags refinements

* remove liquidity from earn

* landing page adjustments

* empty list

* clear search

* update name of steakhouse positions

* fix limiting rows on homepage

* remove memes from borrow

* fix oracless pool rewards

* lp only tag

* automations control

* mixpanel events

* fix tag hover

* extend featured filtering

* fixed featured rows

* fix table row height

* fix typing on landing page

* database query for marketing pages

* update faq

* remove incorrect product hub usage in refinance

* format fix

* fix the thing

* post review fixes

---------

Co-authored-by: Marcin Ciarka <marcin@oazoapps.com>

Author: piotrkonowrocki

.eslintrc.json

@@ -46,7 +46,10 @@
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-useless-constructor": "error",
     "@typescript-eslint/no-non-null-assertion": "warn",
-    "@typescript-eslint/no-shadow": ["warn", { "builtinGlobals": true, "hoist": "all" }],
+    "@typescript-eslint/no-shadow": [
+      "warn",
+      { "allow": ["Image", "Text", "Request"], "builtinGlobals": true, "hoist": "all" }
+    ],
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error"],
     "@typescript-eslint/consistent-type-imports": [

analytics/events-types/migrations-types.ts

@@ -1,5 +1,5 @@
 import type { MixpanelCommonAnalyticsSections, MixpanelPages } from 'analytics/types'
-import type { ProductHubProductType } from 'features/productHub/types'
+import type { OmniProductType } from 'features/omni-kit/types'
 import type { LendingProtocol } from 'lendingProtocols'
 
 export enum MixpanelMigrationsEventIds {
@@ -20,7 +20,7 @@ export type MixpanelMigrationsButtonClickParams =
         positionId: string
         alreadyHadDpm: boolean
         protocol: LendingProtocol
-        positionType: ProductHubProductType.Borrow | ProductHubProductType.Earn
+        positionType: OmniProductType.Borrow | OmniProductType.Earn
         tokenOrPair: string
         stopLoss?: {
           level: string

analytics/trackingEvents.ts

@@ -17,6 +17,7 @@ import { TrackingProductType } from './TrackingProductType'
 import type {
   MixpanelAutomationEventIds,
   MixpanelAutomationEventsAdditionalParams,
+  MixpanelProductHubChangeFilter,
   MixpanelSwapWidgetEvents,
   MixpanelTopBannerEvents,
 } from './types'
@@ -964,6 +965,14 @@ export const trackingEvents = {
     !mixpanel.has_opted_out_tracking() &&
       mixpanelInternalAPI(MixpanelEventTypes.TxStatus, eventBody)
   },
+  productHub: {
+    filterChange: (filter: MixpanelProductHubChangeFilter, value: string) => {
+      mixpanelInternalAPI(MixpanelEventTypes.ProductHubChange, {
+        filter,
+        value,
+      })
+    },
+  },
 }
 
 export type Tracker = typeof trackingEvents

analytics/types.ts

@@ -121,4 +121,17 @@ export enum MixpanelEventTypes {
   TxStatus = 'tx-status',
   SwapWidgetEvent = 'swap-widget-event',
   TopBannerEvent = 'top-banner-event',
+  ProductHubChange = 'product-hub-change',
+}
+
+export enum MixpanelProductHubChangeFilter {
+  Category = 'Category',
+  CollateralToken = 'CollateralToken',
+  DebtToken = 'DebtToken',
+  DepositToken = 'DepositToken',
+  MinLiquidity = 'MinLiquidity',
+  Network = 'Network',
+  ProductType = 'ProductType',
+  Protocol = 'Protocol',
+  Tag = 'MinLiquidity',
 }

components/AutomationIcon.tsx

@@ -1,48 +1,41 @@
 import { Icon } from 'components/Icon'
+import type { IconProps } from 'components/Icon.types'
 import { StatefulTooltip } from 'components/Tooltip'
 import type { PortfolioPosition } from 'handlers/portfolio/types'
 import { useTranslation } from 'next-i18next'
 import React from 'react'
 import { auto_buy, auto_sell, constant_multiple, stop_loss, take_profit } from 'theme/icons'
 
-const automationIconMap: Record<keyof PortfolioPosition['automations'], typeof stop_loss> = {
+interface AutomationIconProps {
+  enabled: boolean
+  iconNotActiveBg?: string
+  type: keyof PortfolioPosition['automations']
+}
+
+const automationIconMap: Record<keyof PortfolioPosition['automations'], IconProps['icon']> = {
   autoBuy: auto_buy,
   autoSell: auto_sell,
-  takeProfit: take_profit,
-  stopLoss: stop_loss,
   constantMultiple: constant_multiple,
+  stopLoss: stop_loss,
+  takeProfit: take_profit,
 }
 
-export const AutomationIcon = ({
-  enabled,
-  type,
-  iconNotActiveBg,
-}: {
-  enabled: boolean
-  type: keyof PortfolioPosition['automations']
-  iconNotActiveBg?: string
-}) => {
+export const AutomationIcon = ({ enabled, iconNotActiveBg, type }: AutomationIconProps) => {
   const { t: tPortfolio } = useTranslation('portfolio')
+
   return (
     <StatefulTooltip
       tooltip={tPortfolio(`automation-details.${type}`)}
       containerSx={{
         position: 'relative',
-        backgroundColor: enabled ? 'success100' : iconNotActiveBg || 'secondary60',
+        p: '6px',
+        backgroundColor: enabled ? 'success10' : iconNotActiveBg ?? 'secondary60',
         borderRadius: 'ellipse',
-        transition: 'background-color 200ms, color 200ms',
-        ...(enabled && {
-          '&:hover': {
-            backgroundColor: 'success10',
-            '& path': {
-              color: 'success100',
-            },
-          },
-        }),
+        color: enabled ? 'success100' : 'primary60',
       }}
       tooltipSx={{
-        bottom: '100%',
-        mb: 1,
+        top: '100%',
+        mt: 1,
         fontSize: 1,
         textAlign: 'left',
         border: 'none',
@@ -51,18 +44,7 @@ export const AutomationIcon = ({
         whiteSpace: 'nowrap',
       }}
     >
-      <Icon
-        icon={automationIconMap[type]}
-        size="34px"
-        sx={{
-          display: 'block',
-          p: 2,
-          '& path': {
-            transition: 'color 200ms',
-            color: enabled ? 'white' : 'primary60',
-          },
-        }}
-      />
+      <Icon icon={automationIconMap[type]} size="24px" sx={{ display: 'block' }} />
     </StatefulTooltip>
   )
 }

components/BrandTag.tsx

@@ -0,0 +1,47 @@
+import {
+  getGradientColor,
+  summerBrandGradient,
+  summerFadedBrandGradient,
+} from 'helpers/getGradientColor'
+import type { FC } from 'react'
+import React from 'react'
+import type { ThemeUIStyleObject } from 'theme-ui'
+import { Box, Text } from 'theme-ui'
+
+interface BrandTagProsp {
+  sx?: ThemeUIStyleObject
+}
+
+export const BrandTag: FC<BrandTagProsp> = ({ children, sx }) => (
+  <Box
+    as="span"
+    sx={{
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      height: '28px',
+      px: '12px',
+      background: summerFadedBrandGradient,
+      borderRadius: 'roundish',
+      verticalAlign: 'bottom',
+      ...sx,
+      '*&::before': {
+        content: '""',
+        position: 'absolute',
+        top: '1px',
+        left: '1px',
+        bottom: '1px',
+        right: '1px',
+        background: 'neutral10',
+        borderRadius: 'roundish',
+      },
+    }}
+  >
+    <Text
+      variant="paragraph4"
+      sx={{ position: 'relative', ...getGradientColor(summerBrandGradient) }}
+    >
+      {children}
+    </Text>
+  </Box>
+)