Function GetTokens

components/contract/GetTokens.tsx:141–245

()

};

export const GetTokens = () => {
  const [tokens, setTokens] = useAtom(globalTokensAtom);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [checkedRecords, setCheckedRecords] = useAtom(checkedTokensAtom);

  const { address, isConnected, chain } = useAccount();

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      setError('');
      const newTokens = await httpFetchTokens(
        chain?.id as number,
        address as string,
      );
      setTokens((newTokens as any).data.erc20s);
    } catch (error) {
      const message = error instanceof Error ? error.message : String(error);
      setError(`Chain ${chain?.id}: ${message}`);
    }
    setLoading(false);
  }, [address, chain, setTokens]);

  useEffect(() => {
    if (address) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      fetchData();
      setCheckedRecords({});
    }
  }, [address, chain, fetchData, setCheckedRecords]);

  useEffect(() => {
    if (!isConnected) {
      setTokens([]);
      setCheckedRecords({});
    }
  }, [isConnected, setTokens, setCheckedRecords]);

  const checkedCount = Object.values(checkedRecords).filter(
    (r) => r.isChecked,
  ).length;
  const allChecked = tokens.length > 0 && checkedCount === tokens.length;

  const toggleAll = () => {
    if (allChecked) {
      setCheckedRecords({});
    } else {
      setCheckedRecords(
        Object.fromEntries(
          tokens.map((t) => [t.contract_address, { isChecked: true }]),
        ),
      );
    }
  };

  if (loading) {
    return (