Add button styling to ActionBanner and implement LazySummerBanner wit…

…h rays handling
OasisDEX · Jan 31, 2025 · 768bfae · 768bfae
1 parent 1f896c1
commit 768bfae
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 5 deletions.
diff --git a/components/ActionBanner.tsx b/components/ActionBanner.tsx
@@ -27,6 +27,7 @@ export type ActionBannerType = {
   closingSaveKey?: string
   cta?: CtaType | CtaType[]
   sx?: ThemeUIStyleObject
+  buttonSx?: ThemeUIStyleObject
   title: string
   withClose?: boolean
   lightText?: boolean
@@ -43,10 +44,12 @@ const CtaComponent = ({
   cta,
   customCtaVariant,
   lightText,
+  buttonSx,
 }: {
   cta: ActionBannerProps['cta']
   customCtaVariant: ActionBannerProps['customCtaVariant']
   lightText: ActionBannerProps['lightText']
+  buttonSx: ActionBannerProps['buttonSx']
 }) => {
   if (Array.isArray(cta)) {
     return (
@@ -72,7 +75,7 @@ const CtaComponent = ({
         >
           <Button
             variant={customCtaVariant ?? 'action'}
-            sx={{ color: lightText ? 'neutral10' : undefined }}
+            sx={{ color: lightText ? 'neutral10' : undefined, ...buttonSx }}
           >
             {cta.label}
           </Button>
@@ -81,7 +84,7 @@ const CtaComponent = ({
         cta.onClick && (
           <Button
             variant={customCtaVariant ?? 'action'}
-            sx={{ color: lightText ? 'neutral10' : undefined }}
+            sx={{ color: lightText ? 'neutral10' : undefined, ...buttonSx }}
             onClick={cta.onClick}
           >
             {cta.label}
@@ -103,6 +106,7 @@ export function ActionBanner({
   withClose,
   lightText = false,
   customCtaVariant,
+  buttonSx,
 }: ActionBannerProps) {
   const [isBannerClosed, setIsBannerClosed] = useState<boolean>(
     closingSaveKey ? sessionStorage.getItem(getSessionStorageKey(closingSaveKey)) === '1' : false,
@@ -141,7 +145,14 @@ export function ActionBanner({
           </Text>
         )}
       </Flex>
-      {cta && <CtaComponent cta={cta} lightText={lightText} customCtaVariant={customCtaVariant} />}
+      {cta && (
+        <CtaComponent
+          cta={cta}
+          lightText={lightText}
+          customCtaVariant={customCtaVariant}
+          buttonSx={buttonSx}
+        />
+      )}
       {withClose && (
         <Button
           variant="unStyled"

diff --git a/components/portfolio/LazySummerBanner.tsx → components/LazySummerBanner.tsx b/components/portfolio/LazySummerBanner.tsx → components/LazySummerBanner.tsx
@@ -1,5 +1,6 @@
 import { ActionBanner } from 'components/ActionBanner'
 import type { RaysUserResponse } from 'features/rays/getRaysUser'
+import { useUserRays } from 'features/rays/hooks/useUserRays'
 import { EXTERNAL_LINKS } from 'helpers/applicationLinks'
 import { formatAddress } from 'helpers/formatters/format'
 import React from 'react'
@@ -12,6 +13,16 @@ interface LazySummerBannerProps {
   raysData?: RaysUserResponse
 }
 
+export const LazySummerBannerWithRaysHandling = ({ address, isOwner }: LazySummerBannerProps) => {
+  const { userRaysData } = useUserRays({
+    walletAddress: address,
+  })
+
+  return userRaysData ? (
+    <LazySummerBanner isOwner={isOwner} address={address} raysData={userRaysData} />
+  ) : null
+}
+
 export const LazySummerBanner = ({ address, isOwner, raysData }: LazySummerBannerProps) => {
   const title = isOwner
     ? 'The wait is over! You’re eligible to claim $SUMR'
@@ -27,6 +38,13 @@ export const LazySummerBanner = ({ address, isOwner, raysData }: LazySummerBanne
           url: `${EXTERNAL_LINKS.LAZY_SUMMER}${isOwner ? `/portfolio/${address}` : ''}`,
           targetBlank: true,
         }}
+        buttonSx={{
+          background: 'linear-gradient(90deg, #FF49A4 0%, #B049FF 100%)',
+          color: 'white',
+          '&:hover': {
+            borderColor: 'transparent',
+          },
+        }}
         sx={{
           background: 'white',
         }}

diff --git a/components/vault/GeneralManageLayout.tsx b/components/vault/GeneralManageLayout.tsx
@@ -1,6 +1,7 @@
 import { RiskRatio } from '@oasisdex/dma-library'
 import type { NetworkIds } from 'blockchain/networks'
 import { isSupportedAutomationIlk } from 'blockchain/tokensMetadata'
+import { LazySummerBannerWithRaysHandling } from 'components/LazySummerBanner'
 import { guniFaq } from 'features/content/faqs/guni'
 import { GuniVaultHeader } from 'features/earn/guni/common/GuniVaultHeader'
 import type { GeneralManageVaultState } from 'features/generalManageVault/generalManageVault.types'
@@ -77,6 +78,7 @@ export function GeneralManageLayout({ generalManageVault, chainId }: GeneralMana
 
   return (
     <Grid gap={0} sx={{ width: '100%' }}>
+      {account && <LazySummerBannerWithRaysHandling isOwner={isOwner} address={account} />}
       {isOwner && SkyUpgrade && <UpgradeToSkyBanner />}
       <VaultNoticesView id={vault.id} />
       <Box sx={{ zIndex: 2, mt: 4 }}>{headlineElement}</Box>

diff --git a/features/dsr/containers/DsrView.tsx b/features/dsr/containers/DsrView.tsx
@@ -1,5 +1,6 @@
 import type { BigNumber } from 'bignumber.js'
 import type { Context } from 'blockchain/network.types'
+import { LazySummerBannerWithRaysHandling } from 'components/LazySummerBanner'
 import { TabBar } from 'components/TabBar'
 import { VaultViewMode } from 'components/vault/GeneralManageTabBar.types'
 import { VaultHeadline } from 'components/vault/VaultHeadline'
@@ -67,6 +68,7 @@ export function DsrView({
 
   return (
     <>
+      {account && <LazySummerBannerWithRaysHandling isOwner={isOwner} address={account} />}
       {!isOwner && (
         <Box mb={4}>
           <VaultOwnershipBanner account={account} controller={walletAddress} />

diff --git a/features/omni-kit/controllers/OmniLayoutController.tsx b/features/omni-kit/controllers/OmniLayoutController.tsx
@@ -1,3 +1,4 @@
+import { LazySummerBannerWithRaysHandling } from 'components/LazySummerBanner'
 import { MessageCard } from 'components/MessageCard'
 import { TabBar } from 'components/TabBar'
 import { DisabledOptimizationControl } from 'components/vault/DisabledOptimizationControl'
@@ -112,6 +113,7 @@ export function OmniLayoutController({ txHandler }: { txHandler: () => () => voi
 
   return (
     <Container variant="vaultPageContainerStatic">
+      {owner && <LazySummerBannerWithRaysHandling isOwner={isOwner} address={owner} />}
       {contextIsLoaded && !isOwner && !isOpening && (
         <VaultOwnershipBanner controller={owner} account={walletAddress} mb={4} />
       )}
@@ -124,7 +126,6 @@ export function OmniLayoutController({ txHandler }: { txHandler: () => () => voi
           />
         </Box>
       )}
-
       {isOwner && showSkyBanner && <UpgradeToSkyBanner />}
       {positionBanner && <Box sx={{ mb: 4 }}>{positionBanner}</Box>}
       <VaultHeadline

diff --git a/pages/earn/srr/[wallet].tsx b/pages/earn/srr/[wallet].tsx
@@ -6,6 +6,7 @@ import { GasEstimationContextProvider } from 'components/context/GasEstimationCo
 import { ProductContextHandler } from 'components/context/ProductContextHandler'
 import { useProductContext } from 'components/context/ProductContextProvider'
 import { AppLayout } from 'components/layouts/AppLayout'
+import { LazySummerBannerWithRaysHandling } from 'components/LazySummerBanner'
 import { PositionLoadingState } from 'components/vault/PositionLoadingState'
 import { VaultHeadline } from 'components/vault/VaultHeadline'
 import { VaultOwnershipBanner } from 'features/notices/VaultsNoticesView'
@@ -125,6 +126,9 @@ const SkyStakeUsdsView = ({ walletAddress }: { walletAddress?: string }) => {
   const [usdsAllowance, skyAllowance] = allowancesData || [undefined, undefined]
   return (
     <Container variant="vaultPageContainer">
+      {walletAddress && (
+        <LazySummerBannerWithRaysHandling isOwner={isOwner} address={walletAddress} />
+      )}
       {!isOwner && walletAddress && (
         <Box mb={4}>
           <VaultOwnershipBanner account={wallet?.accounts[0]?.address} controller={walletAddress} />

diff --git a/pages/portfolio/[address].tsx b/pages/portfolio/[address].tsx
@@ -1,7 +1,7 @@
 import { Announcement } from 'components/Announcement'
 import { ProductContextProvider } from 'components/context/ProductContextProvider'
 import { PortfolioLayout } from 'components/layouts/PortfolioLayout'
-import { LazySummerBanner } from 'components/portfolio/LazySummerBanner'
+import { LazySummerBanner } from 'components/LazySummerBanner'
 import { PortfolioHeader } from 'components/portfolio/PortfolioHeader'
 import { PortfolioNonOwnerNotice } from 'components/portfolio/PortfolioNonOwnerNotice'
 import { PortfolioOverview } from 'components/portfolio/PortfolioOverview'