feat: Add LP tokens to add liquidity form

src/components/forms/pool_actions/AddLiquidityForm/AddLiquidityForm.vue

@@ -6,7 +6,7 @@ import StakePreviewModal from '@/components/contextual/pages/pool/staking/StakeP
 import TokenInput from '@/components/inputs/TokenInput/TokenInput.vue';
 import { tokenWeight, usePoolHelpers } from '@/composables/usePoolHelpers';
 import { LOW_LIQUIDITY_THRESHOLD } from '@/constants/poolLiquidity';
-import { bnum, includesAddress, isSameAddress } from '@/lib/utils';
+import { bnum, includesAddress } from '@/lib/utils';
 import { isRequired } from '@/lib/utils/validations';
 import { Pool } from '@/services/pool/types';
 import useWeb3 from '@/services/web3/useWeb3';
@@ -15,11 +15,9 @@ import useVeBal from '@/composables/useVeBAL';
 import AddLiquidityPreview from './components/AddLiquidityPreview/AddLiquidityPreview.vue';
 import AddLiquidityTotals from './components/AddLiquidityTotals.vue';
 
-import MissingPoolTokensAlert from './components/MissingPoolTokensAlert.vue';
 import { useTokens } from '@/providers/tokens.provider';
 import { isEqual } from 'lodash';
 import { useJoinPool } from '@/providers/local/join-pool.provider';
-import { useUserTokens } from '@/providers/local/user-tokens.provider';
 
 /**
  * TYPES
@@ -42,12 +40,9 @@ const showStakeModal = ref(false);
 /**
  * COMPOSABLES
  */
-const {
-  managedPoolWithSwappingHalted,
-  isDeepPool,
-  isPreMintedBptPool,
-  poolJoinTokens,
-} = usePoolHelpers(toRef(props, 'pool'));
+const { managedPoolWithSwappingHalted, poolJoinTokens } = usePoolHelpers(
+  toRef(props, 'pool')
+);
 const { veBalTokenInfo } = useVeBal();
 const { isWalletReady, startConnectWithInjectedProvider, isMismatchedNetwork } =
   useWeb3();
@@ -64,8 +59,6 @@ const {
   setTokensIn,
 } = useJoinPool();
 
-const { tokensWithBalance } = useUserTokens();
-
 /**
  * COMPUTED
  */
@@ -85,28 +78,14 @@ const excludedTokens = computed((): string[] => {
   return tokens;
 });
 
-const joinTokensWithBalance = computed<string[]>(() =>
-  poolJoinTokens.value.filter(
-    address =>
-      includesAddress(tokensWithBalance.value, address) ||
-      isSameAddress(address, wrappedNativeAsset.value.address)
-  )
-);
-
-const joinTokensWithoutBalance = computed<string[]>(() =>
-  poolJoinTokens.value.filter(
-    address => !includesAddress(tokensWithBalance.value, address)
-  )
-);
-
 async function initializeTokensForm(isSingleAssetJoin: boolean) {
   if (isSingleAssetJoin) {
     // Single asset joins are only relevant for Composable pools where swap
     // joins are possible. In this case we want to default to the wrapped native
     // asset.
     setTokensIn([wrappedNativeAsset.value.address]);
   } else {
-    setTokensIn(joinTokensWithBalance.value);
+    setTokensIn(poolJoinTokens.value);
   }
 }
 
@@ -150,19 +129,13 @@ onBeforeMount(() => {
  * WATCHERS
  */
 watch(
-  [isSingleAssetJoin, joinTokensWithBalance],
-  (
-    [isSingleAsset, newJoinTokensWithBalance],
-    [prevIsSingleAsset, prevJoinTokensWithBalance]
-  ) => {
+  [isSingleAssetJoin, poolJoinTokens],
+  ([isSingleAsset, newJoinTokens], [prevIsSingleAsset, prevJoinToken]) => {
     // Initialize token form if token balances change (ie. After investing, transaction confirmed or when account changes)
     // only if preview modal is not open
     if (!showPreview.value) {
       const hasTabChanged = prevIsSingleAsset !== isSingleAsset;
-      const hasUserTokensChanged = !isEqual(
-        prevJoinTokensWithBalance,
-        newJoinTokensWithBalance
-      );
+      const hasUserTokensChanged = !isEqual(prevJoinToken, newJoinTokens);
       if (hasUserTokensChanged || hasTabChanged) {
         initializeTokensForm(isSingleAsset);
       }
@@ -207,13 +180,6 @@ watch(
       @update:address="onTokenChange"
     />
 
-    <MissingPoolTokensAlert
-      v-if="!isSingleAssetJoin"
-      :showSingleTokenSuggestion="isDeepPool && isPreMintedBptPool"
-      :poolTokensWithBalance="joinTokensWithBalance"
-      :poolTokensWithoutBalance="joinTokensWithoutBalance"
-    />
-
     <AddLiquidityTotals :pool="pool" />
 
     <div

src/components/forms/pool_actions/AddLiquidityForm/components/AddLiquidityTotals.vue

@@ -5,6 +5,7 @@ import { useJoinPool } from '@/providers/local/join-pool.provider';
 import { Pool } from '@/services/pool/types';
 import useWeb3 from '@/services/web3/useWeb3';
 import { useAddLiquidityTotals } from '../composables/useAddLiquidityTotals';
+import { useUserSettings } from '@/providers/user-settings.provider';
 
 type Props = {
   pool: Pool;
@@ -17,13 +18,15 @@ const props = defineProps<Props>();
  */
 const { fNum } = useNumbers();
 const { isWalletReady } = useWeb3();
+const { slippage } = useUserSettings();
 
 const {
   highPriceImpact,
   isLoadingQuery,
   priceImpact,
   supportsProportionalOptimization,
   fiatValueIn,
+  bptOut,
 } = useJoinPool();
 
 const {
@@ -60,7 +63,31 @@ const {
         </div>
       </div>
     </div>
-    <div :class="['data-table-row price-impact-row', priceImpactClasses]">
+    <div :class="['data-table-row secondary-row']">
+      <div class="p-2">LP tokens</div>
+      <div class="data-table-number-col">
+        <div class="flex">
+          <span v-if="!isLoadingQuery">
+            {{ fNum(bptOut, FNumFormats.token) }}
+          </span>
+          <BalLoadingBlock v-else class="w-10" />
+
+          <BalTooltip
+            :text="`LP tokens you are expected to recieve, not
+          including possible slippage (${fNum(slippage, FNumFormats.percent)})`"
+          >
+            <template #activator>
+              <BalIcon
+                name="info"
+                size="xs"
+                class="-mb-px ml-1 text-gray-400"
+              />
+            </template>
+          </BalTooltip>
+        </div>
+      </div>
+    </div>
+    <div :class="['data-table-row secondary-row', priceImpactClasses]">
       <div class="p-2">
         {{ $t('priceImpact') }}
       </div>
@@ -134,7 +161,7 @@ const {
   @apply text-lg font-bold dark:bg-gray-800;
 }
 
-.price-impact-row {
+.secondary-row {
   @apply text-sm rounded-b-lg;
 }
 </style>