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 <[email protected]>

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" />

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;
+}

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 }}

src/components/_global/icons/ActivityIcon.vue

@@ -1,15 +1,15 @@
 <template>
   <svg
-    width="28"
-    height="28"
+    width="24"
+    height="24"
     viewBox="0 0 28 28"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <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"
     />

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>

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"

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>

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>

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>

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,13 +155,15 @@ 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');
   }
 
   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,

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') }}

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>

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