Changing to signing, refresh 25sec, adding storybook

src/api/operator/types.ts

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

src/apps/explorer/const.ts

@@ -2,7 +2,7 @@ import { AnalyticsDimension, Network } from 'types'
 
 /** Explorer app constants */
 export const ORDER_QUERY_INTERVAL = 10000 // in ms
-export const ORDERS_QUERY_INTERVAL = 30000 // in ms
+export const ORDERS_QUERY_INTERVAL = 25000 // in ms
 export const ORDERS_HISTORY_MINUTES_AGO = 10 // in minutes
 
 export const DISPLAY_TEXT_COPIED_CHECK = 1000 // in ms

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

@@ -26,6 +26,9 @@ Canceled.args = { status: 'cancelled' }
 export const Open = Template.bind({})
 Open.args = { status: 'open' }
 
+export const Signing = Template.bind({})
+Signing.args = { status: 'signing' }
+
 export const OpenPartiallyFilled = Template.bind({})
 OpenPartiallyFilled.args = { status: 'open', partiallyFilled: true }
 export const ExpiredPartiallyFilled = Template.bind({})

src/components/orders/StatusLabel/index.tsx

@@ -28,7 +28,7 @@ function setStatusColors({ theme, status }: { theme: DefaultTheme; status: Order
       background = theme.greenOpacity
       break
     case 'open':
-    case 'signature pending':
+    case 'signing':
       text = theme.labelTextOpen
       background = theme.labelBgOpen
       break
@@ -95,7 +95,7 @@ function getStatusIcon(status: OrderStatus): IconDefinition {
       return faCheckCircle
     case 'cancelled':
       return faTimesCircle
-    case 'signature pending':
+    case 'signing':
       return faKey
     case 'open':
       return faCircleNotch
@@ -105,7 +105,7 @@ function getStatusIcon(status: OrderStatus): IconDefinition {
 function StatusIcon({ status }: DisplayProps): JSX.Element {
   const icon = getStatusIcon(status)
   const isOpen = status === 'open'
-  const shimming = status === 'signature pending'
+  const shimming = status === 'signing'
 
   return <StyledFAIcon icon={icon} spin={isOpen} $shimming={shimming} />
 }

src/utils/operator.ts

@@ -49,16 +49,14 @@ function isOrderPresigning(order: RawOrder): boolean {
 }
 
 export function getOrderStatus(order: RawOrder): OrderStatus {
-  const date = new Date(order.creationDate)
-  if (date > new Date('2021-11-10T03:44:29.471646Z')) console.log(order)
   if (isOrderFilled(order)) {
     return 'filled'
   } else if (order.invalidated) {
     return 'cancelled'
   } else if (isOrderExpired(order)) {
     return 'expired'
   } else if (isOrderPresigning(order)) {
-    return 'signature pending'
+    return 'signing'
   } else {
     return 'open'
   }

test/utils/operator/orderStatus.test.ts

@@ -255,7 +255,7 @@ describe('Presignature pending status', () => {
         executedBuyAmount: '0',
         validTo: _getCurrentTimestamp(),
       }
-      expect(getOrderStatus(order)).toEqual('signature pending')
+      expect(getOrderStatus(order)).toEqual('signing')
     })
     test('signature is not pending', () => {
       const statusFetched: RawOrderStatusFromAPI = 'open'
@@ -268,7 +268,7 @@ describe('Presignature pending status', () => {
         executedBuyAmount: '0',
         validTo: _getCurrentTimestamp(),
       }
-      expect(getOrderStatus(order)).not.toEqual('signature pending')
+      expect(getOrderStatus(order)).not.toEqual('signing')
     })
   })
   describe('Sell order', () => {
@@ -283,7 +283,7 @@ describe('Presignature pending status', () => {
         executedSellAmount: '0',
         validTo: _getCurrentTimestamp(),
       }
-      expect(getOrderStatus(order)).toEqual('signature pending')
+      expect(getOrderStatus(order)).toEqual('signing')
     })
   })
 })