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.

Sign up for GitHub

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

refactor ambient and canto dex lp modals to work with correct numbers… #75

Merged
merged 1 commit into from
Oct 12, 2023
Merged

refactor ambient and canto dex lp modals to work with correct numbers… #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Empty file removed app/lp/components/ambientLP.module.scss
View file
Open in desktop
Empty file.
368 changes: 231 additions & 137 deletions app/lp/components/ambientLPModal.tsx
View file
Open in desktop

Large diffs are not rendered by default.

520 changes: 162 additions & 358 deletions app/lp/components/cantoDexLPModal.tsx
View file
Open in desktop

Large diffs are not rendered by default.

448 changes: 0 additions & 448 deletions app/lp/components/newAmbientLPModal.tsx
View file
Open in desktop

This file was deleted.

122 changes: 108 additions & 14 deletions app/lp/components/pairRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}: {
Expand Down Expand Up @@ -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>,
Expand All @@ -75,7 +76,7 @@ export const UserPairRow = ({
];
};

export const GeneralPairRow = ({
export const GeneralCantoDexPairRow = ({
pair,
onAddLiquidity,
}: {
Expand All @@ -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",
Expand All @@ -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>,
];
};
60 changes: 32 additions & 28 deletions app/lp/components/stakeModal.tsx → app/lp/components/stakeLPModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
);

Expand Down Expand Up @@ -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%",
Expand Down
Loading