Merge branch 'develop' into fix/cosmwasm-pool

alleslabs · Dec 21, 2023 · 8781e0c · 8781e0c
2 parents f1c2278 + 5a7def6
commit 8781e0c
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -78,6 +78,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Bug fixes
 
 - [#694](https://github.com/alleslabs/celatone-frontend/pull/694) Reroute cosmwasm pool back to pool detail page
+- [#691](https://github.com/alleslabs/celatone-frontend/pull/691) Fix unsupported token card
 - [#693](https://github.com/alleslabs/celatone-frontend/pull/693) Fix ui styling for contract card and states
 - [#687](https://github.com/alleslabs/celatone-frontend/pull/687) Fix resource and module related bugs
 - [#690](https://github.com/alleslabs/celatone-frontend/pull/690) Fix query msg regex for Sylvia contract

diff --git a/src/lib/components/copy/CopyTemplate.tsx b/src/lib/components/copy/CopyTemplate.tsx
@@ -1,5 +1,5 @@
 import type { BoxProps } from "@chakra-ui/react";
-import { Box, useClipboard } from "@chakra-ui/react";
+import { Flex, useClipboard } from "@chakra-ui/react";
 import { useEffect } from "react";
 
 import { Tooltip } from "../Tooltip";
@@ -26,7 +26,8 @@ export const CopyTemplate = ({
 
   return (
     <Tooltip isOpen={!isDisabled && hasCopied} label={copyLabel}>
-      <Box
+      <Flex
+        direction="column"
         onClick={(e) => {
           onCopy();
           e.stopPropagation();
@@ -35,7 +36,7 @@ export const CopyTemplate = ({
         ml={ml}
       >
         {triggerElement}
-      </Box>
+      </Flex>
     </Tooltip>
   );
 };
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -18,7 +18,7 @@ import type { IconKeys } from "../icon";
 import { CustomIcon } from "../icon";
 import { Tooltip } from "../Tooltip";
 import { trackUseUnsupportedToken } from "lib/amplitude";
-import { useGetAddressType } from "lib/app-provider";
+import { useGetAddressType, useMobile } from "lib/app-provider";
 import type { AddressReturnType } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import type { Addr, TokenWithValue } from "lib/types";
@@ -35,7 +35,6 @@ interface UnsupportedTokensModalProps {
   buttonProps?: ButtonProps;
   amptrackSection?: string;
 }
-
 const getTokenTypeWithAddress = (addrType: AddressReturnType) =>
   addrType === "contract_address"
     ? getTokenType("cw20")
@@ -47,6 +46,7 @@ const UnsupportedToken = ({ token }: { token: TokenWithValue }) => {
     ? getTokenTypeWithAddress(getAddressType(token.denom))
     : getTokenType(token.denom.split("/")[0]);
 
+  const isMobile = useMobile();
   return (
     <Flex
       className="copier-wrapper"
@@ -58,35 +58,46 @@ const UnsupportedToken = ({ token }: { token: TokenWithValue }) => {
       role="group"
       _hover={{
         "& .info": {
-          visibility: "visible",
+          display: "flex",
         },
       }}
     >
       <Flex
-        direction="row"
+        direction={{ base: "column", md: "row" }}
         justifyContent="space-between"
-        w="full"
-        alignItems="center"
+        alignItems={{ base: "flex-start", md: "center" }}
       >
-        <Flex gap={1} alignItems="center">
-          <Text variant="body2" className="ellipsis">
-            {getTokenLabel(token.denom, token.symbol)}
+        <Flex alignItems="center" justifyContent="center" gap={1} minH={6}>
+          <Text
+            variant="body2"
+            className={isMobile ? "" : "ellipsis"}
+            wordBreak="break-all"
+          >
+            {getTokenLabel(token.denom, token.symbol, !isMobile)}
           </Text>
-          <Tooltip label={`Token ID: ${token.denom}`} maxW="500px">
-            <Flex cursor="pointer" className="info" visibility="hidden">
-              <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
-            </Flex>
-          </Tooltip>
+          {!isMobile && (
+            <Tooltip label={`Token ID: ${token.denom}`} maxW="500px">
+              <Flex
+                cursor="pointer"
+                className="info"
+                display={{ base: "flex", md: "none" }}
+                h={6}
+                alignItems="center"
+              >
+                <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
+              </Flex>
+            </Tooltip>
+          )}
           <Copier
+            display={{ base: "flex", md: "none" }}
             type="unsupported_asset"
             value={token.denom}
             copyLabel="Token ID Copied!"
-            ml={0}
-            display="none"
+            ml={{ base: 1, md: 0 }}
             amptrackSection="unsupported_token_copy"
           />
         </Flex>
-        <Text variant="body3" color="text.dark">
+        <Text variant="body3" color="text.dark" my={{ base: 1, md: 0 }}>
           {`${tokenType} Token`}
         </Text>
       </Flex>

diff --git a/...lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx b/...lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
@@ -10,6 +10,7 @@ import {
   calculateAssetValue,
   formatPrice,
   formatUTokenWithPrecision,
+  getTokenLabel,
   toToken,
 } from "lib/utils";
 
@@ -27,7 +28,7 @@ export const AssetCard = ({
   ampCopierSection,
   ...cardProps
 }: AssetCardProps) => {
-  const symbol = assetInfo?.symbol ?? denom;
+  const symbol = getTokenLabel(denom, assetInfo?.symbol, false);
   return (
     <Tooltip label={`Token ID: ${denom}`} maxW="240px" textAlign="center">
       <Flex

diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -20,7 +20,11 @@ import { TokenImageRender } from "lib/components/token";
 import { Tooltip } from "lib/components/Tooltip";
 import type { Pool } from "lib/types";
 import { PoolType } from "lib/types";
-import { formatUTokenWithPrecision, openNewTab } from "lib/utils";
+import {
+  formatUTokenWithPrecision,
+  getTokenLabel,
+  openNewTab,
+} from "lib/utils";
 
 interface UnsupportedPoolCardProps {
   item: Pool;
@@ -146,7 +150,9 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
                           asset.precision ?? 0
                         )}
                       </Text>
-                      <Flex>{asset.symbol ?? asset.denom}</Flex>
+                      <Flex>
+                        {getTokenLabel(asset.denom, asset.symbol, false)}
+                      </Flex>
                       <Copier
                         type={
                           asset.symbol ? "supported_asset" : "unsupported_asset"

diff --git a/src/lib/utils/formatter/tokenType.ts b/src/lib/utils/formatter/tokenType.ts
@@ -1,6 +1,7 @@
 import { capitalize } from "lodash";
 
 import { truncate } from "../truncate";
+import type { Option } from "lib/types";
 
 export const getTokenType = (type: string) => {
   switch (type.toLowerCase()) {
@@ -12,12 +13,16 @@ export const getTokenType = (type: string) => {
   }
 };
 
-export const getTokenLabel = (denom: string, symbol?: string) => {
+export const getTokenLabel = (
+  denom: string,
+  symbol: Option<string>,
+  isTruncate = true
+) => {
   if (symbol) return symbol;
 
   const splitId = denom.split("/");
   if (splitId.length === 1) return denom;
 
-  splitId[1] = truncate(splitId[1]);
+  splitId[1] = isTruncate ? truncate(splitId[1]) : splitId[1];
   return splitId.join("/");
 };