From 9ef08920227f2b6e6c3628e8819e21ef4743afe3 Mon Sep 17 00:00:00 2001
From: Hossein <hossein13785ab@gmail.com>
Date: Wed, 31 Jan 2024 18:58:13 +0330
Subject: [PATCH] Add usd valuation to balance

---
 src/pages/ChainAndToken/ChainAndToken.js        | 6 +++---
 src/pages/ChainAndToken/Chains/ChainBalance.js  | 5 +++--
 src/pages/ChainAndToken/Chains/Chains.js        | 2 +-
 src/pages/ChainAndToken/Tokens/Tokens.js        | 2 +-
 src/pages/ChainAndToken/Tokens/TokensBalance.js | 6 ++++--
 src/pages/Dashboard/Chain/ChainCard.js          | 7 ++++---
 src/pages/Dashboard/Token/TokenCard.js          | 7 ++++---
 7 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/pages/ChainAndToken/ChainAndToken.js b/src/pages/ChainAndToken/ChainAndToken.js
index 9f5178c..e129ed8 100644
--- a/src/pages/ChainAndToken/ChainAndToken.js
+++ b/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>
 
diff --git a/src/pages/ChainAndToken/Chains/ChainBalance.js b/src/pages/ChainAndToken/Chains/ChainBalance.js
index eef76dc..f96a5ac 100644
--- a/src/pages/ChainAndToken/Chains/ChainBalance.js
+++ b/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>
     }
diff --git a/src/pages/ChainAndToken/Chains/Chains.js b/src/pages/ChainAndToken/Chains/Chains.js
index 113e2a4..f7f3fda 100644
--- a/src/pages/ChainAndToken/Chains/Chains.js
+++ b/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>
 
                 {
diff --git a/src/pages/ChainAndToken/Tokens/Tokens.js b/src/pages/ChainAndToken/Tokens/Tokens.js
index fb64afb..2391031 100644
--- a/src/pages/ChainAndToken/Tokens/Tokens.js
+++ b/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>
 
                 {
diff --git a/src/pages/ChainAndToken/Tokens/TokensBalance.js b/src/pages/ChainAndToken/Tokens/TokensBalance.js
index bf9cec6..a401fcc 100644
--- a/src/pages/ChainAndToken/Tokens/TokensBalance.js
+++ b/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>
 
diff --git a/src/pages/Dashboard/Chain/ChainCard.js b/src/pages/Dashboard/Chain/ChainCard.js
index 341d31c..590e3f4 100644
--- a/src/pages/Dashboard/Chain/ChainCard.js
+++ b/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>
     );
 };
diff --git a/src/pages/Dashboard/Token/TokenCard.js b/src/pages/Dashboard/Token/TokenCard.js
index a81f232..489dfa3 100644
--- a/src/pages/Dashboard/Token/TokenCard.js
+++ b/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>
     );
 };