fix: improve example UI

vechain · Nov 25, 2024 · 8b4bd58 · 8b4bd58
1 parent 8c1234b
commit 8b4bd58
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 35 deletions.
diff --git a/examples/sample-privy-next-app/src/app/globals.css b/examples/sample-privy-next-app/src/app/globals.css
@@ -1,39 +1,23 @@
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-html,
 body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
+  margin: 0;
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
 }
-
-* {
-  box-sizing: border-box;
-  padding: 0;
+h2 {
   margin: 0;
 }
-
-a {
-  color: inherit;
-  text-decoration: none;
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #000;
+  border-radius: 20px;
+  padding: 20px;
 }
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+.label {
+  margin-top: 20px;
+  margin-bottom: 10px;
 }
diff --git a/examples/sample-privy-next-app/src/app/pages/homepage.tsx b/examples/sample-privy-next-app/src/app/pages/homepage.tsx
@@ -9,7 +9,7 @@ import {
 } from "@vechain/dapp-kit-react-privy";
 
 const HomePage = (): ReactElement => {
-    const { isConnected, connectedAddress, logout } =
+    const { isConnected, isConnectedWithPrivy, isConnectedWithDappKit, connectedAddress, abstractedAccount, logout } =
         useWalletAdapter();
 
     const {
@@ -20,7 +20,7 @@ const HomePage = (): ReactElement => {
     //const isInAppBrowser = window.vechain && window.vechain.isInAppBrowser;
 
     return (
-        <div>
+        <div className="container">
             {isConnected ? (
                 <Button onClick={logout}>Disconnect</Button>
             ) : (
@@ -29,6 +29,9 @@ const HomePage = (): ReactElement => {
 
             {isConnected && (
                 <div>
+                    <p>Connected with Privy: {isConnectedWithPrivy.toString()}</p>
+                    <p>Connected with DappKit: {isConnectedWithDappKit.toString()}</p>
+                    <p>Abstracted Account: {abstractedAccount.embeddedWallet?.address}</p>
                     <p>Connected Address: {connectedAddress}</p>
                 </div>
             )}