From eaee435d4d2cd46b47cadaa55044f0dcc87d3865 Mon Sep 17 00:00:00 2001 From: bluecco Date: Tue, 12 Nov 2024 17:36:00 +0100 Subject: [PATCH 01/15] chore: update ui --- public/starknet_logo.png | Bin 0 -> 12695 bytes src/app/globals.css | 429 ++++++++++++++++-- src/app/layout.tsx | 11 +- src/app/page.tsx | 13 +- src/components/Header.tsx | 54 +++ src/components/StarknetDapp.tsx | 88 +++- src/components/connect/Connect.tsx | 113 ++--- .../connect/ConnectStarknetkitModal.tsx | 1 + src/components/connect/ConnectorButton.tsx | 15 +- src/components/icons/AvatarIcon.tsx | 36 ++ src/components/icons/Chevron.tsx | 65 +++ src/components/icons/CopyIcon.tsx | 32 ++ src/components/icons/DisconnectIcon.tsx | 32 ++ src/components/icons/IconStatusIcon.tsx | 38 ++ src/components/icons/InfoIcon.tsx | 19 + src/components/icons/LogoIcon.tsx | 73 +++ src/components/icons/WalletIcon.tsx | 33 ++ src/components/sections/AccountStatus.tsx | 121 ++--- src/components/sections/ERC20/AddToken.tsx | 41 +- .../sections/Network/AddNetwork.tsx | 12 +- .../sections/Network/ChangeNetwork.tsx | 21 +- src/components/sections/Network/Network.tsx | 24 +- src/components/sections/SectionButton.tsx | 34 ++ src/components/sections/SectionLayout.tsx | 27 ++ src/components/sections/SignMessage.tsx | 265 +++++------ .../sections/Transactions/SendERC20.tsx | 83 +--- .../sections/Transactions/SendMulticall.tsx | 27 +- .../sections/Transactions/Transactions.tsx | 37 +- src/components/sections/Transactions/abi.ts | 22 + src/components/sections/types.ts | 6 + src/components/ui/Accordion.tsx | 64 --- src/components/ui/AccordionItem.tsx | 53 --- src/components/ui/Button.tsx | 33 +- src/components/ui/Flex.tsx | 16 - src/helpers/chainId.ts | 10 + src/helpers/formatAddress.ts | 13 + 36 files changed, 1288 insertions(+), 673 deletions(-) create mode 100644 public/starknet_logo.png create mode 100644 src/components/Header.tsx create mode 100644 src/components/icons/AvatarIcon.tsx create mode 100644 src/components/icons/Chevron.tsx create mode 100644 src/components/icons/CopyIcon.tsx create mode 100644 src/components/icons/DisconnectIcon.tsx create mode 100644 src/components/icons/IconStatusIcon.tsx create mode 100644 src/components/icons/InfoIcon.tsx create mode 100644 src/components/icons/LogoIcon.tsx create mode 100644 src/components/icons/WalletIcon.tsx create mode 100644 src/components/sections/SectionButton.tsx create mode 100644 src/components/sections/SectionLayout.tsx create mode 100644 src/components/sections/Transactions/abi.ts create mode 100644 src/components/sections/types.ts delete mode 100644 src/components/ui/Accordion.tsx delete mode 100644 src/components/ui/AccordionItem.tsx delete mode 100644 src/components/ui/Flex.tsx create mode 100644 src/helpers/chainId.ts create mode 100644 src/helpers/formatAddress.ts diff --git a/public/starknet_logo.png b/public/starknet_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..49fac488805c3f455d03cdd7ce9699b44405abac GIT binary patch literal 12695 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 literal 0 HcmV?d00001 diff --git a/src/app/globals.css b/src/app/globals.css index 982f8dd..b6cc60a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -2,6 +2,8 @@ html, body { max-width: 100vw; overflow-x: hidden; + background-color: #000; + color: #fff; } body { @@ -21,91 +23,146 @@ a { text-decoration: none; } +.flex { + display: flex; +} + +.align-items-center { + align-items: center; +} + +.justify-content-center { + justify-content: center; +} + .full { width: 100%; } -/* Accordion */ +.full-height { + height: 100%; +} -.accordion-button { - width: 100%; +.column { + flex-direction: column; +} + +/* Button -- START */ +button { + font-size: 18px; + font-weight: 500; + line-height: 24px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; + border: none; + background-color: #262933; + color: #fff; + border-radius: 8px; + padding: 12px; display: flex; - justify-content: space-between; align-items: center; - background-color: transparent; - border: none; + justify-content: space-between; cursor: pointer; - transition: background-color 0.2s; - padding: 16px 0; + gap: 4px; + position: relative; } -.accordion-button-with-border { - padding: 8px; +button.sections-list-button { + background-color: #14161c; + color: #6f727c; } -.accordion-title { - font-weight: bold; - font-size: 1.5em; +button:not(.selected, :disabled):hover { + background-color: #464c5e; } -.accordion-title-with-border { - font-size: 1em; +button.disabled { + opacity: 0.4; + cursor: default; } -.accordion-icon { - width: 16px; - height: 16px; - transition: transform 0.2s; +button.selected { + background-color: #aecbfc; + color: #090e12; } -.accordion-icon-open { - transform: rotate(180deg); +button.connector { + background-color: #464c5e; + height: 40px; + font-size: 14px; + line-height: 14px; + font-weight: 500; + gap: 8px; + justify-content: center; } -.accordion-content { - overflow: hidden; - transition: max-height 0.2s ease-out; - max-height: 0; +button.connector > div { + gap: 8px; + align-items: center; } -.accordion-content-open { - max-height: 500px; +.connectors-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 16px; } -/* Button */ -button { - border: 1px solid #c8c8c8; - background-color: transparent; - border-radius: 8px; - padding: 8px; - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - gap: 4px; - font-weight: bold; -} +/* 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); +} + +.chevron-left { + width: 16px; + height: 16px; + transition: transform 0.2s; + color: #6f727c; + transform: rotate(-270deg); } input, textarea { padding: 8px; border-radius: 8px; - border: 1px solid #c8c8c8; + border: 1px solid #464c5e; + background-color: #14161c; + color: #a2a2a2; } button[type="submit"] { - background-color: #cefff3; + border: solid 1px #85b6ff; + color: #85b6ff; + text-align: center; } .demo-dapp-container { - padding: 40px 0; + height: 100vh; + flex-direction: column; +} + +.demo-dapp-container > div { + height: 100%; } /* Small screens (smartphones) - Portrait and Landscape */ @@ -123,3 +180,289 @@ button[type="submit"] { padding: 16px; } } + +.full-flex { + flex: 1; + width: 100%; +} + +/* Header */ + +.header-container { + padding: 32px 116px 16px; +} + +.header-logo-container { + gap: 12px; + align-items: center; + width: 100%; +} + +.header-profile-container { + background-color: #14161c; + border-radius: 12px; + gap: 12px; + padding: 16px; +} + +.header-balance { + align-items: center; + gap: 8px; +} + +.header-address { + cursor: pointer; + align-items: center; + gap: 8px; +} + +.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; +} + +.connector-icon > svg { + height: 17px; + width: 17px; +} + +.get-started-container { + gap: 120px; + padding: 56px 116px; +} + +.get-started-container > div { + gap: 10px; +} + +.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 "; +} + +.get-started-title::after { + content: " Starknet accounts"; +} + +.get-started-title { + color: #6f727c; +} + +.get-started-title::before, +.get-started-title::after { + 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 { + border-radius: 4px; + flex-direction: column; + gap: 8px; + overflow: hidden; +} + +.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%; + vertical-align: top; + overflow: hidden; + 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%; +} + +.sections-list { + gap: 12px; + flex: 0.5; +} + +/* Section list - End */ + +/* Connection -- Start */ + +.available-connector { + width: 100%; + padding: 12px; + background-color: #262933; + border-radius: 12px; + gap: 20px; +} + +.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 */ + +/* Sign message */ +.sign-message-form { + display: flex; + flex-direction: column; + flex: 1; + padding: 4; + gap: 12px; + width: 100%; +} +/* Sign message -- End */ + +.add-token-container { + color: 000; + border-width: 0px; + border-radius: 8px; + justify-content: flex-start; + width: 50%; +} + +.network-container { + color: 000; + border-width: 0px; + border-radius: 8px; + justify-content: flex-start; + width: 100%; +} + +.p-1 { + gap: 4px; +} + +.p-2 { + gap: 8px; +} + +.p-3 { + gap: 12px; +} + +.p-4 { + gap: 16px; +} + +.gap-1 { + gap: 4px; +} + +.gap-2 { + gap: 8px; +} + +.gap-3 { + gap: 12px; +} + +.gap-4 { + gap: 16px; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index fcef23f..599f1b5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,9 @@ import type { Metadata } from "next" +import { Inter } from "next/font/google" import "./globals.css" +const inter = Inter({ subsets: ["latin"] }) + export const metadata: Metadata = { title: "Demo dapp starknet", description: @@ -14,7 +17,13 @@ export default function RootLayout({ }>) { return ( - {children} + +
+ {children} +
+ ) } diff --git a/src/app/page.tsx b/src/app/page.tsx index eeafec3..085525e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,23 +1,16 @@ "use client" import { StarknetDapp } from "@/components/StarknetDapp" -import { Flex } from "@/components/ui/Flex" import { connectors } from "@/connectors" -import { CHAIN_ID } from "@/constants" import { mainnet, sepolia } from "@starknet-react/chains" import { publicProvider, StarknetConfig } from "@starknet-react/core" -import { constants } from "starknet" - -/* TODO: update ui */ export default function Home() { - const chains = [ - CHAIN_ID === constants.NetworkName.SN_MAIN ? mainnet : sepolia, - ] + const chains = [mainnet, sepolia] 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 new file mode 100644 index 0000000..add0ea3 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,54 @@ +import { isMainnet, toHexChainid } from "@/helpers/chainId" +import { formatTruncatedAddress } from "@/helpers/formatAddress" +import { useAccount, useBalance } from "@starknet-react/core" +import { AvatarIcon } from "./icons/AvatarIcon" +import { LogoIcon } from "./icons/LogoIcon" +import { WalletIcon } from "./icons/WalletIcon" + +const Header = () => { + const { address, isConnected, chainId } = useAccount() + + const { data: balance } = useBalance({ + address: 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 || "")} +
+
+ )} +
+
+ ) +} + +export { Header } diff --git a/src/components/StarknetDapp.tsx b/src/components/StarknetDapp.tsx index 0479d12..85a1e83 100644 --- a/src/components/StarknetDapp.tsx +++ b/src/components/StarknetDapp.tsx @@ -1,27 +1,81 @@ "use client" import { SignMessage } from "@/components/sections/SignMessage" import { Transactions } from "@/components/sections/Transactions/Transactions" +import { useAccount } from "@starknet-react/core" +import { useState } from "react" import { Connect } from "./connect/Connect" -import { Flex } from "./ui/Flex" +import { Header } from "./Header" import { AccountStatus } from "./sections/AccountStatus" import { AddToken } from "./sections/ERC20/AddToken" import { Network } from "./sections/Network/Network" +import { SectionButton } from "./sections/SectionButton" +import { Section } from "./sections/types" -const StarknetDapp = () => ( - - - - - - - - -) +const StarknetDapp = () => { + const [section, setSection] = useState
(undefined) + const { isConnected } = useAccount() + + return ( +
+
+ +
+
+

your

+ + Starknet utilizes the power of STARK technology to ensure + computational integrity. + +
+ +
+ +
+
+ +
+
+ + + + + +
+ +
+ {section === "Connection" && } + {section === "Transactions" && } + {section === "Signing" && } + {section === "Network" && } + {section === "ERC20" && } +
+
+
+ ) +} export { StarknetDapp } diff --git a/src/components/connect/Connect.tsx b/src/components/connect/Connect.tsx index 64a3859..0aa683c 100644 --- a/src/components/connect/Connect.tsx +++ b/src/components/connect/Connect.tsx @@ -1,15 +1,16 @@ -import { useAccount, useConnect } from "@starknet-react/core" +import { useAccount, useConnect, useDisconnect } from "@starknet-react/core" +import Image from "next/image" import { useEffect, useState } from "react" -import { disconnect } from "starknetkit" -import { Accordion } from "../ui/Accordion" +import { SectionLayout } from "../sections/SectionLayout" import { Button } from "../ui/Button" -import { Flex } from "../ui/Flex" import { ConnectorButton } from "./ConnectorButton" import { ConnectStarknetkitModal } from "./ConnectStarknetkitModal" +import { DisconnectIcon } from "../icons/DisconnectIcon" const Connect = () => { const { isConnected } = useAccount() const { connectors } = useConnect() + const { disconnect } = useDisconnect({}) const [isClient, setIsClient] = useState(false) useEffect(() => { @@ -21,57 +22,59 @@ const Connect = () => { } return ( - - - - - - - {connectors.map((connector) => ( - - ))} - - ), - }, - ]} - /> - - - - - - - ), - }, - ]} - /> - + +
+
+ + +
+
+ + Starknet-react connectors + +
+ {connectors.map((connector) => { + const icon = + typeof connector.icon === "string" + ? connector.icon + : connector.icon.dark + const isSvg = icon?.startsWith(" + {isSvg ? ( +
+ ) : ( + {connector.name} + )} + + } + /> + ) + })} +
+
+
+ ) } diff --git a/src/components/connect/ConnectStarknetkitModal.tsx b/src/components/connect/ConnectStarknetkitModal.tsx index 30d572c..e3d4e98 100644 --- a/src/components/connect/ConnectStarknetkitModal.tsx +++ b/src/components/connect/ConnectStarknetkitModal.tsx @@ -18,6 +18,7 @@ const ConnectStarknetkitModal = () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any await connectAsync({ connector: connector as any }) }} + hideChevron > Starknetkit Modal diff --git a/src/components/connect/ConnectorButton.tsx b/src/components/connect/ConnectorButton.tsx index 911b4f3..9e88831 100644 --- a/src/components/connect/ConnectorButton.tsx +++ b/src/components/connect/ConnectorButton.tsx @@ -1,8 +1,11 @@ import { Connector, useConnect } from "@starknet-react/core" -import { FC } from "react" +import { FC, ReactNode } from "react" import { Button } from "../ui/Button" -const ConnectorButton: FC<{ connector: Connector }> = ({ connector }) => { +const ConnectorButton: FC<{ connector: Connector; icon: ReactNode }> = ({ + connector, + icon, +}) => { const { connectAsync } = useConnect() if (!connector.available()) { return null @@ -10,13 +13,17 @@ const ConnectorButton: FC<{ connector: Connector }> = ({ connector }) => { return ( ) } diff --git a/src/components/icons/AvatarIcon.tsx b/src/components/icons/AvatarIcon.tsx new file mode 100644 index 0000000..781d8e1 --- /dev/null +++ b/src/components/icons/AvatarIcon.tsx @@ -0,0 +1,36 @@ +const AvatarIcon = () => ( + + + + + + + + + + + + + + + + +) + +export { AvatarIcon } diff --git a/src/components/icons/Chevron.tsx b/src/components/icons/Chevron.tsx new file mode 100644 index 0000000..0c50a0b --- /dev/null +++ b/src/components/icons/Chevron.tsx @@ -0,0 +1,65 @@ +const ChevronRight = () => ( + + + +) + +const ChevronLeft = () => ( + + + +) + +const ChevronUp = () => ( + + + +) + +const ChevronDown = () => ( + + + +) + +export { ChevronRight, ChevronLeft, ChevronUp, ChevronDown } diff --git a/src/components/icons/CopyIcon.tsx b/src/components/icons/CopyIcon.tsx new file mode 100644 index 0000000..b39e98f --- /dev/null +++ b/src/components/icons/CopyIcon.tsx @@ -0,0 +1,32 @@ +import { FC } from "react" + +const CopyIcon: FC<{ + copyValue?: string +}> = ({ copyValue }) => ( + navigator.clipboard.writeText(copyValue || "")} + > + + + +) + +export { CopyIcon } diff --git a/src/components/icons/DisconnectIcon.tsx b/src/components/icons/DisconnectIcon.tsx new file mode 100644 index 0000000..ad41cdf --- /dev/null +++ b/src/components/icons/DisconnectIcon.tsx @@ -0,0 +1,32 @@ +const DisconnectIcon = () => ( + + + + + +) + +export { DisconnectIcon } diff --git a/src/components/icons/IconStatusIcon.tsx b/src/components/icons/IconStatusIcon.tsx new file mode 100644 index 0000000..9a4997b --- /dev/null +++ b/src/components/icons/IconStatusIcon.tsx @@ -0,0 +1,38 @@ +const IconStatusIcon = () => { + return ( + + + + + + ) +} + +export { IconStatusIcon } diff --git a/src/components/icons/InfoIcon.tsx b/src/components/icons/InfoIcon.tsx new file mode 100644 index 0000000..12709f7 --- /dev/null +++ b/src/components/icons/InfoIcon.tsx @@ -0,0 +1,19 @@ +import { FC, SVGProps } from "react" + +const InfoIcon: FC> = ({ ...props }) => ( + + + +) + +export { InfoIcon } diff --git a/src/components/icons/LogoIcon.tsx b/src/components/icons/LogoIcon.tsx new file mode 100644 index 0000000..a6acf72 --- /dev/null +++ b/src/components/icons/LogoIcon.tsx @@ -0,0 +1,73 @@ +const LogoIcon = () => ( + + + + + + + + + + + + + + + + + +) + +export { LogoIcon } diff --git a/src/components/icons/WalletIcon.tsx b/src/components/icons/WalletIcon.tsx new file mode 100644 index 0000000..13d80bc --- /dev/null +++ b/src/components/icons/WalletIcon.tsx @@ -0,0 +1,33 @@ +const WalletIcon = () => ( + + + + + +) + +export { WalletIcon } diff --git a/src/components/sections/AccountStatus.tsx b/src/components/sections/AccountStatus.tsx index 8b726a5..8a6110c 100644 --- a/src/components/sections/AccountStatus.tsx +++ b/src/components/sections/AccountStatus.tsx @@ -1,3 +1,4 @@ +import { toHexChainid } from "@/helpers/chainId" import { useAccount, useBalance, @@ -6,19 +7,24 @@ import { useStarkProfile, } from "@starknet-react/core" import { FC } from "react" -import { constants, num } from "starknet" -import { Accordion } from "../ui/Accordion" -import { Flex } from "../ui/Flex" +import { constants } from "starknet" +import { CopyIcon } from "../icons/CopyIcon" -const Box: FC<{ +interface BoxProps { title: string value?: string -}> = ({ title, value }) => ( - - - {title}: {value || "-----"} + copy?: boolean + truncate?: boolean +} + +const Box: FC = ({ title, value, copy, truncate }) => ( +
+ {title} + + {value || "-"} + {value && copy && } - +
) const AccountStatus = () => { @@ -37,72 +43,43 @@ const AccountStatus = () => { address, }) - const hexChainId = - typeof chainId === "bigint" ? num.toHex(chainId ?? 0) : null + const hexChainId = toHexChainid(chainId) return ( - - - - - - - - - {balance ? ( - 7 - ? `${balance.formatted.slice(0, 5)} ETH` - : `${balance?.formatted} ETH` - } - /> - ) : ( - - )} - - - - - - ), - }, - ]} - /> - - ), - }, - ]} + <> + + + + 7 + ? `${balance.formatted.slice(0, 7)} ETH` + : `${balance?.formatted} ETH` + : "-" + } + /> + + - + ) } diff --git a/src/components/sections/ERC20/AddToken.tsx b/src/components/sections/ERC20/AddToken.tsx index d91a2fc..d21bfaa 100644 --- a/src/components/sections/ERC20/AddToken.tsx +++ b/src/components/sections/ERC20/AddToken.tsx @@ -1,7 +1,6 @@ -import { Accordion } from "@/components/ui/Accordion" import { Button } from "@/components/ui/Button" -import { Flex } from "@/components/ui/Flex" import { useAccount, useWalletRequest } from "@starknet-react/core" +import { SectionLayout } from "../SectionLayout" const AddToken = () => { const { account, address } = useAccount() @@ -25,31 +24,19 @@ const AddToken = () => { } return ( - - - - ), - }, - ]} - /> + +
+ +
+ ) } diff --git a/src/components/sections/Network/AddNetwork.tsx b/src/components/sections/Network/AddNetwork.tsx index 01f9769..cdfc62d 100644 --- a/src/components/sections/Network/AddNetwork.tsx +++ b/src/components/sections/Network/AddNetwork.tsx @@ -1,5 +1,4 @@ import { Button } from "@/components/ui/Button" -import { Flex } from "@/components/ui/Flex" import { ETHTokenAddress } from "@/constants" import { useWalletRequest } from "@starknet-react/core" import { shortString } from "starknet" @@ -25,22 +24,17 @@ const AddNetwork = () => { }) return ( - +
- +
) } diff --git a/src/components/sections/Network/ChangeNetwork.tsx b/src/components/sections/Network/ChangeNetwork.tsx index 421678f..a8fd087 100644 --- a/src/components/sections/Network/ChangeNetwork.tsx +++ b/src/components/sections/Network/ChangeNetwork.tsx @@ -1,33 +1,32 @@ import { Button } from "@/components/ui/Button" -import { Flex } from "@/components/ui/Flex" -import { useWalletRequest } from "@starknet-react/core" +import { isMainnet, toHexChainid } from "@/helpers/chainId" +import { useAccount, useWalletRequest } from "@starknet-react/core" import { constants } from "starknet" const ChangeNetwork = () => { + const { chainId } = useAccount() + const walletRequest = useWalletRequest({ type: "wallet_switchStarknetChain", params: { - chainId: constants.StarknetChainId.SN_MAIN, + chainId: isMainnet(toHexChainid(chainId)) + ? constants.StarknetChainId.SN_SEPOLIA + : constants.StarknetChainId.SN_MAIN, }, }) return ( - +
- +
) } diff --git a/src/components/sections/Network/Network.tsx b/src/components/sections/Network/Network.tsx index 9fa334c..b1cf06d 100644 --- a/src/components/sections/Network/Network.tsx +++ b/src/components/sections/Network/Network.tsx @@ -1,8 +1,7 @@ -import { Flex } from "@/components/ui/Flex" +import { useAccount } from "@starknet-react/core" +import { SectionLayout } from "../SectionLayout" import { AddNetwork } from "./AddNetwork" import { ChangeNetwork } from "./ChangeNetwork" -import { Accordion } from "@/components/ui/Accordion" -import { useAccount } from "@starknet-react/core" const Network = () => { const { account, address } = useAccount() @@ -12,19 +11,12 @@ const Network = () => { } return ( - - - - - ), - }, - ]} - /> + +
+ + +
+ ) } diff --git a/src/components/sections/SectionButton.tsx b/src/components/sections/SectionButton.tsx new file mode 100644 index 0000000..5bdb90c --- /dev/null +++ b/src/components/sections/SectionButton.tsx @@ -0,0 +1,34 @@ +import { FC } from "react" +import { Button } from "../ui/Button" +import { Section } from "./types" + +interface SectionButtonProps { + disabled?: boolean + section: Section + selected: boolean + setSection: ( + value?: ((prevState?: Section | undefined) => Section) | undefined, + ) => void +} + +const SectionButton: FC = ({ + disabled, + section, + selected, + setSection, +}) => { + return ( + + ) +} + +export { SectionButton } diff --git a/src/components/sections/SectionLayout.tsx b/src/components/sections/SectionLayout.tsx new file mode 100644 index 0000000..45f787a --- /dev/null +++ b/src/components/sections/SectionLayout.tsx @@ -0,0 +1,27 @@ +import { FC, PropsWithChildren } from "react" +import { IconStatusIcon } from "../icons/IconStatusIcon" +import { InfoIcon } from "../icons/InfoIcon" + +interface SectionLayoutProps extends PropsWithChildren { + sectionTitle: string +} + +const SectionLayout: FC = ({ children, sectionTitle }) => { + return ( +
+
+ +

{sectionTitle}

+ +
+
{children}
+
+ ) +} + +export { SectionLayout } diff --git a/src/components/sections/SignMessage.tsx b/src/components/sections/SignMessage.tsx index bad4e59..c3e3cf9 100644 --- a/src/components/sections/SignMessage.tsx +++ b/src/components/sections/SignMessage.tsx @@ -1,19 +1,16 @@ -import { Flex } from "@/components/ui/Flex" +import { toHexChainid } from "@/helpers/chainId" import { useAccount, useSignTypedData } from "@starknet-react/core" import { useState } from "react" -import { constants, num, stark } from "starknet" +import { constants, stark } from "starknet" import { Button } from "../ui/Button" -import { Accordion } from "../ui/Accordion" +import { SectionLayout } from "./SectionLayout" const SignMessage = () => { const { account, address, chainId } = useAccount() const [shortText, setShortText] = useState("") const [lastSig, setLastSig] = useState([]) - const hexChainId = - typeof chainId === "bigint" - ? (num.toHex(chainId ?? 0) as constants.StarknetChainId) - : null + const hexChainId = toHexChainid(chainId) const { signTypedDataAsync } = useSignTypedData({ params: { @@ -54,141 +51,131 @@ const SignMessage = () => { } return ( - <> - +
+
{ + e.preventDefault() + handleSignSubmit() + }} + > +