feat: update global action box styling, search button styling and wal…

…let label alignment ** WIP **
mrgnlabs · Feb 8, 2025 · caeaa7d · caeaa7d
1 parent 1cf2c43
commit caeaa7d
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 26 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/Navbar/Navbar.tsx b/apps/marginfi-v2-ui/src/components/common/Navbar/Navbar.tsx
@@ -16,6 +16,7 @@ import { useConnection } from "~/hooks/use-connection";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
 import { Button } from "~/components/ui/button";
 import { IconMrgn } from "~/components/ui/icons";
+import { Input } from "~/components/ui/input";
 
 // @todo implement second pretty navbar row
 export const Navbar: FC = () => {
@@ -172,10 +173,23 @@ export const Navbar: FC = () => {
                 }}
                 variant="ghost"
                 size="icon"
-                className="h-10 w-10 shrink-0"
+                className="h-10 w-10 shrink-0 block sm:hidden"
               >
                 <IconSearch size={20} />
               </Button>
+
+              <Button
+                variant="ghost"
+                onClick={() => {
+                  setGlobalActionBoxProps({ ...globalActionBoxProps, isOpen: !globalActionBoxProps.isOpen });
+                }}
+                className="hidden sm:flex py-2 px-4 border border-background-gray-hover flex-row items-center justify-between w-48 text-muted-foreground cursor-pointer "
+              >
+                <div className="">Search pools...</div>
+
+                <div className={cn("")}>⌘ K</div>
+              </Button>
+
               <Popover>
                 <PopoverTrigger asChild>
                   <Button variant="ghost" size="icon" className="h-10 w-10 shrink-0">

diff --git a/.../marginfi-v2-ui/src/components/common/global-actionbox-portal/global-actionbox-portal.tsx b/.../marginfi-v2-ui/src/components/common/global-actionbox-portal/global-actionbox-portal.tsx
@@ -26,7 +26,6 @@ export const GlobalActionBoxPortal = () => {
         className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 
                    opacity-0 animate-fadeIn transition-opacity duration-300 ease-in-out"
       >
-        {" "}
         <div className=" p-6 rounded-lg shadow-lg">
           <ActionBox.BorrowLend
             useProvider={true}
@@ -42,7 +41,7 @@ export const GlobalActionBoxPortal = () => {
               connected,
               walletContextState,
               stakeAccounts,
-              isTokenSelectorOpen: globalActionBoxProps.isTokenSelectorOpen,
+              searchMode: true,
               captureEvent: (event, properties) => {
                 capture(event, properties);
               },

diff --git a/apps/marginfi-v2-ui/src/pages/_app.tsx b/apps/marginfi-v2-ui/src/pages/_app.tsx
@@ -86,10 +86,6 @@ export default function MrgnApp({ Component, pageProps, path }: AppProps & MrgnA
     state.accountSummary,
   ]);
 
-  React.useEffect(() => {
-    console.log("globalActionBoxProps", globalActionBoxProps);
-  }, [globalActionBoxProps]);
-
   const { query, isReady } = useRouter();
   const [ready, setReady] = React.useState(false);
   const [rpcEndpoint, setRpcEndpoint] = React.useState("");

diff --git a/apps/marginfi-v2-ui/src/store/uiStore.ts b/apps/marginfi-v2-ui/src/store/uiStore.ts
@@ -221,7 +221,6 @@ const stateCreator: StateCreator<UiState, [], []> = (set, get) => ({
     set({ jupiterOptions: { ...jupiterOptions, slippageBps: jupiterOptions.slippageBps * 100 } });
   },
   setGlobalActionBoxProps: (props) => {
-    console.log("props", props);
     set({ globalActionBoxProps: props });
   },
 });

