Market - Smart exchange banner

golos-blockchain · Jul 29, 2024 · 8553fc3 · 8553fc3
1 parent e7d4f29
commit 8553fc3
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 4 deletions.
diff --git a/app/components/elements/market/OrderForm.jsx b/app/components/elements/market/OrderForm.jsx
@@ -7,8 +7,10 @@ import { Asset, AssetEditor } from 'golos-lib-js/lib/utils'
 import transaction from 'app/redux/Transaction';
 import CMCValue from 'app/components/elements/market/CMCValue'
 import MarketInput from 'app/components/elements/market/MarketInput'
-import { DEFAULT_EXPIRE, generateOrderID, roundUp, roundDown, float2str } from 'app/utils/market/utils'
+import { ExchangeTypes } from 'shared/getExchangeData'
+import { getExchange } from 'app/utils/market/exchange'
 import FloatEditor from 'app/utils/market/FloatEditor'
+import { DEFAULT_EXPIRE, generateOrderID, roundUp, roundDown, float2str } from 'app/utils/market/utils'
 
 class OrderForm extends React.Component {
     static propTypes = {
@@ -71,6 +73,7 @@ class OrderForm extends React.Component {
                 total: AssetEditor(total)
             }, () => {
                 this.validate()
+                this.checkMultiStep()
             })
         }
     }
@@ -86,6 +89,7 @@ class OrderForm extends React.Component {
                 total: AssetEditor(total)
             }, () => {
                 this.validate()
+                this.checkMultiStep()
             })
         }
     }
@@ -117,6 +121,7 @@ class OrderForm extends React.Component {
                 price: this.state.price.withVirtChange(res.price)
             }, () => {
                 this.validate()
+                this.checkMultiStep()
             })
         }
     }
@@ -129,6 +134,7 @@ class OrderForm extends React.Component {
             total: AssetEditor(total)
         }, () => {
             this.validate()
+            this.checkMultiStep()
         })
     }
 
@@ -175,6 +181,7 @@ class OrderForm extends React.Component {
             price: price ? this.state.price.withVirtChange(price) : this.state.price
         }, () => {
             this.validate()
+            this.checkMultiStep()
         })
     }
 
@@ -207,6 +214,29 @@ class OrderForm extends React.Component {
         })
     }
 
