From 37e0d9d7b7c1d810d9f78673df43ef6ed7d63bf2 Mon Sep 17 00:00:00 2001
From: Anastasios <anastas3993@gmail.com>
Date: Fri, 30 Jun 2023 22:23:24 +0400
Subject: [PATCH] feat: sync related ui alerts on pool page (#3542)

* feat: add gauge balancer helper contract

* feat: add alerts in staking card

* wip

* feat: add check balances

* feat: add alerts on pool page

* wip

* feat: add user checkpoint actions

* remove logs

* feat: add networks tooltips

* feat: change sync process warning

* feat: change unstake btn style

* UI updates

* feat: change unsynced arr

* fix: unstake btn style

* feat: fix trigger update fn

* feat: open staking incentives card by default

* feat: add sync tips

* feat: opening staking incentives card

* feat: change texts

* feat: add info message

* fixes after review

---------

Co-authored-by: pkattera <kattera@gmail.com>
---
 src/assets/data/contracts/arbitrum.json       |   1 +
 src/assets/data/contracts/gnosis.json         |   1 +
 src/assets/data/contracts/optimism.json       |   1 +
 src/assets/data/contracts/polygon.json        |   1 +
 .../_global/BalAccordion/BalAccordion.vue     |   6 +-
 src/components/_global/BalAlert/BalAlert.vue  |   8 +-
 .../pool/staking/StakingIncentivesCard.vue    |  15 +-
 .../CheckpointGaugeModal.vue                  |  87 ++++++++++++
 .../CrossChainBoostCards.vue                  | 125 ++++++++++++-----
 .../cross-chain-boost/CrossChainSyncModal.vue |   1 +
 .../cross-chain-boost/IconLoaderWrapper.vue   |   2 +-
 .../cross-chain-boost/PortfolioSyncTip.vue    |  47 ++++---
 .../StakingCardSyncAlert.vue                  | 129 ++++++++++++++++++
 .../cross-chain-boost/SyncFinalState.vue      |   8 +-
 .../cross-chain-boost/SyncNetworkAction.vue   |  19 ++-
 .../PoolsTable/PoolsTableActionsCell.vue      |   3 +-
 src/composables/useTransactions.ts            |   3 +-
 src/lib/abi/GaugeWorkingBalanceHelper.json    |  73 ++++++++++
 src/lib/config/arbitrum/contracts.ts          |   1 +
 src/lib/config/gnosis-chain/contracts.ts      |   1 +
 src/lib/config/optimism/contracts.ts          |   1 +
 src/lib/config/polygon/contracts.ts           |   1 +
 src/lib/config/types.ts                       |   1 +
 src/locales/default.json                      |  19 +--
 src/pages/vebal.vue                           |   2 +-
 src/providers/cross-chain-sync.provider.ts    |  73 ++++++++--
 src/providers/local/pool-staking.provider.ts  |   1 +
 .../contracts/gauge-working-balance-helper.ts |  37 +++++
 .../contracts/contracts/liquidity-gauge.ts    |  22 ++-
 29 files changed, 598 insertions(+), 91 deletions(-)
 create mode 100644 src/components/contextual/pages/vebal/cross-chain-boost/CheckpointGaugeModal.vue
 create mode 100644 src/components/contextual/pages/vebal/cross-chain-boost/StakingCardSyncAlert.vue
 create mode 100644 src/lib/abi/GaugeWorkingBalanceHelper.json
 create mode 100644 src/services/balancer/contracts/contracts/gauge-working-balance-helper.ts

diff --git a/src/assets/data/contracts/arbitrum.json b/src/assets/data/contracts/arbitrum.json
index 8223eb0de2..46f32e263e 100644
--- a/src/assets/data/contracts/arbitrum.json
+++ b/src/assets/data/contracts/arbitrum.json
@@ -11,6 +11,7 @@
   "ChildChainGauge": "0xa523f47A933D5020b23629dDf689695AA94612Dc",
   "ChildChainGaugeFactory": "0x6817149cb753BF529565B4D023d7507eD2ff4Bc0",
   "ChildChainGaugeRewardHelper": "0xA0DAbEBAAd1b243BBb243f933013d560819eB66f",
+  "ChildChainGaugeWorkingBalanceHelper": "0xEa924b45a3fcDAAdf4E5cFB1665823B8F8F2039B",
   "ChildChainGaugeTokenAdder": "0xbfD9769b061E57e478690299011A028194D66e3C",
   "ChildChainLiquidityGaugeFactory": "0xb08E16cFc07C684dAA2f93C70323BAdb2A6CBFd2",
   "ChildChainStreamer": "0xD7FAD3bd59D6477cbe1BE7f646F7f1BA25b230f8",
diff --git a/src/assets/data/contracts/gnosis.json b/src/assets/data/contracts/gnosis.json
index 2be087df51..5f3b716e0f 100644
--- a/src/assets/data/contracts/gnosis.json
+++ b/src/assets/data/contracts/gnosis.json
@@ -11,6 +11,7 @@
   "ChildChainGauge": "0x96484f2aBF5e58b15176dbF1A799627B53F13B6d",
   "ChildChainGaugeFactory": "0x83E443EF4f9963C77bd860f94500075556668cb8",
   "ChildChainGaugeRewardHelper": "0xf7D5DcE55E6D47852F054697BAB6A1B48A00ddbd",
+  "ChildChainGaugeWorkingBalanceHelper": "0x682f0dDBFd41D1272982f64a499Fb62d80e27589",
   "ChildChainGaugeTokenAdder": "0x1802953277FD955f9a254B80Aa0582f193cF1d77",
   "ChildChainLiquidityGaugeFactory": "0x809B79b53F18E9bc08A961ED4678B901aC93213a",
   "ChildChainStreamer": "0x230a59F4d9ADc147480f03B0D3fFfeCd56c3289a",
diff --git a/src/assets/data/contracts/optimism.json b/src/assets/data/contracts/optimism.json
index 42e9646a6e..c02802f211 100644
--- a/src/assets/data/contracts/optimism.json
+++ b/src/assets/data/contracts/optimism.json
@@ -11,6 +11,7 @@
   "ChildChainGauge": "0x81cFAE226343B24BA12EC6521Db2C79E7aeeb310",
   "ChildChainGaugeFactory": "0xa523f47A933D5020b23629dDf689695AA94612Dc",
   "ChildChainGaugeRewardHelper": "0x8aB784368A1883DA90D8513b48801e2Db1cb2D5D",
+  "ChildChainGaugeWorkingBalanceHelper": "0x9129E834e15eA19b6069e8f08a8EcFc13686B8dC",
   "ChildChainGaugeTokenAdder": "0x6f5a2eE11E7a772AeB5114A20d0D7c0ff61EB8A0",
   "ChildChainLiquidityGaugeFactory": "0x2E96068b3D5B5BAE3D7515da4A1D2E52d08A2647",
   "ChildChainStreamer": "0x239e55F427D44C3cc793f49bFB507ebe76638a2b",
diff --git a/src/assets/data/contracts/polygon.json b/src/assets/data/contracts/polygon.json
index a7d540eaed..ca6c8199d1 100644
--- a/src/assets/data/contracts/polygon.json
+++ b/src/assets/data/contracts/polygon.json
@@ -11,6 +11,7 @@
   "ChildChainGauge": "0xc9b36096f5201ea332Db35d6D195774ea0D5988f",
   "ChildChainGaugeFactory": "0x22625eEDd92c81a219A83e1dc48f88d54786B017",
   "ChildChainGaugeRewardHelper": "0xaEb406b0E430BF5Ea2Dc0B9Fe62E4E53f74B3a33",
+  "ChildChainGaugeWorkingBalanceHelper": "0x08fd003D8F1892D4EC684E6C3EE0128081be461b",
   "ChildChainGaugeTokenAdder": "0x1554ee754707D5C93b7934AF404747Aba521Aaf2",
   "ChildChainLiquidityGaugeFactory": "0x3b8cA519122CdD8efb272b0D3085453404B25bD0",
   "ChildChainStreamer": "0x6f5a2eE11E7a772AeB5114A20d0D7c0ff61EB8A0",
diff --git a/src/components/_global/BalAccordion/BalAccordion.vue b/src/components/_global/BalAccordion/BalAccordion.vue
index 08ccc959c1..c1185796c6 100644
--- a/src/components/_global/BalAccordion/BalAccordion.vue
+++ b/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':
diff --git a/src/components/_global/BalAlert/BalAlert.vue b/src/components/_global/BalAlert/BalAlert.vue
index 37479f61bb..8dc5b3129d 100644
--- a/src/components/_global/BalAlert/BalAlert.vue
+++ 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 }}
diff --git a/src/components/contextual/pages/pool/staking/StakingIncentivesCard.vue b/src/components/contextual/pages/pool/staking/StakingIncentivesCard.vue
index 64ce2ed1e9..a1945d397c 100644
--- a/src/components/contextual/pages/pool/staking/StakingIncentivesCard.vue
+++ b/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"
                 >
diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/CheckpointGaugeModal.vue b/src/components/contextual/pages/vebal/cross-chain-boost/CheckpointGaugeModal.vue
new file mode 100644
index 0000000000..9966da26bb
--- /dev/null
+++ b/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>
diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainBoostCards.vue b/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainBoostCards.vue
index 3a74915680..488eea80e3 100644
--- a/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainBoostCards.vue
+++ b/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainBoostCards.vue
@@ -12,6 +12,7 @@ import {
   useCrossChainSync,
   NetworkSyncState,
 } from '@/providers/cross-chain-sync.provider';
+import configs, { Network } from '@/lib/config';
 
 /**
  * COMPOSABLES
@@ -29,6 +30,7 @@ const {
   warningMessage,
   infoMessage,
   hasError,
+  showingUnsyncedNetworks,
 } = useCrossChainSync();
 const { fNum } = useNumbers();
 const { veBalBalance } = useVeBal();
@@ -49,6 +51,20 @@ const isVebalBalanceZero = computed(() => {
  * METHODS
  */
 
+function getLoadingTooltipText(networkId: Network) {
+  const time = networkId === Network.POLYGON ? 30 : 5;
+
+  return `Syncing on ${configs[networkId].chainName} usually takes around ${time} mins. 
+  Wait until it completes before restaking or triggering a gauge update on your
+  ${configs[networkId].chainName} pools to get your maximum veBAL boost.`;
+}
+
+function checkIfNetworkSyncing(network: Network) {
+  return (
+    networksSyncState.value?.[network] === NetworkSyncState.Syncing ||
+    tempSyncingNetworks.value[account.value]?.networks.includes(network)
+  );
+}
 function onCloseModal() {
   isSyncModalOpen.value = false;
 }
