Merge pull request #75 from Plex-Engineer/ambient-modals

refactor ambient and canto dex lp modals to work with correct numbers…
Plex-Engineer · Oct 12, 2023 · 422f992 · 422f992
2 parents 895df3a + c7dde00
commit 422f992
Show file tree

Hide file tree

Showing 23 changed files with 754 additions and 1,083 deletions.
diff --git a/app/lp/components/ambientLP.module.scss b/app/lp/components/ambientLP.module.scss
diff --git a/app/lp/components/ambientLPModal.tsx b/app/lp/components/ambientLPModal.tsx
diff --git a/app/lp/components/cantoDexLPModal.tsx b/app/lp/components/cantoDexLPModal.tsx
diff --git a/app/lp/components/newAmbientLPModal.tsx b/app/lp/components/newAmbientLPModal.tsx
diff --git a/app/lp/components/pairRow.tsx b/app/lp/components/pairRow.tsx
@@ -2,17 +2,19 @@ import Button from "@/components/button/button";
 import Icon from "@/components/icon/icon";
 import Spacer from "@/components/layout/spacer";
 import Text from "@/components/text";
+import { AmbientPair } from "@/hooks/pairs/ambient/interfaces/ambientPairs";
 import { CantoDexPairWithUserCTokenData } from "@/hooks/pairs/cantoDex/interfaces/pairs";
 import { formatPercent } from "@/utils/formatting.utils";
 import { displayAmount } from "@/utils/tokenBalances.utils";
 import {
   addTokenBalances,
   convertTokenAmountToNote,
   divideBalances,
+  percentOfAmount,
 } from "@/utils/tokens/tokenMath.utils";
 import Image from "next/image";
 
