diff --git a/front/src/common/types.ts b/front/src/common/types.ts index 9fc335e2..4dafe926 100644 --- a/front/src/common/types.ts +++ b/front/src/common/types.ts @@ -1,11 +1,14 @@ export enum TransactionType { SEND_MOVE_INPUT, + MINT_LP_NFT, + DEPOSIT_LP_NFT, CREATE_GAME_INPUT, JOIN_GAME_INPUT, RESIGN_GAME_INPUT, DEPLOY_BOT_INPUT, DEPOSIT_ERC20, APPROVE_ERC20, + MINT_ERC20, BOT_STEP, MANAGER_BOT_INPUT, RELEASE_FUNDS, @@ -77,6 +80,17 @@ export interface BotStepTransactionInfo extends BaseTransactionInfo { hash: string; } +export interface MintLpNftTransactionInfo extends BaseTransactionInfo { + type: TransactionType.MINT_LP_NFT; + stableAddress: string; + stableAmount: string; +} + +export interface DepositLpNftTransactionInfo extends BaseTransactionInfo { + type: TransactionType.DEPOSIT_LP_NFT; + tokenId: string; +} + export interface CreateGameTransactionInfo extends BaseTransactionInfo { type: TransactionType.CREATE_GAME_INPUT; name: string; @@ -127,6 +141,12 @@ export interface ApproveErc20TransactionInfo extends BaseTransactionInfo { amount: string; } +export interface MintErc20TransactionInfo extends BaseTransactionInfo { + type: TransactionType.MINT_ERC20; + tokenAddress: string; + tokenAmount: string; +} + export interface BetTransactionInfo extends BaseTransactionInfo { type: TransactionType.BET_INPUT; gameId: string; @@ -158,11 +178,14 @@ export interface JoinTournamentTransactionInfo extends BaseTransactionInfo { export type TransactionInfo = | SendMoveTransactionInfo + | MintLpNftTransactionInfo + | DepositLpNftTransactionInfo | CreateGameTransactionInfo | JoinGameTransactionInfo | DeployBotTransactionInfo | DepositErc20TransactionInfo | ApproveErc20TransactionInfo + | MintErc20TransactionInfo | ResignGameTransactionInfo | BotStepTransactionInfo | ManagerBotTransactionInfo diff --git a/front/src/components/Body.jsx b/front/src/components/Body.jsx index f37b1438..8ce1c8d7 100644 --- a/front/src/components/Body.jsx +++ b/front/src/components/Body.jsx @@ -14,6 +14,10 @@ import GameList from "./list/GameList"; import { createGame } from "../state/game/gameSlice"; import { useDispatch } from "react-redux"; import FileUploader from "./BotUploader"; +import ModalDepositLpNft from "./ModalDepositLpNft"; +import ModalMintStables from "./ModalMintStables"; +import ModalMintLpNft from "./ModalMintLpNft"; +import ModalViewLpNft from "./ModalViewLpNft"; import ModalCreateGame from "./ModalCreateGame"; import ModalDepositToken from "./ModalDepositToken"; import { useAppSelector } from "../state/hooks"; diff --git a/front/src/components/ModalDepositLpNft.jsx b/front/src/components/ModalDepositLpNft.jsx new file mode 100644 index 00000000..43f6fb7a --- /dev/null +++ b/front/src/components/ModalDepositLpNft.jsx @@ -0,0 +1,47 @@ +import { Text, Modal, Button } from "@nextui-org/react"; +import { TransactionType } from "../common/types"; +import { useLpNft } from "../hooks/token"; +import { useActionCreator } from "../state/game/hooks"; + +export default ({ visible, closeHandler }) => { + const addAction = useActionCreator(); + + const lpNft = useLpNft(); + + const lpNftTokenAddress = lpNft ? lpNft.tokenAddress : ""; + const lpNftTokenId = lpNft ? lpNft.tokenId : ""; + const lpNftName = lpNft ? lpNft.name : ""; + const lpNftImageUri = lpNft ? lpNft.imageUri : ""; + + const handleDepositLpNft = async () => { + const [depositActionId, wait] = await addAction({ + type: TransactionType.DEPOSIT_LP_NFT, + tokenAddress: lpNftTokenAddress, + tokenId: lpNftTokenId, + }); + }; + + return ( + + + + Deposit your LP NFT + + + +

{lpNftName}

+ +
+ + + +
+ ); +}; diff --git a/front/src/components/ModalMintLpNft.jsx b/front/src/components/ModalMintLpNft.jsx new file mode 100644 index 00000000..f2f5840b --- /dev/null +++ b/front/src/components/ModalMintLpNft.jsx @@ -0,0 +1,93 @@ +import * as React from "react"; +import { Text, Modal, Input, Row, Button } from "@nextui-org/react"; +//import { useDispatch } from "react-redux"; +import { FaCoins } from "react-icons/fa"; +import { useActionCreator } from "../state/game/hooks"; +import { TransactionType } from "../common/types"; +import Select from "react-select"; +import { useStableList } from "../hooks/token"; +import { CONTRACTS } from "../ether/contracts"; + +export default ({ visible, closeHandler }) => { + //const dispatch = useDispatch() + const addAction = useActionCreator(); + const [depositValue, setDepositValue] = React.useState(0); + const [stableAddress, setStableAddress] = React.useState(0); + const stableList = useStableList(); + + const stables = stableList.map((stable) => { + return { + value: stable.address, + label: stable.name, + }; + }); + + const onDepositValueChange = (event) => setDepositValue(event.target.value); + const onStableAddressChange = (newValue) => setStableAddress(newValue.value); + const handleMintLpNft = async () => { + // TODO: Get network name + const networkName = "localhost"; + + // Fetch abi list + const contracts = CONTRACTS[networkName]; + const abis = + contracts && contracts.InputFacet && contracts.ERC20PortalFacet + ? contracts + : CONTRACTS.localhost; + + // Get the staker contract address + const uniV3StakerAddress = abis.UniV3Staker.address; + + const [approvalActionId, forApproval] = await addAction({ + type: TransactionType.APPROVE_ERC20, + tokenAddress: stableAddress, + spender: uniV3StakerAddress, + amount: depositValue, + }); + + await forApproval; + + const [action, wait] = await addAction({ + type: TransactionType.MINT_LP_NFT, + stableAddress: stableAddress, + stableAmount: depositValue, + }); + + await wait; + }; + + return ( + + + + Mint your chess set + + + + + } + onChange={onDepositValueChange} + /> + } + onChange={onMintValueChange} + /> +