Add buttons to mint and deposit LP NFTs

front/src/common/types.ts

@@ -14,6 +14,9 @@ export enum TransactionType {
   DEPLOY_BOT_INPUT,
   DEPOSIT_ERC20,
   APPROVE_ERC20,
+  MINT_ERC20,
+  MINT_LP_NFT,
+  DEPOSIT_LP_NFT,
   BOT_STEP,
   MANAGER_BOT_INPUT,
   RELEASE_FUNDS,
@@ -137,6 +140,23 @@ export interface ApproveErc20TransactionInfo extends BaseTransactionInfo {
   amount: string;
 }
 
+export interface MintErc20TransactionInfo extends BaseTransactionInfo {
+  type: TransactionType.MINT_ERC20;
+  tokenAddress: string;
+  tokenAmount: 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;
+  nftId: string;
+}
+
 export interface BetTransactionInfo extends BaseTransactionInfo {
   type: TransactionType.BET_INPUT;
   gameId: string;
@@ -186,6 +206,9 @@ export type TransactionInfo =
   | DeployBotTransactionInfo
   | DepositErc20TransactionInfo
   | ApproveErc20TransactionInfo
+  | MintErc20TransactionInfo
+  | MintLpNftTransactionInfo
+  | DepositLpNftTransactionInfo
   | ResignGameTransactionInfo
   | BotStepTransactionInfo
   | ManagerBotTransactionInfo

front/src/components/BotManager.jsx

@@ -6,18 +6,25 @@
  * See the file LICENSE for more information.
  */
 
+import { Spacer } from "@nextui-org/react";
 import BotListView from "./list/BotList";
 import { useAllBots } from "../state/game/hooks";
+import { useLpNfts } from "../state/game/hooks";
 import { Text } from "./ui/Text";
 import { styled } from "@stitches/react";
 import ModalCreateBot from "./modals/ModalCreateBot";
+import ModalMintStables from "./modals/ModalMintStables";
+import ModalMintLpNft from "./modals/ModalMintLpNft";
+import ModalDepositLpNft from "./modals/ModalDepositLpNft";
+import LpNftListView from "./list/LpNftList";
 import Separator from "./ui/Separator";
 import { StitchesLogoIcon } from "@radix-ui/react-icons";
 import { violet } from "@radix-ui/colors";
 import Button from "./ui/Button";
 
 export default () => {
   const bots = useAllBots();
+  const lpNfts = useLpNfts();
 
   return (
     <div className="body">
@@ -52,6 +59,37 @@ export default () => {
             </div>
             <Separator />
             <BotListView bots={bots} />
+            <Separator />
+            <div className="contentHeader">
+              <Label>LP NFTs</Label>
+              <RightSlot>
+                <ModalMintStables
+                  triggerElement={
+                    <Button shadow>
+                      <Text>Mint stables</Text>
+                    </Button>
+                  }
+                />
+                <Spacer x={1} />
+                <ModalMintLpNft
+                  triggerElement={
+                    <Button shadow>
+                      <Text>Mint LP NFT</Text>
+                    </Button>
+                  }
+                />
+                <Spacer x={1} />
+                <ModalDepositLpNft
+                  triggerElement={
+                    <Button shadow>
+                      <Text>Deposit LP NFT</Text>
+                    </Button>
+                  }
+                />
+              </RightSlot>
+            </div>
+            <Separator />
+            <LpNftListView lpNfts={lpNfts} />
           </div>
         </div>
       </div>

front/src/components/modals/ModalDepositLpNft.tsx

@@ -0,0 +1,217 @@
+import { blackA, green, mauve, violet } from "@radix-ui/colors";
+import * as Dialog from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { keyframes, styled } from "@stitches/react";
+import { useWeb3React } from "@web3-react/core";
+import { useState } from "react";
+
+import { TransactionType } from "../../common/types";
+import { USDC_ADDRESS_ON_NETWORKS } from "../../ether/chains";
+import { useTokenFromList } from "../../hooks/token";
+import { useActionCreator } from "../../state/game/hooks";
+import AssetDisplay from "../AssetDisplay";
+
+export default ({ triggerElement }) => {
+  const { chainId } = useWeb3React();
+  const [tokenId, setTokenId] = useState("");
+  const token = useTokenFromList(USDC_ADDRESS_ON_NETWORKS[chainId]);
+
+  const addAction = useActionCreator();
+
+  const handleMint = async () => {
+    console.log(`Depositing token ID ${tokenId}`);
+    const [, wait] = await addAction({
+      type: TransactionType.DEPOSIT_LP_NFT,
+      nftId: tokenId,
+    });
+    await wait;
+  };
+
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>{triggerElement}</Dialog.Trigger>
+      <Dialog.Portal>
+        <DialogOverlay />
+        <DialogContent>
+          <DialogTitle>Deposit LP NFT</DialogTitle>
+          <DialogDescription>Deposit LP NFT for testing.</DialogDescription>
+
+          <Fieldset>
+            <Label>Token ID</Label>
+            <RightSlot>
+              <AssetDisplay tokenAddress={token?.address} balance={tokenId} />
+            </RightSlot>
+          </Fieldset>
+          <Fieldset>
+            <Input
+              id="amount"
+              value={tokenId}
+              defaultValue={0}
+              onChange={(event) => {
+                setTokenId(event.target.value);
+              }}
+            ></Input>
+          </Fieldset>
+          <Flex css={{ marginTop: 25, justifyContent: "flex-end" }}>
+            <Dialog.Close asChild>
+              <Button variant="green" onClick={handleMint}>
+                Deposit
+              </Button>
+            </Dialog.Close>
+          </Flex>
+          <Dialog.Close asChild>
+            <IconButton aria-label="Close">
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+const overlayShow = keyframes({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 },
+});
+
+const contentShow = keyframes({
+  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+});
+
+const DialogOverlay = styled(Dialog.Overlay, {
+  backgroundColor: blackA.blackA9,
+  position: "fixed",
+  inset: 0,
+  animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+});
+
+const DialogContent = styled(Dialog.Content, {
+  backgroundColor: "white",
+  borderRadius: 6,
+  boxShadow:
+    "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90vw",
+  maxWidth: "450px",
+  maxHeight: "85vh",
+  padding: 25,
+  animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+  "&:focus": { outline: "none" },
+});
+
+const DialogTitle = styled(Dialog.Title, {
+  margin: 0,
+  fontWeight: 500,
+  color: mauve.mauve12,
+  fontSize: 17,
+});
+
+const DialogDescription = styled(Dialog.Description, {
+  margin: "10px 0 20px",
+  color: mauve.mauve11,
+  fontSize: 15,
+  lineHeight: 1.5,
+});
+
+const RightSlot = styled("div", {
+  marginLeft: "auto",
+  paddingLeft: 0,
+  display: "flex",
+  color: violet.violet11,
+  "[data-highlighted] > &": { color: "white" },
+  "[data-disabled] &": { color: violet.violet4 },
+});
+
+const Flex = styled("div", { display: "flex" });
+
+const Button = styled("button", {
+  all: "unset",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 4,
+  padding: "0 15px",
+  fontSize: 15,
+  lineHeight: 1,
+  fontWeight: 500,
+  height: 35,
+
+  variants: {
+    variant: {
+      violet: {
+        backgroundColor: "white",
+        color: violet.violet11,
+        boxShadow: `0 2px 10px ${blackA.blackA7}`,
+        "&:hover": { backgroundColor: mauve.mauve3 },
+        "&:focus": { boxShadow: `0 0 0 2px black` },
+      },
+      green: {
+        backgroundColor: green.green4,
+        color: green.green11,
+        "&:hover": { backgroundColor: green.green5 },
+        "&:focus": { boxShadow: `0 0 0 2px ${green.green7}` },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: "violet",
+  },
+});
+
+const IconButton = styled("button", {
+  all: "unset",
+  fontFamily: "inherit",
+  borderRadius: "100%",
+  height: 25,
+  width: 25,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: violet.violet11,
+  position: "absolute",
+  top: 10,
+  right: 10,
+
+  "&:hover": { backgroundColor: violet.violet4 },
+  "&:focus": { boxShadow: `0 0 0 2px ${violet.violet7}` },
+});
+
+const Fieldset = styled("fieldset", {
+  all: "unset",
+  display: "flex",
+  gap: 20,
+  alignItems: "center",
+  marginBottom: 15,
+});
+
+const Label = styled("label", {
+  fontSize: 13,
+  lineHeight: 1,
+  marginBottom: 10,
+  color: violet.violet12,
+  display: "block",
+});
+
+const Input = styled("input", {
+  all: "unset",
+  width: "100%",
+  flex: "1",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 4,
+  padding: "0 10px",
+  fontSize: 15,
+  lineHeight: 1,
+  color: violet.violet11,
+  boxShadow: `0 0 0 1px ${violet.violet7}`,
+  height: 35,
+
+  "&:focus": { boxShadow: `0 0 0 2px ${violet.violet8}` },
+});