diff --git a/src/components/assets/DynamicLinks.vue b/src/components/assets/DynamicLinks.vue index 05801d061..3d8dc7be5 100644 --- a/src/components/assets/DynamicLinks.vue +++ b/src/components/assets/DynamicLinks.vue @@ -6,7 +6,7 @@ :key="index" class="card" :style="`background-image: url('${t.background}'); background-size: cover; background-position: center;`" - @click="goToLink(t.link)" + @click="navigateInNewTab(t.link)" >
{ - window.open(link, '_blank'); - }; - return { truncate, items, - goToLink, + navigateInNewTab, }; }, }); diff --git a/src/components/assets/SideAds.vue b/src/components/assets/SideAds.vue index d86be3d70..c3aa6840a 100644 --- a/src/components/assets/SideAds.vue +++ b/src/components/assets/SideAds.vue @@ -4,7 +4,9 @@
@@ -34,6 +36,8 @@ import { Swiper, SwiperSlide } from 'swiper/vue'; import 'swiper/css'; import 'swiper/css/navigation'; import { Autoplay } from 'swiper/modules'; +import { navigateInNewTab } from 'src/util-general'; + export default defineComponent({ components: { Swiper, @@ -42,9 +46,6 @@ export default defineComponent({ setup() { const router = useRouter(); const { combinedCampaigns } = useCampaign(); - const goToLink = (link: string): void => { - window.open(link, '_blank'); - }; const goDappPageLink = (address: string | undefined): void => { const base = networkParam + Path.DappStaking + Path.Dapp; const url = `${base}?dapp=${address?.toLowerCase()}`; @@ -53,7 +54,7 @@ export default defineComponent({ return { modules: [Autoplay], combinedCampaigns, - goToLink, + navigateInNewTab, goDappPageLink, }; }, diff --git a/src/components/common/Notification/NotificationBar.vue b/src/components/common/Notification/NotificationBar.vue index 5bd885a7f..c50504c50 100644 --- a/src/components/common/Notification/NotificationBar.vue +++ b/src/components/common/Notification/NotificationBar.vue @@ -44,6 +44,7 @@ import { AlertType } from 'src/store/general/state'; import { useI18n } from 'vue-i18n'; import { defineComponent, toRefs, PropType, computed, ref } from 'vue'; import { AlertMsg } from 'src/modules/toast'; +import { navigateInNewTab } from 'src/util-general'; export default defineComponent({ name: 'NotificationBar', @@ -92,7 +93,7 @@ export default defineComponent({ const isCopiedType = computed(() => props.alertType === AlertType.Copied); const goToSubscan = (): void => { - window.open(props.explorerUrl, '_blank'); + navigateInNewTab(props.explorerUrl); }; return { diff --git a/src/components/header/mobile/BlogPosts.vue b/src/components/header/mobile/BlogPosts.vue index 708f51c3c..93614111a 100644 --- a/src/components/header/mobile/BlogPosts.vue +++ b/src/components/header/mobile/BlogPosts.vue @@ -5,7 +5,7 @@ v-for="(t, index) in items" :key="index" class="card--blog-post" - @click="goToLink(t.link)" + @click="navigateInNewTab(t.link)" >
@@ -16,6 +16,7 @@ import { defineComponent, ref, watch } from 'vue'; import { useQuery } from '@vue/apollo-composable'; import gql from 'graphql-tag'; +import { navigateInNewTab } from 'src/util-general'; interface Data { img: string; @@ -55,13 +56,9 @@ export default defineComponent({ { immediate: true } ); - const goToLink = (link: string): void => { - window.open(link, '_blank'); - }; - return { items, - goToLink, + navigateInNewTab, }; }, }); diff --git a/src/components/header/styles/modal-network-wallet.scss b/src/components/header/styles/modal-network-wallet.scss index 595c74b11..048da1fd3 100644 --- a/src/components/header/styles/modal-network-wallet.scss +++ b/src/components/header/styles/modal-network-wallet.scss @@ -43,7 +43,7 @@ } .card--astar { - width: 212px; + width: 100%; height: 140px; border-radius: 16px; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08); @@ -62,7 +62,7 @@ .line--bottom-bg { position: absolute; - width: 95%; + width: 98%; height: 5px; border-radius: 0 0 16px 16px / 0 0 6px 6px; bottom: 0; diff --git a/src/components/sidenav/SidebarOption.vue b/src/components/sidenav/SidebarOption.vue index f75d33368..667fefc37 100644 --- a/src/components/sidenav/SidebarOption.vue +++ b/src/components/sidenav/SidebarOption.vue @@ -180,6 +180,7 @@ import { useStore } from 'src/store'; import { socialUrl, docsUrl } from 'src/links'; import { CultureCode, languagesSelector } from 'src/i18n'; import { i18n } from 'src/boot/i18n'; +import { navigateInNewTab } from 'src/util-general'; export default defineComponent({ components: { @@ -199,7 +200,7 @@ export default defineComponent({ const selectLinkIdx = ref(-1); const goLink = (url: string) => { - window.open(url, '_blank'); + navigateInNewTab(url); }; const goToLink = (linkIdx: number) => { diff --git a/src/staking-v3/components/DynamicAdsArea.vue b/src/staking-v3/components/DynamicAdsArea.vue index 4a243f4e9..2126557e3 100644 --- a/src/staking-v3/components/DynamicAdsArea.vue +++ b/src/staking-v3/components/DynamicAdsArea.vue @@ -30,7 +30,9 @@
@@ -57,6 +59,7 @@ import { defineComponent } from 'vue'; import { networkParam, Path } from 'src/router/routes'; import { useRouter } from 'vue-router'; import { useCampaign } from '../hooks'; +import { navigateInNewTab } from 'src/util-general'; // Import Swiper import { Swiper, SwiperSlide } from 'swiper/vue'; @@ -73,10 +76,6 @@ export default defineComponent({ const router = useRouter(); const { combinedCampaigns } = useCampaign(); - const goToLink = (link: string): void => { - window.open(link, '_blank'); - }; - const goDappPageLink = (address: string | undefined): void => { const base = networkParam + Path.DappStaking + Path.Dapp; const url = `${base}?dapp=${address?.toLowerCase()}`; @@ -86,7 +85,7 @@ export default defineComponent({ return { modules: [Navigation], combinedCampaigns, - goToLink, + navigateInNewTab, goDappPageLink, }; }, diff --git a/src/staking-v3/components/dapp/DappV3.vue b/src/staking-v3/components/dapp/DappV3.vue index 0383a7889..a5165419d 100644 --- a/src/staking-v3/components/dapp/DappV3.vue +++ b/src/staking-v3/components/dapp/DappV3.vue @@ -78,13 +78,7 @@ export default defineComponent({ const { getDapp, registeredDapps } = useDapps(); const { navigateToVote, navigateToHome } = useDappStakingNavigation(); const store = useStore(); - const dappAddress = computed(() => route.query.dapp as string); - - const goLink = (url: string) => { - window.open(url, '_blank'); - }; - const dapp = computed(() => getDapp(dappAddress.value)); // Fetch full dApp model from API. Initially, store contains dapp with props required for the main page. @@ -134,7 +128,6 @@ export default defineComponent({ return { Path, dapp, - goLink, navigateToVote, isZkEvm, twitterUrl, diff --git a/src/staking-v3/components/dapp/ProjectDetails.vue b/src/staking-v3/components/dapp/ProjectDetails.vue index 1951eecd0..408349dd7 100644 --- a/src/staking-v3/components/dapp/ProjectDetails.vue +++ b/src/staking-v3/components/dapp/ProjectDetails.vue @@ -15,7 +15,7 @@ :width="140" :height="25" class="button--website" - @click="goLink(dapp.extended?.url ?? '/')" + @click="navigateInNewTab(dapp.extended?.url ?? '/')" > {{ $t('dappStaking.dappPage.goToWebsite') }} @@ -194,6 +194,7 @@ import { computed, defineComponent, PropType } from 'vue'; import { useI18n } from 'vue-i18n'; import { CommunityType } from '@astar-network/astar-sdk-core'; import { CombinedDappInfo } from 'src/staking-v3/logic'; +import { navigateInNewTab } from 'src/util-general'; export default defineComponent({ props: { @@ -243,15 +244,11 @@ export default defineComponent({ } }); - const goLink = (url: string) => { - window.open(url, '_blank'); - }; - return { sanitizeData, getShortenAddress, copyAddress, - goLink, + navigateInNewTab, explorerUrl, communities, virtualMachineTags, diff --git a/src/util-general.ts b/src/util-general.ts index a06225dd8..3c4e7be17 100644 --- a/src/util-general.ts +++ b/src/util-general.ts @@ -1,3 +1,5 @@ +const sanitizeUrl = (url: string): string => url.replace(/[^-A-Za-z0-9+&@#/%?=~_|!:,.;()]/g, ''); + export const navigateInNewTab = (url: string): void => { - window.open(url, '_blank', 'noopener noreferrer'); + window.open(sanitizeUrl(url), '_blank', 'noopener noreferrer'); };