updated ui

package.json

@@ -23,7 +23,7 @@
     "react": "19.0.0-rc-02c0e824-20241028",
     "react-dom": "19.0.0-rc-02c0e824-20241028",
     "starknet": "^6.11.0",
-    "starknetkit": "^2.4.0"
+    "starknetkit": "^2.6.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
@@ -33,11 +33,14 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8",
     "eslint-config-next": "15.0.2",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5"
   },
   "lint-staged": {

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/globals.css

@@ -1,7 +1,14 @@
+/* app/globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  background-color: #000;
+  color: #fff;
 }
 
 body {
@@ -21,105 +28,90 @@ a {
   text-decoration: none;
 }
 
-.full {
-  width: 100%;
+.column {
+  flex-direction: column;
 }
 
-/* Accordion */
-
-.accordion-button {
-  width: 100%;
+button {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  border: none;
+  background-color: #262933;
+  color: #fff;
+  border-radius: 8px;
+  padding: 12px;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  background-color: transparent;
-  border: none;
+  justify-content: center;
   cursor: pointer;
-  transition: background-color 0.2s;
-  padding: 16px 0;
-}
-
-.accordion-button-with-border {
-  padding: 8px;
-}
-
-.accordion-title {
-  font-weight: bold;
-  font-size: 1.5em;
-}
-
-.accordion-title-with-border {
-  font-size: 1em;
+  gap: 4px;
+  position: relative;
 }
 
-.accordion-icon {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
+button.disabled {
+  opacity: 0.4;
+  cursor: default;
 }
 
-.accordion-icon-open {
-  transform: rotate(180deg);
+button.selected {
+  border: solid 1px #aecbfc;
+  color: #aecbfc;
+  background-color: #262933;
 }
 
-.accordion-content {
-  overflow: hidden;
-  transition: max-height 0.2s ease-out;
-  max-height: 0;
+button[type="submit"] {
+  border: solid 1px #85b6ff;
+  color: #85b6ff;
+  text-align: center;
 }
 
-.accordion-content-open {
-  max-height: 500px;
+input,
+textarea {
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid #464c5e;
+  background-color: #14161c;
+  color: #a2a2a2;
 }
 
-/* Button  */
-button {
-  border: 1px solid #c8c8c8;
-  background-color: transparent;
-  border-radius: 8px;
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  gap: 4px;
-  font-weight: bold;
+.connector-icon {
+  height: 17px;
+  width: 17px;
 }
 
-.chevron-right {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
-  transform: rotate(-90deg);
+.connector-icon > svg {
+  height: 17px;
+  width: 17px;
 }
 
-input,
-textarea {
-  padding: 8px;
-  border-radius: 8px;
-  border: 1px solid #c8c8c8;
+.get-started-title::before {
+  content: "Manage ";
 }
 
-button[type="submit"] {
-  background-color: #cefff3;
+.get-started-title::after {
+  content: " Starknet accounts";
 }
 
-.demo-dapp-container {
-  padding: 40px 0;
+.get-started-title {
+  font-size: 40px;
+  line-height: 42px;
+  color: #6f727c;
 }
 
-/* Small screens (smartphones) - Portrait and Landscape */
-@media only screen and (max-width: 767px) {
-  .demo-dapp-container {
-    padding: 20px;
-  }
-  /* Your mobile styles here */
+.get-started-title::before,
+.get-started-title::after {
+  color: #fff;
 }
 
-/* Extra small screens (smaller smartphones) */
-@media only screen and (max-width: 480px) {
-  /* Your styles for very small devices */
-  .demo-dapp-container {
-    padding: 16px;
-  }
+.truncate {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: top;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

src/app/layout.tsx

@@ -1,6 +1,9 @@
 import type { Metadata } from "next"
+import { Inter } from "next/font/google"
 import "./globals.css"
 
+const inter = Inter({ subsets: ["latin"] })
+
 export const metadata: Metadata = {
   title: "Demo dapp starknet",
   description:
@@ -14,7 +17,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={inter.className}>
+        <main className="flex flex-col h-dvh">{children}</main>
+      </body>
     </html>
   )
 }

src/app/page.tsx

@@ -1,33 +1,23 @@
 "use client"
 
 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"
-
-/* TODO: update ui */
 
 export default function Home() {
-  const chains = [
-    CHAIN_ID === constants.NetworkName.SN_MAIN ? mainnet : sepolia,
-  ]
+  const chains = [mainnet, sepolia]
   const providers = publicProvider()
 
   return (
-    <Flex flexDirection="column" className="demo-dapp-container">
-      {/* eslint-disable @typescript-eslint/no-explicit-any */}
+    <div className="flex flex-col h-screen">
       <StarknetConfig
         chains={chains}
         provider={providers}
-        /* TODO: wait for starknet-react to update Connector interface */
-        connectors={connectors as any}
+        connectors={connectors}
       >
         <StarknetDapp />
       </StarknetConfig>
-      {/* eslint-enable @typescript-eslint/no-explicit-any */}
-    </Flex>
+    </div>
   )
 }

src/components/Header.tsx

@@ -0,0 +1,83 @@
+import { isMainnet, toHexChainid } from "@/helpers/chainId"
+import { formatTruncatedAddress } from "@/helpers/formatAddress"
+import { useAccount, useBalance, useStarkProfile } from "@starknet-react/core"
+import { AvatarIcon } from "./icons/AvatarIcon"
+import { LogoIcon } from "./icons/LogoIcon"
+import { WalletIcon } from "./icons/WalletIcon"
+import { ExternalIcon } from "./icons/ExternalIcon"
+import { HeaderConnectButton } from "@/components/HeaderConnectButton"
+import Image from "next/image"
+
+const Header = () => {
+  const { address, isConnected, chainId } = useAccount()
+
+  const { data: balance } = useBalance({
+    address: address,
+  })
+
+  const { data } = useStarkProfile({ address })
+
+  const hexChainId = toHexChainid(chainId)
+
+  return (
+    <>
+      <div className="flex p-5 md:pt-[32px] md:px-[116px] md:pb-[16px] bg-black">
+        <div className="flex w-full lg:max-w-[1180px] lg:mx-auto">
+          <div className="flex items-center w-full">
+            <div className="flex items-center gap-1">
+              <div className="w-10 h-10">
+                <LogoIcon />
+              </div>
+              <h1 className="font-normal text-md md:text-xl leading-6 mt-0.5 text-nowrap">
+                Demo dapp
+              </h1>
+            </div>
+            <div className="flex flex-1 w-full" />
+
+            {isConnected && (
+              <div className="flex border-col rounded-md md:rounded-lg gap-3 p-2 md:p-3 border border-solid border-charcoal font-medium text-sm md:text-base text-nowrap">
+                <div className="hidden md:flex items-center gap-2">
+                  <WalletIcon />
+                  {balance
+                    ? balance?.formatted.length > 7
+                      ? `${balance.formatted.slice(0, 7)} ETH`
+                      : `${balance?.formatted} ETH`
+                    : "0 ETH"}
+                </div>
+                <div className="border-solid border-l-[1px] border-charcoal -my-1 mx-0  hidden md:flex" />
+                <div
+                  className="flex cursor-pointer items-center gap-2"
+                  onClick={() =>
+                    window.open(
+                      isMainnet(hexChainId)
+                        ? `https://voyager.online/contract/${address}`
+                        : `https://sepolia.voyager.online/contract/${address}`,
+                      "_blank",
+                    )
+                  }
+                >
+                  {data?.profilePicture ? (
+                    <Image
+                      alt="generic_profile"
+                      width={20}
+                      height={20}
+                      className="w-6 h-6"
+                      src={data?.profilePicture}
+                    />
+                  ) : (
+                    <AvatarIcon />
+                  )}
+                  {formatTruncatedAddress(address || "")}
+                  <ExternalIcon />
+                </div>
+              </div>
+            )}
+            {!isConnected && <HeaderConnectButton />}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export { Header }

src/components/HeaderConnectButton.tsx

@@ -0,0 +1,30 @@
+import { useConnect } from "@starknet-react/core"
+import { StarknetkitConnector, useStarknetkitConnectModal } from "starknetkit"
+
+const HeaderConnectButton = () => {
+  const { connectAsync, connectors } = useConnect()
+
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors: connectors as StarknetkitConnector[],
+  })
+
+  return (
+    <>
+      <button
+        className="px-12 bg-gradient-to-r from-nebula-from to-nebula-to text-white rounded-lg"
+        onClick={async () => {
+          const { connector } = await starknetkitConnectModal()
+          if (!connector) {
+            // or throw error
+            return
+          }
+          await connectAsync({ connector })
+        }}
+      >
+        Connect wallet
+      </button>
+    </>
+  )
+}
+
+export { HeaderConnectButton }