From c35f31af5a3bd180a2cd0e6b45f4e549fa5b058d Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 6 Jun 2024 13:45:02 +0200 Subject: [PATCH 1/6] feat: improve token logos, fallbacks, improve code --- web/src/assets/svgs/icons/eth-token-icon.png | Bin 15763 -> 0 bytes web/src/assets/svgs/icons/tokens/arb.svg | 27 +++++++++ web/src/assets/svgs/icons/tokens/dai.svg | 16 +++++ web/src/assets/svgs/icons/tokens/eth.svg | 9 +++ web/src/assets/svgs/icons/tokens/gno.svg | 19 ++++++ web/src/assets/svgs/icons/tokens/matic.svg | 11 ++++ web/src/assets/svgs/icons/tokens/op.svg | 11 ++++ web/src/assets/svgs/icons/tokens/pnk.svg | 11 ++++ web/src/assets/svgs/icons/tokens/unknown.svg | 4 ++ web/src/assets/svgs/icons/tokens/usdc.svg | 12 ++++ web/src/assets/svgs/icons/tokens/usdt.svg | 11 ++++ web/src/assets/svgs/icons/tokens/weth.svg | 14 +++++ web/src/hooks/useFilteredTokens.ts | 3 +- .../TokenSelector/DropdownButton.tsx | 30 ++++----- .../TokenSelector/TokenItem/TokenIcon.tsx | 57 ++++++++++++++++++ .../TokenSelector/TokenItem/index.tsx | 8 +-- .../TokenAndAmount/TokenSelector/index.tsx | 1 + web/src/utils/fetchNativeToken.ts | 3 - web/src/utils/fetchTokenInfo.ts | 8 +-- 19 files changed, 221 insertions(+), 34 deletions(-) delete mode 100644 web/src/assets/svgs/icons/eth-token-icon.png create mode 100644 web/src/assets/svgs/icons/tokens/arb.svg create mode 100644 web/src/assets/svgs/icons/tokens/dai.svg create mode 100644 web/src/assets/svgs/icons/tokens/eth.svg create mode 100644 web/src/assets/svgs/icons/tokens/gno.svg create mode 100644 web/src/assets/svgs/icons/tokens/matic.svg create mode 100644 web/src/assets/svgs/icons/tokens/op.svg create mode 100644 web/src/assets/svgs/icons/tokens/pnk.svg create mode 100644 web/src/assets/svgs/icons/tokens/unknown.svg create mode 100644 web/src/assets/svgs/icons/tokens/usdc.svg create mode 100644 web/src/assets/svgs/icons/tokens/usdt.svg create mode 100644 web/src/assets/svgs/icons/tokens/weth.svg create mode 100644 web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx diff --git a/web/src/assets/svgs/icons/eth-token-icon.png b/web/src/assets/svgs/icons/eth-token-icon.png deleted file mode 100644 index 5366d8aabfb021ccda48ca8dbd1c861b529481c5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15763 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 P^iTWpHTAqpR{sA7!= + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/tokens/dai.svg b/web/src/assets/svgs/icons/tokens/dai.svg new file mode 100644 index 0000000..33ca83e --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/dai.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/tokens/eth.svg b/web/src/assets/svgs/icons/tokens/eth.svg new file mode 100644 index 0000000..8c1f27f --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/eth.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/src/assets/svgs/icons/tokens/gno.svg b/web/src/assets/svgs/icons/tokens/gno.svg new file mode 100644 index 0000000..a40787b --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/gno.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/tokens/matic.svg b/web/src/assets/svgs/icons/tokens/matic.svg new file mode 100644 index 0000000..17864b0 --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/matic.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/tokens/op.svg b/web/src/assets/svgs/icons/tokens/op.svg new file mode 100644 index 0000000..acfe8fe --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/op.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/tokens/pnk.svg b/web/src/assets/svgs/icons/tokens/pnk.svg new file mode 100644 index 0000000..0e425a0 --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/pnk.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/tokens/unknown.svg b/web/src/assets/svgs/icons/tokens/unknown.svg new file mode 100644 index 0000000..5c9c9e3 --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/unknown.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/src/assets/svgs/icons/tokens/usdc.svg b/web/src/assets/svgs/icons/tokens/usdc.svg new file mode 100644 index 0000000..ecb1394 --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/usdc.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/tokens/usdt.svg b/web/src/assets/svgs/icons/tokens/usdt.svg new file mode 100644 index 0000000..919f760 --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/usdt.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/web/src/assets/svgs/icons/tokens/weth.svg b/web/src/assets/svgs/icons/tokens/weth.svg new file mode 100644 index 0000000..0058639 --- /dev/null +++ b/web/src/assets/svgs/icons/tokens/weth.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/web/src/hooks/useFilteredTokens.ts b/web/src/hooks/useFilteredTokens.ts index a7cf974..bdad3f2 100644 --- a/web/src/hooks/useFilteredTokens.ts +++ b/web/src/hooks/useFilteredTokens.ts @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; import { useTokenMetadata } from "./useTokenMetadata"; import { IToken } from "context/NewTransactionContext"; -import EthTokenIcon from "svgs/icons/eth-token-icon.png"; export const useFilteredTokens = ( searchQuery: string, @@ -27,7 +26,7 @@ export const useFilteredTokens = ( const resultToken = { symbol: tokenMetadata.symbol, address: searchQuery.toLowerCase(), - logo: tokenMetadata.logo || EthTokenIcon, + logo: tokenMetadata.logo, }; const updatedTokens = [...tokens, resultToken]; diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/DropdownButton.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/DropdownButton.tsx index 1b4e654..78002d8 100644 --- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/DropdownButton.tsx +++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/DropdownButton.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import Skeleton from "react-loading-skeleton"; +import TokenIcon from "./TokenItem/TokenIcon"; const Container = styled.div` border: 1px solid ${({ theme }) => theme.stroke}; @@ -26,11 +27,6 @@ const DropdownArrow = styled.span` margin-left: 8px; `; -const TokenLogo = styled.img` - width: 24px; - height: 24px; -`; - const DropdownContent = styled.div` display: flex; align-items: center; @@ -49,16 +45,14 @@ const SymbolSkeleton = styled(Skeleton)` height: 16px; `; -export const DropdownButton = ({ loading, sendingToken, onClick }) => ( - - - {loading ? ( - - ) : ( - sendingToken && - )} - {loading ? : sendingToken?.symbol} - - - -); +export const DropdownButton = ({ loading, sendingToken, onClick }) => { + return ( + + + {loading ? : } + {loading ? : sendingToken?.symbol} + + + + ); +}; diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx new file mode 100644 index 0000000..c1f14ad --- /dev/null +++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import styled from "styled-components"; +import ArbIcon from "tsx:svgs/icons/tokens/arb.svg"; +import DaiIcon from "tsx:svgs/icons/tokens/dai.svg"; +import EthIcon from "tsx:svgs/icons/tokens/eth.svg"; +import GnoIcon from "tsx:svgs/icons/tokens/gno.svg"; +import MaticIcon from "tsx:svgs/icons/tokens/matic.svg"; +import OpIcon from "tsx:svgs/icons/tokens/op.svg"; +import PnkIcon from "tsx:svgs/icons/tokens/pnk.svg"; +import UsdcIcon from "tsx:svgs/icons/tokens/usdc.svg"; +import UsdtIcon from "tsx:svgs/icons/tokens/usdt.svg"; +import WethIcon from "tsx:svgs/icons/tokens/weth.svg"; +import UnknownTokenIcon from "tsx:svgs/icons/tokens/unknown.svg"; + +export const TokenLogoImg = styled.img` + width: 24px; + height: 24px; +`; + +export const StyledUnknownTokenIcon = styled(UnknownTokenIcon)` + width: 24px; + height: 24px; + circle { + fill: ${({ theme }) => theme.stroke}; + } +`; + +const tokenIcons = { + arb: ArbIcon, + dai: DaiIcon, + gno: GnoIcon, + matic: MaticIcon, + op: OpIcon, + pnk: PnkIcon, + usdc: UsdcIcon, + usdt: UsdtIcon, + weth: WethIcon, + eth: EthIcon, +}; + +const getTokenLogo = (tokenSymbol) => { + const symbol = tokenSymbol.toLowerCase(); + return tokenIcons[symbol] || null; +}; + +const TokenIcon = ({ symbol, logo }) => { + const TokenLogoComponent = getTokenLogo(symbol); + if (TokenLogoComponent) { + return ; + } else if (logo) { + return ; + } else { + return ; + } +}; + +export default TokenIcon; diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/index.tsx index 05124bf..c23d6a1 100644 --- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/index.tsx +++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/index.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import Balance from "./Balance"; +import TokenIcon from "./TokenIcon"; const Container = styled.div<{ selected: boolean }>` display: flex; @@ -24,11 +25,6 @@ const LogoAndLabel = styled.div` gap: 8px; `; -const TokenLogo = styled.img` - width: 24px; - height: 24px; -`; - const TokenLabel = styled.span` color: ${({ theme }) => theme.primaryText}; `; @@ -37,7 +33,7 @@ const TokenItem = ({ token, selected, onSelect }) => { return ( onSelect(token)}> - + {token.symbol} diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx index 89b4983..ba5ea06 100644 --- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx +++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx @@ -30,6 +30,7 @@ const TokenSelector: React.FC = () => { useEffect(() => { if (address && chain) { + localStorage.removeItem("tokens"); initializeTokens(address, setTokens, setLoading, chain, alchemyInstance); } }, [address, chain]); diff --git a/web/src/utils/fetchNativeToken.ts b/web/src/utils/fetchNativeToken.ts index fea5078..acb7ca0 100644 --- a/web/src/utils/fetchNativeToken.ts +++ b/web/src/utils/fetchNativeToken.ts @@ -1,9 +1,6 @@ -import EthTokenIcon from "svgs/icons/eth-token-icon.png"; - export const fetchNativeToken = (chain) => { return { symbol: chain?.nativeCurrency?.symbol, address: "native", - logo: EthTokenIcon, }; }; diff --git a/web/src/utils/fetchTokenInfo.ts b/web/src/utils/fetchTokenInfo.ts index 5278485..edb2e01 100644 --- a/web/src/utils/fetchTokenInfo.ts +++ b/web/src/utils/fetchTokenInfo.ts @@ -1,17 +1,15 @@ import { Alchemy } from "alchemy-sdk"; import { IToken } from "context/NewTransactionContext"; -import EthTokenIcon from "svgs/icons/eth-token-icon.png"; export const fetchTokenInfo = async (address: string, alchemyInstance: Alchemy) => { try { const metadata = await alchemyInstance.core.getTokenMetadata(address); return { - symbol: metadata.symbol?.toUpperCase() || "Unknown", - logo: metadata.logo || EthTokenIcon, + symbol: metadata.symbol?.toUpperCase(), + logo: metadata.logo, address, } as IToken; } catch (error) { - console.error("Error fetching token info:", error); - return { symbol: "Unknown", logo: EthTokenIcon }; + return console.error("Error fetching token info:", error); } }; From 36fe6526821a5123a0b6bbdaf4212e26ac044d5c Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 6 Jun 2024 14:15:08 +0200 Subject: [PATCH 2/6] fix: fix payment released asset symbol, refactor --- web/src/components/TransactionCard/index.tsx | 5 +++-- .../pages/MyTransactions/Modal/PaymentReleased/Header.tsx | 6 ++---- web/src/pages/MyTransactions/TransactionDetails/index.tsx | 5 +++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/web/src/components/TransactionCard/index.tsx b/web/src/components/TransactionCard/index.tsx index e11d81b..38901a9 100644 --- a/web/src/components/TransactionCard/index.tsx +++ b/web/src/components/TransactionCard/index.tsx @@ -72,6 +72,7 @@ const TransactionCard: React.FC = ({ const nativeTokenSymbol = useNativeTokenSymbol(); const { tokenMetadata } = useTokenMetadata(token); const erc20TokenSymbol = tokenMetadata?.symbol; + const assetSymbol = token ? erc20TokenSymbol : nativeTokenSymbol; const title = transactionInfo?.title; const navigateAndScrollTop = useNavigateAndScrollTop(); @@ -86,11 +87,11 @@ const TransactionCard: React.FC = ({ {!isUndefined(title) ? {title} : } @@ -107,11 +108,11 @@ const TransactionCard: React.FC = ({ )} diff --git a/web/src/pages/MyTransactions/Modal/PaymentReleased/Header.tsx b/web/src/pages/MyTransactions/Modal/PaymentReleased/Header.tsx index 1a20b54..3136cb4 100644 --- a/web/src/pages/MyTransactions/Modal/PaymentReleased/Header.tsx +++ b/web/src/pages/MyTransactions/Modal/PaymentReleased/Header.tsx @@ -2,7 +2,6 @@ import React from "react"; import styled from "styled-components"; import { formatEther } from "viem"; import { useTransactionDetailsContext } from "context/TransactionDetailsContext"; -import { useNativeTokenSymbol } from "hooks/useNativeTokenSymbol"; const StyledHeader = styled.h1` margin: 0; @@ -11,12 +10,11 @@ const StyledHeader = styled.h1` `; const Header: React.FC = () => { - const { amount, token } = useTransactionDetailsContext(); - const nativeTokenSymbol = useNativeTokenSymbol(); + const { amount, assetSymbol } = useTransactionDetailsContext(); return ( - Full payment released: {formatEther(amount)} {!token ? nativeTokenSymbol : token} + Full payment released: {formatEther(amount)} {assetSymbol} ); }; diff --git a/web/src/pages/MyTransactions/TransactionDetails/index.tsx b/web/src/pages/MyTransactions/TransactionDetails/index.tsx index f718fe5..a61b8ea 100644 --- a/web/src/pages/MyTransactions/TransactionDetails/index.tsx +++ b/web/src/pages/MyTransactions/TransactionDetails/index.tsx @@ -54,12 +54,13 @@ const TransactionDetails: React.FC = () => { } = useTransactionDetailsContext(); const transactionInfo = useFetchIpfsJson(transactionUri); + const assetSymbol = token ? erc20TokenSymbol : nativeTokenSymbol; useEffect(() => { if (transactionDetails?.escrow) { const detailsWithSymbol = { ...transactionDetails.escrow, - erc20TokenSymbol: token ? erc20TokenSymbol : nativeTokenSymbol, + assetSymbol, }; setTransactionDetails(detailsWithSymbol); } @@ -80,7 +81,6 @@ const TransactionDetails: React.FC = () => { transactionCreationTimestamp={timestamp} sendingQuantity={!isUndefined(amount) ? formatEther(amount) : ""} deadline={deadline * 1000} - assetSymbol={!token ? nativeTokenSymbol : erc20TokenSymbol} overrideIsList={false} amount={!isUndefined(amount) ? formatEther(amount) : ""} isPreview={false} @@ -95,6 +95,7 @@ const TransactionDetails: React.FC = () => { disputeRequest, resolvedEvents, arbitrationCost, + assetSymbol, }} /> {status === "NoDispute" && payments?.length === 0 ? : null} From a3750e6cdc46746afcd74db4fd17ad64fbd584b1 Mon Sep 17 00:00:00 2001 From: Marino <102478601+kemuru@users.noreply.github.com> Date: Thu, 6 Jun 2024 17:19:20 +0200 Subject: [PATCH 3/6] update dependencies of useeffect hook update dependencies of useeffect hook Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- .../GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx index ba5ea06..3b954be 100644 --- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx +++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx @@ -29,6 +29,7 @@ const TokenSelector: React.FC = () => { useClickAway(containerRef, () => setIsOpen(false)); useEffect(() => { + }, [address, chain, alchemyInstance, setTokens]); if (address && chain) { localStorage.removeItem("tokens"); initializeTokens(address, setTokens, setLoading, chain, alchemyInstance); From f997082c8578c8cb5d376098d026a5b902c42e19 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 6 Jun 2024 17:20:44 +0200 Subject: [PATCH 4/6] fix: useffect dependencies --- .../GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx index 3b954be..f500b66 100644 --- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx +++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx @@ -29,12 +29,11 @@ const TokenSelector: React.FC = () => { useClickAway(containerRef, () => setIsOpen(false)); useEffect(() => { - }, [address, chain, alchemyInstance, setTokens]); if (address && chain) { localStorage.removeItem("tokens"); initializeTokens(address, setTokens, setLoading, chain, alchemyInstance); } - }, [address, chain]); + }, [address, chain, alchemyInstance, setTokens]); useEffect(() => { if (tokens?.length > 0) { From fa0bac8abbbd35140febb920e6cc83e602e4bc89 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 6 Jun 2024 17:34:50 +0200 Subject: [PATCH 5/6] fix: update useffect dependencies --- web/src/pages/MyTransactions/TransactionDetails/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/pages/MyTransactions/TransactionDetails/index.tsx b/web/src/pages/MyTransactions/TransactionDetails/index.tsx index a61b8ea..537feba 100644 --- a/web/src/pages/MyTransactions/TransactionDetails/index.tsx +++ b/web/src/pages/MyTransactions/TransactionDetails/index.tsx @@ -64,7 +64,7 @@ const TransactionDetails: React.FC = () => { }; setTransactionDetails(detailsWithSymbol); } - }, [transactionDetails, setTransactionDetails, erc20TokenSymbol, nativeTokenSymbol, token]); + }, [transactionDetails, setTransactionDetails, assetSymbol]); return ( From c2eb22b5471005564906c7611470c75a73a858bf Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 6 Jun 2024 17:52:38 +0200 Subject: [PATCH 6/6] fix: memoize alchemyinstance to stop infinite rerender --- .../TokenAndAmount/TokenSelector/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx index f500b66..8c368c2 100644 --- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx +++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from "react"; +import React, { useState, useEffect, useRef, useMemo } from "react"; import styled from "styled-components"; import { useClickAway } from "react-use"; import { Alchemy } from "alchemy-sdk"; @@ -25,7 +25,9 @@ const TokenSelector: React.FC = () => { const [isOpen, setIsOpen] = useState(false); const containerRef = useRef(null); const [loading, setLoading] = useState(true); - const alchemyInstance = new Alchemy(alchemyConfig(chain?.id)); + + const alchemyInstance = useMemo(() => new Alchemy(alchemyConfig(chain?.id)), [chain?.id]); + useClickAway(containerRef, () => setIsOpen(false)); useEffect(() => { @@ -33,7 +35,7 @@ const TokenSelector: React.FC = () => { localStorage.removeItem("tokens"); initializeTokens(address, setTokens, setLoading, chain, alchemyInstance); } - }, [address, chain, alchemyInstance, setTokens]); + }, [address, chain, alchemyInstance]); useEffect(() => { if (tokens?.length > 0) {