bootstrap 5 & react-bootstrap 2

apps/circuit-compiler/src/app/components/configurations.tsx

@@ -6,7 +6,7 @@ export function Configurations ({primeValue, setPrimeValue, versionValue}: Confi
   return (
     <div className="flex-column">
       <div className="flex-column d-flex">
-        <div className="ml-0">
+        <div className="ms-0">
           <label className="circuit_inner_label form-check-label" htmlFor="circuitPrimeSelector">
             <FormattedMessage id="circuit.prime" />
           </label>
@@ -20,7 +20,7 @@ export function Configurations ({primeValue, setPrimeValue, versionValue}: Confi
               <select
                 onChange={(e) => setPrimeValue(e.target.value as PrimeValue)}
                 value={primeValue}
-                className="custom-select"
+                className="form-select"
                 style={{
                   pointerEvents: 'auto'
                 }}

apps/circuit-compiler/src/app/components/container.tsx

@@ -124,7 +124,7 @@ export function Container () {
               tooltipClasses="text-nowrap"
               tooltipText='See compiler license'
             >
-              <span className="far fa-file-certificate border-0 p-0 ml-2" onClick={() => showCompilerLicense()}></span>
+              <span className="far fa-file-certificate border-0 p-0 ms-2" onClick={() => showCompilerLicense()}></span>
             </CustomTooltip>
             <VersionList setVersion={handleVersionSelect} versionList={circuitApp.appState.versionList} currentVersion={circuitApp.appState.version} downloadList={circuitApp.appState.versionDownloadList} />
             <CompileOptions setCircuitAutoCompile={handleCircuitAutoCompile} setCircuitHideWarnings={handleCircuitHideWarnings} autoCompile={circuitApp.appState.autoCompile} hideWarnings={circuitApp.appState.hideWarnings} />

apps/circuit-compiler/src/app/components/generateProof.tsx

@@ -10,16 +10,16 @@ export function GenerateProof () {
 
   return (
     <div className="flex-column d-flex">
-      <div className="mt-2 custom-control custom-checkbox">
+      <div className="mt-2 form-check">
         <input
-          className="custom-control-input"
+          className="form-check-input"
           type="checkbox"
           title="Export Verifier Calldata"
           id="circuitExportVerifierCalldata"
           onChange={() => circuitApp.dispatch({ type: 'SET_EXPORT_VERIFIER_CALLDATA', payload: !circuitApp.appState.exportVerifierCalldata })}
           checked={circuitApp.appState.exportVerifierCalldata}
         />
-        <label className="form-check-label custom-control-label pt-1" htmlFor="circuitExportVerifierCalldata">
+        <label className="form-check-label pt-1" htmlFor="circuitExportVerifierCalldata">
           <FormattedMessage id="circuit.exportVerifierCalldata" />
         </label>
       </div>
@@ -30,7 +30,7 @@ export function GenerateProof () {
         data-id="generateProofBtn"
       >
         <RenderIf condition={status === 'proving'}>
-          <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
+          <i className="fas fa-sync fa-spin me-2" aria-hidden="true"></i>
         </RenderIf>
         <FormattedMessage id="circuit.generateProof" />
       </button>

apps/circuit-compiler/src/app/components/setupExports.tsx

@@ -11,42 +11,42 @@ export function SetupExports () {
   return (
     <div className="flex-column">
       <div className="flex-column d-flex">
-        <div className="mb-1 ml-0">
+        <div className="mb-1 ms-0">
           <label className="circuit_inner_label form-check-label">
             <FormattedMessage id="circuit.provingScheme" />
           </label>
-          <div className="radio custom-control custom-radio mb-1 form-check">
+          <div className="radio form-control custom-radio mb-1 form-check">
             <input
               type="radio"
-              className="align-middle custom-control-input"
+              className="align-middle form-check-input"
               name="circuitProvingScheme"
               id="groth16ProvingScheme"
               onClick={() => circuitApp.dispatch({ type: 'SET_PROVING_SCHEME', payload: 'groth16' })}
               value='groth16'
               checked={circuitApp.appState.provingScheme === 'groth16'}
               readOnly
             />
-            <label className="form-check-label custom-control-label" data-id="groth16ProvingScheme" htmlFor="groth16ProvingScheme" style={{ paddingTop: '0.125rem' }}>
+            <label className="form-check-label" data-id="groth16ProvingScheme" htmlFor="groth16ProvingScheme" style={{ paddingTop: '0.125rem' }}>
               Groth16
             </label>
           </div>
-          <div className="radio custom-control custom-radio form-check">
+          <div className="radio form-control custom-radio form-check">
             <input
               type="radio"
-              className="align-middle custom-control-input"
+              className="align-middle form-check-input"
               name="circuitProvingScheme"
               id="plonkProvingScheme"
               onClick={() => circuitApp.dispatch({ type: 'SET_PROVING_SCHEME', payload: 'plonk' })}
               value='plonk'
               checked={circuitApp.appState.provingScheme === 'plonk'}
               readOnly
             />
-            <label className="form-check-label custom-control-label" data-id="plonkProvingScheme" htmlFor="plonkProvingScheme" style={{ paddingTop: '0.125rem' }}>
+            <label className="form-check-label" data-id="plonkProvingScheme" htmlFor="plonkProvingScheme" style={{ paddingTop: '0.125rem' }}>
               Plonk
             </label>
           </div>
         </div>
-        <div className="mb-1 ml-0">
+        <div className="mb-1 ms-0">
           <label className="circuit_inner_label form-check-label">
             <FormattedMessage id="circuit.ptau" />
           </label>
@@ -59,7 +59,7 @@ export function SetupExports () {
             <div className="mb-1">
               <select
                 value={circuitApp.appState.ptauValue}
-                className="custom-select"
+                className="form-select"
                 style={{
                   pointerEvents: 'auto'
                 }}
@@ -76,29 +76,29 @@ export function SetupExports () {
               </select>
             </div>
           </CustomTooltip>
-          <div className="mt-2 custom-control custom-checkbox">
+          <div className="mt-2 form-check">
             <input
-              className="custom-control-input"
+              className="form-check-input"
               type="checkbox"
               title="Export Verifier Contract"
               id="circuitExportVerifierContract"
               onChange={() => circuitApp.dispatch({ type: 'SET_EXPORT_VERIFICATION_CONTRACT', payload: !circuitApp.appState.exportVerificationContract })}
               checked={circuitApp.appState.exportVerificationContract}
             />
-            <label className="form-check-label custom-control-label pt-1" htmlFor="circuitExportVerifierContract">
+            <label className="form-check-label pt-1" htmlFor="circuitExportVerifierContract">
               <FormattedMessage id="circuit.exportVerifierContract" />
             </label>
           </div>
-          <div className="mt-2 custom-control custom-checkbox">
+          <div className="mt-2 form-check">
             <input
-              className="custom-control-input"
+              className="form-check-input"
               type="checkbox"
               title="Export Verification Key"
               id="circuitExportVerificationKey"
               onChange={() => circuitApp.dispatch({ type: 'SET_EXPORT_VERIFICATION_KEY', payload: !circuitApp.appState.exportVerificationKey })}
               checked={circuitApp.appState.exportVerificationKey}
             />
-            <label className="form-check-label custom-control-label pt-1" htmlFor="circuitExportVerificationKey">
+            <label className="form-check-label pt-1" htmlFor="circuitExportVerificationKey">
               <FormattedMessage id="circuit.exportVerificationKey" />
             </label>
           </div>

apps/circuit-compiler/src/app/components/setupExportsBtn.tsx

@@ -12,7 +12,7 @@ export function SetupExportsBtn ({ handleRunSetup, status }: { handleRunSetup: (
       placement="auto"
       tooltipId="overlay-tooltip-compile"
       tooltipText={
-        <div className="text-left">
+        <div className="text-start">
           <div>
               Click to setup and export verification keys
           </div>
@@ -21,7 +21,7 @@ export function SetupExportsBtn ({ handleRunSetup, status }: { handleRunSetup: (
     >
       <div className="d-flex align-items-center justify-content-center">
         <RenderIf condition={status === 'exporting'}>
-          <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
+          <i className="fas fa-sync fa-spin me-2" aria-hidden="true"></i>
         </RenderIf>
         <div className="text-truncate overflow-hidden text-nowrap">
           <span>

apps/circuit-compiler/src/app/components/toggler.tsx

@@ -26,9 +26,9 @@ export function Toggler ({ children, title, dataId, show = false, icon, iconTool
                 tooltipClasses="text-nowrap"
                 tooltipText={iconTooltip}
               >
-                <span className={`${icon} border-0 p-0 ml-2`} aria-hidden="true"></span>
+                <span className={`${icon} border-0 p-0 ms-2`} aria-hidden="true"></span>
               </CustomTooltip>) :
-              <span className={`${icon} border-0 p-0 ml-2`} aria-hidden="true"></span> : null }
+              <span className={`${icon} border-0 p-0 ms-2`} aria-hidden="true"></span> : null }
           </label>
         </div>
         <div>

apps/circuit-compiler/src/app/components/versions.tsx

@@ -13,20 +13,20 @@ export function VersionList ({ currentVersion, versionList, downloadList, setVer
         </div>
       </Dropdown.Toggle>
 
-      <Dropdown.Menu as={CircomVersionMenu} className="w-100 custom-dropdown-items overflow-hidden">
+      <Dropdown.Menu as={CircomVersionMenu} className="w-100 form-select overflow-hidden">
         {
           versionListKeys.reverse().map((version, index) => (
             <Dropdown.Item key={index} onClick={() => {
               setVersion(version)
             }}>
               <div className='d-flex w-100 justify-content-between'>
                 <div>
-                  <span className={`fas fa-check text-success mr-2 ${currentVersion === version ? 'visible' : 'invisible'}`}></span>
+                  <span className={`fas fa-check text-success me-2 ${currentVersion === version ? 'visible' : 'invisible'}`}></span>
                   <span>
                     { isElectron() ? versionList[version].name.replace('wasm', '') : versionList[version].name }
                   </span>
                 </div>
-                { isElectron() ? downloadList.includes(version) ? <div className='far fa-arrow-circle-down'></div> : <div className='fas fa-arrow-circle-down text-success ml-auto'></div> : null }
+                { isElectron() ? downloadList.includes(version) ? <div className='far fa-arrow-circle-down'></div> : <div className='fas fa-arrow-circle-down text-success ms-auto'></div> : null }
               </div>
             </Dropdown.Item>
           ))

apps/circuit-compiler/src/app/components/witness.tsx

@@ -41,24 +41,24 @@ export function WitnessSection () {
         <>
           {
             signalInputs.map((input, index) => (
-              <div className="mb-2 ml-0" key={index}>
+              <div className="mb-2 ms-0" key={index}>
                 <label className="circuit_inner_label form-check-label" htmlFor="circuitPrimeSelector">
                   <FormattedMessage id="circuit.signalInput" /> { input }
                 </label>
                 <input className="form-control m-0 txinput" placeholder={input} name={input} onChange={handleSignalInput} data-id={`circuit_input_${input}`} />
               </div>
             ))
           }
-          <div className="custom-control custom-checkbox">
+          <div className="form-check">
             <input
-              className="custom-control-input"
+              className="form-check-input"
               type="checkbox"
               title="Export Witness As JSON"
               id="circuitExportWtnsJson"
               onChange={() => { dispatch({ type: 'SET_EXPORT_WTNS_JSON', payload: !exportWtnsJson }) }}
               checked={exportWtnsJson}
             />
-            <label className="form-check-label custom-control-label pt-1" htmlFor="circuitExportWtnsJson">
+            <label className="form-check-label pt-1" htmlFor="circuitExportWtnsJson">
               <FormattedMessage id="circuit.exportWtnsJson" />
             </label>
           </div>
@@ -69,7 +69,7 @@ export function WitnessSection () {
             data-id="compute_witness_btn"
           >
             <RenderIf condition={status === 'computing'}>
-              <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
+              <i className="fas fa-sync fa-spin me-2" aria-hidden="true"></i>
             </RenderIf>
             <FormattedMessage id="circuit.compute" />
           </button>

apps/contract-verification/src/app/components/AccordionReceipt.tsx

@@ -51,34 +51,34 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
 
       <div className={`${expanded ? '' : 'd-none'} px-2 pt-2 pb-3 small`}>
         <div>
-          <span className="font-weight-bold">Chain: </span>
+          <span className="fw-bold">Chain: </span>
           {chainName} ({contract.chainId})
         </div>
         <div>
-          <span className="font-weight-bold">File: </span>
+          <span className="fw-bold">File: </span>
           <span className="text-break">{contract.filePath}</span>
         </div>
         <div>
-          <span className="font-weight-bold">Submitted at: </span>
+          <span className="fw-bold">Submitted at: </span>
           {new Date(contract.date).toLocaleString()}
         </div>
 
         <div>
-          <span className="font-weight-bold">Verified at: </span>
+          <span className="fw-bold">Verified at: </span>
           <ReceiptsBody receipts={contract.receipts} />
         </div>
 
         {hasProxy && (
           <>
             <div className="mt-3">
-              <span className="font-weight-bold">Proxy Address: </span>
+              <span className="fw-bold">Proxy Address: </span>
               <CustomTooltip placement="top" tooltipClasses=" text-break" tooltipText={contract.proxyAddress}>
                 <span>{shortenAddress(contract.proxyAddress)}</span>
               </CustomTooltip>
               <CopyToClipboard tip="Copy" content={contract.proxyAddress} direction={'top'} />
             </div>
             <div>
-              <span className="font-weight-bold">Proxy verified at: </span>
+              <span className="fw-bold">Proxy verified at: </span>
               <ReceiptsBody receipts={contract.proxyReceipts} />
             </div>
           </>
@@ -102,7 +102,7 @@ const ReceiptsBody = ({ receipts }: { receipts: VerificationReceipt[] }) => {
             tooltipTextClasses="text-capitalize"
             tooltipText={`Status: ${receipt.status}${receipt.message ? `, Message: ${receipt.message}` : ''}`}
           >
-            <span className="mr-2">
+            <span className="me-2">
               {['verified', 'partially verified', 'already verified'].includes(receipt.status) ?
                 <i className="fas fa-check text-success px-1"></i> :
                 receipt.status === 'fully verified' ?
@@ -117,11 +117,11 @@ const ReceiptsBody = ({ receipts }: { receipts: VerificationReceipt[] }) => {
           </CustomTooltip>
           <div className="d-flex flex-row w-100 justify-content-between">
             <CustomTooltip placement="top" tooltipClasses=" text-break" tooltipText={`API: ${receipt.verifierInfo.apiUrl}`}>
-              <span className="font-weight-bold pr-2">{receipt.verifierInfo.name}</span>
+              <span className="fw-bold pe-2">{receipt.verifierInfo.name}</span>
             </CustomTooltip>
-            <div className="ml-1">
+            <div className="ms-1">
               {!!receipt.lookupUrl && receipt.verifierInfo.name === 'Blockscout' ?
-                <CopyToClipboard classList="pr-0 py-0" tip="Copy code URL" content={receipt.lookupUrl} direction="top" /> :
+                <CopyToClipboard classList="pe-0 py-0" tip="Copy code URL" content={receipt.lookupUrl} direction="top" /> :
                 !!receipt.lookupUrl && <a href={receipt.lookupUrl} target="_blank" className="fa fas fa-arrow-up-right-from-square" rel="noreferrer"></a>
               }
             </div>

apps/contract-verification/src/app/components/ConfigInput.tsx

@@ -42,7 +42,7 @@ export const ConfigInput: React.FC<ConfigInputProps> = ({ label, id, secret, ini
       <div className="d-flex flex-row justify-content-start">
         <input
           type={secret ? 'password' : 'text'}
-          className={`form-control small w-100 ${!enabled ? 'bg-transparent pl-0 border-0' : ''}`}
+          className={`form-control small w-100 ${!enabled ? 'bg-transparent ps-0 border-0' : ''}`}
           id={id}
           placeholder={intl.formatMessage({ id: "contract-verification.configInputPlaceholderText" }, { label })}
           value={value}
@@ -52,10 +52,10 @@ export const ConfigInput: React.FC<ConfigInputProps> = ({ label, id, secret, ini
 
         { enabled ? (
           <>
-            <button type="button" className="btn btn-primary btn-sm ml-2" onClick={handleSave}>
+            <button type="button" className="btn btn-primary btn-sm ms-2" onClick={handleSave}>
               <FormattedMessage id="contract-verification.configInputSaveButton" />
             </button>
-            <button type="button" className="btn btn-secondary btn-sm ml-2" onClick={handleCancel}>
+            <button type="button" className="btn btn-secondary btn-sm ms-2" onClick={handleCancel}>
               <FormattedMessage id="contract-verification.configInputCancelButton" />
             </button>
           </>

apps/contract-verification/src/app/components/ConstructorArguments.tsx

@@ -110,9 +110,9 @@ export const ConstructorArguments: React.FC<ConstructorArgumentsProps> = ({ abiE
   return (
     <div className="mt-4">
       <label>Constructor Arguments</label>
-      <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
-        <input className="form-check-input custom-control-input" type="checkbox" id="toggleRawInputSwitch" checked={toggleRawInput} onChange={() => setToggleRawInput(!toggleRawInput)} />
-        <label className="m-0 form-check-label custom-control-label" style={{ paddingTop: '2px' }} htmlFor="toggleRawInputSwitch">
+      <div className="d-flex py-1 align-items-center form-check">
+        <input className="form-check-input" type="checkbox" id="toggleRawInputSwitch" checked={toggleRawInput} onChange={() => setToggleRawInput(!toggleRawInput)} />
+        <label className="m-0 form-check-label" style={{ paddingTop: '2px' }} htmlFor="toggleRawInputSwitch">
           <FormattedMessage id="contract-verification.constructorArgumentsToggleRawInput" />
         </label>
       </div>
@@ -126,7 +126,7 @@ export const ConstructorArguments: React.FC<ConstructorArgumentsProps> = ({ abiE
         <div>
           {constructorArgs.map((inp, i) => (
             <div key={`constructor-arg-${inp.name}`} className="d-flex flex-row align-items-center justify-content-between mb-2">
-              <div className="mr-2 small">{inp.name}</div>
+              <div className="me-2 small">{inp.name}</div>
               <input className="form-control" placeholder={inp.type} value={constructorArgsValues[i] ?? ''} onChange={(e) => handleConstructorArgs(e.target.value, i)} />
             </div>
           ))}

apps/contract-verification/src/app/components/ContractDropdown.tsx

@@ -45,7 +45,7 @@ export const ContractDropdown: React.FC<ContractDropdownProps> = ({ label, id, s
     <div className="form-group">
       <label htmlFor={id}><FormattedMessage id="contract-verification.contractDropdownLabel" defaultMessage={label} values={{ label }} /></label>
       <select value={selectedContract ? JSON.stringify(selectedContract) : ''}
-        className={`form-control custom-select pr-4 ${!hasContracts ? 'disabled-cursor text-warning' : ''}`}
+        className={`form-control form-select pe-4 ${!hasContracts ? 'disabled-cursor text-warning' : ''}`}
         id={id}
         disabled={!hasContracts}
         onChange={handleSelectContract}