hotfix: Recovery exits (#4040)

* feat: Recovery exits

* chore: Add migration notices

* chore: Update title

* chore: bump SDK version

* chore: Bump chunk size limit

* chore: Add link to forum post

* chore: Add link to pool page alert

* chore: Style link

package.json

@@ -42,7 +42,7 @@
   "devDependencies": {
     "@aave/protocol-js": "^4.3.0",
     "@balancer-labs/assets": "github:balancer-labs/assets#master",
-    "@balancer-labs/sdk": "^1.1.4-beta.19",
+    "@balancer-labs/sdk": "^1.1.4-beta.20",
     "@balancer-labs/typechain": "^1.0.0",
     "@balancer-labs/v2-deployments": "^3.2.0",
     "@cowprotocol/contracts": "^1.3.1",

src/App.vue

@@ -25,6 +25,8 @@ import useAlerts, {
   AlertPriority,
   AlertType,
 } from './composables/useAlerts';
+import { useI18n } from 'vue-i18n';
+import useNetwork from './composables/useNetwork';
 
 // Dynamic import of layout components:
 // it prevents the initial bundle from including all the layouts (and their unique dependencies)
@@ -75,15 +77,21 @@ const { sidebarOpen } = useSidebar();
 const { addAlert } = useAlerts();
 const { handleThirdPartyModalToggle, isThirdPartyServicesModalVisible } =
   useThirdPartyServices();
+const { t } = useI18n();
+const router = useRouter();
+const { networkSlug } = useNetwork();
 
 // OPTIONAL FEATURE ALERTS are enabled by featureAlertEnabled toggle
 const featureAlert: Alert = {
-  id: 'feature-alert',
-  priority: AlertPriority.LOW,
-  label: '', // Add the new feature alert text here and set featureAlertEnabled to true to activate it
-  type: AlertType.FEATURE,
+  id: 'csp-alert',
+  priority: AlertPriority.HIGH,
+  label: t('poolWarnings.cspPoolVulnWarning.generalTitle'), // Add the new feature alert text here and set featureAlertEnabled to true to activate it
+  type: AlertType.ERROR,
   rememberClose: false,
-  actionOnClick: false,
+  actionLabel: 'Recovery exit',
+  action: () => {
+    router.push({ name: 'recovery-exit', params: { networkSlug } });
+  },
 };
 const featureAlertEnabled = false;
 if (featureAlertEnabled) addAlert(featureAlert);

src/components/_global/BalTable/BalTable.vue

@@ -199,16 +199,13 @@ const shouldRenderTotals = computed(() =>
   props.columns.some(column => column.totalsCell !== undefined)
 );
 
-watch(
-  () => props.data,
-  newData => {
-    if (currentSortColumn.value && currentSortDirection.value !== null) {
-      handleSort(currentSortColumn.value, false);
-      return;
-    }
-    tableData.value = newData;
+watch([() => props.data, () => props.isLoading], ([newData]) => {
+  if (currentSortColumn.value && currentSortDirection.value !== null) {
+    handleSort(currentSortColumn.value, false);
+    return;
   }
-);
+  tableData.value = newData;
+});
 </script>
 
 <template>

src/components/btns/TxActionBtn/TxActionBtn.vue

@@ -21,6 +21,7 @@ type Props = {
   confirmingLabel: string;
   onConfirmFn?: () => unknown;
   disabled?: boolean;
+  disableNotification?: boolean;
 };
 
 /**
@@ -83,12 +84,13 @@ async function initTx() {
     btnState.value = BtnStates.Confirming;
     emit('confirming', tx);
 
-    addTransaction({
-      id: tx.hash,
-      type: 'tx',
-      action: props.action,
-      summary: props.summary,
-    });
+    if (!props.disableNotification)
+      addTransaction({
+        id: tx.hash,
+        type: 'tx',
+        action: props.action,
+        summary: props.summary,
+      });
 
     await txListener(tx, {
       onTxConfirmed: async (receipt: TransactionReceipt) => {

src/components/contextual/pages/pool/PoolActionsCard.vue

@@ -13,6 +13,8 @@ import { Goals, trackGoal } from '@/composables/useFathom';
 import { useDisabledJoinPool } from '@/composables/useDisabledJoinPool';
 import { useTokens } from '@/providers/tokens.provider';
 import { bnum } from '@/lib/utils';
+import { usePoolWarning } from '@/composables/usePoolWarning';
+import { PoolWarning } from '@/types/pools';
 
 /**
  * TYPES
@@ -40,6 +42,7 @@ const { isWalletReady, startConnectWithInjectedProvider } = useWeb3();
 const { networkSlug } = useNetwork();
 const { shouldDisableJoins } = useDisabledJoinPool(props.pool);
 const { balanceFor } = useTokens();
+const { isAffectedBy } = usePoolWarning(computed(() => props.pool.id));
 
 /**
  * COMPUTED
@@ -81,6 +84,17 @@ const joinDisabled = computed(
         />
 
         <BalBtn
+          v-if="isAffectedBy(PoolWarning.CspPoolVulnWarning)"
+          tag="router-link"
+          :to="{ name: 'recovery-exit', params: { networkSlug } }"
+          :label="$t('withdraw.label')"
+          :disabled="!hasBpt"
+          color="blue"
+          outline
+          block
+        />
+        <BalBtn
+          v-else
           :tag="hasBpt ? 'router-link' : 'div'"
           :to="{ name: 'withdraw', params: { networkSlug } }"
           :label="$t('withdraw.label')"

src/components/contextual/pages/pool/PoolStatCards.vue

@@ -4,7 +4,11 @@ import { useI18n } from 'vue-i18n';
 
 import APRTooltip from '@/components/tooltips/APRTooltip/APRTooltip.vue';
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
-import { isLBP, totalAprLabel } from '@/composables/usePoolHelpers';
+import {
+  isLBP,
+  shouldHideAprs,
+  totalAprLabel,
+} from '@/composables/usePoolHelpers';
 import { APR_THRESHOLD, VOLUME_THRESHOLD } from '@/constants/pools';
 import { Pool } from '@/services/pool/types';
 import { AprBreakdown } from '@balancer-labs/sdk';
@@ -94,7 +98,8 @@ const stats = computed(() => {
       id: 'apr',
       label: 'APR',
       value:
-        Number(props.poolApr?.swapFees || '0') > APR_THRESHOLD
+        Number(props.poolApr?.swapFees || '0') > APR_THRESHOLD ||
+        shouldHideAprs(props.pool?.id || '')
           ? '-'
           : aprLabel.value,
       loading: props.loadingApr,
@@ -111,7 +116,9 @@ const stats = computed(() => {
       <BalCard v-else>
         <div class="flex mb-2 text-sm font-medium text-secondary">
           <span>{{ stat.label }}</span>
-          <template v-if="stat.id === 'apr' && poolApr">
+          <template
+            v-if="stat.id === 'apr' && poolApr && !shouldHideAprs(pool.id)"
+          >
             <BalTooltip
               v-if="isLBP(pool.poolType)"
               width="36"

src/components/contextual/pages/pool/staking/StakingIncentivesCard.vue

@@ -16,7 +16,7 @@ import { usePoolWarning } from '@/composables/usePoolWarning';
 import { StakeAction } from './composables/useStakePreview';
 import StakingCardSyncAlert from '../../vebal/cross-chain-boost/StakingCardSyncAlert.vue';
 import useNetwork from '@/composables/useNetwork';
-import { Network } from '@/lib/config';
+import { Network } from '@/lib/config/types';
 
 type Props = {
   pool: Pool;

src/components/contextual/pages/pool/withdraw/WithdrawPage.vue

@@ -8,6 +8,7 @@ import useWithdrawPageTabs from '@/composables/pools/useWithdrawPageTabs';
 import WithdrawPageTabs from './WithdrawPageTabs.vue';
 import { provideExitPool } from '@/providers/local/exit-pool.provider';
 import { Pool } from '@/services/pool/types';
+import { isRecoveryExitsOnly } from '@/composables/usePoolHelpers';
 
 type Props = {
   pool: Pool;
@@ -45,7 +46,7 @@ onMounted(() => resetTabs());
           <h4>{{ $t('withdrawFromPool') }}</h4>
           <SwapSettingsPopover :context="SwapSettingsContext.invest" />
         </div>
-        <WithdrawPageTabs v-if="!(pool.isInRecoveryMode && pool.isPaused)" />
+        <WithdrawPageTabs v-if="!isRecoveryExitsOnly(pool)" />
       </div>
     </template>
     <WithdrawForm :pool="pool" />

src/components/contextual/pages/vebal/LMVoting/GaugesFilters.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import configs, { Network } from '@/lib/config';
+import configs from '@/lib/config';
+import { Network } from '@/lib/config/types';
 
 /**
  * TYPES

src/components/contextual/pages/vebal/LMVoting/LMVoting.vue

@@ -13,7 +13,8 @@ import GaugesTable from './GaugesTable.vue';
 import GaugeVoteModal from './GaugeVoteModal.vue';
 import ResubmitVotesAlert from './ResubmitVotes/ResubmitVotesAlert.vue';
 import { orderedTokenURIs } from '@/composables/useVotingGauges';
-import configs, { Network } from '@/lib/config';
+import configs from '@/lib/config';
+import { Network } from '@/lib/config/types';
 import GaugesFilters from './GaugesFilters.vue';
 import { isGaugeExpired } from './voting-utils';
 

src/components/contextual/pages/vebal/LMVoting/types.ts

@@ -1,4 +1,4 @@
-import { Network } from '@/lib/config';
+import { Network } from '@/lib/config/types';
 import { PoolType } from '@/services/pool/types';
 
 export type Pool = {

src/components/contextual/pages/vebal/cross-chain-boost/CrossChainBoostCards.vue

@@ -12,7 +12,8 @@ import {
   useCrossChainSync,
   NetworkSyncState,
 } from '@/providers/cross-chain-sync.provider';
-import configs, { Network } from '@/lib/config';
+import configs from '@/lib/config';
+import { Network } from '@/lib/config/types';
 
 /**
  * COMPOSABLES
@@ -248,4 +249,4 @@ function onCloseModal() {
       @close-modal="onCloseModal"
     />
   </div>
-</template>
+</template>

src/components/contextual/pages/vebal/cross-chain-boost/CrossChainSyncModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Network } from '@/lib/config';
+import { Network } from '@/lib/config/types';
 import SyncSelectNetwork from '@/components/contextual/pages/vebal/cross-chain-boost/SyncSelectNetwork.vue';
 import SyncNetworkAction from '@/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue';
 import SyncFinalState from '@/components/contextual/pages/vebal/cross-chain-boost/SyncFinalState.vue';

src/components/contextual/pages/vebal/cross-chain-boost/ProceedToSyncModal.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import configs, { Network } from '@/lib/config';
+import configs from '@/lib/config';
+import { Network } from '@/lib/config/types';
 import BalModal from '@/components/_global/BalModal/BalModal.vue';
 import useNetwork from '@/composables/useNetwork';
 

src/components/contextual/pages/vebal/cross-chain-boost/SyncFinalState.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import configs, { Network } from '@/lib/config';
+import configs from '@/lib/config';
+import { Network } from '@/lib/config/types';
 import { useCrossChainSync } from '@/providers/cross-chain-sync.provider';
 
 type Props = {

src/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import configs, { Network } from '@/lib/config';
+import configs from '@/lib/config';
+import { Network } from '@/lib/config/types';
 import { buildNetworkIconURL } from '@/lib/utils/urls';
 import { TransactionActionInfo } from '@/types/transactions';
 import { useI18n } from 'vue-i18n';

src/components/contextual/pages/vebal/cross-chain-boost/SyncSelectNetwork.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import configs, { Network } from '@/lib/config';
+import configs from '@/lib/config';
+import { Network } from '@/lib/config/types';
 import {
   veBalSyncSupportedNetworks,
   useCrossChainSync,

src/components/heros/PortfolioPageHero.vue

@@ -11,7 +11,8 @@ import HeroConnectWalletButton from './HeroConnectWalletButton.vue';
 import { useUserPools } from '@/providers/local/user-pools.provider';
 import { isVeBalSupported } from '@/composables/useVeBAL';
 import ProceedToSyncModal from '../contextual/pages/vebal/cross-chain-boost/ProceedToSyncModal.vue';
-import configs, { Network } from '@/lib/config';
+import configs from '@/lib/config';
+import { Network } from '@/lib/config/types';
 import {
   useCrossChainSync,
   veBalSyncSupportedNetworks,

src/components/modals/VeBalRedirectModal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router';
 
-import { Network } from '@/lib/config';
+import { Network } from '@/lib/config/types';
 
 import BalModal from '@/components/_global/BalModal/BalModal.vue';
 import useVeBAL from '@/composables/useVeBAL';

src/components/navs/AppNav/AppNavSettings.vue

@@ -10,7 +10,7 @@ import { getConnectorLogo } from '@/services/web3/wallet-logos';
 import { getConnectorName } from '@/services/web3/wallet-names';
 import { useUserSettings } from '@/providers/user-settings.provider';
 import { isEIP1559SupportedNetwork } from '@/composables/useNetwork';
-import { Network } from '@/lib/config';
+import { Network } from '@/lib/config/types';
 
 // COMPOSABLES
 const { darkMode, setDarkMode } = useDarkMode();

src/components/tables/PoolsTable/PoolsTable.vue

@@ -23,6 +23,7 @@ import {
   orderedTokenAddresses,
   totalAprLabel,
   isLBP,
+  shouldHideAprs,
 } from '@/composables/usePoolHelpers';
 import { bnum } from '@/lib/utils';
 import { Pool } from '@/services/pool/types';
@@ -378,6 +379,7 @@ function iconAddresses(pool: Pool) {
           ]"
         >
           <BalLoadingBlock v-if="!pool?.apr" class="w-12 h-4" />
+          <span v-else-if="shouldHideAprs(pool.id)">-</span>
           <template v-else>
             {{ aprLabelFor(pool) }}
             <BalTooltip

src/composables/approvals/types.ts

@@ -4,4 +4,5 @@ export enum ApprovalAction {
   Staking,
   Swapping,
   Unapprove,
+  Unwrapping,
 }

src/composables/approvals/useTokenApprovalActions.ts

@@ -66,6 +66,8 @@ export default function useTokenApprovalActions() {
         return t('transactionSummary.approveForSwapping', [symbol]);
       case ApprovalAction.Unapprove:
         return t('transactionSummary.unapprove', [symbol]);
+      case ApprovalAction.Unwrapping:
+        return t('transactionSummary.approveForUnwrapping', [symbol]);
       default:
         return t('transactionSummary.approveForInvesting', [symbol]);
     }
@@ -81,6 +83,8 @@ export default function useTokenApprovalActions() {
         return t('transactionSummary.tooltips.approveForSwapping', [symbol]);
       case ApprovalAction.Unapprove:
         return t('transactionSummary.tooltips.unapprove', [symbol]);
+      case ApprovalAction.Unwrapping:
+        return t('transactionSummary.tooltips.approveForUnwrapping', [symbol]);
       default:
         return t('transactionSummary.tooltips.approveForInvesting', [symbol]);
     }

src/composables/queries/useCrossChainNetwork.ts

@@ -1,4 +1,5 @@
-import configs, { Network } from '@/lib/config';
+import configs from '@/lib/config';
+import { Network } from '@/lib/config/types';
 import { allEqual } from '@/lib/utils/array';
 import { NetworkSyncState } from '@/providers/cross-chain-sync.provider';
 import { OmniEscrowLock } from './useOmniEscrowLocksQuery';

src/composables/queries/useOmniEscrowLocksQuery.ts

@@ -1,7 +1,8 @@
 import QUERY_KEYS from '@/constants/queryKeys';
 import useGraphQuery from './useGraphQuery';
 import useNetwork from '../useNetwork';
-import config, { Network } from '@/lib/config';
+import config from '@/lib/config';
+import { Network } from '@/lib/config/types';
 
 const attrs = {
   id: true,