Skip to content

Commit

Permalink
feat: altered denom selection based on order direction
Browse files Browse the repository at this point in the history
  • Loading branch information
@crnbarr93
crnbarr93 committed Jun 4, 2024
1 parent 630bdbd commit 2bffb93
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 38 deletions.
77 changes: 48 additions & 29 deletions packages/web/components/control/token-select-limit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { TokenSelectDrawerLimit } from "~/components/drawers/token-select-drawer
import { Disableable } from "~/components/types";
import { EventName } from "~/config";
import { useAmplitudeAnalytics, useWindowSize } from "~/hooks";
import { OrderDirection } from "~/hooks/limit-orders";
import { useCoinPrice } from "~/hooks/queries/assets/use-coin-price";
import { useSwapAsset } from "~/hooks/use-swap";
import { formatPretty } from "~/utils/formatter";
Expand All @@ -19,19 +20,20 @@ export interface TokenSelectLimitProps {
setDropdownOpen?: (value: boolean) => void;
// TODO: Better typing
selectableAssets: ReturnType<typeof useSwapAsset>["asset"][];
selectedToken: ReturnType<typeof useSwapAsset>["asset"] &
baseAsset: ReturnType<typeof useSwapAsset>["asset"] &
Partial<{
amount: CoinPretty;
usdValue: PricePretty;
}>;
paymentToken: ReturnType<typeof useSwapAsset>["asset"] &
quoteAsset: ReturnType<typeof useSwapAsset>["asset"] &
Partial<{
amount: CoinPretty;
usdValue: PricePretty;
}>;
paymentBalance: CoinPretty;
outgoingBalance: CoinPretty;
onTokenSelect: (tokenDenom: string) => void;
canSelectTokens?: boolean;
orderDirection: OrderDirection;
}

export const TokenSelectLimit: FunctionComponent<
Expand All @@ -43,10 +45,11 @@ export const TokenSelectLimit: FunctionComponent<
selectableAssets,
onTokenSelect,
canSelectTokens = true,
selectedToken,
paymentToken,
paymentBalance,
baseAsset,
quoteAsset,
outgoingBalance,
disabled,
orderDirection,
}) => {
const { isMobile } = useWindowSize();
const router = useRouter();
Expand Down Expand Up @@ -77,23 +80,22 @@ export const TokenSelectLimit: FunctionComponent<
};

const { price: paymentCoinPrice, isLoading: isLoadingPaymentPrice } =
useCoinPrice(paymentBalance);
useCoinPrice(outgoingBalance);

const paymentFiatBalance = useMemo(
() =>
!isLoadingPaymentPrice && paymentCoinPrice
? new PricePretty(
DEFAULT_VS_CURRENCY,
paymentCoinPrice.mul(paymentBalance)
paymentCoinPrice.mul(outgoingBalance)
)
: new PricePretty(DEFAULT_VS_CURRENCY, 0),
[paymentCoinPrice, paymentBalance, isLoadingPaymentPrice]
[paymentCoinPrice, outgoingBalance, isLoadingPaymentPrice]
);

