Earn protocol WIP #15 (#549)

# 15 of N pull requests. This pull request focuses on several key improvements across multiple files, mainly simplifying the codebase by removing unnecessary elements and enhancing the user interface with new components and styles. ### Codebase Simplification: * Removed `callDataTimestamp` and associated `pre` elements from various files to streamline the data fetching and display process. (`apps/earn-protocol-landing-page/app/page.tsx`, `apps/earn-protocol/app/earn/[network]/details/[vaultId]/page.tsx`, `apps/earn-protocol/app/earn/[network]/page.tsx`, `apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsx`, `apps/earn-protocol/app/earn/page.tsx`, `apps/earn-protocol/app/earn/portfolio/[wallet_address]/page.tsx`) [[1]](diffhunk://#diff-c6a9162a88e79f430930560bc04862e40935375a7e6236eee697f9ba1f4c42f8L7-L30) [apps/earn-protocol/app/earn/[network]/details/[vaultId]/page.tsxR5](diffhunk://#diff-6c417b5c1fd4308c55bcc9cdff4e224bf5f3a779b3875a14450eee5fe7975318R5), [apps/earn-protocol/app/earn/[network]/page.tsxL15-R17](diffhunk://#diff-53b21d2cab26eec87f4d1db3a4858b2182ac293f95fe9047572742dcb6b135b6L15-R17), [apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsxL173-R175](diffhunk://#diff-eaafa83dbaa20354e007ae0e12db9f7a702c4eda62f13e8ac7f97562a32e633cL173-R175), [[2]](diffhunk://#diff-6203ed534c77b967bf06687ad5fc8b02ede78c6ee904a0c6c69856869af3b387L7-R9) [apps/earn-protocol/app/earn/portfolio/[wallet_address]/page.tsxL15-L48](diffhunk://#diff-47376389b307531558c8c38ad3468954c5007b45e38bb7eb0b280e9c5f318350L15-L48)) ### User Interface Enhancements: * Added new components such as `InputWithDropdown` and `ProjectedEarnings` to the `Form` component, improving the user experience. (`apps/earn-protocol/components/organisms/Form/Form.tsx`) [[1]](diffhunk://#diff-3dcf93889ec436db515e10a6d5f00154f75b20816f0d8b80f192ace936722d79L3-R10) [[2]](diffhunk://#diff-3dcf93889ec436db515e10a6d5f00154f75b20816f0d8b80f192ace936722d79L27-R38) [[3]](diffhunk://#diff-3dcf93889ec436db515e10a6d5f00154f75b20816f0d8b80f192ace936722d79L50-R91) [[4]](diffhunk://#diff-3dcf93889ec436db515e10a6d5f00154f75b20816f0d8b80f192ace936722d79L91-L92) * Updated `PortfolioPageView` to include `id` attributes for better tab management. (`apps/earn-protocol/components/layout/PortfolioPageView/PortfolioPageView.tsx`) * Replaced manual tab management with `TabBar` in `UserActivity` for a cleaner and more maintainable UI. (`apps/earn-protocol/components/organisms/UserActivity/UserActivity.tsx`) [[1]](diffhunk://#diff-32cd1117e36ad0e88b51f2c8c3ad54feef58786492a61e84e59ca307c94ca9adL2-R3) [[2]](diffhunk://#diff-32cd1117e36ad0e88b51f2c8c3ad54feef58786492a61e84e59ca307c94ca9adL30-R48) ### Dependency and Import Adjustments: * Added external dependencies `pino-pretty` and `encoding` to the webpack configuration. (`apps/earn-protocol-landing-page/next.config.mjs`) * Removed unnecessary imports of `BigNumber` from several mapper files to reduce dependency bloat. (`apps/earn-protocol/components/organisms/RebalancingActivity/mapper.tsx`, `apps/earn-protocol/components/organisms/StrategyExposure/mapper.tsx`, `apps/earn-protocol/components/organisms/UserActivity/mapper.tsx`) [[1]](diffhunk://#diff-dac1b9e596e3f4880931f444d254a99931dff068a3ec4fd18b2689440143a733L3) [[2]](diffhunk://#diff-7426e0096aa61bc191b56e76afe503daed52d15666677cf790d769ea94ff202bL3) [[3]](diffhunk://#diff-d82ae9393c5832e3d6f39ae9deb731dfaed35f2d5d248ba6a81861d290093323L3) ### Code Refactoring: * Modified `EarnStrategyDetailsPage` to fetch both `selectedVault` and `strategiesList` concurrently using `Promise.all`. (`apps/earn-protocol/app/earn/[network]/details/[vaultId]/page.tsx`) ([apps/earn-protocol/app/earn/[network]/details/[vaultId]/page.tsxL19-R29](diffhunk://#diff-6c417b5c1fd4308c55bcc9cdff4e224bf5f3a779b3875a14450eee5fe7975318L19-R29)) * Exported `Form` as a named export instead of default export for consistency. (`apps/earn-protocol/components/organisms/Form/Form.tsx`, `apps/earn-protocol/components/organisms/Form/FormContainer.tsx`) [[1]](diffhunk://#diff-3dcf93889ec436db515e10a6d5f00154f75b20816f0d8b80f192ace936722d79L91-L92) [[2]](diffhunk://#diff-47a58a22a30f8f1189cbf4488f685eeb1b1c56fdee6238bef46cd10af39dda65L6-R6) --------- Co-authored-by: sebastianPiekarczyk <sebastian@oazoapps.com>
OasisDEX · Oct 25, 2024 · cd74386 · cd74386
1 parent b66ac35
commit cd74386
Show file tree

