From 98c5baeadaec3b9610b88da628d9ffbffa987912 Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Fri, 13 Oct 2023 21:15:44 +0530 Subject: [PATCH 1/6] slider in progress --- app/lp/components/ambientLPModal.tsx | 34 ++++++++++++++++----------- components/slider/slider.module.scss | 35 +++++++++++++++++++++------- components/slider/slider.tsx | 19 ++++++++++++++- 3 files changed, 66 insertions(+), 22 deletions(-) diff --git a/app/lp/components/ambientLPModal.tsx b/app/lp/components/ambientLPModal.tsx index 174c6980..fe2109b1 100644 --- a/app/lp/components/ambientLPModal.tsx +++ b/app/lp/components/ambientLPModal.tsx @@ -33,6 +33,7 @@ import { quoteTokenFromConcLiquidity, } from "@/utils/ambient/liquidity.utils"; import { percentOfAmount } from "@/utils/tokens/tokenMath.utils"; +import Slider from "@/components/slider/slider"; interface AmbientModalProps { pair: AmbientPair; @@ -100,9 +101,9 @@ export const AmbientModal = (props: AmbientModalProps) => { }, { title: "Remove", - isDisabled: - props.pair.userDetails?.defaultRangePosition.liquidity === - "0", + // isDisabled: + // props.pair.userDetails?.defaultRangePosition.liquidity === + // "0", content: (
@@ -330,16 +331,23 @@ const RemoveAmbientLiquidity = ({ return (
- setPercentToRemove(Number(e.target.value))} - type="number" - min={0} - max={100} - label="percent to remove" - error={Number(percentToRemove) < 0 || Number(percentToRemove) > 100} - errorMessage="Percentage must be between 0 and 100%" - /> + + setPercentToRemove(val)} + min={1} + max={100} + step={1} + label="percent to remove" + /> + setPercentToRemove(Number(e.target.value))} + type="number" + min={0} + max={100} + /> + { return (
+ + {props.label} + + { onChange={(e) => props.onChange(parseInt(e.target.value))} step={props.step} /> -
{props.label}
+
+
+
+
+
+
+
+
+
+
+
+
+
); }; From cb7d2e798e40b563349a6f808e8e8352535b7dd4 Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Fri, 13 Oct 2023 21:18:08 +0530 Subject: [PATCH 2/6] fixed rewards --- app/lp/components/rewards.tsx | 2 +- app/lp/page.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/lp/components/rewards.tsx b/app/lp/components/rewards.tsx index 3d7f3500..08bfd2fb 100644 --- a/app/lp/components/rewards.tsx +++ b/app/lp/components/rewards.tsx @@ -20,7 +20,7 @@ const Rewards = (props: Props) => { color: "#000", }} > - Accumulated WCanto + Rewards From 51c0fffdd93835145bb39cc9c7eff70bc3eb6178 Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Fri, 13 Oct 2023 22:15:18 +0530 Subject: [PATCH 3/6] added amount formatting --- components/amount/amount.tsx | 37 +++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/components/amount/amount.tsx b/components/amount/amount.tsx index 669b558f..2765b858 100644 --- a/components/amount/amount.tsx +++ b/components/amount/amount.tsx @@ -5,6 +5,7 @@ import styles from "./amount.module.scss"; import Container from "../container/container"; import { useState } from "react"; import clsx from "clsx"; +import Spacer from "../layout/spacer"; interface Props { IconUrl: string; title: string; @@ -19,6 +20,38 @@ interface Props { const Amount = (props: Props) => { const [focused, setFocused] = useState(false); + function commify(str: string) { + const parts = str.split("."); + return ( + parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + + (parts[1] ? "." + parts[1] : "") + ); + } + + function decommify(str: string) { + return str.replace(/,/g, ""); + } + + // shows only up to 4 decimals and ~ if there are more + function formatAmount(amount: string, decimals: number) { + const parts = amount.split("."); + if (parts.length === 1) { + return amount; + } else { + const decimalsPart = parts[1]; + if (decimalsPart.length > decimals) { + return `${parts[0]}.${decimalsPart.slice(0, decimals)}~`; + } else { + return amount; + } + } + } + + //commify and formatAmount + function displayAmount(amount: string, decimals: number) { + return formatAmount(commify(amount), decimals); + } + return ( { + setFocused(true)} onBlur={() => setFocused(false)} - value={props.value} + value={focused ? commify(props.value) : displayAmount(props.value, 4)} onChange={(e) => { + e.target.value = decommify(e.target.value); if (e.target.value === "" || e.target.value.match(/^\d*\.?\d*$/)) { props.onChange(e); } From 543bde72cb997a50554a8fc6e63b862fc5e9fafc Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Fri, 13 Oct 2023 22:20:50 +0530 Subject: [PATCH 4/6] fixed lp title layout --- app/lp/lp.module.scss | 2 +- app/lp/page.tsx | 23 +++++++++++++---------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/app/lp/lp.module.scss b/app/lp/lp.module.scss index c0f970d1..c9742be8 100644 --- a/app/lp/lp.module.scss +++ b/app/lp/lp.module.scss @@ -32,7 +32,7 @@ .rewards { display: flex; height: 150px; - width: 50%; + width: 100%; margin: 0 0 0 auto; padding: 1rem; background-color: var(--canto-color); diff --git a/app/lp/page.tsx b/app/lp/page.tsx index e84be7f1..e5186b3f 100644 --- a/app/lp/page.tsx +++ b/app/lp/page.tsx @@ -25,6 +25,7 @@ import { AmbientModal } from "./components/ambientLPModal"; import { AmbientTransactionParams } from "@/hooks/pairs/ambient/interfaces/ambientTxTypes"; import { displayAmount } from "@/utils/tokenBalances.utils"; import Rewards from "./components/rewards"; +import Container from "@/components/container/container"; export default function Page() { const { data: signer } = useWalletClient(); @@ -149,17 +150,19 @@ export default function Page() { )} - - LP Interface - - + + + LP Interface + + - + + {userCantoDexPairs.length + userAmbientPairs.length > 0 && ( Date: Sat, 14 Oct 2023 01:59:49 +0530 Subject: [PATCH 5/6] loading animation for LP --- app/lp/loading.tsx | 3 +++ app/lp/lp.module.scss | 38 ++++++++++++++++++++++++++++++++++++++ app/lp/page.tsx | 19 +++++++++++++++++++ 3 files changed, 60 insertions(+) create mode 100644 app/lp/loading.tsx diff --git a/app/lp/loading.tsx b/app/lp/loading.tsx new file mode 100644 index 00000000..65f6a90c --- /dev/null +++ b/app/lp/loading.tsx @@ -0,0 +1,3 @@ +export default function loading() { + return

loading

; +} diff --git a/app/lp/lp.module.scss b/app/lp/lp.module.scss index c9742be8..d164bbdd 100644 --- a/app/lp/lp.module.scss +++ b/app/lp/lp.module.scss @@ -40,3 +40,41 @@ align-items: center; box-shadow: var(--box-shadow, 3px 3px 0px 0px rgba(17, 17, 17, 0.15)); } + +.loading { + display: flex; + flex-direction: column; + align-items: center; + max-width: 1200px; + width: 100%; + margin: 2rem auto; + border-top: 1px solid var(--primary-90-color); + // border-bottom: 1px solid var(--primary-90-color); + position: relative; + padding-top: 2rem; + + &::before { + content: ""; + position: absolute; + top: -1px; + left: 0; + width: calc(100% - 1px); + height: 10px; + border-left: 1px solid var(--primary-90-color); + border-right: 1px solid var(--primary-90-color); + } + + animation: loading 1.4s infinite ease-in; + animation-delay: 0; + + @keyframes loading { + to { + width: 100%; + opacity: 1; + } + from { + width: 10%; + opacity: 0; + } + } +} diff --git a/app/lp/page.tsx b/app/lp/page.tsx index e5186b3f..2703bd76 100644 --- a/app/lp/page.tsx +++ b/app/lp/page.tsx @@ -26,9 +26,11 @@ import { AmbientTransactionParams } from "@/hooks/pairs/ambient/interfaces/ambie import { displayAmount } from "@/utils/tokenBalances.utils"; import Rewards from "./components/rewards"; import Container from "@/components/container/container"; +import { useEffect, useState } from "react"; export default function Page() { const { data: signer } = useWalletClient(); + const [isLoading, setIsLoading] = useState(true); const chainId = signer?.chain.id === 7701 ? 7701 : 7700; const txStore = useStore(useTransactionStore, (state) => state); @@ -129,6 +131,23 @@ export default function Page() { /** general selection */ const { pair: selectedPair, setPair } = selection; + useEffect(() => { + // balances are loaded + if ( + cantoDex.position.totalRewards !== undefined && + sortedPairs.length !== 0 && + sortedPairs[0].clmData?.userDetails?.balanceOfCToken !== undefined && + sortedPairs[0].clmData?.userDetails?.balanceOfUnderlying !== undefined && + sortedPairs[0].clmData?.userDetails?.supplyBalanceInUnderlying !== + undefined + ) { + setIsLoading(false); + } + }, [sortedPairs, cantoDex.position.totalRewards]); + + if (isLoading) { + return
{""}
; + } //main content return ( From e1399f73a2ef789f2f03dc0fccc0fe669ca89196 Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Sat, 14 Oct 2023 02:26:13 +0530 Subject: [PATCH 6/6] added divider and fixed bugs --- app/lp/components/stakeLPModal.tsx | 2 +- app/lp/lp.module.scss | 27 +++++++++++++++++++++++---- app/lp/page.tsx | 2 +- 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/app/lp/components/stakeLPModal.tsx b/app/lp/components/stakeLPModal.tsx index b4bb64d5..e9cef6bf 100644 --- a/app/lp/components/stakeLPModal.tsx +++ b/app/lp/components/stakeLPModal.tsx @@ -58,7 +58,7 @@ export const StakeLPModal = (props: Props) => { price={cToken.price} /> - LP Interface + LP