@turtleclub/ui 0.3.0-beta.8 → 0.3.0

package/src/components/icons/turtle.tsx

@@ -0,0 +1,143 @@
+export const TurtleIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg className={className} viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_di_10359_4283)">
+        <rect
+          x="7.5"
+          y="8"
+          width="72.4228"
+          height="72.4228"
+          rx="36.2114"
+          fill="url(#paint0_linear_10359_4283)"
+          fill-opacity="0.6"
+          shape-rendering="crispEdges"
+        />
+        <rect
+          x="8.19637"
+          y="8.69637"
+          width="71.03"
+          height="71.03"
+          rx="35.515"
+          stroke="url(#paint1_linear_10359_4283)"
+          stroke-width="1.39275"
+          shape-rendering="crispEdges"
+        />
+        <path
+          d="M34.6871 29.2702C37.3282 27.8148 40.3611 26.987 43.5867 26.987C47.0527 26.987 50.2964 27.9428 53.0703 29.6061C52.9841 24.5814 48.8993 20.5347 43.8728 20.5347C38.9589 20.5347 34.9449 24.4022 34.6871 29.2702Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M61.9247 48.1844C62.0439 47.3321 62.1056 46.4612 62.1056 45.5758C62.1056 39.9145 59.5843 34.8444 55.6074 31.4349C55.7426 31.3415 55.8855 31.2593 56.0359 31.1891C58.6171 29.9842 62.4476 32.759 64.5915 37.3868C66.7355 42.0145 66.381 46.7428 63.7998 47.9476C63.2258 48.2156 62.59 48.2867 61.9247 48.1844Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M49.4152 63.2252C54.8437 61.4199 59.1587 57.1616 61.0565 51.7588C61.7421 53.8589 61.416 56.9595 59.9999 60.0162C57.8559 64.6439 54.0254 67.4187 51.4442 66.2138C50.391 65.7222 49.7085 64.6439 49.4152 63.2252Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M26.2523 52.1315C28.2428 57.4318 32.5769 61.5788 37.9865 63.2995C37.6841 64.6775 37.0078 65.7236 35.9751 66.2056C33.3939 67.4105 29.5634 64.6357 27.4194 60.008C26.0866 57.1311 25.7193 54.2154 26.2523 52.1315Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M31.6668 31.349C27.6317 34.7589 25.0678 39.8668 25.0678 45.5758C25.0678 46.4742 25.1313 47.3578 25.254 48.2222C24.6761 48.2748 24.124 48.1913 23.6196 47.9559C21.0384 46.751 20.6839 42.0228 22.8279 37.395C24.9718 32.7673 28.8023 29.9925 31.3835 31.1974C31.4812 31.243 31.5756 31.2936 31.6668 31.349Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M39.6853 53.4068C40.058 52.892 40.6537 52.5874 41.2876 52.5875L46.1925 52.5876C46.8264 52.5876 47.422 52.8921 47.7947 53.4068L50.8539 57.6315C51.519 58.55 51.2894 59.8539 50.2825 60.3714C46.4401 62.3463 42.3705 62.6008 37.393 60.3329C36.3127 59.8407 36.0176 58.4719 36.7152 57.5086L39.6853 53.4068Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M49.985 51.6751C49.6093 51.1588 49.5038 50.4927 49.7016 49.8849L51.238 45.1637C51.4349 44.5586 51.9085 44.0848 52.5119 43.8891L57.4894 42.2746C58.5908 41.9173 59.7728 42.5815 59.8858 43.7378C59.9368 44.2608 59.963 44.7911 59.963 45.3275C59.9631 48.3548 59.963 49.6928 57.7854 53.45C57.2304 54.4078 56.5793 55.3026 55.8462 56.123C55.0748 56.9861 53.7331 56.8254 53.0517 55.8891L49.985 51.6751Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M56.6678 39.8485C57.7673 39.4878 58.3347 38.2546 57.7523 37.2515C57.3454 36.5507 56.8884 35.8831 56.3861 35.2539C56.3092 35.1576 56.2419 35.0548 56.1752 34.9513C55.2007 33.4387 51.6044 30.8455 49.9469 30.3589C49.8438 30.3286 49.7411 30.2975 49.6412 30.2581C48.859 29.9496 48.0473 29.7006 47.2116 29.5166C46.0799 29.2673 45.085 30.1927 45.0849 31.3557L45.0845 36.6302C45.0845 37.2649 45.3863 37.8615 45.8969 38.2359L49.9259 41.1903C50.4403 41.5675 51.1041 41.6734 51.7097 41.4748L56.6678 39.8485Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M31.6337 56.1229C30.9006 55.3026 30.2494 54.4077 29.6943 53.4499C28.1573 50.9571 27.5167 48.1968 27.5167 45.3272C27.5167 44.7909 27.5429 44.2606 27.594 43.7377C27.707 42.5814 28.8891 41.9173 29.9905 42.2745L34.9679 43.889C35.5713 44.0847 36.0449 44.5585 36.2418 45.1636L37.7781 49.885C37.9759 50.4928 37.8704 51.1589 37.4947 51.6751L34.4283 55.889C33.7469 56.8253 32.4051 56.9861 31.6337 56.1229Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M35.7706 41.4748C36.3761 41.6734 37.0399 41.5675 37.5543 41.1903L41.5832 38.2361C42.0937 37.8617 42.3956 37.2651 42.3955 36.6304L42.3951 31.356C42.395 30.1929 41.4003 29.2762 40.2725 29.5431C39.39 29.7519 38.5318 30.026 37.6893 30.3181C34.9542 31.2662 32.4593 33.5809 31.2103 35.1101C30.6621 35.7811 30.1659 36.497 29.7278 37.2515C29.1454 38.2546 29.7128 39.4877 30.8122 39.8483L35.7706 41.4748Z"
+          fill="#73F36C"
+        />
+        <path
+          d="M42.0281 49.8882C41.1669 49.8882 40.4043 49.3297 40.1417 48.5064L39.0647 45.1309C38.8054 44.3183 39.0916 43.4302 39.7759 42.9239L42.5646 40.861C43.2634 40.344 44.2161 40.344 44.9149 40.861L47.7035 42.9239C48.3879 43.4302 48.6741 44.3183 48.4148 45.1309L47.3378 48.5064C47.0751 49.3297 46.3126 49.8882 45.4514 49.8882H42.0281Z"
+          fill="#73F36C"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_di_10359_4283"
+          x="0.257725"
+          y="0.757725"
+          width="86.9074"
+          height="86.9074"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="3.62114" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.45098 0 0 0 0 0.952941 0 0 0 0 0.423529 0 0 0 0.34 0"
+          />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10359_4283" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_10359_4283"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="3" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.45098 0 0 0 0 0.952941 0 0 0 0 0.423529 0 0 0 1 0"
+          />
+          <feBlend mode="normal" in2="shape" result="effect2_innerShadow_10359_4283" />
+        </filter>
+        <linearGradient
+          id="paint0_linear_10359_4283"
+          x1="7.5"
+          y1="44.2114"
+          x2="79.9228"
+          y2="44.2114"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#121312" />
+          <stop offset="1" stop-color="#73F36C" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_10359_4283"
+          x1="12.5736"
+          y1="7.99998"
+          x2="47.0785"
+          y2="87.4357"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="white" stop-opacity="0.4" />
+          <stop offset="0.405687" stop-color="white" stop-opacity="0.01" />
+          <stop offset="0.574372" stop-color="white" stop-opacity="0.01" />
+          <stop offset="1" stop-color="white" stop-opacity="0.1" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/components/icons/update.tsx

