Earn protocol WIP #17

apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsx

@@ -13,10 +13,7 @@ import { getVaultDetails } from '@/app/server-handlers/sdk/getVaultDetails'
 import { getVaultsList } from '@/app/server-handlers/sdk/getVaultsList'
 import { MockedLineChart } from '@/components/organisms/Charts/MockedLineChart'
 import FormContainer from '@/components/organisms/Form/FormContainer'
-import {
-  RebalancingActivity,
-  type RebalancingActivityRawData,
-} from '@/components/organisms/RebalancingActivity/RebalancingActivity'
+import { RebalancingActivity } from '@/components/organisms/RebalancingActivity/RebalancingActivity'
 import {
   UserActivity,
   type UserActivityRawData,
@@ -25,6 +22,7 @@ import {
   VaultExposure,
   type VaultExposureRawData,
 } from '@/components/organisms/VaultExposure/VaultExposure'
+import { rebalancingActivityRawData } from '@/features/rebalance-activity/table/dummyData'
 import type { FleetConfig } from '@/helpers/sdk/types'
 
 type EarnVaultOpenManagePageProps = {
@@ -86,41 +84,6 @@ const vaultExposureRawData: VaultExposureRawData[] = [
   },
 ]
 
-const rebalancingActivityRawData: RebalancingActivityRawData[] = [
-  {
-    type: 'reduce',
-    action: {
-      from: 'USDC',
-      to: 'DAI',
-    },
-    amount: {
-      token: 'USDC',
-      value: '123123',
-    },
-    timestamp: '12321321',
-    provider: {
-      link: '/',
-      label: 'Summer.fi',
-    },
-  },
-  {
-    type: 'increase',
-    action: {
-      from: 'USDT',
-      to: 'USDC',
-    },
-    amount: {
-      token: 'USDT',
-      value: '123123',
-    },
-    timestamp: '1727385013506',
-    provider: {
-      link: '/',
-      label: 'Summer.fi',
-    },
-  },
-]
-
 const userActivityRawData: UserActivityRawData[] = [
   {
     balance: '120000',

apps/earn-protocol/app/earn/rebalance-activity/page.tsx

@@ -0,0 +1,8 @@
+import { RebalanceActivityView } from '@/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView'
+import { rebalancingActivityRawData } from '@/features/rebalance-activity/table/dummyData'
+
+const RebalanceActivityPage = () => {
+  return <RebalanceActivityView rawData={rebalancingActivityRawData} />
+}
+
+export default RebalanceActivityPage

apps/earn-protocol/components/organisms/RebalancingActivity/RebalancingActivity.tsx

@@ -1,21 +1,10 @@
 import { type FC, useMemo } from 'react'
 import { Card, DataBlock, Table, Text, WithArrow } from '@summerfi/app-earn-ui'
-import { type TokenSymbolsList } from '@summerfi/app-types'
 import Link from 'next/link'
 
-import { rebalancingActivityColumns } from '@/components/organisms/RebalancingActivity/columns'
-import { rebalancingActivityMapper } from '@/components/organisms/RebalancingActivity/mapper'
-
-export interface RebalancingActivityRawData {
-  type: string
-  action: { from: TokenSymbolsList; to: TokenSymbolsList }
-  amount: { token: TokenSymbolsList; value: string }
-  timestamp: string
-  provider: {
-    link: string
-    label: string
-  }
-}
+import { rebalancingActivityColumns } from '@/features/rebalance-activity/table/columns'
+import { rebalancingActivityMapper } from '@/features/rebalance-activity/table/mapper'
+import { type RebalancingActivityRawData } from '@/features/rebalance-activity/table/types'
 
 interface RebalancingActivityProps {
   rawData: RebalancingActivityRawData[]
@@ -54,7 +43,7 @@ export const RebalancingActivity: FC<RebalancingActivityProps> = ({ rawData }) =
           for reallocating assets from lower performing strategies to higher performing ones, within
           a threshold of risk.
         </Text>
-        <Table rows={rows} columns={rebalancingActivityColumns} />
+        <Table rows={rows} columns={rebalancingActivityColumns} hiddenColumns={['strategy']} />
         <Link href="/" style={{ marginTop: 'var(--spacing-space-large)', width: 'fit-content' }}>
           <WithArrow as="p" variant="p4semi" style={{ color: 'var(--earn-protocol-primary-100)' }}>
             View all rebalances

apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.module.scss

@@ -0,0 +1,9 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--general-space-16);
+
+  @media screen and (min-width: 768px) {
+    padding: unset;
+  }
+}

apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { type FC, useMemo } from 'react'
+import { HeadingWithCards, Table, TableCarousel } from '@summerfi/app-earn-ui'
+
+import { rebalancingActivityColumns } from '@/features/rebalance-activity/table/columns'
+import { rebalancingActivityMapper } from '@/features/rebalance-activity/table/mapper'
+import { type RebalancingActivityRawData } from '@/features/rebalance-activity/table/types'
+
+import classNames from './RebalanceActivityView.module.scss'
+
+const carouselData = [
+  {
+    title: 'Reduced costs',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus massa ac sapien eleifend.',
+    link: {
+      label: 'Add to position',
+      href: '/',
+    },
+  },
+  {
+    title: 'Optimized Yield',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus massa ac sapien eleifend.',
+    link: {
+      label: 'Add to position',
+      href: '/',
+    },
+  },
+  {
+    title: 'Saved Time',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus massa ac sapien eleifend.',
+    link: {
+      label: 'Add to position',
+      href: '/',
+    },
+  },
+]
+
+interface RebalanceActivityViewProps {
+  rawData: RebalancingActivityRawData[]
+}
+
+export const RebalanceActivityView: FC<RebalanceActivityViewProps> = ({ rawData }) => {
+  const rows = useMemo(() => rebalancingActivityMapper(rawData), [rawData])
+
+  return (
+    <div className={classNames.wrapper}>
+      <HeadingWithCards
+        title="Lazy Summer Global Rebalance Activity"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget."
+        cards={[
+          {
+            title: 'Rebalance actions',
+            value: '3,213',
+            description:
+              'Justo enim sollicitudin suspendisse lectus tellus tortor magna. Velit id nulla tempor arcu quis condimentum parturient.',
+          },
+          {
+            title: 'User saved time',
+            value: '2,184 hours',
+            description:
+              'Justo enim sollicitudin suspendisse lectus tellus tortor magna. Velit id nulla tempor arcu quis condimentum parturient.',
+          },
+          {
+            title: 'Gas cost savings',
+            value: '1.23m',
+            description:
+              'Justo enim sollicitudin suspendisse lectus tellus tortor magna. Velit id nulla tempor arcu quis condimentum parturient.',
+          },
+        ]}
+      />
+      <Table
+        rows={rows}
+        columns={rebalancingActivityColumns}
+        customRow={{
+          idx: 1,
+          content: <TableCarousel carouselData={carouselData} />,
+        }}
+      />
+    </div>
+  )
+}

apps/earn-protocol/components/organisms/RebalancingActivity/columns.ts → apps/earn-protocol/features/rebalance-activity/table/columns.ts

@@ -14,6 +14,11 @@ export const rebalancingActivityColumns = [
     key: 'amount',
     sortable: true,
   },
+  {
+    title: 'Strategy',
+    key: 'strategy',
+    sortable: false,
+  },
   {
     title: 'Timestamp',
     key: 'timestamp',

apps/earn-protocol/features/rebalance-activity/table/dummyData.ts

@@ -0,0 +1,55 @@
+import type { RebalancingActivityRawData } from '@/features/rebalance-activity/table/types'
+
+export const rebalancingActivityRawData: RebalancingActivityRawData[] = [
+  {
+    type: 'reduce',
+    action: {
+      from: 'USDC',
+      to: 'DAI',
+    },
+    amount: {
+      token: 'USDC',
+      value: '123123',
+    },
+    strategy: 'USDC Ethereum Lower Risk',
+    timestamp: '12321321',
+    provider: {
+      link: '/',
+      label: 'Summer.fi',
+    },
+  },
+  {
+    type: 'increase',
+    action: {
+      from: 'USDT',
+      to: 'USDC',
+    },
+    amount: {
+      token: 'USDT',
+      value: '123123',
+    },
+    strategy: 'USDC Ethereum Lower Risk',
+    timestamp: '1727385013506',
+    provider: {
+      link: '/',
+      label: 'Summer.fi',
+    },
+  },
+  {
+    type: 'increase',
+    action: {
+      from: 'DAI',
+      to: 'USDC',
+    },
+    amount: {
+      token: 'DAI',
+      value: '123123',
+    },
+    strategy: 'USDC Ethereum Lower Risk',
+    timestamp: '1727385013506',
+    provider: {
+      link: '/',
+      label: 'Summer.fi',
+    },
+  },
+]

apps/earn-protocol/components/organisms/RebalancingActivity/mapper.tsx → apps/earn-protocol/features/rebalance-activity/table/mapper.tsx

@@ -2,7 +2,7 @@ import { Icon, TableCellText, Text, WithArrow } from '@summerfi/app-earn-ui'
 import { formatCryptoBalance, timeAgo } from '@summerfi/app-utils'
 import Link from 'next/link'
 
-import { type RebalancingActivityRawData } from '@/components/organisms/RebalancingActivity/RebalancingActivity'
+import { type RebalancingActivityRawData } from '@/features/rebalance-activity/table/types'
 
 export const rebalancingActivityMapper = (rawData: RebalancingActivityRawData[]) => {
   return rawData.map((item) => {
@@ -37,6 +37,7 @@ export const rebalancingActivityMapper = (rawData: RebalancingActivityRawData[])
             <TableCellText>{formatCryptoBalance(item.amount.value)}</TableCellText>
           </div>
         ),
+        strategy: <TableCellText>{item.strategy}</TableCellText>,
         timestamp: (
           <TableCellText>
             {timeAgo({ from: new Date(), to: new Date(Number(item.timestamp)) })}

apps/earn-protocol/features/rebalance-activity/table/types.ts

@@ -0,0 +1,13 @@
+import { type TokenSymbolsList } from '@summerfi/app-types'
+
+export interface RebalancingActivityRawData {
+  type: string
+  action: { from: TokenSymbolsList; to: TokenSymbolsList }
+  amount: { token: TokenSymbolsList; value: string }
+  strategy: string
+  timestamp: string
+  provider: {
+    link: string
+    label: string
+  }
+}

packages/app-earn-ui/src/components/molecules/HeadingWithCards/HeadingWithCards.module.scss

@@ -0,0 +1,52 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.heading {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: var(--general-space-16);
+  gap: var(--general-space-8);
+
+  .headingIcons {
+    display: flex;
+    gap: 10px;
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.description {
+  color: var(--earn-protocol-secondary-60);
+  margin-bottom: var(--general-space-24);
+}
+
+.cardsWrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--general-space-16);
+  margin-bottom: var(--general-space-40);
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--general-space-4);
+    align-items: flex-start;
+    flex: 1;
+
+    .cardTitle {
+      color: var(--earn-protocol-secondary-40);
+    }
+
+    .cardDescription {
+      color: var(--earn-protocol-secondary-60);
+    }
+  }
+}

packages/app-earn-ui/src/components/molecules/HeadingWithCards/HeadingWithCards.module.scss.d.ts

@@ -0,0 +1,16 @@
+export type Styles = {
+  card: string
+  cardDescription: string
+  cardsWrapper: string
+  cardTitle: string
+  description: string
+  heading: string
+  headingIcons: string
+  wrapper: string
+}
+
+export type ClassNames = keyof Styles
+
+declare const styles: Styles
+
+export default styles