Merge pull request #44 from OilerNetwork/ui-enhancements

UI enhancements

src/app/api/sendFossilRequest/route.ts

@@ -0,0 +1,65 @@
+"use server";
+
+import { NextResponse } from "next/server";
+import { createJobRequest } from "@/lib/utils";
+import { FossilParams } from "@/lib/types";
+
+export async function POST(request: Request) {
+  // Parse the request body
+  const body = await request.json();
+  const params: FossilParams = body;
+
+  const { targetTimestamp, roundDuration, clientAddress, vaultAddress } =
+    params;
+
+  if (!targetTimestamp || !roundDuration || !clientAddress || !vaultAddress) {
+    return NextResponse.json(
+      {
+        error:
+          "Missing targetTimestamp, roundDuration, clientAddress, or vaultAddress parameter",
+      },
+      { status: 400 },
+    );
+  }
+
+  // Create request
+  let fossilRequest = createJobRequest({
+    targetTimestamp,
+    roundDuration,
+    clientAddress,
+    vaultAddress,
+  });
+
+  // Set API key (kept secret on the server side)
+  fossilRequest.headers["x-api-key"] = process.env.FOSSIL_API_KEY;
+
+  // Send Fossil request
+  try {
+    const resp = await fetch(
+      `${process.env.NEXT_PUBLIC_FOSSIL_API_URL}/pricing_data`,
+      fossilRequest,
+    );
+
+    console.log("RAW", resp);
+
+    if (!resp.ok) {
+      console.error("Fossil request failed:", resp.statusText);
+      // Return error response to the client
+      return NextResponse.json(
+        { error: "Fossil request failed: " + resp.statusText },
+        { status: resp.status },
+      );
+    }
+
+    const data = await resp.json();
+    // Return the data to the client
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error("Error sending Fossil request:", error);
+    // Return error response to the client
+    return NextResponse.json(
+      { error: "Error sending Fossil request: " + error.message },
+      { status: 500 },
+    );
+  }
+}

src/app/page.tsx

@@ -8,7 +8,8 @@ import VaultCard from "@/components/VaultCard/VaultCard";
 import useWebSocketHome from "@/hooks/websocket/useWebSocketHome";
 
 export default function Home() {
-  console.log("CHECK THIS LOG", process.env.NEXT_PUBLIC_WS_URL);
+  // console.log("CHECK THIS LOG", process.env.NEXT_PUBLIC_VAULT_ADDRESSES);
+  // console.log("CHECK THIS LOG", process.env.NEXT_PUBLIC_WS_URL);
 
   //  console.log(vaultsRaw);
   //

src/components/Vault/StateTransition.tsx

@@ -68,13 +68,27 @@ const StateTransition = ({
 
   const handleAction = async () => {
     if (roundState === "FossilReady") {
-      await makeFossilCall({
-        targetTimestamp: getTargetTimestampForRound(selectedRoundState),
-        roundDuration: getDurationForRound(selectedRoundState),
-        clientAddress: vaultState?.fossilClientAddress,
-        vaultAddress: vaultState?.address,
+      const response = await fetch("/api/sendFossilRequest", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          targetTimestamp: getTargetTimestampForRound(selectedRoundState),
+          roundDuration: getDurationForRound(selectedRoundState),
+          clientAddress: vaultState?.fossilClientAddress,
+          vaultAddress: vaultState?.address,
+        }),
       });
-      setFossilStatus({ status: "Pending", error: undefined });
+
+      const data = await response.json();
+      console.log("Fossil response:", data);
+
+      if (!response.ok) {
+        setFossilStatus({ status: "Error", error: data.error });
+      } else {
+        setFossilStatus({ status: "Pending", error: undefined });
+      }
     } else if (roundState === "Open") {
       await vaultActions.startAuction();
     } else if (roundState === "Auctioning") {

src/components/Vault/VaultActions/Tabs/Provider/Deposit.tsx

@@ -26,7 +26,7 @@ interface DepositState {
   amount: string;
   isDepositAsBeneficiary: boolean;
   beneficiaryAddress: string;
-  activeWithdrawTab: "For Myself" | "As Beneficiary";
+  activeWithdrawTab: "For Myself" | "For Someone Else";
 }
 
 const Deposit: React.FC<DepositProps> = ({ showConfirmation }) => {
@@ -136,12 +136,12 @@ const Deposit: React.FC<DepositProps> = ({ showConfirmation }) => {
     <div className="flex flex-col h-full">
       <div className="flex-grow space-y-6 p-6">
         <ButtonTabs
-          tabs={["For Myself", "As Beneficiary"]}
+          tabs={["For Myself", "For Someone Else"]}
           activeTab={state.activeWithdrawTab}
           setActiveTab={(tab) =>
             updateState({
-              activeWithdrawTab: tab as "For Myself" | "As Beneficiary",
-              isDepositAsBeneficiary: tab === "As Beneficiary",
+              activeWithdrawTab: tab as "For Myself" | "For Someone Else",
+              isDepositAsBeneficiary: tab === "For Someone Else",
             })
           }
         />
@@ -210,217 +210,3 @@ const Deposit: React.FC<DepositProps> = ({ showConfirmation }) => {
 };
 
 export default Deposit;
-
-//import React, { useState, useEffect } from "react";
-//import { useAccount } from "@starknet-react/core";
-//import { useTransactionContext } from "@/context/TransactionProvider";
-//import useERC20 from "@/hooks/erc20/useERC20";
-//import {
-//  DepositArgs,
-//  LiquidityProviderStateType,
-//  VaultStateType,
-//} from "@/lib/types";
-//import InputField from "@/components/Vault/Utils/InputField";
-//import { ChevronDown, User } from "lucide-react";
-//import ActionButton from "@/components/Vault/Utils/ActionButton";
-//import ButtonTabs from "../../ButtonTabs";
-//import { parseEther, formatEther, parseUnits, formatUnits } from "ethers";
-//import { useProtocolContext } from "@/context/ProtocolProvider";
-//import { getDevAccount } from "@/lib/constants";
-//import { RpcProvider, Call, transaction, num } from "starknet";
-//import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-//import { faEthereum } from "@fortawesome/free-brands-svg-icons";
-//
-//interface DepositProps {
-//  showConfirmation: (
-//    modalHeader: string,
-//    action: string,
-//    onConfirm: () => Promise<void>,
-//  ) => void;
-//}
-//
-//interface DepositState {
-//  amount: string;
-//  isDepositAsBeneficiary: boolean;
-//  beneficiaryAddress: string;
-//  activeWithdrawTab: "For Myself" | "As Beneficiary";
-//}
-//
-//const Deposit: React.FC<DepositProps> = ({ showConfirmation }) => {
-//  const { vaultState, lpState, vaultActions } = useProtocolContext();
-//  const { pendingTx } = useTransactionContext();
-//  const [needsApproval, setNeedsApproval] = useState<string>("0");
-//  const [isDepositComplete, setIsDepositComplete] = useState(false);
-//  const [isApprovalComplete, setIsApprovalComplete] = useState(false);
-//  const [state, setState] = useState<DepositState>({
-//    amount: "0",
-//    isDepositAsBeneficiary: false,
-//    beneficiaryAddress: "",
-//    activeWithdrawTab: "For Myself",
-//  });
-//  const { account } = useAccount();
-//  const { allowance, approve, increaseAllowance } = useERC20(
-//    vaultState?.ethAddress,
-//    vaultState?.address,
-//    account,
-//  );
-//
-//  const updateState = (updates: Partial<DepositState>) => {
-//    setState((prevState) => ({ ...prevState, ...updates }));
-//  };
-//
-//  const handleDeposit = async (): Promise<void> => {
-//    /// Update allowance if needed
-//    const amountWei = parseEther(state.amount);
-//    if (Number(allowance) < Number(amountWei)) {
-//      const diff = Number(amountWei) - Number(allowance);
-//
-//      await approve({
-//        amount: num.toBigInt(amountWei),
-//        spender: vaultState ? vaultState.address : "",
-//      });
-//    }
-//
-//    /// Deposit
-//    await vaultActions.depositLiquidity({
-//      amount: amountWei,
-//      beneficiary: account ? account.address : "",
-//    });
-//  };
-//
-//  const handleApprove = async (): Promise<void> => {
-//    const amountWei = parseEther(state.amount);
-//    if (Number(needsApproval) > 0) {
-//      await approve({
-//        amount: num.toBigInt(amountWei),
-//        spender: vaultState ? vaultState.address : "",
-//      });
-//    }
-//  };
-//
-//  const handleSubmitForApproval = () => {
-//    showConfirmation(
-//      "Approve",
-//      `approve this vault to transfer ${formatEther(needsApproval)} ETH?`,
-//      handleApprove,
-//    );
-//  };
-//
-//  const handleSubmitForDeposit = () => {
-//    showConfirmation(
-//      "Deposit",
-//      `deposit ${state.amount} ETH to this round?`,
-//      handleDeposit,
-//    );
-//  };
-//
-//  const isDepositDisabled = (): boolean => {
-//    // No negatives
-//    if (Number(state.amount) <= Number(0)) {
-//      return true;
-//    }
-//
-//    // If no address is entered
-//    if (state.isDepositAsBeneficiary) {
-//      if (state.beneficiaryAddress.trim() === "") {
-//        return true;
-//      }
-//    }
-//
-//    return false;
-//  };
-//
-//  useEffect(() => {
-//    /// Update allowance if needed
-//    const amountEth = state ? (state.amount === "" ? "0" : state.amount) : "0";
-//    const amountWei = parseUnits(amountEth, "ether");
-//    if (num.toBigInt(allowance) < num.toBigInt(amountWei)) {
-//      setNeedsApproval(amountWei.toString());
-//    }
-//  }, [state.amount, account]);
-//
-//  return (
-//    <div className="flex flex-col h-full">
-//      <div className="flex-grow space-y-6 p-6">
-//        <ButtonTabs
-//          tabs={["For Myself", "As Beneficiary"]}
-//          activeTab={state.activeWithdrawTab}
-//          setActiveTab={(tab) => {
-//            updateState({
-//              activeWithdrawTab: tab as "For Myself" | "As Beneficiary",
-//              isDepositAsBeneficiary: tab === "As Beneficiary",
-//            });
-//          }}
-//        />
-//        {state.isDepositAsBeneficiary && (
-//          <div>
-//            <InputField
-//              type="text"
-//              value={state.beneficiaryAddress}
-//              label="Enter Address"
-//              onChange={(e) => {
-//                updateState({ beneficiaryAddress: e.target.value });
-//                // TODO: Check address regex
-//              }}
-//              placeholder="Depositor's Address"
-//              icon={
-//                <User className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400" />
-//              }
-//            />
-//          </div>
-//        )}
-//
-//        <div>
-//          <InputField
-//            type="number"
-//            value={state.amount}
-//            label="Enter Amount"
-//            onChange={(e) => {
-//              const value = e.target.value;
-//              const formattedValue = value.includes(".")
-//                ? value.slice(0, value.indexOf(".") + 19)
-//                : value;
-//              updateState({ amount: formattedValue });
-//            }}
-//            placeholder="e.g. 5.0"
-//            icon={
-//              <FontAwesomeIcon
-//                icon={faEthereum}
-//                className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pr-2"
-//              />
-//            }
-//          />
-//        </div>
-//      </div>
-//      <div className="mt-auto">
-//        <div className="px-6 flex justify-between text-sm mb-6 pt-6">
-//          <span className="text-gray-400">Unlocked Balance</span>
-//          <span className="text-white">
-//            {formatEther(
-//              lpState?.unlockedBalance ? lpState.unlockedBalance.toString() : 0,
-//            ).toString()}{" "}
-//            ETH
-//          </span>
-//        </div>
-//        <div className="px-6 flex justify-between text-sm mb-6 pt-6 border-t border-[#262626]">
-//          {num.toBigInt(needsApproval) > 0 ? (
-//            <ActionButton
-//              onClick={handleSubmitForApproval}
-//              disabled={false}
-//              //disabled={isDepositDisabled()}
-//              text="Approve"
-//            />
-//          ) : (
-//            <ActionButton
-//              onClick={handleSubmitForDeposit}
-//              disabled={isDepositDisabled()}
-//              text="Deposit"
-//            />
-//          )}
-//        </div>
-//      </div>
-//    </div>
-//  );
-//};
-//
-//export default Deposit;