feat: sync related ui alerts on pool page

src/assets/data/contracts/arbitrum.json

@@ -11,6 +11,7 @@
   "ChildChainGauge": "0xa523f47A933D5020b23629dDf689695AA94612Dc",
   "ChildChainGaugeFactory": "0x6817149cb753BF529565B4D023d7507eD2ff4Bc0",
   "ChildChainGaugeRewardHelper": "0xA0DAbEBAAd1b243BBb243f933013d560819eB66f",
+  "ChildChainGaugeWorkingBalanceHelper": "0xEa924b45a3fcDAAdf4E5cFB1665823B8F8F2039B",
   "ChildChainGaugeTokenAdder": "0xbfD9769b061E57e478690299011A028194D66e3C",
   "ChildChainLiquidityGaugeFactory": "0xb08E16cFc07C684dAA2f93C70323BAdb2A6CBFd2",
   "ChildChainStreamer": "0xD7FAD3bd59D6477cbe1BE7f646F7f1BA25b230f8",

src/assets/data/contracts/gnosis.json

@@ -11,6 +11,7 @@
   "ChildChainGauge": "0x96484f2aBF5e58b15176dbF1A799627B53F13B6d",
   "ChildChainGaugeFactory": "0x83E443EF4f9963C77bd860f94500075556668cb8",
   "ChildChainGaugeRewardHelper": "0xf7D5DcE55E6D47852F054697BAB6A1B48A00ddbd",
+  "ChildChainGaugeWorkingBalanceHelper": "0x682f0dDBFd41D1272982f64a499Fb62d80e27589",
   "ChildChainGaugeTokenAdder": "0x1802953277FD955f9a254B80Aa0582f193cF1d77",
   "ChildChainLiquidityGaugeFactory": "0x809B79b53F18E9bc08A961ED4678B901aC93213a",
   "ChildChainStreamer": "0x230a59F4d9ADc147480f03B0D3fFfeCd56c3289a",

src/assets/data/contracts/optimism.json

@@ -11,6 +11,7 @@
   "ChildChainGauge": "0x81cFAE226343B24BA12EC6521Db2C79E7aeeb310",
   "ChildChainGaugeFactory": "0xa523f47A933D5020b23629dDf689695AA94612Dc",
   "ChildChainGaugeRewardHelper": "0x8aB784368A1883DA90D8513b48801e2Db1cb2D5D",
+  "ChildChainGaugeWorkingBalanceHelper": "0x9129E834e15eA19b6069e8f08a8EcFc13686B8dC",
   "ChildChainGaugeTokenAdder": "0x6f5a2eE11E7a772AeB5114A20d0D7c0ff61EB8A0",
   "ChildChainLiquidityGaugeFactory": "0x2E96068b3D5B5BAE3D7515da4A1D2E52d08A2647",
   "ChildChainStreamer": "0x239e55F427D44C3cc793f49bFB507ebe76638a2b",

src/assets/data/contracts/polygon.json

@@ -11,6 +11,7 @@
   "ChildChainGauge": "0xc9b36096f5201ea332Db35d6D195774ea0D5988f",
   "ChildChainGaugeFactory": "0x22625eEDd92c81a219A83e1dc48f88d54786B017",
   "ChildChainGaugeRewardHelper": "0xaEb406b0E430BF5Ea2Dc0B9Fe62E4E53f74B3a33",
+  "ChildChainGaugeWorkingBalanceHelper": "0x08fd003D8F1892D4EC684E6C3EE0128081be461b",
   "ChildChainGaugeTokenAdder": "0x1554ee754707D5C93b7934AF404747Aba521Aaf2",
   "ChildChainLiquidityGaugeFactory": "0x3b8cA519122CdD8efb272b0D3085453404B25bD0",
   "ChildChainStreamer": "0x6f5a2eE11E7a772AeB5114A20d0D7c0ff61EB8A0",

src/components/_global/BalAccordion/BalAccordion.vue

@@ -17,10 +17,12 @@ type Props = {
   dependencies?: unknown;
   showSectionBorder?: boolean;
   reCalcKey?: number;
+  isOpenedByDefault?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   showSectionBorder: true,
+  isOpenedByDefault: false,
   reCalcKey: 0,
 });
 
@@ -154,13 +156,13 @@ watch(
           />
         </button>
         <div
-          v-if="activeSection === section.id"
+          v-if="activeSection === section.id || isOpenedByDefault"
           ref="accordionHeightSetterElement"
           class="relative"
         >
           <!-- content -->
           <div
-            v-if="isContentVisible"
+            v-if="isContentVisible || isOpenedByDefault"
             ref="activeSectionElement"
             :class="{
               'border-b dark:border-gray-900 active-section rounded-b':

src/components/_global/BalAlert/BalAlert.vue

@@ -9,14 +9,18 @@
       </div>
       <div :class="['bal-alert-content', contentClasses]">
         <div>
-          <h5 :class="['bal-alert-title', titleClasses, textSizeClass]">
+          <h5 :class="['bal-alert-title mb-1', titleClasses, textSizeClass]">
             <slot name="title">
               {{ title }}
             </slot>
           </h5>
           <p
             v-if="$slots.default || description"
-            :class="['bal-alert-description', descriptionColor, textSizeClass]"
+            :class="[
+              'bal-alert-description font-normal',
+              descriptionColor,
+              textSizeClass,
+            ]"
           >
             <slot>
               {{ description }}

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

