feat(mfi-v2-ui): new asset banner

apps/marginfi-v2-ui/src/components/common/AssetList/NewAsssetBanner.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Image from "next/image";
+import { Button } from "~/components/ui/button";
+import { IconX } from "~/components/ui/icons";
+
+type NewAssetBannerProps = {
+  asset: string;
+  image: string;
+};
+
+export const NewAssetBanner = ({ asset, image }: NewAssetBannerProps) => {
+  const assetTicker = React.useMemo(() => "$" + asset.toUpperCase(), [asset]);
+
+  return (
+    <div className="bg-muted text-white/80 py-4 pl-5 pr-12 rounded-sm max-w-fit relative">
+      <div className="flex gap-6 items-center">
+        <div className="mr-auto flex items-start">
+          <Image src={image} alt={asset} width={50} height={50} />
+        </div>
+        <div className="space-y-2.5">
+          <h2 className="font-medium">{assetTicker} is now available on margnfi</h2>
+          <ul className="flex items-center gap-2 justify-center">
+            <li className="w-full">
+              <Button variant="outline" size="sm" className="w-full">
+                Deposit {assetTicker}
+              </Button>
+            </li>
+            <li className="w-full">
+              <Button variant="outline" size="sm" className="w-full">
+                Borrow {assetTicker}
+              </Button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <button className="absolute top-3 right-3">
+        <IconX className="text-white/80" size={16} />
+      </button>
+    </div>
+  );
+};
+
+type NewAssetBannerListProps = {
+  assets: {
+    asset: string;
+    image: string;
+  }[];
+};
+
+export const NewAssetBannerList = ({ assets }: NewAssetBannerListProps) => {
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      {assets.map((asset) => (
+        <NewAssetBanner key={asset.asset} {...asset} />
+      ))}
+    </div>
+  );
+};

apps/marginfi-v2-ui/src/components/common/AssetList/index.ts

@@ -1,3 +1,4 @@
 export * from "./AssetRowAction";
 export * from "./AssetRowInputBox";
 export * from "./LSTDialog";
+export * from "./NewAsssetBanner";

apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx

@@ -8,7 +8,7 @@ import { useMrgnlendStore, useUserProfileStore } from "~/store";
 import { useWalletContext } from "~/hooks/useWalletContext";
 
 import { LoadingAsset, AssetRow } from "./AssetRow";
-import { LSTDialog, LSTDialogVariants } from "~/components/common/AssetList";
+import { LSTDialog, LSTDialogVariants, NewAssetBannerList } from "~/components/common/AssetList";
 import { MrgnTooltip } from "~/components/common/MrgnTooltip";
 import { MrgnLabeledSwitch } from "~/components/common";
 
@@ -99,7 +99,7 @@ const AssetsList: FC = () => {
 
   return (
     <>
-      <div className="col-span-full">
+      <div className="col-span-full w-full space-y-5">
         <div className="flex w-[150px] h-[42px]">
           <MrgnLabeledSwitch
             labelLeft="Lend"
@@ -108,6 +108,20 @@ const AssetsList: FC = () => {
             onClick={() => setIsInLendingMode(!isInLendingMode)}
           />
         </div>
+
+        <NewAssetBannerList
+          assets={[
+            {
+              asset: "pyth",
+              image: "https://pyth.network/token.svg",
+            },
+            {
+              asset: "shdw",
+              image:
+                "https://shdw-drive.genesysgo.net/FDcC9gn12fFkSU2KuQYH4TUjihrZxiTodFRWNF4ns9Kt/250x250_with_padding.png",
+            },
+          ]}
+        />
       </div>
 
       <div className="col-span-full">