diff --git a/package.json b/package.json index 863b444..42dc7b8 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 021fe2f..ebd73c5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,8 +27,8 @@ importers: specifier: ^6.11.0 version: 6.11.0 starknetkit: - specifier: ^2.4.0 - version: 2.4.0(starknet@6.11.0) + specifier: ^2.5.0 + version: 2.5.0(starknet@6.11.0) devDependencies: '@commitlint/cli': specifier: ^19.5.0 @@ -2860,8 +2860,8 @@ packages: starknet@6.11.0: resolution: {integrity: sha512-u50KrGDi9fbu1Ogu7ynwF/tSeFlp3mzOg1/Y5x50tYFICImo3OfY4lOz9OtYDk404HK4eUujKkhov9tG7GAKlg==} - starknetkit@2.4.0: - resolution: {integrity: sha512-k6an2qrr3OUS9QaUVmjfikEMYLppyLvy0V4DRX8MKYEIGZ0VBG5dNAj9uuBIWyjlNlJPY9RwmmHhOMNazbgBmg==} + starknetkit@2.5.0: + resolution: {integrity: sha512-8sbI9OLN+ximS3CfzAxcBVNaovZw+vOGtmu06JqzgMjir89A4a/vqho6eGl9rBZvCbzmAzo/3bfJh1aiPZtKKw==} peerDependencies: starknet: ^6.9.0 @@ -6461,7 +6461,7 @@ snapshots: transitivePeerDependencies: - encoding - starknetkit@2.4.0(starknet@6.11.0): + starknetkit@2.5.0(starknet@6.11.0): dependencies: '@starknet-io/get-starknet': 4.0.3 '@starknet-io/get-starknet-core': 4.0.3 diff --git a/src/HeaderConnectButton.tsx b/src/HeaderConnectButton.tsx new file mode 100644 index 0000000..6b085da --- /dev/null +++ b/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 ( + <> + + + ) +} + +export { HeaderConnectButton } diff --git a/src/app/globals.css b/src/app/globals.css index d3e793f..8f77465 100644 --- 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; @@ -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 */ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 599f1b5..08636ca 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -18,11 +18,7 @@ export default function RootLayout({ return ( -
- {children} -
+
{children}
) diff --git a/src/app/page.tsx b/src/app/page.tsx index 9bc0f3b..625d301 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,17 +10,14 @@ export default function Home() { const providers = publicProvider() return ( -
- {/* eslint-disable @typescript-eslint/no-explicit-any */} +
- {/* eslint-enable @typescript-eslint/no-explicit-any */}
) } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 901eb8a..1b5fdbb 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,9 +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() @@ -12,42 +15,68 @@ const Header = () => { address: address, }) + const { data } = useStarkProfile({ address }) + const hexChainId = toHexChainid(chainId) return ( -
-
- -

Demo dapp

-
- - {isConnected && ( -
-
- - {balance && balance?.formatted.length > 7 - ? `${balance.formatted.slice(0, 7)} ETH` - : `${balance?.formatted} ETH`} -
-
-
- window.open( - isMainnet(hexChainId) - ? `https://voyager.online/contract/${address}` - : `https://sepolia.voyager.online/contract/${address}`, - "_blank", - ) - } - > - - {formatTruncatedAddress(address || "")} + <> +
+
+
+
+
+ +
+

+ Demo dapp +

+
+ + {isConnected && ( +
+
+ + {balance + ? balance?.formatted.length > 7 + ? `${balance.formatted.slice(0, 7)} ETH` + : `${balance?.formatted} ETH` + : "0 ETH"} +
+
+
+ window.open( + isMainnet(hexChainId) + ? `https://voyager.online/contract/${address}` + : `https://sepolia.voyager.online/contract/${address}`, + "_blank", + ) + } + > + {data?.profilePicture ? ( + generic_profile + ) : ( + + )} + {formatTruncatedAddress(address || "")} + +
+
+ )} + {!isConnected && }
- )} +
-
+ ) } diff --git a/src/components/StarknetDapp.tsx b/src/components/StarknetDapp.tsx index b271ac9..1440ea3 100644 --- a/src/components/StarknetDapp.tsx +++ b/src/components/StarknetDapp.tsx @@ -10,6 +10,7 @@ import { AddToken } from "./sections/ERC20/AddToken" import { Network } from "./sections/Network/Network" import { SectionButton } from "./sections/SectionButton" import { Section } from "./sections/types" +import { GithubLogo } from "./icons/GithubLogo" const StarknetDapp = () => { const [section, setSection] = useState
(undefined) @@ -19,61 +20,83 @@ const StarknetDapp = () => {
-
-
-

your

- - Starknet utilizes the power of STARK technology to ensure - computational integrity. - -
+
+
+
+

+ your +

+ + Starknet utilizes the power of STARK technology to ensure + computational integrity. + +
-
- +
+ +
-
-
- - - - - -
+
+
+
+ + + + + +
-
- {section === "Connection" && } - {section === "Transactions" && } - {section === "Signing" && } - {section === "Network" && } - {section === "ERC20" && } +
+ {section === "Connection" && } + {section === "Transactions" && } + {section === "Signing" && } + {section === "Network" && } + {section === "ERC20" && } +
+ + +
+ + Github +
+
) } diff --git a/src/components/connect/Connect.tsx b/src/components/connect/Connect.tsx index 610f295..99b27a8 100644 --- a/src/components/connect/Connect.tsx +++ b/src/components/connect/Connect.tsx @@ -24,10 +24,10 @@ const Connect = () => { return (
-
+
-
- +
+ Starknet-react connectors -
+
{connectors.map((connector) => { const icon = typeof connector.icon === "string" diff --git a/src/components/connect/ConnectStarknetkitModal.tsx b/src/components/connect/ConnectStarknetkitModal.tsx index 31ff465..ce187d7 100644 --- a/src/components/connect/ConnectStarknetkitModal.tsx +++ b/src/components/connect/ConnectStarknetkitModal.tsx @@ -1,6 +1,6 @@ import { useConnect } from "@starknet-react/core" -import { Button } from "../ui/Button" import { StarknetkitConnector, useStarknetkitConnectModal } from "starknetkit" +import { Button } from "../ui/Button" const ConnectStarknetkitModal = () => { const { connectAsync, connectors } = useConnect() @@ -11,12 +11,14 @@ const ConnectStarknetkitModal = () => { return ( - ) -} + className, +}) => ( + +) export { SectionButton } diff --git a/src/components/sections/SectionLayout.tsx b/src/components/sections/SectionLayout.tsx index 45f787a..1323470 100644 --- a/src/components/sections/SectionLayout.tsx +++ b/src/components/sections/SectionLayout.tsx @@ -1,23 +1,23 @@ -import { FC, PropsWithChildren } from "react" +import { FC, PropsWithChildren, ReactNode } from "react" import { IconStatusIcon } from "../icons/IconStatusIcon" -import { InfoIcon } from "../icons/InfoIcon" interface SectionLayoutProps extends PropsWithChildren { sectionTitle: string + icon?: ReactNode } -const SectionLayout: FC = ({ children, sectionTitle }) => { +const SectionLayout: FC = ({ + children, + sectionTitle, + icon, +}) => { return ( -
-
- -

{sectionTitle}

- +
+
+ {icon ? icon : } +

+ {sectionTitle} +

{children}
diff --git a/src/components/sections/SignMessage.tsx b/src/components/sections/SignMessage.tsx index 00d6d01..a41feb8 100644 --- a/src/components/sections/SignMessage.tsx +++ b/src/components/sections/SignMessage.tsx @@ -4,6 +4,7 @@ import { useState } from "react" import { constants, stark } from "starknet" import { Button } from "../ui/Button" import { SectionLayout } from "./SectionLayout" +import { SigningIcon } from "../icons/SigningIcon" const SignMessage = () => { const { account, address, chainId } = useAccount() @@ -51,37 +52,46 @@ const SignMessage = () => { } return ( - -
+ }> +
{ e.preventDefault() handleSignSubmit() }} > + Sign message