From 692ab0644a20f73a8c875cd0e2dad21ae9f0c7b0 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Thu, 21 Dec 2023 14:28:11 +0700 Subject: [PATCH 1/3] fix(components): fix unsupported token card --- CHANGELOG.md | 1 + src/lib/components/copy/CopyTemplate.tsx | 7 +-- .../modal/UnsupportedTokensModal.tsx | 51 ++++++++++++------- 3 files changed, 39 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ce6a807d..d1e2a3fa1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -73,6 +73,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes +- [#691](https://github.com/alleslabs/celatone-frontend/pull/691) Fix unsupported token card - [#683](https://github.com/alleslabs/celatone-frontend/pull/683) Fix save account hex duplicate and search with hex - [#673](https://github.com/alleslabs/celatone-frontend/pull/673) Fix total share is zero - [#668](https://github.com/alleslabs/celatone-frontend/pull/668) Support object key in contract state diff --git a/src/lib/components/copy/CopyTemplate.tsx b/src/lib/components/copy/CopyTemplate.tsx index 1b4703c0b..ab470f407 100644 --- 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"; @@ -24,7 +24,8 @@ export const CopyTemplate = ({ return ( - { onCopy(); e.stopPropagation(); @@ -32,7 +33,7 @@ export const CopyTemplate = ({ ml={ml} > {triggerElement} - + ); }; diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx index 3415f0c6d..8ddf1d436 100644 --- 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 ( { role="group" _hover={{ "& .info": { - visibility: "visible", + display: "flex", }, }} > - - - {getTokenLabel(token.denom, token.symbol)} + + + {isMobile ? token.denom : getTokenLabel(token.denom, token.symbol)} - - - - - + {!isMobile && ( + + + + + + )} - + {`${tokenType} Token`} From 8e760eaf241abe2d0648332b461794910da2edf0 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Thu, 21 Dec 2023 16:17:05 +0700 Subject: [PATCH 2/3] fix(components): fix as comment --- src/lib/components/modal/UnsupportedTokensModal.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx index 8ddf1d436..7109faaf3 100644 --- a/src/lib/components/modal/UnsupportedTokensModal.tsx +++ b/src/lib/components/modal/UnsupportedTokensModal.tsx @@ -67,19 +67,15 @@ const UnsupportedToken = ({ token }: { token: TokenWithValue }) => { justifyContent="space-between" alignItems={{ base: "flex-start", md: "center" }} > - + - {isMobile ? token.denom : getTokenLabel(token.denom, token.symbol)} + {isMobile + ? token.symbol ?? token.denom + : getTokenLabel(token.denom, token.symbol)} {!isMobile && ( From 34f4c8826316ce1e2ac16df1ea02ed3d6ca606a5 Mon Sep 17 00:00:00 2001 From: evilpeach Date: Thu, 21 Dec 2023 17:38:05 +0700 Subject: [PATCH 3/3] feat: add isTruncated on getTokenLabel --- src/lib/components/modal/UnsupportedTokensModal.tsx | 4 +--- .../tables/pool-txs/messages/components/AssetCard.tsx | 3 ++- .../unsupportedSection/UnsupportedPoolCard.tsx | 10 ++++++++-- src/lib/utils/formatter/tokenType.ts | 9 +++++++-- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx index 7109faaf3..d03d1ce65 100644 --- a/src/lib/components/modal/UnsupportedTokensModal.tsx +++ b/src/lib/components/modal/UnsupportedTokensModal.tsx @@ -73,9 +73,7 @@ const UnsupportedToken = ({ token }: { token: TokenWithValue }) => { className={isMobile ? "" : "ellipsis"} wordBreak="break-all" > - {isMobile - ? token.symbol ?? token.denom - : getTokenLabel(token.denom, token.symbol)} + {getTokenLabel(token.denom, token.symbol, !isMobile)} {!isMobile && ( diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx index af19d6cb0..45955ba84 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx +++ b/src/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 ( { asset.precision ?? 0 )} - {asset.symbol ?? asset.denom} + + {getTokenLabel(asset.denom, asset.symbol, false)} + { 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, + 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("/"); };