From c825160b170cdd28fb27437b61fbb8d5a1780c61 Mon Sep 17 00:00:00 2001
From: Gareth Fuller <gareth.a.f@gmail.com>
Date: Thu, 26 Oct 2023 13:49:52 +0100
Subject: [PATCH] feat: NPS score modal (#4340)

* chore: Add appzi script

* chore: Add survey link

* chore: Add button on all preview modals

* chore: Undo change

* chore: Update feedback card in tx flows

* Appzi UI tweaks

* Updated 3rd party services

* Fixed bug to make nav action buttons square

* Better pattern matching for a consistent modal bg

* Updated policies

---------

Co-authored-by: pkattera <kattera@gmail.com>
---
 index.html                                    |   3 +
 src/assets/css/global/all.css                 |   5 +
 .../images/services/amazon-web-services.svg   |   1 +
 src/assets/images/services/appzi.svg          |   1 +
 .../_global/BalDataList/BalDataList.vue       |   2 +-
 src/components/_global/icons/ActivityIcon.vue |   6 +-
 src/components/_global/icons/ThumbsUpIcon.vue |  32 +++++
 src/components/btns/DarkModeToggle.vue        |   1 +
 src/components/btns/FeedbackBtn.vue           |  22 ++++
 src/components/cards/FeedbackCard.vue         |  24 ++++
 .../pages/pool/staking/StakePreview.vue       |  12 +-
 .../staking/composables/useStakePreview.ts    |   6 +
 src/components/footer/Footer.vue              |   5 +
 .../components/LockActions.vue                |   4 +
 .../AddLiquidityPreview.vue                   |   1 +
 .../components/Actions.vue                    | 118 ++++++++++--------
 .../WithdrawPreviewModal.vue                  |   1 +
 .../components/WithdrawActions.vue            |  68 ++++++----
 src/components/navs/AppNav/AppNavActions.vue  |   2 +
 .../AppNavActivityBtn/AppNavActivityBtn.vue   |   2 +-
 .../navs/AppNav/AppSidebar/SidebarContent.vue |   5 +
 .../web3/ThirdPartyServicesModal.vue          |   2 +
 src/composables/useAppzi.ts                   |  17 +++
 src/composables/useTransactions.ts            |   7 +-
 src/locales/default.json                      |   6 +-
 src/pages/_layouts/PoolLayout.vue             |   2 +-
 src/pages/cookies-policy.vue                  |  64 +++++-----
 src/pages/privacy-policy.vue                  |  34 ++---
 src/pages/terms-of-use.vue                    |  67 ++++++----
 29 files changed, 353 insertions(+), 167 deletions(-)
 create mode 100644 src/assets/images/services/amazon-web-services.svg
 create mode 100644 src/assets/images/services/appzi.svg
 create mode 100644 src/components/_global/icons/ThumbsUpIcon.vue
 create mode 100644 src/components/btns/FeedbackBtn.vue
 create mode 100644 src/components/cards/FeedbackCard.vue
 create mode 100644 src/composables/useAppzi.ts

diff --git a/index.html b/index.html
index 3326ae69f7..dbbdb500e9 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,9 @@
       defer
     ></script>
 
+    <!-- Appzi: Capture Insightful Feedback -->
+    <script async src="https://w.appzi.io/w.js?token=8TY8k"></script>
+
     <link rel="preconnect" href="https://mainnet.infura.io" />
     <link rel="preconnect" href="https://api-v3.balancer.fi" />
     <link rel="preconnect" href="https://api.thegraph.com" />
diff --git a/src/assets/css/global/all.css b/src/assets/css/global/all.css
index e3d3185c69..ecdc482ee7 100644
--- a/src/assets/css/global/all.css
+++ b/src/assets/css/global/all.css
@@ -51,3 +51,8 @@ input[type='number'] {
 *::-webkit-scrollbar-thumb {
   @apply bg-gray-200 dark:bg-gray-700;
 }
+
+/* AppZi styles */
+div[id^='bkln'] {
+  background-color: rgb(0 0 0 / 90%) !important;
+}
diff --git a/src/assets/images/services/amazon-web-services.svg b/src/assets/images/services/amazon-web-services.svg
new file mode 100644
index 0000000000..ff386ca7aa
--- /dev/null
+++ b/src/assets/images/services/amazon-web-services.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36"><circle cx="18" cy="18" r="18" fill="#202935"/><g clip-path="url(#a)"><path fill="#fff" d="M12.324 16.873c0 .32.034.58.095.77.069.19.155.397.276.622.044.07.06.138.06.199 0 .086-.051.173-.163.26l-.545.363a.415.415 0 0 1-.225.077c-.086 0-.173-.043-.26-.12a2.676 2.676 0 0 1-.31-.407 6.676 6.676 0 0 1-.269-.51c-.674.795-1.521 1.193-2.542 1.193-.726 0-1.305-.208-1.729-.623-.424-.415-.64-.968-.64-1.66 0-.735.26-1.331.787-1.78.527-.45 1.228-.675 2.118-.675.294 0 .597.026.917.069.32.043.648.112.994.19v-.631c0-.657-.138-1.116-.406-1.384-.277-.268-.744-.397-1.41-.397-.302 0-.613.034-.933.112a6.88 6.88 0 0 0-.934.294c-.139.06-.242.095-.303.112a.53.53 0 0 1-.138.026c-.121 0-.182-.086-.182-.268v-.423c0-.139.018-.242.06-.303a.646.646 0 0 1 .243-.181 4.972 4.972 0 0 1 1.09-.39 5.242 5.242 0 0 1 1.348-.164c1.03 0 1.781.234 2.266.7.475.467.717 1.176.717 2.127v2.802h.018Zm-3.51 1.314a2.8 2.8 0 0 0 .89-.155c.31-.104.588-.294.821-.554.138-.164.242-.346.294-.553.052-.208.086-.458.086-.752v-.364a7.207 7.207 0 0 0-.795-.146 6.514 6.514 0 0 0-.813-.052c-.579 0-1.003.112-1.288.345-.285.234-.424.563-.424.995 0 .406.104.709.32.916.208.216.51.32.908.32Zm6.942.934c-.155 0-.26-.026-.328-.086-.07-.052-.13-.173-.182-.338l-2.032-6.683a1.518 1.518 0 0 1-.078-.346c0-.139.07-.216.208-.216h.847c.164 0 .277.026.337.086.07.052.121.173.173.337l1.453 5.724 1.349-5.724c.043-.173.095-.285.164-.337.07-.052.19-.086.346-.086h.692c.164 0 .276.026.346.086.069.052.13.173.164.337l1.366 5.793 1.496-5.793c.052-.173.112-.285.173-.337.069-.052.181-.086.337-.086h.804c.138 0 .216.069.216.216 0 .043-.008.086-.017.138a1.224 1.224 0 0 1-.06.216l-2.084 6.684c-.052.173-.113.285-.182.337a.553.553 0 0 1-.328.087h-.744c-.164 0-.277-.026-.346-.087-.07-.06-.13-.173-.164-.346l-1.34-5.577-1.332 5.569c-.043.173-.095.285-.164.346-.07.06-.19.086-.346.086h-.744Zm11.111.234c-.45 0-.9-.052-1.332-.156-.432-.104-.77-.216-.994-.346-.138-.078-.233-.164-.268-.242a.61.61 0 0 1-.052-.242v-.441c0-.182.07-.268.199-.268.052 0 .104.008.156.026.052.017.13.052.216.086.294.13.614.234.95.303.347.069.684.104 1.03.104.545 0 .968-.095 1.262-.286a.931.931 0 0 0 .45-.821.842.842 0 0 0-.234-.605c-.155-.165-.45-.312-.873-.45l-1.254-.39c-.63-.198-1.098-.492-1.383-.881a2.06 2.06 0 0 1-.432-1.254c0-.363.077-.683.233-.96.156-.276.363-.518.623-.709.259-.199.553-.345.899-.45a3.767 3.767 0 0 1 1.09-.146c.19 0 .388.008.579.034.198.026.38.06.562.096.173.043.337.086.492.138.156.052.277.104.364.155.12.07.207.139.259.217.052.069.078.164.078.285v.406c0 .182-.07.277-.199.277-.07 0-.182-.035-.329-.104a3.955 3.955 0 0 0-1.66-.337c-.493 0-.882.078-1.15.242-.268.165-.406.415-.406.77 0 .242.086.45.26.614.172.164.492.328.95.475l1.228.39c.623.198 1.072.475 1.34.83.268.354.398.76.398 1.21 0 .372-.078.709-.225 1.003a2.326 2.326 0 0 1-.63.76 2.787 2.787 0 0 1-.96.485 4.11 4.11 0 0 1-1.237.182Z"/><path fill="#F90" d="M28.501 23.557c-2.845 2.1-6.978 3.216-10.531 3.216-4.98 0-9.468-1.841-12.858-4.902-.268-.242-.026-.571.294-.38 3.666 2.126 8.189 3.415 12.866 3.415 3.156 0 6.623-.658 9.814-2.006.476-.217.882.31.415.657Z"/><path fill="#F90" d="M29.686 22.208c-.363-.467-2.404-.225-3.33-.112-.276.034-.32-.208-.068-.39 1.625-1.14 4.297-.812 4.608-.432.311.39-.086 3.061-1.608 4.34-.233.2-.458.096-.355-.164.346-.856 1.116-2.784.753-3.242Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M5 11.226h26v15.548H5z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/assets/images/services/appzi.svg b/src/assets/images/services/appzi.svg
new file mode 100644
index 0000000000..747af65ec3
--- /dev/null
+++ b/src/assets/images/services/appzi.svg
@@ -0,0 +1 @@
+<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36"><circle cx="18" cy="18" r="18" fill="#425188"/><g fill="#DDEDFC" clip-path="url(#a)"><path d="M6.534 16.26a1.394 1.394 0 0 1 1.082-.485 1.438 1.438 0 0 1 1.113.477c.3.343.456.789.435 1.245.022.462-.134.916-.435 1.267a1.42 1.42 0 0 1-1.101.488 1.393 1.393 0 0 1-1.094-.495c-.3-.35-.458-.8-.439-1.26 0-.504.144-.92.432-1.242l.007.004Z"/><path fill-rule="evenodd" d="M32.19 12.513a2.08 2.08 0 0 1-.65 1.514l.03.03a5.067 5.067 0 0 1 1.377 3.493 5.07 5.07 0 0 1-1.377 3.492 4.6 4.6 0 0 1-3.33 1.446h-8.984V19.83c.239.247.521.448.833.59.276.122.579.182.9.182.727 0 1.355-.295 1.885-.885.535-.605.82-1.391.795-2.199a3.255 3.255 0 0 0-.768-2.236 2.403 2.403 0 0 0-3.645-.072v-.65h-.151a1.277 1.277 0 0 0-1.249 1.308v6.619h-5.052V19.83c.239.247.521.447.833.59.276.122.579.182.9.182.727 0 1.355-.295 1.885-.885.535-.605.82-1.391.795-2.199a3.254 3.254 0 0 0-.768-2.236 2.403 2.403 0 0 0-3.645-.072v-.65h-.15a1.277 1.277 0 0 0-1.25 1.308v6.619h-2.08l-1.93 3a.17.17 0 0 1-.182.076.17.17 0 0 1-.13-.143c-.113-.697-.32-2.055-.465-2.997a4.64 4.64 0 0 1-2.565-1.382 5.063 5.063 0 0 1-1.378-3.496 5.071 5.071 0 0 1 1.378-3.493 4.602 4.602 0 0 1 3.33-1.446h20.65l-.004-.094a2.081 2.081 0 0 1 4.163 0ZM9.252 14.56H9.1v.651a2.589 2.589 0 0 0-.821-.602 2.4 2.4 0 0 0-2.816.67 3.254 3.254 0 0 0-.768 2.24c0 .874.265 1.609.795 2.199a2.448 2.448 0 0 0 1.88.885c.326 0 .625-.06.901-.181a2.76 2.76 0 0 0 .829-.59v.067c0 .148.057.288.151.39a.525.525 0 0 0 .379.163h.877v-4.571a1.286 1.286 0 0 0-1.256-1.32Zm14.823.553a.51.51 0 0 1 .507-.511h3.795l-2.524 4.647h2.377v.741a.507.507 0 0 1-.508.507h-4.033l2.535-4.639h-2.15v-.745Zm6.168-.511h-.806v5.895h.81a.6.6 0 0 0 .601-.601v-4.693a.606.606 0 0 0-.605-.601Zm1.006-1.99a1.136 1.136 0 0 1-1.108 1.161 1.135 1.135 0 0 1-1.11-1.162 1.136 1.136 0 0 1 1.11-1.165 1.135 1.135 0 0 1 1.108 1.165Z" clip-rule="evenodd"/><path d="M13.187 16.252a1.438 1.438 0 0 1 1.104-.477c.44 0 .807.159 1.098.484.296.345.45.788.431 1.241 0 .511-.147.927-.442 1.257a1.4 1.4 0 0 1-1.087.492 1.426 1.426 0 0 1-1.104-.485 1.817 1.817 0 0 1-.44-1.267c0-.515.148-.927.44-1.25v.005Zm6.452 0a1.44 1.44 0 0 1 1.105-.477c.438 0 .805.159 1.097.484.296.345.45.788.431 1.241 0 .511-.147.927-.442 1.257a1.4 1.4 0 0 1-1.086.492 1.426 1.426 0 0 1-1.105-.485 1.816 1.816 0 0 1-.44-1.267c0-.515.148-.927.44-1.25v.005Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M2.674 10.432h30.651v15.136H2.675z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/components/_global/BalDataList/BalDataList.vue b/src/components/_global/BalDataList/BalDataList.vue
index fe3ba5835a..030901e64c 100644
--- a/src/components/_global/BalDataList/BalDataList.vue
+++ b/src/components/_global/BalDataList/BalDataList.vue
@@ -12,7 +12,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div
-    class="mt-4 rounded-lg border dark:border-gray-700 divide-y dark:divide-gray-700"
+    class="rounded-lg border dark:border-gray-700 divide-y dark:divide-gray-700"
   >
     <component :is="hTag" class="p-2">
       {{ title }}
diff --git a/src/components/_global/icons/ActivityIcon.vue b/src/components/_global/icons/ActivityIcon.vue
index e514d22e62..52f2391f8d 100644
--- a/src/components/_global/icons/ActivityIcon.vue
+++ b/src/components/_global/icons/ActivityIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <svg
-    width="28"
-    height="28"
+    width="24"
+    height="24"
     viewBox="0 0 28 28"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -9,7 +9,7 @@
     <path
       d="M25.6667 14H21L17.5 24.5L10.5 3.5L7 14H2.33334"
       stroke="url(#activity-icon-0)"
-      stroke-width="2"
+      stroke-width="4"
       stroke-linecap="round"
       stroke-linejoin="round"
     />
diff --git a/src/components/_global/icons/ThumbsUpIcon.vue b/src/components/_global/icons/ThumbsUpIcon.vue
new file mode 100644
index 0000000000..f15e937d8e
--- /dev/null
+++ b/src/components/_global/icons/ThumbsUpIcon.vue
@@ -0,0 +1,32 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 25"
+  >
+    <g clip-path="url(#a)">
+      <path
+        fill="url(#b)"
+        fill-rule="evenodd"
+        d="M15.406 4.01a3 3 0 0 0-5.058 2.183v1l-.007.202a2.997 2.997 0 0 1-1.492 2.397 1 1 0 0 0-.5.866l-.001 9.536.007.117a1 1 0 0 0 .993.883h8l.164.008c1.308.015 2.429-1.155 2.81-2.78l1.006-5.033.02-.195-.005-.177-.015-.173a3 3 0 0 0-2.98-2.65h-2v-4l-.005-.177a3 3 0 0 0-.937-2.006Zm-9.394 6.436a1 1 0 0 0-.664-.252h-1l-.15.004a2 2 0 0 0-1.85 1.995v7l.005.15a2 2 0 0 0 1.995 1.85h1l.117-.007a1 1 0 0 0 .883-.992v-9l-.007-.118a1 1 0 0 0-.329-.63Z"
+        clip-rule="evenodd"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="b"
+        x1="11.848"
+        x2="11.848"
+        y1="3.193"
+        y2="21.202"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#F21BF6" />
+        <stop offset="1" stop-color="#BF51F3" />
+      </linearGradient>
+      <clipPath id="a"><path fill="#fff" d="M.348.193h24v24h-24z" /></clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/src/components/btns/DarkModeToggle.vue b/src/components/btns/DarkModeToggle.vue
index fd4fac885e..193571af25 100644
--- a/src/components/btns/DarkModeToggle.vue
+++ b/src/components/btns/DarkModeToggle.vue
@@ -12,6 +12,7 @@ const { darkMode, toggleDarkMode } = useDarkMode();
 <template>
   <BalBtn
     color="white"
+    class="w-9 !px-0"
     :size="isMobile ? 'md' : 'sm'"
     :circle="isMobile"
     @click="toggleDarkMode"
diff --git a/src/components/btns/FeedbackBtn.vue b/src/components/btns/FeedbackBtn.vue
new file mode 100644
index 0000000000..bc16e6f08c
--- /dev/null
+++ b/src/components/btns/FeedbackBtn.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import useBreakpoints from '@/composables/useBreakpoints';
+import { useAppzi } from '@/composables/useAppzi';
+
+/**
+ * COMPOSABLES
+ */
+const { isMobile } = useBreakpoints();
+const { openNpsModal } = useAppzi();
+</script>
+
+<template>
+  <BalBtn
+    color="white"
+    :size="isMobile ? 'md' : 'sm'"
+    :circle="isMobile"
+    class="w-9 !px-0"
+    @click="openNpsModal"
+  >
+    <ThumbsUpIcon />
+  </BalBtn>
+</template>
diff --git a/src/components/cards/FeedbackCard.vue b/src/components/cards/FeedbackCard.vue
new file mode 100644
index 0000000000..497a95679a
--- /dev/null
+++ b/src/components/cards/FeedbackCard.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { useAppzi } from '@/composables/useAppzi';
+import useDarkMode from '@/composables/useDarkMode';
+
+const { darkMode } = useDarkMode();
+const { openNpsModal } = useAppzi();
+</script>
+
+<template>
+  <BalHStack
+    class="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg"
+    justify="between"
+    align="center"
+  >
+    <BalHStack align="center" spacing="sm">
+      <BalIcon name="thumbs-up" size="sm" />
+      <span class="text-xs font-bold">How did we do?</span>
+    </BalHStack>
+
+    <BalBtn size="xs" :color="darkMode ? 'gray' : 'white'" @click="openNpsModal"
+      >Give feedback</BalBtn
+    >
+  </BalHStack>
+</template>
diff --git a/src/components/contextual/pages/pool/staking/StakePreview.vue b/src/components/contextual/pages/pool/staking/StakePreview.vue
index 1c1bb20bb4..c0b7f52f07 100644
--- a/src/components/contextual/pages/pool/staking/StakePreview.vue
+++ b/src/components/contextual/pages/pool/staking/StakePreview.vue
@@ -8,6 +8,7 @@ import { AnyPool } from '@/services/pool/types';
 import useWeb3 from '@/services/web3/useWeb3';
 import StakeSummary from './StakeSummary.vue';
 import { StakeAction, useStakePreview } from './composables/useStakePreview';
+import FeedbackCard from '@/components/cards/FeedbackCard.vue';
 
 /**
  * TYPES
@@ -27,6 +28,7 @@ const { fNum } = useNumbers();
 const { isMismatchedNetwork } = useWeb3();
 const {
   isActionConfirmed,
+  isActionConfirming,
   confirmationReceipt,
   isLoading,
   currentShares,
@@ -46,7 +48,7 @@ const assetRowWidth = computed(
 </script>
 
 <template>
-  <BalStack vertical>
+  <BalVStack spacing="md">
     <BalStack horizontal spacing="sm" align="center">
       <BalCircle
         v-if="isActionConfirmed"
@@ -95,15 +97,17 @@ const assetRowWidth = computed(
           v-if="action === 'stake'"
           color="gradient"
           block
-          class="mb-2"
           @click="$router.push({ name: 'claim' })"
         >
           {{ $t('viewClaims') }}
         </BalBtn>
-        <BalBtn color="gray" outline block @click="handleClose">
+        <BalBtn v-else color="gray" outline block @click="handleClose">
           {{ $t('close') }}
         </BalBtn>
       </AnimatePresence>
     </BalStack>
-  </BalStack>
+    <transition name="pop">
+      <FeedbackCard v-if="isActionConfirming || isActionConfirmed" />
+    </transition>
+  </BalVStack>
 </template>
diff --git a/src/components/contextual/pages/pool/staking/composables/useStakePreview.ts b/src/components/contextual/pages/pool/staking/composables/useStakePreview.ts
index 5504a28481..f68e905778 100644
--- a/src/components/contextual/pages/pool/staking/composables/useStakePreview.ts
+++ b/src/components/contextual/pages/pool/staking/composables/useStakePreview.ts
@@ -30,6 +30,7 @@ export function useStakePreview(props: StakePreviewProps, emit) {
    */
   const isLoadingApprovalsForGauge = ref(false);
   const isActionConfirmed = ref(false);
+  const isActionConfirming = ref(false);
   const confirmationReceipt = ref<TransactionReceipt>();
   const stakeActions = ref<TransactionActionInfo[]>([]);
 
@@ -112,6 +113,7 @@ export function useStakePreview(props: StakePreviewProps, emit) {
   ) {
     try {
       const tx = await action();
+      isActionConfirming.value = true;
       addTransaction({
         id: tx.hash,
         type: 'tx',
@@ -130,6 +132,7 @@ export function useStakePreview(props: StakePreviewProps, emit) {
       });
       return tx;
     } catch (error) {
+      isActionConfirming.value = false;
       throw new Error(`Failed create ${actionType} transaction`, {
         cause: error,
       });
@@ -152,6 +155,7 @@ export function useStakePreview(props: StakePreviewProps, emit) {
 
   async function handleSuccess(receipt: TransactionReceipt) {
     isActionConfirmed.value = true;
+    isActionConfirming.value = false;
     confirmationReceipt.value = receipt;
     await Promise.all([refetchBalances(), refetchAllPoolStakingData()]);
     emit('success');
@@ -159,6 +163,7 @@ export function useStakePreview(props: StakePreviewProps, emit) {
 
   function handleClose() {
     isActionConfirmed.value = false;
+    isActionConfirming.value = false;
     confirmationReceipt.value = undefined;
     emit('close');
   }
@@ -194,6 +199,7 @@ export function useStakePreview(props: StakePreviewProps, emit) {
   return {
     //state
     isActionConfirmed,
+    isActionConfirming,
     confirmationReceipt,
     isLoading,
     currentShares,
diff --git a/src/components/footer/Footer.vue b/src/components/footer/Footer.vue
index 1d28ae91e7..d4219e26ff 100644
--- a/src/components/footer/Footer.vue
+++ b/src/components/footer/Footer.vue
@@ -12,9 +12,11 @@ import useNetwork from '@/composables/useNetwork';
 
 import AppLogo from '../images/AppLogo.vue';
 import { useThirdPartyServices } from '@/composables/useThirdPartyServices';
+import { useAppzi } from '@/composables/useAppzi';
 
 const { networkSlug } = useNetwork();
 const { handleThirdPartyModalToggle } = useThirdPartyServices();
+const { openNpsModal } = useAppzi();
 </script>
 
 <template>
@@ -208,6 +210,9 @@ const { handleThirdPartyModalToggle } = useThirdPartyServices();
           <div
             class="flex flex-wrap md:order-3 gap-x-3 lg:gap-x-4 gap-y-2 md:justify-end"
           >
+            <p>
+              <button class="policy" @click="openNpsModal">Feedback</button>
+            </p>
             <p>
               <router-link class="policy" :to="{ name: 'terms-of-use' }">
                 {{ $t('policies.termsOfUse') }}
diff --git a/src/components/forms/lock_actions/LockForm/components/LockPreviewModal/components/LockActions.vue b/src/components/forms/lock_actions/LockForm/components/LockPreviewModal/components/LockActions.vue
index 1b2e0e83d7..0f276b233d 100644
--- a/src/components/forms/lock_actions/LockForm/components/LockPreviewModal/components/LockActions.vue
+++ b/src/components/forms/lock_actions/LockForm/components/LockPreviewModal/components/LockActions.vue
@@ -25,6 +25,7 @@ import { ApprovalAction } from '@/composables/approvals/types';
 import useTokenApprovalActions from '@/composables/approvals/useTokenApprovalActions';
 import { captureBalancerException } from '@/lib/utils/errors';
 import { useCrossChainSync } from '@/providers/cross-chain-sync.provider';
+import FeedbackCard from '@/components/cards/FeedbackCard.vue';
 
 /**
  * TYPES
@@ -286,6 +287,9 @@ onBeforeMount(async () => {
       >
         {{ $t('getVeBAL.previewModal.returnToVeBalPage') }}
       </BalBtn>
+      <transition name="pop">
+        <FeedbackCard class="mt-3" />
+      </transition>
     </template>
   </div>
 </template>
diff --git a/src/components/forms/pool_actions/AddLiquidityForm/components/AddLiquidityPreview/AddLiquidityPreview.vue b/src/components/forms/pool_actions/AddLiquidityForm/components/AddLiquidityPreview/AddLiquidityPreview.vue
index f2e2a2ea04..7126dc3994 100644
--- a/src/components/forms/pool_actions/AddLiquidityForm/components/AddLiquidityPreview/AddLiquidityPreview.vue
+++ b/src/components/forms/pool_actions/AddLiquidityForm/components/AddLiquidityPreview/AddLiquidityPreview.vue
@@ -212,6 +212,7 @@ useIntervalFn(() => {
       :fiatTotal="missingPricesIn ? '-' : fiatValueIn"
       :priceImpact="priceImpact"
       :highPriceImpact="highPriceImpact"
+      class="mt-4"
     />
 
     <BalAlert
diff --git a/src/components/forms/pool_actions/AddLiquidityForm/components/AddLiquidityPreview/components/Actions.vue b/src/components/forms/pool_actions/AddLiquidityForm/components/AddLiquidityPreview/components/Actions.vue
index 14dcb75ec9..53ee7c7182 100644
--- a/src/components/forms/pool_actions/AddLiquidityForm/components/AddLiquidityPreview/components/Actions.vue
+++ b/src/components/forms/pool_actions/AddLiquidityForm/components/AddLiquidityPreview/components/Actions.vue
@@ -18,6 +18,7 @@ import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import { usePoolStaking } from '@/providers/local/pool-staking.provider';
 import useWeb3 from '@/services/web3/useWeb3';
 import useNetwork from '@/composables/useNetwork';
+import FeedbackCard from '@/components/cards/FeedbackCard.vue';
 
 /**
  * TYPES
@@ -131,58 +132,69 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <transition>
-    <BalActionSteps
-      v-if="!txState.confirmed || !txState.receipt"
-      :actions="actions"
-      primaryActionType="invest"
-      :disabled="rektPriceImpact || isMismatchedNetwork"
-      @success="handleSuccess"
-      @failed="handleFailed"
-    />
-    <div v-else>
-      <ConfirmationIndicator :txReceipt="txState.receipt" />
-      <BalBtn
-        v-if="lockablePoolId === pool.id"
-        tag="router-link"
-        :to="{
-          name: 'get-vebal',
-          query: {
-            returnRoute: $route.name,
-            returnParams: JSON.stringify({
-              id: pool.id,
-              networkSlug,
-            }),
-          },
-        }"
-        color="gradient"
-        block
-        class="flex mt-2"
-      >
-        <StarsIcon class="mr-2 h-5 text-orange-300" />{{ $t('lockToGetVeBAL') }}
-      </BalBtn>
-      <BalBtn
-        v-else-if="isStakablePool"
-        color="gradient"
-        block
-        class="flex mt-2"
-        @click="emit('showStakeModal')"
-      >
-        <StarsIcon class="mr-2 h-5 text-orange-300" />{{
-          $t('stakeToGetExtra')
-        }}
-      </BalBtn>
+  <div>
+    <transition>
+      <BalActionSteps
+        v-if="!txState.confirmed || !txState.receipt"
+        :actions="actions"
+        primaryActionType="invest"
+        :disabled="rektPriceImpact || isMismatchedNetwork"
+        @success="handleSuccess"
+        @failed="handleFailed"
+      />
+      <div v-else>
+        <ConfirmationIndicator :txReceipt="txState.receipt" />
+        <BalBtn
+          v-if="lockablePoolId === pool.id"
+          tag="router-link"
+          :to="{
+            name: 'get-vebal',
+            query: {
+              returnRoute: $route.name,
+              returnParams: JSON.stringify({
+                id: pool.id,
+                networkSlug,
+              }),
+            },
+          }"
+          color="gradient"
+          block
+          class="flex mt-2"
+        >
+          <StarsIcon class="mr-2 h-5 text-orange-300" />{{
+            $t('lockToGetVeBAL')
+          }}
+        </BalBtn>
+        <BalBtn
+          v-else-if="isStakablePool"
+          color="gradient"
+          block
+          class="flex mt-2"
+          @click="emit('showStakeModal')"
+        >
+          <StarsIcon class="mr-2 h-5 text-orange-300" />{{
+            $t('stakeToGetExtra')
+          }}
+        </BalBtn>
 
-      <BalBtn
-        tag="router-link"
-        :to="{ name: 'pool', params: { id: pool.id } }"
-        color="gray"
-        outline
-        block
-        class="mt-2"
-      >
-        {{ $t('returnToPool') }}
-      </BalBtn>
-    </div>
-  </transition>
+        <BalBtn
+          tag="router-link"
+          :to="{ name: 'pool', params: { id: pool.id } }"
+          color="gray"
+          outline
+          block
+          size="sm"
+          class="mt-2"
+        >
+          {{ $t('returnToPool') }}
+        </BalBtn>
+      </div>
+    </transition>
+    <transition name="pop">
+      <FeedbackCard
+        v-if="txState.confirming || txState.confirmed"
+        class="mt-3"
+      />
+    </transition>
+  </div>
 </template>
diff --git a/src/components/forms/pool_actions/WithdrawForm/components/WithdrawPreviewModal/WithdrawPreviewModal.vue b/src/components/forms/pool_actions/WithdrawForm/components/WithdrawPreviewModal/WithdrawPreviewModal.vue
index 495c14757a..786e04979c 100644
--- a/src/components/forms/pool_actions/WithdrawForm/components/WithdrawPreviewModal/WithdrawPreviewModal.vue
+++ b/src/components/forms/pool_actions/WithdrawForm/components/WithdrawPreviewModal/WithdrawPreviewModal.vue
@@ -173,6 +173,7 @@ function handleClose(): void {
       :pool="pool"
       :fiatTotal="fiatTotalOut"
       :priceImpact="priceImpact"
+      class="mt-4"
     />
 
     <WithdrawActions
diff --git a/src/components/forms/pool_actions/WithdrawForm/components/WithdrawPreviewModal/components/WithdrawActions.vue b/src/components/forms/pool_actions/WithdrawForm/components/WithdrawPreviewModal/components/WithdrawActions.vue
index f75eb50764..190c5f60f8 100644
--- a/src/components/forms/pool_actions/WithdrawForm/components/WithdrawPreviewModal/components/WithdrawActions.vue
+++ b/src/components/forms/pool_actions/WithdrawForm/components/WithdrawPreviewModal/components/WithdrawActions.vue
@@ -16,10 +16,11 @@ import { Pool } from '@/services/pool/types';
 import useWeb3 from '@/services/web3/useWeb3';
 import { TransactionActionInfo } from '@/types/transactions';
 
-import router from '@/plugins/router';
 import { useExitPool } from '@/providers/local/exit-pool.provider';
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 
+import FeedbackCard from '@/components/cards/FeedbackCard.vue';
+
 /**
  * TYPES
  */
@@ -151,13 +152,13 @@ async function submit(): Promise<TransactionResponse> {
   }
 }
 
-function redirect() {
+const returnRoute = computed(() => {
   if (shouldExitViaInternalBalance.value) {
-    router.push({ name: 'balances', params: { networkSlug } });
+    return { name: 'balances', params: { networkSlug } };
   } else {
-    router.push({ name: 'pool', params: { networkSlug, id: props.pool.id } });
+    return { name: 'pool', params: { networkSlug, id: props.pool.id } };
   }
-}
+});
 
 /**
  * WATCHERS
@@ -171,24 +172,41 @@ watch(blockNumber, () => {
 
 
 <template>
-  <transition>
-    <BalActionSteps
-      v-if="!txState.confirmed || !txState.receipt"
-      :actions="actions"
-      primaryActionType="withdraw"
-      :disabled="isMismatchedNetwork"
-      :isLoading="isBuildingTx"
-      :loadingLabel="
-        isBuildingTx ? $t('withdraw.preview.loadingLabel.building') : undefined
-      "
-      @success="handleSuccess"
-      @failed="handleFailed"
-    />
-    <div v-else>
-      <ConfirmationIndicator :txReceipt="txState.receipt" />
-      <BalBtn color="gray" outline block class="mt-2" @click="redirect">
-        {{ redirectLabel }}
-      </BalBtn>
-    </div>
-  </transition>
+  <div>
+    <transition>
+      <BalActionSteps
+        v-if="!txState.confirmed || !txState.receipt"
+        :actions="actions"
+        primaryActionType="withdraw"
+        :disabled="isMismatchedNetwork"
+        :isLoading="isBuildingTx"
+        :loadingLabel="
+          isBuildingTx
+            ? $t('withdraw.preview.loadingLabel.building')
+            : undefined
+        "
+        @success="handleSuccess"
+        @failed="handleFailed"
+      />
+      <div v-else>
+        <ConfirmationIndicator :txReceipt="txState.receipt" />
+        <BalBtn
+          tag="router-link"
+          :to="returnRoute"
+          color="gray"
+          outline
+          block
+          class="mt-2"
+        >
+          {{ redirectLabel }}
+        </BalBtn>
+      </div>
+    </transition>
+    <transition name="pop">
+      <FeedbackCard
+        v-if="txState.confirming || txState.confirmed"
+        class="mt-3"
+      />
+    </transition>
+  </div>
 </template>
diff --git a/src/components/navs/AppNav/AppNavActions.vue b/src/components/navs/AppNav/AppNavActions.vue
index 1fa06f0e1f..4e36c04163 100644
--- a/src/components/navs/AppNav/AppNavActions.vue
+++ b/src/components/navs/AppNav/AppNavActions.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 
 import DarkModeToggle from '@/components/btns/DarkModeToggle.vue';
+import FeedbackBtn from '@/components/btns/FeedbackBtn.vue';
 import useBreakpoints from '@/composables/useBreakpoints';
 import { useSidebar } from '@/composables/useSidebar';
 import useWeb3 from '@/services/web3/useWeb3';
@@ -36,6 +37,7 @@ function connectWalletHandler() {
   <div class="grid grid-rows-1 grid-flow-col gap-2">
     <DarkModeToggle v-if="isDesktop" />
     <AppNavActivityBtn v-if="account" />
+    <FeedbackBtn v-if="isDesktop" />
     <AppNavAccountBtn v-if="account" />
     <BalBtn
       v-else
diff --git a/src/components/navs/AppNav/AppNavActivityBtn/AppNavActivityBtn.vue b/src/components/navs/AppNav/AppNavActivityBtn/AppNavActivityBtn.vue
index 3c762953d5..712d1a099d 100644
--- a/src/components/navs/AppNav/AppNavActivityBtn/AppNavActivityBtn.vue
+++ b/src/components/navs/AppNav/AppNavActivityBtn/AppNavActivityBtn.vue
@@ -70,7 +70,7 @@ async function cancelOrder(orderId: string) {
       <BalBtn
         color="white"
         :size="upToLargeBreakpoint ? 'md' : 'sm'"
-        class="relative p-1"
+        class="relative py-1 w-9 !px-0"
         :circle="upToLargeBreakpoint"
       >
         <ActivityIcon v-if="pendingTransactions.length === 0" />
diff --git a/src/components/navs/AppNav/AppSidebar/SidebarContent.vue b/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
index 8b2c569e1a..f6f967439e 100644
--- a/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
+++ b/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
@@ -16,6 +16,7 @@ import DiscordIcon from '@/components/_global/icons/brands/DiscordIcon.vue';
 import MediumIcon from '@/components/_global/icons/brands/MediumIcon.vue';
 import YoutubeIcon from '@/components/_global/icons/brands/YoutubeIcon.vue';
 import GithubIcon from '@/components/_global/icons/brands/GithubIcon.vue';
+import { useAppzi } from '@/composables/useAppzi';
 
 /**
  * PROPS & EMITS
@@ -31,6 +32,7 @@ const { networkConfig } = useConfig();
 const { networkSlug } = useNetwork();
 const { t } = useI18n();
 const router = useRouter();
+const { openNpsModal } = useAppzi();
 
 /**
  * STATE
@@ -146,6 +148,9 @@ watch(blockNumber, async () => {
         {{ link.label }}
         <BalIcon name="arrow-up-right" size="sm" class="ml-1 text-secondary" />
       </BalLink>
+      <span class="px-4 pt-1 capitalize" @click="openNpsModal">{{
+        t('feedback')
+      }}</span>
     </div>
 
     <div class="px-4 mt-6">
diff --git a/src/components/web3/ThirdPartyServicesModal.vue b/src/components/web3/ThirdPartyServicesModal.vue
index 190e7c3c6b..e2e33377be 100644
--- a/src/components/web3/ThirdPartyServicesModal.vue
+++ b/src/components/web3/ThirdPartyServicesModal.vue
@@ -56,8 +56,10 @@ const services = [
   'alchemy',
   'the-graph',
   'fathom-analytics',
+  'appzi',
   'TRM-labs',
   'sentry',
+  'amazon-web-services',
 ];
 </script>
 
diff --git a/src/composables/useAppzi.ts b/src/composables/useAppzi.ts
new file mode 100644
index 0000000000..36172d0278
--- /dev/null
+++ b/src/composables/useAppzi.ts
@@ -0,0 +1,17 @@
+declare global {
+  interface Window {
+    appzi?: {
+      openSurvey: (surveyId: string) => void;
+    };
+  }
+}
+
+export function useAppzi() {
+  function openNpsModal() {
+    if (window?.appzi) {
+      window?.appzi.openSurvey('ca7039b5-a8b9-410b-b746-4071893a6d7e');
+    }
+  }
+
+  return { openNpsModal };
+}
diff --git a/src/composables/useTransactions.ts b/src/composables/useTransactions.ts
index 8d149778d3..038dce8a71 100644
--- a/src/composables/useTransactions.ts
+++ b/src/composables/useTransactions.ts
@@ -19,7 +19,7 @@ import { CowswapTransactionDetails } from './swap/useCowswap';
 import { processedTxs } from './useEthers';
 import useNotifications from './useNotifications';
 import useNumbers, { FNumFormats } from './useNumbers';
-import { isAvalanche, isBase, isPolygon, isZkevm } from './useNetwork';
+import { isPolygon } from './useNetwork';
 
 const WEEK_MS = 86_400_000 * 7;
 // Please update the schema version when making changes to the transaction structure.
@@ -270,10 +270,7 @@ function shouldCheckTx(transaction: Transaction, lastBlockNumber: number) {
 export async function postConfirmationDelay(
   tx: TransactionResponse
 ): Promise<TransactionReceipt> {
-  if (isPolygon.value) return tx.wait(10);
-  if (isZkevm.value) return tx.wait(10);
-  if (isAvalanche.value) return tx.wait(10);
-  if (isBase.value) return tx.wait(10);
+  if (isPolygon.value) return tx.wait(7);
 
   return tx.wait(1);
 }
diff --git a/src/locales/default.json b/src/locales/default.json
index 42b26b64e4..df35ce2846 100644
--- a/src/locales/default.json
+++ b/src/locales/default.json
@@ -459,6 +459,7 @@
       "linkText": "Gyroscope website"
     }
   },
+  "feedback": "feedback",
   "fees": "fees",
   "feesManagedByGauntlet": "Liquidity providers earn dynamic swap fees on every swap utilizing the liquidity in this pool. Dynamic swap fees are controlled by governance and are currently set by Gauntlet.",
   "feesTime": "Fees ({0})",
@@ -530,6 +531,7 @@
   "highRiskPool": "This is a higher-risk pool that contains one or more unlisted tokens. A liquidity pool is only as good as its weakest token! If a token were blacklisted, infinitely minted, frozen, or exploited in any other way, the value of this pool could go to 0. Balancer Foundation is never liable for losses incurred through using our UI or the Balancer protocol. Be careful, and do your own research!",
   "home": "Home",
   "hourAbbrev": "h",
+  "howDidWeDo": "How did we do?",
   "incentives": "incentives",
   "incentiveToken": "Incentive token",
   "incentivizedPool": "incentivized pool",
@@ -967,7 +969,9 @@
     "the-graph": "Used to fetch blockchain data from The Graph’s hosted service.",
     "fathom-analytics": "Used to understand user behavior on the site and marketing performance.",
     "TRM-labs": "Used to securely collect wallet addresses and shares it with TRM Labs Inc. for risk and compliance reasons.",
-    "sentry": "Used for error tracking and performance monitoring."
+    "sentry": "Used for error tracking and performance monitoring.",
+    "appzi": "Used to capture and store user feedback from optional surveys",
+    "amazon-web-services": "Used for a variety of infrastructure services, but primarily to fetch and cache blockchain data."
   },
   "settings": "Settings",
   "setUpEthereumWallet": "Balancer is a DeFi app on Ethereum. Set up an Ethereum Wallet to swap and provide liquidity here.",
diff --git a/src/pages/_layouts/PoolLayout.vue b/src/pages/_layouts/PoolLayout.vue
index 3935ac2ff7..44846c64ec 100644
--- a/src/pages/_layouts/PoolLayout.vue
+++ b/src/pages/_layouts/PoolLayout.vue
@@ -41,7 +41,7 @@ const layoutComponent = computed(() =>
 
 <template>
   <component :is="layoutComponent">
-    <router-view v-slot="{ Component }" :key="$route.path">
+    <router-view v-slot="{ Component }" :key="$route.fullPath">
       <PoolProvider>
         <transition appear name="appear">
           <component :is="Component" />
diff --git a/src/pages/cookies-policy.vue b/src/pages/cookies-policy.vue
index d877cb306e..b5e2434225 100644
--- a/src/pages/cookies-policy.vue
+++ b/src/pages/cookies-policy.vue
@@ -2,10 +2,10 @@
   <div class="pb-4">
     <div class="subsection">
       <h1>Balancer Cookies&nbsp;Policy</h1>
-      <p><em>Last Updated: June 2022</em></p>
+      <p><em>Last Updated: October 2023</em></p>
     </div>
     <div class="subsection">
-      <h2>Introduction and Scope of Policy</h2>
+      <h2>I. Introduction and Scope of Policy</h2>
       <p>
         This Cookies Policy (“Policy”) applies to your interaction with the
         Balancer Foundation, its subsidiary, Balancer OpCo Limited, and material
@@ -15,7 +15,7 @@
     </div>
 
     <div class="subsection">
-      <h2>About Cookies</h2>
+      <h2>II. About Cookies</h2>
       <p>
         Cookies are pieces of data stored on your device. Browser cookies are
         assigned by a web server to the browser on your device. When you return
@@ -24,10 +24,10 @@
       </p>
 
       <p>
-        We do not generally use cookies. We do not intentionally collect
-        information to customize your experience on the website or the
-        Balancer.fi user interface (UI) to the Balancer Protocol. (“Sites” or
-        “Site”).
+        We do not generally use cookies; however our third party vendors do. We
+        do not intentionally collect information to customize your experience on
+        the website or the Balancer.fi user interface (UI) to the Balancer
+        Protocol. (“Sites” or “Site”).
       </p>
       <p>
         Industry standards are currently evolving, and we may not separately
@@ -35,27 +35,27 @@
         configuration set in your internet browser.
       </p>
       <p>
-        Other parties that may collect information about your web browsing
-        behavior when you use our Site are generally limited to service
-        providers who may only use any information collected to provide services
-        for us and not to provide services or advertising for any other party.
-        Note, however, that we also provide certain widgets or tools on our
-        sites that allow you to interact with third parties who provide these
-        features, such as tools that allow web surfers to easily share
-        information on another platform. At other times, information from a
-        third party may be embedded on our Site, such as a map. These widgets,
-        tools, and informational items often function through the use of
-        third-party cookies utilized by the third party site. As a result, these
-        third parties may have access to information about your web browsing on
-        the pages of our Site where these widgets, tools, or information are
-        placed. You may wish to review information at third party sites, where
-        you have an account, to determine how these third parties treat data
-        that they obtain through the use of cookies.
+        Other parties that collect information about your web browsing behavior
+        when you use our Site are generally limited to service providers who
+        only use any information collected to provide services for us and not to
+        provide services or advertising for any other party. Note, however, that
+        we also provide certain widgets or tools on our sites that allow you to
+        interact with third parties who provide these features, such as tools
+        that allow web surfers to easily share information on another platform.
+        At other times, information from a third party may be embedded on our
+        Site, such as a map. These widgets, tools, and informational items often
+        function through the use of third-party cookies utilized by the third
+        party site. As a result, these third parties may have access to
+        information about your web browsing on the pages of our Site where these
+        widgets, tools, or information are placed. You may wish to review
+        information at third party sites, where you have an account, to
+        determine how these third parties treat data that they obtain through
+        the use of cookies.
       </p>
     </div>
 
     <div class="subsection">
-      <h2>Do You Have to Accept Cookies?</h2>
+      <h2>III. Do You Have to Accept Cookies?</h2>
 
       <p>
         You may be able to set your browser to reject cookies. If you set your
@@ -68,16 +68,16 @@
       </p>
     </div>
     <div class="subsection">
-      <h2>Additional Technologies</h2>
+      <h2>IV. Additional Technologies</h2>
       <p>
         We do not typically use additional technologies such as pixel tags, web
-        beacons, and clear GIFs. We may permit third-party service providers to
-        use these technologies. They may use these technologies for purposes
-        such as determining viewing and response rates.
+        beacons, and clear GIFs. We permit third-party service providers to use
+        these technologies. They use these technologies for purposes such as
+        determining viewing and response rates.
       </p>
     </div>
     <div class="subsection">
-      <h2>Using Information</h2>
+      <h2>V. Using Information</h2>
       <p>
         In addition to the uses described above, we may use information for
         purposes as allowed by law such as: servicing; communicating with you;
@@ -88,10 +88,10 @@
       </p>
     </div>
     <div>
-      <h2>Sharing</h2>
+      <h2>VI. Sharing</h2>
       <p>
-        We may share information with service providers with whom we work, such
-        as service providers and companies that help us service you better. When
+        We share information with service providers with whom we work, such as
+        service providers and companies that help us service you better. When
         permitted or required by law, we may share information with additional
         third parties for purposes including response to legal process. As
         applicable, please see our
diff --git a/src/pages/privacy-policy.vue b/src/pages/privacy-policy.vue
index be6b4a9710..bb8668dfcc 100644
--- a/src/pages/privacy-policy.vue
+++ b/src/pages/privacy-policy.vue
@@ -2,7 +2,7 @@
   <div class="pb-4">
     <div class="subsection">
       <h1>Balancer Privacy&nbsp;Policy</h1>
-      <p><em>Last Updated: August 2022</em></p>
+      <p><em>Last Updated: October 2023</em></p>
       <p>
         <em class="font-medium">
           This Privacy Policy explains how the Balancer Foundation, its
@@ -38,13 +38,13 @@
         <li>
           Balancer does not and has not stored personal information from users
           of the UI. However, Balancer uses third party services including,
-          without limitation, Cloudflare and Fathom Analytics who may collect
-          and store certain user information only for use in the provision of
-          their services.
+          without limitation, Cloudflare, Fathom Analytics, Appzi and others who
+          collect and store certain user information only for use in the
+          provision of their services.
         </li>
         <li>
-          Balancer does not set any cookies. However, it’s possible we may use
-          third party service providers in the future that set cookies.
+          Balancer does not set any cookies. However, we use third party service
+          providers that set cookies.
         </li>
       </ul>
     </div>
@@ -94,14 +94,14 @@
             Technologies:</em
           >
           We do not typically use tracking technologies, such as cookies and web
-          beacons, to collect information about you. Cookies are small data
-          files stored on your hard drive or in device memory that help us
-          improve the UI and your experience, see which areas and features of
-          the UI are popular, and count visits. Web beacons (also known as
-          “pixel tags” or “clear GIFs”) are electronic images that we use on the
-          UI to help deliver cookies, count visits, and understand usage and
-          campaign effectiveness. For more information about cookies and how to
-          disable them, see our
+          beacons, to collect information about you; however, third parties we
+          rely on may do so. Cookies are small data files stored on your hard
+          drive or in device memory that help us improve the UI and your
+          experience, see which areas and features of the UI are popular, and
+          count visits. Web beacons (also known as “pixel tags” or “clear GIFs”)
+          are electronic images that we use on the UI to help deliver cookies,
+          count visits, and understand usage and campaign effectiveness. For
+          more information about cookies and how to disable them, see our
           <router-link :to="{ name: 'cookies-policy' }">
             <span className="link">Cookies Policy</span>
           </router-link>
@@ -272,9 +272,9 @@
       <h2>Your Choices</h2>
       <h3>Cookies</h3>
       <p>
-        Balancer does not typically use any cookies. It reserves the ability to
-        use them to affect the availability and functionality of the UI. For
-        more information about cookies and how to disable them, see our
+        Balancer and its third party vendors may use any cookies to affect the
+        availability and functionality of the UI. For more information about
+        cookies and how to disable them, see our
         <router-link :to="{ name: 'cookies-policy' }">
           <span className="text-blue-500 hover:text-blue-800 transition-colors"
             >Cookies Policy</span
diff --git a/src/pages/terms-of-use.vue b/src/pages/terms-of-use.vue
index 14763569ed..e0534e79e8 100644
--- a/src/pages/terms-of-use.vue
+++ b/src/pages/terms-of-use.vue
@@ -2,7 +2,7 @@
   <div class="pb-4">
     <div class="subsection">
       <h1>Balancer Terms of Use</h1>
-      <p><em>Last updated: November 2022</em></p>
+      <p><em>Last updated: October 2023</em></p>
       <p>
         <em class="font-semibold">
           Do not access this site where such access is prohibited by applicable
@@ -94,16 +94,33 @@
         would be appropriate.
       </p>
       <p>
-        You acknowledge and agree that Balancer has no control over any
-        transactions conducted through the Balancer Protocol, the method of
-        payment of any transactions or any actual payments of transactions
-        including use of any third-party services such as Metamask, or other
-        wallet services. Likewise, you must ensure that you have a sufficient
-        balance of the applicable cryptocurrency tokens stored at your Balancer
+        <span class="italic font-semibold"
+          >You acknowledge and agree that Balancer has no control over any
+          transactions conducted through the Balancer Protocol, the method of
+          payment of any transactions or any actual payments of transactions
+          including use of any third-party services such as Metamask, or other
+          wallet services.
+        </span>
+        Likewise, you must ensure that you have a sufficient balance of the
+        applicable cryptocurrency tokens stored at your Balancer
         Protocol-compatible wallet address (“Cryptocurrency Wallet”) to complete
         any transaction on the Balancer Protocol or the Ethereum network before
         initiating such transaction.
       </p>
+      <p>
+        You acknowledge and accept the material potential risks associated with
+        using the smart contracts that can be accessed via the Balancer user
+        interface including, without limitation, the smart contracts for
+        Balancer Pools. Before using these features or Pools, please confirm you
+        understand the functionality and risks. For more information about the
+        risks, please carefully read
+
+        <router-link :to="{ name: 'risks' }">
+          <span className="link"
+            >https://app.balancer.fi/#/risks</span
+          > </router-link
+        >.
+      </p>
     </div>
     <div class="subsection">
       <h2>3. Access / Disclaimer of Warranties</h2>
@@ -280,22 +297,24 @@
           value or you being unable to complete a Smart Contract.
         </li>
         <li>
-          You are reminded of the inherent risks with digital assets and
-          decentralized finance including the fact that tokens are not legal
-          tender and are not backed by any government. Unlike fiat currencies,
-          which are regulated and backed by local governments and central banks,
-          tokens are based only on technology and user consensus, which means
-          that in cases of manipulations or market panic, central governments
-          will not take any corrective actions or measures to achieve stability,
-          maintain liquidity or protect their value. There is a possibility that
-          certain transactions cannot be settled or may be difficult to settle,
-          or can be completed only at significantly adverse prices depending on
-          the market situation and/or market volume. Transactions may be
-          irreversible, and, accordingly, potential losses due to fraudulent or
-          accidental transactions are not recoverable. Some blockchain
-          transactions are deemed to be completed when recorded on a public
-          ledger, which is not necessarily the date or time when you or another
-          party initiated the transaction.
+          <span class="italic font-semibold">
+            You are reminded of the inherent risks with digital assets and
+            decentralized finance including the fact that tokens are not legal
+            tender and are not backed by any government.</span
+          >
+          Unlike fiat currencies, which are regulated and backed by local
+          governments and central banks, tokens are based only on technology and
+          user consensus, which means that in cases of manipulations or market
+          panic, central governments will not take any corrective actions or
+          measures to achieve stability, maintain liquidity or protect their
+          value. There is a possibility that certain transactions cannot be
+          settled or may be difficult to settle, or can be completed only at
+          significantly adverse prices depending on the market situation and/or
+          market volume. Transactions may be irreversible, and, accordingly,
+          potential losses due to fraudulent or accidental transactions are not
+          recoverable. Some blockchain transactions are deemed to be completed
+          when recorded on a public ledger, which is not necessarily the date or
+          time when you or another party initiated the transaction.
         </li>
         <li>
           The regulatory frameworks applicable to blockchain transactions in
@@ -485,7 +504,7 @@
         invitation or recommendation to buy or sell tokens or any other
         financial services and is not intended to be relied upon by you in
         making any specific decision to buy or sell a token.
-        <em class="font-semibold"
+        <em class="italic font-semibold"
           >We recommend that you seek independent advice from financial, legal
           and tax advisors before making any such decision particularly in light
           of the risks associated with digital assets.</em