From 76ca274f146be6ffeac07d92d9c4d47caa44683c Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Thu, 7 Nov 2024 13:50:42 +0100 Subject: [PATCH 01/10] Enhance portfolio page by parsing server response and updating positions handling; add armada protocol service dependency --- .../app/earn/portfolio/[walletAddress]/page.tsx | 8 +++++++- .../app/server-handlers/sdk/get-user-positions.ts | 2 ++ pnpm-lock.yaml | 3 +++ sdk/sdk-client/package.json | 1 + sdk/sdk-client/src/protocol-plugins-reexport.ts | 3 +++ sdk/sdk-common/src/services/SerializationService.ts | 1 + 6 files changed, 17 insertions(+), 1 deletion(-) diff --git a/apps/earn-protocol/app/earn/portfolio/[walletAddress]/page.tsx b/apps/earn-protocol/app/earn/portfolio/[walletAddress]/page.tsx index 4b7e67ac27..cfc4cef9b1 100644 --- a/apps/earn-protocol/app/earn/portfolio/[walletAddress]/page.tsx +++ b/apps/earn-protocol/app/earn/portfolio/[walletAddress]/page.tsx @@ -1,3 +1,6 @@ +import { parseServerResponseToClient } from '@summerfi/app-utils' +import { type IArmadaPosition } from '@summerfi/sdk-client-react' + 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' @@ -19,10 +22,13 @@ const PortfolioPage = async ({ params }: PortfolioPageProps) => { await getUserPositions({ walletAddress }), ]) const rewardsData = portfolioRewardsHandler(walletAddress) + const positionsJsonSafe = positions + ? parseServerResponseToClient(positions) + : [] return ( [...acc, ...position], []) + console.log('positionsList', JSON.stringify(positionsList, null, 2)) + return positionsList as IArmadaPosition[] | undefined } catch (error) { throw new Error(`Failed to get users positions: ${error}`) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1f2bedb33a..591d614db3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2653,6 +2653,9 @@ importers: '@summerfi/armada-protocol-common': specifier: workspace:* version: link:../armada-protocol-common + '@summerfi/armada-protocol-service': + specifier: workspace:* + version: link:../armada-protocol-service '@summerfi/protocol-plugins': specifier: workspace:* version: link:../protocol-plugins diff --git a/sdk/sdk-client/package.json b/sdk/sdk-client/package.json index 3273fa6d20..72908eac7e 100644 --- a/sdk/sdk-client/package.json +++ b/sdk/sdk-client/package.json @@ -23,6 +23,7 @@ "dependencies": { "@summerfi/protocol-plugins": "workspace:*", "@summerfi/armada-protocol-common": "workspace:*", + "@summerfi/armada-protocol-service": "workspace:*", "@summerfi/sdk-common": "workspace:*", "@summerfi/sdk-server": "workspace:*", "@trpc/client": "11.0.0-rc.502", diff --git a/sdk/sdk-client/src/protocol-plugins-reexport.ts b/sdk/sdk-client/src/protocol-plugins-reexport.ts index fbf0e7fbdf..83209bd2b5 100644 --- a/sdk/sdk-client/src/protocol-plugins-reexport.ts +++ b/sdk/sdk-client/src/protocol-plugins-reexport.ts @@ -40,3 +40,6 @@ export { SparkProtocol, type ISparkProtocol, } from '@summerfi/protocol-plugins/plugins/spark' + +// another workaround to re-export the protocol service - FE needs classes for superjson to be registered +export * from '@summerfi/armada-protocol-service' diff --git a/sdk/sdk-common/src/services/SerializationService.ts b/sdk/sdk-common/src/services/SerializationService.ts index 6639bc3474..fd46f69c6b 100644 --- a/sdk/sdk-common/src/services/SerializationService.ts +++ b/sdk/sdk-common/src/services/SerializationService.ts @@ -8,6 +8,7 @@ export type Class = object export class SerializationService { static registerClass(v: Class, options?: string | RegisterOptions | undefined): void { + console.log('SerializationService registerClass', v, options) // eslint-disable-next-line @typescript-eslint/no-explicit-any superjson.registerClass(v as any, options) } From 5643d1f23c00f47730d3aadb9f2667b74c3a1664 Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Thu, 7 Nov 2024 14:10:28 +0100 Subject: [PATCH 02/10] Remove debug logging from getUserPositions function --- .../earn-protocol/app/server-handlers/sdk/get-user-positions.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/earn-protocol/app/server-handlers/sdk/get-user-positions.ts b/apps/earn-protocol/app/server-handlers/sdk/get-user-positions.ts index 2d75ea07ab..56a0d894ba 100644 --- a/apps/earn-protocol/app/server-handlers/sdk/get-user-positions.ts +++ b/apps/earn-protocol/app/server-handlers/sdk/get-user-positions.ts @@ -30,8 +30,6 @@ export async function getUserPositions({ walletAddress }: { walletAddress: strin .filter(Boolean) .reduce((acc, position) => [...acc, ...position], []) - console.log('positionsList', JSON.stringify(positionsList, null, 2)) - return positionsList as IArmadaPosition[] | undefined } catch (error) { throw new Error(`Failed to get users positions: ${error}`) From 1ae275b7fa8d936d32ce5a165b36f5030f5fc659 Mon Sep 17 00:00:00 2001 From: sebastianPiekarczyk Date: Thu, 7 Nov 2024 14:44:15 +0100 Subject: [PATCH 03/10] tables mobile handling --- .../RebalanceActivityTable.tsx | 12 +++-- .../rebalance-activity/table/columns.ts | 7 +++ .../TopDepositorsTable/TopDepositorsTable.tsx | 12 +++-- .../UserActivityTable/UserActivityTable.tsx | 12 +++-- .../table/top-depositors-columns.ts | 8 +++ .../table/user-activity-columns.ts | 2 + .../VaultExposureTable/VaultExposureTable.tsx | 12 +++-- .../features/vault-exposure/table/columns.tsx | 2 + .../organisms/Table/Table.module.scss | 40 --------------- .../app-earn-ui/src/hooks/use-mobile-check.ts | 49 +++++++++++++++++++ packages/app-earn-ui/src/index.ts | 1 + 11 files changed, 105 insertions(+), 52 deletions(-) create mode 100644 packages/app-earn-ui/src/hooks/use-mobile-check.ts diff --git a/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityTable/RebalanceActivityTable.tsx b/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityTable/RebalanceActivityTable.tsx index 1a409f9e9d..8eb11f8d3a 100644 --- a/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityTable/RebalanceActivityTable.tsx +++ b/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityTable/RebalanceActivityTable.tsx @@ -1,8 +1,11 @@ import { type FC, type ReactNode, useMemo, useState } from 'react' -import { Table, type TableSortedColumn } from '@summerfi/app-earn-ui' +import { Table, type TableSortedColumn, useMobileCheck } from '@summerfi/app-earn-ui' import { type SDKGlobalRebalancesType } from '@summerfi/app-types' -import { rebalancingActivityColumns } from '@/features/rebalance-activity/table/columns' +import { + rebalancingActivityColumns, + rebalancingActivityColumnsHiddenOnMobile, +} from '@/features/rebalance-activity/table/columns' import { rebalancingActivityMapper } from '@/features/rebalance-activity/table/mapper' interface RebalanceActivityTableProps { @@ -22,19 +25,22 @@ export const RebalanceActivityTable: FC = ({ rowsToDisplay, }) => { const [sortConfig, setSortConfig] = useState>() + const { isMobile } = useMobileCheck() const rows = useMemo( () => rebalancingActivityMapper(rebalancesList, sortConfig), [rebalancesList, sortConfig], ) + const resolvedHiddenColumns = isMobile ? rebalancingActivityColumnsHiddenOnMobile : hiddenColumns + return ( setSortConfig(_sortConfig)} - hiddenColumns={hiddenColumns} + hiddenColumns={resolvedHiddenColumns} /> ) } diff --git a/apps/earn-protocol/features/rebalance-activity/table/columns.ts b/apps/earn-protocol/features/rebalance-activity/table/columns.ts index d53e039f2d..39d553e66c 100644 --- a/apps/earn-protocol/features/rebalance-activity/table/columns.ts +++ b/apps/earn-protocol/features/rebalance-activity/table/columns.ts @@ -30,3 +30,10 @@ export const rebalancingActivityColumns = [ sortable: false, }, ] + +export const rebalancingActivityColumnsHiddenOnMobile = [ + 'amount', + 'strategy', + 'timestamp', + 'provider', +] diff --git a/apps/earn-protocol/features/user-activity/components/TopDepositorsTable/TopDepositorsTable.tsx b/apps/earn-protocol/features/user-activity/components/TopDepositorsTable/TopDepositorsTable.tsx index b4e07adf43..d30ab866ab 100644 --- a/apps/earn-protocol/features/user-activity/components/TopDepositorsTable/TopDepositorsTable.tsx +++ b/apps/earn-protocol/features/user-activity/components/TopDepositorsTable/TopDepositorsTable.tsx @@ -1,8 +1,11 @@ import { type FC, type ReactNode, useMemo, useState } from 'react' -import { Table, type TableSortedColumn } from '@summerfi/app-earn-ui' +import { Table, type TableSortedColumn, useMobileCheck } from '@summerfi/app-earn-ui' import { type SDKUsersActivityType } from '@summerfi/app-types' -import { topDepositorsColumns } from '@/features/user-activity/table/top-depositors-columns' +import { + topDepositorsColumns, + topDepositorsColumnsHiddenOnMobile, +} from '@/features/user-activity/table/top-depositors-columns' import { topDepositorsMapper } from '@/features/user-activity/table/top-depositors-mapper' interface TopDepositorsTableProps { @@ -22,19 +25,22 @@ export const TopDepositorsTable: FC = ({ rowsToDisplay, }) => { const [sortConfig, setSortConfig] = useState>() + const { isMobile } = useMobileCheck() const rows = useMemo( () => topDepositorsMapper(topDepositorsList, sortConfig), [topDepositorsList, sortConfig], ) + const resolvedHiddenColumns = isMobile ? topDepositorsColumnsHiddenOnMobile : hiddenColumns + return (
setSortConfig(_sortConfig)} - hiddenColumns={hiddenColumns} + hiddenColumns={resolvedHiddenColumns} /> ) } diff --git a/apps/earn-protocol/features/user-activity/components/UserActivityTable/UserActivityTable.tsx b/apps/earn-protocol/features/user-activity/components/UserActivityTable/UserActivityTable.tsx index 4d42df97bc..f27d920b2f 100644 --- a/apps/earn-protocol/features/user-activity/components/UserActivityTable/UserActivityTable.tsx +++ b/apps/earn-protocol/features/user-activity/components/UserActivityTable/UserActivityTable.tsx @@ -1,8 +1,11 @@ import { type FC, type ReactNode, useMemo, useState } from 'react' -import { Table, type TableSortedColumn } from '@summerfi/app-earn-ui' +import { Table, type TableSortedColumn, useMobileCheck } from '@summerfi/app-earn-ui' import { type UsersActivity } from '@summerfi/app-types' -import { userActivityColumns } from '@/features/user-activity/table/user-activity-columns' +import { + userActivityColumns, + userActivityColumnsHiddenOnMobile, +} from '@/features/user-activity/table/user-activity-columns' import { userActivityMapper } from '@/features/user-activity/table/user-activity-mapper' interface UserActivityTableProps { @@ -22,19 +25,22 @@ export const UserActivityTable: FC = ({ rowsToDisplay, }) => { const [sortConfig, setSortConfig] = useState>() + const { isMobile } = useMobileCheck() const rows = useMemo( () => userActivityMapper(userActivityList, sortConfig), [userActivityList, sortConfig], ) + const resolvedHiddenColumns = isMobile ? userActivityColumnsHiddenOnMobile : hiddenColumns + return (
setSortConfig(_sortConfig)} - hiddenColumns={hiddenColumns} + hiddenColumns={resolvedHiddenColumns} /> ) } diff --git a/apps/earn-protocol/features/user-activity/table/top-depositors-columns.ts b/apps/earn-protocol/features/user-activity/table/top-depositors-columns.ts index e3154f1397..4a56a82699 100644 --- a/apps/earn-protocol/features/user-activity/table/top-depositors-columns.ts +++ b/apps/earn-protocol/features/user-activity/table/top-depositors-columns.ts @@ -40,3 +40,11 @@ export const topDepositorsColumns = [ sortable: false, }, ] + +export const topDepositorsColumnsHiddenOnMobile = [ + 'strategy', + 'change7d', + 'projected1yrEarnings', + 'numberOfDeposits', + 'earningsStreak', +] diff --git a/apps/earn-protocol/features/user-activity/table/user-activity-columns.ts b/apps/earn-protocol/features/user-activity/table/user-activity-columns.ts index 7cd5c230cc..dea4743535 100644 --- a/apps/earn-protocol/features/user-activity/table/user-activity-columns.ts +++ b/apps/earn-protocol/features/user-activity/table/user-activity-columns.ts @@ -30,3 +30,5 @@ export const userActivityColumns = [ sortable: false, }, ] + +export const userActivityColumnsHiddenOnMobile = ['strategy', 'timestamp', 'balance'] diff --git a/apps/earn-protocol/features/vault-exposure/components/VaultExposureTable/VaultExposureTable.tsx b/apps/earn-protocol/features/vault-exposure/components/VaultExposureTable/VaultExposureTable.tsx index 9477ce5b80..569be186eb 100644 --- a/apps/earn-protocol/features/vault-exposure/components/VaultExposureTable/VaultExposureTable.tsx +++ b/apps/earn-protocol/features/vault-exposure/components/VaultExposureTable/VaultExposureTable.tsx @@ -1,8 +1,11 @@ import { type FC, type ReactNode, useMemo, useState } from 'react' -import { Table, type TableSortedColumn } from '@summerfi/app-earn-ui' +import { Table, type TableSortedColumn, useMobileCheck } from '@summerfi/app-earn-ui' import { type SDKVaultType } from '@summerfi/app-types' -import { vaultExposureColumns } from '@/features/vault-exposure/table/columns' +import { + vaultExposureColumns, + vaultExposureColumnsHiddenOnMobile, +} from '@/features/vault-exposure/table/columns' import { vaultExposureMapper } from '@/features/vault-exposure/table/mapper' interface VaultExposureTableProps { @@ -22,16 +25,19 @@ export const VaultExposureTable: FC = ({ rowsToDisplay, }) => { const [sortConfig, setSortConfig] = useState>() + const { isMobile } = useMobileCheck() const rows = useMemo(() => vaultExposureMapper(vault, sortConfig), [vault, sortConfig]) + const resolvedHiddenColumns = isMobile ? vaultExposureColumnsHiddenOnMobile : hiddenColumns + return (
setSortConfig(_sortConfig)} - hiddenColumns={hiddenColumns} + hiddenColumns={resolvedHiddenColumns} /> ) } diff --git a/apps/earn-protocol/features/vault-exposure/table/columns.tsx b/apps/earn-protocol/features/vault-exposure/table/columns.tsx index dc2909ef6b..b2975c31aa 100644 --- a/apps/earn-protocol/features/vault-exposure/table/columns.tsx +++ b/apps/earn-protocol/features/vault-exposure/table/columns.tsx @@ -71,3 +71,5 @@ export const vaultExposureColumns = [ sortable: false, }, ] + +export const vaultExposureColumnsHiddenOnMobile = ['liquidity', 'type'] diff --git a/packages/app-earn-ui/src/components/organisms/Table/Table.module.scss b/packages/app-earn-ui/src/components/organisms/Table/Table.module.scss index 8c2bd3846e..10cd7a6077 100644 --- a/packages/app-earn-ui/src/components/organisms/Table/Table.module.scss +++ b/packages/app-earn-ui/src/components/organisms/Table/Table.module.scss @@ -80,43 +80,3 @@ } } } - -/* Mobile styles */ -@media (max-width: 768px) { - .table { - display: block; - - thead { - display: none; - } - - tbody { - display: block; - width: 100%; - - tr { - border-bottom: 1px solid var(--earn-protocol-neutral-70); - } - } - - tr { - display: block; - margin-bottom: 10px; - } - - td { - display: block; - padding: 8px; - text-align: left; - position: relative; - - &:before { - content: attr(data-label); - position: absolute; - left: 10px; - font-weight: bold; - text-align: left; - } - } - } -} diff --git a/packages/app-earn-ui/src/hooks/use-mobile-check.ts b/packages/app-earn-ui/src/hooks/use-mobile-check.ts new file mode 100644 index 0000000000..6e7dd3e912 --- /dev/null +++ b/packages/app-earn-ui/src/hooks/use-mobile-check.ts @@ -0,0 +1,49 @@ +'use client' +import { useEffect, useState } from 'react' + +interface ScreenInfo { + isMobile: boolean + width: number + height: number +} + +/** + * Custom hook to check if the screen size is mobile and to track screen width and height. + * + * @returns An object containing: + * - `isMobile`: A boolean indicating if the screen width is 768px or less. + * - `width`: The current screen width in pixels. + * - `height`: The current screen height in pixels. + * + * @example + * const { isMobile, width, height } = useMobileCheck(); + * console.log(isMobile); // true if the screen width is 768px or less + * + * @remarks + * - Adds an event listener to `window.resize` to update the screen information on resize. + * - Automatically removes the event listener when the component using this hook unmounts. + */ + +export const useMobileCheck = (): ScreenInfo => { + const [screenInfo, setScreenInfo] = useState({ + isMobile: window.innerWidth <= 768, + width: window.innerWidth, + height: window.innerHeight, + }) + + useEffect(() => { + const handleResize = () => { + setScreenInfo({ + isMobile: window.innerWidth <= 768, + width: window.innerWidth, + height: window.innerHeight, + }) + } + + window.addEventListener('resize', handleResize) + + return () => window.removeEventListener('resize', handleResize) + }, []) + + return screenInfo +} diff --git a/packages/app-earn-ui/src/index.ts b/packages/app-earn-ui/src/index.ts index fbf2341d20..386bd510c8 100644 --- a/packages/app-earn-ui/src/index.ts +++ b/packages/app-earn-ui/src/index.ts @@ -79,6 +79,7 @@ export { useHash } from './hooks/use-hash' export { useOutsideElementClickHandler } from './hooks/use-outside-element-click-handler' export { useCurrentUrl } from './hooks/use-current-url' export { useQueryParams } from './hooks/use-query-params' +export { useMobileCheck } from './hooks/use-mobile-check' export { sidebarFootnote } from './common/sidebar/footnote' export { getVaultUrl, getVaultDetailsUrl, getVaultPositionUrl } from './helpers/get-vault-url' From 059546a49f6fb9b37918155de4a0b942c57ad872 Mon Sep 17 00:00:00 2001 From: sebastianPiekarczyk Date: Thu, 7 Nov 2024 14:48:37 +0100 Subject: [PATCH 04/10] take into account window being undefined --- .../app-earn-ui/src/hooks/use-mobile-check.ts | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/app-earn-ui/src/hooks/use-mobile-check.ts b/packages/app-earn-ui/src/hooks/use-mobile-check.ts index 6e7dd3e912..c9925ba22a 100644 --- a/packages/app-earn-ui/src/hooks/use-mobile-check.ts +++ b/packages/app-earn-ui/src/hooks/use-mobile-check.ts @@ -9,11 +9,12 @@ interface ScreenInfo { /** * Custom hook to check if the screen size is mobile and to track screen width and height. + * This hook includes support for SSR by initializing with default values. * * @returns An object containing: * - `isMobile`: A boolean indicating if the screen width is 768px or less. - * - `width`: The current screen width in pixels. - * - `height`: The current screen height in pixels. + * - `width`: The current screen width in pixels, defaults to 0 in SSR. + * - `height`: The current screen height in pixels, defaults to 0 in SSR. * * @example * const { isMobile, width, height } = useMobileCheck(); @@ -22,16 +23,20 @@ interface ScreenInfo { * @remarks * - Adds an event listener to `window.resize` to update the screen information on resize. * - Automatically removes the event listener when the component using this hook unmounts. + * - Checks if `window` is defined before accessing properties, making it safe for SSR. */ - export const useMobileCheck = (): ScreenInfo => { + // Initialize with default values that assume a non-mobile, zero-width/height screen const [screenInfo, setScreenInfo] = useState({ - isMobile: window.innerWidth <= 768, - width: window.innerWidth, - height: window.innerHeight, + isMobile: false, + width: 0, + height: 0, }) useEffect(() => { + // Check if window is defined (important for SSR) + if (typeof window === 'undefined') return + const handleResize = () => { setScreenInfo({ isMobile: window.innerWidth <= 768, @@ -40,8 +45,13 @@ export const useMobileCheck = (): ScreenInfo => { }) } + // Set initial screen info when component mounts + handleResize() + + // Listen for resize events window.addEventListener('resize', handleResize) + // eslint-disable-next-line consistent-return return () => window.removeEventListener('resize', handleResize) }, []) From c4f3e2a9ed91fc26c234da174973da807707d9ad Mon Sep 17 00:00:00 2001 From: sebastianPiekarczyk Date: Thu, 7 Nov 2024 16:45:23 +0100 Subject: [PATCH 05/10] useMobileCheck adjustments --- .../RebalanceActivityView.module.scss | 8 ++++++-- .../RebalanceActivityView/RebalanceActivityView.tsx | 3 +++ .../UserActivityView/UserActivityView.module.scss | 8 ++++++-- .../components/UserActivityView/UserActivityView.tsx | 3 +++ .../HeadingWithCards/HeadingWithCards.module.scss | 9 +++++++-- packages/app-earn-ui/src/hooks/use-mobile-check.ts | 4 ++-- 6 files changed, 27 insertions(+), 8 deletions(-) diff --git a/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.module.scss b/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.module.scss index e0a50f79ab..a98791c063 100644 --- a/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.module.scss +++ b/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.module.scss @@ -10,8 +10,12 @@ .filtersWrapper { display: flex; - justify-content: flex-start; + flex-direction: column; gap: var(--general-space-16); - flex-wrap: wrap; margin-bottom: var(--general-space-24); + + @media screen and (min-width: 768px) { + flex-direction: row; + justify-content: flex-start; + } } diff --git a/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.tsx b/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.tsx index 6c645a6890..45e63ef869 100644 --- a/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.tsx +++ b/apps/earn-protocol/features/rebalance-activity/components/RebalanceActivityView/RebalanceActivityView.tsx @@ -7,6 +7,7 @@ import { HeadingWithCards, TableCarousel, useCurrentUrl, + useMobileCheck, useQueryParams, } from '@summerfi/app-earn-ui' import { type SDKGlobalRebalancesType, type SDKVaultsListType } from '@summerfi/app-types' @@ -42,6 +43,7 @@ export const RebalanceActivityView: FC = ({ const [tokenFilter, setTokenFilter] = useState(searchParams?.tokens ?? []) const [protocolFilter, setProtocolFilter] = useState(searchParams?.protocols ?? []) const currentUrl = useCurrentUrl() + const { isMobile } = useMobileCheck() const [current, setCurrent] = useState(initialRows) @@ -134,6 +136,7 @@ export const RebalanceActivityView: FC = ({ label={filter.label} onChange={filter.onChange} initialValues={filter.initialValues} + style={{ width: isMobile ? '100%' : 'fit-content' }} /> ))} diff --git a/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss b/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss index e0a50f79ab..a98791c063 100644 --- a/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss +++ b/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss @@ -10,8 +10,12 @@ .filtersWrapper { display: flex; - justify-content: flex-start; + flex-direction: column; gap: var(--general-space-16); - flex-wrap: wrap; margin-bottom: var(--general-space-24); + + @media screen and (min-width: 768px) { + flex-direction: row; + justify-content: flex-start; + } } diff --git a/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.tsx b/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.tsx index 9651f6f995..0b2ffe29af 100644 --- a/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.tsx +++ b/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.tsx @@ -8,6 +8,7 @@ import { TabBar, TableCarousel, useCurrentUrl, + useMobileCheck, useQueryParams, } from '@summerfi/app-earn-ui' import { @@ -53,6 +54,7 @@ export const UserActivityView: FC = ({ const [strategyFilter, setStrategyFilter] = useState(searchParams?.strategies ?? []) const [tokenFilter, setTokenFilter] = useState(searchParams?.tokens ?? []) const currentUrl = useCurrentUrl() + const { isMobile } = useMobileCheck() const [currentUserActivityIdx, setCurrentUserActivityIdx] = useState(initialRows) const [currentTopDepositorsIdx, setCurrentTopDepositorsIdx] = useState(initialRows) @@ -152,6 +154,7 @@ export const UserActivityView: FC = ({ label={filter.label} onChange={filter.onChange} initialValues={filter.initialValues} + style={{ width: isMobile ? '100%' : 'fit-content' }} /> ))} diff --git a/packages/app-earn-ui/src/components/molecules/HeadingWithCards/HeadingWithCards.module.scss b/packages/app-earn-ui/src/components/molecules/HeadingWithCards/HeadingWithCards.module.scss index a24aec0670..d74398bc94 100644 --- a/packages/app-earn-ui/src/components/molecules/HeadingWithCards/HeadingWithCards.module.scss +++ b/packages/app-earn-ui/src/components/molecules/HeadingWithCards/HeadingWithCards.module.scss @@ -9,6 +9,7 @@ align-items: center; margin-bottom: var(--general-space-16); gap: var(--general-space-16); + flex-wrap: wrap; .headingIcons { display: flex; @@ -38,8 +39,7 @@ .cardsWrapper { display: flex; - justify-content: space-between; - flex-wrap: wrap; + flex-direction: column; gap: var(--general-space-16); margin-bottom: var(--general-space-40); @@ -49,4 +49,9 @@ align-items: flex-start; flex: 1; } + + @media screen and (min-width: 768px) { + flex-direction: row; + justify-content: space-between; + } } diff --git a/packages/app-earn-ui/src/hooks/use-mobile-check.ts b/packages/app-earn-ui/src/hooks/use-mobile-check.ts index c9925ba22a..0e47326f7d 100644 --- a/packages/app-earn-ui/src/hooks/use-mobile-check.ts +++ b/packages/app-earn-ui/src/hooks/use-mobile-check.ts @@ -1,5 +1,5 @@ 'use client' -import { useEffect, useState } from 'react' +import { useLayoutEffect, useState } from 'react' interface ScreenInfo { isMobile: boolean @@ -33,7 +33,7 @@ export const useMobileCheck = (): ScreenInfo => { height: 0, }) - useEffect(() => { + useLayoutEffect(() => { // Check if window is defined (important for SSR) if (typeof window === 'undefined') return From 46db2c812d06d88ab677ec04cb245af852ca1525 Mon Sep 17 00:00:00 2001 From: sebastianPiekarczyk Date: Thu, 7 Nov 2024 16:52:48 +0100 Subject: [PATCH 06/10] minor margin change --- .../components/UserActivityView/UserActivityView.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss b/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss index a98791c063..dc27a82a4c 100644 --- a/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss +++ b/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss @@ -13,6 +13,7 @@ flex-direction: column; gap: var(--general-space-16); margin-bottom: var(--general-space-24); + margin-top: var(--general-space-12); @media screen and (min-width: 768px) { flex-direction: row; From 04719bd1441a07743ca95d2a87bc4e1d4b28ae8c Mon Sep 17 00:00:00 2001 From: sebastianPiekarczyk Date: Thu, 7 Nov 2024 16:54:10 +0100 Subject: [PATCH 07/10] minor margin change --- .../components/UserActivityView/UserActivityView.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss b/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss index dc27a82a4c..2ce99a2834 100644 --- a/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss +++ b/apps/earn-protocol/features/user-activity/components/UserActivityView/UserActivityView.module.scss @@ -16,6 +16,7 @@ margin-top: var(--general-space-12); @media screen and (min-width: 768px) { + margin-top: unset; flex-direction: row; justify-content: flex-start; } From 768f9022d6e070bc0ae0c3b4ea90e26f8b58c057 Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Thu, 7 Nov 2024 17:09:45 +0100 Subject: [PATCH 08/10] portfolio positions work --- .../earn/portfolio/[walletAddress]/page.tsx | 8 +- .../portfolio/portfolio-positions-handler.ts | 27 ++++ .../PortfolioPageView/PortfolioPageView.tsx | 4 +- .../{ => DumbCharts}/ComparisonChart.tsx | 4 +- .../Charts/DumbCharts/YieldsChart.tsx | 89 ++++++++++++ .../organisms/Charts/HistoricalYieldChart.tsx | 33 +---- .../organisms/Charts/MockedLineChart.tsx | 2 +- .../PortfolioOverview/PortfolioOverview.tsx | 25 +++- .../molecules/DataBlock/DataBlock.module.scss | 21 +++ .../DataBlock/DataBlock.module.scss.d.ts | 3 + .../molecules/DataBlock/DataBlock.tsx | 22 +-- .../PortfolioPosition.module.scss | 24 ++++ .../PortfolioPosition.module.scss.d.ts | 13 ++ .../PortfolioPosition/PortfolioPosition.tsx | 131 ++++++++++++++++++ packages/app-earn-ui/src/index.ts | 1 + packages/app-types/package.json | 2 + .../types/src/earn-protocol/index.ts | 2 + pnpm-lock.yaml | 6 + .../src/services/SerializationService.ts | 1 - 19 files changed, 367 insertions(+), 51 deletions(-) create mode 100644 apps/earn-protocol/app/server-handlers/portfolio/portfolio-positions-handler.ts rename apps/earn-protocol/components/organisms/Charts/{ => DumbCharts}/ComparisonChart.tsx (97%) create mode 100644 apps/earn-protocol/components/organisms/Charts/DumbCharts/YieldsChart.tsx create mode 100644 packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.module.scss create mode 100644 packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.module.scss.d.ts create mode 100644 packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.tsx diff --git a/apps/earn-protocol/app/earn/portfolio/[walletAddress]/page.tsx b/apps/earn-protocol/app/earn/portfolio/[walletAddress]/page.tsx index cfc4cef9b1..3a3289c907 100644 --- a/apps/earn-protocol/app/earn/portfolio/[walletAddress]/page.tsx +++ b/apps/earn-protocol/app/earn/portfolio/[walletAddress]/page.tsx @@ -1,6 +1,7 @@ import { parseServerResponseToClient } from '@summerfi/app-utils' import { type IArmadaPosition } from '@summerfi/sdk-client-react' +import { portfolioPositionsHandler } from '@/app/server-handlers/portfolio/portfolio-positions-handler' 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' @@ -22,13 +23,18 @@ const PortfolioPage = async ({ params }: PortfolioPageProps) => { await getUserPositions({ walletAddress }), ]) const rewardsData = portfolioRewardsHandler(walletAddress) + const positionsJsonSafe = positions ? parseServerResponseToClient(positions) : [] + const positionsList = positionsJsonSafe.map((position) => + portfolioPositionsHandler({ position, vaultsList: vaults }), + ) + return ( { + const vaultData = vaultsList.find((vault) => vault.id === position.pool.id.fleetAddress.value) + + if (!vaultData) { + throw new Error(`Vault not found for position ${position.pool.id.fleetAddress.value}`) + } + + return { + positionData: position, + vaultData, + } +} + +export type PortfolioPositionsList = ReturnType diff --git a/apps/earn-protocol/components/layout/PortfolioPageView/PortfolioPageView.tsx b/apps/earn-protocol/components/layout/PortfolioPageView/PortfolioPageView.tsx index 366ec54868..0cc8306942 100644 --- a/apps/earn-protocol/components/layout/PortfolioPageView/PortfolioPageView.tsx +++ b/apps/earn-protocol/components/layout/PortfolioPageView/PortfolioPageView.tsx @@ -3,8 +3,8 @@ 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 PortfolioPositionsList } from '@/app/server-handlers/portfolio/portfolio-positions-handler' import { type PortfolioRewardsRawData } from '@/app/server-handlers/portfolio/portfolio-rewards-handler' import { type PortfolioAssetsResponse } from '@/app/server-handlers/portfolio/portfolio-wallet-assets-handler' import { PortfolioHeader } from '@/features/portfolio/components/PortfolioHeader/PortfolioHeader' @@ -18,7 +18,7 @@ interface PortfolioPageViewProps { walletData: PortfolioAssetsResponse rewardsData: PortfolioRewardsRawData[] vaultsList: SDKVaultsListType - positions: IArmadaPosition[] + positions: PortfolioPositionsList[] } export const PortfolioPageView: FC = ({ diff --git a/apps/earn-protocol/components/organisms/Charts/ComparisonChart.tsx b/apps/earn-protocol/components/organisms/Charts/DumbCharts/ComparisonChart.tsx similarity index 97% rename from apps/earn-protocol/components/organisms/Charts/ComparisonChart.tsx rename to apps/earn-protocol/components/organisms/Charts/DumbCharts/ComparisonChart.tsx index 1f747d8119..13e5d5245c 100644 --- a/apps/earn-protocol/components/organisms/Charts/ComparisonChart.tsx +++ b/apps/earn-protocol/components/organisms/Charts/DumbCharts/ComparisonChart.tsx @@ -55,7 +55,7 @@ export const ComparisonChart = ({ data, dataNames, colors, compare }: Comparison dataName === 'Summer Strategy' ? ( { + return ( +
+ + + + + + + + + + + `${label}%`} /> + `${Number(val).toFixed(2)}`} + useTranslate3d + contentStyle={{ + zIndex: 1000, + backgroundColor: 'var(--color-surface-subtler)', + borderRadius: '5px', + padding: '20px 30px', + border: 'none', + }} + /> + {dataNames.map((dataName, dataIndex) => + dataName === 'Summer Strategy' ? ( + + ) : ( + + ), + )} + + + +
+ ) +} diff --git a/apps/earn-protocol/components/organisms/Charts/HistoricalYieldChart.tsx b/apps/earn-protocol/components/organisms/Charts/HistoricalYieldChart.tsx index d1e0336aa1..cfa1e3db9a 100644 --- a/apps/earn-protocol/components/organisms/Charts/HistoricalYieldChart.tsx +++ b/apps/earn-protocol/components/organisms/Charts/HistoricalYieldChart.tsx @@ -1,14 +1,11 @@ 'use client' import { useMemo, useState } from 'react' -import { Card } from '@summerfi/app-earn-ui' -import { type CardVariant } from '@summerfi/app-earn-ui/dist/types/src/components/atoms/Card/Card' import { type TimeframesType } from '@summerfi/app-types' import BigNumber from 'bignumber.js' import dayjs from 'dayjs' -import { ChartHeader } from '@/components/organisms/Charts/ChartHeader' -import { ComparisonChart } from '@/components/organisms/Charts/ComparisonChart' +import { YieldsChart } from '@/components/organisms/Charts/DumbCharts/YieldsChart' const dataNames = ['Summer Strategy'] @@ -16,14 +13,7 @@ const colors = { 'Summer Strategy-color': '#FF49A4', } -export const HistoricalYieldChart = ({ - aprHourlyList, - cardVariant = 'cardSecondary', -}: { - cardVariant?: CardVariant - aprHourlyList: string[] -}) => { - const [compare, setCompare] = useState(true) +export const HistoricalYieldChart = ({ aprHourlyList }: { aprHourlyList: string[] }) => { const [timeframe, setTimeframe] = useState('90d') const _unused = setTimeframe @@ -40,23 +30,6 @@ export const HistoricalYieldChart = ({ }, [aprHourlyList]) return ( - - null} - /> - - + ) } diff --git a/apps/earn-protocol/components/organisms/Charts/MockedLineChart.tsx b/apps/earn-protocol/components/organisms/Charts/MockedLineChart.tsx index cbcf5b1b8e..724b1d054d 100644 --- a/apps/earn-protocol/components/organisms/Charts/MockedLineChart.tsx +++ b/apps/earn-protocol/components/organisms/Charts/MockedLineChart.tsx @@ -7,7 +7,7 @@ import { type TimeframesType } from '@summerfi/app-types' import { memoize, random } from 'lodash-es' import { ChartHeader } from '@/components/organisms/Charts/ChartHeader' -import { ComparisonChart } from '@/components/organisms/Charts/ComparisonChart' +import { ComparisonChart } from '@/components/organisms/Charts/DumbCharts/ComparisonChart' const dataNames = [ 'Median Defi Yield', diff --git a/apps/earn-protocol/features/portfolio/components/PortfolioOverview/PortfolioOverview.tsx b/apps/earn-protocol/features/portfolio/components/PortfolioOverview/PortfolioOverview.tsx index b68d699c67..3cc07171d3 100644 --- a/apps/earn-protocol/features/portfolio/components/PortfolioOverview/PortfolioOverview.tsx +++ b/apps/earn-protocol/features/portfolio/components/PortfolioOverview/PortfolioOverview.tsx @@ -1,9 +1,9 @@ -import { Card, DataBlock, Text, WithArrow } from '@summerfi/app-earn-ui' +import { Card, DataBlock, PortfolioPosition, 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' +import { type PortfolioPositionsList } from '@/app/server-handlers/portfolio/portfolio-positions-handler' +import { HistoricalYieldChart } from '@/components/organisms/Charts/HistoricalYieldChart' import { CryptoUtilities } from '@/features/crypto-utilities/components/CryptoUtilities/CryptoUtilities' import { NewsAndUpdates } from '@/features/news-and-updates/components/NewsAndUpdates/NewsAndUpdates' import { PortfolioVaultsCarousel } from '@/features/portfolio/components/PortfolioVaultsCarousel/PortfolioVaultsCarousel' @@ -57,7 +57,7 @@ const dataBlocks = [ type PortfolioOverviewProps = { vaultsList: SDKVaultsListType - positions: IArmadaPosition[] + positions: PortfolioPositionsList[] } export const PortfolioOverview = ({ vaultsList, positions }: PortfolioOverviewProps) => { @@ -86,7 +86,21 @@ export const PortfolioOverview = ({ vaultsList, positions }: PortfolioOverviewPr Positions - + {positions.length > 0 ? ( + positions.map((position) => ( + + } + /> + )) + ) : ( + + No positions + + )} - 
{JSON.stringify(positions, null, 2)}
) diff --git a/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.module.scss b/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.module.scss index 46e05e147d..07ef5bde8e 100644 --- a/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.module.scss +++ b/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.module.scss @@ -1,7 +1,28 @@ +.hasAccent { + padding-left: calc(var(--general-space-8) * 2); +} + .dataBlockWrapper { display: flex; flex-direction: column; + &.centered { align-items: center; } + + .titleWrapper { + display: flex; + align-items: center; + flex-direction: row; + + .accent { + display: inline; + width: var(--general-space-8); + height: var(--general-space-8); + border-radius: var(--radius-circle); + margin-left: calc(var(--general-space-8) * -2); + margin-right: var(--general-space-8); + } + } + } \ No newline at end of file diff --git a/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.module.scss.d.ts b/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.module.scss.d.ts index f6c07f56f8..8069b8c877 100644 --- a/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.module.scss.d.ts +++ b/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.module.scss.d.ts @@ -1,6 +1,9 @@ export type Styles = { + accent: string centered: string dataBlockWrapper: string + hasAccent: string + titleWrapper: string } export type ClassNames = keyof Styles diff --git a/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.tsx b/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.tsx index 8c55b856a0..f194f97125 100644 --- a/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.tsx +++ b/packages/app-earn-ui/src/components/molecules/DataBlock/DataBlock.tsx @@ -20,6 +20,7 @@ type DataBlockProps = { subValueType?: 'positive' | 'negative' | 'neutral' centered?: boolean subValueStyle?: CSSProperties + accent?: string } export const DataBlock = ({ @@ -36,6 +37,7 @@ export const DataBlock = ({ subValueType, subValueSize, subValueStyle, + accent, }: DataBlockProps) => { const titleVariant = { small: 'p3semi' as const, @@ -59,16 +61,20 @@ export const DataBlock = ({
- +
+ {accent &&
} + +
{value} diff --git a/packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.module.scss b/packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.module.scss new file mode 100644 index 0000000000..8b86efdc6b --- /dev/null +++ b/packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.module.scss @@ -0,0 +1,24 @@ +.basicInfoWrapper { + display: flex; + align-items: center; + height: 100%; +} + +.strategyInfoTopWrapper { + display: flex; + flex-direction: column; + text-align: right; + + .header { + color: var(--color-text-secondary); + } + + .value { + color: var(--color-text-primary); + } + + .subValue { + color: var(--color-text-secondary); + } + +} \ No newline at end of file diff --git a/packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.module.scss.d.ts b/packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.module.scss.d.ts new file mode 100644 index 0000000000..adb5cb64e6 --- /dev/null +++ b/packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.module.scss.d.ts @@ -0,0 +1,13 @@ +export type Styles = { + basicInfoWrapper: string + header: string + strategyInfoTopWrapper: string + subValue: string + value: string +} + +export type ClassNames = keyof Styles + +declare const styles: Styles + +export default styles diff --git a/packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.tsx b/packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.tsx new file mode 100644 index 0000000000..4c339baa24 --- /dev/null +++ b/packages/app-earn-ui/src/components/organisms/PortfolioPosition/PortfolioPosition.tsx @@ -0,0 +1,131 @@ +import { type ReactNode } from 'react' +import { type IArmadaPosition, type SDKVaultsListType } from '@summerfi/app-types' +import { formatCryptoBalance, formatDecimalAsPercent } from '@summerfi/app-utils' +import BigNumber from 'bignumber.js' +import Link from 'next/link' + +import { Button } from '@/components/atoms/Button/Button' +import { Card } from '@/components/atoms/Card/Card' +import { Text } from '@/components/atoms/Text/Text' +import { BonusLabel } from '@/components/molecules/BonusLabel/BonusLabel' +import { DataBlock } from '@/components/molecules/DataBlock/DataBlock' +import { SimpleGrid } from '@/components/molecules/Grid/SimpleGrid' +import { VaultTitleWithRisk } from '@/components/molecules/VaultTitleWithRisk/VaultTitleWithRisk' +import { getVaultPositionUrl } from '@/helpers/get-vault-url' + +import portfolioPositionStyles from './PortfolioPosition.module.scss' + +type PortfolioPositionProps = { + position: { + positionData: IArmadaPosition + vaultData: SDKVaultsListType[number] + } + positionGraph: ReactNode +} + +export const PortfolioPosition = ({ position, positionGraph }: PortfolioPositionProps) => { + const { + inputToken, + protocol, + name: vaultName, + apr30d, + apr365d, + totalValueLockedUSD, + id: vaultId, + } = position.vaultData + const { + amount, + id: { + user: { + wallet: { + address: { value: walletAddress }, + }, + }, + }, + } = position.positionData + const apr30dParsed = formatDecimalAsPercent(new BigNumber(apr30d).div(100)) + // TODO: fill data + const aprAllTime = formatDecimalAsPercent(new BigNumber(apr365d).div(100)) + const marketValue = formatCryptoBalance(totalValueLockedUSD) + const netContribution = formatCryptoBalance(amount.amount) + + return ( + +
+ +
+ + + + +
+
+ + Strategy + + + {vaultName} + + + xxx + +
+
+ + Earnings + + + Earnings + + + Earnings + +
+ + {positionGraph} + + + + + +
+ + + +
+ +
+ + ) +} diff --git a/packages/app-earn-ui/src/index.ts b/packages/app-earn-ui/src/index.ts index 386bd510c8..ce17ff3e1c 100644 --- a/packages/app-earn-ui/src/index.ts +++ b/packages/app-earn-ui/src/index.ts @@ -73,6 +73,7 @@ export { TermsOfService } from './components/organisms/TermsOfService/TermsOfSer export { Sidebar, type SidebarProps } from './components/organisms/Sidebar/Sidebar' export { Table, type TableSortedColumn } from './components/organisms/Table/Table' export { VaultSimulationForm } from './components/organisms/VaultSimulationForm/VaultSimulationForm' +export { PortfolioPosition } from './components/organisms/PortfolioPosition/PortfolioPosition' export { useToggle } from './hooks/use-toggle' export { useHash } from './hooks/use-hash' diff --git a/packages/app-types/package.json b/packages/app-types/package.json index 721f27990c..d4f9447fec 100644 --- a/packages/app-types/package.json +++ b/packages/app-types/package.json @@ -9,8 +9,10 @@ "get-config-types": "node scripts/get-config-types.js && node scripts/get-rays-config-types.js" }, "dependencies": { + "@summerfi/armada-protocol-service": "workspace:*", "@summerfi/app-db": "workspace:*", "@summerfi/rays-db": "workspace:*", + "@summerfi/sdk-client-react": "workspace:*", "@summerfi/sdk-common": "workspace:*", "@summerfi/subgraph-manager-common": "workspace:*", "@types/react": "^18.3.1" diff --git a/packages/app-types/types/src/earn-protocol/index.ts b/packages/app-types/types/src/earn-protocol/index.ts index 58d67bcadf..460d3dcee6 100644 --- a/packages/app-types/types/src/earn-protocol/index.ts +++ b/packages/app-types/types/src/earn-protocol/index.ts @@ -7,9 +7,11 @@ import { } from '@summerfi/subgraph-manager-common' import { ChainId } from '@summerfi/serverless-shared' import { type TransactionInfo } from '@summerfi/sdk-common' +import { type IArmadaPosition } from '@summerfi/sdk-client-react' export { Network as SDKNetwork } export { ChainId as SDKChainId } +export { IArmadaPosition } export type SDKVaultsListType = GetVaultsQuery['vaults'] export type SDKVaultType = Exclude diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 591d614db3..c55541a477 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1116,9 +1116,15 @@ importers: '@summerfi/app-db': specifier: workspace:* version: link:../app-db + '@summerfi/armada-protocol-service': + specifier: workspace:* + version: link:../../sdk/armada-protocol-service '@summerfi/rays-db': specifier: workspace:* version: link:../rays-db + '@summerfi/sdk-client-react': + specifier: workspace:* + version: link:../../sdk/sdk-client-react '@summerfi/sdk-common': specifier: workspace:* version: link:../../sdk/sdk-common diff --git a/sdk/sdk-common/src/services/SerializationService.ts b/sdk/sdk-common/src/services/SerializationService.ts index fd46f69c6b..6639bc3474 100644 --- a/sdk/sdk-common/src/services/SerializationService.ts +++ b/sdk/sdk-common/src/services/SerializationService.ts @@ -8,7 +8,6 @@ export type Class = object export class SerializationService { static registerClass(v: Class, options?: string | RegisterOptions | undefined): void { - console.log('SerializationService registerClass', v, options) // eslint-disable-next-line @typescript-eslint/no-explicit-any superjson.registerClass(v as any, options) } From ebaca6b62b2481aa21f748b95bfcdf77473a063d Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Thu, 7 Nov 2024 17:23:09 +0100 Subject: [PATCH 09/10] add armada-protocol-common dependency and update imports --- packages/app-types/package.json | 1 + packages/app-types/types/src/earn-protocol/index.ts | 2 +- pnpm-lock.yaml | 3 +++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/app-types/package.json b/packages/app-types/package.json index d4f9447fec..edbcee6002 100644 --- a/packages/app-types/package.json +++ b/packages/app-types/package.json @@ -15,6 +15,7 @@ "@summerfi/sdk-client-react": "workspace:*", "@summerfi/sdk-common": "workspace:*", "@summerfi/subgraph-manager-common": "workspace:*", + "@summerfi/armada-protocol-common": "workspace:*", "@types/react": "^18.3.1" }, "devDependencies": { diff --git a/packages/app-types/types/src/earn-protocol/index.ts b/packages/app-types/types/src/earn-protocol/index.ts index 460d3dcee6..32bc54fbdb 100644 --- a/packages/app-types/types/src/earn-protocol/index.ts +++ b/packages/app-types/types/src/earn-protocol/index.ts @@ -7,7 +7,7 @@ import { } from '@summerfi/subgraph-manager-common' import { ChainId } from '@summerfi/serverless-shared' import { type TransactionInfo } from '@summerfi/sdk-common' -import { type IArmadaPosition } from '@summerfi/sdk-client-react' +import { type IArmadaPosition } from '@summerfi/armada-protocol-common' export { Network as SDKNetwork } export { ChainId as SDKChainId } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c55541a477..dbecb11670 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1116,6 +1116,9 @@ importers: '@summerfi/app-db': specifier: workspace:* version: link:../app-db + '@summerfi/armada-protocol-common': + specifier: workspace:* + version: link:../../sdk/armada-protocol-common '@summerfi/armada-protocol-service': specifier: workspace:* version: link:../../sdk/armada-protocol-service From ad3671cc6b071fe63190680fc73a8d4fbe31cb30 Mon Sep 17 00:00:00 2001 From: Marcin Ciarka Date: Thu, 7 Nov 2024 17:32:21 +0100 Subject: [PATCH 10/10] add graphql and graphql-tag dependencies to Vite configuration --- packages/app-tos/vite.config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/app-tos/vite.config.ts b/packages/app-tos/vite.config.ts index 69bc3a5d45..c79495fdb4 100644 --- a/packages/app-tos/vite.config.ts +++ b/packages/app-tos/vite.config.ts @@ -64,6 +64,8 @@ export default defineConfig(({ mode }) => { 'kysely', 'viem', 'viem/chains', + 'graphql', + 'graphql-tag', '@safe-global/safe-apps-sdk', 'jsonwebtoken', '@summerfi/serverless-shared',