Merge pull request #79 from Plex-Engineer/homepage

Homepage

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;
@@ -93,9 +94,9 @@ export const AmbientModal = (props: AmbientModalProps) => {
               },
               {
                 title: "Remove",
-                isDisabled:
-                  props.pair.userDetails?.defaultRangePosition.liquidity ===
-                  "0",
+                // isDisabled:
+                //   props.pair.userDetails?.defaultRangePosition.liquidity ===
+                //   "0",
                 content: (
                   <Container width="100%" margin="sm">
                     <div className={styles.iconTitle}>
@@ -316,16 +317,23 @@ const RemoveAmbientLiquidity = ({
   return (
     <div>
       <Spacer height="10px" />
-      <Input
-        value={percentToRemove.toString()}
-        onChange={(e) => 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%"
-      />
+      <Container direction="row">
+        <Slider
+          value={percentToRemove}
+          onChange={(val) => setPercentToRemove(val)}
+          min={1}
+          max={100}
+          step={1}
+          label="percent to remove"
+        />
+        <Input
+          value={percentToRemove.toString()}
+          onChange={(e) => setPercentToRemove(Number(e.target.value))}
+          type="number"
+          min={0}
+          max={100}
+        />
+      </Container>
       <Spacer height="20px" />
 
       <Text

app/lp/components/rewards.tsx

@@ -20,7 +20,7 @@ const Rewards = (props: Props) => {
             color: "#000",
           }}
         >
-          Accumulated WCanto
+          Rewards
         </Text>
 
         <Container

app/lp/components/stakeLPModal.tsx

@@ -58,7 +58,7 @@ export const StakeLPModal = (props: Props) => {
           price={cToken.price}
         />
         <CTokenAmountCard
-          name="Staked Amount"
+          name="Staked Balance"
           amount={cToken.userDetails?.supplyBalanceInUnderlying ?? "0"}
           decimals={cToken.underlying.decimals}
           symbol={""}

app/lp/loading.tsx

@@ -0,0 +1,3 @@
+export default function loading() {
+  return <h2>loading</h2>;
+}

app/lp/lp.module.scss

@@ -20,23 +20,80 @@
     border-left: 1px solid var(--primary-90-color);
     border-right: 1px solid var(--primary-90-color);
   }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1px;
+    height: 10px;
+    border-left: 1px solid var(--primary-90-color);
+  }
 }
 
 .title {
   font-size: 32px !important;
-  text-align: left;
   width: 100%;
-  max-width: 1500px;
 }
 
 .rewards {
   display: flex;
   height: 150px;
-  width: 50%;
-  margin: 0 0 0 auto;
+  width: calc(100% - 2rem);
   padding: 1rem;
   background-color: var(--canto-color);
   justify-content: space-between;
   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);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1px;
+    height: 10px;
+    border-left: 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;
+    }
+  }
+}

app/lp/page.tsx

@@ -25,9 +25,12 @@ 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";
+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);
@@ -128,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 <div className={styles.loading}>{""}</div>;
+  }
 
   //main content
   return (
@@ -149,17 +169,19 @@ export default function Page() {
         )}
       </Modal>
 
-      <Text size="x-lg" className={styles.title}>
-        LP Interface
-      </Text>
-      <Spacer height="30px" />
+      <Container direction="row" gap={"auto"} width="100%">
+        <Text size="x-lg" className={styles.title}>
+          LP
+        </Text>
+        <Spacer height="30px" />
 
-      <Rewards
-        onClick={sendClaimRewardsFlow}
-        value={displayAmount(cantoDex.position.totalRewards, 18, {
-          symbol: "WCANTO",
-        })}
-      />
+        <Rewards
+          onClick={sendClaimRewardsFlow}
+          value={displayAmount(cantoDex.position.totalRewards, 18, {
+            precision: 4,
+          })}
+        />
+      </Container>
       <Spacer height="30px" />
       {userCantoDexPairs.length + userAmbientPairs.length > 0 && (
         <Table

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 (
     <Container
       direction="row"
@@ -68,11 +101,13 @@ const Amount = (props: Props) => {
           </Text>
         </span>
       </Container>
+      <Spacer width="20px" />
       <input
         onFocus={() => 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);
           }

components/slider/slider.module.scss

@@ -1,6 +1,7 @@
 .container {
-  width: 200px;
-  height: 60px;
+  width: 100%;
+  height: min-content;
+  margin-bottom: 2rem;
 }
 
 .slider {
@@ -9,16 +10,18 @@
   width: 100%; /* Full-width */
   height: 4px; /* Specified height */
   background: #d3d3d3; /* Grey background */
+  border: 1px solid var(--border-stroke-color);
   box-shadow: 2px 2px 0px 0px rgba(17, 17, 17, 0.15); /* Specified shadow */
   outline: none; /* Remove outline */
-  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+  opacity: 1; /* Set transparency (for mouse-over effects on hover) */
   -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
   transition: opacity 0.2s;
 
-  /* Mouse-over effects */
-  &:hover {
-    opacity: 1; /* Fully shown on mouse-over */
-  }
+  z-index: 3;
+  //   /* Mouse-over effects */
+  //   &:hover {
+  //     opacity: 1; /* Fully shown on mouse-over */
+  //   }
 
   /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
   &::-webkit-slider-thumb {
@@ -27,15 +30,31 @@
     width: 8px; /* Set a specific slider handle width */
     height: 25px; /* Slider handle height */
     box-shadow: 2px 2px 0px 0px rgba(17, 17, 17, 0.15); /* Specified shadow */
-
     background: var(--card-surface-color); /* Green background */
     cursor: pointer; /* Cursor on hover */
+    z-index: 2;
   }
 
   &::-moz-range-thumb {
     width: 25px; /* Set a specific slider handle width */
     height: 25px; /* Slider handle height */
     background: #04aa6d; /* Green background */
     cursor: pointer; /* Cursor on hover */
+    z-index: 2;
   }
 }
+
+.steps {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 4px;
+  z-index: 1;
+}
+
+.step {
+  width: 2px;
+  height: 10px;
+  background: var(--primary-90-color);
+}

components/slider/slider.tsx

@@ -1,3 +1,4 @@
+import Text from "../text";
 import styles from "./slider.module.scss";
 
 interface Props {
@@ -12,6 +13,10 @@ interface Props {
 const Slider = (props: Props) => {
   return (
     <div className={styles.container}>
+      <Text className={styles.label} size="sm">
+        {props.label}
+      </Text>
+
       <input
         className={styles.slider}
         type="range"
@@ -21,7 +26,19 @@ const Slider = (props: Props) => {
         onChange={(e) => props.onChange(parseInt(e.target.value))}
         step={props.step}
       />
-      <div className={styles.label}>{props.label}</div>
+      <div className={styles.steps}>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+        <div className={styles.step}></div>
+      </div>
     </div>
   );
 };