chore: Hide cowswap

src/components/cards/SwapCard/SwapCard.vue

@@ -60,79 +60,6 @@
         block
         @click.prevent="handlePreviewButton"
       />
-      <div
-        v-if="swapping.isCowswapSupportedOnNetwork.value"
-        class="flex items-center mt-5 h-8 text-sm"
-      >
-        <Transition name="fade" mode="out-in">
-          <div
-            v-if="swapping.isGaslessSwappingDisabled.value"
-            class="text-secondary"
-          >
-            <div class="flex gap-2 items-center">
-              <span class="text-lg">⛽</span>
-              <Transition name="fade" mode="out-in">
-                <p v-if="swapping.isWrap.value">
-                  {{ $t('swapToggle.wrapEth') }}
-                </p>
-                <p v-else-if="swapping.isUnwrap.value">
-                  {{ $t('swapToggle.unwrapEth') }}
-                </p>
-                <p v-else>
-                  {{ $t('swapToggle.fromEth') }}
-                </p>
-              </Transition>
-            </div>
-          </div>
-
-          <div v-else>
-            <div class="flex items-center swap-gasless">
-              <BalTooltip
-                width="64"
-                :disabled="!swapping.isGaslessSwappingDisabled.value"
-              >
-                <template #activator>
-                  <BalToggle
-                    name="swapGasless"
-                    :checked="swapping.swapGasless.value"
-                    :disabled="swapping.isGaslessSwappingDisabled.value"
-                    @toggle="swapping.toggleSwapGasless"
-                  />
-                </template>
-                <div
-                  v-text="
-                    swapping.isWrapUnwrapSwap.value
-                      ? $t('swapGaslessToggle.disabledTooltip.wrapUnwrap')
-                      : $t('swapGaslessToggle.disabledTooltip.eth')
-                  "
-                />
-              </BalTooltip>
-              <Transition name="fade" mode="out-in">
-                <span
-                  v-if="swapping.swapGasless.value"
-                  class="pl-2 text-sm text-gray-600 dark:text-gray-400"
-                  >{{ $t('swapToggle.swapGasless') }}</span
-                >
-                <span
-                  v-else
-                  class="pl-2 text-sm text-gray-600 dark:text-gray-400"
-                  >{{ $t('swapToggle.swapWithGas') }}</span
-                >
-              </Transition>
-              <BalTooltip width="64">
-                <template #activator>
-                  <BalIcon
-                    name="info"
-                    size="xs"
-                    class="flex ml-1 text-gray-400"
-                  />
-                </template>
-                <div v-html="$t('swapGaslessToggle.tooltip')" />
-              </BalTooltip>
-            </div>
-          </div>
-        </Transition>
-      </div>
       <SwapRoute
         v-if="alwaysShowRoutes"
         :addressIn="swapping.tokenIn.value.address"

src/components/links/CowswapLink.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { buildProtocolIconURL } from '@/lib/utils/urls';
+</script>
+
+<template>
+  <BalLink
+    href="https://swap.cow.fi"
+    external
+    noStyle
+    class="flex items-center p-4 text-sm dark:bg-gray-850 rounded-lg border dark:border-0"
+  >
+    <img
+      :src="buildProtocolIconURL('cowswap')"
+      alt="CoW Swap"
+      class="mr-4 w-6 h-6"
+    />
+    Swap gasless on CoW Swap
+    <BalIcon
+      name="arrow-up-right"
+      size="sm"
+      class="ml-2 text-gray-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+    />
+  </BalLink>
+</template>

src/composables/swap/useSwapping.ts

@@ -3,7 +3,7 @@ import { parseFixed } from '@ethersproject/bignumber';
 
 import LS_KEYS from '@/constants/local-storage.keys';
 import { NATIVE_ASSET_ADDRESS } from '@/constants/tokens';
-import { bnum, lsGet, lsSet } from '@/lib/utils';
+import { bnum, lsSet } from '@/lib/utils';
 import { getWrapAction, WrapType } from '@/lib/utils/balancer/wrapper';
 import { COW_SUPPORTED_NETWORKS } from '@/services/cowswap/constants';
 import {
@@ -26,9 +26,7 @@ export type SwapRoute = 'wrapUnwrap' | 'balancer' | 'cowswap' | 'joinExit';
 
 export type UseSwapping = ReturnType<typeof useSwapping>;
 
-export const swapGasless = ref<boolean>(
-  lsGet<boolean>(LS_KEYS.Swap.Gasless, true)
-);
+export const swapGasless = ref<boolean>(false);
 
 export default function useSwapping(
   exactIn: Ref<boolean>,

src/composables/useNetwork.ts

@@ -62,6 +62,10 @@ export const isPoolBoostsEnabled = computed<boolean>(
   () => configService.network.pools.BoostsEnabled
 );
 
+export const isCowswapSupportedNetwork = computed<boolean>(
+  () => isMainnet.value || isGnosis.value
+);
+
 /**
  * METHODS
  */

src/lib/utils/urls.ts

@@ -36,3 +36,12 @@ export function buildConnectorIconURL(wallet: Wallet): string {
     import.meta.url
   ).href;
 }
+
+export function buildProtocolIconURL(protocol: string): string {
+  return new URL(
+    // https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url
+    // Warning: Don't extract this template into a variable or it will stop working in production builds
+    `/src/assets/images/icons/protocols/${protocol}.svg`,
+    import.meta.url
+  ).href;
+}

src/pages/swap.vue

@@ -7,8 +7,9 @@ import Col3Layout from '@/components/layouts/Col3Layout.vue';
 import usePoolFilters from '@/composables/pools/usePoolFilters';
 import useBreakpoints from '@/composables/useBreakpoints';
 import BridgeLink from '@/components/links/BridgeLink.vue';
-import { hasBridge } from '@/composables/useNetwork';
+import { hasBridge, isCowswapSupportedNetwork } from '@/composables/useNetwork';
 import { provideUserTokens } from '@/providers/local/user-tokens.provider';
+import CowswapLink from '@/components/links/CowswapLink.vue';
 
 /**
  * PROVIDERS
@@ -70,6 +71,7 @@ onMounted(() => {
 
       <template #gutterRight>
         <!-- <PairPriceGraph /> -->
+        <CowswapLink v-if="isCowswapSupportedNetwork" />
         <BridgeLink v-if="hasBridge" class="mt-4" />
       </template>
     </Col3Layout>