diff --git a/packages/app/src/views/AddModule/wizards/KlerosRealityModule/KlerosRealityModuleModal.tsx b/packages/app/src/views/AddModule/wizards/KlerosRealityModule/KlerosRealityModuleModal.tsx index 76b8cc2b..a044cc30 100644 --- a/packages/app/src/views/AddModule/wizards/KlerosRealityModule/KlerosRealityModuleModal.tsx +++ b/packages/app/src/views/AddModule/wizards/KlerosRealityModule/KlerosRealityModuleModal.tsx @@ -88,6 +88,11 @@ const useStyles = makeStyles((theme) => ({ fill: `yellow !important`, opacity: "100% !important", }, + addSpinner: { + color: `white !important`, + fill: `white !important`, + opacity: "100% !important", + }, detailsContainer: { width: "95%", }, @@ -258,6 +263,8 @@ export const KlerosRealityModuleModal = ({ // (emails.length > 0 || discordKey || (telegramBotToken && telegramChatId)))) emails.length > 0)) + const [deploying, setDeploying] = useState(false) + const validateEns = useCallback(async () => { const address = await mainnetProvider.resolveName(params.snapshotEns) console.log({ address }) @@ -372,6 +379,7 @@ export const KlerosRealityModuleModal = ({ } const handleAddRealityModule = async () => { + setDeploying(true) try { const minimumBond = ethers.utils.parseUnits(params.bond, bondToken.decimals) const args = { @@ -446,6 +454,7 @@ export const KlerosRealityModuleModal = ({ } catch (error) { console.log("Error deploying module: ", error) } + setDeploying(false) } const handleBondChange = (event: React.ChangeEvent) => { @@ -855,6 +864,7 @@ export const KlerosRealityModuleModal = ({ } onClick={() => setStep("form")} > @@ -864,7 +874,14 @@ export const KlerosRealityModuleModal = ({ } + disabled={deploying} + startIcon={ + deploying ? ( + + ) : ( + + ) + } onClick={() => { handleAddRealityModule() }} @@ -872,6 +889,11 @@ export const KlerosRealityModuleModal = ({ Add Module + {deploying && openMonitoring && ( + +
This can take around a minute, please wait...
+
+ )}
)}