✨ Add defindex & vault fees on inspect modal

apps/dapp/src/components/DeployVault/ConfirmDelpoyModal.tsx

@@ -50,7 +50,7 @@ export const ConfirmDelpoyModal = ({ isOpen, onClose }: { isOpen: boolean, onClo
   const feeReceiverString = useAppSelector(state => state.newVault.feeReceiver)
   const { transactionStatusModal: txModal, deployVaultModal: deployModal } = useContext(ModalContext);
   const dispatch = useAppDispatch();
-  const { getIdleFunds, getInvestedFunds, getTVL, getUserBalance } = useVault()
+  const { getFees } = useVault()
 
   const [deployDisabled, setDeployDisabled] = useState(true);
 
@@ -258,6 +258,7 @@ export const ConfirmDelpoyModal = ({ isOpen, onClose }: { isOpen: boolean, onClo
         amount: newVault.assets[index]?.amount || 0
       }
     })
+    const fees = await getFees(parsedResult)
     const tempVault: VaultData = {
       ...newVault,
       address: parsedResult,
@@ -268,6 +269,7 @@ export const ConfirmDelpoyModal = ({ isOpen, onClose }: { isOpen: boolean, onClo
       totalSupply: 0,
       idleFunds: idleFunds,
       investedFunds: [{ address: '', amount: 0 }],
+      fees: fees,
     }
     await txModal.handleSuccess(result.txHash);
     dispatch(pushVault(tempVault));

apps/dapp/src/components/ManageVaults/InspectVault.tsx

@@ -68,7 +68,7 @@ export const InspectVault = ({
           <Stack>
             <Text>Strategies:</Text>
             {selectedVault.assets.map((asset: Asset, index: number) => (
-              <Stack>
+              <Stack key={index}>
                 <For each={asset.strategies}>
                   {(strategy: Strategy, index: number) => (
                     <HStack key={index} alignContent={'center'}>
@@ -109,6 +109,15 @@ export const InspectVault = ({
               </HStack>
             ))}
           </Stack>
+          <Stack>
+            <Text>Fees:</Text>
+            <Text>
+              Defindex fee: {(selectedVault.fees[0]! / 100).toLocaleString('en-US', { style: 'decimal', maximumFractionDigits: 2 })} %
+            </Text>
+            <Text>
+              Vault fee: {(selectedVault.fees[1]! / 100).toLocaleString('en-US', { style: 'decimal', maximumFractionDigits: 2 })} %
+            </Text>
+          </Stack>
           {(address && selectedVault.userBalance) &&
             <Stack>
               <Text>User balance:</Text>

apps/dapp/src/components/ManageVaults/ManageVaults.tsx

@@ -137,6 +137,8 @@ export const ManageVaults = () => {
             <DeployVault />
           </DialogRoot>}
         </GridItem>
+
+        {/* Interact with vault */}
         <GridItem colSpan={12} colStart={1} colEnd={13} zIndex={'base'}>
           <DialogRoot
             open={interactModal.isOpen}
@@ -149,10 +151,12 @@ export const ManageVaults = () => {
           </DialogRoot>
           <AllVaults handleOpenInspect={handleInspectVault} />
         </GridItem>
+
+        {/* Inspect vault */}
         <DialogRoot
           open={inspectModal.isOpen}
           onOpenChange={(e) => { inspectModal.setIsOpen(e.open) }}
-          size={'lg'}
+          size={'xl'}
           placement={'center'}
         >
           <DialogBackdrop backdropFilter='blur(1px)' />
@@ -162,6 +166,8 @@ export const ManageVaults = () => {
             onClose={() => { inspectModal.setIsOpen(false) }}
           />
         </DialogRoot>
+
+        {/* Edit vault */}
         <DialogRoot
           open={editModal.isOpen}
           onOpenChange={(e) => { editModal.setIsOpen(e.open) }}
@@ -171,6 +177,8 @@ export const ManageVaults = () => {
           <DialogBackdrop backdropFilter='blur(1px)' />
           <EditVaultModal />
         </DialogRoot>
+
+        {/* Transaction status modal */}
         <DialogRoot
           open={modalContext.transactionStatusModal.isOpen}
           onOpenChange={(e) => { txModal.setIsOpen(e.open) }}

apps/dapp/src/hooks/useVault.ts

@@ -24,6 +24,7 @@ export enum VaultMethod {
     GETIDLEFUNDS = "fetch_current_idle_funds",
     GETINVESTEDFUNDS = "fetch_current_invested_funds",
     SETFEERECIEVER = "set_fee_receiver",
+    GETFEES = "get_fees",
 }   
 
 const isObject = (val: unknown) => typeof val === 'object' && val !== null && !Array.isArray(val);
@@ -67,7 +68,8 @@ export const useVault = (vaultAddress?: string | undefined) => {
             TVL,
             totalSupply,
             idleFunds,
-            investedFunds
+            investedFunds,
+            fees
         ] = await Promise.all([
             getVaultManager(vaultAddress),
             getVaultEmergencyManager(vaultAddress),
@@ -77,7 +79,8 @@ export const useVault = (vaultAddress?: string | undefined) => {
             getTVL(vaultAddress),
             getVaultTotalSupply(vaultAddress),
             getIdleFunds(vaultAddress),
-            getInvestedFunds(vaultAddress)
+            getInvestedFunds(vaultAddress),
+            getFees(vaultAddress)
         ]);
         for (let asset of assets){
             const symbol = await getTokenSymbol(asset.address, sorobanContext);
@@ -96,6 +99,7 @@ export const useVault = (vaultAddress?: string | undefined) => {
             totalSupply: totalSupply || 0,
             idleFunds: idleFunds || [],
             investedFunds: investedFunds || [],
+            fees: fees || [50,0],
         }
     return newData
     } catch (error) {
@@ -201,6 +205,14 @@ export const useVault = (vaultAddress?: string | undefined) => {
         console.error(error);
         }
     }
+    const getFees = async (vaultAddress: string) => {
+        try {
+        const fees = await vault(VaultMethod.GETFEES, vaultAddress, undefined, false).then((res: any) => scValToNative(res));
+        return fees || [50,0];
+        } catch (error) {
+        console.error(error);
+        }
+    }
 
     const vaultInfo = getVaultInfo(vaultAddress!);
     return { 
@@ -215,6 +227,7 @@ export const useVault = (vaultAddress?: string | undefined) => {
         getUserBalance, 
         getTVL,
         getIdleFunds,
-        getInvestedFunds, 
+        getInvestedFunds,
+        getFees
     };
 }

apps/dapp/src/store/lib/types.ts

@@ -39,7 +39,8 @@ export interface VaultData {
   TVL: number;
   totalSupply: number;
   idleFunds: AssetAmmount[];
-  investedFunds: AssetAmmount[]
+  investedFunds: AssetAmmount[];
+  fees: number[];
   userBalance?: number;
 }