From 06ed9e053d91eaf3663a159a91e56bbb336f83c8 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Fri, 1 Dec 2023 15:23:31 +0800
Subject: [PATCH] fix: update social icons in footer to link

---
 libs/blocks/src/lib/footer/footer.social.tsx |  6 ++++--
 libs/components/src/lib/link/index.tsx       |  3 +++
 libs/features/src/lib/footer/row/data.tsx    | 12 ++++++------
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/libs/blocks/src/lib/footer/footer.social.tsx b/libs/blocks/src/lib/footer/footer.social.tsx
index 3244c05d7..c200326b2 100644
--- a/libs/blocks/src/lib/footer/footer.social.tsx
+++ b/libs/blocks/src/lib/footer/footer.social.tsx
@@ -1,5 +1,5 @@
+import { CustomLink } from '@deriv-com/components';
 import { SocialIcons } from './footer-block';
-import React from 'react';
 
 export const SocialMediaSection = ({
   socialButtons,
@@ -9,7 +9,9 @@ export const SocialMediaSection = ({
   return (
     <div className="flex gap-gap-lg max-lg:justify-center">
       {socialButtons.map((item) => (
-        <React.Fragment key={item.href}>{item.icon}</React.Fragment>
+        <CustomLink href={item.href} target="_blank" key={item.href}>
+          {item.icon}
+        </CustomLink>
       ))}
     </div>
   );
diff --git a/libs/components/src/lib/link/index.tsx b/libs/components/src/lib/link/index.tsx
index 4e5fa0391..efa706229 100644
--- a/libs/components/src/lib/link/index.tsx
+++ b/libs/components/src/lib/link/index.tsx
@@ -13,6 +13,7 @@ export interface CustomLinkProps extends HTMLAttributes<HTMLAnchorElement> {
   hasLinkColor?: boolean;
   disabled?: boolean;
   iconColor?: iconColorVariant;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 export type iconColorVariant = 'black' | 'subtle' | 'disabled' | 'default';
 export type textSize = 'sm' | 'md' | 'lg';
@@ -34,6 +35,7 @@ export function CustomLink({
   hasHoverDecoration = true,
   hasLinkColor = false,
   disabled = false,
+  target = '_self',
   children,
   ...rest
 }: CustomLinkProps) {
@@ -42,6 +44,7 @@ export function CustomLink({
   return (
     <DerivLink
       href={href}
+      target={target}
       className={qtMerge(
         'flex',
         'text-typography-default',
diff --git a/libs/features/src/lib/footer/row/data.tsx b/libs/features/src/lib/footer/row/data.tsx
index 45df7a3b2..35c974a99 100644
--- a/libs/features/src/lib/footer/row/data.tsx
+++ b/libs/features/src/lib/footer/row/data.tsx
@@ -146,26 +146,26 @@ export const warnText =
 export const socialButtons = [
   {
     icon: <StandaloneFacebookIcon iconSize="md" />,
-    href: '/fb',
+    href: 'https://www.facebook.com/derivdotcom',
   },
   {
     icon: <StandaloneInstagramIcon iconSize="md" />,
-    href: '/insta',
+    href: 'https://www.instagram.com/deriv_official',
   },
   {
     icon: <StandaloneXTwitterIcon iconSize="md" />,
-    href: '/twitter',
+    href: 'https://twitter.com/derivdotcom/',
   },
   {
     icon: <StandaloneYoutubeIcon iconSize="md" />,
-    href: '/youtube',
+    href: 'https://www.youtube.com/@deriv',
   },
   {
     icon: <StandaloneLinkedinIcon iconSize="md" />,
-    href: '/linkedin',
+    href: 'https://www.linkedin.com/company/derivdotcom/',
   },
   {
     icon: <StandaloneTelegramIcon iconSize="md" />,
-    href: '/telegram',
+    href: 'https://t.me/derivdotcomofficial',
   },
 ];