Merge branch 'develop'

Author: Saurer

README.md

@@ -49,14 +49,15 @@ API binding can be customized to the value of your choice. Simply create a setti
 }
 ```
 - **defaultNetwork** - Key of the default network that will be connected automatically
-- **networks.key** - Specifies a unique key for a network
-- **networks.name** - A human readable network name that will be shown in the interface
-- **networks.networkID** - Unique identificator that is imprinted in all transactions. Refer to the configuration of your go-apla instance
-- **networks.fullNodes** - Prebuilt list of URLs that will be used for synchronization
-- **networks.socketUrl** - Optional parameter that overrides Centrifugo connection endpoint. Default: provided by go-apla configuration
-- **networks.activationEmail** - Optional parameter that will be shown to a user when there are no active endpoints to log in. Used for KYC
-- **networks.enableDemoMode** - When set to true, will enable authorization using the guest key
-- **networks.disableSync** - Optional parameter that disables synchronization of the full nodes. Unsafe, use with caution
+- **networks** - Specifies an array of predefined network endpoints that are used to connect your application to the blockchain
+- **networks[x].key** - Specifies a unique key for a network
+- **networks[x].name** - A human readable network name that will be shown in the interface
+- **networks[x].networkID** - Unique identificator that is imprinted in all transactions. Refer to the configuration of your go-apla instance
+- **networks[x].fullNodes** - Prebuilt list of URLs that will be used for synchronization
+- **networks[x].socketUrl** - Optional parameter that overrides Centrifugo connection endpoint. Default: provided by go-apla configuration
+- **networks[x].activationEmail** - Optional parameter that will be shown to a user when there are no active endpoints to log in. Used for KYC
+- **networks[x].enableDemoMode** - When set to true, will enable authorization using the guest key
+- **networks[x].disableSync** - Optional parameter that disables synchronization of the full nodes. Unsafe, use with caution
 
 Development server emits warnings and will report errors in readable format. You can hack around it, but it is suited only for development/testing. To use it in production environment you will need to build the project.
 

now.json

@@ -0,0 +1,17 @@
+{
+    "version": 2,
+    "routes": [
+        {
+            "src": "/(fonts|img|locales|styles|static)/(.*)",
+            "dest": "/$1/$2"
+        },
+        {
+            "src": "/(settings\\.json|asset-manifest\\.json|favicon\\.ico|manifest\\.json|service-worker\\.json)",
+            "dest": "/$1"
+        },
+        {
+            "src": "/(.*)",
+            "dest": "/index.html"
+        }
+    ]
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "apla-front",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "author": {
         "name": "apla-front"
     },
@@ -53,7 +53,6 @@
         "react-monaco-editor": "^0.25.1",
         "react-onclickoutside": "^6.6.0",
         "react-redux": "^5.0.6",
-        "react-redux-loading-bar": "^2.9.3",
         "react-router-dom": "^4.1.2",
         "react-router-transition": "^1.1.0",
         "react-sortable-tree": "^2.1.0",
@@ -64,6 +63,7 @@
         "redux-localstorage-debounce": "^0.1.0",
         "redux-localstorage-filter": "^0.1.1",
         "redux-observable": "^0.16.0",
+        "route-parser": "^0.0.5",
         "rxjs": "^5.4.3",
         "simple-line-icons": "^2.4.1",
         "sockjs-client": "^1.1.4",
@@ -88,7 +88,8 @@
         "start-js-desktop": "react-scripts-ts-electron start",
         "build-desktop": "npm run build-css && cross-env PUBLIC_URL=./ REACT_APP_VERSION=$npm_package_version react-scripts-ts-electron build",
         "package": "electron-builder --config electron-builder.json --dir",
-        "release": "electron-builder --config electron-builder.json"
+        "release": "electron-builder --config electron-builder.json",
+        "serve": "now ./build -A ../now.json -n apla"
     },
     "devDependencies": {
         "@types/bluebird": "^3.5.18",
@@ -128,6 +129,7 @@
         "@types/redux-localstorage": "^1.0.8",
         "@types/redux-localstorage-debounce": "^0.1.4",
         "@types/redux-localstorage-filter": "^0.1.4",
+        "@types/route-parser": "^0.1.3",
         "@types/rx": "^4.1.1",
         "@types/sockjs-client": "^1.0.32",
         "@types/url-join": "^0.8.2",
@@ -151,4 +153,4 @@
     "resolutions": {
         "**/event-stream": "^4.0.1"
     }
-}
+}

public/locales/en-US.json

@@ -79,11 +79,15 @@
     "confirm": "Confirm",
     "contract": "Smart contract",
     "contract.exec": "Execute contract",
+    "editor": "Editor",
+    "editor.app": "Application",
     "editor.block.create": "Create block",
     "editor.close.confirm": "Do you really want to close '{name}' without saving changes?",
     "editor.close.all": "Close all tabs",
+    "editor.close.all.confirm": "Do you really want to close all tabs without saving?",
     "editor.close.saved": "Close saved tabs",
     "editor.conditions.change": "Change conditions",
+    "editor.contract.create": "Create smart contract",
     "editor.create": "Create",
     "editor.execute": "Execute",
     "editor.menu": "Menu",
@@ -92,7 +96,7 @@
     "editor.page.name": "Name",
     "editor.param.add": "Add parameter",
     "editor.revert": "Revert",
-    "editor.revert.confirm": "Do you really want to discard all changes?",
+    "editor.revert.confirm": "Do you really want to discard all changes in '{name}'?",
     "editor.save": "Save",
     "editor.tool.developer": "Developer",
     "editor.tool.designer": "Designer",
@@ -114,14 +118,15 @@
     "general.download.asfile": "Download as file",
     "general.ecosystems": "Ecosystems",
     "general.error": "Error",
-    "general.error.notfound": "The page you are looking for does not exists",
+    "general.error.notfound": "The page you are looking for does not exist",
     "general.error.page": "The page you are looking for could not be processed",
     "general.error.timeout": "The page you are looking for is too heavy to be processed. Consider reducing number of database queries",
     "general.error.socket": "Notifications are unavailable",
     "general.error.socket.desc": "Failed to establish connection to the WebSocket server. Check your configuration",
     "general.home": "Home",
     "general.key.private": "Private key",
     "general.key.public": "Public key",
+    "general.main_menu": "Main menu",
     "general.network.id.short": "ID",
     "general.network.id.auto": "Automatic discovery",
     "general.network.add": "Add network",
@@ -143,7 +148,7 @@
     "general.network.error.E_SERVER_MISCONFIGURATION": "Server configuration error",
     "general.networks": "Networks",
     "general.notfound.page": "We couldn't find this page",
-    "general.notfound.page.notexists": "The page you are looking for does not exists",
+    "general.notfound.page.notexists": "The page you are looking for does not exist",
     "general.password": "Password",
     "general.password.repeat": "Repeat password",
     "general.password.old": "Old password",
@@ -180,18 +185,17 @@
     "map.editor": "Map editor",
     "map.meter.short": "m",
     "modal.authorization.title": "Authorization",
-    "modal.authorization.password": "Enter your password to execute transaction {contract}",
+    "modal.authorization.password": "Please enter your password to perform this action",
     "modal.confirm.title": "Confirmation",
     "modal.imageeditor.cancel": "Cancel",
     "modal.imageeditor.confirm": "Confirm",
     "modal.imageeditor.desc": "Prepare your image for uploading by selecting which part of the image you want to use",
     "modal.imageeditor.title": "Image editor",
-    "modal.locale.title": "Switch language",
     "modal.network.remove.confirmation": "Do you really want to delete network \"{name}\"?",
-    "navigation.back": "Back",
-    "navigation.forward": "Forward",
-    "navigation.home": "Home",
+    "navigation.default_page": "Main page",
+    "navigation.loaded_page": "Loaded page",
     "navigation.refresh": "Refresh",
+    "navigation.return": "Return",
     "notifications": "Notifications",
     "notification.ecosystem_invited": "Joined ecosystem {ecosystem}",
     "notification.tx_batch": "Batch processing completed",
@@ -224,7 +228,7 @@
     "tx.error.E_LIMITFORSIGN": "Execution failed",
     "tx.error.E_OFFLINE": "Service offline",
     "tx.error.E_SERVER": "Runtime error",
-    "tx.error.E_CONTRACT.desc": "Contract '{0}' does not exists",
+    "tx.error.E_CONTRACT.desc": "Contract '{0}' does not exist",
     "tx.error.E_DELETEDKEY.desc": "Your account has been removed",
     "tx.error.E_GUEST_VIOLATION.desc": "Transaction can't be executed using demo mode",
     "tx.error.E_INVALID_PASSWORD.desc": "Invalid password",

public/locales/ru-RU.json

@@ -79,11 +79,15 @@
     "confirm": "Подтвердить",
     "contract": "Смарт-контракт",
     "contract.exec": "Вызвать контракт",
+    "editor": "Редактор",
+    "editor.app": "Приложение",
     "editor.block.create": "Создать блок",
     "editor.close.confirm": "Вы действительно хотите закрыть '{name}' без сохранения изменений?",
     "editor.close.all": "Закрыть все вкладки",
+    "editor.close.all.confirm": "Вы действительно хотите закрыть все вкладки без сохранения изменений?",
     "editor.close.saved": "Закрыть сохранённые",
     "editor.conditions.change": "Права на изменение",
+    "editor.contract.create": "Создать смарт-контракт",
     "editor.create": "Создать",
     "editor.execute": "Вызвать",
     "editor.menu": "Меню",
@@ -92,7 +96,7 @@
     "editor.page.name": "Название",
     "editor.param.add": "Добавить параметр",
     "editor.revert": "Сброс",
-    "editor.revert.confirm": "Вы действительно хотите сбросить все изменения?",
+    "editor.revert.confirm": "Вы действительно хотите сбросить все изменения в '{name}'?",
     "editor.save": "Сохранить",
     "editor.tool.developer": "Разработка",
     "editor.tool.designer": "Дизайн",
@@ -122,6 +126,7 @@
     "general.home": "Домашняя страница",
     "general.key.private": "Закрытый ключ",
     "general.key.public": "Открытый ключ",
+    "general.main_menu": "Главное меню",
     "general.network.id.short": "ID",
     "general.network.id.auto": "Автоматическое обнаружение",
     "general.network.add": "Добавить сеть",
@@ -180,18 +185,17 @@
     "map.editor": "Редактирование карты",
     "map.meter.short": "м",
     "modal.authorization.title": "Авторизация",
-    "modal.authorization.password": "Введите пароль для вызова транзакции {contract}",
+    "modal.authorization.password": "Пожалуйста, введите пароль для выполнения данного действия",
     "modal.confirm.title": "Подтверждение",
     "modal.imageeditor.cancel": "Отмена",
     "modal.imageeditor.confirm": "Подтверждение",
     "modal.imageeditor.desc": "Произведите обработку вашего изображения для загрузки, выбрав необходимую область",
     "modal.imageeditor.title": "Редактирование изображения",
-    "modal.locale.title": "Выбор языка",
     "modal.network.remove.confirmation": "Вы действительно хотите удалить сеть \"{name}\"?",
-    "navigation.back": "Назад",
-    "navigation.forward": "Вперёд",
-    "navigation.home": "Домашняя страница",
+    "navigation.default_page": "Главная страница",
+    "navigation.loaded_page": "Загруженная страница",
     "navigation.refresh": "Обновить",
+    "navigation.return": "Назад",
     "notifications": "Уведомления",
     "notification.ecosystem_invited": "Добавлена экосистема {ecosystem}",
     "notification.tx_batch": "Пакетная обработка завершена",

src/app/components/Animation/Dropdown.tsx

@@ -3,12 +3,13 @@
  *  See LICENSE in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import * as React from 'react';
+import React from 'react';
 import Transition from 'react-transition-group/Transition';
 
-const animationDuration = 300;
+const animationDuration = 200;
 const containerAnimationDef = {
     defaultStyle: {
+        opacity: 1,
         position: 'absolute',
         overflow: 'hidden',
         zIndex: 600
@@ -42,22 +43,26 @@ const containerAnimationDef = {
 
 const animationDef = {
     defaultStyle: {
-        transition: `transform ${animationDuration}ms cubic-bezier(0,0.5,0,1)`,
-        transform: 'translateY(-100%)',
-        marginTop: '0'
+        transition: `transform ${animationDuration}ms cubic-bezier(0,0.5,0.5,1), opacity ${animationDuration}ms`,
+        transform: 'translateY(-25%)',
+        marginTop: '0',
+        opacity: 0
     },
     entering: {
-        transform: 'translateY(0)'
+        transform: 'translateY(0)',
+        opacity: 1
     },
     entered: {
-        transform: 'translateY(0)'
+        transform: 'translateY(0)',
+        opacity: 1
     },
 
     // We use negative margin to make children unclickable and not to break
     // animation that will be used later
     exited: {
-        transform: 'translateY(-100%)',
-        marginTop: '-100000px'
+        transform: 'translateY(-25%)',
+        marginTop: '-100000px',
+        opacity: 0
     }
 };
 

src/app/components/App.tsx

@@ -0,0 +1,110 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) EGAAS S.A. All rights reserved.
+ *  See LICENSE in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import React from 'react';
+import { INetworkEndpoint } from 'apla/auth';
+import { Route } from 'react-router-dom';
+import { FormattedMessage, IntlProvider } from 'react-intl';
+import { mainRoute } from 'lib/routing';
+import platform from 'lib/platform';
+import classnames from 'classnames';
+import baseTheme from 'components/Theme/baseTheme';
+
+import { AnimatedSwitch } from 'components/Animation';
+import themed from 'components/Theme/themed';
+import Auth from 'containers/Auth';
+import Error from 'containers/Auth/Error';
+import Splash from 'components/Splash';
+import ModalProvider from 'containers/Modal/ModalProvider';
+import NotificationsProvider from 'containers/Notifications/NotificationsProvider';
+import SecurityWarning from 'containers/SecurityWarning';
+import ThemeProvider from 'components/Theme/ThemeProvider';
+import Titlebar from 'components/Titlebar';
+import Main from './Main';
+
+interface AppProps {
+    network: INetworkEndpoint;
+    locale: string;
+    isSessionAcquired: boolean;
+    isAuthenticated: boolean;
+    isLoaded: boolean;
+    isFatal: boolean;
+    securityWarningClosed: boolean;
+    localeMessages: { [key: string]: string };
+    initialize?: () => void;
+}
+
+const ThemedApp = themed.div`
+    &.platform-windows {
+        border: solid 1px ${props => props.theme.windowBorder};
+    }
+`;
+
+const StyledTitlebar = themed.div`
+    background: ${props => props.theme.headerBackground};
+    height: ${props => props.theme.headerHeight}px;
+    line-height: ${props => props.theme.headerHeight}px;
+    font-size: 15px;
+    color: #fff;
+    text-align: center;
+`;
+
+class App extends React.Component<AppProps> {
+    componentDidMount() {
+        this.props.initialize();
+    }
+
+    render() {
+        const appTitle = `Apla ${this.props.network ? '(' + this.props.network.apiHost + ')' : ''}`;
+        const classes = classnames({
+            'wrapper': true,
+            'layout-fixed': true,
+            'platform-desktop': platform.select({ desktop: true }),
+            'platform-web': platform.select({ web: true }),
+            'platform-windows': platform.select({ win32: true })
+        });
+
+        return (
+            <IntlProvider key={this.props.locale} locale={this.props.locale} defaultLocale="en-US" messages={this.props.localeMessages}>
+                <ThemeProvider theme={baseTheme}>
+                    <ThemedApp className={classes}>
+                        <StyledTitlebar className="drag">
+                            <Titlebar>{appTitle}</Titlebar>
+                        </StyledTitlebar>
+
+                        <ModalProvider />
+                        <NotificationsProvider />
+
+                        {platform.select({
+                            web: !this.props.securityWarningClosed && (
+                                <SecurityWarning>
+                                    <FormattedMessage id="general.security.warning" defaultMessage="Please use desktop version or mobile application for better security" />
+                                </SecurityWarning>
+                            )
+                        })}
+
+                        <AnimatedSwitch animation={AnimatedSwitch.animations.fade()}>
+                            {this.props.isFatal && (
+                                <Route path="/" component={Error} />
+                            )}
+                            {!this.props.isLoaded && (
+                                <Route path="/" component={Splash} />
+                            )}
+                            {!this.props.isAuthenticated && (
+                                <Route path="/" component={Auth} />
+                            )}
+                            {!this.props.isSessionAcquired && (
+                                <Route path="/" component={Splash} />
+                            )}
+                            <Route path={mainRoute} render={route => <Main {...route.match.params} />} />
+                        </AnimatedSwitch>
+                    </ThemedApp>
+                </ThemeProvider>
+            </IntlProvider>
+        );
+    }
+}
+
+export default App;