add price impacts to suggested tokens

components/modals/DashboardSuggestedValuesModal.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useEffect, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { ModalProps } from '../../types/modal'
 import Modal from '../shared/Modal'
 import mangoStore from '@store/mangoStore'
@@ -54,8 +54,16 @@ const DashboardSuggestedValues = ({
   const [suggestedTier, setSuggstedTier] =
     useState<LISTING_PRESETS_KEYS>('SHIT')
 
-  const getSuggestedTierForListedTokens = useCallback(async () => {
-    const filteredResp = priceImpacts
+  const getApiTokenName = (bankName: string) => {
+    if (bankName === 'ETH (Portal)') {
+      return 'ETH'
+    }
+    return bankName
+  }
+
+  const priceImpactsFiltered = useMemo(
+    () =>
+      priceImpacts
         .reduce((acc: PriceImpactRespWithoutSide[], val: PriceImpactResp) => {
           if (val.side === 'ask') {
             const bidSide = priceImpacts.find(
@@ -76,6 +84,12 @@ const DashboardSuggestedValues = ({
           }
           return acc
         }, [])
+        .filter((x) => x.symbol === getApiTokenName(bank.name)),
+    [priceImpacts, bank.name],
+  )
+
+  const getSuggestedTierForListedTokens = useCallback(async () => {
+    const filteredResp = priceImpactsFiltered
       .filter((x) => x.avg_price_impact_percent < 1)
       .reduce(
         (
@@ -110,7 +124,7 @@ const DashboardSuggestedValues = ({
         : liqudityTier
 
     setSuggstedTier(listingTier as LISTING_PRESETS_KEYS)
-  }, [priceImpacts])
+  }, [priceImpactsFiltered])
 
   const proposeNewSuggestedValues = useCallback(
     async (
@@ -226,6 +240,7 @@ const DashboardSuggestedValues = ({
       }
     },
     [
+      PRESETS,
       client,
       connection,
       group,
@@ -236,13 +251,6 @@ const DashboardSuggestedValues = ({
     ],
   )
 
-  const getApiTokenName = (bankName: string) => {
-    if (bankName === 'ETH (Portal)') {
-      return 'ETH'
-    }
-    return bankName
-  }
-
   useEffect(() => {
     getSuggestedTierForListedTokens()
   }, [getSuggestedTierForListedTokens])
@@ -443,6 +451,21 @@ const DashboardSuggestedValues = ({
               `${suggestedFields.liquidationFee}%`
             }
           />
+          <div>
+            <h3 className="mb-4 pl-6">Price impacts</h3>
+            {priceImpactsFiltered.map((x) => (
+              <div className="flex pl-6" key={x.target_amount}>
+                <p className="mr-4 w-[150px] space-x-4">
+                  <span>Amount:</span>
+                  <span>${x.target_amount}</span>
+                </p>
+                <p className="space-x-4">
+                  <span>Price impact:</span>{' '}
+                  <span>{x.avg_price_impact_percent.toFixed(3)}%</span>
+                </p>
+              </div>
+            ))}
+          </div>
         </Disclosure.Panel>
 
         {invalidKeys.length && (