Refactoring. Swap UI. Swap deposit window: different token standards / evm coins

src/core/swap.app/constants/COINS.ts

@@ -31,10 +31,6 @@ export const COIN_MODEL = Object.freeze({
   AB: 'AB' // Account/Balance model
 })
 
-// TODO: change this structure
-// 1) here isn't only coins (rename it?)
-// 2) we can't add currencies with identical names
-//    example: identical tokens but on different blockchains
 export const COIN_DATA = {
   'BTC': {
     ticker: 'BTC',

src/front/client/scss/config/vars/_colors.scss

@@ -39,7 +39,8 @@ $notice-color: #8e9aa3;
 $color-brand: #6144e5;
 $color-f-brightest: #fff;
 $color-f-error: #e32950;
-$color-good: #4dd3ab;
+$color-success: #0CCF14;
+$color-good: #3de25b;
 $color-bad: #f56e85;
 $color-warning: #ffba00;
 $color-link: #007bff;

src/front/shared/components/modal/Modal/Modal.scss

@@ -68,17 +68,8 @@
 }
 
 .closeButton {
-  width: 20px;
-  height: 20px;
-  opacity: 0.5;
-  transition: opacity 0.33s $ease-out-quadratic;
   position: absolute;
   right: 20px;
-
-  &:hover {
-    opacity: 1;
-    transition: none;
-  }
 }
 
 @keyframes delayClose {

src/front/shared/components/modal/Modal/Modal.tsx

@@ -159,8 +159,7 @@ export default class Modal extends Component<ModalProps, null> {
                   <div styleName={titleStyleName} role="title">{title}</div>
                   {
                     showCloseButton && !disableClose && (
-                      //@ts-ignore 
-                      <CloseIcon styleName={`closeButton${delayClose ? ' delayClose' : ''}`} onClick={this.close} data-testid="modalCloseIcon" />
+                      <CloseIcon styleName={`closeButton ${delayClose ? 'delayClose' : ''}`} onClick={this.close} data-testid="modalCloseIcon" />
                     )
                   }
                 </WidthContainer>

src/front/shared/components/modal/ModalBox/ModalBox.scss

@@ -64,17 +64,10 @@
 }
 
 .closeButton {
-  width: 20px;
-  height: 20px;
-  opacity: 0.5;
-  transition: opacity 0.33s $ease-out-quadratic;
   position: absolute;
   right: 20px;
-  &:hover {
-    opacity: 1;
-    transition: none;
-  }
 }
+
 @keyframes delayClose {
   0% {
     opacity: 0;

src/front/shared/components/modal/ModalBox/ModalBox.tsx

@@ -43,8 +43,7 @@ export default class ModalBox extends Component<any, any> {
           //@ts-ignore */}
           <WidthContainer styleName="headerContent">
             <div styleName="title">{title}</div>
-            {/*
-            //@ts-ignore */}
+
             <CloseIcon styleName="closeButton" onClick={onClose} />
           </WidthContainer>
         </div>

src/front/shared/components/modals/Alert/AlertModal.scss

@@ -10,9 +10,15 @@
   position: relative;
 }
 
+.closeButton {
+  position: absolute;
+  right: 0.4em;
+  width: 1em;
+  height: 1em;
+}
+
 .title {
   width: 100%;
-  padding: 0 64px;
   line-height: 18px;
   font-size: 20px;
   font-weight: 700;

src/front/shared/components/modals/Alert/AlertModal.tsx

@@ -8,6 +8,7 @@ import { Button } from 'components/controls'
 import { injectIntl, IntlShape, defineMessages } from 'react-intl'
 import { constants } from 'helpers'
 import WidthContainer from 'components/layout/WidthContainer/WidthContainer'
+import CloseIcon from 'components/ui/CloseIcon/CloseIcon'
 
 const isDark = localStorage.getItem(constants.localStorage.isDark)
 
@@ -32,6 +33,7 @@ type AlertModalProps = {
   dashboardModalsAllowed
   onClose: () => void
   data: {
+    canClose: boolean
     dontClose: boolean
     okButtonAutoWidth: boolean
     onClose: () => void
@@ -48,7 +50,7 @@ type AlertModalProps = {
 }))
 @cssModules(styles)
 class AlertModal extends React.Component<AlertModalProps, null> {
-  handleClose = () => {
+  closeWithCustomAction = () => {
     const {
       name,
       data,
@@ -71,27 +73,33 @@ class AlertModal extends React.Component<AlertModalProps, null> {
     actions.modals.close(name)
   }
 
+  closeModal = () => {
+    const { name } = this.props
+
+    actions.modals.close(name)
+  }
+
   handleOk = () => {
     const {
-      name,
       data: {
         callbackOk,
       },
     } = this.props
 
     if (typeof callbackOk === `function`) {
       if (callbackOk()) {
-        actions.modals.close(name)
+        this.closeModal()
       }
     } else {
-      this.handleClose()
+      this.closeWithCustomAction()
     }
   }
 
   render() {
     const {
       intl,
       data: {
+        canClose,
         title,
         message,
         labelOk,
@@ -111,7 +119,6 @@ class AlertModal extends React.Component<AlertModalProps, null> {
     return (
       <div className={cx({
         [styles['modal-overlay']]: true,
-        [styles['modal-overlay_dashboardView']]: dashboardModalsAllowed
       })}>
         <div className={cx({
           [styles.modal]: true,
@@ -123,6 +130,10 @@ class AlertModal extends React.Component<AlertModalProps, null> {
             //@ts-ignore */}
             <WidthContainer styleName="headerContent">
               <div styleName="title">{labels.title}</div>
+
+              {canClose && (
+                <CloseIcon styleName="closeButton" onClick={this.closeModal} />
+              )}
             </WidthContainer>
           </div>
           <div styleName="content">

src/front/shared/components/modals/AlertWindow/index.tsx

@@ -43,7 +43,6 @@ class AlertWindow extends Component<any, any> {
     const { locale } = intl
 
     if (actionType === 'deposit') {
-      //@ts-ignore: strictNullChecks
       actions.modals.open(constants.modals.ReceiveModal, {
         currency,
         address,
@@ -94,8 +93,7 @@ class AlertWindow extends Component<any, any> {
             //@ts-ignore */}
             <WidthContainer styleName="headerContent">
               <div styleName="title">{labels.title}</div>
-              {/*
-              //@ts-ignore */}
+
               {canClose && (<CloseIcon styleName="closeButton" onClick={this.handleClosePopup} />)}
             </WidthContainer>
           </div>

src/front/shared/components/modals/AlertWindow/styles.scss

@@ -1,20 +1,12 @@
 .header {
-    padding: 16px 0;
-  }
+  padding: 16px 0;
+}
 
 .closeButton {
-  width: 20px;
-  height: 20px;
-  opacity: 0.5;
-  transition: opacity 0.33s $ease-out-quadratic;
   position: absolute;
   right: 20px;
-
-  &:hover {
-    opacity: 1;
-    transition: none;
-  }
 }
+
 .headerContent {
   height: 100%;
   display: flex;

src/front/shared/components/modals/ConnectWalletModal/ConnectWalletModal.tsx

@@ -120,7 +120,6 @@ class ConnectWalletModal extends React.Component<any, null> {
       <div
         className={cx({
           [styles['modal-overlay']]: true,
-          [styles['modal-overlay_dashboardView']]: dashboardModalsAllowed,
         })}
       >
         <div

src/front/shared/components/modals/CurrencyAction/CurrencyAction.scss

@@ -148,18 +148,9 @@
 }
 
 .closeButton {
-  width: 20px;
-  height: 20px;
-  opacity: 0.5;
-  transition: opacity .33s $ease-out-quadratic;
   position: absolute;
   right: 33px;
   top: 32px;
-
-  &:hover {
-    opacity: 1;
-    transition: none;
-  }
 }
 
 .modal-overlay {

src/front/shared/components/modals/CurrencyAction/CurrencyAction.tsx

@@ -95,7 +95,6 @@ class CurrencyAction extends React.Component<any, any> {
     return (
       <div styleName={cx({
         "modal-overlay": true,
-        "modal-overlay_dashboardView": dashboardView,
         "dark": isDark,
       })}>
         <div styleName={cx({
@@ -104,8 +103,7 @@ class CurrencyAction extends React.Component<any, any> {
         })}>
           <div styleName="header">
             <p styleName="title">{context}</p>
-            {/*
-            //@ts-ignore */}
+
             <CloseIcon styleName="closeButton" onClick={this.handleClose} data-testid="modalCloseIcon" />
           </div>
           <div styleName={cx({

src/front/shared/components/modals/ReceiveModal/ReceiveModal.tsx

@@ -43,7 +43,7 @@ const langs = defineMessages({
 })
 
 @connect(
-  ({ user: { activeFiat }, user }) => ({ activeFiat, user })
+  ({ user }) => ({ user })
 )
 @withRouter
 @cssModules({ ...styles, ...ownStyles }, { allowMultiple: true })

src/front/shared/components/ui/CloseIcon/CloseIcon.scss

@@ -3,7 +3,15 @@
   background: none;
   border: 0;
   outline: none;
-  -webkit-tap-highlight-color: transparent;
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
+  transition: opacity .33s $ease-out-quadratic;
+
+  &:hover {
+    opacity: 1;
+    transition: none;
+  }
 
   &.dark {
     .icon {
@@ -12,49 +20,6 @@
         background-color: white;
       }
     }
-
-   }
-
-  &.whiteColor {
-    .icon {
-      &::before,
-      &::after {
-        background-color: #fff;
-      }
-    }
-
-    &:hover {
-
-      .icon {
-
-        &::before,
-        &::after {
-          background-color: $color-brand;
-        }
-      }
-    }
-  }
-
-  &.brandColor {
-
-    .icon {
-
-      &::before,
-      &::after {
-        background-color: $color-brand;
-      }
-    }
-
-    &:hover {
-
-      .icon {
-
-        &::before,
-        &::after {
-          background-color: #000;
-        }
-      }
-    }
   }
 }
 

src/front/shared/components/ui/CloseIcon/CloseIcon.tsx

@@ -1,18 +1,21 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
 import { constants } from 'helpers'
 
 import cssModules from 'react-css-modules'
 import styles from './CloseIcon.scss'
 
-
 const isDark = localStorage.getItem(constants.localStorage.isDark)
 
-const CloseIcon = ({ whiteColor, brandColor, onClick, ...rest }) => {
+type ComponentProps = {
+  onClick: (...args: any) => void
+  styleName: string
+}
+
+const CloseIcon = (props: ComponentProps) => {
+  const { onClick, styleName: externalName, ...rest } = props
+
   const styleName = cx('button', {
-    'whiteColor': whiteColor,
-    'brandColor': brandColor,
     'dark': isDark,
   })
 
@@ -23,10 +26,4 @@ const CloseIcon = ({ whiteColor, brandColor, onClick, ...rest }) => {
   )
 }
 
-CloseIcon.propTypes = {
-  whiteColor: PropTypes.bool,
-  brandColor: PropTypes.bool,
-}
-
-
 export default cssModules(CloseIcon, styles, { allowMultiple: true })

src/front/shared/components/ui/Tooltip/Tooltip.tsx

@@ -5,7 +5,7 @@ import ThemeTooltip from './ThemeTooltip'
 import styles from './Tooltip.scss'
 
 
-const Tooltip = ({ mark = true, children, id, dontHideMobile = null, place = null }) => (
+const Tooltip = ({ mark = true, children, id, dontHideMobile = false, place = null }) => (
   <Fragment>
     {mark ?
       <span data-tip data-for={id} styleName={`tooltip isMark ${dontHideMobile ? 'tooltip_truesight' : ''}`}>