Merge remote-tracking branch 'origin/develop' into tests/e2e-POC

package.json

@@ -24,7 +24,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.5.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",

src/HeaderConnectButton.tsx

@@ -0,0 +1,32 @@
+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
+        style={{
+          background: "linear-gradient(to bottom right, #EC796B, #D672EF)",
+        }}
+        onClick={async () => {
+          const { connector } = await starknetkitConnectModal()
+          if (!connector) {
+            // or throw error
+            return
+          }
+          await connectAsync({ connector })
+        }}
+      >
+        Connect wallet
+      </button>
+    </>
+  )
+}
+
+export { HeaderConnectButton }

src/app/globals.css

@@ -3,8 +3,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Your custom CSS here */
-
 html,
 body {
   max-width: 100vw;
@@ -34,7 +32,6 @@ a {
   flex-direction: column;
 }
 
-/* Button -- START */
 button {
   font-size: 18px;
   font-weight: 500;
@@ -49,83 +46,27 @@ button {
   padding: 12px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   cursor: pointer;
   gap: 4px;
   position: relative;
 }
 
-button.sections-list-button {
-  background-color: #14161c;
-  color: #6f727c;
-}
-
-button:not(.selected, :disabled):hover {
-  background-color: #464c5e;
-}
-
 button.disabled {
   opacity: 0.4;
   cursor: default;
 }
 
 button.selected {
-  background-color: #aecbfc;
-  color: #090e12;
-}
-
-button.connector {
-  background-color: #464c5e;
-  height: 40px;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: 500;
-  gap: 8px;
-  justify-content: center;
-}
-
-button.connector > div {
-  gap: 8px;
-  align-items: center;
-}
-
-.connectors-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-/* Button -- END */
-
-.chevron-right {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
-  transform: rotate(-90deg);
-  color: #090e12;
-}
-
-.chevron-down {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
-  color: #6f727c;
-}
-
-.chevron-up {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
-  color: #6f727c;
-  transform: rotate(-180deg);
+  border: solid 1px #aecbfc;
+  color: #aecbfc;
+  background-color: #262933;
 }
 
-.chevron-left {
-  width: 16px;
-  height: 16px;
-  transition: transform 0.2s;
-  color: #6f727c;
-  transform: rotate(-270deg);
+button[type="submit"] {
+  border: solid 1px #85b6ff;
+  color: #85b6ff;
+  text-align: center;
 }
 
 input,
@@ -137,67 +78,6 @@ textarea {
   color: #a2a2a2;
 }
 
-button[type="submit"] {
-  border: solid 1px #85b6ff;
-  color: #85b6ff;
-  text-align: center;
-}
-
-/* Header */
-
-.header-container {
-  padding: 32px 116px 16px;
-}
-
-.header-profile-container {
-  background-color: #14161c;
-  border-radius: 12px;
-  gap: 12px;
-  padding: 16px;
-}
-
-.header-title {
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 24px;
-  letter-spacing: 1%;
-  margin-top: 2px;
-}
-
-.header-account-separator {
-  border-left: solid 1px #464c5e;
-  margin: -4px 0;
-}
-
-/* Header - END */
-
-/* Section */
-.section-layout-heading {
-  gap: 8px;
-  position: relative;
-  border-bottom: solid 1px #262933;
-  padding-bottom: 16px;
-}
-
-.section-layout-container {
-  flex-direction: column;
-  gap: 24px;
-  width: 100%;
-  background-color: #14161c;
-  padding: 24px;
-  border-radius: 12px;
-  height: fit-content;
-}
-
-.section-title {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 24px;
-  text-align: left;
-  text-underline-position: from-font;
-  text-decoration-skip-ink: none;
-}
-
 .connector-icon {
   height: 17px;
   width: 17px;
@@ -208,16 +88,6 @@ button[type="submit"] {
   width: 17px;
 }
 
-.get-started-title {
-  font-size: 48px;
-  font-weight: 600;
-  line-height: 58px;
-  text-align: left;
-  text-underline-position: from-font;
-  text-decoration-skip-ink: none;
-  color: "#FFF";
-}
-
 .get-started-title::before {
   content: "Manage ";
 }
@@ -227,6 +97,8 @@ button[type="submit"] {
 }
 
 .get-started-title {
+  font-size: 40px;
+  line-height: 42px;
   color: #6f727c;
 }
 
@@ -235,50 +107,6 @@ button[type="submit"] {
   color: #fff;
 }
 
-.get-started-subtitle {
-  color: #6f727c;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-  text-align: left;
-  text-underline-position: from-font;
-  text-decoration-skip-ink: none;
-}
-
-/* Section */
-
-/* Status -- Start */
-.status-grid-container {
-  /* Create a grid with auto-fill columns, minimum 200px width */
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  /* Limit to maximum 4 columns using max-width */
-  max-width: 800px;
-  width: 100%;
-  gap: 80px;
-}
-
-.status-grid-item-title {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 14px;
-  text-align: left;
-  text-underline-position: from-font;
-  text-decoration-skip-ink: none;
-  color: #6f727c;
-}
-
-.status-grid-item-value {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-  text-align: left;
-  text-underline-position: from-font;
-  text-decoration-skip-ink: none;
-  display: flex;
-  align-items: center;
-}
-
 .truncate {
   display: inline-block;
   max-width: 100%;
@@ -287,34 +115,3 @@ button[type="submit"] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-/* Ensure no more than 4 columns at any viewport width */
-@media (min-width: 1000px) {
-  .status-grid-container {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-/* Status -- End */
-
-/* Sections list */
-.sections-container {
-  gap: 180px;
-  background-color: #090e12;
-  padding: 76px 116px;
-  flex: 1;
-  height: 100%;
-}
-
-/* Section list - End */
-
-/* Connection -- Start */
-
-.starknet-react-connectors-title {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-  text-align: left;
-  text-underline-position: from-font;
-  text-decoration-skip-ink: none;
-}
-/* Connection -- End */

src/app/layout.tsx

@@ -18,11 +18,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <main
-          style={{ height: "100dvh", display: "flex", flexDirection: "column" }}
-        >
-          {children}
-        </main>
+        <main className="flex flex-col h-dvh">{children}</main>
       </body>
     </html>
   )

src/app/page.tsx

@@ -10,17 +10,14 @@ export default function Home() {
   const providers = publicProvider()
 
   return (
-    <div className="flex flex-col h-screen p-4 sm:p-5">
-      {/* 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 */}
     </div>
   )
 }