add more info about debugging

libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx

@@ -334,6 +334,15 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         </div>
         <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } updateTxNumberFlag={ updateTxNumberFlag } transactionNumber={ state.txNumber } debugging={ state.debugging } />
         { state.debugging && state.sourceLocationStatus && <div className="text-warning"><i className="fas fa-exclamation-triangle" aria-hidden="true"></i> {state.sourceLocationStatus}</div> }
+        { !state.debugging && 
+        <div>
+          <i className="fas fa-info-triangle" aria-hidden="true"></i>
+          <span>
+            When Debugging with a transaction hash, 
+            if the contract is verified, Remix will try to fetch the source code from Sourcify or Etherscan. Put in your Etherscan API key in the Remix settings.
+            For supported networks, please see: <a href="https://sourcify.dev" target="__blank" >https://sourcify.dev</a> & <a href="https://sourcify.dev" target="__blank">https://etherscan.io/contractsVerified</a>
+          </span>
+        </div> }
         { state.debugging && <StepManager stepManager={ stepManager } /> }
         { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
       </div>