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

Amp/pool nav #355

Merged
merged 8 commits into from
May 26, 2023
Merged
Show file tree
Hide file tree
Changes from 2 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 @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Features

- [#355](https://github.com/alleslabs/celatone-frontend/pull/355) Add Amp for Pool List page
- [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table
- [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page
- [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list
Expand Down
6 changes: 5 additions & 1 deletion src/lib/pages/pools/components/supportedSection/PoolCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { getPoolUrl } from "lib/app-fns/explorer";
import { useInternalNavigate } from "lib/app-provider";
import { CustomIcon } from "lib/components/icon";
import { Tooltip } from "lib/components/Tooltip";
import { AmpTrackWebsite } from "lib/services/amplitude";
import type { USD, Pool, Token, U } from "lib/types";
import { formatPrice } from "lib/utils";

Expand Down Expand Up @@ -64,7 +65,10 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
<Tooltip label="See in osmosis.zone">
<Link
href={`${getPoolUrl(currentChainName)}/${item.id}`}
onClick={(e) => e.stopPropagation()}
onClick={(e) => {
AmpTrackWebsite(`${getPoolUrl(currentChainName)}/${item.id}`);
e.stopPropagation();
}}
target="_blank"
rel="noopener noreferrer"
>
Expand Down
26 changes: 20 additions & 6 deletions src/lib/pages/pools/components/supportedSection/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ import { Pagination } from "lib/components/pagination";
import { usePaginator } from "lib/components/pagination/usePaginator";
import { ToggleWithName } from "lib/components/ToggleWithName";
import { Order_By } from "lib/gql/graphql";
import {
AmpTrackUseSort,
AmpTrackUseToggle,
AmpTrackUseView,
} from "lib/services/amplitude";
import { useAssetInfos } from "lib/services/assetService";
import { usePoolListCountQuery } from "lib/services/poolService";
import type { PoolTypeFilter } from "lib/types";
Expand Down Expand Up @@ -123,7 +128,7 @@ export const SupportedSection = ({
return (
<>
<Flex alignItems="center" mb={12}>
<Flex grow="2" gap={4}>
<Flex grow={2} gap={4}>
<InputWithIcon
placeholder="Search with Pool ID, Symbol or Token ID"
value={keyword}
Expand All @@ -132,6 +137,7 @@ export const SupportedSection = ({
setValue("keyword", e.target.value);
}}
size="lg"
action="supported-pool-list-search"
/>
<FilterByPoolType
initialSelected="All"
Expand All @@ -148,6 +154,7 @@ export const SupportedSection = ({
defaultChecked={isSuperfluidOnly}
onChange={(e) => {
setCurrentPage(1);
AmpTrackUseToggle("isSuperfluidOnly", e.target.checked);
setValue("isSuperfluidOnly", e.target.checked);
}}
/>
Expand All @@ -172,15 +179,19 @@ export const SupportedSection = ({
</Badge>
</Flex>
<Flex gap={4}>
<Flex gap="2" alignItems="center">
<Flex gap={2} alignItems="center">
<Text variant="body2" color="text.dark">
Sort Pool ID:
</Text>
<Button
variant="outline-gray"
size="sm"
pr="1"
onClick={() => setShowNewest(!showNewest)}
pr={1}
onClick={() => {
const newOrdering = !showNewest;
songwongtp marked this conversation as resolved.
Show resolved Hide resolved
AmpTrackUseSort(newOrdering ? "Descending" : "Ascending");
setShowNewest(newOrdering);
}}
>
{showNewest ? "Newest First" : "Oldest First"}
<CustomIcon
Expand All @@ -189,14 +200,17 @@ export const SupportedSection = ({
/>
</Button>
</Flex>
<Flex gap="2" alignItems="center">
<Flex gap={2} alignItems="center">
<Text variant="body2" color="text.dark">
View asset allocation in:
</Text>
<ToggleWithName
selectedValue={toggle}
options={OPTIONS}
selectOption={(value: string) => setToggle(value)}
selectOption={(value: string) => {
AmpTrackUseView(value);
setToggle(value);
}}
/>
</Flex>
</Flex>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { useInternalNavigate } from "lib/app-provider";
import { Copier } from "lib/components/copy";
import { CustomIcon } from "lib/components/icon";
import { Tooltip } from "lib/components/Tooltip";
import { AmpTrackExpand, AmpTrackWebsite } from "lib/services/amplitude";
import type { Pool } from "lib/types";
import { formatUTokenWithPrecision } from "lib/utils";

Expand Down Expand Up @@ -53,7 +54,18 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
>
{({ isExpanded }) => (
<>
<AccordionButton>
<AccordionButton
onClick={() =>
AmpTrackExpand(
!isExpanded ? "expand" : "collapse",
{
type: "unsupported_pool",
id: item.id,
},
"pool-list-page"
)
}
>
<Flex gap={4} flexDirection="column" p={4} w="full">
<Flex alignItems="center" justifyContent="space-between">
<PoolHeader
Expand All @@ -66,7 +78,12 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
<Tooltip label="See in osmosis.zone">
<Link
href={`${getPoolUrl(currentChainName)}/${item.id}`}
onClick={(e) => e.stopPropagation()}
onClick={(e) => {
AmpTrackWebsite(
`${getPoolUrl(currentChainName)}/${item.id}`
);
e.stopPropagation();
}}
target="_blank"
rel="noopener noreferrer"
>
Expand All @@ -78,21 +95,18 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
/>
</Link>
</Tooltip>
{isExpanded ? (
<StyledIconButton
variant="none"
aria-label="external"
_hover={{ backgroundColor: hoverBgColor }}
icon={<CustomIcon name="chevron-up" />}
/>
) : (
<StyledIconButton
variant="none"
aria-label="external"
_hover={{ backgroundColor: hoverBgColor }}
icon={<CustomIcon name="chevron-down" />}
/>
)}
<StyledIconButton
variant="none"
aria-label="external"
_hover={{ backgroundColor: hoverBgColor }}
icon={
<CustomIcon
name="chevron-down"
transform={isExpanded ? "rotate(180deg)" : "rotate(0)"}
transition="all .25s ease-in-out"
/>
}
/>
</Flex>
</Flex>
</Flex>
Expand Down Expand Up @@ -144,13 +158,16 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
View Pool Details
</Button>
<Button
onClick={() =>
onClick={() => {
AmpTrackWebsite(
`${getPoolUrl(currentChainName)}/${item.id}`
);
window.open(
`${getPoolUrl(currentChainName)}/${item.id}`,
"_blank",
"noopener,noreferrer"
)
}
);
}}
size="sm"
variant="outline-primary"
rightIcon={
Expand Down
75 changes: 41 additions & 34 deletions src/lib/pages/pools/components/unsupportedSection/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ import InputWithIcon from "lib/components/InputWithIcon";
import { Pagination } from "lib/components/pagination";
import { usePaginator } from "lib/components/pagination/usePaginator";
import { Order_By } from "lib/gql/graphql";
import {
AmpTrackExpandAll,
AmpTrackUseSort,
AmpTrackUseToggle,
} from "lib/services/amplitude";
import { usePoolListCountQuery } from "lib/services/poolService";
import type { PoolTypeFilter } from "lib/types";

Expand Down Expand Up @@ -52,9 +57,8 @@ export const UnsupportedSection = ({

const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);

const updateExpandedIndexes = (indexes: number[]) => {
const updateExpandedIndexes = (indexes: number[]) =>
setExpandedIndexes(indexes);
};

const {
pagesQuantity,
Expand Down Expand Up @@ -99,14 +103,16 @@ export const UnsupportedSection = ({
return (
<>
<Flex alignItems="center" mb={12}>
<Flex grow="2" gap={4}>
<Flex grow={2} gap={4}>
<InputWithIcon
placeholder="Search with Pool ID or Token ID"
value={keyword}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setValue("keyword", e.target.value)
}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
setCurrentPage(1);
setValue("keyword", e.target.value);
}}
size="lg"
action="unsupported-pool-list-search"
/>
<FilterByPoolType
initialSelected="All"
Expand All @@ -120,9 +126,13 @@ export const UnsupportedSection = ({
<Switch
size="md"
defaultChecked={isSuperfluidOnly}
onChange={(e) => setValue("isSuperfluidOnly", e.target.checked)}
onChange={(e) => {
setCurrentPage(1);
AmpTrackUseToggle("isSuperfluidOnly", e.target.checked);
setValue("isSuperfluidOnly", e.target.checked);
}}
/>
<FormLabel mb="0" cursor="pointer">
<FormLabel mb={0} cursor="pointer">
<Text display="flex" gap={2} alignItems="center">
Show only
<Image boxSize={4} src={SUPERFLUID_ICON} />
Expand All @@ -143,41 +153,38 @@ export const UnsupportedSection = ({
</Badge>
</Flex>
<Flex gap={4}>
<Flex gap="2" alignItems="center">
<Flex gap={2} alignItems="center">
<Text variant="body2" color="text.dark">
Sort Pool ID:
</Text>
{showNewest ? (
<Button
variant="outline-gray"
size="sm"
pr="1"
onClick={() => setShowNewest(!showNewest)}
>
Newest First
<CustomIcon name="arrow-down" color="text.dark" />
</Button>
) : (
<Button
variant="outline-gray"
size="sm"
pr="1"
onClick={() => setShowNewest(!showNewest)}
>
Oldest First
<CustomIcon name="arrow-up" color="text.dark" />
</Button>
)}
<Button
variant="outline-gray"
size="sm"
pr={1}
onClick={() => {
const isDesc = !showNewest;
AmpTrackUseSort(isDesc ? "Descending" : "Ascending");
setShowNewest(isDesc);
}}
>
{showNewest ? "Newest First" : "Oldest First"}
<CustomIcon
name={showNewest ? "arrow-down" : "arrow-up"}
color="text.dark"
/>
</Button>
</Flex>
<Flex gap="2" alignItems="center">
<Flex gap={2} alignItems="center">
<Button
variant="outline-gray"
w="94px"
size="sm"
onClick={() =>
setExpandedIndexes((prev) =>
prev.length ? [] : Array.from(Array(pageSize).keys())
)
setExpandedIndexes((prev) => {
const isExpand = !prev.length;
AmpTrackExpandAll(isExpand ? "expand" : "collapse");
songwongtp marked this conversation as resolved.
Show resolved Hide resolved
return isExpand ? Array.from(Array(pageSize).keys()) : [];
})
}
>
{expandedIndexes.length ? "Collapse All" : "Expand All"}
Expand Down
20 changes: 16 additions & 4 deletions src/lib/pages/pools/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { Heading, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

import { CustomTab } from "lib/components/CustomTab";
import { LoadingOverlay } from "lib/components/LoadingOverlay";
import PageContainer from "lib/components/PageContainer";
import { AmpEvent, AmpTrack, AmpTrackUseTab } from "lib/services/amplitude";
import { usePoolListCountQuery } from "lib/services/poolService";

import { SupportedSection } from "./components/supportedSection";
Expand All @@ -15,6 +17,7 @@ enum TabIndex {
}

export const PoolIndex = () => {
const router = useRouter();
const [tabIndex, setTabIndex] = useState(TabIndex.Supported);

const { data: supportedPoolCount, isLoading: isLoadingSupported } =
Expand All @@ -32,16 +35,25 @@ export const PoolIndex = () => {
search: "",
});

const handleTabChange = (tab: TabIndex) => {
AmpTrackUseTab(TabIndex[tab]);
setTabIndex(tab);
};

const sectionHeaderId = "poolListTab";

useEffect(() => {
if (router.isReady) AmpTrack(AmpEvent.TO_POOL_LIST);
}, [router.isReady]);

useEffect(() => {
if (
supportedPoolCount !== undefined &&
unsupportedPoolCount !== undefined
) {
if (supportedPoolCount === 0 && unsupportedPoolCount > 0)
setTabIndex(TabIndex.Unsupported);
else setTabIndex(TabIndex.Supported);
handleTabChange(TabIndex.Unsupported);
else handleTabChange(TabIndex.Supported);
}
}, [supportedPoolCount, unsupportedPoolCount]);

Expand All @@ -55,13 +67,13 @@ export const PoolIndex = () => {
<TabList my={8} borderBottom="1px" borderColor="pebble.800">
<CustomTab
count={supportedPoolCount ?? 0}
onClick={() => setTabIndex(TabIndex.Supported)}
onClick={() => handleTabChange(TabIndex.Supported)}
>
Pools
</CustomTab>
<CustomTab
count={unsupportedPoolCount ?? 0}
onClick={() => setTabIndex(TabIndex.Unsupported)}
onClick={() => handleTabChange(TabIndex.Unsupported)}
>
Pools with unsupported tokens
</CustomTab>
Expand Down
Loading