Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Right-hand sidebar for staking flow #132

Merged
merged 20 commits into from
Jan 17, 2024
Merged

Right-hand sidebar for staking flow #132

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
c7dcd1f
Right-hand sidebar for staking flow
ioay Jan 3, 2024
f69a4a5
Removed list element from calculation card
ioay Jan 5, 2024
5155fc2
Chakra improvements, buttons as map
ioay Jan 7, 2024
e61b042
chakraUi: createIcon from svg, relative units
ioay Jan 8, 2024
540a59e
Added chakra card variant: sidebar
ioay Jan 8, 2024
ea9aaf6
Added card container for multipart component
ioay Jan 8, 2024
20edfd1
Button colorScheme added
ioay Jan 9, 2024
0ce1bd1
Added button sidebar variant
ioay Jan 9, 2024
1edeff9
Reverted fonts location
ioay Jan 9, 2024
8763e4a
Update sidebarContainer style with fixed width
ioay Jan 10, 2024
9ca695f
Removed sidebar colorScheme for card button
ioay Jan 11, 2024
067b12a
Merge branch 'main' into right-hand-sidebar-staking-flow
ioay Jan 15, 2024
bd81f8a
Created ButtonLink as shared component, added semanticToken to handle…
ioay Jan 15, 2024
4a719ab
Updated borderRadius for card variant
ioay Jan 15, 2024
d4abdf1
Update styles, link prop removed
ioay Jan 16, 2024
8481695
Added elevated variant to card, button styles update
ioay Jan 16, 2024
6030fe2
Added borderWidth to card
ioay Jan 16, 2024
dc581d4
Button: removed borderWidth, add sizes to Card theme
ioay Jan 16, 2024
6eb2029
ButtonLink: added children prop, removed label & isFullWidth prop
ioay Jan 16, 2024
86531de
ButtonLink: adjusting props, set default variant to outline
ioay Jan 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added dapp/src/assets/images/right-sidebar-bg.png
View file
Open in desktop
kkosiorowska marked this conversation as resolved.
Show resolved Hide resolved
nkuba marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 76 additions & 3 deletions dapp/src/components/Sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,29 @@
import React from "react"
import { Box, Button, useMultiStyleConfig } from "@chakra-ui/react"
import {
Box,
Button,
Icon,
useMultiStyleConfig,
Image,
Card,
CardBody,
CardHeader,
CardFooter,
HStack,
Link,
} from "@chakra-ui/react"
import RightSidebar from "../../assets/images/right-sidebar-bg.png"
import { useDocsDrawer, useSidebar } from "../../hooks"
import { ArrowUpRight, ShieldPlusIcon } from "../../static/icons"
import { TextMd, TextSm } from "../shared/Typography"

const readMoreEarnings = "https://#"

const BUTTONS = [
{ label: "FAQ" },
{ label: "Token Contract" },
{ label: "Bridge Contract" },
]

