diff --git a/src/routes/trades.tsx b/src/routes/trades.tsx index f77aa83..f1e4a83 100644 --- a/src/routes/trades.tsx +++ b/src/routes/trades.tsx @@ -37,6 +37,7 @@ import { IconCheck, IconArrowsUpDown, IconArrowLeft, + IconArrowsDownUp, } from "@tabler/icons-react"; import { numberDisplay } from "../number-display"; import BigDecimal from "js-big-decimal"; @@ -302,6 +303,7 @@ type TokenAmountCellProps = { amountRaw: StringifiedNumber; tokenMintData: MintData | undefined; isDeposit: boolean; + onNumberClick?: () => void; }; function TokenAmountCell({ @@ -309,6 +311,7 @@ function TokenAmountCell({ amountRaw, tokenMintData, isDeposit, + onNumberClick, }: TokenAmountCellProps) { const explorerLink = `https://explorer.solana.com/address/${address}`; @@ -325,7 +328,9 @@ function TokenAmountCell({ {isDeposit && Deposited} - {formattedAmount}{" "} + + {formattedAmount} + {" "} {tokenMintData.symbol} @@ -366,6 +371,7 @@ type RateCellProps = { inputMintData: MintData | undefined; outputMintData: MintData | undefined; rateType: RateType; + onNumberClick: () => void; }; function RateCell({ @@ -374,6 +380,7 @@ function RateCell({ inputMintData, outputMintData, rateType, + onNumberClick, }: RateCellProps) { if (!inputMintData || !outputMintData) { return Unknown; @@ -400,7 +407,7 @@ function RateCell({ ? `${rateInputOverOutput.getPrettyValue()} ${inputMintData.symbol} per ${outputMintData.symbol}` : `${rateOutputOverInput.getPrettyValue()} ${outputMintData.symbol} per ${inputMintData.symbol}`; - return {text}; + return {text}; } function TransactionLinkCell({ txId }: { txId: string }) { @@ -521,12 +528,13 @@ function TradeRow({ isDeposit={false} /> - + @@ -536,6 +544,7 @@ function TradeRow({ inputMintData={inputMintData} outputMintData={outputMintData} rateType={rateType} + onNumberClick={switchRateType} /> @@ -657,10 +666,17 @@ export default function Fills() { variant="subtle" aria-label="Switch rate type" > - + {rateType === RateType.OUTPUT_PER_INPUT ? ( + + ) : ( + + )}