feat(console): add ens domains #88
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@developerfred is attempting to deploy a commit to the Superfluid Finance Team on Vercel. A member of the Team first needs to authorize it. |
developerfred
force-pushed
the
add-ens-resolver
branch
from
9c11900
to
1fdc76b
Compare
developerfred
force-pushed
the
add-ens-resolver
branch
from
58e1ece
to
123308a
Compare
developerfred
changed the title
developerfred
changed the title
developerfred
force-pushed
the
add-ens-resolver
branch
from
049379d
to
1dc16b1
Compare
developerfred
force-pushed
the
add-ens-resolver
branch
from
1dc16b1
to
89414f1
Compare
src/redux/store.ts
Outdated
| const store = configureStore({ | ||
| reducer: { | ||
| [rpcApi.reducerPath]: rpcApi.reducer, | ||
| [sfSubgraph.reducerPath]: sfSubgraph.reducer, | ||
| [themePreferenceSlice.name]: themePreferenceSlice.reducer, | ||
| [addressBookSlice.name]: addressBookReducer | ||
| [addressBookSlice.name]: addressBookReducer, | ||
| [ensApi.reducerPath]: ensReducer, |
There was a problem hiding this comment.
I don't see much value in persisting ENS queries so we can just do [ensApi.reducerPath]: ensApi.reducer, here.
This part can be removed:
const ensReducer = persistReducer(
{ key: "ens-lockup", version: 1, storage: storageLocal },
ensApi.reducer
)| return { data: null }; | ||
| } | ||
|
|
||
| if (!name.endsWith('.eth')) { |
There was a problem hiding this comment.
This approach is flawed: "The ENS namespace includes both .eth names (which are native to ENS) and DNS names imported into ENS. Because the DNS suffix namespace expands over time, a hardcoded list of name suffixes for recognizing ENS names will regularly be out of date, leading to your application not recognizing all valid ENS names. To remain future-proof, a correct integration of ENS treats any dot-separated name as a potential ENS name and will attempt a look-up." (source: https://docs.ens.domains/dapp-developer-guide/resolving-names)
We can do an early return when there's no "." in the given name but ".eth" is too specific.
developerfred
force-pushed
the
add-ens-resolver
branch
from
6629845
to
32efc02
Compare
developerfred
force-pushed
the
add-ens-resolver
branch
from
32efc02
to
86e426d
Compare
kasparkallas
requested changes
May 30, 2022
| address | ||
| ) | ||
|
|
||
| const getInitialNameTag = () => ensQuery.data?.name ?? existingEntry?.nameTag ?? ""; |
There was a problem hiding this comment.
I think the custom name tag should take higher priority over ENS one.
| return networks.map((network) => { | ||
| const addressBookEntries = useAppSelector((state) => | ||
| searchTerm !== "" && !isSearchTermAddress | ||
| searchTerm !== "" && !isSearchTermAddress && !ensQuery |
There was a problem hiding this comment.
Still some !ensQuery-like calls in the code. This can never be correct because it's never going to be null or undefined. Either do !ensQuery.data or use any of the RTK-Query loading states: https://redux-toolkit.js.org/rtk-query/usage/queries#frequently-used-query-hook-return-values
| searchTerm | ||
| ) | ||
|
|
||
| const ensSearchTerm = ensQuery !== null ? ensQuery.address : searchTerm.toLocaleLowerCase() |
There was a problem hiding this comment.
I'm a bit confused -- shouldn't ensQuery.address be ensQuery.data?.address? If so, please run yarn build before pushing any code because this project uses TypeScript and it would catch such type errors straight away. An IDE like Visual Studio Code would also show this as an error.
|
Hey @developerfred, any progress with this? Let us know if you have any follow up questions. We may move this one to a public bounty in the coming weeks otherwise. |
|
@vmichalik I'm going back to work on the task, I had some impediments but I'm back. |
|
Hey @developerfred We developed the ENS support for Dashboard v2. I can the snippets of code you can reverse-engineer to the Console if you like (you don't need to leave in anything that's not actually used in the Console). If you continue the development then I'd prefer if you started a new PR and used an IDE that catches TypeScript errors (or just run Here are the snippets: ensApi.slice.ts import { fakeBaseQuery } from "@reduxjs/toolkit/dist/query";
import { createApi } from "@reduxjs/toolkit/dist/query/react";
import { ethers } from "ethers";
export interface ResolveNameResult {
address: string;
name: string;
}
export const ensApi = createApi({
reducerPath: "ens",
baseQuery: fakeBaseQuery(),
keepUnusedDataFor: 600, // Agressively cache the ENS queries
endpoints: (builder) => {
const mainnetProvider = new ethers.providers.FallbackProvider(
[
{
provider: new ethers.providers.JsonRpcBatchProvider(
"https://rpc-endpoints.superfluid.dev/eth-mainnet",
"mainnet"
),
priority: 1,
},
{
provider: new ethers.providers.JsonRpcBatchProvider(
"https://cloudflare-eth.com",
"mainnet"
),
priority: 2,
},
],
1
);
return {
resolveName: builder.query<ResolveNameResult | null, string>({
queryFn: async (name) => {
if (!name.includes(".")) {
return { data: null };
}
const address = await mainnetProvider.resolveName(name);
return {
data: address
? {
name,
address: address,
}
: null,
};
},
}),
lookupAddress: builder.query<
{ address: string; name: string } | null,
string
>({
queryFn: async (address) => {
const name = await mainnetProvider.lookupAddress(address);
return {
data: name
? {
name,
address: ethers.utils.getAddress(address),
}
: null,
};
},
}),
getAvatar: builder.query<any, string>({
queryFn: async (address) => {
const avatarUrl = await mainnetProvider.getAvatar(address);
return {
data: avatarUrl,
};
},
}),
};
},
});AddressName.ts (All addresses are displayed through this component.) import { memo } from "react";
import useAddressName from "../../hooks/useAddressName";
import shortenHex from "../../utils/shortenHex";
export interface AddressNameProps {
address: string;
length?: "short" | "medium" | "long";
}
export default memo(function AddressName({
address,
length = "short",
}: AddressNameProps) {
const addressName = useAddressName(address);
if (addressName.name) {
return <>{addressName.name}</>;
} else {
return (
<>
{length === "long"
? addressName.addressChecksummed
: shortenHex(
addressName.addressChecksummed,
length === "medium" ? 8 : 4
)}
</>
);
}
});AddressAvatar.tsx import { Avatar, AvatarProps } from "@mui/material";
import { memo } from "react";
import { ensApi } from "../../features/ens/ensApi.slice";
import Blockies from "react-blockies";
import { getAddress } from "../../utils/memoizedEthersUtils";
interface AddressAvatarProps {
address: string;
AvatarProps?: AvatarProps;
}
export default memo(function AddressAvatar({
address,
AvatarProps = {},
}: AddressAvatarProps) {
const { data: ensAvatarUrl } = ensApi.useGetAvatarQuery(address);
if (ensAvatarUrl) {
return (
<Avatar
alt="ens avatar"
variant="rounded"
src={ensAvatarUrl}
{...AvatarProps}
/>
);
} else {
return (
<Avatar alt="generated blockie avatar" variant="rounded" {...AvatarProps}>
{/* Read about the Blockies API here: https://github.com/stephensprinkle-zz/react-blockies */}
<Blockies seed={getAddress(address)} size={12} scale={3} />
</Avatar>
);
}
});useAddressName.tsx (with an address book, the address book's name would take precedence over ENS) import { ensApi } from "../features/ens/ensApi.slice";
import { getAddress } from "../utils/memoizedEthersUtils";
interface AddressNameResult {
addressChecksummed: string;
name: string | "";
}
const useAddressName = (address: string): AddressNameResult => {
const ensLookupQuery = ensApi.useLookupAddressQuery(address);
return {
addressChecksummed: getAddress(address),
name: ensLookupQuery.data?.name ?? "",
};
};
export default useAddressName;I think that's about it. NOTE: "shortenHex" is the same as "shortenAddress" in the Console. |
|
Ok @kasparkallas thanks! |
|
@kasparkallas |
Yes, it's just |
|
thanks, can you tell me what is the vercel error log? |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
As log: As image: You can run |
4 tasks
|
Closing this because the feature got implemented in: #105 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
close #87
using: