fix: change unsupported tokens layout and style

CHANGELOG.md

@@ -56,6 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#237](https://github.com/alleslabs/celatone-frontend/pull/237) Change unsupported tokens layout and style
 - [#234](https://github.com/alleslabs/celatone-frontend/pull/234) Fix faucet wording
 - [#216](https://github.com/alleslabs/celatone-frontend/pull/216) Change icon to Alles Labs icon set
 - [#227](https://github.com/alleslabs/celatone-frontend/pull/227) Refactor directory structure and components e.g. various tables

src/lib/components/modal/UnsupportedTokensModal.tsx

@@ -10,7 +10,7 @@ import {
   ModalBody,
   Button,
   Heading,
-  Box,
+  Tooltip,
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { useMemo } from "react";
@@ -49,21 +49,46 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
 
   return (
     <Flex
+      _hover={{
+        "& .info": {
+          display: "flex",
+        },
+      }}
       borderRadius="8px"
       bg="pebble.800"
-      justify="space-between"
+      direction="column"
       px={4}
       py={3}
       role="group"
     >
-      <Flex direction="column" maxW="70%">
-        <Flex direction="row" alignItems="center">
+      <Flex
+        direction="row"
+        justifyContent="space-between"
+        w="full"
+        alignItems="center"
+      >
+        <Flex gap={1}>
           <Text variant="body2" className="ellipsis">
             {tokenLabel}
           </Text>
-          <Box _groupHover={{ display: "flex" }} display="none">
-            <Copier value={balance.id} />
-          </Box>
+          <Tooltip
+            hasArrow
+            label={`Token ID: ${balance.id}`}
+            placement="top"
+            bg="honeydew.darker"
+            maxW="500px"
+          >
+            <Flex cursor="pointer" className="info" display="none">
+              <CustomIcon name="info-circle" boxSize="3" />
+            </Flex>
+          </Tooltip>
+          <Copier
+            value={balance.id}
+            copyLabel="Token ID Copied!"
+            ml="1px"
+            display="none"
+            className="info"
+          />
         </Flex>
         <Text variant="body3" color="text.dark">
           {`${tokenType} Token`}
@@ -72,7 +97,8 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
       <Text variant="body2" fontWeight="900">
         {formatUTokenWithPrecision(
           balance.amount as U<Token>,
-          balance.precision
+          balance.precision,
+          false
         )}
       </Text>
     </Flex>
@@ -124,7 +150,7 @@ export const UnsupportedTokensModal = ({
       </Flex>
       <Modal isOpen={isOpen} onClose={onClose} isCentered>
         <ModalOverlay />
-        <ModalContent w="700px">
+        <ModalContent w="800px">
           <ModalHeader>
             <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
               <CustomIcon name={content.icon} boxSize="5" />

src/lib/utils/formatter/token.ts

@@ -40,15 +40,16 @@ export const toToken = (
 
 /**
  * @remarks
- * If token is more than or equal to 1 billion, should add postfix M and format to 2 decimal point
+ * If token is more than or equal to 1 billion, should add suffix B and format to 2 decimal point
  *
  */
 export const formatUTokenWithPrecision = (
   amount: U<Token<BigSource>>,
-  precision: number
+  precision: number,
+  isSuffix = true
 ): string => {
   const token = toToken(amount, precision);
-  if (token.gte(B)) {
+  if (isSuffix && token.gte(B)) {
     return `${formatDemimal({ decimalPoints: 2, delimiter: true })(
       token.div(B),
       "0.00"