Sky Upgrade page banner update (#4033)

* Refactor ActionBanner component to support multiple CTAs Use multiple CTAs on the upgrade banner * Update Sky and Sky related logos/icons
OasisDEX · Sep 25, 2024 · 357efe0 · 357efe0
1 parent 9f35ef2
commit 357efe0
Show file tree

Hide file tree

Showing 7 changed files with 235 additions and 47 deletions.
diff --git a/components/ActionBanner.tsx b/components/ActionBanner.tsx
@@ -16,15 +16,16 @@ interface ActionBannerWithImage {
   icon?: never
   image?: string
 }
+type CtaType = {
+  label: string
+  onClick?: () => void
+  targetBlank?: boolean
+  url?: string
+}
 
 export type ActionBannerType = {
   closingSaveKey?: string
-  cta?: {
-    label: string
-    onClick?: () => void
-    targetBlank?: boolean
-    url?: string
-  }
+  cta?: CtaType | CtaType[]
   sx?: ThemeUIStyleObject
   title: string
   withClose?: boolean
@@ -38,6 +39,59 @@ function getSessionStorageKey(suffix: string): string {
   return `action-banner-${kebabCase(suffix)}`
 }
 
+const CtaComponent = ({
+  cta,
+  customCtaVariant,
+  lightText,
+}: {
+  cta: ActionBannerProps['cta']
+  customCtaVariant: ActionBannerProps['customCtaVariant']
+  lightText: ActionBannerProps['lightText']
+}) => {
+  if (Array.isArray(cta)) {
+    return (
+      <>
+        {cta.map((ctaItem, index) => (
+          <CtaComponent
+            key={`CtaItem_${ctaItem.label}_${ctaItem.url}_${index}`}
+            cta={ctaItem}
+            lightText={lightText}
+            customCtaVariant={customCtaVariant}
+          />
+        ))}
+      </>
+    )
+  }
+  return cta ? (
+    <Box sx={{ flexShrink: 0, ml: 'auto' }}>
+      {cta.url ? (
+        <AppLink
+          href={cta.url}
+          internalInNewTab={cta.targetBlank}
+          {...(cta.onClick && { onClick: cta.onClick })}
+        >
+          <Button
+            variant={customCtaVariant ?? 'action'}
+            sx={{ color: lightText ? 'neutral10' : undefined }}
+          >
+            {cta.label}
+          </Button>
+        </AppLink>
+      ) : (
+        cta.onClick && (
+          <Button
+            variant={customCtaVariant ?? 'action'}
+            sx={{ color: lightText ? 'neutral10' : undefined }}
+            onClick={cta.onClick}
+          >
+            {cta.label}
+          </Button>
+        )
+      )}
+    </Box>
+  ) : null
+}
+
 export function ActionBanner({
   closingSaveKey,
   children,
@@ -87,34 +141,7 @@ export function ActionBanner({
           </Text>
         )}
       </Flex>
-      {cta && (
-        <Box sx={{ flexShrink: 0, ml: 'auto' }}>
-          {cta.url ? (
-            <AppLink
-              href={cta.url}
-              internalInNewTab={cta.targetBlank}
-              {...(cta.onClick && { onClick: cta.onClick })}
-            >
-              <Button
-                variant={customCtaVariant ?? 'action'}
-                sx={{ color: lightText ? 'neutral10' : undefined }}
-              >
-                {cta.label}
-              </Button>
-            </AppLink>
-          ) : (
-            cta.onClick && (
-              <Button
-                variant={customCtaVariant ?? 'action'}
-                sx={{ color: lightText ? 'neutral10' : undefined }}
-                onClick={cta.onClick}
-              >
-                {cta.label}
-              </Button>
-            )
-          )}
-        </Box>
-      )}
+      {cta && <CtaComponent cta={cta} lightText={lightText} customCtaVariant={customCtaVariant} />}
       {withClose && (
         <Button
           variant="unStyled"

diff --git a/features/homepage/helpers/constants.ts b/features/homepage/helpers/constants.ts
@@ -17,11 +17,11 @@ export const partnerLogosConfig: ImagesSliderProps['items'] = [
     height: '30px',
   },
   {
-    imgSrc: staticFilesRuntimeUrl('/static/img/homepage/slider/maker.svg'),
-    imgAlt: 'Maker',
+    imgSrc: staticFilesRuntimeUrl('/static/img/homepage/slider/sky.svg'),
+    imgAlt: 'Sky',
     url: '',
-    width: '242px',
-    height: '100px',
+    width: '110px',
+    height: '38px',
   },
   {
     imgSrc: staticFilesRuntimeUrl('/static/img/homepage/slider/spark.svg'),

diff --git a/lendingProtocols/lendingProtocolsConfigs.ts b/lendingProtocols/lendingProtocolsConfigs.ts
@@ -10,6 +10,7 @@ import makerLogo from 'public/static/img/protocol_icons/maker_logo.svg'
 import morphoBlueIcon from 'public/static/img/protocol_icons/morpho_blue_icon.svg'
 import morphoBlueLogo from 'public/static/img/protocol_icons/morpho_blue_logo.svg'
 import skyIcon from 'public/static/img/protocol_icons/sky.svg'
+import skyLogo from 'public/static/img/protocol_icons/sky_logo.svg'
 import sparkIcon from 'public/static/img/protocol_icons/spark_icon.svg'
 import sparkLogo from 'public/static/img/protocol_icons/spark_logo.svg'
 
@@ -80,7 +81,7 @@ const skyConfig: LendingProtocolConfig = {
   name: LendingProtocol.Sky,
   label: LendingProtocolLabel.sky,
   icon: skyIcon as string,
-  logo: skyIcon as string,
+  logo: skyLogo as string,
   logoScale: 1.6,
   gradient: 'linear-gradient(159deg, #4a87fa 12.26%, #a294ee 86.52%)',
 }

diff --git a/pages/[networkOrProduct]/sky/upgrade.tsx b/pages/[networkOrProduct]/sky/upgrade.tsx
@@ -77,13 +77,19 @@ function SkySwapWrapper() {
     <>
       {balancesData?.[0] && balancesData[0].isGreaterThan(zero) && (
         <ActionBanner
-          title={`You have ${formatAsShorthandNumbers(balancesData[0])} USDS ready to be staked`}
+          title={`You have ${formatAsShorthandNumbers(balancesData[0])} USDS that can earn SKY or Chronicle Points`}
           lightText
           customCtaVariant="outlineSmall"
-          cta={{
-            label: 'Stake now',
-            url: `/earn/srr/${wallet?.accounts[0].address}`,
-          }}
+          cta={[
+            {
+              label: 'Get SKY Rewards',
+              url: `/earn/srr/${wallet?.accounts[0].address}`,
+            },
+            {
+              label: 'Earn Chronicle Points',
+              url: `/earn/cle/${wallet?.accounts[0].address}`,
+            },
+          ]}
           sx={{
             backgroundImage: `url(${staticFilesRuntimeUrl('/static/img/sky-banner-background.png')})`,
             backgroundSize: 'cover',
@@ -92,7 +98,8 @@ function SkySwapWrapper() {
             my: 4,
           }}
         >
-          Stake your USDS in the Sky Ecosystem to earn SKY rewards.
+          Deposit you USDS in the SKY Ecosystem to earn Chronicle Points or SKY Rewards. Withdraw
+          anytime.
         </ActionBanner>
       )}
       <Grid gap={3} columns={[1, 3]} mt={[1, 3]}>

diff --git a/public/static/img/homepage/slider/sky.svg b/public/static/img/homepage/slider/sky.svg
diff --git a/public/static/img/protocol_icons/sky_logo.svg b/public/static/img/protocol_icons/sky_logo.svg
diff --git a/theme/icons/cle.tsx b/theme/icons/cle.tsx
@@ -2,8 +2,21 @@ import React from 'react'
 export const cle = {
   path: (
     <>
-      <circle cx="16" cy="16" fill="#2fd05b" r="16" />
-      <path d="M12.25 7.25l-5 5v7.5h5v5h7.5l5-5V13.5h-5v6.25h-7.5v-7.5h6.25v-5zm0 0" fill="#fff" />
+      <g clip-path="url(#clip0_15346_4406)">
+        <path
+          d="M16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29Z"
+          fill="#2FD05B"
+        />
+        <path
+          d="M12.9531 8.89062L8.89062 12.9531V19.0469H12.9531V23.1094H19.0469L23.1094 19.0469V13.9688H19.0469V19.0469H12.9531V12.9531H18.0312V8.89062H12.9531Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_15346_4406">
+          <rect width="26" height="26" fill="white" transform="translate(3 3)" />
+        </clipPath>
+      </defs>
     </>
   ),
   viewBox: '0 0 32 32',