diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f1821603..8df0ec51a 100644
--- 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
index caa882db2..4e416c59b 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";
@@ -26,7 +26,8 @@ export const CopyTemplate = ({
return (
- {
onCopy();
e.stopPropagation();
@@ -35,7 +36,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..d03d1ce65 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)}
+
+
+ {getTokenLabel(token.denom, token.symbol, !isMobile)}
-
-
-
-
-
+ {!isMobile && (
+
+
+
+
+
+ )}
-
+
{`${tokenType} Token`}
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("/");
};