rf: manual relay action message

icon-project · Nov 27, 2024 · c391fbc · c391fbc
1 parent 3278bac
commit c391fbc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/src/components/Page/Dashboard/ManualRelayForm.tsx b/src/components/Page/Dashboard/ManualRelayForm.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import Loading from '@/components/Loading/Loading'
 import { executeRelay, findMissedBy } from '@/utils/relay-action'
 import React, { useState } from 'react'
 import { Alert, Button, Card, Col, Container, Form, FormControl, InputGroup, Row } from 'react-bootstrap'
@@ -12,6 +13,7 @@ const ManualRelayForm: React.FC<ManualRelayFormProps> = ({ chainId }) => {
     const [txHash, setTxHash] = useState('')
     const [showNotification, setShowNotification] = useState(false)
     const [notificationMessage, setNotificationMessage] = useState('')
+    const [loading, setLoading] = useState(false)
 
     const handleCloseNotification = () => setShowNotification(false)
     const handleShowNotification = (message: string) => {
@@ -21,15 +23,19 @@ const ManualRelayForm: React.FC<ManualRelayFormProps> = ({ chainId }) => {
 
     const handleRelay = async (event: React.FormEvent) => {
         event.preventDefault()
+        setLoading(true)
+
         const missedRelayers = await findMissedBy(txHash)
         if (!missedRelayers || missedRelayers.length === 0) {
             handleShowNotification('No relayer found for this transaction hash that can execute it')
+            setLoading(false)
             return
         }
 
         const success = await executeRelay(missedRelayers)
+        setLoading(false)
         if (success) {
-            handleShowNotification('Transaction executed successfully')
+            handleShowNotification('Transaction is in the queue for execution')
         } else {
             handleShowNotification('Failed to execute the transaction')
         }
@@ -44,20 +50,24 @@ const ManualRelayForm: React.FC<ManualRelayFormProps> = ({ chainId }) => {
                             <h4>Manual Relay</h4>
                         </Card.Header>
                         <Card.Body>
-                            <Form onSubmit={handleRelay}>
-                                <InputGroup className="mb-3">
-                                    <FormControl
-                                        placeholder="Transaction Hash"
-                                        aria-label="Transaction Hash"
-                                        aria-describedby="basic-addon2"
-                                        value={txHash}
-                                        onChange={(e) => setTxHash(e.target.value)}
-                                    />
-                                    <Button variant="primary" type="submit" disabled={txHash === ''}>
-                                        Relay
-                                    </Button>
-                                </InputGroup>
-                            </Form>
+                            {loading ? (
+                                <Loading />
+                            ) : (
+                                <Form onSubmit={handleRelay}>
+                                    <InputGroup className="mb-3">
+                                        <FormControl
+                                            placeholder="Transaction Hash"
+                                            aria-label="Transaction Hash"
+                                            aria-describedby="basic-addon2"
+                                            value={txHash}
+                                            onChange={(e) => setTxHash(e.target.value)}
+                                        />
+                                        <Button variant="primary" type="submit">
+                                            Relay
+                                        </Button>
+                                    </InputGroup>
+                                </Form>
+                            )}
                             <Alert variant="info" show={showNotification} onClose={handleCloseNotification} dismissible>
                                 {notificationMessage}
                             </Alert>

diff --git a/src/components/Page/Dashboard/MessageModal.tsx b/src/components/Page/Dashboard/MessageModal.tsx
@@ -42,7 +42,7 @@ const MessageModal: React.FC<MessageModalProps> = ({ show, handleClose, message
         const success = await executeRelay(missedRelayers)
         setLoading(false)
         if (success) {
-            handleShowModal('Message executed successfully')
+            handleShowModal('Transaction is in the queue for execution')
         } else {
             handleShowModal('Failed to execute the message')
         }