refactor currency value

lib/getCurrencyValue.ts

+import BigNumber from 'bignumber.js';
+
+interface Params {
+  value: string;
+  exchangeRate?: string | null;
+  accuracy?: number;
+  accuracyUsd?: number;
+  decimals?: string | null;
+}
+
+export default function getCurrencyValue({ value, accuracy, accuracyUsd, decimals, exchangeRate }: Params) {
+  const valueCurr = BigNumber(value).div(BigNumber(10 ** Number(decimals || '18')));
+  const valueResult = accuracy ? valueCurr.dp(accuracy).toFormat() : valueCurr.toFormat();
+
+  let usdResult: string | undefined;
+
+  if (exchangeRate) {
+    const exchangeRateBn = new BigNumber(exchangeRate);
+    const usdBn = valueCurr.times(exchangeRateBn);
+    if (accuracyUsd && !usdBn.isEqualTo(0)) {
+      const usdBnDp = usdBn.dp(accuracyUsd);
+      usdResult = usdBnDp.isEqualTo(0) ? usdBn.precision(accuracyUsd).toFormat() : usdBnDp.toFormat();
+    } else {
+      usdResult = usdBn.toFormat();
+    }
+  }
+
+  return { valueStr: valueResult, usd: usdResult };
+}

ui/shared/CurrencyValue.tsx

 import { Box, Text, chakra } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
 import React from 'react';
 
+import getCurrencyValue from 'lib/getCurrencyValue';
+
 interface Props {
   value: string;
   currency?: string;
@@ -20,32 +21,14 @@ const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className
       </Box>
     );
   }
-  const valueCurr = BigNumber(value).div(BigNumber(10 ** Number(decimals || '18')));
-  const valueResult = accuracy ? valueCurr.dp(accuracy).toFormat() : valueCurr.toFormat();
-
-  let usdContent;
-  if (exchangeRate !== undefined && exchangeRate !== null) {
-    const exchangeRateBn = new BigNumber(exchangeRate);
-    const usdBn = valueCurr.times(exchangeRateBn);
-    let usdResult: string;
-    if (accuracyUsd && !usdBn.isEqualTo(0)) {
-      const usdBnDp = usdBn.dp(accuracyUsd);
-      usdResult = usdBnDp.isEqualTo(0) ? usdBn.precision(accuracyUsd).toFormat() : usdBnDp.toFormat();
-    } else {
-      usdResult = usdBn.toFormat();
-    }
-
-    usdContent = (
-      <Text as="span" variant="secondary" fontWeight={ 400 }>(${ usdResult })</Text>
-    );
-  }
+  const { valueStr: valueResult, usd: usdResult } = getCurrencyValue({ value, accuracy, accuracyUsd, exchangeRate, decimals });
 
   return (
     <Box as="span" className={ className } display="inline-flex" rowGap={ 3 } columnGap={ 1 }>
       <Text display="inline-block">
         { valueResult }{ currency ? ` ${ currency }` : '' }
       </Text>
-      { usdContent }
+      { usdResult && <Text as="span" variant="secondary" fontWeight={ 400 }>(${ usdResult })</Text> }
     </Box>
   );
 };