DAPP-1957: Integrate UI for Dashboard Social Account Links (Email/Tel…

…egram/Discord)

src/modules/dashboard/Dashboard.constants.ts

@@ -1,6 +1,6 @@
 import { PushAlpha, PushBot, PushDev } from 'blocks';
 
-import { ChatType, EnvKeys, SourceKeys } from './Dashboard.types';
+import { ChatType, EnvKeys, SocialHandlesItemType, SourceKeys } from './Dashboard.types';
 
 export const recommendedChatList: ChatType[] = [
   {
@@ -90,3 +90,24 @@ export const trendingSource: Record<EnvKeys, SourceKeys> = {
 export const firstEndDate = new Date(Date.now()).toISOString().split('T')[0];
 export const secondEndDate = new Date(Date.now() - 7 * 86400000).toISOString().split('T')[0];
 export const startDate = new Date(Date.now() - 14 * 86400000).toISOString().split('T')[0];
+
+export const socialHandlesList: SocialHandlesItemType[] = [
+  {
+    heading: 'Email',
+    description: 'Receive notifications in your email inbox',
+    type: 'email',
+    isConnected: true,
+  },
+  {
+    heading: 'Telegram',
+    description: 'Receive notifications as Telegram messages',
+    type: 'telegram',
+    isConnected: false,
+  },
+  {
+    heading: 'Discord',
+    description: 'Receive notifications as Discord messages',
+    type: 'discord',
+    isConnected: false,
+  },
+];

src/modules/dashboard/Dashboard.tsx

@@ -9,6 +9,7 @@ import { DashboardHeader } from './components/DashboardHeader';
 import { DashboardSubHeader } from './components/DashboardSubHeader';
 import { FeaturedChannels } from './components/FeaturedChannels';
 import { StakingPools } from './components/StakingPools';
+import { SocialHandles } from './components/Socialhandles';
 
 export type DashboardProps = {};
 
@@ -35,6 +36,7 @@ const Dashboard: FC<DashboardProps> = () => {
         flexDirection="column"
         gap="spacing-md"
       >
+        <SocialHandles />
         <FeaturedChannels />
         <ChannelVariantsSection />
         <Box

src/modules/dashboard/Dashboard.types.ts

@@ -35,3 +35,10 @@ export type ChatType = {
 
 export type EnvKeys = 'prod' | 'staging' | 'dev' | 'alpha';
 export type SourceKeys = 'ETH_MAINNET' | 'All';
+
+export type SocialHandlesItemType = {
+  heading: string;
+  description: string;
+  type: 'email' | 'telegram' | 'discord';
+  isConnected: boolean;
+};

src/modules/dashboard/components/ClaimSocialHandles.tsx

@@ -0,0 +1,89 @@
+import { FC } from 'react';
+
+import { Box, Button, Lozenge, Multiplier, RewardsBell, Star, Text } from 'blocks';
+
+export type ClaimSocialHandlesProps = {};
+
+const ClaimSocialHandles: FC<ClaimSocialHandlesProps> = () => {
+  return (
+    <Box
+      display="flex"
+      justifyContent="space-between"
+      flexDirection={{ tb: 'column' }}
+      gap={{ tb: 'spacing-xs' }}
+      width="100%"
+    >
+      <Box>
+        <Box
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          gap="spacing-sm"
+        >
+          <Text
+            variant="h4-semibold"
+            color="text-primary"
+          >
+            Get notified anywhere and earn points
+          </Text>
+          <Lozenge icon={<Star />}>NEW</Lozenge>
+        </Box>
+        <Text
+          variant="bs-regular"
+          color="text-tertiary"
+        >
+          Connect apps and receive notifications directly in your Email, Telegram and Discord
+        </Text>
+      </Box>
+
+      <Box
+        display="flex"
+        flexDirection="row"
+        alignItems="center"
+        gap="spacing-md"
+      >
+        <Box
+          display="flex"
+          gap="spacing-xxs"
+          alignItems="center"
+        >
+          <Multiplier
+            height={28}
+            width={31}
+          />
+          <Text
+            variant="bl-semibold"
+            color="text-primary"
+          >
+            1.5x
+          </Text>
+        </Box>
+        <Box
+          display="flex"
+          gap="spacing-xxs"
+          alignItems="center"
+        >
+          <RewardsBell
+            width={24}
+            height={28}
+          />
+          <Text
+            variant="bm-semibold"
+            color="text-primary"
+          >
+            25,000
+          </Text>
+        </Box>
+        <Button
+          aria-label="Claim"
+          size="medium"
+          variant="tertiary"
+        >
+          Claim
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export { ClaimSocialHandles };

src/modules/dashboard/components/ConnectSocialHandles.tsx

@@ -0,0 +1,105 @@
+import { FC } from 'react';
+import { css } from 'styled-components';
+
+import { Box, Button, Dropdown, Menu, MenuItem, Text, CaretDown, OptOut } from 'blocks';
+import { socialHandlesList } from '../Dashboard.constants';
+import { SocialHandlesItemType } from '../Dashboard.types';
+
+export type ConnectSocialHandlesProps = {};
+
+const ConnectSocialHandles: FC<ConnectSocialHandlesProps> = () => {
+  return (
+    <>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        flexDirection="row"
+        gap={{ tb: 'spacing-xs' }}
+        width="100%"
+      >
+        {socialHandlesList.map((item: SocialHandlesItemType) => (
+          <Box
+            display="flex"
+            flexDirection="column"
+            border="border-sm solid stroke-secondary"
+            padding={{ initial: 'spacing-md', ml: 'spacing-md spacing-sm', tb: 'spacing-sm', lp: 'spacing-sm' }}
+            borderRadius="radius-md"
+            gap="spacing-sm"
+            width={{
+              initial: '290px',
+              mm: '258px',
+              ml: 'auto',
+              tb: '278px',
+              lp: '278px',
+            }}
+            css={css`
+              flex-shrink: 0;
+            `}
+            minHeight={{ initial: 'auto', tb: '180px' }}
+          >
+            <Box>
+              <Box
+                display="flex"
+                gap="spacing-xxs"
+                alignItems="center"
+                flexDirection="row"
+              >
+                {/* Social icons will be displayed here */}
+                {/* Add icons according to the specified type */}
+                <Text
+                  variant="h5-semibold"
+                  color="text-primary"
+                >
+                  {item.heading}
+                </Text>
+              </Box>
+
+              <Text
+                variant="bs-regular"
+                color="text-tertiary"
+              >
+                {item.description}
+              </Text>
+            </Box>
+
+            <Box
+              display="flex"
+              alignItems="center"
+              alignSelf="flex-start"
+            >
+              {item.isConnected ? (
+                <Dropdown
+                  overlay={
+                    <Menu>
+                      <MenuItem
+                        label="Disconnect"
+                        icon={<OptOut />}
+                      />
+                    </Menu>
+                  }
+                >
+                  <Button
+                    variant="outline"
+                    trailingIcon={<CaretDown />}
+                  >
+                    [email protected]
+                  </Button>
+                </Dropdown>
+              ) : (
+                <Button
+                  aria-label="Connect"
+                  size="medium"
+                  variant="tertiary"
+                >
+                  Connect
+                </Button>
+              )}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </>
+  );
+};
+
+export { ConnectSocialHandles };

src/modules/dashboard/components/Socialhandles.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+
+import { Box } from 'blocks';
+import { ClaimSocialHandles } from './ClaimSocialHandles';
+import { ConnectSocialHandles } from './ConnectSocialHandles';
+import { useAccount } from 'hooks';
+
+export type SocialHandlesProps = {};
+
+const SocialHandles: FC<SocialHandlesProps> = () => {
+  const { isWalletConnected } = useAccount();
+
+  // Check if the wallet is connected to the DApp.
+  // If not, return null. If connected, return SocialHandles.
+  if (!isWalletConnected) return null;
+
+  return (
+    <Box
+      borderRadius="radius-md"
+      padding={{ ml: 'spacing-md spacing-sm', initial: 'spacing-md' }}
+      display="flex"
+      flexDirection="column"
+      backgroundColor="surface-primary"
+      gap="spacing-md"
+      alignItems="flex-start"
+    >
+      {/* Render Claim based on Social Handles if wallet is connected */}
+      <ClaimSocialHandles />
+
+      {/* Render option to connect Social Handles */}
+      <ConnectSocialHandles />
+    </Box>
+  );
+};
+
+export { SocialHandles };