feat: header & wallet (#24)

* feat: Header * feat: header wallet connection * feat: wallet sidebar * feat: Wallet Sidebar actions --------- Co-authored-by: lanaivina <[email protected]>
keep-starknet-strange · Aug 26, 2024 · acc9ac0 · acc9ac0
1 parent 9d2a470
commit acc9ac0
Show file tree

Hide file tree

Showing 8 changed files with 370 additions and 3 deletions.
diff --git a/client/src/components/Button/index.tsx b/client/src/components/Button/index.tsx
@@ -28,3 +28,11 @@ export const OutlineButton = styled.button`
   border: 1px solid ${({ theme }) => theme.white};
   color: ${({ theme }) => theme.white};
 `
+
+export const ConnectButton = styled(PrimaryButton)`
+  width: auto;
+  padding: 14px 32px;
+  background: linear-gradient(360deg, #202a31 0%, #28353e 100%);
+  color: ${({ theme }) => theme.neutral1};
+  font-size: 16px;
+`
diff --git a/client/src/components/ConnectWalletModal/index.tsx b/client/src/components/ConnectWalletModal/index.tsx
@@ -0,0 +1,65 @@
+import { useConnect } from '@starknet-react/core'
+import { ThemedText } from 'src/theme/components'
+import styled from 'styled-components'
+
+import { Column, Row } from '../Flex'
+
+const Container = styled(Column)`
+  width: 300px;
+  align-items: flex-start;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.border};
+  border-radius: 20px;
+  box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 10px rgba(0, 0, 0, 0.15);
+`
+
+const ConnectorsList = styled(Column)`
+  width: 100%;
+
+  :first-child {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+  }
+
+  :last-child {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+  }
+`
+
+const ConnectorCard = styled(Row)`
+  width: 100%;
+  padding: 12px;
+  background-color: ${({ theme }) => theme.bg3};
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+`
+
+export const ConnectWalletModal = (props: React.ComponentPropsWithoutRef<typeof Container>) => {
+  const { connect, connectors } = useConnect()
+
+  return (
+    <Container gap={16} {...props}>
+      <ThemedText.Title fontWeight={400}>Connect wallet</ThemedText.Title>
+
+      <ConnectorsList gap={4}>
+        {connectors
+          .filter((connector) => connector.available())
+          .map((connector) => (
+            <ConnectorCard as="button" key={connector.id} gap={16} onClick={() => connect({ connector })}>
+              <img src={connector.icon.dark} alt={connector.name} width={32} height={32} />
+
+              <ThemedText.Title fontWeight={400}>{connector.name}</ThemedText.Title>
+            </ConnectorCard>
+          ))}
+      </ConnectorsList>
+    </Container>
+  )
+}
diff --git a/client/src/components/Header/index.tsx b/client/src/components/Header/index.tsx
@@ -1,3 +1,106 @@
+import { useAccount } from '@starknet-react/core'
+import { useState } from 'react'
+import { NavLink } from 'react-router-dom'
+import { ThemedText } from 'src/theme/components'
+import { Logo } from 'src/theme/components/icons'
+import styled from 'styled-components'
+
+import { ConnectButton } from '../Button'
+import { ConnectWalletModal } from '../ConnectWalletModal'
+import { Row } from '../Flex'
+import WalletSidebar from '../WalletSidebar'
+
+const Container = styled(Row)`
+  justify-content: space-between;
+  padding: 24px 32px;
+`
+
+const Link = styled(ThemedText.BodyPrimary)`
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 500;
+  font-size: 18px;
+  text-decoration: none;
+
+  &.active {
+    color: ${({ theme }) => theme.neutral1};
+  }
+`
+
+const ConnectContainer = styled(Row)`
+  position: relative;
+`
+
+const ConnectWalletDropdown = styled(ConnectWalletModal)`
+  position: absolute;
+  top: calc(100% + 16px);
+  right: 0;
+`
+
+const AccountChip = styled(Row)`
+  padding: 6px 8px;
+  background-color: ${({ theme }) => theme.bg3};
+  border: none;
+  border-radius: 99px;
+  cursor: pointer;
+`
+
+const AccountStatusIcon = styled.div`
+  width: 12px;
+  height: 12px;
+  background-color: ${({ theme }) => theme.green};
+  border-radius: 12px;
+`
+
 export default function Header() {
-  return null
+  const [connectDropdownShown, setConnectDropdownShown] = useState(false)
+  const [walletSidebarShown, setWalletSidebarShown] = useState(false)
+
+  const { address } = useAccount()
+
+  const toggleConnectDropdown = () => {
+    setConnectDropdownShown((prev) => !prev)
+  }
+
+  const showWalletSidebar = () => {
+    setWalletSidebarShown(true)
+  }
+  const hideWalletSidebar = () => {
+    setWalletSidebarShown(false)
+  }
+
+  return (
+    <Container as="header">
+      <Row gap={32}>
+        <Logo width={42} height={42} />
+
+        <Row gap={28}>
+          <Link as={NavLink} to="/">
+            Swap
+          </Link>
+
+          <Link as={NavLink} to="/liquidity">
+            Liquidity
+          </Link>
+        </Row>
+      </Row>
+
+      {address ? (
+        <AccountChip as="button" gap={4} onClick={showWalletSidebar}>
+          <AccountStatusIcon />
+
+          <ThemedText.Title fontWeight={400}>
+            {address.slice(0, 6)}...{address.slice(-4)}
+          </ThemedText.Title>
+        </AccountChip>
+      ) : (
+        <ConnectContainer>
+          <ConnectButton onClick={toggleConnectDropdown}>Connect</ConnectButton>
+
+          {connectDropdownShown && <ConnectWalletDropdown />}
+        </ConnectContainer>
+      )}
+
+      {walletSidebarShown && <WalletSidebar onClose={hideWalletSidebar} />}
+    </Container>
+  )
 }
diff --git a/client/src/components/WalletSidebar/index.tsx b/client/src/components/WalletSidebar/index.tsx
@@ -0,0 +1,104 @@
+import { useAccount, useDisconnect } from '@starknet-react/core'
+import { Link } from 'react-router-dom'
+import { ThemedText } from 'src/theme/components'
+import { DoubleChevronRight, Logout, StarknetLogo, UserCheck } from 'src/theme/components/icons'
+import styled from 'styled-components'
+
+import { Column, Row } from '../Flex'
+
+const Container = styled(Column)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 372px;
+  height: 100%;
+  padding: 8px;
+`
+
+const Content = styled(Column)`
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.border};
+  border-radius: 20px;
+`
+
+const WalletInfo = styled(Row)`
+  width: 100%;
+  justify-content: space-between;
+`
+
+const CloseButton = styled.button`
+  color: rgba(240, 247, 244, 0.5);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+`
+
+const Links = styled(Column)`
+  width: 100%;
+`
+
+const LinkItem = styled(Row)`
+  width: 100%;
+  gap: 10px;
+  padding: 12px 6px;
+  background-color: transparent;
+  border: none;
+  border-radius: 8px;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.bg3};
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15),
+      0px 0.5px 0px 0px rgba(240, 247, 244, 0.1) inset;
+  }
+
+  div {
+    color: ${({ theme }) => theme.neutral1};
+  }
+`
+
+type WalletSidebarProps = {
+  onClose?: () => void
+}
+
+export default function WalletSidebar({ onClose }: WalletSidebarProps) {
+  const { address } = useAccount()
+  const { disconnect } = useDisconnect()
+
+  if (!address) return
+
+  return (
+    <Container>
+      <Content gap={32}>
+        <WalletInfo>
+          <Row gap={12}>
+            <StarknetLogo width={40} height={40} />
+            <ThemedText.Title fontWeight={500}>
+              {address.slice(0, 6)}...{address.slice(-4)}
+            </ThemedText.Title>
+          </Row>
+
+          <CloseButton onClick={onClose}>
+            <DoubleChevronRight width={24} height={24} />
+          </CloseButton>
+        </WalletInfo>
+
+        <Links gap={16}>
+          <LinkItem as={Link} to="/">
+            <UserCheck width={28} height={28} color="#0047FF" />
+            <ThemedText.BodyPrimary>Registration</ThemedText.BodyPrimary>
+          </LinkItem>
+
+          <LinkItem as="button" onClick={() => disconnect()}>
+            <Logout width={28} height={28} color="#FF3442" />
+            <ThemedText.BodyPrimary>Disconnect</ThemedText.BodyPrimary>
+          </LinkItem>
+        </Links>
+      </Content>
+    </Container>
+  )
+}
diff --git a/client/src/pages/Swap.tsx b/client/src/pages/Swap.tsx
@@ -12,7 +12,7 @@ import { styled } from 'styled-components'
 const Layout = styled(Column)`
   margin: 0 auto;
   justify-content: center;
-  height: 100vh;
+  flex: 1;
 `
 
 const Content = styled(Column)`

diff --git a/client/src/theme/colors.ts b/client/src/theme/colors.ts
@@ -3,6 +3,7 @@
 const colors = {
   white: '#FFFFFF',
   black: '#000000',
+  green: '#21C95E',
 
   neutral1_dark: '#ffffff',
   neutral2_dark: 'rgba(240, 247, 244, 0.5)',
@@ -11,6 +12,7 @@ const colors = {
 const commonTheme = {
   white: colors.white,
   black: colors.black,
+  green: colors.green,
 
   accent1: '#FF3864',
 }
@@ -19,7 +21,7 @@ export const darkTheme = {
   ...commonTheme,
 
   bg1: '#000000',
-  bg2: '#121216',
+  bg2: '#101519',
   bg3: '#181F25',
 
   surface: '#0D0D12',