#298 show swap ui zero balance

closes #298
spartan-protocol · Nov 23, 2020 · b73878e · b73878e
1 parent 49d915a
commit b73878e
Showing 1 changed file with 51 additions and 47 deletions.
diff --git a/src/components/Sections/TradePaneBuy.js b/src/components/Sections/TradePaneBuy.js
@@ -55,53 +55,57 @@ export const TradePaneBuy = (props) => {
             // OUTPUT | {output}
             // INPUT | {input}
             */}
-            {props.tradeData.balance > 0 &&
-                <Row className='align-items-center'>
-                    <Col xs={4} className='py-1'>
-                        <h6 className='font-weight-light m-0'>{props.t("Rate")} <i className="bx bx-info-circle align-middle" id="tooltipBuyRate" role='button'/></h6>
-                        <UncontrolledTooltip placement="right" target="tooltipBuyRate">Estimated output rate (after fees and slippage)</UncontrolledTooltip>
-                    </Col>
-                    <Col xs={8} className='py-1'><h6 className="text-right font-weight-light m-0"> <i className="bx bx-plus-circle align-middle" id="outputToggler" role='button'/> {props.tradeData.estRate} SPARTA*</h6></Col>
-
-                    <Col xs={6}>
-                        <UncontrolledCollapse toggler="#outputToggler" className='py-1'>
-                            <h6 className='font-weight-light m-0'>{props.t("Rate Slip")} <i className="bx bx-info-circle align-middle" id="tooltipBuyRateSlip" role='button'/></h6>
-                            <UncontrolledTooltip placement="right" target="tooltipBuyRateSlip">Estimated rate slip; the difference between spot price and the rate you are getting after slippage & fees.</UncontrolledTooltip>
-                        </UncontrolledCollapse>
-                    </Col>
-                    <Col xs={6}>
-                        <UncontrolledCollapse toggler="#outputToggler" className='py-1'>
-                            <h6 className="text-right font-weight-light m-0">{`${((props.tradeData.actualSlip) * 100).toFixed(3)}%`}*</h6>
-                        </UncontrolledCollapse>
-                    </Col>
-
-
-                    <Col xs={4} className='py-1'>
-                        <h6 className='font-weight-light m-0'>{props.t("Fee")} <i className="bx bx-info-circle align-middle" id="tooltipBuyFee" role='button'/></h6>
-                        <UncontrolledTooltip placement="right" target="tooltipBuyFee">Estimated pool fee for the swap. This fee is awarded to liquidity providers' pool holdings to incentivize deeper pools over time.</UncontrolledTooltip>
-                    </Col>
-                    <Col xs={8} className='py-1'><h6 className="text-right font-weight-light m-0">{formatGranularUnits(convertFromWei(props.tradeData.fee))} {props.tradeData.outputSymbol}*</h6></Col>
-
-
-                    <Col xs={4} className='py-1'>
-                        <h6 className='font-weight-light m-0'>{props.t("Slip")} <i className="bx bx-info-circle align-middle" id="tooltipBuyPoolSlip" role='button'/></h6>
-                        <UncontrolledTooltip placement="right" target="tooltipBuyPoolSlip">Estimated pool price slip; the difference between asset's price in the pool before/after this swap.</UncontrolledTooltip>
-                    </Col>
-                    <Col xs={8} className='py-1'><h6 className="text-right font-weight-light m-0">{`${((props.tradeData.slip) * 100).toFixed(3)}%`}*</h6></Col>
-
-                    <Col xs={12} className='py-1'><hr className='m-0'/></Col>
-
-                    <Col xs={5} className='py-1'>
-                        <h6 className='m-0'>{props.t("Output")} <i className="bx bx-info-circle align-middle" id="tooltipBuyOutput" role='button'/></h6>
-                        <UncontrolledTooltip placement="right" target="tooltipBuyOutput">Estimated final output from this swap.</UncontrolledTooltip>
-                    </Col>
-                    <Col xs={7} className='py-1'><h5 className="text-right m-0 py-2">{formatAllUnits(convertFromWei(props.tradeData.output))} {props.tradeData.outputSymbol}*</h5></Col>
-
-                    <Col xs={12} className='py-1'><hr className='m-0'/></Col>
-
-                    <Col xs={12}><p className='text-right'>Estimated*</p></Col>
-                </Row>
-            }
+            <Row className='align-items-center'>
+            <Col xs={4} className='py-1'>
+                    <h6 className='font-weight-light m-0'>{props.t("Input")} <i className="bx bx-info-circle align-middle" id="tooltipBuyInput" role='button'/></h6>
+                    <UncontrolledTooltip placement="right" target="tooltipBuyInput">Estimated input amount</UncontrolledTooltip>
+                </Col>
+                <Col xs={8} className='py-1'><h6 className="text-right font-weight-light m-0">{formatAllUnits(convertFromWei(props.tradeData.input))} {props.tradeData.symbol}*</h6></Col>
+
+                <Col xs={4} className='py-1'>
+                    <h6 className='font-weight-light m-0'>{props.t("Rate")} <i className="bx bx-info-circle align-middle" id="tooltipBuyRate" role='button'/></h6>
+                    <UncontrolledTooltip placement="right" target="tooltipBuyRate">Estimated output rate (after fees and slippage)</UncontrolledTooltip>
+                </Col>
+                <Col xs={8} className='py-1'><h6 className="text-right font-weight-light m-0"> <i className="bx bx-plus-circle align-middle" id="outputToggler" role='button'/> {props.tradeData.estRate} SPARTA*</h6></Col>
+
+                <Col xs={6}>
+                    <UncontrolledCollapse toggler="#outputToggler" className='py-1'>
+                        <h6 className='font-weight-light m-0'>{props.t("Rate Slip")} <i className="bx bx-info-circle align-middle" id="tooltipBuyRateSlip" role='button'/></h6>
+                        <UncontrolledTooltip placement="right" target="tooltipBuyRateSlip">Estimated rate slip; the difference between spot price and the rate you are getting after slippage & fees.</UncontrolledTooltip>
+                    </UncontrolledCollapse>
+                </Col>
+                <Col xs={6}>
+                    <UncontrolledCollapse toggler="#outputToggler" className='py-1'>
+                        <h6 className="text-right font-weight-light m-0">{`${((props.tradeData.actualSlip) * 100).toFixed(3)}%`}*</h6>
+                    </UncontrolledCollapse>
+                </Col>
+
+
+                <Col xs={4} className='py-1'>
+                    <h6 className='font-weight-light m-0'>{props.t("Fee")} <i className="bx bx-info-circle align-middle" id="tooltipBuyFee" role='button'/></h6>
+                    <UncontrolledTooltip placement="right" target="tooltipBuyFee">Estimated pool fee for the swap. This fee is awarded to liquidity providers' pool holdings to incentivize deeper pools over time.</UncontrolledTooltip>
+                </Col>
+                <Col xs={8} className='py-1'><h6 className="text-right font-weight-light m-0">{formatGranularUnits(convertFromWei(props.tradeData.fee))} {props.tradeData.outputSymbol}*</h6></Col>
+
+
+                <Col xs={4} className='py-1'>
+                    <h6 className='font-weight-light m-0'>{props.t("Slip")} <i className="bx bx-info-circle align-middle" id="tooltipBuyPoolSlip" role='button'/></h6>
+                    <UncontrolledTooltip placement="right" target="tooltipBuyPoolSlip">Estimated pool price slip; the difference between asset's price in the pool before/after this swap.</UncontrolledTooltip>
+                </Col>
+                <Col xs={8} className='py-1'><h6 className="text-right font-weight-light m-0">{`${((props.tradeData.slip) * 100).toFixed(3)}%`}*</h6></Col>
+
+                <Col xs={12} className='py-1'><hr className='m-0'/></Col>
+
+                <Col xs={5} className='py-1'>
+                    <h6 className='m-0'>{props.t("Output")} <i className="bx bx-info-circle align-middle" id="tooltipBuyOutput" role='button'/></h6>
+                    <UncontrolledTooltip placement="right" target="tooltipBuyOutput">Estimated final output from this swap.</UncontrolledTooltip>
+                </Col>
+                <Col xs={7} className='py-1'><h5 className="text-right m-0 py-2">{formatAllUnits(convertFromWei(props.tradeData.output))} {props.tradeData.outputSymbol}*</h5></Col>
+
+                <Col xs={12} className='py-1'><hr className='m-0'/></Col>
+
+                <Col xs={12}><p className='text-right'>Estimated*</p></Col>
+            </Row>
 
             {props.tradeData.balance <= 0 && props.tradeData.symbol !== 'XXX' &&
                 <Col xs={12} className='py-1'><h6 className='text-center'>You have no {props.tradeData.symbol} in your wallet.</h6></Col>