cleanup

package.json

@@ -19,15 +19,13 @@
   "license": "MIT",
   "dependencies": {
     "@coingecko/cryptoformat": "^0.3.1",
-    "@oceanprotocol/typographies": "^0.1.0",
     "@reach/router": "^1.2.1",
     "ethereum-address": "0.0.4",
     "ms": "^2.1.1",
     "react": "^16.8.6",
     "react-blockies": "^1.4.1",
     "react-dom": "^16.8.6",
-    "react-pose": "^4.0.8",
-    "react-pose-text": "^3.1.0"
+    "react-pose": "^4.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
@@ -55,7 +53,7 @@
     "style-loader": "^0.23.1",
     "stylelint": "^10.0.1",
     "stylelint-config-standard": "^18.3.0",
-    "webpack": "^4.30.0",
+    "webpack": "^4.31.0",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.3.1"
   }

src/components/Animations.js

@@ -15,7 +15,7 @@ export const defaultAnimation = {
 export const fadeIn = {
   enter: {
     opacity: 1,
-    transition: { duration: 600 }
+    transition: { duration: 500 }
   },
   exit: {
     opacity: 0,

src/components/Balance.jsx

@@ -3,9 +3,11 @@ import PropTypes from 'prop-types'
 import { AppContext } from '../store/createContext'
 import { locale } from '../util/moneyFormatter'
 import { formatCurrency } from '@coingecko/cryptoformat'
-import SplitText from 'react-pose-text'
+import posed, { PoseGroup } from 'react-pose'
 import './Balance.css'
-import { characterAnimation } from './Animations'
+import { fadeIn } from './Animations'
+
+const Animation = posed.h1(fadeIn)
 
 export default class Balance extends PureComponent {
   static contextType = AppContext
@@ -19,18 +21,14 @@ export default class Balance extends PureComponent {
     const { balance } = this.props
 
     return (
-      <h1 className="number">
-        <SplitText
-          initialPose="exit"
-          pose="enter"
-          charPoses={characterAnimation}
-        >
+      <PoseGroup animateOnMount>
+        <Animation key={currency} className="number">
           {formatCurrency(balance[currency], currency.toUpperCase(), locale)
             .replace(/BTC/, 'Ƀ')
             .replace(/ETH/, 'Ξ')
             .replace(/OCEAN/, 'Ọ')}
-        </SplitText>
-      </h1>
+        </Animation>
+      </PoseGroup>
     )
   }
 }