Earn protocol WIP #17 (#551)

# 16 of N pull requests. This pull request refactors the `EarnVaultOpenManagePage` and introduces new components to streamline the code and improve maintainability. The most important changes include the removal of hardcoded data, the creation of reusable components, and the dynamic import of the `VaultOpenView` component. Refactoring and Code Simplification: * `apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsx`: Removed hardcoded data and replaced the `VaultGridPreview` component with the new `VaultOpenView` component. ([apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsxL1-R6](diffhunk://#diff-eaafa83dbaa20354e007ae0e12db9f7a702c4eda62f13e8ac7f97562a32e633cL1-R6), [apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsxL37-R36](diffhunk://#diff-eaafa83dbaa20354e007ae0e12db9f7a702c4eda62f13e8ac7f97562a32e633cL37-R36)) * [`apps/earn-protocol/components/layout/VaultOpenView/VaultOpenView.tsx`](diffhunk://#diff-a40498ddbf1bf5830448800c7d93442c21fc90a4f6c4eed0b672478679ce71a9R1-R7): Added dynamic import for `VaultOpenViewComponent` to improve performance. * [`apps/earn-protocol/components/layout/VaultOpenView/VaultOpenViewComponent.tsx`](diffhunk://#diff-af80e33b59ddc7605e3d3e1491d67643a7110bc68039c4d1cf0bac4460249f8fR1-R196): Created `VaultOpenViewComponent` to encapsulate the vault details and form logic, replacing the hardcoded values with props. New Components: * [`apps/earn-protocol/components/layout/VaultOpenView/VaultOpenHeaderBlock.tsx`](diffhunk://#diff-ca9a839cffb2c5b720697f11a6a985772b1b62d3a6e2309b07db100c2c18baf2R1-R58): Added `VaultOpenHeaderBlock` to handle the header section of the vault details. * [`apps/earn-protocol/components/layout/VaultOpenView/VaultSimulationGraph.tsx`](diffhunk://#diff-7945a03c3f8b5b12f09ffb1b94e252a46d09e9bee9b3c70645556363d11dc442R1-R66): Added `VaultSimulationGraph` to display the simulated earnings graph. Data Management: * [`apps/earn-protocol/components/layout/VaultOpenView/mocks.ts`](diffhunk://#diff-46d20597c12759f5cee0663182225eec1847899207974d804a2e33cc7751feb6R1-R95): Moved mock data for vault exposure, user activity, and details links to a separate file for better data management. --------- Co-authored-by: Marcin Ciarka <marcin@oazoapps.com>
OasisDEX · Oct 29, 2024 · 8c83cbf · 8c83cbf
1 parent 6382d8e
commit 8c83cbf
Show file tree

Hide file tree

Showing 44 changed files with 1,285 additions and 451 deletions.
diff --git a/apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsx b/apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsx
@@ -1,31 +1,9 @@
-import {
-  Expander,
-  getVaultDetailsUrl,
-  subgraphNetworkToId,
-  Text,
-  VaultGridPreview,
-  WithArrow,
-} from '@summerfi/app-earn-ui'
+import { subgraphNetworkToId, Text } from '@summerfi/app-earn-ui'
 import { type SDKNetwork } from '@summerfi/app-types'