@@ -0,0 +1,108 @@
+export const UpdateIcon = ({ className }: { className?: string }) => (
+  <svg
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clip-path="url(#clip0_223_2)">
+      <g filter="url(#filter0_i_223_2)">
+        <path
+          d="M24.6357 12C24.6357 5.37258 19.2632 0 12.6357 0C6.00832 0 0.635742 5.37258 0.635742 12C0.635742 18.6274 6.00832 24 12.6357 24C19.2632 24 24.6357 18.6274 24.6357 12Z"
+          fill="url(#paint0_linear_223_2)"
+          fill-opacity="0.6"
+        />
+        <path
+          d="M12.6358 0.288454H12.6357C6.16761 0.288454 0.924196 5.53187 0.924196 12V12.0001C0.924196 18.4681 6.16761 23.7116 12.6357 23.7116H12.6358C19.1039 23.7116 24.3473 18.4681 24.3473 12.0001V12C24.3473 5.53187 19.1039 0.288454 12.6358 0.288454Z"
+          stroke="url(#paint1_linear_223_2)"
+          stroke-width="0.576907"
+        />
+        <path
+          d="M7.93685 14.9376C7.12435 15.6201 6.85352 17.6459 6.85352 17.6459C6.85352 17.6459 8.87935 17.3751 9.56185 16.5626C9.94643 16.1076 9.94102 15.4088 9.5131 14.9863C9.30256 14.7853 9.02522 14.6692 8.7343 14.6602C8.44339 14.6512 8.15941 14.75 7.93685 14.9376Z"
+          stroke="#73F36C"
+          stroke-width="0.846154"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M11.999 14.1248L10.374 12.4998C10.6623 11.752 11.0252 11.0352 11.4574 10.3602C12.0885 9.35109 12.9673 8.52021 14.0102 7.94661C15.0531 7.37301 16.2255 7.07576 17.4157 7.08314C17.4157 8.55648 16.9932 11.1456 14.1657 13.0415C13.4815 13.4741 12.7556 13.837 11.999 14.1248Z"
+          stroke="#73F36C"
+          stroke-width="0.846154"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M10.3739 12.4999H7.66553C7.66553 12.4999 7.96344 10.8587 8.74886 10.3332C9.62636 9.74824 11.4572 10.3332 11.4572 10.3332"
+          stroke="#73F36C"
+          stroke-width="0.846154"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M11.999 14.1248V16.8332C11.999 16.8332 13.6403 16.5353 14.1657 15.7498C14.7507 14.8723 14.1657 13.0415 14.1657 13.0415"
+          stroke="#73F36C"
+          stroke-width="0.846154"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_i_223_2"
+        x="0.635742"
+        y="0"
+        width="24"
+        height="24"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="1.24267" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.45098 0 0 0 0 0.952941 0 0 0 0 0.423529 0 0 0 1 0"
+        />
+        <feBlend mode="normal" in2="shape" result="effect1_innerShadow_223_2" />
+      </filter>
+      <linearGradient
+        id="paint0_linear_223_2"
+        x1="0.635742"
+        y1="12"
+        x2="24.6357"
+        y2="12"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#121312" />
+        <stop offset="1" stop-color="#73F36C" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_223_2"
+        x1="2.31706"
+        y1="-5.57125e-06"
+        x2="13.7516"
+        y2="26.324"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" stop-opacity="0.4" />
+        <stop offset="0.405687" stop-color="white" stop-opacity="0.01" />
+        <stop offset="0.574372" stop-color="white" stop-opacity="0.01" />
+        <stop offset="1" stop-color="white" stop-opacity="0.1" />
+      </linearGradient>
+      <clipPath id="clip0_223_2">
+        <rect width="25" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/components/icons/warning.tsx

@@ -0,0 +1,86 @@
+export const WarningIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    className={className}
+  >
+    <g filter="url(#filter0_i_11400_35620)">
+      <rect
+        x="0.635742"
+        width="24"
+        height="24"
+        rx="12"
+        fill="url(#paint0_linear_11400_35620)"
+        fill-opacity="0.6"
+      />
+      <rect
+        x="0.924196"
+        y="0.288454"
+        width="23.4231"
+        height="23.4231"
+        rx="11.7115"
+        stroke="url(#paint1_linear_11400_35620)"
+        stroke-width="0.576907"
+      />
+      <path
+        d="M18.3927 15.5487L13.8966 6.55226C13.7253 6.21349 13.3781 6 12.999 6C12.6198 6 12.2726 6.21349 12.1013 6.55226L7.60521 15.5487C7.44943 15.8599 7.46596 16.2292 7.64879 16.5249C7.83212 16.8211 8.15521 17.0005 8.50285 17H17.4952C17.8428 17.0005 18.1659 16.8211 18.3493 16.5249C18.5321 16.2292 18.5485 15.8599 18.3927 15.5487ZM17.6674 16.102C17.6298 16.1611 17.5652 16.1972 17.4951 16.1982H8.50271C8.43259 16.1972 8.36797 16.1611 8.33039 16.102C8.29783 16.0418 8.29783 15.9697 8.33039 15.9095L12.8186 6.9091C12.8541 6.84245 12.9232 6.80085 12.9989 6.80085C13.0745 6.80085 13.1436 6.84245 13.1792 6.9091L17.6753 15.9095C17.7059 15.9707 17.7029 16.0433 17.6674 16.102ZM13.3997 14.5945C13.3997 14.7569 13.302 14.9027 13.1522 14.9649C13.0024 15.027 12.8301 14.9924 12.7154 14.8782C12.6012 14.7634 12.5666 14.591 12.6288 14.4412C12.6909 14.2913 12.8366 14.1936 12.9989 14.1936C13.1051 14.1936 13.2073 14.2357 13.2824 14.3109C13.3576 14.3861 13.3997 14.4883 13.3997 14.5945ZM13.3997 10.1845V12.9909C13.3997 13.2124 13.2203 13.3918 12.9989 13.3918C12.7775 13.3918 12.5982 13.2124 12.5982 12.9909V10.1845C12.5982 9.963 12.7775 9.7836 12.9989 9.7836C13.2203 9.7836 13.3997 9.963 13.3997 10.1845Z"
+        fill="#F7931A"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_i_11400_35620"
+        x="0.635742"
+        y="0"
+        width="24"
+        height="24"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="1.24267" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.968627 0 0 0 0 0.576471 0 0 0 0 0.101961 0 0 0 0.8 0"
+        />
+        <feBlend mode="normal" in2="shape" result="effect1_innerShadow_11400_35620" />
+      </filter>
+      <linearGradient
+        id="paint0_linear_11400_35620"
+        x1="0.635742"
+        y1="12"
+        x2="24.6357"
+        y2="12"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#121312" />
+        <stop offset="1" stop-color="#F7931A" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_11400_35620"
+        x1="2.31706"
+        y1="-5.32127e-06"
+        x2="13.7516"
+        y2="26.324"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" stop-opacity="0.4" />
+        <stop offset="0.405687" stop-color="white" stop-opacity="0.01" />
+        <stop offset="0.574372" stop-color="white" stop-opacity="0.01" />
+        <stop offset="1" stop-color="white" stop-opacity="0.1" />
+      </linearGradient>
+    </defs>
+  </svg>
+);