@@ -14,6 +14,9 @@ import { usePoolStaking } from '@/providers/local/pool-staking.provider';
 import { deprecatedDetails } from '@/composables/usePoolHelpers';
 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';
 
 type Props = {
   pool: Pool;
@@ -30,7 +33,7 @@ const emit = defineEmits<{
 const isStakePreviewVisible = ref(false);
 const stakeAction = ref<StakeAction>('stake');
 const poolId = computed(() => props.pool.id);
-
+const isOpenedByDefault = ref(false);
 /**
  * COMPOSABLES
  */
@@ -44,6 +47,7 @@ const {
   hasNonPrefGaugeBalance,
 } = usePoolStaking();
 const { isAffected } = usePoolWarning(poolId);
+const { networkId } = useNetwork();
 
 /**
  * COMPUTED
@@ -105,6 +109,7 @@ function handlePreviewClose() {
             },
           ]"
           :reCalcKey="hasNonPrefGaugeBalance ? 0 : 1"
+          :isOpenedByDefault="isOpenedByDefault"
         >
           <template #staking-handle>
             <button
@@ -172,6 +177,12 @@ function handlePreviewClose() {
                     <BalTooltip :text="$t('staking.unstakedLpTokensTooltip')" />
                   </BalStack>
                 </BalStack>
+                <StakingCardSyncAlert
+                  v-if="networkId !== Network.MAINNET"
+                  :fiatValueOfStakedShares="fiatValueOfStakedShares"
+                  :fiatValueOfUnstakedShares="fiatValueOfUnstakedShares"
+                  @should-staking-card-be-opened="isOpenedByDefault = true"
+                />
                 <BalStack
                   v-if="hasNonPrefGaugeBalance && !isAffected"
                   horizontal
@@ -217,7 +228,7 @@ function handlePreviewClose() {
                   </BalBtn>
                 </BalStack>
                 <BalAlert
-                  v-if="hasNonPrefGaugeBalance"
+                  v-if="hasNonPrefGaugeBalance && networkId === Network.MAINNET"
                   :title="$t('staking.restakeGauge')"
                   class="mt-2"
                 >

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { usePoolStaking } from '@/providers/local/pool-staking.provider';
+import { useCrossChainSync } from '@/providers/cross-chain-sync.provider';
+import useTransactions from '@/composables/useTransactions';
+
+interface Props {
+  isVisible?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isVisible: false,
+});
+
+const emit = defineEmits(['close', 'success']);
+
+const { poolGauges } = usePoolStaking();
+const { triggerGaugeUpdate } = useCrossChainSync();
+const { addTransaction } = useTransactions();
+
+const showCloseBtn = ref(false);
+
+async function triggerUpdate() {
+  try {
+    const id = poolGauges.value?.pool.preferentialGauge.id;
+    if (!id) {
+      throw new Error('No preferential gauge id');
+    }
+
+    const tx = await triggerGaugeUpdate(id);
+
+    addTransaction({
+      id: tx.hash,
+      type: 'tx',
+      action: 'userGaugeCheckpoint',
+      summary: '',
+    });
+    emit('success');
+
+    return tx;
+  } catch (e) {
+    console.error(e);
+    return Promise.reject(e);
+  }
+}
+
+const actions = [
+  {
+    label: 'Confirm pool gauge update',
+    loadingLabel: 'Confirming pool gauge update',
+    confirmingLabel: 'Confirming pool gauge update',
+    action: async () => {
+      return triggerUpdate();
+    },
+    stepTooltip: '',
+  },
+];
+</script>
+
+<template>
+  <BalModal
+    :show="isVisible"
+    title="Trigger pool gauge veBAL update"
+    @close="emit('close')"
+  >
+    <div class="flex flex-col justify-between">
+      <span class="mb-12">
+        Even though you've synced new veBAL to this Layer 2, it isn’t
+        contributing to your staking boost yet on this pool. This is because,
+        pool gauges don't detect veBAL changes until you interact with them.
+        This transaction is the most gas efficient way to update the gauge but
+        you can also trigger the update by claiming any BAL incentives.
+      </span>
+
+      <BalActionSteps :actions="actions" @success="showCloseBtn = true" />
+
+      <BalBtn
+        v-if="showCloseBtn"
+        color="gray"
+        outline
+        block
+        @click="$emit('close')"
+      >
+        {{ $t('close') }}
+      </BalBtn>
+    </div>
+  </BalModal>
+</template>