Merge branch 'main' of github.com:centrifuge/apps into default-provider

centrifuge · Sep 16, 2024 · e8a66c1 · e8a66c1
2 parents e8a6074 + 78176db
commit e8a66c1
Show file tree

Hide file tree

Showing 29 changed files with 689 additions and 513 deletions.
diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx
@@ -32,7 +32,7 @@ export function LayoutBase(): JSX.Element {
       </WalletContainer>
       <Inner>
         <LogoContainer>
-          <LogoLink></LogoLink>
+          <LogoLink />
         </LogoContainer>
         <ToolbarContainer as="aside">
           <Menu />

diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -42,7 +42,7 @@ export const Inner = styled(Grid)`
   padding-bottom: 1rem;
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
       theme.breakpoints['L']}) {
-    width: 7vw;
+    width: 6vw;
     background-color: ${({ theme }) => theme.colors.backgroundInverted};
     overflow: visible;
   }
@@ -77,13 +77,19 @@ export const LogoContainer = styled(Stack)`
   z-index: ${({ theme }) => theme.zIndices.header};
   position: sticky;
   top: 0;
-  width: 100%;
 
-  grid-area: logo;
   height: ${HEADER_HEIGHT}px;
   justify-content: center;
+  padding-left: 12px;
 
-  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+  @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
+      theme.breakpoints['L']}) {
+    justify-content: start;
+    padding-top: ${({ theme }) => theme.space[2]}px;
+    padding-left: 12px;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
     justify-content: start;
     padding-top: ${({ theme }) => theme.space[2]}px;
   }
@@ -110,13 +116,15 @@ export const WalletPositioner = styled(Shelf)`
 `
 
 export const WalletInner = styled(Stack)`
-  height: ${HEADER_HEIGHT}px;
+  height: 80px;
   justify-content: center;
   pointer-events: auto;
   width: 250px;
+  margin-right: 40px;
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;
+    height: 50px;
   }
 `
 

diff --git a/centrifuge-app/src/components/LiquidityEpochSection.tsx b/centrifuge-app/src/components/LiquidityEpochSection.tsx
@@ -79,30 +79,29 @@ function EpochStatusOngoing({ pool }: { pool: Pool }) {
 
   const { execute: closeEpochTx, isLoading: loadingClose } = useCentrifugeTransaction(
     'Start order execution',
-    (cent) => (args: [poolId: string, batchSolution: boolean, collect: boolean], options) =>
-      !args[2]
-        ? cent.pools.closeEpoch([args[0], args[1]], options)
-        : cent.pools.closeEpoch([args[0], args[1]], { 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])
-                          )
+    (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)
-            })
-          ),
+                  )
+                : null,
+            ].filter(Boolean)
+          )
+          return cent.wrapSignAndSend(api, tx, options)
+        })
+      ),
     {
       onSuccess: () => {
         console.log('Started order execution successfully')
@@ -113,7 +112,7 @@ function EpochStatusOngoing({ pool }: { pool: Pool }) {
   const closeEpoch = async () => {
     if (!pool) return // const batchCloseAndSolution = ordersLocked && !ordersFullyExecutable
     // also collect the first MAX_COLLECT open orders when orders are fully executable
-    closeEpochTx([pool.id, false, ordersFullyExecutable], {
+    closeEpochTx([pool.id, ordersFullyExecutable], {
       account,
       forceProxyType: ['Borrow', 'Invest'],
     })

diff --git a/centrifuge-app/src/components/ListItemCardStyles.tsx b/centrifuge-app/src/components/ListItemCardStyles.tsx
@@ -34,3 +34,7 @@ export const Ellipsis = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
 `
+export const CardHeader = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+`
diff --git a/centrifuge-app/src/components/LogoLink-deprecated.tsx b/centrifuge-app/src/components/LogoLink-deprecated.tsx
@@ -7,12 +7,12 @@ const [LogoMark, WordMark] = config.logo
 
 export function LogoLink() {
   const isMedium = useIsAboveBreakpoint('M')
-  const isXLarge = useIsAboveBreakpoint('XL')
+  const isLarge = useIsAboveBreakpoint('L')
 
   return (
     <Link to="/">
-      <Box color="textPrimary" width={[80, 80, 36, 36, 120]}>
-        {isMedium && !isXLarge ? <LogoMark /> : <WordMark />}
+      <Box color="textPrimary" width={[80, 80, 36, 120, 120]}>
+        {!isMedium || isLarge ? <WordMark /> : <LogoMark />}
       </Box>
     </Link>
   )

diff --git a/centrifuge-app/src/components/PoolCard/PoolStatus.tsx b/centrifuge-app/src/components/PoolCard/PoolStatus.tsx
@@ -3,7 +3,7 @@ import { StatusChip, StatusChipProps } from '@centrifuge/fabric'
 export type PoolStatusKey = 'Open for investments' | 'Closed' | 'Upcoming' | 'Archived'
 
 const statusColor: { [key in PoolStatusKey]: StatusChipProps['status'] } = {
-  'Open for investments': 'ok',
+  'Open for investments': 'warning',
   Closed: 'default',
   Upcoming: 'default',
   Archived: 'default',