+    checkMultiStep = () => {
+        const { isSell, onMultiBetter } = this.props
+        if (!onMultiBetter) return
+
+        const { amount, total } = this.state
+        const sellAmount = (isSell ? amount : total).asset.clone()
+        const buyAmount = (isSell ? total : amount).asset.clone()
+        buyAmount.amount = 0
+
+        getExchange(sellAmount, buyAmount,
+            null, // keep it null: it used only if not isSell
+            (data) => {
+                const { bestType, altBanner } = data
+                if (bestType === ExchangeTypes.multi) {
+                    if (altBanner && altBanner.chain) {
+                        onMultiBetter(altBanner.chain.res, sellAmount)
+                        return
+                    }
+                }
+                onMultiBetter(null)
+        })
+    }
+
     percentDiff = (userPrice) => {
         let bestPrice = parseFloat(this.props.bestPrice)
         let up = userPrice

diff --git a/app/components/modules/ConvertAssets.jsx b/app/components/modules/ConvertAssets.jsx
@@ -92,6 +92,12 @@ class ConvertAssets extends React.Component {
         const myBalance = await this.getBalance(sym1, asset1)
 
         let sellAmount = myBalance.clone()
+        if (this.props.sellAmount) {
+            sellAmount = Asset(this.props.sellAmount)
+            this.setState({
+                exType: ExchangeTypes.multi
+            })
+        }
 
         const { exType } = this.state
         let fee
@@ -700,6 +706,7 @@ export default connect(
 
         return {
             ...ownProps,
+            sellAmount: defaults.sellAmount,
             sellSym: defaults.sellSym || routeParams.sym1 || undefined,
             buySym: defaults.buySym || routeParams.sym2 || undefined,
             direction: defaults.direction || undefined,

diff --git a/app/components/modules/uia/AssetRules.jsx b/app/components/modules/uia/AssetRules.jsx
@@ -225,7 +225,7 @@ class AssetRules extends Component {
             </span> 
             <CopyToClipboard text={addr} onCopy={() => this.setState({copied_addr: true})}>
                 <span style={{cursor: 'pointer', paddingLeft: '5px'}}>
-                    <Icon name="copy" size="2x" /> {this.state.copied_addr ? <Icon name="copy_ok" /> : null}
+                    <Icon name="copy" size="2x" /> {this.state.copied_addr ? <span style={{ marginRight: '0.4rem' }}><Icon name="copy_ok" /></span> : null}
                 </span>
             </CopyToClipboard>
             <div style={{display: "inline-block", paddingTop: 2, paddingRight: 5, cursor: "pointer"}} title='QR' onClick={e => this.showQrTo(e, addr)}>

diff --git a/app/components/pages/Market.jsx b/app/components/pages/Market.jsx
@@ -5,8 +5,10 @@ import { connect } from 'react-redux';
 import { Link, browserHistory } from 'react-router';
 import tt from 'counterpart';
 import {api, broadcast} from 'golos-lib-js'
+import { Asset } from 'golos-lib-js/lib/utils'
 
 import transaction from 'app/redux/Transaction';
+import user from 'app/redux/User'
 import {longToAsset} from 'app/utils/ParsersAndFormatters';
 import TransactionError from 'app/components/elements/TransactionError';
 import Icon from 'app/components/elements/Icon';
@@ -132,6 +134,10 @@ class Market extends Component {
             return true;
         }
 
+        if (nextState.resMulti !== state.resMulti) {
+            return true
+        }
+
         return false;
     };
 
@@ -175,6 +181,47 @@ class Market extends Component {
         this.sellForm.current.setPrice(p)
     };
 
+    onMultiBetter = (resMulti, multiSell) => {
+        console.log('onMultiBetter', resMulti)
+        this.setState({
+            resMulti,
+            multiSell,
+        })
+    }
+
+    renderMultiBetter = () => {
+        const { resMulti, multiSell } = this.state
+        if (!resMulti) {
+            return null
+        }
+        const tryMulti = (e) => {
+            e.preventDefault()
+
+            let {sym1, sym2} = this.props.routeParams
+            sym1 = sym1.toUpperCase()
+            sym2 = sym2.toUpperCase()
+
+            const receive = Asset(resMulti)
+            this.props.showConvertAssets({
+                direction: 'sell',
+                sellSym: (sym1 === receive.symbol ? sym2 : sym1),
+                sellAmount: multiSell.toString(),
+                buySym: receive.symbol,
+            })
+        }
+        return <div className='row' style={{ marginTop: '0.5rem', marginBottom: '0.75rem' }}>
+            <div className='column small-12'>
+                <center>
+                    {tt('market_multistep.using_multi_you_can_receive')}
+                    {Asset(resMulti).floatString}
+                    {'.'}
+                    &nbsp;
+                    <a href='#' onClick={tryMulti}>{tt('market_multistep.try_multi')}</a>
+                </center>
+            </div>
+        </div>
+    }
+
     render() {
         let {sym1, sym2} = this.props.routeParams
         if (!sym1 || !sym2) {
@@ -508,7 +555,8 @@ class Market extends Component {
                             onCreate={msg => {
                                 this.props.notify(msg);
                                 this.props.reload(user, this.props.location.pathname);
-                            }} />
+                            }}
+                            onMultiBetter={this.onMultiBetter} />
                     </div>
 
                     <div className="small-12 medium-6 columns">
@@ -522,7 +570,8 @@ class Market extends Component {
                             onCreate={msg => {
                                 this.props.notify(msg);
                                 this.props.reload(user, this.props.location.pathname);
-                            }} />
+                            }}
+                            onMultiBetter={this.onMultiBetter} />
                     </div>
                 </div>
 
@@ -533,6 +582,8 @@ class Market extends Component {
                     </div>
                 </div> */}
 
+                {this.renderMultiBetter()}
+
                 <div className="row show-for-medium">
                     <div className="small-6 columns">
                         <h4>{tt('market_jsx.buy_orders')}</h4>
@@ -709,5 +760,9 @@ export default connect(
                 })
             );
         },
+        showConvertAssets: (opts) => {
+            dispatch(user.actions.setConvertAssetsDefaults(opts))
+            dispatch(user.actions.showConvertAssets())
+        },
     })
 )(Market);
diff --git a/app/locales/en.json b/app/locales/en.json
@@ -539,6 +539,10 @@
     "estimated_author_rewards_last_week": "Estimated author rewards last week",
     "author_rewards_history": "Author Rewards History"
   },
+  "market_multistep": {
+    "using_multi_you_can_receive": "Using \"Smart Exchange\" you can receive ",
+    "try_multi": "Try it >"
+  },
   "quickbuy_jsx": {
     "buy_SYM_with": "Buy %(SYM)s tokens",
     "with_what": "Method:",

diff --git a/app/locales/ru-RU.json b/app/locales/ru-RU.json
@@ -651,6 +651,10 @@
     "sale_agreement": "Договор купли-продажи",
     "telegram_support": "%(APP_NAME_UP)s Техподдержка"
   },
+  "market_multistep": {
+    "using_multi_you_can_receive": "С помощью функции \"Умного обмена\" вы можете получить ",
+    "try_multi": "Попробовать >"
+  },
   "quickbuy_jsx": {
     "buy_SYM_with": "Покупка токенов %(SYM)s за ",
     "with_what": "Способ покупки:",