fix double css rule for button. refactor tab presentation logic. fix button width

apps/vyper/src/app/app.css

@@ -45,11 +45,11 @@ html, body, #root, main {
 }
 
 #local-url {
-  width: 90%;
+
 }
 
 #compile-btn {
-  width: 100%;
+
 }
 
 #compile-btn * {
@@ -120,4 +120,4 @@ html, body, #root, main {
   border: none;
   height: 100%;
   width: 100%;
-}
+}

apps/vyper/src/app/app.tsx

@@ -81,8 +81,8 @@ const App: React.FC = () => {
         </a>
       </header>
       <section>
-        <div className="px-4 w-100">
-          <Button data-id="add-repository" className="w-100 text-dark w-100 bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
+        <div className="px-3 w-100">
+          <Button data-id="add-repository" className="w-100 text-dark bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
             Clone Vyper examples repository
           </Button>
         </div>
@@ -96,7 +96,7 @@ const App: React.FC = () => {
         </ToggleButtonGroup>
         <LocalUrlInput url={state.localUrl} setUrl={setLocalUrl} environment={state.environment} />
         <WarnRemote environment={state.environment} />
-        <div className="px-4" id="compile-btn">
+        <div className="px-3" id="compile-btn">
           <CompilerButton
             compilerUrl={compilerUrl()}
             contract={contract}

apps/vyper/src/app/components/CompilerButton.tsx

@@ -118,7 +118,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
   }
 
   return (
-    <button data-id="compile" onClick={compileContract} title={contract} className="d-flex flex-column btn btn-primary btn-block">
+    <button data-id="compile" onClick={compileContract} title={contract} className="d-flex flex-column btn btn-primary w-100">
       <span>Compile</span>
       <span className="overflow-hidden text-truncate text-nowrap">{contract}</span>
     </button>

apps/vyper/src/app/components/LocalUrl.tsx

@@ -18,7 +18,7 @@ function LocalUrlInput({url, setUrl, environment}: Props) {
 
   return (
     <Form id="local-url">
-      <Form.Group controlId="localUrl">
+      <Form.Group controlId="w-100 px-3">
         <Form.Text className="text-warning pb-2">{'Currently we support vyper version > 0.2.16'}</Form.Text>
         <Form.Label>Local Compiler Url</Form.Label>
         <Form.Control onBlur={updateUrl} defaultValue={url} type="email" placeholder="eg http://localhost:8000/compile" />

apps/vyper/src/app/components/VyperResult.tsx

@@ -18,6 +18,13 @@ export type ExampleContract = {
   address: string
 }
 
+type TabContentMembers = {
+  tabText: string
+  tabPayload: any
+  tabMemberType: 'abi' | 'bytecode' | 'bytecode_runtime' | 'ir'
+  className: string
+}
+
 function VyperResult({ output, themeColor }: VyperResultProps) {
   const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
@@ -47,40 +54,53 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
     )
   }
 
+  const tabContent = [
+    {
+      tabHeadingText: 'ABI',
+      tabPayload: Object.values(output)[0]['abi'],
+      tabMemberType: 'abi',
+      tabButtonText: () => 'Copy ABI',
+      eventKey: 'abi'
+    },
+    {
+      tabHeadingText: 'Bytecode',
+      tabPayload: Object.values(output)[0]['bytecode'].object.toString(),
+      tabMemberType: 'bytecode',
+      tabButtonText: () => 'Copy Bytecode',
+      eventKey: 'bytecode'
+    },
+    {
+      tabHeadingText: 'Runtime Bytecode',
+      tabPayload: Object.values(output)[0]['runtimeBytecode'].object.toString(),
+      tabMemberType: 'bytecode_runtime',
+      tabButtonText: () => 'Copy Runtime Bytecode',
+      eventKey: 'bytecode_runtime'
+    }
+    // {
+    //   tabHeadingText: 'LLL',
+    //   tabPayload: Object.values(output)[0]['ir'] ? '' : '',
+    //   tabMemberType: 'ir',
+    //   tabButtonText: () => Object.values(output)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet',
+    //   eventKey: 'ir'
+    // }
+  ]
+
   return (
     <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)} justify>
-      <Tab eventKey="abi" title="ABI" as={'span'}>
-        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['abi'])}>
-          <Button variant="info" className="copy" data-id="copy-abi">
-            Copy ABI
-          </Button>
-        </CopyToClipboard>
-        <JSONTree src={Object.values(output)[0]['abi']} theme={themeColor as any}/>
-      </Tab>
-      <Tab eventKey="bytecode" title="Bytecode">
-        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['bytecode'].object.toString())}>
-          <Button variant="info" className="copy">
-            Copy Bytecode
-          </Button>
-        </CopyToClipboard>
-        <textarea defaultValue={Object.values(output)[0]['bytecode'].object.toString()}></textarea>
-      </Tab>
-      <Tab eventKey="bytecode_runtime" title="Runtime Bytecode">
-        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['runtimeBytecode'].object.toString())}>
-          <Button variant="info" className="copy">
-            Copy Runtime Bytecode
-          </Button>
-        </CopyToClipboard>
-        <textarea defaultValue={Object.values(output)[0]['runtimeBytecode'].object.toString()}></textarea>
-      </Tab>
-      <Tab eventKey="ir" title="LLL">
-        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['ir'])}>
-          <Button disabled={Object.values(output)[0]['ir'].length <= 1} variant="info" className="copy">
-            {Object.values(output)[0]['ir'].length > 1 ? 'Copy LLL Code' : 'Nothing to copy yet'}
-          </Button>
-        </CopyToClipboard>
-        <textarea defaultValue={Object.values(output)[0]['ir'].toString()}></textarea>
-      </Tab>
+      {tabContent.map((content, index) => (
+        <Tab eventKey={content.eventKey} title={content.tabHeadingText} as={'span'} key={`${index}-${content.eventKey}`}>
+          <CopyToClipboard getContent={() => content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(output)[0]['abi'])}>
+            <Button variant="info" className="copy" data-id={content.eventKey === 'abi' ? "copy-abi" : ''}>
+              {content.tabButtonText()}
+            </Button>
+          </CopyToClipboard>
+          {
+            content.eventKey === 'abi' ? <JSONTree src={content.tabPayload} theme={themeColor as any}/> : (
+              <textarea defaultValue={content.tabPayload}></textarea>
+            )
+          }
+        </Tab>))
+      }
     </Tabs>
   )
 }