Merge pull request #2 from Se7en-Seas/withdraw-queue

Withdraw Queue addition

README.md

@@ -1,5 +1,6 @@
 # Boring Vault UI
 A reusable package to quickly integrate boring vaults onto a UI.
+Full documentation for using this package can be found at https://www.notion.so/7seascapital/Boring-Vault-UI-SDK-545da170a9f349259176fa96eb000423
 
 # Local Pkg Development Setup
 1. Clone the repository

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boring-vault-ui",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "A reusable package to quickly integrate boring vaults onto a UI.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/abis/v1/BoringWithdrawQueueContractABI.tsx

@@ -0,0 +1,233 @@
+export default [
+  {
+    inputs: [{ internalType: "address", name: "user", type: "address" }],
+    name: "AtomicQueue__RequestDeadlineExceeded",
+    type: "error",
+  },
+  {
+    inputs: [{ internalType: "address", name: "user", type: "address" }],
+    name: "AtomicQueue__UserNotInSolve",
+    type: "error",
+  },
+  {
+    inputs: [{ internalType: "address", name: "user", type: "address" }],
+    name: "AtomicQueue__UserRepeated",
+    type: "error",
+  },
+  {
+    inputs: [{ internalType: "address", name: "user", type: "address" }],
+    name: "AtomicQueue__ZeroOfferAmount",
+    type: "error",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: "address",
+        name: "user",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "address",
+        name: "offerToken",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "address",
+        name: "wantToken",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "uint256",
+        name: "offerAmountSpent",
+        type: "uint256",
+      },
+      {
+        indexed: false,
+        internalType: "uint256",
+        name: "wantAmountReceived",
+        type: "uint256",
+      },
+      {
+        indexed: false,
+        internalType: "uint256",
+        name: "timestamp",
+        type: "uint256",
+      },
+    ],
+    name: "AtomicRequestFulfilled",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: false,
+        internalType: "address",
+        name: "user",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "address",
+        name: "offerToken",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "address",
+        name: "wantToken",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "uint256",
+        name: "amount",
+        type: "uint256",
+      },
+      {
+        indexed: false,
+        internalType: "uint256",
+        name: "deadline",
+        type: "uint256",
+      },
+      {
+        indexed: false,
+        internalType: "uint256",
+        name: "minPrice",
+        type: "uint256",
+      },
+      {
+        indexed: false,
+        internalType: "uint256",
+        name: "timestamp",
+        type: "uint256",
+      },
+    ],
+    name: "AtomicRequestUpdated",
+    type: "event",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "user", type: "address" },
+      { internalType: "contract ERC20", name: "offer", type: "address" },
+      { internalType: "contract ERC20", name: "want", type: "address" },
+    ],
+    name: "getUserAtomicRequest",
+    outputs: [
+      {
+        components: [
+          { internalType: "uint64", name: "deadline", type: "uint64" },
+          { internalType: "uint88", name: "atomicPrice", type: "uint88" },
+          { internalType: "uint96", name: "offerAmount", type: "uint96" },
+          { internalType: "bool", name: "inSolve", type: "bool" },
+        ],
+        internalType: "struct AtomicQueue.AtomicRequest",
+        name: "",
+        type: "tuple",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "contract ERC20", name: "offer", type: "address" },
+      { internalType: "address", name: "user", type: "address" },
+      {
+        components: [
+          { internalType: "uint64", name: "deadline", type: "uint64" },
+          { internalType: "uint88", name: "atomicPrice", type: "uint88" },
+          { internalType: "uint96", name: "offerAmount", type: "uint96" },
+          { internalType: "bool", name: "inSolve", type: "bool" },
+        ],
+        internalType: "struct AtomicQueue.AtomicRequest",
+        name: "userRequest",
+        type: "tuple",
+      },
+    ],
+    name: "isAtomicRequestValid",
+    outputs: [{ internalType: "bool", name: "", type: "bool" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "contract ERC20", name: "offer", type: "address" },
+      { internalType: "contract ERC20", name: "want", type: "address" },
+      { internalType: "address[]", name: "users", type: "address[]" },
+      { internalType: "bytes", name: "runData", type: "bytes" },
+      { internalType: "address", name: "solver", type: "address" },
+    ],
+    name: "solve",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "contract ERC20", name: "offer", type: "address" },
+      { internalType: "contract ERC20", name: "want", type: "address" },
+      {
+        components: [
+          { internalType: "uint64", name: "deadline", type: "uint64" },
+          { internalType: "uint88", name: "atomicPrice", type: "uint88" },
+          { internalType: "uint96", name: "offerAmount", type: "uint96" },
+          { internalType: "bool", name: "inSolve", type: "bool" },
+        ],
+        internalType: "struct AtomicQueue.AtomicRequest",
+        name: "userRequest",
+        type: "tuple",
+      },
+    ],
+    name: "updateAtomicRequest",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "", type: "address" },
+      { internalType: "contract ERC20", name: "", type: "address" },
+      { internalType: "contract ERC20", name: "", type: "address" },
+    ],
+    name: "userAtomicRequest",
+    outputs: [
+      { internalType: "uint64", name: "deadline", type: "uint64" },
+      { internalType: "uint88", name: "atomicPrice", type: "uint88" },
+      { internalType: "uint96", name: "offerAmount", type: "uint96" },
+      { internalType: "bool", name: "inSolve", type: "bool" },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "contract ERC20", name: "offer", type: "address" },
+      { internalType: "contract ERC20", name: "want", type: "address" },
+      { internalType: "address[]", name: "users", type: "address[]" },
+    ],
+    name: "viewSolveMetaData",
+    outputs: [
+      {
+        components: [
+          { internalType: "address", name: "user", type: "address" },
+          { internalType: "uint8", name: "flags", type: "uint8" },
+          { internalType: "uint256", name: "assetsToOffer", type: "uint256" },
+          { internalType: "uint256", name: "assetsForWant", type: "uint256" },
+        ],
+        internalType: "struct AtomicQueue.SolveMetaData[]",
+        name: "metaData",
+        type: "tuple[]",
+      },
+      { internalType: "uint256", name: "totalAssetsForWant", type: "uint256" },
+      { internalType: "uint256", name: "totalAssetsToOffer", type: "uint256" },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+];

