fix(extension): #37: add loader to rpc validation (#53)

* fix(extension): #37: add loader to rpc validation * fix(extension): #37: add text for the loader
prax-wallet · Jun 25, 2024 · 4c96ad6 · 4c96ad6
1 parent cc341b6
commit 4c96ad6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/apps/extension/src/shared/components/grpc-endpoint-form/index.tsx b/apps/extension/src/shared/components/grpc-endpoint-form/index.tsx
@@ -1,7 +1,7 @@
 import { FormEvent, useRef } from 'react';
 import { SelectList } from '@repo/ui/components/ui/select-list';
 import { Button } from '@repo/ui/components/ui/button';
-import { Network } from 'lucide-react';
+import { Network, Loader2 } from 'lucide-react';
 import { useGrpcEndpointForm } from './use-grpc-endpoint-form';
 import { ConfirmChangedChainIdDialog } from './confirm-changed-chain-id-dialog';
 import { ChainIdOrError } from './chain-id-or-error';
@@ -29,6 +29,7 @@ export const GrpcEndpointForm = ({
     rpcError,
     isSubmitButtonEnabled,
     isCustomGrpcEndpoint,
+    isValidationLoading,
   } = useGrpcEndpointForm();
   const customGrpcEndpointInput = useRef<HTMLInputElement | null>(null);
 
@@ -98,7 +99,14 @@ export const GrpcEndpointForm = ({
           </div>
 
           <Button variant='gradient' type='submit' disabled={!isSubmitButtonEnabled}>
-            {submitButtonLabel}
+            {isValidationLoading ? (
+              <>
+                <Loader2 className='mr-2 size-4 animate-spin' />
+                Validating RPC
+              </>
+            ) : (
+              submitButtonLabel
+            )}
           </Button>
         </form>
 

diff --git a/apps/extension/src/shared/components/grpc-endpoint-form/use-grpc-endpoint-form.ts b/apps/extension/src/shared/components/grpc-endpoint-form/use-grpc-endpoint-form.ts
@@ -35,6 +35,7 @@ export const useGrpcEndpointForm = () => {
   const [grpcEndpointInput, setGrpcEndpointInput] = useState<string>('');
   const [rpcError, setRpcError] = useState<string>();
   const [isSubmitButtonEnabled, setIsSubmitButtonEnabled] = useState(false);
+  const [isValidationLoading, setIsValidationLoading] = useState(false);
   const [confirmChangedChainIdPromise, setConfirmChangedChainIdPromise] = useState<
     PromiseWithResolvers<void> | undefined
   >();
@@ -56,6 +57,7 @@ export const useGrpcEndpointForm = () => {
       if (!isValidUrl(grpcEndpointInput)) return;
 
       try {
+        setIsValidationLoading(true);
         const trialClient = createPromiseClient(
           AppService,
           createGrpcWebTransport({ baseUrl: grpcEndpointInput }),
@@ -83,6 +85,8 @@ export const useGrpcEndpointForm = () => {
         } else {
           setRpcError('Could not connect to endpoint: ' + String(e));
         }
+      } finally {
+        setIsValidationLoading(false);
       }
     }, 400);
   }, []);
@@ -150,5 +154,6 @@ export const useGrpcEndpointForm = () => {
     onSubmit,
     isSubmitButtonEnabled,
     isCustomGrpcEndpoint,
+    isValidationLoading,
   };
 };