From d401bab2cf9b19f399db01f116758b9bda6f3dcc Mon Sep 17 00:00:00 2001 From: fritzschoff Date: Mon, 22 Aug 2022 14:49:26 +0200 Subject: [PATCH 1/4] feat(input-badge): added component --- components/InputBadge/index.tsx | 38 +++++++++++++++++++++++++++++++++ content/App.tsx | 1 - content/BurnPage.tsx | 15 +++++++++++++ package.json | 1 + pages/burn.tsx | 9 ++++++++ translations/en.json | 3 +++ yarn.lock | 13 +++++++++++ 7 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 components/InputBadge/index.tsx create mode 100644 content/BurnPage.tsx create mode 100644 pages/burn.tsx diff --git a/components/InputBadge/index.tsx b/components/InputBadge/index.tsx new file mode 100644 index 000000000..2058dd3c8 --- /dev/null +++ b/components/InputBadge/index.tsx @@ -0,0 +1,38 @@ +import { InfoIcon } from '@chakra-ui/icons'; +import { Badge, BadgeProps, Flex, Text } from '@chakra-ui/react'; +import { PropsWithChildren } from 'react'; +import styled from 'styled-components'; +import { motion } from 'framer-motion'; + +interface InputBadgeProps { + colorScheme?: BadgeProps['colorScheme']; + text: string; + onClickIcon?: () => void; + onClick?: () => void; +} + +export default function InputBadge({ + colorScheme, + text, + onClickIcon, + onClick, +}: PropsWithChildren) { + return ( + + + + + {text} + + {onClickIcon && } + + + + ); +} + +const StyledAnimatedWrapper = styled(motion.div)` + min-width: 170px; + border: 1px solid black; + cursor: pointer; +`; diff --git a/content/App.tsx b/content/App.tsx index 9ecb9d7d4..b50e22bee 100644 --- a/content/App.tsx +++ b/content/App.tsx @@ -77,7 +77,6 @@ const InnerApp: FC = ({ Component, pageProps }) => { const App: FC = (props) => { const { t } = useTranslation(); - return ( <> diff --git a/content/BurnPage.tsx b/content/BurnPage.tsx new file mode 100644 index 000000000..046f86ecb --- /dev/null +++ b/content/BurnPage.tsx @@ -0,0 +1,15 @@ +import InputBadge from 'components/InputBadge'; +import Head from 'next/head'; +import { useTranslation } from 'react-i18next'; + +export default function BurnDebt() { + const { t } = useTranslation(); + return ( + <> + + {t('burn.title')} + + {}} /> + + ); +} diff --git a/package.json b/package.json index cf41ed92d..a427d44fd 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ }, "dependencies": { "@artsy/fresnel": "^1.8.0", + "@chakra-ui/icons": "^2.0.8", "@chakra-ui/react": "^2.2.8", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", diff --git a/pages/burn.tsx b/pages/burn.tsx new file mode 100644 index 000000000..d88c74413 --- /dev/null +++ b/pages/burn.tsx @@ -0,0 +1,9 @@ +import dynamic from 'next/dynamic'; +import GlobalLoader from 'components/GlobalLoader'; + +const BurnPage = dynamic(() => import('content/BurnPage'), { + ssr: false, + loading: GlobalLoader, +}); + +export default BurnPage; diff --git a/translations/en.json b/translations/en.json index 32fe6b500..240f73a04 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1542,5 +1542,8 @@ "pools": "pools", "bridge": "bridge", "migrate-escrow": "migrate escrow" + }, + "burn": { + "title": "Burn Debt" } } diff --git a/yarn.lock b/yarn.lock index 011505b69..6d27bf2cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1701,6 +1701,18 @@ __metadata: languageName: node linkType: hard +"@chakra-ui/icons@npm:^2.0.8": + version: 2.0.8 + resolution: "@chakra-ui/icons@npm:2.0.8" + dependencies: + "@chakra-ui/icon": 3.0.8 + peerDependencies: + "@chakra-ui/system": ">=2.0.0" + react: ">=18" + checksum: b94a9a2db439d35566874d1c14cec79402b88edd83ce05d8bf962d99550315d87766ae8c277f5e1c4f20672c21d511a1b08f168535ced6e272d84823c84d241a + languageName: node + linkType: hard + "@chakra-ui/image@npm:2.0.9": version: 2.0.9 resolution: "@chakra-ui/image@npm:2.0.9" @@ -14678,6 +14690,7 @@ __metadata: resolution: "staking@workspace:." dependencies: "@artsy/fresnel": ^1.8.0 + "@chakra-ui/icons": ^2.0.8 "@chakra-ui/react": ^2.2.8 "@emotion/react": ^11.10.0 "@emotion/styled": ^11.10.0 From 75f87955703afc851ab066c0dfc35d2db27e2393 Mon Sep 17 00:00:00 2001 From: fritzschoff Date: Mon, 22 Aug 2022 16:31:48 +0200 Subject: [PATCH 2/4] feat(alert): added alert component --- components/Alert/index.tsx | 27 +++++++++++++++++++++++++++ components/InputBadge/index.tsx | 2 +- content/BurnPage.tsx | 2 -- 3 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 components/Alert/index.tsx diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx new file mode 100644 index 000000000..4f373f7c4 --- /dev/null +++ b/components/Alert/index.tsx @@ -0,0 +1,27 @@ +import { InfoIcon } from '@chakra-ui/icons'; +import { Container, Text } from '@chakra-ui/react'; + +interface AlterProps { + text: string; +} + +export default function Alert({ text }: AlterProps) { + return ( + + + + {text} + + + ); +} diff --git a/components/InputBadge/index.tsx b/components/InputBadge/index.tsx index 2058dd3c8..c2efabb24 100644 --- a/components/InputBadge/index.tsx +++ b/components/InputBadge/index.tsx @@ -19,7 +19,7 @@ export default function InputBadge({ }: PropsWithChildren) { return ( - + {text} diff --git a/content/BurnPage.tsx b/content/BurnPage.tsx index 046f86ecb..26e8f206b 100644 --- a/content/BurnPage.tsx +++ b/content/BurnPage.tsx @@ -1,4 +1,3 @@ -import InputBadge from 'components/InputBadge'; import Head from 'next/head'; import { useTranslation } from 'react-i18next'; @@ -9,7 +8,6 @@ export default function BurnDebt() { {t('burn.title')} - {}} /> ); } From 5134f97b265b3a29d35d96d5f395b5a3508f6e6c Mon Sep 17 00:00:00 2001 From: fritzschoff Date: Mon, 22 Aug 2022 16:37:09 +0200 Subject: [PATCH 3/4] feat(alert): added fade in animation --- components/Alert/index.tsx | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx index 4f373f7c4..fea0ad51f 100644 --- a/components/Alert/index.tsx +++ b/components/Alert/index.tsx @@ -1,5 +1,5 @@ import { InfoIcon } from '@chakra-ui/icons'; -import { Container, Text } from '@chakra-ui/react'; +import { Container, Fade, Text } from '@chakra-ui/react'; interface AlterProps { text: string; @@ -7,21 +7,23 @@ interface AlterProps { export default function Alert({ text }: AlterProps) { return ( - - - - {text} - - + + + + + {text} + + + ); } From 020a4db648cc2d2a446ed88a4f7f079db6a6e556 Mon Sep 17 00:00:00 2001 From: fritzschoff Date: Tue, 23 Aug 2022 08:43:03 +0200 Subject: [PATCH 4/4] feat(alert): fixed typo in interface --- components/Alert/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx index fea0ad51f..1a847a8fb 100644 --- a/components/Alert/index.tsx +++ b/components/Alert/index.tsx @@ -1,11 +1,11 @@ import { InfoIcon } from '@chakra-ui/icons'; import { Container, Fade, Text } from '@chakra-ui/react'; -interface AlterProps { +interface AlertProps { text: string; } -export default function Alert({ text }: AlterProps) { +export default function Alert({ text }: AlertProps) { return (