Hotfix 1.23.3 - Fix trade errors display logic (#939)

* Don't display unnecessary warnings

* 1.23.3

* Correctly handle wallet not connected error

* Clean up conditionals

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balancer-labs/frontend-v2",
-  "version": "1.23.2",
+  "version": "1.23.3",
   "engines": {
     "node": "14.x",
     "npm": ">=7"

src/composables/trade/useValidation.ts

@@ -1,6 +1,7 @@
 import { computed, Ref } from 'vue';
 import useWeb3 from '@/services/web3/useWeb3';
 import useTokens from '../useTokens';
+import { bnum } from '@/lib/utils';
 
 const MIN_NATIVE_ASSET_REQUIRED = 0.0001;
 
@@ -22,42 +23,55 @@ export default function useValidation(
   const { isWalletReady } = useWeb3();
   const { nativeAsset, balances } = useTokens();
 
-  const invalidTokenAmounts = computed(
+  const noAmounts = computed(
     () =>
       !isValidTokenAmount(tokenInAmount.value) &&
       !isValidTokenAmount(tokenOutAmount.value)
   );
 
-  const validationStatus = computed(() => {
-    if (!isWalletReady) return TradeValidation.NO_ACCOUNT;
+  const missingToken = computed(
+    () => !tokenInAddress.value || !tokenOutAddress.value
+  );
 
-    if (invalidTokenAmounts.value) return TradeValidation.EMPTY;
+  const exceedsBalance = computed(
+    () =>
+      !balances.value[tokenInAddress.value] ||
+      bnum(balances.value[tokenInAddress.value]).lt(tokenInAmount.value)
+  );
 
-    const nativeAssetBalance = parseFloat(balances.value[nativeAsset.address]);
-    if (nativeAssetBalance < MIN_NATIVE_ASSET_REQUIRED) {
-      return TradeValidation.NO_NATIVE_ASSET;
-    }
+  const notEnoughForGas = computed(() => {
+    const nativeAssetBalance = bnum(balances.value[nativeAsset.address]);
+    return nativeAssetBalance.lt(MIN_NATIVE_ASSET_REQUIRED);
+  });
 
-    if (
-      parseFloat(tokenOutAmount.value) == 0 ||
+  /**
+   * Not definitive. Only probably true if no other exceptions,
+   * i.e. valid inputs, wallet connected, enough balance, etc.
+   */
+  const probablyNotEnoughLiquidity = computed(
+    () =>
+      bnum(tokenOutAmount.value).eq(0) ||
       tokenOutAmount.value.trim() === '' ||
-      parseFloat(tokenInAmount.value) == 0 ||
+      bnum(tokenInAmount.value).eq(0) ||
       tokenInAmount.value.trim() === ''
-    )
-      return TradeValidation.NO_LIQUIDITY;
+  );
 
-    if (
-      !balances.value[tokenInAddress.value] ||
-      parseFloat(balances.value[tokenInAddress.value]) <
-        parseFloat(tokenInAmount.value)
-    )
-      return TradeValidation.NO_BALANCE;
+  const validationStatus = computed(() => {
+    if (!isWalletReady.value) return TradeValidation.NO_ACCOUNT;
+
+    if (noAmounts.value || missingToken.value) return TradeValidation.EMPTY;
+
+    if (notEnoughForGas.value) return TradeValidation.NO_NATIVE_ASSET;
+
+    if (exceedsBalance.value) return TradeValidation.NO_BALANCE;
+
+    if (probablyNotEnoughLiquidity.value) return TradeValidation.NO_LIQUIDITY;
 
     return TradeValidation.VALID;
   });
 
   function isValidTokenAmount(tokenAmount: string) {
-    return parseFloat(tokenAmount) > 0 && tokenAmount.trim() !== '';
+    return bnum(tokenAmount).gt(0) && tokenAmount.trim() !== '';
   }
 
   const errorMessage = computed(() => validationStatus.value);