feat(ui): mark items with autopay enabled

app/components/Autopay/AutopayCardView.js

@@ -5,6 +5,7 @@ import { themeGet } from 'styled-system'
 import { Box, Flex } from 'rebass'
 import { Card, Heading } from 'components/UI'
 import AutopayAddButton from './AutopayAddButton'
+import AutopayLimitBadge from './AutopayLimitBadge'
 
 const CardWithBg = styled(Card)`
   position: relative;
@@ -47,7 +48,7 @@ const TextOverlay = styled(Overlay)`
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 `
 
-const AutopayCardView = ({ merchant: { image, nickname, pubkey }, onClick, ...rest }) => (
+const AutopayCardView = ({ merchant: { image, nickname, pubkey, isActive }, onClick, ...rest }) => (
   <Box {...rest} onClick={() => onClick(`${pubkey}`)}>
     <CardWithBg mb="12px" src={image}>
       <GradientOverlay />
@@ -57,7 +58,7 @@ const AutopayCardView = ({ merchant: { image, nickname, pubkey }, onClick, ...re
         </Heading.h1>
       </TextOverlay>
       <Overlay alignItems="flex-end" justifyContent="center" mt="12px">
-        <AutopayAddButton />
+        {isActive ? <AutopayLimitBadge /> : <AutopayAddButton />}
       </Overlay>
     </CardWithBg>
   </Box>

app/components/Autopay/AutopayLimitBadge.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Card, Flex, Box } from 'rebass'
+import { themeGet } from 'styled-system'
+import styled, { withTheme } from 'styled-components'
+import { tint } from 'polished'
+import Check from 'components/Icon/Check'
+
+const Gradient = styled(Card)`
+  background: linear-gradient(
+    to bottom,
+    ${props => tint(0.2, props.theme.colors[props.bg])},
+    ${props => props.theme.colors[props.bg]}
+  );
+`
+
+const AutopayLimitBadge = props => {
+  return (
+    <Gradient
+      bg="lightningOrange"
+      borderRadius="50%"
+      boxShadow={`0 0 24px 0 ${themeGet('colors.lightningOrange')(props)}`}
+      css={{ height: '35px' }}
+      width={35}
+      {...props}
+    >
+      <Flex alignItems="center" css={{ height: '100%' }} justifyContent="center">
+        <Box color="white">
+          <Check height={20} width={20} />
+        </Box>
+      </Flex>
+    </Gradient>
+  )
+}
+
+export default withTheme(AutopayLimitBadge)

app/reducers/autopay.js

@@ -137,12 +137,16 @@ autopaySelectors.selectedMerchant = createSelector(
 autopaySelectors.filteredMerchants = createSelector(
   autopaySelectors.merchants,
   autopaySelectors.searchQuery,
-  (merchants, searchQuery) => {
+  autopaySelectors.autopayList,
+  (merchants, searchQuery, autopayList) => {
+    const addIsActive = m => ({ ...m, isActive: [m.pubkey] in autopayList })
     if (!searchQuery) {
-      return merchants
+      return merchants.map(addIsActive)
     }
     const cleanedSearchQuery = searchQuery.toLowerCase()
-    return merchants.filter(m => m.nickname.toLowerCase().includes(cleanedSearchQuery))
+    return merchants
+      .filter(m => m.nickname.toLowerCase().includes(cleanedSearchQuery))
+      .map(addIsActive)
   }
 )