Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/ens name #422

Open
wants to merge 45 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
406f34b
feat: add h-full into swap-section
heronlancellot Sep 19, 2024
ebc5733
fix: remove ens searched address
heronlancellot Sep 19, 2024
73162ca
fix: commented sections and add documentation about ens-name-address
heronlancellot Sep 19, 2024
7ba9d5a
Update components/01-atoms/ENSAvatar.tsx
heronlancellot Sep 20, 2024
280c696
Update components/01-atoms/ENSAvatar.tsx
heronlancellot Sep 20, 2024
f64f7c3
Update components/02-molecules/UserOfferInfo.tsx
heronlancellot Sep 20, 2024
8e8bdbe
Update components/01-atoms/ENSAvatar.tsx
heronlancellot Sep 20, 2024
a70daeb
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 20, 2024
be10d92
Update components/02-molecules/UserOfferInfo.tsx
heronlancellot Sep 20, 2024
ff85adc
fix: comment text
heronlancellot Sep 20, 2024
88078a7
fix: comment text
heronlancellot Sep 20, 2024
995f856
Update components/01-atoms/ENSAvatar.tsx
heronlancellot Sep 20, 2024
8805899
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 20, 2024
c3a6bc1
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 20, 2024
dc4300f
Update components/01-atoms/index.ts
heronlancellot Sep 20, 2024
a4d04b2
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 20, 2024
5410490
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 20, 2024
1c87f74
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 20, 2024
0f9b7ea
Update components/01-atoms/ENSAvatar.tsx
heronlancellot Sep 24, 2024
ef4854e
Update components/01-atoms/ENSAvatar.tsx
heronlancellot Sep 24, 2024
d0b9d78
Update components/01-atoms/ENSAvatar.tsx
heronlancellot Sep 24, 2024
12716a1
Update components/01-atoms/ENSAvatar.tsx
heronlancellot Sep 24, 2024
5623181
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 24, 2024
469c6eb
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 24, 2024
021a569
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 24, 2024
2441ff8
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 24, 2024
c169cb1
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 24, 2024
09d5093
Update components/02-molecules/EnsNameAndAddressWallet.tsx
heronlancellot Sep 24, 2024
4599dc6
Update components/02-molecules/OfferSummary.tsx
heronlancellot Sep 24, 2024
3ee2958
Update components/02-molecules/TheHeader.tsx
heronlancellot Sep 24, 2024
d478d30
Update components/02-molecules/UserOfferInfo.tsx
heronlancellot Sep 24, 2024
8cde85a
Update components/02-molecules/UserOfferInfo.tsx
heronlancellot Sep 24, 2024
dd9fb72
Update components/02-molecules/UserOfferInfo.tsx
heronlancellot Sep 24, 2024
a2993c0
Update components/02-molecules/UserOfferInfo.tsx
heronlancellot Sep 24, 2024
16e14cc
Update components/02-molecules/UserOfferInfo.tsx
heronlancellot Sep 24, 2024
6ab76c3
Update components/02-molecules/UserOfferInfo.tsx
heronlancellot Sep 24, 2024
36de969
update: SearchBar comments
heronlancellot Sep 24, 2024
356585c
update: comments
heronlancellot Sep 24, 2024
bec62ed
update: comments
heronlancellot Sep 24, 2024
8b510c4
update: comments
heronlancellot Sep 24, 2024
8da92a0
update: comments
heronlancellot Sep 24, 2024
d79539d
update: comments
heronlancellot Sep 24, 2024
f659bcd
update: comments
heronlancellot Sep 24, 2024
c6edfd2
Update components/01-atoms/SearchBar.tsx
heronlancellot Sep 24, 2024
38666df
Update components/02-molecules/EnsNameAndAddressWallet.tsx
heronlancellot Sep 24, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 97 additions & 97 deletions components/01-atoms/ENSAvatar.tsx
Original file line number Diff line number Diff line change
@@ -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 */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @heronlancellot

Whenever commenting out features from the project, can you please add a documentation at the top of the comments explaining this feature is out for a while?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • I'd rather using this comment methodology /** */

