Merge branch 'master' into max-balance-value

src/api/farms.ts

@@ -280,10 +280,6 @@ function getFarmApr(
     apr = poolYieldPerPeriod.times(periodsPerYear)
   }
 
-  // multiply by 100 since APR should be a percentage
-  apr = apr.times(100)
-
-  const minApr = loyaltyFactor ? apr.times(loyaltyFactor) : null
   // max distribution of rewards
   // https://www.notion.so/Screen-elements-mapping-Farms-baee6acc456542ca8d2cccd1cc1548ae?p=4a2f16a9f2454095945dbd9ce0eb1b6b&pm=s
   const distributedRewards = globalFarm.pendingRewards
@@ -314,6 +310,13 @@ function getFarmApr(
     .times(100)
     .times(priceAdjustment.shiftedBy(-18))
 
+  const isDistributed = distributedRewards.gte(maxRewards)
+
+  // multiply by 100 since APR should be a percentage
+  apr = isDistributed ? BN_0 : apr.times(100)
+
+  const minApr = loyaltyFactor ? apr.times(loyaltyFactor) : null
+
   return {
     apr,
     minApr,
@@ -327,6 +330,7 @@ function getFarmApr(
     rewardCurrency,
     incentivizedAsset,
     yieldFarmId: yieldFarm.id.toString(),
+    isDistributed,
   }
 }
 

src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
-import { Spinner } from "components/Spinner/Spinner.styled"
 import { ComponentProps, forwardRef } from "react"
 import { SButton, SButtonTransparent, SContent } from "./Button.styled"
+import { Spinner } from "components/Spinner/Spinner"
 
 export type ButtonVariant =
   | "primary"
@@ -34,7 +34,7 @@ export const Button: React.FC<ButtonProps> = ({
   return (
     <SButton variant={variant} size={size} {...props}>
       <SContent>
-        {props.isLoading && <Spinner width={16} height={16} />}
+        {props.isLoading && <Spinner size={16} />}
         {props.text || props.children}
       </SContent>
     </SButton>

src/components/Input/Input.stories.tsx

@@ -2,6 +2,8 @@ import { Meta, StoryObj } from "@storybook/react"
 import { ComponentPropsWithoutRef, useState } from "react"
 import { Provider as TooltipProvider } from "@radix-ui/react-tooltip"
 import { Input } from "./Input"
+import Percentage from "assets/icons/Percentage.svg?react"
+import IconSearch from "assets/icons/IconSearch.svg?react"
 
 export default {
   component: Input,
@@ -57,3 +59,17 @@ export const WithTooltip: Story = {
     tooltip: "Enter amount to swap",
   },
 }
+
+export const WithIconStart: Story = {
+  render: Template,
+  args: {
+    iconStart: <IconSearch />,
+  },
+}
+
+export const WithIconEnd: Story = {
+  render: Template,
+  args: {
+    iconEnd: <Percentage />,
+  },
+}

src/components/Input/Input.styled.ts

@@ -26,6 +26,32 @@ export const SWrapper = styled.div<{
         color: ${theme.colors.white};
       }
     `};
+
+  & > svg {
+    position: absolute;
+    top: 50%;
+
+    transform: translateY(-50%);
+    color: rgba(${theme.rgbColors.white}, 0.4);
+  }
+
+  &:has(svg + input) {
+    & > svg {
+      left: 12px;
+    }
+    input[type="text"] {
+      padding-left: 48px;
+    }
+  }
+
+  &:has(input + svg) {
+    & > svg {
+      right: 12px;
+    }
+    input[type="text"] {
+      padding-right: 48px;
+    }
+  }
 `
 
 export const SInput = styled.input<{ error?: string; unit?: string }>`

src/components/Input/Input.tsx

@@ -1,5 +1,5 @@
 import { Label } from "components/Label/Label"
-import React, { FC } from "react"
+import React, { FC, ReactNode } from "react"
 import { SWrapper, SInput } from "./Input.styled"
 
 // Error handling should be added once we implement forms and validation, for now the input accepts error props
@@ -16,6 +16,8 @@ export type InputProps = {
   withLabel?: boolean
   className?: string
   tooltip?: string
+  iconStart?: ReactNode
+  iconEnd?: ReactNode
 }
 
 export const Input: FC<InputProps> = ({
@@ -27,6 +29,8 @@ export const Input: FC<InputProps> = ({
   name,
   withLabel,
   tooltip,
+  iconStart,
+  iconEnd,
   ...p
 }) => {
   return (
@@ -40,6 +44,7 @@ export const Input: FC<InputProps> = ({
         {...p}
       >
         <SWrapper unit={p.unit}>
+          {iconStart}
           <SInput
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               onChange(e.target.value)
@@ -53,6 +58,7 @@ export const Input: FC<InputProps> = ({
             role="presentation"
             autoComplete="off"
           />
+          {iconEnd}
         </SWrapper>
       </Label>
     </>

src/components/Layout/Header/toolbar/buttons/Bell.tsx

@@ -1,4 +1,3 @@
-import { Spinner } from "components/Spinner/Spinner.styled"
 import { SMaskContainer, SActiveReferendumIcon } from "./Bell.styled"
 import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"
 import { useToast } from "state/toasts"
@@ -10,6 +9,7 @@ import {
   SToolbarIcon,
 } from "components/Layout/Header/toolbar/HeaderToolbar.styled"
 import BellIcon from "assets/icons/BellIcon.svg?react"
+import { Spinner } from "components/Spinner/Spinner"
 
 export const Bell = () => {
   const { setSidebar, toasts } = useToast()
@@ -38,9 +38,7 @@ export const Bell = () => {
       asChild
     >
       <SToolbarButton onClick={() => setSidebar(true)}>
-        {isLoading && (
-          <Spinner width={40} height={40} css={{ position: "absolute" }} />
-        )}
+        {isLoading && <Spinner size={50} css={{ position: "absolute" }} />}
         <SMaskContainer cropped={hasReferendum}>
           <motion.div
             sx={{ flex: "row", align: "center" }}

src/components/Spinner/Spinner.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react"
 import styled from "@emotion/styled"
-import { Spinner as SpinnerComponent } from "./Spinner.styled"
+import { Spinner as SpinnerComponent } from "./Spinner"
 
 type Story = StoryObj<typeof SpinnerComponent>
 
@@ -9,14 +9,20 @@ export default {
 } as Meta<typeof SpinnerComponent>
 
 const SContainer = styled.div`
-  width: 300px;
+  width: 100%;
   height: 200px;
+
+  display: flex;
+  align-items: center;
+  gap: 24px;
 `
 
 const Template = () => {
   return (
     <SContainer>
-      <SpinnerComponent width={100} height={100} />
+      <SpinnerComponent size={80} />
+      <SpinnerComponent size={100} />
+      <SpinnerComponent size={120} />
     </SContainer>
   )
 }

src/components/Spinner/Spinner.styled.ts

@@ -1,6 +1,5 @@
 import { keyframes } from "@emotion/react"
 import styled from "@emotion/styled"
-import { theme } from "theme"
 import { getResponsiveStyles, ResponsiveValue } from "utils/responsive"
 
 const spin = keyframes`
@@ -13,56 +12,27 @@ const spin = keyframes`
   }
 `
 
-export const Spinner = styled.span<{
-  width?: ResponsiveValue<number>
-  height?: ResponsiveValue<number>
+export const SSpinnerContainer = styled.div<{
+  size: ResponsiveValue<number>
 }>`
-  --spinner-width: 3px;
-
-  display: block;
-  position: relative;
-
-  border-radius: 9999px;
-  mask: radial-gradient(
-    farthest-side,
-    rgba(255, 255, 255, 0) calc(100% - var(--spinner-width)),
-    rgba(255, 255, 255, 1) calc(100% - var(--spinner-width) + 1px)
-  );
-
-  animation: ${spin} 0.6s linear infinite;
-
-  overflow: hidden;
-
-  background: ${theme.gradients.spinner};
-
-  &:before {
-    content: "";
-    position: absolute;
-
-    width: var(--spinner-width);
-    height: var(--spinner-width);
-
-    border-radius: 9999px;
-    top: 0;
-    left: 50%;
-
-    transform: translateX(calc(var(--spinner-width) / -2));
-  }
-
   ${(p) => [
-    getResponsiveStyles(p.width, (width) => ({ width })),
-    getResponsiveStyles(p.height, (height) => ({ height })),
+    getResponsiveStyles(p.size, (size) => ({ width: size })),
+    getResponsiveStyles(p.size, (size) => ({ height: size })),
   ]}
+
+  animation: ${spin} 0.6s linear infinite;
 `
 
-export const ToastSpinner = styled(Spinner)`
+export const Gradient = styled.div`
+  width: 100%;
+  height: 100%;
   background: conic-gradient(
-    from 0deg,
-    rgba(10, 13, 26, 0) 28.46deg,
-    rgba(43, 166, 255, 0.14) 44.98deg,
-    rgba(146, 183, 255, 0.38) 57.63deg,
-    #ffffff 88deg,
-    #ffffff 100deg,
-    #ffffff 200deg
+    from 1deg at 50% 50%,
+    rgba(10, 13, 26, 0) 90deg,
+    rgba(255, 255, 255, 0.2) 99deg,
+    #00c2ff 160deg,
+    #b6cfff 249deg,
+    #ffffff 353deg,
+    rgba(10, 13, 26, 0) 358deg
   );
 `

src/components/Spinner/Spinner.tsx

@@ -0,0 +1,71 @@
+import { ResponsiveValue } from "utils/responsive"
+import { Gradient, SSpinnerContainer } from "./Spinner.styled"
+
+export const Spinner = ({
+  size = 34,
+  className,
+}: {
+  size?: ResponsiveValue<number>
+  className?: string
+}) => {
+  return (
+    <SSpinnerContainer size={size} className={className}>
+      <svg viewBox="0 0 100 100">
+        <g filter="url(#filter0_f_36709_245024)">
+          <circle
+            cx="50"
+            cy="50"
+            r="43"
+            stroke="white"
+            stroke-width="2"
+            fill="none"
+            strokeDasharray="50 300"
+            strokeDashoffset="218"
+            strokeLinecap="round"
+          />
+        </g>
+
+        <foreignObject mask="url(#mask)" x="0" y="0" width="100" height="100">
+          <Gradient />
+        </foreignObject>
+
+        <defs>
+          <mask id="mask">
+            <circle
+              cx="50"
+              cy="50"
+              r="43"
+              stroke="white"
+              stroke-width="2"
+              fill="none"
+              strokeLinecap="round"
+              strokeDasharray="180.49555921538757 251.32741228718345"
+            />
+          </mask>
+
+          <filter
+            id="filter0_f_36709_245024"
+            x="0.118683"
+            y="0.442188"
+            width="100"
+            height="100"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="2.5"
+              result="effect1_foregroundBlur_36709_245024"
+            />
+          </filter>
+        </defs>
+      </svg>
+    </SSpinnerContainer>
+  )
+}

src/components/Toast/Toast.styled.ts

@@ -36,7 +36,7 @@ export const SIcon = styled.div`
   align-items: center;
   justify-content: center;
 
-  svg {
+  & > svg {
     width: 16px;
     height: 16px;
   }

src/components/Toast/ToastContent.tsx

@@ -6,12 +6,12 @@ import InfoIcon from "assets/icons/InfoIcon.svg?react"
 import LinkIcon from "assets/icons/LinkIcon.svg?react"
 import UnknownIcon from "assets/icons/Unknown.svg?react"
 import { Text } from "components/Typography/Text/Text"
-import { Spinner } from "components/Spinner/Spinner.styled"
 import { Maybe, useNow } from "utils/helpers"
 import { useTranslation } from "react-i18next"
 import { theme } from "theme"
 import { ToastVariant } from "state/toasts"
 import ChainlinkIcon from "assets/icons/ChainlinkIcon.svg?react"
+import { Spinner } from "components/Spinner/Spinner"
 
 export function ToastContent(props: {
   variant: Maybe<ToastVariant>
@@ -34,7 +34,7 @@ export function ToastContent(props: {
         ) : props.variant === "error" ? (
           <FailIcon />
         ) : props.variant === "progress" ? (
-          <Spinner width={28} height={28} />
+          <Spinner size={28} />
         ) : props.variant === "unknown" ? (
           <UnknownIcon color={theme.colors.darkBlue200} />
         ) : props.variant === "temporary" ? (