dynamically update deploy button text based on verification checkbox state

Author: hsy822

libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx

@@ -415,6 +415,13 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
       evmVersion = JSON.parse(loadedContractData.metadata).settings.evmVersion
     }
   } catch (err) {}
+
+  const deployButtonTitle = isVerifyChecked
+    ? intl.formatMessage({ id: 'udapp.deployAndVerify', defaultMessage: 'Deploy & Verify' })
+    : intl.formatMessage({ id: 'udapp.deploy' })
+
+  const deployButtonWidthClass = isVerifyChecked ? 'w-auto' : 'w-50'
+
   return (
     <div className="udapp_container mb-2" data-id="contractDropdownContainer">
       <div className="d-flex justify-content-between">
@@ -492,7 +499,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
             </span>
           }
         >
-          <span className="udapp_evmVersion badge alert-warning">
+          <span className="udapp_evmVersion badge alert-warning mb-2">
             <FormattedMessage id="udapp.evmVersion" />: {evmVersion}
           </span>
         </CustomTooltip>
@@ -501,8 +508,14 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
         <div className="udapp_deployDropdown">
           {((contractList[currentFile] && contractList[currentFile].filter((contract) => contract)) || []).length > 0 && loadedContractData && (
             <div>
+              {isNetworkSupported && (
+                <VerificationSettingsUI
+                  isVerifyChecked={isVerifyChecked}
+                  onVerifyCheckedChange={handleVerifyCheckedChange}
+                />
+              )}
               <ContractGUI
-                title={intl.formatMessage({ id: 'udapp.deploy' })}
+                title={deployButtonTitle}
                 getCompilerDetails={props.getCompilerDetails}
                 isDeploy={true}
                 deployOption={deployOptions[currentFile] && deployOptions[currentFile][currentContract] ? deployOptions[currentFile][currentContract].options : null}
@@ -512,7 +525,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
                 funcABI={constructorInterface}
                 clickCallBack={clickCallback}
                 inputs={constructorInputs}
-                widthClass="w-50"
+                widthClass={deployButtonWidthClass}
                 evmBC={loadedContractData.bytecodeObject}
                 lookupOnly={false}
                 proxy={props.proxy}
@@ -528,12 +541,6 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
                 plugin={props.plugin}
                 runTabState={props.runTabState}
               />
-              {isNetworkSupported && (
-                <VerificationSettingsUI
-                  isVerifyChecked={isVerifyChecked}
-                  onVerifyCheckedChange={handleVerifyCheckedChange}
-                />
-              )}
             </div>
           )}
         </div>

libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

@@ -32,6 +32,7 @@ export function ContractGUI(props: ContractGUIProps) {
   const multiFields = useRef<Array<HTMLInputElement | null>>([])
   const initializeFields = useRef<Array<HTMLInputElement | null>>([])
   const basicInputRef = useRef<HTMLInputElement>()
+  const [baseTitleForDataId, setBaseTitleForDataId] = useState<string>('')
 
   const intl = useIntl()
   useEffect(() => {
@@ -42,19 +43,34 @@ export function ContractGUI(props: ContractGUIProps) {
   }, [props.deployOption])
 
   useEffect(() => {
+    let newTitle = ''
+    let newBaseTitle = ''
+
     if (props.title) {
-      setTitle(props.title)
+      newTitle = props.title
     } else if (props.funcABI.name) {
-      setTitle(props.funcABI.name)
+      newTitle = props.funcABI.name
     } else {
-      setTitle(props.funcABI.type === 'receive' ? '(receive)' : '(fallback)')
+      newTitle = props.funcABI.type === 'receive' ? '(receive)' : '(fallback)'
     }
+
+    if (props.isDeploy) {
+      newBaseTitle = intl.formatMessage({ id: 'udapp.deploy', defaultMessage: 'Deploy' })
+    } else if (props.funcABI.name) {
+      newBaseTitle = props.funcABI.name
+    } else {
+      newBaseTitle = props.funcABI.type === 'receive' ? '(receive)' : '(fallback)'
+    }
+
+    setTitle(newTitle)
+    setBaseTitleForDataId(newBaseTitle)
+
     setBasicInput('')
     // we have the reset the fields before resetting the previous references.
     basicInputRef.current.value = ''
     multiFields.current.filter((el) => el !== null && el !== undefined).forEach((el) => (el.value = ''))
     multiFields.current = []
-  }, [props.title, props.funcABI])
+  }, [props.title, props.funcABI, props.isDeploy, intl])
 
   useEffect(() => {
     if (props.lookupOnly) {
@@ -63,26 +79,26 @@ export function ContractGUI(props: ContractGUIProps) {
         title: title + ' - call',
         content: 'call',
         classList: 'btn-primary',
-        dataId: title + ' - call'
+        dataId: baseTitleForDataId + ' - call'
       })
     } else if (props.funcABI.stateMutability === 'payable' || props.funcABI.payable) {
       //   // transact. stateMutability = payable
       setButtonOptions({
         title: title + ' - transact (payable)',
         content: 'transact',
         classList: 'btn-danger',
-        dataId: title + ' - transact (payable)'
+        dataId: baseTitleForDataId + ' - transact (payable)'
       })
     } else {
       //   // transact. stateMutability = nonpayable
       setButtonOptions({
         title: title + ' - transact (not payable)',
         content: 'transact',
         classList: 'btn-warning',
-        dataId: title + ' - transact (not payable)'
+        dataId: baseTitleForDataId + ' - transact (not payable)'
       })
     }
-  }, [props.lookupOnly, props.funcABI, title])
+  }, [props.lookupOnly, props.funcABI, title, baseTitleForDataId])
 
   const getEncodedCall = () => {
     const multiString = getMultiValsString(multiFields.current)
@@ -305,7 +321,7 @@ export function ContractGUI(props: ContractGUIProps) {
         (props.funcABI.inputs && props.funcABI.inputs.length > 0) || props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? 'udapp_hasArgs' : ''
       }`}
     >
-      <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? 'none' : 'flex' }}>
+      <div className="udapp_contractActionsContainerSingle" style={{ display: toggleContainer ? 'none' : 'flex' }}>
         <CustomTooltip
           delay={0}
           placement={'auto-end'}