fix: added missing lodash dependency to accounts lib

fix: removed unnecessary properties from CAR page and config

style: changed the CAR page properties from radio groups to switches

fix: refetch config after saving

lib/new-admin/config/accounts.js

@@ -1,5 +1,6 @@
 const _ = require('lodash/fp')
 const { COINS, ALL_CRYPTOS } = require('./coins')
+const _ = require('lodash/fp')
 
 const { BTC, BCH, DASH, ETH, LTC, ZEC } = COINS
 

new-lamassu-admin/package-lock.json

@@ -25435,8 +25435,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -25479,8 +25478,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -25491,8 +25489,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -25609,8 +25606,7 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -25622,7 +25618,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -25652,7 +25647,6 @@
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -25671,7 +25665,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -25774,7 +25767,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -25860,8 +25852,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -25897,7 +25888,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -25917,7 +25907,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -25961,14 +25950,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             }
           }
         },

new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js

@@ -5,8 +5,6 @@ import * as R from 'ramda'
 import React, { useState, memo } from 'react'
 
 import Popper from 'src/components/Popper'
-import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
-import { Button } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import { H4, P, Label2 } from 'src/components/typography'
 import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
@@ -18,15 +16,8 @@ const useStyles = makeStyles(mainStyles)
 
 const initialValues = {
   active: false,
-  // location: false,
   commissions: false,
-  supportedCryptocurrencies: false,
-  supportedFiat: false,
-  supportedBuySellDirection: false,
   limitsAndVerification: false
-  // operatorName: false,
-  // operatorPhoneNumber: false,
-  // operatorEmail: false
 }
 
 const GET_CONFIG = gql`
@@ -41,19 +32,31 @@ const SAVE_CONFIG = gql`
   }
 `
 
+const Row = memo(({ title, disabled = false, checked, save, label }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.rowWrapper}>
+      <div className={classes.rowTextAndSwitch}>
+        <P>{title}</P>
+        <Switch
+          disabled={disabled}
+          checked={checked}
+          onChange={event => save && save(event.target.checked)}
+        />
+      </div>
+      {label && <Label2>{label}</Label2>}
+    </div>
+  )
+})
+
 const CoinATMRadar = memo(() => {
   const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
   const [coinAtmRadarConfig, setCoinAtmRadarConfig] = useState(null)
 
   const classes = useStyles()
 
-  const [saveConfig] = useMutation(SAVE_CONFIG, {
+  const { refetch: getCoinAtmRadarConfig } = useQuery(GET_CONFIG, {
-    onCompleted: configResponse =>
-      setCoinAtmRadarConfig(
-        fromNamespace(namespaces.COIN_ATM_RADAR, configResponse.saveConfig)
-      )
-  })
-  useQuery(GET_CONFIG, {
     onCompleted: configResponse => {
       const response = fromNamespace(
         namespaces.COIN_ATM_RADAR,
@@ -64,6 +67,16 @@ const CoinATMRadar = memo(() => {
     }
   })
 
+  const [saveConfig] = useMutation(SAVE_CONFIG, {
+    onCompleted: configResponse => {
+      setCoinAtmRadarConfig(
+        fromNamespace(namespaces.COIN_ATM_RADAR, configResponse.saveConfig)
+      )
+
+      getCoinAtmRadarConfig()
+    }
+  })
+
   const save = it =>
     saveConfig({
       variables: { config: toNamespace(namespaces.COIN_ATM_RADAR, it) }
@@ -84,7 +97,7 @@ const CoinATMRadar = memo(() => {
   return (
     <div className={classes.content}>
       <div>
-        <div className={classes.rowWrapper}>
+        <div className={classes.titleWrapper}>
           <H4>Coin ATM Radar share settings</H4>
           <div className={classes.transparentButton}>
             <button onClick={handleOpenHelpPopper}>
@@ -111,88 +124,26 @@ const CoinATMRadar = memo(() => {
             </button>
           </div>
         </div>
-        <div className={classes.rowWrapper}>
+        <Row
-          <P>Share information?</P>
+          title={'Share information?'}
-          <div className={classes.switchWrapper}>
-            <Switch
           checked={coinAtmRadarConfig.active}
-              onChange={event =>
+          save={value => save({ active: value })}
-                save({
+          label={coinAtmRadarConfig.active ? 'Yes' : 'No'}
-                  active: event.target.checked
+        />
-                })
+        <H4>{'Machine info'}</H4>
-              }
+        <Row
+          title={'Commissions'}
+          disabled={!coinAtmRadarConfig.active}
+          checked={coinAtmRadarConfig.commissions}
+          save={value => save({ commissions: value })}
+        />
+        <Row
+          title={'Limits and verification'}
+          disabled={!coinAtmRadarConfig.active}
+          checked={coinAtmRadarConfig.limitsAndVerification}
+          save={value => save({ limitsAndVerification: value })}
         />
       </div>
-          <Label2>{coinAtmRadarConfig.active ? 'Yes' : 'No'}</Label2>
-        </div>
-        <BooleanPropertiesTable
-          title={'Machine info'}
-          disabled={!coinAtmRadarConfig.active}
-          data={coinAtmRadarConfig}
-          elements={[
-            // {
-            //   name: 'location',
-            //   display: 'Location',
-            //   value: coinAtmRadarConfig.location
-            // },
-            {
-              name: 'commissions',
-              display: 'Commissions',
-              value: coinAtmRadarConfig.commissions
-            },
-            {
-              name: 'supportedCryptocurrencies',
-              display: 'Supported Cryptocurrencies',
-              value: coinAtmRadarConfig.supportedCryptocurrencies
-            },
-            {
-              name: 'supportedFiat',
-              display: 'Supported Fiat',
-              value: coinAtmRadarConfig.supportedFiat
-            },
-            {
-              name: 'supportedBuySellDirection',
-              display: 'Supported Buy Sell Direction',
-              value: coinAtmRadarConfig.supportedBuySellDirection
-            },
-            {
-              name: 'limitsAndVerification',
-              display: 'Limits And Verification',
-              value: coinAtmRadarConfig.limitsAndVerification
-            }
-          ]}
-          save={save}
-        />
-        {/* <BooleanPropertiesTable
-          title={'Operator info'}
-          disabled={!coinAtmRadarConfig.active}
-          data={coinAtmRadarConfig}
-          elements={[
-            {
-              name: 'operatorName',
-              display: 'Operator Name',
-              value: coinAtmRadarConfig.operatorName
-            },
-            {
-              name: 'operatorPhoneNumber',
-              display: 'Operator Phone Number',
-              value: coinAtmRadarConfig.operatorPhoneNumber
-            },
-            {
-              name: 'operatorEmail',
-              display: 'Operator Email',
-              value: coinAtmRadarConfig.operatorEmail
-            }
-          ]}
-          save={save}
-        /> */}
-      </div>
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://coinatmradar.com/">
-        <Button>Coin ATM Radar page</Button>
-      </a>
     </div>
   )
 })

new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.styles.js

@@ -1,18 +1,15 @@
 import baseStyles from 'src/pages/Logs.styles'
-import { booleanPropertiesTableStyles } from 'src/components/booleanPropertiesTable/BooleanPropertiesTable.styles'
 
 const { button } = baseStyles
-const { rowWrapper } = booleanPropertiesTableStyles
 
 const mainStyles = {
   button,
   content: {
-    display: 'flex',
+    display: 'flex'
-    justifyContent: 'space-between'
   },
   transparentButton: {
     '& > *': {
-      margin: 'auto 15px'
+      margin: 'auto 10px'
     },
     '& button': {
       border: 'none',
@@ -20,10 +17,22 @@ const mainStyles = {
       cursor: 'pointer'
     }
   },
-  rowWrapper,
+  titleWrapper: {
-  switchWrapper: {
     display: 'flex',
-    marginLeft: 120
+    alignItems: 'center',
+    flex: 'wrap'
+  },
+  rowWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  rowTextAndSwitch: {
+    display: 'flex',
+    flex: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: 285
   },
   popoverContent: {
     width: 272,

test/fixtures/new-settings.json

@@ -43,9 +43,6 @@
     },
     "coinAtmRadar_active": true,
     "coinAtmRadar_commissions": true,
-    "coinAtmRadar_supportedCryptocurrencies": true,
-    "coinAtmRadar_supportedFiat": true,
-    "coinAtmRadar_supportedBuySellDirection": true,
     "coinAtmRadar_limitsAndVerification": true,
     "termsConditions_active": true,
     "termsConditions_title": "Rasdkl",