From 960e260dc176582efb56bed42c4c25fe72bd658f Mon Sep 17 00:00:00 2001
From: Gareth Fuller <gareth.a.f@gmail.com>
Date: Thu, 10 Oct 2024 08:56:32 +0100
Subject: [PATCH] chore: Deprecate pages (#5913)

---
 src/components/navs/AppNav/AppNavActions.vue  |   2 -
 .../navs/AppNav/AppSidebar/SidebarContent.vue |   7 -
 .../navs/AppNav/DesktopLinks/DesktopLinks.vue |  24 --
 src/pages/index.vue                           | 258 ++----------------
 src/plugins/router/nav-guards.ts              |  12 +
 5 files changed, 30 insertions(+), 273 deletions(-)

diff --git a/src/components/navs/AppNav/AppNavActions.vue b/src/components/navs/AppNav/AppNavActions.vue
index 4e36c04163..1fa06f0e1f 100644
--- a/src/components/navs/AppNav/AppNavActions.vue
+++ b/src/components/navs/AppNav/AppNavActions.vue
@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 
 import DarkModeToggle from '@/components/btns/DarkModeToggle.vue';
-import FeedbackBtn from '@/components/btns/FeedbackBtn.vue';
 import useBreakpoints from '@/composables/useBreakpoints';
 import { useSidebar } from '@/composables/useSidebar';
 import useWeb3 from '@/services/web3/useWeb3';
@@ -37,7 +36,6 @@ function connectWalletHandler() {
   <div class="grid grid-rows-1 grid-flow-col gap-2">
     <DarkModeToggle v-if="isDesktop" />
     <AppNavActivityBtn v-if="account" />
-    <FeedbackBtn v-if="isDesktop" />
     <AppNavAccountBtn v-if="account" />
     <BalBtn
       v-else
diff --git a/src/components/navs/AppNav/AppSidebar/SidebarContent.vue b/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
index 1546e12d9a..b885bafcdd 100644
--- a/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
+++ b/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
@@ -40,18 +40,11 @@ const { openNpsModal } = useAppzi();
 const blockIcon = ref<HTMLDivElement>();
 
 const navLinks = [
-  { label: t('pool'), path: '/', goal: Goals.ClickNavPools },
-  { label: t('swap'), path: `/${networkSlug}/swap`, goal: Goals.ClickNavSwap },
   {
     label: t('claim'),
     path: `/${networkSlug}/claim`,
     goal: Goals.ClickNavClaim,
   },
-  {
-    label: t('portfolio'),
-    path: `/${networkSlug}/portfolio`,
-    goal: Goals.ClickNavPortfolio,
-  },
   { label: 'veBAL', path: `/${networkSlug}/vebal`, goal: Goals.ClickNavVebal },
 ];
 
diff --git a/src/components/navs/AppNav/DesktopLinks/DesktopLinks.vue b/src/components/navs/AppNav/DesktopLinks/DesktopLinks.vue
index cebf5e7479..a3d5851ecc 100644
--- a/src/components/navs/AppNav/DesktopLinks/DesktopLinks.vue
+++ b/src/components/navs/AppNav/DesktopLinks/DesktopLinks.vue
@@ -21,22 +21,6 @@ function isActive(page: string): boolean {
 
 <template>
   <div class="desktop-links">
-    <DesktopLinkItem
-      :to="{ name: 'home', params: { networkSlug } }"
-      :active="isActive('home')"
-      prefetch
-      @click="trackGoal(Goals.ClickNavPools)"
-    >
-      {{ $t('pool') }}
-    </DesktopLinkItem>
-    <DesktopLinkItem
-      :to="{ name: 'swap', params: { networkSlug } }"
-      :active="isActive('swap')"
-      prefetch
-      @click="trackGoal(Goals.ClickNavSwap)"
-    >
-      {{ $t('swap') }}
-    </DesktopLinkItem>
     <DesktopLinkItem
       :to="{ name: 'claim', params: { networkSlug } }"
       :active="isActive('claim')"
@@ -54,14 +38,6 @@ function isActive(page: string): boolean {
     >
       Faucet
     </DesktopLinkItem>
-    <DesktopLinkItem
-      :to="{ name: 'portfolio', params: { networkSlug } }"
-      :active="isActive('portfolio')"
-      prefetch
-      @click="trackGoal(Goals.ClickNavPortfolio)"
-    >
-      {{ $t('portfolio') }}
-    </DesktopLinkItem>
     <DesktopLinkItem
       :to="{ name: 'vebal', params: { networkSlug } }"
       :active="isActive('vebal')"
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 873c2635dc..fa8989495b 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,250 +1,28 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-
 import HomePageHero from '@/components/heros/HomePageHero.vue';
-import TokenSearchInput from '@/components/inputs/TokenSearchInput.vue';
-import FeaturedProtocols from '@/components/sections/FeaturedProtocols.vue';
-import PoolsTable from '@/components/tables/PoolsTable/PoolsTable.vue';
-import usePoolFilters from '@/composables/pools/usePoolFilters';
-import useBreakpoints from '@/composables/useBreakpoints';
-import useNetwork from '@/composables/useNetwork';
-import usePools from '@/composables/pools/usePools';
-import { lsGet, lsSet } from '@/lib/utils';
-import LS_KEYS from '@/constants/local-storage.keys';
-import { useIntersectionObserver } from '@vueuse/core';
-import { PoolType } from '@/services/pool/types';
-import PoolFeatureSelect from '@/components/inputs/PoolFeatureSelect.vue';
-import { useTokens } from '@/providers/tokens.provider';
-import { PoolAttributeFilter, PoolTypeFilter } from '@/types/pools';
-import UserInvestedInAffectedPoolAlert from '@/pages/recovery-exit/UserInvestedInAffectedPoolAlert.vue';
-import { usePoolGroups } from '@/composables/usePoolGroups';
-
-const featuredProtocolsSentinel = ref<HTMLDivElement | null>(null);
-const isFeaturedProtocolsVisible = ref(false);
-useIntersectionObserver(featuredProtocolsSentinel, ([{ isIntersecting }]) => {
-  if (isIntersecting) {
-    isFeaturedProtocolsVisible.value = true;
-  }
-});
-
-/**
- * STATE
- */
-const route = useRoute();
-const urlSortParam = route.query?.sort as string | undefined;
-const initSortCol =
-  urlSortParam || lsGet(LS_KEYS.App.PoolSorting) || 'totalLiquidity';
-const sortField = ref('totalLiquidity');
-const poolTypeFilter = ref<PoolTypeFilter>();
-const filterPoolIds = ref<string[]>([]);
-const filterPoolTypes = ref<PoolType[]>([]);
-const filterPoolAttributes = ref<PoolAttributeFilter[]>([]);
-
-/**
- * COMPOSABLES
- */
-const router = useRouter();
-const { getToken } = useTokens();
-const { appNetworkConfig } = useNetwork();
-const isElementSupported = appNetworkConfig.supportsElementPools;
-const { selectedTokens, addSelectedToken, removeSelectedToken } =
-  usePoolFilters();
-
-const { pools, isLoading, isFetchingNextPage, loadMorePools } = usePools({
-  filterTokens: selectedTokens,
-  sortField,
-  poolIds: filterPoolIds,
-  poolTypes: filterPoolTypes,
-  poolAttributes: filterPoolAttributes,
-});
-
-const { upToSmallBreakpoint } = useBreakpoints();
-const { networkSlug, networkConfig } = useNetwork();
-
-const { lrtPools, pointPools } = usePoolGroups(networkConfig.chainId);
-
-const isPaginated = computed(() => pools.value.length >= 10);
-
-/**
- * METHODS
- */
-function navigateToCreatePool() {
-  router.push({ name: 'create-pool', params: { networkSlug } });
-}
-
-function onColumnSort(columnId: string) {
-  sortField.value = columnId;
-  lsSet(LS_KEYS.App.PoolSorting, columnId);
-}
-
-function updatePoolFilters(feature: PoolTypeFilter | undefined) {
-  switch (feature) {
-    case PoolTypeFilter.Weighted:
-      filterPoolIds.value = [];
-      filterPoolTypes.value = [PoolType.Weighted];
-      break;
-    case PoolTypeFilter.Stable:
-      filterPoolIds.value = [];
-      filterPoolTypes.value = [
-        PoolType.Stable,
-        PoolType.StablePhantom,
-        PoolType.MetaStable,
-        PoolType.ComposableStable,
-      ];
-      break;
-    case PoolTypeFilter.CLP:
-      filterPoolIds.value = [];
-      filterPoolTypes.value = [PoolType.Gyro2, PoolType.Gyro3, PoolType.GyroE];
-      break;
-    case PoolTypeFilter.LBP:
-      filterPoolIds.value = [];
-      filterPoolTypes.value = [PoolType.LiquidityBootstrapping];
-      break;
-    case PoolTypeFilter.LRT:
-      filterPoolIds.value = lrtPools.value;
-      filterPoolTypes.value = [];
-      break;
-    case PoolTypeFilter.Points:
-      filterPoolIds.value = pointPools.value;
-      filterPoolTypes.value = [];
-      break;
-    default:
-      filterPoolIds.value = [];
-      filterPoolTypes.value = [];
-  }
-}
-
-function removeAttributeFilter(attribute: PoolAttributeFilter) {
-  const index = filterPoolAttributes.value.indexOf(attribute);
-  filterPoolAttributes.value.splice(index, 1);
-}
-
-watch(poolTypeFilter, newPoolTypeFilter => {
-  updatePoolFilters(newPoolTypeFilter);
-});
 </script>
 
 <template>
   <div>
     <HomePageHero />
-    <div class="xl:container xl:px-4 pt-10 md:pt-8 xl:mx-auto">
-      <UserInvestedInAffectedPoolAlert />
-      <BalStack vertical>
-        <div class="px-4 xl:px-0">
-          <div class="flex justify-between items-end mb-2">
-            <h3>
-              {{ networkConfig.chainName }}
-              <span class="lowercase">{{ $t('pools') }}</span>
-            </h3>
-            <BalBtn
-              v-if="upToSmallBreakpoint"
-              color="blue"
-              size="sm"
-              outline
-              :class="{ 'mt-4': upToSmallBreakpoint }"
-              @click="navigateToCreatePool"
-            >
-              {{ $t('createAPool.title') }}
-            </BalBtn>
-          </div>
-
-          <div
-            class="flex flex-col md:flex-row justify-between items-end lg:items-center w-full"
-          >
-            <BalVStack width="full">
-              <BalHStack justify="between" width="full">
-                <BalHStack spacing="md">
-                  <TokenSearchInput
-                    v-model="selectedTokens"
-                    @add="addSelectedToken"
-                    @remove="removeSelectedToken"
-                  />
-                  <PoolFeatureSelect
-                    v-model:selectedPoolType="poolTypeFilter"
-                    v-model:selectedAttributes="filterPoolAttributes"
-                  />
-                </BalHStack>
-
-                <BalBtn
-                  v-if="!upToSmallBreakpoint"
-                  color="blue"
-                  size="sm"
-                  outline
-                  :class="{ 'mt-4': upToSmallBreakpoint }"
-                  :block="upToSmallBreakpoint"
-                  @click="navigateToCreatePool"
-                >
-                  {{ $t('createAPool.title') }}
-                </BalBtn>
-              </BalHStack>
-              <BalHStack spacing="sm">
-                <TransitionGroup name="pop">
-                  <BalTag
-                    v-for="token in selectedTokens"
-                    :key="token"
-                    :closeable="true"
-                    class="mt-4"
-                    @closed="removeSelectedToken(token)"
-                  >
-                    <BalAsset :address="token" :size="20" class="flex-auto" />
-                    <span class="ml-2">{{ getToken(token)?.symbol }}</span>
-                  </BalTag>
-                </TransitionGroup>
-
-                <Transition name="pop">
-                  <BalTag
-                    v-if="poolTypeFilter"
-                    :closeable="true"
-                    class="mt-4"
-                    @closed="poolTypeFilter = undefined"
-                  >
-                    <span>{{ poolTypeFilter }}</span>
-                  </BalTag>
-                </Transition>
-
-                <TransitionGroup name="pop">
-                  <BalTag
-                    v-for="attribute in filterPoolAttributes"
-                    :key="attribute"
-                    :closeable="true"
-                    class="mt-4"
-                    @closed="removeAttributeFilter(attribute)"
-                  >
-                    <span>{{ attribute }}</span>
-                  </BalTag>
-                </TransitionGroup>
-              </BalHStack>
-            </BalVStack>
-          </div>
-        </div>
-        <PoolsTable
-          :data="pools"
-          :noPoolsLabel="$t('noPoolsFound')"
-          :isLoading="isLoading"
-          :selectedTokens="selectedTokens"
-          class="mb-8"
-          :sortColumn="initSortCol"
-          :hiddenColumns="['migrate', 'actions', 'lockEndDate']"
-          :isLoadingMore="isFetchingNextPage"
-          :isPaginated="isPaginated"
-          skeletonClass="pools-table-loading-height"
-          @on-column-sort="onColumnSort"
-          @load-more="loadMorePools"
-        />
-        <div ref="featuredProtocolsSentinel" />
-        <div
-          v-if="isElementSupported && isFeaturedProtocolsVisible"
-          class="p-4 xl:p-0 mt-12"
-        >
-          <FeaturedProtocols />
-        </div>
-      </BalStack>
+    <div class="px-3 pt-10 md:pt-8 mx-auto max-w-md">
+      <h1 class="mb-4 text-2xl font-bold">This UI is mostly deprecated</h1>
+      <p>
+        Please use the new UI at
+        <BalLink href="https://balancer.fi" external>balancer.fi</BalLink>
+        to:
+      </p>
+      <ul class="pl-5 list-disc">
+        <li>Explore pools</li>
+        <li>Add and remove liquidity</li>
+        <li>Swap tokens</li>
+        <li>View your portfolio</li>
+      </ul>
+      <p class="mt-4">You can continue to use this UI to:</p>
+      <ul class="pl-5 list-disc">
+        <li>Manage your veBAL</li>
+        <li>Claim old incentives</li>
+      </ul>
     </div>
   </div>
 </template>
-
-<style>
-.pools-table-loading-height {
-  height: 40rem;
-}
-</style>
diff --git a/src/plugins/router/nav-guards.ts b/src/plugins/router/nav-guards.ts
index 1419f6af59..289bd1e157 100644
--- a/src/plugins/router/nav-guards.ts
+++ b/src/plugins/router/nav-guards.ts
@@ -28,6 +28,7 @@ export function applyNavGuards(router: Router): Router {
   router = applyMetaData(router);
   router = applyVotingRedirects(router);
   router = applyPoolPageRedirects(router);
+  router = applyDeprecationRedirects(router);
 
   return router;
 }
@@ -205,3 +206,14 @@ function applyPoolPageRedirects(router: Router): Router {
   });
   return router;
 }
+
+function applyDeprecationRedirects(router: Router): Router {
+  router.beforeEach((to, from, next) => {
+    if (to.name === 'swap') {
+      window.location.href = 'https://balancer.fi/swap';
+    } else if (to.name === 'portfolio') {
+      window.location.href = 'https://balancer.fi/portfolio';
+    } else next();
+  });
+  return router;
+}