(
{token?.logo ? (
-
+
) : (
token?.symbol?.substring(0, 3)
)}
+
diff --git a/src/features/Web3/components/TokenSelect/TokenSelect.tsx b/src/features/Web3/components/TokenSelect/TokenSelect.tsx
index f10bc6ae..1157adcd 100644
--- a/src/features/Web3/components/TokenSelect/TokenSelect.tsx
+++ b/src/features/Web3/components/TokenSelect/TokenSelect.tsx
@@ -17,7 +17,7 @@ export function TokenSelect() {
const selectedToken = useStore($selectedToken)
const items = tokens?.map((token) => (
-
+
))
function handleValueChange(value: `0x${string}`) {
@@ -32,12 +32,12 @@ export function TokenSelect() {
useEffect(() => {
if (selectedToken?.address || !tokens || !tokens?.length) return
- handleValueChange('0x0')
+ // select ETH mainnet token
+ handleValueChange('0x0-1')
}, [tokens, selectedToken])
return tokens && address ? (
handleValueChange(value)}
disabled={isLoading}
diff --git a/src/features/Web3/hooks/useFetchTokens/types.ts b/src/features/Web3/hooks/useFetchTokens/types.ts
index 6eec3674..23506ae9 100644
--- a/src/features/Web3/hooks/useFetchTokens/types.ts
+++ b/src/features/Web3/hooks/useFetchTokens/types.ts
@@ -2,12 +2,13 @@ export type GetToken = {
address: `0x${string}`
balance: number | undefined
chainId: number
- name: string | null
- symbol: string | null
- decimals: number | null
- logo: string | null
+ chainLogo: string | undefined
+ name: string | undefined
+ symbol: string | undefined
+ decimals: number | undefined
+ logo: string | undefined
price: {
- usd: number | null
- eur: number | null
+ usd: number | undefined
+ eur: number | undefined
}
}
diff --git a/src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx b/src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx
index be1d84a9..bdc49557 100644
--- a/src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx
+++ b/src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'
import useSWR, { type SWRResponse } from 'swr'
-import { useChainId, useAccount } from 'wagmi'
+import { useAccount, useChains } from 'wagmi'
import type { GetToken } from './types'
const fetcher = (url: string) => fetch(url).then((res) => res.json())
@@ -10,26 +10,23 @@ const apiUrl = import.meta.env.PUBLIC_WEB3_API_URL
// Wrapper for fetching user tokens with swr.
//
export function useFetchTokens(): SWRResponse {
- const chainId = useChainId()
const { address } = useAccount()
- // const { chains } = useConfig()
-
+ const chains = useChains()
const [url, setUrl] = useState()
-
const fetchResults = useSWR(url, fetcher)
// Set url only after we have all data loaded on client,
// preventing initial fetch.
useEffect(() => {
- if (!address || !chainId) {
+ if (!address || !chains) {
setUrl(undefined)
return
}
- // const chainIds = chains.map((chain) => chain.id).join(',')
- const url = `${apiUrl}/balance?address=${address}&chainIds=${chainId}`
+ const chainIds = chains.map((chain) => chain.id).join(',')
+ const url = `${apiUrl}/balance?address=${address}&chainIds=${chainIds}`
setUrl(url)
- }, [address, chainId])
+ }, [address, chains])
return fetchResults
}
diff --git a/src/features/Web3/hooks/useSend/send.ts b/src/features/Web3/hooks/useSend/send.ts
index 84c92b3d..f24f66f4 100644
--- a/src/features/Web3/hooks/useSend/send.ts
+++ b/src/features/Web3/hooks/useSend/send.ts
@@ -13,7 +13,7 @@ export async function send(
) {
if (!selectedToken?.decimals || !amount || !to) return
- const isNative = selectedToken.address === '0x0'
+ const isNative = selectedToken.address.startsWith('0x0')
const requestNative = { chainId, to, value: parseEther(amount) }
const requestErc20 = {
chainId,
diff --git a/src/features/Web3/hooks/useSend/useSend.tsx b/src/features/Web3/hooks/useSend/useSend.tsx
index 4f6a1929..a7d2ef11 100644
--- a/src/features/Web3/hooks/useSend/useSend.tsx
+++ b/src/features/Web3/hooks/useSend/useSend.tsx
@@ -3,7 +3,7 @@ import { useStore } from '@nanostores/react'
import { useState } from 'react'
import { send } from './send'
import { isUnhelpfulErrorMessage } from './isUnhelpfulErrorMessage'
-import { useAccount, useConfig, useEnsAddress } from 'wagmi'
+import { useAccount, useConfig, useEnsAddress, useSwitchChain } from 'wagmi'
import siteConfig from '@config/blog.config'
export function useSend() {
@@ -13,17 +13,31 @@ export function useSend() {
const { chainId } = useAccount()
const { ens } = siteConfig.author.ether
const { data: to } = useEnsAddress({ name: ens, chainId: 1 })
+ const { switchChain } = useSwitchChain()
const [isLoading, setIsLoading] = useState(false)
const [isError, setIsError] = useState(false)
const [error, setError] = useState()
async function handleSend() {
+ if (!selectedToken || !amount || !to) return
+
+ // switch chains first
+ if (chainId !== selectedToken.chainId) {
+ switchChain({ chainId: selectedToken.chainId })
+ }
+
try {
setIsError(false)
setError(undefined)
setIsLoading(true)
- const hash = await send(config, selectedToken, amount, to, chainId)
+ const hash = await send(
+ config,
+ selectedToken,
+ amount,
+ to,
+ selectedToken.chainId
+ )
if (hash) $txHash.set(hash)
} catch (error: unknown) {
const errorMessage = (error as Error).message