feat: Store chosen sort column in local storage (#3646)

* feat: Store chosen sort column in local storage

* feat: Allow sort column to be defined in route params

* chore: Fix typecheck

src/constants/local-storage.keys.ts

@@ -8,6 +8,7 @@ export default {
     EthereumTxType: 'app.ethereumTxType',
     SupportSignatures: 'app.supportSignatures',
     TermsAccepted: 'app.termsAccepted',
+    PoolSorting: 'app.poolSorting',
   },
   Swap: {
     Gasless: 'swap.gasless',

src/pages/index.vue

@@ -9,8 +9,20 @@ 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';
 
-// COMPOSABLES
+/**
+ * STATE
+ */
+const route = useRoute();
+const urlSortParam = route.query?.sort as string | undefined;
+const initSortCol =
+  urlSortParam || lsGet(LS_KEYS.App.PoolSorting) || 'totalLiquidity';
+
+/**
+ * COMPOSABLES
+ */
 const router = useRouter();
 const { appNetworkConfig } = useNetwork();
 const isElementSupported = appNetworkConfig.supportsElementPools;
@@ -37,6 +49,7 @@ function navigateToCreatePool() {
 
 function onColumnSort(columnId: string) {
   poolsSortField.value = columnId;
+  lsSet(LS_KEYS.App.PoolSorting, columnId);
 }
 </script>
 
@@ -91,6 +104,7 @@ function onColumnSort(columnId: string) {
           :isLoading="isLoading"
           :selectedTokens="selectedTokens"
           class="mb-8"
+          :sortColumn="initSortCol"
           :hiddenColumns="['migrate', 'actions', 'lockEndDate']"
           :isLoadingMore="poolsIsFetchingNextPage"
           :isPaginated="isPaginated"