Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@crunchdao/staking

Package Overview
Dependencies
Maintainers
4
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@crunchdao/staking - npm Package Compare versions

Comparing version
0.1.3
 to
0.1.4
+9
tsconfig.json
{
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src"
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
+13
-24
package.json
{
"name": "@crunchdao/staking",
"version": "0.1.3",
"version": "0.1.4",
"description": "Complete staking module for CrunchDAO with hooks, UI components, and blockchain integration",
"main": "./src/index.ts",
"types": "./src/index.ts",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": "./src/index.ts"
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"require": "./dist/index.js"
}
},
"scripts": {
"build": "tsc",
"dev": "tsc --watch",
"build": "tsc --declaration",
"dev": "tsc --watch --declaration",
"lint": "eslint . --max-warnings 0",
"check-types": "tsc --noEmit",
"prepublishOnly": "npm run check-types"
"prepublishOnly": "npm run build"
},
"peerDependencies": {
"react": "^19.0.0",
"@solana/web3.js": "^1.95.0",
"@coral-xyz/anchor": "^0.32.0",
"@tanstack/react-query": "^5.0.0",
"@tanstack/react-table": "^8.0.0",
"react-hook-form": "^7.0.0",
"zod": "^3.0.0 || ^4.0.0",
"axios": "^1.0.0"
},
"dependencies": {
"@crunch-ui/core": "^1.2.0",
"@crunch-ui/icons": "^1.0.2",
"@crunch-ui/utils": "^1.1.0",
"@crunchdao/sdk": "^8.3.2",
"@crunchdao/solana-utils": "*"
"@repo/solana": "*"
},
"devDependencies": {
"@repo/typescript-config": "*",
"@repo/eslint-config": "*",
"typescript": "^5.9.3"
"@repo/eslint-config": "*"
}
}
+4
-2
src/hooks/useClaimStakeReward.tsx
"use client";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import {

@@ -14,2 +15,3 @@ useBlockchainTransactionConfirmation,

const queryClient = useQueryClient();
const t = useTranslations("Staking");
const { monitoring } = useStakingContext();

@@ -76,3 +78,3 @@ const { noticeError, recordCustomEvent, trackEvent } = monitoring || {};

title: "Success",
description: "Successfully claimed all rewards",
description: t("success_claim_all_description"),
});

@@ -83,3 +85,3 @@ },

title: "Error",
description: "Claim failed",
description: t("error_claim_failed"),
variant: "destructive",

@@ -86,0 +88,0 @@ });

+4
-2
src/hooks/useDelegate.tsx

@@ -6,2 +6,3 @@ "use client";

import { toast } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { useBlockchainTransactionConfirmation } from "@repo/solana";

@@ -19,2 +20,3 @@

const queryClient = useQueryClient();
const t = useTranslations("Staking");
const { monitoring } = useStakingContext();

@@ -116,4 +118,4 @@ const { noticeError, recordCustomEvent, trackEvent } = monitoring || {};

toast({
title: "Success",
description: "Delegation transaction submitted",
title: t("success"),
description: t("delegate_transaction_submitted"),
});

@@ -120,0 +122,0 @@ },

+4
-2
src/hooks/useDepositCrunch.tsx
"use client";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import {

@@ -18,2 +19,3 @@ useBlockchainTransactionConfirmation,

const queryClient = useQueryClient();
const t = useTranslations("Staking");
const { monitoring } = useStakingContext();

@@ -96,4 +98,4 @@ const { noticeError, recordCustomEvent, trackEvent } = monitoring || {};

toast({
title: "Success",
description: "Deposit transaction submitted",
title: t("success"),
description: t("deposit_transaction_submitted"),
});

@@ -100,0 +102,0 @@ },

+4
-1
src/hooks/useGetCoordinatorsStakePool.tsx
"use client";
import { useQuery } from "@tanstack/react-query";
import { ColumnDef } from "@tanstack/react-table";
import { useTranslations } from "next-intl";
import { SolanaAddressLink } from "@repo/solana";

