Merge pull request #122 from NethermindEth/fix/verify-contract-checkbox

Add verify contract checkbox
NethermindEth · Jun 26, 2024 · 42634f5 · 42634f5
2 parents b97199c + ee6291f
commit 42634f5
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 14 deletions.
diff --git a/plugin/src/features/Deployment/index.tsx b/plugin/src/features/Deployment/index.tsx
@@ -351,20 +351,23 @@ export const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
                   Deploy {shouldRunVerification ? ' and Verify' : ''}
                 </button>
 
-                <input
-                  id="shouldRunVerificationChk"
-                  name="shouldRunVerificationChk"
-                  type="checkbox"
-                  checked={shouldRunVerification}
-                  onChange={(e) => {
-                    setShouldRunVerification(e.target.checked)
-                  }}
-                  disabled={!isValidSolidity || !currentFilename || isVerifying || !selectedChainName}
-                  aria-disabled={!isValidSolidity || !currentFilename || isVerifying || !selectedChainName}
-                />
-                <label className="ml-1" htmlFor="shouldRunVerificationChk">
-                  Verify Contract
-                </label>
+                <div className="flex mt-1 custom-checkbox">
+                  <input
+                    id="shouldRunVerificationChk"
+                    name="shouldRunVerificationChk"
+                    type="checkbox"
+                    checked={shouldRunVerification}
+                    onChange={(e) => {
+                      setShouldRunVerification(e.target.checked)
+                    }}
+                    disabled={!isValidSolidity || !currentFilename || isVerifying || !selectedChainName}
+                    aria-disabled={!isValidSolidity || !currentFilename || isVerifying || !selectedChainName}
+                    className="w-4 h-4"
+                  />
+                  <label className="ml-1 mt-2" htmlFor="shouldRunVerificationChk">
+                    Verify Contract
+                  </label>
+                </div>
               </div>
             ) : (
               <></>

diff --git a/plugin/src/features/Deployment/styles.css b/plugin/src/features/Deployment/styles.css
@@ -6,3 +6,43 @@
     opacity: 0.5;
     cursor: not-allowed;
 }
+
+.w-4 {
+    width: 16px;
+}
+
+.h-4 {
+    height: 16px;
+}
+
+input[type=checkbox] {
+    position: relative;
+    cursor: pointer;
+}
+
+input[type=checkbox]:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    top: 0;
+    left: 0;
+    border: 2px solid #555555;
+    border-radius: 3px;
+}
+
+input[type=checkbox]:checked:after {
+    content: "";
+    display: block;
+    width: 5px;
+    height: 10px;
+    border: solid ;
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    position: absolute;
+    top: 2px;
+    left: 6px;
+}