fix: No reason for 'Enable' switch on 'Wallet Settings' panel (#439)

* fix: remove the "enable" toggle

fix: make edit available at all times and make it toggle the wizard if
the coin config is empty

fix: disable focus on the first edit

feat: open the coin config wizard when adding a not configured coin on
locales

* fix: set default value for focusOnEditWhen to avoid breaking tables
first field focus

refactor: replaced relative path imports from outside the module with
full paths

fix: removed console.log

* fix: changed the edit override logic to a cleaner one

* fix: trigger the wizard only when the coin isn't configured

new-lamassu-admin/src/components/editableTable/Table.js

@@ -46,6 +46,8 @@ const ETable = ({
   disableAdd,
   initialValues,
   setEditing,
+  shouldOverrideEdit,
+  editOverride,
   stripeWhen,
   disableRowEdit,
   groupBy,
@@ -93,6 +95,7 @@ const ETable = ({
   }
 
   const onEdit = it => {
+    if (shouldOverrideEdit && shouldOverrideEdit(it)) return editOverride(it)
     setEditingId(it)
     setEditing && setEditing(it, true)
   }

new-lamassu-admin/src/components/inputs/formik/Autocomplete.js

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 
 import { Autocomplete } from '../base'
 
-const AutocompleteFormik = ({ options, ...props }) => {
+const AutocompleteFormik = ({ options, onChange, ...props }) => {
   const [open, setOpen] = useState(false)
 
   const { name, onBlur, value } = props.field
@@ -23,7 +23,10 @@ const AutocompleteFormik = ({ options, ...props }) => {
   return (
     <Autocomplete
       name={name}
-      onChange={(event, item) => setFieldValue(name, item)}
+      onChange={(event, item) => {
+        onChange && onChange(value, item)
+        setFieldValue(name, item)
+      }}
       onBlur={innerOnBlur}
       value={value}
       error={error}

new-lamassu-admin/src/pages/Locales/Locales.js

@@ -10,7 +10,9 @@ import { Table as EditableTable } from 'src/components/editableTable'
 import Section from 'src/components/layout/Section'
 import TitleSection from 'src/components/layout/TitleSection'
 import { P } from 'src/components/typography'
-import { fromNamespace, toNamespace } from 'src/utils/config'
+import Wizard from 'src/pages/Wallet/Wizard'
+import { WalletSchema } from 'src/pages/Wallet/helper'
+import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
 import { styles } from './Locales.styles'
 import {
@@ -27,6 +29,13 @@ const useStyles = makeStyles(styles)
 const GET_DATA = gql`
   query getData {
     config
+    accounts
+    accountsConfig {
+      code
+      display
+      class
+      cryptos
+    }
     currencies {
       code
       display
@@ -89,17 +98,25 @@ const FiatCurrencyChangeAlert = ({ open, close, save }) => {
 }
 
 const Locales = ({ name: SCREEN_KEY }) => {
+  const [wizard, setWizard] = useState(false)
+  const [error, setError] = useState(false)
   const [isEditingDefault, setEditingDefault] = useState(false)
   const [isEditingOverrides, setEditingOverrides] = useState(false)
   const { data } = useQuery(GET_DATA)
   const [saveConfig] = useMutation(SAVE_CONFIG, {
+    onCompleted: () => setWizard(false),
+    onError: () => setError(true),
     refetchQueries: () => ['getData']
   })
 
   const [dataToSave, setDataToSave] = useState(null)
 
   const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)
+  const wallets = data?.config && fromNamespace(namespaces.WALLETS)(data.config)
 
+  const accountsConfig = data?.accountsConfig
+  const accounts = data?.accounts ?? []
+  const cryptoCurrencies = data?.cryptoCurrencies ?? []
   const locale = config && !R.isEmpty(config) ? config : localeDefaults
   const localeOverrides = locale.overrides ?? []
 
@@ -116,6 +133,7 @@ const Locales = ({ name: SCREEN_KEY }) => {
 
   const save = config => {
     setDataToSave(null)
+    setError(false)
     saveConfig({ variables: { config } })
   }
 
@@ -124,6 +142,13 @@ const Locales = ({ name: SCREEN_KEY }) => {
     return saveConfig({ variables: { config } })
   }
 
+  const enableCoin = it => {
+    if (!it) return
+
+    const namespaced = fromNamespace(it)(wallets)
+    if (!WalletSchema.isValidSync(namespaced)) return setWizard(it)
+  }
+
   const onEditingDefault = (it, editing) => setEditingDefault(editing)
   const onEditingOverrides = (it, editing) => setEditingOverrides(editing)
 
@@ -145,7 +170,7 @@ const Locales = ({ name: SCREEN_KEY }) => {
           save={handleSave}
           validationSchema={LocaleSchema}
           data={R.of(locale)}
-          elements={mainFields(data)}
+          elements={mainFields(data, enableCoin)}
           setEditing={onEditingDefault}
           forceDisable={isEditingOverrides}
         />
@@ -162,7 +187,7 @@ const Locales = ({ name: SCREEN_KEY }) => {
           save={saveOverrides}
           validationSchema={OverridesSchema}
           data={localeOverrides ?? []}
-          elements={overrides(data, localeOverrides)}
+          elements={overrides(data, localeOverrides, enableCoin)}
           disableAdd={R.compose(R.isEmpty, R.difference)(
             data?.machines.map(m => m.deviceId) ?? [],
             localeOverrides?.map(o => o.machine) ?? []
@@ -171,6 +196,18 @@ const Locales = ({ name: SCREEN_KEY }) => {
           forceDisable={isEditingDefault}
         />
       </Section>
+      {wizard && (
+        <Wizard
+          coin={R.find(R.propEq('code', wizard))(cryptoCurrencies)}
+          onClose={() => setWizard(false)}
+          save={rawConfig => save(toNamespace(namespaces.WALLETS)(rawConfig))}
+          error={error}
+          cryptoCurrencies={cryptoCurrencies}
+          userAccounts={data?.config?.accounts}
+          accounts={accounts}
+          accountsConfig={accountsConfig}
+        />
+      )}
     </>
   )
 }

new-lamassu-admin/src/pages/Locales/helper.js

@@ -5,14 +5,14 @@ import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
 
 const LANGUAGE_SELECTION_LIMIT = 4
 
-const getFields = (getData, names, auxElements = []) => {
+const getFields = (getData, names, enableCoin, auxElements = []) => {
   return R.filter(
     it => R.includes(it.name, names),
-    allFields(getData, auxElements)
+    allFields(getData, enableCoin, auxElements)
   )
 }
 
-const allFields = (getData, auxElements = []) => {
+const allFields = (getData, enableCoin, auxElements = []) => {
   const getView = (data, code, compare) => it => {
     if (!data) return ''
 
@@ -103,29 +103,30 @@ const allFields = (getData, auxElements = []) => {
         valueProp: 'code',
         getLabel: R.path(['code']),
         multiple: true,
-        optionsLimit: null
+        optionsLimit: null,
+        onChange: (prev, curr) => enableCoin(R.difference(curr, prev)[0])
       }
     }
   ]
 }
 
-const mainFields = auxData => {
+const mainFields = (auxData, enableCoin) => {
   const getData = R.path(R.__, auxData)
 
-  return getFields(getData, [
-    'country',
-    'fiatCurrency',
-    'languages',
-    'cryptoCurrencies'
-  ])
+  return getFields(
+    getData,
+    ['country', 'fiatCurrency', 'languages', 'cryptoCurrencies'],
+    enableCoin
+  )
 }
 
-const overrides = (auxData, auxElements) => {
+const overrides = (auxData, auxElements, enableCoin) => {
   const getData = R.path(R.__, auxData)
 
   return getFields(
     getData,
     ['machine', 'country', 'languages', 'cryptoCurrencies'],
+    enableCoin,
     auxElements
   )
 }

new-lamassu-admin/src/pages/Wallet/Wallet.js

@@ -56,10 +56,9 @@ const Wallet = ({ name: SCREEN_KEY }) => {
   const cryptoCurrencies = data?.cryptoCurrencies ?? []
   const accounts = data?.accounts ?? []
 
-  const onToggle = id => {
-    const namespaced = fromNamespace(id)(config)
-    if (!WalletSchema.isValidSync(namespaced)) return setWizard(id)
-    save(toNamespace(id, { active: !namespaced?.active }))
+  const shouldOverrideEdit = it => {
+    const namespaced = fromNamespace(it)(config)
+    return !WalletSchema.isValidSync(namespaced)
   }
 
   return (
@@ -71,13 +70,11 @@ const Wallet = ({ name: SCREEN_KEY }) => {
         data={config}
         stripeWhen={it => !WalletSchema.isValidSync(it)}
         enableEdit
-        editWidth={134}
-        enableToggle
-        toggleWidth={109}
-        onToggle={onToggle}
+        shouldOverrideEdit={shouldOverrideEdit}
+        editOverride={setWizard}
+        editWidth={174}
         save={save}
         validationSchema={WalletSchema}
-        disableRowEdit={R.compose(R.not, R.path(['active']))}
         elements={getElements(cryptoCurrencies, accountsConfig)}
       />
       {wizard && (