@@ -15,2 +16,4 @@ import { useStakingContext } from "../context/stakingContext";

const t = useTranslations("Staking");
const query = useQuery({

@@ -39,3 +42,3 @@ queryKey: ["staking", "coordinatorsStakingPool"],

accessorKey: "name",
header: "Pool",
header: t("pool_name"),
cell: ({ row }) => {

@@ -42,0 +45,0 @@ return (

+4
-2
src/hooks/useGetStakingPositions.tsx
"use client";
import { useQuery } from "@tanstack/react-query";
import { ColumnDef } from "@tanstack/react-table";
import { useTranslations } from "next-intl";
import { SolanaAddressLink, convertToCrunch, CrunchValue } from "@repo/solana";

@@ -15,2 +16,3 @@ import { useStakingContext } from "../context/stakingContext";

export const useGetStakingPositions = () => {
const t = useTranslations("Staking");
const { stakingClient, wallet } = useStakingContext();

@@ -55,3 +57,3 @@

accessorKey: "coordinatorStakeAddress",
header: "Coordinator",
header: t("position_pool_name"),
cell: ({ getValue }) => {

@@ -72,3 +74,3 @@ return (

accessorKey: "userStake",
header: "Your Stake",
header: t("position_user_stake"),
cell: ({ getValue }) => {

@@ -75,0 +77,0 @@ const stake = getValue<number>();

+4
-2
src/hooks/useUnstakeFromCoordinator.tsx

@@ -5,2 +5,3 @@ "use client";

import { toast } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import {

@@ -21,2 +22,3 @@ useBlockchainTransactionConfirmation,

const queryClient = useQueryClient();
const t = useTranslations("Staking");
const { monitoring } = useStakingContext();

@@ -112,4 +114,4 @@ const { noticeError, recordCustomEvent, trackEvent } = monitoring || {};

toast({
title: "Success",
description: "Unstake transaction submitted",
title: t("success"),
description: t("unstake_transaction_submitted"),
});

@@ -116,0 +118,0 @@ },

+6
-2
src/hooks/useWithdrawCrunch.tsx
"use client";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import {

@@ -19,2 +20,3 @@ useBlockchainTransactionConfirmation,

const queryClient = useQueryClient();
const t = useTranslations("Staking");
const { monitoring } = useStakingContext();

@@ -94,3 +96,5 @@ const { noticeError, recordCustomEvent, trackEvent } = monitoring || {};

title: "Success",
description: `Successfully withdrew ${formatCrunchValue(variables.amount)} CRUNCH`,
description: t("success_withdrawing_description", {
amount: formatCrunchValue(variables.amount),
}),
});

@@ -102,3 +106,3 @@ },

title: "Error",
description: "Withdrawal failed",
description: t("error_withdrawing_failed"),
variant: "destructive",

@@ -105,0 +109,0 @@ });

+5
-3
src/ui/claimRewardsButton.tsx

@@ -8,2 +8,3 @@ "use client";

} from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import LoadingOverlay from "./loadingOverlay";

@@ -16,2 +17,3 @@ import { useGetAvailableRewards } from "../hooks/useGetAvailableRewards";

}) => {
const t = useTranslations("Staking");
const [showLoadingDialog, setShowLoadingDialog] = useState(false);

@@ -45,3 +47,3 @@ const { availableRewards, availableRewardsLoading } =

>
{"Claim All"}
{t("claim_all_button")}
</Button>

@@ -55,4 +57,4 @@ <Dialog open={showLoadingDialog} onOpenChange={setShowLoadingDialog}>

<LoadingOverlay
title={"Claiming Rewards"}
subtitle={"Please wait while your transaction is being confirmed..."}
title={t("claim_loading_title")}
subtitle={t("claim_loading_subtitle")}
/>

@@ -59,0 +61,0 @@ </DialogContent>

+3
-1
src/ui/coordinatorsStakePool.tsx
"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { useGetCoordinatorsStakePool } from "../hooks/useGetCoordinatorsStakePool";

@@ -16,2 +17,3 @@

}) => {
const t = useTranslations("Staking");
const { coordinatorsPool, columns, coordinatorsPoolLoading } =

@@ -24,3 +26,3 @@ useGetCoordinatorsStakePool();

<div className="flex flex-wrap gap-2 justify-between items-center">
<CardTitle>{"Coordinator Stake Pools"}</CardTitle>
<CardTitle>{t("stake_pools_title")}</CardTitle>
</div>

@@ -27,0 +29,0 @@ </CardHeader>

+3
-1
src/ui/coordinatorStakingPositions.tsx
"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { useGetStakingPositions } from "../hooks/useGetStakingPositions";

@@ -16,2 +17,3 @@

> = ({ DataTableComponent }) => {
const t = useTranslations("Staking");
const { stakingPositions, columns, stakingPositionsLoading } =

@@ -24,3 +26,3 @@ useGetStakingPositions();

<div className="flex flex-wrap gap-2 justify-between items-center">
<CardTitle>{"Your Staking Positions"}</CardTitle>
<CardTitle>{t("positions_title")}</CardTitle>
</div>

@@ -27,0 +29,0 @@ </CardHeader>

+3
-1
src/ui/depositedCard.tsx
"use client";
import { Card, Skeleton } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { cn } from "@crunch-ui/utils";

@@ -12,2 +13,3 @@ import { CircleToken, CurrencyDollar } from "@crunch-ui/icons";

export const DepositedCard = () => {
const t = useTranslations("Staking");
const { depositAccount, depositAccountLoading } = useGetDepositAccount();

@@ -24,3 +26,3 @@ const isMutating = useIsMutating();

<p className="title-2xs uppercase w-full text-muted-foreground">
{"Deposited"}
{t("deposite_title")}
<span className="inline-block float-right pt-0.5 ml-auto">

@@ -27,0 +29,0 @@ <CurrencyDollar />

+17
-11
src/ui/depositForm.tsx

@@ -17,2 +17,3 @@ "use client";

import { z } from "zod";
import { useTranslations } from "next-intl";
import { CrunchValue } from "@repo/solana";

@@ -39,2 +40,5 @@ import { PercentageSelector } from "./percentageSelector";

}> = ({ handlers }) => {
const t = useTranslations("Staking");
const tCommon = useTranslations();
const { crnchAccount, crnchAccountLoading } = useGetCrnchAccount();

@@ -57,4 +61,6 @@ const { deposit, depositLoading } = useDepositCrunch();

toast({
title: "Success",
description: "Successfully staked to coordinator",
title: tCommon("Toast.success"),
description: t("success_staking_description", {
amount: values.amount,
}),
});

@@ -77,4 +83,4 @@ form.reset({ amount: 0 });

toast({
title: "Error",
description: "Staking failed",
title: tCommon("Toast.error"),
description: t("error_staking_failed"),
variant: "destructive",

@@ -101,4 +107,4 @@ });

<LoadingOverlay
title={"Depositing CRUNCH"}
subtitle={"Please wait while your transaction is being confirmed..."}
title={t("deposit_loading_title")}
subtitle={t("deposit_loading_subtitle")}
/>

@@ -113,3 +119,3 @@ )}

<FormItem>
<FormLabel>{"Amount to Stake"}</FormLabel>
<FormLabel>{t("stake_amount_label")}</FormLabel>
<FormControl>

@@ -143,6 +149,6 @@ <Input

onPercentageSelect={setAmountPercentage}
maxLabel={"Max"}
maxLabel={t("max")}
/>
<p className="body-xs text-muted-foreground w-full flex justify-between">
{"Available Balance"}
{t("available_balance")}
<CrunchValue

@@ -158,3 +164,3 @@ amount={crnchAccount.amount}

<p className="body-xs text-muted-foreground">
{"No CRUNCH balance available"}
{t("no_crunch_balance")}
</p>

@@ -179,3 +185,3 @@ ) : null}

