cancel order

centrifuge · Aug 25, 2023 · 07ca9eb · 07ca9eb
1 parent fa41c78
commit 07ca9eb
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 44 deletions.
diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx
@@ -22,12 +22,10 @@ import {
   Thumbnail,
   useControlledState,
 } from '@centrifuge/fabric'
-import css from '@styled-system/css'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikErrors, FormikProvider, useFormik } from 'formik'
 import * as React from 'react'
 import { useHistory, useParams } from 'react-router-dom'
-import styled from 'styled-components'
 import { ethConfig } from '../../config'
 import { Dec } from '../../utils/Decimal'
 import { formatBalance, roundDown } from '../../utils/formatting'
@@ -47,6 +45,7 @@ import { LoadBoundary } from '../LoadBoundary'
 import { Spinner } from '../Spinner'
 import { AnchorTextLink } from '../TextLink'
 import { InvestRedeemProvider, useInvestRedeem } from './InvestRedeemProvider'
+import { LightButton } from './LightButton'
 import { InvestRedeemState as InvestRedeemContextState } from './types'
 
 export type ActionsRef = React.MutableRefObject<
@@ -786,31 +785,6 @@ const SuccessBanner: React.FC<{ title: string; body?: string }> = ({ title, body
   )
 }
 
-const LightButton = styled.button<{ $left?: boolean }>(
-  {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    border: 0,
-    appearance: 'none',
-    height: 36,
-    cursor: 'pointer',
-  },
-  (props) =>
-    css({
-      color: 'textPrimary',
-      borderBottomLeftRadius: props.$left ? 'card' : undefined,
-      borderBottomRightRadius: props.$left ? undefined : 'card',
-      backgroundColor: 'secondarySelectedBackground',
-      '&:hover, &:focus-visible': {
-        color: 'textSelected',
-      },
-      '&:disabled': {
-        cursor: 'not-allowed',
-      },
-    })
-)
-
 const PendingOrder: React.FC<{
   type: 'invest' | 'redeem'
   amount: Decimal
@@ -846,7 +820,7 @@ const PendingOrder: React.FC<{
           </Text>
         </Stack>
         <Grid gap="1px" columns={2} equalColumns>
-          <LightButton type="button" $left onClick={onCancelOrder} disabled={isCancelling || calculatingOrders}>
+          <LightButton type="button" onClick={onCancelOrder} disabled={isCancelling || calculatingOrders}>
             {isCancelling ? (
               <Spinner size="iconSmall" />
             ) : (
@@ -855,11 +829,13 @@ const PendingOrder: React.FC<{
               </Text>
             )}
           </LightButton>
-          <LightButton type="button" onClick={onChangeOrder} disabled={isCancelling || calculatingOrders}>
-            <Text variant="body2" color="inherit">
-              Change order
-            </Text>
-          </LightButton>
+          {state.canChangeOrder && (
+            <LightButton type="button" onClick={onChangeOrder} disabled={isCancelling || calculatingOrders}>
+              <Text variant="body2" color="inherit">
+                Change order
+              </Text>
+            </LightButton>
+          )}
         </Grid>
       </Stack>
       <TransactionsLink />

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx
@@ -115,6 +115,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
     needsToCollectBeforeOrder: false,
     needsPoolCurrencyApproval: false,
     needsTrancheTokenApproval: false,
+    canChangeOrder: true,
     pendingAction,
     pendingTransaction: pendingAction && txActions[pendingAction]?.lastCreatedTransaction,
   }

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemLiquidityPoolsProvider.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemLiquidityPoolsProvider.tsx
@@ -135,6 +135,7 @@ export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children
     needsToCollectBeforeOrder: investToCollect.gt(0) || currencyToCollect.gt(0),
     needsPoolCurrencyApproval: lpInvest?.managerCurrencyAllowance.isZero() ?? false,
     needsTrancheTokenApproval: lpInvest?.managerTrancheTokenAllowance.isZero() ?? false,
+    canChangeOrder: false,
     pendingAction,
     pendingTransaction: pendingAction && txActions[pendingAction]?.lastCreatedTransaction,
   }

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemTinlakeProvider.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemTinlakeProvider.tsx
@@ -125,6 +125,7 @@ export function InvestRedeemTinlakeProvider({ poolId, trancheId, children }: Pro
     needsToCollectBeforeOrder: !collectAmount.isZero(),
     needsPoolCurrencyApproval: !!trancheInvestment?.poolCurrencyAllowance.isZero(),
     needsTrancheTokenApproval: !!trancheInvestment?.tokenAllowance.isZero(),
+    canChangeOrder: true,
     pendingAction,
     pendingTransaction: pendingAction && txActions[pendingAction]?.lastCreatedTransaction,
   }

diff --git a/...mponents/LiquidityRewards/LightButton.tsx → ...c/components/InvestRedeem/LightButton.tsx b/...mponents/LiquidityRewards/LightButton.tsx → ...c/components/InvestRedeem/LightButton.tsx
@@ -1,7 +1,7 @@
 import css from '@styled-system/css'
 import styled from 'styled-components'
 
-export const LightButton = styled.button<{ $left?: boolean; $right?: boolean }>(
+export const LightButton = styled.button(
   {
     display: 'flex',
     justifyContent: 'center',
@@ -14,14 +14,18 @@ export const LightButton = styled.button<{ $left?: boolean; $right?: boolean }>(
   (props) =>
     css({
       color: 'textPrimary',
-      borderBottomLeftRadius: props.$left ? 'card' : undefined,
-      borderBottomRightRadius: props.$right ? 'card' : undefined,
       backgroundColor: 'secondarySelectedBackground',
       '&:hover, &:focus-visible': {
         color: 'textSelected',
       },
       '&:disabled': {
         cursor: 'not-allowed',
       },
+      '&:first-child': {
+        borderBottomLeftRadius: 'card',
+      },
+      '&:last-child': {
+        borderBottomRightRadius: 'card',
+      },
     })
 )
diff --git a/centrifuge-app/src/components/InvestRedeem/types.ts b/centrifuge-app/src/components/InvestRedeem/types.ts
@@ -47,6 +47,7 @@ export type InvestRedeemState = {
   needsToCollectBeforeOrder: boolean
   needsPoolCurrencyApproval: boolean
   needsTrancheTokenApproval: boolean
+  canChangeOrder: boolean
   pendingAction?: InvestRedeemAction | null
   pendingTransaction?: Transaction | null
 }

diff --git a/centrifuge-app/src/components/LiquidityRewards/LiquidityRewardsStaker.tsx b/centrifuge-app/src/components/LiquidityRewards/LiquidityRewardsStaker.tsx
@@ -2,8 +2,8 @@ import { Box, Divider, Grid, IconCheckInCircle, Shelf, Stack, Text } from '@cent
 import * as React from 'react'
 import { millisecondsToDays } from '../../utils/date'
 import { formatBalance } from '../../utils/formatting'
+import { LightButton } from '../InvestRedeem/LightButton'
 import { useActiveEpochData } from './hooks'
-import { LightButton } from './LightButton'
 import { useLiquidityRewards } from './LiquidityRewardsContext'
 
 export function LiquidityRewardsStaker() {
@@ -69,19 +69,14 @@ export function LiquidityRewardsStaker() {
 
       <Grid mt="1px" gap="1px" columns={canStake && canUnstake ? 2 : 1}>
         {canStake && (
-          <LightButton onClick={stake} $left $right={!canUnstake} disabled={isLoading.unstake || isLoading.stake}>
+          <LightButton onClick={stake} disabled={isLoading.unstake || isLoading.stake}>
             <Text variant="body2" color="inherit">
               Stake
             </Text>
           </LightButton>
         )}
         {canUnstake && (
-          <LightButton
-            onClick={() => unstake()}
-            $left={!canStake}
-            $right
-            disabled={isLoading.unstake || isLoading.stake}
-          >
+          <LightButton onClick={() => unstake()} disabled={isLoading.unstake || isLoading.stake}>
             <Text variant="body2" color="inherit">
               Unstake
             </Text>