Release/1.123.0

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@balancer/frontend-v2",
- "version": "1.122.19",
+ "version": "1.123.0",
  "engines": {
  "node": "=16",
  "npm": ">=8"
@@ -154,7 +154,7 @@
  "vite-plugin-sentry": "^1.1.6",
  "vitest": "^0.31.4",
  "vitest-mock-extended": "^1.1.0",
- "vue": "3.2.45",
+ "vue": "^3.3.4",
  "vue-echarts": "^6.0.0",
  "vue-i18n": "^9.2.2",
  "vue-loader": "^17.0.1",

src/assets/data/contracts/arbitrum.json

@@ -13,6 +13,7 @@
  "ChildChainGaugeRewardHelper": "0xA0DAbEBAAd1b243BBb243f933013d560819eB66f",
  "ChildChainGaugeWorkingBalanceHelper": "0xEa924b45a3fcDAAdf4E5cFB1665823B8F8F2039B",
  "ChildChainGaugeTokenAdder": "0xbfD9769b061E57e478690299011A028194D66e3C",
+ "ChildChainGaugeCheckpointer": "0x96484f2abf5e58b15176dbf1a799627b53f13b6d",
  "ChildChainLiquidityGaugeFactory": "0xb08E16cFc07C684dAA2f93C70323BAdb2A6CBFd2",
  "ChildChainStreamer": "0xD7FAD3bd59D6477cbe1BE7f646F7f1BA25b230f8",
  "CircuitBreakerLib": "0xDF9B5B00Ef9bca66e9902Bd813dB14e4343Be025",

src/assets/data/contracts/gnosis.json

@@ -13,6 +13,7 @@
  "ChildChainGaugeRewardHelper": "0xf7D5DcE55E6D47852F054697BAB6A1B48A00ddbd",
  "ChildChainGaugeWorkingBalanceHelper": "0x682f0dDBFd41D1272982f64a499Fb62d80e27589",
  "ChildChainGaugeTokenAdder": "0x1802953277FD955f9a254B80Aa0582f193cF1d77",
+ "ChildChainGaugeCheckpointer": "0x1702067424096f07a60e62ccee3de9420068492d",
  "ChildChainLiquidityGaugeFactory": "0x809B79b53F18E9bc08A961ED4678B901aC93213a",
  "ChildChainStreamer": "0x230a59F4d9ADc147480f03B0D3fFfeCd56c3289a",
  "CircuitBreakerLib": "0x54f8F9d28e26Fa5864cfA80f50A5Df95fD85f46a",

src/assets/data/contracts/polygon.json

@@ -14,6 +14,7 @@
  "ChildChainGaugeWorkingBalanceHelper": "0x08fd003D8F1892D4EC684E6C3EE0128081be461b",
  "ChildChainGaugeTokenAdder": "0x1554ee754707D5C93b7934AF404747Aba521Aaf2",
  "ChildChainLiquidityGaugeFactory": "0x3b8cA519122CdD8efb272b0D3085453404B25bD0",
+ "ChildChainGaugeCheckpointer": "0x268e2ee1413d768b6e2dc3f5a4ddc9ae03d9af42",
  "ChildChainStreamer": "0x6f5a2eE11E7a772AeB5114A20d0D7c0ff61EB8A0",
  "CircuitBreakerLib": "0xEDFd0A7005A7c72c44Ff13bEa370c86A9D11beE1",
  "ComposableStablePoolFactory": "0x6Ab5549bBd766A43aFb687776ad8466F8b42f777",

src/components/_global/BalRangeInput/BalRangeInput.vue

@@ -8,7 +8,7 @@ import VueSlider, { DefineComponent as TVueSlider } from 'vue-slider-component';
 import tailwindConfig from 'tailwind.config.js';
 import useDarkMode from '@/composables/useDarkMode';
 
-export interface BalRangeInputProps extends TVueSlider {
+export interface BalRangeInputProps extends /* @vue-ignore */ TVueSlider {
  modelValue: number;
  leftLabel?: string;
  rightLabel?: string;

src/components/_global/BalTable/BalTable.vue

@@ -218,11 +218,12 @@ watch([() => props.data, () => props.isLoading], ([newData]) => {
 <template>
  <div
  :class="[
- 'max-w-full whitespace-nowrap overflow-hidden',
+ 'max-w-full whitespace-nowrap',
+ 'max-lg:overflow-hidden',
  { 'rounded-lg': !square },
  ]"
  >
- <div ref="headerRef" class="overflow-hidden">
+ <div ref="headerRef" class="max-lg:overflow-hidden">
  <table class="w-full whitespace-normal table-fixed">
  <!-- header width handled by colgroup -->
  <colgroup>
@@ -253,6 +254,7 @@ watch([() => props.data, () => props.isLoading], ([newData]) => {
  currentSortColumn === column.id && currentSortDirection
  ? 'text-blue-600 hover:text-blue-500 focus:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:focus:text-blue-600 transition-colors'
  : '',
+ !square ? 'rounded-t-lg' : '',
  ]"
  @click="handleSort(column.id)"
  >
@@ -290,7 +292,7 @@ watch([() => props.data, () => props.isLoading], ([newData]) => {
  </thead>
  </table>
  </div>
- <div ref="bodyRef" class="overflow-auto">
+ <div ref="bodyRef" class="max-lg:overflow-auto">
  <BalLoadingBlock
  v-if="isLoading"
  :class="[skeletonClass, 'min-w-full']"

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

@@ -181,6 +181,8 @@ function handlePreviewClose() {
  </BalStack>
  <StakingCardSyncAlert
  v-if="networkId !== Network.MAINNET"
+ :poolAddress="pool.address"
+ :poolId="pool.id"
  :fiatValueOfStakedShares="fiatValueOfStakedShares"
  :fiatValueOfUnstakedShares="fiatValueOfUnstakedShares"
  @should-staking-card-be-opened="isOpenedByDefault = true"

src/components/contextual/pages/pools/StakedPoolsTable.vue

@@ -12,13 +12,31 @@ import ProceedToSyncModal from '@/components/contextual/pages/vebal/cross-chain-
 import { providePoolStaking } from '@/providers/local/pool-staking.provider';
 
 import PortfolioSyncTip from '../vebal/cross-chain-boost/PortfolioSyncTip.vue';
+import { useCrossChainSync } from '@/providers/cross-chain-sync.provider';
 
+import CheckpointGaugeModal from '../vebal/cross-chain-boost/CheckpointGaugeModal.vue';
+import CheckpointAllGaugesModal from '../vebal/cross-chain-boost/CheckpointAllGaugesModal.vue';
+import { PoolAction } from './types';
 /**
  * STATE
  */
 const showUnstakeModal = ref(false);
 const poolToUnstake = ref<Pool | undefined>();
+
+const showRestakeModal = ref(false);
+const poolToRestake = ref<Pool | undefined>();
+
 const showProceedModal = ref(false);
+const defaultPoolActions = [
+ PoolAction.Unstake,
+ PoolAction.Add,
+ PoolAction.Vote,
+];
+
+const showPokeAllGaugesModal = ref(false);
+
+const poolToCheckpoint = ref<Pool | undefined>();
+const showCheckpointModal = ref(false);
 
 /**
  * PROVIDERS
@@ -28,8 +46,15 @@ providePoolStaking();
 /**
  * COMPOSABLES
  */
-const { stakedPools, poolBoostsMap, stakedShares, isLoading } =
- useUserStaking();
+const {
+ stakedPools,
+ poolBoostsMap,
+ stakedShares,
+ isLoading,
+ hasNonPrefGaugesPoolsAddresses,
+ userGaugeShares,
+} = useUserStaking();
+const { shouldPokeGauge } = useCrossChainSync();
 
 const { refetchAllUserPools } = useUserPools();
 const { isWalletReady, isWalletConnecting } = useWeb3();
@@ -62,14 +87,66 @@ function handleUnstake(pool: Pool) {
  poolToUnstake.value = pool;
 }
 
+function handleRestake(pool: Pool) {
+ showRestakeModal.value = true;
+ poolToRestake.value = pool;
+}
+
 function handleModalClose() {
  refetchAllUserPools();
  showUnstakeModal.value = false;
+ showRestakeModal.value = false;
+}
+
+function handleCheckpoint(pool: Pool) {
+ showCheckpointModal.value = true;
+ poolToCheckpoint.value = pool;
 }
 
 async function handleUnstakeSuccess() {
  await refetchAllUserPools();
 }
+
+// map of pool ids and pref gauges that should be poked
+const shouldPokePoolsMap = ref<Record<string, string>>({});
+
+function removePoolFromPokeMap(poolAddress: string) {
+ Reflect.deleteProperty(shouldPokePoolsMap.value, poolAddress);
+}
+
+function resetShouldPokePoolsMap() {
+ shouldPokePoolsMap.value = {};
+}
+
+function onSuccessCheckpoint(poolAddress: string) {
+ showCheckpointModal.value = false;
+ poolToCheckpoint.value = undefined;
+ removePoolFromPokeMap(poolAddress);
+}
+
+watch(
+ () => userGaugeShares.value,
+ async val => {
+ if (!val) return;
+ for (const gauge of val) {
+ try {
+ const id = gauge?.gauge.id;
+
+ if (!id) {
+ throw new Error('No gauge id');
+ }
+
+ const shouldPoke = await shouldPokeGauge(id);
+ if (shouldPoke) {
+ shouldPokePoolsMap.value[gauge.gauge.poolAddress] = id;
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ }
+ },
+ { immediate: true, deep: true }
+);
 </script>
 
 <template>
@@ -78,7 +155,11 @@ async function handleUnstakeSuccess() {
  <h5 class="px-4 xl:px-0">
  {{ $t('staking.stakedPools') }}
  </h5>
- <PortfolioSyncTip @show-proceed-modal="showProceedModal = true" />
+ <PortfolioSyncTip
+ :shouldPokePoolsMap="shouldPokePoolsMap"
+ @show-proceed-modal="showProceedModal = true"
+ @show-poke-all-gauge-modal="showPokeAllGaugesModal = true"
+ />
  <PoolsTable
  :key="poolsToRenderKey"
  :data="stakedPools"
@@ -91,10 +172,19 @@ async function handleUnstakeSuccess() {
  :isLoading="isWalletReady && isLoading"
  showPoolShares
  showActions
+ showStakeActions
  :showBoost="isPoolBoostsEnabled"
+ :defaultPoolActions="defaultPoolActions"
+ :shouldPokePoolsMap="shouldPokePoolsMap"
+ :hasNonPrefGaugesPoolsAddresses="hasNonPrefGaugesPoolsAddresses"
  @trigger-unstake="handleUnstake"
+ @trigger-restake="handleRestake"
+ @trigger-vote="showProceedModal = true"
+ @trigger-checkpoint="handleCheckpoint"
  />
  </BalStack>
+
+ <!-- Unstake modal -->
  <StakePreviewModal
  v-if="poolToUnstake"
  :pool="poolToUnstake"
@@ -103,9 +193,34 @@ async function handleUnstakeSuccess() {
  @close="handleModalClose"
  @success="handleUnstakeSuccess"
  />
+
+ <!-- Restake modal -->
+ <StakePreviewModal
+ v-if="poolToRestake"
+ :pool="poolToRestake"
+ :isVisible="showRestakeModal"
+ action="restake"
+ @close="handleModalClose"
+ @success="handleUnstakeSuccess"
+ />
+
  <ProceedToSyncModal
  :isVisible="showProceedModal"
  @close="showProceedModal = false"
  />
+
+ <CheckpointAllGaugesModal
+ :shouldPokePoolsMap="shouldPokePoolsMap"
+ :isVisible="showPokeAllGaugesModal"
+ @close="showPokeAllGaugesModal = false"
+ @success="resetShouldPokePoolsMap"
+ />
+
+ <CheckpointGaugeModal
+ :poolAddress="poolToCheckpoint?.address"
+ :isVisible="showCheckpointModal"
+ @close="showCheckpointModal = false"
+ @success="onSuccessCheckpoint"
+ />
  </div>
 </template>