>
{"Stake"}
{t("stake_button")}
</Button>

@@ -182,0 +188,0 @@ </form>

+5
-3
src/ui/depositTokensButton.tsx

@@ -13,2 +13,3 @@ "use client";

} from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { DepositForm } from "./depositForm";

@@ -20,2 +21,3 @@

}> = ({ buttonVariant, loading }) => {
const t = useTranslations("Staking");
const [open, setOpen] = useState(false);

@@ -27,3 +29,3 @@

<Button variant={buttonVariant} disabled={loading} size="sm">
{"Deposit"}
{t("deposit_button")}
</Button>

@@ -33,4 +35,4 @@ </DialogTrigger>

<DialogHeader>
<DialogTitle>{"Deposit CRUNCH"}</DialogTitle>
<DialogDescription>{"Deposit CRUNCH tokens to start staking"}</DialogDescription>
<DialogTitle>{t("add_form_title")}</DialogTitle>
<DialogDescription>{t("add_form_description")}</DialogDescription>
</DialogHeader>

@@ -37,0 +39,0 @@ <DepositForm handlers={{ onSuccess: () => setOpen(false) }} />

+3
-1
src/ui/rewardCard.tsx
"use client";
import { Card, Skeleton } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { useIsMutating } from "@tanstack/react-query";

@@ -12,2 +13,3 @@ import { cn } from "@crunch-ui/utils";

export const RewardCard = () => {
const t = useTranslations("Staking");
const { availableRewards, availableRewardsLoading } =

@@ -28,3 +30,3 @@ useGetAvailableRewards();

<p className="title-2xs uppercase w-full text-muted-foreground">
{"Rewards"}
{t("rewards_title")}
<span className="inline-block float-right pt-0.5 ml-auto">

@@ -31,0 +33,0 @@ <Trophy />

+5
-3
src/ui/stakeToCoordinatorButton.tsx

@@ -13,2 +13,3 @@ "use client";

} from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { useIsMutating } from "@tanstack/react-query";

@@ -27,2 +28,3 @@ import { StakeToCoordinatorForm } from "./stakeToCoordinatorForm";

> = ({ coordinator, loading, className }) => {
const t = useTranslations("Staking");
const [open, setOpen] = useState(false);

@@ -40,3 +42,3 @@ const isMutating = useIsMutating();

>
{"Stake"}
{t("stake_button")}
</Button>

@@ -46,5 +48,5 @@ </DialogTrigger>

<DialogHeader>
<DialogTitle>{"Stake to Coordinator"}</DialogTitle>
<DialogTitle>{t("stake_to_pool_title")}</DialogTitle>
<DialogDescription>
{"Stake your CRUNCH to a coordinator pool"}
{t("stake_to_pool_description")}
</DialogDescription>

@@ -51,0 +53,0 @@ </DialogHeader>

+17
-11
src/ui/stakeToCoordinatorForm.tsx

@@ -17,2 +17,3 @@ "use client";

import { z } from "zod";
import { useTranslations } from "next-intl";
import LoadingOverlay from "./loadingOverlay";

@@ -47,2 +48,5 @@ import { PercentageSelector } from "./percentageSelector";

}) => {
const t = useTranslations("Staking");
const tCommon = useTranslations();
const { availableAmount, availableAmountLoading } =

@@ -69,4 +73,6 @@ useGetAvailableAmountToStake();

toast({
title: "Success",
description: "Successfully staked to pool",
title: tCommon("Toast.success"),
description: t("success_stake_to_pool_description", {
amount: formatCrunchValue(values.amount),
}),
});

@@ -88,4 +94,4 @@ handlers?.onSuccess?.();

toast({
title: "Error",
description: "Stake failed",
title: tCommon("Toast.error"),
description: t("error_stake_to_pool_failed"),
variant: "destructive",

@@ -112,4 +118,4 @@ });

<LoadingOverlay
title={"Staking to Coordinator"}
subtitle={"Please wait while your transaction is being confirmed..."}
title={t("stake_loading_title")}
subtitle={t("stake_loading_subtitle")}
/>

@@ -124,3 +130,3 @@ )}