return (
<div>
<div className="align-center relative z-10 flex flex-row place-content-between items-center rounded-xl bg-osmoverse-850 py-5 px-3 md:justify-start">
{selectedToken && (
{baseAsset && (
<div
className={classNames(
"flex items-center gap-2 text-left transition-opacity",
Expand All @@ -103,28 +105,39 @@ export const TokenSelectLimit: FunctionComponent<
}
)}
>
{selectedToken.coinImageUrl && (
{baseAsset.coinImageUrl && (
<div className="mr-1 h-[50px] w-[50px] shrink-0 rounded-full md:h-7 md:w-7">
<Image
src={selectedToken.coinImageUrl}
src={baseAsset.coinImageUrl}
alt="token icon"
width={isMobile ? 30 : 50}
height={isMobile ? 30 : 50}
priority
/>
</div>
)}
<div className="flex flex-row">
<div className="flex flex-col">
<div className="mr-2 flex items-center">
{isMobile || selectedToken.coinName.length > 6 ? (
<span className="text-h6">{selectedToken.coinName}</span>
{isMobile || baseAsset.coinName.length > 6 ? (
<span className="text-h6">{baseAsset.coinName}</span>
) : (
<h6>{selectedToken.coinName}</h6>
<h6>{baseAsset.coinName}</h6>
)}
<span className="md:caption ml-2 w-32 truncate text-h6 text-osmoverse-400">
{selectedToken.coinDenom}
{baseAsset.coinDenom}
</span>
</div>
{orderDirection === OrderDirection.Ask && (
<>
{!isLoadingPaymentPrice && paymentFiatBalance ? (
<div className="flex text-body1 text-osmoverse-300">
{formatPretty(paymentFiatBalance)} available
</div>
) : (
<div />
)}
</>
)}
</div>
</div>
)}
Expand All @@ -143,7 +156,7 @@ export const TokenSelectLimit: FunctionComponent<
)}
</div>
<div className="align-center relative z-0 mt-[-20px] flex flex-row place-content-between items-center rounded-xl bg-osmoverse-1000 py-5 px-3 pt-10 md:justify-start">
{paymentToken && (
{quoteAsset && (
<div
className={classNames(
"flex items-center gap-2 text-left transition-opacity",
Expand All @@ -153,11 +166,13 @@ export const TokenSelectLimit: FunctionComponent<
}
)}
>
<span className="subtitle1 text-osmoverse-300">Pay with</span>
{paymentToken.coinImageUrl && (
<span className="subtitle1 text-osmoverse-300">
{orderDirection === OrderDirection.Bid ? "Pay with" : "Receive"}
</span>
{quoteAsset.coinImageUrl && (
<div className="h-[24px] w-[24px] shrink-0 rounded-full md:h-7 md:w-7">
<Image
src={paymentToken.coinImageUrl}
src={quoteAsset.coinImageUrl}
alt="token icon"
width={24}
height={24}
Expand All @@ -167,17 +182,21 @@ export const TokenSelectLimit: FunctionComponent<
)}
<div className="flex flex-row">
<span className="md:caption subtitle1 w-32 truncate">
{paymentToken.coinDenom}
{quoteAsset.coinDenom}
</span>
</div>
</div>
)}
{!isLoadingPaymentPrice && paymentFiatBalance ? (
<div className="flex text-body1 text-osmoverse-300">
{formatPretty(paymentFiatBalance)} available
</div>
) : (
<div />
{orderDirection === OrderDirection.Bid && (
<>
{!isLoadingPaymentPrice && paymentFiatBalance ? (
<div className="flex text-body1 text-osmoverse-300">
{formatPretty(paymentFiatBalance)} available
</div>
) : (
<div />
)}
</>
)}
</div>
<div className="pt-16">
Expand Down
13 changes: 7 additions & 6 deletions packages/web/components/place-limit-tool/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
({ orderDirection = OrderDirection.Bid }) => {
const { accountStore } = useStore();
const { t } = useTranslation();
const [quoteDenom, setQuoteDenom] = useState<string>("OSMO");
const baseDenom = "ION";
const [baseDenom, setBaseDenom] = useState<string>("ION");
const quoteDenom = "OSMO";

const { poolId, orderbookContractAddress } = useOrderbookPool({
baseDenom,
Expand All @@ -55,11 +55,12 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
<div className="flex flex-col gap-3">
<TokenSelectLimit
selectableAssets={[swapState.fromAsset, swapState.toAsset]}
selectedToken={swapState.toAsset}
paymentToken={swapState.fromAsset}
paymentBalance={swapState.inAmountInput.balance!}
onTokenSelect={(newQuoteDenom) => setQuoteDenom(newQuoteDenom)}
baseAsset={swapState.baseAsset}
quoteAsset={swapState.quoteAsset}
outgoingBalance={swapState.inAmountInput.balance!}
onTokenSelect={(newDenom) => setBaseDenom(newDenom)}
disabled={false}
orderDirection={orderDirection}
/>
<div className="px-4 py-[22px] transition-all md:rounded-xl md:py-2.5 md:px-3">
<div className="flex place-content-end items-center transition-opacity">
Expand Down
25 changes: 22 additions & 3 deletions packages/web/hooks/limit-orders/use-place-limit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import { Dec } from "@keplr-wallet/unit";
import { priceToTick } from "@osmosis-labs/math";
import { useCallback, useMemo, useState } from "react";

import { useSwapAmountInput, useSwapAssets } from "~/hooks/use-swap";
import {
useSwapAmountInput,
useSwapAsset,
useSwapAssets,
} from "~/hooks/use-swap";
import { useStore } from "~/stores";

export enum OrderDirection {
Expand Down Expand Up @@ -35,8 +39,10 @@ export const usePlaceLimit = ({
}: UsePlaceLimitParams) => {
const { accountStore } = useStore();
const swapAssets = useSwapAssets({
initialFromDenom: quoteDenom,
initialToDenom: baseDenom,
initialFromDenom:
orderDirection === OrderDirection.Bid ? quoteDenom : baseDenom,
initialToDenom:
orderDirection === OrderDirection.Bid ? baseDenom : quoteDenom,
useQueryParams,
useOtherCurrencies,
});
Expand Down Expand Up @@ -83,10 +89,23 @@ export const usePlaceLimit = ({
priceState,
]);

const { asset: quoteAsset } = useSwapAsset({
minDenomOrSymbol: quoteDenom,
existingAssets: swapAssets.selectableAssets,
});
console.log("QUOTE", quoteAsset);

const { asset: baseAsset } = useSwapAsset({
minDenomOrSymbol: baseDenom,
existingAssets: swapAssets.selectableAssets,
});

return {
...swapAssets,
quoteDenom,
baseDenom,
baseAsset,
quoteAsset,
priceState,
inAmountInput,
placeLimit,
Expand Down

0 comments on commit 2bffb93

Please sign in to comment.