Skip to content
This repository has been archived by the owner on Sep 16, 2022. It is now read-only.

Migrating address component #6

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"postpublish": "pinst --enable"
},
"dependencies": {
"eth-hooks": "^4.0.48",
"eth-hooks": "^4.5.1",
"ethers": "^5.6.4",
"lodash.isequal": "^4.5.0",
"merge-anything": "^5.0.2",
Expand Down
31 changes: 31 additions & 0 deletions src/components/address/address.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { useResolveEnsName } from 'eth-hooks/dapps';
import { TEthersProvider } from 'eth-hooks/models';

export interface AddressProps {
Copy link
Member

Choose a reason for hiding this comment

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

Can we prefix interfaces with I and types with T. it was the standard in eth hooks

address: string;
ensProvider?: TEthersProvider;
blockExplorer?: string;
}

export interface AddressResult {
shortAddress: string;
ensName?: string;
explorerLink: string;
}

const blockExplorerLink = (address: string, blockExplorer?: string): string =>
`${blockExplorer || 'https://etherscan.io/'}address/${address}`;

export const useAddress = (props: AddressProps): AddressResult => {
Copy link
Member

Choose a reason for hiding this comment

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

I would add tsdocs comments similar to eth-hooks. It helps create automated documentation later. https://scaffold-eth.github.io/eth-hooks/docs/api/modules/Hooks. @stevenpslade

Copy link
Member

Choose a reason for hiding this comment

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

maybe the hook should be called useAddressForDisplay?

const address = props.address;
const [ensName] = useResolveEnsName(props.ensProvider, address);
const explorerLink = blockExplorerLink(address, props.blockExplorer);

const shortAddress = address ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}` : '';
Copy link
Member

Choose a reason for hiding this comment

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

i think we should check validity of address using ethers.utils

Copy link
Member

Choose a reason for hiding this comment

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

if invalid, return that in shortAddress


return {
shortAddress,
Copy link
Member

Choose a reason for hiding this comment

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

shortAddress can be called addressForDisplay

ensName,
explorerLink,
};
};
1 change: 1 addition & 0 deletions src/components/address/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './address';
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './components/eth-balance';
export * from './components/address';
Loading