[UI] Update rank process bar value

Koniverse · May 29, 2024 · cd332e4 · cd332e4
1 parent a9241c9
commit cd332e4
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Account/AccountDetail.tsx b/packages/extension-koni-ui/src/Popup/Account/AccountDetail.tsx
@@ -64,9 +64,18 @@ const Component: React.FC<Props> = (props: Props) => {
     maxEnergy: energyConfig?.maxEnergy
   });
 
+  const currentRank = account?.attributes.rank || 'iron';
+  const currentPoint = account?.attributes.point || 0;
+
   const pointPercent = useMemo(() => {
+    const currentRankInfo = rankInfoMap?.[currentRank];
+
+    if (currentRankInfo && currentPoint > 0) {
+      return (currentPoint - currentRankInfo.minPoint) * 100 / (currentRankInfo.maxPoint - currentRankInfo.minPoint);
+    }
+
     return 0;
-  }, []);
+  }, [currentPoint, currentRank, rankInfoMap]);
 
   useEffect(() => {
     const accountSub = apiSDK.subscribeAccount().subscribe((data) => {
@@ -185,10 +194,10 @@ const Component: React.FC<Props> = (props: Props) => {
                 <img
                   alt='rank'
                   className={'rank-info-icon'}
-                  src={smallRankIconMap[account?.attributes.rank || 'iron']}
+                  src={smallRankIconMap[currentRank]}
                 />
                 <span className='rank-info-label'>
-                  {rankNameMap[account?.attributes.rank || 'iron']}
+                  {rankNameMap[currentRank]}
                 </span>
               </div>
             </div>
@@ -201,11 +210,11 @@ const Component: React.FC<Props> = (props: Props) => {
                 />
 
                 <span className='current-point'>
-                  {formatInteger(account?.attributes.point || 0)}
+                  {formatInteger(currentPoint)}
                 </span>
 
                 <span className='tagret-point'>
-                  /{formatInteger(rankInfoMap?.[account?.attributes.rank || 'iron'].maxPoint || 0)}
+                  /{formatInteger(rankInfoMap?.[currentRank].maxPoint || 0)}
                 </span>
               </div>
             </div>