-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into ft_nullifier_registry_impl
- Loading branch information
Showing
31 changed files
with
1,285 additions
and
173 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { ThemedText } from 'src/theme/components' | ||
| import { Logo } from 'src/theme/components/icons' | ||
|
|
||
| import { Column } from '../Flex' | ||
| import Content from '../Modal/Content' | ||
| import Overlay from '../Modal/Overlay' | ||
| import Portal from '../Portal' | ||
|
|
||
| function GenerateProofModalContent() { | ||
| return ( | ||
| <Content title="Proof generation"> | ||
| <Column gap={42} alignItems="center"> | ||
| <Column gap={16}> | ||
| <Logo width={42} height={42} /> | ||
|
|
||
| <ThemedText.HeadlineSmall>Snarkification of the elliptic curve...</ThemedText.HeadlineSmall> | ||
| </Column> | ||
|
|
||
| <ThemedText.BodySecondary fontSize={16}>This might take a while</ThemedText.BodySecondary> | ||
| </Column> | ||
| </Content> | ||
| ) | ||
| } | ||
|
|
||
| export default function GenerateProofModal() { | ||
| return ( | ||
| <Portal> | ||
| <GenerateProofModalContent /> | ||
|
|
||
| <Overlay /> | ||
| </Portal> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
Oops, something went wrong.