From 66415873eeafe0829296cc1132128bc487714e28 Mon Sep 17 00:00:00 2001
From: Marcin Ciarka <marcin@oazoapps.com>
Date: Wed, 25 Sep 2024 17:47:07 +0200
Subject: [PATCH 1/2] Refactor ActionBanner component to support multiple CTAs
 Use multiple CTAs on the upgrade banner

---
 components/ActionBanner.tsx              | 95 +++++++++++++++---------
 pages/[networkOrProduct]/sky/upgrade.tsx | 19 +++--
 2 files changed, 74 insertions(+), 40 deletions(-)

diff --git a/components/ActionBanner.tsx b/components/ActionBanner.tsx
index a48a462644..8a2c0b8a88 100644
--- 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/pages/[networkOrProduct]/sky/upgrade.tsx b/pages/[networkOrProduct]/sky/upgrade.tsx
index b917c337c2..58df0cd3c3 100644
--- 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]}>

From 75bed228b6c81ffefec2015e26b7671d646ca306 Mon Sep 17 00:00:00 2001
From: Marcin Ciarka <marcin@oazoapps.com>
Date: Wed, 25 Sep 2024 18:06:44 +0200
Subject: [PATCH 2/2] Update Sky and Sky related logos/icons

---
 features/homepage/helpers/constants.ts        |   8 +-
 lendingProtocols/lendingProtocolsConfigs.ts   |   3 +-
 public/static/img/homepage/slider/sky.svg     |  17 +++
 public/static/img/protocol_icons/sky_logo.svg | 123 ++++++++++++++++++
 theme/icons/cle.tsx                           |  17 ++-
 5 files changed, 161 insertions(+), 7 deletions(-)
 create mode 100644 public/static/img/homepage/slider/sky.svg
 create mode 100644 public/static/img/protocol_icons/sky_logo.svg

