token exchange rate to local str

ui/address/tokenSelect/TokenSelectItem.tsx

@@ -22,7 +22,7 @@ const TokenSelectItem = ({ data }: Props) => {
         return (
           <>
             <span >{ BigNumber(data.value).dividedBy(10 ** tokenDecimals).toFormat(2) } { trimTokenSymbol(data.token.symbol) }</span>
-            { data.token.exchange_rate && <span >@{ data.token.exchange_rate }</span> }
+            { data.token.exchange_rate && <span >@{ Number(data.token.exchange_rate).toLocaleString() }</span> }
           </>
         );
       }

ui/address/tokens/ERC20TokensListItem.tsx

@@ -36,7 +36,7 @@ const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
         <HStack spacing={ 3 }>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Price</Skeleton>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
-            <span>{ `$${ token.exchange_rate }` }</span>
+            <span>{ `$${ Number(token.exchange_rate).toLocaleString() }` }</span>
           </Skeleton>
         </HStack>
       ) }

ui/address/tokens/ERC20TokensTableItem.tsx

@@ -43,7 +43,7 @@ const ERC20TokensTableItem = ({
       </Td>
       <Td isNumeric verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } display="inline-block">
-          { token.exchange_rate && `$${ token.exchange_rate }` }
+          { token.exchange_rate && `$${ Number(token.exchange_rate).toLocaleString() }` }
         </Skeleton>
       </Td>
       <Td isNumeric verticalAlign="middle">

ui/token/TokenDetails.tsx

@@ -96,7 +96,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
           isLoading={ tokenQuery.isPlaceholderData }
         >
           <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } display="inline-block">
-            <span>{ `$${ exchangeRate }` }</span>
+            <span>{ `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` }</span>
           </Skeleton>
         </DetailsInfoItem>
       ) }

ui/tokens/TokensListItem.tsx

@@ -68,7 +68,9 @@ const TokensTableItem = ({
       { exchangeRate && (
         <HStack spacing={ 3 }>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Price</Skeleton>
-          <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary"><span>{ exchangeRate }</span></Skeleton>
+          <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
+            <span>${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }</span>
+          </Skeleton>
         </HStack>
       ) }
       { marketCap && (

ui/tokens/TokensTableItem.tsx

@@ -73,7 +73,7 @@ const TokensTableItem = ({
       </Td>
       <Td isNumeric>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" lineHeight="24px" fontWeight={ 500 } display="inline-block">
-          { exchangeRate && `$${ exchangeRate }` }
+          { exchangeRate && `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` }
         </Skeleton>
       </Td>
       <Td isNumeric maxWidth="300px" width="300px">