-import Link from 'next/link'
 
 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 {
-  UserActivity,
-  type UserActivityRawData,
-} from '@/components/organisms/UserActivity/UserActivity'
-import {
-  VaultExposure,
-  type VaultExposureRawData,
-} from '@/components/organisms/VaultExposure/VaultExposure'
-import type { FleetConfig } from '@/helpers/sdk/types'
+import { VaultOpenView } from '@/components/layout/VaultOpenView/VaultOpenView'
 
 type EarnVaultOpenManagePageProps = {
   params: {
@@ -34,268 +12,28 @@ type EarnVaultOpenManagePageProps = {
   }
 }
 
-const fleetConfig: FleetConfig = {
-  tokenSymbol: 'USDC',
-  fleetAddress: '0x75d4f7cb1b2481385e0878c639f6f6d66592d399',
-}
-
-const vaultExposureRawData: VaultExposureRawData[] = [
-  {
-    vault: {
-      label: 'MKR Blended',
-      primaryToken: 'USDC',
-      secondaryToken: 'DAI',
-    },
-    allocation: '0.32',
-    currentApy: '0.103',
-    liquidity: '43000000',
-    type: 'Fixed yield',
-  },
-  {
-    vault: {
-      label: 'MKR Blended',
-      primaryToken: 'USDC',
-      secondaryToken: 'DAI',
-    },
-    allocation: '0.32',
-    currentApy: '0.103',
-    liquidity: '43000000',
-    type: 'Isolated landing',
-  },
-  {
-    vault: {
-      label: 'MKR Blended',
-      primaryToken: 'USDC',
-      secondaryToken: 'DAI',
-    },
-    allocation: '0.32',
-    currentApy: '0.103',
-    liquidity: '43000000',
-    type: 'Lending',
-  },
-  {
-    vault: {
-      label: 'MKR Blended',
-      primaryToken: 'USDC',
-      secondaryToken: 'DAI',
-    },
-    allocation: '0.32',
-    currentApy: '0.103',
-    liquidity: '43000000',
-    type: 'Basic Trading',
-  },
-]
-
-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',
-    amount: '123123',
-    numberOfDeposits: '13',
-    time: '1727385013506',
-    earningStreak: {
-      link: '/',
-      label: 'View',
-    },
-  },
-  {
-    balance: '1420000',
-    amount: '321321',
-    numberOfDeposits: '9',
-    time: '1727585013506',
-    earningStreak: {
-      link: '/',
-      label: 'View',
-    },
-  },
-]
-
-const detailsLinks = [
-  {
-    label: 'How it all works',
-    id: 'how-it-works',
-  },
-  {
-    label: 'Advanced yield data',
-    id: 'advanced-yield-data',
-  },
-  {
-    label: 'Yield sources',
-    id: 'yield-sources',
-  },
-  {
-    label: 'Security',
-    id: 'security',
-  },
-  {
-    label: 'FAQ',
-    id: 'faq',
-  },
-]
-
 export const revalidate = 60
 
 const EarnVaultOpenManagePage = async ({ params }: EarnVaultOpenManagePageProps) => {
   const networkId = subgraphNetworkToId(params.network)
 
-  const [selectedVault, { vaults }] = await Promise.all([
+  const [vault, { vaults }] = await Promise.all([
     getVaultDetails({
       vaultAddress: params.vaultId,
       chainId: networkId,
     }),
     getVaultsList(),
   ])
 
-  if (!selectedVault) {
+  if (!vault) {
     return (
       <Text>
         No vault found with the id {params.vaultId} on the network {params.network}
       </Text>
     )
   }
 
-  return (
-    <VaultGridPreview
-      vault={selectedVault}
-      vaults={vaults}
-      leftContent={
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 'var(--spacing-space-x-large)',
-            width: '100%',
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 'var(--spacing-space-medium)',
-            }}
-          >
-            <Text variant="h5">About the vault</Text>
-            <Text
-              variant="p2"
-              style={{
-                color: 'var(--color-text-secondary)',
-              }}
-            >
-              The Summer Earn Protocol is a permissionless passive lending product, which sets out
-              to offer effortless and secure optimised yield, while diversifying risk.
-            </Text>
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'flex-start',
-                flexWrap: 'wrap',
-                gap: 'var(--general-space-24)',
-              }}
-            >
-              {detailsLinks.map(({ label, id }) => (
-                <Link key={label} href={`${getVaultDetailsUrl(selectedVault)}#${id}`}>
-                  <Text
-                    as="p"
-                    variant="p3semi"
-                    style={{
-                      color: 'var(--color-text-link)',
-                      textDecoration: 'none',
-                      cursor: 'pointer',
-                      paddingRight: 'var(--spacing-space-medium)',
-                    }}
-                  >
-                    <WithArrow>{label}</WithArrow>
-                  </Text>
-                </Link>
-              ))}
-            </div>
-          </div>
-          <Expander
-            title={
-              <Text as="p" variant="p1semi">
-                Historical yield
-              </Text>
-            }
-            defaultExpanded
-          >
-            <MockedLineChart />
-          </Expander>
-          <Expander
-            title={
-              <Text as="p" variant="p1semi">
-                Vault exposure
-              </Text>
-            }
-            defaultExpanded
-          >
-            <VaultExposure rawData={vaultExposureRawData} />
-          </Expander>
-          <Expander
-            title={
-              <Text as="p" variant="p1semi">
-                Rebalancing activity
-              </Text>
-            }
-            defaultExpanded
-          >
-            <RebalancingActivity rawData={rebalancingActivityRawData} />
-          </Expander>
-          <Expander
-            title={
-              <Text as="p" variant="p1semi">
-                User activity
-              </Text>
-            }
-            defaultExpanded
-          >
-            <UserActivity rawData={userActivityRawData} />
-          </Expander>
-        </div>
-      }
-      rightContent={
-        <FormContainer
-          fleetConfig={fleetConfig}
-          selectedVaultData={selectedVault}
-          vaultsList={vaults}
-        />
-      }
-    />
-  )
+  return <VaultOpenView vault={vault} vaults={vaults} />
 }
 
 export default EarnVaultOpenManagePage
