Expose accept/reject settlement proposal actions in maker's UI

Create a new tab group for cfds that have incoming settlement proposals

frontend/src/MakerApp.tsx

@@ -64,7 +64,10 @@ export default function App() {
         },
     });
 
-    const acceptOrReject = cfds.filter((value) => value.state.getGroup() === StateGroupKey.ACCEPT_OR_REJECT);
+    const acceptOrRejectOrder = cfds.filter((value) => value.state.getGroup() === StateGroupKey.ACCEPT_OR_REJECT_ORDER);
+    const acceptOrRejectSettlement = cfds.filter((value) =>
+        value.state.getGroup() === StateGroupKey.ACCEPT_OR_REJECT_SETTLEMENT
+    );
     const opening = cfds.filter((value) => value.state.getGroup() === StateGroupKey.OPENING);
     const open = cfds.filter((value) => value.state.getGroup() === StateGroupKey.OPEN);
     const closed = cfds.filter((value) => value.state.getGroup() === StateGroupKey.CLOSED);
@@ -156,7 +159,8 @@ export default function App() {
             <Tabs marginTop={5}>
                 <TabList>
                     <Tab>Open [{open.length}]</Tab>
-                    <Tab>Accept / Reject [{acceptOrReject.length}]</Tab>
+                    <Tab>Accept / Reject Order [{acceptOrRejectOrder.length}]</Tab>
+                    <Tab>Accept / Reject Settlement [{acceptOrRejectSettlement.length}]</Tab>
                     <Tab>Opening [{opening.length}]</Tab>
                     <Tab>Closed [{closed.length}]</Tab>
                 </TabList>
@@ -166,7 +170,10 @@ export default function App() {
                         <CfdTable data={open} />
                     </TabPanel>
                     <TabPanel>
-                        <CfdTable data={acceptOrReject} />
+                        <CfdTable data={acceptOrRejectOrder} />
+                    </TabPanel>
+                    <TabPanel>
+                        <CfdTable data={acceptOrRejectSettlement} />
                     </TabPanel>
                     <TabPanel>
                         <CfdTable data={opening} />

frontend/src/components/Types.tsx

@@ -56,9 +56,9 @@ export class State {
     public getLabel(): string {
         switch (this.key) {
             case StateKey.INCOMING_ORDER_REQUEST:
-                return "Take Requested";
+                return "Order Requested";
             case StateKey.OUTGOING_ORDER_REQUEST:
-                return "Take Requested";
+                return "Order Requested";
             case StateKey.ACCEPTED:
                 return "Accepted";
             case StateKey.REJECTED:
@@ -73,6 +73,10 @@ export class State {
                 return "Pending Commit";
             case StateKey.OPEN_COMMITTED:
                 return "Open (commit-tx published)";
+            case StateKey.INCOMING_SETTLEMENT_PROPOSAL:
+                return "Settlement Proposed";
+            case StateKey.OUTGOING_SETTLEMENT_PROPOSAL:
+                return "Settlement Proposed";
             case StateKey.MUST_REFUND:
                 return "Refunding";
             case StateKey.REFUNDED:
@@ -103,6 +107,8 @@ export class State {
 
             case StateKey.OUTGOING_ORDER_REQUEST:
             case StateKey.INCOMING_ORDER_REQUEST:
+            case StateKey.OUTGOING_SETTLEMENT_PROPOSAL:
+            case StateKey.INCOMING_SETTLEMENT_PROPOSAL:
             case StateKey.CONTRACT_SETUP:
             case StateKey.PENDING_OPEN:
             case StateKey.REFUNDED:
@@ -114,7 +120,7 @@ export class State {
     public getGroup(): StateGroupKey {
         switch (this.key) {
             case StateKey.INCOMING_ORDER_REQUEST:
-                return StateGroupKey.ACCEPT_OR_REJECT;
+                return StateGroupKey.ACCEPT_OR_REJECT_ORDER;
 
             case StateKey.OUTGOING_ORDER_REQUEST:
             case StateKey.ACCEPTED:
@@ -126,8 +132,12 @@ export class State {
             case StateKey.PENDING_COMMIT:
             case StateKey.OPEN_COMMITTED:
             case StateKey.MUST_REFUND:
+            case StateKey.OUTGOING_SETTLEMENT_PROPOSAL:
                 return StateGroupKey.OPEN;
 
+            case StateKey.INCOMING_SETTLEMENT_PROPOSAL:
+                return StateGroupKey.ACCEPT_OR_REJECT_SETTLEMENT;
+
             case StateKey.REJECTED:
             case StateKey.REFUNDED:
             case StateKey.SETUP_FAILED:
@@ -141,6 +151,8 @@ export enum Action {
     REJECT_ORDER = "rejectOrder",
     COMMIT = "commit",
     SETTLE = "settle",
+    ACCEPT_SETTLEMENT = "acceptSettlement",
+    REJECT_SETTLEMENT = "rejectSettlement",
 }
 
 const enum StateKey {
@@ -153,6 +165,8 @@ const enum StateKey {
     OPEN = "Open",
     PENDING_COMMIT = "PendingCommit",
     OPEN_COMMITTED = "OpenCommitted",
+    OUTGOING_SETTLEMENT_PROPOSAL = "OutgoingSettlementProposal",
+    INCOMING_SETTLEMENT_PROPOSAL = "IncomingSettlementProposal",
     MUST_REFUND = "MustRefund",
     REFUNDED = "Refunded",
     SETUP_FAILED = "SetupFailed",
@@ -161,9 +175,10 @@ const enum StateKey {
 export enum StateGroupKey {
     /// A CFD which is still being set up (not on chain yet)
     OPENING = "Opening",
-    ACCEPT_OR_REJECT = "Accept / Reject",
+    ACCEPT_OR_REJECT_ORDER = "Accept / Reject Order",
     /// A CFD that is an ongoing open position (on chain)
     OPEN = "Open",
+    ACCEPT_OR_REJECT_SETTLEMENT = "Accept / Reject Settlement",
     /// A CFD that has been successfully or not-successfully terminated
     CLOSED = "Closed",
 }

frontend/src/components/cfdtables/CfdTable.tsx

@@ -195,6 +195,10 @@ function iconForAction(action: Action): any {
             return <WarningIcon />;
         case Action.SETTLE:
             return <CheckCircleIcon />;
+        case Action.ACCEPT_SETTLEMENT:
+            return <CheckIcon />;
+        case Action.REJECT_SETTLEMENT:
+            return <CloseIcon />;
     }
 }
 
@@ -208,6 +212,10 @@ function colorSchemaForAction(action: Action): string {
             return "red";
         case Action.SETTLE:
             return "green";
+        case Action.ACCEPT_SETTLEMENT:
+            return "green";
+        case Action.REJECT_SETTLEMENT:
+            return "red";
     }
 }