<FormItem>
<FormLabel>{"Amount to Stake"}</FormLabel>
<FormLabel>{t("stake_amount_label")}</FormLabel>
<FormControl>

@@ -156,6 +162,6 @@ <Input

onPercentageSelect={setAmountPercentage}
maxLabel={"Max"}
maxLabel={t("max")}
/>
<p className="body-xs text-muted-foreground w-full flex justify-between">
{"Available Balance"}
{t("available_balance")}
<span className="text-right">

@@ -172,3 +178,3 @@ <CrunchValue

<p className="body-xs text-muted-foreground">
{"No CRUNCH balance available"}
{t("no_crunch_balance")}
</p>

@@ -195,3 +201,3 @@ <DepositTokensButton buttonVariant="secondary" />

>
{"Stake to Pool"}
{t("stake_to_pool_button")}
</Button>

@@ -198,0 +204,0 @@ </form>

+3
-1
src/ui/unstackedCard.tsx
"use client";
import { cn } from "@crunch-ui/utils";
import { Card, Skeleton } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { CircleToken, LockOpen } from "@crunch-ui/icons";

@@ -12,2 +13,3 @@ import { useIsMutating } from "@tanstack/react-query";

export const UnstackedCard = () => {
const t = useTranslations("Staking");
const { availableAmount, availableAmountLoading } =

@@ -25,3 +27,3 @@ useGetAvailableAmountToStake();

<p className="title-2xs uppercase w-full text-muted-foreground">
{"Unstaked"}
{t("unstaked_title")}
<span className="inline-block float-right pt-0.5 ml-auto">

@@ -28,0 +30,0 @@ <LockOpen />

+5
-3
src/ui/unstakeFromPoolButton.tsx

@@ -13,2 +13,3 @@ "use client";

import { useIsMutating } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { UnstakeFromPoolForm } from "./unstakeFromPoolForm";

@@ -26,2 +27,3 @@ import { StakingPosition } from "../hooks/useGetStakingPositions";

}) => {
const t = useTranslations("Staking");
const [open, setOpen] = useState(false);

@@ -39,3 +41,3 @@ const isMutating = useIsMutating();

>
{"Unstake"}
{t("unstake_button")}
</Button>

@@ -45,5 +47,5 @@ </DialogTrigger>

<DialogHeader>
<DialogTitle>{"Unstake from Pool"}</DialogTitle>
<DialogTitle>{t("unstake_from_pool_title")}</DialogTitle>
<DialogDescription>
{"Unstake your CRUNCH from coordinator pool"}
{t("unstake_from_pool_description")}
</DialogDescription>

@@ -50,0 +52,0 @@ </DialogHeader>

+17
-10
src/ui/unstakeFromPoolForm.tsx

@@ -17,2 +17,3 @@ "use client";

import { z } from "zod";
import { useTranslations } from "next-intl";
import { formatCrunchValue, CrunchValue } from "@repo/solana";

@@ -45,2 +46,5 @@ import { PercentageSelector } from "./percentageSelector";

}) => {
const t = useTranslations("Staking");
const tCommon = useTranslations();
const { unstake, unstakeLoading } = useUnstakeFromCoordinator();

@@ -65,4 +69,7 @@

toast({
title: "Success",
description: "Successfully unstaked from pool",
title: tCommon("Toast.success"),
description: t("success_unstake_from_pool_description", {
amount: formatCrunchValue(values.amount),
poolName: position.coordinatorStakeAddress,
}),
});

@@ -85,4 +92,4 @@ form.reset({ amount: 0 });

toast({
title: "Error",
description: "Unstake failed",
title: tCommon("Toast.error"),
description: t("error_unstake_from_pool_failed"),
variant: "destructive",

@@ -109,4 +116,4 @@ });

<LoadingOverlay
title={"Unstaking from Pool"}
subtitle={"Please wait while your transaction is being confirmed..."}
title={t("unstake_loading_title")}
subtitle={t("unstake_loading_subtitle")}
/>

@@ -121,3 +128,3 @@ )}

