chore: Merge last hotfixes into develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balancer/frontend-v2",
-  "version": "1.114.31",
+  "version": "1.114.36",
   "engines": {
     "node": "=16",
     "npm": ">=8"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import useNumbers from '@/composables/useNumbers';
 import { POOLS } from '@/constants/pools';
 import { poolMetadata } from '@/lib/config/metadata';
 import { shortenLabel } from '@/lib/utils';
@@ -24,6 +25,7 @@ const props = defineProps<Props>();
  */
 const { t } = useI18n();
 const { explorerLinks: explorer } = useWeb3();
+const { fNum } = useNumbers();
 
 function formSwapFeesHint(owner: string): string {
   if (owner === POOLS.ZeroAddress) {
@@ -77,7 +79,9 @@ const data = computed(() => {
       : null,
     {
       title: t('swapFees'),
-      value: `${Number(swapFee) * 100}% (${formSwapFeesHint(owner || '')})`,
+      value: `${fNum(swapFee, { style: 'percent' })} (${formSwapFeesHint(
+        owner || ''
+      )})`,
     },
     {
       title: t('poolManager'),

src/lib/config/gnosis-chain/pools.ts

@@ -44,6 +44,7 @@ const pools: Pools = {
       '0x388cae2f7d3704c937313d990298ba67d70a3709000200000000000000000026', // 50AGVE-50GNO
       '0x4bcf6b48906fa0f68bea1fc255869a41241d4851000200000000000000000021', // 50WXDAI-50MPS
       '0x5519e2d8a0af0944ea639c6dbad69a174de3ecf800010000000000000000003b', // 25BAL-25GNO-25bb-WETH-wstETH-25wxDAI
+      '0xbc130c4989e10941142b34f054eb38d69fdce9df000200000000000000000049', // 20XOC-80USDC
     ],
   },
   Factories: {

src/lib/utils/errors.ts

@@ -251,6 +251,7 @@ function isUserRejected(error): boolean {
     /user disapproved requested methods/,
     /canceled/,
     /user rejected signing/,
+    /user cancelled/,
   ];
 
   return isErrorOfType(error, messages);

src/pages/_layouts/PoolLayout.vue

@@ -1,15 +1,31 @@
 <script setup lang="ts">
-import FocussedLayout from '@/components/layouts/FocussedLayout.vue';
 import DefaultLayout from '@/components/layouts/DefaultLayout.vue';
-import { providePoolStaking } from '@/providers/local/pool-staking.provider';
+import FocussedLayout from '@/components/layouts/FocussedLayout.vue';
+import { createProviderComponent } from '@/providers/createProviderComponent';
 import { providePool } from '@/providers/local/pool.provider';
+import { providePoolStaking } from '@/providers/local/pool-staking.provider';
 import { provideUserTokens } from '@/providers/local/user-tokens.provider';
 
 /**
  * STATE
  */
 const route = useRoute();
-const poolId = (route.params.id as string).toLowerCase();
+
+/**
+ * We need this explicit PoolProvider wrapper component to refresh the provided pool details when the pool route params change.
+ * Example:
+ * If the poolId param changes in the url, then <router-view v-slot="{ Component }" :key="$route.path"> will reload its contents
+ * because the route key ($route.path) changed.
+ * That means that PoolProvider wrapper component will be rerendered providing the data for the new pool.
+ */
+const PoolProvider = createProviderComponent(() => {
+  const route = useRoute();
+  const poolId = (route.params.id as string).toLowerCase();
+
+  providePool(poolId);
+  providePoolStaking(poolId);
+  provideUserTokens();
+});
 
 /**
  * COMPUTED
@@ -21,21 +37,16 @@ const isJoinOrExitPath = computed(
 const layoutComponent = computed(() =>
   isJoinOrExitPath.value ? FocussedLayout : DefaultLayout
 );
-
-/**
- * PROVIDERS
- */
-providePool(poolId);
-providePoolStaking(poolId);
-provideUserTokens();
 </script>
 
 <template>
   <component :is="layoutComponent">
     <router-view v-slot="{ Component }" :key="$route.path">
-      <transition appear name="appear">
-        <component :is="Component" />
-      </transition>
+      <PoolProvider>
+        <transition appear name="appear">
+          <component :is="Component" />
+        </transition>
+      </PoolProvider>
     </router-view>
   </component>
 </template>