diff --git a/common/actions/notifications/actionCreators.ts b/common/actions/notifications/actionCreators.ts index c439c65dcf1..75c0a7351ce 100644 --- a/common/actions/notifications/actionCreators.ts +++ b/common/actions/notifications/actionCreators.ts @@ -13,7 +13,8 @@ export function showNotification( payload: { level, msg, - duration + duration, + id: Math.random() } }; } diff --git a/common/actions/notifications/actionTypes.ts b/common/actions/notifications/actionTypes.ts index 939cc1af7ea..16de73a2f0c 100644 --- a/common/actions/notifications/actionTypes.ts +++ b/common/actions/notifications/actionTypes.ts @@ -7,6 +7,7 @@ export type INFINITY = 'infinity'; export interface Notification { level: NOTIFICATION_LEVEL; msg: ReactElement | string; + id: number; duration?: number | INFINITY; } diff --git a/common/containers/TabSection/Notifications.scss b/common/containers/TabSection/Notifications.scss index bb49e4c76ad..ae5d0459cbb 100644 --- a/common/containers/TabSection/Notifications.scss +++ b/common/containers/TabSection/Notifications.scss @@ -142,3 +142,25 @@ } } } + +.NotificationAnimation{ + &-enter { + opacity: 0.01; + &-active { + opacity: 1; + transition: opacity 500ms; + } + } +} + +.NotificationAnimation{ + &-exit { + opacity: 1; + transform: none; + &-active { + opacity: 0.01; + transform: translateY(100%); + transition: opacity 500ms, transform 500ms; + } + } +} \ No newline at end of file diff --git a/common/containers/TabSection/Notifications.tsx b/common/containers/TabSection/Notifications.tsx index d768df220c6..3b560eea30e 100644 --- a/common/containers/TabSection/Notifications.tsx +++ b/common/containers/TabSection/Notifications.tsx @@ -5,6 +5,7 @@ import { } from 'actions/notifications'; import React from 'react'; import { connect } from 'react-redux'; +import { TransitionGroup, CSSTransition } from 'react-transition-group'; import NotificationRow from './NotificationRow'; import './Notifications.scss'; @@ -12,21 +13,30 @@ interface Props { notifications: Notification[]; closeNotification: TCloseNotification; } + +const Transition = props => ( + +); + export class Notifications extends React.Component { public render() { - if (!this.props.notifications.length) { - return null; - } return ( -
- {this.props.notifications.map((n, i) => ( - - ))} -
+ + {this.props.notifications.map(n => { + return ( + + + + ); + })} + ); } } diff --git a/common/containers/Tabs/SendTransaction/index.tsx b/common/containers/Tabs/SendTransaction/index.tsx index d6c2807821c..befa1e7b379 100644 --- a/common/containers/Tabs/SendTransaction/index.tsx +++ b/common/containers/Tabs/SendTransaction/index.tsx @@ -307,14 +307,14 @@ export class SendTransaction extends React.Component { onChange={readOnly ? void 0 : this.onGasChange} /> {(offline || forceOffline) && ( -
- -
- )} +
+ +
+ )} {unit === 'ether' && (