68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
import { useQuery } from '@apollo/react-hooks'
|
|
import { utils as coinUtils } from '@lamassu/coins'
|
|
import { makeStyles } from '@material-ui/core'
|
|
import gql from 'graphql-tag'
|
|
import * as R from 'ramda'
|
|
import React, { useState } from 'react'
|
|
|
|
import { Button } from 'src/components/buttons'
|
|
import { RadioGroup } from 'src/components/inputs'
|
|
import { H4 } from 'src/components/typography'
|
|
|
|
import styles from './Shared.styles'
|
|
import { getItems } from './getItems'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const GET_CONFIG = gql`
|
|
{
|
|
accountsConfig {
|
|
code
|
|
display
|
|
class
|
|
cryptos
|
|
}
|
|
}
|
|
`
|
|
|
|
const ChooseTicker = ({ data: currentData, addData }) => {
|
|
const classes = useStyles()
|
|
const { data } = useQuery(GET_CONFIG)
|
|
|
|
const [selected, setSelected] = useState(null)
|
|
const [error, setError] = useState(false)
|
|
|
|
const accounts = data?.accounts ?? []
|
|
const accountsConfig = data?.accountsConfig ?? []
|
|
|
|
const coin = coinUtils.getExternalCryptoCode(currentData.coin)
|
|
const tickers = getItems(accountsConfig, accounts, 'ticker', coin)
|
|
|
|
const submit = () => {
|
|
if (!selected) return setError(true)
|
|
addData({ ticker: selected })
|
|
}
|
|
|
|
const onSelect = e => {
|
|
setSelected(e.target.value)
|
|
setError(false)
|
|
}
|
|
|
|
return (
|
|
<div className={classes.mdForm}>
|
|
<H4 className={error && classes.error}>Choose your ticker</H4>
|
|
<RadioGroup
|
|
labelClassName={classes.radioLabel}
|
|
className={classes.radioGroup}
|
|
options={R.union(tickers.filled, tickers.unfilled)}
|
|
value={selected}
|
|
onChange={onSelect}
|
|
/>
|
|
<Button size="lg" onClick={submit} className={classes.button}>
|
|
Continue
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChooseTicker
|