From b026a45a4134e328ad3d4658657b69ccf357a55d Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 9 Feb 2023 13:14:23 +0100
Subject: [PATCH] Fix: limit spending limit tokens in menu (#1652)

---
 .../SafeAppsSDKLink/styles.module.css         |  1 -
 .../TokenTransferModal/SendAssetsForm.tsx     | 25 ++++++++++---------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/safe-apps/SafeAppsSDKLink/styles.module.css b/src/components/safe-apps/SafeAppsSDKLink/styles.module.css
index 1523d92917..c9268d68dd 100644
--- a/src/components/safe-apps/SafeAppsSDKLink/styles.module.css
+++ b/src/components/safe-apps/SafeAppsSDKLink/styles.module.css
@@ -37,7 +37,6 @@
   margin-bottom: var(--space-1);
 }
 
-
 .link {
   font-weight: 400;
 }
diff --git a/src/components/tx/modals/TokenTransferModal/SendAssetsForm.tsx b/src/components/tx/modals/TokenTransferModal/SendAssetsForm.tsx
index 8f90b2e655..55d86d0cac 100644
--- a/src/components/tx/modals/TokenTransferModal/SendAssetsForm.tsx
+++ b/src/components/tx/modals/TokenTransferModal/SendAssetsForm.tsx
@@ -1,4 +1,5 @@
 import type { ReactElement } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useForm, FormProvider, Controller } from 'react-hook-form'
 import {
   Button,
@@ -126,20 +127,19 @@ const SendAssetsForm = ({
   const type = watch(SendAssetsField.type)
   const spendingLimit = useSpendingLimit(selectedToken?.tokenInfo)
   const isSpendingLimitType = type === SendTxType.spendingLimit
-
-  const isSafeTokenSelected = sameAddress(safeTokenAddress, tokenAddress)
-
   const spendingLimitAmount = spendingLimit ? BigNumber.from(spendingLimit.amount).sub(spendingLimit.spent) : undefined
 
-  const items = isOnlySpendingLimitBeneficiary
-    ? balances.items.filter(({ tokenInfo }) => {
-        return spendingLimits?.some(({ beneficiary, token }) => {
-          return sameAddress(beneficiary, wallet?.address || '') && sameAddress(tokenInfo.address, token)
+  const balancesItems = useMemo(() => {
+    return isOnlySpendingLimitBeneficiary
+      ? balances.items.filter(({ tokenInfo }) => {
+          return spendingLimits?.some(({ beneficiary, token }) => {
+            return sameAddress(beneficiary, wallet?.address || '') && sameAddress(tokenInfo.address, token)
+          })
         })
-      })
-    : balances.items
+      : balances.items
+  }, [balances.items, isOnlySpendingLimitBeneficiary, spendingLimits, wallet?.address])
 
-  const onMaxAmountClick = () => {
+  const onMaxAmountClick = useCallback(() => {
     if (!selectedToken) return
 
     const amount =
@@ -150,8 +150,9 @@ const SendAssetsForm = ({
     setValue(SendAssetsField.amount, safeFormatUnits(amount, selectedToken.tokenInfo.decimals), {
       shouldValidate: true,
     })
-  }
+  }, [isSpendingLimitType, selectedToken, setValue, spendingLimitAmount])
 
+  const isSafeTokenSelected = sameAddress(safeTokenAddress, tokenAddress)
   const isDisabled = isSafeTokenSelected && isSafeTokenPaused
 
   return (
@@ -189,7 +190,7 @@ const SendAssetsForm = ({
                     resetField(SendAssetsField.amount)
                   }}
                 >
-                  {balances.items.map((item) => (
+                  {balancesItems.map((item) => (
                     <MenuItem key={item.tokenInfo.address} value={item.tokenInfo.address}>
                       <AutocompleteItem {...item} />
                     </MenuItem>