<FormItem>
<FormLabel>{"Amount to Unstake"}</FormLabel>
<FormLabel>{t("unstake_amount_label")}</FormLabel>
<FormControl>

@@ -151,6 +158,6 @@ <Input

onPercentageSelect={setAmountPercentage}
maxLabel={"Max"}
maxLabel={t("max")}
/>
<p className="body-xs text-muted-foreground w-full flex justify-between">
{"Staked Balance"}
{t("staked_balance")}
<span className="text-right">

@@ -178,3 +185,3 @@ <CrunchValue amount={position.userStake} showCurrency={true} />

>
{"Unstake"}
{t("unstake_button")}
</Button>

@@ -181,0 +188,0 @@ </form>

+4
-2
src/ui/withdrawDialog.tsx

@@ -9,2 +9,3 @@ "use client";

} from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { WithdrawForm } from "./withdrawForm";

@@ -18,2 +19,3 @@

export const WithdrawDialog = ({ open, onOpenChange }: WithdrawDialogProps) => {
const t = useTranslations("Staking");

@@ -24,5 +26,5 @@ return (

<DialogHeader>
<DialogTitle>{"Withdraw CRUNCH"}</DialogTitle>
<DialogTitle>{t("withdraw_form_title")}</DialogTitle>
<DialogDescription>
{"Withdraw your deposited CRUNCH tokens"}
{t("withdraw_form_description")}
</DialogDescription>

@@ -29,0 +31,0 @@ </DialogHeader>

+9
-6
src/ui/withdrawForm.tsx
"use client";
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { useTranslations } from "next-intl";
import {

@@ -37,2 +39,3 @@ Button,

export const WithdrawForm = ({ onSuccess }: WithdrawFormProps) => {
const t = useTranslations("Staking");
const { withdraw, isLoading } = useWithdrawCrunch();

@@ -76,4 +79,4 @@ const { availableAmount, availableAmountLoading } =

<LoadingOverlay
title={"Withdrawing CRUNCH"}
subtitle={"Please wait while your transaction is being confirmed..."}
title={t("withdraw_loading_title")}
subtitle={t("withdraw_loading_subtitle")}
/>

@@ -88,3 +91,3 @@ )}

<FormItem>
<FormLabel>{"Amount to Withdraw"}</FormLabel>
<FormLabel>{t("withdraw_amount_label")}</FormLabel>
<FormControl>

@@ -116,6 +119,6 @@ <Input

onPercentageSelect={setAmountPercentage}
maxLabel={"Max"}
maxLabel={t("max")}
/>
<FormDescription className="flex justify-between">
<span>{"Staked Balance"}</span>
<span>{t("staked_balance")}</span>
<span>

@@ -143,3 +146,3 @@ <CrunchValue

>
{"Withdraw"}
{t("withdraw_button")}
</Button>

@@ -146,0 +149,0 @@ </form>

+3
-1
src/ui/withdrawTokensButton.tsx
"use client";
import { Button } from "@crunch-ui/core";
import { useTranslations } from "next-intl";
import { useState } from "react";

@@ -10,2 +11,3 @@ import { WithdrawDialog } from "./withdrawDialog";

}) => {
const t = useTranslations("Staking");
const [isOpen, setIsOpen] = useState(false);

@@ -26,3 +28,3 @@ const { depositAccount, depositAccountLoading } = useGetDepositAccount();

>
{"Withdraw"}
{t("withdraw_button")}
</Button>

@@ -29,0 +31,0 @@ <WithdrawDialog open={isOpen} onOpenChange={setIsOpen} />