Merge pull request #64 from oasisprotocol/ml/optimize-code

Optimize code

frontend/src/App.tsx

@@ -2,10 +2,10 @@ import { FC } from 'react'
 import { Layout } from './components/Layout'
 import { createHashRouter, RouterProvider } from 'react-router-dom'
 import { HomePage } from './pages/HomePage'
-import { EIP1193ContextProvider } from './providers/EIP1193Provider.tsx'
-import { Web3ContextProvider } from './providers/Web3Provider.tsx'
+import { EIP1193ContextProvider } from './providers/EIP1193Provider'
+import { Web3ContextProvider } from './providers/Web3Provider'
 import { ResultsPage } from './pages/ResultsPage'
-import { AppStateContextProvider } from './providers/AppStateProvider.tsx'
+import { AppStateContextProvider } from './providers/AppStateProvider'
 import { ErrorBoundary } from './components/ErrorBoundary'
 import { RouterErrorBoundary } from './components/RouterErrorBoundary'
 

frontend/src/components/Alert/index.module.css

@@ -13,13 +13,11 @@
     font-weight: 400;
     line-height: 120%;
     letter-spacing: 0;
-    margin: 0 auto;
-    margin-bottom: 2.375rem;
+    margin: 0 auto 2.375rem;
   }
 
   .icon {
-    margin: 0 auto;
-    margin-bottom: 1.125rem;
+    margin: 0 auto 1.125rem;
   }
 
   .actions {

frontend/src/components/Alert/index.tsx

@@ -1,11 +1,11 @@
 import { FC, PropsWithChildren, ReactElement } from 'react'
 import classes from './index.module.css'
 import { Card } from '../Card'
-import { WarningCircleIcon } from '../icons/WarningCircleIcon.tsx'
-import { CheckCircleIcon } from '../icons/CheckCircleIcon.tsx'
-import { SpinnerIcon } from '../icons/SpinnerIcon.tsx'
-import { PiggyBankSvgIcon } from '../icons/PiggyBankIcon.tsx'
-import { StringUtils } from '../../utils/string.utils.ts'
+import { WarningCircleIcon } from '../icons/WarningCircleIcon'
+import { CheckCircleIcon } from '../icons/CheckCircleIcon'
+import { SpinnerIcon } from '../icons/SpinnerIcon'
+import { PiggyBankIcon } from '../icons/PiggyBankIcon'
+import { StringUtils } from '../../utils/string.utils'
 
 type AlertType = 'error' | 'success' | 'loading' | 'insufficient-balance'
 
@@ -29,7 +29,7 @@ const alertTypeValuesMap: Record<AlertType, AlertTypeValues> = {
   },
   'insufficient-balance': {
     header: 'Insufficient balance',
-    icon: <PiggyBankSvgIcon />,
+    icon: <PiggyBankIcon />,
   },
 }
 

frontend/src/components/Button/index.tsx

@@ -1,6 +1,6 @@
 import classes from './index.module.css'
 import { FC, MouseEventHandler, PropsWithChildren } from 'react'
-import { StringUtils } from '../../utils/string.utils.ts'
+import { StringUtils } from '../../utils/string.utils'
 
 type ButtonSize = 'small' | 'medium'
 type ButtonColor = 'primary' | 'secondary' | 'success'

frontend/src/components/Card/index.module.css

@@ -1,12 +1,11 @@
 .card {
   display: flex;
   flex-direction: column;
-  margin: 0 auto;
   width: 100%;
   max-width: 876px;
   min-height: 704px;
   padding: 2.25rem 4.6875rem 1.875rem;
-  margin-bottom: 5rem;
+  margin: 0 auto 5rem;
   border-radius: 12px;
   background: var(--white);
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

frontend/src/components/Card/index.tsx

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from 'react'
 import classes from './index.module.css'
-import { StringUtils } from '../../utils/string.utils.ts'
+import { StringUtils } from '../../utils/string.utils'
 
 interface Props extends PropsWithChildren {
   className?: string

frontend/src/components/ConnectWallet/index.module.css

@@ -18,6 +18,6 @@
   }
 
   .stickyConnectedAccount {
-    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
   }
 }

