mirror of https://github.com/kremalicious/blog.git
reorg
This commit is contained in:
parent
74afc8552b
commit
7c82ec79be
|
@ -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 } =
|
||||
sendFormData || {}
|
||||
const [sendFormData, setSendFormData] = useState<SendFormData>()
|
||||
|
||||
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])
|
||||
const { data, send } = sendFormData || {}
|
||||
const { message } = useSend(sendFormData)
|
||||
|
||||
const isDisabled = !account
|
||||
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
export type SendFormData = {
|
||||
data: { hash: `0x${string}` }
|
||||
send: () => Promise<void>
|
||||
isLoading: boolean
|
||||
isSuccess: boolean
|
||||
isError: boolean
|
||||
error: Error | null
|
||||
}
|
|
@ -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'
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
.loader {
|
||||
--borderWidth: 10px;
|
||||
--borderWidth: 5px;
|
||||
--dashes: 10;
|
||||
--gap: 10deg;
|
||||
--gap: 5deg;
|
||||
--color: var(--text-color);
|
||||
|
||||
width: 100px;
|
|
@ -0,0 +1 @@
|
|||
export * from './useSend'
|
|
@ -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 }
|
||||
}
|
Loading…
Reference in New Issue