feat(ui): show number of confs for incoming onchain txs in activity list

resolve LN-Zap#1685
korhaliv · Nov 7, 2019 · 8915f76 · 8915f76
1 parent 929496d
commit 8915f76
Showing 1 changed file with 31 additions and 3 deletions.
diff --git a/renderer/components/Activity/Transaction/Transaction.js b/renderer/components/Activity/Transaction/Transaction.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
+import config from 'config'
 import { intlShape } from '@zap/i18n'
 import { Message, Text } from 'components/UI'
 import ChainLink from 'components/Icon/ChainLink'
@@ -18,6 +19,35 @@ const Transaction = ({ activity, showActivityModal, cryptoUnitName, intl, ...res
   } else if (activity.isClosing) {
     type = 'closing'
   }
+  const renderConfirmations = () => {
+    const { num_confirmations } = activity
+    const { pending, confirmed } = config.onchainFinality
+
+    // finality to color mapping
+    const COLORS = {
+      [pending]: 'primaryAccent',
+      [confirmed]: 'superGreen',
+    }
+
+    // returns color for the current number of confirmations
+    const getColor = () => {
+      const finality = Object.keys(COLORS).find(finality => num_confirmations <= finality)
+      return COLORS[finality]
+    }
+
+    return num_confirmations > confirmed ? (
+      <Text color="gray" fontSize="xs" fontWeight="normal">
+        <FormattedTime value={activity.time_stamp * 1000} />
+      </Text>
+    ) : (
+      <Text color={getColor()} fontSize="xs" fontWeight="normal">
+        <FormattedMessage
+          {...messages.confirmations}
+          values={{ confirmations: num_confirmations }}
+        />
+      </Text>
+    )
+  }
 
   return (
     <Flex
@@ -62,9 +92,7 @@ const Transaction = ({ activity, showActivityModal, cryptoUnitName, intl, ...res
             )}
           </>
         ) : (
-          <Text color="gray" fontSize="xs" fontWeight="normal">
-            <FormattedTime value={activity.time_stamp * 1000} />
-          </Text>
+          renderConfirmations()
         )}
       </Box>