moved activeTab code to new ActiveTab.tsx. Cannot use useWallet in Ap…

…p.tsx. added explicit text color for Account component
iskysun96 · Jan 20, 2024 · 6a3122e · 6a3122e
1 parent 6967cc0
commit 6a3122e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,10 @@
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, useWallet } from '@txnlab/use-wallet'
+import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
-import { useState } from 'react'
-import Gallery from './components/Gallery'
-import Hero from './components/Hero'
-import { Navbar } from './components/Navbar'
+import ActiveTab from './pages/ActiveTab'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -37,10 +34,6 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 }
 
 export default function App() {
-  const [activeTab, setActiveTab] = useState(0) // 0 = Mint; 1 = Gallery
-
-  const { activeAddress } = useWallet()
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -57,15 +50,7 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
-        {activeAddress ? (
-          <div>
-            <Navbar activeTab={activeTab} setActiveTab={setActiveTab} />
-            {activeTab === 0 && <Hero />}
-            {activeTab === 1 && <Gallery />}
-          </div>
-        ) : (
-          <Hero />
-        )}
+        <ActiveTab />
       </WalletProvider>
     </SnackbarProvider>
   )

diff --git a/src/components/Account.tsx b/src/components/Account.tsx
@@ -14,13 +14,13 @@ const Account = () => {
   return (
     <div>
       <a
-        className="text-xl"
+        className="text-xl text-gray-900"
         target="_blank"
         href={`https://app.dappflow.org/setnetwork?name=${dappFlowNetworkName}&redirect=explorer/account/${activeAddress}/`}
       >
         Address: {ellipseAddress(activeAddress)}
       </a>
-      <div className="text-xl">Network: {algoConfig.network === '' ? 'localnet' : algoConfig.network}</div>
+      <div className="text-xl text-gray-900">Network: {algoConfig.network === '' ? 'localnet' : algoConfig.network}</div>
     </div>
   )
 }

diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
@@ -14,7 +14,7 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
   return (
     <dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}>
       <form method="dialog" className="modal-box">
-        <h3 className="font-bold text-2xl">Select wallet provider</h3>
+        <h3 className="font-bold text-2xl text-gray-900">Select wallet provider</h3>
 
         <div className="grid m-2 pt-5">
           {activeAddress && (

diff --git a/src/pages/ActiveTab.tsx b/src/pages/ActiveTab.tsx
@@ -0,0 +1,27 @@
+import { useWallet } from '@txnlab/use-wallet'
+import { useState } from 'react'
+import Gallery from '../components/Gallery'
+import Hero from '../components/Hero'
+import { Navbar } from '../components/Navbar'
+
+const ActiveTab = () => {
+  const [activeTab, setActiveTab] = useState(0) // 0 = Mint; 1 = Gallery
+
+  const { activeAddress } = useWallet()
+
+  return (
+    <div>
+      {activeAddress ? (
+        <div>
+          <Navbar activeTab={activeTab} setActiveTab={setActiveTab} />
+          {activeTab === 0 && <Hero />}
+          {activeTab === 1 && <Gallery />}
+        </div>
+      ) : (
+        <Hero />
+      )}
+    </div>
+  )
+}
+
+export default ActiveTab