Merge pull request #59 from sonm-io/dev

version: 1.0.2

build.js

@@ -1,29 +1,24 @@
 'use strict';
 
 const packager = require('electron-packager');
-const rimraf = require('rimraf');
 const platform = process.env.PLATFORM || 'darwin';
 
 const params = {
     dir: '.',
     name: 'sonm-wallet',
     platform: platform,
     arch: 'x64',
-    electronVersion: '1.8.1',
     out: './releases',
-    appBundleId: '',
-    appVersion: '0.0.1',
+    appBundleId: 'sonm-wallet',
     overwrite: true,
     asar: false,
     icon: './front/assets/app-icon',
-    bundle_id: '',
-    appname: 'sonm-wallet',
-    ignore: ['node_modules', 'dist', 'front'],
-    prune: true,
-    afterPrune: [(buildPath, electronVersion, platform, arch, callback) => {
-        rimraf.sync(`${buildPath}/node_modules`);
-        callback();
-    }],
+    ignore: path => {
+        return Boolean(path)
+            && !path.startsWith('/docs')
+            && path !== '/package.json'
+            && path !== '/main.js';
+    },
 };
 
 packager(params, function done_callback (err, appPaths) {

front/src/app/components/common/alert/index.less

@@ -5,7 +5,7 @@
 
 .sonm-alert {
   position: relative;
-  z-index: @z-everest;
+  z-index: @z-kangchenjunga;
   border: 0 solid;
   padding: @alert-padding-vert @alert-padding-hor;
   transition: opacity 0.15s ease;
@@ -34,21 +34,18 @@
 
   }
 
-  &__cross {
-    z-index: @z-everest + 1;
+  & &__cross {
+    z-index: @z-kangchenjunga + 1;
     border: 1px dashed transparent;
     border-radius: 50%;
     background: none;
     display: block;
     position: absolute;
-    top: @alert-padding-vert;
-    right: @alert-padding-hor;
-    line-height: 17px;
+    height: 30px;
     width: 30px;
-    font-size: 30px;
-    transform: rotate(45deg);
     cursor: pointer;
-    font-weight: 400;
+    right: 7px;
+    top: 7px;
 
     &:focus,
     &:active {

front/src/app/components/common/alert/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as cn from 'classnames';
+import { Icon } from '../icon';
 
 export interface IAlertProps {
     id: string;
@@ -40,7 +41,7 @@ export class Alert extends React.PureComponent<IAlertProps, any> {
             >
                 <span className="sonm-alert__message">{children}</span>
                 {onClosed
-                    ? <button type="button" className="sonm-alert__cross" onClick={this.handleClickCross}> + </button>
+                    ? <Icon i="Close" type="button" className="sonm-alert__cross" onClick={this.handleClickCross} />
                     : null
                 }
             </div>

front/src/app/components/common/hash-view/index.less

@@ -39,7 +39,7 @@
     margin: 1px 2px;
     padding: 0;
     cursor: pointer;
-    color: @color-font-gray;
+    color: inherit;
     background: transparent none;
     appearance: none;
 

front/src/app/components/common/icon/index.less

@@ -7,6 +7,7 @@
   text-decoration: none;
   position: relative;
   vertical-align: baseline;
+  -webkit-appearance: none !important;
 
   a&:focus,
   a&:visited,

front/src/app/components/common/ident-icon/index.tsx

@@ -4,6 +4,7 @@ const ICON_PIXEL_SIZE = 8;
 
 export interface IProps {
     address: string;
+    onlyGeneratedIcon?: boolean;
     className?: string;
     width?: number;
 }
@@ -41,7 +42,7 @@ export class IdentIcon extends React.Component<IProps, any> {
     protected checkAddress(address: string): boolean {
         return (address.length === 40 && !address.startsWith('0x'))
             || (address.length === 42 && address.startsWith('0x'))
-            || (IdentIcon.icons[address]);
+            || (!this.props.onlyGeneratedIcon && IdentIcon.icons[address]);
     }
 
     private canvas: HTMLCanvasElement | null = null;
@@ -196,6 +197,7 @@ export class IdentIcon extends React.Component<IProps, any> {
             className,
             width,
             address,
+            onlyGeneratedIcon,
         } = this.props;
         const canvasSize = this.getCanvasSize();
 
@@ -206,7 +208,9 @@ export class IdentIcon extends React.Component<IProps, any> {
                 className={cn(
                     className,
                     'sonm-ident-icon__wrapper',
-                    IdentIcon.icons[address] && `sonm-ident-icon__icon-${IdentIcon.icons[address]}`,
+                    (!onlyGeneratedIcon && IdentIcon.icons[address])
+                        ? `sonm-ident-icon__icon-${IdentIcon.icons[address]}`
+                        : undefined,
                 )}
                 style={{ width: width as number, height: width as number }}
             >

front/src/app/components/common/spinner/index.less

@@ -5,6 +5,7 @@
 
 
 .sonm-spinner {
+  overflow: hidden;
 
   &__svg {
     display: block;
@@ -15,6 +16,7 @@
     background-size: contain;
     height: @spiner-size;
     width: @spiner-size;
+    margin: -1px;
   }
 
   &__circle {

front/src/app/components/layouts/app/index.less

@@ -7,7 +7,6 @@
 .sonm-app {
   margin: 0 auto;
   width: 1280px;
-  min-height: 720px;
   height: 100vh;
   border: 0;
   display: flex;
@@ -29,7 +28,7 @@
       margin: 0;
       position: relative;
       padding: 20px 50px 50px 50px;
-      min-height: 680px;
+      min-height: 50px;
       display:  flex;
       flex-direction:  column;
     }

front/src/app/components/layouts/app/sub/alerts/index.less

@@ -18,7 +18,7 @@
 
   &__hash {
     width: 200px;
-    vertical-align: bottom;
+    vertical-align: baseline;
   }
 
   &__message {

front/src/app/components/layouts/history/index.less

@@ -12,35 +12,36 @@
 }
 
 .sonm-history {
-  display: grid;
-  grid-template-columns: 220px 200px 1fr;
-  grid-template-rows: @big-select-height 30px 1fr;
-  grid-gap: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
 
   &__select-account {
     width: 100%;
-    grid-column: ~"1 / 4";
-    grid-row: 1;
+    margin: 0 0 5px 0;
   }
 
   &__date-range {
-    grid-column: 1;
-    grid-row: 2;
+    width: ~'calc(30% - 5px)';
+    margin: 5px 5px 5px 0;
   }
 
   &__select-currency {
-    grid-column: 2;
-    grid-row: 2;
+    width: ~'calc(20% - 10px)';
+    margin: 5px;
   }
 
   &__query {
-    grid-column: 3;
-    grid-row: 2;
+    width: ~'calc(50% - 5px)';
+    margin: 5px 0 5px 5px;
   }
 
   &__table {
-    grid-column: ~"1 / 4";
-    grid-row: 3;
+    width: 100%;
+    margin: 5px 0;
   }
 }
 

front/src/app/components/layouts/login/index.less

@@ -5,7 +5,7 @@
   --color-form-field-text: @color-font-gray;
 
   background-color: @color-brand-bg;
-  min-height: 680px;
+  min-height: 600px;
 
   color: @color-white;
   padding: 0;
@@ -185,6 +185,11 @@
   }
 
   &__wallet-option {
+    max-width: 230px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+
     &--rinkeby {
       &:before {
         content: '{testnet} ';

front/src/app/components/layouts/login/index.tsx

@@ -349,7 +349,7 @@ export class Login extends React.Component<IProps, IState> {
     }
 
     protected renderWalletOption(record: IWalletListItem) {
-        return <span className={`sonm-login__wallet-option--${record.chainId}`}>
+        return <span className={`sonm-login__wallet-option sonm-login__wallet-option--${record.chainId}`}>
             {record.name}
         </span>;
     }

front/src/app/components/layouts/send/index.tsx

@@ -143,6 +143,7 @@ export class Send extends React.Component<IProps, any> {
                         </FormField>
 
                         <IdentIcon
+                            onlyGeneratedIcon
                             address={sendStore.toAddress}
                             className="sonm-send__address-to-icon"
                         />

front/src/app/components/layouts/send/sub/confirm/index.less

@@ -73,16 +73,21 @@
 
     border: @confirm-border;
     padding: @confirm-padding 30px 30px;
-    font-size: 16px;
     margin: 0;
 
+    font-size: 16px;
+
+    overflow: hidden;
+
     dt {
       font-weight: bold;
       display: block;
       margin: 0;
     }
 
     dd {
+      overflow: hidden;
+      text-overflow: ellipsis;
       display: block;
       margin: 0 0 20px 0;
     }

front/src/app/index.tsx

@@ -40,6 +40,7 @@ async function handleLogin(wallet: IWalletListItem) {
         rootStore.historyStore.init(),
     ]);
 
+    history.replace('/accounts');
     renderByPath((history as any).location);
 }
 

front/src/app/stores/send.ts

@@ -39,8 +39,6 @@ Object.freeze(emptyForm);
 // const allFormKeys = Object.keys(emptyForm) as Array<keyof ISendFormValues>;
 
 export class SendStore extends AbstractStore {
-    public static DEFAULT_GAS_LIMIT = '250000';
-
     protected rootStore: RootStore;
 
     constructor(rootStore: RootStore) {
@@ -49,6 +47,12 @@ export class SendStore extends AbstractStore {
         this.rootStore = rootStore;
     }
 
+    @computed get defaultGasLimit() {
+        return this.rootStore.mainStore.networkName === 'livenet'
+            ? '50000'
+            : '250000';
+    }
+
     @observable public userInput: ISendFormValues = { ...emptyForm };
 
     @observable protected userInputTouched: Array<keyof ISendFormValues> = [];
@@ -67,6 +71,10 @@ export class SendStore extends AbstractStore {
         return this.userInput.toAddress;
     }
 
+    @computed public get currentCurrency() {
+        return this.rootStore.mainStore.currencyMap.get(this.currencyAddress);
+    }
+
     protected isFieldTouched(fieldName: keyof ISendFormValues) {
         return this.userInputTouched.indexOf(fieldName) !== -1;
     }
@@ -118,6 +126,15 @@ export class SendStore extends AbstractStore {
             } else {
                 result.push(...validatePositiveNumber(amount));
 
+                if (result.length === 0) {
+                    const decimalDigits = amount.split('.')[1];
+                    const decimals = this.currentCurrency ? Number(this.currentCurrency.decimals) : 0;
+
+                    if (decimalDigits && decimalDigits.length > decimals) {
+                        result.push(`Too many decimal digits. Maximum: ${decimals}`);
+                    }
+                }
+
                 if (result.length === 0) {
                     const currentMax = createBigNumber(this.currentBalanceMaximum);
 
@@ -134,7 +151,7 @@ export class SendStore extends AbstractStore {
     }
 
     @computed public get gasLimit() {
-        return this.userInput.gasLimit || SendStore.DEFAULT_GAS_LIMIT;
+        return this.userInput.gasLimit || this.defaultGasLimit;
     }
 
     @computed public get validationGasLimit() {

front/src/app/utils/check-browser.ts

@@ -0,0 +1,28 @@
+function checkSafari() {
+    let result = true;
+
+    window.navigator.userAgent.replace(
+        /\/(\d+).(\d+).(\d+) Safari\//,
+        (all, major, minor, bug) => {
+        result = Number(major) >= 11;
+        return '';
+    });
+
+    return result;
+}
+
+export function checkBrowser() {
+    try {
+        return ((async () => {
+                await Promise.resolve(1);
+            })())
+            && window.matchMedia('(min-device-width: 800px)').matches
+            && localStorage
+            && ((window as any).CSS && (window as any).CSS.supports('color', 'var(--primary)'))
+            && checkSafari();
+    } catch (e) {
+       return false;
+    }
+}
+
+export default checkBrowser;