From 235015763ffe5373aebeeb4e8410110091d137c0 Mon Sep 17 00:00:00 2001
From: vidvidvid <weetopol@gmail.com>
Date: Fri, 22 Nov 2024 18:29:46 +0100
Subject: [PATCH] reward icons

---
 .../ui/app/_components/markets/APRCell.tsx    | 47 +++++++++++--------
 .../app/_components/markets/RewardsIcon.tsx   | 45 ++++++++++++++++++
 2 files changed, 72 insertions(+), 20 deletions(-)
 create mode 100644 packages/ui/app/_components/markets/RewardsIcon.tsx

diff --git a/packages/ui/app/_components/markets/APRCell.tsx b/packages/ui/app/_components/markets/APRCell.tsx
index cbed4286e..05ff24a67 100644
--- a/packages/ui/app/_components/markets/APRCell.tsx
+++ b/packages/ui/app/_components/markets/APRCell.tsx
@@ -16,6 +16,7 @@ import { multipliers } from '@ui/utils/multipliers';
 import type { Address } from 'viem';
 
 import type { FlywheelReward } from '@ionicprotocol/types';
+import { RewardIcons } from './RewardsIcon';
 
 const FlyWheelRewards = dynamic(() => import('./FlyWheelRewards'), {
   ssr: false
@@ -101,6 +102,24 @@ export default function APRCell({
     </div>
   );
 
+  const getRewardIcons = () => {
+    const icons: string[] = [];
+
+    if (showOPRewards) icons.push('op');
+    if (config?.ionic) icons.push('ionic');
+    if (config?.turtle) icons.push('turtle');
+    if (config?.etherfi) icons.push('etherfi');
+    if (config?.kelp) icons.push('kelp');
+    if (config?.eigenlayer) icons.push('eigen');
+    if (config?.spice) icons.push('spice');
+    if (type === 'supply') {
+      if (config?.anzen) icons.push('anzen');
+      if (config?.nektar) icons.push('nektar');
+    }
+
+    return icons;
+  };
+
   return (
     <HoverCard openDelay={50}>
       <HoverCardTrigger asChild>
@@ -109,7 +128,7 @@ export default function APRCell({
           <div className="flex flex-col items-start gap-1">
             <span
               className={cn(
-                'rounded-md w-max text-[10px] py-[1px] px-3.5',
+                'rounded-md w-max text-[10px] py-[3px] px-2.5',
                 config?.ionAPR
                   ? 'bg-accent text-green-900'
                   : 'bg-accent/50 text-green-900'
@@ -119,35 +138,23 @@ export default function APRCell({
             </span>
 
             {showRewardsBadge && (
-              <span
+              <div
                 className={cn(
-                  'rounded-md w-max text-[10px] py-[1px] px-2.5',
+                  'rounded-md w-max py-[3px] px-2.5 flex items-center gap-1',
+                  'font-light text-[10px]',
                   pools[dropdownSelectedChain].text,
                   pools[dropdownSelectedChain].bg
                 )}
               >
-                {showOPRewards ? (
-                  <div className="flex items-center">
-                    +{' '}
-                    <Image
-                      src="/images/op-logo-red.svg"
-                      alt="OP"
-                      width={12}
-                      height={12}
-                      className="inline-block mx-[2px]"
-                    />{' '}
-                    REWARDS
-                  </div>
-                ) : (
-                  '+ REWARDS'
-                )}
-              </span>
+                <span>+ Rewards</span>
+                <RewardIcons rewards={getRewardIcons()} />
+              </div>
             )}
 
             {config?.turtle && !isMainModeMarket && (
               <span className="text-darkone rounded-md w-max md:ml-0 text-center">
                 <a
-                  className="text-darkone bg-white rounded-md w-max ml-1 md:ml-0 text-center py-[1px] md:px-1 lg:px-3.5 px-1 flex items-center justify-center gap-1 md:text-[10px] text-[8px]"
+                  className="text-darkone bg-white rounded-md w-max ml-1 md:ml-0 text-center py-[3px] md:px-1 lg:px-2.5 px-1 flex items-center justify-center gap-1 md:text-[10px] text-[8px]"
                   href="https://turtle.club/dashboard/?ref=IONIC"
                   target="_blank"
                   rel="noreferrer"
diff --git a/packages/ui/app/_components/markets/RewardsIcon.tsx b/packages/ui/app/_components/markets/RewardsIcon.tsx
new file mode 100644
index 000000000..9fc9096d7
--- /dev/null
+++ b/packages/ui/app/_components/markets/RewardsIcon.tsx
@@ -0,0 +1,45 @@
+import Image from 'next/image';
+
+type RewardIconsProps = {
+  rewards: string[]; // Array of reward types like 'op', 'ionic', 'turtle', 'kelp', etc.
+};
+
+const iconMap = {
+  op: '/images/op-logo-red.svg',
+  ionic: '/img/ionic-sq.png',
+  turtle: '/images/turtle-ionic.png',
+  stone: '/img/symbols/32/color/stone.png',
+  etherfi: '/images/etherfi.png',
+  kelp: '/images/kelpmiles.png',
+  eigen: '/images/eigen.png',
+  spice: '/img/symbols/32/color/bob.png',
+  anzen: '/img/symbols/32/color/usdz.png',
+  nektar: '/img/symbols/32/color/nektar.png'
+};
+
+export const RewardIcons = ({ rewards }: RewardIconsProps) => {
+  return (
+    <div className="flex items-center">
+      {rewards.map((reward, index) => (
+        <div
+          key={reward}
+          className="rounded-full bg-black"
+          style={{
+            marginLeft: index !== 0 ? '-6px' : '0',
+            zIndex: rewards.length - index // Higher z-index for earlier icons
+          }}
+        >
+          <div className="size-4 flex items-center justify-center">
+            <Image
+              src={iconMap[reward as keyof typeof iconMap]}
+              alt={reward}
+              width={16}
+              height={16}
+              className="rounded-full"
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};