From e7f58c0ae3385ad55d8b3d3aea37602e19c8cf28 Mon Sep 17 00:00:00 2001
From: ngoc <ngochc1@gmail.com>
Date: Tue, 13 Aug 2024 17:49:22 +0700
Subject: [PATCH 1/3] Naming Service

---
 .../account-details/account-details.spec.tsx  |  1 +
 .../account-details.stories.tsx               |  1 +
 .../account-details/account-details.styles.ts |  4 +-
 .../account-details/account-details/index.tsx |  6 +++
 .../address-input/address-input.tsx           |  2 +-
 .../src/hooks/use-address-book-input.ts       | 16 ++++++-
 .../adena-extension/src/hooks/use-dns.tsx     | 44 +++++++++++++++++++
 .../popup/wallet/account-details/index.tsx    |  9 ++++
 .../popup/wallet/transfer-summary/index.tsx   |  9 ++--
 .../pages/popup/wallet/wallet-main/index.tsx  |  2 +-
 .../src/router/popup/header/index.tsx         |  2 +-
 .../router/popup/header/top-menu/index.tsx    | 29 +++++++++---
 12 files changed, 108 insertions(+), 17 deletions(-)
 create mode 100644 packages/adena-extension/src/hooks/use-dns.tsx

diff --git a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.spec.tsx b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.spec.tsx
index bc2c1f6e2..cdff58795 100644
--- a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.spec.tsx
+++ b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.spec.tsx
@@ -13,6 +13,7 @@ describe('AccountDetails Component', () => {
       originName: '',
       name: '',
       address: '',
+      dns: '',
       moveGnoscan: () => {
         return;
       },
diff --git a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.stories.tsx b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.stories.tsx
index 734db070e..9f80874f5 100644
--- a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.stories.tsx
+++ b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.stories.tsx
@@ -13,6 +13,7 @@ export const Default: StoryObj<AccountDetailsProps> = {
     originName: '',
     name: '',
     address: '',
+    dns: '',
     moveGnoscan: () => action('moveGnoscan'),
     moveExportPrivateKey: () => action('moveExportPrivateKey'),
     setName: () => action('setName'),
diff --git a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts
index bae45848f..e92db2785 100644
--- a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts
+++ b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts
@@ -25,7 +25,7 @@ export const AccountDetailsWrapper = styled.div`
       border-radius: 8px;
     }
 
-    .qrcode-address-wrapper {
+    .qrcode-address-wrapper , .qrcode-gno-name-wrapper {
       ${mixins.flex({ direction: 'row', justify: 'space-between' })};
       width: 100%;
       height: 42px;
@@ -34,7 +34,7 @@ export const AccountDetailsWrapper = styled.div`
       padding: 12px 18px 12px 16px;
       border-radius: 18px;
 
-      .address {
+      .address, .gno-name {
         display: block;
         width: 100%;
         margin-right: 8px;
diff --git a/packages/adena-extension/src/components/pages/account-details/account-details/index.tsx b/packages/adena-extension/src/components/pages/account-details/account-details/index.tsx
index 4499081e7..ec689410a 100644
--- a/packages/adena-extension/src/components/pages/account-details/account-details/index.tsx
+++ b/packages/adena-extension/src/components/pages/account-details/account-details/index.tsx
@@ -9,6 +9,7 @@ export interface AccountDetailsProps {
   originName: string;
   name: string;
   address: string;
+  dns: string | undefined;
   moveGnoscan: () => void;
   moveExportPrivateKey: () => void;
   setName: (name: string) => void;
@@ -20,6 +21,7 @@ const AccountDetails: React.FC<AccountDetailsProps> = ({
   originName,
   name,
   address,
+  dns,
   setName,
   reset,
   moveGnoscan,
@@ -50,6 +52,10 @@ const AccountDetails: React.FC<AccountDetailsProps> = ({
           <span className='address'>{address}</span>
           <CopyIconButton copyText={address} />
         </div>
+        <div className='qrcode-gno-name-wrapper'>
+          <span className='gno-name'>{dns}</span>
+          <CopyIconButton copyText={dns || ''} />
+        </div>
       </div>
 
       <div className='button-group-wrapper'>
diff --git a/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.tsx b/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.tsx
index d3e766b32..395449e12 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.tsx
@@ -58,7 +58,7 @@ const AddressInput: React.FC<AddressInputProps> = ({
             className='address-input'
             value={address}
             onChange={(event): void => onChangeAddress(event.target.value)}
-            placeholder='Recipient’s Gnoland Address'
+            placeholder='Recipient’s Name Or Address'
             autoComplete='off'
             maxLength={40}
             rows={1}
diff --git a/packages/adena-extension/src/hooks/use-address-book-input.ts b/packages/adena-extension/src/hooks/use-address-book-input.ts
index 37019fc86..62992911a 100644
--- a/packages/adena-extension/src/hooks/use-address-book-input.ts
+++ b/packages/adena-extension/src/hooks/use-address-book-input.ts
@@ -6,6 +6,7 @@ import { formatAddress, formatNickname } from '@common/utils/client-utils';
 import { useNetwork } from './use-network';
 import { addressValidationCheck } from '@common/utils/client-utils';
 import { useAccountName } from './use-account-name';
+import useDNSResolver from './use-dns';
 
 export type UseAddressBookInputHookReturn = {
   opened: boolean;
@@ -53,6 +54,7 @@ export const useAddressBookInput = (): UseAddressBookInputHookReturn => {
       description: string;
     }[]
   >([]);
+  const { resolveDomainToAddress, result } = useDNSResolver();
 
   const updateAddressBook = async (): Promise<void> => {
     const addressBooks = await addressBookService.getAddressBook();
@@ -111,6 +113,18 @@ export const useAddressBookInput = (): UseAddressBookInputHookReturn => {
     return address;
   }, [selected, selectedAddressBook, address]);
 
+  useEffect(() => {
+    const resolveAddress = async () => {
+      if (address.endsWith('.gno')) {
+        console.log(address)
+        await resolveDomainToAddress(address);
+        console.log(result?.address)
+        setAddress(result?.address || address)
+      }
+    };
+    resolveAddress();
+  }, [resolveDomainToAddress, getResultAddress, address, result]);
+
   const onClickInputIcon = useCallback(
     (selected: boolean) => {
       if (selected === false) {
@@ -127,7 +141,7 @@ export const useAddressBookInput = (): UseAddressBookInputHookReturn => {
 
   const onChangeAddress = useCallback(
     (address: string) => {
-      const regex = /^[a-zA-Z0-9]*$/;
+      const regex = /^[a-zA-Z0-9.]*$/;
       if (!regex.test(address)) {
         return;
       }
diff --git a/packages/adena-extension/src/hooks/use-dns.tsx b/packages/adena-extension/src/hooks/use-dns.tsx
new file mode 100644
index 000000000..e5539ff1e
--- /dev/null
+++ b/packages/adena-extension/src/hooks/use-dns.tsx
@@ -0,0 +1,44 @@
+import { useState, useCallback } from 'react';
+import { useWalletContext } from './use-context';
+
+type DNSResult = {
+    address: string;
+    domain: string;
+};
+
+type DNSResolverHook = {
+    resolveDomainToAddress: (domain: string) => Promise<void>;
+    resolveAddressToDomain: (address: string) => Promise<void>;
+    result: DNSResult | null;
+    error: string | null;
+};
+
+function useDNSResolver(): DNSResolverHook {
+    const { gnoProvider } = useWalletContext();
+    const [error, setError] = useState<string | null>(null);
+    const [result, setResult] = useState<DNSResult | null>(null);
+
+    const resolveDomainToAddress = useCallback(async (domain: string) => {
+        try {
+            const result = await gnoProvider?.evaluateExpression("gno.land/r/demo/domain/resolver", `Resolve("${domain}")`)
+            const address = result?.split('"')[1];
+            setResult({ domain, address: address || '' });
+        } catch (err) {
+            setError((err as Error).message);
+        }
+    }, [gnoProvider]);
+
+    const resolveAddressToDomain = useCallback(async (address: string) => {
+        try {
+            const result = await gnoProvider?.evaluateExpression("gno.land/r/demo/domain/resolver", `GetDomainName("${address}")`)
+            const domain = result?.split('"')[1];
+            setResult({ domain: domain || '', address });
+        } catch (err) {
+            setError((err as Error).message);
+        }
+    }, [gnoProvider]);
+
+    return { resolveDomainToAddress, resolveAddressToDomain, result, error };
+}
+
+export default useDNSResolver;
diff --git a/packages/adena-extension/src/pages/popup/wallet/account-details/index.tsx b/packages/adena-extension/src/pages/popup/wallet/account-details/index.tsx
index 4d8cedeab..12ee527cb 100644
--- a/packages/adena-extension/src/pages/popup/wallet/account-details/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/account-details/index.tsx
@@ -15,6 +15,7 @@ import {
 } from '@common/constants/storage.constant';
 import { SCANNER_URL } from '@common/constants/resource.constant';
 import { makeQueryString } from '@common/utils/string-utils';
+import useDNSResolver from '@hooks/use-dns';
 
 const ACCOUNT_NAME_LENGTH_LIMIT = 23;
 
@@ -27,6 +28,13 @@ const AccountDetailsContainer: React.FC = () => {
   const [originName, setOriginName] = useState('');
   const [name, setName] = useState('');
   const [address, setAddress] = useState<string>('');
+  const { resolveAddressToDomain, result } = useDNSResolver();
+
+  useEffect(() => {
+    if (address) {
+      resolveAddressToDomain(address);
+    }
+  }, [address, resolveAddressToDomain]);
 
   const account = useMemo(() => {
     return accounts.find((current) => current.id === accountId);
@@ -94,6 +102,7 @@ const AccountDetailsContainer: React.FC = () => {
       <AccountDetails
         originName={originName}
         name={name}
+        dns={result?.domain}
         address={address}
         hasPrivateKey={hasPrivateKey}
         moveGnoscan={moveGnoscan}
diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx
index 1c7111bbf..1b6ab7c82 100644
--- a/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/transfer-summary/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import BigNumber from 'bignumber.js';
 import styled from 'styled-components';
 
@@ -16,6 +16,7 @@ import { useNetwork } from '@hooks/use-network';
 
 import mixins from '@styles/mixins';
 import useAppNavigate from '@hooks/use-app-navigate';
+import useDNSResolver from '@hooks/use-dns';
 
 const TransferSummaryLayout = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'normal' })};
@@ -35,6 +36,7 @@ const TransferSummaryContainer: React.FC = () => {
   const [isSent, setIsSent] = useState(false);
   const [isErrorNetworkFee, setIsErrorNetworkFee] = useState(false);
 
+
   const getTransferBalance = useCallback(() => {
     const { value, denom } = summaryInfo.transferAmount;
     return {
@@ -48,9 +50,8 @@ const TransferSummaryContainer: React.FC = () => {
     if (!isNativeTokenModel(tokenMetainfo)) {
       return;
     }
-    const sendAmount = `${BigNumber(transferAmount.value).shiftedBy(tokenMetainfo.decimals)}${
-      tokenMetainfo.denom
-    }`;
+    const sendAmount = `${BigNumber(transferAmount.value).shiftedBy(tokenMetainfo.decimals)}${tokenMetainfo.denom
+      }`;
     return TransactionMessage.createMessageOfBankSend({
       fromAddress: currentAddress || '',
       toAddress,
diff --git a/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx b/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx
index c803bb516..7caaef6dc 100644
--- a/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/wallet-main/index.tsx
@@ -32,7 +32,7 @@ const Wrapper = styled.main`
     position: fixed;
     width: 100%;
     height: auto;
-    top: 48px;
+    top: 70px;
     left: 0;
     background-color: ${({ theme }): string => theme.neutral._8};
   }
diff --git a/packages/adena-extension/src/router/popup/header/index.tsx b/packages/adena-extension/src/router/popup/header/index.tsx
index d601fb63d..524574e06 100644
--- a/packages/adena-extension/src/router/popup/header/index.tsx
+++ b/packages/adena-extension/src/router/popup/header/index.tsx
@@ -20,7 +20,7 @@ const Wrapper = styled.header`
   display: flex;
   flex-shrink: 0;
   width: 100%;
-  height: 48px;
+  height: 70px;
   background-color: ${getTheme('neutral', '_8')};
   position: sticky;
   top: 0px;
diff --git a/packages/adena-extension/src/router/popup/header/top-menu/index.tsx b/packages/adena-extension/src/router/popup/header/top-menu/index.tsx
index a8d6d9a8f..cf1be10b6 100644
--- a/packages/adena-extension/src/router/popup/header/top-menu/index.tsx
+++ b/packages/adena-extension/src/router/popup/header/top-menu/index.tsx
@@ -15,6 +15,7 @@ import mixins from '@styles/mixins';
 import { createPopupWindow } from '@common/utils/browser-utils';
 import useSessionParams from '@hooks/use-session-state';
 import { PopWindowButton } from '@components/atoms/pop-window-button';
+import useDNSResolver from '@hooks/use-dns';
 
 const Wrapper = styled.div`
   width: 100%;
@@ -65,6 +66,13 @@ export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => {
   const [currentAccountName, setCurrentAccountName] = useState('');
   const { accountNames } = useAccountName();
   const { currentNetwork } = useNetwork();
+  const { resolveAddressToDomain, result } = useDNSResolver();
+
+  useEffect(() => {
+    if (currentAddress) {
+      resolveAddressToDomain(currentAddress);
+    }
+  }, [currentAddress, resolveAddressToDomain]);
 
   useEffect(() => {
     initAccountInfo();
@@ -141,14 +149,21 @@ export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => {
         <HamburgerMenuBtn type='button' onClick={toggleMenuHandler} />
         <StyledCenterWrapper>
           <StatusDot status={isEstablish} tooltipText={tooltipTextMaker(hostname, isEstablish)} />
-          <CopyTooltip copyText={currentAddress || ''}>
-            <Text type='body1Bold' display='inline-flex'>
-              {formatNickname(currentAccountName, 12)}
-              <Text type='body1Reg' color={theme.neutral.a}>
-                {` (${formatAddress(currentAddress || '')})`}
+          <div>
+            <CopyTooltip copyText={currentAddress || ''}>
+              <Text type='body1Bold' display='inline-flex'>
+                {formatNickname(currentAccountName, 12)}
+                <Text type='body1Reg' color={theme.neutral.a}>
+                  {` (${formatAddress(currentAddress || '')})`}
+                </Text>
+              </Text>
+            </CopyTooltip>
+            <CopyTooltip copyText={result?.domain || ''}>
+              <Text type='body1Reg' >
+                {`${formatAddress(result?.domain || '')}`}
               </Text>
-            </Text>
-          </CopyTooltip>
+            </CopyTooltip>
+          </div>
         </StyledCenterWrapper>
         <StyledRightWrapper>
           {isPopup ? <div /> : <PopWindowButton onClick={popupWindow} />}

From 8aba87a5554d6755742a3b8ae6e5613400c5fd7b Mon Sep 17 00:00:00 2001
From: ngoc <ngochc1@gmail.com>
Date: Fri, 6 Sep 2024 09:53:31 +0700
Subject: [PATCH 2/3] Update transfer flow

---
 .../adena-extension/.storybook/preview.tsx    |  2 +-
 packages/adena-extension/index.css            |  2 +-
 .../transfer-input/transfer-input.spec.tsx    |  2 +-
 .../transfer-input/transfer-input.stories.tsx |  2 +-
 .../transfer-input/transfer-input.tsx         | 17 +++++--
 .../src/hooks/use-address-book-input.ts       | 45 ++++++++++---------
 .../adena-extension/src/hooks/use-dns.tsx     | 30 ++++++++++---
 .../popup/wallet/transfer-input/index.tsx     |  8 ++--
 .../src/styles/global-style.ts                |  4 +-
 9 files changed, 72 insertions(+), 40 deletions(-)

diff --git a/packages/adena-extension/.storybook/preview.tsx b/packages/adena-extension/.storybook/preview.tsx
index 89e2e54c3..010f97506 100644
--- a/packages/adena-extension/.storybook/preview.tsx
+++ b/packages/adena-extension/.storybook/preview.tsx
@@ -10,7 +10,7 @@ const extensionViewport = {
   name: 'Adena Extension',
   styles: {
     width: '360px',
-    height: '540px',
+    height: '566px',
   },
 };
 
diff --git a/packages/adena-extension/index.css b/packages/adena-extension/index.css
index 70f6a6c00..8aa2008e7 100644
--- a/packages/adena-extension/index.css
+++ b/packages/adena-extension/index.css
@@ -146,7 +146,7 @@ body {
   width: 100%;
   height: 100%;
   min-width: 360px;
-  min-height: 540px;
+  min-height: 566px;
   padding: 0;
   margin: 0;
   font-family: 'Poppins', sans-serif;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx
index 89f5e846f..01bdc4fc6 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.spec.tsx
@@ -51,7 +51,7 @@ describe('TransferInput Component', () => {
           return;
         },
       },
-      isNext: true,
+      isNext: Promise.resolve(true),
       hasBackButton: true,
       onClickBack: () => {
         return;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.stories.tsx b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.stories.tsx
index 8d8840310..6cb1287dc 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.stories.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.stories.tsx
@@ -41,7 +41,7 @@ export const Default: StoryObj<TransferInputProps> = {
       onChangeAddress: action('change address'),
       onClickAddressBook: action('click address book'),
     },
-    isNext: true,
+    isNext: Promise.resolve(true),
     hasBackButton: true,
     onClickBack: action('click back'),
     onClickCancel: action('click cancel'),
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx
index 6175caa47..81c37c24c 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { SubHeader } from '@components/atoms';
 import { TransferInputWrapper } from './transfer-input.styles';
@@ -36,7 +36,7 @@ export interface TransferInputProps {
     onChangeAmount: (value: string) => void;
     onClickMax: () => void;
   };
-  isNext: boolean;
+  isNext: Promise<boolean>;
   hasBackButton: boolean;
   onClickBack: () => void;
   onClickCancel: () => void;
@@ -53,6 +53,17 @@ const TransferInput: React.FC<TransferInputProps> = ({
   onClickCancel,
   onClickNext,
 }) => {
+
+  const [canNext, setCanNext] = useState(false);
+
+  useEffect(() => {
+    const checkNext = async () => {
+      const result = await isNext;
+      setCanNext(result);
+    };
+    checkNext();
+  }, [isNext]);
+
   return (
     <TransferInputWrapper>
       {hasBackButton ? (
@@ -77,7 +88,7 @@ const TransferInput: React.FC<TransferInputProps> = ({
       </div>
       <div className='button-group'>
         <button onClick={onClickCancel}>Cancel</button>
-        <button className={isNext ? 'next' : 'next disabled'} onClick={onClickNext}>
+        <button className={canNext ? 'next' : 'next disabled'} onClick={onClickNext}>
           Next
         </button>
       </div>
diff --git a/packages/adena-extension/src/hooks/use-address-book-input.ts b/packages/adena-extension/src/hooks/use-address-book-input.ts
index 62992911a..4711d8cd1 100644
--- a/packages/adena-extension/src/hooks/use-address-book-input.ts
+++ b/packages/adena-extension/src/hooks/use-address-book-input.ts
@@ -22,7 +22,7 @@ export type UseAddressBookInputHookReturn = {
     name: string;
     description: string;
   }[];
-  resultAddress: string;
+  resultAddress: Promise<string>;
   setSelected: (selected: boolean) => void;
   setSelectedAddressBook: (selectedAddressBook: AddressBookItem | null) => void;
   setAddress: (address: string) => void;
@@ -30,7 +30,7 @@ export type UseAddressBookInputHookReturn = {
   onClickInputIcon: (selected: boolean) => void;
   onChangeAddress: (address: string) => void;
   onClickAddressBook: (addressBookId: string) => void;
-  validateAddressBookInput: () => boolean;
+  validateAddressBookInput: () => Promise<boolean>;
   validateEqualAddress: () => Promise<boolean>;
 };
 
@@ -106,24 +106,29 @@ export const useAddressBookInput = (): UseAddressBookInputHookReturn => {
     };
   }, [selectedAddressBook]);
 
-  const getResultAddress = useCallback(() => {
+  const getResultAddress = useCallback(async () => {
+    if (address.endsWith('.gno')) {
+      const resolvedAddress = await resolveDomainToAddress(address);
+      if (resolvedAddress)
+        return resolvedAddress;
+    }
     if (selected) {
       return selectedAddressBook?.address ?? '';
     }
     return address;
-  }, [selected, selectedAddressBook, address]);
-
-  useEffect(() => {
-    const resolveAddress = async () => {
-      if (address.endsWith('.gno')) {
-        console.log(address)
-        await resolveDomainToAddress(address);
-        console.log(result?.address)
-        setAddress(result?.address || address)
-      }
-    };
-    resolveAddress();
-  }, [resolveDomainToAddress, getResultAddress, address, result]);
+  }, [resolveDomainToAddress, selected, selectedAddressBook, address]);
+
+  // useEffect(() => {
+  //   const resolveAddress = async () => {
+  //     if (address.endsWith('.gno')) {
+  //       console.log(address)
+  //       await resolveDomainToAddress(address);
+  //       console.log(result?.address)
+  //       setAddress(result?.address || address)
+  //     }
+  //   };
+  //   resolveAddress();
+  // }, [resolveDomainToAddress, getResultAddress, address, result]);
 
   const onClickInputIcon = useCallback(
     (selected: boolean) => {
@@ -183,8 +188,8 @@ export const useAddressBookInput = (): UseAddressBookInputHookReturn => {
     [addressBooks, wallet?.accounts],
   );
 
-  const validateAddressBookInput = useCallback(() => {
-    const address = getResultAddress();
+  const validateAddressBookInput = useCallback(async () => {
+    const address = await getResultAddress();
     if (!addressValidationCheck(address)) {
       setHasError(true);
       setErrorMessage('Invalid Address');
@@ -192,10 +197,10 @@ export const useAddressBookInput = (): UseAddressBookInputHookReturn => {
     }
     clearError();
     return true;
-  }, [selected, selectedAddressBook, address]);
+  }, [resolveDomainToAddress, result, selected, selectedAddressBook, address]);
 
   const validateEqualAddress = useCallback(async () => {
-    const address = getResultAddress();
+    const address = await getResultAddress();
     const currentAddress = await getCurrentAddress(currentNetwork?.addressPrefix);
     if (address === currentAddress) {
       setHasError(true);
diff --git a/packages/adena-extension/src/hooks/use-dns.tsx b/packages/adena-extension/src/hooks/use-dns.tsx
index e5539ff1e..01c5b4404 100644
--- a/packages/adena-extension/src/hooks/use-dns.tsx
+++ b/packages/adena-extension/src/hooks/use-dns.tsx
@@ -7,7 +7,7 @@ type DNSResult = {
 };
 
 type DNSResolverHook = {
-    resolveDomainToAddress: (domain: string) => Promise<void>;
+    resolveDomainToAddress: (domain: string) => Promise<string | null>;
     resolveAddressToDomain: (address: string) => Promise<void>;
     result: DNSResult | null;
     error: string | null;
@@ -20,21 +20,37 @@ function useDNSResolver(): DNSResolverHook {
 
     const resolveDomainToAddress = useCallback(async (domain: string) => {
         try {
-            const result = await gnoProvider?.evaluateExpression("gno.land/r/demo/domain/resolver", `Resolve("${domain}")`)
-            const address = result?.split('"')[1];
-            setResult({ domain, address: address || '' });
+            if (!gnoProvider) throw new Error('gnoProvider is not available');
+
+            const response = await gnoProvider.evaluateExpression("gno.land/r/demo/domain/resolver", `Resolve("${domain}")`);
+            const address = response?.split('"')[1] || '';
+
+            if (!address) throw new Error('Failed to resolve address');
+
+            setResult({ domain, address });
+            return address;  // Return the resolved address
         } catch (err) {
             setError((err as Error).message);
+            setResult(null);
+            return null;  // Return null on failure
         }
     }, [gnoProvider]);
 
+
     const resolveAddressToDomain = useCallback(async (address: string) => {
+        setError(null);  // Clear previous errors
         try {
-            const result = await gnoProvider?.evaluateExpression("gno.land/r/demo/domain/resolver", `GetDomainName("${address}")`)
-            const domain = result?.split('"')[1];
-            setResult({ domain: domain || '', address });
+            if (!gnoProvider) throw new Error('gnoProvider is not available');
+
+            const response = await gnoProvider.evaluateExpression("gno.land/r/demo/domain/resolver", `GetDomainName("${address}")`);
+            const domain = response?.split('"')[1] || '';
+
+            if (!domain) throw new Error('Failed to resolve domain');
+
+            setResult({ domain, address });
         } catch (err) {
             setError((err as Error).message);
+            setResult(null);  // Clear the result on error
         }
     }, [gnoProvider]);
 
diff --git a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
index 236eb8285..2ece87363 100644
--- a/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
+++ b/packages/adena-extension/src/pages/popup/wallet/transfer-input/index.tsx
@@ -103,11 +103,11 @@ const TransferInputContainer: React.FC = () => {
     });
   };
 
-  const isNext = useCallback(() => {
+  const isNext = useCallback(async () => {
     if (balanceInput.amount === '' || BigNumber(balanceInput.amount).isLessThanOrEqualTo(0)) {
       return false;
     }
-    if (addressBookInput.resultAddress === '') {
+    if (await addressBookInput.resultAddress === '') {
       return false;
     }
     return true;
@@ -129,7 +129,7 @@ const TransferInputContainer: React.FC = () => {
       return;
     }
     const validAddress =
-      addressBookInput.validateAddressBookInput() &&
+      await addressBookInput.validateAddressBookInput() &&
       (isNativeTokenModel(tokenMetainfo) || (await addressBookInput.validateEqualAddress()));
     const validBalance = balanceInput.validateBalanceInput();
     if (validAddress && validBalance) {
@@ -138,7 +138,7 @@ const TransferInputContainer: React.FC = () => {
         state: {
           isTokenSearch,
           tokenMetainfo,
-          toAddress: addressBookInput.resultAddress,
+          toAddress: await addressBookInput.resultAddress,
           transferAmount: {
             value: balanceInput.amount,
             denom: balanceInput.denom,
diff --git a/packages/adena-extension/src/styles/global-style.ts b/packages/adena-extension/src/styles/global-style.ts
index 34fe56b75..b49ef6436 100644
--- a/packages/adena-extension/src/styles/global-style.ts
+++ b/packages/adena-extension/src/styles/global-style.ts
@@ -29,7 +29,7 @@ export const GlobalPopupStyle = createGlobalStyle`
     width: 100%;
     height: 100%;
     min-width: 360px;
-    min-height: 540px;
+    min-height: 566px;
     width: 100%;
     height: 100%;
     padding: 0;
@@ -54,7 +54,7 @@ export const GlobalPopupStyle = createGlobalStyle`
     width: 100%;
     height: 100%;
     min-width: 360px;
-    min-height: 540px;
+    min-height: 566px;
     min-height: 492px;
     height: 100%;
     padding: 0px 20px 24px;

From 6b167715e1881e9bc3f3c33f363061b7e762fe0e Mon Sep 17 00:00:00 2001
From: ngoc <ngochc1@gmail.com>
Date: Tue, 10 Sep 2024 08:12:44 +0700
Subject: [PATCH 3/3] Update realm version

---
 packages/adena-extension/src/hooks/use-dns.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/adena-extension/src/hooks/use-dns.tsx b/packages/adena-extension/src/hooks/use-dns.tsx
index 01c5b4404..a209d985d 100644
--- a/packages/adena-extension/src/hooks/use-dns.tsx
+++ b/packages/adena-extension/src/hooks/use-dns.tsx
@@ -22,7 +22,7 @@ function useDNSResolver(): DNSResolverHook {
         try {
             if (!gnoProvider) throw new Error('gnoProvider is not available');
 
-            const response = await gnoProvider.evaluateExpression("gno.land/r/demo/domain/resolver", `Resolve("${domain}")`);
+            const response = await gnoProvider.evaluateExpression("gno.land/r/varmeta/demo/v1/domain/resolver", `Resolve("${domain}")`);
             const address = response?.split('"')[1] || '';
 
             if (!address) throw new Error('Failed to resolve address');
@@ -42,7 +42,7 @@ function useDNSResolver(): DNSResolverHook {
         try {
             if (!gnoProvider) throw new Error('gnoProvider is not available');
 
-            const response = await gnoProvider.evaluateExpression("gno.land/r/demo/domain/resolver", `GetDomainName("${address}")`);
+            const response = await gnoProvider.evaluateExpression("gno.land/r/varmeta/demo/v1/domain/resolver", `GetDomainName("${address}")`);
             const domain = response?.split('"')[1] || '';
 
             if (!domain) throw new Error('Failed to resolve domain');