refactor: ui

Author: bluecco

src/app/globals.css

@@ -103,3 +103,23 @@ textarea {
 button[type="submit"] {
   background-color: #cefff3;
 }
+
+.demo-dapp-container {
+  padding: 40px 0;
+}
+
+/* Small screens (smartphones) - Portrait and Landscape */
+@media only screen and (max-width: 767px) {
+  .demo-dapp-container {
+    padding: 20px;
+  }
+  /* Your mobile styles here */
+}
+
+/* Extra small screens (smaller smartphones) */
+@media only screen and (max-width: 480px) {
+  /* Your styles for very small devices */
+  .demo-dapp-container {
+    padding: 16px;
+  }
+}

src/app/page.tsx

@@ -1,20 +1,21 @@
 "use client"
 
-import { publicProvider, StarknetConfig } from "@starknet-react/core"
-import { mainnet, sepolia } from "@starknet-react/chains"
-import { constants } from "starknet"
-import { CHAIN_ID } from "@/constants"
-import { connectors } from "@/connectors"
 import { StarknetDapp } from "@/components/StarknetDapp"
 import { Flex } from "@/components/ui/Flex"
+import { connectors } from "@/connectors"
+import { CHAIN_ID } from "@/constants"
+import { mainnet, sepolia } from "@starknet-react/chains"
+import { publicProvider, StarknetConfig } from "@starknet-react/core"
+import { constants } from "starknet"
 
 export default function Home() {
   const chains = [
     CHAIN_ID === constants.NetworkName.SN_MAIN ? mainnet : sepolia,
   ]
   const providers = publicProvider()
+
   return (
-    <Flex flexDirection="column" padding="40px 0">
+    <Flex flexDirection="column" className="demo-dapp-container">
       {/* eslint-disable @typescript-eslint/no-explicit-any */}
       <StarknetConfig
         chains={chains}

src/components/StarknetDapp.tsx

@@ -7,25 +7,21 @@ import { AccountStatus } from "./sections/AccountStatus"
 import { AddToken } from "./sections/ERC20/AddToken"
 import { Network } from "./sections/Network/Network"
 
-const StarknetDapp = () => {
-  //useWaitForTx()
-
-  return (
-    <Flex
-      flexDirection="column"
-      maxWidth="500px"
-      width="100%"
-      margin="0 auto"
-      gap="24px"
-    >
-      <AccountStatus />
-      <Connect />
-      <Transactions />
-      <SignMessage />
-      <Network />
-      <AddToken />
-    </Flex>
-  )
-}
+const StarknetDapp = () => (
+  <Flex
+    flexDirection="column"
+    maxWidth="500px"
+    width="100%"
+    margin="0 auto"
+    gap="24px"
+  >
+    <AccountStatus />
+    <Connect />
+    <Transactions />
+    <SignMessage />
+    <Network />
+    <AddToken />
+  </Flex>
+)
 
 export { StarknetDapp }

src/components/ui/Accordion.tsx

@@ -48,7 +48,7 @@ const Accordion: FC<AccordionProps> = ({
     <div style={withBorder ? styles.container : {}}>
       {accordionItems.map((item, index) => (
         <AccordionItem
-          key={index}
+          key={`${item.title}-${index}`}
           title={item.title || "Untitled Section"}
           isOpen={openIndices.includes(index)}
           onClick={() => handleClick(index)}

src/components/ui/Flex.tsx

@@ -1,11 +1,16 @@
 import { CSSProperties, FC, ReactNode } from "react"
 
 interface FlexProps extends CSSProperties {
+  className?: string
   children: ReactNode
 }
 
-const Flex: FC<FlexProps> = ({ children, ...props }) => {
-  return <div style={{ display: "flex", ...props }}>{children}</div>
+const Flex: FC<FlexProps> = ({ children, className, ...props }) => {
+  return (
+    <div className={className} style={{ display: "flex", ...props }}>
+      {children}
+    </div>
+  )
 }
 
 export { Flex }

src/connectors/index.ts

@@ -3,28 +3,62 @@ import {
   isInArgentMobileAppBrowser,
   ArgentMobileConnector,
 } from "starknetkit/argentMobile"
+import {
+  BraavosMobileConnector,
+  isInBraavosMobileAppBrowser,
+} from "starknetkit/braavosMobile"
 import { InjectedConnector } from "starknetkit/injected"
 import { WebWalletConnector } from "starknetkit/webwallet"
 
-export const connectors = isInArgentMobileAppBrowser()
-  ? [
-      ArgentMobileConnector.init({
-        options: {
-          url: typeof window !== "undefined" ? window.location.href : "",
-          dappName: "Example dapp",
-          chainId: CHAIN_ID,
-        },
-      }),
-    ]
-  : [
-      new InjectedConnector({ options: { id: "argentX" } }),
-      new InjectedConnector({ options: { id: "braavos" } }),
+const isMobileDevice = () => {
+  if (typeof window === "undefined") {
+    return false
+  }
+
+  // Primary method: User Agent + Touch support check
+  const userAgent = navigator.userAgent.toLowerCase()
+  const isMobileUA =
+    /android|webos|iphone|ipad|ipod|blackberry|windows phone/.test(userAgent)
+  const hasTouchSupport =
+    "ontouchstart" in window || navigator.maxTouchPoints > 0
+
+  // Backup method: Screen size
+  const isSmallScreen = window.innerWidth <= 768
+
+  // Combine checks: Must match user agent AND (touch support OR small screen)
+  return isMobileUA && (hasTouchSupport || isSmallScreen)
+}
+
+export const availableConnectors = () => {
+  if (isInArgentMobileAppBrowser()) {
+    return [
       ArgentMobileConnector.init({
         options: {
           url: typeof window !== "undefined" ? window.location.href : "",
           dappName: "Example dapp",
           chainId: CHAIN_ID,
         },
       }),
-      new WebWalletConnector({ url: ARGENT_WEBWALLET_URL }),
     ]
+  }
+
+  if (isInBraavosMobileAppBrowser()) {
+    return [BraavosMobileConnector.init({})]
+  }
+
+  return [
+    new InjectedConnector({ options: { id: "argentX" } }),
+    new InjectedConnector({ options: { id: "braavos" } }),
+    ArgentMobileConnector.init({
+      options: {
+        url: typeof window !== "undefined" ? window.location.href : "",
+        dappName: "Example dapp",
+        chainId: CHAIN_ID,
+      },
+    }),
+    isMobileDevice() ? BraavosMobileConnector.init({}) : null,
+    new WebWalletConnector({ url: ARGENT_WEBWALLET_URL }),
+  ].filter((connector) => connector !== null)
+}
+
+export const connectors = availableConnectors()