From 7c82ec79be2df65ab18f93b648df339569b475a9 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 29 Oct 2023 16:36:39 +0000 Subject: [PATCH] reorg --- src/features/Web3/components/Form/index.tsx | 50 +++---------------- src/features/Web3/components/Form/types.ts | 8 +++ .../Web3/components/Input/InputGroup.tsx | 2 +- .../{Tokens => TokenSelect}/Token.css | 0 .../{Tokens => TokenSelect}/Token.tsx | 0 .../{Tokens => TokenSelect}/TokenLoading.css | 4 +- .../{Tokens => TokenSelect}/TokenLoading.tsx | 0 .../{Tokens => TokenSelect}/TokenSelect.css | 0 .../{Tokens => TokenSelect}/TokenSelect.tsx | 0 .../{Tokens => TokenSelect}/index.tsx | 0 src/features/Web3/hooks/useSend/index.tsx | 1 + src/features/Web3/hooks/useSend/useSend.tsx | 41 +++++++++++++++ 12 files changed, 60 insertions(+), 46 deletions(-) create mode 100644 src/features/Web3/components/Form/types.ts rename src/features/Web3/components/{Tokens => TokenSelect}/Token.css (100%) rename src/features/Web3/components/{Tokens => TokenSelect}/Token.tsx (100%) rename src/features/Web3/components/{Tokens => TokenSelect}/TokenLoading.css (95%) rename src/features/Web3/components/{Tokens => TokenSelect}/TokenLoading.tsx (100%) rename src/features/Web3/components/{Tokens => TokenSelect}/TokenSelect.css (100%) rename src/features/Web3/components/{Tokens => TokenSelect}/TokenSelect.tsx (100%) rename src/features/Web3/components/{Tokens => TokenSelect}/index.tsx (100%) create mode 100644 src/features/Web3/hooks/useSend/index.tsx create mode 100644 src/features/Web3/hooks/useSend/useSend.tsx diff --git a/src/features/Web3/components/Form/index.tsx b/src/features/Web3/components/Form/index.tsx index 69fe04f2..e4b8fcac 100644 --- a/src/features/Web3/components/Form/index.tsx +++ b/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({ address: '0x0' } as any) - const [message, setMessage] = useState<{ status: string; text: string }>() - const [sendFormData, setSendFormData] = useState<{ - data: { hash: `0x${string}` } - send: () => Promise - isLoading: boolean - isSuccess: boolean - isError: boolean - error: Error | null - }>() - const { data, send, isLoading, isSuccess, isError, error } = - sendFormData || {} + const [sendFormData, setSendFormData] = useState() - 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 diff --git a/src/features/Web3/components/Form/types.ts b/src/features/Web3/components/Form/types.ts new file mode 100644 index 00000000..1d45e898 --- /dev/null +++ b/src/features/Web3/components/Form/types.ts @@ -0,0 +1,8 @@ +export type SendFormData = { + data: { hash: `0x${string}` } + send: () => Promise + isLoading: boolean + isSuccess: boolean + isError: boolean + error: Error | null +} diff --git a/src/features/Web3/components/Input/InputGroup.tsx b/src/features/Web3/components/Input/InputGroup.tsx index d264382e..f9168d6e 100644 --- a/src/features/Web3/components/Input/InputGroup.tsx +++ b/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' diff --git a/src/features/Web3/components/Tokens/Token.css b/src/features/Web3/components/TokenSelect/Token.css similarity index 100% rename from src/features/Web3/components/Tokens/Token.css rename to src/features/Web3/components/TokenSelect/Token.css diff --git a/src/features/Web3/components/Tokens/Token.tsx b/src/features/Web3/components/TokenSelect/Token.tsx similarity index 100% rename from src/features/Web3/components/Tokens/Token.tsx rename to src/features/Web3/components/TokenSelect/Token.tsx diff --git a/src/features/Web3/components/Tokens/TokenLoading.css b/src/features/Web3/components/TokenSelect/TokenLoading.css similarity index 95% rename from src/features/Web3/components/Tokens/TokenLoading.css rename to src/features/Web3/components/TokenSelect/TokenLoading.css index 97c1f72b..0c1509dd 100644 --- a/src/features/Web3/components/Tokens/TokenLoading.css +++ b/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; diff --git a/src/features/Web3/components/Tokens/TokenLoading.tsx b/src/features/Web3/components/TokenSelect/TokenLoading.tsx similarity index 100% rename from src/features/Web3/components/Tokens/TokenLoading.tsx rename to src/features/Web3/components/TokenSelect/TokenLoading.tsx diff --git a/src/features/Web3/components/Tokens/TokenSelect.css b/src/features/Web3/components/TokenSelect/TokenSelect.css similarity index 100% rename from src/features/Web3/components/Tokens/TokenSelect.css rename to src/features/Web3/components/TokenSelect/TokenSelect.css diff --git a/src/features/Web3/components/Tokens/TokenSelect.tsx b/src/features/Web3/components/TokenSelect/TokenSelect.tsx similarity index 100% rename from src/features/Web3/components/Tokens/TokenSelect.tsx rename to src/features/Web3/components/TokenSelect/TokenSelect.tsx diff --git a/src/features/Web3/components/Tokens/index.tsx b/src/features/Web3/components/TokenSelect/index.tsx similarity index 100% rename from src/features/Web3/components/Tokens/index.tsx rename to src/features/Web3/components/TokenSelect/index.tsx diff --git a/src/features/Web3/hooks/useSend/index.tsx b/src/features/Web3/hooks/useSend/index.tsx new file mode 100644 index 00000000..7e7e391c --- /dev/null +++ b/src/features/Web3/hooks/useSend/index.tsx @@ -0,0 +1 @@ +export * from './useSend' diff --git a/src/features/Web3/hooks/useSend/useSend.tsx b/src/features/Web3/hooks/useSend/useSend.tsx new file mode 100644 index 00000000..6e4cb702 --- /dev/null +++ b/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 } +}