diff --git a/packages/mrgn-ui/src/components/action-box-v2/action-box.tsx b/packages/mrgn-ui/src/components/action-box-v2/action-box.tsx
@@ -31,13 +31,16 @@ const ActionBox: ActionBoxComponent = (props) => {
   if (isDialogWrapperProps(props)) {
     const dialogProps = props.dialogProps;
 
+    console.log("dialogProps", dialogProps);
+
     return (
       <>
         <ActionDialogWrapper
           title={dialogProps?.title}
           trigger={dialogProps?.trigger}
           isTriggered={dialogProps?.isTriggered}
           onClose={dialogProps?.onClose}
+          hidden={dialogProps?.hidden}
         >
           {props.children}
         </ActionDialogWrapper>
@@ -109,6 +112,7 @@ const BorrowLend = (
 ) => {
   const contextProps = useActionBoxContext();
   const [selectedAction, setSelectedAction] = React.useState(ActionType.Deposit);
+
   const { lendProps, useProvider, ...actionBoxProps } = props;
 
   React.useEffect(() => {
@@ -126,16 +130,30 @@ const BorrowLend = (
     combinedProps = lendProps as LendBoxProps;
   }
 
+  const [shouldBeHidden, setShouldBeHidden] = React.useState(combinedProps.searchMode);
+  const dialogProps = actionBoxProps.isDialog ? { ...actionBoxProps.dialogProps, hidden: shouldBeHidden } : undefined;
+  const _actionBoxProps = actionBoxProps.isDialog ? { ...actionBoxProps, dialogProps } : actionBoxProps;
+
   return (
-    <ActionBox {...actionBoxProps}>
+    <ActionBox {..._actionBoxProps}>
       <ActionBoxWrapper showSettings={false} isDialog={actionBoxProps.isDialog} actionMode={ActionType.Deposit}>
         <ActionBoxNavigator
           selectedAction={selectedAction}
           onSelectAction={setSelectedAction}
           actionTypes={[ActionType.Deposit, ActionType.Borrow]}
         >
-          <LendBox {...combinedProps} requestedLendType={ActionType.Deposit} />
-          <LendBox {...combinedProps} requestedLendType={ActionType.Borrow} />
+          <LendBox
+            {...combinedProps}
+            requestedLendType={ActionType.Deposit}
+            onCloseDialog={dialogProps?.onClose}
+            setShouldBeHidden={setShouldBeHidden}
+          />
+          <LendBox
+            {...combinedProps}
+            requestedLendType={ActionType.Borrow}
+            onCloseDialog={dialogProps?.onClose}
+            setShouldBeHidden={setShouldBeHidden}
+          />
         </ActionBoxNavigator>
       </ActionBoxWrapper>
     </ActionBox>

diff --git a/...ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx b/...ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx
@@ -25,6 +25,7 @@ type ActionInputProps = {
   isMini?: boolean;
 
   isTokenSelectorOpen?: boolean;
+  onCloseDialog?: () => void;
 
   setAmountRaw: (amount: string) => void;
   setSelectedBank: (bank: ExtendedBankInfo | null) => void;
@@ -45,6 +46,7 @@ export const ActionInput = ({
   selectedBank,
   lendMode,
   isTokenSelectorOpen,
+  onCloseDialog,
   setAmountRaw,
   setSelectedBank,
 }: ActionInputProps) => {
@@ -102,6 +104,9 @@ export const ActionInput = ({
             lendMode={lendMode}
             connected={connected}
             isInitialOpen={isTokenSelectorOpen}
+            onCloseDialog={() => {
+              selectedBank === null && onCloseDialog?.();
+            }}
           />
         </div>
         <div className="flex-auto flex flex-col gap-0 items-end">

diff --git a/...on-box-v2/actions/lend-box/components/action-input/components/bank-select/bank-select.tsx b/...on-box-v2/actions/lend-box/components/action-input/components/bank-select/bank-select.tsx
@@ -17,6 +17,7 @@ type BankSelectProps = {
   showTokenSelectionGroups?: boolean;
   setSelectedBank: (selectedBank: ExtendedBankInfo | null) => void;
   isInitialOpen?: boolean;
+  onCloseDialog?: () => void;
 };
 
 export const BankSelect = ({
@@ -29,6 +30,7 @@ export const BankSelect = ({
   showTokenSelectionGroups,
   setSelectedBank,
   isInitialOpen = false,
+  onCloseDialog,
 }: BankSelectProps) => {
   // idea check list if banks[] == 1 make it unselectable
   const [isOpen, setIsOpen] = React.useState(isInitialOpen);
@@ -59,12 +61,18 @@ export const BankSelect = ({
       {isSelectable && (
         <BankListWrapper
           isOpen={isOpen}
-          setIsOpen={setIsOpen}
+          setIsOpen={(open) => {
+            !open && onCloseDialog?.();
+            setIsOpen(open);
+          }}
           Trigger={<BankTrigger selectedBank={selectedBank} lendingMode={lendingMode} isOpen={isOpen} />}
           Content={
             <BankList
               isOpen={isOpen}
-              onClose={() => setIsOpen(false)}
+              onClose={(hasSetBank) => {
+                !hasSetBank && onCloseDialog?.();
+                setIsOpen(false);
+              }}
               selectedBank={selectedBank}
               onSetSelectedBank={setSelectedBank}
               lendMode={lendMode}

diff --git a/...end-box/components/action-input/components/bank-select/components/bank-list/bank-list.tsx b/...end-box/components/action-input/components/bank-select/components/bank-list/bank-list.tsx
@@ -19,7 +19,7 @@ type BankListProps = {
   connected: boolean;
   showTokenSelectionGroups?: boolean;
   onSetSelectedBank: (selectedTokenBank: ExtendedBankInfo | null) => void;
-  onClose: () => void;
+  onClose: (hasSetBank: boolean) => void;
 };
 
 export const BankList = ({
@@ -154,7 +154,7 @@ export const BankList = ({
 
   return (
     <>
-      <BankListCommand selectedBank={selectedBank} onClose={onClose} onSetSearchQuery={setSearchQuery}>
+      <BankListCommand selectedBank={selectedBank} onClose={() => onClose(false)} onSetSearchQuery={setSearchQuery}>
         {!hasTokens && (
           <div className="text-sm text-[#C0BFBF] font-normal p-3">
             You don&apos;t own any supported tokens in marginfi. Check out what marginfi supports.
@@ -176,7 +176,7 @@ export const BankList = ({
                       onSetSelectedBank(
                         banks.find((bankInfo) => bankInfo.address.toString().toLowerCase() === currentValue) ?? null
                       );
-                      onClose();
+                      onClose(true);
                     }}
                     className="cursor-pointer h-[55px] px-3 font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-mfi-action-box-accent data-[selected=true]:text-mfi-action-box-accent-foreground"
                   >
@@ -216,7 +216,7 @@ export const BankList = ({
                     onSetSelectedBank(
                       banks.find((bankInfo) => bankInfo.address.toString().toLowerCase() === currentValue) ?? null
                     );
-                    onClose();
+                    onClose(true);
                   }}
                   className={cn(
                     "cursor-pointer font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-mfi-action-box-accent data-[selected=true]:text-mfi-action-box-accent-foreground py-2"
@@ -250,7 +250,7 @@ export const BankList = ({
                     onSetSelectedBank(
                       banks.find((bankInfo) => bankInfo.address.toString().toLowerCase() === currentValue) ?? null
                     );
-                    onClose();
+                    onClose(true);
                   }}
                   className={cn(
                     "cursor-pointer font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-mfi-action-box-accent data-[selected=true]:text-mfi-action-box-accent-foreground"
@@ -281,7 +281,7 @@ export const BankList = ({
                     onSetSelectedBank(
                       banks.find((bankInfo) => bankInfo.address.toString().toLowerCase() === currentValue) ?? null
                     );
-                    onClose();
+                    onClose(true);
                   }}
                   className={cn(
                     "cursor-pointer font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-mfi-action-box-accent data-[selected=true]:text-mfi-action-box-accent-foreground hover:bg-mfi-action-box-accent hover:text-mfi-action-box-accent-foreground",
@@ -313,7 +313,7 @@ export const BankList = ({
                     onSetSelectedBank(
                       banks.find((bankInfo) => bankInfo.address.toString().toLowerCase() === currentValue) ?? null
                     );
-                    onClose();
+                    onClose(true);
                   }}
                   className={cn(
                     "cursor-pointer font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-mfi-action-box-accent data-[selected=true]:text-mfi-action-box-accent-foreground hover:bg-mfi-action-box-accent hover:text-mfi-action-box-accent-foreground",
@@ -351,7 +351,7 @@ export const BankList = ({
                         onSetSelectedBank(
                           banks.find((bankInfo) => bankInfo.address.toString().toLowerCase() === currentValue) ?? null
                         );
-                        onClose();
+                        onClose(true);
                       }}
                       className="py-2 cursor-pointer font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-mfi-action-box-accent data-[selected=true]:text-mfi-action-box-accent-foreground hover:bg-mfi-action-box-accent hover:text-mfi-action-box-accent-foreground"
                     >

diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/lend-box.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/lend-box.tsx
@@ -70,6 +70,9 @@ export type LendBoxProps = {
   stakeAccounts?: ValidatorStakeGroup[];
 
   isTokenSelectorOpen?: boolean;
+  searchMode?: boolean;
+  onCloseDialog?: () => void;
+  setShouldBeHidden?: (hidden: boolean) => void;
 
   onComplete?: (previousTxn: PreviousTxn) => void;
   captureEvent?: (event: string, properties?: Record<string, any>) => void;
@@ -96,7 +99,9 @@ export const LendBox = ({
   hidePoolStats,
   stakeAccounts,
   setDisplaySettings,
-  isTokenSelectorOpen,
+  onCloseDialog,
+  searchMode = false,
+  setShouldBeHidden,
 }: LendBoxProps) => {
   const [
     amountRaw,
@@ -140,6 +145,14 @@ export const LendBox = ({
     state.setSelectedStakeAccount,
   ]);
 
+  React.useEffect(() => {
+    if (searchMode && !selectedBank) {
+      setShouldBeHidden?.(true);
+    } else {
+      setShouldBeHidden?.(false);
+    }
+  }, [searchMode, selectedBank, setShouldBeHidden]);
+
   const [isTransactionExecuting, setIsTransactionExecuting] = React.useState(false);
   const [isSimulating, setIsSimulating] = React.useState<{
     isLoading: boolean;
@@ -572,7 +585,10 @@ export const LendBox = ({
           showTokenSelectionGroups={showTokenSelectionGroups}
           setAmountRaw={setAmountRaw}
           setSelectedBank={setSelectedBank}
-          isTokenSelectorOpen={isTokenSelectorOpen}
+          isTokenSelectorOpen={searchMode}
+          onCloseDialog={() => {
+            searchMode && onCloseDialog?.();
+          }}
         />
       </div>
       {lendMode === ActionType.Deposit &&

diff --git a/...mrgn-ui/src/components/action-box-v2/components/action-wrappers/action-dialog-wrapper.tsx b/...mrgn-ui/src/components/action-box-v2/components/action-wrappers/action-dialog-wrapper.tsx
@@ -18,6 +18,7 @@ export interface ActionDialogProps {
   title?: string;
   isTriggered?: boolean;
   onClose?: () => void;
+  hidden?: boolean;
 }
 
 interface ActionDialogWrapperProps extends ActionDialogProps {
@@ -30,6 +31,7 @@ export const ActionDialogWrapper = ({
   title,
   isTriggered = false,
   onClose,
+  hidden = false,
 }: ActionDialogWrapperProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [isActionComplete] = useActionBoxStore((state) => [state.isActionComplete]);
@@ -47,7 +49,7 @@ export const ActionDialogWrapper = ({
   }, [setIsOpen, isTriggered, onClose]);
 
   return (
-    <>
+    <div className={"hidden"}>
       <Mobile>
         <Drawer
           open={isOpen}
@@ -86,6 +88,6 @@ export const ActionDialogWrapper = ({
           </DialogContent>
         </Dialog>
       </Desktop>
-    </>
+    </div>
   );
 };
diff --git a/packages/mrgn-ui/src/components/wallet-v2/wallet.tsx b/packages/mrgn-ui/src/components/wallet-v2/wallet.tsx
@@ -216,7 +216,7 @@ const Wallet = ({
                 <WalletAvatar pfp={pfp} address={wallet?.publicKey.toBase58()} size="sm" />
                 {userDataFetched && wallet?.publicKey ? (
                   <>
-                    <div className="flex flex-col items-center gap-0">
+                    <div className="flex flex-col items-start gap-0">
                       {shortenAddress(wallet?.publicKey)}
                       <div className="text-muted-foreground text-xs">
                         {accountLabels?.[selectedAccount?.address.toBase58() ?? "Account"]}