chore: update ui mobile

argentlabs · Nov 18, 2024 · 1c8c492 · 1c8c492
1 parent dc3e69e
commit 1c8c492
Show file tree

Hide file tree

Showing 21 changed files with 171 additions and 185 deletions.
diff --git a/package.json b/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.5.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/HeaderConnectButton.tsx b/src/HeaderConnectButton.tsx
@@ -0,0 +1,28 @@
+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="bg-gradient-to-r from-[#EC796B] to-[#D672EF]"
+      onClick={async () => {
+        const { connector } = await starknetkitConnectModal()
+        if (!connector) {
+          // or throw error
+          return
+        }
+        await connectAsync({ connector })
+      }}
+    >
+      Connect wallet
+    </button>
+  )
+}
+
+export { HeaderConnectButton }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,8 +3,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Your custom CSS here */
-
 html,
 body {
   max-width: 100vw;
@@ -54,10 +52,6 @@ button {
   position: relative;
 }
 
-button:not(.selected, :disabled):hover {
-  background-color: #262933;
-}
-
 button.disabled {
   opacity: 0.4;
   cursor: default;
@@ -69,6 +63,12 @@ button.selected {
   background-color: #262933;
 }
 
+button[type="submit"] {
+  border: solid 1px #85b6ff;
+  color: #85b6ff;
+  text-align: center;
+}
+
 input,
 textarea {
   padding: 8px;
@@ -78,23 +78,6 @@ textarea {
   color: #a2a2a2;
 }
 
-button[type="submit"] {
-  border: solid 1px #85b6ff;
-  color: #85b6ff;
-  text-align: center;
-}
-
-.header-account-separator {
-  border-left: solid 1px #464c5e;
-  margin: -4px 0;
-}
-
-.connectors-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 16px;
-}
-
 .connector-icon {
   height: 17px;
   width: 17px;
@@ -105,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 ";
 }
@@ -132,45 +105,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;
-}
-
-.status-grid-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  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%;
@@ -179,9 +113,3 @@ button[type="submit"] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-@media (min-width: 1000px) {
-  .status-grid-container {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,16 +11,13 @@ export default function Home() {
 
   return (
     <div className="flex flex-col h-screen">
-      {/* eslint-disable @typescript-eslint/no-explicit-any */}
       <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>
   )
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,10 +1,12 @@
 import { isMainnet, toHexChainid } from "@/helpers/chainId"
 import { formatTruncatedAddress } from "@/helpers/formatAddress"
-import { useAccount, useBalance } from "@starknet-react/core"
+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 "@/HeaderConnectButton"
+import Image from "next/image"
 
 const Header = () => {
   const { address, isConnected, chainId } = useAccount()
@@ -13,26 +15,34 @@ const Header = () => {
     address: address,
   })
 
+  const { data } = useStarkProfile({ address })
+
   const hexChainId = toHexChainid(chainId)
 
   return (
-    <div className="flex pt-[32px] px-[116px] pb-[16px] bg-heading-bg">
-      <div className="flex gap-3 items-center w-full">
-        <LogoIcon />
-        <h1 className="font-normal text-xl leading-6 mt-0.5">Demo dapp</h1>
+    <div className="flex p-5 md:pt-[32px] md:px-[116px] md:pb-[16px] bg-black">
+      <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-lg gap-3 p-3 border-2 border-solid border-default-color font-medium">
-            <div className="flex items-center gap-2">
+          <div className="flex border-col rounded-md md:rounded-lg gap-3 p-2 md:p-3 border-2 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="header-account-separator" />
+            <div className="border border-solid border-l-[1px] border-charcoal -my-1 mx-0  hidden md:flex" />
             <div
               className="flex cursor-pointer items-center gap-2"
               onClick={() =>
@@ -44,12 +54,23 @@ const Header = () => {
                 )
               }
             >
-              <AvatarIcon />
+              {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>
   )

diff --git a/src/components/StarknetDapp.tsx b/src/components/StarknetDapp.tsx
@@ -20,50 +20,57 @@ const StarknetDapp = () => {
     <div className="flex w-full h-full column">
       <Header />
 
-      <div className="flex gap-[120px] py-[56px] px-[116px] bg-heading-bg">
+      <div className="flex p-5 md:gap-[120px] md:py-[56px] md:px-[116px] bg-black">
         <div className="flex column gap-2.5">
-          <h1 className="get-started-title">your</h1>
-          <span className="get-started-subtitle">
+          <h1 className="get-started-title text-[32px] leading-[34px] md:text-[48px] md:leading-[58px] text-white font-semibold text-left">
+            your
+          </h1>
+          <span className="text-dark-grey text-base font-normal leading-6 md:font-medium text-left">
             Starknet utilizes the power of STARK technology to ensure
             computational integrity.
           </span>
         </div>
 
-        <div className="status-grid-container">
+        <div className="w-full hidden md:grid md:max-w-[800px] sm:gap-5 lg:gap-10 xl:gap-20 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           <AccountStatus />
         </div>
       </div>
 
-      <div className="flex gap-[180px] py-[76px] px-[116px] flex-1 h-full">
-        <div className="flex w-full column gap-3 flex-[0.5]">
+      <div className="flex flex-col md:flex-row p-5 gap-3 md:gap-20 lg:gap-40 md:py-[56px] md:px-[116px] flex-1 h-full">
+        <div className="flex w-full column gap-3 md:flex-[0.5]">
           <SectionButton
             section="Connection"
             setSection={setSection}
             selected={section === "Connection"}
+            className={`${!section ? "md:flex" : section === "Connection" ? "flex" : "md:flex hidden"}`}
           />
           <SectionButton
             section="Transactions"
             setSection={setSection}
             selected={section === "Transactions"}
             disabled={!isConnected}
+            className={`${!section ? "flex" : section === "Transactions" ? "flex" : "md:flex hidden"}`}
           />
           <SectionButton
             section="Signing"
             setSection={setSection}
             selected={section === "Signing"}
             disabled={!isConnected}
+            className={`${!section ? "flex" : section === "Signing" ? "flex" : "md:flex hidden"}`}
           />
           <SectionButton
             section="Network"
             setSection={setSection}
             selected={section === "Network"}
             disabled={!isConnected}
+            className={`${!section ? "flex" : section === "Network" ? "flex" : "md:flex hidden"}`}
           />
           <SectionButton
             section="ERC20"
             setSection={setSection}
             selected={section === "ERC20"}
             disabled={!isConnected}
+            className={`${!section ? "flex" : section === "ERC20" ? "flex" : "md:flex hidden"}`}
           />
         </div>
 
@@ -80,7 +87,7 @@ const StarknetDapp = () => {
         target="_blank"
         rel="noreferrer"
       >
-        <div className="flex items-center cursor-pointer w-full justify-end px-[116px] py-10 text-lavander-sky gap-2">
+        <div className="flex items-center cursor-pointer w-full justify-center md:justify-end p-5 md:py-10 md:px-[116px] text-lavander-sky gap-2">
           <GithubLogo />
           Github
         </div>

diff --git a/src/components/connect/Connect.tsx b/src/components/connect/Connect.tsx
@@ -24,10 +24,10 @@ const Connect = () => {
   return (
     <SectionLayout sectionTitle="Connection">
       <div className="flex column gap-3">
-        <div className="flex gap-3">
+        <div className="flex flex-col md:flex-row gap-3">
           <ConnectStarknetkitModal />
           <Button
-            className={`w-full ${!isConnected ? "disabled" : ""}`}
+            className={`w-full ${!isConnected ? "disabled" : ""} justify-start md:justify-center`}
             onClick={() => disconnect()}
             disabled={!isConnected}
             hideChevron
@@ -36,11 +36,11 @@ const Connect = () => {
             Disconnect
           </Button>
         </div>
-        <div className="flex column w-full p-3 border border-solid border-color-inner-section gap-5 rounded-xl">
+        <div className="flex column w-full p-3 border border-solid border-raisin-black gap-5 rounded-xl">
           <span className="text-base font-medium leading-6 text-left">
             Starknet-react connectors
           </span>
-          <div className="connectors-grid">
+          <div className="grid grid-cols-connectors-grid gap-4">
             {connectors.map((connector) => {
               const icon =
                 typeof connector.icon === "string"