Skip to content

Commit

Permalink
feat(): add steps descriptions using i18n
Browse files Browse the repository at this point in the history
tetogomez committed Sep 17, 2020
1 parent 1227746 commit b0f5027
Showing 6 changed files with 52 additions and 49 deletions.
42 changes: 38 additions & 4 deletions src/components/TourGuide/TourGuide.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import Tour from 'reactour'
import { useTranslation } from 'react-i18next'
import { makeStyles } from '@material-ui/styles'

const useStyles = makeStyles((theme) => ({
@@ -22,28 +23,61 @@ const useStyles = makeStyles((theme) => ({
height: 12
}
}
},
text: {
fontSize: 16.2,
fontWeight: '400',
lineHeight: 1.48,
letterSpacing: 0.15,
color: 'rgba(0, 0, 0, 0.6)',
margin: 0
}
}))

const TourGuide = ({ setIsTourOpen, isTourOpen, steps }) => {
const TourGuide = ({ setIsTourOpen, isTourOpen, stepsByPage }) => {
const { t } = useTranslation('translations')
const classes = useStyles()
const steps = {
fee: [
{
selector: '#youGive',
content: () => <p className={classes.text}>{t('feeStep1')}</p>
}
],
exchange: [
{
selector: '#youGive',
content: () => <p className={classes.text}>{t('exchangeStep1')}</p>
},
{
selector: '#youReceive',
content: () => <p className={classes.text}>{t('exchangeStep2')}</p>
}
],
liquidity: [
{
selector: '#youGive',
content: () => <p className={classes.text}>{t('liquidityStep1')}</p>
}
]
}

return (
<Tour
steps={steps}
steps={steps[stepsByPage]}
isOpen={isTourOpen}
onRequestClose={() => setIsTourOpen(false)}
rounded={10}
className={classes.helper}
accentColor="#5cb7b7"
accentColor="#757575"
/>
)
}

TourGuide.propTypes = {
setIsTourOpen: PropTypes.func,
isTourOpen: PropTypes.bool,
steps: PropTypes.array
stepsByPage: PropTypes.string
}

export default TourGuide
6 changes: 5 additions & 1 deletion src/language/en/en.json
Original file line number Diff line number Diff line change
@@ -10,7 +10,11 @@
"selected": "Select",
"noTokensFound": "No token pairs found.",
"noUserPools": "to view your pools.",
"addLiquidity": "Add liquidity now."
"addLiquidity": "Add liquidity now.",
"exchangeStep1": "Enter a valid amount and use the dropdown menu to select the token you own and want to exchange.",
"exchangeStep2": "Select the token you wish to receive. We will calculate this amount for you. You can use the reverse icon anytime.",
"feeStep1": "Here you may vote for the fee you consider to be the fairest for each token. Please, use a percentage with one decimal format. For example: 0.1%.",
"liquidityStep1": "Here you can look up the current exchange fee for each token using the dropdown menu."
},
"talkUsModal": {
"title": "Evodex is for the EOS community.",
6 changes: 5 additions & 1 deletion src/language/es/es.json
Original file line number Diff line number Diff line change
@@ -10,7 +10,11 @@
"selected": "Seleccionar",
"noTokensFound": "No se encontraron pares de tokens.",
"noUserPools": "para ver tus pooles.",
"addLiquidity": "Agregue liquidez ahora."
"addLiquidity": "Agregue liquidez ahora.",
"exchangeStep1": "Ingrese una cantidad válida y use el menú desplegable para seleccionar el token que posee y desea intercambiar.",
"exchangeStep2": "Seleccione el token que desea recibir. Calcularemos esta cantidad por usted. Puede utilizar el icono de retroceso en cualquier momento.",
"feeStep1": "Aquí puede votar por la tarifa que considere más justa para cada token. Por favor, use un porcentaje con un formato decimal. Por ejemplo: 0,1%.",
"liquidityStep1": "Aquí puede buscar la tarifa de cambio actual para cada token usando el menú desplegable."
},
"talkUsModal": {
"title": "Evodex es para la comunidad de EOS",
8 changes: 4 additions & 4 deletions src/routes/Evodex/Evodex.js
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ import Alert from '@material-ui/lab/Alert'
import Footer from 'components/Footer'
import TourGuide from 'components/TourGuide'
import { MainContainer } from 'containers'
import { evolutiondex, getTourStepsByPathname } from 'utils'
import { evolutiondex } from 'utils'
import { ExchangeProvider } from 'context/exchange.context'

import BackLayer from './BackLayer'
@@ -115,7 +115,7 @@ const Evodex = ({ ual }) => {
const [exgangeInfo, setExchangeInfo] = useState(null)
const [isStaticPage, setIsStaticPage] = useState(false)
const [message, setMessage] = useState()
const [steps, setSteps] = useState([])
const [stepsByPage, setStepsByPage] = useState('')
const isLandscape = useMediaQuery('(orientation: landscape)')
const isMobile = useMediaQuery(theme.breakpoints.down('xs'), {
defaultMatches: true
@@ -124,7 +124,7 @@ const Evodex = ({ ual }) => {
const height = window.innerHeight

const handleGetTourSteps = (pathname) => {
setSteps(getTourStepsByPathname(pathname))
setStepsByPage(pathname)
setIsTourOpen(true)
}

@@ -271,7 +271,7 @@ const Evodex = ({ ual }) => {
<TourGuide
isTourOpen={isTourOpen}
setIsTourOpen={setIsTourOpen}
steps={steps}
stepsByPage={stepsByPage}
/>
</MainContainer>
</ExchangeProvider>
38 changes: 0 additions & 38 deletions src/utils/getTourStepsByPathname.js

This file was deleted.

1 change: 0 additions & 1 deletion src/utils/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export * from './evolutiondex'
export * from './getScatterError'
export * from './commonStyles'
export * from './getTourStepsByPathname'

0 comments on commit b0f5027

Please sign in to comment.