Merge pull request #315 from spartan-protocol/#249-rebuild-Add-Liq-UI

#249 rebuild add liq ui
spartan-protocol · Nov 29, 2020 · 7822ad2 · 7822ad2
2 parents 0d6002c + ae22e95
commit 7822ad2
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 295 deletions.
diff --git a/src/components/Sections/InputPaneJoin.js b/src/components/Sections/InputPaneJoin.js
@@ -1,4 +1,3 @@
-import {convertFromWei, formatAllUnits} from "../../utils";
 import React from "react";
 import {PercentSlider} from "../common";
 
@@ -14,62 +13,11 @@ import {
     InputGroupAddon
 } from "reactstrap";
 import { withRouter } from "react-router-dom";
-import {TokenIcon} from "../Common/TokenIcon";
-import {SPARTA_ADDR} from "../../client/web3";
 
 export const InputPaneJoin = (props) => {
 
     return (
         <div>
-            <div>
-                <br/>
-                <Row>
-                    <Col xs="12" md="6">
-                        <div className="mb-3">
-                            <label className="card-radio-label mb-2">
-                                <input type="radio" name="currency" id="buycurrencyoption2" className="card-radio-input"/>
-                                <div className="card-radio">
-                                    <Row>
-                                        <Col md={3}>
-                                            <TokenIcon address={props.address}/>
-                                            <span>  {props.paneData?.symbol}</span></Col>
-                                        <div className="ml-5">
-                                            <Col md={4}>
-                                                <p className="text-muted mb-1"><i className="bx bx-wallet mr-1"/>Available:</p>
-                                                <h5 className="font-size-16">{formatAllUnits(convertFromWei(props.paneData?.balance))}</h5>
-                                            </Col>
-                                        </div>
-                                    </Row>
-                                </div>
-                            </label>
-                        </div>
-                    </Col>
-                    <Col xs="12" md="6">
-                        <div className="mb-3">
-                            <label className="card-radio-label mb-2">
-                                <input type="radio" name="currency"
-                                       id="buycurrencyoption2"
-                                       className="card-radio-input"/>
-
-                                <div className="card-radio">
-                                    <Row>
-                                        <Col md={3}>
-                                            <TokenIcon address={SPARTA_ADDR}/>
-                                            <span>  SPARTA</span></Col>
-                                        <div className="ml-5">
-                                            <Col md={4}>
-                                                <p className="text-muted mb-1"><i className="bx bx-wallet mr-1"/>Available:</p>
-                                                <h5 className="font-size-16">{formatAllUnits(convertFromWei(props.paneData?.baseBalance))}</h5>
-                                            </Col>
-                                        </div>
-                                    </Row>
-                                </div>
-                            </label>
-                        </div>
-                    </Col>
-                </Row>
-            </div>
-            <br/>
             <FormGroup>
                 <Row>
                     <Col sm="12">
@@ -90,11 +38,9 @@ export const InputPaneJoin = (props) => {
                     </Col>
                 </Row>
             </FormGroup>
-            <br/>
             <div className="text-center">
                 <PercentSlider changeAmount={props.changeAmount} name={props.name} />
             </div>
-            <br/>
         </div>
     )
 };

diff --git a/src/components/common.js b/src/components/common.js
@@ -222,18 +222,18 @@ export const PercentSlider = (props) => {
     return (
         <>
             <Row>
-                <Col xs='2'>
-                    <i className='bx bx-minus-circle bx-sm align-middle text-success' role='button' onClick={()=>{
+                <Col xs='2' className='p-0'>
+                    <i className='bx bx-minus-circle bx-sm align-middle text-success float-right' role='button' onClick={()=>{
                         clearManualInput();
                         decrSlider();
                         change();   
                     }} />
                 </Col>
                 <Col xs='8'>
-                    <input type='range' min='0' max='100' step='0.5' defaultValue='0' className='slider align-middle w-100' id={'percentSlider-' + props.name} onFocus={clearManualInput} onInputCapture={change}/>
+                    <input type='range' min='0' max='100' step='0.5' defaultValue='0' className='slider align-middle w-100' id={'percentSlider-' + props.name} onFocus={clearManualInput} onTouchStart={clearManualInput} onInputCapture={change} />
                 </Col>
-                <Col xs='2'>
-                    <i className='bx bx-plus-circle bx-sm align-middle text-success' role='button' onClick={()=>{
+                <Col xs='2' className='p-0'>
+                    <i className='bx bx-plus-circle bx-sm align-middle text-success float-left' role='button' onClick={()=>{
                         clearManualInput();
                         incrSlider();
                         change();