diff --git a/features/homepage/helpers/constants.ts b/features/homepage/helpers/constants.ts
index 172994f1ba..300aedb61d 100644
--- 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
index d42dfd51e7..1a5b54e5d5 100644
--- 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/public/static/img/homepage/slider/sky.svg b/public/static/img/homepage/slider/sky.svg
new file mode 100644
index 0000000000..67de28f6f9
--- /dev/null
+++ b/public/static/img/homepage/slider/sky.svg
@@ -0,0 +1,17 @@
+<svg width="110" height="38" viewBox="0 0 110 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M97.3244 37.9999H92.4192L97.0475 27.911L88.8193 10.9377H94.0015L99.5395 23.1236L104.722 10.9377H109.587L97.3244 37.9999ZM87.1521 10.9377L79.2406 19.088L87.3104 30.2057H81.6929L76.0362 22.3323L73.6628 24.8249V30.2057H69.1133V1.56079H73.6628V18.7319L81.0601 10.9377H87.1521ZM64.2649 8.72204L59.9925 10.0672C59.7156 8.3264 58.2519 5.75466 54.4938 5.75466C51.6456 5.75466 49.6677 7.65379 49.6677 9.7903C49.6677 11.5707 50.7754 12.9159 52.9511 13.3907L56.986 14.2215C61.9309 15.2107 64.5813 18.3363 64.5813 22.2927C64.5813 26.6449 61.0606 30.7992 54.6521 30.7992C47.5315 30.7992 44.2482 26.2097 43.813 22.1741L48.2436 20.908C48.5205 23.8358 50.6171 26.5262 54.6521 26.5262C58.0146 26.5262 59.7552 24.8249 59.7552 22.6488C59.7552 20.8288 58.4102 19.365 55.9971 18.8506L52.0412 18.0197C47.7689 17.1493 44.9207 14.3402 44.9207 10.1464C44.9207 5.43814 49.2326 1.56079 54.4543 1.56079C61.0606 1.56079 63.6319 5.5964 64.2649 8.72204Z" fill="#17344F"/>
+<path d="M3.96387 6.71106C4.46518 6.02106 5.01995 5.37152 5.62304 4.76843L5.82537 4.87996L17.0288 16.1436L17.1352 16.2806L3.96387 6.71106Z" fill="#17344F"/>
+<path opacity="0.7" d="M5.62305 4.76848C8.05417 2.33736 11.1926 0.738284 14.5883 0.200439L14.7009 0.51002L17.1352 16.0648V16.2806L5.62305 4.76848Z" fill="#17344F"/>
+<path opacity="0.5" d="M24.528 1.77539C25.2875 2.16245 26.0153 2.60854 26.7049 3.10957L26.6757 3.36314L17.194 16.2335L17.135 16.2806L24.528 1.77539Z" fill="#17344F"/>
+<path opacity="0.9" d="M33.4156 16.2806C33.4156 17.989 33.1468 19.6868 32.6188 21.3116L32.2338 21.3736L17.2548 16.3416L17.135 16.2806H33.4156Z" fill="#17344F"/>
+<path opacity="0.7" d="M32.619 21.3113C32.091 22.9361 31.3107 24.4677 30.3066 25.8498L29.9355 25.7869L17.212 16.3606L17.135 16.2806L32.619 21.3113Z" fill="#17344F"/>
+<path opacity="0.3" d="M22.1661 31.7644C19.7225 32.5583 17.1258 32.7627 14.5882 32.3608L14.4866 32.0487L17.0617 16.5576L17.135 16.2806L22.1661 31.7644Z" fill="#17344F"/>
+<path opacity="0.7" d="M14.5881 32.3608C13.7458 32.2274 12.9152 32.028 12.104 31.7644L12.0591 31.3879L17.0422 16.4505L17.135 16.2806L14.5881 32.3608Z" fill="#17344F"/>
+<path opacity="0.9" d="M12.1042 31.7644C10.4794 31.2365 8.94782 30.4561 7.56567 29.4519V29.1573L16.9689 16.4466L17.1352 16.2806L12.1042 31.7644Z" fill="#17344F"/>
+<path opacity="0.9" d="M2.62898 23.6718C1.46256 21.3826 0.854493 18.8498 0.854492 16.2806L1.06275 16.2037H16.6085L17.1351 16.2806L2.62898 23.6718Z" fill="#17344F"/>
+<path opacity="0.5" d="M14.5874 0.200598C17.1254 -0.201541 19.7226 0.00280071 22.1664 0.796911L17.1352 16.2806L14.5874 0.200598Z" fill="#17344F"/>
+<path opacity="0.3" d="M26.7046 3.10938C29.486 5.13014 31.5562 7.97948 32.6187 11.2491L17.135 16.2806L26.7046 3.10938Z" fill="#17344F"/>
+<path d="M7.56566 29.4519C6.18352 28.4477 4.96805 27.2323 3.96387 25.8501L17.1352 16.2806L7.56566 29.4519Z" fill="#17344F"/>
+<path opacity="0.5" d="M0.854492 16.2807C0.854492 14.5722 1.12339 12.8744 1.65132 11.2496L17.1351 16.2807H0.854492Z" fill="#17344F"/>
+<path d="M30.3068 25.8494C29.3027 27.2317 28.0873 28.4471 26.7052 29.4514L17.135 16.2806L30.3068 25.8494Z" fill="#17344F"/>
+</svg>
diff --git a/public/static/img/protocol_icons/sky_logo.svg b/public/static/img/protocol_icons/sky_logo.svg
new file mode 100644
index 0000000000..8aba9bc92b
--- /dev/null
+++ b/public/static/img/protocol_icons/sky_logo.svg
@@ -0,0 +1,123 @@
+<svg width="35" height="12" viewBox="0 0 35 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_5267_169)">
+    <path
+      d="M30.4642 12H28.9152L30.3767 8.814L27.7784 3.45401H29.4149L31.1637 7.30219L32.8002 3.45401H34.3367L30.4642 12ZM27.2519 3.45401L24.7535 6.02779L27.3019 9.53865H25.5279L23.7416 7.05231L22.9921 7.83945V9.53865H21.5554V0.492889H22.9921V5.91534L25.3281 3.45401H27.2519ZM20.0243 2.75434L18.6752 3.17912C18.5877 2.6294 18.1255 1.81727 16.9388 1.81727C16.0393 1.81727 15.4147 2.41699 15.4147 3.09168C15.4147 3.65392 15.7645 4.0787 16.4516 4.22865L17.7258 4.49102C19.2873 4.80338 20.1243 5.7904 20.1243 7.03982C20.1243 8.41418 19.0125 9.72607 16.9887 9.72607C14.7401 9.72607 13.7033 8.27675 13.5659 7.00235L14.965 6.60252C15.0524 7.52709 15.7145 8.3767 16.9887 8.3767C18.0506 8.3767 18.6002 7.83945 18.6002 7.15227C18.6002 6.57754 18.1755 6.11526 17.4135 5.95284L16.1642 5.69045C14.8151 5.41559 13.9156 4.5285 13.9156 3.20413C13.9156 1.71732 15.2773 0.492889 16.9263 0.492889C19.0125 0.492889 19.8245 1.76729 20.0243 2.75434Z"
+      fill="#050505" />
+    <path
+      d="M0.981934 2.11929C1.14024 1.9014 1.31543 1.69628 1.50588 1.50583L1.56978 1.54105L5.10771 5.09798L5.14129 5.14125L0.981934 2.11929Z"
+      fill="url(#paint0_radial_5267_169)" />
+    <path
+      d="M1.50586 1.50583C2.27358 0.73811 3.26465 0.233139 4.337 0.0632935L4.37256 0.161056L5.14127 5.07309V5.14125L1.50586 1.50583Z"
+      fill="url(#paint1_radial_5267_169)" />
+    <path
+      d="M7.47594 0.560638C7.71575 0.682868 7.94561 0.82374 8.16335 0.981957L8.15416 1.06203L5.15992 5.12635L5.1413 5.14124L7.47594 0.560638Z"
+      fill="url(#paint2_radial_5267_169)" />
+    <path
+      d="M10.2825 5.14127C10.2825 5.68075 10.1976 6.2169 10.0309 6.73L9.90932 6.74957L5.17911 5.16052L5.1413 5.14127H10.2825Z"
+      fill="url(#paint3_radial_5267_169)" />
+    <path
+      d="M10.031 6.72989C9.86425 7.24299 9.61784 7.72665 9.30073 8.16312L9.18356 8.14324L5.1656 5.1665L5.1413 5.14127L10.031 6.72989Z"
+      fill="url(#paint4_radial_5267_169)" />
+    <path
+      d="M6.73004 10.0309C5.95839 10.2816 5.13838 10.3461 4.33702 10.2192L4.30493 10.1207L5.11812 5.22873L5.14129 5.14127L6.73004 10.0309Z"
+      fill="url(#paint5_radial_5267_169)" />
+    <path
+      d="M4.33698 10.2192C4.07097 10.1771 3.80868 10.1141 3.55252 10.0309L3.53833 9.91199L5.11195 5.19491L5.14125 5.14127L4.33698 10.2192Z"
+      fill="url(#paint6_radial_5267_169)" />
+    <path
+      d="M3.55254 10.0309C3.03944 9.86417 2.55579 9.61774 2.11932 9.30061V9.20757L5.08877 5.19368L5.14127 5.14127L3.55254 10.0309Z"
+      fill="url(#paint7_radial_5267_169)" />
+    <path
+      d="M0.560363 7.47533C0.192021 6.75242 1.27685e-07 5.95261 0 5.14126L0.0657656 5.117H4.97493L5.14125 5.14126L0.560363 7.47533Z"
+      fill="url(#paint8_radial_5267_169)" />
+    <path
+      d="M4.33667 0.0633467C5.13815 -0.0636446 5.9583 0.000884433 6.73005 0.251656L5.14124 5.14125L4.33667 0.0633467Z"
+      fill="url(#paint9_radial_5267_169)" />
+    <path d="M8.16327 0.981903C9.04159 1.62004 9.69534 2.51983 10.0309 3.55235L5.1413 5.14125L8.16327 0.981903Z"
+      fill="url(#paint10_radial_5267_169)" />
+    <path d="M2.11934 9.30061C1.68288 8.98351 1.29904 8.59967 0.981934 8.1632L5.14129 5.14127L2.11934 9.30061Z"
+      fill="url(#paint11_radial_5267_169)" />
+    <path d="M0 5.14124C4.25616e-08 4.60173 0.0849161 4.06559 0.251631 3.55249L5.14125 5.14124H0Z"
+      fill="url(#paint12_radial_5267_169)" />
+    <path d="M9.30082 8.16299C8.98373 8.59948 8.59991 8.98332 8.16346 9.30046L5.1413 5.14127L9.30082 8.16299Z"
+      fill="url(#paint13_radial_5267_169)" />
+  </g>
+  <defs>
+    <radialGradient id="paint0_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14099 5.14131) rotate(-139.191) scale(5.1724 5.1724)">
+      <stop stop-color="#A273FF" />
+      <stop offset="1" stop-color="#4331E9" />
+    </radialGradient>
+    <radialGradient id="paint1_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14151 5.14127) rotate(-98.9946) scale(5.26467 5.26466)">
+      <stop stop-color="#F7A7F9" />
+      <stop offset="1" stop-color="#00DDFB" />
+    </radialGradient>
+    <radialGradient id="paint2_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14129 5.14126) scale(5.26838)">
+      <stop stop-color="#FFF3D0" />
+      <stop offset="1" stop-color="#FFC044" />
+    </radialGradient>
+    <radialGradient id="paint3_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.13223 5.13997) rotate(-90) scale(5.27485 5.27484)">
+      <stop stop-color="#A273FF" />
+      <stop offset="0.5" stop-color="#9FAEFF" />
+      <stop offset="1" stop-color="#AAF2E1" />
+    </radialGradient>
+    <radialGradient id="paint4_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.1412 5.14123) rotate(35.9904) scale(5.24432 5.24432)">
+      <stop stop-color="#0075FF" />
+      <stop offset="1" stop-color="#00DDFB" />
+    </radialGradient>
+    <radialGradient id="paint5_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14115 5.1414) rotate(90) scale(5.26362 5.26361)">
+      <stop offset="9.58467e-09" stop-color="#FFCD6B" />
+      <stop offset="1" stop-color="#EB5EDF" />
+    </radialGradient>
+    <radialGradient id="paint6_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14134 5.1412) rotate(90) scale(5.27452 5.27451)">
+      <stop stop-color="#D4FAFF" />
+      <stop offset="1" stop-color="#00DDFB" />
+    </radialGradient>
+    <radialGradient id="paint7_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14128 5.14138) rotate(114.172) scale(5.63534 5.63534)">
+      <stop stop-color="#FFD2B9" />
+      <stop offset="0.289583" stop-color="#C99BED" />
+      <stop offset="1" stop-color="#0075FF" />
+    </radialGradient>
+    <radialGradient id="paint8_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14105 5.14181) rotate(180) scale(6.84821 6.8482)">
+      <stop stop-color="#6D28FF" />
+      <stop offset="1" stop-color="#F7A7F9" />
+    </radialGradient>
+    <radialGradient id="paint9_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14116 5.14125) rotate(-90) scale(5.25937 5.25936)">
+      <stop stop-color="#A273FF" />
+      <stop offset="0.5" stop-color="#9FAEFF" />
+      <stop offset="1" stop-color="#AAF2E1" />
+    </radialGradient>
+    <radialGradient id="paint10_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14035 5.14129) rotate(90) scale(5.26472 5.26471)">
+      <stop offset="0.0002144" stop-color="#FFCD6B" />
+      <stop offset="1" stop-color="#EB5EDF" />
+    </radialGradient>
+    <radialGradient id="paint11_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14099 5.14133) rotate(-139.191) scale(5.1724 5.17239)">
+      <stop stop-color="#A273FF" />
+      <stop offset="1" stop-color="#4331E9" />
+    </radialGradient>
+    <radialGradient id="paint12_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.14119 5.14138) rotate(180) scale(5.26828 5.26826)">
+      <stop stop-color="#FFF3D0" />
+      <stop offset="1" stop-color="#FFC044" />
+    </radialGradient>
+    <radialGradient id="paint13_radial_5267_169" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(5.141 5.14133) rotate(-139.191) scale(5.1724 5.1724)">
+      <stop stop-color="#A273FF" />
+      <stop offset="1" stop-color="#4331E9" />
+    </radialGradient>
+    <clipPath id="clip0_5267_169">
+      <rect width="34.3367" height="12" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/theme/icons/cle.tsx b/theme/icons/cle.tsx
index efe0fdd60f..fc9551c038 100644
--- 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',