diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx
new file mode 100644
index 000000000..1a847a8fb
--- /dev/null
+++ b/components/Alert/index.tsx
@@ -0,0 +1,29 @@
+import { InfoIcon } from '@chakra-ui/icons';
+import { Container, Fade, Text } from '@chakra-ui/react';
+
+interface AlertProps {
+ text: string;
+}
+
+export default function Alert({ text }: AlertProps) {
+ return (
+
+
+
+
+ {text}
+
+
+
+ );
+}
diff --git a/components/InputBadge/index.tsx b/components/InputBadge/index.tsx
new file mode 100644
index 000000000..c2efabb24
--- /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..26e8f206b
--- /dev/null
+++ b/content/BurnPage.tsx
@@ -0,0 +1,13 @@
+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