feat(simple buy): show other order state statuses as well

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/model.tsx

@@ -1,33 +1,62 @@
 import { FormattedMessage } from 'react-intl'
 import { getOrderType } from 'data/components/simpleBuy/model'
 import { SBOrderType } from 'core/types'
+import { Text } from 'blockchain-info-components'
 import React from 'react'
 
 export const Status = ({ order }: { order: SBOrderType }) => {
   const type = getOrderType(order)
   switch (order.state) {
+    case 'FINISHED':
+      return (
+        <Text size='14px' weight={500} color='green600'>
+          <FormattedMessage
+            id='modals.simplebuy.transactionfeed.complete'
+            defaultMessage='{type} Completed'
+            values={{ type: type === 'BUY' ? 'Buy' : 'Sell' }}
+          />
+        </Text>
+      )
     case 'PENDING_CONFIRMATION':
     case 'PENDING_DEPOSIT':
       return (
-        <FormattedMessage
-          id='modals.simplebuy.transactionfeed.waitingondepo'
-          defaultMessage='Pending Deposit'
-        />
+        <Text size='14px' weight={500}>
+          <FormattedMessage
+            id='modals.simplebuy.transactionfeed.waitingondepo'
+            defaultMessage='Pending Deposit'
+          />
+        </Text>
       )
     case 'DEPOSIT_MATCHED':
       return (
-        <FormattedMessage
-          id='modals.simplebuy.transactionfeed.pending'
-          defaultMessage='Pending {type}'
-          values={{ type: type === 'BUY' ? 'Buy' : 'Sell' }}
-        />
+        <Text size='14px' weight={500}>
+          <FormattedMessage
+            id='modals.simplebuy.transactionfeed.pending'
+            defaultMessage='Pending {type}'
+            values={{ type: type === 'BUY' ? 'Buy' : 'Sell' }}
+          />
+        </Text>
+      )
+    case 'FAILED':
+    case 'EXPIRED':
+    case 'CANCELED':
+      return (
+        <Text size='14px' weight={500} color='red600'>
+          <FormattedMessage
+            id='modals.simplebuy.transactionfeed.failed'
+            defaultMessage='{type} Failed'
+            values={{ type: type === 'BUY' ? 'Buy' : 'Sell' }}
+          />
+        </Text>
       )
     default:
       return (
-        <FormattedMessage
-          id='modals.simplebuy.transactionfeed.unknown'
-          defaultMessage='Unknown Status'
-        />
+        <Text size='14px' weight={500} color='red600'>
+          <FormattedMessage
+            id='modals.simplebuy.transactionfeed.unknown'
+            defaultMessage='Unknown Status'
+          />
+        </Text>
       )
   }
 }

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/template.simplebuy.tsx

@@ -104,22 +104,12 @@ class SimpleBuyListItem extends PureComponent<Props> {
                     Currencies[order.inputCurrency].units[order.inputCurrency],
                   value: convertBaseToStandard('FIAT', order.inputQuantity)
                 })
-              : Currency.coinToString({
-                  unit:
-                    Currencies[order.inputCurrency].units[order.inputCurrency],
-                  value: convertBaseToStandard(
-                    order.inputCurrency as CoinType,
-                    order.inputQuantity
-                  )
-                })
+              : 'Not yet implemented'
 
-          // add conditional here to only show if state is DEPOSIT_MATCHED, PENDING_DEPOSIT, 'PENDING_CONFIRMATION'
           return (
             <TransactionRow>
               <StatusColumn data-e2e='orderStatusColumn'>
-                <Text size='14px' weight={500}>
-                  <Status order={order} />
-                </Text>
+                <Status order={order} />
               </StatusColumn>
               <AmountColumn data-e2e='orderAmountColumn'>
                 <Text size='14px' weight={500}>