Merge pull request #10 from Emurgo/denis/tabs-instead-routes

Tabs instead routes

package.json

@@ -5,14 +5,15 @@
   "dependencies": {
     "@emurgo/cardano-serialization-lib-browser": "^12.0.0-alpha.13",
     "@emurgo/cip4-js": "^1.0.7",
+    "@material-tailwind/react": "^2.1.8",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "buffer": "^6.0.3",
     "react": "^18.2.0",
     "react-collapsed": "^4.1.2",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.1",
+    "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",
     "reactjs-popup": "^2.0.5",
     "web-vitals": "^3.5.0"

src/App.js

@@ -1,12 +1,25 @@
 import React from 'react'
 import AccessButton from './components/accessButton'
 import MainTab from './components/tabs/mainTab'
+import TabsComponent from './components/tabs/tabsComponent'
+import useYoroi from './hooks/yoroiProvider'
+import {CONNECTED, NO_CARDANO} from './utils/connectionStates'
 
 const App = () => {
+  const {connectionState} = useYoroi()
+  const isWalletConnected = connectionState === CONNECTED
+  const isNotCardanoWallet = connectionState === NO_CARDANO
+
+  const mainTabProps = {
+    isWalletConnected,
+    isNotCardanoWallet,
+  }
+
   return (
     <div className="min-h-screen bg-gray-800">
       <AccessButton />
-      <MainTab />
+      <MainTab {...mainTabProps} />
+      <TabsComponent />
     </div>
   )
 }

src/components/accessButton.js

@@ -47,7 +47,7 @@ const AccessButton = () => {
             </div>
           </div>
         ) : connectionState === IN_PROGRESS ? (
-          <div className="pt-5 pb-20 text-xl font-bold tracking-tight text-green-500">
+          <div className="pt-5 pb-5 text-m font-bold tracking-tight text-green-500">
             <label>Wallet connecting is in progress ...</label>
           </div>
         ) : (