Add buttons to mint and deposit LP NFTs

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

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";

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 (
+ <Modal
+ closeButton
+ aria-labelledby="modal-title"
+ open={visible}
+ onClose={closeHandler}
+ >
+ <Modal.Header>
+ <Text id="modal-title" size={18}>
+ Deposit your LP NFT
+ </Text>
+ </Modal.Header>
+ <Modal.Body>
+ <h4>{lpNftName}</h4>
+ <img src={lpNftImageUri} />
+ </Modal.Body>
+ <Modal.Footer>
+ <Button auto onClick={handleDepositLpNft}>
+ Deposit
+ </Button>
+ </Modal.Footer>
+ </Modal>
+ );
+};

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 (
+ <Modal
+ closeButton
+ aria-labelledby="modal-title"
+ open={visible}
+ onClose={closeHandler}
+ >
+ <Modal.Header>
+ <Text id="modal-title" size={18}>
+ Mint your chess set
+ </Text>
+ </Modal.Header>
+ <Modal.Body>
+ <Row>
+ <Input
+ clearable
+ bordered
+ fullWidth
+ color="primary"
+ size="lg"
+ placeholder="Deposit amount"
+ contentLeft={<FaCoins />}
+ onChange={onDepositValueChange}
+ />
+ <Select options={stables} onChange={onStableAddressChange} />
+ </Row>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button auto onClick={handleMintLpNft}>
+ Mint
+ </Button>
+ </Modal.Footer>
+ </Modal>
+ );
+};

front/src/components/ModalMintStables.jsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Text, Modal, Input, Row, Button } from "@nextui-org/react";
+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";
+
+export default ({ visible, closeHandler }) => {
+ const addAction = useActionCreator();
+ const [depositValue, setMintValue] = 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 onMintValueChange = (event) => setMintValue(event.target.value);
+ const onStableAddressChange = (newValue) => setStableAddress(newValue.value);
+ const handleMintStables = async () => {
+ await addAction({
+ type: TransactionType.MINT_ERC20,
+ tokenAddress: stableAddress,
+ tokenAmount: depositValue,
+ });
+ };
+
+ return (
+ <Modal
+ closeButton
+ aria-labelledby="modal-title"
+ open={visible}
+ onClose={closeHandler}
+ >
+ <Modal.Header>
+ <Text id="modal-title" size={18}>
+ Mint stable coins
+ </Text>
+ </Modal.Header>
+ <Modal.Body>
+ <Row>
+ <Input
+ clearable
+ bordered
+ fullWidth
+ color="primary"
+ size="lg"
+ placeholder="Mint amount"
+ contentLeft={<FaCoins />}
+ onChange={onMintValueChange}
+ />
+ <Select options={stables} onChange={onStableAddressChange} />
+ </Row>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button auto onClick={handleMintStables}>
+ Mint
+ </Button>
+ </Modal.Footer>
+ </Modal>
+ );
+};

front/src/components/ModalViewLpNft.jsx

@@ -0,0 +1,28 @@
+import { Text, Modal } from "@nextui-org/react";
+import { useLpNft } from "../hooks/token";
+
+export default ({ visible, closeHandler }) => {
+ const lpNft = useLpNft();
+
+ const lpNftName = lpNft ? lpNft.name : "";
+ const lpNftImageUri = lpNft ? lpNft.imageUri : "";
+
+ return (
+ <Modal
+ closeButton
+ aria-labelledby="modal-title"
+ open={visible}
+ onClose={closeHandler}
+ >
+ <Modal.Header>
+ <Text id="modal-title" size={18}>
+ View your LP NFT
+ </Text>
+ </Modal.Header>
+ <Modal.Body>
+ <h4>{lpNftName}</h4>
+ <img src={lpNftImageUri} />
+ </Modal.Body>
+ </Modal>
+ );
+};