Release/0.28

package.json

@@ -90,7 +90,7 @@
     "eslint-plugin-react": "^6.9.0",
     "file-loader": "^0.10.0",
     "json-loader": "^0.5.4",
-    "nodemon": "^1.11.0",
+    "nodemon": "^1.18.7",
     "null-loader": "^0.1.1",
     "react-intl-translations-manager": "^5.0.0",
     "style-loader": "^0.19.0",

src/common/components/Background/MainScreen.jsx

@@ -15,6 +15,7 @@ const styles = theme => ({
     position: 'relative',
     height: '100vh',
     width: '100%',
+    minHeight: '700px',
   },
   background: {
     position: 'absolute',
@@ -59,6 +60,7 @@ const styles = theme => ({
 });
 
 const MainScreenBackground = ({
+  minHeight,
   classes,
   children,
   className,
@@ -71,7 +73,7 @@ const MainScreenBackground = ({
   videoFirstFrameMobile,
 }) => (
   <div className={classes.wrapper}>
-    <Wrapper>
+    <Wrapper style={{minHeight}}>
       <div
         className={cn(
           classes.background,

src/common/components/Button/index.jsx

@@ -39,6 +39,7 @@ class Button extends Component {
         secondary, // eslint-disable-line
         whited,
         coloredHover,
+        grey,
 
         children,
         loading,
@@ -57,9 +58,11 @@ class Button extends Component {
       [classes.inverted]: bordered && inverted,
       [classes.invertedFill]: !bordered && inverted,
       [classes.light]: !bordered && secondary,
-      [classes.dark]: !bordered && !secondary,
+      [classes.light]: !bordered && secondary,
+      [classes.dark]: !bordered && !secondary && !grey,
       [classes.white]: !bordered && whited,
-      [classes.coloredHover]: coloredHover
+      [classes.coloredHover]: coloredHover,
+      [classes.grey]: grey,
     }, className);
 
     const contentWrapperClasses = classnames(
@@ -107,6 +110,7 @@ class Button extends Component {
 Button.defaultProps = {
   type: 'button',
   className: '',
+  grey: false,
   disabled: false,
   loading: false,
   whited: false,
@@ -122,6 +126,7 @@ Button.propTypes = {
   className: PropTypes.string,
   href: PropTypes.string,
   secondary: PropTypes.bool,
+  grey: PropTypes.bool,
   inverted: PropTypes.bool,
   whited: PropTypes.bool,
   coloredHover: PropTypes.bool,

src/common/components/Button/styles.js

@@ -40,6 +40,7 @@ const styles = theme => ({
       pointerEvents: 'none',
     },
   },
+
   coloredHover: {
     '&:hover': {
       transform: 'none',
@@ -50,6 +51,20 @@ const styles = theme => ({
     border: `1px solid ${theme.palette.gray[1000]}`,
     color: '#fff',
   },
+  grey: {
+    backgroundColor: theme.palette.gray[200],
+    border: `1px solid ${theme.palette.gray[200]}`,
+    color: theme.palette.gray[700],
+    pointerEvents: 'none',
+    transform: 'none',
+    '&:hover': {
+      transform: 'none',
+    },
+    '&:disabled': {
+      opacity: 1,
+      pointerEvents: 'none',
+    },
+  },
   light: {
     backgroundColor: theme.palette.blue[500],
     border: `1px solid ${theme.palette.blue[500]}`,

src/common/components/ButtonGetApp/index.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { FormattedHTMLMessage } from 'react-intl';
 import Button from '../Button';
 import Icon from 'src/common/components/Icon';
+import { fileUrl } from 'src/common/utils/url';
 
 import injectSheet from 'react-jss';
 import cn from 'classnames';
@@ -22,33 +23,50 @@ const styles = theme => ({
     button: {
       padding: [0, theme.spacing.unit * 5, 0, theme.spacing.unit * 3],
     },
-  },
+  }
 });
 
-const APP_STORE_HREF =
-  'https://itunes.apple.com/us/app/waves-wallet/id1233158971?mt=8';
-const GOOGLE_PLAY_HREF =
-  'https://play.google.com/store/apps/details?id=com.wavesplatform.wallet';
+const APP_STORE_HREF = {
+    store: 'https://itunes.apple.com/us/app/waves-wallet/id1233158971?mt=8',
+    link: null
+};
+const GOOGLE_PLAY_HREF = {
+    store: 'https://play.google.com/store/apps/details?id=com.wavesplatform.wallet',
+    link: fileUrl('WavesWallet_release_2.2.1.apk'),
+};
 
-const ButtonGetApp = ({ classes, className, type, ...rest }) => (
+
+const AppIcon = ({ type, fromFile}) => (
+    type === 'google-play' ? (
+        <Icon size={28} name={fromFile ? "googleAndroid" : "googlePlay"}/>
+    ) : (
+        <Icon size={32} name={fromFile ? "appleLogo" : "apple"}/>
+    )
+);
+
+const getButtonProps = ({fromFile, type, onClick}) => ({
+    href: (type === 'google-play' ? GOOGLE_PLAY_HREF : APP_STORE_HREF)[fromFile ? 'link' : 'store'],
+    target: "_blank",
+    grey: type === 'app-store' && fromFile,
+    disabled: type === 'app-store' && fromFile,
+    icon: <AppIcon fromFile={fromFile} type={type}/>,
+    onClick: () => onClick(fromFile ? 'mobile_client_download' : 'mobile_client')
+});
+
+const ButtonGetApp = ({ classes, className, type, fromFile, onClick, ...rest }) => (
   <Button
-    icon={
-      type === 'google-play' ? (
-        <Icon size={28} name="googlePlay" />
-      ) : (
-        <Icon size={32} name="apple" />
-      )
-    }
-    className={cn(classes.button, className)}
-    href={type === 'google-play' ? GOOGLE_PLAY_HREF : APP_STORE_HREF}
-    target="_blank"
-    {...rest}
+      className={cn(classes.button, className)}
+      {...{...rest, ...getButtonProps({ type, fromFile, onClick })}}
   >
     <span className={classes.text}>
       {type === 'google-play' ? (
-        <FormattedHTMLMessage id="components.buttonGetApp.title.android" />
+          <FormattedHTMLMessage id={
+            fromFile ? "components.buttonGetApp.title.androidLink" : "components.buttonGetApp.title.android"
+          }/>
       ) : (
-        <FormattedHTMLMessage id="components.buttonGetApp.title.ios" />
+          <FormattedHTMLMessage id={
+            fromFile ? "components.buttonGetApp.title.iosLink" : "components.buttonGetApp.title.ios"
+          }/>
       )}
     </span>
   </Button>

src/common/components/Icon/lib/custom/AppleLogo.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const AppleLogo = ({size, style}) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 26 30"
+        style={style}
+    >
+        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+            <g id="apple-black" transform="translate(-3.000000, -1.000000)">
+                <g id="apple" transform="translate(3.500000, 1.000000)" fill="#000000">
+                    <path
+                        d="M1.36832669,11.0280984 C2.7189243,8.70836066 5.1687251,7.24357377 7.76135458,7.20590164 C7.78715139,7.20540984 7.81334661,7.20511475 7.83994024,7.20511475 C8.95498008,7.20511475 10.0082669,7.61783607 10.9375498,7.98206557 C11.6324701,8.25432787 12.2325697,8.4895082 12.6950199,8.4895082 C13.1065737,8.4895082 13.7032869,8.25718033 14.3941235,7.98816393 C15.3949203,7.59845902 16.6406375,7.11344262 17.9410359,7.11344262 C18.1075697,7.11344262 18.2734064,7.12140984 18.4340637,7.1372459 C19.5412351,7.1842623 22.2912351,7.57504918 24.0854582,10.1680328 C24.1233068,10.2227213 24.137251,10.2903934 24.1239044,10.3554098 C24.1105578,10.4205246 24.0712151,10.4774754 24.014741,10.513377 L23.9904382,10.5283279 C23.4691235,10.8468197 20.8697211,12.6040328 20.9030876,15.9223279 C20.9390438,20.0066557 24.3595618,21.5051803 24.749502,21.6626557 C24.7527888,21.6640328 24.7645418,21.6688525 24.7677291,21.6703279 C24.8833665,21.7227541 24.9403386,21.8527869 24.9,21.9719016 L24.8914343,21.9985574 C24.6795817,22.6687869 24.0516932,24.4226557 22.8,26.2290492 C21.600498,27.9591148 20.2409363,29.9202295 18.0265936,29.9609508 C16.9915339,29.9801311 16.2910359,29.679541 15.6109562,29.3889836 C14.9209163,29.0940984 14.2073705,28.789082 13.089243,28.789082 C11.9139442,28.789082 11.1646414,29.1043279 10.4401394,29.4092459 C9.79482072,29.680623 9.12739044,29.9614426 8.20378486,29.9978361 C8.16573705,29.9993115 8.12858566,30 8.09153386,30 C6.12569721,30 4.69043825,28.1825902 3.27280876,26.1579344 C0.432768924,22.1082295 -1.1999004,15.4292459 1.36832669,11.0280984 Z M18.4363546,0.000196721311 C18.565239,-0.00481967213 18.6796813,0.0905901639 18.6940239,0.21904918 C18.8760956,1.85832787 18.2742032,3.68842623 17.0838645,5.11445902 C15.9528884,6.46495082 14.2968127,7.30367213 12.7616534,7.30367213 C12.6538845,7.30357377 12.5457171,7.29944262 12.439741,7.29127869 C12.32251,7.28232787 12.2276892,7.1935082 12.212251,7.07842623 C11.9660359,5.23908197 12.9005976,3.41429508 13.8572709,2.31983607 C14.9829681,1.0177377 16.8663347,0.0633442623 18.4363546,0.000196721311 Z"
+                        id="Combined-Shape"></path>
+                </g>
+            </g>
+        </g>
+    </svg>
+);
+
+export default AppleLogo;

src/common/components/Icon/lib/custom/GoogleAndroid.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const GoogleAndroid = ({size, style}) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 26 30"
+        style={style}
+    >
+        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+            <g id="android" transform="translate(-3.000000, -1.000000)">
+                <rect id="ico-zone" fill="#D8D8D8" fillRule="nonzero" opacity="0" x="0" y="0" width="32" height="32"></rect>
+                <path d="M19.1249635,30.9998828 C18.1240139,30.9998828 17.2511139,30.1251397 17.2512308,29.1221939 L17.2512308,24.7367011 L14.7487692,24.7367011 L14.7487692,29.1221939 C14.7487692,30.1252569 13.8759276,31 12.875095,31 C11.8739116,31 11.0012454,30.1252569 11.0012454,29.1221939 L11.0012454,24.7367011 L9.74992691,24.7367011 C8.99922936,24.7367011 8.49872535,24.2351403 8.49872535,23.4828577 L8.49872535,10.9571974 L23.5012162,10.9571974 L23.5012162,23.4827405 C23.5012162,24.2349645 23.0008291,24.7365839 22.2500146,24.7365839 L20.9988131,24.7365839 L20.9988131,29.1220767 C20.9988131,30.1251397 20.125913,30.9998828 19.1249635,30.9998828 Z M26.6263258,23.4828577 C25.6252008,23.4828577 24.7524762,22.6081146 24.7524762,21.6050516 L24.7524762,12.8341832 C24.7524762,11.8364522 25.6252593,10.9571974 26.6263258,10.9571974 C27.6273338,10.9571974 28.5,11.8363936 28.5,12.8341832 L28.5,21.6050516 C28.5,22.6082318 27.6272754,23.4828577 26.6263258,23.4828577 Z M5.37367419,23.4828577 C4.37272464,23.4828577 3.50005847,22.6081146 3.5,21.6050516 L3.5,12.8341832 C3.5,11.8364522 4.37272464,10.9571974 5.37367419,10.9571974 C6.37485763,10.9571974 7.24752379,11.8363936 7.24752379,12.8341832 L7.24752379,21.6050516 C7.24752379,22.6082318 6.37474069,23.4828577 5.37367419,23.4828577 Z M21.9996457,1.18918392 C22.2500146,1.4400815 22.2500146,1.81232633 21.9996457,2.06310672 L20.376165,3.69013241 C20.8992385,4.04011168 21.3737233,4.46837193 21.7859959,4.95821401 C22.7734974,6.13096391 23.4035126,7.65756025 23.4899314,9.31153897 C23.4909254,9.32876548 23.4926211,9.34575761 23.4934397,9.36298411 C23.4985266,9.47565951 23.5012162,9.58886225 23.5012162,9.70247514 L8.49878382,9.70247514 C8.49878382,9.58880365 8.50123957,9.47560091 8.50656034,9.36298411 C8.50732046,9.34575761 8.50901609,9.32876548 8.50983467,9.31153897 C8.59642888,7.65756025 9.22632721,6.1310225 10.2137702,4.95809682 C10.6262182,4.46825475 11.1005276,4.03999449 11.6236011,3.69001522 L10.0002959,2.06298953 C9.74998538,1.81232633 9.74998538,1.44002291 10.0002959,1.18918392 C10.2504309,0.936938692 10.6226515,0.936938692 10.872962,1.18918392 L12.5511122,2.86525241 L12.628702,2.94271309 C13.6236876,2.44337886 14.739297,2.19400471 15.9816112,2.19160237 C15.9878675,2.19160237 15.993656,2.19142659 15.9999708,2.19142659 L16.0001462,2.19142659 C16.0062271,2.19142659 16.0122495,2.19160237 16.0183304,2.19160237 C17.260703,2.19400471 18.3763708,2.44337886 19.3714149,2.94271309 L19.4488293,2.86525241 L21.1269795,1.18918392 C21.3771146,0.936938692 21.7495106,0.936938692 21.9996457,1.18918392 Z M12.8726977,7.51324434 C13.3903335,7.51324434 13.8100318,7.09271843 13.8100318,6.57393114 C13.8100318,6.05514385 13.3903335,5.63461795 12.8726977,5.63461795 C12.3550035,5.63461795 11.9353636,6.05514385 11.9353636,6.57393114 C11.9353636,7.09271843 12.355062,7.51324434 12.8726977,7.51324434 Z M19.1272438,7.51324434 C19.644938,7.51324434 20.0645779,7.09271843 20.0645779,6.57393114 C20.0645779,6.05514385 19.6448795,5.63461795 19.1272438,5.63461795 C18.6095496,5.63461795 18.1899097,6.05514385 18.1899097,6.57393114 C18.1899097,7.09271843 18.609608,7.51324434 19.1272438,7.51324434 Z" id="android-logo" fill="#A6D864"></path>
+            </g>
+        </g>
+    </svg>
+);
+
+export default GoogleAndroid;

src/common/components/Icon/lib/custom/map.js

@@ -1,13 +1,17 @@
 import Hamburger from './Hamburger';
 import Cross from './Cross';
 import GooglePlay from './GooglePlay';
+import GoogleAndroid from './GoogleAndroid';
+import AppleLogo from './AppleLogo';
 import MapMarker from './MapMarker';
 import DiscordIcon from '!svg-react-loader!./Discord.svg';
 
 export default {
   hamburger: Hamburger,
   cross: Cross,
   googlePlay: GooglePlay,
+  googleAndroid: GoogleAndroid,
+  appleLogo: AppleLogo,
   mapMarker: MapMarker,
   discord: DiscordIcon,
 };

src/common/components/Typography/index.jsx

@@ -46,6 +46,7 @@ Typography.defaultProps = {
   type: 'body',
   tagName: '',
   tagMap: {
+    display6: 'h1',
     display5: 'h1',
     display4: 'h1',
     display3: 'h2',
@@ -65,6 +66,7 @@ Typography.defaultProps = {
 };
 
 const types = [
+  'display6',
   'display5',
   'display4',
   'display3',

src/common/components/Typography/styles.js

@@ -30,6 +30,10 @@ const styles = theme => ({
     extend: [theme.typography.body2, theme.spacing.body],
     fontWeight: ({ weight }) => weight || theme.typography.body2.fontWeight,
   },
+  display6: {
+    extend: [theme.typography.display6, theme.spacing.display6],
+    fontWeight: ({ weight }) => weight || theme.typography.display6.fontWeight,
+  },
   display5: {
     extend: [theme.typography.display5, theme.spacing.display5],
     fontWeight: ({ weight }) => weight || theme.typography.display5.fontWeight,