From ad22b84349cd36b90a6a35c1f6dc607c9d8c3b6c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 5 Nov 2023 15:31:09 +0000 Subject: [PATCH] token selection interaction fixes --- .../Web3/components/TokenSelect/Token.tsx | 2 +- .../components/TokenSelect/TokenSelect.tsx | 27 +++++++------------ .../Web3/hooks/useFetchTokens/index.ts | 1 + .../tokens => hooks/useFetchTokens}/types.ts | 0 .../hooks/useFetchTokens/useFetchTokens.tsx | 20 ++++---------- src/features/Web3/stores/index.ts | 1 - src/features/Web3/stores/selectedToken.ts | 2 +- src/features/Web3/stores/tokens/index.ts | 2 -- src/features/Web3/stores/tokens/tokens.ts | 13 --------- 9 files changed, 17 insertions(+), 51 deletions(-) rename src/features/Web3/{stores/tokens => hooks/useFetchTokens}/types.ts (100%) delete mode 100644 src/features/Web3/stores/tokens/index.ts delete mode 100644 src/features/Web3/stores/tokens/tokens.ts diff --git a/src/features/Web3/components/TokenSelect/Token.tsx b/src/features/Web3/components/TokenSelect/Token.tsx index 0d3b5773..8e0326bd 100644 --- a/src/features/Web3/components/TokenSelect/Token.tsx +++ b/src/features/Web3/components/TokenSelect/Token.tsx @@ -3,7 +3,7 @@ import * as Select from '@radix-ui/react-select' import { formatCurrency } from '@coingecko/cryptoformat' import './Token.css' import { Icon as Check } from '@images/components/react/Check' -import type { GetToken } from '@features/Web3/stores/tokens' +import type { GetToken } from '@features/Web3/hooks/useFetchTokens' interface SelectItemProps extends HTMLAttributes { token: GetToken | undefined diff --git a/src/features/Web3/components/TokenSelect/TokenSelect.tsx b/src/features/Web3/components/TokenSelect/TokenSelect.tsx index 92fe9101..c99db5ae 100644 --- a/src/features/Web3/components/TokenSelect/TokenSelect.tsx +++ b/src/features/Web3/components/TokenSelect/TokenSelect.tsx @@ -6,19 +6,14 @@ import { Icon as ChevronsDown } from '@images/components/react/ChevronsDown' import { Icon as ChevronsUp } from '@images/components/react/ChevronsUp' import { useFetchTokens } from '@features/Web3/hooks/useFetchTokens' import { useStore } from '@nanostores/react' -import { - $tokens, - $selectedToken, - $setSelectedToken -} from '@features/Web3/stores' +import { $selectedToken, $setSelectedToken } from '@features/Web3/stores' import { Loader } from '@components/Loader' import { useAccount } from 'wagmi' import { useEffect } from 'react' export function TokenSelect() { const { address } = useAccount() - const { isLoading } = useFetchTokens() - const tokens = useStore($tokens) + const { data: tokens, isLoading } = useFetchTokens() const selectedToken = useStore($selectedToken) const items = tokens?.map((token) => ( @@ -31,24 +26,20 @@ export function TokenSelect() { $setSelectedToken(token) } - // reset when no account connected - useEffect(() => { - if (!address && tokens?.length && selectedToken) { - $tokens.set(undefined) - $setSelectedToken(undefined) - } - }, [address]) - // Auto-select native token + // when no selection was made yet useEffect(() => { - if (isLoading || !tokens || selectedToken) return + if (selectedToken?.address || !tokens || !tokens?.length) return + console.log(tokens) handleValueChange('0x0') + console.log('auto-select 0x0') }, [tokens, selectedToken]) - return tokens ? ( + return tokens && address ? ( handleValueChange(value)} disabled={isLoading} > diff --git a/src/features/Web3/hooks/useFetchTokens/index.ts b/src/features/Web3/hooks/useFetchTokens/index.ts index 05dc8477..aba2dd09 100644 --- a/src/features/Web3/hooks/useFetchTokens/index.ts +++ b/src/features/Web3/hooks/useFetchTokens/index.ts @@ -1 +1,2 @@ export * from './useFetchTokens' +export * from './types' diff --git a/src/features/Web3/stores/tokens/types.ts b/src/features/Web3/hooks/useFetchTokens/types.ts similarity index 100% rename from src/features/Web3/stores/tokens/types.ts rename to src/features/Web3/hooks/useFetchTokens/types.ts diff --git a/src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx b/src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx index 8d3cc924..27a888f8 100644 --- a/src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx +++ b/src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx @@ -1,9 +1,7 @@ import { useEffect, useState } from 'react' import useSWR from 'swr' -import type { GetToken } from '@features/Web3/stores/tokens' import { useNetwork, useAccount } from 'wagmi' -import { $tokens } from '@features/Web3/stores' -import { useStore } from '@nanostores/react' +import type { GetToken } from './types' const fetcher = (url: string) => fetch(url).then((res) => res.json()) const apiUrl = import.meta.env.PUBLIC_WEB3_API_URL @@ -14,30 +12,22 @@ const apiUrl = import.meta.env.PUBLIC_WEB3_API_URL export function useFetchTokens() { const { chain } = useNetwork() const { address } = useAccount() - const tokens = useStore($tokens) const [url, setUrl] = useState() const fetchResults = useSWR(url, fetcher) - const { data } = fetchResults // Set url only after we have all data loaded on client, // preventing initial fetch. useEffect(() => { - if (!address || !chain?.id) return + if (!address || !chain?.id) { + setUrl(undefined) + return + } const url = `${apiUrl}/balance?address=${address}&chainId=${chain?.id}` setUrl(url) }, [address, chain?.id]) - // Sync with $tokens store - useEffect(() => { - if (!data) return - - if (data !== tokens) { - $tokens.set(data) - } - }, [data]) - return fetchResults } diff --git a/src/features/Web3/stores/index.ts b/src/features/Web3/stores/index.ts index ace64407..441cc628 100644 --- a/src/features/Web3/stores/index.ts +++ b/src/features/Web3/stores/index.ts @@ -1,3 +1,2 @@ -export * from './tokens' export * from './selectedToken' export * from './send' diff --git a/src/features/Web3/stores/selectedToken.ts b/src/features/Web3/stores/selectedToken.ts index 3ae168ff..64187958 100644 --- a/src/features/Web3/stores/selectedToken.ts +++ b/src/features/Web3/stores/selectedToken.ts @@ -1,6 +1,6 @@ import { action } from 'nanostores' import { persistentAtom } from '@nanostores/persistent' -import type { GetToken } from './tokens' +import type { GetToken } from '../hooks/useFetchTokens' // export const $selectedToken = atom() diff --git a/src/features/Web3/stores/tokens/index.ts b/src/features/Web3/stores/tokens/index.ts deleted file mode 100644 index c3f7e5d9..00000000 --- a/src/features/Web3/stores/tokens/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './tokens' -export * from './types' diff --git a/src/features/Web3/stores/tokens/tokens.ts b/src/features/Web3/stores/tokens/tokens.ts deleted file mode 100644 index 11ef70c4..00000000 --- a/src/features/Web3/stores/tokens/tokens.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { atom } from 'nanostores' -import type { GetToken } from './types' - -export const $tokens = atom() - -// export const $setTokens = action( -// $tokens, -// 'setTokens', -// (store, tokens: GetToken[] | undefined) => { -// store.set(tokens) -// return store.get() -// } -// )