Earn protocol WIP #21 (#560)

Co-authored-by: sebastianPiekarczyk <sebastian@oazoapps.com>

apps/earn-protocol-landing-page/components/layout/Navigation/NavigationWrapper.tsx

@@ -24,7 +24,7 @@ export const NavigationWrapper: FC = () => {
           id: 'explore',
           itemsList: [
             {
-              url: '/user-activity',
+              url: '/earn/user-activity',
               id: 'user-activity',
               title: 'User activity',
               description: 'Text for user activity',

apps/earn-protocol/app/earn/portfolio/[wallet_address]/page.tsx → apps/earn-protocol/app/earn/portfolio/[walletAddress]/page.tsx

@@ -1,25 +1,28 @@
 import { portfolioRewardsHandler } from '@/app/server-handlers/portfolio/portfolio-rewards-handler'
 import { portfolioWalletAssetsHandler } from '@/app/server-handlers/portfolio/portfolio-wallet-assets-handler'
+import { getUserPositions } from '@/app/server-handlers/sdk/get-user-positions'
 import { getVaultsList } from '@/app/server-handlers/sdk/get-vaults-list'
 import { PortfolioPageView } from '@/components/layout/PortfolioPageView/PortfolioPageView'
 
 type PortfolioPageProps = {
   params: {
-    wallet_address: string
+    walletAddress: string
   }
 }
 
 const PortfolioPage = async ({ params }: PortfolioPageProps) => {
-  const walletAddress = params.wallet_address
+  const { walletAddress } = params
 
-  const [walletData, { vaults }] = await Promise.all([
+  const [walletData, { vaults }, positions] = await Promise.all([
     portfolioWalletAssetsHandler(walletAddress),
     await getVaultsList(),
+    await getUserPositions({ walletAddress }),
   ])
   const rewardsData = portfolioRewardsHandler(walletAddress)
 
   return (
     <PortfolioPageView
+      positions={positions ?? []}
       walletAddress={walletAddress}
       walletData={walletData}
       rewardsData={rewardsData}

apps/earn-protocol/app/page.tsx

@@ -15,7 +15,7 @@ export default function HomePage() {
       }}
     >
       <Text as="p" variant="p2">
-        I love you ❤️❤️
+        I love you ❤️
         <br /> <br />
         BTW you are probably looking for the{' '}
         <Link href="/earn" style={{ display: 'inline', color: 'var(--color-text-link)' }}>

apps/earn-protocol/app/server-handlers/sdk/get-user-positions.ts

@@ -0,0 +1,37 @@
+import { sdkSupportedNetworks } from '@summerfi/app-types'
+import { type IArmadaPosition } from '@summerfi/sdk-client-react'
+import { Address, getChainInfoByChainId, User, Wallet } from '@summerfi/sdk-common'
+
+import { backendSDK } from '@/app/server-handlers/sdk/sdk-backend-client'
+
+export async function getUserPositions({ walletAddress }: { walletAddress: string }) {
+  try {
+    const userPositionsAllNetworksCalls = await Promise.all(
+      sdkSupportedNetworks.map(async (chainId) => {
+        const chainInfo = getChainInfoByChainId(chainId)
+
+        const wallet = Wallet.createFrom({
+          address: Address.createFromEthereum({
+            value: walletAddress.toLowerCase(),
+          }),
+        })
+        const user = User.createFrom({
+          chainInfo,
+          wallet,
+        })
+
+        return await backendSDK.armada.users.getUserPositions({
+          user,
+        })
+      }),
+    )
+
+    const positionsList = userPositionsAllNetworksCalls
+      .filter(Boolean)
+      .reduce((acc, position) => [...acc, ...position], [])
+
+    return positionsList as IArmadaPosition[] | undefined
+  } catch (error) {
+    throw new Error(`Failed to get users positions: ${error}`)
+  }
+}

apps/earn-protocol/components/layout/Navigation/NavigationWrapper.tsx

@@ -45,7 +45,7 @@ export const NavigationWrapper: FC = () => {
           id: 'explore',
           itemsList: [
             {
-              url: '/user-activity',
+              url: '/earn/user-activity',
               id: 'user-activity',
               title: 'User activity',
               description: 'Text for user activity',

apps/earn-protocol/components/layout/PortfolioPageView/PortfolioPageView.tsx

@@ -3,6 +3,7 @@
 import { type FC } from 'react'
 import { TabBar } from '@summerfi/app-earn-ui'
 import { type SDKVaultsListType } from '@summerfi/app-types'
+import { type IArmadaPosition } from '@summerfi/sdk-client-react'
 
 import { type PortfolioRewardsRawData } from '@/app/server-handlers/portfolio/portfolio-rewards-handler'
 import { type PortfolioAssetsResponse } from '@/app/server-handlers/portfolio/portfolio-wallet-assets-handler'
@@ -17,19 +18,21 @@ interface PortfolioPageViewProps {
   walletData: PortfolioAssetsResponse
   rewardsData: PortfolioRewardsRawData[]
   vaultsList: SDKVaultsListType
+  positions: IArmadaPosition[]
 }
 
 export const PortfolioPageView: FC<PortfolioPageViewProps> = ({
   walletAddress,
   walletData,
   rewardsData,
   vaultsList,
+  positions,
 }) => {
   const tabs = [
     {
       id: 'overview',
       label: 'Overview',
-      content: <PortfolioOverview vaultsList={vaultsList} />,
+      content: <PortfolioOverview positions={positions} vaultsList={vaultsList} />,
     },
     {
       id: 'wallet',

apps/earn-protocol/components/layout/VaultManageView/VaultManageView.tsx

@@ -2,8 +2,8 @@
 
 import {
   type SDKUsersActivityType,
-  type SDKVaultishType,
   type SDKVaultsListType,
+  type SDKVaultType,
   type UsersActivity,
 } from '@summerfi/app-types'
 import { type IArmadaPosition, SDKContextProvider } from '@summerfi/sdk-client-react'
@@ -19,7 +19,7 @@ export const VaultManageView = ({
   topDepositors,
   viewWalletAddress,
 }: {
-  vault: SDKVaultishType
+  vault: SDKVaultType
   vaults: SDKVaultsListType
   position: IArmadaPosition
   userActivity: UsersActivity

apps/earn-protocol/components/layout/VaultManageView/VaultManageViewComponent.tsx

@@ -15,22 +15,21 @@ import {
 import {
   type DropdownOption,
   type SDKUsersActivityType,
-  type SDKVaultishType,
   type SDKVaultsListType,
+  type SDKVaultType,
   type TokenSymbolsList,
   type UsersActivity,
 } from '@summerfi/app-types'
 import { formatCryptoBalance } from '@summerfi/app-utils'
 import { type IArmadaPosition } from '@summerfi/sdk-client-react'
 import { capitalize } from 'lodash-es'
 
-import { vaultExposureRawData } from '@/components/layout/VaultOpenView/mocks'
 import { TransactionHashPill } from '@/components/molecules/TransactionHashPill/TransactionHashPill'
 import { HistoricalYieldChart } from '@/components/organisms/Charts/HistoricalYieldChart'
-import { RebalancingActivity } from '@/components/organisms/RebalancingActivity/RebalancingActivity'
-import { UserActivity } from '@/components/organisms/UserActivity/UserActivity'
-import { VaultExposure } from '@/components/organisms/VaultExposure/VaultExposure'
 import { TransactionAction } from '@/constants/transaction-actions'
+import { RebalancingActivity } from '@/features/rebalance-activity/components/RebalancingActivity/RebalancingActivity'
+import { UserActivity } from '@/features/user-activity/components/UserActivity/UserActivity'
+import { VaultExposure } from '@/features/vault-exposure/components/VaultExposure/VaultExposure'
 import { useAmount } from '@/hooks/use-amount'
 import { useClient } from '@/hooks/use-client'
 import { useTransaction } from '@/hooks/use-transaction'
@@ -45,7 +44,7 @@ export const VaultManageViewComponent = ({
   topDepositors,
   viewWalletAddress,
 }: {
-  vault: SDKVaultishType
+  vault: SDKVaultType
   vaults: SDKVaultsListType
   position: IArmadaPosition
   userActivity: UsersActivity
@@ -181,7 +180,7 @@ export const VaultManageViewComponent = ({
             }
             defaultExpanded
           >
-            <VaultExposure rawData={vaultExposureRawData} />
+            <VaultExposure vault={vault} />
           </Expander>
           <Expander
             title={

apps/earn-protocol/components/layout/VaultOpenView/VaultOpenView.tsx

@@ -2,8 +2,8 @@
 
 import {
   type SDKUsersActivityType,
-  type SDKVaultishType,
   type SDKVaultsListType,
+  type SDKVaultType,
   type UsersActivity,
 } from '@summerfi/app-types'
 import { SDKContextProvider } from '@summerfi/sdk-client-react'
@@ -17,7 +17,7 @@ export const VaultOpenView = ({
   userActivity,
   topDepositors,
 }: {
-  vault: SDKVaultishType
+  vault: SDKVaultType
   vaults: SDKVaultsListType
   userActivity: UsersActivity
   topDepositors: SDKUsersActivityType

apps/earn-protocol/components/layout/VaultOpenView/VaultOpenViewComponent.tsx

@@ -13,23 +13,23 @@ import {
 import {
   type DropdownOption,
   type SDKUsersActivityType,
-  type SDKVaultishType,
   type SDKVaultsListType,
+  type SDKVaultType,
   type TokenSymbolsList,
   type UsersActivity,
 } from '@summerfi/app-types'
 import { formatCryptoBalance } from '@summerfi/app-utils'
 import { capitalize } from 'lodash-es'
 
-import { detailsLinks, vaultExposureRawData } from '@/components/layout/VaultOpenView/mocks'
+import { detailsLinks } from '@/components/layout/VaultOpenView/mocks'
 import { VaultOpenHeaderBlock } from '@/components/layout/VaultOpenView/VaultOpenHeaderBlock'
 import { VaultSimulationGraph } from '@/components/layout/VaultOpenView/VaultSimulationGraph'
 import { TransactionHashPill } from '@/components/molecules/TransactionHashPill/TransactionHashPill'
 import { HistoricalYieldChart } from '@/components/organisms/Charts/HistoricalYieldChart'
-import { RebalancingActivity } from '@/components/organisms/RebalancingActivity/RebalancingActivity'
-import { UserActivity } from '@/components/organisms/UserActivity/UserActivity'
-import { VaultExposure } from '@/components/organisms/VaultExposure/VaultExposure'
 import { TransactionAction } from '@/constants/transaction-actions'
+import { RebalancingActivity } from '@/features/rebalance-activity/components/RebalancingActivity/RebalancingActivity'
+import { UserActivity } from '@/features/user-activity/components/UserActivity/UserActivity'
+import { VaultExposure } from '@/features/vault-exposure/components/VaultExposure/VaultExposure'
 import { useAmount } from '@/hooks/use-amount'
 import { useClient } from '@/hooks/use-client'
 import { usePosition } from '@/hooks/use-position'
@@ -44,7 +44,7 @@ export const VaultOpenViewComponent = ({
   userActivity,
   topDepositors,
 }: {
-  vault: SDKVaultishType
+  vault: SDKVaultType
   vaults: SDKVaultsListType
   userActivity: UsersActivity
   topDepositors: SDKUsersActivityType
@@ -172,7 +172,7 @@ export const VaultOpenViewComponent = ({
             }
             defaultExpanded
           >
-            <VaultExposure rawData={vaultExposureRawData} />
+            <VaultExposure vault={vault} />
           </Expander>
           <Expander
             title={

apps/earn-protocol/components/layout/VaultOpenView/mocks.ts

@@ -1,52 +1,3 @@
-import { type VaultExposureRawData } from '@/components/organisms/VaultExposure/VaultExposure'
-
-export 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',
-  },
-]
-
 export const detailsLinks = [
   {
     label: 'How it all works',

apps/earn-protocol/features/portfolio/components/PortfolioOverview/PortfolioOverview.tsx

@@ -1,5 +1,6 @@
 import { Card, DataBlock, Text, WithArrow } from '@summerfi/app-earn-ui'
 import { type SDKVaultsListType } from '@summerfi/app-types'
+import { type IArmadaPosition } from '@summerfi/sdk-client-react'
 import Link from 'next/link'
 
 import { MockedLineChart } from '@/components/organisms/Charts/MockedLineChart'
@@ -54,7 +55,12 @@ const dataBlocks = [
   },
 ]
 
-export const PortfolioOverview = ({ vaultsList }: { vaultsList: SDKVaultsListType }) => {
+type PortfolioOverviewProps = {
+  vaultsList: SDKVaultsListType
+  positions: IArmadaPosition[]
+}
+
+export const PortfolioOverview = ({ vaultsList, positions }: PortfolioOverviewProps) => {
   return (
     <div>
       <div
@@ -88,6 +94,7 @@ export const PortfolioOverview = ({ vaultsList }: { vaultsList: SDKVaultsListTyp
         </Card>
         <NewsAndUpdates items={dummyNewsAndUpdatesItems} />
         <CryptoUtilities />
+        <pre>{JSON.stringify(positions, null, 2)}</pre>
       </div>
     </div>
   )