Small UI fixes (#2674)

Author: kattylucy

centrifuge-app/src/components/Dashboard/Account/AssetsSection.tsx

@@ -105,9 +105,14 @@ export default function AssetsSection({ pool }: { pool: Pool }) {
     }
   )
 
-  let [liquidityAdminAccount] = useSuitableAccounts({ poolId: pool.id, poolRole: ['LiquidityAdmin'] })
   const [update, setUpdate] = useState(false)
   const isTinlakePool = pool.id.startsWith('0x')
+  const [liquidityAdminAccount] = useSuitableAccounts({ poolId: pool.id, poolRole: ['LiquidityAdmin'] })
+  const [account] = useSuitableAccounts({
+    poolId: pool.id,
+    proxyType: ['Borrow', 'Invest'],
+    poolRole: ['LiquidityAdmin', 'PoolAdmin'],
+  })
 
   // Needs to update when selecting a new pool
   useEffect(() => {
@@ -155,6 +160,39 @@ export default function AssetsSection({ pool }: { pool: Pool }) {
       return acc
     }, {}) || {}
 
+  const { execute: closeEpochTx, isLoading: loadingClose } = useCentrifugeTransaction(
+    'Start order execution',
+    (cent) => (args: [poolId: string, collect: boolean], options) =>
+      cent.pools.closeEpoch([args[0], false], { batch: true }).pipe(
+        switchMap((closeTx) => {
+          const tx = api.tx.utility.batchAll(
+            [
+              ...closeTx.method.args[0],
+              orders?.length
+                ? api.tx.utility.batch(
+                    orders
+                      .slice(0, MAX_COLLECT)
+                      .map((order) =>
+                        api.tx.investments[order.type === 'invest' ? 'collectInvestmentsFor' : 'collectRedemptionsFor'](
+                          order.accountId,
+                          [pool.id, order.trancheId]
+                        )
+                      )
+                  )
+                : null,
+            ].filter(Boolean)
+          )
+          return cent.wrapSignAndSend(api, tx, options)
+        })
+      ),
+    {
+      onSuccess: () => {
+        setUpdate(false)
+        queryClient.invalidateQueries(['loans', pool.id])
+      },
+    }
+  )
+
   const { execute, isLoading: isUpdating } = useCentrifugeTransaction(
     'Update NAV',
     (cent) => (args: [values: TransactionLoanData[]], options) => {
@@ -305,8 +343,10 @@ export default function AssetsSection({ pool }: { pool: Pool }) {
     },
     {
       onSuccess: () => {
-        setUpdate(false)
-        queryClient.invalidateQueries(['loans', pool.id])
+        closeEpochTx([pool.id, ordersFullyExecutable], {
+          account,
+          forceProxyType: ['Borrow', 'Invest'],
+        })
       },
     }
   )
@@ -500,7 +540,7 @@ export default function AssetsSection({ pool }: { pool: Pool }) {
                 <Button
                   small
                   style={{ width: '170px' }}
-                  disabled={!form.dirty || isUpdating}
+                  disabled={!form.dirty || isUpdating || loadingClose}
                   onClick={() => form.submitForm()}
                 >
                   Update NAV

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

@@ -2,7 +2,7 @@ import { WalletMenu } from '@centrifuge/centrifuge-react'
 import { Box, Drawer, IconButton, IconHamburger, IconX } from '@centrifuge/fabric'
 import { useEffect, useState } from 'react'
 import { Outlet, useLocation } from 'react-router'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { Footer } from '../Footer'
 import { LogoLink } from '../LogoLink-deprecated'
@@ -68,6 +68,7 @@ const MobileMenuContent = () => (
 )
 
 export const LayoutBase = () => {
+  const theme = useTheme()
   const location = useLocation()
   const isDesktop = useIsAboveBreakpoint('L')
   const isMedium = useIsAboveBreakpoint('M')
@@ -82,7 +83,7 @@ export const LayoutBase = () => {
   return (
     <>
       {isDesktop && (
-        <Box position="fixed" top="1rem" right="1rem" zIndex={1200} width={220} mt={2} marginRight={1}>
+        <Box position="fixed" top="1rem" right="1rem" zIndex={theme.zIndices.header} mt={2} marginRight={1}>
           <WalletMenu />
         </Box>
       )}

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

@@ -23,7 +23,7 @@ const StyledCard = styled(Card)`
   max-width: 100%;
   padding: 12px;
   border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
-  height: 350px;
+  min-height: 350px;
 
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.textPrimary};

centrifuge-app/src/components/PoolList.tsx

@@ -78,7 +78,7 @@ export function PoolList() {
     <Stack>
       <Stack>
         <Box overflow="auto">
-          <Grid columns={[1, 2, 2, 3]} as="ul" role="list" gap={3}>
+          <Grid columns={[1, 1, 2, 2, 3]} as="ul" role="list" gap={3}>
             {metadataIsLoading
               ? Array(6)
                   .fill(true)

centrifuge-js/src/modules/pools.ts

@@ -40,6 +40,7 @@ import {
   isValidDate,
 } from '../utils'
 import { CurrencyBalance, Perquintill, Price, Rate, TokenBalance } from '../utils/BN'
+import { parseDate } from '../utils/Date'
 import { Dec } from '../utils/Decimal'
 
 const PerquintillBN = new BN(10).pow(new BN(18))
@@ -1603,12 +1604,12 @@ export function getPoolsModule(inst: Centrifuge) {
                       tranches: {},
                     }
                     permissions.trancheInvestor.info
-                      .filter((info: any) => info.permissionedTill * 1000 > Date.now())
+                      .filter((info: any) => parseDate(info.permissionedTill) > new Date())
                       .forEach((info: any) => {
-                        roles.tranches[info.trancheId] = {
-                          permissionedTill: new Date(info.permissionedTill * 1000).toISOString(),
+                        return (roles.tranches[info.trancheId] = {
+                          permissionedTill: parseDate(info.permissionedTill).toISOString(),
                           isFrozen: info.isFrozen,
-                        }
+                        })
                       })
 
                     setPoolRoles(account, poolId, roles)
@@ -1681,10 +1682,10 @@ export function getPoolsModule(inst: Centrifuge) {
                 tranches: {},
               }
               permissions.trancheInvestor.info
-                .filter((info: any) => info.permissionedTill * 1000 > Date.now())
+                .filter((info: any) => parseDate(info.permissionedTill) > new Date())
                 .forEach((info: any) => {
                   roles[account].tranches[info.trancheId] = {
-                    permissionedTill: new Date(info.permissionedTill * 1000).toISOString(),
+                    permissionedTill: parseDate(info.permissionedTill).toISOString(),
                     isFrozen: info.isFrozen,
                   }
                 })

centrifuge-js/src/utils/Date.ts

@@ -0,0 +1,4 @@
+export function parseDate(date: number) {
+  const isDateInSeconds = date.toString().length <= 10
+  return isDateInSeconds ? new Date(date * 1000) : new Date(date)
+}

fabric/src/components/Button/WalletButton.tsx

@@ -30,6 +30,7 @@ const StyledButton = styled.button`
   border-radius: 4px;
   white-space: nowrap;
   border: 3px solid transparent;
+  width: 220px;
 `
 
 const IdenticonWrapper = styled(Flex)({