-export const UserPairRow = ({
+export const UserCantoDexPairRow = ({
   pair,
   onManage,
 }: {
@@ -45,25 +47,24 @@ export const UserPairRow = ({
       {displayAmount(totalUserLPValue.toString(), 18, {
         precision: 2,
       })}
-      <Spacer width="5px" />
-
       <Icon
+        style={{ marginLeft: "5px" }}
         themed
         icon={{
           url: "/tokens/note.svg",
           size: 16,
         }}
       />
     </Text>,
-    <Text key={pair.address + "totalUserTokens"}>
-      {displayAmount(totalUserLpTokens, pair.decimals)}
-    </Text>,
-    <Text key={pair.address + "userStake"}>
-      {displayAmount(
-        pair.clmData?.userDetails?.supplyBalanceInUnderlying ?? "0",
-        pair.decimals
-      )}
-    </Text>,
+    // <Text key={pair.address + "totalUserTokens"}>
+    //   {displayAmount(totalUserLpTokens, pair.decimals)}
+    // </Text>,
+    // <Text key={pair.address + "userStake"}>
+    //   {displayAmount(
+    //     pair.clmData?.userDetails?.supplyBalanceInUnderlying ?? "0",
+    //     pair.decimals
+    //   )}
+    // </Text>,
     <Text key={pair.address + "rewards"}>
       {displayAmount(pair.clmData?.userDetails?.rewards ?? "0", 18)}
     </Text>,
@@ -75,7 +76,7 @@ export const UserPairRow = ({
   ];
 };
 
-export const GeneralPairRow = ({
+export const GeneralCantoDexPairRow = ({
   pair,
   onAddLiquidity,
 }: {
@@ -93,8 +94,8 @@ export const GeneralPairRow = ({
     {displayAmount(pair.tvl, 18, {
       precision: 2,
     })}
-    <Spacer width="5px" />
     <Icon
+      style={{ marginLeft: "5px" }}
       themed
       icon={{
         url: "/tokens/note.svg",
@@ -109,3 +110,96 @@ export const GeneralPairRow = ({
     <Button onClick={() => onAddLiquidity(pair.address)}>Add Liquidity</Button>
   </div>,
 ];
+
+export const GeneralAmbientPairRow = ({
+  pair,
+  onAddLiquidity,
+}: {
+  pair: AmbientPair;
+  onAddLiquidity: (pairAddress: string) => void;
+}) => [
+  <div key={pair.address + "symbol"}>
+    <Image src={pair.base.logoURI} width={30} height={54} alt="logo" />
+    <Spacer width="10px" />
+    <Text>{pair.symbol}</Text>
+  </div>,
+  <Text key={pair.symbol + "apr"}>{"0.00%"}</Text>,
+  <Text key={pair.address + "tvl"}>
+    {displayAmount(pair.liquidity.tvl, 18, {
+      precision: 2,
+    })}
+    <Icon
+      style={{ marginLeft: "5px" }}
+      themed
+      icon={{
+        url: "/tokens/note.svg",
+        size: 16,
+      }}
+    />
+  </Text>,
+  <Text key={pair.address + "type"}>
+    {pair.stable ? "Stable" : "Volatile"}
+  </Text>,
+  <div key={"action"}>
+    <Button key={"action item"} onClick={() => onAddLiquidity(pair.address)}>
+      Add Liquidity
+    </Button>
+  </div>,
+];
+
+export const UserAmbientPairRow = ({
+  pair,
+  onManage,
+}: {
+  pair: AmbientPair;
+  onManage: (pairAddress: string) => void;
+}) => {
+  return [
+    <div key={pair.address + "symbol"}>
+      <Image src={pair.base.logoURI} width={30} height={54} alt="logo" />
+      <Spacer width="10px" />
+      <Text>{pair.symbol}</Text>
+    </div>,
+    <Text key={pair.symbol + "apr"}>{"0.00%"}</Text>,
+    <Text key={pair.symbol + "pool share"}>
+      {formatPercent(
+        divideBalances(
+          pair.userDetails?.defaultRangePosition.liquidity ?? "0",
+          pair.liquidity.rootLiquidity
+        )
+      )}
+    </Text>,
+    <Text key={pair.symbol + "value"}>
+      {displayAmount(
+        percentOfAmount(
+          pair.liquidity.tvl,
+          Number(
+            divideBalances(
+              pair.userDetails?.defaultRangePosition.liquidity ?? "0",
+              pair.liquidity.rootLiquidity
+            )
+          )
+        ).data,
+        18
+      )}
+      <Icon
+        style={{ marginLeft: "5px" }}
+        themed
+        icon={{
+          url: "/tokens/note.svg",
+          size: 16,
+        }}
+      />
+    </Text>,
+    <Text key={pair.symbol + "rewards"}>{"0"}</Text>,
+    <div key={"action"}>
+      <Button
+        color="secondary"
+        key={"action item"}
+        onClick={() => onManage(pair.address)}
+      >
+        Manage LP
+      </Button>
+    </div>,
+  ];
+};
diff --git a/app/lp/components/stakeModal.tsx → app/lp/components/stakeLPModal.tsx b/app/lp/components/stakeModal.tsx → app/lp/components/stakeLPModal.tsx
@@ -17,7 +17,10 @@ import { useState } from "react";
 import { ValidationReturn } from "@/config/interfaces";
 import Amount from "@/components/amount/amount";
 import { CantoDexTxTypes } from "@/hooks/pairs/cantoDex/interfaces/pairsTxTypes";
-import { convertTokenAmountToNote } from "@/utils/tokens/tokenMath.utils";
+import {
+  addTokenBalances,
+  convertTokenAmountToNote,
+} from "@/utils/tokens/tokenMath.utils";
 import { ModalItem } from "@/app/lending/components/modal/modal";
 interface Props {
   clpToken: CTokenWithUserData;
@@ -35,28 +38,33 @@ interface Props {
 }
 
 export const StakeLPModal = (props: Props) => {
-  const Balances = ({ cToken }: { cToken: CTokenWithUserData }) => (
-    <Container className={styles.card} padding="md" width="100%">
-      <CTokenAmountCard
-        name="Wallet Balance"
-        amount={cToken.userDetails?.balanceOfUnderlying ?? "0"}
-        decimals={cToken.underlying.decimals}
-        symbol={cToken.underlying.symbol}
-        price={cToken.price}
-      />
-      <CTokenAmountCard
-        name="Staked Amount"
-        amount={cToken.userDetails?.supplyBalanceInUnderlying ?? "0"}
-        decimals={cToken.underlying.decimals}
-        symbol={cToken.underlying.symbol}
-        price={cToken.price}
-      />
-    </Container>
+  // get total values to decide what can be done with tokens
+  const totalLP = addTokenBalances(
+    props.clpToken.userDetails?.supplyBalanceInUnderlying ?? "0",
+    props.clpToken.userDetails?.balanceOfUnderlying ?? "0"
   );
 
-  const APRs = ({ cToken }: { cToken: CTokenWithUserData }) => (
-    <Container className={styles.card} padding="md" width="100%">
-      <ModalItem name="Staking APR" value={cToken.distApy + "%"} />
+  const CLMInfo = ({ cToken }: { cToken: CTokenWithUserData }) => (
+    <Container width="100%" gap={20}>
+      <Container className={styles.card} padding="md" width="100%">
+        <ModalItem name="Staking APR" value={cToken.distApy + "%"} />
+      </Container>
+      <Container className={styles.card} padding="md" width="100%">
+        <CTokenAmountCard
+          name="Unstaked Balance"
+          amount={cToken.userDetails?.balanceOfUnderlying ?? "0"}
+          decimals={cToken.underlying.decimals}
+          symbol={""}
+          price={cToken.price}
+        />
+        <CTokenAmountCard
+          name="Staked Amount"
+          amount={cToken.userDetails?.supplyBalanceInUnderlying ?? "0"}
+          decimals={cToken.underlying.decimals}
+          symbol={""}
+          price={cToken.price}
+        />
+      </Container>
     </Container>
   );
 
@@ -106,18 +114,14 @@ export const StakeLPModal = (props: Props) => {
             setAmount(val.target.value);
           }}
           IconUrl={cLPToken.underlying.logoURI}
-          title={cLPToken.symbol}
+          title={cLPToken.underlying.symbol}
           max={maxAmount}
-          symbol={cLPToken.symbol}
+          symbol={cLPToken.underlying.symbol}
           error={!amountCheck.isValid && Number(amount) !== 0}
           errorMessage={amountCheck.errorMessage}
         />
         <Spacer height="40px" />
-
-        <Container width="100%" gap={20}>
-          <APRs cToken={cLPToken} />
-          <Balances cToken={cLPToken} />
-        </Container>
+        <CLMInfo cToken={cLPToken} />
         <div
           style={{
             width: "100%",