fix: all the linting errors

BootNodeDev · Jul 4, 2024 · 0b269b2 · 0b269b2
1 parent 5970aeb
commit 0b269b2
Show file tree

Hide file tree

Showing 39 changed files with 95 additions and 83 deletions.
diff --git a/src/lib/wallets/connectkit.config.tsx b/src/lib/wallets/connectkit.config.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { type FC, type ReactNode } from 'react'
 
 import { getDefaultConfig, ConnectKitProvider, ConnectKitButton, Types } from 'connectkit'
 import { Address } from 'viem'
@@ -10,10 +10,12 @@ import { chains, transports } from '@/src/lib/networks.config'
 import Avatar from '@/src/sharedComponents/Avatar'
 import ConnectButton from '@/src/sharedComponents/ConnectButton'
 
-const UserAvatar: React.FC<{
+interface Props {
   address: Address
   size: number
-}> = ({ address, size }) => {
+}
+
+const UserAvatar: FC<Props> = ({ address, size }: Props) => {
   const { data: ensName } = useEnsName({ address })
 
   const { data: avatarImg } = useEnsAvatar({
@@ -23,11 +25,11 @@ const UserAvatar: React.FC<{
   return <Avatar address={address} ensImage={avatarImg} ensName={ensName} size={size} />
 }
 
-export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
+export const WalletProvider = ({ children }: { children: ReactNode }) => {
   return (
     <ConnectKitProvider
       options={{
-        customAvatar: Avatar as React.FC<Types.CustomAvatarProps>,
+        customAvatar: Avatar as FC<Types.CustomAvatarProps>,
         initialChainId: 0,
         enforceSupportedChains: false,
       }}

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { StrictMode } from 'react'
 
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import ReactDOM from 'react-dom/client'
@@ -21,8 +21,8 @@ const rootElement = document.getElementById('root')!
 
 if (!rootElement.innerHTML) {
   ReactDOM.createRoot(rootElement).render(
-    <React.StrictMode>
+    <StrictMode>
       <RouterProvider router={router} />
-    </React.StrictMode>,
+    </StrictMode>,
   )
 }
diff --git a/src/pageComponents/home/Examples/Item/index.tsx b/src/pageComponents/home/Examples/Item/index.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes, type ReactNode } from 'react'
 import styled from 'styled-components'
 
 import BaseBadge from '@/src/pageComponents/home/Examples/Item/Badge'
@@ -82,14 +82,14 @@ const Badge = styled(BaseBadge)`
 `
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
-  demo: React.ReactNode
+  demo: ReactNode
   href: string
-  icon: React.ReactNode
+  icon: ReactNode
   text: string
   title: string
 }
 
-const Item: React.FC<Props> = ({ demo, href, icon, text, title, ...restProps }) => {
+const Item: FC<Props> = ({ demo, href, icon, text, title, ...restProps }) => {
   return (
     <Wrapper {...restProps}>
       <Info>

diff --git a/src/pageComponents/home/Examples/List.tsx b/src/pageComponents/home/Examples/List.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
 import Item, { Props as ItemProps } from '@/src/pageComponents/home/Examples/Item'
@@ -43,7 +43,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   items: ItemProps[]
 }
 
-const List: React.FC<Props> = ({ items, ...restProps }) => {
+const List: FC<Props> = ({ items, ...restProps }) => {
   return (
     <Wrapper {...restProps}>
       <Title>Built-in Features</Title>

diff --git a/src/pageComponents/home/Examples/assets/Avatar.tsx b/src/pageComponents/home/Examples/assets/Avatar.tsx
@@ -1,12 +1,12 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
   display: block;
   flex-shrink: 0;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="20"

diff --git a/src/pageComponents/home/Examples/assets/Hash.tsx b/src/pageComponents/home/Examples/assets/Hash.tsx
@@ -1,12 +1,12 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
   display: block;
   flex-shrink: 0;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="16"

diff --git a/src/pageComponents/home/Examples/assets/IPFSImage.tsx b/src/pageComponents/home/Examples/assets/IPFSImage.tsx
@@ -1,12 +1,12 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
   display: block;
   flex-shrink: 0;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="20"

diff --git a/src/pageComponents/home/Examples/assets/InputAddress.tsx b/src/pageComponents/home/Examples/assets/InputAddress.tsx
@@ -1,12 +1,12 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
   display: block;
   flex-shrink: 0;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="18"

diff --git a/src/pageComponents/home/Examples/assets/Subgraph.tsx b/src/pageComponents/home/Examples/assets/Subgraph.tsx
@@ -1,12 +1,12 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
   display: block;
   flex-shrink: 0;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="19"

diff --git a/src/pageComponents/home/Examples/assets/TokenInput.tsx b/src/pageComponents/home/Examples/assets/TokenInput.tsx
@@ -1,12 +1,12 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
   display: block;
   flex-shrink: 0;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="20"

diff --git a/src/pageComponents/home/Examples/assets/TokenList.tsx b/src/pageComponents/home/Examples/assets/TokenList.tsx
@@ -1,12 +1,12 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
   display: block;
   flex-shrink: 0;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="15"

diff --git a/src/pageComponents/home/Examples/assets/Wallet.tsx b/src/pageComponents/home/Examples/assets/Wallet.tsx
@@ -1,12 +1,12 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
   display: block;
   flex-shrink: 0;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="18"

diff --git a/src/pageComponents/home/Examples/demos/TokenDropdownDemo/assets/Arbitrum.tsx b/src/pageComponents/home/Examples/demos/TokenDropdownDemo/assets/Arbitrum.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
@@ -7,7 +7,7 @@ const Wrapper = styled.svg`
   width: 24px;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper fill="none" viewBox="0 0 382 381" xmlns="http://www.w3.org/2000/svg" {...restProps}>
     <path
       d="M191.158 380.495C297.186 380.495 381.336 294.674 381.336 190.341C381.336 84.3262 295.503 0.187256 191.158 0.187256C85.1305 0.187256 0.981354 86.009 0.981354 190.341C0.981354 294.674 86.8135 380.495 191.158 380.495Z"

diff --git a/src/pageComponents/home/Examples/demos/TokenDropdownDemo/assets/Eth.tsx b/src/pageComponents/home/Examples/demos/TokenDropdownDemo/assets/Eth.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
@@ -8,7 +8,7 @@ const Wrapper = styled.svg`
   width: 24px;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="24"

diff --git a/src/pageComponents/home/Examples/demos/TokenDropdownDemo/assets/Polygon.tsx b/src/pageComponents/home/Examples/demos/TokenDropdownDemo/assets/Polygon.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
@@ -7,7 +7,7 @@ const Wrapper = styled.svg`
   height: 24px;
 `
 
-const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Icon: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper fill="none" viewBox="0 0 290 321" xmlns="http://www.w3.org/2000/svg" {...restProps}>
     <svg>
       <path

diff --git a/src/pageComponents/home/Examples/demos/TokenDropdownDemo/index.tsx b/src/pageComponents/home/Examples/demos/TokenDropdownDemo/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { type FC, useState } from 'react'
 
 import { arbitrum, mainnet, polygon } from 'viem/chains'
 
@@ -9,7 +9,7 @@ import TokenDropdown from '@/src/sharedComponents/TokenDropdown'
 import { type Networks } from '@/src/sharedComponents/TokenSelect'
 import { type Token } from '@/src/types/token'
 
-const TokenDropdownDemo: React.FC = ({ ...restProps }) => {
+const TokenDropdownDemo: FC = ({ ...restProps }) => {
   const [currentNetworkId, setCurrentNetworkId] = useState<number>(mainnet.id)
   const [currentToken, setCurrentToken] = useState<Token | undefined>()
   const networks: Networks = [

diff --git a/src/pageComponents/home/Examples/demos/Tokens.tsx b/src/pageComponents/home/Examples/demos/Tokens.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, HTMLAttributes } from 'react'
+import { type FC, useCallback, type HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
 import { Card, Button } from 'db-ui-toolkit'
@@ -71,7 +71,7 @@ const Wrapper = styled(Card)`
 
 const ErrorMessage = styled.p``
 
-const Tokens: React.FC<HTMLAttributes<HTMLDivElement>> = ({ ...restProps }) => {
+const Tokens: FC<HTMLAttributes<HTMLDivElement>> = ({ ...restProps }) => {
   const retry = useCallback<Required<WithSuspenseAndRetryProps>['fallbackRender']>(
     ({ resetErrorBoundary }) => (
       <div>

diff --git a/src/pageComponents/home/Examples/index.tsx b/src/pageComponents/home/Examples/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
 import { InnerContainer as Inner, ContainerPadding } from 'db-ui-toolkit'
@@ -46,7 +46,7 @@ const InnerContainer = styled(Inner)`
   ${ContainerPadding}
 `
 
-const Examples: React.FC = ({ ...restProps }) => {
+const Examples: FC<HTMLAttributes<HTMLElement>> = ({ ...restProps }) => {
   const { address = '0x87885AaEEdED51C7e3858a782644F5d89759f245' } = useAccount()
   const items: ItemProps[] = [
     {

diff --git a/src/pageComponents/home/Welcome/index.tsx b/src/pageComponents/home/Welcome/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
 import {
@@ -91,7 +91,7 @@ const Buttons = styled.div`
   margin-bottom: calc(var(--base-gap) * 4);
 `
 
-const Welcome: React.FC = ({ ...restProps }) => {
+const Welcome: FC<HTMLAttributes<HTMLElement>> = ({ ...restProps }) => {
   return (
     <Wrapper id="top" {...restProps}>
       <Clouds>

diff --git a/src/providers/Web3Provider.tsx b/src/providers/Web3Provider.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import { type PropsWithChildren, type FC } from 'react'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider } from 'wagmi'
@@ -9,7 +9,7 @@ const queryClient = new QueryClient()
 
 export { ConnectWalletButton }
 
-export const Web3Provider: React.FC<PropsWithChildren> = ({ children }) => {
+export const Web3Provider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>

diff --git a/src/sharedComponents/Footer/Socials/assets/Github.tsx b/src/sharedComponents/Footer/Socials/assets/Github.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
@@ -9,7 +9,7 @@ const Wrapper = styled.svg`
 /**
  * Github logo component
  */
-const Github: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Github: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="25"

diff --git a/src/sharedComponents/Footer/Socials/assets/LinkedIn.tsx b/src/sharedComponents/Footer/Socials/assets/LinkedIn.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
@@ -9,7 +9,7 @@ const Wrapper = styled.svg`
 /**
  * LinkedIn logo component
  */
-const LinkedIn: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const LinkedIn: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="25"

diff --git a/src/sharedComponents/Footer/Socials/assets/Telegram.tsx b/src/sharedComponents/Footer/Socials/assets/Telegram.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
@@ -9,7 +9,7 @@ const Wrapper = styled.svg`
 /**
  * Telegram logo component
  */
-const Telegram: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Telegram: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="25"

diff --git a/src/sharedComponents/Footer/Socials/assets/Twitter.tsx b/src/sharedComponents/Footer/Socials/assets/Twitter.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import { type FC, type HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
 
 const Wrapper = styled.svg`
@@ -9,7 +9,7 @@ const Wrapper = styled.svg`
 /**
  * Twitter logo component
  */
-const Twitter: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+const Twitter: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
   <Wrapper
     fill="none"
     height="25"