From 406f34b0e43a90aa2ef2147dff1f651eeba246e6 Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Thu, 19 Sep 2024 14:46:37 -0300 Subject: [PATCH 01/45] feat: add h-full into swap-section --- components/04-templates/SwapSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/04-templates/SwapSection.tsx b/components/04-templates/SwapSection.tsx index 206d838b..775fe2ef 100644 --- a/components/04-templates/SwapSection.tsx +++ b/components/04-templates/SwapSection.tsx @@ -7,7 +7,7 @@ import { export const SwapSection = () => { return ( -
+
From ebc5733060f48324702ea83d3580a72c45ec7163 Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Thu, 19 Sep 2024 15:52:31 -0300 Subject: [PATCH 02/45] fix: remove ens searched address --- components/01-atoms/ENSAvatar.tsx | 194 +++++++++--------- components/01-atoms/SearchBar.tsx | 34 +-- components/01-atoms/index.ts | 2 +- .../02-molecules/EnsNameAndAddressWallet.tsx | 16 +- components/02-molecules/OfferSummary.tsx | 46 ++--- components/02-molecules/TheHeader.tsx | 11 +- components/02-molecules/UserOfferInfo.tsx | 53 ++--- lib/client/hooks/useENSData.tsx | 104 +++++----- 8 files changed, 233 insertions(+), 227 deletions(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index d600e832..b8022b21 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -1,103 +1,103 @@ -/* eslint-disable react-hooks/exhaustive-deps */ -import { LoadingIndicator, PersonIcon } from "@/components/01-atoms"; -import { - ENSAvatarQueryStatus, - useEnsData, -} from "@/lib/client/hooks/useENSData"; -import { EthereumAddress } from "@/lib/shared/types"; -import cc from "classcat"; -import { useEffect, useState } from "react"; +// /* eslint-disable react-hooks/exhaustive-deps */ +// import { LoadingIndicator, PersonIcon } from "@/components/01-atoms"; +// import { +// ENSAvatarQueryStatus, +// useEnsData, +// } from "@/lib/client/hooks/useENSData"; +// import { EthereumAddress } from "@/lib/shared/types"; +// import cc from "classcat"; +// import { useEffect, useState } from "react"; -export enum ENSAvatarSize { - SMALL = "small", - MEDIUM = "medium", -} +// export enum ENSAvatarSize { +// SMALL = "small", +// MEDIUM = "medium", +// } -const ENSAvatarClassName = { - [ENSAvatarSize.SMALL]: "ens-avatar-small", - [ENSAvatarSize.MEDIUM]: "ens-avatar-medium", -}; +// const ENSAvatarClassName = { +// [ENSAvatarSize.SMALL]: "ens-avatar-small", +// [ENSAvatarSize.MEDIUM]: "ens-avatar-medium", +// }; -interface ENSAvatarProps { - avatarENSAddress: EthereumAddress; - size?: ENSAvatarSize; -} +// interface ENSAvatarProps { +// avatarENSAddress: EthereumAddress; +// size?: ENSAvatarSize; +// } -export const ENSAvatar = ({ - avatarENSAddress, - size = ENSAvatarSize.MEDIUM, -}: ENSAvatarProps) => { - const { avatarQueryStatus, avatarSrc } = useEnsData({ - ensAddress: avatarENSAddress, - }); +// export const ENSAvatar = ({ +// avatarENSAddress, +// size = ENSAvatarSize.MEDIUM, +// }: ENSAvatarProps) => { +// const { avatarQueryStatus, avatarSrc } = useEnsData({ +// ensAddress: avatarENSAddress, +// }); - const [imageSrc, setImageSrc] = useState(null); - const [failedLoadingImage, setFailedLoadingImage] = useState(false); - useEffect(() => { - if (avatarQueryStatus === ENSAvatarQueryStatus.SUCCESS) { - if (avatarSrc) { - fetch(avatarSrc) - .then((response) => { - if (response.ok) { - setImageSrc(avatarSrc); - setFailedLoadingImage(false); - } else { - setImageSrc(null); - setFailedLoadingImage(true); - } - }) - .catch(() => { - setImageSrc(null); - setFailedLoadingImage(true); - }); - } else { - setImageSrc(null); - setFailedLoadingImage(true); - } - } - }, [avatarQueryStatus]); +// const [imageSrc, setImageSrc] = useState(null); +// const [failedLoadingImage, setFailedLoadingImage] = useState(false); +// useEffect(() => { +// if (avatarQueryStatus === ENSAvatarQueryStatus.SUCCESS) { +// if (avatarSrc) { +// fetch(avatarSrc) +// .then((response) => { +// if (response.ok) { +// setImageSrc(avatarSrc); +// setFailedLoadingImage(false); +// } else { +// setImageSrc(null); +// setFailedLoadingImage(true); +// } +// }) +// .catch(() => { +// setImageSrc(null); +// setFailedLoadingImage(true); +// }); +// } else { +// setImageSrc(null); +// setFailedLoadingImage(true); +// } +// } +// }, [avatarQueryStatus]); - return ( -
- {avatarQueryStatus === ENSAvatarQueryStatus.LOADING ? ( -
- -
- ) : avatarQueryStatus === ENSAvatarQueryStatus.ERROR || - failedLoadingImage ? ( -
-
- -
-
- ) : imageSrc ? ( - {`ENS - ) : null} -
- ); -}; +// return ( +//
+// {avatarQueryStatus === ENSAvatarQueryStatus.LOADING ? ( +//
+// +//
+// ) : avatarQueryStatus === ENSAvatarQueryStatus.ERROR || +// failedLoadingImage ? ( +//
+//
+// +//
+//
+// ) : imageSrc ? ( +// {`ENS +// ) : null} +//
+// ); +// }; diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index f842edff..71b0cde1 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -5,11 +5,11 @@ import { ForWhom } from "../03-organisms"; import { MagnifyingGlassIcon } from "@/components/01-atoms"; import { EthereumAddress } from "@/lib/shared/types"; import { ADDRESS_ZERO } from "@/lib/client/constants"; -import { normalizeENSName } from "@/lib/client/blockchain-utils"; +// import { normalizeENSName } from "@/lib/client/blockchain-utils"; import { SwapContext } from "@/lib/client/contexts"; import { useContext, useEffect } from "react"; -import { ENS } from "web3-eth-ens"; -import Web3 from "web3"; +// import { ENS } from "web3-eth-ens"; +// import Web3 from "web3"; import toast from "react-hot-toast"; export const SearchBar = () => { @@ -18,10 +18,10 @@ export const SearchBar = () => { "Cannot get the ENS primary name`s address without an Alchemy API Key", ); } - const provider = new Web3.providers.HttpProvider( - process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP, - ); - const ens = new ENS(undefined, provider); + // const provider = new Web3.providers.HttpProvider( + // process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP, + // ); + // const ens = new ENS(undefined, provider); const { lastWalletConnected, @@ -75,19 +75,19 @@ export const SearchBar = () => { const getUserAddress = async () => { if (lastWalletConnected && inputAddress.length > 2) { - const _inputAddress = inputAddress; - const formattedAddress = normalizeENSName(inputAddress); + // const _inputAddress = inputAddress; + // const formattedAddress = normalizeENSName(inputAddress); try { - const address: unknown = await ens.getOwner(formattedAddress); - if (typeof address !== "string") { - toast.error( - "Wrong type of address returned by provider. Please contact the team", - ); - return; - } + // const address: unknown = await ens.getOwner(formattedAddress); + // if (typeof address !== "string") { + // toast.error( + // "Wrong type of address returned by provider. Please contact the team", + // ); + // return; + // } validateAddressToSwap( - address === ADDRESS_ZERO ? _inputAddress : address, + inputAddress !== ADDRESS_ZERO ? inputAddress : ADDRESS_ZERO, ); } catch (error) { toast.error("Invalid Ethereum Address"); diff --git a/components/01-atoms/index.ts b/components/01-atoms/index.ts index fe1f62e7..e1c382fb 100644 --- a/components/01-atoms/index.ts +++ b/components/01-atoms/index.ts @@ -3,7 +3,7 @@ export * from "./ApproveTokenCards"; export * from "./BlockExplorerExternalLinkButton"; export * from "./ConnectWallet"; export * from "./DisconnectWallet"; -export * from "./ENSAvatar"; +// export * from "./ENSAvatar"; export * from "./LoadingIndicator"; export * from "./NetworkDropdown"; export * from "./MobileNotSupported"; diff --git a/components/02-molecules/EnsNameAndAddressWallet.tsx b/components/02-molecules/EnsNameAndAddressWallet.tsx index 6c4190db..19d1ee3a 100644 --- a/components/02-molecules/EnsNameAndAddressWallet.tsx +++ b/components/02-molecules/EnsNameAndAddressWallet.tsx @@ -1,17 +1,17 @@ import { CopyAdressButton } from "@/components/02-molecules"; import { BlockExplorerExternalLinkButton, - ENSAvatar, + // ENSAvatar, } from "@/components/01-atoms"; import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; -import { useEnsData } from "@/lib/client/hooks/useENSData"; +// import { useEnsData } from "@/lib/client/hooks/useENSData"; export const EnsNameAndAddressWallet = () => { const { authenticatedUserAddress } = useAuthenticatedUser(); - const { primaryName } = useEnsData({ - ensAddress: authenticatedUserAddress, - }); + // const { primaryName } = useEnsData({ + // ensAddress: authenticatedUserAddress, + // }); if (!authenticatedUserAddress) return null; @@ -21,17 +21,17 @@ export const EnsNameAndAddressWallet = () => {
{authenticatedUserAddress && ( <> - + {/* */}
- {primaryName && ( + {/* {primaryName && ( <>

{`${primaryName}`}

|

- )} + )} */} { @@ -24,12 +24,12 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => { ? authenticatedUserTokensList : searchedUserTokensList; - const { primaryName: searchedENSName } = useEnsData({ - ensAddress: validatedAddressToSwap, - }); - const { primaryName: authenticatedUserENSName } = useEnsData({ - ensAddress: authenticatedUserAddress, - }); + // const { primaryName: searchedENSName } = useEnsData({ + // ensAddress: validatedAddressToSwap, + // }); + // const { primaryName: authenticatedUserENSName } = useEnsData({ + // ensAddress: authenticatedUserAddress, + // }); return (
@@ -37,7 +37,7 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => {
- {variant === ForWhom.Their && validatedAddressToSwap ? ( + {/* {variant === ForWhom.Their && validatedAddressToSwap ? ( { avatarENSAddress={authenticatedUserAddress} size={ENSAvatarSize.SMALL} /> - ) : ( -
- -
- )} + ) : ( */} +
+ +
+ {/* )} */}

{variant === ForWhom.Their && validatedAddressToSwap ? `${ - searchedENSName - ? `${searchedENSName} offers` - : validatedAddressToSwap + // searchedENSName + // ? `${searchedENSName} offers` + validatedAddressToSwap ? `${ validatedAddressToSwap.address === ADDRESS_ZERO ? "Any user offers" @@ -75,9 +75,9 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => { ? "They offer" : variant === ForWhom.Yours && authenticatedUserAddress ? `${ - authenticatedUserENSName - ? `${authenticatedUserENSName} offers` - : authenticatedUserAddress + // authenticatedUserENSName + // ? `${authenticatedUserENSName} offers` + authenticatedUserAddress ? `${authenticatedUserAddress.getEllipsedAddress()} offers` : "Connect your wallet" }` diff --git a/components/02-molecules/TheHeader.tsx b/components/02-molecules/TheHeader.tsx index 14cee868..48a8e779 100644 --- a/components/02-molecules/TheHeader.tsx +++ b/components/02-molecules/TheHeader.tsx @@ -2,10 +2,11 @@ import { useScreenSize } from "@/lib/client/hooks/useScreenSize"; import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; import { ConnectWallet, - ENSAvatar, + // ENSAvatar, MoonIcon, NetworkDropdown, NetworkVariantPosition, + PersonIcon, SunIcon, SwaplaceIcon, SwappingIcons, @@ -93,9 +94,13 @@ export const TheHeader = () => { ) : ( diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index 0322cd8a..44ddacdc 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -1,8 +1,8 @@ -import { ENSAvatar, ENSAvatarSize } from "@/components/01-atoms"; +// import { ENSAvatar, ENSAvatarSize } from "@/components/01-atoms"; import { ADDRESS_ZERO } from "@/lib/client/constants"; import { SwapContext } from "@/lib/client/contexts"; import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; -import { useEnsData } from "@/lib/client/hooks/useENSData"; +// import { useEnsData } from "@/lib/client/hooks/useENSData"; import { PopulatedSwapOfferCard } from "@/lib/client/offers-utils"; import { SwapNativeEther } from "@/lib/client/swap-utils"; import { isInRange } from "@/lib/client/utils"; @@ -36,9 +36,9 @@ export const UserOfferInfo = ({ nativeEther, swap, }: UserOfferInfoProps) => { - const { primaryName } = useEnsData({ - ensAddress: address, - }); + // const { primaryName } = useEnsData({ + // ensAddress: address, + // }); const { etherValue, etherRecipient } = useContext(SwapContext); const [isMounted, setIsMounted] = useState(false); const { chain } = useNetwork(); @@ -64,15 +64,16 @@ export const UserOfferInfo = ({

- {address && ( + {/* {address && ( - )} + )} */}
- {primaryName ?

{primaryName}

:

{displayAddress}

} + {/* {primaryName ?

{primaryName}

:

{displayAddress}

} */} +

{displayAddress}

@@ -82,19 +83,19 @@ export const UserOfferInfo = ({
- {address && ( + {/* {address && ( - )} + )} */}
- {primaryName ? ( + {/* {primaryName ? (

{primaryName} gets

- ) : ( -

{displayAddress} gets

- )} + ) : ( */} +

{displayAddress} gets

+ {/* )} */}
{address?.address !== authenticatedUserAddress?.address && @@ -128,19 +129,19 @@ export const UserOfferInfo = ({
- {address && ( + {/* {address && ( - )} + )} */}
- {primaryName ? ( + {/* {primaryName ? (

{primaryName} gets

- ) : ( -

{displayAddress} gets

- )} + ) : ( */} +

{displayAddress} gets

+ {/* )} */}
{nativeEther && @@ -176,19 +177,19 @@ export const UserOfferInfo = ({
- {address && ( + {/* {address && ( - )} + )} */}
- {primaryName ? ( + {/* {primaryName ? (

{primaryName} gets

- ) : ( -

{displayAddress} gets

- )} + ) : ( */} +

{displayAddress} gets

+ {/* )} */}
{address?.address !== ADDRESS_ZERO && diff --git a/lib/client/hooks/useENSData.tsx b/lib/client/hooks/useENSData.tsx index e8429fbc..e3b1d045 100644 --- a/lib/client/hooks/useENSData.tsx +++ b/lib/client/hooks/useENSData.tsx @@ -1,58 +1,58 @@ -import { EthereumAddress } from "@/lib/shared/types"; -import { useEffect, useState } from "react"; +// import { EthereumAddress } from "@/lib/shared/types"; +// import { useEffect, useState } from "react"; -export enum ENSAvatarQueryStatus { - LOADING, - SUCCESS, - ERROR, -} +// export enum ENSAvatarQueryStatus { +// LOADING, +// SUCCESS, +// ERROR, +// } -interface Props { - ensAddress: EthereumAddress | null; -} +// interface Props { +// ensAddress: EthereumAddress | null; +// } -export const useEnsData = ({ ensAddress }: Props) => { - const [primaryName, setPrimaryName] = useState( - undefined, - ); - const [avatarQueryStatus, setAvatarQueryStatus] = - useState(ENSAvatarQueryStatus.LOADING); +// export const useEnsData = ({ ensAddress }: Props) => { +// const [primaryName, setPrimaryName] = useState( +// undefined, +// ); +// const [avatarQueryStatus, setAvatarQueryStatus] = +// useState(ENSAvatarQueryStatus.LOADING); - useEffect(() => { - if (ensAddress) { - setAvatarQueryStatus(ENSAvatarQueryStatus.LOADING); - console.log("ensAddress", ensAddress); +// useEffect(() => { +// if (ensAddress) { +// setAvatarQueryStatus(ENSAvatarQueryStatus.LOADING); +// console.log("ensAddress", ensAddress); - fetch(`/api/ens?address=${ensAddress}`) - .then((response) => { - if (!response.ok) { - throw new Error("Network response was not ok"); - } - return response.json(); - }) - .then((data) => { - if (data && data.ens) { - setPrimaryName(data.ens_primary); - setAvatarQueryStatus(ENSAvatarQueryStatus.SUCCESS); - } else { - setAvatarQueryStatus(ENSAvatarQueryStatus.ERROR); - setPrimaryName(null); - } - }) - .catch(() => { - setAvatarQueryStatus(ENSAvatarQueryStatus.ERROR); - setPrimaryName(null); - }); - } else { - setPrimaryName(null); - } - }, [ensAddress]); +// fetch(`/api/ens?address=${ensAddress}`) +// .then((response) => { +// if (!response.ok) { +// throw new Error("Network response was not ok"); +// } +// return response.json(); +// }) +// .then((data) => { +// if (data && data.ens) { +// setPrimaryName(data.ens_primary); +// setAvatarQueryStatus(ENSAvatarQueryStatus.SUCCESS); +// } else { +// setAvatarQueryStatus(ENSAvatarQueryStatus.ERROR); +// setPrimaryName(null); +// } +// }) +// .catch(() => { +// setAvatarQueryStatus(ENSAvatarQueryStatus.ERROR); +// setPrimaryName(null); +// }); +// } else { +// setPrimaryName(null); +// } +// }, [ensAddress]); - return { - primaryName, - avatarQueryStatus: avatarQueryStatus, - avatarSrc: primaryName - ? `https://metadata.ens.domains/mainnet/avatar/${primaryName}` - : null, - }; -}; +// return { +// primaryName, +// avatarQueryStatus: avatarQueryStatus, +// avatarSrc: primaryName +// ? `https://metadata.ens.domains/mainnet/avatar/${primaryName}` +// : null, +// }; +// }; From 73162cac52aa892c1e36199a618bd4e84e246624 Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Thu, 19 Sep 2024 17:43:40 -0300 Subject: [PATCH 03/45] fix: commented sections and add documentation about ens-name-address --- components/01-atoms/ENSAvatar.tsx | 216 ++++++++++-------- components/01-atoms/SearchBar.tsx | 49 ++-- .../02-molecules/EnsNameAndAddressWallet.tsx | 28 ++- components/02-molecules/OfferSummary.tsx | 38 ++- components/02-molecules/TheHeader.tsx | 1 + components/02-molecules/UserOfferInfo.tsx | 36 ++- components/04-templates/SwapSection.tsx | 2 +- lib/client/hooks/useENSData.tsx | 125 +++++----- 8 files changed, 315 insertions(+), 180 deletions(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index b8022b21..bfa19a1e 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -1,103 +1,125 @@ -// /* eslint-disable react-hooks/exhaustive-deps */ -// import { LoadingIndicator, PersonIcon } from "@/components/01-atoms"; -// import { -// ENSAvatarQueryStatus, -// useEnsData, -// } from "@/lib/client/hooks/useENSData"; -// import { EthereumAddress } from "@/lib/shared/types"; -// import cc from "classcat"; -// import { useEffect, useState } from "react"; +/** + * @deprecated This component is deprecated because the searched ENS address + * sometimes returns incorrect results, which negatively impacts the user flow + * of the application. + * + * The `ENSAvatar` component is responsible for displaying an Ethereum Name Service (ENS) + * avatar based on the provided ENS address. It supports two sizes: small and medium. + * + * The component uses the `useEnsData` hook to fetch the avatar data. Depending on the + * status of the query, it either shows a loading indicator, an error icon, or the + * fetched avatar image. + * + * @component + * @param {EthereumAddress} avatarENSAddress - The ENS address to fetch the avatar for. + * @param {ENSAvatarSize} [size=ENSAvatarSize.MEDIUM] - The size of the avatar to display. + * + * @returns {JSX.Element} The rendered ENS avatar component. + */ +/* eslint-disable react-hooks/exhaustive-deps */ -// export enum ENSAvatarSize { -// SMALL = "small", -// MEDIUM = "medium", -// } +/** +import { LoadingIndicator, PersonIcon } from "@/components/01-atoms"; +import { + ENSAvatarQueryStatus, + useEnsData, +} from "@/lib/client/hooks/useENSData"; +import { EthereumAddress } from "@/lib/shared/types"; +import cc from "classcat"; +import { useEffect, useState } from "react"; -// const ENSAvatarClassName = { -// [ENSAvatarSize.SMALL]: "ens-avatar-small", -// [ENSAvatarSize.MEDIUM]: "ens-avatar-medium", -// }; +export enum ENSAvatarSize { + SMALL = "small", + MEDIUM = "medium", +} -// interface ENSAvatarProps { -// avatarENSAddress: EthereumAddress; -// size?: ENSAvatarSize; -// } +const ENSAvatarClassName = { + [ENSAvatarSize.SMALL]: "ens-avatar-small", + [ENSAvatarSize.MEDIUM]: "ens-avatar-medium", +}; -// export const ENSAvatar = ({ -// avatarENSAddress, -// size = ENSAvatarSize.MEDIUM, -// }: ENSAvatarProps) => { -// const { avatarQueryStatus, avatarSrc } = useEnsData({ -// ensAddress: avatarENSAddress, -// }); +interface ENSAvatarProps { + avatarENSAddress: EthereumAddress; + size?: ENSAvatarSize; +} -// const [imageSrc, setImageSrc] = useState(null); -// const [failedLoadingImage, setFailedLoadingImage] = useState(false); -// useEffect(() => { -// if (avatarQueryStatus === ENSAvatarQueryStatus.SUCCESS) { -// if (avatarSrc) { -// fetch(avatarSrc) -// .then((response) => { -// if (response.ok) { -// setImageSrc(avatarSrc); -// setFailedLoadingImage(false); -// } else { -// setImageSrc(null); -// setFailedLoadingImage(true); -// } -// }) -// .catch(() => { -// setImageSrc(null); -// setFailedLoadingImage(true); -// }); -// } else { -// setImageSrc(null); -// setFailedLoadingImage(true); -// } -// } -// }, [avatarQueryStatus]); +export const ENSAvatar = ({ + avatarENSAddress, + size = ENSAvatarSize.MEDIUM, +}: ENSAvatarProps) => { + const { avatarQueryStatus, avatarSrc } = useEnsData({ + ensAddress: avatarENSAddress, + }); -// return ( -//
-// {avatarQueryStatus === ENSAvatarQueryStatus.LOADING ? ( -//
-// -//
-// ) : avatarQueryStatus === ENSAvatarQueryStatus.ERROR || -// failedLoadingImage ? ( -//
-//
-// -//
-//
-// ) : imageSrc ? ( -// {`ENS -// ) : null} -//
-// ); -// }; + const [imageSrc, setImageSrc] = useState(null); + const [failedLoadingImage, setFailedLoadingImage] = useState(false); + useEffect(() => { + if (avatarQueryStatus === ENSAvatarQueryStatus.SUCCESS) { + if (avatarSrc) { + fetch(avatarSrc) + .then((response) => { + if (response.ok) { + setImageSrc(avatarSrc); + setFailedLoadingImage(false); + } else { + setImageSrc(null); + setFailedLoadingImage(true); + } + }) + .catch(() => { + setImageSrc(null); + setFailedLoadingImage(true); + }); + } else { + setImageSrc(null); + setFailedLoadingImage(true); + } + } + }, [avatarQueryStatus]); + + return ( +
+ {avatarQueryStatus === ENSAvatarQueryStatus.LOADING ? ( +
+ +
+ ) : avatarQueryStatus === ENSAvatarQueryStatus.ERROR || + failedLoadingImage ? ( +
+
+ +
+
+ ) : imageSrc ? ( + {`ENS + ) : null} +
+ ); +}; + + */ diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index 71b0cde1..f5f91a71 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -5,23 +5,35 @@ import { ForWhom } from "../03-organisms"; import { MagnifyingGlassIcon } from "@/components/01-atoms"; import { EthereumAddress } from "@/lib/shared/types"; import { ADDRESS_ZERO } from "@/lib/client/constants"; -// import { normalizeENSName } from "@/lib/client/blockchain-utils"; +/* import { normalizeENSName } from "@/lib/client/blockchain-utils"; */ import { SwapContext } from "@/lib/client/contexts"; import { useContext, useEffect } from "react"; -// import { ENS } from "web3-eth-ens"; -// import Web3 from "web3"; +/** +import { ENS } from "web3-eth-ens"; +import Web3 from "web3"; +*/ import toast from "react-hot-toast"; +/** + * + * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address. + * Since the ENS are not working properly. We're commenting those sections. + */ + export const SearchBar = () => { if (!process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP) { throw new Error( "Cannot get the ENS primary name`s address without an Alchemy API Key", ); } - // const provider = new Web3.providers.HttpProvider( - // process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP, - // ); - // const ens = new ENS(undefined, provider); + /** + + const provider = new Web3.providers.HttpProvider( + process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP, + ); + const ens = new ENS(undefined, provider); + * + */ const { lastWalletConnected, @@ -75,17 +87,22 @@ export const SearchBar = () => { const getUserAddress = async () => { if (lastWalletConnected && inputAddress.length > 2) { - // const _inputAddress = inputAddress; - // const formattedAddress = normalizeENSName(inputAddress); + /** + const _inputAddress = inputAddress; + const formattedAddress = normalizeENSName(inputAddress); + */ try { - // const address: unknown = await ens.getOwner(formattedAddress); - // if (typeof address !== "string") { - // toast.error( - // "Wrong type of address returned by provider. Please contact the team", - // ); - // return; - // } + /** + const address: unknown = await ens.getOwner(formattedAddress); + if (typeof address !== "string") { + toast.error( + "Wrong type of address returned by provider. Please contact the team", + ); + return; + } + */ + validateAddressToSwap( inputAddress !== ADDRESS_ZERO ? inputAddress : ADDRESS_ZERO, ); diff --git a/components/02-molecules/EnsNameAndAddressWallet.tsx b/components/02-molecules/EnsNameAndAddressWallet.tsx index 19d1ee3a..e0d297b1 100644 --- a/components/02-molecules/EnsNameAndAddressWallet.tsx +++ b/components/02-molecules/EnsNameAndAddressWallet.tsx @@ -1,17 +1,35 @@ +/** + * Component that displays the authenticated user's ENS name and address wallet. + * + * This component utilizes the `useAuthenticatedUser` hook to retrieve the authenticated user's address. + * It also includes commented sections that are intended for future use with ENS (Ethereum Name Service) data. + * + * The commented sections include: + * - `useEnsData` hook: This hook is used to fetch ENS data, such as the primary name associated with an address. + * - `ENSAvatar` component: This component is used to display the ENS avatar for a given address. + * + * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address. + * + * The component renders a copy address button and a block explorer external link button if the authenticated user's address is available. + * + */ + import { CopyAdressButton } from "@/components/02-molecules"; import { BlockExplorerExternalLinkButton, - // ENSAvatar, + /*ENSAvatar */ } from "@/components/01-atoms"; import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; -// import { useEnsData } from "@/lib/client/hooks/useENSData"; +/*import { useEnsData } from "@/lib/client/hooks/useENSData";*/ export const EnsNameAndAddressWallet = () => { const { authenticatedUserAddress } = useAuthenticatedUser(); - // const { primaryName } = useEnsData({ - // ensAddress: authenticatedUserAddress, - // }); + /** + const { primaryName } = useEnsData({ + ensAddress: authenticatedUserAddress, + }); + */ if (!authenticatedUserAddress) return null; diff --git a/components/02-molecules/OfferSummary.tsx b/components/02-molecules/OfferSummary.tsx index 6726817a..2dde6dae 100644 --- a/components/02-molecules/OfferSummary.tsx +++ b/components/02-molecules/OfferSummary.tsx @@ -11,6 +11,30 @@ import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; // import { useEnsData } from "@/lib/client/hooks/useENSData"; import { useContext } from "react"; +/** + * OfferSummary component displays a summary of token offers for a given user. + * + * @param {Object} props - The properties object. + * @param {ForWhom} props.variant - Specifies whether the summary is for the authenticated user or another user. + * + * @returns {JSX.Element} The rendered OfferSummary component. + * + * @remarks + * This component uses the `SwapContext` to fetch the necessary data for rendering the token offers. + * It also utilizes the `useAuthenticatedUser` hook to get the authenticated user's address. + * + * The component conditionally renders different sections based on the `variant` prop: + * - If `variant` is `ForWhom.Yours`, it displays the authenticated user's token offers. + * - If `variant` is `ForWhom.Their`, it displays the searched user's token offers. + * + * The ENS-related sections are currently commented out due to issues with fetching the correct ENS address. + * These sections include: + * - Displaying the ENS avatar for the searched address. + * - Displaying the ENS name for the searched address. + * + * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address. + * Since the ENS are not working properly. We're commenting those sections. + */ export const OfferSummary = ({ variant }: { variant: ForWhom }) => { const { validatedAddressToSwap, @@ -24,12 +48,14 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => { ? authenticatedUserTokensList : searchedUserTokensList; - // const { primaryName: searchedENSName } = useEnsData({ - // ensAddress: validatedAddressToSwap, - // }); - // const { primaryName: authenticatedUserENSName } = useEnsData({ - // ensAddress: authenticatedUserAddress, - // }); + /** + const { primaryName: searchedENSName } = useEnsData({ + ensAddress: validatedAddressToSwap, + }); + const { primaryName: authenticatedUserENSName } = useEnsData({ + ensAddress: authenticatedUserAddress, + }); + */ return (
diff --git a/components/02-molecules/TheHeader.tsx b/components/02-molecules/TheHeader.tsx index 48a8e779..712c2ed9 100644 --- a/components/02-molecules/TheHeader.tsx +++ b/components/02-molecules/TheHeader.tsx @@ -96,6 +96,7 @@ export const TheHeader = () => { onClick={() => toggleSidebar()} className="rounded-[10px] flex items-center justify-center w-full h-full" > + {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} {/* */} { - // const { primaryName } = useEnsData({ - // ensAddress: address, - // }); + /** + const { primaryName } = useEnsData({ + ensAddress: address, + }); + */ const { etherValue, etherRecipient } = useContext(SwapContext); const [isMounted, setIsMounted] = useState(false); const { chain } = useNetwork(); @@ -64,6 +78,8 @@ export const UserOfferInfo = ({
+ {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* {address && (
+ {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* {primaryName ?

{primaryName}

:

{displayAddress}

} */}

{displayAddress}

@@ -83,6 +101,8 @@ export const UserOfferInfo = ({
+ {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* {address && (
+ {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* {primaryName ? (

{primaryName} gets

) : ( */} @@ -129,6 +151,8 @@ export const UserOfferInfo = ({
+ {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* {address && (
+ {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* {primaryName ? (

{primaryName} gets

) : ( */} @@ -177,6 +203,8 @@ export const UserOfferInfo = ({
+ {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* {address && (
+ {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* {primaryName ? (

{primaryName} gets

) : ( */} diff --git a/components/04-templates/SwapSection.tsx b/components/04-templates/SwapSection.tsx index 775fe2ef..206d838b 100644 --- a/components/04-templates/SwapSection.tsx +++ b/components/04-templates/SwapSection.tsx @@ -7,7 +7,7 @@ import { export const SwapSection = () => { return ( -
+
diff --git a/lib/client/hooks/useENSData.tsx b/lib/client/hooks/useENSData.tsx index e3b1d045..1be14a0c 100644 --- a/lib/client/hooks/useENSData.tsx +++ b/lib/client/hooks/useENSData.tsx @@ -1,58 +1,79 @@ -// import { EthereumAddress } from "@/lib/shared/types"; -// import { useEffect, useState } from "react"; +/** + * @deprecated This hook is deprecated because the searched ENS address + * sometimes returns incorrect results, which negatively impacts the user flow + * of the application. + * + * The `useEnsData` hook is responsible for fetching and managing Ethereum Name Service (ENS) + * data based on the provided ENS address. It fetches the primary ENS name and avatar status + * for the given address. + * + * The hook uses the `useEffect` hook to trigger the data fetching process whenever the + * `ensAddress` changes. It updates the state variables `primaryName` and `avatarQueryStatus` + * based on the fetched data or any errors encountered during the fetch process. + * + * @param {Props} props - The properties object. + * @param {EthereumAddress | null} props.ensAddress - The ENS address to fetch the data for. + * + * @returns {object} An object containing the primary ENS name, avatar query status, and avatar source URL. + */ -// export enum ENSAvatarQueryStatus { -// LOADING, -// SUCCESS, -// ERROR, -// } +/** +import { EthereumAddress } from "@/lib/shared/types"; +import { useEffect, useState } from "react"; -// interface Props { -// ensAddress: EthereumAddress | null; -// } +export enum ENSAvatarQueryStatus { + LOADING, + SUCCESS, + ERROR, +} -// export const useEnsData = ({ ensAddress }: Props) => { -// const [primaryName, setPrimaryName] = useState( -// undefined, -// ); -// const [avatarQueryStatus, setAvatarQueryStatus] = -// useState(ENSAvatarQueryStatus.LOADING); +interface Props { + ensAddress: EthereumAddress | null; +} -// useEffect(() => { -// if (ensAddress) { -// setAvatarQueryStatus(ENSAvatarQueryStatus.LOADING); -// console.log("ensAddress", ensAddress); +export const useEnsData = ({ ensAddress }: Props) => { + const [primaryName, setPrimaryName] = useState( + undefined, + ); + const [avatarQueryStatus, setAvatarQueryStatus] = + useState(ENSAvatarQueryStatus.LOADING); -// fetch(`/api/ens?address=${ensAddress}`) -// .then((response) => { -// if (!response.ok) { -// throw new Error("Network response was not ok"); -// } -// return response.json(); -// }) -// .then((data) => { -// if (data && data.ens) { -// setPrimaryName(data.ens_primary); -// setAvatarQueryStatus(ENSAvatarQueryStatus.SUCCESS); -// } else { -// setAvatarQueryStatus(ENSAvatarQueryStatus.ERROR); -// setPrimaryName(null); -// } -// }) -// .catch(() => { -// setAvatarQueryStatus(ENSAvatarQueryStatus.ERROR); -// setPrimaryName(null); -// }); -// } else { -// setPrimaryName(null); -// } -// }, [ensAddress]); + useEffect(() => { + if (ensAddress) { + setAvatarQueryStatus(ENSAvatarQueryStatus.LOADING); + console.log("ensAddress", ensAddress); -// return { -// primaryName, -// avatarQueryStatus: avatarQueryStatus, -// avatarSrc: primaryName -// ? `https://metadata.ens.domains/mainnet/avatar/${primaryName}` -// : null, -// }; -// }; + fetch(`/api/ens?address=${ensAddress}`) + .then((response) => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }) + .then((data) => { + if (data && data.ens) { + setPrimaryName(data.ens_primary); + setAvatarQueryStatus(ENSAvatarQueryStatus.SUCCESS); + } else { + setAvatarQueryStatus(ENSAvatarQueryStatus.ERROR); + setPrimaryName(null); + } + }) + .catch(() => { + setAvatarQueryStatus(ENSAvatarQueryStatus.ERROR); + setPrimaryName(null); + }); + } else { + setPrimaryName(null); + } + }, [ensAddress]); + + return { + primaryName, + avatarQueryStatus: avatarQueryStatus, + avatarSrc: primaryName + ? `https://metadata.ens.domains/mainnet/avatar/${primaryName}` + : null, + }; +}; + */ From 7ba9d5a3e7c5eccd3dc7ffc2d5cd142e1f08df26 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 09:11:08 -0300 Subject: [PATCH 04/45] Update components/01-atoms/ENSAvatar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/ENSAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index bfa19a1e..d06869b7 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -1,6 +1,6 @@ /** * @deprecated This component is deprecated because the searched ENS address - * sometimes returns incorrect results, which negatively impacts the user flow + * sometimes returns incorrect results, which negatively impacts the user experience * of the application. * * The `ENSAvatar` component is responsible for displaying an Ethereum Name Service (ENS) From 280c69646b5858f1ac71a1d224dcb6b4696b0b8e Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 09:11:28 -0300 Subject: [PATCH 05/45] Update components/01-atoms/ENSAvatar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/ENSAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index d06869b7..41d6b893 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -1,7 +1,7 @@ /** * @deprecated This component is deprecated because the searched ENS address * sometimes returns incorrect results, which negatively impacts the user experience - * of the application. + * in the application. * * The `ENSAvatar` component is responsible for displaying an Ethereum Name Service (ENS) * avatar based on the provided ENS address. It supports two sizes: small and medium. From f64f7c311de2b0eff24466a693015b3c21b97124 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 09:12:38 -0300 Subject: [PATCH 06/45] Update components/02-molecules/UserOfferInfo.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/UserOfferInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index 20297193..540775f2 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -213,7 +213,7 @@ export const UserOfferInfo = ({ )} */}
- {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* This section is commented because the ENSAvatar is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} {/* {primaryName ? (

{primaryName} gets

From 8e8bdbef563f93ee54e74857c462865a6585e808 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 09:12:51 -0300 Subject: [PATCH 07/45] Update components/01-atoms/ENSAvatar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/ENSAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index 41d6b893..cf497850 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -12,7 +12,7 @@ * * @component * @param {EthereumAddress} avatarENSAddress - The ENS address to fetch the avatar for. - * @param {ENSAvatarSize} [size=ENSAvatarSize.MEDIUM] - The size of the avatar to display. + * @param {ENSAvatarSize} ENSAvatarSize - The size of the avatar to display. Defaults to ENSAvatarSize.MEDIUM * * @returns {JSX.Element} The rendered ENS avatar component. */ From a70daeb560f4355710ca7891bfc8b313ea03a0f3 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 09:12:58 -0300 Subject: [PATCH 08/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index f5f91a71..4627ea18 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -17,7 +17,7 @@ import toast from "react-hot-toast"; /** * * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address. - * Since the ENS are not working properly. We're commenting those sections. + * Since ENS related feature is not working properly, we are commenting those sections. */ export const SearchBar = () => { From be10d9243b0e1be9aa06a525b0dd5bff49b639b8 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 09:13:08 -0300 Subject: [PATCH 09/45] Update components/02-molecules/UserOfferInfo.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/UserOfferInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index 540775f2..0c07d8ec 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -203,7 +203,7 @@ export const UserOfferInfo = ({
- {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* This section is commented because the ENSAvatar is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} {/* {address && ( Date: Fri, 20 Sep 2024 09:19:34 -0300 Subject: [PATCH 10/45] fix: comment text --- lib/client/hooks/useENSData.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/client/hooks/useENSData.tsx b/lib/client/hooks/useENSData.tsx index 1be14a0c..db06d640 100644 --- a/lib/client/hooks/useENSData.tsx +++ b/lib/client/hooks/useENSData.tsx @@ -11,9 +11,6 @@ * `ensAddress` changes. It updates the state variables `primaryName` and `avatarQueryStatus` * based on the fetched data or any errors encountered during the fetch process. * - * @param {Props} props - The properties object. - * @param {EthereumAddress | null} props.ensAddress - The ENS address to fetch the data for. - * * @returns {object} An object containing the primary ENS name, avatar query status, and avatar source URL. */ From 88078a76a1b3cc11c45de043ab29e1fba10e2ea3 Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Fri, 20 Sep 2024 09:21:00 -0300 Subject: [PATCH 11/45] fix: comment text --- lib/client/hooks/useENSData.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/client/hooks/useENSData.tsx b/lib/client/hooks/useENSData.tsx index db06d640..3a4d2f2f 100644 --- a/lib/client/hooks/useENSData.tsx +++ b/lib/client/hooks/useENSData.tsx @@ -1,7 +1,5 @@ /** - * @deprecated This hook is deprecated because the searched ENS address - * sometimes returns incorrect results, which negatively impacts the user flow - * of the application. + * This section is commented because the ENSAvatar is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. * * The `useEnsData` hook is responsible for fetching and managing Ethereum Name Service (ENS) * data based on the provided ENS address. It fetches the primary ENS name and avatar status From 995f85636c8670d54a966fa2eecf8da729a4cba9 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 10:58:54 -0300 Subject: [PATCH 12/45] Update components/01-atoms/ENSAvatar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/ENSAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index cf497850..77693841 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -11,7 +11,7 @@ * fetched avatar image. * * @component - * @param {EthereumAddress} avatarENSAddress - The ENS address to fetch the avatar for. + * @param {EthereumAddress} avatarENSAddress - The Ethereum address to fetch the avatar for. * @param {ENSAvatarSize} ENSAvatarSize - The size of the avatar to display. Defaults to ENSAvatarSize.MEDIUM * * @returns {JSX.Element} The rendered ENS avatar component. From 88058997ac2e7b8a2fce643e42d7a53862fed273 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 10:59:02 -0300 Subject: [PATCH 13/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index 4627ea18..c4351f6b 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -15,7 +15,6 @@ import Web3 from "web3"; import toast from "react-hot-toast"; /** - * * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address. * Since ENS related feature is not working properly, we are commenting those sections. */ From c3a6bc19335741d8d6ab1926757b0b4479689bc7 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 10:59:09 -0300 Subject: [PATCH 14/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index c4351f6b..b53c0520 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -15,8 +15,7 @@ import Web3 from "web3"; import toast from "react-hot-toast"; /** - * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address. - * Since ENS related feature is not working properly, we are commenting those sections. + * These sections are currently commented out because we are facing issues fetching the correct address ENS name Ethereum address. Since ENS related feature is not working properly, we are commenting those sections. */ export const SearchBar = () => { From dc4300f826ac37a6d9832120728c355de0f0e0c6 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 10:59:15 -0300 Subject: [PATCH 15/45] Update components/01-atoms/index.ts Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/index.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/01-atoms/index.ts b/components/01-atoms/index.ts index e1c382fb..ba6a3d2d 100644 --- a/components/01-atoms/index.ts +++ b/components/01-atoms/index.ts @@ -3,7 +3,10 @@ export * from "./ApproveTokenCards"; export * from "./BlockExplorerExternalLinkButton"; export * from "./ConnectWallet"; export * from "./DisconnectWallet"; -// export * from "./ENSAvatar"; +/** +* This export is commented out from dApp's features for now. +* export * from "./ENSAvatar"; +*/ export * from "./LoadingIndicator"; export * from "./NetworkDropdown"; export * from "./MobileNotSupported"; From a4d04b248db53faeefd225ac4c84cb7d284c27e9 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 11:03:49 -0300 Subject: [PATCH 16/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index b53c0520..acb3c2e4 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -25,12 +25,10 @@ export const SearchBar = () => { ); } /** - - const provider = new Web3.providers.HttpProvider( - process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP, - ); - const ens = new ENS(undefined, provider); - * + * const provider = new Web3.providers.HttpProvider( + * process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP, + * ); + * const ens = new ENS(undefined, provider); */ const { From 54104905554520b8bb84bc810938d92cf4a1cf63 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 11:03:59 -0300 Subject: [PATCH 17/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index acb3c2e4..5a150f42 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -84,8 +84,8 @@ export const SearchBar = () => { const getUserAddress = async () => { if (lastWalletConnected && inputAddress.length > 2) { /** - const _inputAddress = inputAddress; - const formattedAddress = normalizeENSName(inputAddress); + * const _inputAddress = inputAddress; + * const formattedAddress = normalizeENSName(inputAddress); */ try { From 1c87f747a2149d4741b743caaa955864cb3b7269 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Fri, 20 Sep 2024 11:04:08 -0300 Subject: [PATCH 18/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index 5a150f42..2cb0c880 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -89,15 +89,15 @@ export const SearchBar = () => { */ try { - /** - const address: unknown = await ens.getOwner(formattedAddress); - if (typeof address !== "string") { - toast.error( - "Wrong type of address returned by provider. Please contact the team", - ); - return; - } - */ + /** + * const address: unknown = await ens.getOwner(formattedAddress); + * if (typeof address !== "string") { + * toast.error( + * "Wrong type of address returned by provider. Please contact the team", + * ); + * return; + * } + */ validateAddressToSwap( inputAddress !== ADDRESS_ZERO ? inputAddress : ADDRESS_ZERO, From 0f9b7ea69bee22da25584953653fd33e829ed3e5 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:47:07 -0300 Subject: [PATCH 19/45] Update components/01-atoms/ENSAvatar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/ENSAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index 77693841..99d5ba70 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -1,5 +1,5 @@ /** - * @deprecated This component is deprecated because the searched ENS address + * @deprecated This component is deprecated because the searched Ethereum addresses * sometimes returns incorrect results, which negatively impacts the user experience * in the application. * From ef4854e6a24886641467ea2b8b91e72316a10559 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:47:15 -0300 Subject: [PATCH 20/45] Update components/01-atoms/ENSAvatar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/ENSAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index 99d5ba70..482b0df1 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -1,6 +1,6 @@ /** * @deprecated This component is deprecated because the searched Ethereum addresses - * sometimes returns incorrect results, which negatively impacts the user experience + * are not always returning the relative ENS primary names, which negatively impacts the user experience * in the application. * * The `ENSAvatar` component is responsible for displaying an Ethereum Name Service (ENS) From d0b9d782cc6eb6597b248141ca7e8ca94e025f04 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:47:21 -0300 Subject: [PATCH 21/45] Update components/01-atoms/ENSAvatar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/ENSAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index 482b0df1..431e03b1 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -4,7 +4,7 @@ * in the application. * * The `ENSAvatar` component is responsible for displaying an Ethereum Name Service (ENS) - * avatar based on the provided ENS address. It supports two sizes: small and medium. + * avatar based on the provided Ethereum address. It supports two sizes: small and medium. * * The component uses the `useEnsData` hook to fetch the avatar data. Depending on the * status of the query, it either shows a loading indicator, an error icon, or the From 12716a19c3b13713d9e6795940d899d888fc0199 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:47:33 -0300 Subject: [PATCH 22/45] Update components/01-atoms/ENSAvatar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/ENSAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/ENSAvatar.tsx b/components/01-atoms/ENSAvatar.tsx index 431e03b1..16b4d7bb 100644 --- a/components/01-atoms/ENSAvatar.tsx +++ b/components/01-atoms/ENSAvatar.tsx @@ -11,7 +11,7 @@ * fetched avatar image. * * @component - * @param {EthereumAddress} avatarENSAddress - The Ethereum address to fetch the avatar for. + * @param {EthereumAddress} avatarETHAddress - The Ethereum address to fetch the avatar for. * @param {ENSAvatarSize} ENSAvatarSize - The size of the avatar to display. Defaults to ENSAvatarSize.MEDIUM * * @returns {JSX.Element} The rendered ENS avatar component. From 5623181d072efd457afd74850872aa3f751bd036 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:47:46 -0300 Subject: [PATCH 23/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index 2cb0c880..38ec8503 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -9,8 +9,13 @@ import { ADDRESS_ZERO } from "@/lib/client/constants"; import { SwapContext } from "@/lib/client/contexts"; import { useContext, useEffect } from "react"; /** -import { ENS } from "web3-eth-ens"; -import Web3 from "web3"; +* @deprecated +* The Ethereum address related ENS primary name getter function is +* under refactoring, thus, this feature is currently commented out. +* +* import { normalizeENSName } from "@/lib/client/blockchain-utils"; +* import { ENS } from "web3-eth-ens"; +* import Web3 from "web3"; */ import toast from "react-hot-toast"; From 469c6eb2ba777179873bb4f1749aa4b6a3fbbf57 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:47:55 -0300 Subject: [PATCH 24/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index 38ec8503..0c1db1e2 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -19,9 +19,6 @@ import { useContext, useEffect } from "react"; */ import toast from "react-hot-toast"; -/** - * These sections are currently commented out because we are facing issues fetching the correct address ENS name Ethereum address. Since ENS related feature is not working properly, we are commenting those sections. - */ export const SearchBar = () => { if (!process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP) { From 021a569bdb255763628714311da0f8c3f5e4f08d Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:48:02 -0300 Subject: [PATCH 25/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index 0c1db1e2..81ee514b 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -27,6 +27,10 @@ export const SearchBar = () => { ); } /** + * @deprecated + * The Ethereum address related ENS primary name getter function is + * under refactoring, thus, this feature is currently commented out. + * * const provider = new Web3.providers.HttpProvider( * process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP, * ); From 2441ff8611d1c1c93dbb0db2fd1f34f6578856ac Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:48:07 -0300 Subject: [PATCH 26/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index 81ee514b..49334a11 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -90,6 +90,10 @@ export const SearchBar = () => { const getUserAddress = async () => { if (lastWalletConnected && inputAddress.length > 2) { /** + * @deprecated + * The Ethereum address related ENS primary name getter function is + * under refactoring, thus, this feature is currently commented out. + * * const _inputAddress = inputAddress; * const formattedAddress = normalizeENSName(inputAddress); */ From c169cb1aebf29608bb0e25357dacec92f794dbbb Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:51:17 -0300 Subject: [PATCH 27/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index 49334a11..db892249 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -100,6 +100,10 @@ export const SearchBar = () => { try { /** + * @deprecated + * The Ethereum address related ENS primary name getter function is + * under refactoring, thus, this feature is currently commented out. + * * const address: unknown = await ens.getOwner(formattedAddress); * if (typeof address !== "string") { * toast.error( From 09d5093014067931cff98880ecf6f99a59ca8357 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:51:26 -0300 Subject: [PATCH 28/45] Update components/02-molecules/EnsNameAndAddressWallet.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/EnsNameAndAddressWallet.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/02-molecules/EnsNameAndAddressWallet.tsx b/components/02-molecules/EnsNameAndAddressWallet.tsx index e0d297b1..b52fc0fd 100644 --- a/components/02-molecules/EnsNameAndAddressWallet.tsx +++ b/components/02-molecules/EnsNameAndAddressWallet.tsx @@ -39,7 +39,13 @@ export const EnsNameAndAddressWallet = () => {
{authenticatedUserAddress && ( <> - {/* */} + {/** + * @deprecated + * The Ethereum address related ENS primary name getter function is + * under refactoring, thus, this feature is currently commented out. + * + * + */}
{/* {primaryName && ( From 4599dc6d3d45f30ae6d771439ee941a5bec0c2fd Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:51:36 -0300 Subject: [PATCH 29/45] Update components/02-molecules/OfferSummary.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/OfferSummary.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/02-molecules/OfferSummary.tsx b/components/02-molecules/OfferSummary.tsx index 2dde6dae..06c0c33a 100644 --- a/components/02-molecules/OfferSummary.tsx +++ b/components/02-molecules/OfferSummary.tsx @@ -8,7 +8,11 @@ import { import { ADDRESS_ZERO } from "@/lib/client/constants"; import { SwapContext } from "@/lib/client/contexts"; import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; -// import { useEnsData } from "@/lib/client/hooks/useENSData"; +/** +* @deprecated +* +* import { useEnsData } from "@/lib/client/hooks/useENSData"; +*/ import { useContext } from "react"; /** From 3ee295873572004c6939f99ac3b10ffc406228b3 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:51:49 -0300 Subject: [PATCH 30/45] Update components/02-molecules/TheHeader.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/TheHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/02-molecules/TheHeader.tsx b/components/02-molecules/TheHeader.tsx index 712c2ed9..c8b0b5fe 100644 --- a/components/02-molecules/TheHeader.tsx +++ b/components/02-molecules/TheHeader.tsx @@ -96,7 +96,7 @@ export const TheHeader = () => { onClick={() => toggleSidebar()} className="rounded-[10px] flex items-center justify-center w-full h-full" > - {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/* This section is commented because the ENSAvatar is not working properly since the searched address is not working correctly. Check more about in useENSData file. */} {/* */} Date: Tue, 24 Sep 2024 10:52:00 -0300 Subject: [PATCH 31/45] Update components/02-molecules/UserOfferInfo.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/UserOfferInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index 0c07d8ec..40eec7a5 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -30,7 +30,7 @@ interface UserOfferInfoProps { * The component variant will render the amount of ether being sent in the swap or the amount of ether in the swap already created. * * @param {UserOfferInfoProps} props - The properties to configure the UserOfferInfo component. - * @param {EthereumAddress | null} props.address - The Ethereum address of the user. + * @param {EthereumAddress | null} address - The Ethereum address of the user. * @param {UserOfferVariant} [props.variant=UserOfferVariant.NAME_ENS] - The variant of the user offer information to display. * @param {SwapNativeEther} [props.nativeEther] - The native ether details for the swap. * @param {PopulatedSwapOfferCard} [props.swap] - The populated swap offer card details. From 8cde85a786c0c7057e54f4c5fd5b872924944e47 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:52:13 -0300 Subject: [PATCH 32/45] Update components/02-molecules/UserOfferInfo.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/UserOfferInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index 40eec7a5..08fd444b 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -33,7 +33,7 @@ interface UserOfferInfoProps { * @param {EthereumAddress | null} address - The Ethereum address of the user. * @param {UserOfferVariant} [props.variant=UserOfferVariant.NAME_ENS] - The variant of the user offer information to display. * @param {SwapNativeEther} [props.nativeEther] - The native ether details for the swap. - * @param {PopulatedSwapOfferCard} [props.swap] - The populated swap offer card details. + * @param {PopulatedSwapOfferCard} swap - The populated swap offer card details. * * @returns {JSX.Element} The JSX element representing the user offer information. * From dd9fb72593c493bbca9f3020f216bae587ec89b1 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:52:22 -0300 Subject: [PATCH 33/45] Update components/02-molecules/UserOfferInfo.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/UserOfferInfo.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index 08fd444b..f0b9ac6e 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -29,7 +29,6 @@ interface UserOfferInfoProps { * The component will render the ENS name and avatar of the user. * The component variant will render the amount of ether being sent in the swap or the amount of ether in the swap already created. * - * @param {UserOfferInfoProps} props - The properties to configure the UserOfferInfo component. * @param {EthereumAddress | null} address - The Ethereum address of the user. * @param {UserOfferVariant} [props.variant=UserOfferVariant.NAME_ENS] - The variant of the user offer information to display. * @param {SwapNativeEther} [props.nativeEther] - The native ether details for the swap. From a2993c05dfaaaf085e832b98c0fd4c4592f4b521 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:54:10 -0300 Subject: [PATCH 34/45] Update components/02-molecules/UserOfferInfo.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/UserOfferInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index f0b9ac6e..10588991 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -30,7 +30,7 @@ interface UserOfferInfoProps { * The component variant will render the amount of ether being sent in the swap or the amount of ether in the swap already created. * * @param {EthereumAddress | null} address - The Ethereum address of the user. - * @param {UserOfferVariant} [props.variant=UserOfferVariant.NAME_ENS] - The variant of the user offer information to display. + * @param {UserOfferVariant} variant - The variant of the user offer information to display. Defaults to UserOfferVariant.NAME_ENS * @param {SwapNativeEther} [props.nativeEther] - The native ether details for the swap. * @param {PopulatedSwapOfferCard} swap - The populated swap offer card details. * From 16e14cca3c4d67295582f1a56787c7ac5bbfd0d9 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:54:19 -0300 Subject: [PATCH 35/45] Update components/02-molecules/UserOfferInfo.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/UserOfferInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index 10588991..a86cfac2 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -31,7 +31,7 @@ interface UserOfferInfoProps { * * @param {EthereumAddress | null} address - The Ethereum address of the user. * @param {UserOfferVariant} variant - The variant of the user offer information to display. Defaults to UserOfferVariant.NAME_ENS - * @param {SwapNativeEther} [props.nativeEther] - The native ether details for the swap. + * @param {SwapNativeEther} nativeEther - The native ether details for the swap. * @param {PopulatedSwapOfferCard} swap - The populated swap offer card details. * * @returns {JSX.Element} The JSX element representing the user offer information. From 6ab76c33b0a5e0a0721344af7cd44eaeec07c10c Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 10:54:29 -0300 Subject: [PATCH 36/45] Update components/02-molecules/UserOfferInfo.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/UserOfferInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index a86cfac2..92adee5f 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -77,7 +77,7 @@ export const UserOfferInfo = ({
- {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} + {/*This section is commented because the ENSAvatar is not working properly since the searched address by ENS not working correctly. Check more about in useENSData file. */} {/* {address && ( Date: Tue, 24 Sep 2024 11:03:15 -0300 Subject: [PATCH 37/45] update: SearchBar comments --- components/01-atoms/SearchBar.tsx | 50 +++++++++++++++---------------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index db892249..89b3d1f7 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -5,20 +5,19 @@ import { ForWhom } from "../03-organisms"; import { MagnifyingGlassIcon } from "@/components/01-atoms"; import { EthereumAddress } from "@/lib/shared/types"; import { ADDRESS_ZERO } from "@/lib/client/constants"; -/* import { normalizeENSName } from "@/lib/client/blockchain-utils"; */ import { SwapContext } from "@/lib/client/contexts"; import { useContext, useEffect } from "react"; -/** -* @deprecated -* The Ethereum address related ENS primary name getter function is -* under refactoring, thus, this feature is currently commented out. -* -* import { normalizeENSName } from "@/lib/client/blockchain-utils"; -* import { ENS } from "web3-eth-ens"; -* import Web3 from "web3"; -*/ import toast from "react-hot-toast"; +/** + * @deprecated + * The Ethereum address related ENS primary name getter function is + * under refactoring, thus, this feature is currently commented out. + * + * import { normalizeENSName } from "@/lib/client/blockchain-utils"; + * import { ENS } from "web3-eth-ens"; + * import Web3 from "web3"; + */ export const SearchBar = () => { if (!process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP) { @@ -27,10 +26,9 @@ export const SearchBar = () => { ); } /** - * @deprecated * The Ethereum address related ENS primary name getter function is * under refactoring, thus, this feature is currently commented out. - * + * * const provider = new Web3.providers.HttpProvider( * process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_HTTP, * ); @@ -93,25 +91,25 @@ export const SearchBar = () => { * @deprecated * The Ethereum address related ENS primary name getter function is * under refactoring, thus, this feature is currently commented out. - * + * * const _inputAddress = inputAddress; * const formattedAddress = normalizeENSName(inputAddress); */ try { - /** - * @deprecated - * The Ethereum address related ENS primary name getter function is - * under refactoring, thus, this feature is currently commented out. - * - * const address: unknown = await ens.getOwner(formattedAddress); - * if (typeof address !== "string") { - * toast.error( - * "Wrong type of address returned by provider. Please contact the team", - * ); - * return; - * } - */ + /** + * @deprecated + * The Ethereum address related ENS primary name getter function is + * under refactoring, thus, this feature is currently commented out. + * + * const address: unknown = await ens.getOwner(formattedAddress); + * if (typeof address !== "string") { + * toast.error( + * "Wrong type of address returned by provider. Please contact the team", + * ); + * return; + * } + */ validateAddressToSwap( inputAddress !== ADDRESS_ZERO ? inputAddress : ADDRESS_ZERO, From 356585cbe3c910e221c7d399daac0fe9245f1579 Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Tue, 24 Sep 2024 11:07:59 -0300 Subject: [PATCH 38/45] update: comments --- .../02-molecules/EnsNameAndAddressWallet.tsx | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/components/02-molecules/EnsNameAndAddressWallet.tsx b/components/02-molecules/EnsNameAndAddressWallet.tsx index b52fc0fd..978bc8d5 100644 --- a/components/02-molecules/EnsNameAndAddressWallet.tsx +++ b/components/02-molecules/EnsNameAndAddressWallet.tsx @@ -1,4 +1,6 @@ -/** +/** import { useEnsData } from "@/lib/client/hooks/useENSData"; + * import { ENSAvatar } from "@/components/01-atoms"; + * * Component that displays the authenticated user's ENS name and address wallet. * * This component utilizes the `useAuthenticatedUser` hook to retrieve the authenticated user's address. @@ -15,12 +17,8 @@ */ import { CopyAdressButton } from "@/components/02-molecules"; -import { - BlockExplorerExternalLinkButton, - /*ENSAvatar */ -} from "@/components/01-atoms"; +import { BlockExplorerExternalLinkButton } from "@/components/01-atoms"; import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; -/*import { useEnsData } from "@/lib/client/hooks/useENSData";*/ export const EnsNameAndAddressWallet = () => { const { authenticatedUserAddress } = useAuthenticatedUser(); @@ -39,13 +37,13 @@ export const EnsNameAndAddressWallet = () => {
{authenticatedUserAddress && ( <> - {/** - * @deprecated - * The Ethereum address related ENS primary name getter function is - * under refactoring, thus, this feature is currently commented out. - * - * - */} + {/** + * @deprecated + * The Ethereum address related ENS primary name getter function is + * under refactoring, thus, this feature is currently commented out. + * + * + */}
{/* {primaryName && ( From bec62ed0940f6a036e9d51695c94ddb91545f809 Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Tue, 24 Sep 2024 11:10:13 -0300 Subject: [PATCH 39/45] update: comments --- components/02-molecules/OfferSummary.tsx | 58 +++++++++++++----------- 1 file changed, 31 insertions(+), 27 deletions(-) diff --git a/components/02-molecules/OfferSummary.tsx b/components/02-molecules/OfferSummary.tsx index 06c0c33a..3d2efe17 100644 --- a/components/02-molecules/OfferSummary.tsx +++ b/components/02-molecules/OfferSummary.tsx @@ -9,19 +9,17 @@ import { ADDRESS_ZERO } from "@/lib/client/constants"; import { SwapContext } from "@/lib/client/contexts"; import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; /** -* @deprecated -* -* import { useEnsData } from "@/lib/client/hooks/useENSData"; -*/ + * @deprecated + * + * import { useEnsData } from "@/lib/client/hooks/useENSData"; + */ import { useContext } from "react"; /** * OfferSummary component displays a summary of token offers for a given user. * - * @param {Object} props - The properties object. - * @param {ForWhom} props.variant - Specifies whether the summary is for the authenticated user or another user. + * @param {ForWhom} variant - Specifies whether the summary is for the authenticated user or another user. * - * @returns {JSX.Element} The rendered OfferSummary component. * * @remarks * This component uses the `SwapContext` to fetch the necessary data for rendering the token offers. @@ -53,12 +51,12 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => { : searchedUserTokensList; /** - const { primaryName: searchedENSName } = useEnsData({ - ensAddress: validatedAddressToSwap, - }); - const { primaryName: authenticatedUserENSName } = useEnsData({ - ensAddress: authenticatedUserAddress, - }); + * const { primaryName: searchedENSName } = useEnsData({ + * ensAddress: validatedAddressToSwap, + * }); + * const { primaryName: authenticatedUserENSName } = useEnsData({ + * ensAddress: authenticatedUserAddress, + * }); */ return ( @@ -68,16 +66,16 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => {
{/* {variant === ForWhom.Their && validatedAddressToSwap ? ( - - ) : variant === ForWhom.Yours && authenticatedUserAddress ? ( - - ) : ( */} + * + *) : variant === ForWhom.Yours && authenticatedUserAddress ? ( + * + *) : ( */}
{

{variant === ForWhom.Their && validatedAddressToSwap ? `${ - // searchedENSName - // ? `${searchedENSName} offers` + /** + * searchedENSName + * ? `${searchedENSName} offers` + * + * + */ validatedAddressToSwap ? `${ validatedAddressToSwap.address === ADDRESS_ZERO @@ -105,8 +107,10 @@ export const OfferSummary = ({ variant }: { variant: ForWhom }) => { ? "They offer" : variant === ForWhom.Yours && authenticatedUserAddress ? `${ - // authenticatedUserENSName - // ? `${authenticatedUserENSName} offers` + /** + * authenticatedUserENSName + * ? `${authenticatedUserENSName} offers` + */ authenticatedUserAddress ? `${authenticatedUserAddress.getEllipsedAddress()} offers` : "Connect your wallet" From 8b510c4d58043e21562c2da79db4d5e083189a7b Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Tue, 24 Sep 2024 11:12:53 -0300 Subject: [PATCH 40/45] update: comments --- components/02-molecules/TheHeader.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/02-molecules/TheHeader.tsx b/components/02-molecules/TheHeader.tsx index c8b0b5fe..1bc393ef 100644 --- a/components/02-molecules/TheHeader.tsx +++ b/components/02-molecules/TheHeader.tsx @@ -1,8 +1,8 @@ +/* import { ENSAvatar } from "@/components/01-atoms"; */ import { useScreenSize } from "@/lib/client/hooks/useScreenSize"; import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; import { ConnectWallet, - // ENSAvatar, MoonIcon, NetworkDropdown, NetworkVariantPosition, @@ -96,7 +96,6 @@ export const TheHeader = () => { onClick={() => toggleSidebar()} className="rounded-[10px] flex items-center justify-center w-full h-full" > - {/* This section is commented because the ENSAvatar is not working properly since the searched address is not working correctly. Check more about in useENSData file. */} {/* */} Date: Tue, 24 Sep 2024 11:15:49 -0300 Subject: [PATCH 41/45] update: comments --- components/02-molecules/UserOfferInfo.tsx | 50 ++++++++++++----------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/components/02-molecules/UserOfferInfo.tsx b/components/02-molecules/UserOfferInfo.tsx index 92adee5f..637f2b18 100644 --- a/components/02-molecules/UserOfferInfo.tsx +++ b/components/02-molecules/UserOfferInfo.tsx @@ -1,8 +1,9 @@ -// import { ENSAvatar, ENSAvatarSize } from "@/components/01-atoms"; +/* import { ENSAvatar, ENSAvatarSize } from "@/components/01-atoms"; + * import { useEnsData } from "@/lib/client/hooks/useENSData"; */ + import { ADDRESS_ZERO } from "@/lib/client/constants"; import { SwapContext } from "@/lib/client/contexts"; import { useAuthenticatedUser } from "@/lib/client/hooks/useAuthenticatedUser"; -// import { useEnsData } from "@/lib/client/hooks/useENSData"; import { PopulatedSwapOfferCard } from "@/lib/client/offers-utils"; import { SwapNativeEther } from "@/lib/client/swap-utils"; import { isInRange } from "@/lib/client/utils"; @@ -12,11 +13,27 @@ import { formatEther } from "viem"; import { useNetwork } from "wagmi"; export enum UserOfferVariant { - NAME_ENS = "NAME_ENS", // only the name of the ENS and avatar - CREATING_SWAP = "CREATING_SWAP", // the name of the ENS and avatar with the amount of ether being sent ( etherValue ) - SWAP_CREATED = "SWAP_CREATED", // the name of the ENS and avatar with the amount of ether in the swap already created - SWAP_CREATED_MARKETPLACE = "SWAP_CREATED_MARKETPLACE", // the name of the ENS and avatar with the amount of ether in the swap already created + /** + * Only the name of the ENS and avatar. + */ + NAME_ENS = "NAME_ENS", + + /** + * The name of the ENS and avatar with the amount of ether being sent (etherValue). + */ + CREATING_SWAP = "CREATING_SWAP", + + /** + * The name of the ENS and avatar with the amount of ether in the swap already created. + */ + SWAP_CREATED = "SWAP_CREATED", + + /** + * The name of the ENS and avatar with the amount of ether in the swap already created. + */ + SWAP_CREATED_MARKETPLACE = "SWAP_CREATED_MARKETPLACE", } + interface UserOfferInfoProps { address: EthereumAddress | null; variant?: UserOfferVariant; @@ -34,12 +51,15 @@ interface UserOfferInfoProps { * @param {SwapNativeEther} nativeEther - The native ether details for the swap. * @param {PopulatedSwapOfferCard} swap - The populated swap offer card details. * - * @returns {JSX.Element} The JSX element representing the user offer information. * * @remarks * The ENS name and avatar rendering sections are commented out due to issues with the ENS data retrieval. * Specifically, the ENS avatar is not working properly because the searched address by ENS is not functioning correctly. * For more details, refer to the `useENSData` file. + * + * @deprecated + * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address. + * Since the ENS are not working properly. We're commenting those sections. */ export const UserOfferInfo = ({ address, @@ -77,8 +97,6 @@ export const UserOfferInfo = ({

- {/*This section is commented because the ENSAvatar is not working properly since the searched address by ENS not working correctly. Check more about in useENSData file. */} - {/* {address && (
- {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} - {/* {primaryName ?

{primaryName}

:

{displayAddress}

} */}

{displayAddress}

@@ -100,8 +116,6 @@ export const UserOfferInfo = ({
- {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} - {/* {address && (
- {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} - {/* {primaryName ? (

{primaryName} gets

) : ( */} @@ -150,8 +162,6 @@ export const UserOfferInfo = ({
- {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} - {/* {address && (
- {/*This section is commented because the ENS-AVATAR is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} - {/* {primaryName ? (

{primaryName} gets

) : ( */} @@ -202,8 +210,6 @@ export const UserOfferInfo = ({
- {/* This section is commented because the ENSAvatar is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} - {/* {address && (
- {/* This section is commented because the ENSAvatar is not working properly since the searched address by ens not working correctly. Check more about in useENSData file. */} - {/* {primaryName ? (

{primaryName} gets

) : ( */} From d79539d2d42956a33255106eeee37601a54824d9 Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Tue, 24 Sep 2024 11:16:23 -0300 Subject: [PATCH 42/45] update: comments --- lib/client/hooks/useENSData.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/client/hooks/useENSData.tsx b/lib/client/hooks/useENSData.tsx index 3a4d2f2f..c4696f74 100644 --- a/lib/client/hooks/useENSData.tsx +++ b/lib/client/hooks/useENSData.tsx @@ -9,7 +9,9 @@ * `ensAddress` changes. It updates the state variables `primaryName` and `avatarQueryStatus` * based on the fetched data or any errors encountered during the fetch process. * - * @returns {object} An object containing the primary ENS name, avatar query status, and avatar source URL. + * @deprecated + * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address. + * Since the ENS are not working properly. We're commenting those sections. */ /** From f659bcd2076855f516d5e0ea1d1dc69e1a7120ad Mon Sep 17 00:00:00 2001 From: heronlancellot Date: Tue, 24 Sep 2024 14:01:37 -0300 Subject: [PATCH 43/45] update: comments --- components/02-molecules/EnsNameAndAddressWallet.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/02-molecules/EnsNameAndAddressWallet.tsx b/components/02-molecules/EnsNameAndAddressWallet.tsx index 978bc8d5..19762166 100644 --- a/components/02-molecules/EnsNameAndAddressWallet.tsx +++ b/components/02-molecules/EnsNameAndAddressWallet.tsx @@ -1,5 +1,4 @@ -/** import { useEnsData } from "@/lib/client/hooks/useENSData"; - * import { ENSAvatar } from "@/components/01-atoms"; +/** * * Component that displays the authenticated user's ENS name and address wallet. * @@ -10,10 +9,13 @@ * - `useEnsData` hook: This hook is used to fetch ENS data, such as the primary name associated with an address. * - `ENSAvatar` component: This component is used to display the ENS avatar for a given address. * + * @deprecated * These sections are currently commented out because the `ens-avatar-searched-address` has issues fetching the correct address. * * The component renders a copy address button and a block explorer external link button if the authenticated user's address is available. * + * import { useEnsData } from "@/lib/client/hooks/useENSData"; + * import { ENSAvatar } from "@/components/01-atoms"; */ import { CopyAdressButton } from "@/components/02-molecules"; From c6edfd2ed38d381e305792ec74ab92d7f33b956b Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 16:08:27 -0300 Subject: [PATCH 44/45] Update components/01-atoms/SearchBar.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/01-atoms/SearchBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/01-atoms/SearchBar.tsx b/components/01-atoms/SearchBar.tsx index 89b3d1f7..789f0d98 100644 --- a/components/01-atoms/SearchBar.tsx +++ b/components/01-atoms/SearchBar.tsx @@ -26,6 +26,7 @@ export const SearchBar = () => { ); } /** + * @deprecated * The Ethereum address related ENS primary name getter function is * under refactoring, thus, this feature is currently commented out. * From 38666df97d069d799a2570c8578ef85c2db5f842 Mon Sep 17 00:00:00 2001 From: "heronlancellot.eth" Date: Tue, 24 Sep 2024 16:08:39 -0300 Subject: [PATCH 45/45] Update components/02-molecules/EnsNameAndAddressWallet.tsx Co-authored-by: caco.eth <49823133+FrancoAguzzi@users.noreply.github.com> --- components/02-molecules/EnsNameAndAddressWallet.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/02-molecules/EnsNameAndAddressWallet.tsx b/components/02-molecules/EnsNameAndAddressWallet.tsx index 19762166..698b2dcd 100644 --- a/components/02-molecules/EnsNameAndAddressWallet.tsx +++ b/components/02-molecules/EnsNameAndAddressWallet.tsx @@ -1,5 +1,4 @@ /** - * * Component that displays the authenticated user's ENS name and address wallet. * * This component utilizes the `useAuthenticatedUser` hook to retrieve the authenticated user's address.