From f900fb5795fef7ce96acae99c95dedba0c4f2e5a Mon Sep 17 00:00:00 2001 From: bluecco Date: Fri, 15 Nov 2024 16:38:42 +0100 Subject: [PATCH] chore: update ui --- src/app/globals.css | 69 ++----------------- src/app/page.tsx | 2 +- src/components/Header.tsx | 12 ++-- src/components/connect/Connect.tsx | 2 +- src/components/connect/ConnectorButton.tsx | 2 +- src/components/icons/AddTokenIcon.tsx | 33 +++++++++ src/components/icons/Chevron.tsx | 8 +-- src/components/icons/ExternalIcon.tsx | 24 +++++++ src/components/icons/NetworkIcon.tsx | 40 +++++++++++ src/components/icons/SigningIcon.tsx | 23 +++++++ src/components/icons/TransactionsIcon.tsx | 44 ++++++++++++ src/components/sections/AccountStatus.tsx | 8 ++- src/components/sections/ERC20/AddToken.tsx | 3 +- src/components/sections/Network/Network.tsx | 3 +- src/components/sections/SectionButton.tsx | 2 +- src/components/sections/SectionLayout.tsx | 11 ++- src/components/sections/SignMessage.tsx | 44 +++++++----- .../sections/Transactions/Transactions.tsx | 3 +- tailwind.config.ts | 6 ++ 19 files changed, 238 insertions(+), 101 deletions(-) create mode 100644 src/components/icons/AddTokenIcon.tsx create mode 100644 src/components/icons/ExternalIcon.tsx create mode 100644 src/components/icons/NetworkIcon.tsx create mode 100644 src/components/icons/SigningIcon.tsx create mode 100644 src/components/icons/TransactionsIcon.tsx diff --git a/src/app/globals.css b/src/app/globals.css index d3e793f..0c71ce7 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -9,7 +9,7 @@ html, body { max-width: 100vw; overflow-x: hidden; - background-color: #000; + background-color: #14161c; color: #fff; } @@ -49,19 +49,14 @@ 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; + background-color: #262933; } button.disabled { @@ -70,23 +65,9 @@ button.disabled { } 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; + border: solid 1px #aecbfc; + color: #aecbfc; + background-color: #262933; } .connectors-grid { @@ -97,37 +78,6 @@ button.connector > div { /* 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; @@ -149,13 +99,6 @@ button[type="submit"] { 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; diff --git a/src/app/page.tsx b/src/app/page.tsx index 9bc0f3b..f7bcf9f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,7 +10,7 @@ export default function Home() { const providers = publicProvider() return ( -
+
{/* eslint-disable @typescript-eslint/no-explicit-any */} { const { address, isConnected, chainId } = useAccount() @@ -22,12 +23,14 @@ const Header = () => {
{isConnected && ( -
+
- {balance && balance?.formatted.length > 7 - ? `${balance.formatted.slice(0, 7)} ETH` - : `${balance?.formatted} ETH`} + {balance + ? balance?.formatted.length > 7 + ? `${balance.formatted.slice(0, 7)} ETH` + : `${balance?.formatted} ETH` + : "0 ETH"}
{ > {formatTruncatedAddress(address || "")} +
)} diff --git a/src/components/connect/Connect.tsx b/src/components/connect/Connect.tsx index 610f295..a8c8a00 100644 --- a/src/components/connect/Connect.tsx +++ b/src/components/connect/Connect.tsx @@ -36,7 +36,7 @@ const Connect = () => { Disconnect
-
+
Starknet-react connectors diff --git a/src/components/connect/ConnectorButton.tsx b/src/components/connect/ConnectorButton.tsx index b2434f6..1daff5c 100644 --- a/src/components/connect/ConnectorButton.tsx +++ b/src/components/connect/ConnectorButton.tsx @@ -17,7 +17,7 @@ const ConnectorButton: FC<{ connector: Connector; icon: ReactNode }> = ({ onClick={async () => { await connectAsync({ connector }) }} - className="connector" + className="bg-default-color h-10 text-sm leading-4 font-medium gap-2 justify-center" hideChevron >
diff --git a/src/components/icons/AddTokenIcon.tsx b/src/components/icons/AddTokenIcon.tsx new file mode 100644 index 0000000..83c5091 --- /dev/null +++ b/src/components/icons/AddTokenIcon.tsx @@ -0,0 +1,33 @@ +const AddTokenIcon = () => ( + + + + + +) + +export { AddTokenIcon } diff --git a/src/components/icons/Chevron.tsx b/src/components/icons/Chevron.tsx index 0c50a0b..e2b05ed 100644 --- a/src/components/icons/Chevron.tsx +++ b/src/components/icons/Chevron.tsx @@ -1,6 +1,6 @@ const ChevronRight = () => ( ( const ChevronLeft = () => ( ( const ChevronUp = () => ( ( const ChevronDown = () => ( ( + + + + +) + +export { ExternalIcon } diff --git a/src/components/icons/NetworkIcon.tsx b/src/components/icons/NetworkIcon.tsx new file mode 100644 index 0000000..36aa57d --- /dev/null +++ b/src/components/icons/NetworkIcon.tsx @@ -0,0 +1,40 @@ +const NetworkIcon = () => ( + + + + + + +) + +export { NetworkIcon } diff --git a/src/components/icons/SigningIcon.tsx b/src/components/icons/SigningIcon.tsx new file mode 100644 index 0000000..7cb61e9 --- /dev/null +++ b/src/components/icons/SigningIcon.tsx @@ -0,0 +1,23 @@ +const SigningIcon = () => ( + + + + + + + + + + +) + +export { SigningIcon } diff --git a/src/components/icons/TransactionsIcon.tsx b/src/components/icons/TransactionsIcon.tsx new file mode 100644 index 0000000..77ac6f3 --- /dev/null +++ b/src/components/icons/TransactionsIcon.tsx @@ -0,0 +1,44 @@ +const TransactionsIcon = () => ( + + + + + + +) + +export { TransactionsIcon } diff --git a/src/components/sections/AccountStatus.tsx b/src/components/sections/AccountStatus.tsx index 9f547b2..576e8ab 100644 --- a/src/components/sections/AccountStatus.tsx +++ b/src/components/sections/AccountStatus.tsx @@ -19,8 +19,10 @@ interface BoxProps { const Box: FC = ({ title, value, copy, truncate }) => (
- {title} - + {title} + {value || "-"} {value && copy && } @@ -69,7 +71,7 @@ const AccountStatus = () => { ? balance?.formatted.length > 7 ? `${balance.formatted.slice(0, 7)} ETH` : `${balance?.formatted} ETH` - : "-" + : undefined } /> diff --git a/src/components/sections/ERC20/AddToken.tsx b/src/components/sections/ERC20/AddToken.tsx index 07c2e17..1fbdb1e 100644 --- a/src/components/sections/ERC20/AddToken.tsx +++ b/src/components/sections/ERC20/AddToken.tsx @@ -1,6 +1,7 @@ import { Button } from "@/components/ui/Button" import { useAccount, useWalletRequest } from "@starknet-react/core" import { SectionLayout } from "../SectionLayout" +import { AddTokenIcon } from "@/components/icons/AddTokenIcon" const AddToken = () => { const { account, address } = useAccount() @@ -24,7 +25,7 @@ const AddToken = () => { } return ( - + }>