add types for reactbootstrap. Add accordion

apps/vyper/src/app/app.tsx

@@ -11,10 +11,12 @@ import LocalUrlInput from './components/LocalUrl'
 import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'
 import ToggleButton from 'react-bootstrap/ToggleButton'
 import Button from 'react-bootstrap/Button'
+import Accordion from 'react-bootstrap/Accordion'
+import Card from 'react-bootstrap/Card'
 
 import './app.css'
 import {CustomTooltip} from '@remix-ui/helper'
-import {Form} from 'react-bootstrap'
+import { Form} from 'react-bootstrap'
 import {CompileErrorCard} from './components/CompileErrorCard'
 
 interface AppState {
@@ -108,14 +110,27 @@ const App = () => {
             </Button>
           </CustomTooltip>
         </div>
-        <Form>
+        <Accordion>
-          <div className="d-flex flex-row gap-5 mb-3 mt-2">
+          <Card>
-            <Form.Check inline id="remote-compiler" data-id="remote-compiler" type="radio" name="remote" value={state.environment} checked={state.environment === 'remote'} onChange={() => setEnvironment('remote')} label="Remote Compiler" className={`${state.environment === 'remote' ? 'd-flex mr-4' : 'd-flex mr-4 cursor-status'}`}
+            <Card.Header>
-            />
+              <Accordion.Toggle as={Button} variant="link" eventKey="0">
-            <Form.Check inline id="local-compiler" data-id="local-compiler" checked={state.environment === 'local'} type="radio" name="local" value={state.environment} onChange={() => setEnvironment('local')} label="Local Compiler"
+                <span className="text-primary">Advanced Compiler Settings</span>
-              className={`${state.environment === 'local' ? '' : `cursor-status`}`}/>
+              </Accordion.Toggle>
-          </div>
+              <Accordion.Collapse eventKey="0">
-        </Form>
+                <Card.Body>
+                  <Form>
+                    <div className="d-flex flex-row gap-5 mb-3 mt-2">
+                      <Form.Check inline id="remote-compiler" data-id="remote-compiler" type="radio" name="remote" value={state.environment} checked={state.environment === 'remote'} onChange={() => setEnvironment('remote')} label="Remote Compiler" className={`${state.environment === 'remote' ? 'd-flex mr-4' : 'd-flex mr-4 cursor-status'}`}
+                      />
+                      <Form.Check inline id="local-compiler" data-id="local-compiler" checked={state.environment === 'local'} type="radio" name="local" value={state.environment} onChange={() => setEnvironment('local')} label="Local Compiler"
+                        className={`${state.environment === 'local' ? '' : `cursor-status`}`}/>
+                    </div>
+                  </Form>
+                </Card.Body>
+              </Accordion.Collapse>
+            </Card.Header>
+          </Card>
+        </Accordion>
         <span className="px-3 mt-1 mb-1 small text-warning">Specify the compiler version & EVM version in the .vy file</span>
         <LocalUrlInput url={state.localUrl} setUrl={setLocalUrl} environment={state.environment} />
         <div className="px-3 w-100 mb-3 mt-1" id="compile-btn">

package.json

@@ -287,6 +287,7 @@
     "@types/node": "18.16.1",
     "@types/react": "^18.2.0",
     "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-bootstrap": "^0.32.35",
     "@types/react-dom": "^18.2.0",
     "@types/react-image-magnifiers": "^1.3.2",
     "@types/react-router-dom": "^5.3.3",

yarn.lock

@@ -6518,6 +6518,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-bootstrap@^0.32.35":
+  version "0.32.35"
+  resolved "https://registry.yarnpkg.com/@types/react-bootstrap/-/react-bootstrap-0.32.35.tgz#78ed1c861e426a1675c6013d3fc7a8a91f51ba30"
+  integrity sha512-NI5oZZSo0Z+MEELS2X8f4PzIK3GPxNeRsv/q8KREEeCvFxK33+8izMB4Uchy7EuxE1V9Ed4+0dc0T5dtWzOogA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^18.0.0":
   version "18.0.7"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.7.tgz#ee7cf8ec4e6977e3f0a7b1d38bd89c75aa2aec28"