Feat: adjustments (#193)

sigp · Aug 2, 2023 · fd9d2ca · fd9d2ca
1 parent 78dd21a
commit fd9d2ca
Show file tree

Hide file tree

Showing 49 changed files with 425 additions and 151 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -29,18 +29,16 @@ jobs:
                 arch: [
                        aarch64-unknown-linux-gnu,
                        x86_64-unknown-linux-gnu,
-                       # Requires apple signature secrets
-                       # x86_64-apple-darwin,
+                       x86_64-apple-darwin,
                        x86_64-windows
                        ]
                 include:
                     -   arch: aarch64-unknown-linux-gnu
                         platform: ubuntu-latest
                     -   arch: x86_64-unknown-linux-gnu
                         platform: ubuntu-latest
-                    # Requires apple signature secrets
-                    #-   arch: x86_64-apple-darwin
-                        # platform: macos-latest
+                    -   arch: x86_64-apple-darwin
+                        platform: macos-latest
                     -   arch: x86_64-windows
                         platform: windows-2019
 
@@ -71,7 +69,7 @@ jobs:
               run: |
                  mv out/make/zip/*/*/*.zip ./siren-${{ needs.extract-version.outputs.VERSION }}-${{ matrix.arch }}.zip
 
-            - name: Move unsigned packages (windows)           
+            - name: Move unsigned packages (windows)
               if: startsWith(matrix.arch, 'x86_64-windows')
               run: |
                  move out/make/zip/*/*/*.zip ./siren-${{ needs.extract-version.outputs.VERSION }}-${{ matrix.arch }}.zip
@@ -97,8 +95,7 @@ jobs:
                 arch: [
                        aarch64-unknown-linux-gnu,
                        x86_64-unknown-linux-gnu,
-                       # Requires apple signature secrets
-                       # x86_64-apple-darwin,
+                       x86_64-apple-darwin,
                        x86_64-windows
                        ]
         steps:
@@ -128,25 +125,25 @@ jobs:
 
             - name: Upload signature (${{ matrix.arch }})
               uses: actions/upload-artifact@v3
-              with: 
+              with:
                 name: siren-${{ needs.extract-version.outputs.VERSION }}-${{ matrix.arch }}.zip.asc
                 path: artifacts/siren-${{ needs.extract-version.outputs.VERSION }}-${{ matrix.arch }}.zip.asc
 
-#            - name: Upload signature (aarch64-unknown-linux-gnu)
-#              uses: actions/upload-artifact@v3
-#              with:
-#                name: siren-${{ needs.extract-version.outputs.VERSION }}-aarch64-unknown-linux-gnu.zip.asc
-#                path: artifacts//siren-${{ needs.extract-version.outputs.VERSION }}-aarch64-unknown-linux-gnu.zip.asc
-#            - name: Upload signature (x86_64-unknown-linux-gnu)
-#              uses: actions/upload-artifact@v3
-#              with:
-#                name: siren-${{ needs.extract-version.outputs.VERSION }}-x86_64-unknown-linux-gnu.zip.asc
-#                path: artifacts/siren-${{ needs.extract-version.outputs.VERSION }}-x86_64-unknown-linux-gnu.zip.asc
-#            - name: Upload signature (x86_64-windows)
-#              uses: actions/upload-artifact@v3
-#              with:
-#                name: siren-${{ needs.extract-version.outputs.VERSION }}-x86_64-windows.zip.asc
-#                path: artifacts/siren-${{ needs.extract-version.outputs.VERSION }}-x86_64-windows.zip.asc
+            - name: Upload signature (aarch64-unknown-linux-gnu)
+              uses: actions/upload-artifact@v3
+              with:
+                name: siren-${{ needs.extract-version.outputs.VERSION }}-aarch64-unknown-linux-gnu.zip.asc
+                path: artifacts//siren-${{ needs.extract-version.outputs.VERSION }}-aarch64-unknown-linux-gnu.zip.asc
+            - name: Upload signature (x86_64-unknown-linux-gnu)
+              uses: actions/upload-artifact@v3
+              with:
+                name: siren-${{ needs.extract-version.outputs.VERSION }}-x86_64-unknown-linux-gnu.zip.asc
+                path: artifacts/siren-${{ needs.extract-version.outputs.VERSION }}-x86_64-unknown-linux-gnu.zip.asc
+            - name: Upload signature (x86_64-windows)
+              uses: actions/upload-artifact@v3
+              with:
+                name: siren-${{ needs.extract-version.outputs.VERSION }}-x86_64-windows.zip.asc
+                path: artifacts/siren-${{ needs.extract-version.outputs.VERSION }}-x86_64-windows.zip.asc
 
     draft-release:
         name: Draft Release

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "author": "Sigma Prime",
   "homepage": "./",
   "name": "Siren",
-  "version": "0.1.0-beta.2",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@electron-forge/maker-dmg": "^6.0.5",

diff --git a/src/assets/images/siren.svg b/src/assets/images/siren.svg
diff --git a/src/components/AccountEarnings/AccountEarning.tsx b/src/components/AccountEarnings/AccountEarning.tsx
@@ -45,10 +45,18 @@ const AccountEarning = () => {
 
   return (
     <EarningsLayout>
-      <div className='p-4 bg-primary200 w-28 text-center absolute z-30 top-0 right-10'>
-        <Typography color='text-white' type='text-caption1'>
-          {t('balance')}
-        </Typography>
+      <div className='p-4 bg-primary200 w-28 text-center absolute z-50 top-0 right-10'>
+        <Tooltip
+          className='cursor-pointer flex justify-center space-x-2'
+          id='balanceInfo'
+          maxWidth={350}
+          text={t('accountEarnings.balanceTooltip')}
+        >
+          <Typography color='text-white' type='text-caption1'>
+            {t('balance')}
+          </Typography>
+          <i className='bi bi-info-circle text-caption1 text-dark400' />
+        </Tooltip>
         <div className='w-full absolute h-1 bg-white bottom-0 left-0' />
       </div>
       <div className='relative z-30 w-full h-full'>

diff --git a/src/components/AlertCard/AlertCard.tsx b/src/components/AlertCard/AlertCard.tsx
@@ -10,9 +10,9 @@ export interface AlertCardProps extends StatusBarProps {
 
 const AlertCard: FC<AlertCardProps> = ({ text, subText, onClick, ...props }) => {
   return (
-    <div className='w-full h-14 group border-b-style500 flex justify-between items-center space-x-2 p-2'>
+    <div className='w-full h-14 @1540:h-22 group border-b-style500 flex justify-between items-center space-x-2 @1540:space-x-4 p-2'>
       <StatusBar {...props} />
-      <div className='w-full max-w-tiny'>
+      <div className='w-full max-w-tiny @1540:max-w-full'>
         <Typography type='text-caption2'>{text}</Typography>
         <Typography type='text-caption2' isUpperCase>
           {subText}

diff --git a/src/components/AlertFilterSettings/AlertFilterSettings.tsx b/src/components/AlertFilterSettings/AlertFilterSettings.tsx
@@ -34,7 +34,7 @@ const AlertFilterSettings: FC<AlertFilterSettingsProps> = ({ onChange, value })
   return (
     <div ref={ref} className='relative'>
       <i onClick={openDrop} className='bi-sliders2 text-dark400 cursor-pointer' />
-      <DropDown width='w-42' position='right-0' isOpen={isOpen}>
+      <DropDown isScroll={false} width='w-42' position='right-0' isOpen={isOpen}>
         {filterOptions.map((option, index) => (
           <li
             key={index}

diff --git a/src/components/BasicValidatorMetrics/BasicValidatorMetrics.tsx b/src/components/BasicValidatorMetrics/BasicValidatorMetrics.tsx
@@ -20,7 +20,7 @@ const BasicValidatorMetrics: FC<BasicValidatorMetricsProps> = ({ validator }) =>
   return (
     <div className='flex flex-col lg:space-x-3 shadow lg:flex-row lg:divide-x divide-y lg:divide-y-0 dark:divide-dark600 dark:border dark:border-dark600'>
       <div className='p-3 space-y-2'>
-        <Typography type='text-caption2' isUpperCase isBold>
+        <Typography type='text-caption2' className='text-left' isUpperCase isBold>
           {t('basicValidatorMetrics.ethRate')}
         </Typography>
         <div className='flex space-x-2.5'>
@@ -33,7 +33,7 @@ const BasicValidatorMetrics: FC<BasicValidatorMetricsProps> = ({ validator }) =>
         </div>
       </div>
       <div className='p-3 space-y-2.5'>
-        <Typography type='text-caption2' isUpperCase isBold>
+        <Typography type='text-caption2' className='text-left' isUpperCase isBold>
           {t('basicValidatorMetrics.validator')}
         </Typography>
         <div className='flex space-x-2'>

diff --git a/src/components/BeaconNetwork/BeaconNetwork.tsx b/src/components/BeaconNetwork/BeaconNetwork.tsx
@@ -1,8 +1,10 @@
 import { useRecoilValue } from 'recoil'
 import { selectBnChain } from '../../recoil/selectors/selectBnChain'
 import Typography from '../Typography/Typography'
+import { useTranslation } from 'react-i18next'
 
 const BeaconNetwork = () => {
+  const { t } = useTranslation()
   const bnNetwork = useRecoilValue(selectBnChain)
 
   return bnNetwork ? (
@@ -11,16 +13,18 @@ const BeaconNetwork = () => {
       className='flex flex-col h-full py-1.5 pl-2 pr-4 justify-between border-l border-r border-borderLight dark:border-borderDark'
     >
       <Typography type='text-tiny' darkMode='dark:text-white' isUpperCase isBold>
-        Network
+        {t('network')}
+      </Typography>
+      <Typography
+        type='text-tiny'
+        family='font-roboto'
+        color='text-primary'
+        darkMode='dark:text-primary'
+        isUpperCase
+        isBold
+      >
+        {bnNetwork}
       </Typography>
-      <div>
-        <Typography type='text-tiny' family='font-roboto' color='text-dark400'>
-          ---
-        </Typography>
-        <Typography type='text-tiny' family='font-roboto' color='text-dark400' isUpperCase isBold>
-          {bnNetwork}
-        </Typography>
-      </div>
     </div>
   ) : null
 }

diff --git a/src/components/BlsExecutionModal/BlsExecutionModal.tsx b/src/components/BlsExecutionModal/BlsExecutionModal.tsx
@@ -5,7 +5,7 @@ import useMediaQuery from '../../hooks/useMediaQuery'
 import Typography from '../Typography/Typography'
 import CodeInput from '../CodeInput/CodeInput'
 import ValidatorDisclosure from '../Disclosures/ValidatorDisclosure'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { MOCK_BLS_JSON, WithdrawalInfoLink } from '../../constants/constants'
 import GradientHeader from '../GradientHeader/GradientHeader'
 import { ButtonFace } from '../Button/Button'
@@ -23,15 +23,22 @@ const BlsExecutionModal = () => {
   const { t } = useTranslation()
   const [isLoading, setLoading] = useState(false)
   const { beaconUrl } = useRecoilValue(activeDevice)
+  const [isFocus, setFocused] = useState(false)
   const [isModal, toggleModal] = useRecoilState(isBlsExecutionModal)
   const isTablet = useMediaQuery('(max-width: 1024px)')
-  const [blsJson, setJson] = useState(MOCK_BLS_JSON)
+  const [blsJson, setJson] = useState<string>(MOCK_BLS_JSON)
   const [processingValidators, setIsProcess] = useRecoilState(processingBlsValidators)
   const [, storeIsBlsProcessing] = useLocalStorage<string>(Storage.BLS_PROCESSING, '')
 
-  const closeModal = () => toggleModal(false)
+  const closeModal = () => {
+    toggleModal(false)
+    setJson(MOCK_BLS_JSON)
+    setFocused(false)
+  }
   const setJsonValue = (value: string) => setJson(value)
 
+  const focusInput = () => setFocused(true)
+
   const handleError = (code?: number) => {
     let message = t('error.unknownError', { type: 'BEACON' })
 
@@ -85,6 +92,12 @@ const BlsExecutionModal = () => {
     }
   }
 
+  useEffect(() => {
+    if (isFocus) {
+      setJson('')
+    }
+  }, [isFocus])
+
   return (
     <RodalModal
       isVisible={isModal}
@@ -117,12 +130,13 @@ const BlsExecutionModal = () => {
               />
             </Trans>
           </Typography>
-          <CodeInput value={blsJson} onChange={setJsonValue} />
+          <CodeInput onFocus={focusInput} value={blsJson} onChange={setJsonValue} />
         </div>
         {isModal && (
           <div className='p-3 border-t-style100'>
             <ValidatorDisclosure
               isLoading={isLoading}
+              isDisabled={!blsJson}
               onAccept={submitChange}
               ctaType={ButtonFace.SECONDARY}
               ctaText={t('blsExecution.modal.cta')}

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -53,9 +53,9 @@ const Button: FC<ButtonProps> = ({
   const formatFaceStyle = () => {
     switch (type) {
       case ButtonFace.LIGHT_ACTIVE:
-        return 'bg-primary80 text-primary'
+        return 'bg-primary80 text-primaryOverride'
       case ButtonFace.LIGHT:
-        return 'bg-primary100 text-primary'
+        return 'bg-primary100 text-primaryOverride'
       case ButtonFace.ICON:
         return 'h-full w-11 disabled:opacity-30 dark:bg-dark900 text-dark300 dark:text-white'
       case ButtonFace.TERTIARY:

diff --git a/src/components/CodeInput/CodeInput.tsx b/src/components/CodeInput/CodeInput.tsx
@@ -5,16 +5,18 @@ export interface CodeInputProps {
   onChange: (value: string) => void
   value: string
   placeholder?: string
+  onFocus?: () => void
 }
 
-const CodeInput: FC<CodeInputProps> = ({ onChange, value, placeholder }) => {
+const CodeInput: FC<CodeInputProps> = ({ onChange, value, placeholder, onFocus }) => {
   return (
     <div className='w-full max-h-48 overflow-scroll'>
       <CodeEditor
         rows={5}
         className='dark:bg-dark750'
         value={value}
         language='json'
+        onFocus={onFocus}
         placeholder={placeholder}
         onChange={(evn) => onChange(evn.target.value)}
         padding={15}

diff --git a/src/components/DashboardOptions/DashboardOptions.tsx b/src/components/DashboardOptions/DashboardOptions.tsx
@@ -1,11 +1,14 @@
 import DropDown from '../DropDown/DropDown'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import DropDownItem from '../DropDown/DropDownItem'
 import useClickOutside from '../../hooks/useClickOutside'
 import { useSetRecoilState } from 'recoil'
 import { dashView } from '../../recoil/atoms'
 import { ContentView } from '../../constants/enums'
 import { useTranslation } from 'react-i18next'
+import Typography from '../Typography/Typography'
+import { DiscordUrl, LighthouseBookUrl } from '../../constants/constants'
+import ExternalLink from '../ExternalLink/ExternalLink'
 
 const DashboardOptions = () => {
   const { t } = useTranslation()
@@ -26,8 +29,29 @@ const DashboardOptions = () => {
         onClick={openOptions}
         className='bi bi-three-dots dark:text-white flex-grow-0 -mt-2 cursor-pointer'
       />
-      <DropDown position='top-full -left-24 lg:-left-12 z-50 ' width='w-28' isOpen={isOpen}>
-        <DropDownItem text={t('sidebar.settings')} onClick={viewSettings} />
+      <DropDown position='top-full -left-24 lg:-left-12 z-top98' width='w-fit' isOpen={isOpen}>
+        <DropDownItem onClick={viewSettings}>
+          <div className='w-full flex space-x-2'>
+            <i className='bi bi-gear-fill' />
+            <Typography className='capitalize'>{t('sidebar.settings')}</Typography>
+          </div>
+        </DropDownItem>
+        <ExternalLink href={DiscordUrl}>
+          <DropDownItem>
+            <div className='w-full flex space-x-2'>
+              <i className='bi bi-discord' />
+              <Typography className='capitalize'>Discord</Typography>
+            </div>
+          </DropDownItem>
+        </ExternalLink>
+        <ExternalLink href={LighthouseBookUrl}>
+          <DropDownItem>
+            <div className='w-full flex space-x-2'>
+              <i className='bi bi-life-preserver' />
+              <Typography className='capitalize'>{t('documentation')}</Typography>
+            </div>
+          </DropDownItem>
+        </ExternalLink>
       </DropDown>
     </div>
   )

diff --git a/src/components/DeviceName/DeviceName.tsx b/src/components/DeviceName/DeviceName.tsx
@@ -0,0 +1,37 @@
+import Typography from '../Typography/Typography'
+import { useTranslation } from 'react-i18next'
+import { useRecoilValue } from 'recoil'
+import { activeDevice } from '../../recoil/atoms'
+import { DEVICE_NAME_TRUNCATE } from '../../constants/constants'
+
+const DeviceName = () => {
+  const { t } = useTranslation()
+  const device = useRecoilValue(activeDevice)
+
+  return (
+    <div
+      data-testid='beaconNetwork'
+      className='flex flex-col h-full py-1.5 pl-2 pr-4 justify-between border-l border-r border-borderLight dark:border-borderDark'
+    >
+      <Typography type='text-tiny' darkMode='dark:text-white' isUpperCase isBold>
+        {t('device')}
+      </Typography>
+      {device?.deviceName && (
+        <Typography
+          type='text-tiny'
+          family='font-roboto'
+          color='text-primary'
+          darkMode='dark:text-primary'
+          isUpperCase
+          isBold
+        >
+          {device.deviceName.length < DEVICE_NAME_TRUNCATE
+            ? device.deviceName
+            : `${device.deviceName.substring(0, DEVICE_NAME_TRUNCATE)}...`}
+        </Typography>
+      )}
+    </div>
+  )
+}
+
+export default DeviceName