Earn Protocol WIP #9 (#536)

8 of N pull requests.  ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced a new `PortfolioPage` component to display user portfolio information. - Added `PortfolioPageView` component for structured financial data presentation. - **Improvements** - Enhanced the `HomePage` layout for better readability and organization. - Updated styles for improved user experience across components. - **Bug Fixes** - Removed unnecessary debug information from the `Form` component. - **Dependency Updates** - Upgraded several `@account-kit` dependencies to stable versions. - Updated `vite` and `vite-plugin-dts` versions across multiple packages for improved performance.  --------- Co-authored-by: Marcin Ciarka <marcin@oazoapps.com>
OasisDEX · Oct 17, 2024 · 9c978c1 · 9c978c1
1 parent b00e22d
commit 9c978c1
Show file tree

Hide file tree

Showing 131 changed files with 1,419 additions and 519 deletions.
diff --git a/__template-package__/package.json b/__template-package__/package.json
@@ -17,7 +17,7 @@
     "e2e": "jest e2e/",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "build": "tsc -b -v tsconfig.build.json",
+    "build": "tsc -b --preserveWatchOutput -v tsconfig.build.json",
     "bundle": "esbuild src/index.ts --bundle --minify --platform=node --target=node20 --outfile=dist/index.js --sourcemap"
   },
   "dependencies": {

diff --git a/apps/earn-protocol/app/layout.tsx b/apps/earn-protocol/app/layout.tsx
@@ -42,15 +42,15 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <GlobalStyles />
       </head>
       <body className={` ${fontInter.variable}`} style={{ backgroundColor: '#1B1B1B' }}>
-        <NextIntlClientProvider messages={messages}>
-          <AlchemyAccountsProvider
-            initialState={accountKitInitialState}
-            chainId={chainId}
-            forkRpcUrl={forkRpcUrl}
-          >
+        <AlchemyAccountsProvider
+          initialState={accountKitInitialState}
+          chainId={chainId}
+          forkRpcUrl={forkRpcUrl}
+        >
+          <NextIntlClientProvider messages={messages}>
             <MasterPage>{children}</MasterPage>
-          </AlchemyAccountsProvider>
-        </NextIntlClientProvider>
+          </NextIntlClientProvider>
+        </AlchemyAccountsProvider>
         <div id="portal" style={{ position: 'absolute' }} />
       </body>
     </html>

diff --git a/apps/earn-protocol/app/page.tsx b/apps/earn-protocol/app/page.tsx
@@ -1,10 +1,27 @@
+import { Text } from '@summerfi/app-earn-ui'
 import Link from 'next/link'
 
 export default function HomePage() {
   return (
-    <div style={{ display: 'flex', gap: '8px', flexDirection: 'column', alignItems: 'center' }}>
-      Hello 🙌 If youre seeing this page, it means that the app is running correctly. Have a great
-      day, I love you ❤️ BTW you are probably looking for <Link href="/earn">Earn page</Link>
+    <div
+      style={{
+        display: 'flex',
+        gap: '8px',
+        flexDirection: 'column',
+        alignItems: 'center',
+        textAlign: 'center',
+      }}
+    >
+      <Text as="p" variant="p2">
+        Hello 🙌 If youre seeing this page, it means that the app is running correctly.
+        <br />
+        Have a great day, I love you ❤️
+        <br /> <br />
+        BTW you are probably looking for the{' '}
+        <Link href="/earn" style={{ display: 'inline', color: 'var(--color-text-link)' }}>
+          Earn page
+        </Link>
+      </Text>
     </div>
   )
 }
diff --git a/apps/earn-protocol/app/portfolio/[wallet_address]/page.tsx b/apps/earn-protocol/app/portfolio/[wallet_address]/page.tsx
@@ -0,0 +1,13 @@
+import { PortfolioPageView } from '@/components/layout/PortfolioPageView/PortfolioPageView'
+
+type PortfolioPageProps = {
+  params: {
+    wallet_address: string
+  }
+}
+
+const PortfolioPage = ({ params }: PortfolioPageProps) => {
+  return <PortfolioPageView walletAddress={params.wallet_address} />
+}
+
+export default PortfolioPage
diff --git a/apps/earn-protocol/components/layout/PortfolioPageView/PortfolioPageView.tsx b/apps/earn-protocol/components/layout/PortfolioPageView/PortfolioPageView.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { type FC } from 'react'
+import { TabBar } from '@summerfi/app-earn-ui'
+
+import { PortfolioHeader } from '@/features/portfolio/PortfolioHeader/PortfolioHeader'
+import { PortfolioOverview } from '@/features/portfolio/PortfolioOverview/PortfolioOverview'
+
+const tabs = [
+  { label: 'Overview', content: <PortfolioOverview /> },
+  { label: 'Wallet', content: <div>Wallet content here</div> },
+  { label: 'Rebalance Activity', content: <div>Rebalance content here</div> },
+  { label: 'Rewards', content: <div>Rewards content here</div> },
+]
+
+interface PortfolioPageViewProps {
+  walletAddress: string
+}
+
+export const PortfolioPageView: FC<PortfolioPageViewProps> = ({ walletAddress }) => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <PortfolioHeader walletAddress={walletAddress} />
+      <TabBar tabs={tabs} />
+    </div>
+  )
+}
diff --git a/apps/earn-protocol/components/molecules/TransakWidget/TransakWidget.tsx b/apps/earn-protocol/components/molecules/TransakWidget/TransakWidget.tsx
@@ -48,10 +48,10 @@ export const TransakWidget = () => {
   const [fiatAmount, setFiatAmount] = useState<string>('')
 
   useEffect(() => {
-    if (user?.email) {
+    if (user?.email && email === '') {
       setEmail(user.email)
     }
-  }, [user?.email])
+  }, [user?.email, email])
 
   if (!user) {
     return null

diff --git a/apps/earn-protocol/components/organisms/Form/Form.tsx b/apps/earn-protocol/components/organisms/Form/Form.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { type ChangeEvent, useState } from 'react'
-import { Box, Sidebar, SidebarFootnote, sidebarFootnote, Text } from '@summerfi/app-earn-ui'
+import { Sidebar, SidebarFootnote, sidebarFootnote } from '@summerfi/app-earn-ui'
 import { type DropdownOption } from '@summerfi/app-types'
 import { mapNumericInput } from '@summerfi/app-utils'
 import { capitalize } from 'lodash-es'
@@ -73,23 +73,6 @@ const Form = ({ fleetConfig: _fleetConfig, selectedStrategyData }: FormProps) =>
   return (
     <div>
       <Sidebar {...sidebarProps} />
-      {selectedStrategyData && (
-        <Box
-          style={{
-            marginTop: 'var(--general-space-16)',
-            minWidth: '100%',
-            flexDirection: 'column',
-          }}
-          light
-        >
-          <Text variant="p4semi" style={{ textAlign: 'center' }}>
-            DEBUG - Loaded Strategy Data
-          </Text>
-          <pre style={{ padding: '10px', margin: 0, fontSize: '12px' }}>
-            {JSON.stringify(selectedStrategyData, null, 2)}
-          </pre>
-        </Box>
-      )}
     </div>
   )
 }

