refactor

src/components/Sponsor/Web3Donation/components/Tokens/Select.tsx

@@ -2,35 +2,13 @@ import * as Select from '@radix-ui/react-select'
 import './Select.css'
 import { SelectItem } from './SelectItem'
 import { ChevronDown, ChevronsDown, ChevronsUp } from '@images/components/react'
-import { useEffect, useState } from 'react'
+import { useTokens } from '../../hooks/useTokens'
-import { getBalance } from '../../api/getBalance'
-import { useAccount, useNetwork } from 'wagmi'
 
 export function TokenSelect() {
-  const { address } = useAccount()
+  const { data: tokens } = useTokens()
-  const { chain } = useNetwork()
-
-  const [tokens, setTokens] = useState()
-
-  useEffect(() => {
-    if (!address || !chain) return
-
-    async function getTokens() {
-      try {
-        const response = await getBalance(address)
-        const tokens = response.filter(
-          (token: any) => parseInt(token.chainId) === chain?.id
-        )
-        setTokens(tokens)
-      } catch (error) {
-        console.error((error as Error).message)
-      }
-    }
-    getTokens()
-  }, [address, chain])
 
   return (
-    <Select.Root disabled={!address}>
+    <Select.Root disabled={!tokens}>
       <Select.Trigger className="SelectTrigger" aria-label="Token">
         <Select.Value placeholder="…" />
         <Select.Icon>

src/components/Sponsor/Web3Donation/hooks/useTokens.tsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react'
+import { useAccount, useNetwork } from 'wagmi'
+import { getBalance } from '../api/getBalance'
+
+export function useTokens() {
+  const { address } = useAccount()
+  const { chain } = useNetwork()
+
+  const [data, setData] = useState()
+  const [isLoading, setIsLoading] = useState<boolean>()
+  const [isError, setIsError] = useState<boolean>()
+
+  useEffect(() => {
+    if (!address || !chain) return
+
+    async function getTokens() {
+      setIsLoading(true)
+
+      try {
+        const response = await getBalance(address)
+        const tokens = response.filter(
+          (token: any) => parseInt(token.chainId) === chain?.id
+        )
+        setData(tokens)
+        setIsLoading(false)
+      } catch (error) {
+        setIsError(true)
+        setIsLoading(false)
+        console.error((error as Error).message)
+      }
+    }
+    getTokens()
+  }, [address, chain])
+
+  return { data, isLoading, isError }
+}