feat: add SwapButton, small fixes

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -1,2 +1,2 @@
 build
-**/*.d.ts
+**/*.d.ts

.eslintrc

@@ -89,4 +89,4 @@
 		"@typescript-eslint/no-unused-vars": "warn",
 		"@typescript-eslint/explicit-module-boundary-types": "off"
 	}
-}
+}

public/index.html

@@ -8,6 +8,7 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -21,4 +22,4 @@
   <div id="root"></div>
 </body>
 
-</html>
+</html>

src/App.tsx

@@ -1,10 +1,16 @@
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import './App.css';
 import { SwapPage } from './pages/SwapPage';
 
 const theme = createTheme({
   palette: {
+    primary: {
+      main: '#3F49E1',
+      light: '#ACBEFF'
+    },
+    secondary: {
+      main: '#F5B5FF'
+    }
   },
 });
 

src/components/SwapButton.tsx

@@ -0,0 +1,8 @@
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+export const SwapButton = styled(Button)({
+  textTransform: 'none',
+  borderRadius: 0,
+  padding: '12px 16px'
+});

src/i18n/en/translation.json

@@ -1,5 +1,6 @@
 {
   "swap": {
-    "header": "Swap"
+    "header": "Swap",
+    "button": "Swap"
   }
-}
+}

src/i18n/react-i18next.d.ts

@@ -5,4 +5,4 @@ declare module 'react-i18next' {
   interface CustomTypeOptions {
     resources: typeof resources['en'];
   }
-}
+}

src/index.css

@@ -1,3 +1,9 @@
+html,
+body,
+#root {
+  height: 100%;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -6,8 +12,3 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.tsx

@@ -1,10 +1,13 @@
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/utils';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { App } from './App';
 import './i18n';
 import './index.css';
 import { reportWebVitals } from './reportWebVitals';
 
+ClassNameGenerator.configure((componentName) => componentName.replace('Mui', ''));
+
 const rootElement = document.getElementById('root');
 if (!rootElement) {
   throw new Error('Failed to find the root element.');
@@ -20,4 +23,6 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+if (process.env.NODE_ENV === 'development') {
+  reportWebVitals(console.log);
+}

src/pages/SwapPage.tsx

@@ -1,10 +1,17 @@
+import { Box, Container } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { SwapButton } from '../components/SwapButton';
 
 export function SwapPage() {
   const { t } = useTranslation();
   return (
-    <div>
-      {t(`swap.header`)}
-    </div>
+    <Container maxWidth="sm" sx={{ height: '100%' }}>
+      <Box>{t(`swap.header`)}</Box>
+      <Box>
+        <SwapButton variant="contained" disableElevation fullWidth>
+          {t(`swap.button`)}
+        </SwapButton>
+      </Box>
+    </Container>
   );
 }

tsconfig.json

@@ -27,4 +27,4 @@
   "include": [
     "src"
   ]
-}
+}