Tokens: Move renderEntry hook calls into its own component & fix crash (

#1171)
aragon · Jun 17, 2020 · 911a104 · 911a104
1 parent e5b81b5
commit 911a104
Showing 1 changed file with 32 additions and 22 deletions.
diff --git a/apps/token-manager/app/src/screens/Holders.js b/apps/token-manager/app/src/screens/Holders.js
@@ -63,9 +63,6 @@ function Holders({
           fields={groupMode ? ['Owner'] : ['Holder', 'Balance']}
           entries={mappedEntries}
           renderEntry={([address, balance, vestings]) => {
-            const theme = useTheme()
-            const { totalLocked } = useTotalVestedTokensInfo(vestings)
-
             const isCurrentUser = addressesEqual(address, connectedAccount)
 
             const values = [
@@ -89,25 +86,11 @@ function Holders({
 
             if (!groupMode) {
               values.push(
-                <div
-                  css={`
-                    display: flex;
-                    align-items: center;
-                  `}
-                >
-                  {formatTokenAmount(balance, tokenDecimals)}
-                  {!totalLocked.isZero() && (
-                    <div
-                      css={`
-                        padding-left: ${1 * GU}px;
-                        ${textStyle('label1')};
-                        color: ${theme.surfaceContentSecondary};
-                      `}
-                    >
-                      ({formatTokenAmount(totalLocked, tokenDecimals)} locked)
-                    </div>
-                  )}
-                </div>
+                <TokenAmount
+                  balance={balance}
+                  tokenDecimals={tokenDecimals}
+                  vestings={vestings}
+                />
               )
             }
 
@@ -224,4 +207,31 @@ function EntryActions({
   )
 }
 
+function TokenAmount({ balance, tokenDecimals, vestings }) {
+  const theme = useTheme()
+  const { totalLocked } = useTotalVestedTokensInfo(vestings)
+
+  return (
+    <div
+      css={`
+        display: flex;
+        align-items: center;
+      `}
+    >
+      {formatTokenAmount(balance, tokenDecimals)}
+      {!totalLocked.isZero() && (
+        <div
+          css={`
+            padding-left: ${1 * GU}px;
+            ${textStyle('label1')};
+            color: ${theme.surfaceContentSecondary};
+          `}
+        >
+          ({formatTokenAmount(totalLocked, tokenDecimals)} locked)
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default Holders