fix: ui

argentlabs · Nov 25, 2024 · af269a5 · af269a5
1 parent 1c8c492
commit af269a5
Show file tree

Hide file tree

Showing 8 changed files with 251 additions and 239 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/HeaderConnectButton.tsx b/src/HeaderConnectButton.tsx
@@ -9,19 +9,21 @@ const HeaderConnectButton = () => {
   })
 
   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>
+    <>
+      <button
+        className="bg-gradient-to-r from-nebula-from to-nebula-to"
+        onClick={async () => {
+          const { connector } = await starknetkitConnectModal()
+          if (!connector) {
+            // or throw error
+            return
+          }
+          await connectAsync({ connector })
+        }}
+      >
+        Connect wallet
+      </button>
+    </>
   )
 }
 

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -97,6 +97,8 @@ textarea {
 }
 
 .get-started-title {
+  font-size: 40px;
+  line-height: 42px;
   color: #6f727c;
 }
 

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -20,59 +20,63 @@ const Header = () => {
   const hexChainId = toHexChainid(chainId)
 
   return (
-    <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-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="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={() =>
-                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 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-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="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={() =>
+                    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>
-        )}
-        {!isConnected && <HeaderConnectButton />}
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 

diff --git a/src/components/StarknetDapp.tsx b/src/components/StarknetDapp.tsx
@@ -20,68 +20,73 @@ const StarknetDapp = () => {
     <div className="flex w-full h-full column">
       <Header />
 
-      <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 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="flex p-5 md:py-[56px] md:px-[116px] bg-black">
+        <div className="flex w-full lg:max-w-[1178px] lg:mx-auto md:gap-20 lg:gap-[130px]">
+          <div className="flex column gap-2.5 w-full max-w-[362px]">
+            <h1 className="get-started-title text-[32px] leading-[34px] md:text-[40px] md:leading-[42px] 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="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 className="w-full hidden md:grid 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>
 
-      <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>
+      <div className="flex p-5 gap-3  md:py-[56px] md:px-[116px]  flex-1 h-full">
+        <div className="flex flex-col md:flex-row w-full gap-4 md:gap-20 lg:gap-[130px] lg:max-w-[1178px] lg:mx-auto">
+          <div className="flex w-full column gap-3 md:max-w-[362px]">
+            <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>
 
-        <div className="flex flex-1 w-full">
-          {section === "Connection" && <Connect />}
-          {section === "Transactions" && <Transactions />}
-          {section === "Signing" && <SignMessage />}
-          {section === "Network" && <Network />}
-          {section === "ERC20" && <AddToken />}
+          <div className="flex flex-1 w-full">
+            {section === "Connection" && <Connect />}
+            {section === "Transactions" && <Transactions />}
+            {section === "Signing" && <SignMessage />}
+            {section === "Network" && <Network />}
+            {section === "ERC20" && <AddToken />}
+          </div>
         </div>
       </div>
+
       <a
         href="https://github.com/argentlabs/demo-dapp-starknet"
         target="_blank"

diff --git a/src/components/sections/SectionLayout.tsx b/src/components/sections/SectionLayout.tsx
@@ -1,6 +1,5 @@
 import { FC, PropsWithChildren, ReactNode } from "react"
 import { IconStatusIcon } from "../icons/IconStatusIcon"
-import { InfoIcon } from "../icons/InfoIcon"
 
 interface SectionLayoutProps extends PropsWithChildren {
   sectionTitle: string
@@ -19,12 +18,6 @@ const SectionLayout: FC<SectionLayoutProps> = ({
         <h3 className="text-lg font-semibold leading-6 text-left">
           {sectionTitle}
         </h3>
-        <InfoIcon
-          style={{
-            position: "absolute",
-            right: "0",
-          }}
-        />
       </div>
       <div className="flex column gap-3">{children}</div>
     </div>

diff --git a/src/connectors/index.ts b/src/connectors/index.ts
@@ -57,7 +57,7 @@ export const availableConnectors = () => {
       },
     }),
     isMobileDevice() ? BraavosMobileConnector.init({}) : null,
-    new WebWalletConnector({ url: ARGENT_WEBWALLET_URL }),
+    new WebWalletConnector({ url: ARGENT_WEBWALLET_URL /* theme: "auto" */ }),
   ].filter((connector) => connector !== null)
 }
 

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -31,6 +31,8 @@ export default {
         "light-blue": "#aecbfc",
         "dark-grey": "#646876",
         "medium-grey": "#6f727c",
+        "nebula-from": "#EC796B",
+        "nebula-to": "#D672EF",
       },
     },
   },