feat: share streak on X

frontend/components/MainPage/sections/RewardsSection/NotifyRewardsModal.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { NA } from '@/constants/symbols';
+import { OPERATE_URL } from '@/constants/urls';
 import { useBalanceContext } from '@/hooks/useBalanceContext';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useReward } from '@/hooks/useReward';
@@ -17,7 +18,6 @@ const getFormattedReward = (reward: number | undefined) =>
   reward === undefined ? NA : `~${balanceFormat(reward, 2)}`;
 
 const SHARE_TEXT = `I just earned my first reward through the Operate app powered by #olas!\n\nDownload the Pearl app:`;
-const OPERATE_URL = 'https://olas.network/operate?pearl=first-reward';
 
 export const NotifyRewardsModal = () => {
   const { isEligibleForRewards, availableRewardsForEpochEth } = useReward();
@@ -60,7 +60,7 @@ export const NotifyRewardsModal = () => {
 
   const onTwitterShare = useCallback(() => {
     const encodedText = encodeURIComponent(SHARE_TEXT);
-    const encodedURL = encodeURIComponent(OPERATE_URL);
+    const encodedURL = encodeURIComponent(`${OPERATE_URL}?pearl=first-reward`);
 
     window.open(
       `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedURL}`,

frontend/components/MainPage/sections/RewardsSection/RewardsStreak.tsx

@@ -1,11 +1,13 @@
-import { RightOutlined } from '@ant-design/icons';
-import { Flex, Skeleton, Typography } from 'antd';
+import { RightOutlined, ShareAltOutlined } from '@ant-design/icons';
+import { Button, Flex, Skeleton, Tooltip, Typography } from 'antd';
+import { useCallback } from 'react';
 import styled from 'styled-components';
 
 import { FireNoStreak } from '@/components/custom-icons/FireNoStreak';
 import { FireStreak } from '@/components/custom-icons/FireStreak';
 import { COLOR } from '@/constants/colors';
 import { NA } from '@/constants/symbols';
+import { OPERATE_URL } from '@/constants/urls';
 import { Pages } from '@/enums/Pages';
 import { useBalanceContext } from '@/hooks/useBalanceContext';
 import { usePageState } from '@/hooks/usePageState';
@@ -19,6 +21,7 @@ const RewardsStreakFlex = styled(Flex)`
   height: 40px;
   background: ${COLOR.GRAY_1};
   border-radius: 6px;
+  margin-bottom: 16px;
 `;
 
 const Streak = () => {
@@ -30,6 +33,22 @@ const Streak = () => {
     isError,
   } = useRewardsHistory();
 
+  // Graph does not account for the current day,
+  // so we need to add 1 to the streak, if the user is eligible for rewards
+  const optimisticStreak = isEligibleForRewards ? streak + 1 : streak;
+
+  const onStreakShare = useCallback(() => {
+    const encodedText = encodeURIComponent(
+      `🎉 I've just completed a ${optimisticStreak}-day streak with my agent on Pearl and earned OLAS every single day! 🏆 How long can you keep your streak going? \n\nDownload the Pearl app:`,
+    );
+    const encodedURL = encodeURIComponent(`${OPERATE_URL}?pearl=share-streak`);
+
+    window.open(
+      `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedURL}`,
+      '_blank',
+    );
+  }, [optimisticStreak]);
+
   // If rewards history is loading for the first time
   // or balances are not fetched yet - show loading state
   if (isRewardsHistoryLoading || !isBalanceLoaded) {
@@ -40,15 +59,22 @@ const Streak = () => {
     return NA;
   }
 
-  // Graph does not account for the current day,
-  // so we need to add 1 to the streak, if the user is eligible for rewards
-  const optimisticStreak = isEligibleForRewards ? streak + 1 : streak;
-
   return (
-    <Flex gap={6}>
+    <Flex gap={6} align="center">
       {optimisticStreak > 0 ? (
         <>
           <FireStreak /> {optimisticStreak} day streak
+          <Tooltip arrow={false} title={'Share streak on X'} placement="top">
+            <Button
+              type="link"
+              onClick={onStreakShare}
+              icon={
+                <ShareAltOutlined
+                  style={{ fontSize: '20px', color: COLOR.GRAY_2 }}
+                />
+              }
+            />
+          </Tooltip>
         </>
       ) : (
         <>

frontend/constants/colors.ts

@@ -12,4 +12,5 @@ export const COLOR = {
   TEXT: '#1f2229',
   TEXT_LIGHT: '#606F85',
   GRAY_1: '#f2f4f9',
+  GRAY_2: '#4D596A',
 };

frontend/constants/urls.ts

@@ -14,6 +14,7 @@ const COW_SWAP_GNOSIS_XDAI_OLAS_URL: Url =
 const SWAP_BASE_URL: Url = 'https://balancer.fi/swap/base/ETH/OLAS';
 
 // olas.network
+export const OPERATE_URL: Url = 'https://olas.network/operate';
 export const FAQ_URL: Url = 'https://olas.network/operate#faq';
 export const DOWNLOAD_URL: Url = 'https://olas.network/operate#download';