feat(nextjs): example app UI updates

TxnLab · Feb 23, 2024 · d536649 · d536649
1 parent c50e8aa
commit d536649
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/examples/nextjs/src/app/Connect.module.css b/examples/nextjs/src/app/Connect.module.css
@@ -1,5 +1,11 @@
 .walletName {
-  margin-bottom: 0.25em;
+  line-height: 1.5;
+  margin: 1.33em 0;
+  text-align: center;
+}
+
+.walletName[data-active='true']:after {
+  content: ' [active]';
 }
 
 .walletButtons {
@@ -8,7 +14,7 @@
   justify-content: center;
   flex-wrap: wrap;
   gap: 0.5em;
-  margin-bottom: 2em;
+  margin-bottom: 0.9em;
 }
 
 .walletButtons button {
@@ -34,8 +40,20 @@
   cursor: default;
 }
 
+.walletMenu {
+  margin-top: 1.5em;
+}
+
+.fallbackMsg {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  text-align: center;
+  opacity: 0.5;
+  margin: 2em 0;
+}
+
 @media (prefers-color-scheme: light) {
   .walletButtons button {
-    background-color: #f9f9f9;
+    background-color: #ffffff;
   }
 }
diff --git a/examples/nextjs/src/app/Connect.tsx b/examples/nextjs/src/app/Connect.tsx
@@ -1,15 +1,26 @@
 import { useWallet } from '@txnlab/use-wallet-react'
+import * as React from 'react'
 import styles from './Connect.module.css'
 
 export function Connect() {
+  const [isReady, setIsReady] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsReady(true)
+  }, [])
+
   const { wallets } = useWallet()
 
+  if (!isReady) {
+    return <p className={styles.fallbackMsg}>Loading wallets&hellip;</p>
+  }
+
   return (
     <div>
       {wallets.map((wallet) => (
         <div key={wallet.id}>
-          <h4 className={styles.walletName}>
-            {wallet.metadata.name} {wallet.isActive ? '[active]' : ''}
+          <h4 className={styles.walletName} data-active={wallet.isActive}>
+            {wallet.metadata.name}
           </h4>
           <div className={styles.walletButtons}>
             <button type="button" onClick={() => wallet.connect()} disabled={wallet.isConnected}>
@@ -33,6 +44,7 @@ export function Connect() {
           {wallet.isActive && wallet.accounts.length > 0 && (
             <div>
               <select
+                className={styles.walletMenu}
                 onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
                   const target = event.target
                   wallet.setActiveAccount(target.value)

diff --git a/examples/nextjs/src/app/page.module.css b/examples/nextjs/src/app/page.module.css
@@ -82,7 +82,6 @@
   align-items: center;
   position: relative;
   padding: 4rem 0;
-  row-gap: 3rem;
 }
 
 .center::before {
@@ -92,13 +91,14 @@
   height: 360px;
   margin-left: -400px;
   pointer-events: none;
+  z-index: -1;
 }
 
 .center::after {
   background: var(--primary-glow);
   width: 240px;
   height: 180px;
-  z-index: -1;
+  z-index: -2;
   pointer-events: none;
 }
 
@@ -113,7 +113,16 @@
 
 .logo {
   position: relative;
+  margin: 1.5em;
 }
+
+.heading {
+  text-align: center;
+  font-size: 3.2em;
+  line-height: 1.1;
+  margin: 0.67em 0 0.25em;
+}
+
 /* Enable hover only on non-touch devices */
 @media (hover: hover) and (pointer: fine) {
   .card:hover {

diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
@@ -16,6 +16,7 @@ export default function Home() {
           height={37}
           priority
         />
+        <h1 className={styles.heading}>@txnlab/use-wallet-react</h1>
         <Connect />
       </div>
     </main>