frontend/src/components/ConnectWallet/index.tsx

@@ -1,12 +1,12 @@
 import { FC, useEffect, useState } from 'react'
-import { useWeb3 } from '../../hooks/useWeb3.ts'
-import { METAMASK_HOME_PAGE_URL } from '../../constants/config.ts'
+import { useWeb3 } from '../../hooks/useWeb3'
+import { METAMASK_HOME_PAGE_URL } from '../../constants/config'
 import { Button } from '../Button'
-import { UnknownNetworkError } from '../../utils/errors.ts'
+import { toErrorString, UnknownNetworkError } from '../../utils/errors'
 import { ConnectedAccount } from '../ConnectedAccount'
-import { useAppState } from '../../hooks/useAppState.ts'
+import { useAppState } from '../../hooks/useAppState'
 import classes from './index.module.css'
-import { CaretRightIcon } from '../icons/CaretRightIcon.tsx'
+import { CaretRightIcon } from '../icons/CaretRightIcon'
 
 interface Props {
   mobileSticky: boolean
@@ -36,7 +36,9 @@ export const ConnectWallet: FC<Props> = ({ mobileSticky }) => {
       setIsLoading(false)
     }
 
-    init()
+    init().catch(ex => {
+      setAppError(toErrorString(ex as Error))
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
@@ -60,7 +62,7 @@ export const ConnectWallet: FC<Props> = ({ mobileSticky }) => {
     try {
       await switchNetwork()
       setIsUnknownNetwork(false)
-      handleConnectWallet()
+      await handleConnectWallet()
     } catch (ex) {
       setAppError(ex as Error)
     } finally {

frontend/src/components/ConnectedAccount/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import { JazzIcon } from '../JazzIcon'
 import { useWeb3 } from '../../hooks/useWeb3'
-import { StringUtils } from '../../utils/string.utils.ts'
+import { StringUtils } from '../../utils/string.utils'
 import classes from './index.module.css'
-import { useAppState } from '../../hooks/useAppState.ts'
+import { useAppState } from '../../hooks/useAppState'
 
 interface Props {
   className?: string

frontend/src/components/ErrorBoundaryLayout/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import { LayoutBase } from '../LayoutBase'
-import { StringUtils } from '../../utils/string.utils.ts'
+import { StringUtils } from '../../utils/string.utils'
 import { Alert } from '../Alert'
 import classes from './index.module.css'
-import { toErrorString } from '../../utils/errors.ts'
+import { toErrorString } from '../../utils/errors'
 
 interface Props {
   error: unknown

frontend/src/components/Icon/index.tsx

@@ -1,6 +1,5 @@
 import { cloneElement, FC, ReactElement, SVGProps } from 'react'
-import { IconSize } from '../../types'
-import { IconProps } from '../../types/icon-props.ts'
+import { IconSize, IconProps } from '../../types'
 
 interface Props extends IconProps {
   children: ReactElement

frontend/src/components/JazzIcon/index.tsx

@@ -1,7 +1,7 @@
 import createJazzIcon from '@metamask/jazzicon'
 import classes from './index.module.css'
 import { FC, memo, useEffect, useRef } from 'react'
-import { NumberUtils } from '../../utils/number.utils.ts'
+import { NumberUtils } from '../../utils/number.utils'
 
 interface JazzIconProps {
   address: string

frontend/src/components/Layout/index.tsx

@@ -4,9 +4,9 @@ import classes from './index.module.css'
 import { LogoIcon } from '../icons/LogoIcon'
 import { ConnectWallet } from '../ConnectWallet'
 import { Alert } from '../Alert'
-import { useAppState } from '../../hooks/useAppState.ts'
+import { useAppState } from '../../hooks/useAppState'
 import { Button } from '../Button'
-import { StringUtils } from '../../utils/string.utils.ts'
+import { StringUtils } from '../../utils/string.utils'
 import { useInView } from 'react-intersection-observer'
 import { LayoutBase } from '../LayoutBase'
 

frontend/src/components/LayoutBase/index.tsx

@@ -4,8 +4,8 @@ import {
   GITHUB_REPOSITORY_URL,
   VITE_REACT_APP_BUILD_DATETIME,
   VITE_REACT_APP_BUILD_VERSION,
-} from '../../constants/config.ts'
-import { DateUtils } from '../../utils/date.utils.ts'
+} from '../../constants/config'
+import { DateUtils } from '../../utils/date.utils'
 import { useMediaQuery } from 'react-responsive'
 
 export const LayoutBase: FC<PropsWithChildren> = ({ children }) => {

frontend/src/components/MascotCard/index.tsx

@@ -1,8 +1,8 @@
 import { FC, ReactElement } from 'react'
 import Tilt from 'react-parallax-tilt'
-import { StringUtils } from '../../utils/string.utils.ts'
+import { StringUtils } from '../../utils/string.utils'
 import classes from './index.module.css'
-import { useAppState } from '../../hooks/useAppState.ts'
+import { useAppState } from '../../hooks/useAppState'
 
 type MascotCardOrientation = 'vertical' | 'horizontal'
 

frontend/src/components/MascotTieSplit/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import classes from './index.module.css'
-import { LightningIcon } from '../icons/LightningIcon.tsx'
+import { LightningIcon } from '../icons/LightningIcon'
 
 interface Props {
   isLargeIcon?: boolean

frontend/src/components/PieChart/index.module.css

@@ -7,5 +7,5 @@
   stroke-width: 8px;
   stroke-linecap: round;
   stroke-linejoin: round;
-  filter: drop-shadow(0px 7.5px 7.5px rgba(0, 0, 98, 0.25));
+  filter: drop-shadow(0px 7px 7px rgba(0, 0, 98, 0.25));
 }

frontend/src/components/PieChart/index.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useMemo } from 'react'
 import classes from './index.module.css'
 import { Cell, Pie, PieChart as RechartsPieChart, ResponsiveContainer } from 'recharts'
 import { DataEntry } from '../../types'
-import { StringUtils } from '../../utils/string.utils.ts'
+import { StringUtils } from '../../utils/string.utils'
 
 interface Props<T extends DataEntry> {
   data: T[]

frontend/src/components/Table/index.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react'
 import classes from './index.module.css'
 import { DataEntry } from '../../types'
-import { StringUtils } from '../../utils/string.utils.ts'
+import { StringUtils } from '../../utils/string.utils'
 
 interface Props<T extends DataEntry> {
   headers: string[]

frontend/src/components/icons/LightningIcon.tsx

@@ -1,12 +1,12 @@
 /// <reference types="vite-plugin-svgr/client" />
 
 import { FC } from 'react'
-import CaretRightSvg from '@phosphor-icons/core/assets/fill/lightning-fill.svg?react'
+import LightningSvg from '@phosphor-icons/core/assets/fill/lightning-fill.svg?react'
 import { Icon } from '../Icon'
 import { IconProps } from '../../types'
 
 export const LightningIcon: FC<IconProps> = props => (
   <Icon {...props}>
-    <CaretRightSvg />
+    <LightningSvg />
   </Icon>
 )

frontend/src/components/icons/LogoIcon.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { useAppState } from '../../hooks/useAppState.ts'
+import { useAppState } from '../../hooks/useAppState'
 
 const logoSizeMap: Record<'large' | 'small', { width: number; height: number }> = {
   large: {

frontend/src/components/icons/PiggyBankIcon.tsx

@@ -5,7 +5,7 @@ import PiggyBankSvg from '@phosphor-icons/core/assets/regular/piggy-bank.svg?rea
 import { Icon } from '../Icon'
 import { IconProps } from '../../types'
 
-export const PiggyBankSvgIcon: FC<IconProps> = ({ size = 'large', ...restProps }) => (
+export const PiggyBankIcon: FC<IconProps> = ({ size = 'large', ...restProps }) => (
   <Icon size={size} {...restProps}>
     <PiggyBankSvg />
   </Icon>

frontend/src/hooks/useAppState.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { AppStateContext } from '../providers/AppStateContext.ts'
+import { AppStateContext } from '../providers/AppStateContext'
 
 export const useAppState = () => {
   const value = useContext(AppStateContext)

frontend/src/main.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client'
-import { App } from './App.tsx'
+import { App } from './App'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

frontend/src/pages/HomePage/index.tsx

@@ -1,20 +1,20 @@
 import { FC, useEffect, useMemo, useState } from 'react'
-import { CaretRightIcon } from '../../components/icons/CaretRightIcon.tsx'
+import { CaretRightIcon } from '../../components/icons/CaretRightIcon'
 import { Button } from '../../components/Button'
 import { Card } from '../../components/Card'
 import classes from './index.module.css'
 import { MascotCard } from '../../components/MascotCard'
-import { POLL_CHOICES, VOTING_LANDING_PAGE_URL } from '../../constants/config.ts'
-import { useWeb3 } from '../../hooks/useWeb3.ts'
+import { POLL_CHOICES, VOTING_LANDING_PAGE_URL } from '../../constants/config'
+import { useWeb3 } from '../../hooks/useWeb3'
 import { Alert } from '../../components/Alert'
-import { StringUtils } from '../../utils/string.utils.ts'
-import { useAppState } from '../../hooks/useAppState.ts'
+import { StringUtils } from '../../utils/string.utils'
+import { useAppState } from '../../hooks/useAppState'
 import { Navigate, useSearchParams } from 'react-router-dom'
-import { DateUtils } from '../../utils/date.utils.ts'
+import { DateUtils } from '../../utils/date.utils'
 import { MascotChoices } from '../../types'
-import { NumberUtils } from '../../utils/number.utils.ts'
-import { CheckCircleIcon } from '../../components/icons/CheckCircleIcon.tsx'
-import { toErrorString } from '../../utils/errors.ts'
+import { NumberUtils } from '../../utils/number.utils'
+import { CheckCircleIcon } from '../../components/icons/CheckCircleIcon'
+import { toErrorString } from '../../utils/errors'
 
 export const HomePage: FC = () => {
   const {

frontend/src/pages/ResultsPage/index.tsx

@@ -2,18 +2,18 @@ import { FC, Fragment, useEffect, useMemo, useState } from 'react'
 import { Card } from '../../components/Card'
 import classes from './index.module.css'
 import { MascotCard } from '../../components/MascotCard'
-import { TrophyIcon } from '../../components/icons/TrophyIcon.tsx'
+import { TrophyIcon } from '../../components/icons/TrophyIcon'
 import { PieChart } from '../../components/PieChart'
 import { Table } from '../../components/Table'
-import { POLL_CHOICES, VITE_PROPOSAL_START_TIME } from '../../constants/config.ts'
+import { POLL_CHOICES, VITE_PROPOSAL_START_TIME } from '../../constants/config'
 import { Navigate } from 'react-router-dom'
-import { useAppState } from '../../hooks/useAppState.ts'
-import { DateUtils } from '../../utils/date.utils.ts'
-import { useWeb3 } from '../../hooks/useWeb3.ts'
+import { useAppState } from '../../hooks/useAppState'
+import { DateUtils } from '../../utils/date.utils'
+import { useWeb3 } from '../../hooks/useWeb3'
 import { PollChoice } from '../../types'
-import { toErrorString } from '../../utils/errors.ts'
+import { toErrorString } from '../../utils/errors'
 import { MascotTieCard } from '../../components/MascotTieCard'
-import { NumberUtils } from '../../utils/number.utils.ts'
+import { NumberUtils } from '../../utils/number.utils'
 import { MascotTieSplit } from '../../components/MascotTieSplit'
 
 interface PollChoiceWithValue extends PollChoice {
@@ -40,17 +40,15 @@ export const ResultsPage: FC = () => {
     let shouldUpdate = true
 
     const init = async () => {
-      try {
-        const voteCountsResponse = (await getVoteCounts())!
-        if (shouldUpdate) {
-          setVoteCount(voteCountsResponse)
-        }
-      } catch (ex) {
-        setAppError(toErrorString(ex as Error))
+      const voteCountsResponse = (await getVoteCounts())!
+      if (shouldUpdate) {
+        setVoteCount(voteCountsResponse)
       }
     }
 
-    init()
+    init().catch(ex => {
+      setAppError(toErrorString(ex as Error))
+    })
 
     return () => {
       shouldUpdate = false