verification plugin ui update

Author: LianaHus

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

@@ -33,7 +33,11 @@ export const AccordionReceipt: React.FC<AccordionReceiptProps> = ({ contract, in
         </button>
 
         <div className="small w-100 text-uppercase overflow-hidden text-nowrap">
-          <CustomTooltip placement="bottom" tooltipClasses=" text-break" tooltipText={`Contract: ${contract.contractName},  Address: ${contract.address}, Chain: ${chainName}, Proxy: ${contract.proxyAddress}`}>
+          <CustomTooltip
+            placement="bottom"
+            tooltipClasses=" text-break"
+            tooltipText={`Contract: ${contract.contractName}, Address: ${contract.address}, Chain: ${chainName}, Proxy: ${contract.proxyAddress}`}
+          >
             <span>
               {contract.contractName} at {shortenAddress(contract.address)} {contract.proxyAddress ? 'with proxy' : ''}
             </span>
@@ -88,16 +92,40 @@ const ReceiptsBody = ({ receipts }: { receipts: VerificationReceipt[] }) => {
   return (
     <ul className="list-group">
       {receipts.map((receipt) => (
-        <li key={`${receipt.contractId}-${receipt.verifierInfo.name}${receipt.isProxyReceipt ? '-proxy' : ''}-${receipt.receiptId}`} className="list-group-item d-flex flex-row align-items-center">
-          <CustomTooltip placement="top" tooltipClasses=" text-break" tooltipText={`API: ${receipt.verifierInfo.apiUrl}`}>
-            <span className="font-weight-bold medium">{receipt.verifierInfo.name}</span>
-          </CustomTooltip>
-
-          <CustomTooltip placement="top" tooltipClasses=" text-break" tooltipTextClasses="text-capitalize" tooltipText={`Status: ${receipt.status}${receipt.message ? `, Message: ${receipt.message}` : ''}`}>
-            <span className="ml-2">{['verified', 'partially verified', 'already verified'].includes(receipt.status) ? <i className="fas fa-check"></i> : receipt.status === 'fully verified' ? <i className="fas fa-check-double"></i> : receipt.status === 'failed' ? <i className="fas fa-xmark"></i> : ['pending', 'awaiting implementation verification'].includes(receipt.status) ? <i className="fas fa-spinner fa-spin"></i> : <i className="fas fa-question"></i>}</span>
-          </CustomTooltip>
-
-          <div className="ml-2">{!!receipt.lookupUrl && receipt.verifierInfo.name === 'Blockscout' ? <CopyToClipboard 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"></a>}</div>
+        <li
+          key={`${receipt.contractId}-${receipt.verifierInfo.name}${receipt.isProxyReceipt ? '-proxy' : ''}-${receipt.receiptId}`}
+          className="list-group-item d-flex flex-row align-items-center"
+        >
+          <CustomTooltip
+              placement="top"
+              tooltipClasses=" text-break"
+              tooltipTextClasses="text-capitalize"
+              tooltipText={`Status: ${receipt.status}${receipt.message ? `, Message: ${receipt.message}` : ''}`}
+            >
+              <span className="mr-2">
+                {['verified', 'partially verified', 'already verified'].includes(receipt.status) ?
+                  <i className="fas fa-check text-success px-1"></i> :
+                  receipt.status === 'fully verified' ?
+                    <i className="fas fa-check-double text-success px-1"></i> :
+                    receipt.status === 'failed' ?
+                      <i className="fas fa-xmark text-warning px-1"></i> :
+                      ['pending', 'awaiting implementation verification'].includes(receipt.status) ?
+                        <i className="fas fa-spinner fa-spin"></i> :
+                        <i className="fas fa-question"></i>
+                }
+              </span>
+            </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>
+            </CustomTooltip>
+            <div className="ml-1">
+              {!!receipt.lookupUrl && receipt.verifierInfo.name === 'Blockscout' ?
+                <CopyToClipboard classList="pr-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"></a>
+              }
+            </div>
+          </div>
         </li>
       ))}
     </ul>

apps/contract-verification/src/app/views/VerifyView.tsx

@@ -232,7 +232,7 @@ export const VerifyView = () => {
                 <label
                   htmlFor={`verifier-${verifierId}`}
                   className={`m-0 form-check-label custom-control-label large  font-weight-bold${!disabledVerifier ? '' : ' text-secondary'}`}
-                  style={{ fontSize: '1rem', lineHeight: '1.5', color: 'var(--text)' }}
+                  style={{ fontSize: '1rem', color: 'var(--text)' }}
                 >
                   {verifierId}
                 </label>

libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx

@@ -15,9 +15,10 @@ interface ICopyToClipboard {
   children?: JSX.Element
   getContent?: () => any
   callback?: () => void
+  classList?: string
 }
 export const CopyToClipboard = (props: ICopyToClipboard) => {
-  const { tip = 'Copy', icon = 'fa-copy', direction = 'right', getContent, children, callback, ...otherProps } = props
+  const { tip = 'Copy', icon = 'fa-copy', classList  = ' ml-1 p-2', direction = 'right', getContent, children, callback, ...otherProps } = props
   let { content } = props
   const [message, setMessage] = useState(tip)
 
@@ -54,7 +55,7 @@ export const CopyToClipboard = (props: ICopyToClipboard) => {
     setTimeout(() => setMessage(tip), 500)
   }
 
-  const childJSX = children || <i className={`far ${icon} ml-1 p-2`} aria-hidden="true" {...otherProps}></i>
+  const childJSX = children || <i className={`far ${icon} ${classList}`} aria-hidden="true" {...otherProps}></i>
 
   return (
     <a href="#" onClick={handleClick} onMouseLeave={reset}>