Merge pull request polkadot-cloud#44 from paritytech/hamidra/balanceG…

…raph change balance graph to show staked/Free
Curu24 · May 18, 2022 · ef6da04 · ef6da04
2 parents d9f0960 + 10f4e99
commit ef6da04
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 22 deletions.
diff --git a/src/contexts/Balances/defaults.ts b/src/contexts/Balances/defaults.ts
@@ -24,6 +24,7 @@ export const nominations = {
 }
 
 export const bondOptions = {
+  freeToStake: 0,
   freeToBond: 0,
   freeToUnbond: 0,
   totalUnlocking: 0,

diff --git a/src/contexts/Balances/index.tsx b/src/contexts/Balances/index.tsx
@@ -174,7 +174,7 @@ export const BalancesProvider = (props: any) => {
   // get active account balances
   const getBalances = async () => {
     const unsubs = await Promise.all(
-      accounts.map((a: any) => subscribeToBalances(a.address)),
+      accounts.map((a: any) => subscribeToBalances(a.address))
     );
     setState({
       ...stateRef.current,
@@ -279,15 +279,22 @@ export const BalancesProvider = (props: any) => {
 
     // total possible balance that can be bonded
     const totalPossibleBond = toFixedIfNecessary(
-      (planckBnToUnit(freeAfterReserve, units) - totalUnlocking),
-      units,
+      planckBnToUnit(freeAfterReserve, units) - totalUnlocking,
+      units
+    );
+
+    let freeToStake = toFixedIfNecessary(
+      planckBnToUnit(freeAfterReserve, units) - planckBnToUnit(active, units),
+      units
     );
+    freeToStake = freeToStake < 0 ? 0 : freeToStake;
 
     return {
       freeToBond,
       freeToUnbond,
       totalUnlocking,
       totalPossibleBond,
+      freeToStake,
     };
   };
 

diff --git a/src/pages/Overview/BalanceGraph.tsx b/src/pages/Overview/BalanceGraph.tsx
@@ -22,10 +22,12 @@ export const BalanceGraph = () => {
   const { network }: any = useApi();
   const { units } = network;
   const { activeAccount }: any = useConnect();
-  const { getAccountBalance }: any = useBalances();
+  const { getAccountBalance, getBondOptions }: any = useBalances();
   const balance = getAccountBalance(activeAccount);
   const { services } = useUi();
   const prices = usePrices();
+  const { freeToStake, freeToUnbond: staked }: any =
+    getBondOptions(activeAccount) || {};
 
   let { free, miscFrozen } = balance;
 
@@ -36,14 +38,16 @@ export const BalanceGraph = () => {
 
   // convert to currency unit
   free = planckToUnit(free.toNumber(), units);
-  let graphFrozen = planckToUnit(miscFrozen.toNumber(), units);
 
-  let graphFree = free - graphFrozen;
+
+  // graph data
+  let graphStaked = staked;
+  let graphFreeToStake = freeToStake;
 
   let zeroBalance = false;
-  if (graphFrozen === 0 && graphFree === 0) {
-    graphFrozen = -1;
-    graphFree = -1;
+  if (graphStaked === 0 && graphFreeToStake === 0) {
+    graphStaked = -1;
+    graphFreeToStake = -1;
     zeroBalance = true;
   }
 
@@ -83,14 +87,16 @@ export const BalanceGraph = () => {
   };
 
   const data = {
-    labels: ['Transferrable', 'Locked'],
+    labels: ['Available', 'Staking'],
     datasets: [
       {
         label: network.unit,
-        data: [graphFree, graphFrozen],
+        data: [graphFreeToStake, graphStaked],
         backgroundColor: [
-          zeroBalance ? defaultThemes.graphs.inactive[mode] : defaultThemes.graphs.colors[0][mode],
           defaultThemes.graphs.colors[2][mode],
+          zeroBalance
+            ? defaultThemes.graphs.inactive[mode]
+            : defaultThemes.graphs.colors[0][mode],
         ],
         borderWidth: 0,
       },
@@ -103,22 +109,26 @@ export const BalanceGraph = () => {
 
   return (
     <>
-      <div className='head' style={{ paddingTop: '0.5rem' }}>
+      <div className="head" style={{ paddingTop: '0.5rem' }}>
         <h4>Balance</h4>
         <h2>{freeBase} {network.unit}{services.includes('binance_spot') && <>&nbsp;<span className='fiat'>${humanNumber(freeBalance)}</span></>}</h2>
       </div>
       <div style={{ paddingTop: '20px' }}></div>
-      <div className='inner' ref={ref} style={{ minHeight: minHeight }}>
-        <div className='graph' style={{ height: `${height}px`, width: `${width}px`, position: 'absolute' }}>
-          <Doughnut
-            options={options}
-            data={data}
-          />
+      <div className="inner" ref={ref} style={{ minHeight: minHeight }}>
+        <div
+          className="graph"
+          style={{
+            height: `${height}px`,
+            width: `${width}px`,
+            position: 'absolute',
+          }}
+        >
+          <Doughnut options={options} data={data} />
         </div>
       </div>
       <div style={{ paddingTop: '25px' }}></div>
     </>
   );
-}
+};
 
-export default BalanceGraph;
+export default BalanceGraph;
diff --git a/src/theme/default.ts b/src/theme/default.ts
@@ -11,7 +11,7 @@ export const defaultThemes: any = {
   primary: v('rgb(211, 48, 121)', 'rgb(211, 48, 121)'),
   secondary: v('rgb(211, 48, 121)', 'rgb(211, 48, 121)'),
   text: {
-    primary: v('#330022', '#ccc'),
+    primary: v('#333', '#ccc'),
     secondary: v('#444', '#aaa'),
     invert: v('#fafafa', '#0e0e0e'),
     danger: v('#ae2324', '#d14445'),