Merge pull request stakwork#986 from saithsab877/feature/bounty-landi…

…ng-page-updates [Feature] Update Bounties Landing Page with Enhanced SAT/USD Display
aliraza556 · Jan 26, 2025 · b3036fb · b3036fb
2 parents e5490cc + b86fa06
commit b3036fb
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 45 deletions.
diff --git a/src/components/common/TopEarners/index.tsx b/src/components/common/TopEarners/index.tsx
@@ -68,31 +68,6 @@ const ErrorContainer = styled.div`
   color: ${colors.light.red1};
 `;
 
-const ViewBountiesButton = styled.button`
-  margin-top: 60px;
-  padding: 12px 24px;
-  font-size: 16px;
-  font-weight: bold;
-  color: white;
-  background-color: ${colors.light.blue1};
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-
-  &:hover {
-    background-color: ${colors.light.blue2};
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px ${colors.light.blue2};
-  }
-`;
-
 const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarnersProps) => {
   const { leaderboard } = useStores();
   const [error, setError] = useState<Error | null>(null);
@@ -111,10 +86,6 @@ const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarner
     fetchData();
   }, [leaderboard, onError]);
 
-  const handleViewBountiesClick = () => {
-    window.open('https://community.sphinx.chat/bounties', '_blank');
-  };
-
   if (error) {
     return (
       <ErrorContainer>
@@ -140,7 +111,6 @@ const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarner
             <LeaerboardItem position={index + 1} key={item.owner_pubkey} {...item} />
           ))}
       </div>
-      <ViewBountiesButton onClick={handleViewBountiesClick}>View Open Bounties</ViewBountiesButton>
     </Container>
   );
 });

diff --git a/src/components/common/TopEarners/leaderboardItem/index.tsx b/src/components/common/TopEarners/leaderboardItem/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { PriceOuterContainer } from '../..';
 import { colors } from '../../../../config';
-import { DollarConverter } from '../../../../helpers';
+import { formatSatsInMillions, satToUsd } from '../../../../helpers';
 import { LeaderItem } from '../../../../pages/leaderboard/store';
 import { UserInfo } from '../../../../pages/leaderboard/userInfo';
 
@@ -15,6 +15,7 @@ const ItemContainer = styled.div`
   align-items: center;
   gap: 1rem;
   padding: 0.5rem;
+  padding-right: 0 !important;
   margin-left: var(--position-gutter);
   background-color: ${colors.light.pureWhite};
   border-radius: 0.5rem;
@@ -47,6 +48,38 @@ const ItemContainer = styled.div`
     left: calc(-1 * var(--position-gutter));
     font-weight: 500;
   }
