Add custom link to add ref query to all links

package.json

@@ -163,6 +163,7 @@
     "sort-keys-recursive": "^2.1.10",
     "store": "^2.0.12",
     "strip-markdown": "^4.0.0",
+    "url-join": "^5.0.0",
     "url-loader": "^4.1.1",
     "use-local-storage": "^3.0.0",
     "yup": "^0.32.9",

src/components/activity/NotifCounter.tsx

@@ -1,12 +1,12 @@
 import { BellOutlined } from '@ant-design/icons'
 import { Badge } from 'antd'
 import clsx from 'clsx'
-import Link from 'next/link'
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import config from 'src/config'
 import { useGetNotificationsCount } from 'src/graphql/hooks'
 import useExternalStorage from 'src/hooks/useExternalStorage'
 import { useMyAddress } from '../auth/MyAccountsContext'
+import CustomLink from '../referral/CustomLink'
 import styles from './style.module.sass'
 
 const { enableNotifications } = config
@@ -82,11 +82,11 @@ type NotificationsProps = {
 }
 
 const Bell = ({ unreadCount }: NotificationsProps) => (
-  <Link href={notificationItem.page[0]} as={notificationItem.page[1]}>
+  <CustomLink href={notificationItem.page[0]} as={notificationItem.page[1]}>
     <a className={clsx('DfNotificationsCounter d-block', unreadCount > 9 && 'mr-1')}>
       {notificationItem.icon}
     </a>
-  </Link>
+  </CustomLink>
 )
 
 export const NotificationsBell = ({ unreadCount }: NotificationsProps) => {

src/components/activity/Notification.tsx

@@ -10,7 +10,6 @@ import {
 import { ReactionType } from '@subsocial/api/types'
 import { nonEmptyStr } from '@subsocial/utils'
 import { summarize } from '@subsocial/utils/summarize'
-import Link from 'next/link'
 import React, { ReactNode } from 'react'
 import { NAME_MAX_LEN } from 'src/config/ValidationsConfig'
 import messages from 'src/messages'
@@ -21,6 +20,7 @@ import { useMyAddress } from '../auth/MyAccountsContext'
 import ViewPostLink from '../posts/ViewPostLink'
 import Avatar from '../profiles/address-views/Avatar'
 import Name from '../profiles/address-views/Name'
+import CustomLink from '../referral/CustomLink'
 import { ViewSpace } from '../spaces/ViewSpace'
 import { equalAddresses } from '../substrate'
 import { accountUrl, postUrl, spaceUrl } from '../urls'
@@ -138,7 +138,7 @@ export function InnerNotification(props: InnerNotificationProps) {
   const icon = _icon ?? iconByEvent[event]
 
   return (
-    <Link {...links}>
+    <CustomLink {...links}>
       <div className='DfNotificationItem'>
         <div className='DfNotificationIcons'>
           <div className='position-relative'>
@@ -163,7 +163,7 @@ export function InnerNotification(props: InnerNotificationProps) {
         </div>
         {nonEmptyStr(image) && <DfBgImageLink {...links} src={image} size={80} />}
       </div>
-    </Link>
+    </CustomLink>
   )
 }
 

src/components/auth/NoWriteAccess.tsx

@@ -1,5 +1,5 @@
 import { Result } from 'antd'
-import Link from 'next/link'
+import CustomLink from '../referral/CustomLink'
 
 export const NoWriteAccess = () => (
   <Result
@@ -10,7 +10,7 @@ export const NoWriteAccess = () => (
           {
             'Your account has been restricted from creating new spaces, posts, and comments, on this particular website due to a violation in our '
           }
-          <Link href='https://subsocial.network/legal/terms'>Terms of Use</Link>
+          <CustomLink href='https://subsocial.network/legal/terms'>Terms of Use</CustomLink>
           {'.'}
         </p>
         <p>

src/components/auth/WalletButton.tsx

@@ -1,5 +1,5 @@
-import Link from 'next/link'
 import { hasInjectedWallet } from 'src/utils/window'
+import CustomLink from '../referral/CustomLink'
 import { AvatarOrSkeleton, isClientSide } from '../utils'
 import { StepsEnum } from './AuthContext'
 import styles from './WalletButton.module.sass'
@@ -16,7 +16,7 @@ const WalletButton = ({ setCurrentStep }: Props) => {
   const isInMobileWalletBrowser = isClientSide() && hasInjectedWallet()
   if (!isInMobileWalletBrowser) {
     return (
-      <Link passHref href='https://novawallet.io/'>
+      <CustomLink passHref href='https://novawallet.io/'>
         <a className={styles.WalletButton} target='_blank'>
           <div className='d-flex align-items-center'>
             <AvatarOrSkeleton
@@ -30,7 +30,7 @@ const WalletButton = ({ setCurrentStep }: Props) => {
             </div>
           </div>
         </a>
-      </Link>
+      </CustomLink>
     )
   }
 

src/components/comments/CommentEditor.tsx

@@ -1,7 +1,6 @@
 import { Alert, Button, Input } from 'antd'
 import BN from 'bn.js'
 import clsx from 'clsx'
-import Link from 'next/link'
 import { useState } from 'react'
 import { Controller, ErrorMessage, useForm } from 'react-hook-form'
 import { TbCoins } from 'react-icons/tb'
@@ -13,6 +12,7 @@ import { CommentContent, IpfsCid } from 'src/types'
 import { activeStakingLinks } from 'src/utils/links'
 import { useAmIBlocked, useMyAddress } from '../auth/MyAccountsContext'
 import { buildSharePostValidationSchema } from '../posts/PostValidation'
+import CustomLink from '../referral/CustomLink'
 import { getNewIdFromEvent } from '../substrate'
 import { tmpClientId } from '../utils'
 import { MyAccountProps } from '../utils/MyAccount'
@@ -162,9 +162,9 @@ export const CommentEditor = (props: Props) => {
               <TbCoins className='FontNormal' style={{ flexShrink: '0' }} />
               <span>
                 <span>This comment could earn SUB rewards.</span>
-                <Link passHref href={activeStakingLinks.learnMore}>
+                <CustomLink passHref href={activeStakingLinks.learnMore}>
                   <a className='FontWeightMedium ml-1'>Learn How</a>
-                </Link>
+                </CustomLink>
               </span>
             </div>
           }

src/components/comments/ViewComment.tsx

@@ -2,7 +2,6 @@ import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'
 import { Alert, Button, Tag, Tooltip } from 'antd'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
-import Link from 'next/link'
 import { FC, useEffect, useState } from 'react'
 import { TbCoins, TbMessageCircle2 } from 'react-icons/tb'
 import { getNeededLock } from 'src/config/constants'
@@ -25,6 +24,7 @@ import { PostDropDownMenu } from '../posts/view-post/PostDropDownMenu'
 import PostRewardStat from '../posts/view-post/PostRewardStat'
 import AuthorSpaceAvatar from '../profiles/address-views/AuthorSpaceAvatar'
 import Name from '../profiles/address-views/Name'
+import CustomLink from '../referral/CustomLink'
 import { equalAddresses } from '../substrate'
 import { postUrl } from '../urls'
 import { formatDate, IconWithLabel, useIsHidden } from '../utils'
@@ -97,7 +97,7 @@ export const InnerViewComment: FC<Props> = props => {
 
     return (
       <>
-        <Link href={commentLink}>
+        <CustomLink href={commentLink}>
           <a
             onClick={event => {
               event.preventDefault()
@@ -107,7 +107,7 @@ export const InnerViewComment: FC<Props> = props => {
             {viewActionMessage}{' '}
             <Pluralize count={replyCountWithFake || 0} singularText='reply' pluralText='replies' />
           </a>
-        </Link>
+        </CustomLink>
       </>
     )
   }
@@ -146,11 +146,11 @@ export const InnerViewComment: FC<Props> = props => {
                 )}
               </div>
               <MutedSpan>&middot;</MutedSpan>
-              <Link href='/[spaceId]/[slug]' as={commentLink}>
+              <CustomLink href='/[spaceId]/[slug]' as={commentLink}>
                 <a className='DfGreyLink FontTiny' title={formatDate(createdAtTime)}>
                   {dayjs(createdAtTime).fromNow()}
                 </a>
-              </Link>
+              </CustomLink>
             </div>
             <div className='d-flex align-items-center GapTiny'>
               {!isFake && (
@@ -227,15 +227,15 @@ export const InnerViewComment: FC<Props> = props => {
                           />{' '}
                           more in order to earn rewards for this comment.
                         </span>
-                        <Link href={activeStakingLinks.learnMore}>
+                        <CustomLink href={activeStakingLinks.learnMore}>
                           <a
                             target='_blank'
                             className='FontWeightMedium ml-1'
                             style={{ color: '#f759ab' }}
                           >
                             Learn How
                           </a>
-                        </Link>
+                        </CustomLink>
                       </span>
                     }
                   >

src/components/creators/MobileRewardDashboard.tsx

@@ -1,6 +1,5 @@
 import { Button, Tooltip } from 'antd'
 import clsx from 'clsx'
-import Link from 'next/link'
 import { ComponentProps, useState } from 'react'
 import { HiChevronRight } from 'react-icons/hi2'
 import { SlQuestion } from 'react-icons/sl'
@@ -11,6 +10,7 @@ import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks'
 import { getAmountRange } from 'src/utils/analytics'
 import { getSubIdCreatorsLink } from 'src/utils/links'
 import { useMyAddress } from '../auth/MyAccountsContext'
+import CustomLink from '../referral/CustomLink'
 import styles from './MobileRewardDashboard.module.sass'
 import RewardInfo, { StakerSuperLikeCount } from './rewards/RewardInfo'
 import StakerRewardProgressBar from './rewards/StakerRewardProgressBar'
@@ -42,7 +42,7 @@ function StakeSubBanner(props: MobileRewardDashboardProps) {
             <span className='FontWeightSemibold'>Lock SUB and earn more</span>
           </span>
           <div className={clsx('d-flex align-items-center GapTiny')}>
-            <Link passHref href={getSubIdCreatorsLink()}>
+            <CustomLink passHref href={getSubIdCreatorsLink()}>
               <Button
                 type='primary'
                 className='FontWeightSemibold'
@@ -53,7 +53,7 @@ function StakeSubBanner(props: MobileRewardDashboardProps) {
               >
                 Lock SUB
               </Button>
-            </Link>
+            </CustomLink>
           </div>
         </div>
         <div className={clsx(styles.Gradient)} />

src/components/creators/TopUsersCard.tsx

@@ -1,6 +1,5 @@
 import { Button, Skeleton } from 'antd'
 import clsx from 'clsx'
-import Link from 'next/link'
 import { ComponentProps, CSSProperties, useMemo } from 'react'
 import { IoChevronForward } from 'react-icons/io5'
 import { useSendEvent } from 'src/providers/AnalyticContext'
@@ -12,6 +11,7 @@ import { truncateAddress } from 'src/utils/storage'
 import { useMyAddress } from '../auth/MyAccountsContext'
 import { FormatBalance } from '../common/balances'
 import Avatar from '../profiles/address-views/Avatar'
+import CustomLink from '../referral/CustomLink'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { DfImage } from '../utils/DfImage'
 import { MutedSpan } from '../utils/MutedText'
@@ -162,7 +162,7 @@ function UserInfo({
   return (
     <div className='d-flex align-items-center'>
       <div className='position-relative'>
-        <Link href={`/leaderboard/${user.address}?role=${type}`}>{avatar}</Link>
+        <CustomLink href={`/leaderboard/${user.address}?role=${type}`}>{avatar}</CustomLink>
         {[1, 2, 3].includes(rank) && (
           <Medal
             className='position-absolute FontTiny'
@@ -172,9 +172,9 @@ function UserInfo({
         )}
       </div>
       <div className='d-flex flex-column' style={{ minWidth: 0 }}>
-        <Link href={`/leaderboard/${user.address}?role=${type}`} passHref>
+        <CustomLink href={`/leaderboard/${user.address}?role=${type}`} passHref>
           <a className='ColorNormal'>{name}</a>
-        </Link>
+        </CustomLink>
         <div className='d-flex align-items-center ColorMuted GapMini'>
           {type === 'creator' ? (
             <FormatBalance value={user.reward} currency='SUB' decimals={10} precision={2} />

src/components/creators/cards/CreatePostCard.tsx

@@ -1,9 +1,9 @@
 import { Button, Skeleton } from 'antd'
 import clsx from 'clsx'
-import Link from 'next/link'
 import { HiArrowUpRight } from 'react-icons/hi2'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import { CreatePostButtonAndModal } from 'src/components/posts/NewPostButtonInTopMenu'
+import CustomLink from 'src/components/referral/CustomLink'
 import { CreateSpaceButton } from 'src/components/spaces/helpers'
 import { DfImage } from 'src/components/utils/DfImage'
 import Segment from 'src/components/utils/Segment'
@@ -41,7 +41,7 @@ export default function CreatePostCard({ variant }: CreatePostCardProps) {
       </div>
       <span className='FontSmall'>
         When users with locked SUB like your posts, you will receive SUB as a reward.{' '}
-        <Link href={activeStakingLinks.learnMore}>
+        <CustomLink href={activeStakingLinks.learnMore}>
           <a
             target='_blank'
             onClick={() =>
@@ -53,7 +53,7 @@ export default function CreatePostCard({ variant }: CreatePostCardProps) {
             Learn more{' '}
             <HiArrowUpRight className='d-inline position-relative' style={{ top: '2px' }} />
           </a>
-        </Link>
+        </CustomLink>
       </span>
       <div className='mt-3 GapSmall flex-column d-flex'>
         {isLoading ? (

src/components/creators/cards/MyStakeCard.tsx

@@ -1,11 +1,11 @@
 import { SpaceData } from '@subsocial/api/types'
 import { Button, Skeleton, Tooltip } from 'antd'
 import clsx from 'clsx'
-import Link from 'next/link'
 import { BsBoxArrowUpRight } from 'react-icons/bs'
 import { SlQuestion } from 'react-icons/sl'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import { FormatBalance } from 'src/components/common/balances'
+import CustomLink from 'src/components/referral/CustomLink'
 import { useResponsiveSize } from 'src/components/responsive'
 import { DfImage } from 'src/components/utils/DfImage'
 import Segment from 'src/components/utils/Segment'
@@ -32,15 +32,15 @@ export default function MyStakeCard({ space }: MyStakeCardProps) {
       {!isMobile && (
         <div className={styles.TopSection}>
           <p className={clsx(styles.Title, 'mb-0')}>Creator Staking</p>
-          <Link href='https://docs.subsocial.network/docs/basics/creator-staking' passHref>
+          <CustomLink href='https://docs.subsocial.network/docs/basics/creator-staking' passHref>
             <a
               target='_blank'
               className={styles.Link}
               onClick={() => sendEvent('lstake_learn_more', { eventSource: 'myStakeCard' })}
             >
               How does it work?
             </a>
-          </Link>
+          </CustomLink>
           <DfImage preview={false} src='/images/databases.svg' className={styles.Image} />
         </div>
       )}

src/components/creators/rewards/RewardInfo.tsx

@@ -2,12 +2,12 @@ import { LineChartOutlined } from '@ant-design/icons'
 import { Skeleton, Tooltip } from 'antd'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
-import Link from 'next/link'
 import { ComponentProps, useState } from 'react'
 import { RiHistoryFill } from 'react-icons/ri'
 import { SlQuestion } from 'react-icons/sl'
 import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import { FormatBalance, formatBalanceToJsx } from 'src/components/common/balances'
+import CustomLink from 'src/components/referral/CustomLink'
 import { MutedSpan } from 'src/components/utils/MutedText'
 import { Pluralize } from 'src/components/utils/Plularize'
 import { CREATORS_CONSTANTS } from 'src/config/constants'
@@ -80,7 +80,7 @@ export default function RewardInfo({ size, ...props }: RewardInfoProps) {
           <span className='FontSmall'>History</span>
         </div>
 
-        <Link href={`/leaderboard/${myAddress}?role=staker`} passHref>
+        <CustomLink href={`/leaderboard/${myAddress}?role=staker`} passHref>
           <a
             className='py-2.5 px-3 d-flex justify-content-center align-items-center ColorPrimary FontWeightMedium GapTiny'
             onClick={() => {
@@ -96,7 +96,7 @@ export default function RewardInfo({ size, ...props }: RewardInfoProps) {
             <LineChartOutlined />
             <span className='FontSmall'>My Stats</span>
           </a>
-        </Link>
+        </CustomLink>
       </div>
 
       <RewardHistoryModal

src/components/creators/rewards/RewardInfoCard.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import Link from 'next/link'
+import CustomLink from 'src/components/referral/CustomLink'
 import { DfImage } from 'src/components/utils/DfImage'
 import Segment from 'src/components/utils/Segment'
 import { useSendEvent } from 'src/providers/AnalyticContext'
@@ -16,15 +16,15 @@ export default function RewardInfoCard() {
         <div className='d-flex align-items-center GapNormal justify-content-between'>
           <p className={clsx(styles.Title, 'mb-0')}>My Weekly Rewards</p>
         </div>
-        <Link href={activeStakingLinks.learnMore} passHref>
+        <CustomLink href={activeStakingLinks.learnMore} passHref>
           <a
             target='_blank'
             className={styles.Link}
             onClick={() => sendEvent('astake_banner_learn_more', { eventSource: 'rewardInfo' })}
           >
             How does this work?
           </a>
-        </Link>
+        </CustomLink>
         <DfImage preview={false} src='/images/diamond.svg' className={styles.Image} />
       </div>
       <div className={clsx(styles.BottomSection)}>