sp/sumr-main-page-content-v1 (#588)

## Description [Provide a brief description of the changes in this PR] ## Changes - added SumrConversionAndPrice, SumrWhatIsSumrToken and SumrGovernance sections ## Benefits 1. [List the benefits of these changes] 2. 3. ## Testing [Describe how these changes were tested or how they can be tested] ## Next steps - [List any follow-up actions or considerations] ## Additional Notes [Any additional information, context, or notes for reviewers] Please review and provide any feedback or suggestions for improvement.  ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced the `SumrConversionAndPrice` and `SumrGovernance` components to display pricing and governance information. - Added the `SumrWhatIsSumrToken` component with a video toggle feature. - New `MarketingPointsList` component to showcase marketing points with smooth transitions. - **Enhancements** - Updated styling for various components, improving layout and responsiveness. - Added new icons to enhance visual representation throughout the application. - **Bug Fixes** - Improved link behavior in the newsletter subscription component to open in a new tab. - **Documentation** - Expanded module exports to include new components and types for better usability.
OasisDEX · Dec 4, 2024 · 5b6fdd8 · 5b6fdd8
1 parent 5610dc1
commit 5b6fdd8
Show file tree

Hide file tree

Showing 34 changed files with 1,234 additions and 10 deletions.
diff --git a/apps/earn-protocol/app/earn/sumr/page.tsx b/apps/earn-protocol/app/earn/sumr/page.tsx
@@ -2,8 +2,10 @@ import { SumrPageView } from '@/components/layout/SumrPageView/SumrPageView'
 
 export const revalidate = 60
 
-const SumrPage = async () => {
-  return <SumrPageView />
+const SumrPage = () => {
+  const sumrPrice = '4.67'
+
+  return <SumrPageView sumrPrice={sumrPrice} />
 }
 
 export default SumrPage
diff --git a/apps/earn-protocol/components/layout/SumrPageView/SumrPageView.tsx b/apps/earn-protocol/components/layout/SumrPageView/SumrPageView.tsx
@@ -1,13 +1,25 @@
+import { type FC } from 'react'
+
 import { SumrClaimSearch } from '@/features/sumr-claim/components/SumrClaimSearch/SumrClaimSearch'
+import { SumrConversionAndPrice } from '@/features/sumr-claim/components/SumrConversionAndPrice/SumrConversionAndPrice'
+import { SumrGovernance } from '@/features/sumr-claim/components/SumrGovernance/SumrGovernance'
 import { SumrTransferabilityCounter } from '@/features/sumr-claim/components/SumrTransferabilityCounter/SumrTransferabilityCounter'
+import { SumrWhatIsSumrToken } from '@/features/sumr-claim/components/SumrWhatIsSumrToken/SumrWhatIsSumrToken'
 
 import classNames from './SumrPageView.module.scss'
 
-export const SumrPageView = () => {
+interface SumrPageViewProps {
+  sumrPrice: string
+}
+
+export const SumrPageView: FC<SumrPageViewProps> = ({ sumrPrice }) => {
   return (
     <div className={classNames.sumrPageWrapper}>
       <SumrClaimSearch />
+      <SumrConversionAndPrice sumrPrice={sumrPrice} />
       <SumrTransferabilityCounter />
+      <SumrWhatIsSumrToken />
+      <SumrGovernance />
     </div>
   )
 }
diff --git a/apps/earn-protocol/features/newsletter/components/NewsletterWrapper/NewsletterWrapper.tsx b/apps/earn-protocol/features/newsletter/components/NewsletterWrapper/NewsletterWrapper.tsx
@@ -71,7 +71,7 @@ export const NewsletterWrapper = () => {
             By entering your email address, you acknowledge that Oazo Apps Limited will collect and
             process your personal data for marketing purposes (e.g. newsletter, updates). For more
             information please refer to our{' '}
-            <Link legacyBehavior prefetch={false} href="/privacy">
+            <Link legacyBehavior prefetch={false} href="/privacy" target="_blank">
               <Text as="span" variant="p3" style={{ color: 'var(--earn-protocol-primary-100)' }}>
                 Privacy Policy
               </Text>

diff --git a/.../features/sumr-claim/components/SumrConversionAndPrice/SumrConversionAndPrice.module.scss b/.../features/sumr-claim/components/SumrConversionAndPrice/SumrConversionAndPrice.module.scss
@@ -0,0 +1,25 @@
+.sumrConversionAndPriceWrapper {
+  display: flex;
+  gap: var(--general-space-24);
+  flex-wrap: wrap;
+  margin-top: 90px;
+
+  .customCard {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background: linear-gradient(
+      308.13deg,
+      rgba(28, 28, 28, 0.2) 1.53%,
+      rgba(175, 20, 92, 0.1) 50.19%,
+      rgba(190, 0, 89, 0.2) 98.85%
+    );
+
+    @media (min-width: 768px) {
+      flex: 1;
+      min-width: 541px;
+    }
+  }
+}
diff --git a/...protocol/features/sumr-claim/components/SumrConversionAndPrice/SumrConversionAndPrice.tsx b/...protocol/features/sumr-claim/components/SumrConversionAndPrice/SumrConversionAndPrice.tsx
@@ -0,0 +1,44 @@
+import { type FC } from 'react'
+import { Card, Text } from '@summerfi/app-earn-ui'
+import { formatFiatBalance } from '@summerfi/app-utils'
+
+import classNames from './SumrConversionAndPrice.module.scss'
+
+const getData = (price: string) => [
+  {
+    title: '$RAYS <> $SUMR Conversion',
+    value: '2.2 for 1',
+    description: '*Season 1 $RAYS',
+  },
+  {
+    title: 'SUMR Token price',
+    value: `$${formatFiatBalance(price)}`,
+    description: '*Assumes a 500M Market Cap upon transferability ',
+  },
+]
+
+interface SumrConversionAndPriceProps {
+  sumrPrice: string
+}
+
+export const SumrConversionAndPrice: FC<SumrConversionAndPriceProps> = ({ sumrPrice }) => {
+  const data = getData(sumrPrice)
+
+  return (
+    <div className={classNames.sumrConversionAndPriceWrapper}>
+      {data.map((item) => (
+        <Card key={item.title} className={classNames.customCard}>
+          <Text as="p" variant="p2semi">
+            {item.title}
+          </Text>
+          <Text as="h2" variant="h2colorful">
+            {item.value}
+          </Text>
+          <Text as="p" variant="p4semi" style={{ color: 'var(--earn-protocol-secondary-40)' }}>
+            {item.description}
+          </Text>
+        </Card>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/earn-protocol/features/sumr-claim/components/SumrGovernance/SumrGovernance.module.scss b/apps/earn-protocol/features/sumr-claim/components/SumrGovernance/SumrGovernance.module.scss
@@ -0,0 +1,40 @@
+.sumrGovernanceWrapper {
+  margin-top: 90px;
+
+  .sumrGovernanceContent {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    @media (min-width: 768px) {
+      min-width: 849px;
+    }
+
+    > p {
+      margin-bottom: var(--general-space-24);
+      color: var(--earn-protocol-secondary-40);
+    }
+
+    .customCard {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      border: 1px solid var(--earn-protocol-neutral-70);
+      margin-bottom: var(--general-space-24);
+    }
+
+    .actionableWrapper {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: var(--general-space-12);
+
+      > button {
+        min-width: unset;
+        height: 38px;
+        font-size: 14px;
+      }
+    }
+  }
+}
diff --git a/apps/earn-protocol/features/sumr-claim/components/SumrGovernance/SumrGovernance.tsx b/apps/earn-protocol/features/sumr-claim/components/SumrGovernance/SumrGovernance.tsx
@@ -0,0 +1,130 @@
+'use client'
+import { type FC, type ReactNode } from 'react'
+import { Button, Card, MarketingPointsList, Text, WithArrow } from '@summerfi/app-earn-ui'
+import Link from 'next/link'
+
+import {
+  sumrGovernLazySummerData,
+  sumrStakeToDelegate,
+} from '@/features/sumr-claim/components/SumrGovernance/const'
+import { SumrGovernanceList } from '@/features/sumr-claim/components/SumrGovernanceList/SumrGovernanceList'
+import { SumrOwnership } from '@/features/sumr-claim/components/SumrOwnership/SumrOwnership'
+
+import classNames from './SumrGovernance.module.scss'
+
+interface SumrGovernanceContentProps {
+  children: ReactNode
+  header?: string
+  description?: string
+  button: {
+    label: string
+    action: () => void
+  }
+  link: {
+    label: string
+    href: string
+  }
+}
+
+const SumrGovernanceContent: FC<SumrGovernanceContentProps> = ({
+  children,
+  header,
+  description,
+  button,
+  link,
+}) => {
+  return (
+    <div className={classNames.sumrGovernanceContent}>
+      {header && (
+        <Text
+          as="h3"
+          variant="h3"
+          style={{
+            marginBottom: description ? 'var(--general-space-8)' : 'var(--general-space-24)',
+          }}
+        >
+          {header}
+        </Text>
+      )}
+      {description && (
+        <Text as="p" variant="p2">
+          {description}
+        </Text>
+      )}
+      <Card variant="cardSecondary" className={classNames.customCard}>
+        {children}
+      </Card>
+      <div className={classNames.actionableWrapper}>
+        <Button variant="primaryLarge" onClick={button.action}>
+          {button.label}
+        </Button>
+        <Link href={link.href}>
+          <WithArrow>{link.label}</WithArrow>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+const data = {
+  'govern-lazy-summer': {
+    title: 'Govern Lazy Summer',
+    content: (
+      <SumrGovernanceContent
+        header="The only way to govern Lazy Summer Protocol"
+        button={{ label: 'Go to Governance', action: () => null }}
+        link={{ label: 'Claim $SUMR', href: '/' }}
+      >
+        <SumrGovernanceList list={sumrGovernLazySummerData} />
+      </SumrGovernanceContent>
+    ),
+  },
+  'stake-to-delegate': {
+    title: 'Stake to delegate + earn',
+    content: (
+      <SumrGovernanceContent
+        header="Earn more $SUMR while protecting the protocol"
+        button={{ label: 'Stake your $SUMR', action: () => null }}
+        link={{ label: 'View delegates', href: '/' }}
+      >
+        <SumrGovernanceList list={sumrStakeToDelegate} />
+      </SumrGovernanceContent>
+    ),
+  },
+  'sumr-ownership': {
+    title: '$SUMR ownership',
+    content: (
+      <SumrGovernanceContent
+        header="$SUMR ownership"
+        button={{ label: 'Go to Governance', action: () => null }}
+        link={{ label: 'Claim $SUMR', href: '/' }}
+      >
+        <SumrOwnership />
+      </SumrGovernanceContent>
+    ),
+  },
+  'sumr-supply-schedule': {
+    title: '$SUMR supply schedule',
+    content: (
+      <SumrGovernanceContent
+        header="Predictable and transparent supply schedule"
+        description="35% Community Allocation. Overtime, a significant portion of $SUMR will be distributed to the community, ensuring decentralized control and fostering a user-driven protocol."
+        button={{ label: 'Claim $SUMR', action: () => null }}
+        link={{ label: 'Claim $SUMR', href: '/' }}
+      >
+        Content
+      </SumrGovernanceContent>
+    ),
+  },
+}
+
+export const SumrGovernance = () => {
+  return (
+    <div className={classNames.sumrGovernanceWrapper}>
+      <MarketingPointsList
+        header="Governance power, robust tokenomic’s and multiple ways to earn"
+        data={data}
+      />
+    </div>
+  )
+}
diff --git a/apps/earn-protocol/features/sumr-claim/components/SumrGovernance/const.ts b/apps/earn-protocol/features/sumr-claim/components/SumrGovernance/const.ts
@@ -0,0 +1,42 @@
+import { type IconNamesList } from '@summerfi/app-earn-ui'
+
+type SumrGovernListData = {
+  iconName: IconNamesList
+  title: string
+  description: string
+}[]
+
+export const sumrGovernLazySummerData: SumrGovernListData = [
+  {
+    iconName: 'plant_colorful',
+    title: 'Curate the best of Defi',
+    description:
+      'Approve or off board markets, ensuring only the best and safest yield opportunities are available.',
+  },
+  {
+    iconName: 'checkmark_cookie_colorful',
+    title: 'Keep contributors accountable',
+    description:
+      'Monitor and hold third-party contributors (Risk Curators) accountable, ensuring consistent, responsible protocol management.',
+  },
+  {
+    iconName: 'migrate_colorful',
+    title: 'Allocate Protocol Captial',
+    description: 'Influence revenue allocations to balance growth',
+  },
+]
+
+export const sumrStakeToDelegate: SumrGovernListData = [
+  {
+    iconName: 'plant_colorful',
+    title: 'Stake for 2.6%',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  },
+  {
+    iconName: 'checkmark_cookie_colorful',
+    title: 'Delegate decision making',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  },
+]
diff --git a/...protocol/features/sumr-claim/components/SumrGovernanceList/SumrGovernanceList.module.scss b/...protocol/features/sumr-claim/components/SumrGovernanceList/SumrGovernanceList.module.scss
@@ -0,0 +1,29 @@
+.sumrGovernanceListWrapper {
+  display: flex;
+  padding: var(--general-space-32);
+  flex-direction: column;
+
+  .sumrGovernanceContentWrapper {
+    display: flex;
+    gap: var(--general-space-24);
+    margin-bottom: var(--general-space-64);
+    flex-wrap: wrap;
+    justify-content: center;
+
+    &:last-child {
+      margin-bottom: unset;
+    }
+
+    .sumrGovernanceListTextual {
+      display: flex;
+      flex-direction: column;
+      gap: var(--general-space-8);
+      flex: 1;
+      min-width: 200px;
+
+      > p {
+        color: var(--earn-protocol-secondary-40);
+      }
+    }
+  }
+}
diff --git a/apps/earn-protocol/features/sumr-claim/components/SumrGovernanceList/SumrGovernanceList.tsx b/apps/earn-protocol/features/sumr-claim/components/SumrGovernanceList/SumrGovernanceList.tsx
@@ -0,0 +1,28 @@
+import { type FC } from 'react'
+import { type IconNamesList, IconWithBackground, Text } from '@summerfi/app-earn-ui'
+
+import classNames from './SumrGovernanceList.module.scss'
+
+interface SumrGovernanceListProps {
+  list: { iconName: IconNamesList; title: string; description: string }[]
+}
+
+export const SumrGovernanceList: FC<SumrGovernanceListProps> = ({ list }) => {
+  return (
+    <div className={classNames.sumrGovernanceListWrapper}>
+      {list.map((item) => (
+        <div className={classNames.sumrGovernanceContentWrapper} key={item.title}>
+          <IconWithBackground iconName={item.iconName} backgroundSize={64} />
+          <div className={classNames.sumrGovernanceListTextual}>
+            <Text as="h5" variant="h5">
+              {item.title}
+            </Text>
+            <Text as="p" variant="p2">
+              {item.description}
+            </Text>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}