Feat: Enable Deposits (#268)

Co-authored-by: antondlr <[email protected]>

Author: 2 people

README.md

@@ -21,7 +21,7 @@ developers. Specifically the [Lighthouse UI](https://lighthouse-book.sigmaprime.
 
 ### Docker (Recommended)
 
-Docker is the recommended way to run Siren. This will expose Siren as a webapp. 
+Docker is the recommended way to run Siren. This will expose Siren as a webapp.
 
 `docker` is required to be installed with the service running.
 
@@ -113,21 +113,20 @@ the background and can be accessed via their local http APIs.
 
 ### Docker
 
-### Docker 
+### Docker
 
 The docker image can be built with the following command:  
 `docker build -f Dockerfile -t siren .`
 
 ### Building locally
 
 #### Build and run the backend
-Navigate to the backend directory `cd backend`. Install all required Node packages by running `yarn`. Once the installation is complete, compile the backend with `yarn build`. Deploy the backend in a production environment, `yarn start:production`. This ensures optimal performance.
 
+Navigate to the backend directory `cd backend`. Install all required Node packages by running `yarn`. Once the installation is complete, compile the backend with `yarn build`. Deploy the backend in a production environment, `yarn start:production`. This ensures optimal performance.
 
 Navigate to the backend directory `cd backend`. Install all required Node packages by running `yarn`. Once the installation is complete, compile the backend with `yarn build`. Deploy the backend in a production environment, `yarn start:production`. This ensures optimal performance.
 
 #### Build and run the frontend
-After initializing the backend, return to the root directory. Install all frontend dependencies by executing `yarn`. Build the frontend using `yarn build`. Start the frontend production server with `yarn start`. 
 
 After initializing the backend, return to the root directory. Install all frontend dependencies by executing `yarn`. Build the frontend using `yarn build`. Start the frontend production server with `yarn start`.
 

app/dashboard/settings/Main.tsx

@@ -1,4 +1,4 @@
-'use client';
+'use client'
 
 import axios from 'axios'
 import { useRouter } from 'next/navigation'

backend/yarn.lock

@@ -5472,16 +5472,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5513,14 +5504,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6069,7 +6053,7 @@ wkx@^0.5.0:
   dependencies:
     "@types/node" "*"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -6087,15 +6071,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

src/components/AlertInfo/AlertInfo.tsx

@@ -26,10 +26,11 @@ const AlertInfo: FC<AlertInfoProps> = ({ priorityLogs, ...props }) => {
   const duties = useRecoilValue(proposerDuties)
 
   const priorityLogAlerts = useMemo(() => {
-    return Object.values(metrics).flat().filter(({level}) =>
-      level === LogLevels.CRIT || level === LogLevels.ERRO)
-      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-  }, [metrics]);
+    return Object.values(metrics)
+      .flat()
+      .filter(({ level }) => level === LogLevels.CRIT || level === LogLevels.ERRO)
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+  }, [metrics])
 
   const setFilterValue = (value: FilterValue) => setFilter(value)
   const isMobile = useMediaQuery('(max-width: 425px)')

src/components/AuthPrompt/AuthPrompt.tsx

@@ -15,7 +15,6 @@ export interface AuthModalProps extends Omit<AuthFormProps, 'children'> {
   isLoading: boolean
   onClose?: () => void
   mode: UiMode
-  maxHeight?: string
 }
 
 const AuthPrompt: FC<AuthModalProps> = ({ onSubmit, isVisible, isLoading, mode, onClose }) => {

src/components/ExternalLink/ExternalLink.tsx

@@ -0,0 +1,32 @@
+import Link, { LinkProps } from 'next/link'
+import { FC } from 'react'
+import Typography, { TypographyProps } from '../Typography/Typography'
+
+export interface ExternalLinkProps
+  extends Omit<LinkProps, 'as'>,
+    Omit<TypographyProps, 'children' | 'as'> {
+  text: string
+}
+
+const ExternalLink: FC<ExternalLinkProps> = ({
+  href,
+  text,
+  color = 'text-dark400',
+  type = 'text-caption1',
+  ...props
+}) => {
+  return (
+    <div>
+      <Link href={href} target='_blank' passHref>
+        <div className='flex space-x-2 items-center'>
+          <Typography color={color} type={type} className='underline' {...props}>
+            {text}
+          </Typography>
+          <i className='text-dark400 text-caption1 bi-box-arrow-up-right' />
+        </div>
+      </Link>
+    </div>
+  )
+}
+
+export default ExternalLink

src/components/WalletActionBtn/WalletActionBtn.tsx

@@ -0,0 +1,74 @@
+import { FC, ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRecoilState } from 'recoil'
+import useWalletConnection from '../../hooks/useWalletConnection'
+import { isWalletConnectModal } from '../../recoil/atoms'
+import Button, { ButtonFace } from '../Button/Button'
+import Typography, { TypographyType } from '../Typography/Typography'
+
+export interface WalletActionBtnProps {
+  children: ReactNode
+  textSize?: TypographyType | undefined
+  isSufficientBalance?: boolean
+}
+
+const WalletActionBtn: FC<WalletActionBtnProps> = ({
+  children,
+  textSize,
+  isSufficientBalance = true,
+}) => {
+  const { t } = useTranslation()
+  const { isConnected, isValidNetwork, switchNetwork } = useWalletConnection()
+  const [isOpen, setIsOpen] = useRecoilState(isWalletConnectModal)
+  const openModal = () => setIsOpen(true)
+
+  const renderButton = () => {
+    switch (true) {
+      case !isConnected:
+        return (
+          <Button
+            className='w-full h-full'
+            isLoading={isOpen}
+            onClick={openModal}
+            type={ButtonFace.SECONDARY}
+          >
+            <Typography color='text-white' type={textSize} darkMode='dark:text-white'>
+              {t('connect')}
+            </Typography>
+          </Button>
+        )
+      case !isValidNetwork:
+        return (
+          <Button className='w-full h-full' onClick={switchNetwork} type={ButtonFace.ERROR}>
+            <Typography
+              color='text-error'
+              type={textSize}
+              darkMode='dark:text-error'
+              className='break-keep whitespace-nowrap'
+            >
+              {t('switchNetwork')}
+            </Typography>
+          </Button>
+        )
+      case !isSufficientBalance:
+        return (
+          <Button className='w-full h-full' isDisabled type={ButtonFace.ERROR}>
+            <Typography
+              color='text-error'
+              type={textSize}
+              darkMode='dark:text-error'
+              className='break-keep whitespace-nowrap'
+            >
+              {t('insufficientFunds')}
+            </Typography>
+          </Button>
+        )
+      default:
+        return children
+    }
+  }
+
+  return renderButton()
+}
+
+export default WalletActionBtn

src/types/beacon.ts

@@ -41,7 +41,7 @@ export type ValidatorMetricResult = {
 }
 
 export type ValidatorMetricResult = {
-  targetEffectiveness: number,
-  hitEffectiveness: number,
+  targetEffectiveness: number
+  hitEffectiveness: number
   totalEffectiveness: number
 }

src/types/index.ts

@@ -58,18 +58,18 @@ export type Metric = {
 
 export type LogData = {
   id: number
-  level: LogLevels,
-  type: LogType,
+  level: LogLevels
+  type: LogType
   data: string
-  isHidden: boolean,
+  isHidden: boolean
   createdAt: string
   updatedAt: string
 }
 
 export type LogMetric = {
-  warningLogs: LogData[],
-  errorLogs: LogData[],
-  criticalLogs: LogData[],
+  warningLogs: LogData[]
+  errorLogs: LogData[]
+  criticalLogs: LogData[]
 }
 
 export enum LogType {