Signing status styles

src/api/operator/types.ts

@@ -19,7 +19,7 @@ export interface FeeInformation {
 
 export type OrderKind = 'sell' | 'buy'
 
-export type OrderStatus = 'open' | 'filled' | 'cancelled' | 'expired' | 'signing'
+export type OrderStatus = 'open' | 'filled' | 'cancelled' | 'cancelling' | 'expired' | 'signing'
 export type RawOrderStatusFromAPI = 'presignaturePending' | 'open' | 'fullfilled' | 'cancelled' | 'expired'
 
 // Raw API response

src/components/orders/StatusLabel/StatusLabel.stories.tsx

@@ -23,6 +23,9 @@ Expired.args = { status: 'expired' }
 export const Cancelled = Template.bind({})
 Cancelled.args = { status: 'cancelled' }
 
+export const Cancelling = Template.bind({})
+Cancelling.args = { status: 'cancelling' }
+
 export const Open = Template.bind({})
 Open.args = { status: 'open' }
 
@@ -35,3 +38,5 @@ export const ExpiredPartiallyFilled = Template.bind({})
 ExpiredPartiallyFilled.args = { status: 'expired', partiallyFilled: true }
 export const CancelledPartiallyFilled = Template.bind({})
 CancelledPartiallyFilled.args = { status: 'cancelled', partiallyFilled: true }
+export const CancellingPartiallyFilled = Template.bind({})
+CancellingPartiallyFilled.args = { status: 'cancelling', partiallyFilled: true }

src/components/orders/StatusLabel/index.tsx

@@ -20,6 +20,7 @@ function setStatusColors({ theme, status }: { theme: DefaultTheme; status: Order
   switch (status) {
     case 'expired':
     case 'cancelled':
+    case 'cancelling':
       text = theme.orange
       background = theme.orangeOpacity
       break
@@ -66,7 +67,6 @@ const Label = styled.div<DisplayProps & ShimmingProps>`
   ${({ shimming }): FlattenSimpleInterpolation | null =>
     shimming
       ? css`
-          display: inline-block;
           -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%;
           mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%;
           background-repeat: no-repeat;
@@ -94,6 +94,8 @@ function getStatusIcon(status: OrderStatus): IconDefinition {
       return faCheckCircle
     case 'cancelled':
       return faTimesCircle
+    case 'cancelling':
+      return faTimesCircle
     case 'signing':
       return faKey
     case 'open':
@@ -112,7 +114,7 @@ export type Props = DisplayProps & { partiallyFilled: boolean }
 
 export function StatusLabel(props: Props): JSX.Element {
   const { status, partiallyFilled } = props
-  const shimming = status === 'signing'
+  const shimming = status === 'signing' || status === 'cancelling'
 
   return (
     <Wrapper>