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 <[email protected]>
OasisDEX · Apr 23, 2024 · 998a0f7 · 998a0f7
1 parent 99bf5db
commit 998a0f7
Show file tree

Hide file tree

Showing 156 changed files with 3,589 additions and 3,539 deletions.
diff --git a/.eslintrc.json b/.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": [

diff --git a/analytics/events-types/migrations-types.ts b/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

diff --git a/analytics/trackingEvents.ts b/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
diff --git a/analytics/types.ts b/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',
 }
diff --git a/components/AutomationIcon.tsx b/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>
   )
 }
diff --git a/components/BrandTag.tsx b/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>
+)