-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #60 from lidofinance/feature/walletconnect-is-bad-…
…notification feature: permanent "walletconnect has issues" notification for WCv2"
- Loading branch information
Showing
20 changed files
with
313 additions
and
38 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
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
86 changes: 86 additions & 0 deletions
86
packages/ui-react/src/components/WCWarnBanner/GradientBanner.styles.tsx
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,86 @@ | ||
| import styled from '../../utils/styledWrapper'; | ||
|
|
||
| const MEDIA = { | ||
| WIDTH: { | ||
| EXTRA_LARGE_MAX_WIDTH: 2559, | ||
| CONTENT_MAX_WIDTH: 1360, | ||
| TABLET_MAX_WIDTH: 1199, | ||
| TABLET_MIDDLE_WIDTH: 850, | ||
| MOBILE_MAX_WIDTH: 767, | ||
| MOBILE_MIDDLE_WIDTH: 420, | ||
| MOBILE_SMALL_MAX_WIDTH: 374, | ||
| CONTENT_MIN_WIDTH: 320, | ||
| }, | ||
| PADDING: { | ||
| CONTENT_MAX_PADDING: 32, | ||
| CONTENT_MIN_PADDING: 20, | ||
| }, | ||
| HEADER: { | ||
| HEADER_HEIGHT: 80, | ||
| }, | ||
| }; | ||
|
|
||
| export const Wrapper = styled.div` | ||
| display: flex; | ||
| width: 100%; | ||
| padding: 10px; | ||
| color: #ffffff !important; | ||
| overflow: hidden; | ||
| background: linear-gradient( | ||
| 89.98deg, | ||
| #1b4dcb -33.77%, | ||
| #530ec4 27.13%, | ||
| #41aefd 78.79% | ||
| ); | ||
| @media (max-width: ${MEDIA.WIDTH.TABLET_MAX_WIDTH}px) { | ||
| padding: 10px 10px 10px 20px; | ||
| } | ||
| @media (max-width: ${MEDIA.WIDTH.MOBILE_MAX_WIDTH}px) { | ||
| padding: 10px 10px 20px 20px; | ||
| } | ||
| `; | ||
|
|
||
| export const Container = styled.div` | ||
| display: flex; | ||
| align-items: baseline; | ||
| justify-content: center; | ||
| flex-grow: 1; | ||
| margin-left: 24px; | ||
| @media (max-width: ${MEDIA.WIDTH.TABLET_MAX_WIDTH}px) { | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| margin-left: 0; | ||
| } | ||
| `; | ||
|
|
||
| export const Title = styled.h2` | ||
| margin-right: 12px; | ||
| font-weight: 700; | ||
| font-size: 12px; | ||
| line-height: 20px; | ||
| @media (max-width: ${MEDIA.WIDTH.MOBILE_MAX_WIDTH}px) { | ||
| margin-right: 0; | ||
| } | ||
| `; | ||
|
|
||
| export const Description = styled.p` | ||
| text-align: center; | ||
| color: ${(p) => p.color}; | ||
| position: relative; | ||
| font-size: 12px; | ||
| line-height: 20px; | ||
| margin: 0; | ||
| padding: 0; | ||
| @media (max-width: ${MEDIA.WIDTH.TABLET_MAX_WIDTH}px) { | ||
| font-size: 14px; | ||
| line-height: 24px; | ||
| padding: 0; | ||
| text-align: left; | ||
| } | ||
| `; |
22 changes: 22 additions & 0 deletions
22
packages/ui-react/src/components/WCWarnBanner/GradientBanner.tsx
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,22 @@ | ||
| import React, { ReactNode } from 'react'; | ||
|
|
||
| import { | ||
| Wrapper, | ||
| Container, | ||
| Title, | ||
| Description, | ||
| } from './GradientBanner.styles'; | ||
|
|
||
| type Props = { | ||
| title: ReactNode; | ||
| description: ReactNode; | ||
| }; | ||
|
|
||
| export const GradientBanner = ({ title, description }: Props) => ( | ||
| <Wrapper> | ||
| <Container> | ||
| <Title>{title}</Title> | ||
| <Description>{description}</Description> | ||
| </Container> | ||
| </Wrapper> | ||
| ); |
22 changes: 22 additions & 0 deletions
22
packages/ui-react/src/components/WCWarnBanner/WCWarnBanner.tsx
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,22 @@ | ||
| import React from 'react'; | ||
| import { GradientBanner } from './GradientBanner'; | ||
|
|
||
| export const WCWarnBanner = () => ( | ||
| <GradientBanner | ||
| title="Notice on WalletConnect v2" | ||
| description={ | ||
| <> | ||
| <a | ||
| href="https://github.com/orgs/WalletConnect/discussions/categories/v1-v2-migration-support" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| style={{ color: 'currentcolor' }} | ||
| > | ||
| WalletConnect v2 | ||
| </a>{' '} | ||
| is still under development and might work unstable. In case of issues | ||
| with WalletConnect, please try to use another wallet connection option. | ||
| </> | ||
| } | ||
| /> | ||
| ); |
Oops, something went wrong.