Skip to content

Commit eaee435

Browse files
blueccobluecco
committed
chore: update ui
1 parent ca2b6f0 commit eaee435

36 files changed

+1288
-673
lines changed

‎public/starknet_logo.png‎

12.4 KB
Loading

‎src/app/globals.css‎

Lines changed: 386 additions & 43 deletions
Large diffs are not rendered by default.

‎src/app/layout.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import type { Metadata } from "next"
2+
import { Inter } from "next/font/google"
23
import "./globals.css"
34

5+
const inter = Inter({ subsets: ["latin"] })
6+
47
export const metadata: Metadata = {
58
title: "Demo dapp starknet",
69
description:
@@ -14,7 +17,13 @@ export default function RootLayout({
1417
}>) {
1518
return (
1619
<html lang="en">
17-
<body>{children}</body>
20+
<body className={inter.className}>
21+
<main
22+
style={{ height: "100dvh", display: "flex", flexDirection: "column" }}
23+
>
24+
{children}
25+
</main>
26+
</body>
1827
</html>
1928
)
2029
}

‎src/app/page.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
"use client"
22

33
import { StarknetDapp } from "@/components/StarknetDapp"
4-
import { Flex } from "@/components/ui/Flex"
54
import { connectors } from "@/connectors"
6-
import { CHAIN_ID } from "@/constants"
75
import { mainnet, sepolia } from "@starknet-react/chains"
86
import { publicProvider, StarknetConfig } from "@starknet-react/core"
9-
import { constants } from "starknet"
10-
11-
/* TODO: update ui */
127

138
export default function Home() {
14-
const chains = [
15-
CHAIN_ID === constants.NetworkName.SN_MAIN ? mainnet : sepolia,
16-
]
9+
const chains = [mainnet, sepolia]
1710
const providers = publicProvider()
1811

1912
return (
20-
<Flex flexDirection="column" className="demo-dapp-container">
13+
<div className="flex demo-dapp-container">
2114
{/* eslint-disable @typescript-eslint/no-explicit-any */}
2215
<StarknetConfig
2316
chains={chains}
@@ -28,6 +21,6 @@ export default function Home() {
2821
<StarknetDapp />
2922
</StarknetConfig>
3023
{/* eslint-enable @typescript-eslint/no-explicit-any */}
31-
</Flex>
24+
</div>
3225
)
3326
}

‎src/components/Header.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { isMainnet, toHexChainid } from "@/helpers/chainId"
2+
import { formatTruncatedAddress } from "@/helpers/formatAddress"
3+
import { useAccount, useBalance } from "@starknet-react/core"
4+
import { AvatarIcon } from "./icons/AvatarIcon"
5+
import { LogoIcon } from "./icons/LogoIcon"
6+
import { WalletIcon } from "./icons/WalletIcon"
7+
8+
const Header = () => {
9+
const { address, isConnected, chainId } = useAccount()
10+
11+
const { data: balance } = useBalance({
12+
address: address,
13+
})
14+
15+
const hexChainId = toHexChainid(chainId)
16+
17+
return (
18+
<div className="flex header-container">
19+
<div className="flex header-logo-container">
20+
<LogoIcon />
21+
<h1 className="header-title">Demo dapp</h1>
22+
<div className="flex full-flex" />
23+
24+
{isConnected && (
25+
<div className="flex header-profile-container">
26+
<div className="flex header-balance">
27+
<WalletIcon />
28+
{balance && balance?.formatted.length > 7
29+
? `${balance.formatted.slice(0, 7)} ETH`
30+
: `${balance?.formatted} ETH`}
31+
</div>
32+
<div className="header-account-separator" />
33+
<div
34+
className="flex header-address"
35+
onClick={() =>
36+
window.open(
37+
isMainnet(hexChainId)
38+
? `https://voyager.online/contract/${address}`
39+
: `https://sepolia.voyager.online/contract/${address}`,
40+
"_blank",
41+
)
42+
}
43+
>
44+
<AvatarIcon />
45+
{formatTruncatedAddress(address || "")}
46+
</div>
47+
</div>
48+
)}
49+
</div>
50+
</div>
51+
)
52+
}
53+
54+
export { Header }

‎src/components/StarknetDapp.tsx‎

Lines changed: 71 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,81 @@
11
"use client"
22
import { SignMessage } from "@/components/sections/SignMessage"
33
import { Transactions } from "@/components/sections/Transactions/Transactions"
4+
import { useAccount } from "@starknet-react/core"
5+
import { useState } from "react"
46
import { Connect } from "./connect/Connect"
5-
import { Flex } from "./ui/Flex"
7+
import { Header } from "./Header"
68
import { AccountStatus } from "./sections/AccountStatus"
79
import { AddToken } from "./sections/ERC20/AddToken"
810
import { Network } from "./sections/Network/Network"
11+
import { SectionButton } from "./sections/SectionButton"
12+
import { Section } from "./sections/types"
913

10-
const StarknetDapp = () => (
11-
<Flex
12-
flexDirection="column"
13-
maxWidth="500px"
14-
width="100%"
15-
margin="0 auto"
16-
gap="24px"
17-
>
18-
<AccountStatus />
19-
<Connect />
20-
<Transactions />
21-
<SignMessage />
22-
<Network />
23-
<AddToken />
24-
</Flex>
25-
)
14+
const StarknetDapp = () => {
15+
const [section, setSection] = useState<Section | undefined>(undefined)
16+
const { isConnected } = useAccount()
17+
18+
return (
19+
<div className="flex full column">
20+
<Header />
21+
22+
<div className="flex get-started-container">
23+
<div className="flex column">
24+
<h1 className="get-started-title">your</h1>
25+
<span className="get-started-subtitle">
26+
Starknet utilizes the power of STARK technology to ensure
27+
computational integrity.
28+
</span>
29+
</div>
30+
31+
<div className="status-grid-container">
32+
<AccountStatus />
33+
</div>
34+
</div>
35+
36+
<div className="flex sections-container">
37+
<div className="flex full column sections-list">
38+
<SectionButton
39+
section="Connection"
40+
setSection={setSection}
41+
selected={section === "Connection"}
42+
/>
43+
<SectionButton
44+
section="Transactions"
45+
setSection={setSection}
46+
selected={section === "Transactions"}
47+
disabled={!isConnected}
48+
/>
49+
<SectionButton
50+
section="Signing"
51+
setSection={setSection}
52+
selected={section === "Signing"}
53+
disabled={!isConnected}
54+
/>
55+
<SectionButton
56+
section="Network"
57+
setSection={setSection}
58+
selected={section === "Network"}
59+
disabled={!isConnected}
60+
/>
61+
<SectionButton
62+
section="ERC20"
63+
setSection={setSection}
64+
selected={section === "ERC20"}
65+
disabled={!isConnected}
66+
/>
67+
</div>
68+
69+
<div className="flex full-flex">
70+
{section === "Connection" && <Connect />}
71+
{section === "Transactions" && <Transactions />}
72+
{section === "Signing" && <SignMessage />}
73+
{section === "Network" && <Network />}
74+
{section === "ERC20" && <AddToken />}
75+
</div>
76+
</div>
77+
</div>
78+
)
79+
}
2680

2781
export { StarknetDapp }

‎src/components/connect/Connect.tsx‎

Lines changed: 58 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { useAccount, useConnect } from "@starknet-react/core"
1+
import { useAccount, useConnect, useDisconnect } from "@starknet-react/core"
2+
import Image from "next/image"
23
import { useEffect, useState } from "react"
3-
import { disconnect } from "starknetkit"
4-
import { Accordion } from "../ui/Accordion"
4+
import { SectionLayout } from "../sections/SectionLayout"
55
import { Button } from "../ui/Button"
6-
import { Flex } from "../ui/Flex"
76
import { ConnectorButton } from "./ConnectorButton"
87
import { ConnectStarknetkitModal } from "./ConnectStarknetkitModal"
8+
import { DisconnectIcon } from "../icons/DisconnectIcon"
99

1010
const Connect = () => {
1111
const { isConnected } = useAccount()
1212
const { connectors } = useConnect()
13+
const { disconnect } = useDisconnect({})
1314
const [isClient, setIsClient] = useState(false)
1415

1516
useEffect(() => {
@@ -21,57 +22,59 @@ const Connect = () => {
2122
}
2223

2324
return (
24-
<Flex flexDirection="column" gap="12px">
25-
<Accordion
26-
isDefaultOpen
27-
items={[
28-
{
29-
title: "Connection",
30-
content: (
31-
<Flex gap="12px">
32-
<Flex flex={1} flexDirection="column" gap="12px">
33-
<ConnectStarknetkitModal />
34-
35-
<Accordion
36-
withBorder
37-
items={[
38-
{
39-
title: "starknet-react connectors",
40-
content: (
41-
<Flex
42-
flex={1}
43-
flexDirection="column"
44-
gap="12px"
45-
padding="8px"
46-
>
47-
{connectors.map((connector) => (
48-
<ConnectorButton
49-
key={connector.id}
50-
connector={connector}
51-
/>
52-
))}
53-
</Flex>
54-
),
55-
},
56-
]}
57-
/>
58-
</Flex>
59-
60-
<Flex flex={1} height="fit-content">
61-
<Button
62-
className="full"
63-
onClick={() => disconnect()}
64-
disabled={!isConnected}
65-
>
66-
Disconnect
67-
</Button>
68-
</Flex>
69-
</Flex>
70-
),
71-
},
72-
]}
73-
/>
74-
</Flex>
25+
<SectionLayout sectionTitle="Connection">
26+
<div className="flex column gap-3">
27+
<div className="flex gap-3">
28+
<ConnectStarknetkitModal />
29+
<Button
30+
className={`full ${!isConnected ? "disabled" : ""}`}
31+
onClick={() => disconnect()}
32+
disabled={!isConnected}
33+
hideChevron
34+
leftIcon={<DisconnectIcon />}
35+
>
36+
Disconnect
37+
</Button>
38+
</div>
39+
<div className="flex column available-connector">
40+
<span className="starknet-react-connectors-title">
41+
Starknet-react connectors
42+
</span>
43+
<div className="connectors-grid">
44+
{connectors.map((connector) => {
45+
const icon =
46+
typeof connector.icon === "string"
47+
? connector.icon
48+
: connector.icon.dark
49+
const isSvg = icon?.startsWith("<svg")
50+
return (
51+
<ConnectorButton
52+
key={connector.id}
53+
connector={connector}
54+
icon={
55+
<>
56+
{isSvg ? (
57+
<div
58+
dangerouslySetInnerHTML={{ __html: icon }}
59+
className="connector-icon"
60+
/>
61+
) : (
62+
<Image
63+
alt={connector.name}
64+
src={icon}
65+
height={17}
66+
width={17}
67+
/>
68+
)}
69+
</>
70+
}
71+
/>
72+
)
73+
})}
74+
</div>
75+
</div>
76+
</div>
77+
</SectionLayout>
7578
)
7679
}
7780

‎src/components/connect/ConnectStarknetkitModal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const ConnectStarknetkitModal = () => {
1818
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1919
await connectAsync({ connector: connector as any })
2020
}}
21+
hideChevron
2122
>
2223
Starknetkit Modal
2324
</Button>

‎src/components/connect/ConnectorButton.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11
import { Connector, useConnect } from "@starknet-react/core"
2-
import { FC } from "react"
2+
import { FC, ReactNode } from "react"
33
import { Button } from "../ui/Button"
44

5-
const ConnectorButton: FC<{ connector: Connector }> = ({ connector }) => {
5+
const ConnectorButton: FC<{ connector: Connector; icon: ReactNode }> = ({
6+
connector,
7+
icon,
8+
}) => {
69
const { connectAsync } = useConnect()
710
if (!connector.available()) {
811
return null
912
}
1013

1114
return (
1215
<Button
13-
className="full"
1416
key={connector.id}
1517
onClick={async () => {
1618
await connectAsync({ connector })
1719
}}
20+
className="connector"
21+
hideChevron
1822
>
19-
{connector.name}
23+
<div className="flex align-items-center gap-2">
24+
{icon}
25+
{connector.name}
26+
</div>
2027
</Button>
2128
)
2229
}

0 commit comments

Comments
 (0)