export default function Sidebar() {
const { isOpen } = useSidebar()
Expand All @@ -15,8 +38,58 @@ export default function Sidebar() {
__css={styles.sidebarContainer}
>
<Box __css={styles.sidebar}>
{/* TODO: Add a correct content for the sidebar */}
<Button onClick={openDocsDrawer}>Open a documentation</Button>
<Button
leftIcon={<Icon as={ArrowUpRight} boxSize={4} />}
onClick={openDocsDrawer}
variant="sidebar"
colorScheme="solid"
>
Docs
</Button>
kkosiorowska marked this conversation as resolved.
Show resolved Hide resolved
<Card variant="sidebar">
<CardHeader padding="0">
<Image src={RightSidebar} alt="" width="70.5" height="40" />
</CardHeader>

<CardBody>
<TextMd alignSelf="stretch" fontWeight="bold">
Maximize your earnings by using tBTC to deposit and redeem BTC in
DeFi!
</TextMd>
</CardBody>

<CardFooter paddingTop="0">
<Link href={readMoreEarnings} isExternal>
<TextSm>Read more</TextSm>
</Link>
</CardFooter>
</Card>

<Card variant="sidebar">
<CardHeader>
<TextMd fontWeight="bold">How we calculate fees</TextMd>
</CardHeader>

<CardBody paddingTop="0">
<HStack gap="1">
<Icon as={ShieldPlusIcon} w={5} h={5} alignSelf="baseline" />
<TextSm>Fees is software empowered by the Threshold DAO.</TextSm>
</HStack>
</CardBody>
</Card>

{BUTTONS.map(({ label }) => (
<Button
key={label}
marginTop="3"
variant="sidebar"
colorScheme="outline"
leftIcon={<Icon as={ArrowUpRight} boxSize={4} color="brand.400" />}
onClick={openDocsDrawer}
>
{label}
</Button>
))}
</Box>
</Box>
)
Expand Down
17 changes: 17 additions & 0 deletions dapp/src/static/icons/ShieldPlus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react"
import { createIcon } from "@chakra-ui/react"

export const ShieldPlusIcon = createIcon({
displayName: "ShieldPlusIcon",
viewBox: "0 0 20 20",
path: (
<path
d="M8.0013 10.1669V6.16691M6.0013 8.16691H10.0013M13.3346 8.50024C13.3346 11.7725 9.76533 14.1525 8.46663 14.9102C8.31903 14.9963 8.24524 15.0393 8.14109 15.0617C8.06026 15.079 7.94234 15.079 7.86152 15.0617C7.75737 15.0393 7.68357 14.9963 7.53598 14.9102C6.23728 14.1525 2.66797 11.7725 2.66797 8.50024V5.31197C2.66797 4.77897 2.66797 4.51246 2.75514 4.28338C2.83215 4.081 2.95729 3.90042 3.11974 3.75726C3.30363 3.5952 3.55317 3.50162 4.05224 3.31447L7.62677 1.97402C7.76537 1.92205 7.83467 1.89606 7.90596 1.88576C7.96919 1.87662 8.03341 1.87662 8.09665 1.88576C8.16794 1.89606 8.23724 1.92205 8.37583 1.97402L11.9504 3.31447C12.4494 3.50162 12.699 3.5952 12.8829 3.75726C13.0453 3.90042 13.1705 4.081 13.2475 4.28338C13.3346 4.51246 13.3346 4.77897 13.3346 5.31197V8.50024Z"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
),
})
1 change: 1 addition & 0 deletions dapp/src/static/icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ export * from "./AcreLogo"
export * from "./ConnectBTCAccount"
export * from "./ConnectETHAccount"
export * from "./AlertInfo"
export * from "./ShieldPlus"
51 changes: 51 additions & 0 deletions dapp/src/theme/Button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,45 @@ const Button: ComponentSingleStyleConfig = {
bg: "transparent",
},
},
sidebar: (props: StyleFunctionProps) => {
const defaultStyles = {
justifyContent: "flex-start",
width: "100%",
}

if (props.colorScheme === "solid") {
r-czajkowski marked this conversation as resolved.
Show resolved Hide resolved
return {
...defaultStyles,
bg: "brand.400",
color: "white",
_hover: {
bg: "brand.500",
},
_active: {
bg: "brand.400",
},
}
}

if (props.colorScheme === "outline") {
kkosiorowska marked this conversation as resolved.
Show resolved Hide resolved
return {
...defaultStyles,
borderWidth: "2px",
r-czajkowski marked this conversation as resolved.
Show resolved Hide resolved
bg: "gold.100",
borderRadius: "6px",
r-czajkowski marked this conversation as resolved.
Show resolved Hide resolved
borderColor: "white",
borderStyle: "solid",
_hover: {
bg: "opacity.grey.700.05",
},
_active: {
bg: "transparent",
},
}
}

return defaultStyles
},
card: (props: StyleFunctionProps) => {
const defaultStyles = {
borderWidth: "2px",
Expand All @@ -63,6 +102,18 @@ const Button: ComponentSingleStyleConfig = {
}
}

if (props.colorScheme === "sidebar") {
return {
...defaultStyles,
borderRadius: "6px",
marginTop: "3",
justifyContent: "flex-start",
width: "100%",
borderColor: "white",
borderStyle: "solid",
}
}

kkosiorowska marked this conversation as resolved.
Show resolved Hide resolved
return defaultStyles
},
},
Expand Down
11 changes: 11 additions & 0 deletions dapp/src/theme/Card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@ const Card: ComponentSingleStyleConfig = {
bg: "gold.200",
},
},
variants: {
sidebar: {
container: {
marginTop: "3",
bg: "gold.100",
borderColor: "white",
borderStyle: "solid",
r-czajkowski marked this conversation as resolved.
Show resolved Hide resolved
borderRadius: "6px",
},
},
},
}

export default Card
1 change: 1 addition & 0 deletions dapp/src/theme/Sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const baseStyleSidebarContainer = defineStyle({
const baseStyleSidebar = defineStyle({
p: 4,
height: "100%",
w: "80",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems to me that we shouldn't declare widths here. In the Sidebar component, we set it again. I would suggest moving it to the component and setting it for the sidebar element. Something like this:

<Box __css={styles.sidebar} w={80}>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems to me that we shouldn't declare widths here. In the Sidebar component, we set it again. I would suggest moving it to the component and setting it for the sidebar element. Something like this:

<Box __css={styles.sidebar} w={80}>

It has to be here for 3 reasons:

  • it is not setting again, because you point Box with sidebarContainer class, this style is related to another Box with sidebar class.
  • I don't see the reason to keep an additional style prop if we have already defined custom sidebar.
  • we have to have defined fixed width, beacse in other case content inside this container while extending/collapsing sidebar content becomes floating too much, which looks very bad and we don't want this behavior.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we define the width to fixed 80 value here and in the mentioned Sidebar component

acre/dapp/src/components/Sidebar/index.tsx

Line 14 in 3324435

w={isOpen ? 80 : 0}

We need to maintain the value in two places. Can we find a way to improve it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we define the width to fixed 80 value here and in the mentioned Sidebar component

acre/dapp/src/components/Sidebar/index.tsx

Line 14 in 3324435

w={isOpen ? 80 : 0}

We need to maintain the value in two places. Can we find a way to improve it?

Sure, I'll do that.

Copy link
Contributor

@kkosiorowska kkosiorowska Jan 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand why we want to set this value. However, I still have doubts that it should be set in a component theme. I have doubts because what if we want to use this theme once again with a different width? This isn't likely to happen. But it makes me wonder.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the moment, looking at the design, there are no such requirements - If there is such a need, we will change it.

bg: "gold.200",
borderTop: "2px",
borderLeft: "2px",
Expand Down