From 035aa2966bee19edc58df63df0576f22567618dc Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 25 May 2023 14:23:36 +0700 Subject: [PATCH 1/6] feat: add amp pool detail --- CHANGELOG.md | 1 + src/lib/components/ValidatorBadge.tsx | 3 ++ src/lib/components/action-msg/MsgToken.tsx | 3 ++ .../pool-details/JsonModalButton.tsx | 6 ++- .../components/pool-details/PoolAssets.tsx | 6 +++ .../pool-details/PoolRelatedTxs.tsx | 36 +++++++++++++-- .../pool-details/header/PoolInfo.tsx | 4 +- .../components/pool-details/header/index.tsx | 9 +++- .../tables/pool-assets/PoolAssetsTableRow.tsx | 1 + .../tables/pool-txs/PoolTxsMsg.tsx | 24 +++++++++- .../pool-txs/messages/PoolOtherMsgs.tsx | 2 +- .../messages/components/AssetCard.tsx | 6 +-- .../messages/components/PoolAssetCard.tsx | 3 ++ .../messages/components/PoolLogoLink.tsx | 10 +++- .../tables/pool-txs/messages/index.tsx | 46 +++++++++++++++++-- .../messages/lockup/MsgLockTokensAction.tsx | 5 +- .../messages/lockup/MsgLockTokensDetail.tsx | 5 ++ .../messages/lp/MsgExitPoolAction.tsx | 6 ++- .../messages/lp/MsgExitPoolDetail.tsx | 5 ++ .../lp/MsgExitSwapExternAmountOutAction.tsx | 6 ++- .../lp/MsgExitSwapExternAmountOutDetail.tsx | 5 ++ .../lp/MsgExitSwapShareAmountInAction.tsx | 6 ++- .../lp/MsgExitSwapShareAmountInDetail.tsx | 5 ++ .../messages/lp/MsgJoinPoolAction.tsx | 6 ++- .../messages/lp/MsgJoinPoolDetail.tsx | 5 ++ .../lp/MsgJoinSwapExternAmountInAction.tsx | 6 ++- .../lp/MsgJoinSwapExternAmountInDetail.tsx | 5 ++ .../lp/MsgJoinSwapShareAmountOutAction.tsx | 6 ++- .../lp/MsgJoinSwapShareAmountOutDetail.tsx | 5 ++ .../messages/lp/components/PoolAssetsGrid.tsx | 3 ++ .../messages/lp/components/PoolLPCard.tsx | 3 ++ .../MsgLockAndSuperfluidDelegateAction.tsx | 5 +- .../MsgLockAndSuperfluidDelegateDetail.tsx | 11 +++-- .../swap/MsgSwapExactAmountInAction.tsx | 4 ++ .../swap/MsgSwapExactAmountInDetail.tsx | 5 ++ .../swap/MsgSwapExactAmountOutAction.tsx | 4 ++ .../swap/MsgSwapExactAmountOutDetail.tsx | 5 ++ .../messages/swap/components/PoolRoute.tsx | 9 +++- .../messages/swap/components/PoolSwap.tsx | 4 ++ src/lib/pages/pools/poolId.tsx | 6 +++ src/lib/services/amplitude.tsx | 8 +++- 41 files changed, 269 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c7d8136ad..ea74a15c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features +- [#358](https://github.com/alleslabs/celatone-frontend/pull/355) Add Amp for Pool Detail 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 diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx index c2463cb5e..b1a96ef07 100644 --- a/src/lib/components/ValidatorBadge.tsx +++ b/src/lib/components/ValidatorBadge.tsx @@ -10,6 +10,7 @@ import { removeSpecialChars } from "lib/utils"; interface ValidatorBadgeProps { validator: ValidatorInfo | null; badgeSize?: ImageProps["boxSize"]; + ampCopierSection?: string; } const FallbackRender = ({ @@ -33,6 +34,7 @@ const FallbackRender = ({ export const ValidatorBadge = ({ validator, badgeSize = 10, + ampCopierSection, }: ValidatorBadgeProps) => { const { currentChainName } = useWallet(); return ( @@ -56,6 +58,7 @@ export const ValidatorBadge = ({ type="validator_address" textFormat="ellipsis" showCopyOnHover + ampCopierSection={ampCopierSection} /> ) : ( diff --git a/src/lib/components/action-msg/MsgToken.tsx b/src/lib/components/action-msg/MsgToken.tsx index 0b96ced00..5fdc446c7 100644 --- a/src/lib/components/action-msg/MsgToken.tsx +++ b/src/lib/components/action-msg/MsgToken.tsx @@ -10,6 +10,7 @@ interface MsgTokenProps { symbol?: string; precision?: number; fontWeight?: number; + ampCopierSection?: string; } export const MsgToken = ({ @@ -17,6 +18,7 @@ export const MsgToken = ({ symbol, precision, fontWeight = 600, + ampCopierSection, }: MsgTokenProps) => ( @@ -37,6 +39,7 @@ export const MsgToken = ({ copyLabel="Token ID Copied!" display="none" ml="4px" + amptrackSection={ampCopierSection} /> ); diff --git a/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx b/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx index c95f10810..8a40b689b 100644 --- a/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx +++ b/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx @@ -13,6 +13,7 @@ import { import { CustomIcon } from "lib/components/icon"; import JsonReadOnly from "lib/components/json/JsonReadOnly"; +import { AmpTrackViewJson } from "lib/services/amplitude"; import { jsonPrettify } from "lib/utils"; interface JsonModalButtonProps { @@ -41,7 +42,10 @@ export const JsonModalButton = ({ m={0} /> } - onClick={onOpen} + onClick={() => { + AmpTrackViewJson(`pool_page_(${modalHeader})`); + onOpen(); + }} > View JSON diff --git a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx index d99c6cfb3..204ca2a15 100644 --- a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx +++ b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx @@ -4,6 +4,7 @@ import big from "big.js"; import Link from "next/link"; import { CustomIcon } from "lib/components/icon"; +import { AmpTrackWebsite } from "lib/services/amplitude"; import type { PoolDetail, USD } from "lib/types"; import { formatPrice } from "lib/utils"; @@ -47,6 +48,11 @@ export const PoolAssets = ({ pool }: PoolAssetsProps) => { href="https://docs.osmosis.zone/osmosis-core/modules/gamm#weights" target="_blank" rel="noopener noreferrer" + onClick={() => + AmpTrackWebsite( + "https://docs.osmosis.zone/osmosis-core/modules/gamm#weights" + ) + } > diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx index cfc315b5e..d06b62ba7 100644 --- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx +++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx @@ -10,6 +10,7 @@ import { import { usePoolTxsCount } from "../../data"; import { CustomTab } from "lib/components/CustomTab"; +import { AmpTrackUseTab } from "lib/services/amplitude"; import type { PoolDetail } from "lib/types"; import { PoolRelatedTxsTable } from "./tables/pool-txs"; @@ -45,12 +46,37 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => { borderBottom="1px" borderColor="pebble.800" > - All - Swap - LP - Bonding + AmpTrackUseTab("All")} + > + All + + AmpTrackUseTab("Swap")} + > + Swap + + AmpTrackUseTab("LP")} + > + LP + + AmpTrackUseTab("Bonding")} + > + Bonding + {pool.isSuperfluid && ( - Superfluid + AmpTrackUseTab("Superfluid")} + > + Superfluid + )} diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx index 5f7f63a91..f93530360 100644 --- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx +++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx @@ -29,10 +29,10 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => { @@ -41,6 +41,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => { value={(pool.blockHeight ?? "N/A").toString()} showCopyOnHover isReadOnly={!pool.blockHeight} + ampCopierSection="pool_info" /> @@ -51,6 +52,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => { showCopyOnHover textFormat="truncate" w="140px" + ampCopierSection="pool_info" /> { const { currentChainName } = useWallet(); const lcdEndpoint = useLCDEndpoint(); - const openPoolLcd = () => + const openPoolLcd = () => { + AmpTrackViewJson("pool_page_pool_lcd"); openNewTab(`${lcdEndpoint}/osmosis/gamm/v1beta1/pools/${pool.id}`); - const openOsmosisPool = () => + }; + const openOsmosisPool = () => { + AmpTrackWebsite(`${getPoolUrl(currentChainName)}/${pool.id}`); openNewTab(`${getPoolUrl(currentChainName)}/${pool.id}`); + }; return ( <> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx index 3ddb029bc..3813a67f6 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx @@ -69,6 +69,7 @@ export const PoolAssetsTableRow = ({ value={token.denom} copyLabel="Token ID Copied!" ml={0} + amptrackSection="pool_assets" /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx index 1c41da4be..a1d7046fb 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx @@ -4,6 +4,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink"; import { CustomIcon } from "lib/components/icon"; import { TableNoBorderRow } from "lib/components/table"; import { Tooltip } from "lib/components/Tooltip"; +import { AmpTrackExpand } from "lib/services/amplitude"; import type { AssetInfosOpt } from "lib/services/assetService"; import type { Message, Option, PoolDetail, Transaction } from "lib/types"; import { dateFromNow, formatUTC } from "lib/utils"; @@ -54,9 +55,18 @@ export const PoolTxsMsg = ({ { + if (message) { + AmpTrackExpand( + !isOpen ? "expand" : "collapse", + "pool_tx_msg", + `pool_txs-${message.type.split(".")[-1]}` + ); + } + onToggle(); + }} > {transaction.success && message && ( @@ -75,6 +85,7 @@ export const PoolTxsMsg = ({ value={transaction.hash.toLocaleUpperCase()} type="tx_hash" showCopyOnHover + ampCopierSection={`pool_txs-${transaction.messages.length}-tx_hash`} /> {transaction.messages.length > 1 && ( @@ -96,7 +107,12 @@ export const PoolTxsMsg = ({ {message ? ( - + ) : ( )} @@ -107,6 +123,7 @@ export const PoolTxsMsg = ({ value={transaction.sender} type="user_address" showCopyOnHover + ampCopierSection={`pool_txs-${transaction.messages.length}-sender`} /> @@ -139,6 +156,9 @@ export const PoolTxsMsg = ({ pool={pool} assetInfos={assetInfos} isOpened={isOpen} + ampCopierSection={`pool_txs-${ + message.type.split(".")[-1] + }-detail`} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx index eb236c773..472c539c5 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx @@ -10,7 +10,7 @@ interface PoolOtherMsgsProps { export const PoolOtherMsgs = ({ otherMsgs, isIbc }: PoolOtherMsgsProps) => { const typePaths = Object.keys(otherMsgs); return ( - + Total {typePaths.map((typePath, index) => { const type = extractMsgType(typePath); 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 cc3412d0d..350b804df 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 @@ -17,14 +17,14 @@ interface AssetCardProps extends FlexProps { amount: string; denom: string; assetInfo: Option; - amptrackSection?: string; + ampCopierSection?: string; } export const AssetCard = ({ amount, denom, assetInfo, - amptrackSection, + ampCopierSection, ...cardProps }: AssetCardProps) => { const symbol = assetInfo?.symbol ?? denom; @@ -69,7 +69,7 @@ export const AssetCard = ({ copyLabel="Token ID Copied!" display="none" ml="1px" - amptrackSection={amptrackSection} + amptrackSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx index e2f04d780..d2796aeaf 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx @@ -20,6 +20,7 @@ interface PoolAssetCardProps { poolAsset: Coin; poolAssetInfo: Option; isOpened: boolean; + ampCopierSection?: string; } export const PoolAssetCard = ({ @@ -29,6 +30,7 @@ export const PoolAssetCard = ({ poolAsset, poolAssetInfo, isOpened, + ampCopierSection, }: PoolAssetCardProps) => { const { data: poolAssets, isLoading } = usePoolAssetsbyPoolIds( [poolId], @@ -104,6 +106,7 @@ export const PoolAssetCard = ({ type="pool_id" value={poolId.toString()} showCopyOnHover + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx index f1bff98fa..691692aed 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx @@ -6,9 +6,10 @@ import type { PoolDetail } from "lib/types"; interface PoolLogoLinkProps { pool: PoolDetail; + ampCopierSection?: string; } -export const PoolLogoLink = ({ pool }: PoolLogoLinkProps) => ( +export const PoolLogoLink = ({ pool, ampCopierSection }: PoolLogoLinkProps) => ( ( marginLeft={-4} minW={0} /> - + ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx index 84650d945..421ba9a6f 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx @@ -34,10 +34,12 @@ export const PoolMsgAction = ({ msg, pool, assetInfos, + ampCopierSection, }: { msg: Message; pool: PoolDetail; assetInfos: AssetInfosOpt; + ampCopierSection?: string; }) => { const { type, detail, log } = msg; switch (type) { @@ -45,20 +47,33 @@ export const PoolMsgAction = ({ case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn": { const details = extractTxDetails(type, detail, log); return ( - + ); } case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut": case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut": { const details = extractTxDetails(type, detail, log); return ( - + ); } case "/osmosis.gamm.v1beta1.MsgJoinPool": { const details = extractTxDetails(type, detail, log); return ( - + ); } case "/osmosis.gamm.v1beta1.MsgJoinSwapExternAmountIn": { @@ -68,6 +83,7 @@ export const PoolMsgAction = ({ msg={details} pool={pool} assetInfos={assetInfos} + ampCopierSection={ampCopierSection} /> ); } @@ -78,13 +94,19 @@ export const PoolMsgAction = ({ msg={details} pool={pool} assetInfos={assetInfos} + ampCopierSection={ampCopierSection} /> ); } case "/osmosis.gamm.v1beta1.MsgExitPool": { const details = extractTxDetails(type, detail, log); return ( - + ); } case "/osmosis.gamm.v1beta1.MsgExitSwapShareAmountIn": { @@ -94,6 +116,7 @@ export const PoolMsgAction = ({ msg={details} pool={pool} assetInfos={assetInfos} + ampCopierSection={ampCopierSection} /> ); } @@ -104,6 +127,7 @@ export const PoolMsgAction = ({ msg={details} pool={pool} assetInfos={assetInfos} + ampCopierSection={ampCopierSection} /> ); } @@ -114,6 +138,7 @@ export const PoolMsgAction = ({ msg={details} pool={pool} assetInfos={assetInfos} + ampCopierSection={ampCopierSection} /> ); } @@ -124,6 +149,7 @@ export const PoolMsgAction = ({ msg={details} pool={pool} assetInfos={assetInfos} + ampCopierSection={ampCopierSection} /> ); } @@ -141,6 +167,7 @@ export const PoolMsgDetail = ({ pool, assetInfos, isOpened, + ampCopierSection, }: { txHash: string; blockHeight: number; @@ -149,6 +176,7 @@ export const PoolMsgDetail = ({ pool: PoolDetail; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; }) => { const { type, detail, log } = msg; switch (type) { @@ -163,6 +191,7 @@ export const PoolMsgDetail = ({ msg={details} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } @@ -177,6 +206,7 @@ export const PoolMsgDetail = ({ msg={details} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } @@ -190,6 +220,7 @@ export const PoolMsgDetail = ({ msg={details} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } @@ -203,6 +234,7 @@ export const PoolMsgDetail = ({ msg={details} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } @@ -216,6 +248,7 @@ export const PoolMsgDetail = ({ msg={details} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } @@ -229,6 +262,7 @@ export const PoolMsgDetail = ({ msg={details} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } @@ -242,6 +276,7 @@ export const PoolMsgDetail = ({ msg={details} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } @@ -255,6 +290,7 @@ export const PoolMsgDetail = ({ msg={details} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } @@ -269,6 +305,7 @@ export const PoolMsgDetail = ({ pool={pool} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } @@ -283,6 +320,7 @@ export const PoolMsgDetail = ({ pool={pool} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); } diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx index bfeefd3c1..1fb6324e7 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx @@ -11,12 +11,14 @@ interface MsgLockTokensActionProps { msg: MsgLockTokensDetails; pool: PoolDetail; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgLockTokensAction = ({ msg, pool, assetInfos, + ampCopierSection, }: MsgLockTokensActionProps) => { const poolDenom = getPoolDenom(pool.id.toString()); const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? { @@ -32,9 +34,10 @@ export const MsgLockTokensAction = ({ symbol={poolAssetInfo?.symbol} precision={poolAssetInfo?.precision} fontWeight={700} + ampCopierSection={ampCopierSection} /> to - + with {Number(msg.duration) / (24 * 60 * 60 * 1e9)} diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx index a5db92991..c78894ce4 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx @@ -18,6 +18,7 @@ interface MsgLockTokensDetailProps { pool: PoolDetail; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgLockTokensDetail = ({ @@ -28,6 +29,7 @@ export const MsgLockTokensDetail = ({ pool, assetInfos, isOpened, + ampCopierSection, }: MsgLockTokensDetailProps) => { const poolDenom = getPoolDenom(pool.id.toString()); const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? { @@ -59,6 +61,7 @@ export const MsgLockTokensDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -76,6 +79,7 @@ export const MsgLockTokensDetail = ({ symbol={poolAssetInfo?.symbol} precision={poolAssetInfo?.precision} fontWeight={700} + ampCopierSection={ampCopierSection} /> @@ -87,6 +91,7 @@ export const MsgLockTokensDetail = ({ poolAsset={poolAsset} poolAssetInfo={poolAssetInfo} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx index 387d83dbe..8db0566fb 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx @@ -12,12 +12,14 @@ interface MsgExitPoolActionProps { msg: MsgExitPoolDetails; pool: PoolDetail; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgExitPoolAction = ({ msg, pool, assetInfos, + ampCopierSection, }: MsgExitPoolActionProps) => { const poolDenom = getPoolDenom(msg.pool_id); const poolAssetInfo = assetInfos?.[poolDenom]; @@ -29,9 +31,10 @@ export const MsgExitPoolAction = ({ symbol={poolAssetInfo?.symbol} precision={poolAssetInfo?.precision} fontWeight={700} + ampCopierSection={ampCopierSection} /> from - + {msg.token_out_mins && ( )} @@ -48,6 +51,7 @@ export const MsgExitPoolAction = ({ symbol={outAssetInfo?.symbol} precision={outAssetInfo?.precision} fontWeight={400} + ampCopierSection={ampCopierSection} /> ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx index 055500562..1de9944d0 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx @@ -13,6 +13,7 @@ interface MsgExitPoolDetailProps { msg: MsgExitPoolDetails; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgExitPoolDetail = ({ @@ -22,6 +23,7 @@ export const MsgExitPoolDetail = ({ msg, assetInfos, isOpened, + ampCopierSection, }: MsgExitPoolDetailProps) => ( @@ -32,6 +34,7 @@ export const MsgExitPoolDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -42,6 +45,7 @@ export const MsgExitPoolDetail = ({ assetInfos={assetInfos} isJoin={false} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx index 06e6fd357..881500650 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx @@ -12,12 +12,14 @@ interface MsgExitSwapExternAmountOutActionProps { msg: MsgExitSwapExternAmountOutDetails; pool: PoolDetail; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgExitSwapExternAmountOutAction = ({ msg, pool, assetInfos, + ampCopierSection, }: MsgExitSwapExternAmountOutActionProps) => { const outAssetInfo = assetInfos?.[msg.token_out.denom]; const poolDenom = getPoolDenom(msg.pool_id); @@ -30,15 +32,17 @@ export const MsgExitSwapExternAmountOutAction = ({ symbol={poolAssetInfo?.symbol} precision={poolAssetInfo?.precision} fontWeight={400} + ampCopierSection={ampCopierSection} /> to - + ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx index 95a51b2b6..f8a083ead 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx @@ -13,6 +13,7 @@ interface MsgExitSwapExternAmountOutDetailProps { msg: MsgExitSwapExternAmountOutDetails; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgExitSwapExternAmountOutDetail = ({ @@ -22,6 +23,7 @@ export const MsgExitSwapExternAmountOutDetail = ({ msg, assetInfos, isOpened, + ampCopierSection, }: MsgExitSwapExternAmountOutDetailProps) => ( @@ -32,6 +34,7 @@ export const MsgExitSwapExternAmountOutDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -42,6 +45,7 @@ export const MsgExitSwapExternAmountOutDetail = ({ assetInfos={assetInfos} isJoin={false} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx index a6a20765f..4c5c63786 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx @@ -12,12 +12,14 @@ interface MsgExitSwapShareAmountInActionProps { msg: MsgExitSwapShareAmountInDetails; pool: PoolDetail; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgExitSwapShareAmountInAction = ({ msg, pool, assetInfos, + ampCopierSection, }: MsgExitSwapShareAmountInActionProps) => { const outAssetInfo = assetInfos?.[msg.token_out_denom]; const poolDenom = getPoolDenom(msg.pool_id); @@ -30,9 +32,10 @@ export const MsgExitSwapShareAmountInAction = ({ symbol={poolAssetInfo?.symbol} precision={poolAssetInfo?.precision} fontWeight={700} + ampCopierSection={ampCopierSection} /> to - + at least ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx index 0e55fe5d4..62bd53fd6 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx @@ -13,6 +13,7 @@ interface MsgExitSwapShareAmountInDetailProps { msg: MsgExitSwapShareAmountInDetails; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgExitSwapShareAmountInDetail = ({ @@ -22,6 +23,7 @@ export const MsgExitSwapShareAmountInDetail = ({ msg, assetInfos, isOpened, + ampCopierSection, }: MsgExitSwapShareAmountInDetailProps) => ( @@ -32,6 +34,7 @@ export const MsgExitSwapShareAmountInDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -42,6 +45,7 @@ export const MsgExitSwapShareAmountInDetail = ({ assetInfos={assetInfos} isJoin={false} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx index 908343389..a43856e68 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx @@ -12,12 +12,14 @@ interface MsgJoinPoolActionProps { msg: MsgJoinPoolDetails; pool: PoolDetail; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgJoinPoolAction = ({ msg, pool, assetInfos, + ampCopierSection, }: MsgJoinPoolActionProps) => { const poolDenom = getPoolDenom(msg.pool_id); const poolAssetInfo = assetInfos?.[poolDenom]; @@ -38,18 +40,20 @@ export const MsgJoinPoolAction = ({ symbol={inAssetInfo?.symbol} precision={inAssetInfo?.precision} fontWeight={400} + ampCopierSection={ampCopierSection} /> ); })} to - + ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx index 5c470c3d3..f9b49a4d9 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx @@ -13,6 +13,7 @@ interface MsgJoinPoolDetailProps { msg: MsgJoinPoolDetails; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgJoinPoolDetail = ({ @@ -22,6 +23,7 @@ export const MsgJoinPoolDetail = ({ msg, assetInfos, isOpened, + ampCopierSection, }: MsgJoinPoolDetailProps) => ( @@ -32,6 +34,7 @@ export const MsgJoinPoolDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -41,6 +44,7 @@ export const MsgJoinPoolDetail = ({ isJoin assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx index d35263107..7fe785a70 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx @@ -12,12 +12,14 @@ interface MsgJoinSwapExternAmountInActionProps { msg: MsgJoinSwapExternAmountInDetails; pool: PoolDetail; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgJoinSwapExternAmountInAction = ({ msg, pool, assetInfos, + ampCopierSection, }: MsgJoinSwapExternAmountInActionProps) => { const inAssetInfo = assetInfos?.[msg.token_in.denom]; const poolDenom = getPoolDenom(msg.pool_id); @@ -30,9 +32,10 @@ export const MsgJoinSwapExternAmountInAction = ({ symbol={inAssetInfo?.symbol} precision={inAssetInfo?.precision} fontWeight={700} + ampCopierSection={ampCopierSection} /> to - + at least ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx index 79ae9d427..e7b00c3f4 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx @@ -13,6 +13,7 @@ interface MsgJoinSwapExternAmountInDetailProps { msg: MsgJoinSwapExternAmountInDetails; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgJoinSwapExternAmountInDetail = ({ @@ -22,6 +23,7 @@ export const MsgJoinSwapExternAmountInDetail = ({ msg, assetInfos, isOpened, + ampCopierSection, }: MsgJoinSwapExternAmountInDetailProps) => ( @@ -32,6 +34,7 @@ export const MsgJoinSwapExternAmountInDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -41,6 +44,7 @@ export const MsgJoinSwapExternAmountInDetail = ({ isJoin assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx index ae05c3592..68636ccc1 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx @@ -12,12 +12,14 @@ interface MsgJoinSwapShareAmountOutActionProps { msg: MsgJoinSwapShareAmountOutDetails; pool: PoolDetail; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgJoinSwapShareAmountOutAction = ({ msg, pool, assetInfos, + ampCopierSection, }: MsgJoinSwapShareAmountOutActionProps) => { const inAssetInfo = assetInfos?.[msg.token_in_denom]; const poolDenom = getPoolDenom(msg.pool_id); @@ -30,15 +32,17 @@ export const MsgJoinSwapShareAmountOutAction = ({ symbol={inAssetInfo?.symbol} precision={inAssetInfo?.precision} fontWeight={400} + ampCopierSection={ampCopierSection} /> to - + ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx index e41376d60..5efc1769b 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx @@ -13,6 +13,7 @@ interface MsgJoinSwapShareAmountOutDetailProps { msg: MsgJoinSwapShareAmountOutDetails; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgJoinSwapShareAmountOutDetail = ({ @@ -22,6 +23,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({ msg, assetInfos, isOpened, + ampCopierSection, }: MsgJoinSwapShareAmountOutDetailProps) => ( @@ -32,6 +34,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -41,6 +44,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({ isJoin assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx index 1770e411e..8a26a3f2f 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx @@ -17,6 +17,7 @@ interface PoolAssetsGridProps { isJoin: boolean; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const PoolAssetsGrid = ({ @@ -27,6 +28,7 @@ export const PoolAssetsGrid = ({ isJoin, assetInfos, isOpened, + ampCopierSection, }: PoolAssetsGridProps) => { const { data: txData, isLoading } = useTxData(txHash, isOpened); if (!msgAssets && isLoading) return ; @@ -85,6 +87,7 @@ export const PoolAssetsGrid = ({ amount={asset.amount} denom={asset.denom} assetInfo={assetInfos?.[asset.denom]} + ampCopierSection={ampCopierSection} /> ))} diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx index a1252ea63..3ec7b7a6e 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx @@ -15,6 +15,7 @@ interface PoolLPCardProps { assetInfos: AssetInfosOpt; isJoin: boolean; isOpened: boolean; + ampCopierSection?: string; } export const PoolLPCard = ({ @@ -25,6 +26,7 @@ export const PoolLPCard = ({ assetInfos, isJoin, isOpened, + ampCopierSection, }: PoolLPCardProps) => { const { data: txData, isLoading } = useTxData(txHash, isOpened); if (!msgShareAmount && isLoading) return ; @@ -60,6 +62,7 @@ export const PoolLPCard = ({ poolAsset={{ amount: shareAmount, denom: poolDenom }} poolAssetInfo={assetInfos?.[poolDenom]} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx index f456048e5..5fc513d32 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx @@ -11,12 +11,14 @@ interface MsgLockAndSuperfluidDelegateActionProps { msg: MsgLockAndSuperfluidDelegateDetails; pool: PoolDetail; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgLockAndSuperfluidDelegateAction = ({ msg, pool, assetInfos, + ampCopierSection, }: MsgLockAndSuperfluidDelegateActionProps) => { const poolDenom = getPoolDenom(pool.id.toString()); const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? { @@ -32,9 +34,10 @@ export const MsgLockAndSuperfluidDelegateAction = ({ symbol={poolAssetInfo?.symbol} precision={poolAssetInfo?.precision} fontWeight={700} + ampCopierSection={ampCopierSection} /> to - + with 14 days unbonding diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx index fc61fb9e0..b58bdddea 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Text } from "@chakra-ui/react"; +import { Flex, Text } from "@chakra-ui/react"; import { PoolAssetCard } from "../components"; import { getPoolDenom } from "../utils"; @@ -19,6 +19,7 @@ interface MsgLockAndSuperfluidDelegateDetailProps { pool: PoolDetail; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgLockAndSuperfluidDelegateDetail = ({ @@ -29,6 +30,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({ pool, assetInfos, isOpened, + ampCopierSection, }: MsgLockAndSuperfluidDelegateDetailProps) => { const poolDenom = getPoolDenom(pool.id.toString()); const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? { @@ -69,6 +71,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -87,10 +90,11 @@ export const MsgLockAndSuperfluidDelegateDetail = ({ moniker: validator?.moniker, }} badgeSize={6} + ampCopierSection={ampCopierSection} /> - + - + ); }; diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx index 78e7b1d01..94ea17b38 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx @@ -8,11 +8,13 @@ import type { MsgSwapExactAmountInDetails } from "lib/utils/tx/types"; interface MsgSwapExactAmountInActionProps { msg: MsgSwapExactAmountInDetails; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgSwapExactAmountInAction = ({ msg, assetInfos, + ampCopierSection, }: MsgSwapExactAmountInActionProps) => { const inAssetInfo = assetInfos?.[msg.token_in.denom]; const tokenOutDenom = msg.routes.at(-1)?.tokenOutDenom ?? ""; @@ -25,6 +27,7 @@ export const MsgSwapExactAmountInAction = ({ symbol={inAssetInfo?.symbol} precision={inAssetInfo?.precision} fontWeight={700} + ampCopierSection={ampCopierSection} /> at least @@ -33,6 +36,7 @@ export const MsgSwapExactAmountInAction = ({ symbol={outAssetInfo?.symbol} precision={outAssetInfo?.precision} fontWeight={400} + ampCopierSection={ampCopierSection} /> ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx index 68f1dc2fb..bfe113da2 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx @@ -13,6 +13,7 @@ interface MsgSwapExactAmountInDetailProps { msg: MsgSwapExactAmountInDetails; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgSwapExactAmountInDetail = ({ @@ -22,6 +23,7 @@ export const MsgSwapExactAmountInDetail = ({ msg, assetInfos, isOpened, + ampCopierSection, }: MsgSwapExactAmountInDetailProps) => ( @@ -32,6 +34,7 @@ export const MsgSwapExactAmountInDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -40,11 +43,13 @@ export const MsgSwapExactAmountInDetail = ({ msgIndex={msgIndex} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx index af270c436..541c74107 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx @@ -8,11 +8,13 @@ import type { MsgSwapExactAmountOutDetails } from "lib/utils/tx/types"; interface MsgSwapExactAmountOutActionProps { msg: MsgSwapExactAmountOutDetails; assetInfos: AssetInfosOpt; + ampCopierSection?: string; } export const MsgSwapExactAmountOutAction = ({ msg, assetInfos, + ampCopierSection, }: MsgSwapExactAmountOutActionProps) => { const tokenInDenom = msg.routes.at(0)?.tokenInDenom ?? ""; const inAssetInfo = assetInfos?.[tokenInDenom]; @@ -25,6 +27,7 @@ export const MsgSwapExactAmountOutAction = ({ symbol={inAssetInfo?.symbol} precision={inAssetInfo?.precision} fontWeight={400} + ampCopierSection={ampCopierSection} /> ); diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx index c6ac9c13d..8bd5dd9d9 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx @@ -13,6 +13,7 @@ interface MsgSwapExactAmountOutDetailProps { msg: MsgSwapExactAmountOutDetails; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const MsgSwapExactAmountOutDetail = ({ @@ -22,6 +23,7 @@ export const MsgSwapExactAmountOutDetail = ({ msg, assetInfos, isOpened, + ampCopierSection, }: MsgSwapExactAmountOutDetailProps) => { const outDenoms = msg.routes .map((route) => route.tokenInDenom) @@ -41,6 +43,7 @@ export const MsgSwapExactAmountOutDetail = ({ value={blockHeight.toString()} type="block_height" showCopyOnHover + ampCopierSection={ampCopierSection} /> @@ -49,11 +52,13 @@ export const MsgSwapExactAmountOutDetail = ({ msgIndex={msgIndex} assetInfos={assetInfos} isOpened={isOpened} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx index 41bb1b381..06b81eef8 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx @@ -15,9 +15,15 @@ interface PoolRouteProps { routes: MsgSwapExactAmountInDetails["routes"]; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } -export const PoolRoute = ({ routes, assetInfos, isOpened }: PoolRouteProps) => { +export const PoolRoute = ({ + routes, + assetInfos, + isOpened, + ampCopierSection, +}: PoolRouteProps) => { const { data: poolAssets, isLoading } = usePoolAssetsbyPoolIds( routes.map((pool) => pool.poolId), isOpened @@ -87,6 +93,7 @@ export const PoolRoute = ({ routes, assetInfos, isOpened }: PoolRouteProps) => { type="pool_id" value={pool.poolId.toString()} showCopyOnHover + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx index 9d9633578..0a33d55cd 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx @@ -13,6 +13,7 @@ interface PoolSwapInterface { msgIndex: number; assetInfos: AssetInfosOpt; isOpened: boolean; + ampCopierSection?: string; } export const PoolSwap = ({ @@ -20,6 +21,7 @@ export const PoolSwap = ({ msgIndex, assetInfos, isOpened, + ampCopierSection, }: PoolSwapInterface) => { const { data: txData, isLoading } = useTxData(txHash, isOpened); if (isLoading) return ; @@ -50,6 +52,7 @@ export const PoolSwap = ({ amount={inAmount} denom={inDenom} assetInfo={assetInfos?.[inDenom]} + ampCopierSection={ampCopierSection} /> @@ -61,6 +64,7 @@ export const PoolSwap = ({ amount={outAmount} denom={outDenom} assetInfo={assetInfos?.[outDenom]} + ampCopierSection={ampCopierSection} /> diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx index 2ddbd1584..e98580cf4 100644 --- a/src/lib/pages/pools/poolId.tsx +++ b/src/lib/pages/pools/poolId.tsx @@ -1,9 +1,11 @@ import { useRouter } from "next/router"; +import { useEffect } from "react"; import { useInternalNavigate } from "lib/app-provider"; import { BackButton } from "lib/components/button"; import { Loading } from "lib/components/Loading"; import PageContainer from "lib/components/PageContainer"; +import { AmpEvent, AmpTrack } from "lib/services/amplitude"; import { getFirstQueryParam } from "lib/utils"; import { @@ -19,6 +21,10 @@ export const PoolId = () => { const poolId = Number(getFirstQueryParam(router.query.poolId)); const { pool, isLoading } = usePool(poolId); + useEffect(() => { + if (router.isReady) AmpTrack(AmpEvent.TO_POOL_DETAIL); + }, [router.isReady]); + if (isLoading) return ; if (!pool) return navigate({ pathname: `/pool` }); return ( diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx index 9c5bb0f27..4bcdd0b00 100644 --- a/src/lib/services/amplitude.tsx +++ b/src/lib/services/amplitude.tsx @@ -54,6 +54,7 @@ export enum AmpEvent { TO_TRANSACTION_DETAIL = "To Transaction Detail", TO_NOT_FOUND = "To 404 Not Found", TO_FAUCET = "To Faucet", + TO_POOL_DETAIL = "To Pool Detail", // ACTIONS ACTION_UPLOAD = "Act Upload", ACTION_INSTANTIATE = "Action Instantiate", @@ -209,7 +210,12 @@ export const AmpTrackCopier = (section: Option, type: string) => export const AmpTrackExpand = ( action: "expand" | "collapse", - component: "assets" | "json" | "permission_address" | "event_box", + component: + | "assets" + | "json" + | "permission_address" + | "event_box" + | "pool_tx_msg", section: Option ) => track(AmpEvent.USE_EXPAND, { action, component, section }); From 5005f9b1faf9c0cf3d33a0ac3ef2b82e52af6a8d Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 25 May 2023 14:25:55 +0700 Subject: [PATCH 2/6] fix: changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea74a15c1..818f8eb19 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features -- [#358](https://github.com/alleslabs/celatone-frontend/pull/355) Add Amp for Pool Detail page +- [#358](https://github.com/alleslabs/celatone-frontend/pull/358) Add Amp for Pool Detail 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 From 76cf6b1ad8f2b449d2efa8689e6ef0303f506b0e Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 25 May 2023 15:25:54 +0700 Subject: [PATCH 3/6] fix: assetcard width --- .../tables/pool-txs/messages/components/AssetCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 350b804df..62c35d36b 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 @@ -36,7 +36,7 @@ export const AssetCard = ({ minH="100px" gap={2} p={3} - minW="250px" + w="270px" background="pebble.800" borderRadius="8px" {...cardProps} From 3b785149a575d76dd928772a29c3ac62d22a3548 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 25 May 2023 15:37:19 +0700 Subject: [PATCH 4/6] fix: asset card --- .../tables/pool-txs/messages/components/AssetCard.tsx | 1 - .../tables/pool-txs/messages/swap/components/PoolSwap.tsx | 7 ++++++- 2 files changed, 6 insertions(+), 2 deletions(-) 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 62c35d36b..9a4ed247a 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 @@ -36,7 +36,6 @@ export const AssetCard = ({ minH="100px" gap={2} p={3} - w="270px" background="pebble.800" borderRadius="8px" {...cardProps} diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx index 0a33d55cd..09be97b31 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx @@ -43,7 +43,12 @@ export const PoolSwap = ({ const { amount: outAmount, denom: outDenom } = coinsFromStr(outAsset)[0]; return ( - +
From From 0f7ea1bfab8a48600df0de5283b69a24b25b95fb Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Thu, 25 May 2023 17:03:19 +0700 Subject: [PATCH 5/6] fix: msgtype --- .../pool-details/tables/pool-txs/PoolTxsMsg.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx index a1d7046fb..435699e37 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx @@ -38,7 +38,6 @@ export const PoolTxsMsg = ({ .concat("1fr") .join(" "); const isFirstSubRow = msgIndex === 0; - return ( ) : ( @@ -156,9 +157,9 @@ export const PoolTxsMsg = ({ pool={pool} assetInfos={assetInfos} isOpened={isOpen} - ampCopierSection={`pool_txs-${ - message.type.split(".")[-1] - }-detail`} + ampCopierSection={`pool_txs-${message.type + .split(".") + .at(-1)}-detail`} /> From 365f10c5af8c14881c2b80b0f2550e0c342b0879 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 30 May 2023 13:22:20 +0700 Subject: [PATCH 6/6] fix: msg type --- .../pool-details/tables/pool-txs/PoolTxsMsg.tsx | 14 ++++++-------- .../components/tx-message/TxMsgExpand.tsx | 5 ++--- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx index fb85a3795..c29d945a0 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx @@ -7,7 +7,7 @@ import { Tooltip } from "lib/components/Tooltip"; import { AmpTrackExpand } from "lib/services/amplitude"; import type { AssetInfosOpt } from "lib/services/assetService"; import type { Message, Option, PoolDetail, Transaction } from "lib/types"; -import { dateFromNow, formatUTC } from "lib/utils"; +import { dateFromNow, extractMsgType, formatUTC } from "lib/utils"; import { PoolMsgAction, PoolMsgDetail } from "./messages"; import { PoolOtherMsgs } from "./messages/PoolOtherMsgs"; @@ -62,7 +62,7 @@ export const PoolTxsMsg = ({ AmpTrackExpand({ action: !isOpen ? "expand" : "collapse", component: "pool_tx_msg", - info: { msgType: message.type.split(".").at(-1) }, + info: { msgType: extractMsgType(message.type) }, section: `pool_txs`, }); } @@ -112,9 +112,7 @@ export const PoolTxsMsg = ({ msg={message} pool={pool} assetInfos={assetInfos} - ampCopierSection={`pool_txs-${message.type - .split(".") - .at(-1)}-row`} + ampCopierSection={`pool_txs-${extractMsgType(message.type)}-row`} /> ) : ( @@ -159,9 +157,9 @@ export const PoolTxsMsg = ({ pool={pool} assetInfos={assetInfos} isOpened={isOpen} - ampCopierSection={`pool_txs-${message.type - .split(".") - .at(-1)}-detail`} + ampCopierSection={`pool_txs-${extractMsgType( + message.type + )}-detail`} /> diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx index f83c7b224..87c3ab54f 100644 --- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx +++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx @@ -11,7 +11,7 @@ import { CustomIcon } from "lib/components/icon"; import { AmpEvent, AmpTrack } from "lib/services/amplitude"; import type { Addr } from "lib/types"; import type { VoteOption } from "lib/utils"; -import { formatBalanceWithDenom, voteOption } from "lib/utils"; +import { extractMsgType, formatBalanceWithDenom, voteOption } from "lib/utils"; import type { TxMsgData } from "."; @@ -284,8 +284,7 @@ export const TxMsgExpand = ({ ); break; default: { - const msgType = type.split("."); - content = msgType[msgType.length - 1]; + content = extractMsgType(type); break; } }