Merge branch 'release/1.11.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balancer-labs/frontend-v2",
-  "version": "1.10.4",
+  "version": "1.11.0",
   "engines": {
     "node": "14.x",
     "npm": ">=7"
@@ -55,7 +55,7 @@
     "apexcharts": "^3.23.1",
     "autoprefixer": "^9.8.6",
     "axios": "0.21.1",
-    "bnc-notify": "^1.6.2",
+    "bnc-sdk": "^3.4.1",
     "bs58": "^4.0.1",
     "core-js": "^3.6.5",
     "d3": "^6.5.0",

src/App.vue

@@ -26,8 +26,7 @@ import useWeb3Watchers from '@/composables/useWeb3Watchers';
 import AppNav from '@/components/navs/AppNav/AppNav.vue';
 import AppHero from '@/components/heros/AppHero.vue';
 import WalletSelectModal from '@/components/web3/WalletSelectModal.vue';
-import useVueWeb3 from '@/services/web3/useVueWeb3';
-import { rpcProviderService } from '@/services/rpc-provider/rpc-provider.service';
+import useWeb3 from '@/services/web3/useWeb3';
 import { DEFAULT_TOKEN_DECIMALS } from './constants/tokens';
 
 import Notifications from '@/components/notifications/Notifications.vue';
@@ -46,22 +45,16 @@ export default defineComponent({
   setup() {
     // COMPOSABLES
     useWeb3Watchers();
-    const { isWalletSelectVisible, toggleWalletSelectModal } = useVueWeb3();
+    const { isWalletSelectVisible, toggleWalletSelectModal } = useWeb3();
     const store = useStore();
     const route = useRoute();
 
     // COMPUTED
     const isHomePage = computed(() => route.path === '/');
 
-    // METHODS
-
-    const setBlockNumber = (blockNumber: number) =>
-      store.commit('web3/setBlockNumber', blockNumber);
-
     // CALLBACKS
     onBeforeMount(() => {
       store.dispatch('app/init');
-      rpcProviderService.initBlockListener(setBlockNumber);
     });
 
     return {

src/components/_global/BalModal/BalModal.vue

@@ -83,8 +83,7 @@ export default defineComponent({
 
 <style scoped>
 .bal-modal {
-  @apply top-0 left-0 fixed h-screen w-full;
-  z-index: 9999999999;
+  @apply top-0 left-0 fixed h-screen w-full z-40;
 }
 
 .content-container {

src/components/_global/BalPopover/BalPopover.vue

@@ -86,7 +86,7 @@ export default defineComponent({
 
 <style>
 .bal-popover-wrapper {
-  @apply top-full invisible opacity-0 absolute z-10 pt-3;
+  @apply top-full invisible opacity-0 absolute z-30 pt-3;
   transition: all 0.2s ease-in-out;
 }
 

src/components/_global/BalTable/BalTable.vue

@@ -14,7 +14,7 @@
             :style="{ width: `${column?.width}px` }"
           />
         </colgroup>
-        <thead class="bg-white dark:bg-gray-900 z-20">
+        <thead class="bg-white dark:bg-gray-900 z-10">
           <th
             v-for="(column, columnIndex) in filteredColumns"
             :key="`header-${column.id}`"

src/components/cards/TradeCard/GasReimbursement.vue

@@ -26,7 +26,7 @@ import eligibleAssetList from '@balancer-labs/assets/lists/eligible.json';
 import { useI18n } from 'vue-i18n';
 import { EXTERNAL_LINKS } from '@/constants/links';
 import { getOriginalAddress } from '@/services/coingecko';
-import useVueWeb3 from '@/services/web3/useVueWeb3';
+import useWeb3 from '@/services/web3/useWeb3';
 import { TOKENS } from '@/constants/tokens';
 
 export default defineComponent({
@@ -47,7 +47,7 @@ export default defineComponent({
 
   setup(props) {
     const store = useStore();
-    const { appNetworkConfig } = useVueWeb3();
+    const { appNetworkConfig } = useWeb3();
     const isBalForGasBudget = ref<boolean>(false);
     const { t } = useI18n();
 

src/components/cards/TradeCard/TradeCard.vue

@@ -110,10 +110,13 @@ import TradeSettingsPopover, {
 } from '@/components/popovers/TradeSettingsPopover.vue';
 import GasReimbursement from './GasReimbursement.vue';
 import { useI18n } from 'vue-i18n';
-import useVueWeb3 from '@/services/web3/useVueWeb3';
+import useWeb3 from '@/services/web3/useWeb3';
 import useBreakpoints from '@/composables/useBreakpoints';
 import useTokens from '@/composables/useTokens';
 import useDarkMode from '@/composables/useDarkMode';
+import { configService } from '@/services/config/config.service';
+
+const { nativeAsset } = configService.network;
 
 export default defineComponent({
   components: {
@@ -129,12 +132,12 @@ export default defineComponent({
     const highPiAccepted = ref(false);
     const store = useStore();
     const router = useRouter();
-    const { explorerLinks } = useVueWeb3();
+    const { explorerLinks } = useWeb3();
     const { t } = useI18n();
     const { bp } = useBreakpoints();
 
     const { tokens } = useTokens();
-    const { userNetworkConfig } = useVueWeb3();
+    const { userNetworkConfig } = useWeb3();
     const { darkMode } = useDarkMode();
 
     const exactIn = ref(true);
@@ -146,6 +149,10 @@ export default defineComponent({
     const txHash = ref('');
     const modalTradePreviewIsOpen = ref(false);
 
+    const tokenIn = computed(() => tokens.value[tokenInAddress.value]);
+
+    const tokenOut = computed(() => tokens.value[tokenOutAddress.value]);
+
     const liquiditySelection = computed(() => store.state.app.tradeLiquidity);
 
     const tradeCardShadow = computed(() => {
@@ -210,7 +217,9 @@ export default defineComponent({
       tokenOutAmountInput: tokenOutAmount,
       tokens,
       isWrap,
-      isUnwrap
+      isUnwrap,
+      tokenIn,
+      tokenOut
     });
     const { errorMessage } = useValidation(
       tokenInAddress,
@@ -235,10 +244,13 @@ export default defineComponent({
         };
       }
       switch (errorMessage.value) {
-        case TradeValidation.NO_ETHER:
+        case TradeValidation.NO_NATIVE_ASSET:
           return {
-            header: t('noEth'),
-            body: t('noEthDetailed')
+            header: t('noNativeAsset', [nativeAsset.symbol]),
+            body: t('noNativeAssetDetailed', [
+              nativeAsset.symbol,
+              configService.network.chainName
+            ])
           };
         case TradeValidation.NO_BALANCE:
           return {

src/components/cards/TradeCard/TradeRoute.vue

@@ -132,7 +132,7 @@ import { SwapV2, SubgraphPoolBase } from '@balancer-labs/sor2';
 import useNumbers from '@/composables/useNumbers';
 import { SorReturn } from '@/lib/utils/balancer/helpers/sor/sorManager';
 import { useI18n } from 'vue-i18n';
-import useVueWeb3 from '@/services/web3/useVueWeb3';
+import useWeb3 from '@/services/web3/useWeb3';
 import useTokens from '@/composables/useTokens';
 
 interface Route {
@@ -186,7 +186,7 @@ export default defineComponent({
     const { fNum } = useNumbers();
     const { t } = useI18n();
 
-    const { userNetworkConfig } = useVueWeb3();
+    const { userNetworkConfig } = useWeb3();
     const { tokens } = useTokens();
 
     const visible = ref(false);

src/components/cards/TradeCardGP/TradeCardGP.vue

@@ -100,8 +100,12 @@ import TradeSettingsPopover, {
   TradeSettingsContext
 } from '@/components/popovers/TradeSettingsPopover.vue';
 
+import { configService } from '@/services/config/config.service';
+
 import TradePairGP from './TradePairGP.vue';
 
+const { nativeAsset } = configService.network;
+
 export default defineComponent({
   components: {
     TradePairGP,
@@ -178,10 +182,13 @@ export default defineComponent({
         };
       }
       switch (errorMessage.value) {
-        case TradeValidation.NO_ETHER:
+        case TradeValidation.NO_NATIVE_ASSET:
           return {
-            header: t('noEth'),
-            body: t('noEthDetailed')
+            header: t('noNativeAsset', [nativeAsset.symbol]),
+            body: t('noNativeAssetDetailed', [
+              nativeAsset.symbol,
+              configService.network.chainName
+            ])
           };
         case TradeValidation.NO_BALANCE:
           return {