202411 styling

src/App.css

@@ -740,4 +740,27 @@ button.btn.btn-outline:disabled {
     transform: scaleX(1.1)scaleY(1.5);
     opacity: 0;
   }
+}
+
+.nft-wrap {
+  border-radius: var(--card-border-radius);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nft-wrap > svg {
+  width: 100%;
+  height: auto;
+  flex: 1;
+  margin-top: -60px;
+  margin-bottom: -80px;
+}
+
+.nft-wrap > svg > g > rect:first-of-type {
+  display: none;
+}
+.nft-wrap > svg > g > circle:first-of-type {
+  display: none;
 }

src/components/ui/Modal.jsx

@@ -1,4 +1,9 @@
 import Card from "../ui/Card";
+import Button from "../ui/Button";
+
+import {
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
 
 const Modal = (props) => {
   const {
@@ -36,8 +41,16 @@ const Modal = (props) => {
           <div
             className={"z-40 absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 w-full px-4 " + (wide ? "max-w-[62rem]" : "max-w-[42rem]") }
           >
-            <Card className="card-compact w-full max-h-[90vh] tst-card">
-              <div className="card-body overflow-scroll">
+            <Card className="card-compact w-full max-h-[90vh] tst-card relative">
+              <Button
+                color="ghost"
+                size="sm"
+                onClick={closeModal}
+                className="btn-square absolute right-2 top-2 z-40 opacity-50 hover:opacity-100"
+              >
+                <XMarkIcon className="h-6 w-6 inline-block "/>
+              </Button>
+              <div className="card-body overflow-y-auto overflow-x-auto">
                 {props.children}
               </div>
             </Card>

src/components/vault/VaultNFT.jsx

@@ -0,0 +1,149 @@
+import { useState, useEffect } from "react";
+import { toast } from 'react-toastify';
+import {
+  useReadContract,
+  useChainId
+} from "wagmi";
+import { arbitrumSepolia } from "wagmi/chains";
+
+import {
+  usesUSDContractAddressStore,
+  useContractAddressStore,
+  useVaultManagerAbiStore,
+} from "../../store/Store";
+
+import {
+  StopCircleIcon
+} from '@heroicons/react/24/outline';
+
+import Card from "../ui/Card";
+import Button from "../ui/Button";
+import Typography from "../ui/Typography";
+
+const VaultNFT = ({
+  vaultId,
+  vaultType,
+}) => {
+  const { vaultManagerAbi } = useVaultManagerAbiStore();
+  const [ isLoading, setIsLoading ] = useState(false);
+
+  const {
+    arbitrumSepoliaContractAddress,
+    arbitrumContractAddress
+  } = useContractAddressStore();
+
+  const {
+    arbitrumsUSDSepoliaContractAddress,
+    arbitrumsUSDContractAddress,
+  } = usesUSDContractAddressStore();
+
+  const chainId = useChainId();
+
+  const vaultManagerAddress =
+  chainId === arbitrumSepolia.id
+    ? arbitrumSepoliaContractAddress
+    : arbitrumContractAddress;
+
+  const sUSDVaultManagerAddress =
+  chainId === arbitrumSepolia.id
+    ? arbitrumsUSDSepoliaContractAddress
+    : arbitrumsUSDContractAddress;
+
+  let useVaultManagerAddress = vaultManagerAddress;
+
+  if (vaultType === 'USDs') {
+    useVaultManagerAddress = sUSDVaultManagerAddress;
+  }
+
+  const { data: nftData, refetch: nftRefetch } = useReadContract({
+    address: useVaultManagerAddress,
+    abi: vaultManagerAbi,
+    functionName: "tokenURI",
+    args: [vaultId]
+  });
+
+  let decoded = '';
+  let parsed = '';
+  if (nftData) {
+    const decodable = nftData?.toString().split(",")[1];
+    if (decodable) {
+      decoded = atob(decodable);
+      parsed = JSON.parse(decoded);
+    }
+  }
+
+  let nftContent = '';
+
+  if (parsed && parsed.image_data) {
+    nftContent = parsed.image_data;
+  }
+
+  const checkEthereum = () => {
+    if (!window.ethereum) {
+      toast.error('MetaMask not detected');
+      return false;
+    }
+    return true;
+  };
+
+  const addNFT = async (tokenAddress, tokenId, tokenURI) => {
+    if (!checkEthereum()) return;
+    setIsLoading(true);
+    try {
+      setIsLoading(true);
+      const wasAdded = await window.ethereum.request({
+        method: 'wallet_watchAsset',
+        params: {
+          type: 'ERC721',
+          options: {
+            address: tokenAddress,
+            tokenId: tokenId,
+            tokenURI: tokenURI
+          },
+        },
+      });
+      if (wasAdded) {
+        setIsLoading(false);
+        toast.success('NFT added successfully to MetaMask');
+      } else {
+        setIsLoading(false);
+        toast.error('Failed to add NFT');
+      }
+    } catch (error) {
+      setIsLoading(false);
+      toast.error('Error adding NFT');
+    }
+  };
+
+  return (
+    <Card className="card-compact mb-4">
+      <div className="card-body">
+        <Typography variant="h2" className="card-title flex gap-0">
+          <StopCircleIcon
+            className="mr-2 h-6 w-6 inline-block"
+          />
+          Vault NFT
+        </Typography>
+        <div 
+          className="nft-wrap"
+          dangerouslySetInnerHTML={{ __html: nftContent }}
+        />
+        <Button
+          onClick={() => addNFT(
+            useVaultManagerAddress,
+            vaultId,
+            nftData
+          )}
+          variant="outline"
+          className="pl-2"
+          loading={isLoading}
+          disabled={isLoading}
+        >
+          Add NFT to MetaMask
+        </Button>
+      </div>
+    </Card>
+  )
+};
+
+export default VaultNFT;

src/components/vault/yield/YieldParent.jsx

@@ -251,7 +251,7 @@ const YieldParent = (props) => {
   }
 
   return (
-    <div className="flex-1 grow-[3]">
+    <>
       {yieldEnabled ? (
         <>
           {yieldData && yieldData.length ? (
@@ -343,7 +343,7 @@ const YieldParent = (props) => {
           </div>
         </Card>
       )}
-    </div>
+    </>
   )
 };
 

src/pages/vault/Vault.jsx

@@ -31,6 +31,7 @@ import VaultStats from "../../components/vault/VaultStats";
 import TokenList from "../../components/vault/TokenList";
 import VaultSend from "../../components/vault/VaultSend";
 import TokenTotalPie from "../../components/vault/TokenTotalPie";
+import VaultNFT from "../../components/vault/VaultNFT";
 
 import YieldParent from "../../components/vault/yield/YieldParent";
 
@@ -85,8 +86,8 @@ const Vault = () => {
   const sUSDVaultManagerAddress =
     chainId === arbitrumSepolia.id
       ? arbitrumsUSDSepoliaContractAddress
-      : arbitrumsUSDContractAddress;          
-
+      : arbitrumsUSDContractAddress;      
+    
   const { data: vaultDatasEUR, refetch: refetchsEUR, isLoading: isLoadingsEUR } = useReadContract({
     abi: vaultManagerAbi,
     address: vaultManagerAddress,
@@ -306,11 +307,21 @@ const Vault = () => {
           </Card>
 
         </div>
+        <div className="flex-1 grow-[3]">
+          <YieldParent
+            yieldEnabled={yieldEnabled}
+            vaultType={vaultType}
+          />
 
-        <YieldParent
-          yieldEnabled={yieldEnabled}
-          vaultType={vaultType}
-        />
+          <div className="mt-4">
+            <VaultNFT
+              currentVault={currentVault}
+              vaultId={vaultId}
+              vaultType={vaultType}
+            />
+          </div>
+
+        </div>
       </div>
 
       <div className="mt-4">

src/pages/vaults/Vaults.jsx

@@ -48,9 +48,9 @@ const Vaults = () => {
       : arbitrumContractAddress;
 
   const sUSDVaultManagerAddress =
-  chainId === arbitrumSepolia.id
-    ? arbitrumsUSDSepoliaContractAddress
-    : arbitrumsUSDContractAddress;      
+    chainId === arbitrumSepolia.id
+      ? arbitrumsUSDSepoliaContractAddress
+      : arbitrumsUSDContractAddress;      
 
   const { data: sEURvaultIDs, refetch: refetchsEURVaultIDs } = useReadContract({
     abi: vaultManagerAbi,