package/src/components/molecules/index.ts

@@ -4,5 +4,6 @@ export * from "./swap-details";
 export * from "./route-details";
 export * from "./token-selector";
 export * from "./slippage-selector";
-
+export * from "./tabs";
+export * from "./widget";
 export * from "./opportunity";

package/src/components/molecules/opportunity/index.ts

@@ -1,7 +1,11 @@
 export * from "./opportunity-apr";
 export * from "./opportunity-rate-estimator";
 export * from "./opportunity-section";
-export * from "./opportunity-item";
 export * from "./opportunity-disclaimer";
 export * from "./opportunity-type";
 export * from "./opportunity-selector";
+export * from "./opportunity-list";
+
+// Re-export OpportunityItem from widget folder
+export { OpportunityItem } from "../widget/opportunity-item";
+export type { OpportunityItemProps } from "../widget/opportunity-item";

package/src/components/molecules/opportunity/opportunity-apr.tsx

@@ -1,42 +1,125 @@
 import React from "react";
-import { HoverCard, HoverCardContent, HoverCardTrigger } from "../../ui/hover-card";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../../ui/hover-card";
 import { InfoIcon } from "lucide-react";
-import { Separator } from "../../ui";
+import { LabelWithIcon, Separator } from "../../ui";
+import NumberFlow, { type Value } from "@number-flow/react";
 
