Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: pool ui #365

Merged
merged 8 commits into from
May 30, 2023
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Bug fixes

- [#365](https://github.com/alleslabs/celatone-frontend/pull/365) Fix pool page UI including helper text gap, icon alignment in pool asset table, empty state border, add message type, input selection icon, and accordion alignment
- [#362](https://github.com/alleslabs/celatone-frontend/pull/362) Fix missed out hard-coded osmosis testnet 4 in code
- [#361](https://github.com/alleslabs/celatone-frontend/pull/361) Fix incorrect assigned message index for each pool message in pool tx tables
- [#360](https://github.com/alleslabs/celatone-frontend/pull/360) Fix supported pool list cannot be searched with token ID and should not show pagination when data is less than 10
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/Tooltip.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { TooltipProps } from "@chakra-ui/react";
import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
import { Flex, Tooltip as ChakraTooltip } from "@chakra-ui/react";

import { CustomIcon } from "./icon";

Expand All @@ -24,13 +24,13 @@ export const TooltipInfo = ({
...tooltipProps
}: TooltipInfoProps) => (
<Tooltip {...tooltipProps}>
<div style={{ cursor: "pointer" }}>
<Flex cursor="pointer">
<CustomIcon
color="pebble.600"
name={iconVariant === "solid" ? "info-circle-solid" : "info-circle"}
boxSize={3}
m={0}
/>
</div>
</Flex>
</Tooltip>
);
10 changes: 7 additions & 3 deletions src/lib/components/forms/SelectInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,13 @@ export const SelectInput = <T extends string>({
}}
>
<div className="form-label">{formLabel}</div>
{selectedOption?.icon && (
<InputLeftElement pointerEvents="none" h="full" ml="1">
{selectedOption?.image && (
<InputLeftElement pointerEvents="none" h="full" ml={1}>
<Image boxSize={6} src={selectedOption.image} />
</InputLeftElement>
)}
{selectedOption?.icon && (
<InputLeftElement pointerEvents="none" h="full" ml={1}>
<CustomIcon
name={selectedOption.icon}
color={selectedOption.iconColor}
Expand All @@ -134,7 +138,7 @@ export const SelectInput = <T extends string>({
value={selected || placeholder}
fontSize="14px"
color={selected ? "text.main" : "text.dark"}
pl={selectedOption?.icon ? 9 : 4}
pl={selectedOption?.icon || selectedOption?.image ? 10 : 4}
/>
<InputRightElement pointerEvents="none" h="full">
<CustomIcon name="chevron-down" color="pebble.600" />
Expand Down
3 changes: 1 addition & 2 deletions src/lib/components/state/EmptyState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ export const EmptyState = ({
withBorder = false,
}: EmptyStateProps) => (
<Flex
py={8}
my={12}
py={12}
direction="column"
borderY={withBorder ? "1px solid" : undefined}
borderColor="pebble.700"
Expand Down
1 change: 1 addition & 0 deletions src/lib/components/table/codes/MySavedCodesTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const MySavedCodesTable = ({
<EmptyState
imageVariant={isSearching ? "not-found" : "empty"}
message={isSearching ? "No matched codes found" : emptyMessage}
withBorder
/>
}
onRowSelect={onRowSelect}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const RelatedProposalsTable = ({
<EmptyState
imageVariant="empty"
message="This contract does not have related proposals yet."
withBorder
/>
}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export const TxsTable = ({
<EmptyState
imageVariant="empty"
message="This contract does not have any transactions"
withBorder
/>
}
showRelations={false}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export const MigrationTable = ({
<EmptyState
imageVariant="empty"
message="This contract does not have any migration history yet."
withBorder
/>
);

Expand Down
13 changes: 5 additions & 8 deletions src/lib/pages/past-txs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ const PastTxs = () => {
placeholder="Search with transaction hash or contract address"
h="full"
/>
<InputRightElement pointerEvents="none" h="full" mr="1">
<InputRightElement pointerEvents="none" h="full" mr={1}>
<CustomIcon name="search" color="pebble.600" />
</InputRightElement>
</InputGroup>
Expand All @@ -171,17 +171,14 @@ const PastTxs = () => {
!pastTxsState.search.trim().length || !filterSelected.length ? (
<EmptyState
imageVariant="not-found"
message={`
No past transaction matches found with your input.
You can search with transaction hash, and contract address.
`}
message="No past transaction matches found with your input. You can search with transaction hash, and contract address."
withBorder
/>
) : (
<EmptyState
imageVariant="empty"
message={`
Past transactions will display here.
`}
message="Past transactions will display here."
withBorder
/>
)
}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/pages/pools/components/pool-details/PoolAssets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const PoolAssets = ({ pool }: PoolAssetsProps) => {
)}
</Flex>
<PoolAssetsTable pool={pool} totalLiquidity={totalLiquidity} />
<Flex gap="2" alignItems="center">
<Flex gap={2} alignItems="center" mt={4}>
<Text variant="body2" color="text.dark">
What is asset weight and allocation?
</Text>
Expand All @@ -58,7 +58,7 @@ export const PoolAssets = ({ pool }: PoolAssetsProps) => {
<Text color="lilac.main" variant="body2">
Read more
</Text>
<CustomIcon name="launch" color="lilac.main" boxSize="3" />
<CustomIcon name="launch" color="lilac.main" boxSize={3} />
</Flex>
</Link>
</Flex>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const PoolTxsMsg = ({
const { isOpen, onToggle } = useDisclosure();
const msgDetailTemplateColumns = templateColumns
.split(" ")
.slice(0, 2)
.slice(0, 3)
.concat("1fr")
.join(" ");
return (
Expand Down Expand Up @@ -146,6 +146,7 @@ export const PoolTxsMsg = ({
hidden={!isOpen}
templateColumns={msgDetailTemplateColumns}
>
<TableNoBorderRow py={0} />
<TableNoBorderRow py={0} />
<TableNoBorderRow py={0} />
<TableNoBorderRow py={0}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ export const PoolRelatedTxsTable = ({
if (error)
return (
<EmptyState
withBorder
imageVariant="not-found"
message="There is an error during fetching transactions."
withBorder
/>
);
return (
Expand All @@ -73,9 +73,9 @@ export const PoolRelatedTxsTable = ({
isLoading={isLoadingAssetInfos || isLoading}
emptyState={
<EmptyState
withBorder
imageVariant="empty"
message="There are no transactions in this network."
withBorder
/>
}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Flex, Text } from "@chakra-ui/react";
import type { ReactNode } from "react";

interface PoolInfoTextProps {
title: string;
children: ReactNode;
}

export const PoolInfoText = ({ title, children }: PoolInfoTextProps) => (
<Flex direction="column" gap={1} minW="90px">
<Text variant="body2" textColor="pebble.500" fontWeight={500}>
{title}
</Text>
{typeof children === "string" ? (
<Text variant="body2">{children}</Text>
) : (
children
)}
</Flex>
);
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { Box, Flex, Text } from "@chakra-ui/react";
import { Flex } from "@chakra-ui/react";

import { PoolAssetCard } from "../components";
import { PoolInfoText } from "../components/PoolInfoText";
import { getPoolDenom } from "../utils";
import { MsgToken } from "lib/components/action-msg/MsgToken";
import { ExplorerLink } from "lib/components/ExplorerLink";
import { Loading } from "lib/components/Loading";
import type { AssetInfosOpt } from "lib/services/assetService";
import { useTxData } from "lib/services/txService";
import type { PoolDetail } from "lib/types";
import { extractMsgType } from "lib/utils";
import type { MsgLockTokensDetails } from "lib/utils/tx/types";

interface MsgLockTokensDetailProps {
Expand Down Expand Up @@ -51,49 +53,38 @@ export const MsgLockTokensDetail = ({
?.attributes.at(0)?.value;

return (
<Flex w="full" direction="column" gap={4}>
<Flex w="full" direction="column" gap={6}>
<Flex gap={12}>
<Flex direction="column" gap={1}>
<Text variant="body2" textColor="pebble.500" fontWeight={500}>
Block height
</Text>
<PoolInfoText title="Block height">
<ExplorerLink
value={blockHeight.toString()}
type="block_height"
showCopyOnHover
ampCopierSection={ampCopierSection}
/>
</Flex>
<Flex direction="column" gap={1}>
<Text variant="body2" textColor="pebble.500" fontWeight={500}>
LockID
</Text>
<Text variant="body2">{lockId}</Text>
</Flex>
<Flex direction="column" gap={1}>
<Text variant="body2" textColor="pebble.500" fontWeight={500}>
Bonded LP
</Text>
</PoolInfoText>
<PoolInfoText title="LockID">{lockId}</PoolInfoText>
<PoolInfoText title="Bonded LP">
<MsgToken
coin={poolAsset}
symbol={poolAssetInfo?.symbol}
precision={poolAssetInfo?.precision}
fontWeight={700}
ampCopierSection={ampCopierSection}
/>
</Flex>
</PoolInfoText>

<PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
</Flex>
<Box w="full">
<PoolAssetCard
poolId={pool.id}
description="Bonded to"
assetText="Bonded"
poolAsset={poolAsset}
poolAssetInfo={poolAssetInfo}
isOpened={isOpened}
ampCopierSection={ampCopierSection}
/>
</Box>
<PoolAssetCard
poolId={pool.id}
description="Bonded to"
assetText="Bonded"
poolAsset={poolAsset}
poolAssetInfo={poolAssetInfo}
isOpened={isOpened}
ampCopierSection={ampCopierSection}
/>
</Flex>
);
};
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Box, Flex, Text } from "@chakra-ui/react";
import { Box, Flex } from "@chakra-ui/react";

import { PoolInfoText } from "../components/PoolInfoText";
import { ExplorerLink } from "lib/components/ExplorerLink";
import type { AssetInfosOpt } from "lib/services/assetService";
import { extractMsgType } from "lib/utils";
import type { MsgExitPoolDetails } from "lib/utils/tx/types";

import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
Expand All @@ -25,17 +27,17 @@ export const MsgExitPoolDetail = ({
isOpened,
ampCopierSection,
}: MsgExitPoolDetailProps) => (
<Flex w="full" alignItems="start" gap={12}>
<Flex direction="column" gap={1}>
<Text variant="body2" textColor="pebble.500" fontWeight={500}>
Block height
</Text>
<ExplorerLink
value={blockHeight.toString()}
type="block_height"
showCopyOnHover
ampCopierSection={ampCopierSection}
/>
<Flex w="full" direction="column" alignItems="start" gap={6}>
<Flex gap={12}>
<PoolInfoText title="Block height">
<ExplorerLink
value={blockHeight.toString()}
type="block_height"
showCopyOnHover
ampCopierSection={ampCopierSection}
/>
</PoolInfoText>
<PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
</Flex>
<Box w="full">
<PoolLPCard
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Box, Flex, Text } from "@chakra-ui/react";
import { Box, Flex } from "@chakra-ui/react";

import { PoolInfoText } from "../components/PoolInfoText";
import { ExplorerLink } from "lib/components/ExplorerLink";
import type { AssetInfosOpt } from "lib/services/assetService";
import { extractMsgType } from "lib/utils";
import type { MsgExitSwapExternAmountOutDetails } from "lib/utils/tx/types";

import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
Expand All @@ -25,17 +27,17 @@ export const MsgExitSwapExternAmountOutDetail = ({
isOpened,
ampCopierSection,
}: MsgExitSwapExternAmountOutDetailProps) => (
<Flex w="full" alignItems="start" gap={12}>
<Flex direction="column" gap={1}>
<Text variant="body2" textColor="pebble.500" fontWeight={500}>
Block height
</Text>
<ExplorerLink
value={blockHeight.toString()}
type="block_height"
showCopyOnHover
ampCopierSection={ampCopierSection}
/>
<Flex w="full" direction="column" alignItems="start" gap={12}>
<Flex gap={12}>
<PoolInfoText title="Block height">
<ExplorerLink
value={blockHeight.toString()}
type="block_height"
showCopyOnHover
ampCopierSection={ampCopierSection}
/>
</PoolInfoText>
<PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
</Flex>
<Box w="full">
<PoolLPCard
Expand Down
Loading