+
+  & .Price_Dynamic_Text {
+    display: flex;
+    align-items: center;
+  }
+
+  & .Price_inner_Container {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  & .sat-amount {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  & .separator {
+    margin: 0 10px;
+    color: black;
+    font-weight: 500;
+  }
+
+  & .usd-amount {
+    margin-right: 5px;
+    color: ${colors.light.text2};
+    &::before {
+      content: '|';
+      color: ${colors.light.grayish.G900};
+    }
+  }
 `;
 
 type Props = LeaderItem & {
@@ -69,10 +102,11 @@ export const LeaerboardItem = ({ owner_pubkey, total_sats_earned, position }: Pr
           priceBackground={color.primaryColor.P100}
         >
           <div className="Price_inner_Container">
-            <EuiText className="Price_Dynamic_Text">{DollarConverter(total_sats_earned)}</EuiText>
-          </div>
-          <div className="Price_SAT_Container">
-            <EuiText className="Price_SAT_Text">SAT</EuiText>
+            <div className="Price_Dynamic_Text">
+              <span className="sat-amount">{formatSatsInMillions(total_sats_earned)} SAT</span>
+              <span className="separator">|</span>
+              <span className="usd-amount">${satToUsd(total_sats_earned)}</span>
+            </div>
           </div>
         </PriceOuterContainer>
       </div>

diff --git a/src/helpers/helpers-extended.ts b/src/helpers/helpers-extended.ts
@@ -406,3 +406,10 @@ export const normalizeUrl = (input: string): string => {
     return noSpaces;
   }
 };
+
+export const formatSatsInMillions = (sats: number): string => {
+  if (sats >= 1000000) {
+    return `${(sats / 1000000).toFixed(1)}M`;
+  }
+  return DollarConverter(sats);
+};
diff --git a/src/pages/BountiesLandingPage/index.tsx b/src/pages/BountiesLandingPage/index.tsx
@@ -1,13 +1,50 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useIsMobile } from '../../hooks';
 import { colors } from '../../config/colors';
 import TopEarners from '../../components/common/TopEarners/index.tsx';
 import { BountyComponents } from '../../components/BountyComponents';
+import StartUpModal from '../../people/utils/StartUpModal';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+`;
+
+const Button = styled.button<{ variant: 'primary' | 'secondary' }>`
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  ${({ variant }: { variant: 'primary' | 'secondary' }) =>
+    variant === 'primary'
+      ? `
+    background: ${colors.light.blue1};
+    color: white;
+    border: none;
+    &:hover {
+      background: ${colors.light.blue2};
+    }
+  `
+      : `
+    background: transparent;
+    color: ${colors.light.blue1};
+    border: 1px solid ${colors.light.blue1};
+    &:hover {
+      background: ${colors.light.blue1}10;
+    }
+  `}
+`;
 
 const BountiesLandingPage: React.FC = () => {
   const isMobile = useIsMobile();
+  const [isOpenStartupModal, setIsOpenStartupModal] = useState(false);
 
   const color = colors['light'];
 
@@ -25,7 +62,7 @@ const BountiesLandingPage: React.FC = () => {
   `;
 
   const ContentWrapper = styled.div`
-    max-width: 1500px;
+    max-width: 1550px;
     width: 100%;
     margin: 40px;
     padding: 40px;
@@ -50,10 +87,8 @@ const BountiesLandingPage: React.FC = () => {
   const ContentGrid = styled.div`
     display: grid;
     grid-template-columns: 2fr 1fr;
-    gap: 60px;
     height: 100%;
     position: relative;
-    margin-right: -20px;
 
     &:after {
       content: '';
@@ -93,7 +128,7 @@ const BountiesLandingPage: React.FC = () => {
       font-family: Barlow;
       color: ${color.text1};
       margin-bottom: 24px;
-      font-weight: 500;
+      font-weight: 600;
     }
 
     p {
@@ -115,7 +150,7 @@ const BountiesLandingPage: React.FC = () => {
       font-family: Barlow;
       color: ${color.text1};
       margin-bottom: 24px;
-      font-weight: 500;
+      font-weight: 600;
     }
 
     p {
@@ -127,24 +162,48 @@ const BountiesLandingPage: React.FC = () => {
     }
   `;
 
+  const handleStartEarning = () => {
+    setIsOpenStartupModal(true);
+  };
+
+  const handleViewBounties = () => {
+    window.open('https://community.sphinx.chat/bounties', '_blank');
+  };
+
   return (
     <Body isMobile={isMobile}>
       <ContentWrapper>
         <ContentGrid>
           <ScrollableColumn>
-            <h1>Welcome to Bounties</h1>
+            <h1>Complete Tasks and Get Paid in Bitcoin Instantly</h1>
             <p>
-              Building the modern marketplace for work. Complete a bounty and get paid in Bitcoin
-              instantly! ⚡
+              Welcome to the modern marketplace for work that gives you the freedom to earn Bitcoin
+              for every bounty you complete.
             </p>
+            <ButtonContainer>
+              <Button variant="primary" onClick={handleStartEarning}>
+                Start Earning Bitcoin
+              </Button>
+              <Button variant="secondary" onClick={handleViewBounties}>
+                View Open Bounties
+              </Button>
+            </ButtonContainer>
             <BountyComponents />
           </ScrollableColumn>
           <Column>
-            <h1>Freedom to Earn!</h1>
+            <h1>All-Time Top Bounty Hunters</h1>
             <TopEarners limit={5} />
           </Column>
         </ContentGrid>
       </ContentWrapper>
+
+      {isOpenStartupModal && (
+        <StartUpModal
+          closeModal={() => setIsOpenStartupModal(false)}
+          dataObject={'createWork'}
+          buttonColor={'success'}
+        />
+      )}
     </Body>
   );
 };