chore: enable linting in react example and fix lint errors (#182)

<!--- Provide a general summary of your changes in the Title above -->

## Description

<!--- Describe your changes in detail -->

## Related Issue Or Context

<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Otherwise, describe context and motivation for change here -->

Closes: #84 

## How Has This Been Tested? Testing details.

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] Documentation

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] I have commented my code, particularly in hard-to-understand
areas.
- [ ] I have ensured that all acceptance criteria (or expected behavior)
from issue are met
- [ ] I have updated the documentation locally and in sygma-docs.
- [ ] I have added tests to cover my changes.
- [ ] I have ensured that all the checks are passing and green, I've
signed the CLA bot

Signed-off-by: Marin Petrunic <[email protected]>

examples/react-widget-app/package.json

@@ -8,7 +8,7 @@
     "build": "tsc && vite build",
     "lint": "yarn run lint:types && yarn run lint:code",
     "lint:types": "tsc -p ./tsconfig.json --noEmit",
-    "lint:code": "eslint '{src,tests}/**/*.ts'",
+    "lint:code": "eslint '{src,tests}/**/*.{ts,tsx}'",
     "preview": "vite preview"
   },
   "dependencies": {

examples/react-widget-app/src/App.css

@@ -93,6 +93,9 @@ body, html {
 }
 
 #open-sidebar-button {
+    background: none repeat scroll 0 0 transparent;
+    border: medium none;
+    border-spacing: 0;
     position: fixed; 
     top: 2rem; 
     left: 2rem; 
@@ -105,6 +108,9 @@ body, html {
 }
 
 #close-icon{
+    background: none repeat scroll 0 0 transparent;
+    border: medium none;
+    border-spacing: 0;
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;

examples/react-widget-app/src/App.tsx

@@ -1,59 +1,77 @@
-import { SygmaProtocolReactWidget } from '@buildwithsygma/sygmaprotocol-react-widget'
-import './App.css';
-import sygmaIcon from './public/sygmaIcon.svg'
-import gitHubIcon from './public/githubIcon.png'
-import docsIcon from './public/docsIcon.png'
-import closeIcon from './public/closeIcon.png'
-import sidebarIcon from './public/sidebarIcon.png'
 import { useState } from 'react';
+import { SygmaProtocolReactWidget } from '@buildwithsygma/sygmaprotocol-react-widget';
 
-function App() {
+import closeIcon from './public/closeIcon.png';
+import docsIcon from './public/docsIcon.png';
+import gitHubIcon from './public/githubIcon.png';
+import sidebarIcon from './public/sidebarIcon.png';
+import sygmaIcon from './public/sygmaIcon.svg';
 
+import './App.css';
+
+function App() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const toggleSidebar = () => {
     setSidebarOpen(!sidebarOpen);
   };
 
   const obtainTokensClick = () => {
-    window.open("https://docs.buildwithsygma.com/environments/testnet/obtain-testnet-tokens", "_blank");
+    window.open(
+      'https://docs.buildwithsygma.com/environments/testnet/obtain-testnet-tokens',
+      '_blank',
+    );
   };
 
   return (
-
     <div className="page">
       <aside className={`sidebar centered ${sidebarOpen ? 'open' : ''}`}>
         {sidebarOpen && (
-          <div id="close-icon" onClick={toggleSidebar}>
+          <button type="button" id="close-icon" onClick={toggleSidebar}>
             <img src={closeIcon} alt="Close Sidebar" className="icon" />
-          </div>
-        )} 
+          </button>
+        )}
         <div className="sidebar-title">Sygma Widget</div>
-        <div className="icon-column"> 
+        <div className="icon-column">
           <div className="icon-wrapper">
-            <a href="https://buildwithsygma.com/" target="_blank"><img src={sygmaIcon} alt="Main Page" /></a>
-            <a href="https://buildwithsygma.com/" target="_blank"><span>Website</span></a>
+            <a href="https://buildwithsygma.com/" target="_blank" rel="noreferrer">
+              <img src={sygmaIcon} alt="Main Page" />
+            </a>
+            <a href="https://buildwithsygma.com/" target="_blank" rel="noreferrer">
+              <span>Website</span>
+            </a>
           </div>
           <div className="icon-wrapper">
-            <a href="https://docs.buildwithsygma.com/" target="_blank"><img src={docsIcon} alt="Documentation"/></a>
-            <a href="https://docs.buildwithsygma.com/" target="_blank"><span>Docs</span></a>
+            <a href="https://docs.buildwithsygma.com/" target="_blank" rel="noreferrer">
+              <img src={docsIcon} alt="Documentation" />
+            </a>
+            <a href="https://docs.buildwithsygma.com/" target="_blank" rel="noreferrer">
+              <span>Docs</span>
+            </a>
           </div>
           <div className="icon-wrapper">
-            <a href="https://github.com/sygmaprotocol" target="_blank"><img src={gitHubIcon} alt="GitHub" id="github-icon"/></a>
-            <a href="https://github.com/sygmaprotocol" target="_blank"><span>GitHub</span></a>
+            <a href="https://github.com/sygmaprotocol" target="_blank" rel="noreferrer">
+              <img src={gitHubIcon} alt="GitHub" id="github-icon" />
+            </a>
+            <a href="https://github.com/sygmaprotocol" target="_blank" rel="noreferrer">
+              <span>GitHub</span>
+            </a>
           </div>
-          <button className="sidebar-button" onClick={obtainTokensClick}>Obtain Testnet Tokens</button>
+          <button type="button" className="sidebar-button" onClick={obtainTokensClick}>
+            Obtain Testnet Tokens
+          </button>
         </div>
       </aside>
-      <main className={"main centered"}>
+      <main className="main centered">
         <SygmaProtocolReactWidget />
       </main>
       {!sidebarOpen && (
-        <div id="open-sidebar-button" onClick={toggleSidebar}>
+        <button type="button" id="open-sidebar-button" onClick={toggleSidebar}>
           <img src={sidebarIcon} alt="Toggle Sidebar" className="icon" />
-        </div>
+        </button>
       )}
     </div>
-    )
-  }
-export default App
+  );
+}
+
+export default App;