feat: open configuration popup when selecting a non-configured third

party service on the wallets page

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

@@ -3,8 +3,11 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
+import Modal from 'src/components/Modal'
 import { NamespacedTable as EditableTable } from 'src/components/editableTable'
 import TitleSection from 'src/components/layout/TitleSection'
+import FormRenderer from 'src/pages/Services/FormRenderer'
+import schemas from 'src/pages/Services/schemas'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 
 import Wizard from './Wizard'
@@ -17,6 +20,13 @@ const SAVE_CONFIG = gql`
   }
 `
 
+// TODO: should I use the save config and send the config as it is when saving an account?
+const SAVE_ACCOUNT = gql`
+  mutation Save($accounts: JSONObject) {
+    saveAccounts(accounts: $accounts)
+  }
+`
+
 const GET_INFO = gql`
   query getData {
     config
@@ -35,6 +45,7 @@ const GET_INFO = gql`
 `
 
 const Wallet = ({ name: SCREEN_KEY }) => {
+  const [editingSchema, setEditingSchema] = useState(null)
   const [wizard, setWizard] = useState(false)
   const [error, setError] = useState(false)
   const { data } = useQuery(GET_INFO)
@@ -45,6 +56,11 @@ const Wallet = ({ name: SCREEN_KEY }) => {
     refetchQueries: () => ['getData']
   })
 
+  const [saveAccount] = useMutation(SAVE_ACCOUNT, {
+    onCompleted: () => setEditingSchema(null),
+    refetchQueries: () => ['getData']
+  })
+
   const save = (rawConfig, accounts) => {
     const config = toNamespace(SCREEN_KEY)(rawConfig)
     setError(false)
@@ -56,6 +72,12 @@ const Wallet = ({ name: SCREEN_KEY }) => {
   const cryptoCurrencies = data?.cryptoCurrencies ?? []
   const accounts = data?.accounts ?? []
 
+  const enableThirdPartyService = it => {
+    if (!it) return
+
+    if (!accounts[it]) return setEditingSchema(schemas[it])
+  }
+
   const shouldOverrideEdit = it => {
     const namespaced = fromNamespace(it)(config)
     return !WalletSchema.isValidSync(namespaced)
@@ -75,7 +97,11 @@ const Wallet = ({ name: SCREEN_KEY }) => {
         editWidth={174}
         save={save}
         validationSchema={WalletSchema}
-        elements={getElements(cryptoCurrencies, accountsConfig)}
+        elements={getElements(
+          cryptoCurrencies,
+          accountsConfig,
+          enableThirdPartyService
+        )}
       />
       {wizard && (
         <Wizard
@@ -89,6 +115,24 @@ const Wallet = ({ name: SCREEN_KEY }) => {
           accountsConfig={accountsConfig}
         />
       )}
+      {editingSchema && (
+        <Modal
+          title={`Edit ${editingSchema.name}`}
+          width={478}
+          handleClose={() => setEditingSchema(null)}
+          open={true}>
+          <FormRenderer
+            save={it =>
+              saveAccount({
+                variables: { accounts: { [editingSchema.code]: it } }
+              })
+            }
+            elements={editingSchema.elements}
+            validationSchema={editingSchema.validationSchema}
+            value={accounts[editingSchema.code]}
+          />
+        </Modal>
+      )}
     </>
   )
 }

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

@@ -13,7 +13,12 @@ const WalletSchema = Yup.object().shape({
   zeroConf: Yup.string().required('Required')
 })
 
-const getElements = (cryptoCurrencies, accounts, wizard = false) => {
+const getElements = (
+  cryptoCurrencies,
+  accounts,
+  enableThirdPartyService,
+  wizard = false
+) => {
   const widthAdjust = wizard ? 11 : 0
   const viewCryptoCurrency = it =>
     R.compose(
@@ -33,6 +38,8 @@ const getElements = (cryptoCurrencies, accounts, wizard = false) => {
     filterCoins(it)(filterOptions(option))
   )
 
+  const onChange = (prev, curr) => enableThirdPartyService(curr)
+
   return [
     {
       name: 'id',
@@ -53,7 +60,8 @@ const getElements = (cryptoCurrencies, accounts, wizard = false) => {
         options: getOptions('ticker'),
         valueProp: 'code',
         getLabel: R.path(['display']),
-        optionsLimit: null
+        optionsLimit: null,
+        onChange
       }
     },
     {
@@ -67,7 +75,8 @@ const getElements = (cryptoCurrencies, accounts, wizard = false) => {
         options: getOptions('wallet'),
         valueProp: 'code',
         getLabel: R.path(['display']),
-        optionsLimit: null
+        optionsLimit: null,
+        onChange
       }
     },
     {
@@ -81,7 +90,8 @@ const getElements = (cryptoCurrencies, accounts, wizard = false) => {
         options: getOptions('exchange'),
         valueProp: 'code',
         getLabel: R.path(['display']),
-        optionsLimit: null
+        optionsLimit: null,
+        onChange
       }
     },
     {
@@ -95,7 +105,8 @@ const getElements = (cryptoCurrencies, accounts, wizard = false) => {
         options: getOptions('zeroConf'),
         valueProp: 'code',
         getLabel: R.path(['display']),
-        optionsLimit: null
+        optionsLimit: null,
+        onChange
       }
     }
   ]