// 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<string | null>(null);
const [failedLoadingImage, setFailedLoadingImage] = useState<boolean>(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<string | null>(null);
// const [failedLoadingImage, setFailedLoadingImage] = useState<boolean>(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 (
<div>
{avatarQueryStatus === ENSAvatarQueryStatus.LOADING ? (
<div
className={cc([
ENSAvatarClassName[size],
"flex justify-center items-center",
])}
>
<LoadingIndicator colors="dark:border-offWhite border-midnightGreen" />
</div>
) : avatarQueryStatus === ENSAvatarQueryStatus.ERROR ||
failedLoadingImage ? (
<div className={ENSAvatarClassName[size]}>
<div
className={cc([
ENSAvatarClassName[size] === "ens-avatar-small"
? "bg-lightSilver dark:bg-darkGray p-[5px] rounded-md"
: "w-full flex justify-center items-center h-10 rounded-[10px] bg-yellowGreen",
"",
])}
>
<PersonIcon
size={`${
ENSAvatarClassName[size] === "ens-avatar-small" ? 14 : 20
}`}
className={cc([
ENSAvatarClassName[size] === "ens-avatar-small"
? "text-sageGray dark:text-mediumGray"
: "text-sageGray dark:text-blackGreen",
])}
/>
</div>
</div>
) : imageSrc ? (
<img
src={imageSrc}
className={ENSAvatarClassName[size]}
alt={`ENS Avatar for ${avatarENSAddress}`}
/>
) : null}
</div>
);
};
// return (
// <div>
// {avatarQueryStatus === ENSAvatarQueryStatus.LOADING ? (
// <div
// className={cc([
// ENSAvatarClassName[size],
// "flex justify-center items-center",
// ])}
// >
// <LoadingIndicator colors="dark:border-offWhite border-midnightGreen" />
// </div>
// ) : avatarQueryStatus === ENSAvatarQueryStatus.ERROR ||
// failedLoadingImage ? (
// <div className={ENSAvatarClassName[size]}>
// <div
// className={cc([
// ENSAvatarClassName[size] === "ens-avatar-small"
// ? "bg-lightSilver dark:bg-darkGray p-[5px] rounded-md"
// : "w-full flex justify-center items-center h-10 rounded-[10px] bg-yellowGreen",
// "",
// ])}
// >
// <PersonIcon
// size={`${
// ENSAvatarClassName[size] === "ens-avatar-small" ? 14 : 20
// }`}
// className={cc([
// ENSAvatarClassName[size] === "ens-avatar-small"
// ? "text-sageGray dark:text-mediumGray"
// : "text-sageGray dark:text-blackGreen",
// ])}
// />
// </div>
// </div>
// ) : imageSrc ? (
// <img
// src={imageSrc}
// className={ENSAvatarClassName[size]}
// alt={`ENS Avatar for ${avatarENSAddress}`}
// />
// ) : null}
// </div>
// );
// };
34 changes: 17 additions & 17 deletions components/01-atoms/SearchBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thing around comment methodology in here

// import Web3 from "web3";
import toast from "react-hot-toast";

export const SearchBar = () => {
Expand All @@ -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,
Expand Down Expand Up @@ -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");
Expand Down
2 changes: 1 addition & 1 deletion components/01-atoms/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export * from "./ApproveTokenCards";
export * from "./BlockExplorerExternalLinkButton";
export * from "./ConnectWallet";
export * from "./DisconnectWallet";
export * from "./ENSAvatar";
// export * from "./ENSAvatar";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a comment in here as well

heronlancellot marked this conversation as resolved.
Show resolved Hide resolved
export * from "./LoadingIndicator";
export * from "./NetworkDropdown";
export * from "./MobileNotSupported";
Expand Down
16 changes: 8 additions & 8 deletions components/02-molecules/EnsNameAndAddressWallet.tsx
Original file line number Diff line number Diff line change
@@ -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({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here!

// ensAddress: authenticatedUserAddress,
// });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please also add docs above the comments (one per file is enough) saying why this feature is out for now

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For each file, please


if (!authenticatedUserAddress) return null;

Expand All @@ -21,17 +21,17 @@ export const EnsNameAndAddressWallet = () => {
<div className="flex gap-3 pb-5">
{authenticatedUserAddress && (
<>
<ENSAvatar avatarENSAddress={authenticatedUserAddress} />
{/* <ENSAvatar avatarENSAddress={authenticatedUserAddress} /> */}
heronlancellot marked this conversation as resolved.
Show resolved Hide resolved
<div className="flex flex-col">
<div className="flex items-center justify-start gap-2">
{primaryName && (
{/* {primaryName && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comment section can reproduce the method of commenting deprecated feature that the other sections received! Please go ahead and do so 🧑🏼‍💻👊🏼🧑🏼‍💻

<>
<h3 className="text-sm ">{`${primaryName}`}</h3>
<h3 className="text-sm text-softGray dark:text-mediumGray">
|
</h3>
</>
)}
)} */}
<CopyAdressButton
authenticatedUserAddress={authenticatedUserAddress.toString()}
displayAddress={displayAddress}
Expand Down
Loading