TRN-706 Improve Dexter usability

app/pool/add/page.tsx

@@ -1,25 +1,11 @@
 "use client";
 
 import { AddLiquidity } from "@/libs/components/pool";
-import { Pools } from "@/libs/components/pool/Pools";
-import { BackButton, Box, Text } from "@/libs/components/shared";
-import { useAddLiquidity, useTrnTokens } from "@/libs/context";
+import { Text } from "@/libs/components/shared";
 
 export default function Home() {
-	const { isFetching } = useTrnTokens();
-	const { xToken, yToken, resetState, onPoolClick } = useAddLiquidity();
-
-	if (!xToken && !yToken)
-		return (
-			<Box heading="pools" isLoading={isFetching}>
-				<Pools onPoolClick={onPoolClick} />
-			</Box>
-		);
-
 	return (
 		<div className="relative">
-			<BackButton onClick={resetState} />
-
 			<AddLiquidity>
 				<Text>
 					By adding liquidity you&apos;ll earn <b>0.3%</b> of all trades on this pair proportional

app/pool/browse/layout.tsx

@@ -0,0 +1,9 @@
+import { AddLiquidityProvider } from "@/libs/context";
+
+export default function PageLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return <AddLiquidityProvider>{children}</AddLiquidityProvider>;
+}

app/pool/browse/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { Pools } from "@/libs/components/pool/Pools";
+import { Box } from "@/libs/components/shared";
+import { useTrnTokens } from "@/libs/context";
+
+export default function Home() {
+	const { isFetching } = useTrnTokens();
+
+	return (
+		<Box heading="pools" isLoading={isFetching}>
+			<Pools />
+		</Box>
+	);
+}

libs/components/manage/Manage.tsx

@@ -29,13 +29,6 @@ export function Manage() {
 
 	return (
 		<>
-			<TokenSelect
-				open={props.isOpen !== false}
-				onTokenClick={props.onTokenClick}
-				onClose={() => props.setIsOpen(false)}
-				tokens={Object.values(props.filteredTokens)}
-			/>
-
 			<QrModal
 				qr={props.xamanData?.qrCodeImg}
 				onClose={() => props.setTag(undefined)}
@@ -127,6 +120,7 @@ export function Manage() {
 
 				<AmountInputs
 					{...{
+						tokenSelectEnabled: false,
 						xToken: props.xToken,
 						yToken: props.yToken,
 						labels: new Array(2).fill(props.action === "add" ? "Deposit" : "Withdraw") as [

libs/components/pool/AddLiquidity.tsx

@@ -31,6 +31,7 @@ export function AddLiquidity({ children }: AddLiquidityProps) {
 				onTokenClick={props.onTokenClick}
 				onClose={() => props.setIsOpen(false)}
 				tokens={Object.values(props.filteredTokens)}
+				onlyShowNonZeroBalance={true}
 			/>
 
 			<QrModal

libs/components/pool/Nav.tsx

@@ -15,6 +15,10 @@ const pages = [
 		children: "manage positions",
 		href: "/pool/manage",
 	},
+	{
+		children: "token liquidity",
+		href: "/pool/browse",
+	},
 ];
 
 export function Nav() {

libs/components/pool/Pools/index.tsx

@@ -9,11 +9,7 @@ import { LPTokens, Pagination, TableRow, Text } from "../../shared";
 import { Liquidity } from "./Liquidity";
 import { TokenBalance } from "./TokenBalance";
 
-interface PoolsProps {
-	onPoolClick: (xToken: TrnToken, yToken: TrnToken) => void;
-}
-
-export function Pools({ onPoolClick }: PoolsProps) {
+export function Pools() {
 	const { pools, tokens } = useTrnTokens();
 
 	const validPools = useMemo(() => {
@@ -41,8 +37,6 @@ export function Pools({ onPoolClick }: PoolsProps) {
 
 	return (
 		<>
-			<Text>To add liquidity, select a pool below.</Text>
-
 			{!!validPools?.length && (
 				<div>
 					{validPools.slice(startIndex, endIndex + 1).map((pool) => {
@@ -57,7 +51,6 @@ export function Pools({ onPoolClick }: PoolsProps) {
 						return (
 							<TableRow
 								key={pool.poolKey}
-								onClick={() => onPoolClick(token1, token2)}
 								className="[&>div]:flex [&>div]:min-w-[12em] [&>div]:flex-col [&>div]:items-center"
 								items={[
 									<LPTokens tokens={[token1.symbol, token2.symbol]} key="LP Tokens" />,

libs/components/shared/AmountInputs.tsx

@@ -4,9 +4,11 @@ import { useTokenSymbols } from "@/libs/hooks";
 import type { Token, TokenSource, TrnToken } from "@/libs/types";
 import { Balance } from "@/libs/utils";
 
-import { AmountInput, Button, TokenImage } from "./";
+import { AmountInput, Button, SelectedToken, TokenImage } from "./";
 
 interface AmountInputsProps {
+	tokenSelectEnabled?: boolean;
+
 	xToken?: Token;
 	yToken?: Token;
 
@@ -31,6 +33,8 @@ interface AmountInputsProps {
 }
 
 export function AmountInputs({
+	tokenSelectEnabled = true,
+
 	xToken,
 	yToken,
 
@@ -87,16 +91,27 @@ export function AmountInputs({
 						max
 					</Button>
 				)}
-				<Button
-					chevron
-					size="sm"
-					onClick={() => setIsOpen("xToken")}
-					variant={xToken ? "secondary" : "primary"}
-					className={classNames(xToken && "text-neutral-700")}
-					icon={xSymbol ? <TokenImage symbol={xSymbol} /> : undefined}
-				>
-					{xSymbol ? xSymbol : "select token"}
-				</Button>
+				{tokenSelectEnabled ? (
+					<Button
+						chevron
+						size="sm"
+						onClick={() => setIsOpen("xToken")}
+						variant={xToken ? "secondary" : "primary"}
+						className={classNames(xToken && "text-neutral-700")}
+						icon={xSymbol ? <TokenImage symbol={xSymbol} /> : undefined}
+					>
+						{xSymbol ? xSymbol : "select token"}
+					</Button>
+				) : (
+					<SelectedToken
+						size="sm"
+						variant={xToken ? "secondary" : "primary"}
+						className={classNames(xToken && "text-neutral-700")}
+						icon={xSymbol ? <TokenImage symbol={xSymbol} /> : undefined}
+					>
+						{xSymbol ? xSymbol : "token"}
+					</SelectedToken>
+				)}
 			</AmountInput>
 
 			{between
@@ -129,16 +144,27 @@ export function AmountInputs({
 						max
 					</Button>
 				)}
-				<Button
-					chevron
-					size="sm"
-					onClick={() => setIsOpen("yToken")}
-					variant={yToken ? "secondary" : "primary"}
-					className={classNames(yToken && "text-neutral-700")}
-					icon={ySymbol ? <TokenImage symbol={ySymbol} /> : undefined}
-				>
-					{ySymbol ? ySymbol : "select token"}
-				</Button>
+				{tokenSelectEnabled ? (
+					<Button
+						chevron
+						size="sm"
+						onClick={() => setIsOpen("yToken")}
+						variant={yToken ? "secondary" : "primary"}
+						className={classNames(yToken && "text-neutral-700")}
+						icon={ySymbol ? <TokenImage symbol={ySymbol} /> : undefined}
+					>
+						{ySymbol ? ySymbol : "select token"}
+					</Button>
+				) : (
+					<SelectedToken
+						size="sm"
+						variant={yToken ? "secondary" : "primary"}
+						className={classNames(yToken && "text-neutral-700")}
+						icon={ySymbol ? <TokenImage symbol={ySymbol} /> : undefined}
+					>
+						{ySymbol ? ySymbol : "token"}
+					</SelectedToken>
+				)}
 			</AmountInput>
 		</>
 	);

libs/components/shared/SelectedToken.tsx

@@ -0,0 +1,35 @@
+import classNames from "@sindresorhus/class-names";
+
+export interface SelectedToken {
+	variant: "primary" | "secondary";
+	size: "sm" | "md" | "lg" | "rounded";
+	active?: boolean;
+	icon?: JSX.Element;
+	className?: string;
+	children: React.ReactNode;
+}
+
+export function SelectedToken({ variant, size, className, children, active, icon }: SelectedToken) {
+	return (
+		<div
+			className={classNames(
+				className,
+				"font-mikrobe group flex items-center justify-center rounded-md transition duration-200",
+				{
+					primary: "bg-primary-700 text-neutral-200",
+					secondary: active ? "bg-neutral-300 text-primary-700" : "bg-neutral-200 text-neutral-500",
+				}[variant],
+				{
+					sm: "px-4 py-2 text-sm",
+					md: "px-8 py-3 text-sm",
+					lg: "w-full px-6 py-4",
+					rounded: "rounded-xl p-4",
+				}[size]
+			)}
+		>
+			{icon && <span className="mr-2">{icon}</span>}
+
+			<span className="pt-0.5">{children}</span>
+		</div>
+	);
+}

libs/components/shared/TokenSelect.tsx

@@ -9,13 +9,15 @@ import { Modal, type ModalProps, TableRow, Text, TokenImage } from "./";
 interface TokenSelectProps<T extends Token> extends ModalProps {
 	tokens: TrnToken[] | XrplCurrency[];
 	onTokenClick: (token: T) => void;
+	onlyShowNonZeroBalance?: boolean;
 }
 
 export function TokenSelect<T extends Token>({
 	open,
 	onClose,
 	tokens,
 	onTokenClick,
+	onlyShowNonZeroBalance,
 }: TokenSelectProps<T>) {
 	const { getBalance } = useXrplCurrencies();
 	const { getTokenBalance } = useTrnTokens();
@@ -41,6 +43,26 @@ export function TokenSelect<T extends Token>({
 		);
 	}, [filter, tokens, isXrpl]);
 
+	const filteredTokensNonZeroBalance = useMemo(() => {
+		if (isXrpl) {
+			return (filteredTokens as XrplCurrency[]).filter((token) => {
+				const tokenBalance = getBalance(token)?.value ?? 0;
+				if (tokenBalance === 0 || tokenBalance === "0") {
+					return false;
+				}
+				return true;
+			});
+		}
+
+		return (filteredTokens as TrnToken[]).filter((token) => {
+			const tokenBalance = getTokenBalance(token) ?? 0;
+			if (tokenBalance === 0 || tokenBalance.isZero()) {
+				return false;
+			}
+			return true;
+		});
+	}, [onlyShowNonZeroBalance, filteredTokens, isXrpl]);
+
 	const onRowClick = useCallback(
 		(token: T) => {
 			onTokenClick(token);
@@ -76,7 +98,10 @@ export function TokenSelect<T extends Token>({
 
 			<div className="flex max-h-[20em] flex-col space-y-2 overflow-y-scroll">
 				{isXrpl
-					? (filteredTokens as XrplCurrency[]).map((token) => {
+					? (onlyShowNonZeroBalance
+							? (filteredTokensNonZeroBalance as XrplCurrency[])
+							: (filteredTokens as XrplCurrency[])
+						).map((token) => {
 							const tokenBalance = toHuman(getBalance(token)?.value ?? 0, token);
 
 							return (
@@ -96,7 +121,10 @@ export function TokenSelect<T extends Token>({
 								/>
 							);
 						})
-					: (filteredTokens as TrnToken[]).map((token) => {
+					: (onlyShowNonZeroBalance
+							? (filteredTokensNonZeroBalance as TrnToken[])
+							: (filteredTokens as TrnToken[])
+						).map((token) => {
 							const tokenBalance = getTokenBalance(token)?.toHuman() ?? 0;
 
 							return (

libs/components/shared/index.ts

@@ -28,3 +28,4 @@ export * from "./InfoItem";
 export * from "./Ratio";
 export * from "./QrModal";
 export * from "./YourPosition";
+export * from "./SelectedToken";