This commit is contained in:
Matthias Kretschmann 2019-05-11 21:56:33 +02:00
parent 6a5286c1f0
commit 26894b8a07
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 11 additions and 15 deletions

View File

@ -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"
} }

View File

@ -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,

View File

@ -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>
) )
} }
} }