cleanup
This commit is contained in:
parent
6a5286c1f0
commit
26894b8a07
|
@ -19,15 +19,13 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@coingecko/cryptoformat": "^0.3.1",
|
"@coingecko/cryptoformat": "^0.3.1",
|
||||||
"@oceanprotocol/typographies": "^0.1.0",
|
|
||||||
"@reach/router": "^1.2.1",
|
"@reach/router": "^1.2.1",
|
||||||
"ethereum-address": "0.0.4",
|
"ethereum-address": "0.0.4",
|
||||||
"ms": "^2.1.1",
|
"ms": "^2.1.1",
|
||||||
"react": "^16.8.6",
|
"react": "^16.8.6",
|
||||||
"react-blockies": "^1.4.1",
|
"react-blockies": "^1.4.1",
|
||||||
"react-dom": "^16.8.6",
|
"react-dom": "^16.8.6",
|
||||||
"react-pose": "^4.0.8",
|
"react-pose": "^4.0.8"
|
||||||
"react-pose-text": "^3.1.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.4.4",
|
"@babel/core": "^7.4.4",
|
||||||
|
@ -55,7 +53,7 @@
|
||||||
"style-loader": "^0.23.1",
|
"style-loader": "^0.23.1",
|
||||||
"stylelint": "^10.0.1",
|
"stylelint": "^10.0.1",
|
||||||
"stylelint-config-standard": "^18.3.0",
|
"stylelint-config-standard": "^18.3.0",
|
||||||
"webpack": "^4.30.0",
|
"webpack": "^4.31.0",
|
||||||
"webpack-cli": "^3.3.2",
|
"webpack-cli": "^3.3.2",
|
||||||
"webpack-dev-server": "^3.3.1"
|
"webpack-dev-server": "^3.3.1"
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,7 @@ export const defaultAnimation = {
|
||||||
export const fadeIn = {
|
export const fadeIn = {
|
||||||
enter: {
|
enter: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: { duration: 600 }
|
transition: { duration: 500 }
|
||||||
},
|
},
|
||||||
exit: {
|
exit: {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
|
|
|
@ -3,9 +3,11 @@ import PropTypes from 'prop-types'
|
||||||
import { AppContext } from '../store/createContext'
|
import { AppContext } from '../store/createContext'
|
||||||
import { locale } from '../util/moneyFormatter'
|
import { locale } from '../util/moneyFormatter'
|
||||||
import { formatCurrency } from '@coingecko/cryptoformat'
|
import { formatCurrency } from '@coingecko/cryptoformat'
|
||||||
import SplitText from 'react-pose-text'
|
import posed, { PoseGroup } from 'react-pose'
|
||||||
import './Balance.css'
|
import './Balance.css'
|
||||||
import { characterAnimation } from './Animations'
|
import { fadeIn } from './Animations'
|
||||||
|
|
||||||
|
const Animation = posed.h1(fadeIn)
|
||||||
|
|
||||||
export default class Balance extends PureComponent {
|
export default class Balance extends PureComponent {
|
||||||
static contextType = AppContext
|
static contextType = AppContext
|
||||||
|
@ -19,18 +21,14 @@ export default class Balance extends PureComponent {
|
||||||
const { balance } = this.props
|
const { balance } = this.props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<h1 className="number">
|
<PoseGroup animateOnMount>
|
||||||
<SplitText
|
<Animation key={currency} className="number">
|
||||||
initialPose="exit"
|
|
||||||
pose="enter"
|
|
||||||
charPoses={characterAnimation}
|
|
||||||
>
|
|
||||||
{formatCurrency(balance[currency], currency.toUpperCase(), locale)
|
{formatCurrency(balance[currency], currency.toUpperCase(), locale)
|
||||||
.replace(/BTC/, 'Ƀ')
|
.replace(/BTC/, 'Ƀ')
|
||||||
.replace(/ETH/, 'Ξ')
|
.replace(/ETH/, 'Ξ')
|
||||||
.replace(/OCEAN/, 'Ọ')}
|
.replace(/OCEAN/, 'Ọ')}
|
||||||
</SplitText>
|
</Animation>
|
||||||
</h1>
|
</PoseGroup>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue