add withdraw offer

ui-fusdc-lp/src/App.tsx

@@ -5,6 +5,7 @@ import {
 import {
   multiplyBy,
   parseRatio,
+  ceilDivideBy,
 } from "@agoric/zoe/src/contractSupport/ratio.js";
 import { AmountMath } from "@agoric/ertp";
 import { create } from "zustand";
@@ -20,7 +21,7 @@ import "./index.css";
 import "@agoric/react-components/dist/style.css";
 import { Navbar } from "./components/Navbar";
 import Dashboard from "./components/Dashboard";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 type Wallet = Awaited<ReturnType<typeof makeAgoricWalletConnection>>;
 
@@ -35,6 +36,7 @@ interface AppState {
   fusdcInstance?: unknown;
   brands?: Record<string, unknown>;
   purses?: Array<Purse>;
+  metrics?: Record<string, unknown>;
 }
 const useAppStore = create<AppState>(() => ({}));
 
@@ -58,6 +60,17 @@ const setup = async () => {
       });
     }
   );
+
+  watcher.watchLatest<Array<[string, unknown]>>(
+    [Kind.Data, "published.fastUsdc.poolMetrics"],
+    (metrics) => {
+      console.log("Got metrics", metrics);
+      useAppStore.setState({
+        metrics: {...metrics},
+      });
+    }
+  );
+
 };
 const parseUSDCAmount = (amountString, usdc) => {
   const USDC_DECIMALS = 6;
@@ -77,16 +90,16 @@ const connectWallet = async () => {
   }
 };
 
-const makeOffer = () => {
+const makeDepositOffer = () => {
   const { wallet, fusdcInstance, brands } = useAppStore.getState();
   if (!fusdcInstance) throw Error("no contract instance");
   if (!(brands && brands.USDC)) throw Error("brands not available");
   const proposal = {
     give: {
-      USDC: parseUSDCAmount(10, brands.USDC),
+      USDC: parseUSDCAmount('10', brands.USDC),
     },
   };
-  console.log("about to make offer");
+  console.log("about to make offer", wallet);
   wallet?.makeOffer(
     {
       source: "agoricContract",
@@ -109,7 +122,48 @@ const makeOffer = () => {
   );
 };
 
+const makeWithdrawOffer = () => {
+  const { wallet, fusdcInstance, brands, metrics } = useAppStore.getState();
+  if (!fusdcInstance) throw Error("no contract instance");
+  if (!(brands && brands.USDC && brands.FastLP)) throw Error("brands not available");
+  if (!(metrics && metrics.shareWorth)) throw Error("metrics not available");
+
+  const usdcAmount = parseUSDCAmount('10', brands.USDC)
+  const fastLPAmount = ceilDivideBy(usdcAmount, metrics.shareWorth);
+  const proposal = {
+    give: {
+      PoolShare: fastLPAmount,
+    },
+    want: {
+      USDC: usdcAmount,
+    },
+  };
+  console.log('fastLPAmount', fastLPAmount);
+  console.log("about to make withdraw offer");
+  wallet?.makeOffer(
+    {
+      source: "agoricContract",
+      instance: fusdcInstance,
+      callPipe: [["makeWithdrawInvitation", []]],
+    },
+    proposal,
+    undefined,
+    (update: { status: string; data?: unknown }) => {
+      if (update.status === "error") {
+        alert(`Offer error: ${update.data}`);
+      }
+      if (update.status === "accepted") {
+        alert("Offer accepted");
+      }
+      if (update.status === "refunded") {
+        alert("Offer rejected");
+      }
+    }
+  );
+};
+
 function App() {
+  const [metrics, setMetrics] = useState<Record<string, unknown>>({});
   useEffect(() => {
     setup();
   }, []);
@@ -145,7 +199,7 @@ function App() {
           defaultChainName="agoric-local"
         >
           <Navbar onConnectClick={tryConnectWallet} />
-          <Dashboard makeOffer={makeOffer} />
+          <Dashboard makeDepositOffer={makeDepositOffer} makeWithdrawOffer={makeWithdrawOffer} />
         </AgoricProvider>
       </div>
     </ThemeProvider>

ui-fusdc-lp/src/components/Dashboard.tsx

@@ -9,10 +9,10 @@ const headerData = [
   { title: "Fees Earned (24h)", value: "$890", description: "USDC" },
 ];
 
-const Dashboard = ({ makeOffer }) => (
+const Dashboard = ({ makeDepositOffer, makeWithdrawOffer }) => (
   <div className="p-6 bg-gray-100 min-h-screen">
     <Cards data={headerData} />
-    <Form makeOffer={makeOffer} />
+    <Form makeDepositOffer={makeDepositOffer} makeWithdrawOffer={makeWithdrawOffer} />
     <Transactions />
   </div>
 );

ui-fusdc-lp/src/components/Form.tsx

@@ -1,4 +1,4 @@
-const Form = ({ makeOffer }) => (
+const Form = ({ makeDepositOffer, makeWithdrawOffer }) => (
   <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
     <div className="card bg-white shadow p-4">
       <h2 className="text-lg font-semibold mb-4">Deposit USDC</h2>
@@ -16,7 +16,7 @@ const Form = ({ makeOffer }) => (
         className="btn btn-error w-full mt-4 bg-[#cd4246] text-white h-8 rounded"
         onClick={() => {
           console.log("clicked deposit");
-          makeOffer();
+          makeDepositOffer();
         }}
       >
         Deposit
@@ -38,7 +38,13 @@ const Form = ({ makeOffer }) => (
       <p className="text-sm text-gray-500 mt-2 mb-4">
         Max withdrawable: 117,778 USDC
       </p>
-      <button className="btn btn-error w-full bg-[#cd4246] text-white h-8 rounded">
+      <button 
+        className="btn btn-error w-full bg-[#cd4246] text-white h-8 rounded"
+        onClick={() => {
+            console.log("clicked withdraw");
+            makeWithdrawOffer();
+          }}
+      >
         Withdraw
       </button>
     </div>