@@ -56,14 +72,14 @@ function onCloseModal() {
 
 <template>
   <div class="py-5 px-4">
-    <h3 class="mb-3">
+    <h4 class="mb-3">
       {{ $t('crossChainBoost.title') }}
       <BalTooltip :text="$t('crossChainBoost.infoDescription')">
         <template #activator>
           <BalIcon name="info" size="sm" class="text-gray-400" />
         </template>
       </BalTooltip>
-    </h3>
+    </h4>
 
     <BalAlert v-if="hasError" title="Error" type="error" class="mb-4">
       <div>
@@ -72,27 +88,32 @@ function onCloseModal() {
       </div>
     </BalAlert>
 
-    <BalAlert
-      v-if="warningMessage.title && !(isLoading || dynamicDataLoading)"
-      :title="warningMessage.title"
-      type="warning"
-      class="mb-4"
-    >
-      {{ warningMessage.text }}
-    </BalAlert>
-    <BalAlert
-      v-else-if="infoMessage.title"
-      :title="infoMessage.title"
-      type="tip"
-      class="mb-4"
-    >
-      {{ infoMessage.text }}
-    </BalAlert>
+    <template v-if="!(isLoading || dynamicDataLoading)">
+      <BalAlert
+        v-if="warningMessage"
+        :title="warningMessage.title"
+        type="warning"
+        class="mb-4"
+      >
+        {{ warningMessage.text }}
+      </BalAlert>
+      <BalAlert
+        v-else-if="infoMessage"
+        :title="infoMessage.title"
+        type="tip"
+        class="mb-4"
+      >
+        {{ infoMessage.text }}
+      </BalAlert>
+    </template>
     <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
       <template v-if="isLoading || dynamicDataLoading">
         <BalLoadingBlock v-for="n in 2" :key="n" class="h-48" />
       </template>
-      <div v-else-if="!isWalletReady || isVebalBalanceZero">
+      <div
+        v-else-if="!isWalletReady || isVebalBalanceZero"
+        class="text-sm text-secondary"
+      >
         {{ $t('crossChainBoost.emptyState') }}
       </div>
       <template v-else>
@@ -100,31 +121,63 @@ function onCloseModal() {
           <div class="flex justify-between items-center mb-3 font-bold label">
             {{ $t('crossChainBoost.unsyncedNetworks') }}
           </div>
-          <div class="flex mb-5">
+          <div class="flex mb-3">
             <span
-              v-if="networksBySyncState.unsynced.length === 0"
-              class="text-sm text-gray-600"
+              v-if="showingUnsyncedNetworks.length === 0"
+              class="text-sm text-secondary"
             >
               {{ hasError ? '—' : $t('crossChainBoost.syncedAllDescription') }}
             </span>
             <div v-else class="flex">
               <div
-                v-for="network in networksBySyncState.unsynced"
+                v-for="network in showingUnsyncedNetworks"
                 :key="network"
                 class="mr-2"
               >
-                <IconLoaderWrapper
-                  :isLoading="
-                    networksSyncState?.[network] === NetworkSyncState.Syncing ||
-                    tempSyncingNetworks[account]?.networks.includes(network)
-                  "
-                >
-                  <img
-                    :src="buildNetworkIconURL(network)"
-                    alt=""
-                    class="p-0.5 rounded-full w-[32px]"
-                  />
-                </IconLoaderWrapper>
+                <BalTooltip width="44" textAlign="center">
+                  <template #activator>
+                    <IconLoaderWrapper
+                      :isLoading="checkIfNetworkSyncing(network)"
+                    >
+                      <img
+                        :src="buildNetworkIconURL(network)"
+                        alt=""
+                        class="p-0.5 rounded-full w-[32px]"
+                      />
+                    </IconLoaderWrapper>
+                  </template>
+
+                  <div v-if="checkIfNetworkSyncing(network)">
+                    {{ getLoadingTooltipText(network) }}
+                  </div>
+                  <div v-else>
+                    <div class="flex mb-2">
+                      <div class="flex justify-center p-1 mr-1 align-center">
+                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
+                      </div>
+                      <div>
+                        <div class="text-sm text-secondary">Ethereum veBAL</div>
+                        <div class="text-lg font-bold">
+                          {{ Number(veBalBalance).toFixed(4) }}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="flex">
+                      <div class="flex justify-center p-1 mr-1 align-center">
+                        <div class="w-2 h-2 rounded-full bg-rose-500"></div>
+                      </div>
+                      <div>
+                        <div class="text-sm text-secondary">
+                          {{ configs[network].chainName }} veBAL
+                        </div>
+                        <div class="text-lg font-bold">
+                          {{ l2VeBalBalances?.[network] }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </BalTooltip>
               </div>
             </div>
           </div>
@@ -146,7 +199,7 @@ function onCloseModal() {
           </div>
           <span
             v-if="networksBySyncState.synced.length === 0"
-            class="text-sm text-gray-600"
+            class="text-sm text-secondary"
           >
             {{ hasError ? '—' : $t('crossChainBoost.unsyncedAllDescription') }}
           </span>
diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainSyncModal.vue b/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainSyncModal.vue
index ad45428e7e..4c3245ba37 100644
--- a/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainSyncModal.vue
+++ b/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainSyncModal.vue
@@ -65,6 +65,7 @@ function toggleNetwork(network: number) {
         :chosenNetworks="chosenNetworks"
         @toggle-network="toggleNetwork"
         @set-successful-synced="isSyncedSuccessfull = true"
+        @close="closeModal"
       />
     </Transition>
   </BalModal>
diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/IconLoaderWrapper.vue b/src/components/contextual/pages/vebal/cross-chain-boost/IconLoaderWrapper.vue
index e4e644407e..a9d0c2b7fd 100644
--- a/src/components/contextual/pages/vebal/cross-chain-boost/IconLoaderWrapper.vue
+++ b/src/components/contextual/pages/vebal/cross-chain-boost/IconLoaderWrapper.vue
@@ -20,7 +20,7 @@ withDefaults(defineProps<Props>(), {
   position: absolute;
   top: -2px;
   right: -3px;
-  border: 2px solid #f3f3f3;
+  border: 2px solid transparent;
   border-radius: 50%;
   border-top: 2px solid #f97316;
   border-right: 2px solid #f97316;
diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/PortfolioSyncTip.vue b/src/components/contextual/pages/vebal/cross-chain-boost/PortfolioSyncTip.vue
index ff60119664..34e167cb45 100644
--- a/src/components/contextual/pages/vebal/cross-chain-boost/PortfolioSyncTip.vue
+++ b/src/components/contextual/pages/vebal/cross-chain-boost/PortfolioSyncTip.vue
@@ -17,46 +17,53 @@ const {
 const { networkId } = useNetwork();
 const { account } = useWeb3();
 
-const showVeBalSyncTip = computed(() => {
+const veBalSyncTip = computed(() => {
+  if (isLoadingSyncState.value) return null;
   const state = networksSyncState.value[networkId.value];
 
-  return (
-    !isLoadingSyncState.value &&
+  const isUnsyncedOrSyncing =
     state === NetworkSyncState.Unsynced &&
     !!tempSyncingNetworks.value[account.value] &&
-    tempSyncingNetworks.value[account.value].networks.includes(networkId.value)
-  );
-});
+    tempSyncingNetworks.value[account.value].networks.includes(networkId.value);
 
-const veBalSyncTip = computed(() => {
-  if (!showVeBalSyncTip.value) return null;
+  if (isUnsyncedOrSyncing) {
+    if (Number(l2VeBalBalances.value?.[networkId.value]) > 0) {
+      return {
+        title: 'Resync if you acquire new veBAL',
+        text: 'Newly acquired veBAL doesn’t auto-sync to L2s. Remember to resync on Ethereum Mainnet after acquiring more veBAL to continue boosting to your max.',
+      };
+    }
 
-  if (Number(l2VeBalBalances.value?.[networkId.value]) > 0) {
     return {
-      title: 'Resync if you acquire new veBAL',
-      text: 'Newly acquired veBAL doesn’t auto-sync to L2s. Remember to resync on Ethereum Mainnet after acquiring more veBAL to continue boosting to your max.',
+      title: 'Sync your veBAL to maximize your boost',
+      text: 'If you have veBAL, sync your veBAL balance from Ethereum Mainnet to max your boost while staking on Arbitrum. Resync after acquiring more veBAL to continue boosting to your max.',
     };
   }
 
-  return {
-    title: 'Sync your veBAL to maximize your boost',
-    text: 'If you have veBAL, sync your veBAL balance from Ethereum Mainnet to max your boost while staking on Arbitrum. Resync after acquiring more veBAL to continue boosting to your max.',
-  };
+  const isSynced = state === NetworkSyncState.Synced;
+
+  if (isSynced) {
+    return {
+      title: 'Trigger pool gauge updates to get your boosts',
+      text: 'Pool gauges don’t automatically recognize changes in veBAL until triggered. Updates are triggered when you interact with a gauge (e.g. by claiming BAL, stake/unstake or explicitly update the gauge on each individual pool page)',
+      hideBtn: true,
+    };
+  }
 });
 </script>
 
 <template>
   <BalAlert
-    v-if="showVeBalSyncTip"
-    :title="veBalSyncTip?.title"
+    v-if="veBalSyncTip"
+    :title="veBalSyncTip.title"
     type="tip"
     class="mb-5 w-100"
   >
     <div class="flex items-center">
-      <div class="flex-[2]">{{ veBalSyncTip?.text }}</div>
-      <div class="flex flex-1 justify-end">
+      <div class="flex-[2]">{{ veBalSyncTip.text }}</div>
+      <div v-if="!veBalSyncTip.hideBtn" class="flex flex-1 justify-end">
         <BalBtn color="gradient" @click="$emit('showProceedModal')">
-          Sync veBal
+          Sync veBAL
         </BalBtn>
       </div>
     </div>
diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/StakingCardSyncAlert.vue b/src/components/contextual/pages/vebal/cross-chain-boost/StakingCardSyncAlert.vue
new file mode 100644
index 0000000000..e8f699554b
--- /dev/null
+++ b/src/components/contextual/pages/vebal/cross-chain-boost/StakingCardSyncAlert.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import useNetwork from '@/composables/useNetwork';
+import {
+  NetworkSyncState,
+  useCrossChainSync,
+} from '@/providers/cross-chain-sync.provider';
+import { usePoolStaking } from '@/providers/local/pool-staking.provider';
+import CheckpointGaugeModal from './CheckpointGaugeModal.vue';
+import useWeb3 from '@/services/web3/useWeb3';
+import config from '@/lib/config';
+
+type Props = {
+  fiatValueOfStakedShares: string;
+  fiatValueOfUnstakedShares: string;
+};
+
+defineProps<Props>();
+const emit = defineEmits(['shouldStakingCardBeOpened']);
+const shouldShowWarningAlert = ref(false);
+const showCheckpointModal = ref(false);
+
+const { networksSyncState, getGaugeWorkingBalance } = useCrossChainSync();
+const { hasNonPrefGaugeBalance, poolGauges } = usePoolStaking();
+const { networkId } = useNetwork();
+const { isMismatchedNetwork } = useWeb3();
+
+const tipText = computed(() => {
+  if (hasNonPrefGaugeBalance.value) {
+    const title = 'Restake to be eligible for future incentives';
+    let text = '';
+    if (
+      networksSyncState.value[networkId.value] === NetworkSyncState.Unsynced
+    ) {
+      text = `After your veBAL syncs to ${
+        config[networkId.value].chainName
+      }, restake to move from the deprecated pool gauge to the new boost-aware pool gauge. If you restake before the veBAL syncs, you’ll need to perform another interaction on the gauge to start receiving your staking boost.`;
+    }
+
+    if (networksSyncState.value[networkId.value] === NetworkSyncState.Synced) {
+      text =
+        'To get your staking boost on this pool, restake to move from the deprecated pool gauge to the new boost-aware pool gauge.';
+    }
+
+    return {
+      title,
+      text,
+    };
+  }
+
+  return null;
+});
+
+const warningAlert = computed(() => {
+  if (shouldShowWarningAlert.value) {
+    return {
+      title: 'You are not getting your max staking boost',
+      text: 'You’ve synced new veBAL but it is not being used to increase your staking boost (since pool gauges don’t automatically recognize veBAL changes). Interact with a pool gauge to trigger an update (e.g. by claiming BAL, staking/unstaking or explicitly triggering an update).',
+    };
+  }
+  return null;
+});
+
+async function setWarningAlertState() {
+  if (isMismatchedNetwork.value) {
+    return;
+  }
+  const id = poolGauges.value?.pool.preferentialGauge.id;
+
+  if (!id) {
+    return;
+  }
+
+  try {
+    emit('shouldStakingCardBeOpened');
+
+    const balance = await getGaugeWorkingBalance(id);
+
+    // if the second number it returns is greater than the first, then show the message
+    if (balance[1]?.gt(balance[0])) {
+      shouldShowWarningAlert.value = true;
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+onMounted(() => {
+  setWarningAlertState();
+});
+</script>
+
+<template>
+  <div class="flex">
+    <BalAlert
+      v-if="warningAlert"
+      class="flex-grow"
+      type="warning"
+      :title="warningAlert.title"
+    >
+      <div class="flex flex-col">
+        <span class="mb-3">{{ warningAlert.text }}</span>
+        <div class="mb-2">
+          <BalBtn
+            size="sm"
+            color="gradient"
+            @click="showCheckpointModal = true"
+          >
+            Trigger update
+          </BalBtn>
+        </div>
+      </div>
+    </BalAlert>
+
+    <BalAlert
+      v-else-if="tipText"
+      class="flex-grow"
+      type="tip"
+      :title="tipText.title"
+    >
+      {{ tipText.text }}
+    </BalAlert>
+
+    <CheckpointGaugeModal
+      :isVisible="showCheckpointModal"
+      @close="showCheckpointModal = false"
+      @success="shouldShowWarningAlert = false"
+    />
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/SyncFinalState.vue b/src/components/contextual/pages/vebal/cross-chain-boost/SyncFinalState.vue
index 052f32523f..2b1152fcc3 100644
--- a/src/components/contextual/pages/vebal/cross-chain-boost/SyncFinalState.vue
+++ b/src/components/contextual/pages/vebal/cross-chain-boost/SyncFinalState.vue
@@ -7,6 +7,7 @@ type Props = {
 };
 
 defineProps<Props>();
+defineEmits(['close']);
 </script>
 
 <template>
@@ -52,10 +53,15 @@ defineProps<Props>();
     <BalAlert
       type="tip"
       :title="$t('crossChainBoost.syncInitiatedModal.warningTitle')"
+      class="mb-8"
     >
       <div>
-        {{ $t('crossChainBoost.syncInitiatedModal.warningDescription') }}.
+        {{ $t('crossChainBoost.syncInitiatedModal.warningDescription') }}
       </div>
     </BalAlert>
+
+    <BalBtn color="gray" outline block @click="$emit('close')">
+      {{ $t('close') }}
+    </BalBtn>
   </div>
 </template>
diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue b/src/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue
index c114e52957..82b4c01fb6 100644
--- a/src/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue
+++ b/src/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue
@@ -3,9 +3,13 @@ import configs, { Network } from '@/lib/config';
 import { buildNetworkIconURL } from '@/lib/utils/urls';
 import { TransactionActionInfo } from '@/types/transactions';
 import { useI18n } from 'vue-i18n';
-import { TransactionResponse } from '@ethersproject/abstract-provider';
+import {
+  TransactionReceipt,
+  TransactionResponse,
+} from '@ethersproject/abstract-provider';
 import { useCrossChainSync } from '@/providers/cross-chain-sync.provider';
 import useTransactions from '@/composables/useTransactions';
+import useEthers from '@/composables/useEthers';
 
 /**
  * TYPES
@@ -27,8 +31,10 @@ const emit = defineEmits(['update:activeTabIdx']);
  */
 const { t } = useI18n();
 const { addTransaction } = useTransactions();
+const { txListener } = useEthers();
 const { l2VeBalBalances, sync, setTempSyncingNetworks, tempSyncingNetworks } =
   useCrossChainSync();
+
 /**
  * STATE
  */
@@ -45,7 +51,16 @@ async function handleTransaction(
     id: tx.hash,
     type: 'tx',
     action: 'sync',
-    summary: `Sync veBal to ${configs[network].chainName} network`,
+    summary: `Sync veBAL to ${configs[network].chainName} network`,
+  });
+
+  txListener(tx, {
+    onTxConfirmed: (receipt: TransactionReceipt) => {
+      console.log('Receipt', receipt);
+    },
+    onTxFailed: () => {
+      //
+    },
   });
 }
 
diff --git a/src/components/tables/PoolsTable/PoolsTableActionsCell.vue b/src/components/tables/PoolsTable/PoolsTableActionsCell.vue
index 1c87f64e13..2715f44803 100644
--- a/src/components/tables/PoolsTable/PoolsTableActionsCell.vue
+++ b/src/components/tables/PoolsTable/PoolsTableActionsCell.vue
@@ -60,7 +60,8 @@ const showVeBalLock = computed(() => isVeBalPool(props.pool.id));
     </BalBtn>
     <BalBtn
       v-else-if="poolsType === 'staked'"
-      color="gradient"
+      class="dark:text-gray-300 dark:border-gray-300"
+      outline
       size="sm"
       @click.prevent.stop="emit('click:unstake', pool)"
     >
diff --git a/src/composables/useTransactions.ts b/src/composables/useTransactions.ts
index cfcb353694..1d3b25fd25 100644
--- a/src/composables/useTransactions.ts
+++ b/src/composables/useTransactions.ts
@@ -49,7 +49,8 @@ export type TransactionAction =
   | 'unstake'
   | 'stake'
   | 'restake'
-  | 'sync';
+  | 'sync'
+  | 'userGaugeCheckpoint';
 
 export type TransactionType = 'order' | 'tx';
 
diff --git a/src/lib/abi/GaugeWorkingBalanceHelper.json b/src/lib/abi/GaugeWorkingBalanceHelper.json
new file mode 100644
index 0000000000..cf66ae22b5
--- /dev/null
+++ b/src/lib/abi/GaugeWorkingBalanceHelper.json
@@ -0,0 +1,73 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "contract IVeDelegationProxy",
+        "name": "veDelegationProxy",
+        "type": "address"
+      },
+      {
+        "internalType": "bool",
+        "name": "readTotalSupplyFromVE",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "inputs": [],
+    "name": "getVotingEscrow",
+    "outputs": [
+      { "internalType": "contract IERC20", "name": "", "type": "address" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getVotingEscrowDelegationProxy",
+    "outputs": [
+      {
+        "internalType": "contract IVeDelegation",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "contract IGauge", "name": "gauge", "type": "address" },
+      { "internalType": "address", "name": "user", "type": "address" }
+    ],
+    "name": "getWorkingBalanceToSupplyRatios",
+    "outputs": [
+      { "internalType": "uint256", "name": "", "type": "uint256" },
+      { "internalType": "uint256", "name": "", "type": "uint256" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "contract IGauge", "name": "gauge", "type": "address" },
+      { "internalType": "address", "name": "user", "type": "address" }
+    ],
+    "name": "getWorkingBalances",
+    "outputs": [
+      { "internalType": "uint256", "name": "", "type": "uint256" },
+      { "internalType": "uint256", "name": "", "type": "uint256" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "readsTotalSupplyFromVE",
+    "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]
diff --git a/src/lib/config/arbitrum/contracts.ts b/src/lib/config/arbitrum/contracts.ts
index b7898817c7..10bed591a5 100644
--- a/src/lib/config/arbitrum/contracts.ts
+++ b/src/lib/config/arbitrum/contracts.ts
@@ -24,6 +24,7 @@ const contracts: Contracts = {
   feeDistributorDeprecated: '',
   faucet: '',
   gaugeRewardsHelper: arbitrum.ChildChainGaugeRewardHelper,
+  gaugeWorkingBalanceHelper: arbitrum.ChildChainGaugeWorkingBalanceHelper,
 };
 
 export default contracts;
diff --git a/src/lib/config/gnosis-chain/contracts.ts b/src/lib/config/gnosis-chain/contracts.ts
index 29aa9a009e..4575b069e1 100644
--- a/src/lib/config/gnosis-chain/contracts.ts
+++ b/src/lib/config/gnosis-chain/contracts.ts
@@ -23,6 +23,7 @@ const contracts: Contracts = {
   feeDistributorDeprecated: '',
   faucet: '',
   gaugeRewardsHelper: gnosis.ChildChainGaugeRewardHelper,
+  gaugeWorkingBalanceHelper: gnosis.ChildChainGaugeWorkingBalanceHelper,
 };
 
 export default contracts;
diff --git a/src/lib/config/optimism/contracts.ts b/src/lib/config/optimism/contracts.ts
index 5aec44620c..b7f378df7f 100644
--- a/src/lib/config/optimism/contracts.ts
+++ b/src/lib/config/optimism/contracts.ts
@@ -22,6 +22,7 @@ const contracts: Contracts = {
   feeDistributor: '',
   feeDistributorDeprecated: '',
   faucet: '',
+  gaugeWorkingBalanceHelper: optimism.ChildChainGaugeWorkingBalanceHelper,
 };
 
 export default contracts;
diff --git a/src/lib/config/polygon/contracts.ts b/src/lib/config/polygon/contracts.ts
index 807d7c072c..0978bb1005 100644
--- a/src/lib/config/polygon/contracts.ts
+++ b/src/lib/config/polygon/contracts.ts
@@ -24,6 +24,7 @@ const contracts: Contracts = {
   feeDistributorDeprecated: '',
   faucet: '',
   gaugeRewardsHelper: polygon.ChildChainGaugeRewardHelper,
+  gaugeWorkingBalanceHelper: polygon.ChildChainGaugeWorkingBalanceHelper,
 };
 
 export default contracts;
diff --git a/src/lib/config/types.ts b/src/lib/config/types.ts
index d6f8da808e..4efba5d3d8 100644
--- a/src/lib/config/types.ts
+++ b/src/lib/config/types.ts
@@ -43,6 +43,7 @@ export interface Contracts {
   veBAL: string;
   gaugeController: string;
   gaugeFactory: string;
+  gaugeWorkingBalanceHelper?: string;
   balancerMinter: string;
   tokenAdmin: string;
   veDelegationProxy: string;
diff --git a/src/locales/default.json b/src/locales/default.json
index b2bfe1b560..17381617a3 100644
--- a/src/locales/default.json
+++ b/src/locales/default.json
@@ -242,15 +242,15 @@
     "currentBalance": "Current balance",
     "postSyncBalance": "Post-sync balance",
     "syncedNetworks": "Synced networks",
-    "syncToNetwork": "Sync veBal to {network}",
-    "syncingToNetwork": "Syncing veBal to {network}",
+    "syncToNetwork": "Sync veBAL to {network}",
+    "syncingToNetwork": "Syncing veBAL to {network}",
     "unsyncedNetworks": "Unsynced networks",
     "unsyncedAllDescription": "Sync veBAL across networks for a boosted APR on your staked positions.",
     "syncedAllDescription": "All networks are synced",
     "emptyState": "Once you have some veBAL, sync your balance here to other networks.",
     "syncProcessWarning": {
-      "title": "Wait until sync finalizes before restaking on L2",
-      "description": "Your veBAL is currently syncing to other networks. Wait until the sync is complete before re-staking any L2 positions in order for your new boosts to apply."
+      "title": "Wait until sync finalizes before restaking / triggering a gauge update on L2",
+      "description": "Your sync has been initiated but it may take up to 30 mins to update across L2s. After it syncs, you will still need to trigger an update of each pool gauge on L2 where you stake to get your new max boost. You can do this by restaking into the new veBAL-aware pool gauge or by explicitly triggering an update on the pool page."
     },
     "syncComplete": {
       "title": "Remember to restake to the new boost-aware L2 pool gauges",
@@ -262,11 +262,11 @@
     },
     "selectNetworkModal": {
       "title": "Sync veBAL: Select networks",
-      "description": "Layer 2 (L2) networks don’t know your veBAL balance from Ethereum, unless you sync it. Each network costs additional gas to sync, so it’s best to only sync networks where you plan to stake."
+      "description": "Layer 2 networks don’t know your veBAL balance from Ethereum, unless you sync it. Each network costs additional gas to sync, so it’s best to only sync networks where you plan to stake."
     },
     "syncNetworkModal": {
-      "title": "Sync veBal",
-      "singleNetworkTitle": "Sync veBal to {0}",
+      "title": "Sync veBAL",
+      "singleNetworkTitle": "Sync veBAL to {0}",
       "description": "This will sync your veBAL balance and give you a staking boost on {0}."
     },
     "syncInitiatedModal": {
@@ -278,7 +278,7 @@
     "syncNetworkAction": {
       "title": "This will sync your veBAL balance and give you a staking boost across the networks listed below."
     },
-    "syncInProgress": "A sync operation is currently in progress. Wait until it completes before restaking any of your positions on [Arbitrum] to get your maximum veBAL boost."
+    "syncInProgress": "A sync operation is currently in progress. Wait until it completes before restaking any of your positions on {network} to get your maximum veBAL boost."
   },
   "migratePool": {
     "aaveBoostedPool": {
@@ -1493,7 +1493,8 @@
     "extendLock": "Extend lock",
     "increaseLock": "Increase lock",
     "unlock": "Unlock",
-    "sync": "Sync"
+    "sync": "Sync",
+    "userGaugeCheckpoint": "Pool gauge veBAL update"
   },
   "transactionDeadline": "Transaction deadline",
   "transactionDeadlineTooltip": "Your swap will expire and not execute if it is pending for more than the selected duration. Only executed transactions incur fees for swaps between ERC-20 tokens.",
diff --git a/src/pages/vebal.vue b/src/pages/vebal.vue
index d092b5e4bc..0832389896 100644
--- a/src/pages/vebal.vue
+++ b/src/pages/vebal.vue
@@ -21,7 +21,7 @@ providePoolStaking();
   <div>
     <Hero v-if="isVeBalSupported" v-once />
 
-    <div class="py-16 xl:py-20 bg-gray-50 dark:bg-gray-900">
+    <div class="py-16 xl:py-20 bg-gray-50 dark:bg-gray-850/50">
       <div v-if="isVeBalSupported" class="lg:container lg:mx-auto">
         <div class="px-4 mb-5">
           <MyVeBAL />
diff --git a/src/providers/cross-chain-sync.provider.ts b/src/providers/cross-chain-sync.provider.ts
index 14727302c0..99f1ea6cae 100644
--- a/src/providers/cross-chain-sync.provider.ts
+++ b/src/providers/cross-chain-sync.provider.ts
@@ -11,6 +11,9 @@ import { configService } from '@/services/config/config.service';
 import useWeb3 from '@/services/web3/useWeb3';
 import { safeInject } from './inject';
 import configs from '@/lib/config';
+import { GaugeWorkingBalanceHelper } from '@/services/balancer/contracts/contracts/gauge-working-balance-helper';
+import { LiquidityGauge } from '@/services/balancer/contracts/contracts/liquidity-gauge';
+import { useI18n } from 'vue-i18n';
 
 export enum NetworkSyncState {
   Unsynced = 'Unsynced',
@@ -40,6 +43,7 @@ const REFETCH_INTERVAL = 1000 * 30; // 30 seconds
 
 export const crossChainSyncProvider = () => {
   const { account, getSigner } = useWeb3();
+  const { t } = useI18n();
 
   const syncingNetworksFromStorage = localStorage.getItem(
     'tempSyncingNetworks'
@@ -119,7 +123,7 @@ export const crossChainSyncProvider = () => {
     return result;
   });
 
-  // Returns networks lists by sync state synced/unsynced
+  // Returns networks lists by sync state
   const networksBySyncState = computed<NetworksBySyncState>(() => {
     if (!networksSyncState.value) {
       return {
@@ -149,6 +153,15 @@ export const crossChainSyncProvider = () => {
     };
   });
 
+  // List of networks to show in unsynced networks card
+  const showingUnsyncedNetworks = computed(() => {
+    const commonArr = [
+      ...networksBySyncState.value.unsynced,
+      ...networksBySyncState.value.syncing,
+    ];
+    return [...new Set(commonArr)];
+  });
+
   const hasError = computed(() => {
     const hasVotingEscrowError = veBalSyncSupportedNetworks.some(network => {
       return crossChainNetworks[network].isError.value;
@@ -167,23 +180,27 @@ export const crossChainSyncProvider = () => {
   const warningMessage = computed(() => {
     if (networksBySyncState.value.syncing.length > 0) {
       return {
-        title: 'Wait until sync finalizes before restaking on L2',
-        text: 'Your veBAL is currently syncing to other networks. Wait until the sync is complete before re-staking any L2 positions in order for your new boosts to apply.',
+        title: t('crossChainBoost.syncProcessWarning.title'),
+        text: t('crossChainBoost.syncProcessWarning.description'),
       };
     }
 
-    return {
-      title: '',
-      text: '',
-    };
+    return null;
   });
 
-  // TODO: add info message
   const infoMessage = computed(() => {
-    return {
-      title: '',
-      text: '',
-    };
+    if (warningMessage.value) {
+      return null;
+    }
+
+    if (networksBySyncState.value.synced.length > 0) {
+      return {
+        title: t('crossChainBoost.updateGauge.title'),
+        text: t('crossChainBoost.updateGauge.description'),
+      };
+    }
+
+    return null;
   });
 
   async function sync(network: Network) {
@@ -267,6 +284,35 @@ export const crossChainSyncProvider = () => {
     );
   }
 
+  async function getGaugeWorkingBalance(gaugeAddress: string) {
+    const contractAddress =
+      configService.network.addresses.gaugeWorkingBalanceHelper;
+    if (!contractAddress) throw new Error('No contract address found');
+
+    const signer = getSigner();
+    const workingBalanceHelperContract = new GaugeWorkingBalanceHelper(
+      contractAddress
+    );
+
+    return workingBalanceHelperContract.getWorkingBalanceToSupplyRatios({
+      signer,
+      userAddress: account.value,
+      gauge: gaugeAddress,
+    });
+  }
+
+  // checkpoint
+  async function triggerGaugeUpdate(gaugeAddress: string) {
+    const gaugeContract = new LiquidityGauge(gaugeAddress);
+
+    const signer = getSigner();
+
+    return gaugeContract.checkpointUser({
+      signer,
+      userAddress: account.value,
+    });
+  }
+
   watch(
     () => networksBySyncState.value,
     newVal => {
@@ -290,6 +336,7 @@ export const crossChainSyncProvider = () => {
   );
 
   return {
+    showingUnsyncedNetworks,
     hasError,
     omniEscrowLocksMap,
     networksSyncState,
@@ -303,6 +350,8 @@ export const crossChainSyncProvider = () => {
     setTempSyncingNetworks,
     warningMessage,
     infoMessage,
+    getGaugeWorkingBalance,
+    triggerGaugeUpdate,
   };
 };
 
diff --git a/src/providers/local/pool-staking.provider.ts b/src/providers/local/pool-staking.provider.ts
index ba45a40ba8..cb7b0af442 100644
--- a/src/providers/local/pool-staking.provider.ts
+++ b/src/providers/local/pool-staking.provider.ts
@@ -240,6 +240,7 @@ export const poolStakingProvider = (_poolId?: string) => {
     refetchAllPoolStakingData,
     stake,
     unstake,
+    poolGauges,
   };
 };
 
diff --git a/src/services/balancer/contracts/contracts/gauge-working-balance-helper.ts b/src/services/balancer/contracts/contracts/gauge-working-balance-helper.ts
new file mode 100644
index 0000000000..2d4d00b357
--- /dev/null
+++ b/src/services/balancer/contracts/contracts/gauge-working-balance-helper.ts
@@ -0,0 +1,37 @@
+import GaugeWorkingBalanceHelperAbi from '@/lib/abi/GaugeWorkingBalanceHelper.json';
+import { rpcProviderService } from '@/services/rpc-provider/rpc-provider.service';
+import { TransactionBuilder } from '@/services/web3/transactions/transaction.builder';
+
+import { walletService as walletServiceInstance } from '@/services/web3/wallet.service';
+import { Contract } from '@ethersproject/contracts';
+import { JsonRpcSigner } from '@ethersproject/providers';
+import { BigNumber } from 'ethers';
+
+export class GaugeWorkingBalanceHelper {
+  instance: Contract;
+
+  constructor(
+    public readonly address: string,
+    private readonly provider = rpcProviderService.jsonProvider,
+    private readonly abi = GaugeWorkingBalanceHelperAbi,
+    private readonly walletService = walletServiceInstance
+  ) {
+    this.instance = new Contract(this.address, this.abi, this.provider);
+  }
+
+  async getWorkingBalanceToSupplyRatios(payload: {
+    gauge: string;
+    userAddress: string;
+    signer: JsonRpcSigner;
+  }) {
+    const { signer, gauge, userAddress } = payload;
+    const txBuilder = new TransactionBuilder(signer);
+
+    return await txBuilder.contract.callStatic<[BigNumber, BigNumber]>({
+      contractAddress: this.address,
+      abi: this.abi,
+      action: 'getWorkingBalanceToSupplyRatios',
+      params: [gauge, userAddress],
+    });
+  }
+}
diff --git a/src/services/balancer/contracts/contracts/liquidity-gauge.ts b/src/services/balancer/contracts/contracts/liquidity-gauge.ts
index ee9bcf9768..36c69c4577 100644
--- a/src/services/balancer/contracts/contracts/liquidity-gauge.ts
+++ b/src/services/balancer/contracts/contracts/liquidity-gauge.ts
@@ -1,6 +1,10 @@
 import { BigNumber } from '@ethersproject/bignumber';
 import { AddressZero } from '@ethersproject/constants';
-import { JsonRpcProvider, TransactionResponse } from '@ethersproject/providers';
+import {
+  JsonRpcProvider,
+  JsonRpcSigner,
+  TransactionResponse,
+} from '@ethersproject/providers';
 import { getAddress } from '@ethersproject/address';
 import { formatUnits } from '@ethersproject/units';
 import { mapValues } from 'lodash';
@@ -14,6 +18,7 @@ import {
   EthersContract,
   getEthersContract,
 } from '@/dependencies/EthersContract';
+import { TransactionBuilder } from '@/services/web3/transactions/transaction.builder';
 
 const MAX_REWARD_TOKENS = 8;
 
@@ -77,6 +82,21 @@ export class LiquidityGauge {
     });
   }
 
+  async checkpointUser(payload: {
+    userAddress: string;
+    signer: JsonRpcSigner;
+  }): Promise<TransactionResponse> {
+    const { userAddress, signer } = payload;
+    const txBuilder = new TransactionBuilder(signer);
+
+    return await txBuilder.contract.sendTransaction({
+      contractAddress: this.address,
+      abi: this.abi,
+      action: 'user_checkpoint',
+      params: [userAddress],
+    });
+  }
+
   async workingSupplies(gaugeAddresses: string[]) {
     const multicaller = this.getMulticaller();
     for (const gaugeAddress of gaugeAddresses) {