diff --git a/web/src/context/NewTransactionContext.tsx b/web/src/context/NewTransactionContext.tsx index 41dd623..50a7579 100644 --- a/web/src/context/NewTransactionContext.tsx +++ b/web/src/context/NewTransactionContext.tsx @@ -23,8 +23,8 @@ interface INewTransactionContext { setSellerAddress: (address: string) => void; sendingQuantity: string; setSendingQuantity: (quantity: string) => void; - sendingToken: string; - setSendingToken: (token: string) => void; + sendingToken: { address: string; symbol: string }; + setSendingToken: (token: { address: string; symbol: string }) => void; buyerAddress: string; setBuyerAddress: (address: string) => void; deadline: string; @@ -61,7 +61,7 @@ const NewTransactionContext = createContext({ setSellerAddress: () => {}, sendingQuantity: "", setSendingQuantity: () => {}, - sendingToken: "", + sendingToken: { address: "", symbol: "" }, setSendingToken: () => {}, buyerAddress: "", setBuyerAddress: () => {}, @@ -93,7 +93,9 @@ export const NewTransactionProvider: React.FC<{ children: React.ReactNode }> = ( const [receivingToken, setReceivingToken] = useState(localStorage.getItem("receivingToken") || ""); const [sellerAddress, setSellerAddress] = useState(localStorage.getItem("sellerAddress") || ""); const [sendingQuantity, setSendingQuantity] = useState(localStorage.getItem("sendingQuantity") || ""); - const [sendingToken, setSendingToken] = useState(localStorage.getItem("sendingToken") || ""); + const [sendingToken, setSendingToken] = useState<{ address: string; symbol: string }>( + JSON.parse(localStorage.getItem("sendingToken")) || { address: "", symbol: "" } + ); const [buyerAddress, setBuyerAddress] = useState(localStorage.getItem("buyerAddress") || ""); const [isRecipientAddressResolved, setIsRecipientAddressResolved] = useState(false); const [deadline, setDeadline] = useState(localStorage.getItem("deadline") || ""); @@ -111,7 +113,7 @@ export const NewTransactionProvider: React.FC<{ children: React.ReactNode }> = ( setReceivingToken(""); setSellerAddress(""); setSendingQuantity(""); - setSendingToken(""); + setSendingToken({ address: "", symbol: "" }); setBuyerAddress(""); setDeadline(""); setNotificationEmail(""); @@ -128,7 +130,7 @@ export const NewTransactionProvider: React.FC<{ children: React.ReactNode }> = ( localStorage.setItem("receivingToken", receivingToken); localStorage.setItem("buyerAddress", buyerAddress); localStorage.setItem("sendingQuantity", sendingQuantity); - localStorage.setItem("sendingToken", sendingToken); + localStorage.setItem("sendingToken", JSON.stringify(sendingToken)); localStorage.setItem("sellerAddress", sellerAddress); localStorage.setItem("deadline", deadline); localStorage.setItem("notificationEmail", notificationEmail); diff --git a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx index c24c025..db60d0e 100644 --- a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx +++ b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx @@ -50,7 +50,7 @@ const DepositPaymentButton: React.FC = () => { const ensResult = useEnsAddress({ name: sellerAddress, chainId: 1 }); const deadlineTimestamp = new Date(deadline).getTime(); const timeoutPayment = (deadlineTimestamp - currentTime) / 1000; - const isNativeTransaction = sendingToken === "native"; + const isNativeTransaction = sendingToken?.address === "native"; const transactionValue = isNativeTransaction ? parseEther(sendingQuantity) : parseUnits(sendingQuantity, 18); useEffect(() => { @@ -64,7 +64,7 @@ const DepositPaymentButton: React.FC = () => { const { data: allowance } = useContractRead({ enabled: !isNativeTransaction, - address: sendingToken, + address: sendingToken?.address, abi: erc20ABI, functionName: "allowance", args: [address, escrowUniversalAddress?.[chain?.id]], @@ -105,7 +105,7 @@ const DepositPaymentButton: React.FC = () => { buyer: address, seller: sellerAddress, amount: sendingQuantity, - token: isNativeTransaction ? "native" : sendingToken, + token: isNativeTransaction ? "native" : sendingToken?.address, timeoutPayment: timeoutPayment, transactionUri: transactionUri, }, @@ -132,7 +132,7 @@ const DepositPaymentButton: React.FC = () => { ethAddressPattern.test(finalRecipientAddress), args: [ transactionValue, - sendingToken, + sendingToken?.address, BigInt(Math.floor(timeoutPayment)), transactionUri, finalRecipientAddress, @@ -147,7 +147,7 @@ const DepositPaymentButton: React.FC = () => { const { config: approveConfig } = usePrepareContractWrite({ enabled: !isNativeTransaction, - address: sendingToken, + address: sendingToken?.address, abi: erc20ABI, functionName: "approve", args: [escrowUniversalAddress?.[chain?.id], transactionValue], diff --git a/web/src/pages/NewTransaction/Preview/index.tsx b/web/src/pages/NewTransaction/Preview/index.tsx index a468ac7..891e45a 100644 --- a/web/src/pages/NewTransaction/Preview/index.tsx +++ b/web/src/pages/NewTransaction/Preview/index.tsx @@ -6,7 +6,6 @@ import PreviewCard from "components/PreviewCard"; import Header from "./Header"; import NavigationButtons from "../NavigationButtons"; import { useNativeTokenSymbol } from "hooks/useNativeTokenSymbol"; -import { useERC20TokenSymbol } from "hooks/useERC20TokenSymbol"; const Container = styled.div` display: flex; @@ -26,9 +25,8 @@ const Preview: React.FC = () => { deadline, extraDescriptionUri, } = useNewTransactionContext(); - const isNativeTransaction = sendingToken === "native"; + const isNativeTransaction = sendingToken.address === "native"; const nativeTokenSymbol = useNativeTokenSymbol(); - const { erc20TokenSymbol } = useERC20TokenSymbol(sendingToken); const { address } = useAccount(); @@ -37,7 +35,7 @@ const Preview: React.FC = () => {
= ({ setTokens, setActiveT } setTokens((prevTokens) => { - const newTokens = [...prevTokens, { label: info.symbol, value: customToken, logo: info.logo }]; + const newTokens = [...prevTokens, { symbol: info.symbol, address: customToken, logo: info.logo }]; localStorage.setItem("tokens", JSON.stringify(newTokens)); return newTokens; }); diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokensTab.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokensTab.tsx index 072310c..882f02a 100644 --- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokensTab.tsx +++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokensTab.tsx @@ -5,8 +5,8 @@ import { Item, TokenLabel, TokenLogo } from "../TokenSelector"; interface ITokensTab { searchQuery: string; setSearchQuery: (value: string) => void; - filteredTokens: { label: string; value: string; logo: string }[]; - handleSelectToken: (value: string) => void; + filteredTokens: { symbol: string; address: string; logo: string }[]; + handleSelectToken: (token: { symbol: string; address: string; logo: string }) => void; } const TokensTab: React.FC = ({ searchQuery, setSearchQuery, filteredTokens, handleSelectToken }) => { @@ -18,9 +18,9 @@ const TokensTab: React.FC = ({ searchQuery, setSearchQuery, filtered
{filteredTokens.map((token) => ( - handleSelectToken(token.value)}> - - {token.label} + handleSelectToken(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 e646ac2..0f8a78b 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 @@ -102,19 +102,19 @@ const TokenSelector: React.FC = () => { useEffect(() => { if (tokens.length > 0) { - const nativeToken = tokens.find((token) => token.value === "native"); - setSendingToken(localStorage.getItem("selectedToken") || nativeToken.value); + const nativeToken = tokens.find((token) => token.address === "native"); + setSendingToken(JSON.parse(localStorage.getItem("selectedToken")) || nativeToken); } }, [tokens]); - const handleSelectToken = (value: string) => { - setSendingToken(value); - localStorage.setItem("selectedToken", value); + const handleSelectToken = (token) => { + setSendingToken(token); + localStorage.setItem("selectedToken", JSON.stringify(token)); setIsOpen(false); }; const filteredTokens = - tokens && tokens.filter((token) => token?.label?.toLowerCase().includes(searchQuery?.toLowerCase())); + tokens && tokens.filter((token) => token?.symbol?.toLowerCase().includes(searchQuery?.toLowerCase())); return ( @@ -124,20 +124,9 @@ const TokenSelector: React.FC = () => { {loading ? ( ) : ( - sendingToken && ( - token.value === sendingToken)?.logo} - alt={`${sendingToken} logo`} - /> - ) - )} - {loading ? ( - - ) : sendingToken ? ( - tokens.find((token) => token.value === sendingToken)?.label - ) : ( - "Select a token" + sendingToken && )} + {loading ? : sendingToken ? sendingToken.symbol : "Select a token"} diff --git a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx index d6130d0..c95f9f0 100644 --- a/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx +++ b/web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx @@ -25,7 +25,7 @@ const TokenAndAmount: React.FC = ({ quantity, setQuantity }) => const { sendingToken, setHasSufficientNativeBalance } = useNewTransactionContext(); const { data: balanceData } = useBalance({ address: address, - token: sendingToken === "native" ? undefined : sendingToken, + token: sendingToken?.address === "native" ? undefined : sendingToken?.address, }); const [error, setError] = useState(""); diff --git a/web/src/utils/fetchNativeToken.ts b/web/src/utils/fetchNativeToken.ts index c6a2900..379bc46 100644 --- a/web/src/utils/fetchNativeToken.ts +++ b/web/src/utils/fetchNativeToken.ts @@ -1,7 +1,7 @@ export const fetchNativeToken = (chain) => { return { - label: chain?.nativeCurrency?.symbol || "Native Token", - value: "native", + symbol: chain?.nativeCurrency?.symbol || "Native Token", + address: "native", logo: "https://assets.coingecko.com/coins/images/279/thumb/ethereum.png", }; }; diff --git a/web/src/utils/initializeTokens.ts b/web/src/utils/initializeTokens.ts index a114fdf..677c536 100644 --- a/web/src/utils/initializeTokens.ts +++ b/web/src/utils/initializeTokens.ts @@ -10,8 +10,8 @@ export const initializeTokens = async (address: string, setTokens, setLoading, c const tokenList = balances.tokenBalances.map(async (token) => { const tokenInfo = await fetchTokenInfo(token.contractAddress, alchemyInstance); return { - label: tokenInfo.symbol, - value: token.contractAddress, + symbol: tokenInfo.symbol, + address: token.contractAddress, logo: tokenInfo.logo, }; }); @@ -19,7 +19,7 @@ export const initializeTokens = async (address: string, setTokens, setLoading, c const customTokens = JSON.parse(localStorage.getItem("tokens")) || []; const combinedTokens = [ ...allTokens, - ...customTokens.filter((ct) => !allTokens.some((token) => token.value === ct.value)), + ...customTokens.filter((customToken) => !allTokens.some((token) => token.address === customToken.address)), ]; setTokens(combinedTokens); localStorage.setItem("tokens", JSON.stringify(combinedTokens));