Merge #411

411: Show cfd expiry in UI r=bonomat a=bonomat

Looks so pretty :) 

<img width="575" alt="image" src="https://user-images.githubusercontent.com/224613/138366374-fb722b13-3b4f-42b0-9edb-bbe3ff9f8e3d.png">



Co-authored-by: Philipp Hoenisch <philipp@hoenisch.at>

daemon/src/model.rs

@@ -207,6 +207,10 @@ impl BitMexPriceEventId {
             .join(&self.to_string())
             .expect("Event id can be joined")
     }
+
+    pub fn timestamp(&self) -> OffsetDateTime {
+        self.timestamp
+    }
 }
 
 impl fmt::Display for BitMexPriceEventId {

daemon/src/model/cfd.rs

@@ -17,7 +17,7 @@ use std::collections::HashMap;
 use std::fmt;
 use std::ops::{Neg, RangeInclusive};
 use std::time::SystemTime;
-use time::Duration;
+use time::{Duration, OffsetDateTime};
 use uuid::adapter::Hyphenated;
 use uuid::Uuid;
 
@@ -686,6 +686,10 @@ impl Cfd {
         (self.order.term * Cfd::REFUND_THRESHOLD).as_blocks().ceil() as u32
     }
 
+    pub fn expiry_timestamp(&self) -> OffsetDateTime {
+        self.order.oracle_event_id.timestamp()
+    }
+
     /// A factor to be added to the CFD order term for calculating the refund timelock.
     ///
     /// The refund timelock is important in case the oracle disappears or never publishes a

daemon/src/to_sse_event.rs

@@ -10,6 +10,7 @@ use rust_decimal::Decimal;
 use serde::{Deserialize, Serialize};
 use std::convert::TryInto;
 use std::time::{SystemTime, UNIX_EPOCH};
+use time::OffsetDateTime;
 use tokio::sync::watch;
 
 #[derive(Debug, Clone, Serialize)]
@@ -38,6 +39,9 @@ pub struct Cfd {
     pub state_transition_timestamp: u64,
 
     pub details: CfdDetails,
+
+    #[serde(with = "::time::serde::timestamp")]
+    pub expiry_timestamp: OffsetDateTime,
 }
 
 #[derive(Debug, Clone, Serialize)]
@@ -261,6 +265,7 @@ impl ToSseEvent for CfdsWithAuxData {
                     margin: cfd.margin().unwrap(),
                     margin_counterparty: cfd.counterparty_margin().unwrap(),
                     details,
+                    expiry_timestamp: cfd.expiry_timestamp(),
                 }
             })
             .collect::<Vec<Cfd>>();

frontend/src/components/Types.tsx

@@ -49,6 +49,7 @@ export interface Cfd {
     actions: Action[];
     state_transition_timestamp: number;
     details: CfdDetails;
+    expiry_timestamp: number;
 }
 
 export interface CfdDetails {

frontend/src/components/cfdtables/CfdTable.tsx

@@ -20,6 +20,7 @@ import {
     Table as CUITable,
     Tbody,
     Td,
+    Text,
     Th,
     Thead,
     Tooltip,
@@ -30,6 +31,7 @@ import {
 import React from "react";
 import { useAsync } from "react-async";
 import { Column, Row, useExpanded, useSortBy, useTable } from "react-table";
+import Timestamp from "../Timestamp";
 import { Action, Cfd } from "../Types";
 
 interface CfdTableProps {
@@ -95,7 +97,7 @@ export function CfdTable(
             },
             {
                 Header: "Details",
-                accessor: ({ details }) => {
+                accessor: ({ details, expiry_timestamp }) => {
                     const txs = details.tx_url_list.map((tx) => {
                         return (<Link href={tx.url} key={tx.url} isExternal>
                             {tx.label + " transaction"}
@@ -108,6 +110,10 @@ export function CfdTable(
                             <VStack>
                                 {txs}
                                 {details.payout && <Box>Payout: {details.payout}</Box>}
+                                <HStack>
+                                    <Text>Expires on:</Text>
+                                    <Timestamp timestamp={expiry_timestamp} />
+                                </HStack>
                             </VStack>
                         </Box>
                     );
@@ -260,7 +266,7 @@ function colorSchemaForAction(action: Action): string {
 function renderRowSubComponent(row: Row<Cfd>) {
     let cells = row.allCells
         .filter((cell) => {
-            return ["Details"].includes(cell.column.id);
+            return ["Details", "Timestamp"].includes(cell.column.id);
         })
         .map((cell) => {
             return cell;