Align

.trunk/trunk.yaml

@@ -25,6 +25,8 @@ actions:
   disabled:
     - trunk-announce
     - trunk-check-pre-push
+  enabled:
+    - trunk-upgrade-available
     - trunk-fmt-pre-commit
   enabled:
     - trunk-upgrade-available

package.json

@@ -35,6 +35,7 @@
     "@solana/web3.js": "1.87.6",
     "@solflare-wallet/utl-aggregator": "^0.0.8",
     "@storybook/addon-actions": "^8.1.10",
+    "@types/react-slick": "^0.23.13",
     "assert": "^2.1.0",
     "axios": "^1.6.8",
     "buffer": "^6.0.3",
@@ -47,12 +48,14 @@
     "react-hook-form": "^7.53.0",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
+    "react-slick": "^0.30.2",
     "react-spring": "^9.7.3",
     "react-window": "^1.8.10",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.3.0",
     "remeda": "^1.61.0",
+    "slick-carousel": "^1.8.1",
     "tss-react": "^4.9.6",
     "typed-redux-saga": "^1.5.0",
     "vite-plugin-node-polyfills": "^0.22.0",

src/components/EmptyPlaceholder/style.ts

@@ -5,7 +5,6 @@ export const useStyles = makeStyles()(() => ({
   container: {
     width: '100%',
     height: '370px',
-    position: 'absolute',
     zIndex: 14
   },
   root: {

src/components/GradientBorder/GradientBorder.tsx

@@ -0,0 +1,66 @@
+import { Grid } from '@mui/material'
+import { useStyles } from './style'
+import classNames from 'classnames'
+
+export interface IGradientBorder {
+  children: React.ReactNode
+  borderWidth: number
+  borderColor?: string
+  opacity?: number
+  innerClassName?: string
+  backgroundColor?: string
+  borderRadius: number
+}
+
+const GradientBorder: React.FC<IGradientBorder> = ({
+  children,
+  borderColor,
+  borderWidth,
+  opacity,
+  innerClassName,
+  backgroundColor,
+  borderRadius
+}) => {
+  const { classes } = useStyles({
+    borderWidth,
+    borderColor,
+    opacity,
+    backgroundColor,
+    borderRadius
+  })
+
+  const Content = ({ hidden, hideBackground }: { hidden?: boolean; hideBackground?: boolean }) => {
+    return (
+      <Grid
+        container
+        className={(classes.innerContainer, hideBackground && classes.noBackground, innerClassName)}
+        visibility={hidden ? 'hidden' : 'visible'}>
+        {children}
+      </Grid>
+    )
+  }
+  return (
+    <Grid container className={classes.rootContainer}>
+      <Grid overflow='hidden'>
+        <Grid container className={classes.positionAbsolute}>
+          <Grid
+            container
+            className={classNames(classes.gradientContainer, classes.gradient)}
+            overflow='hidden'>
+            {/* <Content hidden /> */}
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid container>
+        <Grid
+          container
+          className={classNames(classes.gradientContainer, classes.noBackground)}
+          zIndex={1}>
+          <Content hideBackground />
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default GradientBorder

src/components/GradientBorder/style.ts

@@ -0,0 +1,52 @@
+import { colors } from '@static/theme'
+import { makeStyles } from 'tss-react/mui'
+
+export const useStyles = makeStyles<{
+  borderWidth: number
+  borderColor?: string
+  opacity?: number
+  backgroundColor?: string
+  borderRadius: number
+}>()((_theme, { borderWidth, borderColor, opacity, backgroundColor, borderRadius }) => ({
+  rootContainer: {
+    position: 'relative'
+  },
+  gradientContainer: {
+    boxSizing: 'border-box',
+    position: 'relative',
+    borderRadius: `calc((${borderWidth}px / 2) + ${borderRadius}px)`,
+    padding: borderWidth ?? 1
+  },
+  gradient: {
+    zIndex: 1,
+    background:
+      borderColor ??
+      `linear-gradient(to bottom, ${colors.invariant.green}, ${colors.invariant.pink})`,
+    opacity: opacity ?? 1,
+
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: borderWidth ?? 1,
+      left: borderWidth ?? 1,
+      right: borderWidth ?? 1,
+      bottom: borderWidth ?? 1,
+      borderRadius: borderRadius ?? 10,
+      background: backgroundColor ?? colors.invariant.bodyBackground,
+      maskComposite: 'exclude',
+      zIndex: -1
+    }
+  },
+  positionAbsolute: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: colors.invariant.transparentBcg,
+    overflow: 'hidden',
+    borderRadius: `calc((${borderWidth}px / 2) + ${borderRadius}px)`
+  },
+  innerContainer: {
+    borderRadius: borderRadius ?? 10
+  },
+  noBackground: {}
+}))

src/components/Header/Header.tsx

@@ -72,11 +72,12 @@ export const Header: React.FC<IHeader> = ({
 
   const isMdDown = useMediaQuery(theme.breakpoints.down('md'))
 
-  const routes = ['exchange', 'liquidity', 'statistics']
+  const routes = ['exchange', 'liquidity', 'portfolio', 'statistics']
 
   const otherRoutesToHighlight: Record<string, RegExp[]> = {
     liquidity: [/^newPosition\/*/, /^position\/*/],
-    exchange: [/^exchange\/*/]
+    exchange: [/^exchange\/*/],
+    portfolio: [/^portfolio\/*/]
     // creator: [/^creator\/*/]
   }