Percent volume

iconation · Jun 20, 2020 · 7ace4bc · 7ace4bc
1 parent 4a843b1
commit 7ace4bc
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 11 deletions.
diff --git a/src/MarketPair.css b/src/MarketPair.css
@@ -152,6 +152,7 @@
     flex-direction: column-reverse;
     min-height: 44%;
     max-height: 44%;
+    font-weight: 500;
 }
 
 #market-pair-sellers-entries {
@@ -165,12 +166,21 @@
     overflow-x: hidden;
     min-height: 30%;
     max-height: 44%;
+    font-weight: 500;
 }
 
 .market-pair-tr-clickeable {
     cursor: pointer;
 }
 
+#market-pair-sellers-entries .market-pair-tr-clickeable:hover {
+    background: #ec4b7055 !important;
+}
+
+#market-pair-buyers-entries .market-pair-tr-clickeable:hover {
+    background: #74aa1755 !important;
+}
+
 #seller-anchor {
     overflow-anchor: auto;
     height: 1px;
@@ -315,4 +325,4 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-}
+}
diff --git a/src/MarketPair.js b/src/MarketPair.js
@@ -48,6 +48,22 @@ const MarketPair = ({ match, wallet }) => {
 
     useEffect(() => {
 
+        const percentVolumeSwaps = (swaps) => {
+            var makerAmountSum = IconConverter.toBigNumber(0)
+            var takerAmountSum = IconConverter.toBigNumber(0)
+
+            swaps.forEach(swap => {
+                makerAmountSum = makerAmountSum.plus(IconConverter.toBigNumber(swap['maker']['amount']))
+                takerAmountSum = takerAmountSum.plus(IconConverter.toBigNumber(swap['taker']['amount']))
+            })
+
+            // Determine the volume percent
+            swaps.forEach(swap => {
+                swap['maker']['volume_percent'] = parseFloat(IconConverter.toBigNumber(swap['maker']['amount']).dividedBy(makerAmountSum)) * 100
+                swap['taker']['volume_percent'] = parseFloat(IconConverter.toBigNumber(swap['taker']['amount']).dividedBy(takerAmountSum)) * 100
+            })
+        }
+
         const groupSwaps = (swaps, sellSide) => {
             if (swaps.length === 0) return swaps
 
@@ -95,7 +111,7 @@ const MarketPair = ({ match, wallet }) => {
                 api.getDecimals(pairs[1]),
                 api.tokenSymbol(pairs[0]),
                 api.tokenSymbol(pairs[1]),
-                api.getManyMarketFilledSwaps(pairName, 0, 1300)
+                api.getManyMarketFilledSwaps(pairName, 0, 1500)
             ]
 
             return Promise.all(promises).then(async market => {
@@ -122,8 +138,14 @@ const MarketPair = ({ match, wallet }) => {
                 // Check if inverted view
                 if (market.swaps[0].length !== 0) {
                     if (market.swaps[0][0].maker.contract === pairs[1]) {
-                        setBuyers(groupSwaps(market.swaps[0], false))
-                        setSellers(groupSwaps(market.swaps[1], true))
+                        const buyersGroup = groupSwaps(market.swaps[0], false)
+                        const sellersGroup = groupSwaps(market.swaps[1], true)
+                        setBuyers(buyersGroup)
+                        setSellers(sellersGroup)
+
+                        percentVolumeSwaps(buyersGroup)
+                        percentVolumeSwaps(sellersGroup)
+
                         setIsInverted(false)
                     } else {
                         // inverted
@@ -321,8 +343,12 @@ const MarketPair = ({ match, wallet }) => {
                         <div id="market-pair-left">
                             <table id="market-pair-sellers" className="market-pair-table">
                                 <tbody id="market-pair-sellers-entries">
-                                    {sellers && sellers.map((swap, index) => (
-                                        <tr className="market-pair-tr-clickeable" onClick={() => { clickOnBookOrder(swap, index, sellers, true) }} key={swap['id']}>
+                                    {sellers && sellers.map((swap, index) => console.log(swap['maker']['volume_percent']) || (
+                                        <tr
+                                            style={{ background: `linear-gradient(to left, #ec4b7033 ${swap['maker']['volume_percent'] * 10}%, #ffffff00 0%)` }}
+                                            className="market-pair-tr-percent-volume market-pair-tr-clickeable"
+                                            onClick={() => { clickOnBookOrder(swap, index, sellers, true) }}
+                                            key={swap['id']}>
                                             <td className={"market-pair-left-status tooltip"}>{isUserSwap(swap) && <>
                                                 <span className="market-pair-yourswap market-pair-yourswap-seller">⮞</span>
                                                 <span className="tooltiptext">You created this swap</span>
@@ -364,9 +390,12 @@ const MarketPair = ({ match, wallet }) => {
                             </table>
 
                             <table id="market-pair-buyers" className="market-pair-table">
-                                <tbody>
+                                <tbody id="market-pair-buyers-entries">
                                     {buyers && buyers.map((swap, index) => (
-                                        <tr className="market-pair-tr-clickeable" onClick={() => { clickOnBookOrder(swap, index, buyers, false) }} key={swap['id']}>
+                                        <tr style={{ background: `linear-gradient(to left, #74aa1733 ${swap['taker']['volume_percent'] * 10}%, #ffffff00 0%)` }}
+                                            className="market-pair-tr-clickeable"
+                                            onClick={() => { clickOnBookOrder(swap, index, buyers, false) }}
+                                            key={swap['id']}>
                                             <td className={"market-pair-left-status tooltip"}>{isUserSwap(swap) && <>
                                                 <span className="market-pair-yourswap market-pair-yourswap-buyer">⮞</span>
                                                 <span className="tooltiptext tooltiptext-bottom">You created this swap</span>

diff --git a/src/Table.css b/src/Table.css
@@ -33,8 +33,8 @@ table a:active,
 }
 table {
     color:#666;
-    font-size:12px;
     background:#eaebec;
+    font-size:12px;
     border-collapse: collapse;
 
     -moz-border-radius:3px;
@@ -66,9 +66,13 @@ table tr {
 table td:first-child {
     border-left:0;
 }
+
+table tbody {
+    background:#fafafa;
+}
+
 table td {
     text-align:center;
-    background:#fafafa;
 }
 table tr.even td {
     background:#161616;
@@ -86,7 +90,7 @@ table tr:last-child td:last-child {
     -webkit-border-bottom-right-radius:3px;
     border-bottom-right-radius:3px;
 }
-table tr:hover td {
+table tr:hover {
     background:#f2f2f2;
     background:-webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
     background:-moz-linear-gradient(top, #f2f2f2, #f0f0f0);