Merge pull request #430 from golos-blockchain/beta

Beta

app/ResolveRoute.js

@@ -114,6 +114,9 @@ export default function resolveRoute(path)
     if (match) {
         return {page: 'UserProfile', params: match.slice(1)};
     }
+    if (path === '/convert') { 
+        return {page: 'ConvertAssetsLoader', params: []}
+    }
     match = path.match(routeRegex.PostNoCategory);
     if (match) {
         return {page: 'PostNoCategory', params: match.slice(1)};

app/RootRoute.js

@@ -67,6 +67,8 @@ export default {
             else cb(null, [require('@pages/SubmitPostServerRender')]);
         } else if (route.page === 'UserProfile') {
             cb(null, [require('@pages/UserProfile')]);
+        } else if (route.page === 'ConvertAssetsLoader') {
+            cb(null, [require('@pages/ConvertAssetsLoader')]);
         } else if (route.page === 'Market') {
             cb(null, [require('@pages/MarketLoader')]);
         } else if (route.page === 'Post') {

app/appUpdater.js

@@ -1,12 +1,14 @@
 import semver from 'semver'
 import tt from 'counterpart'
 
+import fetchWithTimeout from 'shared/fetchWithTimeout'
+
 export async function checkUpdates() {
     const url = new URL(
         '/blogs-' + ($STM_Config.platform === 'linux' ? 'linux' : 'win'),
         $STM_Config.app_updater.host
     ).toString()
-    let res = await fetch(url)
+    let res = await fetchWithTimeout(url, 3000)
     res = await res.text()
     const doc = document.createElement('html')
     doc.innerHTML = res

app/components/all.scss

@@ -31,7 +31,6 @@
 @import "./elements/ScrollButton";
 @import "./elements/SignupProgressBar";
 @import "./elements/TagList";
-@import "./elements/TickerPriceStat";
 @import "./elements/UserNames";
 @import "./elements/Userpic";
 @import "./elements/VerticalMenu";
@@ -46,6 +45,11 @@
 @import "./elements/common/HintIcon/HintIcon";
 @import "./elements/common/DialogManager/index";
 @import "./elements/common/TooltipManager/index";
+@import "./elements/market/CMCWidget";
+@import "./elements/market/ConvertAssetsBtn";
+@import "./elements/market/MarketPair";
+@import "./elements/market/OrderForm";
+@import "./elements/market/TickerPriceStat";
 @import "./elements/postEditor/MarkdownEditor/MarkdownEditor";
 @import "./elements/postEditor/MarkdownEditorToolbar/index";
 @import "./elements/postEditor/EditorSwitcher/EditorSwitcher";
@@ -63,6 +67,7 @@
 // modules
 @import "./modules/uia/AssetEditWithdrawal";
 @import "./modules/BottomPanel";
+@import "./modules/ConvertAssets";
 @import "./modules/Footer";
 @import "./modules/Header";
 @import "./modules/LoginForm";

app/components/elements/AssetBalance.jsx

@@ -1,4 +1,5 @@
-import tt from 'counterpart';
+import React from 'react'
+import tt from 'counterpart'
 
 const AssetBalance = ({onClick, balanceValue, title}) => {
     let balance = (title || tt('transfer_jsx.balance')) + ': ' + balanceValue;

app/components/elements/ConvertToSteem.jsx

@@ -210,7 +210,7 @@ export default connect(
         const balance = account.get('balance');
         const sbd_balance = account.get('sbd_balance');
         const cprops = state.global.get('cprops');
-        const max = Asset(from === DEBT_TICKER ? sbd_balance : balance).amountFloat;
+        const max = parseFloat(Asset(from === DEBT_TICKER ? sbd_balance : balance).amountFloat);
         return {
             ...ownProps,
             owner: username,

app/components/elements/DropdownMenu.scss

@@ -47,4 +47,9 @@
     bottom: 100%;
     top: auto;
   }
+
+  &.top-most > .VerticalMenu {
+    position: fixed;
+    top: auto;
+  }
 }

app/components/elements/PagedDropdownMenu.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual'
 import tt from 'counterpart';
 import DropdownMenu from 'app/components/elements/DropdownMenu';
 import LoadingIndicator from 'app/components/elements/LoadingIndicator';
@@ -18,28 +19,51 @@ export default class PagedDropdownMenu extends React.Component {
         el: PropTypes.string.isRequired,
         noArrow: PropTypes.bool,
 
+        page: PropTypes.number,
         perPage: PropTypes.number.isRequired,
-        onLoadMore: PropTypes.func.isRequired,
+        renderItem: PropTypes.func.isRequired,
+        onLoadMore: PropTypes.func,
     };
 
+    static defaultProps = {
+        page: 1
+    }
+
     constructor(props) {
         super(props);
         this.state = {
             items: [],
-            page: 0,
+            page: props.page,
             loading: false,
         };
     }
 
     componentDidMount() {
-        this.initItems(this.props.items);
+        const { items, page, } = this.props
+        this.initItems(this.sliceItems(items, page))
+        this.setState({ page })
     }
 
     componentDidUpdate(prevProps) {
-        const { items, } = this.props;
-        if (items && (!prevProps.items || items.length !== prevProps.items.length)) {
-            this.initItems(items);
+        const { items, page, } = this.props
+        if (items && (!prevProps.items || !isEqual(items, prevProps.items))) {
+            const sliced = this.sliceItems(items, 1)
+            this.initItems(sliced)
+            this.setState({ page: 1 })
+        } else if (page && prevProps.page !== page) {
+            this.setState({ page })
+        }
+    }
+
+    sliceItems = (items, page) => {
+        const { onLoadMore, perPage } = this.props
+        if (onLoadMore) {
+            return items
         }
+        const startIdx = perPage * (page - 1)
+        const endIdx = startIdx + perPage + 1
+        const sliced = items.slice(startIdx, endIdx)
+        return sliced
     }
 
     initItems = (items) => {
@@ -53,6 +77,16 @@ export default class PagedDropdownMenu extends React.Component {
     loadMore = async (newPage) => {
         const { items, page, } = this.state;
         const { onLoadMore, } = this.props;
+        if (!onLoadMore) {
+            setTimeout(async () => {
+                this.setState({
+                    page: newPage
+                }, () => {
+                    this.initItems(this.sliceItems(this.props.items, newPage))
+                })
+            }, 10);
+            return
+        }
         setTimeout(async () => {
             this.setState({
                 page: newPage,
@@ -74,7 +108,7 @@ export default class PagedDropdownMenu extends React.Component {
     };
 
     prevPage = () => {
-        if (this.state.page === 0) return;
+        if (this.state.page === 1) return;
         const { page, } = this.state;
         this.loadMore(page - 1);
     };
@@ -83,26 +117,30 @@ export default class PagedDropdownMenu extends React.Component {
         const { perPage, } = this.props;
         const { items, page, } = this.state;
         const hasMore = items.length > perPage;
-        if (page === 0 && !hasMore) {
+        if (page === 1 && !hasMore) {
             return null;
         }
+        const hasPrev = page > 1
         return {
             value: <span>
-              <span className='PagedDropdownMenu__paginator' onClick={this.prevPage}>
-                {page > 0 ? '< ' + tt('g.back') : ''}</span>
-              <span className='PagedDropdownMenu__paginator' onClick={hasMore ? this.nextPage : null}>
+              <span className={'PagedDropdownMenu__paginator' + (hasPrev ? '' : ' disabled')} onClick={this.prevPage}>
+                {hasPrev ? '< ' + tt('g.back') : ''}</span>
+              <span className={'PagedDropdownMenu__paginator' + (hasMore ? '' : ' disabled')} onClick={hasMore ? this.nextPage : null}>
                 {hasMore ? tt('g.more_list') + ' >' : ''}
                 </span></span>,
         };
     };
 
     render() {
-        const { el, selected, children, className, title, href, noArrow, perPage, } = this.props;
+        const { el, selected, children, className, title, href, noArrow, perPage, renderItem, } = this.props
         const { items, loading, } = this.state;
 
         let itemsWithPaginator = [];
         if (!loading) {
-            itemsWithPaginator = [...items];
+            for (let i = 0; i < items.length; ++i) {
+                const rendered = renderItem(items[i])
+                itemsWithPaginator.push(rendered)
+            }
             if (items.length > perPage && hideLastItem) {
                 itemsWithPaginator.pop();
             }

app/components/elements/PagedDropdownMenu.scss

@@ -9,4 +9,8 @@
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     width: 50%;
+
+    &.disabled {
+        cursor: auto;
+    }
 }

app/components/elements/market/CMCValue.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import tt from 'counterpart'
+
+import { apidexGetPrices } from 'app/utils/ApidexApiClient'
+
+class CMCValue extends React.Component {
+    state = {}
+
+    componentDidMount() {
+        this.updateCMCPrice(this.props.buyAmount)
+    }
+
+    componentDidUpdate(prevProps) {
+        const { buyAmount } = this.props
+        if (buyAmount && (!prevProps.buyAmount ||
+            buyAmount.ne(prevProps.buyAmount) ||
+                buyAmount.symbol !== prevProps.buyAmount.symbol)) {
+            this.updateCMCPrice(buyAmount)
+        }
+    }
+
+    updateCMCPrice = async (buyAmount) => {
+        if (!buyAmount) {
+            return
+        }
+        const { price_usd, price_rub, page_url } = await apidexGetPrices(buyAmount.symbol)
+        const calc = (price) => {
+            if (price === null || price === undefined) return null
+            return parseFloat(buyAmount.amountFloat) * price
+        }
+        const cmcPrice = {
+            price_usd: calc(price_usd),
+            price_rub: calc(price_rub),
+            page_url
+        }
+        this.setState({
+            cmcPrice
+        })
+    }
+
+    render() {
+        const { renderer, compact } = this.props
+        let cmc = null
+        const { cmcPrice } = this.state
+        if (cmcPrice) {
+            const formatVal = (val, fmt) => {
+                if (val && val.toFixed) {
+                    if (val > 1000000) return fmt((val / 1000000).toFixed(3) + 'M')
+                    if (compact && val > 100) return fmt(Math.round(val))
+                    return fmt(val.toFixed(2))
+                }
+                return null
+            }
+            let mainVal, altVal
+            const price_usd = formatVal(cmcPrice.price_usd, v => `$${v}`)
+            const price_rub = formatVal(cmcPrice.price_rub, v => `${v} RUB`)
+            if (tt.getLocale() === 'ru') {
+                mainVal = price_rub || price_usd
+                altVal = price_usd || price_rub
+            } else {
+                mainVal = price_usd || price_rub
+                altVal = price_rub || price_usd
+            }
+            if (mainVal) {
+                cmc = <b title={'~' + altVal}>{'~' + mainVal}</b>
+                if (cmcPrice.page_url) {
+                    cmc = <a href={cmcPrice.page_url} target='_blank' rel='noopener noreferrer'>{cmc}</a>
+                }
+            }
+        }
+        return (cmc && renderer) ? renderer(cmc) : cmc
+    }
+}
+
+export default CMCValue

app/components/elements/market/CMCWidget.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+
+import Icon from 'app/components/elements/Icon'
+import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+
+
+import { apidexGetPrices } from 'app/utils/ApidexApiClient'
+
+class CMCWidget extends React.Component {
+    state = {
+        loaded: false
+    }
+
+    getPriceChange = (res) => {
+        let price_change = null
+        try {
+            price_change = res.data.quote.RUB.percent_change_24h
+        } catch (err) {}
+        if (price_change) {
+            price_change = parseFloat(price_change)
+            if (isNaN(price_change)) {
+                price_change = null
+            }
+        }
+        return price_change
+    }
+
+    async componentDidMount() {
+        let res = await apidexGetPrices('GOLOS')
+        if (res.price_rub) {
+            const price_change = this.getPriceChange(res)
+            this.setState({
+                loaded: true,
+                price_usd: res.price_usd,
+                price_rub: res.price_rub,
+                page_url: res.page_url,
+                price_change,
+            })
+        } else {
+            this.setState({
+                failed: true
+            })
+        }
+    }
+
+    render() {
+        const { loaded, failed, price_usd, price_rub, page_url, price_change } = this.state
+        if (!loaded) {
+            return (<div class="CMCWidget">
+                    <div className="CMCWidget__inner">
+                        <div className='CMCWidget__inner2' style={{ 'justify-content': 'center' }} >
+                            {!failed ?
+                                <LoadingIndicator type='circle' size='25px' /> :
+                                null}
+                        </div>
+                    </div>
+                </div>)
+        }
+        return (<div class="CMCWidget">
+                <div className="CMCWidget__inner">
+                    <div className='CMCWidget__inner2'>
+                        <div className="CMCWidget__icon-parent">
+                            <Icon name='golos' size='2x' />
+                        </div>
+                        <div className="CMCWidget__main-parent">
+                            <span style={{ fontSize: '18px' }}>
+                                <a href={page_url} target="_blank" className="CMCWidget__link">Golos Blockchain </a>
+                            </span><br/>
+                            <span style={{ fontSize: '16px' }}>
+                                <span className="CMCWidget__main-val">{price_rub ? price_rub.toFixed(6) : null}</span>                
+                                <span className="CMCWidget__main-cur">&nbsp;RUB</span>
+                                <span className="CMCWidget__sub-parent">
+                                    {(price_change && price_change.toFixed) ? <span style={{ color: price_change < 0 ? '#d94040' : '#009600' }}>
+                                            <br />({price_change.toFixed(2)}%)
+                                        </span> : null}
+                                    <br />
+                                    <span className="CMCWidget__sub">{price_usd ? price_usd.toFixed(6) + ' USD' : null}</span>
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>)
+    }
+}
+
+export default CMCWidget