-
Notifications
You must be signed in to change notification settings - Fork 18
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
base: develop
Are you sure you want to change the base?
Fix/ens name #422
Changes from 2 commits
406f34b
ebc5733
73162ca
7ba9d5a
280c696
f64f7c3
8e8bdbe
a70daeb
be10d92
ff85adc
88078a7
995f856
8805899
c3a6bc1
dc4300f
a4d04b2
5410490
1c87f74
0f9b7ea
ef4854e
d0b9d78
12716a1
5623181
469c6eb
021a569
2441ff8
c169cb1
09d5093
4599dc6
3ee2958
d478d30
8cde85a
dd9fb72
a2993c0
16e14cc
6ab76c3
36de969
356585c
bec62ed
8b510c4
8da92a0
d79539d
f659bcd
c6edfd2
38666df
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 */ | ||
// 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> | ||
// ); | ||
// }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 = () => { | ||
|
@@ -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"); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,7 +3,7 @@ export * from "./ApproveTokenCards"; | |
export * from "./BlockExplorerExternalLinkButton"; | ||
export * from "./ConnectWallet"; | ||
export * from "./DisconnectWallet"; | ||
export * from "./ENSAvatar"; | ||
// export * from "./ENSAvatar"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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"; | ||
|
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({ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. And here! |
||
// ensAddress: authenticatedUserAddress, | ||
// }); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For each file, please |
||
|
||
if (!authenticatedUserAddress) return null; | ||
|
||
|
@@ -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 && ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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} | ||
|
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.