diff --git a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx b/explorer-nextjs/src/components/nodeTable/NodeTable.tsx index b08e674a79..db456571d0 100644 --- a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx +++ b/explorer-nextjs/src/components/nodeTable/NodeTable.tsx @@ -46,11 +46,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => { identityKey: string; }>(); - const [favorites, saveFavorites] = useLocalStorage( - "nym-node-favorites", - [], - ); - console.log("favorites :>> ", favorites); + const [favorites] = useLocalStorage("nym-node-favorites", []); const { isWalletConnected } = useChain(COSMOS_KIT_USE_CHAIN); diff --git a/explorer-nextjs/src/components/nymNodePageComponents/NodeProfileCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/NodeProfileCard.tsx index b7a11c4f11..a8cbc80f83 100644 --- a/explorer-nextjs/src/components/nymNodePageComponents/NodeProfileCard.tsx +++ b/explorer-nextjs/src/components/nymNodePageComponents/NodeProfileCard.tsx @@ -1,9 +1,18 @@ "use client"; import type { BondInformation, NodeDescription } from "@/app/api/types"; +import { COSMOS_KIT_USE_CHAIN } from "@/config"; +import { useNymClient } from "@/hooks/useNymClient"; +import { useChain } from "@cosmos-kit/react"; import { Box, Button, Stack, Typography } from "@mui/material"; +import { useCallback, useState } from "react"; import { RandomAvatar } from "react-random-avatars"; import ExplorerCard from "../cards/ExplorerCard"; import CountryFlag from "../countryFlag/CountryFlag"; +import Loading from "../loading"; +import InfoModal, { type InfoModalProps } from "../modal/InfoModal"; +import StakeModal from "../staking/StakeModal"; +import { fee } from "../staking/schemas"; +import ConnectWallet from "../wallet/ConnectWallet"; interface INodeProfileCardProps { bondInfo: BondInformation; @@ -12,6 +21,86 @@ interface INodeProfileCardProps { export const NodeProfileCard = (props: INodeProfileCardProps) => { const { bondInfo, nodeDescription } = props; + const { isWalletConnected } = useChain(COSMOS_KIT_USE_CHAIN); + const { nymClient } = useNymClient(); + const [infoModalProps, setInfoModalProps] = useState({ + open: false, + }); + const [isLoading, setIsLoading] = useState(false); + const [selectedNodeForStaking, setSelectedNodeForStaking] = useState<{ + nodeId: number; + identityKey: string; + }>(); + + const handleStakeOnNode = async ({ + nodeId, + amount, + }: { + nodeId: number; + amount: string; + }) => { + const amountToDelegate = (Number(amount) * 1_000_000).toString(); + const uNymFunds = [{ amount: amountToDelegate, denom: "unym" }]; + + setIsLoading(true); + setSelectedNodeForStaking(undefined); + try { + const tx = await nymClient?.delegate( + { nodeId }, + fee, + "Delegation from Nym Explorer V2", + uNymFunds, + ); + console.log({ tx }); + setSelectedNodeForStaking(undefined); + setInfoModalProps({ + open: true, + title: "Success", + message: "This operation can take up to one hour to process", + tx: tx?.transactionHash, + + onClose: () => setInfoModalProps({ open: false }), + }); + } catch (e) { + const errorMessage = + e instanceof Error ? e.message : "An error occurred while staking"; + setInfoModalProps({ + open: true, + title: "Error", + message: errorMessage, + onClose: () => { + setInfoModalProps({ open: false }); + }, + }); + } + setIsLoading(false); + }; + + const handleOnSelectStake = useCallback(() => { + if (!isWalletConnected) { + setInfoModalProps({ + open: true, + title: "Connect Wallet", + message: "Connect your wallet to stake", + Action: ( + + setInfoModalProps({ + open: false, + }) + } + /> + ), + onClose: () => setInfoModalProps({ open: false }), + }); + return; + } + setSelectedNodeForStaking({ + nodeId: bondInfo.node_id, + identityKey: bondInfo.node.identity_key, + }); + }, [isWalletConnected, bondInfo]); return ( @@ -36,11 +125,23 @@ export const NodeProfileCard = (props: INodeProfileCardProps) => { visit our Telegram🔹https://t.me/CryptoSailorsAnn🔹 - + {isLoading && } + setSelectedNodeForStaking(undefined)} + /> + ); };