+// TODO: Extract aprBreakdown to a type
 interface OpportunityAprProps {
-  apr: string;
+  apr: Value;
   aprBreakdown: {
+    iconUrl: string;
     name: string;
+    description: string;
     apr: string;
+    boost: boolean;
   }[];
+  showBoostedRewardsDescription?: boolean;
+  showBoostedRewards?: boolean;
 }
 
-const OpportunityApr = ({ apr, aprBreakdown }: OpportunityAprProps) => {
+const OpportunityApr = ({
+  apr,
+  aprBreakdown,
+  showBoostedRewards = false,
+  showBoostedRewardsDescription = false,
+}: OpportunityAprProps) => {
+  const boostedRewards = aprBreakdown.filter((item) => item.boost);
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
-        <span className="text-2xl text-accent font-semibold inline-flex items-center gap-1">
-          {apr} <InfoIcon size={16} className="text-muted-foreground font-bold" />
+        <span className="text-accent inline-flex items-center gap-1 text-2xl font-semibold">
+          <NumberFlow
+            value={apr}
+            format={{
+              style: "percent",
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            }}
+          />
+          <InfoIcon
+            size={16}
+            className="text-muted-foreground cursor-pointer font-bold"
+          />
         </span>
       </HoverCardTrigger>
       <HoverCardContent>
+        <h3 className="text-accent text-sm">Rewards</h3>
         <div className="flex flex-col gap-2">
-          {aprBreakdown.map((item) => (
-            <div key={item.name} className="flex justify-between">
-              <span className="text-sm text-muted-foreground">{item.name}</span>
-              <span className="text-sm text-accent font-semibold">{item.apr}</span>
-            </div>
-          ))}
+          {aprBreakdown
+            .filter((item) => !item.boost)
+            .map((item) => (
+              <div key={item.name} className="flex justify-between">
+                <LabelWithIcon
+                  textSize="xs"
+                  icon={item.iconUrl}
+                  iconSize="sm"
+                  className="text-muted-foreground"
+                >
+                  {item.name}
+                </LabelWithIcon>
+                <span className="text-accent text-sm font-semibold">
+                  <NumberFlow
+                    value={parseFloat(item.apr) / 100}
+                    format={{
+                      style: "percent",
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 3,
+                    }}
+                  />
+                </span>
+              </div>
+            ))}
           <Separator />
           <div className="flex justify-between">
-            <span className="text-sm text-accent">Net Reward Rate</span>
-            <span className="text-sm text-accent font-semibold">{apr}</span>
+            <span className="text-accent text-sm">Net Reward Rate</span>
+            <span className="text-accent text-sm font-semibold">
+              <NumberFlow
+                value={apr}
+                format={{
+                  style: "percent",
+                  minimumFractionDigits: 3,
+                  maximumFractionDigits: 3,
+                }}
+              />
+            </span>
           </div>
-          <p className="text-sm text-muted-foreground text-center">
+          {showBoostedRewards && boostedRewards.length > 0 && (
+            <>
+              <Separator />
+              <h3 className="text-accent text-sm">Boosted Rewards</h3>
+              <div className="flex justify-between">
+                <span className="text-accent text-sm font-semibold">
+                  {boostedRewards.map((item) => (
+                    <div key={item.name} className="flex flex-col gap-2">
+                      <LabelWithIcon
+                        textSize="xs"
+                        icon={item.iconUrl}
+                        iconSize="sm"
+                        className="text-muted-foreground"
+                      >
+                        {item.description}
+                      </LabelWithIcon>
+                      {showBoostedRewardsDescription && item.description && (
+                        <span className="text-muted-foreground text-xs">
+                          {item.description}
+                        </span>
+                      )}
+                    </div>
+                  ))}
+                </span>
+              </div>
+            </>
+          )}
+          {/* <p className="text-sm text-muted-foreground text-center">
             All reward amounts displayed in this app are the amounts after fees, please note that
             the reward rate is not guaranteed and may change over time. The APR is the annualized
             return on investment for the opportunity.
-          </p>
+          </p> */}
         </div>
       </HoverCardContent>
     </HoverCard>

package/src/components/molecules/opportunity/opportunity-list/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-opportunity-filtering";
+export * from "./use-opportunity-grouping";

package/src/components/molecules/opportunity/opportunity-list/hooks/use-opportunity-filtering.ts

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { OpportunityFilter } from "../opportunity-list";
+import { OpportunityItemValue as Opportunity } from "../../../widget/opportunity-item";
+
+interface UseOpportunityFilteringProps {
+  opportunities: Opportunity[];
+  searchQuery: string;
+  activeFilterIds: string[];
+  filters: OpportunityFilter[];
+}
+
+export function useOpportunityFiltering({
+  opportunities,
+  searchQuery,
+  activeFilterIds,
+  filters,
+}: UseOpportunityFilteringProps): Opportunity[] {
+  return useMemo(() => {
+    let result = opportunities;
+
+    // Apply search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (opportunity) =>
+          opportunity.name.toLowerCase().includes(query) ||
+          opportunity.partner?.name.toLowerCase().includes(query) ||
+          opportunity.chain.name.toLowerCase().includes(query)
+      );
+    }
+
+    // Apply active filters
+    if (activeFilterIds.length > 0) {
+      const activeFilterFns = filters
+        .filter((f) => activeFilterIds.includes(f.id))
+        .map((f) => f.filterFn);
+
+      result = result.filter((opportunity) =>
+        activeFilterFns.every((filterFn) => filterFn(opportunity))
+      );
+    }
+
+    return result;
+  }, [opportunities, searchQuery, activeFilterIds, filters]);
+}

