feat: add animation to show/hide source code

src/index.scss

@@ -631,6 +631,23 @@ th.sortable {
   background-color: transparent !important;
 }
 
-.source-code {
+.source-code code {
   background-color: #f2f2f2;
+}
+
+.source-code pre {
+  height: 100%;
+}
+
+.source-code {
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  transition: all 1s ease;
+  height: 0;
+  opacity: 0;
+}
+
+.source-code.show {
+  height: auto !important;
+  opacity: 1 !important;
 }

src/screens/nano/BlueprintDetail.js

@@ -30,6 +30,8 @@ function BlueprintDetail(props) {
   const [loading, setLoading] = useState(true);
   // errorMessage {string | null} Error message in case a request to get nano contract data fails
   const [errorMessage, setErrorMessage] = useState(null);
+  // showCode {boolean} If should show the blueprint source code
+  const [showCode, setShowCode] = useState(false);
 
   const codeRef = useRef();
 
@@ -143,6 +145,16 @@ function BlueprintDetail(props) {
     return `${name}(${parameters.join(', ')}): ${returnType === 'null' ? 'None' : returnType}`;
   }
 
+  /**
+   * Handle toggle click to hide or show the blueprint source code
+   *
+   * @param {Event} e Click event
+   */
+  const onToggleShowCode = (e) => {
+    e.preventDefault();
+    setShowCode(!showCode);
+  }
+
   return (
     <div className="content-wrapper">
       <h3 className="mt-4">Blueprint Information</h3>
@@ -153,8 +165,15 @@ function BlueprintDetail(props) {
         { renderBlueprintAttributes() }
         { renderBlueprintMethods('public_methods', 'Public Methods') }
         { renderBlueprintMethods('private_methods', 'Private Methods') }
-        <h4 className="mt-5 mb-4">Source Code</h4>
-        <pre><code ref={codeRef} className='source-code language-python'>{blueprintSourceCode}</code></pre>
+        <div className="d-flex flex-row align-items-center mb-4 mt-4">
+          <h4 className="mb-0 mr-3">Source Code</h4>
+          <a href="true" onClick={(e) => onToggleShowCode(e)}>{showCode ? 'Hide' : 'Show'}</a>
+        </div>
+        <div className={`source-code ${showCode ? 'show' : ''}`}>
+          <pre>
+            <code ref={codeRef} className='language-python'>{blueprintSourceCode}</code>
+          </pre>
+        </div>
       </div>
     </div>
   );