fix address coin balance

ui/address/AddressCoinBalance.tsx

@@ -18,11 +18,13 @@ const AddressCoinBalance = () => {
   const [ socketAlert, setSocketAlert ] = React.useState(false);
   const queryClient = useQueryClient();
   const router = useRouter();
+  const scrollRef = React.useRef<HTMLDivElement>(null);
 
   const addressHash = String(router.query?.id);
   const coinBalanceQuery = useQueryWithPages({
     resourceName: 'address_coin_balance',
     pathParams: { id: addressHash },
+    scrollRef,
   });
 
   const handleSocketError = React.useCallback(() => {
@@ -65,6 +67,7 @@ const AddressCoinBalance = () => {
     <>
       { socketAlert && <SocketAlert mb={ 6 }/> }
       <AddressCoinBalanceChart addressHash={ addressHash }/>
+      <div ref={ scrollRef }></div>
       <AddressCoinBalanceHistory query={ coinBalanceQuery }/>
     </>
   );

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -26,12 +26,12 @@ const AddressCoinBalanceListItem = (props: Props) => {
   return (
     <ListItemMobile rowGap={ 2 } isAnimated>
       <Flex justifyContent="space-between" w="100%">
-        <Text fontWeight={ 600 }>{ BigNumber(props.value).div(WEI).toFixed(8) } { appConfig.network.currency.symbol }</Text>
+        <Text fontWeight={ 600 }>{ BigNumber(props.value).div(WEI).dp(8).toFormat() } { appConfig.network.currency.symbol }</Text>
         <Stat flexGrow="0">
           <StatHelpText display="flex" mb={ 0 } alignItems="center">
             <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
             <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
-              { deltaBn.toFormat() }
+              { deltaBn.dp(8).toFormat() }
             </Text>
           </StatHelpText>
         </Stat>

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

@@ -40,14 +40,14 @@ const AddressCoinBalanceTableItem = (props: Props) => {
         <Text variant="secondary">{ timeAgo }</Text>
       </Td>
       <Td isNumeric pr={ 1 }>
-        <Text>{ BigNumber(props.value).div(WEI).toFixed(8) }</Text>
+        <Text>{ BigNumber(props.value).div(WEI).dp(8).toFormat() }</Text>
       </Td>
       <Td isNumeric display="flex" justifyContent="end">
         <Stat flexGrow="0">
           <StatHelpText display="flex" mb={ 0 } alignItems="center">
             <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
             <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
-              { deltaBn.toFormat() }
+              { deltaBn.dp(8).toFormat() }
             </Text>
           </StatHelpText>
         </Stat>