src/components/v1/PendingWithdrawQueueStatuses.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import { Box, HStack, Text, VStack } from "@chakra-ui/react";
+import { useBoringVaultV1 } from "../../contexts/v1/BoringVaultContextV1";
+import { useEthersSigner } from "../../hooks/ethers";
+import { WithdrawQueueStatus } from "../../types";
+import WithdrawQueueCancelButton from "./WithdrawQueueCancelButton";
+
+interface PendingWithdrawQueueStatusesProps {
+  title?: string; // Optional title
+}
+
+// TODO Abstract away style into props above same as DepositButton
+const PendingWithdrawQueueStatuses: React.FC<
+  PendingWithdrawQueueStatusesProps
+> = ({ title, ...pendingWithdrawQueueProps }) => {
+  const { isConnected, userAddress, ethersProvider, withdrawQueueStatuses } =
+    useBoringVaultV1();
+  const [statuses, setStatuses] = useState<any[]>([]); // State to store fetched statuses
+  const signer = useEthersSigner();
+
+  useEffect(() => {
+    const fetchStatuses = async () => {
+      const fetchedStatuses: WithdrawQueueStatus[] =
+        await withdrawQueueStatuses(signer!);
+      setStatuses(fetchedStatuses);
+    };
+
+    fetchStatuses();
+    console.log("withdrawQueueStatuses", withdrawQueueStatuses);
+  }, [withdrawQueueStatuses, signer]);
+
+  return (
+    <Box outline={"5px solid black"} borderRadius={"1em"} padding={"1em"}>
+      {title && (
+        <Text fontSize={"md"} fontWeight={"bold"}>
+          {title}
+        </Text>
+      )}
+      <VStack>
+        {statuses.map((withdrawStatus: WithdrawQueueStatus, index) => {
+          return (
+            <Box
+              key={index}
+              padding={"1em"}
+              outline={"1px solid black"}
+              borderRadius={"1em"}
+            >
+              <HStack key={index} alignItems={"flex-start"}>
+                <VStack alignItems={"flex-start"}>
+                  <Text>
+                    <strong>Shares Withdrawing:</strong>{" "}
+                    {withdrawStatus.sharesWithdrawing}
+                  </Text>
+                  <Text>
+                    <strong>Token Out:</strong>{" "}
+                    {withdrawStatus.tokenOut.displayName}
+                  </Text>
+                  <Text>
+                    <strong>Expiration (unix seconds):</strong>{" "}
+                    {withdrawStatus.deadlineUnixSeconds}
+                  </Text>
+                  <Text>
+                    <strong>Target Token Price:</strong>{" "}
+                    {withdrawStatus.minSharePrice}
+                  </Text>
+                </VStack>
+                <VStack paddingLeft="1em">
+                  <WithdrawQueueCancelButton token={withdrawStatus.tokenOut} />
+                </VStack>
+              </HStack>
+            </Box>
+          );
+        })}
+      </VStack>
+    </Box>
+  );
+};
+
+export default PendingWithdrawQueueStatuses;