Skip to content
This repository was archived by the owner on Apr 4, 2022. It is now read-only.

Signing status styles #866

Merged
merged 3 commits into from
Nov 24, 2021
Merged

Signing status styles #866

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f60a1b7
remove inline-block
alongoni Nov 23, 2021
0c2920b
add Cancelling status to the stories
alongoni Nov 24, 2021
b6b6200
remove cancelling order status from api
alongoni Nov 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/api/operator/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,14 @@ export interface FeeInformation {

export type OrderKind = 'sell' | 'buy'

export type OrderStatus = 'open' | 'filled' | 'cancelled' | 'expired' | 'signing'
export type RawOrderStatusFromAPI = 'presignaturePending' | 'open' | 'fullfilled' | 'cancelled' | 'expired'
export type OrderStatus = 'open' | 'filled' | 'cancelled' | 'cancelling' | 'expired' | 'signing'
export type RawOrderStatusFromAPI =
| 'presignaturePending'
| 'open'
| 'fullfilled'
| 'cancelled'
| 'cancelling'
Copy link
Contributor

@henrypalacios henrypalacios Nov 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As this cancelling doesn't come from the API yet, maybe we can omit it or add a comment about it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch!

| 'expired'

// Raw API response
export type RawOrder = {
Expand Down
5 changes: 5 additions & 0 deletions src/components/orders/StatusLabel/StatusLabel.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }

Expand All @@ -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 }
6 changes: 4 additions & 2 deletions src/components/orders/StatusLabel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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':
Expand All @@ -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>
Expand Down