diff --git a/demo/src/App.vue b/demo/src/App.vue index 3e7bb4a..ee62541 100644 --- a/demo/src/App.vue +++ b/demo/src/App.vue @@ -24,7 +24,7 @@ const infuraId = isDev const { open } = useBoard() const { wallet, disconnect, onDisconnect, onAccountsChanged, onChainChanged } = useWallet() -const { address, balance, chainId, isActivated } = useEthers() +const { address, balance, chainId, isActivated, dnsAlias } = useEthers() const { onActivated, onChanged } = useEthersHooks() onDisconnect(() => { @@ -118,6 +118,7 @@ watch(selectedChainId, async (val, oldVal) => {

{{ shortenAddress(address) }}

{{ displayEther(balance) }} ETH

+

DNS alias(such as ENS): {{ dnsAlias || '-' }}

(null) const signer = ref(null) const network = ref(null) const address = ref('') +const dnsAlias = ref('') const balance = ref(BigInt(0)) const deactivate = () => { @@ -21,6 +22,7 @@ const deactivate = () => { signer.value = null network.value = null address.value = '' + dnsAlias.value = '' balance.value = BigInt(0) } @@ -44,7 +46,7 @@ async function activate(externalProvider: ExternalProvider) { * if you provide an invalid infura id, you can still open the qrcode but can't connect to wallet. * WalletConnect will throw error and keep polling until timeout as follows. */ - let _network = null + let _network: any = null let _address = '' let _balance = BigNumber.from(0) const getData = (timeout: number = 5000) => { @@ -74,6 +76,8 @@ async function activate(externalProvider: ExternalProvider) { network.value = _network address.value = _address balance.value = _balance.toBigInt() + // Put it outside the timer as the lookup method can occasionally take longer than 5000ms + dnsAlias.value = await lookupDNS(_network?.chainId, _address) const updateBalance = async (interval: number = 10000) => { setInterval(async () => { @@ -87,6 +91,35 @@ async function activate(externalProvider: ExternalProvider) { isActivated.value = true } +/** + * @title Lookup DNS Alias such as ENS + * @returns string + */ +async function lookupDNS( + chainId: number, + address: string, + _provider?: Web3Provider, +) { + try { + switch (chainId) { + /* Ethereum */ + case 1: + case 3: + case 4: + case 5: + // ens will return the primary domain set by user. + const _ens = await (_provider || provider.value)?.lookupAddress(address) + return _ens || '' + // case xxxx: // Another or Custom DNS + default: + return '' + } + } catch (err) { + // console.log('look err', err) + return '' + } +} + export function useEthers() { const chainId = computed(() => network.value?.chainId) @@ -97,6 +130,7 @@ export function useEthers() { signer: signer as Ref, network, address, + dnsAlias, balance, // getters @@ -105,5 +139,6 @@ export function useEthers() { // methods activate, deactivate, + lookupDNS, } }