fix: improve HoverableTooltip behavior and UX

feat: add market currency selector for exchange 3rd party services
This commit is contained in:
Sérgio Salgado 2022-07-13 15:55:45 +01:00 committed by Rafael
parent d0573daa74
commit 4427258dd5
26 changed files with 646 additions and 320 deletions

View file

@ -12,7 +12,7 @@ import SingleRowTable from 'src/components/single-row-table/SingleRowTable'
import { formatLong } from 'src/utils/string'
import FormRenderer from './FormRenderer'
import schemas from './schemas'
import _schemas from './schemas'
const GET_INFO = gql`
query getData {
@ -21,6 +21,12 @@ const GET_INFO = gql`
}
`
const GET_MARKETS = gql`
query getMarkets {
getMarkets
}
`
const SAVE_ACCOUNT = gql`
mutation Save($accounts: JSONObject) {
saveAccounts(accounts: $accounts)
@ -40,12 +46,17 @@ const useStyles = makeStyles(styles)
const Services = () => {
const [editingSchema, setEditingSchema] = useState(null)
const { data } = useQuery(GET_INFO)
const { data, loading: configLoading } = useQuery(GET_INFO)
const { data: marketsData, loading: marketsLoading } = useQuery(GET_MARKETS)
const [saveAccount] = useMutation(SAVE_ACCOUNT, {
onCompleted: () => setEditingSchema(null),
refetchQueries: ['getData']
})
const markets = marketsData?.getMarkets
const schemas = _schemas(markets)
const classes = useStyles()
const accounts = data?.accounts ?? {}
@ -101,40 +112,44 @@ const Services = () => {
const getValidationSchema = ({ code, getValidationSchema }) =>
getValidationSchema(accounts[code])
const loading = marketsLoading || configLoading
return (
<div className={classes.wrapper}>
<TitleSection title="Third-Party services" />
<Grid container spacing={4}>
{R.values(schemas).map(schema => (
<Grid item key={schema.code}>
<SingleRowTable
editMessage={'Configure ' + schema.title}
title={schema.title}
onEdit={() => setEditingSchema(schema)}
items={getItems(schema.code, schema.elements)}
!loading && (
<div className={classes.wrapper}>
<TitleSection title="Third-Party services" />
<Grid container spacing={4}>
{R.values(schemas).map(schema => (
<Grid item key={schema.code}>
<SingleRowTable
editMessage={'Configure ' + schema.title}
title={schema.title}
onEdit={() => setEditingSchema(schema)}
items={getItems(schema.code, schema.elements)}
/>
</Grid>
))}
</Grid>
{editingSchema && (
<Modal
title={`Edit ${editingSchema.name}`}
width={525}
handleClose={() => setEditingSchema(null)}
open={true}>
<FormRenderer
save={it =>
saveAccount({
variables: { accounts: { [editingSchema.code]: it } }
})
}
elements={getElements(editingSchema)}
validationSchema={getValidationSchema(editingSchema)}
value={getAccounts(editingSchema)}
/>
</Grid>
))}
</Grid>
{editingSchema && (
<Modal
title={`Edit ${editingSchema.name}`}
width={525}
handleClose={() => setEditingSchema(null)}
open={true}>
<FormRenderer
save={it =>
saveAccount({
variables: { accounts: { [editingSchema.code]: it } }
})
}
elements={getElements(editingSchema)}
validationSchema={getValidationSchema(editingSchema)}
value={getAccounts(editingSchema)}
/>
</Modal>
)}
</div>
</Modal>
)}
</div>
)
)
}