feat: add vns domains on react

examples/sample-react-app/src/App.tsx

@@ -6,7 +6,8 @@ import {
 import { useEffect, useState } from 'react';
 
 function App() {
-    const { account } = useWallet();
+    const { account, accountDomain } = useWallet();
+    console.log('accountDomain', accountDomain);
     const { open, onConnectionStatusChange } = useWalletModal();
     const [buttonText, setButtonText] = useState('Connect Custom Button');
 

examples/sample-react-app/src/main.tsx

@@ -19,8 +19,7 @@ const walletConnectOptions: WalletConnectOptions = {
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <DAppKitProvider
-            nodeUrl={'https://testnet.vechain.org/'}
-            genesis={'test'}
+            nodeUrl={'https://mainnet.vechain.org'}
             usePersistence
             walletConnectOptions={walletConnectOptions}
         >

packages/dapp-kit-react/src/DAppKitProvider.tsx → packages/dapp-kit-react/src/DAppKitProvider/DAppKitProvider.tsx

@@ -1,23 +1,13 @@
-import React, {
-    createContext,
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { DAppKit, WalletSource } from '@vechain/dapp-kit';
 import { DAppKitUI } from '@vechain/dapp-kit-ui';
 import { subscribeKey } from 'valtio/vanilla/utils';
 import { type Certificate } from '@vechain/sdk-core';
-import type { DAppKitProviderOptions, DAppKitContext } from './types';
+import type { DAppKitProviderOptions, DAppKitContext } from '../types';
+import { useVnsDomainByConnex } from '../hooks/useVnsDomain';
+import { Context } from './context';
 
-/**
- * Context
- */
-const Context = createContext<DAppKitContext | undefined>(undefined);
-
-export const DAppKitDataProvider = ({
+export const DAppKitProviderData = ({
     children,
     connex,
 }: {
@@ -68,6 +58,12 @@ export const DAppKitDataProvider = ({
         [],
     );
 
+    const { domain: accountDomain, isLoading: isAccountDomainLoading } =
+        useVnsDomainByConnex({
+            address: account,
+            connex,
+        });
+
     const context: DAppKitContext = useMemo(() => {
         return {
             connex: {
@@ -80,6 +76,8 @@ export const DAppKitDataProvider = ({
                 connect: connex.wallet.connect,
                 availableWallets: connex.wallet.state.availableSources,
                 account,
+                accountDomain,
+                isAccountDomainLoading,
                 source,
                 connectionCertificate,
                 signTypedData: connex.wallet.signTypedData,
@@ -93,11 +91,13 @@ export const DAppKitDataProvider = ({
     }, [
         connex,
         account,
+        accountDomain,
+        isAccountDomainLoading,
         source,
-        closeModal,
+        connectionCertificate,
         openModal,
+        closeModal,
         onModalConnected,
-        connectionCertificate,
     ]);
 
     return <Context.Provider value={context}>{children}</Context.Provider>;
@@ -157,37 +157,6 @@ export const DAppKitProvider = ({
         return null;
     }
     return (
-        <DAppKitDataProvider connex={connex}>{children}</DAppKitDataProvider>
+        <DAppKitProviderData connex={connex}>{children}</DAppKitProviderData>
     );
 };
-
-export const useConnex = (): DAppKitContext['connex'] => {
-    const context = useContext(Context);
-
-    if (!context) {
-        throw new Error('"useConnex" must be used within a ConnexProvider');
-    }
-
-    return context.connex;
-};
-
-export const useWallet = (): DAppKitContext['wallet'] => {
-    const context = useContext(Context);
-
-    if (!context) {
-        throw new Error('"useWallet" must be used within a ConnexProvider');
-    }
-
-    return context.wallet;
-};
-
-export const useWalletModal = (): DAppKitContext['modal'] => {
-    const context = useContext(Context);
-
-    if (!context) {
-        throw new Error(
-            '"useWalletModal" must be used within a ConnexProvider',
-        );
-    }
-    return context.modal;
-};

packages/dapp-kit-react/src/DAppKitProvider/context.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import type { DAppKitContext } from '../types';
+
+export const Context = createContext<DAppKitContext | undefined>(undefined);

packages/dapp-kit-react/src/DAppKitProvider/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useConnex';
+export * from './useWallet';
+export * from './useWalletModal';

packages/dapp-kit-react/src/DAppKitProvider/hooks/useConnex.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { type DAppKitContext } from '../../types';
+import { Context } from '../context';
+
+/**
+ * Hook to get the connex object from the DAppKitProvider
+ */
+export const useConnex = (): DAppKitContext['connex'] => {
+    const context = useContext(Context);
+
+    if (!context) {
+        throw new Error('"useConnex" must be used within a ConnexProvider');
+    }
+
+    return context.connex;
+};

packages/dapp-kit-react/src/DAppKitProvider/hooks/useWallet.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { type DAppKitContext } from '../../types';
+import { Context } from '../context';
+
+/**
+ * Hook to get the wallet object from the DAppKitProvider
+ */
+export const useWallet = (): DAppKitContext['wallet'] => {
+    const context = useContext(Context);
+
+    if (!context) {
+        throw new Error('"useWallet" must be used within a ConnexProvider');
+    }
+
+    return context.wallet;
+};

packages/dapp-kit-react/src/DAppKitProvider/hooks/useWalletModal.ts

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+import { type DAppKitContext } from '../../types';
+import { Context } from '../context';
+
+/**
+ * Hook to get the wallet modal object from the DAppKitProvider
+ */
+export const useWalletModal = (): DAppKitContext['modal'] => {
+    const context = useContext(Context);
+
+    if (!context) {
+        throw new Error(
+            '"useWalletModal" must be used within a ConnexProvider',
+        );
+    }
+    return context.modal;
+};

packages/dapp-kit-react/src/DAppKitProvider/index.ts

@@ -0,0 +1,2 @@
+export * from './DAppKitProvider';
+export * from './hooks';

packages/dapp-kit-react/src/hooks/useVnsDomain.ts

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+import { genesisBlocks } from '@vechain/dapp-kit';
+import { useConnex } from '../DAppKitProvider/hooks/useConnex';
+import type { DAppKitContext } from '../types';
+
+const VNS_RESOLVER = {
+    main: '0xA11413086e163e41901bb81fdc5617c975Fa5a1A',
+    test: '0xc403b8EA53F707d7d4de095f0A20bC491Cf2bc94',
+};
+
+const getNamesABI = {
+    inputs: [
+        {
+            internalType: 'address[]',
+            name: 'addresses',
+            type: 'address[]',
+        },
+    ],
+    name: 'getNames',
+    outputs: [
+        {
+            internalType: 'string[]',
+            name: 'names',
+            type: 'string[]',
+        },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+};
+
+/**
+ * Get the domain of an account
+ */
+const getDomain = async ({
+    address,
+    connex,
+}: {
+    address: string | null;
+    connex: DAppKitContext['connex'];
+}): Promise<string | null> => {
+    if (!address) return null;
+
+    const resolver =
+        connex.thor.genesis.id === genesisBlocks.test.id
+            ? VNS_RESOLVER.test
+            : VNS_RESOLVER.main;
+
+    const res = await connex.thor
+        .account(resolver)
+        .method(getNamesABI)
+        .call([address]);
+
+    const {
+        decoded: { names },
+    } = res;
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    return (names?.[0] as string) || null;
+};
+
+interface UseVnsDomainReturnType {
+    domain: string | null;
+    isLoading: boolean;
+}
+
+/**
+ * Hook to get the domain of an account by passing the connex object
+ */
+export const useVnsDomainByConnex = (props: {
+    address: string | null;
+    connex: DAppKitContext['connex'];
+}): UseVnsDomainReturnType => {
+    const { address, connex } = props;
+    const [domain, setDomain] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        if (address) {
+            setIsLoading(true);
+            getDomain({ address, connex })
+                .then(setDomain)
+                .catch((err) => {
+                    // eslint-disable-next-line no-console
+                    console.error('Error getting domain: ', err);
+                    setDomain(null);
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
+        } else {
+            setDomain(null);
+        }
+    }, [address, connex]);
+
+    return { domain, isLoading };
+};
+
+/**
+ * Hook to get the domain of an account
+ */
+export const useVnsDomain = (
+    address: string | null,
+): UseVnsDomainReturnType => {
+    const connex = useConnex();
+    return useVnsDomainByConnex({ address, connex });
+};

packages/dapp-kit-react/src/index.ts

@@ -1,3 +1,4 @@
 export * from './DAppKitProvider';
 export * from './types';
 export * from './WalletButton';
+export { useVnsDomain } from './hooks/useVnsDomain';

packages/dapp-kit-react/src/types.ts

@@ -41,6 +41,8 @@ export interface DAppKitContext {
         disconnect: () => void;
         connect: () => Promise<ConnectResponse>;
         account: string | null;
+        accountDomain: string | null;
+        isAccountDomainLoading: boolean;
         source: WalletSource | null;
         connectionCertificate: Certificate | null;
         signTypedData: WalletManager['signTypedData'];