fix(idea/frontend): dns ux (#1619)

gear-tech · Aug 15, 2024 · 6238947 · 6238947
1 parent d7826a0
commit 6238947
Show file tree

Hide file tree

Showing 9 changed files with 8 additions and 105 deletions.
diff --git a/idea/frontend/src/features/dns/hooks/use-dns-filters.ts b/idea/frontend/src/features/dns/hooks/use-dns-filters.ts
@@ -22,6 +22,7 @@ function useDnsFilters() {
     return owner === 'all' ? {} : { createdBy: decodedAddress };
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const params = useMemo(() => ({ ...getOwnerParams(), orderByField, orderByDirection }), [values, account]);
 
   return [values, params, setValues] as const;

diff --git a/idea/frontend/src/features/dns/hooks/use-send-dns-transaction.ts b/idea/frontend/src/features/dns/hooks/use-send-dns-transaction.ts
@@ -1,4 +1,4 @@
-import { useAccount, useAlert, usePrepareProgramTransaction, useProgram } from '@gear-js/react-hooks';
+import { useAccount, useAlert, useBalanceFormat, usePrepareProgramTransaction, useProgram } from '@gear-js/react-hooks';
 import { useQuery } from '@tanstack/react-query';
 
 import { Method } from '@/features/explorer';
@@ -15,6 +15,7 @@ type FunctionName = typeof FUNCTION_NAME[keyof typeof FUNCTION_NAME];
 
 const useSendDnsTransaction = <T extends FunctionName>(functionName: T) => {
   const { account } = useAccount();
+  const { getFormattedBalance } = useBalanceFormat();
   const alert = useAlert();
 
   const [isLoading, enableLoading, disableLoading] = useLoading();
@@ -43,9 +44,10 @@ const useSendDnsTransaction = <T extends FunctionName>(functionName: T) => {
 
     try {
       const { transaction, awaited } = await prepareTransactionAsync({ args });
+      const formattedFee = getFormattedBalance(awaited.fee.toString());
 
       showModal('transaction', {
-        fee: awaited.fee.toString(),
+        fee: `${formattedFee.value} ${formattedFee.unit}`,
         name: TransactionName.SendMessage,
         addressFrom: account.address,
         addressTo: id,

diff --git a/idea/frontend/src/features/dns/ui/remove-admin/remove-admin.tsx b/idea/frontend/src/features/dns/ui/remove-admin/remove-admin.tsx
@@ -19,7 +19,7 @@ type Props = {
 function RemoveAdmin({ name, address, onSuccess }: Props) {
   const [isModalOpen, openModal, closeModal] = useModalState();
 
-  const { sendTransaction } = useSendDnsTransaction(FUNCTION_NAME.REMOVE_ADMIN);
+  const { sendTransaction, isLoading } = useSendDnsTransaction(FUNCTION_NAME.REMOVE_ADMIN);
 
   const handleSubmit = () => {
     const _onSuccess = () => {
@@ -43,6 +43,7 @@ function RemoveAdmin({ name, address, onSuccess }: Props) {
           )} will be removed. Would you like to proceed?`}
           onSubmit={handleSubmit}
           close={closeModal}
+          isLoading={isLoading}
         />
       )}
     </>

diff --git a/idea/frontend/src/features/sortBy/index.ts b/idea/frontend/src/features/sortBy/index.ts
diff --git a/idea/frontend/src/features/sortBy/model/consts.ts b/idea/frontend/src/features/sortBy/model/consts.ts
diff --git a/idea/frontend/src/features/sortBy/ui/SortBy.module.scss b/idea/frontend/src/features/sortBy/ui/SortBy.module.scss
diff --git a/idea/frontend/src/features/sortBy/ui/SortBy.tsx b/idea/frontend/src/features/sortBy/ui/SortBy.tsx
diff --git a/idea/frontend/src/pages/dns/dns.tsx b/idea/frontend/src/pages/dns/dns.tsx
@@ -41,7 +41,7 @@ const Dns = () => {
       <Filters initialValues={filterValues} onSubmit={handleFiltersSubmit} title="Sort & Filter">
         <FilterGroup name="orderByDirection" onSubmit={handleFiltersSubmit}>
           <Radio name="orderByDirection" value="DESC" label="Newest first" onSubmit={handleFiltersSubmit} />
-          {account && <Radio name="orderByDirection" value="ASC" label="Oldest first" onSubmit={handleFiltersSubmit} />}
+          <Radio name="orderByDirection" value="ASC" label="Oldest first" onSubmit={handleFiltersSubmit} />
         </FilterGroup>
 
         <FilterGroup name="owner" onSubmit={handleFiltersSubmit} title="dDNS ownership">

diff --git a/idea/frontend/src/shared/assets/images/actions/arrowDown.svg b/idea/frontend/src/shared/assets/images/actions/arrowDown.svg