package/src/components/molecules/opportunity/opportunity-list/hooks/use-opportunity-grouping.ts

@@ -0,0 +1,81 @@
+import { useMemo } from "react";
+import { OpportunityItemValue } from "../../../widget/opportunity-item";
+import { WidgetListGroup } from "../../../widget/widget-list-items";
+
+interface UseOpportunityGroupingProps {
+  opportunities: OpportunityItemValue[];
+  groupBy: "none" | "partner" | "chain";
+}
+
+export function useOpportunityGrouping({
+  opportunities,
+  groupBy,
+}: UseOpportunityGroupingProps): WidgetListGroup<OpportunityItemValue>[] {
+  return useMemo(() => {
+    // First, sort all opportunities by yield (APY) in descending order
+    const sortedOpportunities = [...opportunities].sort((a, b) => {
+      const aprA = parseFloat(a.apr?.replace("%", "") || "0");
+      const aprB = parseFloat(b.apr?.replace("%", "") || "0");
+      return aprB - aprA;
+    });
+
+    if (groupBy === "none") {
+      return [
+        {
+          id: "all-opportunities",
+          items: sortedOpportunities,
+        },
+      ];
+    }
+
+    // Group by the selected field
+    const groups = sortedOpportunities.reduce(
+      (acc, opportunity) => {
+        let groupKey: string;
+        let groupTitle: string;
+        let groupIcon: string | undefined;
+
+        switch (groupBy) {
+          case "partner":
+            groupKey = opportunity.partner?.name || "other";
+            groupTitle = opportunity.partner?.name || "Other";
+            groupIcon = opportunity.partner?.icon;
+            break;
+          case "chain":
+            groupKey = opportunity.chain.name || "other";
+            groupTitle = opportunity.chain.name || "Other";
+            groupIcon = opportunity.chain.icon;
+            break;
+          default:
+            groupKey = "all";
+            groupTitle = "All";
+        }
+
+        if (!acc[groupKey]) {
+          acc[groupKey] = {
+            id: groupKey,
+            title: groupTitle,
+            icon: groupIcon,
+            items: [],
+          };
+        }
+        acc[groupKey].items.push(opportunity);
+        return acc;
+      },
+      {} as Record<string, WidgetListGroup<OpportunityItemValue>>
+    );
+
+    // Sort groups by the highest APY in each group
+    const groupsArray = Object.values(groups);
+    groupsArray.sort((a, b) => {
+      // Get the highest APY in each group (items are already sorted)
+      const maxYieldA =
+        a.items.length > 0 ? parseFloat(a.items[0].apr?.replace("%", "") || "0") : 0;
+      const maxYieldB =
+        b.items.length > 0 ? parseFloat(b.items[0].apr?.replace("%", "") || "0") : 0;
+      return maxYieldB - maxYieldA;
+    });
+
+    return groupsArray;
+  }, [opportunities, groupBy]);
+}

package/src/components/molecules/opportunity/opportunity-list/index.ts

@@ -0,0 +1 @@
+export * from "./opportunity-list";