Hide file tree

Showing 61 changed files with 720 additions and 588 deletions.
diff --git a/apps/earn-protocol-landing-page/app/page.tsx b/apps/earn-protocol-landing-page/app/page.tsx
@@ -4,30 +4,11 @@ import { LandingPageContent } from '@/components/layout/LandingPageContent/Landi
 export const revalidate = 60
 
 export default async function HomePage() {
-  const { vaults, callDataTimestamp } = await getVaultsList()
+  const { vaults } = await getVaultsList()
 
   return (
     <div style={{ display: 'flex', gap: '8px', flexDirection: 'column', alignItems: 'center' }}>
       <LandingPageContent strategiesList={vaults} />
-      <pre
-        style={{
-          backgroundColor: 'rgba(30,30,30,0.5)',
-          backdropFilter: 'blur(30px)',
-          color: 'rgba(180,180,180,1)',
-          padding: '16px',
-          borderRadius: '8px',
-          overflow: 'auto',
-          width: '100%',
-          whiteSpace: 'pre-wrap',
-          marginTop: '20px',
-        }}
-      >
-        {JSON.stringify(
-          { dataTimestamp: callDataTimestamp, secondsAgo: (Date.now() - callDataTimestamp) / 1000 },
-          null,
-          2,
-        )}
-      </pre>
     </div>
   )
 }
