fix: improve HoverableTooltip behavior and UX
feat: add market currency selector for exchange 3rd party services
This commit is contained in:
parent
d0573daa74
commit
4427258dd5
26 changed files with 646 additions and 320 deletions
|
|
@ -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>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue