fix(mfi-v2-ui): fix withdraw emissions

mrgnlabs · Sep 21, 2023 · 41ead1b · 41ead1b
1 parent 33dc991
commit 41ead1b
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 36 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/AssetsList/AssetRow/AssetRow.tsx b/apps/marginfi-v2-ui/src/components/AssetsList/AssetRow/AssetRow.tsx
@@ -31,7 +31,7 @@ import { useWalletContext } from "~/components/useWalletContext";
 
 const CLOSE_BALANCE_TOAST_ID = "close-balance";
 const BORROW_OR_LEND_TOAST_ID = "borrow-or-lend";
-const EMISSION_MINT_INFO_MAP = new Map<string, { tokenSymbol: string; tokenLogoUri: string }>([
+export const EMISSION_MINT_INFO_MAP = new Map<string, { tokenSymbol: string; tokenLogoUri: string }>([
   [
     "UXD",
     {

diff --git a/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx b/apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import AirdropZone from "./AirdropZone";
@@ -11,15 +11,20 @@ import { useRouter } from "next/router";
 import { HotkeysEvent } from "react-hotkeys-hook/dist/types";
 import { Badge } from "@mui/material";
 import { useFirebaseAccount } from "../useFirebaseAccount";
-import { groupedNumberFormatterDyn, numeralFormatter } from "@mrgnlabs/mrgn-common";
+import { groupedNumberFormatterDyn, processTransaction } from "@mrgnlabs/mrgn-common";
 import { useWalletContext } from "../useWalletContext";
 import { Features, isActive } from "~/utils/featureGates";
+import { EMISSION_MINT_INFO_MAP } from "../AssetsList/AssetRow/AssetRow";
+import { PublicKey, Transaction } from "@solana/web3.js";
+import { useConnection } from "@solana/wallet-adapter-react";
+import { toast } from "react-toastify";
 
 // @todo implement second pretty navbar row
 const Navbar: FC = () => {
   useFirebaseAccount();
 
-  const { connected, walletAddress } = useWalletContext();
+  const { connection } = useConnection();
+  const { connected, walletAddress, wallet } = useWalletContext();
   const router = useRouter();
   const [accountSummary, selectedAccount, extendedBankInfos] = useMrgnlendStore((state) => [
     state.accountSummary,
@@ -37,6 +42,16 @@ const Navbar: FC = () => {
   const [isHotkeyMode, setIsHotkeyMode] = useState(false);
   const [currentRoute, setCurrentRoute] = useState(router.pathname);
 
+  const bankAddressesWithEmissions: PublicKey[] = useMemo(() => {
+    if (!selectedAccount) return [];
+    return [...EMISSION_MINT_INFO_MAP.keys()]
+      .map((bankMintSymbol) => {
+        const uxdBankInfo = extendedBankInfos?.find((b) => b.isActive && b.meta.tokenSymbol === bankMintSymbol);
+        return uxdBankInfo?.address;
+      })
+      .filter((address) => address !== undefined) as PublicKey[];
+  }, [selectedAccount, extendedBankInfos]);
+
   useEffect(() => {
     if (!walletAddress) return;
     fetchPoints(walletAddress.toBase58()).catch(console.error);
@@ -144,27 +159,29 @@ const Navbar: FC = () => {
               </Link>
             </Badge>
 
-            {isActive(Features.STAKE) && <Badge
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "right",
-              }}
-              sx={{
-                "& .MuiBadge-badge": {
-                  backgroundColor: "rgb(220, 232, 93)",
-                  color: "#1C2125",
-                },
-              }}
-              badgeContent={"e"}
-              invisible={!showBadges}
-            >
-              <Link
-                href={"/stake"}
-                className={router.pathname === "/stake" ? "hover-underline-static" : "hover-underline-animation"}
+            {isActive(Features.STAKE) && (
+              <Badge
+                anchorOrigin={{
+                  vertical: "bottom",
+                  horizontal: "right",
+                }}
+                sx={{
+                  "& .MuiBadge-badge": {
+                    backgroundColor: "rgb(220, 232, 93)",
+                    color: "#1C2125",
+                  },
+                }}
+                badgeContent={"e"}
+                invisible={!showBadges}
               >
-                stake
-              </Link>
-            </Badge>}
+                <Link
+                  href={"/stake"}
+                  className={router.pathname === "/stake" ? "hover-underline-static" : "hover-underline-animation"}
+                >
+                  stake
+                </Link>
+              </Badge>
+            )}
 
             <Badge
               anchorOrigin={{
@@ -261,22 +278,31 @@ const Navbar: FC = () => {
           </div>
           <div className="h-full w-1/2 flex justify-end items-center z-10 gap-4 lg:gap-8 text-[#868E95]">
             <div
-              className="whitespace-nowrap cursor-pointer hidden md:block"
-              onClick={() => {
-                if (selectedAccount && extendedBankInfos?.find((b) => b.meta.tokenSymbol === "UXD")?.info.rawBank) {
-                  selectedAccount!.withdrawEmissions(
-                    extendedBankInfos.find((b) => b.meta.tokenSymbol === "UXD")!.address
-                  );
-                }
-
-                if (selectedAccount && extendedBankInfos?.find((b) => b.meta.tokenSymbol === "bSOL")?.info.rawBank) {
-                  selectedAccount!.withdrawEmissions(
-                    extendedBankInfos.find((b) => b.meta.tokenSymbol === "bSOL")!.address
-                  );
+              className={`whitespace-nowrap hidden md:inline-flex ${
+                bankAddressesWithEmissions.length > 0 ? "cursor-pointer hover:text-[#AAA]" : "cursor-not-allowed"
+              }`}
+              onClick={async () => {
+                if (!wallet || !selectedAccount || bankAddressesWithEmissions.length === 0) return;
+                const tx = new Transaction();
+                const ixs = [];
+                const signers = [];
+                for (const bankAddress of bankAddressesWithEmissions) {
+                  const ix = await selectedAccount.makeWithdrawEmissionsIx(bankAddress);
+                  ixs.push(...ix.instructions);
+                  signers.push(ix.keys);
                 }
+                tx.add(...ixs);
+                await processTransaction(connection, wallet, tx);
+                toast.success("Withdrawal successful");
               }}
             >
               withdraw all rewards
+              {bankAddressesWithEmissions.length > 0 && (
+                <span className="relative flex h-1 w-1">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#DCE85D] opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-1 w-1 bg-[#DCE85DAA]"></span>
+                </span>
+              )}
             </div>
 
             <Link