diff --git a/apps/earn-protocol/app/earn/rebalance-activity/page.tsx b/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
diff --git a/apps/earn-protocol/components/layout/VaultOpenView/VaultOpenHeaderBlock.tsx b/apps/earn-protocol/components/layout/VaultOpenView/VaultOpenHeaderBlock.tsx
@@ -0,0 +1,58 @@
+import { getVaultDetailsUrl, Text, WithArrow } from '@summerfi/app-earn-ui'
+import { type SDKVaultishType } from '@summerfi/app-types'
+import Link from 'next/link'
+
+export const VaultOpenHeaderBlock = ({
+  vault,
+  detailsLinks,
+}: {
+  vault: SDKVaultishType
+  detailsLinks: { label: string; id: string }[]
+}) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--spacing-space-medium)',
+      }}
+    >
+      <Text variant="h5">About the vault</Text>
+      <Text
+        variant="p2"
+        style={{
+          color: 'var(--color-text-secondary)',
+        }}
+      >
+        The Summer Earn Protocol is a permissionless passive lending product, which sets out to
+        offer effortless and secure optimised yield, while diversifying risk.
+      </Text>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
+          flexWrap: 'wrap',
+          gap: 'var(--general-space-24)',
+        }}
+      >
+        {detailsLinks.map(({ label, id }) => (
+          <Link key={label} href={`${getVaultDetailsUrl(vault)}#${id}`}>
+            <Text
+              as="p"
+              variant="p3semi"
+              style={{
+                color: 'var(--color-text-link)',
+                textDecoration: 'none',
+                cursor: 'pointer',
+                paddingRight: 'var(--spacing-space-medium)',
+              }}
+            >
+              <WithArrow>{label}</WithArrow>
+            </Text>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/earn-protocol/components/layout/VaultOpenView/VaultOpenView.module.scss b/apps/earn-protocol/components/layout/VaultOpenView/VaultOpenView.module.scss
@@ -0,0 +1,6 @@
+.leftContentWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-x-large);
+  width: 100%;
+}
diff --git a/apps/earn-protocol/components/layout/VaultOpenView/VaultOpenView.tsx b/apps/earn-protocol/components/layout/VaultOpenView/VaultOpenView.tsx
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+export const VaultOpenView = dynamic(() =>
+  import('@/components/layout/VaultOpenView/VaultOpenViewComponent').then(
+    (mod) => mod.VaultOpenViewWrapper,
+  ),
+)