diff --git a/apps/earn-protocol-landing-page/next.config.mjs b/apps/earn-protocol-landing-page/next.config.mjs
@@ -6,6 +6,11 @@ const withNextIntl = createNextIntlPlugin()
 const nextConfig = {
   output: 'standalone',
   reactStrictMode: false,
+  webpack: (config) => {
+    config.externals.push('pino-pretty', 'encoding')
+
+    return config
+  },
   sassOptions: {
     prependData: `
         @import './node_modules/include-media/dist/_include-media.scss';

diff --git a/apps/earn-protocol/app/earn/[network]/details/[vaultId]/page.tsx b/apps/earn-protocol/app/earn/[network]/details/[vaultId]/page.tsx
@@ -2,6 +2,7 @@ import { StrategyGridDetails, subgraphNetworkToId } from '@summerfi/app-earn-ui'
 import { type SDKNetwork } from '@summerfi/app-types'
 
 import { getVaultDetails } from '@/app/server-handlers/sdk/getVaultDetails'
+import { getVaultsList } from '@/app/server-handlers/sdk/getVaultsList'
 import { StrategyDetailsView } from '@/components/layout/StrategyDetailsView/StrategyDetailsView'
 
 type EarnStrategyDetailsPageProps = {
@@ -16,13 +17,16 @@ export const revalidate = 60
 const EarnStrategyDetailsPage = async ({ params }: EarnStrategyDetailsPageProps) => {
   const networkId = subgraphNetworkToId(params.network)
 
-  const selectedVault = await getVaultDetails({
-    vaultAddress: params.vaultId,
-    chainId: networkId,
-  })
+  const [selectedVault, { vaults: strategiesList }] = await Promise.all([
+    getVaultDetails({
+      vaultAddress: params.vaultId,
+      chainId: networkId,
+    }),
+    getVaultsList(),
+  ])
 
   return (
-    <StrategyGridDetails strategy={selectedVault}>
+    <StrategyGridDetails strategy={selectedVault} strategies={strategiesList}>
       <StrategyDetailsView />
     </StrategyGridDetails>
   )

diff --git a/apps/earn-protocol/app/earn/[network]/page.tsx b/apps/earn-protocol/app/earn/[network]/page.tsx
@@ -12,32 +12,9 @@ type EarnNetworkStrategiesPageProps = {
 export const revalidate = 60
 
 const EarnNetworkStrategiesPage = async ({ params }: EarnNetworkStrategiesPageProps) => {
-  const { vaults, callDataTimestamp } = await getVaultsList()
+  const { vaults } = await getVaultsList()
 
-  return (
-    <>
-      <StrategiesListView strategiesList={vaults} selectedNetwork={params.network} />
-      <pre
-        style={{
-          backgroundColor: 'rgba(30,30,30,0.5)',
-          backdropFilter: 'blur(30px)',
-          color: 'rgba(180,180,180,1)',
-          padding: '16px',
-          borderRadius: '8px',
-          overflow: 'auto',
-          width: '100%',
-          whiteSpace: 'pre-wrap',
-          marginTop: '20px',
-        }}
-      >
-        {JSON.stringify(
-          { dataTimestamp: callDataTimestamp, secondsAgo: (Date.now() - callDataTimestamp) / 1000 },
-          null,
-          2,
-        )}
-      </pre>
-    </>
-  )
+  return <StrategiesListView strategiesList={vaults} selectedNetwork={params.network} />
 }
 
 export default EarnNetworkStrategiesPage
diff --git a/apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsx b/apps/earn-protocol/app/earn/[network]/position/[vaultId]/page.tsx
@@ -170,9 +170,9 @@ const detailsLinks = [
 export const revalidate = 60
 
 const EarnStrategyOpenManagePage = async ({ params }: EarnStrategyOpenManagePageProps) => {
-  const networkId = subgraphNetworkToId(params.network as SDKNetwork)
+  const networkId = subgraphNetworkToId(params.network)
 
-  const [selectedVault, { vaults, callDataTimestamp }] = await Promise.all([
+  const [selectedVault, { vaults }] = await Promise.all([
     getVaultDetails({
       vaultAddress: params.vaultId,
       chainId: networkId,
@@ -189,132 +189,112 @@ const EarnStrategyOpenManagePage = async ({ params }: EarnStrategyOpenManagePage
   }
 
   return (
-    <>
-      <StrategyGridPreview
-        strategy={selectedVault}
-        strategies={vaults}
-        leftContent={
+    <StrategyGridPreview
+      strategy={selectedVault}
+      strategies={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-x-large)',
-              width: '100%',
+              gap: 'var(--spacing-space-medium)',
             }}
           >
+            <Text variant="h5">About the strategy</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: 'column',
-                gap: 'var(--spacing-space-medium)',
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                flexWrap: 'wrap',
+                gap: 'var(--general-space-24)',
               }}
             >
-              <Text variant="h5">About the strategy</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: 'space-between',
-                }}
-              >
-                {detailsLinks.map(({ label, id }) => (
-                  <Link key={label} href={`${getStrategyDetailsUrl(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>
+              {detailsLinks.map(({ label, id }) => (
+                <Link key={label} href={`${getStrategyDetailsUrl(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>
-            <Expander
-              title={
-                <Text as="p" variant="p1semi">
-                  Historical yield
-                </Text>
-              }
-              defaultExpanded
-            >
-              <MockedLineChart />
-            </Expander>
-            <Expander
-              title={
-                <Text as="p" variant="p1semi">
-                  Strategy exposure
-                </Text>
-              }
-              defaultExpanded
-            >
-              <StrategyExposure rawData={strategyExposureRawData} />
-            </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}
-            selectedStrategyData={selectedVault}
-            strategiesList={vaults}
-          />
-        }
-      />
-
-      <pre
-        style={{
-          backgroundColor: 'rgba(30,30,30,0.5)',
-          backdropFilter: 'blur(30px)',
-          color: 'rgba(180,180,180,1)',
-          padding: '16px',
-          borderRadius: '8px',
-          overflow: 'auto',
-          width: '100%',
-          whiteSpace: 'pre-wrap',
-          marginTop: '20px',
-        }}
-      >
-        {JSON.stringify(
-          { dataTimestamp: callDataTimestamp, secondsAgo: (Date.now() - callDataTimestamp) / 1000 },
-          null,
-          2,
-        )}
-      </pre>
-    </>
+          <Expander
+            title={
+              <Text as="p" variant="p1semi">
+                Historical yield
+              </Text>
+            }
+            defaultExpanded
+          >
+            <MockedLineChart />
+          </Expander>
+          <Expander
+            title={
+              <Text as="p" variant="p1semi">
+                Strategy exposure
+              </Text>
+            }
+            defaultExpanded
+          >
+            <StrategyExposure rawData={strategyExposureRawData} />
+          </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}
+          selectedStrategyData={selectedVault}
+          strategiesList={vaults}
+        />
+      }
+    />
   )
 }
 

diff --git a/apps/earn-protocol/app/earn/page.tsx b/apps/earn-protocol/app/earn/page.tsx
@@ -4,32 +4,9 @@ import { StrategiesListView } from '@/components/layout/StrategiesListView/Strat
 export const revalidate = 60
 
 const EarnAllStrategiesPage = async () => {
-  const { vaults, callDataTimestamp } = await getVaultsList()
+  const { vaults } = await getVaultsList()
 
-  return (
-    <>
-      <StrategiesListView strategiesList={vaults} />
-      <pre
-        style={{
-          backgroundColor: 'rgba(30,30,30,0.5)',
-          backdropFilter: 'blur(30px)',
-          color: 'rgba(180,180,180,1)',
-          padding: '16px',
-          borderRadius: '8px',
-          overflow: 'auto',
-          width: '100%',
-          whiteSpace: 'pre-wrap',
-          marginTop: '20px',
-        }}
-      >
-        {JSON.stringify(
-          { dataTimestamp: callDataTimestamp, secondsAgo: (Date.now() - callDataTimestamp) / 1000 },
-          null,
-          2,
-        )}
-      </pre>
-    </>
-  )
+  return <StrategiesListView strategiesList={vaults} />
 }
 
 export default EarnAllStrategiesPage