Synthetixio · fritzschoff · Aug 22, 2022 · Aug 23, 2022
diff --git a/components/InputBadge/index.tsx b/components/InputBadge/index.tsx
@@ -0,0 +1,47 @@
+import { InfoIcon } from '@chakra-ui/icons';
+import { Badge, BadgeProps, Fade, Flex, Text } from '@chakra-ui/react';
+import { PropsWithChildren } from 'react';
+
+interface InputBadgeProps {
+  colorScheme?: BadgeProps['colorScheme'];
+  text: string;
+  onClickIcon?: () => void;
+  onClick?: () => void;
+  active: boolean;
+}
+
+export default function InputBadge({
+  colorScheme,
+  text,
+  onClickIcon,
+  onClick,
+  active,
+}: PropsWithChildren<InputBadgeProps>) {
+  return (
+    <Fade in>
+      <Badge
+        colorScheme={active ? 'cyan' : colorScheme}
+        padding="1.5"
+        variant={active ? 'solid' : 'subtle'}
+        onClick={onClick}
+        w="100%"
+        minW={170}
+        cursor="pointer"
+      >
+        <Flex justify="space-between" align="center">
+          <Text
+            fontSize="xs"
+            color={active ? 'black' : 'cyan.500'}
+            fontFamily="body"
+            userSelect="none"
+          >
+            {text}
+          </Text>
+          {onClickIcon && (
+            <InfoIcon w={4} h={4} color={active ? 'black' : 'cyan.500'} onClick={onClickIcon} />
+          )}
+        </Flex>
+      </Badge>
+    </Fade>
+  );
+}
diff --git a/content/App.tsx b/content/App.tsx
@@ -77,7 +77,6 @@ const InnerApp: FC<AppProps> = ({ Component, pageProps }) => {
 
 const App: FC<AppProps> = (props) => {
   const { t } = useTranslation();
-
   return (
     <>
       <Head>

diff --git a/content/BurnPage.tsx b/content/BurnPage.tsx
@@ -0,0 +1,23 @@
+import InputBadge from 'components/InputBadge';
+import Head from 'next/head';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function BurnDebt() {
+  const { t } = useTranslation();
+  const [active, setActive] = useState(false);
+  return (
+    <>
+      <Head>
+        <title>{t('burn.title')}</title>
+      </Head>
+      <InputBadge
+        colorScheme="whiteAlpha"
+        text="test"
+        onClick={() => setActive(!active)}
+        onClickIcon={() => {}}
+        active={active}
+      />
+    </>
+  );
+}
diff --git 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
@@ -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
@@ -1542,5 +1542,8 @@
     "pools": "pools",
     "bridge": "bridge",
     "migrate-escrow": "migrate escrow"
+  },
+  "burn": {
+    "title": "Burn Debt"
   }
 }
diff --git 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
-Original file line number
+Diff line change
@@ Expand Up @@
     const App: FC<AppProps> = (props) => {
       const { t } = useTranslation();
       return (
         <>
           <Head>
@@ Expand Down @@