Earn protocol WIP #16 (#550)

Co-authored-by: Marcin Ciarka <marcin@oazoapps.com>
OasisDEX · Oct 28, 2024 · 97c8c1f · 97c8c1f
1 parent 1fbdf7d
commit 97c8c1f
Show file tree

Hide file tree

Showing 13 changed files with 1,547 additions and 1,317 deletions.
diff --git a/...landing-page/components/organisms/LandingPageStrategyPicker/LandingPageStrategyPicker.tsx b/...landing-page/components/organisms/LandingPageStrategyPicker/LandingPageStrategyPicker.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import { StrategyCard, StrategySimulationForm } from '@summerfi/app-earn-ui'
 import { type SDKVaultishType } from '@summerfi/app-types'
 

diff --git a/apps/rays-dashboard/components/molecules/CriteriaList/CriteriaList.tsx b/apps/rays-dashboard/components/molecules/CriteriaList/CriteriaList.tsx
@@ -78,7 +78,6 @@ export const CriteriaList = ({ userRays }: CriteriaListProps) => {
                   >
                     <Icon
                       iconName="checkmark_colorful"
-                      proxyStyle={{ fill: 'var(--gradient-summer-fi-dark)' }}
                       size={item.done ? 20 : 15}
                       style={item.done ? { opacity: 1 } : { opacity: 0.3 }}
                     />

diff --git a/packages/app-earn-ui/src/components/atoms/Icon/Icon.tsx b/packages/app-earn-ui/src/components/atoms/Icon/Icon.tsx
@@ -1,12 +1,11 @@
-'use client'
-
-import { type FC, useState } from 'react'
-import * as iconProxies from '@summerfi/app-icons'
-import { type IconNamesList, type TokenSymbolsList } from '@summerfi/app-types'
-import Image from 'next/image'
+import { type FC, useMemo } from 'react'
+import { icons } from '@summerfi/app-icons'
+import { type TokenSymbolsList } from '@summerfi/app-types'
 
 import { getTokenGuarded } from '@/tokens/helpers'
 
+export type IconNamesList = keyof typeof icons
+
 export interface IconPropsBase {
   variant?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'
   size?: number
@@ -15,7 +14,6 @@ export interface IconPropsBase {
   iconName?: IconNamesList
   tokenName?: TokenSymbolsList
   style?: React.CSSProperties
-  proxyStyle?: React.CSSProperties
   color?: string
   className?: string
 }
@@ -28,61 +26,16 @@ export interface IconPropsWithTokenName extends IconPropsBase {
   tokenName: TokenSymbolsList
 }
 
-const FallbackSvg = ({
-  focusable,
-  role,
-  finalSize,
-  proxyStyle,
-  errorLoading,
-  className,
-}: {
-  focusable?: boolean
-  role?: 'presentation'
-  finalSize: number
-  proxyStyle?: React.CSSProperties
-  errorLoading?: boolean
-  className?: string
-}) => (
-  <svg
-    viewBox="0 0 6.35 6.35"
-    color="inherit"
-    display="inline-block"
-    focusable={focusable}
-    role={role}
-    width={finalSize}
-    height={finalSize}
-    style={{
-      ...proxyStyle,
-    }}
-    className={className}
-  >
-    <circle
-      style={{
-        fill: errorLoading ? 'red' : '#9d9d9d',
-        fillOpacity: 0.350168,
-        strokeWidth: 0.340624,
-        ...proxyStyle,
-      }}
-      cx="3.175"
-      cy="3.175"
-      r="3.175"
-    />
-  </svg>
-)
-
 export const Icon: FC<IconPropsWithIconName | IconPropsWithTokenName> = ({
   variant = 'l',
-  role = 'presentation',
-  focusable = false,
   iconName: iconNameProp,
   tokenName,
   size,
   style,
-  proxyStyle,
   color,
   className,
+  ...rest
 }) => {
-  const [errorLoading, setErrorLoading] = useState(false)
   const finalSize =
     size ??
     {
@@ -98,56 +51,23 @@ export const Icon: FC<IconPropsWithIconName | IconPropsWithTokenName> = ({
 
   const iconName = iconNameProp ?? getTokenGuarded(tokenName)?.iconName ?? 'not_supported_icon'
 
-  const LazyIconComponent = iconProxies[iconName]
-
   const colorSet = color ?? style?.stroke
 
-  return (
-    <LazyIconComponent
-      fallback={
-        <FallbackSvg
-          focusable={focusable}
-          role={role}
-          finalSize={finalSize}
-          proxyStyle={proxyStyle}
-        />
-      }
-    >
-      {({ default: iconData }: { default: string }) => {
-        const [prefix, svgBase64] = iconData.split(',')
+  const SvgIcon = useMemo(() => icons[iconName], [iconName])
 
-        return iconData && !errorLoading ? (
-          <Image
-            src={
-              colorSet
-                ? `${prefix},${
-                    prefix !== 'data:image/svg+xml'
-                      ? btoa(atob(svgBase64).replaceAll('currentColor', colorSet))
-                      : svgBase64.replaceAll('currentColor', colorSet)
-                  }`
-                : iconData
-            }
-            color="inherit"
-            alt={iconName}
-            role={role}
-            width={finalSize}
-            height={finalSize}
-            style={style}
-            unoptimized
-            onError={() => setErrorLoading(true)}
-            className={className}
-          />
-        ) : (
-          <FallbackSvg
-            focusable={focusable}
-            role={role}
-            finalSize={finalSize}
-            errorLoading={errorLoading}
-            proxyStyle={{ ...proxyStyle, fill: 'red', fillOpacity: 1 }}
-            className={className}
-          />
-        )
-      }}
-    </LazyIconComponent>
+  if (!SvgIcon) return null
+
+  return (
+    <div style={{ color: colorSet, display: 'inline-block', ...style }}>
+      <SvgIcon
+        className={className}
+        style={{
+          display: 'block',
+          ...style,
+        }}
+        {...(finalSize ? { width: finalSize, height: finalSize } : {})}
+        {...rest}
+      />
+    </div>
   )
 }
diff --git a/packages/app-earn-ui/src/components/layout/Navigation/NavigationMenu.tsx b/packages/app-earn-ui/src/components/layout/Navigation/NavigationMenu.tsx
@@ -29,7 +29,6 @@ export const NavigationMenu = ({ links, currentPath }: NavigationMenuType) => {
                 {link.label}{' '}
                 <Icon
                   style={{ marginLeft: '6px', display: 'inline' }}
-                  proxyStyle={{ marginLeft: '6px', display: 'inline' }}
                   color="white"
                   iconName="chevron_down"
                   size={13}

diff --git a/...ges/app-earn-ui/src/components/layout/StrategyGridPreview/StrategyGridPreview.module.scss b/...ges/app-earn-ui/src/components/layout/StrategyGridPreview/StrategyGridPreview.module.scss
@@ -1,11 +1,12 @@
 .strategyGridPreviewBreadcrumbsWrapper {
   display: flex;
   flex-direction: column;
+  padding: 0 var(--general-space-16);
+
   a {
     margin-top: var(--general-space-12);
     color: var(--earn-protocol-primary-100);
   }
-  padding: 0 var(--general-space-16);
 }
 
 .strategyGridPreviewPositionWrapper {

diff --git a/packages/app-earn-ui/src/components/molecules/StrategyCard/StrategyCard.tsx b/packages/app-earn-ui/src/components/molecules/StrategyCard/StrategyCard.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { type SDKVaultishType } from '@summerfi/app-types'
 import { formatCryptoBalance, formatDecimalAsPercent } from '@summerfi/app-utils'
 import BigNumber from 'bignumber.js'

diff --git a/packages/app-earn-ui/src/index.ts b/packages/app-earn-ui/src/index.ts
@@ -6,7 +6,7 @@ export { Button } from './components/atoms/Button/Button'
 export { Text } from './components/atoms/Text/Text'
 export { Card } from './components/atoms/Card/Card'
 export { Modal } from './components/atoms/Modal/Modal'
-export { Icon } from './components/atoms/Icon/Icon'
+export { Icon, type IconNamesList } from './components/atoms/Icon/Icon'
 export { SummerBall } from './components/atoms/SummerBall/SummerBall'
 export { CheckboxButton } from './components/atoms/CheckboxButton/CheckboxButton'
 export { Input } from './components/atoms/Input/Input'

diff --git a/packages/app-icons/package.json b/packages/app-icons/package.json
@@ -15,25 +15,30 @@
     "build": "vite build -w false --mode=prod",
     "clean": "rm -rf dist"
   },
+  "dependencies": {
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "vite-plugin-dts": "^4.2.4",
+    "vite-plugin-svgr": "^4.2.0"
+  },
   "devDependencies": {
     "@summerfi/app-types": "workspace:*",
     "@summerfi/eslint-config": "workspace:*",
     "@summerfi/typescript-config": "workspace:*",
-    "@types/loadable__component": "^5.13.9",
+    "@types/react": "^18.3.1",
     "eslint": "8.57.0",
     "glob": "^11.0.0",
     "jest": "29.7.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.8"
   },
   "peerDependencies": {
-    "@loadable/component": "^5.16.4"
+    "@loadable/component": "^5.16.4",
+    "next": "^14.2.15",
+    "react": "^18.3.1"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "vite-plugin-dts": "^4.2.4",
-    "vite-plugin-svgo": "1.4.0"
   }
 }