Add usd valuation to balance

Author: Hossein-ab99

src/pages/ChainAndToken/ChainAndToken.js

@@ -5,11 +5,11 @@ import Tokens from "./Tokens/Tokens";
 
 const ChainAndToken = () => {
     return (
-        <div className={`col-12 d-flex flex-row`}>
-            <div className={`col-6 `}>
+        <div className={`d-flex flex-row`}  style={{width: "100%"}}>
+            <div className={``} style={{width: "48%"}}>
                 <Chains/>
             </div>
-            <div className={`col-6`}>
+            <div className={``}  style={{width: "48%"}}>
                 <Tokens/>
             </div>
 

src/pages/ChainAndToken/Chains/ChainBalance.js

@@ -37,9 +37,10 @@ const ChainBalance = ({chainId}) => {
             No Data!
         </div>
         else return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-3 ${classes.box} ${classes.striped}`}>
-            {data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4 font-size-sm-plus`} key={index}>
+            {data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-2 font-size-sm`} key={index}>
                 <span className={`col-8`}>{index + 1} <span className={`mx-3`}></span> {balance?.address}</span>
-                <span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{new BN(balance?.balance).toFormat()}</span></span>
+                <span className={`col-2 text-center`} style={{color: '#fff'}}>Balance: <span className={``}>{new BN(balance?.balance).toFormat()}</span></span>
+                <span className={`col-2 text-center`} style={{color: '#fff'}}> $ { new BN(balance?.balanceUsd).isZero() ? "---" : new BN(balance?.balanceUsd).toFormat()} </span>
             </div>)}
         </div>
     }

src/pages/ChainAndToken/Chains/Chains.js

@@ -42,7 +42,7 @@ const Chains = () => {
 
     return (
         <ScrollBar>
-            <div className={`flex-column col-12 justify-content-start px-5 py-5`}>
+            <div className={`flex-column col-12 justify-content-start px-3 py-4`}>
                 <p className={`font-size-md-plus mb-4`}>Chain List</p>
 
                 {

src/pages/ChainAndToken/Tokens/Tokens.js

@@ -35,7 +35,7 @@ const Tokens = () => {
 
     return (
         <ScrollBar>
-            <div className={`flex-column col-12 justify-content-start px-5 py-5`}>
+            <div className={`flex-column col-12 justify-content-start px-3 py-4`}>
                 <p className={`font-size-md-plus mb-4`}>Token List</p>
 
                 {

src/pages/ChainAndToken/Tokens/TokensBalance.js

@@ -30,9 +30,11 @@ const TokensBalance = ({chainId}) => {
             No Data!
         </div>
         else return <div className={`d-flex flex-column justify-content-center align-items-center col-12 mt-4 py-3 ${classes.box} ${classes.striped}`}>
-            {data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-4 font-size-sm-plus`} key={index}>
+            {data?.map((balance, index) => <div className={`d-flex flex-row col-12 py-4 px-2 font-size-sm`} key={index}>
                 <span className={`col-8`}>{index + 1} <span className={`mx-3`}></span> {balance?.address}</span>
-                <span className={`col-4 text-center`} style={{color: '#fff'}}>Balance: <span className={`font-size-md`}>{new BN(balance?.balance).toFormat()}</span></span>
+                <span className={`col-2 text-center`} style={{color: '#fff'}}>Balance: <span className={``}>{new BN(balance?.balance).toFormat()}</span></span>
+                <span className={`col-2 text-center`} style={{color: '#fff'}}> $ { new BN(balance?.balanceUsd).isZero() ? "---" : new BN(balance?.balanceUsd).toFormat()} </span>
+
             </div>)}
         </div>
 

src/pages/Dashboard/Chain/ChainCard.js

@@ -7,9 +7,10 @@ const ChainCard = ({data, index}) => {
     console.log("data in", data)
 
     return (
-        <div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4`}>
-            <span className={`col-6`}>{data?.chain}</span>
-            <span className={`col-6`}>{new BN(data?.balance).toFormat()}</span>
+        <div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4 font-size-sm`}>
+            <span className={`col-4`}>{data?.chain}</span>
+            <span className={`col-4`}>{new BN(data?.balance).toFormat()}</span>
+            <span className={`col-4`}> $ { new BN(data?.balanceUsd).isZero() ? "---" : new BN(data?.balanceUsd).toFormat()} </span>
         </div>
     );
 };

src/pages/Dashboard/Token/TokenCard.js

@@ -4,9 +4,10 @@ import {BN} from "../../../utils/utils";
 
 const TokenCard = ({data, index}) => {
     return (
-        <div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4`}>
-            <span className={`col-8`}>{data?.name} - {data?.symbol}</span>
-            <span className={`col-4`}>{new BN(data?.balance).toFormat()}</span>
+        <div key={index} className={`d-flex flex-row justify-content-between align-items-center py-3 px-4 font-size-sm`}>
+            <span className={`col-6`}>{data?.name} - {data?.symbol}</span>
+            <span className={`col-3`}>{new BN(data?.balance).toFormat()}</span>
+            <span className={`col-3`}>$ { new BN(data?.balanceUsd).isZero() ? "---" : new BN(data?.balanceUsd).toFormat()}</span>
         </div>
     );
 };