Merge pull request #148 from rayanfer32/feature/update-trust-info

✨ Show trust score and stake rate instead of pending and unconfirmed
rayanfer32 · Apr 2, 2022 · a63c944 · a63c944
2 parents 56ffa71 + 66e0391
commit a63c944
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 16 deletions.
diff --git a/src/components/UserAccount/AccountInfo/AccountInfo.jsx b/src/components/UserAccount/AccountInfo/AccountInfo.jsx
@@ -1,9 +1,13 @@
 import styles from './AccountInfo.module.scss';
 import { NE_SmallCard as SmallCard } from 'components/atoms/NE_Card';
 import { BsBank, BsFillClockFill } from 'react-icons/bs';
-import { FaUserClock } from 'react-icons/fa';
+import { FaHandshake, FaUserClock } from 'react-icons/fa';
+import { HiChartBar } from 'react-icons/hi';
+import { intlNum } from 'utils';
 
 export function AccountInfo({ data }) {
+  const isTrust = data?.rate === null ? false : true;
+
   return (
     <>
       <section className={styles.cardsContainer}>
@@ -20,20 +24,40 @@ export function AccountInfo({ data }) {
           unit="NXS"
           icon={<BsBank />}
         />
-        <SmallCard
-          label="Pending"
-          sublabel=""
-          value={new Intl.NumberFormat().format(data?.pending || 0)}
-          unit="NXS"
-          icon={<BsFillClockFill />}
-        />
-        <SmallCard
-          label="Unconfirmed"
-          sublabel=""
-          value={data?.unconfirmed || 0}
-          unit="NXS"
-          icon={<FaUserClock />}
-        />
+        {isTrust ? (
+          <SmallCard
+            label="Stake Rate"
+            sublabel=""
+            value={data.rate || 0}
+            unit="%"
+            icon={<HiChartBar />}
+          />
+        ) : (
+          <SmallCard
+            label="Pending"
+            sublabel=""
+            value={new Intl.NumberFormat().format(data?.pending || 0)}
+            unit="NXS"
+            icon={<BsFillClockFill />}
+          />
+        )}
+        {isTrust ? (
+          <SmallCard
+            label="Trust Score"
+            sublabel=""
+            value={data?.trust || 0}
+            unit="+"
+            icon={<FaHandshake />}
+          />
+        ) : (
+          <SmallCard
+            label="Unconfirmed"
+            sublabel=""
+            value={data?.unconfirmed || 0}
+            unit="NXS"
+            icon={<FaUserClock />}
+          />
+        )}
       </section>
     </>
   );

diff --git a/src/components/atoms/NE_Card/NE_SmallCard/SmallCard.module.scss b/src/components/atoms/NE_Card/NE_SmallCard/SmallCard.module.scss
@@ -12,7 +12,6 @@
     justify-content: space-between;
     align-items: center;
     overflow: hidden;
-    transition: all 0.2s ease;
   }
   &-body {
     display: flex;