Merge pull request #887 from mrgnlabs/feature/mrgn-ui-package

feat(mrgn-ui): mrgn-utils refactor & actionbox v2
mrgnlabs · Sep 25, 2024 · 9c2a43a · 9c2a43a
2 parents 1271663 + be87d9c
commit 9c2a43a
Show file tree

Hide file tree

Showing 221 changed files with 7,785 additions and 1,638 deletions.
diff --git a/apps/marginfi-v2-trading/src/components/common/ActionBox/ActionBox.tsx b/apps/marginfi-v2-trading/src/components/common/ActionBox/ActionBox.tsx
@@ -4,18 +4,25 @@ import Link from "next/link";
 import { v4 as uuidv4 } from "uuid";
 
 import { IconAlertTriangle, IconExternalLink, IconSettings } from "@tabler/icons-react";
-import { WSOL_MINT, nativeToUi } from "@mrgnlabs/mrgn-common";
+import { WSOL_MINT } from "@mrgnlabs/mrgn-common";
+import {
+  MarginfiActionParams,
+  closeBalance,
+  executeLendingAction,
+  ActionMethod,
+  showErrorToast,
+  RepayType,
+} from "@mrgnlabs/mrgn-utils";
 import { ActionType, ActiveBankInfo, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
 
 import { useUiStore, useTradeStore } from "~/store";
-import { MarginfiActionParams, closeBalance, executeLendingAction, cn, capture } from "~/utils";
+import { cn, capture } from "~/utils";
 import { useWalletContext } from "~/hooks/useWalletContext";
 import { useConnection } from "~/hooks/useConnection";
 import { useActionBoxStore } from "~/hooks/useActionBoxStore";
 
-import { ActionMethod, checkActionAvailable, RepayType } from "~/utils/actionBoxUtils";
-import { showErrorToast } from "~/utils/toastUtils";
+import { checkActionAvailable } from "~/utils/actionBoxUtils";
 
 import {
   ActionBoxPreview,
@@ -235,23 +242,24 @@ export const ActionBox = ({
         walletContextState,
         priorityFee,
         repayWithCollatOptions,
+        theme: "light",
       });
 
       setIsLoading(false);
       handleCloseDialog && handleCloseDialog();
       setAmountRaw("");
 
       if (txnSig) {
-        setIsActionComplete(true);
-        setPreviousTxn({
-          txnType: "LEND",
-          txn: Array.isArray(txnSig) ? txnSig.pop() ?? "" : txnSig!,
-          lendingOptions: {
-            type: currentAction,
-            bank: bank as ActiveBankInfo,
-            amount: borrowOrLendAmount,
-          },
-        });
+        // setIsActionComplete(true);
+        // setPreviousTxn({
+        //   txnType: "LEND",
+        //   txn: Array.isArray(txnSig) ? txnSig.pop() ?? "" : txnSig!,
+        //   lendingOptions: {
+        //     type: currentAction,
+        //     bank: bank as ActiveBankInfo,
+        //     amount: borrowOrLendAmount,
+        //   },
+        // });
         capture(`user_${currentAction.toLowerCase()}`, {
           tokenSymbol: bank.meta.tokenSymbol,
           tokenName: bank.meta.tokenName,
@@ -375,8 +383,8 @@ export const ActionBox = ({
           repayCollatQuote,
           repayCollatTxn: repayCollatTxns.repayCollatTxn,
           feedCrankTxs: repayCollatTxns.feedCrankTxs,
-          repayAmount: repayAmount,
-          repayBank: selectedRepayBank,
+          withdrawAmount: repayAmount,
+          depositBank: selectedRepayBank,
           connection,
         };
       }
@@ -415,7 +423,7 @@ export const ActionBox = ({
 
   React.useEffect(() => {
     if (errorMessage !== null && errorMessage.description) {
-      showErrorToast(errorMessage?.description);
+      showErrorToast({ message: errorMessage?.description, theme: "light" });
       setAdditionalActionMethods([errorMessage]);
     }
   }, [errorMessage]);
@@ -506,8 +514,8 @@ export const ActionBox = ({
                         repayCollatQuote,
                         repayCollatTxn: repayCollatTxns.repayCollatTxn,
                         feedCrankTxs: repayCollatTxns.feedCrankTxs,
-                        repayAmount,
-                        repayBank: selectedRepayBank,
+                        withdrawAmount: repayAmount,
+                        depositBank: selectedRepayBank,
                         connection,
                       }
                     : undefined

diff --git a/apps/marginfi-v2-trading/src/components/common/ActionBox/ActionBoxDialog.tsx b/apps/marginfi-v2-trading/src/components/common/ActionBox/ActionBoxDialog.tsx
@@ -3,9 +3,9 @@ import React from "react";
 import { IconArrowLeft } from "@tabler/icons-react";
 import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
+import { Desktop, Mobile } from "@mrgnlabs/mrgn-utils";
 
 import { useIsMobile } from "~/hooks/useIsMobile";
-import { Desktop, Mobile } from "~/utils/mediaQueries";
 import { GroupData } from "~/store/tradeStore";
 import { useActionBoxStore } from "~/hooks/useActionBoxStore";
 import { ActionBox } from "~/components/common/ActionBox";

diff --git a/...i-v2-trading/src/components/common/ActionBox/components/ActionBoxInput/ActionBoxInput.tsx b/...i-v2-trading/src/components/common/ActionBox/components/ActionBoxInput/ActionBoxInput.tsx
@@ -2,11 +2,10 @@ import React from "react";
 
 import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
+import { RepayType, YbxType } from "@mrgnlabs/mrgn-utils";
 
-import { RepayType, YbxType } from "~/utils";
 import { useActionBoxStore } from "~/hooks/useActionBoxStore";
-import { useMrgnlendStore, useUiStore } from "~/store";
-
+import { useUiStore } from "~/store";
 import { Input } from "~/components/ui/input";
 import { ActionBoxTokens } from "~/components/common/ActionBox/components";
 

diff --git a/...ponents/common/ActionBox/components/ActionBoxInput/Components/InputAction/InputAction.tsx b/...ponents/common/ActionBox/components/ActionBoxInput/Components/InputAction/InputAction.tsx
@@ -2,9 +2,10 @@ import React from "react";
 
 import { IconArrowRight } from "@tabler/icons-react";
 import { ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
-import { nativeToUi, numeralFormatter } from "@mrgnlabs/mrgn-common";
+import { numeralFormatter } from "@mrgnlabs/mrgn-common";
+import { RepayType } from "@mrgnlabs/mrgn-utils";
 
-import { clampedNumeralFormatter, RepayType } from "~/utils";
+import { clampedNumeralFormatter } from "~/utils";
 import { useActionBoxStore } from "~/hooks/useActionBoxStore";
 
 type props = {

diff --git a/...Box/components/ActionBoxInput/Components/InputHeader/Components/InputHeaderActionLeft.tsx b/...Box/components/ActionBoxInput/Components/InputHeader/Components/InputHeaderActionLeft.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 
-import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { IconSparkles } from "@tabler/icons-react";
 
-import { RepayType } from "~/utils";
+import { RepayType } from "@mrgnlabs/mrgn-utils";
+import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
+
 import { LendingModes } from "~/types";
 
 import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";

diff --git a/...ponents/common/ActionBox/components/ActionBoxInput/Components/InputHeader/InputHeader.tsx b/...ponents/common/ActionBox/components/ActionBoxInput/Components/InputHeader/InputHeader.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { RepayType } from "~/utils";
+import { RepayType } from "@mrgnlabs/mrgn-utils";
 import { useActionBoxStore } from "~/hooks/useActionBoxStore";
 
 import { InputHeaderActionLeft } from "./Components";

diff --git a/...rc/components/common/ActionBox/components/ActionBoxInput/Components/YbxInput/YbxInput.tsx b/...rc/components/common/ActionBox/components/ActionBoxInput/Components/YbxInput/YbxInput.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 
-import { YbxType, cn } from "~/utils";
+import { YbxType } from "@mrgnlabs/mrgn-utils";
+
+import { cn } from "~/utils";
 import { useActionBoxStore } from "~/hooks/useActionBoxStore";
 
 import { Input } from "~/components/ui/input";

diff --git a/...-trading/src/components/common/ActionBox/components/ActionBoxPreview/ActionBoxPreview.tsx b/...-trading/src/components/common/ActionBox/components/ActionBoxPreview/ActionBoxPreview.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 
 import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
-import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
-
-import { ActionMethod, RepayWithCollatOptions } from "~/utils";
+import { ActionMethod, RepayWithCollatOptions } from "@mrgnlabs/mrgn-utils";
 
 import { LendingPreview } from "./Components";
 import { GroupData } from "~/store/tradeStore";

diff --git a/...common/ActionBox/components/ActionBoxPreview/Components/LendingPreview/LendingPreview.tsx b/...common/ActionBox/components/ActionBoxPreview/Components/LendingPreview/LendingPreview.tsx
@@ -1,13 +1,12 @@
 import React from "react";
 
 import { ActionType, DEFAULT_ACCOUNT_SUMMARY, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
-import { usdFormatterDyn } from "@mrgnlabs/mrgn-common";
+import { ActionMethod, RepayWithCollatOptions } from "@mrgnlabs/mrgn-utils";
 
 import { GroupData } from "~/store/tradeStore";
-import { ActionMethod, cn, RepayWithCollatOptions } from "~/utils";
-import { useLendingPreview } from "./useLendingPreview";
+import { cn } from "~/utils";
 
-import { Skeleton } from "~/components/ui/skeleton";
+import { useLendingPreview } from "./useLendingPreview";
 
 interface ActionBoxPreviewProps {
   selectedBank: ExtendedBankInfo | null;

diff --git a/.../ActionBox/components/ActionBoxPreview/Components/LendingPreview/LendingPreview.utils.tsx b/.../ActionBox/components/ActionBoxPreview/Components/LendingPreview/LendingPreview.utils.tsx
@@ -5,6 +5,7 @@ import { AddressLookupTableAccount, VersionedTransaction } from "@solana/web3.js
 import { IconAlertTriangle, IconArrowRight } from "@tabler/icons-react";
 import { ExtendedBankInfo, ActionType, AccountSummary } from "@mrgnlabs/marginfi-v2-ui-state";
 import { Wallet, nativeToUi, numeralFormatter, percentFormatter, usdFormatter } from "@mrgnlabs/mrgn-common";
+import { RepayWithCollatOptions, deserializeInstruction, getAdressLookupTableAccounts } from "@mrgnlabs/mrgn-utils";
 import {
   Bank,
   MarginRequirementType,
@@ -14,14 +15,7 @@ import {
   getPriceWithConfidence,
 } from "@mrgnlabs/marginfi-client-v2";
 
-import {
-  RepayWithCollatOptions,
-  clampedNumeralFormatter,
-  cn,
-  deserializeInstruction,
-  getAdressLookupTableAccounts,
-  isWholePosition,
-} from "~/utils";
+import { clampedNumeralFormatter, cn, isWholePosition } from "~/utils";
 import { calculateBorrowLend } from "~/store/actionBoxStore";
 
 import { IconPyth, IconSwitchboard } from "~/components/ui/icons";
@@ -253,12 +247,12 @@ export async function simulateAction({
           try {
             simulationResult = await account.simulateRepayWithCollat(
               amount,
-              repayWithCollatOptions.repayAmount,
+              repayWithCollatOptions.withdrawAmount,
               bank.address,
-              repayWithCollatOptions.repayBank.address,
+              repayWithCollatOptions.depositBank.address,
               bank.isActive && isWholePosition(bank, amount),
-              repayWithCollatOptions.repayBank.isActive &&
-                isWholePosition(repayWithCollatOptions.repayBank, repayWithCollatOptions.repayAmount),
+              repayWithCollatOptions.depositBank.isActive &&
+                isWholePosition(repayWithCollatOptions.depositBank, repayWithCollatOptions.withdrawAmount),
               [...setupIxs, swapIx, ...swapcleanupIx],
               addressLookupTableAccounts
             );

diff --git a/...mmon/ActionBox/components/ActionBoxPreview/Components/LendingPreview/useLendingPreview.ts b/...mmon/ActionBox/components/ActionBoxPreview/Components/LendingPreview/useLendingPreview.ts
@@ -1,7 +1,11 @@
 import React, { useRef } from "react";
 import { ActionType, AccountSummary, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { MarginfiAccountWrapper, MarginfiClient, SimulationResult } from "@mrgnlabs/marginfi-client-v2";
-import { handleSimulationError } from "@mrgnlabs/mrgn-utils";
+import { RepayWithCollatOptions, ActionMethod, handleSimulationError } from "@mrgnlabs/mrgn-utils";
+
+import { usePrevious } from "~/utils";
+import { useAmountDebounce } from "~/hooks/useAmountDebounce";
+import { BorrowLendObject, calculateBorrowLend } from "~/store/actionBoxStore";
 
 import {
   ActionPreview,
@@ -12,9 +16,6 @@ import {
   generateStats,
   simulateAction,
 } from "./LendingPreview.utils";
-import { ActionMethod, RepayWithCollatOptions, usePrevious } from "~/utils";
-import { useAmountDebounce } from "~/hooks/useAmountDebounce";
-import { BorrowLendObject, calculateBorrowLend } from "~/store/actionBoxStore";
 
 interface UseLendingPreviewProps {
   marginfiClient: MarginfiClient | null;

diff --git a/...rading/src/components/common/ActionBox/components/ActionBoxSettings/ActionBoxSettings.tsx b/...rading/src/components/common/ActionBox/components/ActionBoxSettings/ActionBoxSettings.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-
 import { IconArrowLeft } from "@tabler/icons-react";
+
 import { ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
+import { RepayType } from "@mrgnlabs/mrgn-utils";
 
 import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
 
 import { ActionBoxSlippage, ActionBoxPriorityFees } from "./Components";
-import { RepayType } from "~/utils";
 
 type ActionBoxSettingsProps = {
   repayMode: RepayType;

diff --git a/...x/components/ActionBoxTokens/Components/LendingTokens/Components/LendingTokensTrigger.tsx b/...x/components/ActionBoxTokens/Components/LendingTokens/Components/LendingTokensTrigger.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 
 import { IconChevronDown } from "@tabler/icons-react";
-import { ExtendedBankInfo, Emissions } from "@mrgnlabs/marginfi-v2-ui-state";
+import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
+import { RepayType } from "@mrgnlabs/mrgn-utils";
 
 import { LendingModes } from "~/types";
-import { RepayType, cn, computeBankRate } from "~/utils";
+import { cn, computeBankRate } from "~/utils";
 
 import { Button } from "~/components/ui/button";
 import { SelectedBankItem } from "../../SharedComponents";

diff --git a/...ts/common/ActionBox/components/ActionBoxTokens/Components/LendingTokens/LendingTokens.tsx b/...ts/common/ActionBox/components/ActionBoxTokens/Components/LendingTokens/LendingTokens.tsx
@@ -3,14 +3,14 @@ import React, { act } from "react";
 import { PublicKey } from "@solana/web3.js";
 
 import { ExtendedBankInfo, ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
+import { RepayType } from "@mrgnlabs/mrgn-utils";
 
+import { GroupData } from "~/store/tradeStore";
 import { LendingModes } from "~/types";
-import { RepayType, computeBankRate } from "~/utils";
+import { computeBankRate } from "~/utils";
 
 import { SelectedBankItem, TokenListWrapper } from "../SharedComponents";
 import { LendingTokensList, RepayCollatTokensList, LendingTokensTrigger } from "./Components";
-import { useTradeStore } from "~/store";
-import { GroupData } from "~/store/tradeStore";
 
 type LendingTokensProps = {
   selectedBank: ExtendedBankInfo | null;

diff --git a/...mon/ActionBox/components/ActionBoxTokens/Components/SharedComponents/TokenListWrapper.tsx b/...mon/ActionBox/components/ActionBoxTokens/Components/SharedComponents/TokenListWrapper.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Desktop, Mobile } from "~/utils/mediaQueries";
+import { Desktop, Mobile } from "@mrgnlabs/mrgn-utils";
 
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
 import { Drawer, DrawerContent, DrawerTrigger } from "~/components/ui/drawer";

diff --git a/...arginfi-v2-trading/src/components/common/Pool/CreatePoolScript/CreatePoolScriptDialog.tsx b/...arginfi-v2-trading/src/components/common/Pool/CreatePoolScript/CreatePoolScriptDialog.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
+import { MultiStepToastHandle, showWarningToast } from "@mrgnlabs/mrgn-utils";
+
 import Confetti from "react-confetti";
 import { useWindowSize } from "@uidotdev/usehooks";
 import { IconPlus } from "@tabler/icons-react";
@@ -12,7 +14,6 @@ import { useIsMobile } from "~/hooks/useIsMobile";
 
 import { Dialog, DialogContent, DialogTrigger } from "~/components/ui/dialog";
 import { Button } from "~/components/ui/button";
-import { MultiStepToastHandle, showWarningToast } from "~/utils/toastUtils";
 import { CreatePoolLoading, CreatePoolSuccess, CreatePoolSetup, bankTokens } from "./components";
 
 enum CreatePoolState {
@@ -40,7 +41,7 @@ export const CreatePoolScriptDialog = ({ trigger }: CreatePoolDialogProps) => {
     groupPk: PublicKey;
     lutAddress: PublicKey;
   }) => {
-    const multiStepToast = new MultiStepToastHandle("LUT upload", [{ label: `Uploading LUT to GCP` }]);
+    const multiStepToast = new MultiStepToastHandle("LUT upload", [{ label: `Uploading LUT to GCP` }], "light");
     multiStepToast.start();
 
     try {
@@ -76,7 +77,7 @@ export const CreatePoolScriptDialog = ({ trigger }: CreatePoolDialogProps) => {
 
     const isFinished = bankTokens.length === newIndex;
     if (isFinished) {
-      showWarningToast("All banks created! LFG");
+      showWarningToast({ message: "All banks created! LFG", theme: "light" });
     } else {
       setCurrentIndex((state) => state + 1);
       setCreatePoolState(CreatePoolState.SETUP);

diff --git a/...i-v2-trading/src/components/common/Pool/CreatePoolScript/components/CreatePoolLoading.tsx b/...i-v2-trading/src/components/common/Pool/CreatePoolScript/components/CreatePoolLoading.tsx
@@ -1,6 +1,8 @@
-import { Button } from "~/components/ui/button";
-
+import React from "react";
 import { IconLoader2, IconCheck, IconX } from "@tabler/icons-react";
+import { Keypair, PublicKey, TransactionInstruction } from "@solana/web3.js";
+import BigNumber from "bignumber.js";
+
 import {
   BankConfigOpt,
   MarginfiClient,
@@ -9,14 +11,14 @@ import {
   RiskTier,
   getConfig,
 } from "@mrgnlabs/marginfi-client-v2";
+import { showErrorToast } from "@mrgnlabs/mrgn-utils";
+import { NodeWallet } from "@mrgnlabs/mrgn-common";
+
 import { useConnection } from "~/hooks/useConnection";
-import { Keypair, PublicKey, TransactionInstruction } from "@solana/web3.js";
-import BigNumber from "bignumber.js";
 import { cn, createMarginfiGroup, createPermissionlessBank, createPoolLookupTable } from "~/utils";
+import { Button } from "~/components/ui/button";
 import { useUiStore } from "~/store";
-import React from "react";
-import { showErrorToast } from "~/utils/toastUtils";
-import { NodeWallet } from "@mrgnlabs/mrgn-common";
+
 import { BankToken } from "./tokenSeeds";
 
 const USDC_MINT = new PublicKey("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v");
@@ -154,7 +156,7 @@ export const CreatePoolLoading = ({ poolCreatedData, setIsOpen, setIsCompleted }
     const keypair = process.env.NEXT_PUBLIC_WALLET_KEY;
     // console.log({ por: process.env });
     if (!keypair) {
-      showErrorToast("NEXT_PUBLIC_WALLET_KEY env var not defined");
+      showErrorToast({ message: "NEXT_PUBLIC_WALLET_KEY env var not defined", theme: "light" });
       return;
     }
     return new NodeWallet(Keypair.fromSecretKey(new Uint8Array(JSON.parse(keypair))));