Centrifuge App: Portfolio page (#1590)

* feat: Portfolio page

- add content structure
- create AccountTokens
- create AccountTransactions
- create getAllTransactions related to one address

* feat: Transactions route

* feat: rewards value and styling PortfolioRewards

- creates PortfolioRewards
- refactor 'useComputeLiquidityRewards' to accept an array of {poolId, trancheId}
- refactor 'getBalances' to respect 'reserved' balance

* feat: claim all rewards

- refactor computeReward to recall on all events
- refactor claimLiquidityRewards to accept array of tranches

* optimize filter and add outstandingOrders

* feat: get all transactions data filtered by account

* feat: TransactionCard

* wip: trying to calc amount

* Transactions list

* feat: token list

* feat: Allocation

* Hide link to portfolio behind debug flag

* Show portfolio link if logged in

* Refactor and prepare layout for shared work

* Remove unused var

* Clean up

---------

Co-authored-by: Hornebom <[email protected]>

centrifuge-app/src/components/LayoutBase/BasePadding.tsx

@@ -0,0 +1,14 @@
+import { BoxProps, Stack } from '@centrifuge/fabric'
+import * as React from 'react'
+
+type BaseSectionProps = BoxProps & {
+  children: React.ReactNode
+}
+
+export function BasePadding({ children, ...boxProps }: BaseSectionProps) {
+  return (
+    <Stack pt={3} pb={4} px={[2, 2, 3, 3, 5]} {...boxProps}>
+      {children}
+    </Stack>
+  )
+}

centrifuge-app/src/components/LayoutBase/index.tsx

@@ -1,12 +1,12 @@
 import { WalletMenu } from '@centrifuge/centrifuge-react'
+import { Box } from '@centrifuge/fabric'
 import * as React from 'react'
 import { Footer } from '../Footer'
 import { LoadBoundary } from '../LoadBoundary'
 import { LogoLink } from '../LogoLink'
 import { Menu } from '../Menu'
 import { OnboardingStatus } from '../OnboardingStatus'
 import { SideDrawerProps } from '../SideDrawer'
-import { config } from './config'
 import {
   FooterContainer,
   HeaderBackground,
@@ -35,9 +35,9 @@ export function LayoutBase({ children, sideDrawer }: LayoutBaseProps) {
           <LogoLink />
         </LogoContainer>
 
-        <WalletContainer px={config.PADDING_MAIN}>
+        <WalletContainer px={[2, 2, 3, 3, 5]}>
           <WalletPositioner>
-            <WalletInner minWidth={config.WALLET_WIDTH}>
+            <WalletInner minWidth={[200, 264]}>
               <WalletMenu menuItems={[<OnboardingStatus />]} />
             </WalletInner>
           </WalletPositioner>
@@ -48,7 +48,9 @@ export function LayoutBase({ children, sideDrawer }: LayoutBaseProps) {
         </ToolbarContainer>
 
         <LoadBoundary>
-          <MainContainer as="main">{children}</MainContainer>
+          <MainContainer as="main">
+            <Box maxWidth={1800}>{children}</Box>
+          </MainContainer>
         </LoadBoundary>
 
         <FooterContainer>

centrifuge-app/src/components/LayoutBase/styles.tsx

@@ -1,12 +1,17 @@
 import { Box, Grid, Shelf, Stack } from '@centrifuge/fabric'
 import styled from 'styled-components'
-import { config } from './config'
 
 // the main breakpoint to switch from stacked to columns layout
 const BREAK_POINT_COLUMNS = 'M'
 // breakpoint from minimal to extended left sidebar width
 const BREAK_POINT_SIDEBAR_EXTENDED = 'L'
 
+const HEADER_HEIGHT = 60
+const TOOLBAR_HEIGHT = 50
+const SIDEBAR_WIDTH = 80
+const SIDEBAR_WIDTH_EXTENDED = 220
+const LAYOUT_MAX_WIDTH = 1800
+
 export const Root = styled(Box)`
   position: relative;
   min-height: 100vh;
@@ -29,7 +34,7 @@ export const Inner = styled(Grid)`
   min-height: 100%;
 
   align-items: start;
-  grid-template-rows: 0px ${config.HEADER_HEIGHT}px 1fr auto ${config.TOOLBAR_HEIGHT}px;
+  grid-template-rows: 0px ${HEADER_HEIGHT}px 1fr auto ${TOOLBAR_HEIGHT}px;
   grid-template-columns: auto 1fr;
   grid-template-areas:
     'header-background header-background'
@@ -39,16 +44,16 @@ export const Inner = styled(Grid)`
     'toolbar toolbar';
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
-    grid-template-rows: ${config.HEADER_HEIGHT}px minmax(max-content, 1fr) auto;
-    grid-template-columns: ${config.SIDEBAR_WIDTH}px 1fr;
+    grid-template-rows: ${HEADER_HEIGHT}px minmax(max-content, 1fr) auto;
+    grid-template-columns: ${SIDEBAR_WIDTH}px 1fr;
     grid-template-areas:
       'logo wallet'
       'toolbar main'
       'footer main';
   }
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_SIDEBAR_EXTENDED]}) {
-    grid-template-columns: ${config.SIDEBAR_WIDTH_EXTENDED}px 1fr;
+    grid-template-columns: ${SIDEBAR_WIDTH_EXTENDED}px 1fr;
   }
 `
 
@@ -60,7 +65,7 @@ export const HeaderBackground = styled(Box)`
 
   grid-area: header-background;
   width: 100%;
-  height: ${config.HEADER_HEIGHT}px;
+  height: ${HEADER_HEIGHT}px;
 
   background-color: ${({ theme }) => theme.colors.backgroundPrimary};
   border-bottom: ${({ theme }) => `1px solid ${theme.colors.borderSecondary}`};
@@ -76,13 +81,13 @@ export const ToolbarContainer = styled(Box)`
   position: sticky;
   left: 0;
   bottom: 0;
-  height: ${config.TOOLBAR_HEIGHT}px;
+  height: ${TOOLBAR_HEIGHT}px;
 
   border-top: ${({ theme }) => `1px solid ${theme.colors.borderSecondary}`};
   background-color: ${({ theme }) => theme.colors.backgroundPrimary};
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
-    top: ${({ theme }) => theme.space[4] + config.HEADER_HEIGHT}px;
+    top: ${({ theme }) => theme.space[4] + HEADER_HEIGHT}px;
     bottom: auto;
     height: auto;
 
@@ -101,7 +106,7 @@ export const LogoContainer = styled(Stack)`
   top: 0;
 
   grid-area: logo;
-  height: ${config.HEADER_HEIGHT}px;
+  height: ${HEADER_HEIGHT}px;
   padding-left: ${({ theme }) => theme.space[2]}px;
   justify-content: center;
 
@@ -122,13 +127,13 @@ export const WalletContainer = styled(Stack)`
 `
 
 export const WalletPositioner = styled(Shelf)`
-  max-width: ${config.LAYOUT_MAX_WIDTH}px;
+  max-width: ${LAYOUT_MAX_WIDTH}px;
   justify-content: flex-end;
   align-items: flex-start;
 `
 
 export const WalletInner = styled(Stack)`
-  height: ${config.HEADER_HEIGHT}px;
+  height: ${HEADER_HEIGHT}px;
   justify-content: center;
   pointer-events: auto; // resetting pointer events
 
@@ -142,7 +147,7 @@ export const MainContainer = styled(Box)`
   align-self: stretch;
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
-    margin-top: calc(${config.HEADER_HEIGHT}px * -1);
+    margin-top: calc(${HEADER_HEIGHT}px * -1);
     border-left: ${({ theme }) => `1px solid ${theme.colors.borderSecondary}`};
   }
 `

centrifuge-app/src/components/LiquidityRewards/LiquidityRewardsProvider.tsx

@@ -75,7 +75,7 @@ function Provider({ poolId, trancheId, children }: LiquidityRewardsProviderProps
         return
       }
 
-      claim.execute([poolId, trancheId])
+      claim.execute([[{ poolId, trancheId }]])
     },
     stake: () => {
       if (!pool.currency || !order || !order.payoutTokenAmount || !trancheId) {

centrifuge-app/src/components/Menu/index.tsx

@@ -1,8 +1,18 @@
-import { Box, IconInvestments, IconNft, Menu as Panel, MenuItemGroup, Shelf, Stack } from '@centrifuge/fabric'
+import {
+  Box,
+  IconInvestments,
+  IconNft,
+  IconPieChart,
+  Menu as Panel,
+  MenuItemGroup,
+  Shelf,
+  Stack,
+} from '@centrifuge/fabric'
 import { config } from '../../config'
 import { useAddress } from '../../utils/useAddress'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { usePoolsThatAnyConnectedAddressHasPermissionsFor } from '../../utils/usePermissions'
+import { useDebugFlags } from '../DebugFlags'
 import { RouterLinkButton } from '../RouterLinkButton'
 import { GovernanceMenu } from './GovernanceMenu'
 import { IssuerMenu } from './IssuerMenu'
@@ -13,6 +23,7 @@ export function Menu() {
   const pools = usePoolsThatAnyConnectedAddressHasPermissionsFor() || []
   const isLarge = useIsAboveBreakpoint('L')
   const address = useAddress('substrate')
+  const { showPortfolio } = useDebugFlags()
 
   return (
     <Shelf
@@ -36,6 +47,13 @@ export function Menu() {
 
       <GovernanceMenu />
 
+      {showPortfolio && address && (
+        <PageLink to="/portfolio" stacked={!isLarge}>
+          <IconPieChart />
+          Portfolio
+        </PageLink>
+      )}
+
       {(pools.length > 0 || config.poolCreationType === 'immediate') && (
         <IssuerMenu defaultOpen={isLarge} stacked={!isLarge}>
           {isLarge ? (

centrifuge-app/src/components/PoolCard/index.tsx

@@ -37,7 +37,7 @@ export function PoolCard({
   iconUri,
   isLoading,
 }: PoolCardProps) {
-  const basePath = useRouteMatch(['/pools', '/issuer'])?.path || ''
+  const basePath = useRouteMatch(['/pools', '/issuer'])?.path || '/pools'
   const { sizes } = useTheme()
 
   return (