Types and path aliases refactor

- Moved common types to types.d.ts file
- Removed all unnecessary types imports, since they're defined globally
- Added path aliases
- Updated most (if not all) imports, and properly sorted them

webapp/package.json

@@ -34,6 +34,7 @@
     "sort-by": "^1.2.0",
     "viem": "^2.9.26",
     "vite-plugin-html": "^3.2.2",
+    "vite-tsconfig-paths": "^4.3.2",
     "wagmi": "^2.5.20"
   },
   "devDependencies": {

webapp/src/components/Auth/SignInButton.tsx

@@ -16,11 +16,11 @@ import {
 import { QRCode } from '@farcaster/auth-kit'
 import { useEffect, useState } from 'react'
 import { IoPhonePortraitOutline } from 'react-icons/io5'
-import { appUrl } from '../../util/constants'
+import { appUrl } from '~constants'
 import { FarcasterLogo } from '../FarcasterLogo'
+import { useAuth } from './useAuth'
 
 import '@farcaster/auth-kit/styles.css'
-import { useAuth } from './useAuth'
 
 export const SignInButton = (props: ButtonProps) => {
   const { login, bearer } = useAuth()

webapp/src/components/Auth/useAuthProvider.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
-import { appUrl } from '../../util/constants'
-import type { Profile } from '../../util/types'
+import { appUrl } from '~constants'
+
 interface AuthState {
   isAuthenticated: boolean
   bearer: string | null

webapp/src/components/CensusTypeSelector.tsx

@@ -24,25 +24,23 @@ import {
   UnorderedList,
 } from '@chakra-ui/react'
 import { useQuery } from '@tanstack/react-query'
-import { chakraComponents, Select as RSelect } from 'chakra-react-select'
+import { chakraComponents, GroupBase, OptionProps, Select as RSelect } from 'chakra-react-select'
 import { useEffect } from 'react'
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form'
 import { BiTrash } from 'react-icons/bi'
 import { MdArrowDropDown } from 'react-icons/md'
+import { appUrl } from '~constants'
+import { fetchAirstackBlockchains } from '~queries/census'
+import { fetchCommunitiesByAdmin } from '~queries/communities'
+import { cleanChannel, ucfirst } from '~util/strings'
 import Airstack from '../assets/airstack.svg?react'
-import { fetchAirstackBlockchains } from '../queries/census'
-import { fetchCommunitiesByAdmin } from '../queries/communities'
-import { appUrl } from '../util/constants'
-import { cleanChannel, ucfirst } from '../util/strings'
-import type { Address, Community } from '../util/types'
 import { useAuth } from './Auth/useAuth'
 
-export type CensusType = 'farcaster' | 'channel' | 'followers' | 'custom' | 'erc20' | 'nft' | 'community'
-
 export type CensusFormValues = {
   censusType: CensusType
   addresses?: Address[]
   channel?: string
+  community?: Community
   csv?: File | undefined
 }
 
@@ -132,7 +130,6 @@ const CensusTypeSelector = ({ complete, ...props }: FormControlProps & { complet
             render={({ field }) => (
               <RSelect
                 placeholder='Choose a community'
-                cacheOptions
                 isLoading={cloading}
                 options={communities?.filter((c) => !c.disabled) || []}
                 getOptionLabel={(option: Community) => option.name}
@@ -266,7 +263,7 @@ const CensusTypeSelector = ({ complete, ...props }: FormControlProps & { complet
 export default CensusTypeSelector
 
 const communitySelector = {
-  Option: ({ children, ...props }) => (
+  Option: ({ children, ...props }: OptionProps<any, false, GroupBase<any>>) => (
     <chakraComponents.Option {...props}>
       <Avatar size={'sm'} src={(props.data as Community).logoURL} mr={2} /> {children}
     </chakraComponents.Option>

webapp/src/components/Communities/Card.tsx

@@ -1,7 +1,6 @@
 import { Avatar, Badge, Flex, HStack, Link, LinkProps, Text, VStack } from '@chakra-ui/react'
 import { Link as RouterLink } from 'react-router-dom'
-import { Profile } from '../../util/types.ts'
-import { useAuth } from '../Auth/useAuth.ts'
+import { useAuth } from '~components/Auth/useAuth'
 
 type CommunityCardProps = LinkProps & {
   name: string

webapp/src/components/Communities/Create/CensusSelector.tsx

@@ -1,5 +1,5 @@
 import { Box, FormLabel, Text } from '@chakra-ui/react'
-import CensusTypeSelector from '../../CensusTypeSelector'
+import CensusTypeSelector from '~components/CensusTypeSelector'
 
 export const CensusSelector = () => {
   return (

webapp/src/components/Communities/Create/Channels.tsx

@@ -1,13 +1,12 @@
 import { Box, FormControl, FormErrorMessage, FormLabel, Heading, Image, Text } from '@chakra-ui/react'
-import { AsyncSelect } from 'chakra-react-select'
+import { AsyncSelect, chakraComponents as components, GroupBase, OptionProps } from 'chakra-react-select'
 import { useState } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
-import { components } from 'react-select'
-import { fetchChannelQuery } from '../../../queries/channels'
-import { useAuth } from '../../Auth/useAuth'
+import { useAuth } from '~components/Auth/useAuth'
+import { fetchChannelQuery } from '~queries/channels'
 
 // CustomOption Component
-const CustomOption = (props) => {
+const CustomOption = (props: OptionProps<any, false, GroupBase<any>>) => {
   return (
     <components.Option {...props}>
       <Box display='flex' alignItems='center'>
@@ -26,7 +25,7 @@ const CustomOption = (props) => {
 }
 
 export type ChannelsFormValues = {
-  channels: { label: string; value: string }[]
+  channels: { label: string; value: string; image: string }[]
 }
 
 export const Channels = () => {
@@ -48,7 +47,6 @@ export const Channels = () => {
         render={({ field }) => (
           <AsyncSelect
             id='channels'
-            isMulti
             size='sm'
             isLoading={loading}
             noOptionsMessage={() => 'No channels found'}
@@ -68,6 +66,7 @@ export const Channels = () => {
                 if (e instanceof Error) {
                   setError('channels', { message: e.message })
                 }
+                return []
               } finally {
                 setLoading(false)
               }

webapp/src/components/Communities/Create/Done.tsx

@@ -3,7 +3,7 @@ import { useFormContext } from 'react-hook-form'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 import { MdHowToVote } from 'react-icons/md'
 import { useNavigate } from 'react-router-dom'
-import { CommunityMetaFormValues } from './Meta.tsx'
+import { CommunityMetaFormValues } from './Meta'
 
 type DoneProps = {
   tx: string

webapp/src/components/Communities/Create/Form.tsx

@@ -4,16 +4,16 @@ import { BrowserProvider, ContractTransactionReceipt } from 'ethers'
 import { useCallback, useEffect, useState } from 'react'
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'
 import { useAccount, useBalance, useWalletClient, type UseWalletClientReturnType } from 'wagmi'
-import { CommunityHub__factory } from '../../../typechain'
-import { CommunityHubInterface, ICommunityHub } from '../../../typechain/src/CommunityHub.ts'
-import { degenContractAddress } from '../../../util/constants'
-import { censusTypeToEnum } from '../../../util/types.ts'
-import { CensusFormValues } from '../../CensusTypeSelector'
+import { CensusFormValues } from '~components/CensusTypeSelector'
+import { degenContractAddress } from '~constants'
+import { CommunityHub__factory, ICommunityHub } from '~typechain'
+import { CommunityHubInterface } from '~typechain/src/CommunityHub'
+import { censusTypeToEnum } from '~util/types'
 import { CensusSelector } from './CensusSelector'
 import { Channels } from './Channels'
 import { Confirm } from './Confirm'
-import CommunityDone from './Done.tsx'
-import { GroupChat } from './GroupChat.tsx'
+import CommunityDone from './Done'
+import { GroupChat } from './GroupChat'
 import { CommunityMetaFormValues, Meta } from './Meta'
 
 export type CommunityFormValues = Pick<CensusFormValues, 'addresses' | 'censusType' | 'channel'> &
@@ -86,7 +86,7 @@ export const CommunitiesCreateForm = () => {
           censusType: censusTypeToEnum(data.censusType), // Census type
           tokens:
             data.addresses
-              ?.filter(({ _, address }) => address !== '')
+              ?.filter(({ address }) => address !== '')
               .map(({ blockchain, address: contractAddress }) => {
                 return {
                   blockchain,
@@ -197,7 +197,7 @@ export const CommunitiesCreateForm = () => {
                   <Confirm
                     isLoading={isPending || isLoadingPrice || isBalanceLoading}
                     price={calcPrice}
-                    balance={userBalance}
+                    balance={userBalance as string}
                   />
                 </Box>
               </Flex>

webapp/src/components/Communities/Manage.tsx

@@ -17,10 +17,9 @@ import {
 import { useQuery } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 import { FaBell, FaEyeSlash } from 'react-icons/fa6'
-import { fetchCommunity } from '../../queries/communities'
-import { appUrl } from '../../util/constants'
-import type { Community } from '../../util/types'
-import { useAuth } from '../Auth/useAuth'
+import { useAuth } from '~components/Auth/useAuth'
+import { appUrl } from '~constants'
+import { fetchCommunity } from '~queries/communities'
 
 export type ManageCommunityProps = {
   communityID: number

webapp/src/components/Communities/View.tsx

@@ -31,15 +31,14 @@ import { MdHowToVote } from 'react-icons/md'
 import { SiFarcaster } from 'react-icons/si'
 import { TbExternalLink } from 'react-icons/tb'
 import { Link as RouterLink, useNavigate } from 'react-router-dom'
-import { fetchPollsByCommunity } from '../../queries/tops'
-import { degenContractAddress } from '../../util/constants'
-import { humanDate } from '../../util/strings'
-import { Community, Poll } from '../../util/types'
-import { useAuth } from '../Auth/useAuth'
+import { useAuth } from '~components/Auth/useAuth'
+import { degenContractAddress } from '~constants'
+import { fetchPollsByCommunity } from '~queries/tops'
+import { humanDate } from '~util/strings'
 import { ManageCommunity } from './Manage'
 
-export type CommunitiesViewProps = {
-  community: Community
+type CommunitiesViewProps = {
+  community?: Community
 }
 
 const WhiteBox = ({ children }: PropsWithChildren) => (
@@ -69,13 +68,13 @@ export const CommunitiesView = ({ community }: CommunitiesViewProps) => {
   })
   const navigate = useNavigate() // Hook to control navigation
   const imAdmin = useMemo(
-    () => isAuthenticated && community.admins.some((admin) => admin.fid == profile?.fid),
+    () => isAuthenticated && community?.admins.some((admin) => admin.fid == profile?.fid),
     [isAuthenticated, community, profile]
   )
   if (!community) return
 
   const channelLinks: ReactElement[] = []
-  community.channels.forEach((channel, index) => {
+  community.channels.forEach((channel, index: number) => {
     channelLinks.push(
       <Link
         key={`link-${channel}`}
@@ -233,7 +232,9 @@ export const CommunitiesView = ({ community }: CommunitiesViewProps) => {
 }
 
 export const CommunityAdmins = ({ community }: CommunitiesViewProps) => {
-  return community.admins.map((admin, k) => (
+  if (!community) return
+
+  return community.admins.map((admin: Profile, k: number) => (
     <Fragment key={k}>
       <Link isExternal href={`https://warpcast.com/${admin.username}`}>
         {admin.displayName || admin.username}

webapp/src/components/Communities/index.tsx

@@ -3,10 +3,9 @@ import { useQuery } from '@tanstack/react-query'
 import { useCallback, useState } from 'react'
 import { FaRegStar, FaUsers } from 'react-icons/fa'
 import { Link as RouterLink } from 'react-router-dom'
-import { fetchCommunities, fetchCommunitiesByAdmin } from '../../queries/communities'
-import { Community } from '../../util/types'
-import { useAuth } from '../Auth/useAuth'
-import { Check } from '../Check'
+import { useAuth } from '~components/Auth/useAuth'
+import { Check } from '~components/Check'
+import { fetchCommunities, fetchCommunitiesByAdmin } from '~queries/communities'
 import { CommunityCard } from './Card'
 
 export const CommunitiesList = () => {

webapp/src/components/Credits.tsx

@@ -93,7 +93,7 @@ export const Credits = (props: FlexProps) => {
             Do you want to create more flexible Web3 votes? <br />
             Check our Web3 voting UI 👇
           </Text>
-          <Box align='center'>
+          <Box textAlign='center'>
             <Link href='https://onvote.app' target='_blank'>
               <Image src={logo} alt='onvote.app' maxW='50%' />
             </Link>
@@ -127,6 +127,7 @@ export const Credits = (props: FlexProps) => {
                 0x988A5a452D40aEB67B405eC7Dda6E28fe789646d
               </Code>
               <IconButton
+                aria-label='Copy to clipboard'
                 colorScheme='purple'
                 icon={hasCopied ? <FaCheck /> : <FaRegCopy />}
                 size='xs'

webapp/src/components/Done.tsx

@@ -2,10 +2,10 @@ import { Box, Button, Code, Icon, IconButton, Image, Link, Text, useClipboard }
 import { Dispatch, SetStateAction, useMemo } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { FaCheck, FaDownload, FaRegCopy } from 'react-icons/fa6'
+import { appUrl } from '~constants'
 import { CsvGenerator } from '../generator'
 import { FarcasterLogo } from './FarcasterLogo'
 
-const appUrl = import.meta.env.APP_URL
 const pollUrl = (pid: string) => `${appUrl}/${pid}`
 const cast = (uri: string) => window.open(`https://warpcast.com/~/compose?embeds[]=${encodeURIComponent(uri)}`)
 
@@ -39,6 +39,7 @@ export const Done = ({ pid, setPid, usernames, setUsernames, censusRecords, shor
           {shortened ?? pollUrl(pid)}
         </Code>
         <IconButton
+          aria-label='Copy to clipboard'
           colorScheme='purple'
           icon={hasCopied ? <FaCheck /> : <FaRegCopy />}
           size='xs'
@@ -60,7 +61,7 @@ export const Done = ({ pid, setPid, usernames, setUsernames, censusRecords, shor
       >
         Cast it!
       </Button>
-      <Box fontSize='xs' align='right'>
+      <Box fontSize='xs' textAlign='right'>
         or{' '}
         <Button
           variant='text'