@@ -113,9 +117,9 @@ export function AccountDepositWithWallet({
wallet: WalletConnected;
}) {
const { providers } = useProviders();
- const { tokenBalances } = useTokenBalances(wallet);
+ const { tokenBalances } = useTokenBalances(wallet.currentAccount.address);
const { selectedTokenBalance, handleSelectTokenBalance } =
- useSelectedTokenBalance(wallet);
+ useSelectedTokenBalance(wallet.currentAccount.address);
const { selectedProvider, setSelectedProvider } = useSelectedProvider();
const { submit, submitResult } = useDepositForm();
diff --git a/src/components/modules/Account/Deposit/state.tsx b/src/components/modules/Account/Deposit/state.tsx
index 728d2c0..89feb57 100644
--- a/src/components/modules/Account/Deposit/state.tsx
+++ b/src/components/modules/Account/Deposit/state.tsx
@@ -23,21 +23,26 @@ import {
import { walletAtom } from "@/atoms/wallet-atom";
import { AmountField } from "@/components/molecules/forms";
import type { TokenBalance } from "@/domain/types";
-import { isWalletConnected, type WalletConnected } from "@/domain/wallet";
-import { formatTokenAmount } from "@/lib/utils";
+import {
+ isWalletConnected,
+ type WalletAccount,
+ type WalletConnected,
+} from "@/domain/wallet";
+import { formatTokenAmount, truncateNumber } from "@/lib/utils";
import { ApiClientService } from "@/services/api-client";
import type { ProviderDto } from "@/services/api-client/api-schemas";
import { runtimeAtom } from "@/services/runtime";
-const selectedTokenBalanceAtom = Atom.family((wallet: WalletConnected) =>
- Atom.writable(
- (ctx) =>
- ctx.get(moralisTokenBalancesAtom(wallet.currentAccount.address)).pipe(
- Result.map((res) => _Array.head(res.ethereum)),
- Result.map(Option.getOrNull),
- ),
- (ctx, value: TokenBalance) => ctx.setSelf(Result.success(value)),
- ),
+const selectedTokenBalanceAtom = Atom.family(
+ (walletAddress: WalletAccount["address"]) =>
+ Atom.writable(
+ (ctx) =>
+ ctx.get(moralisTokenBalancesAtom(walletAddress)).pipe(
+ Result.map((res) => _Array.head(res.ethereum)),
+ Result.map(Option.getOrNull),
+ ),
+ (ctx, value: TokenBalance) => ctx.setSelf(Result.success(value)),
+ ),
);
const selectedProviderAtom = Atom.writable(
@@ -58,9 +63,9 @@ export const useProviders = () => {
};
};
-export const useTokenBalances = (wallet: WalletConnected) => {
+export const useTokenBalances = (walletAddress: WalletAccount["address"]) => {
const tokenBalances = useAtomValue(
- moralisTokenBalancesAtom(wallet.currentAccount.address),
+ moralisTokenBalancesAtom(walletAddress),
).pipe(Result.getOrElse(() => Record.empty() as TokenBalances));
return {
@@ -78,11 +83,15 @@ export const useDepositForm = () => {
};
};
-export const useSelectedTokenBalance = (wallet: WalletConnected) => {
+export const useSelectedTokenBalance = (
+ walletAddress: WalletAccount["address"],
+) => {
const selectedTokenBalance = useAtomValue(
- selectedTokenBalanceAtom(wallet),
+ selectedTokenBalanceAtom(walletAddress),
).pipe(Result.getOrElse(() => null));
- const setSelectedTokenBalance = useAtomSet(selectedTokenBalanceAtom(wallet));
+ const setSelectedTokenBalance = useAtomSet(
+ selectedTokenBalanceAtom(walletAddress),
+ );
const setAmount = useAtomSet(setAmountFieldAtom);
const handleSelectTokenBalance = (tokenBalance: TokenBalance) => {
@@ -129,7 +138,7 @@ export const depositFormBuilder = FormBuilder.empty
}
const tokenBalance = registry
- .get(selectedTokenBalanceAtom(wallet))
+ .get(selectedTokenBalanceAtom(wallet.currentAccount.address))
.pipe(Result.getOrElse(() => null));
if (!tokenBalance) {
@@ -157,7 +166,7 @@ export const DepositForm = FormReact.make(depositFormBuilder, {
const registry = yield* Registry.AtomRegistry;
const selectedTokenBalance = registry
- .get(selectedTokenBalanceAtom(wallet))
+ .get(selectedTokenBalanceAtom(wallet.currentAccount.address))
.pipe(Result.getOrElse(() => null));
if (!selectedTokenBalance) {
@@ -197,7 +206,9 @@ export const DepositForm = FormReact.make(depositFormBuilder, {
const amountAtom = DepositForm.getFieldAtom(DepositForm.fields.Amount);
const setAmountFieldAtom = DepositForm.setValue(DepositForm.fields.Amount);
-export const useDepositPercentage = (wallet: WalletConnected) => {
+export const useDepositPercentage = (
+ walletAddress: WalletAccount["address"],
+) => {
const amount = useAtomValue(amountAtom).pipe(
Option.map(Number),
Option.filter((v) => !Number.isNaN(v)),
@@ -206,9 +217,9 @@ export const useDepositPercentage = (wallet: WalletConnected) => {
const setAmount = useAtomSet(setAmountFieldAtom);
- const tokenBalance = useAtomValue(selectedTokenBalanceAtom(wallet)).pipe(
- Result.getOrElse(() => null),
- );
+ const tokenBalance = useAtomValue(
+ selectedTokenBalanceAtom(walletAddress),
+ ).pipe(Result.getOrElse(() => null));
const availableBalanceUsd = tokenBalance
? Number(tokenBalance.amount) * tokenBalance.price
@@ -220,7 +231,7 @@ export const useDepositPercentage = (wallet: WalletConnected) => {
const handlePercentageChange = (newPercentage: number) => {
const amount = (availableBalanceUsd * newPercentage) / 100;
- setAmount(parseFloat(amount.toFixed(2)).toString());
+ setAmount(truncateNumber(amount).toString());
};
return {
@@ -229,35 +240,40 @@ export const useDepositPercentage = (wallet: WalletConnected) => {
};
};
-const tokenAmountValueAtom = Atom.family((wallet: WalletConnected) =>
- runtimeAtom.atom((ctx) =>
- Effect.gen(function* () {
- const tokenBalance = yield* ctx.result(selectedTokenBalanceAtom(wallet));
-
- ctx.subscribe(amountAtom, () => {});
-
- const amount = ctx.get(amountAtom).pipe(
- Option.map(parseFloat),
- Option.filter((v) => !Number.isNaN(v)),
- Option.getOrElse(() => 0),
- );
-
- if (!tokenBalance) {
- return "";
- }
-
- return formatTokenAmount({
- amount: amount / tokenBalance.price,
- symbol: tokenBalance.token.symbol,
- });
- }),
- ),
+const tokenAmountValueAtom = Atom.family(
+ (walletAddress: WalletAccount["address"]) =>
+ runtimeAtom.atom((ctx) =>
+ Effect.gen(function* () {
+ const tokenBalance = yield* ctx.result(
+ selectedTokenBalanceAtom(walletAddress),
+ );
+
+ ctx.subscribe(amountAtom, () => {});
+
+ const amount = ctx.get(amountAtom).pipe(
+ Option.map(parseFloat),
+ Option.filter((v) => !Number.isNaN(v)),
+ Option.getOrElse(() => 0),
+ );
+
+ if (!tokenBalance) {
+ return "";
+ }
+
+ return formatTokenAmount({
+ amount: amount / tokenBalance.price,
+ symbol: tokenBalance.token.symbol,
+ });
+ }),
+ ),
);
-export const useTokenAmountValue = (wallet: WalletConnected) => {
- const tokenAmountValue = useAtomValue(tokenAmountValueAtom(wallet)).pipe(
- Result.getOrElse(() => null),
- );
+export const useTokenAmountValue = (
+ walletAddress: WalletAccount["address"],
+) => {
+ const tokenAmountValue = useAtomValue(
+ tokenAmountValueAtom(walletAddress),
+ ).pipe(Result.getOrElse(() => null));
return {
tokenAmountValue,
diff --git a/src/components/modules/Account/Withdraw/state.tsx b/src/components/modules/Account/Withdraw/state.tsx
index 6af0ac9..e289fb7 100644
--- a/src/components/modules/Account/Withdraw/state.tsx
+++ b/src/components/modules/Account/Withdraw/state.tsx
@@ -19,6 +19,7 @@ import { providersAtom } from "@/atoms/providers-atoms";
import { walletAtom } from "@/atoms/wallet-atom";
import { AmountField } from "@/components/molecules/forms";
import { isWalletConnected, type WalletConnected } from "@/domain/wallet";
+import { truncateNumber } from "@/lib/utils";
import { ApiClientService } from "@/services/api-client";
import type { ProviderDto } from "@/services/api-client/api-schemas";
import { runtimeAtom } from "@/services/runtime";
@@ -55,7 +56,7 @@ export const useSelectedProvider = () => {
export const useProviderBalance = (wallet: WalletConnected) => {
const providerBalance = useAtomValue(
- selectedProviderBalancesAtom(wallet),
+ selectedProviderBalancesAtom(wallet.currentAccount.address),
).pipe(Result.getOrElse(() => null));
return {
@@ -93,7 +94,7 @@ export const withdrawFormBuilder = FormBuilder.empty
}
const providerBalance = registry
- .get(selectedProviderBalancesAtom(wallet))
+ .get(selectedProviderBalancesAtom(wallet.currentAccount.address))
.pipe(Result.getOrElse(() => null));
if (!providerBalance) {
@@ -133,7 +134,7 @@ export const WithdrawForm = FormReact.make(withdrawFormBuilder, {
}
const providerBalance = registry
- .get(selectedProviderBalancesAtom(wallet))
+ .get(selectedProviderBalancesAtom(wallet.currentAccount.address))
.pipe(Result.getOrElse(() => null));
if (!providerBalance) {
@@ -174,14 +175,14 @@ export const useWithdrawPercentage = (wallet: WalletConnected) => {
const setAmount = useAtomSet(setAmountFieldAtom);
const providerBalance = useAtomValue(
- selectedProviderBalancesAtom(wallet),
+ selectedProviderBalancesAtom(wallet.currentAccount.address),
).pipe(Result.getOrElse(() => null));
const availableBalance = providerBalance?.availableBalance ?? 0;
const handlePercentageChange = (newPercentage: number) => {
const amount = (availableBalance * newPercentage) / 100;
- setAmount(amount.toFixed(2));
+ setAmount(truncateNumber(amount).toString());
};
const percentage = _Number.clamp({ minimum: 0, maximum: 100 })(
diff --git a/src/components/modules/Account/balance.tsx b/src/components/modules/Account/balance.tsx
index c6c9d41..ffa5d5a 100644
--- a/src/components/modules/Account/balance.tsx
+++ b/src/components/modules/Account/balance.tsx
@@ -19,7 +19,9 @@ export function AccountBalancesWithWallet({
const navigate = useNavigate();
const providers = useAtomValue(providersAtom);
- const providersBalances = useAtomValue(providersBalancesAtom(wallet));
+ const providersBalances = useAtomValue(
+ providersBalancesAtom(wallet.currentAccount.address),
+ );
const data = Result.all({ providersBalances, providers }).pipe(
Result.map((val) => ({
diff --git a/src/components/modules/Home/Positions/index.tsx b/src/components/modules/Home/Positions/index.tsx
index c557f03..a2fa436 100644
--- a/src/components/modules/Home/Positions/index.tsx
+++ b/src/components/modules/Home/Positions/index.tsx
@@ -20,10 +20,14 @@ function PositionsWithWallet({ wallet }: { wallet: WalletConnected }) {
"positions",
);
- const positionsResult = useAtomValue(positionsAtom(wallet));
- const ordersResult = useAtomValue(ordersAtom(wallet));
+ const positionsResult = useAtomValue(
+ positionsAtom(wallet.currentAccount.address),
+ );
+ const ordersResult = useAtomValue(ordersAtom(wallet.currentAccount.address));
const marketsMapResult = useAtomValue(marketsAtom);
- const balancesResult = useAtomValue(selectedProviderBalancesAtom(wallet));
+ const balancesResult = useAtomValue(
+ selectedProviderBalancesAtom(wallet.currentAccount.address),
+ );
const marketsMap = marketsMapResult.pipe(Result.getOrElse(Record.empty));
diff --git a/src/components/modules/Home/index.tsx b/src/components/modules/Home/index.tsx
index e2f6f96..174e35f 100644
--- a/src/components/modules/Home/index.tsx
+++ b/src/components/modules/Home/index.tsx
@@ -18,13 +18,17 @@ import { AddressSwitcher } from "@/components/molecules/address-switcher";
import { ProviderSelect } from "@/components/molecules/provider-select";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { isWalletConnected, type WalletConnected } from "@/domain/wallet";
+import {
+ isBrowserWallet,
+ isWalletConnected,
+ type WalletConnected,
+} from "@/domain/wallet";
import { cn, formatAmount } from "@/lib/utils";
import type { ProviderDto } from "@/services/api-client/api-schemas";
const ProviderBalancesDisplay = ({ wallet }: { wallet: WalletConnected }) => {
const selectedProviderBalances = useAtomValue(
- selectedProviderBalancesAtom(wallet),
+ selectedProviderBalancesAtom(wallet.currentAccount.address),
);
if (Result.isSuccess(selectedProviderBalances)) {
@@ -49,7 +53,9 @@ export const Home = () => {
const [activeTab, setActiveTab] = useState<"trade" | "positions">("trade");
const wallet = useAtomValue(walletAtom).pipe(Result.getOrElse(() => null));
+ const browserWallet = isBrowserWallet(wallet);
const walletConnected = isWalletConnected(wallet);
+ const showAddressSwitcher = walletConnected;
const providers = useAtomValue(providersAtom).pipe(
Result.getOrElse(() => [] as ReadonlyArray
),
@@ -63,7 +69,7 @@ export const Home = () => {
{/* Address Switcher */}
- {walletConnected &&
}
+ {showAddressSwitcher &&
}
{/* Header */}
@@ -128,7 +134,7 @@ export const Home = () => {
- {!walletConnected &&
}
+ {!walletConnected && browserWallet &&
}
);
};
diff --git a/src/components/modules/Order/Overview/leverage-dialog.tsx b/src/components/modules/Order/Overview/leverage-dialog.tsx
index 4d0f568..cd16af0 100644
--- a/src/components/modules/Order/Overview/leverage-dialog.tsx
+++ b/src/components/modules/Order/Overview/leverage-dialog.tsx
@@ -33,7 +33,7 @@ export const LeverageDialog = (props: LeverageDialogProps) => {
return (
-
+ {props.children}
@@ -105,7 +105,10 @@ export function LeverageDialogContent({
{/* Header */}
-
+
Leverage
@@ -195,6 +201,7 @@ export function LeverageDialogContent({
+ field.onChange(e.target.value)}
+ onBlur={field.onBlur}
+ placeholder="Enter value"
+ className={clsx(
+ "flex-1 h-full bg-transparent px-4 text-white text-sm font-normal placeholder:text-gray-2 focus:outline-none",
+ )}
+ />
+
+ USD
+
+ ),
+ },
+ onSubmit: (
+ args: { onSubmit: (limitPrice: number | null) => void },
+ { decoded },
+ ) => args.onSubmit(decoded.Amount),
+});
diff --git a/src/components/modules/Order/Overview/order-type-dialog.tsx b/src/components/modules/Order/Overview/order-type-dialog.tsx
index 2aeda8b..c0e3104 100644
--- a/src/components/modules/Order/Overview/order-type-dialog.tsx
+++ b/src/components/modules/Order/Overview/order-type-dialog.tsx
@@ -42,18 +42,21 @@ export function OrderTypeDialog({
return (
-
-
-
+ (
+
+ )}
+ />
diff --git a/src/components/modules/Order/Overview/state.tsx b/src/components/modules/Order/Overview/state.tsx
index 0dfa2e9..684147c 100644
--- a/src/components/modules/Order/Overview/state.tsx
+++ b/src/components/modules/Order/Overview/state.tsx
@@ -20,6 +20,7 @@ import {
MIN_LEVERAGE,
} from "@/domain/position";
import { isWalletConnected, type WalletConnected } from "@/domain/wallet";
+import { truncateNumber } from "@/lib/utils";
import { ApiClientService } from "@/services/api-client";
import {
type ArgumentsDto,
@@ -120,7 +121,7 @@ export const useLimitPrice = () => {
export const useProviderBalance = (wallet: WalletConnected) => {
const providerBalance = useAtomValue(
- selectedProviderBalancesAtom(wallet),
+ selectedProviderBalancesAtom(wallet.currentAccount.address),
).pipe(Result.getOrElse(() => null));
return {
@@ -150,7 +151,7 @@ export const formAtom = Atom.family(
}
const providerBalance = registry
- .get(selectedProviderBalancesAtom(wallet))
+ .get(selectedProviderBalancesAtom(wallet.currentAccount.address))
.pipe(Result.getOrElse(() => null));
if (!providerBalance) {
@@ -267,7 +268,8 @@ export const formAtom = Atom.family(
const marginToUse =
(clampedValue / 100) * providerBalance.availableBalance;
const positionSize = marginToUse * leverage;
- setAmount(parseFloat(positionSize.toFixed(2)).toString());
+
+ setAmount(truncateNumber(positionSize).toString());
},
};
};
@@ -295,7 +297,7 @@ export const formAtom = Atom.family(
const { leverage } = useLeverage(leverageRanges);
const providerBalance = useAtomValue(
- selectedProviderBalancesAtom(wallet),
+ selectedProviderBalancesAtom(wallet.currentAccount.address),
).pipe(Result.getOrElse(() => null));
if (!providerBalance) {
diff --git a/src/components/modules/PositionDetails/Close/index.tsx b/src/components/modules/PositionDetails/Close/index.tsx
index 4c2b9fa..95e62fe 100644
--- a/src/components/modules/PositionDetails/Close/index.tsx
+++ b/src/components/modules/PositionDetails/Close/index.tsx
@@ -200,7 +200,7 @@ const ClosePositionRouteWithWallet = ({
const { marketId } = useParams({
from: "/position-details/$marketId/close",
});
- const position = usePosition(wallet, marketId);
+ const position = usePosition(wallet.currentAccount.address, marketId);
if (Result.isInitial(position)) {
return ;
diff --git a/src/components/modules/PositionDetails/Close/state.tsx b/src/components/modules/PositionDetails/Close/state.tsx
index 2476516..263723b 100644
--- a/src/components/modules/PositionDetails/Close/state.tsx
+++ b/src/components/modules/PositionDetails/Close/state.tsx
@@ -10,7 +10,7 @@ import { actionAtom } from "@/atoms/actions-atoms";
import { positionsAtom } from "@/atoms/portfolio-atoms";
import { selectedProviderAtom } from "@/atoms/providers-atoms";
import { getCloseCalculations } from "@/domain/position";
-import type { WalletConnected } from "@/domain/wallet";
+import type { WalletAccount, WalletConnected } from "@/domain/wallet";
import { ApiClientService } from "@/services/api-client";
import type { PositionDto } from "@/services/api-client/client-factory";
import { runtimeAtom } from "@/services/runtime";
@@ -34,10 +34,10 @@ export const useClosePercentage = () => {
};
const closePositionAtom = Atom.family(
- (args: { wallet: WalletConnected; marketId: string }) =>
+ (args: { walletAddress: WalletAccount["address"]; marketId: string }) =>
runtimeAtom.atom(
Effect.fn(function* (ctx) {
- const positions = yield* ctx.result(positionsAtom(args.wallet));
+ const positions = yield* ctx.result(positionsAtom(args.walletAddress));
const position = positions.find((p) => p.marketId === args.marketId);
@@ -50,8 +50,13 @@ const closePositionAtom = Atom.family(
),
);
-export const usePosition = (wallet: WalletConnected, marketId: string) => {
- return useAtomValue(closePositionAtom(Data.struct({ wallet, marketId })));
+export const usePosition = (
+ walletAddress: WalletAccount["address"],
+ marketId: string,
+) => {
+ return useAtomValue(
+ closePositionAtom(Data.struct({ walletAddress, marketId })),
+ );
};
export const useCloseCalculations = (position: PositionDto) => {
@@ -79,7 +84,7 @@ const submitCloseAtom = runtimeAtom.fn(
const closePercentage = registry.get(closePercentageAtom);
const closeCalculations =
closePercentage === 100
- ? null //
+ ? null
: getCloseCalculations(args.position, closePercentage);
const action = yield* client.ActionsControllerExecuteAction({
diff --git a/src/components/modules/PositionDetails/Overview/Orders/index.tsx b/src/components/modules/PositionDetails/Overview/Orders/index.tsx
index aa758e3..5e224e3 100644
--- a/src/components/modules/PositionDetails/Overview/Orders/index.tsx
+++ b/src/components/modules/PositionDetails/Overview/Orders/index.tsx
@@ -110,7 +110,11 @@ const CancelOrder = ({
const cancelOrderResult = useAtomValue(cancelOrderAtom(cancelOrderId));
const submitCancelOrder = useAtomSet(cancelOrderAtom(cancelOrderId));
- const handleCancelOrder = () => submitCancelOrder({ marketId, wallet });
+ const handleCancelOrder = () =>
+ submitCancelOrder({
+ marketId,
+ walletAddress: wallet.currentAccount.address,
+ });
return (
<>
@@ -144,7 +148,7 @@ function OrdersTabContentWithWallet({
wallet: WalletConnected;
market: MarketDto;
}) {
- const ordersResult = useAtomValue(ordersAtom(wallet));
+ const ordersResult = useAtomValue(ordersAtom(wallet.currentAccount.address));
if (Result.isInitial(ordersResult)) {
return (
diff --git a/src/components/modules/PositionDetails/Overview/Position/index.tsx b/src/components/modules/PositionDetails/Overview/Position/index.tsx
index eeb1d0f..26a6bf8 100644
--- a/src/components/modules/PositionDetails/Overview/Position/index.tsx
+++ b/src/components/modules/PositionDetails/Overview/Position/index.tsx
@@ -282,8 +282,10 @@ function PositionTabContentWithWallet({
wallet: WalletConnected;
market: MarketDto;
}) {
- const positionsResult = useAtomValue(positionsAtom(wallet));
- const ordersResult = useAtomValue(ordersAtom(wallet));
+ const positionsResult = useAtomValue(
+ positionsAtom(wallet.currentAccount.address),
+ );
+ const ordersResult = useAtomValue(ordersAtom(wallet.currentAccount.address));
if (Result.isInitial(positionsResult) || Result.isInitial(ordersResult)) {
return (
diff --git a/src/components/modules/PositionDetails/Overview/index.tsx b/src/components/modules/PositionDetails/Overview/index.tsx
index ba83473..4b2555a 100644
--- a/src/components/modules/PositionDetails/Overview/index.tsx
+++ b/src/components/modules/PositionDetails/Overview/index.tsx
@@ -35,7 +35,9 @@ function BottomButtonsWithWallet({
wallet: WalletConnected;
market: MarketDto;
}) {
- const positionsResult = useAtomValue(positionsAtom(wallet));
+ const positionsResult = useAtomValue(
+ positionsAtom(wallet.currentAccount.address),
+ );
const position = positionsResult.pipe(
Result.map((positions) => positions.find((p) => p.marketId === market.id)),
diff --git a/src/components/modules/Root/PreloadAtoms.tsx b/src/components/modules/Root/PreloadAtoms.tsx
index 31c7b20..49bba95 100644
--- a/src/components/modules/Root/PreloadAtoms.tsx
+++ b/src/components/modules/Root/PreloadAtoms.tsx
@@ -16,9 +16,9 @@ const PreloadWalletConnectedAtoms = ({
wallet: WalletConnected;
}) => {
useAtomMount(moralisTokenBalancesAtom(wallet.currentAccount.address));
- useAtomMount(providersBalancesAtom(wallet));
- useAtomMount(positionsAtom(wallet));
- useAtomMount(ordersAtom(wallet));
+ useAtomMount(providersBalancesAtom(wallet.currentAccount.address));
+ useAtomMount(positionsAtom(wallet.currentAccount.address));
+ useAtomMount(ordersAtom(wallet.currentAccount.address));
return null;
};
diff --git a/src/components/molecules/account-value-display.tsx b/src/components/molecules/account-value-display.tsx
index 35d9104..be6948f 100644
--- a/src/components/molecules/account-value-display.tsx
+++ b/src/components/molecules/account-value-display.tsx
@@ -6,7 +6,7 @@ import { cn, formatAmount, getTokenLogo } from "@/lib/utils";
export function AccountValueDisplay({ wallet }: { wallet: WalletConnected }) {
const selectedProviderBalances = useAtomValue(
- selectedProviderBalancesAtom(wallet),
+ selectedProviderBalancesAtom(wallet.currentAccount.address),
);
if (Result.isSuccess(selectedProviderBalances)) {
diff --git a/src/components/molecules/address-switcher.tsx b/src/components/molecules/address-switcher.tsx
index a8fa72b..cdeb364 100644
--- a/src/components/molecules/address-switcher.tsx
+++ b/src/components/molecules/address-switcher.tsx
@@ -1,27 +1,201 @@
-import { useAppKit } from "@reown/appkit/react";
-import { ChevronDown, Wallet } from "lucide-react";
+import { useAtomSet } from "@effect-atom/atom-react";
+import { useDisconnect } from "@reown/appkit/react";
+import { Check, ChevronDown, Copy, LogOut, Wallet } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { switchAccountAtom } from "@/atoms/wallet-atom";
import { Button } from "@/components/ui/button";
-import type { WalletConnected } from "@/domain/wallet";
-import { truncateAddress } from "@/lib/utils";
+import { Dialog } from "@/components/ui/dialog";
+import { isBrowserWallet, type WalletConnected } from "@/domain/wallet";
+import { cn, truncateAddress } from "@/lib/utils";
export const AddressSwitcher = ({ wallet }: { wallet: WalletConnected }) => {
- const { open } = useAppKit();
+ const [open, setOpen] = useState(false);
+ const switchAccount = useAtomSet(switchAccountAtom(wallet));
+ const handleAccountSwitch = (account: (typeof wallet.accounts)[number]) => {
+ switchAccount({ account });
+ setOpen(false);
+ };
+
+ return (
+
+ (
+
+ )}
+ />
+
+
+
+
+
+
+ Switch Account
+
+
+
+ {wallet.accounts.map((account) => {
+ const isCurrentAccount =
+ account.address === wallet.currentAccount.address &&
+ account.id === wallet.currentAccount.id;
+
+ return (
+
+ );
+ })}
+
- {/* Address Switcher */}
-
+
+ {copied ? "Copied!" : "Copy Address"}
+
+
+
+ {/* Ripple effect */}
+
+
+ );
+};
+
+const WalletActions = ({
+ address,
+ onDisconnect,
+ wallet,
+}: {
+ wallet: WalletConnected;
+ address: string;
+ onDisconnect: () => void;
+}) => {
+ const [copied, setCopied] = useState(false);
+ const timeoutRef = useRef(null);
+
+ const handleCopyAddress = () => {
+ navigator.clipboard.writeText(address);
+
+ if (copied) return;
+
+ setCopied(true);
+ timeoutRef.current = setTimeout(() => setCopied(false), 2000);
+ };
+
+ useEffect(() => {
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ };
+ }, []);
+
+ return (
+
+
+
+ {isBrowserWallet(wallet) && (
+
+ )}
+
+ );
+};
+
+const DisconnectButton = ({ onDisconnect }: { onDisconnect: () => void }) => {
+ const { disconnect } = useDisconnect();
+
+ const handleDisconnect = () => {
+ disconnect();
+ onDisconnect();
+ };
+
+ return (
+
);
};
diff --git a/src/components/molecules/tp-sl-dialog.tsx b/src/components/molecules/tp-sl-dialog.tsx
index 7f4c2fa..f8e41f3 100644
--- a/src/components/molecules/tp-sl-dialog.tsx
+++ b/src/components/molecules/tp-sl-dialog.tsx
@@ -1,4 +1,5 @@
import type { DialogRootActions } from "@base-ui/react/dialog";
+import { Match } from "effect";
import { X } from "lucide-react";
import { useRef, useState } from "react";
import { Button } from "@/components/ui/button";
@@ -47,7 +48,7 @@ export const TPOrSLDialog = (props: TPOrSLDialogProps) => {
return (
-
+ {props.children}
@@ -87,12 +88,13 @@ function TPOrSLDialogContent({
}: TPOrSLDialogContentProps) {
const [localSettings, setLocalSettings] = useState(settings);
+ const dialogTitle = Match.value(mode).pipe(
+ Match.when("takeProfit", () => "Take profit"),
+ Match.when("stopLoss", () => "Stop loss"),
+ Match.orElse(() => "Take profit and stop loss"),
+ );
+
const isSingleMode = mode !== undefined;
- const dialogTitle = isSingleMode
- ? mode === "takeProfit"
- ? "Take profit"
- : "Stop loss"
- : "Take profit and stop loss";
const calculateTriggerPrice = (
option: TPOrSLPercentageOption,
@@ -392,7 +394,7 @@ function TPOrSLInputFields({
onTriggerPriceChange(e.target.value)}
placeholder="Trigger price"
className="w-full h-full bg-transparent text-white text-sm font-normal tracking-[-0.42px] pl-4 pr-10 outline-none placeholder:text-gray-2"
@@ -405,7 +407,7 @@ function TPOrSLInputFields({
onPercentChange(e.target.value)}
placeholder={percentPlaceholder}
className="w-full h-full bg-transparent text-white text-sm font-normal tracking-[-0.42px] pl-4 pr-8 outline-none placeholder:text-gray-2"
diff --git a/src/context/appkit.tsx b/src/context/appkit.tsx
index 94e5d5e..488247d 100644
--- a/src/context/appkit.tsx
+++ b/src/context/appkit.tsx
@@ -15,7 +15,7 @@ export const AppKit = ({ children }: { children: React.ReactNode }) => {
wallet,
});
- if (Result.isSuccess(result)) {
+ if (Result.isSuccess(result) && result.value.wallet.type === "browser") {
return (
{children}
diff --git a/src/context/index.tsx b/src/context/index.tsx
new file mode 100644
index 0000000..b6ef508
--- /dev/null
+++ b/src/context/index.tsx
@@ -0,0 +1,17 @@
+import { StrictMode } from "react";
+import { Toaster } from "@/components/ui/toaster";
+import { AppKit } from "@/context/appkit";
+import { RootContainerProvider } from "@/context/root-container";
+
+export const Providers = ({ children }: { children: React.ReactNode }) => {
+ return (
+
+
+
+
+ {children}
+
+
+
+ );
+};
diff --git a/src/domain/chains/evm.ts b/src/domain/chains/evm.ts
index cc261d6..ae3be01 100644
--- a/src/domain/chains/evm.ts
+++ b/src/domain/chains/evm.ts
@@ -1,33 +1,14 @@
import { EvmNetworks } from "@stakekit/common";
const supportedEVMChains = [
- EvmNetworks.AvalancheC,
- EvmNetworks.Arbitrum,
- EvmNetworks.Binance,
- EvmNetworks.Celo,
EvmNetworks.Ethereum,
- EvmNetworks.EthereumGoerli,
- EvmNetworks.Harmony,
- EvmNetworks.Optimism,
- EvmNetworks.Polygon,
- EvmNetworks.Viction,
- EvmNetworks.EthereumHoodi,
EvmNetworks.Base,
- EvmNetworks.Linea,
- EvmNetworks.Core,
- EvmNetworks.Sonic,
- EvmNetworks.EthereumSepolia,
- EvmNetworks.Unichain,
- EvmNetworks.Katana,
- EvmNetworks.Gnosis,
- EvmNetworks.HyperEVM,
- EvmNetworks.Plasma,
+ EvmNetworks.Arbitrum,
+ EvmNetworks.Optimism,
EvmNetworks.Monad,
- EvmNetworks.MonadTestnet,
+ EvmNetworks.HyperEVM,
] as const;
-export const supportedEVMChainsSet = new Set(supportedEVMChains);
-
export type SupportedEvmChain = (typeof supportedEVMChains)[number];
export type EvmChainsMap = {
diff --git a/src/domain/chains/ledger.ts b/src/domain/chains/ledger.ts
new file mode 100644
index 0000000..cfb98e9
--- /dev/null
+++ b/src/domain/chains/ledger.ts
@@ -0,0 +1,54 @@
+import type { Currency, Families } from "@ledgerhq/wallet-api-client";
+import { EvmNetworks } from "@stakekit/common";
+import type { SupportedSKChains } from "@/domain/chains";
+
+export type SupportedLedgerLiveFamilies = Extract;
+
+export const supportedLedgerFamiliesWithCurrency = {
+ ethereum: {
+ ethereum: {
+ currencyId: "ethereum",
+ family: "ethereum",
+ skChainName: EvmNetworks.Ethereum,
+ },
+ base: {
+ currencyId: "base",
+ family: "ethereum",
+ skChainName: EvmNetworks.Base,
+ },
+ arbitrum: {
+ currencyId: "arbitrum",
+ family: "ethereum",
+ skChainName: EvmNetworks.Arbitrum,
+ },
+ optimism: {
+ currencyId: "optimism",
+ family: "ethereum",
+ skChainName: EvmNetworks.Optimism,
+ },
+ monad: {
+ currencyId: "monad",
+ family: "ethereum",
+ skChainName: EvmNetworks.Monad,
+ },
+ hyperevm: {
+ currencyId: "hyperevm",
+ family: "ethereum",
+ skChainName: EvmNetworks.HyperEVM,
+ },
+ },
+} as const satisfies SupportedLedgerFamiliesWithCurrency;
+
+export type SupportedLedgerFamiliesWithCurrency = Record<
+ SupportedLedgerLiveFamilies,
+ Partial<
+ Record<
+ (Currency["id"] & {}) | "*",
+ {
+ family: SupportedLedgerLiveFamilies;
+ currencyId: Currency["id"];
+ skChainName: SupportedSKChains;
+ }
+ >
+ >
+>;
diff --git a/src/domain/transactions.ts b/src/domain/transactions.ts
index 885bea0..7e99e93 100644
--- a/src/domain/transactions.ts
+++ b/src/domain/transactions.ts
@@ -1,14 +1,20 @@
import { Schema } from "effect";
-const EvmTxSchema = Schema.Struct(
- { chainId: Schema.Number },
- {
- key: Schema.String,
- value: Schema.Unknown,
- },
-);
+const HexString = Schema.TemplateLiteral(Schema.Literal("0x"), Schema.String);
+
+export const EvmTx = Schema.Struct({
+ from: Schema.String,
+ to: HexString,
+ data: HexString,
+ value: Schema.optional(Schema.BigInt),
+ maxFeePerGas: Schema.optional(Schema.BigInt),
+ maxPriorityFeePerGas: Schema.optional(Schema.BigInt),
+ gasLimit: Schema.BigInt,
+ nonce: Schema.Number,
+ chainId: Schema.Number,
+});
-export const EIP712TxSchema = Schema.Struct({
+export const EIP712Tx = Schema.Struct({
domain: Schema.Struct(
{ chainId: Schema.Number },
{
@@ -21,4 +27,12 @@ export const EIP712TxSchema = Schema.Struct({
primaryType: Schema.String,
});
-export const TransactionSchema = Schema.Union(EvmTxSchema, EIP712TxSchema);
+export const Transaction = Schema.Union(EvmTx, EIP712Tx);
+
+export type Transaction = typeof Transaction.Type;
+
+export const TransactionHash = Schema.String.pipe(
+ Schema.brand("TransactionHash"),
+);
+
+export type TransactionHash = typeof TransactionHash.Type;
diff --git a/src/domain/wallet.ts b/src/domain/wallet.ts
index c99336f..60035d2 100644
--- a/src/domain/wallet.ts
+++ b/src/domain/wallet.ts
@@ -1,10 +1,7 @@
import type { HttpClientError } from "@effect/platform";
-import type { AppKitNetwork } from "@reown/appkit/networks";
import type { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
-import { Data, type Effect, type Stream } from "effect";
-import type { NonEmptyArray } from "effect/Array";
+import { Data, type Effect, Schema, type Stream } from "effect";
import type { ParseError } from "effect/ParseResult";
-import type { SupportedSKChains } from "@/domain/chains";
import type {
ActionDto,
TransactionDto,
@@ -45,15 +42,17 @@ export type SignTransactionsState = {
}
);
-export type WalletAccount = {
- id: string;
- address: string;
-};
+export const WalletAccount = Schema.Struct({
+ id: Schema.String,
+ address: Schema.String.pipe(Schema.brand("WalletAccountAddress")),
+});
-type WalletBase = {
- networks: NonEmptyArray;
- wagmiAdapter: WagmiAdapter;
-};
+export type WalletAccount = typeof WalletAccount.Type;
+
+type BrowserWallet = { type: "browser"; wagmiAdapter: WagmiAdapter };
+type LedgerWallet = { type: "ledger" };
+
+type WalletBase = BrowserWallet | LedgerWallet;
export type WalletDisconnected = WalletBase & {
status: "disconnected";
@@ -63,11 +62,13 @@ export type WalletConnected = WalletBase & {
status: "connected";
currentAccount: WalletAccount;
accounts: WalletAccount[];
+ switchAccount: (args: {
+ account: WalletAccount;
+ }) => Effect.Effect;
signTransactions: (action: ActionDto) => Effect.Effect<
{
stream: Stream.Stream;
- startMachine: Effect.Effect;
- state: SignTransactionsState;
+ retry: Effect.Effect;
},
never,
never
@@ -98,6 +99,14 @@ export class SwitchChainError extends Data.TaggedError("SwitchChainError")<{
cause: unknown;
}> {}
+export class SwitchAccountError extends Data.TaggedError("SwitchAccountError")<{
+ cause: unknown;
+}> {}
+
export const isWalletConnected = (
wallet: Wallet | null,
): wallet is WalletConnected => wallet?.status === "connected";
+
+export const isBrowserWallet = (
+ wallet: Wallet | null,
+): wallet is WalletConnected & BrowserWallet => wallet?.type === "browser";
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 686f6cc..f504794 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -120,3 +120,7 @@ export const formatDate = (timestamp: number): string => {
hour12: true,
});
};
+
+export const truncateNumber = (number: number, precision: number = 2) => {
+ return Math.floor(number * 10 ** precision) / 10 ** precision;
+};
diff --git a/src/main.tsx b/src/main.tsx
index 9ecc2df..fcdc99a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,6 @@
import ReactDOM from "react-dom/client";
import "./main.css";
-import App from "@/index.tsx";
+import App from "@/app";
const rootElement = document.getElementById("app");
if (rootElement && !rootElement.innerHTML) {
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 37a2275..8304fd6 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -112,18 +112,18 @@ export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/account/deposit': typeof AccountDepositRoute
'/account/withdraw': typeof AccountWithdrawRoute
- '/account': typeof AccountIndexRoute
+ '/account/': typeof AccountIndexRoute
'/account/deposit/sign': typeof AccountDepositSignRoute
'/account/withdraw/sign': typeof AccountWithdrawSignRoute
'/position-details/$marketId/close': typeof PositionDetailsMarketIdCloseRoute
- '/position-details/$marketId': typeof PositionDetailsMarketIdIndexRoute
+ '/position-details/$marketId/': typeof PositionDetailsMarketIdIndexRoute
'/order/$marketId/$side/sign': typeof OrderMarketIdSideSignRoute
'/position-details/$marketId/cancel-order/sign': typeof PositionDetailsMarketIdCancelOrderSignRoute
'/position-details/$marketId/close/sign': typeof PositionDetailsMarketIdCloseSignRoute
'/position-details/$marketId/edit-sl-tp/sign': typeof PositionDetailsMarketIdEditSlTpSignRoute
- '/order/$marketId/$side': typeof OrderMarketIdSideIndexRoute
- '/position-details/$marketId/edit-leverage': typeof PositionDetailsMarketIdEditLeverageIndexRoute
- '/order/$marketId/$side/increase': typeof OrderMarketIdSideIncreaseIndexRoute
+ '/order/$marketId/$side/': typeof OrderMarketIdSideIndexRoute
+ '/position-details/$marketId/edit-leverage/': typeof PositionDetailsMarketIdEditLeverageIndexRoute
+ '/order/$marketId/$side/increase/': typeof OrderMarketIdSideIncreaseIndexRoute
}
export interface FileRoutesByTo {
'/': typeof IndexRoute
@@ -166,18 +166,18 @@ export interface FileRouteTypes {
| '/'
| '/account/deposit'
| '/account/withdraw'
- | '/account'
+ | '/account/'
| '/account/deposit/sign'
| '/account/withdraw/sign'
| '/position-details/$marketId/close'
- | '/position-details/$marketId'
+ | '/position-details/$marketId/'
| '/order/$marketId/$side/sign'
| '/position-details/$marketId/cancel-order/sign'
| '/position-details/$marketId/close/sign'
| '/position-details/$marketId/edit-sl-tp/sign'
- | '/order/$marketId/$side'
- | '/position-details/$marketId/edit-leverage'
- | '/order/$marketId/$side/increase'
+ | '/order/$marketId/$side/'
+ | '/position-details/$marketId/edit-leverage/'
+ | '/order/$marketId/$side/increase/'
fileRoutesByTo: FileRoutesByTo
to:
| '/'
@@ -244,7 +244,7 @@ declare module '@tanstack/react-router' {
'/account/': {
id: '/account/'
path: '/account'
- fullPath: '/account'
+ fullPath: '/account/'
preLoaderRoute: typeof AccountIndexRouteImport
parentRoute: typeof rootRouteImport
}
@@ -265,7 +265,7 @@ declare module '@tanstack/react-router' {
'/position-details/$marketId/': {
id: '/position-details/$marketId/'
path: '/position-details/$marketId'
- fullPath: '/position-details/$marketId'
+ fullPath: '/position-details/$marketId/'
preLoaderRoute: typeof PositionDetailsMarketIdIndexRouteImport
parentRoute: typeof rootRouteImport
}
@@ -293,14 +293,14 @@ declare module '@tanstack/react-router' {
'/position-details/$marketId/edit-leverage_/': {
id: '/position-details/$marketId/edit-leverage_/'
path: '/position-details/$marketId/edit-leverage'
- fullPath: '/position-details/$marketId/edit-leverage'
+ fullPath: '/position-details/$marketId/edit-leverage/'
preLoaderRoute: typeof PositionDetailsMarketIdEditLeverageIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/order/$marketId/$side/': {
id: '/order/$marketId/$side/'
path: '/order/$marketId/$side'
- fullPath: '/order/$marketId/$side'
+ fullPath: '/order/$marketId/$side/'
preLoaderRoute: typeof OrderMarketIdSideIndexRouteImport
parentRoute: typeof rootRouteImport
}
@@ -335,7 +335,7 @@ declare module '@tanstack/react-router' {
'/order/$marketId/$side/increase_/': {
id: '/order/$marketId/$side/increase_/'
path: '/order/$marketId/$side/increase'
- fullPath: '/order/$marketId/$side/increase'
+ fullPath: '/order/$marketId/$side/increase/'
preLoaderRoute: typeof OrderMarketIdSideIncreaseIndexRouteImport
parentRoute: typeof rootRouteImport
}
diff --git a/src/services/config.ts b/src/services/config.ts
index bdac7de..651749d 100644
--- a/src/services/config.ts
+++ b/src/services/config.ts
@@ -1,4 +1,4 @@
-import { ConfigProvider, Effect, Schema } from "effect";
+import { Config, ConfigProvider, Effect, Schema } from "effect";
export class ConfigService extends Effect.Service()(
"perps/services/config-service/ConfigService",
@@ -16,7 +16,7 @@ export class ConfigService extends Effect.Service()(
const reownProjectId = yield* Schema.Config(
"VITE_REOWN_PROJECT_ID",
Schema.NonEmptyString,
- );
+ ).pipe(Config.option);
const moralisApiKey = yield* Schema.Config(
"VITE_MORALIS_API_KEY",
diff --git a/src/services/runtime.ts b/src/services/runtime.ts
index 81066d3..fe41631 100644
--- a/src/services/runtime.ts
+++ b/src/services/runtime.ts
@@ -3,14 +3,22 @@ import { Cause, Effect, Layer, Logger } from "effect";
import { ApiClientService } from "@/services/api-client";
import { ConfigService } from "@/services/config";
import { HttpClientService } from "@/services/http-client";
-import { WalletService } from "@/services/wallet-service";
+import { BrowserSignerLayer } from "@/services/wallet/browser-signer";
+import { LedgerSignerLayer } from "@/services/wallet/ledger-signer";
+import { isLedgerDappBrowserProvider } from "@/services/wallet/ledger-signer/utils";
+import { WalletService } from "@/services/wallet/wallet-service";
+
+const Signer = isLedgerDappBrowserProvider
+ ? LedgerSignerLayer.pipe(Layer.orDie)
+ : BrowserSignerLayer.pipe(Layer.provide(ConfigService.Default)).pipe(
+ Layer.orDie,
+ );
const layer = Layer.mergeAll(
- WalletService.Default.pipe(
- Layer.provideMerge(ApiClientService.Default),
- Layer.provideMerge(ConfigService.Default),
- ),
+ WalletService.Default.pipe(Layer.provide(Signer)),
+ ApiClientService.Default,
HttpClientService.Default,
+ ConfigService.Default,
Registry.layer,
Logger.pretty,
).pipe(
@@ -19,6 +27,7 @@ const layer = Layer.mergeAll(
console.error(Cause.pretty(cause));
}),
),
+ Layer.orDie,
);
const memoMap = Layer.makeMemoMap.pipe(Effect.runSync);
diff --git a/src/services/wallet/browser-signer.ts b/src/services/wallet/browser-signer.ts
new file mode 100644
index 0000000..6619175
--- /dev/null
+++ b/src/services/wallet/browser-signer.ts
@@ -0,0 +1,212 @@
+import type { AppKitNetwork } from "@reown/appkit/networks";
+import { createAppKit } from "@reown/appkit/react";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { EvmNetworks } from "@stakekit/common";
+import {
+ Array as _Array,
+ Effect,
+ identity,
+ Layer,
+ Option,
+ Record,
+ Schema,
+ SubscriptionRef,
+} from "effect";
+import type { NonEmptyArray } from "effect/Array";
+import { ChainNotFoundError, defineChain } from "viem";
+import { arbitrum, base, mainnet, monad, optimism } from "viem/chains";
+import {
+ sendTransaction,
+ signTypedData,
+ switchConnection,
+ switchChain as wagmiSwitchChain,
+} from "wagmi/actions";
+import type { SupportedSKChains } from "@/domain/chains";
+import {
+ EIP712Tx,
+ type Transaction,
+ TransactionHash,
+} from "@/domain/transactions";
+import {
+ SignTransactionError,
+ SwitchAccountError,
+ SwitchChainError,
+ WalletAccount,
+} from "@/domain/wallet";
+import { ConfigService } from "@/services/config";
+import { type AccountsState, Signer } from "@/services/wallet/signer";
+
+const hyperLiquidL1 = defineChain({
+ id: 1337,
+ caipNetworkId: "eip155:1337",
+ chainNamespace: "eip155",
+ name: "Hyperliquid L1",
+ nativeCurrency: { name: "HYPE", symbol: "HYPE", decimals: 18 },
+ rpcUrls: {
+ default: { http: ["https://api.hyperliquid.xyz/evm"] },
+ },
+ blockExplorers: {
+ default: { name: "Hyperliquid", url: "https://app.hyperliquid.xyz" },
+ },
+});
+
+export const BrowserSignerLayer = Effect.gen(function* () {
+ const projectId = yield* ConfigService.pipe(
+ Effect.andThen((config) => config.reownProjectId),
+ );
+
+ const networks: NonEmptyArray<
+ AppKitNetwork & { skChainName: SupportedSKChains }
+ > = [
+ { ...mainnet, skChainName: EvmNetworks.Ethereum },
+ { ...base, skChainName: EvmNetworks.Base },
+ { ...arbitrum, skChainName: EvmNetworks.Arbitrum },
+ { ...optimism, skChainName: EvmNetworks.Optimism },
+ { ...monad, skChainName: EvmNetworks.Monad },
+ { ...hyperLiquidL1, skChainName: EvmNetworks.HyperEVM },
+ ];
+
+ const chainsMap = Record.fromIterableBy(networks, (network) =>
+ network.id.toString(),
+ );
+
+ const wagmiAdapter = new WagmiAdapter({
+ networks,
+ projectId,
+ multiInjectedProviderDiscovery: true,
+ });
+
+ createAppKit({
+ networks,
+ projectId,
+ themeVariables: {
+ "--apkt-font-family": "var(--font-family)",
+ },
+ enableNetworkSwitch: false,
+ adapters: [wagmiAdapter],
+ });
+
+ const switchChain = (chainId: AppKitNetwork["id"]) =>
+ Effect.gen(function* () {
+ const chain = yield* Record.get(chainsMap, chainId.toString()).pipe(
+ Effect.mapError(() => new ChainNotFoundError()),
+ );
+
+ yield* Effect.tryPromise({
+ try: () =>
+ wagmiSwitchChain(wagmiAdapter.wagmiConfig, {
+ chainId: typeof chain.id === "number" ? chain.id : Number(chain.id),
+ }),
+ catch: (e) => new SwitchChainError({ cause: e }),
+ });
+ });
+
+ const signTransaction = Effect.fn(function* ({
+ transaction,
+ }: {
+ transaction: Transaction;
+ }) {
+ const chainId = Schema.is(EIP712Tx)(transaction)
+ ? transaction.domain.chainId
+ : transaction.chainId;
+
+ if (chainId !== wagmiAdapter.wagmiConfig.state.chainId) {
+ yield* switchChain(chainId).pipe(Effect.orDie);
+ }
+
+ return yield* Effect.tryPromise({
+ try: () =>
+ Schema.is(EIP712Tx)(transaction)
+ ? signTypedData(wagmiAdapter.wagmiConfig, {
+ primaryType: transaction.primaryType,
+ message: transaction.message,
+ types: transaction.types,
+ domain: transaction.domain,
+ })
+ : sendTransaction(wagmiAdapter.wagmiConfig, transaction),
+ catch: (e) => new SignTransactionError({ cause: e }),
+ }).pipe(Effect.andThen(Schema.decodeSync(TransactionHash)));
+ });
+
+ const accountsStateRef = yield* SubscriptionRef.make({
+ status: "disconnected",
+ });
+
+ yield* Effect.acquireRelease(
+ Effect.sync(() =>
+ wagmiAdapter.wagmiConfig.subscribe(identity, (nextState) => {
+ nextState.status;
+ const currentConnectionId = nextState.current;
+
+ SubscriptionRef.update(
+ accountsStateRef,
+ (prevWallet): AccountsState => {
+ const connection = Option.fromNullable(currentConnectionId).pipe(
+ Option.flatMapNullable((connectionId) =>
+ nextState.connections.get(connectionId),
+ ),
+ );
+
+ if (Option.isNone(connection)) {
+ return { status: "disconnected" };
+ }
+
+ const currentAccount = Option.some(prevWallet).pipe(
+ Option.filter((accounts) => accounts?.status === "connected"),
+ Option.map((wallet) => wallet.currentAccount),
+ Option.flatMapNullable((prevAcc) =>
+ connection.value.accounts.find(
+ (acc) => acc === prevAcc.address,
+ ),
+ ),
+ Option.orElse(() => _Array.head(connection.value.accounts)),
+ );
+
+ if (Option.isNone(currentAccount)) {
+ return { status: "disconnected" };
+ }
+
+ return {
+ status: "connected",
+ currentAccount: Schema.decodeSync(WalletAccount)({
+ id: currentAccount.value,
+ address: currentAccount.value,
+ }),
+ accounts: connection.value.accounts.map((acc) =>
+ Schema.decodeSync(WalletAccount)({
+ id: acc,
+ address: acc,
+ }),
+ ),
+ };
+ },
+ ).pipe(Effect.runSync);
+ }),
+ ),
+ (unsubscribe) => Effect.sync(() => unsubscribe()),
+ );
+
+ const switchAccount = Effect.fn(
+ function* ({ account }: { account: WalletAccount }) {
+ const connection = yield* Option.fromNullable(
+ wagmiAdapter.wagmiConfig.state.connections.get(account.id),
+ );
+
+ yield* Effect.tryPromise(() =>
+ switchConnection(wagmiAdapter.wagmiConfig, {
+ connector: connection.connector,
+ }),
+ );
+ },
+ Effect.mapError((e) => new SwitchAccountError({ cause: e })),
+ );
+
+ return Signer.of({
+ type: "browser",
+ signTransaction,
+ switchAccount,
+ wagmiAdapter,
+ accountsStream: accountsStateRef.changes,
+ getAccountState: accountsStateRef.get,
+ });
+}).pipe(Layer.scoped(Signer));
diff --git a/src/services/wallet/ledger-signer/index.ts b/src/services/wallet/ledger-signer/index.ts
new file mode 100644
index 0000000..4a0ce5d
--- /dev/null
+++ b/src/services/wallet/ledger-signer/index.ts
@@ -0,0 +1,174 @@
+import {
+ deserializeTransaction,
+ WalletAPIClient,
+ WindowMessageTransport,
+} from "@ledgerhq/wallet-api-client";
+import {
+ Array as _Array,
+ Effect,
+ Layer,
+ pipe,
+ Schema,
+ SubscriptionRef,
+} from "effect";
+import { evmChainsMap } from "@/domain/chains/evm";
+import type { SupportedLedgerLiveFamilies } from "@/domain/chains/ledger";
+import {
+ EIP712Tx,
+ EvmTx,
+ type Transaction,
+ TransactionHash,
+} from "@/domain/transactions";
+import {
+ SignTransactionError,
+ SwitchAccountError,
+ WalletAccount,
+} from "@/domain/wallet";
+import {
+ getFilteredSupportedLedgerFamiliesWithCurrency,
+ getLedgerAccounts,
+ getLedgerCurrencies,
+ NoAccountsFoundError,
+} from "@/services/wallet/ledger-signer/utils";
+import { type AccountsState, Signer } from "@/services/wallet/signer";
+
+export const LedgerSignerLayer = Effect.gen(function* () {
+ const transport = new WindowMessageTransport();
+ transport.connect();
+ const walletApiClient = new WalletAPIClient(transport);
+
+ /**
+ * Create Map
+ * then use TokenCurrency parent to get CryptoCurrency family
+ * and add to map TokenCurrency['id'] => CryptoCurrency['family']
+ */
+ const ledgerCurrencies = yield* getLedgerCurrencies(walletApiClient);
+ const parentAccounts = yield* getLedgerAccounts(walletApiClient).pipe(
+ Effect.map((allAccounts) => allAccounts.filter((a) => !a.parentAccountId)),
+ );
+
+ const filteredSupportedLedgerFamiliesWithCurrency =
+ getFilteredSupportedLedgerFamiliesWithCurrency({
+ ledgerCurrencies,
+ accounts: parentAccounts,
+ enabledChainsMap: { evm: evmChainsMap },
+ });
+
+ const uniqueByAddressAccounts = pipe(
+ parentAccounts.reduce((acc, next) => {
+ const family = ledgerCurrencies.get(next.currency);
+
+ if (!family) return acc;
+
+ const itemMap = filteredSupportedLedgerFamiliesWithCurrency.get(
+ family as SupportedLedgerLiveFamilies,
+ );
+
+ if (!family || !itemMap) return acc;
+
+ const chainItem = itemMap.get("*") || itemMap.get(next.currency);
+
+ if (chainItem) {
+ acc.push(
+ Schema.decodeSync(WalletAccount)({
+ address: next.address,
+ id: next.id,
+ }),
+ );
+ }
+
+ return acc;
+ }, []),
+ (val) => [...new Map(val.map((a) => [a.address, a])).values()],
+ );
+
+ const accountWithChain = yield* _Array
+ .head(uniqueByAddressAccounts)
+ .pipe(Effect.mapError(() => new NoAccountsFoundError()));
+
+ const accountsStateRef = yield* SubscriptionRef.make({
+ status: "connected",
+ currentAccount: accountWithChain,
+ accounts: uniqueByAddressAccounts,
+ });
+
+ const signMessage = ({
+ account,
+ transaction,
+ }: {
+ account: WalletAccount;
+ transaction: typeof EIP712Tx.Type;
+ }) =>
+ Effect.try(() => Buffer.from(JSON.stringify(transaction))).pipe(
+ Effect.andThen((buffer) =>
+ walletApiClient.message.sign(account.id, buffer),
+ ),
+ Effect.andThen((buffer) =>
+ Schema.decodeSync(TransactionHash)(buffer.toString("hex")),
+ ),
+ Effect.mapError((error) => new SignTransactionError({ cause: error })),
+ );
+
+ const signEVMTransaction = ({
+ account,
+ transaction,
+ }: {
+ account: WalletAccount;
+ transaction: typeof EvmTx.Type;
+ }) =>
+ Schema.encode(EvmTx)(transaction).pipe(
+ Effect.andThen((tx) =>
+ Effect.try(() =>
+ deserializeTransaction({
+ ...tx,
+ family: "ethereum",
+ amount: tx.value ?? "0",
+ recipient: tx.to,
+ data: tx.data.slice(2),
+ }),
+ ),
+ ),
+ Effect.andThen((tx) =>
+ Effect.tryPromise(() =>
+ walletApiClient.transaction.signAndBroadcast(account.id, tx),
+ ),
+ ),
+ Effect.andThen(Schema.decodeSync(TransactionHash)),
+ Effect.mapError((error) => new SignTransactionError({ cause: error })),
+ );
+
+ const signTransaction = Effect.fn(function* ({
+ account,
+ transaction,
+ }: {
+ transaction: Transaction;
+ account: WalletAccount;
+ }) {
+ return yield* Schema.is(EIP712Tx)(transaction)
+ ? signMessage({ account, transaction })
+ : signEVMTransaction({ account, transaction });
+ });
+
+ const switchAccount = Effect.fn(
+ function* ({ account }: { account: WalletAccount }) {
+ const newAccount = yield* _Array.findFirst(
+ uniqueByAddressAccounts,
+ (a) => a.id === account.id,
+ );
+
+ yield* SubscriptionRef.update(accountsStateRef, (state) => ({
+ ...state,
+ currentAccount: newAccount,
+ }));
+ },
+ Effect.mapError((e) => new SwitchAccountError({ cause: e })),
+ );
+
+ return Layer.succeed(Signer, {
+ type: "ledger",
+ signTransaction,
+ switchAccount,
+ accountsStream: accountsStateRef.changes,
+ getAccountState: accountsStateRef.get,
+ });
+}).pipe(Layer.unwrapEffect);
diff --git a/src/services/wallet/ledger-signer/utils.ts b/src/services/wallet/ledger-signer/utils.ts
new file mode 100644
index 0000000..50f0f01
--- /dev/null
+++ b/src/services/wallet/ledger-signer/utils.ts
@@ -0,0 +1,183 @@
+import type {
+ Account,
+ CryptoCurrency,
+ Currency,
+ ERC20TokenCurrency,
+ WalletAPIClient,
+} from "@ledgerhq/wallet-api-client";
+import { Data, Effect, Option, Record } from "effect";
+import type { SupportedSKChains } from "@/domain/chains";
+import type { EvmChainsMap } from "@/domain/chains/evm";
+import {
+ type SupportedLedgerLiveFamilies,
+ supportedLedgerFamiliesWithCurrency,
+} from "@/domain/chains/ledger";
+
+export const getFilteredSupportedLedgerFamiliesWithCurrency = ({
+ accounts,
+ ledgerCurrencies,
+ enabledChainsMap,
+}: {
+ accounts: Account[];
+ ledgerCurrencies: Effect.Effect.Success<
+ ReturnType
+ >;
+ enabledChainsMap: { evm: Partial };
+}) => {
+ const { accountsFamilies, accountsCurrencies } = accounts.reduce(
+ (acc, next) => {
+ const family = ledgerCurrencies.get(next.currency);
+
+ if (family) {
+ acc.accountsFamilies.add(family);
+ acc.accountsCurrencies.add(next.currency);
+ }
+
+ return acc;
+ },
+ { accountsFamilies: new Set(), accountsCurrencies: new Set() },
+ );
+
+ const v = Record.map(
+ supportedLedgerFamiliesWithCurrency,
+ Record.filter((s, key) => {
+ const chain = enabledChainsMap.evm[s.skChainName]?.skChainName;
+
+ if (!chain) return false;
+
+ if (
+ accountsFamilies.has(s.family) &&
+ ((key as typeof key | "*") === "*" ||
+ accountsCurrencies.has(s.currencyId))
+ ) {
+ return true;
+ }
+
+ return false;
+ }),
+ );
+
+ type V = typeof v;
+ type Key = keyof V;
+
+ return Object.keys(v).reduce(
+ (acc, key) => {
+ const subItem = v[key as Key];
+
+ type SubItemKey = keyof typeof subItem;
+
+ const subItemMap = Object.keys(subItem).reduce((acc, subKey) => {
+ acc.set(subKey as SubItemKey, subItem[subKey as keyof typeof subItem]);
+
+ return acc;
+ }, new Map());
+
+ acc.set(key as Key, subItemMap);
+
+ return acc;
+ },
+ new Map<
+ Key,
+ Map<
+ "*" | (string & {}),
+ {
+ currencyId: string;
+ family: SupportedLedgerLiveFamilies;
+ skChainName: SupportedSKChains;
+ }
+ >
+ >(),
+ );
+};
+
+export const getLedgerCurrencies = (walletApiClient: WalletAPIClient) =>
+ Effect.tryPromise({
+ try: () =>
+ walletApiClient.currency.list({
+ currencyIds: Object.values(supportedLedgerFamiliesWithCurrency).flatMap(
+ (chain) =>
+ Object.values(chain).map((currency) => currency.currencyId),
+ ),
+ }),
+ catch: (error) => new GetCurrenciesError({ cause: error }),
+ }).pipe(
+ Effect.map((val) =>
+ val.reduce(
+ (acc, next) => {
+ if (next.type === "CryptoCurrency") {
+ acc.cryptoCurrency.set(next.id, next.family);
+ } else {
+ acc.tokenCurrency.push(next);
+ }
+
+ return acc;
+ },
+ { cryptoCurrency: new Map(), tokenCurrency: [] } as {
+ cryptoCurrency: Map;
+ tokenCurrency: ERC20TokenCurrency[];
+ },
+ ),
+ ),
+ Effect.map((val) => {
+ val.tokenCurrency.forEach((t) => {
+ const parentCryptoCurrencyFamily = val.cryptoCurrency.get(t.parent);
+
+ if (parentCryptoCurrencyFamily) {
+ val.cryptoCurrency.set(t.id, parentCryptoCurrencyFamily);
+ }
+ });
+
+ return val.cryptoCurrency;
+ }),
+ );
+
+export const getLedgerAccounts = (walletApiClient: WalletAPIClient) =>
+ Effect.tryPromise({
+ try: () => walletApiClient.account.list(),
+ catch: (error) => new GetAccountsError({ cause: error }),
+ }).pipe(
+ Effect.map((val) => ({
+ accounts: val,
+ accountsMap: new Map(val.map((v) => [v.id, v])),
+ })),
+ Effect.map((val) =>
+ val.accounts.map((acc) => {
+ if (!acc.parentAccountId) return acc;
+
+ return Option.fromNullable(
+ val.accountsMap.get(acc.parentAccountId),
+ ).pipe(
+ Option.map((parentAcc) => ({
+ ...acc,
+ currency: parentAcc.currency,
+ })),
+ Option.getOrElse(() => acc),
+ );
+ }),
+ ),
+ );
+
+export class GetAccountsError extends Data.TaggedError("GetAccountsError")<{
+ cause: unknown;
+}> {}
+
+export class GetCurrenciesError extends Data.TaggedError("GetCurrenciesError")<{
+ cause: unknown;
+}> {}
+
+export class NoAccountsFoundError extends Data.TaggedError(
+ "NoAccountsFoundError",
+) {}
+
+export const isLedgerDappBrowserProvider = Option.fromNullable(window).pipe(
+ Option.map((w) => {
+ try {
+ const params = new URLSearchParams(w.self.location.search);
+
+ return !!params.get("embed");
+ } catch (_error) {
+ return false;
+ }
+ }),
+ Option.getOrElse(() => false),
+);
diff --git a/src/services/wallet/signer.ts b/src/services/wallet/signer.ts
new file mode 100644
index 0000000..d61ae74
--- /dev/null
+++ b/src/services/wallet/signer.ts
@@ -0,0 +1,39 @@
+import type { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { Context, type Effect, type Stream } from "effect";
+import type { Transaction, TransactionHash } from "@/domain/transactions";
+import type {
+ SignTransactionError,
+ SwitchAccountError,
+ WalletAccount,
+} from "@/domain/wallet";
+
+export type AccountsState =
+ | { status: "disconnected" }
+ | {
+ status: "connected";
+ currentAccount: WalletAccount;
+ accounts: WalletAccount[];
+ };
+
+export class Signer extends Context.Tag("Signer")<
+ Signer,
+ {
+ signTransaction: (args: {
+ transaction: Transaction;
+ account: WalletAccount;
+ }) => Effect.Effect;
+ switchAccount: (args: {
+ account: WalletAccount;
+ }) => Effect.Effect;
+ accountsStream: Stream.Stream;
+ getAccountState: Effect.Effect;
+ } & (
+ | {
+ type: "browser";
+ wagmiAdapter: WagmiAdapter;
+ }
+ | {
+ type: "ledger";
+ }
+ )
+>() {}
diff --git a/src/services/wallet-service.ts b/src/services/wallet/wallet-service.ts
similarity index 60%
rename from src/services/wallet-service.ts
rename to src/services/wallet/wallet-service.ts
index bca1b33..80c8bfd 100644
--- a/src/services/wallet-service.ts
+++ b/src/services/wallet/wallet-service.ts
@@ -1,92 +1,32 @@
-import {
- type AppKitNetwork,
- arbitrum,
- base,
- defineChain,
- mainnet,
- monad,
- optimism,
-} from "@reown/appkit/networks";
-import { createAppKit } from "@reown/appkit/react";
-import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
-import { EvmNetworks } from "@stakekit/common";
import {
Array as _Array,
Data,
Duration,
Effect,
- identity,
Match,
- Option,
- Record,
Schedule,
Schema,
+ Stream,
SubscriptionRef,
} from "effect";
+import { Transaction } from "@/domain/transactions";
import {
- sendTransaction,
- signTypedData,
- switchChain as wagmiSwitchChain,
-} from "wagmi/actions";
-import { EIP712TxSchema, TransactionSchema } from "@/domain/transactions";
-import {
- ChainNotFoundError,
- isWalletConnected,
- SignTransactionError,
type SignTransactionsState,
- SwitchChainError,
TransactionFailedError,
TransactionNotConfirmedError,
type Wallet,
} from "@/domain/wallet";
import { ApiClientService } from "@/services/api-client";
import type { ActionDto } from "@/services/api-client/api-schemas";
-import { ConfigService } from "@/services/config";
-
-const hyperLiquidL1 = defineChain({
- id: 1337,
- caipNetworkId: "eip155:1337",
- chainNamespace: "eip155",
- name: "Hyperliquid L1",
- nativeCurrency: { name: "HYPE", symbol: "HYPE", decimals: 18 },
- rpcUrls: {
- default: { http: ["https://api.hyperliquid.xyz/evm"] },
- },
- blockExplorers: {
- default: { name: "Hyperliquid", url: "https://app.hyperliquid.xyz" },
- },
-});
+import { type AccountsState, Signer } from "@/services/wallet/signer";
export class WalletService extends Effect.Service()(
"perps/services/wallet-service/WalletService",
{
+ dependencies: [ApiClientService.Default],
scoped: Effect.gen(function* () {
- const { reownProjectId } = yield* ConfigService;
const apiClient = yield* ApiClientService;
-
- const networks: Wallet["networks"] = [
- { ...mainnet, skChainName: EvmNetworks.Ethereum },
- { ...base, skChainName: EvmNetworks.Base },
- { ...arbitrum, skChainName: EvmNetworks.Arbitrum },
- { ...optimism, skChainName: EvmNetworks.Optimism },
- { ...monad, skChainName: EvmNetworks.Monad },
- { ...hyperLiquidL1, skChainName: EvmNetworks.HyperEVM },
- ];
- const chainsMap = Record.fromIterableBy(networks, (network) =>
- network.id.toString(),
- );
-
- const wagmiAdapter = new WagmiAdapter({
- networks,
- projectId: reownProjectId,
- multiInjectedProviderDiscovery: true,
- });
-
- const walletRef = yield* SubscriptionRef.make({
- networks,
- wagmiAdapter,
- status: "disconnected",
- });
+ const signer = yield* Signer;
type SignAction = Data.TaggedEnum<{
MachineStart: {};
@@ -102,22 +42,6 @@ export class WalletService extends Effect.Service()(
}>;
const SignAction = Data.taggedEnum();
- const switchChain = (chainId: AppKitNetwork["id"]) =>
- Effect.gen(function* () {
- const chain = yield* Record.get(chainsMap, chainId.toString()).pipe(
- Effect.mapError(() => new ChainNotFoundError()),
- );
-
- yield* Effect.tryPromise({
- try: () =>
- wagmiSwitchChain(wagmiAdapter.wagmiConfig, {
- chainId:
- typeof chain.id === "number" ? chain.id : Number(chain.id),
- }),
- catch: (e) => new SwitchChainError({ cause: e }),
- });
- });
-
const signTransactions = (action: ActionDto) =>
Effect.gen(function* () {
const ref = yield* SubscriptionRef.make({
@@ -135,31 +59,37 @@ export class WalletService extends Effect.Service()(
SignAction.$match(action, {
MachineStart: () => ({
...state,
+ error: null,
txHash: null,
step: "sign" as const,
}),
SignStart: () => ({
...state,
+ error: null,
txHash: null,
step: "sign" as const,
}),
SignDone: (val) => ({
...state,
+ error: null,
txHash: val.txHash,
step: "submit" as const,
}),
SubmitStart: () => ({
...state,
+ error: null,
txHash: state.txHash as string,
step: "submit" as const,
}),
SubmitDone: () => ({
...state,
+ error: null,
txHash: state.txHash as string,
step: "check" as const,
}),
CheckStart: () => ({
...state,
+ error: null,
txHash: state.txHash as string,
step: "check" as const,
}),
@@ -204,9 +134,9 @@ export class WalletService extends Effect.Service()(
.get(state.transactions, state.currentTxIndex)
.pipe(Effect.orDie);
- const wallet = yield* SubscriptionRef.get(walletRef);
+ const accountState = yield* signer.getAccountState;
- if (wallet.status === "disconnected") {
+ if (accountState.status === "disconnected") {
return yield* Effect.dieMessage("Wallet is disconnected");
}
@@ -218,18 +148,10 @@ export class WalletService extends Effect.Service()(
);
}
- const decodedTx = yield* Schema.decodeUnknown(TransactionSchema)(
+ const decodedTx = yield* Schema.decodeUnknown(Transaction)(
signablePayload,
).pipe(Effect.orDie);
- const txChainId = Schema.is(EIP712TxSchema)(decodedTx)
- ? decodedTx.domain.chainId
- : decodedTx.chainId;
-
- if (txChainId !== wagmiAdapter.wagmiConfig.state.chainId) {
- yield* switchChain(txChainId).pipe(Effect.orDie);
- }
-
yield* Match.value(state.step).pipe(
Match.when(null, () => updateState(SignAction.MachineStart())),
Match.when(
@@ -237,17 +159,9 @@ export class WalletService extends Effect.Service()(
Effect.fn(function* () {
yield* updateState(SignAction.SignStart());
- const txHash = yield* Effect.tryPromise({
- try: () =>
- Schema.is(EIP712TxSchema)(decodedTx)
- ? signTypedData(wagmiAdapter.wagmiConfig, {
- primaryType: decodedTx.primaryType,
- message: decodedTx.message,
- types: decodedTx.types,
- domain: decodedTx.domain,
- })
- : sendTransaction(wagmiAdapter.wagmiConfig, decodedTx),
- catch: (e) => new SignTransactionError({ cause: e }),
+ const txHash = yield* signer.signTransaction({
+ transaction: decodedTx,
+ account: accountState.currentAccount,
});
yield* updateState(SignAction.SignDone({ txHash }));
@@ -343,84 +257,74 @@ export class WalletService extends Effect.Service()(
Effect.ignore,
);
- return {
- stream: ref.changes,
- startMachine,
- state: yield* SubscriptionRef.get(ref),
- };
- });
+ startMachine.pipe(Effect.runFork);
- yield* Effect.acquireRelease(
- Effect.sync(() =>
- wagmiAdapter.wagmiConfig.subscribe(identity, (nextState) => {
- nextState.status;
- const currentConnectionId = nextState.current;
+ const retry = startMachine;
+ const stream = ref.changes;
- SubscriptionRef.update(walletRef, (prevWallet): Wallet => {
- const connection = Option.fromNullable(currentConnectionId).pipe(
- Option.flatMapNullable((connectionId) =>
- nextState.connections.get(connectionId),
- ),
- );
+ return { stream, retry };
+ });
- if (Option.isNone(connection)) {
+ const getWalletState = Match.type<{
+ signer: Signer["Type"];
+ accountsState: AccountsState;
+ }>().pipe(
+ Match.withReturnType(),
+ Match.when(
+ { signer: { type: "browser" } },
+ ({ signer, accountsState }) =>
+ Match.value(accountsState).pipe(
+ Match.withReturnType(),
+ Match.when({ status: "connected" }, (connectedState) => {
return {
- status: "disconnected",
- wagmiAdapter,
- networks,
+ type: "browser",
+ wagmiAdapter: signer.wagmiAdapter,
+ status: "connected",
+ accounts: connectedState.accounts,
+ currentAccount: connectedState.currentAccount,
+ signTransactions,
+ switchAccount: signer.switchAccount,
};
- }
-
- const currentAccount = Option.some(prevWallet).pipe(
- Option.filter(isWalletConnected),
- Option.map((wallet) => wallet.currentAccount),
- Option.flatMapNullable((prevAcc) =>
- connection.value.accounts.find(
- (acc) => acc === prevAcc.address,
- ),
- ),
- Option.orElse(() => _Array.head(connection.value.accounts)),
- );
-
- if (Option.isNone(currentAccount)) {
+ }),
+ Match.orElse(() => {
return {
+ type: "browser",
+ wagmiAdapter: signer.wagmiAdapter,
status: "disconnected",
- wagmiAdapter,
- networks,
};
- }
-
+ }),
+ ),
+ ),
+ Match.orElse(({ accountsState }) =>
+ Match.value(accountsState).pipe(
+ Match.withReturnType(),
+ Match.when({ status: "connected" }, (connectedState) => {
return {
+ type: "ledger",
status: "connected",
- wagmiAdapter,
- networks,
- accounts: connection.value.accounts.map((acc) => ({
- id: acc,
- address: acc,
- })),
- currentAccount: {
- id: currentAccount.value,
- address: currentAccount.value,
- },
+ accounts: connectedState.accounts,
+ currentAccount: connectedState.currentAccount,
signTransactions,
+ switchAccount: signer.switchAccount,
};
- }).pipe(Effect.runSync);
- }),
+ }),
+ Match.orElse(() => {
+ return {
+ type: "ledger",
+ status: "disconnected",
+ };
+ }),
+ ),
),
- (unsubscribe) => Effect.sync(() => unsubscribe()),
);
- createAppKit({
- networks,
- projectId: reownProjectId,
- themeVariables: {
- "--apkt-font-family": "var(--font-family)",
- },
- enableNetworkSwitch: false,
- adapters: [wagmiAdapter],
- });
+ const walletStream = signer.accountsStream.pipe(
+ Stream.map((accountsState) =>
+ getWalletState({ signer, accountsState }),
+ ),
+ );
- return { walletStream: walletRef.changes };
+ return { walletStream };
}),
},
) {}
diff --git a/tests/components/leverage-dialog.test.tsx b/tests/components/leverage-dialog.test.tsx
new file mode 100644
index 0000000..a702a4c
--- /dev/null
+++ b/tests/components/leverage-dialog.test.tsx
@@ -0,0 +1,491 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import {
+ LeverageDialog,
+ LeverageDialogContent,
+} from "@/components/modules/Order/Overview/leverage-dialog";
+import { TestWrapper } from "./wrapper";
+
+const defaultProps = {
+ leverage: 10,
+ onLeverageChange: vi.fn(),
+ currentPrice: 50000,
+ maxLeverage: 40,
+ side: "long" as const,
+};
+
+describe("LeverageDialog", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ test("renders trigger button", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await expect.element(screen.getByText("Set Leverage")).toBeVisible();
+ });
+
+ test("opens dialog when trigger is clicked", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ await expect.element(screen.getByTestId("leverage-title")).toBeVisible();
+ });
+
+ test("displays current leverage value", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ await expect
+ .element(screen.getByTestId("leverage-display"))
+ .toHaveTextContent("15x");
+ });
+
+ test("displays warning banner for long position", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ await expect
+ .element(screen.getByText(/You will be liquidated if price drops by/))
+ .toBeVisible();
+ });
+
+ test("displays warning banner for short position", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ await expect
+ .element(screen.getByText(/You will be liquidated if price rises by/))
+ .toBeVisible();
+ });
+
+ test("displays estimated liquidation price", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ await expect
+ .element(screen.getByText("Est. Liquidation Price"))
+ .toBeVisible();
+ });
+
+ test("displays current price", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ await expect.element(screen.getByText("Current price")).toBeVisible();
+ await expect.element(screen.getByText("50,000")).toBeVisible();
+ });
+
+ test("displays leverage buttons for maxLeverage 40", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ // generateLeverageButtons(40) returns [2, 5, 10, 20, 40]
+ await expect.element(screen.getByTestId("leverage-button-2")).toBeVisible();
+ await expect.element(screen.getByTestId("leverage-button-5")).toBeVisible();
+ await expect
+ .element(screen.getByTestId("leverage-button-10"))
+ .toBeVisible();
+ await expect
+ .element(screen.getByTestId("leverage-button-20"))
+ .toBeVisible();
+ await expect
+ .element(screen.getByTestId("leverage-button-40"))
+ .toBeVisible();
+ });
+
+ test("displays leverage stop labels", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ // leverageStops = [MIN_LEVERAGE, maxLeverage/2, maxLeverage] = [1, 20, 40]
+ await expect.element(screen.getByTestId("leverage-stop-1")).toBeVisible();
+ await expect.element(screen.getByTestId("leverage-stop-20")).toBeVisible();
+ await expect.element(screen.getByTestId("leverage-stop-40")).toBeVisible();
+ });
+
+ test("displays confirm button with correct leverage", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ await expect.element(screen.getByText("Set 10x")).toBeVisible();
+ });
+
+ test("clicking leverage button updates display", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ // Click the 20x button
+ await userEvent.click(screen.getByTestId("leverage-button-20"));
+
+ // Large display should update
+ await expect
+ .element(screen.getByTestId("leverage-display"))
+ .toHaveTextContent("20x");
+ // Confirm button should update
+ await expect.element(screen.getByText("Set 20x")).toBeVisible();
+ });
+
+ test("clicking stop label updates leverage", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ // Click the 1x stop label (first stop)
+ await userEvent.click(screen.getByTestId("leverage-stop-1"));
+
+ await expect.element(screen.getByText("Set 1x")).toBeVisible();
+ });
+
+ test("confirm button calls onLeverageChange with selected leverage", async () => {
+ const onLeverageChange = vi.fn();
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+ await userEvent.click(screen.getByTestId("leverage-button-20"));
+ await userEvent.click(screen.getByText("Set 20x"));
+
+ expect(onLeverageChange).toHaveBeenCalledWith(20);
+ });
+
+ test("closes dialog when X button is clicked", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+ await expect.element(screen.getByTestId("leverage-title")).toBeVisible();
+
+ // Click the close button
+ const closeButton = screen.getByRole("button", { name: "" }).nth(0);
+ await userEvent.click(closeButton);
+
+ await expect
+ .element(screen.getByTestId("leverage-title"))
+ .not.toBeInTheDocument();
+ });
+
+ test("closes dialog after confirmation", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+ await expect.element(screen.getByTestId("leverage-title")).toBeVisible();
+
+ await userEvent.click(screen.getByText("Set 10x"));
+
+ await expect
+ .element(screen.getByTestId("leverage-title"))
+ .not.toBeInTheDocument();
+ });
+
+ test("selected leverage button is highlighted", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ // The 10x button should have the selected style (bg-white text-black)
+ const selectedButton = screen.getByTestId("leverage-button-10");
+ await expect.element(selectedButton).toHaveClass("bg-white");
+ await expect.element(selectedButton).toHaveClass("text-black");
+ });
+
+ test("different max leverage generates correct buttons", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ // generateLeverageButtons(20) returns [2, 5, 10, 20]
+ await expect.element(screen.getByTestId("leverage-button-2")).toBeVisible();
+ await expect.element(screen.getByTestId("leverage-button-5")).toBeVisible();
+ await expect
+ .element(screen.getByTestId("leverage-button-10"))
+ .toBeVisible();
+ await expect
+ .element(screen.getByTestId("leverage-button-20"))
+ .toBeVisible();
+ });
+
+ test("low max leverage shows limited buttons", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ // generateLeverageButtons(5) returns [2, 5]
+ await expect.element(screen.getByTestId("leverage-button-2")).toBeVisible();
+ await expect.element(screen.getByTestId("leverage-button-5")).toBeVisible();
+ });
+
+ test("calculates correct liquidation price for long position", async () => {
+ // For long: liquidationPrice = currentPrice * (1 - 1/leverage)
+ // currentPrice = 50000, leverage = 10
+ // liquidationPrice = 50000 * (1 - 1/10) = 50000 * 0.9 = 45000
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ await expect.element(screen.getByText("45,000")).toBeVisible();
+ });
+
+ test("calculates correct liquidation price for short position", async () => {
+ // For short: liquidationPrice = currentPrice * (1 + 1/leverage)
+ // currentPrice = 50000, leverage = 10
+ // liquidationPrice = 50000 * (1 + 1/10) = 50000 * 1.1 = 55000
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ await expect.element(screen.getByText("55,000")).toBeVisible();
+ });
+
+ test("updates liquidation price when leverage changes", async () => {
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ // Initial: 50000 * (1 - 1/10) = 45000
+ await expect.element(screen.getByText("45,000")).toBeVisible();
+
+ // Change to 20x leverage
+ await userEvent.click(screen.getByTestId("leverage-button-20"));
+
+ // New: 50000 * (1 - 1/20) = 50000 * 0.95 = 47500
+ await expect.element(screen.getByText("47,500")).toBeVisible();
+ });
+
+ test("multiple leverage selections before confirm only submits final value", async () => {
+ const onLeverageChange = vi.fn();
+ const screen = await render(
+
+ Set Leverage
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Leverage"));
+
+ // Click multiple leverage buttons
+ await userEvent.click(screen.getByTestId("leverage-button-5"));
+ await userEvent.click(screen.getByTestId("leverage-button-20"));
+ await userEvent.click(screen.getByTestId("leverage-button-2"));
+
+ // Confirm
+ await userEvent.click(screen.getByText("Set 2x"));
+
+ // Should only be called once with the final value
+ expect(onLeverageChange).toHaveBeenCalledTimes(1);
+ expect(onLeverageChange).toHaveBeenCalledWith(2);
+ });
+});
+
+describe("LeverageDialogContent", () => {
+ const defaultContentProps = {
+ onClose: vi.fn(),
+ leverage: 10,
+ onLeverageChange: vi.fn(),
+ currentPrice: 50000,
+ maxLeverage: 40,
+ side: "long" as const,
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ test("renders all UI elements", async () => {
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await expect.element(screen.getByTestId("leverage-title")).toBeVisible();
+ await expect
+ .element(screen.getByTestId("leverage-display"))
+ .toHaveTextContent("10x");
+ await expect
+ .element(screen.getByText("Est. Liquidation Price"))
+ .toBeVisible();
+ await expect.element(screen.getByText("Current price")).toBeVisible();
+ await expect.element(screen.getByText("Set 10x")).toBeVisible();
+ });
+
+ test("onClose is called when X button is clicked", async () => {
+ const onClose = vi.fn();
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ const closeButton = screen.getByRole("button", { name: "" }).nth(0);
+ await userEvent.click(closeButton);
+
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ test("onLeverageChange and onClose are called when confirm is clicked", async () => {
+ const onClose = vi.fn();
+ const onLeverageChange = vi.fn();
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set 10x"));
+
+ expect(onLeverageChange).toHaveBeenCalledWith(10);
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ test("leverage stop labels include min, mid, and max values", async () => {
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ // MIN_LEVERAGE = 1, maxLeverage/2 = 20, maxLeverage = 40
+ await expect.element(screen.getByTestId("leverage-stop-1")).toBeVisible();
+ await expect.element(screen.getByTestId("leverage-stop-20")).toBeVisible();
+ await expect.element(screen.getByTestId("leverage-stop-40")).toBeVisible();
+ });
+});
diff --git a/tests/components/limit-price-dialog.test.tsx b/tests/components/limit-price-dialog.test.tsx
new file mode 100644
index 0000000..ceb9334
--- /dev/null
+++ b/tests/components/limit-price-dialog.test.tsx
@@ -0,0 +1,392 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { LimitPriceDialog } from "@/components/modules/Order/Overview/limit-price-dialog";
+import { TestWrapper } from "./wrapper";
+
+const defaultProps = {
+ limitPrice: null as number | null,
+ onLimitPriceChange: vi.fn(),
+ currentPrice: 100,
+};
+
+describe("LimitPriceDialog", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ test("renders trigger button", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await expect.element(screen.getByText("Set Limit Price")).toBeVisible();
+ });
+
+ test("opens dialog when trigger is clicked", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+
+ await expect
+ .element(screen.getByText("Set limit price", { exact: true }))
+ .toBeVisible();
+ });
+
+ test("displays quick adjustment buttons", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+
+ await expect.element(screen.getByText("Unset")).toBeVisible();
+ await expect.element(screen.getByText("-1%")).toBeVisible();
+ await expect.element(screen.getByText("-2%")).toBeVisible();
+ await expect.element(screen.getByText("-5%")).toBeVisible();
+ await expect.element(screen.getByText("-10%")).toBeVisible();
+ });
+
+ test("displays input field with placeholder", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+
+ await expect.element(screen.getByPlaceholder("Enter value")).toBeVisible();
+ await expect.element(screen.getByText("USD")).toBeVisible();
+ });
+
+ test("displays Done button", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+
+ await expect.element(screen.getByText("Done")).toBeVisible();
+ });
+
+ test("initializes input with existing limit price", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+
+ const input = screen.getByPlaceholder("Enter value");
+ await expect.element(input).toHaveValue("95");
+ });
+
+ test("quick adjust -1% calculates correct price", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ await userEvent.click(screen.getByText("-1%"));
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onLimitPriceChange).toHaveBeenCalledWith(99);
+ });
+
+ test("quick adjust -2% calculates correct price", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ await userEvent.click(screen.getByText("-2%"));
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onLimitPriceChange).toHaveBeenCalledWith(98);
+ });
+
+ test("quick adjust -5% calculates correct price", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ await userEvent.click(screen.getByText("-5%"));
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onLimitPriceChange).toHaveBeenCalledWith(95);
+ });
+
+ test("quick adjust -10% calculates correct price", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ await userEvent.click(screen.getByText("-10%"));
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onLimitPriceChange).toHaveBeenCalledWith(90);
+ });
+
+ test("Unset button clears the input and submits null", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ await userEvent.click(screen.getByText("Unset"));
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onLimitPriceChange).toHaveBeenCalledWith(null);
+ });
+
+ test("manual input submits entered value", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ const input = screen.getByPlaceholder("Enter value");
+ await userEvent.type(input, "85.5");
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onLimitPriceChange).toHaveBeenCalledWith(85.5);
+ });
+
+ test("closes dialog when X button is clicked", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ await expect
+ .element(screen.getByText("Set limit price", { exact: true }))
+ .toBeVisible();
+
+ // Click the close button (first button with no accessible name)
+ const closeButton = screen.getByRole("button", { name: "" }).nth(0);
+ await userEvent.click(closeButton);
+
+ await expect
+ .element(screen.getByText("Set limit price", { exact: true }))
+ .not.toBeInTheDocument();
+ });
+
+ test("closes dialog when Done is clicked after submitting", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ await expect
+ .element(screen.getByText("Set limit price", { exact: true }))
+ .toBeVisible();
+
+ await userEvent.click(screen.getByText("Done"));
+
+ await expect
+ .element(screen.getByText("Set limit price", { exact: true }))
+ .not.toBeInTheDocument();
+ });
+
+ test("quick adjustment works with different current price", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ await userEvent.click(screen.getByText("-10%"));
+ await userEvent.click(screen.getByText("Done"));
+
+ // 250 - 10% = 250 - 25 = 225
+ expect(onLimitPriceChange).toHaveBeenCalledWith(225);
+ });
+
+ test("quick adjustment updates input value visually", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ await userEvent.click(screen.getByText("-5%"));
+
+ const input = screen.getByPlaceholder("Enter value");
+ await expect.element(input).toHaveValue("95");
+ });
+
+ test("empty input submits null", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ // Input is already empty by default
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onLimitPriceChange).toHaveBeenCalledWith(null);
+ });
+
+ test("can clear existing value and submit null", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ const input = screen.getByPlaceholder("Enter value");
+ await userEvent.clear(input);
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onLimitPriceChange).toHaveBeenCalledWith(null);
+ });
+
+ test("displays Set price label", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+
+ await expect.element(screen.getByText("Set price")).toBeVisible();
+ });
+
+ test("multiple quick adjustments update input correctly", async () => {
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+
+ // First click -5%
+ await userEvent.click(screen.getByText("-5%"));
+ const input = screen.getByPlaceholder("Enter value");
+ await expect.element(input).toHaveValue("95");
+
+ // Then click -10% (should use currentPrice, not the input value)
+ await userEvent.click(screen.getByText("-10%"));
+ await expect.element(input).toHaveValue("90");
+ });
+
+ test("decimal values in input are submitted correctly", async () => {
+ const onLimitPriceChange = vi.fn();
+ const screen = await render(
+
+ Set Limit Price
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Set Limit Price"));
+ const input = screen.getByPlaceholder("Enter value");
+ await userEvent.type(input, "99.99");
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onLimitPriceChange).toHaveBeenCalledWith(99.99);
+ });
+});
diff --git a/tests/components/order-type-dialog.test.tsx b/tests/components/order-type-dialog.test.tsx
new file mode 100644
index 0000000..ba08cc0
--- /dev/null
+++ b/tests/components/order-type-dialog.test.tsx
@@ -0,0 +1,261 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import {
+ ORDER_TYPE_OPTIONS,
+ OrderTypeDialog,
+} from "@/components/modules/Order/Overview/order-type-dialog";
+import { TestWrapper } from "./wrapper";
+
+const defaultProps = {
+ selectedType: "market" as const,
+ onTypeSelect: vi.fn(),
+};
+
+describe("OrderTypeDialog", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ test("renders trigger button with Market label when market is selected", async () => {
+ const screen = await render(, {
+ wrapper: TestWrapper,
+ });
+
+ await expect.element(screen.getByText("Market")).toBeVisible();
+ });
+
+ test("renders trigger button with Limit label when limit is selected", async () => {
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await expect.element(screen.getByText("Limit")).toBeVisible();
+ });
+
+ test("opens dialog when trigger is clicked", async () => {
+ const screen = await render(, {
+ wrapper: TestWrapper,
+ });
+
+ await userEvent.click(screen.getByText("Market"));
+
+ await expect.element(screen.getByText("Order type")).toBeVisible();
+ });
+
+ test("displays all order type options in dialog", async () => {
+ const screen = await render(, {
+ wrapper: TestWrapper,
+ });
+
+ await userEvent.click(screen.getByText("Market"));
+
+ // Check Market option
+ await expect
+ .element(screen.getByText("Execute immediately at current market price"))
+ .toBeVisible();
+
+ // Check Limit option
+ await expect.element(screen.getByText("Limit")).toBeVisible();
+ await expect
+ .element(
+ screen.getByText("Execute only at your specified price or better"),
+ )
+ .toBeVisible();
+ });
+
+ test("calls onTypeSelect with 'limit' when Limit option is clicked", async () => {
+ const onTypeSelect = vi.fn();
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Market"));
+ // Click the Limit option button (the one with the description)
+ await userEvent.click(
+ screen.getByText("Execute only at your specified price or better"),
+ );
+
+ expect(onTypeSelect).toHaveBeenCalledWith("limit");
+ });
+
+ test("calls onTypeSelect with 'market' when Market option is clicked", async () => {
+ const onTypeSelect = vi.fn();
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Limit"));
+ // Click the Market option button (the one with the description)
+ await userEvent.click(
+ screen.getByText("Execute immediately at current market price"),
+ );
+
+ expect(onTypeSelect).toHaveBeenCalledWith("market");
+ });
+
+ test("closes dialog after selecting an option", async () => {
+ const screen = await render(, {
+ wrapper: TestWrapper,
+ });
+
+ await userEvent.click(screen.getByText("Market"));
+ await expect.element(screen.getByText("Order type")).toBeVisible();
+
+ await userEvent.click(
+ screen.getByText("Execute only at your specified price or better"),
+ );
+
+ await expect
+ .element(screen.getByText("Order type"))
+ .not.toBeInTheDocument();
+ });
+
+ test("shows checkmark for selected Market option", async () => {
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Market"));
+
+ // The selected option should have a checkmark
+ // We verify by checking the Market button contains content indicating selection
+ const dialogContent = screen.getByText("Order type");
+ await expect.element(dialogContent).toBeVisible();
+
+ // Both options should be visible, market is selected
+ await expect
+ .element(screen.getByText("Execute immediately at current market price"))
+ .toBeVisible();
+ });
+
+ test("shows checkmark for selected Limit option", async () => {
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Limit"));
+
+ // The selected option should have a checkmark
+ const dialogContent = screen.getByText("Order type");
+ await expect.element(dialogContent).toBeVisible();
+
+ // Both options should be visible, limit is selected
+ await expect
+ .element(
+ screen.getByText("Execute only at your specified price or better"),
+ )
+ .toBeVisible();
+ });
+
+ test("displays both order options when dialog is open", async () => {
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Market"));
+
+ // Both options should be visible
+ await expect
+ .element(screen.getByText("Execute immediately at current market price"))
+ .toBeVisible();
+ await expect
+ .element(
+ screen.getByText("Execute only at your specified price or better"),
+ )
+ .toBeVisible();
+ });
+
+ test("ORDER_TYPE_OPTIONS exports correct values", () => {
+ expect(ORDER_TYPE_OPTIONS).toHaveLength(2);
+
+ expect(ORDER_TYPE_OPTIONS[0]).toEqual({
+ value: "market",
+ label: "Market",
+ description: "Execute immediately at current market price",
+ });
+
+ expect(ORDER_TYPE_OPTIONS[1]).toEqual({
+ value: "limit",
+ label: "Limit",
+ description: "Execute only at your specified price or better",
+ });
+ });
+
+ test("trigger button has correct styling classes", async () => {
+ const screen = await render(, {
+ wrapper: TestWrapper,
+ });
+
+ const triggerButton = screen.getByRole("button", { name: /Market/i });
+ await expect.element(triggerButton).toBeVisible();
+ });
+
+ test("selecting same type as currently selected still calls onTypeSelect", async () => {
+ const onTypeSelect = vi.fn();
+ const screen = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Market"));
+ await userEvent.click(
+ screen.getByText("Execute immediately at current market price"),
+ );
+
+ expect(onTypeSelect).toHaveBeenCalledWith("market");
+ });
+
+ test("dialog shows correct title", async () => {
+ const screen = await render(, {
+ wrapper: TestWrapper,
+ });
+
+ await userEvent.click(screen.getByText("Market"));
+
+ await expect.element(screen.getByText("Order type")).toBeVisible();
+ });
+
+ test("can switch from market to limit and back", async () => {
+ const onTypeSelect = vi.fn();
+ const result = await render(
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ // Open and select Limit
+ await userEvent.click(result.getByRole("button", { name: "Market" }));
+ await userEvent.click(
+ result.getByText("Execute only at your specified price or better"),
+ );
+ expect(onTypeSelect).toHaveBeenCalledWith("limit");
+
+ // Rerender with limit selected
+ await result.rerender(
+ ,
+ );
+
+ // Open and select Market - use the first button which is the trigger
+ await userEvent.click(
+ result.getByRole("button", { name: "Limit" }).first(),
+ );
+ await userEvent.click(
+ result.getByText("Execute immediately at current market price"),
+ );
+ expect(onTypeSelect).toHaveBeenCalledWith("market");
+ });
+});
diff --git a/tests/components/tp-sl-dialog.test.tsx b/tests/components/tp-sl-dialog.test.tsx
new file mode 100644
index 0000000..4e601fe
--- /dev/null
+++ b/tests/components/tp-sl-dialog.test.tsx
@@ -0,0 +1,398 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import {
+ getTPOrSLConfigurationFromPosition,
+ TPOrSLDialog,
+ type TPOrSLSettings,
+} from "@/components/molecules/tp-sl-dialog";
+import { TestWrapper } from "./wrapper";
+
+const defaultSettings: TPOrSLSettings = {
+ takeProfit: {
+ option: null,
+ triggerPrice: null,
+ percentage: null,
+ },
+ stopLoss: {
+ option: null,
+ triggerPrice: null,
+ percentage: null,
+ },
+};
+
+const defaultProps = {
+ settings: defaultSettings,
+ onSettingsChange: vi.fn(),
+ entryPrice: 100,
+ currentPrice: 105,
+ liquidationPrice: 80,
+};
+
+describe("TPOrSLDialog", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ test("renders trigger button", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await expect.element(screen.getByText("Open Dialog")).toBeVisible();
+ });
+
+ test("opens dialog when trigger is clicked", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ await expect
+ .element(screen.getByText("Take profit and stop loss"))
+ .toBeVisible();
+ });
+
+ test("displays entry price, current price, and liquidation price", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ await expect.element(screen.getByText("Entry price")).toBeVisible();
+ await expect.element(screen.getByText("Current price")).toBeVisible();
+ await expect.element(screen.getByText("Liquidation price")).toBeVisible();
+ await expect.element(screen.getByText("$100")).toBeVisible();
+ await expect.element(screen.getByText("$105")).toBeVisible();
+ await expect.element(screen.getByText("$80")).toBeVisible();
+ });
+
+ test('shows "Est. liquidation price" when isLiquidationPriceEstimate is true', async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ await expect
+ .element(screen.getByText("Est. liquidation price"))
+ .toBeVisible();
+ });
+
+ test("renders take profit section with option buttons", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ // Dialog title contains both "Take profit" and "Stop loss"
+ await expect
+ .element(screen.getByText("Take profit and stop loss"))
+ .toBeVisible();
+ // Check for take profit options
+ await expect.element(screen.getByText("Off").first()).toBeVisible();
+ await expect.element(screen.getByText("+10%")).toBeVisible();
+ await expect.element(screen.getByText("+25%")).toBeVisible();
+ await expect.element(screen.getByText("+50%")).toBeVisible();
+ await expect.element(screen.getByText("+100%")).toBeVisible();
+ });
+
+ test("renders stop loss section with option buttons", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ // Dialog title contains both "Take profit" and "Stop loss"
+ await expect
+ .element(screen.getByText("Take profit and stop loss"))
+ .toBeVisible();
+ // Check for stop loss options
+ await expect.element(screen.getByText("-10%")).toBeVisible();
+ await expect.element(screen.getByText("-25%")).toBeVisible();
+ await expect.element(screen.getByText("-50%")).toBeVisible();
+ await expect.element(screen.getByText("-100%")).toBeVisible();
+ });
+
+ test("selects take profit percentage option and calculates trigger price", async () => {
+ const onSettingsChange = vi.fn();
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+ await userEvent.click(screen.getByText("+25%"));
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onSettingsChange).toHaveBeenCalledWith(
+ expect.objectContaining({
+ takeProfit: {
+ option: 25,
+ triggerPrice: 125,
+ percentage: 25,
+ },
+ }),
+ );
+ });
+
+ test("selects stop loss percentage option and calculates trigger price", async () => {
+ const onSettingsChange = vi.fn();
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+ await userEvent.click(screen.getByText("-25%"));
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onSettingsChange).toHaveBeenCalledWith(
+ expect.objectContaining({
+ stopLoss: {
+ option: 25,
+ triggerPrice: 75,
+ percentage: 25,
+ },
+ }),
+ );
+ });
+
+ test('selects "Off" option to clear configuration', async () => {
+ const onSettingsChange = vi.fn();
+ const settingsWithTakeProfit: TPOrSLSettings = {
+ ...defaultSettings,
+ takeProfit: {
+ option: 25,
+ triggerPrice: 125,
+ percentage: 25,
+ },
+ };
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+ // Click the first "Off" button (take profit section)
+ const offButton = screen.getByText("Off").first();
+ await userEvent.click(offButton);
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onSettingsChange).toHaveBeenCalledWith(
+ expect.objectContaining({
+ takeProfit: {
+ option: 0,
+ triggerPrice: null,
+ percentage: null,
+ },
+ }),
+ );
+ });
+
+ test("renders only take profit section in takeProfit mode", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ // In takeProfit mode, there are two "Take profit" elements: title and section label
+ await expect.element(screen.getByText("Take profit").first()).toBeVisible();
+ // Check that stop loss section is not present (no stop loss options)
+ await expect.element(screen.getByText("-10%")).not.toBeInTheDocument();
+ });
+
+ test("renders only stop loss section in stopLoss mode", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ // In stopLoss mode, there are two "Stop loss" elements: title and section label
+ await expect.element(screen.getByText("Stop loss").first()).toBeVisible();
+ // Check that take profit section is not present (no take profit options)
+ await expect.element(screen.getByText("+10%")).not.toBeInTheDocument();
+ });
+
+ test("shows correct dialog title for takeProfit mode", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ // In takeProfit mode, title should be just "Take profit" (first element is the title)
+ const titleElement = screen.getByText("Take profit").first();
+ await expect.element(titleElement).toBeVisible();
+ // Verify it's not the combined title
+ await expect
+ .element(screen.getByText("Take profit and stop loss"))
+ .not.toBeInTheDocument();
+ });
+
+ test("shows correct dialog title for stopLoss mode", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ // In stopLoss mode, title should be just "Stop loss" (first element is the title)
+ const titleElement = screen.getByText("Stop loss").first();
+ await expect.element(titleElement).toBeVisible();
+ // Verify it's not the combined title
+ await expect
+ .element(screen.getByText("Take profit and stop loss"))
+ .not.toBeInTheDocument();
+ });
+
+ test("closes dialog when X button is clicked", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+ await expect
+ .element(screen.getByText("Take profit and stop loss"))
+ .toBeVisible();
+
+ // Click the close button
+ const closeButton = screen.getByRole("button", { name: "" }).nth(0);
+ await userEvent.click(closeButton);
+
+ await expect
+ .element(screen.getByText("Take profit and stop loss"))
+ .not.toBeInTheDocument();
+ });
+
+ test("closes dialog when Done is clicked", async () => {
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+ await expect
+ .element(screen.getByText("Take profit and stop loss"))
+ .toBeVisible();
+
+ await userEvent.click(screen.getByText("Done"));
+
+ await expect
+ .element(screen.getByText("Take profit and stop loss"))
+ .not.toBeInTheDocument();
+ });
+});
+
+describe("getTPOrSLConfigurationFromPosition", () => {
+ test("returns empty configuration when amount is undefined", () => {
+ const result = getTPOrSLConfigurationFromPosition({
+ entryPrice: 100,
+ amount: undefined,
+ tpOrSl: "takeProfit",
+ });
+
+ expect(result).toEqual({
+ option: null,
+ triggerPrice: null,
+ percentage: null,
+ });
+ });
+
+ test("calculates take profit configuration correctly", () => {
+ const result = getTPOrSLConfigurationFromPosition({
+ entryPrice: 100,
+ amount: 125,
+ tpOrSl: "takeProfit",
+ });
+
+ expect(result.triggerPrice).toBe(125);
+ expect(result.percentage).toBe(25);
+ expect(result.option).toBe(25);
+ });
+
+ test("calculates stop loss configuration correctly", () => {
+ const result = getTPOrSLConfigurationFromPosition({
+ entryPrice: 100,
+ amount: 75,
+ tpOrSl: "stopLoss",
+ });
+
+ expect(result.triggerPrice).toBe(75);
+ expect(result.percentage).toBe(25);
+ expect(result.option).toBe(25);
+ });
+
+ test("returns null option for non-matching percentage", () => {
+ const result = getTPOrSLConfigurationFromPosition({
+ entryPrice: 100,
+ amount: 115,
+ tpOrSl: "takeProfit",
+ });
+
+ expect(result.triggerPrice).toBe(115);
+ expect(result.percentage).toBe(15);
+ expect(result.option).toBeNull();
+ });
+
+ test("matches option when percentage is within 0.5 tolerance", () => {
+ const result = getTPOrSLConfigurationFromPosition({
+ entryPrice: 100,
+ amount: 110.4, // 10.4% is within 0.5 of 10
+ tpOrSl: "takeProfit",
+ });
+
+ expect(result.option).toBe(10);
+ });
+});
diff --git a/tests/components/wrapper.tsx b/tests/components/wrapper.tsx
new file mode 100644
index 0000000..f2e12a0
--- /dev/null
+++ b/tests/components/wrapper.tsx
@@ -0,0 +1,12 @@
+import "../../src/styles.css";
+import { Toaster } from "@/components/ui/toaster";
+import { RootContainerProvider } from "@/context/root-container";
+
+export const TestWrapper = ({ children }: { children: React.ReactNode }) => {
+ return (
+
+
+ {children}
+
+ );
+};
diff --git a/tsconfig.json b/tsconfig.json
index 9a281e8..691e07a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
{
- "include": ["src", "scripts"],
+ "include": ["src", "scripts", "tests"],
"compilerOptions": {
"target": "ES2022",
"jsx": "react-jsx",
diff --git a/vite.config.ts b/vite.config.ts
index 58d896d..586af8b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,8 +3,16 @@ import tailwindcss from "@tailwindcss/vite";
import { devtools } from "@tanstack/devtools-vite";
import { tanstackRouter } from "@tanstack/router-plugin/vite";
import viteReact from "@vitejs/plugin-react";
+import { playwright } from "@vitest/browser-playwright";
import { defineConfig } from "vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";
+import type { InlineConfig } from "vitest/node";
+
+declare module "vite" {
+ interface UserConfig {
+ test?: InlineConfig;
+ }
+}
// https://vitejs.dev/config/
export default defineConfig({
@@ -27,4 +35,22 @@ export default defineConfig({
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
+ test: {
+ browser: {
+ screenshotFailures: false,
+ headless: true,
+ enabled: true,
+ provider: playwright(),
+ // https://vitest.dev/config/browser/playwright
+ instances: [{ browser: "chromium" }],
+ },
+ include: ["./tests/**/*.test.{ts,tsx}"],
+ },
+ optimizeDeps: {
+ include: [
+ "vite-plugin-node-polyfills/shims/buffer",
+ "vite-plugin-node-polyfills/shims/global",
+ "vite-plugin-node-polyfills/shims/process",
+ ],
+ },
});