diff --git a/package.json b/package.json index 3b173bf..4178374 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ "react": "^16.8.6", "react-blockies": "^1.4.1", "react-dom": "^16.8.6", - "react-pose": "^4.0.8" + "react-pose": "^4.0.8", + "react-pose-text": "^3.1.0" }, "devDependencies": { "@babel/core": "^7.4.4", diff --git a/src/App.css b/src/App.css index aeb82f1..f2dc3f0 100644 --- a/src/App.css +++ b/src/App.css @@ -100,8 +100,6 @@ a h1 { background: #fff; border-radius: 5px; border: .1rem solid #e2e2e2; - - /* animation: fadein .5s .5s ease-out; */ } .dark .box { diff --git a/src/App.jsx b/src/App.jsx index 8667be8..bc9fac5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,6 +8,7 @@ import Titlebar from './components/Titlebar' import Home from './screens/Home' import Preferences from './screens/Preferences' import './App.css' +import { defaultAnimation } from './components/Animations' // // Disable zooming @@ -15,30 +16,12 @@ import './App.css' webFrame.setVisualZoomLevelLimits(1, 1) webFrame.setLayoutZoomLevelLimits(0, 0) -const Animation = posed.div({ - enter: { - y: 0, - opacity: 1, - delay: 100, - transition: { - type: 'spring', - stiffness: 500, - damping: 25, - restDelta: 0.5, - restSpeed: 10 - } - }, - exit: { - y: 50, - opacity: 0, - transition: { duration: 150 } - } -}) +const Animation = posed.div(defaultAnimation) const PosedRouter = ({ children }) => ( {({ location }) => ( - + {children} diff --git a/src/components/Animations.js b/src/components/Animations.js new file mode 100644 index 0000000..45779f6 --- /dev/null +++ b/src/components/Animations.js @@ -0,0 +1,36 @@ +export const defaultAnimation = { + enter: { + y: 0, + opacity: 1, + delay: 100, + transition: { duration: 150 } + }, + exit: { + y: 50, + opacity: 0, + transition: { duration: 150 } + } +} + +export const fadeIn = { + enter: { + opacity: 1, + transition: { duration: 600 } + }, + exit: { + opacity: 0, + transition: { duration: 100 } + } +} + +export const characterAnimation = { + exit: { opacity: 0, y: 10 }, + enter: { + opacity: 1, + y: 0, + transition: ({ charInWordIndex }) => ({ + type: 'spring', + delay: charInWordIndex * 20 + }) + } +} diff --git a/src/components/Balance.css b/src/components/Balance.css index d9a1e3a..44a4332 100644 --- a/src/components/Balance.css +++ b/src/components/Balance.css @@ -1,12 +1,10 @@ .number { margin: 0; - transition: .15s ease-out; -webkit-app-region: no-drag; -webkit-user-select: text; font-size: 1rem; display: inline-block; padding: 0 .3rem; - animation: fadeIn .5s ease-out; border-radius: 4px; } @@ -23,13 +21,3 @@ background: rgba(255, 255, 255, 0); } } - -@keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} diff --git a/src/components/Balance.jsx b/src/components/Balance.jsx index 09ab47c..eb514ac 100644 --- a/src/components/Balance.jsx +++ b/src/components/Balance.jsx @@ -3,7 +3,9 @@ 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 './Balance.css' +import { characterAnimation } from './Animations' export default class Balance extends PureComponent { static contextType = AppContext @@ -18,10 +20,16 @@ export default class Balance extends PureComponent { return (

- {formatCurrency(balance[currency], currency.toUpperCase(), locale) - .replace(/BTC/, 'Ƀ') - .replace(/ETH/, 'Ξ') - .replace(/OCEAN/, 'Ọ')} + + {formatCurrency(balance[currency], currency.toUpperCase(), locale) + .replace(/BTC/, 'Ƀ') + .replace(/ETH/, 'Ξ') + .replace(/OCEAN/, 'Ọ')} +

) } diff --git a/src/components/Ticker.css b/src/components/Ticker.css index 8f06cfb..033e2db 100644 --- a/src/components/Ticker.css +++ b/src/components/Ticker.css @@ -2,7 +2,6 @@ justify-content: center; margin-top: 2rem; margin-bottom: 2rem; - transition: opacity 1s ease-out; } .ticker .number-unit { diff --git a/src/components/Ticker.jsx b/src/components/Ticker.jsx index 4ea8f7c..e790286 100644 --- a/src/components/Ticker.jsx +++ b/src/components/Ticker.jsx @@ -2,7 +2,11 @@ import React, { PureComponent } from 'react' import { AppContext } from '../store/createContext' import { locale } from '../util/moneyFormatter' import { formatCurrency } from '@coingecko/cryptoformat' +import posed, { PoseGroup } from 'react-pose' import './Ticker.css' +import { fadeIn } from './Animations' + +const Item = posed.div(fadeIn) export default class Ticker extends PureComponent { static contextType = AppContext @@ -12,22 +16,24 @@ export default class Ticker extends PureComponent { return (
- {Object.keys(prices).map((key, i) => ( -
- -
- ))} + + {Object.keys(prices).map((key, i) => ( + + + + ))} +
) } diff --git a/src/screens/Home.css b/src/screens/Home.css index c2294a6..88ec016 100644 --- a/src/screens/Home.css +++ b/src/screens/Home.css @@ -5,7 +5,6 @@ align-items: center; flex-wrap: wrap; position: relative; - animation: fadein .5s .5s ease-out; } .preferences-link { @@ -79,13 +78,3 @@ .number-unit--main .number { font-size: 2.5rem; } - -@keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} diff --git a/src/screens/Preferences.jsx b/src/screens/Preferences.jsx index 88752b3..11b87b9 100644 --- a/src/screens/Preferences.jsx +++ b/src/screens/Preferences.jsx @@ -3,8 +3,12 @@ import { Link } from '@reach/router' import Store from 'electron-store' import Blockies from 'react-blockies' import ethereum_address from 'ethereum-address' +import posed, { PoseGroup } from 'react-pose' import { AppContext } from '../store/createContext' import './Preferences.css' +import { fadeIn } from '../components/Animations' + +const Item = posed.li(fadeIn) export default class Preferences extends PureComponent { static contextType = AppContext @@ -81,23 +85,25 @@ export default class Preferences extends PureComponent { Add Ethereum account addresses holding Ocean Tokens.

    - {accounts && - accounts.map(account => ( -
  • -
    - - {account} -
    + + {accounts && + accounts.map(account => ( + +
    + + {account} +
    - -
    • - ))} + + + ))} +