diff --git a/apps/earn-protocol/features/portfolio/PortfolioHeader/PortfolioHeader.tsx b/apps/earn-protocol/features/portfolio/PortfolioHeader/PortfolioHeader.tsx
@@ -0,0 +1,72 @@
+import { type FC } from 'react'
+import { Button, DataBlock, Icon, Text } from '@summerfi/app-earn-ui'
+import { formatAddress } from '@summerfi/app-utils'
+
+interface PortfolioHeaderProps {
+  walletAddress: string
+}
+
+export const PortfolioHeader: FC<PortfolioHeaderProps> = ({ walletAddress }) => {
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+        }}
+      >
+        <Text as="h2" variant="h2">
+          Portfolio
+        </Text>
+        <div style={{ display: 'flex', gap: 'var(--spacing-space-x-small)' }}>
+          <Button variant="secondaryLarge" style={{ minWidth: 'unset' }}>
+            Send
+          </Button>
+          <Button variant="secondaryLarge" style={{ minWidth: 'unset' }}>
+            Swap
+          </Button>
+          <Button variant="primaryLarge" style={{ minWidth: '156px' }}>
+            Add funds
+            <Icon iconName="chevron_down" color="rgba(255, 251, 253, 1)" variant="xs" />
+          </Button>
+        </div>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          marginTop: 'var(--general-space-40)',
+          marginBottom: 'var(--general-space-40)',
+        }}
+      >
+        <div style={{ display: 'flex', gap: 'var(--spacing-space-x-small)', alignItems: 'center' }}>
+          <Icon iconName="question_o" color="rgba(255, 73, 164, 1)" />
+          <Text as="p" variant="p1semi">
+            {formatAddress(walletAddress, { first: 6 })}
+          </Text>
+          <Icon iconName="edit" color="rgba(255, 73, 164, 1)" variant="s" />
+        </div>
+        <div style={{ display: 'flex', gap: 'var(--spacing-space-large)', alignItems: 'center' }}>
+          <DataBlock
+            title="Total $SUMR"
+            value="313"
+            titleSize="large"
+            valueSize="large"
+            valueStyle={{ textAlign: 'right' }}
+          />
+          <DataBlock
+            title="Total Wallet Value"
+            value="$2.3m"
+            titleSize="large"
+            valueSize="large"
+            valueStyle={{ textAlign: 'right' }}
+          />
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/earn-protocol/features/portfolio/PortfolioOverview/PortfolioOverview.tsx b/apps/earn-protocol/features/portfolio/PortfolioOverview/PortfolioOverview.tsx
@@ -0,0 +1,95 @@
+import {
+  Card,
+  DataBlock,
+  Icon,
+  SlideCarousel,
+  StrategyCard,
+  Text,
+  WithArrow,
+} from '@summerfi/app-earn-ui'
+import Link from 'next/link'
+
+import { MockedLineChart } from '@/components/organisms/Charts/MockedLineChart'
+import { strategiesList } from '@/constants/dev-strategies-list'
+
+const dataBlocks = [
+  {
+    title: 'Total Summer.fi Portfolio',
+    value: '$100,233.32',
+    gradient: 'var(--gradient-earn-protocol-light)',
+    titleColor: 'var(--earn-protocol-secondary-60)',
+  },
+  {
+    title: 'SUMR Token Rewards',
+    value: '45,232 $SUMR',
+  },
+  {
+    title: 'Available to Migrate',
+    value: '$1002,322,32',
+    subValue: (
+      <Link href="/">
+        <WithArrow as="p" variant="p3semi" style={{ color: 'var(--earn-protocol-primary-100)' }}>
+          Migrate
+        </WithArrow>
+      </Link>
+    ),
+  },
+]
+
+export const PortfolioOverview = () => {
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          gap: 'var(--general-space-16)',
+          flexWrap: 'wrap',
+        }}
+      >
+        {dataBlocks.map((item) => (
+          <Card key={item.title} style={{ flex: 1, background: item.gradient, minHeight: '142px' }}>
+            <DataBlock
+              title={item.title}
+              titleStyle={{ color: item.titleColor }}
+              value={item.value}
+              valueSize="large"
+              subValue={item.subValue}
+            />
+          </Card>
+        ))}
+        <Card style={{ flexDirection: 'column' }}>
+          <Text as="h5" variant="h5">
+            Positions
+          </Text>
+          <MockedLineChart />
+          <div style={{ width: '100%', marginTop: 'var(--general-space-24)' }}>
+            <SlideCarousel
+              slides={strategiesList.map((strategy) => (
+                <StrategyCard
+                  key={strategy.id}
+                  {...strategy}
+                  secondary
+                  withHover
+                  // eslint-disable-next-line no-console
+                  onClick={(item) => console.log('strategy clicked', item)}
+                />
+              ))}
+              options={{ slidesToScroll: 'auto' }}
+              title={
+                <div
+                  style={{ display: 'flex', gap: 'var(--general-space-8)', alignItems: 'center' }}
+                >
+                  <Icon iconName="stars" variant="s" color="rgba(255, 251, 253, 1)" />
+                  <Text as="p" variant="p3semi">
+                    You might like
+                  </Text>
+                </div>
+              }
+            />
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/earn-protocol/package.json b/apps/earn-protocol/package.json
@@ -10,10 +10,10 @@
     "lint-timing": "TIMING=1 eslint ."
   },
   "dependencies": {
-    "@account-kit/core": "^4.0.0-beta.10",
-    "@account-kit/infra": "^4.0.0-beta.10",
-    "@account-kit/react": "^4.0.0-beta.10",
-    "@account-kit/signer": "^4.0.0-beta.10",
+    "@account-kit/core": "^4.0.0",
+    "@account-kit/infra": "^4.0.0",
+    "@account-kit/react": "^4.0.0",
+    "@account-kit/signer": "^4.0.0",
     "@alchemy/aa-accounts": "3.19.0",
     "@alchemy/aa-alchemy": "3.19.0",
     "@alchemy/aa-core": "^3.19.0",

diff --git a/apps/earn-protocol/providers/AlchemyAccountsProvider/AlchemyAccountsProvider.tsx b/apps/earn-protocol/providers/AlchemyAccountsProvider/AlchemyAccountsProvider.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { type FC, type PropsWithChildren } from 'react'
+import { type FC, type PropsWithChildren, useMemo } from 'react'
 import { type AlchemyClientState } from '@account-kit/core'
 import { AlchemyAccountProvider } from '@account-kit/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -14,13 +14,11 @@ export const AlchemyAccountsProvider: FC<
     chainId?: number
   }>
 > = ({ initialState, forkRpcUrl, chainId, children }) => {
+  const config = useMemo(() => getAccountKitConfig({ forkRpcUrl, chainId }), [chainId, forkRpcUrl])
+
   return (
     <QueryClientProvider client={queryClient}>
-      <AlchemyAccountProvider
-        config={getAccountKitConfig({ forkRpcUrl, chainId })}
-        queryClient={queryClient}
-        initialState={initialState}
-      >
+      <AlchemyAccountProvider config={config} queryClient={queryClient} initialState={initialState}>
         {children}
       </AlchemyAccountProvider>
     </QueryClientProvider>

diff --git a/armada-protocol/abis/package.json b/armada-protocol/abis/package.json
@@ -18,7 +18,7 @@
     "watch": "tsc -w",
     "e2e": "jest e2e/",
     "testw": "jest --watch",
-    "build": "tsc -b tsconfig.build.json",
+    "build": "tsc -b --preserveWatchOutput tsconfig.build.json",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "genindex": "rm -f src/index.ts && for dir in ./src/*; do cti create ./$dir -b -w > /dev/null; done && cti ./src -b -w -e '.t.sol' -e 'build-info' -e 'MockERC721.sol'"

diff --git a/background-jobs/update-rays-cron-function/package.json b/background-jobs/update-rays-cron-function/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "scripts": {
     "test": "jest --passWithNoTests",
-    "build": "tsc -b -v",
+    "build": "tsc -b --preserveWatchOutput -v",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },

diff --git a/external-api/get-collateral-locked-function/package.json b/external-api/get-collateral-locked-function/package.json
@@ -5,7 +5,7 @@
     "tsc": "tsc",
     "watch": "tsc -w",
     "test": "jest --passWithNoTests",
-    "build": "tsc -b -v",
+    "build": "tsc -b --preserveWatchOutput -v",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },