reorg

src/features/Web3/components/Form/index.tsx

@@ -1,12 +1,14 @@
-import { type ReactElement, useState, useEffect } from 'react'
+import { type ReactElement, useState } from 'react'
 import { useDebounce } from 'use-debounce'
 import { useAccount } from 'wagmi'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
-import Alert, { getTransactionMessage } from '../Alert/Alert'
+import Alert from '../Alert/Alert'
 import { InputGroup } from '../Input'
 import styles from './index.module.css'
 import { SendNative, SendErc20 } from '../Send'
 import type { GetToken } from '../../hooks/useTokens'
+import { useSend } from '@features/Web3/hooks/useSend'
+import type { SendFormData } from './types'
 
 export default function Web3Form(): ReactElement {
   const { address: account } = useAccount()
@@ -16,49 +18,11 @@ export default function Web3Form(): ReactElement {
   const [tokenSelected, setTokenSelected] = useState<GetToken>({
     address: '0x0'
   } as any)
-  const [message, setMessage] = useState<{ status: string; text: string }>()
-  const [sendFormData, setSendFormData] = useState<{
-    data: { hash: `0x${string}` }
-    send: () => Promise<void>
-    isLoading: boolean
-    isSuccess: boolean
-    isError: boolean
-    error: Error | null
-  }>()
 
-  const { data, send, isLoading, isSuccess, isError, error } =
+  const [sendFormData, setSendFormData] = useState<SendFormData>()
-    sendFormData || {}
 
-  useEffect(() => {
+  const { data, send } = sendFormData || {}
-    if (!isError || !error) return
+  const { message } = useSend(sendFormData)
-
-    setMessage(
-      error.message.includes('User rejected the request.')
-        ? undefined
-        : {
-            status: 'error',
-            text: error?.message as string
-          }
-    )
-  }, [isError])
-
-  useEffect(() => {
-    if (!isLoading) return
-
-    setMessage({
-      status: 'loading',
-      text: getTransactionMessage().waitingConfirmation
-    })
-  }, [isLoading])
-
-  useEffect(() => {
-    if (!isSuccess) return
-
-    setMessage({
-      status: 'success',
-      text: getTransactionMessage().success
-    })
-  }, [isSuccess])
 
   const isDisabled = !account
 

src/features/Web3/components/Form/types.ts

@@ -0,0 +1,8 @@
+export type SendFormData = {
+  data: { hash: `0x${string}` }
+  send: () => Promise<void>
+  isLoading: boolean
+  isSuccess: boolean
+  isError: boolean
+  error: Error | null
+}

src/features/Web3/components/Input/InputGroup.tsx

@@ -2,7 +2,7 @@ import { type ReactElement } from 'react'
 import Input from '@components/Input'
 import { Conversion } from '../Conversion'
 import styles from './InputGroup.module.css'
-import { TokenSelect } from '../Tokens'
+import { TokenSelect } from '../TokenSelect'
 import config from '@config/blog.config'
 import type { GetToken } from '../../hooks/useTokens'
 

src/features/Web3/components/TokenSelect/TokenLoading.css

@@ -1,7 +1,7 @@
 .loader {
-  --borderWidth: 10px;
+  --borderWidth: 5px;
   --dashes: 10;
-  --gap: 10deg;
+  --gap: 5deg;
   --color: var(--text-color);
 
   width: 100px;

src/features/Web3/hooks/useSend/index.tsx

@@ -0,0 +1 @@
+export * from './useSend'

src/features/Web3/hooks/useSend/useSend.tsx

@@ -0,0 +1,41 @@
+import { getTransactionMessage } from '@features/Web3/components/Alert/Alert'
+import type { SendFormData } from '@features/Web3/components/Form/types'
+import { useEffect, useState } from 'react'
+
+export function useSend(sendFormData: SendFormData | undefined) {
+  const { isLoading, isSuccess, isError, error } = sendFormData || {}
+  const [message, setMessage] = useState<{ status: string; text: string }>()
+
+  useEffect(() => {
+    if (!isError || !error) return
+
+    setMessage(
+      error.message.includes('User rejected the request.')
+        ? undefined
+        : {
+            status: 'error',
+            text: error?.message as string
+          }
+    )
+  }, [isError])
+
+  useEffect(() => {
+    if (!isLoading) return
+
+    setMessage({
+      status: 'loading',
+      text: getTransactionMessage().waitingConfirmation
+    })
+  }, [isLoading])
+
+  useEffect(() => {
+    if (!isSuccess) return
+
+    setMessage({
+      status: 'success',
+      text: getTransactionMessage().success
+    })
+  }, [isSuccess])
+
+  return { message }
+}