OriginProtocol · dcodes05 · Aug 23, 2023 · Aug 23, 2023 · Aug 23, 2023 · Aug 23, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,10 +1,17 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nx"],
+  "plugins": [
+    "@nx",
+    "formatjs",
+    "unused-imports",
+    "simple-import-sort",
+    "prettier"
+  ],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "extends": ["plugin:react/recommended", "plugin:prettier/recommended"],
       "rules": {
         "@nx/enforce-module-boundaries": [
           "error",
@@ -18,7 +25,41 @@
               }
             ]
           }
-        ]
+        ],
+        "react/react-in-jsx-scope": "off",
+        // Unused imports rules
+        "unused-imports/no-unused-imports": "error",
+        "unused-imports/no-unused-vars": "warn",
+
+        // Import ordering rules
+        "simple-import-sort/imports": [
+          "warn",
+          {
+            "groups": [
+              // Side effect imports
+              ["^\\u0000"],
+              // React Package(s) comes first as seperate group
+              ["^react(-dom(/client)?)?$"],
+              // All other imports
+              ["^@?\\w"],
+              ["^((?!\\u0000$)|/.*|$)"],
+              ["^\\."],
+              // Type imports: keep these last!
+              ["^@?\\w.*\\u0000$"],
+              ["^.*\\u0000$"],
+              ["^\\..*\\u0000$"]
+            ]
+          }
+        ],
+
+        // import types rules
+        "@typescript-eslint/consistent-type-imports": "error",
+
+        // FormatJS rules
+        "formatjs/enforce-default-message": ["error", "literal"],
+        "formatjs/no-id": "error",
+        "formatjs/no-multiple-whitespaces": "error",
+        "formatjs/no-offset": "error"
       }
     },
     {

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -0,0 +1,25 @@
+name: ⚡ Chromatic Check
+
+on: push
+
+jobs:
+  publish-chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
+
+      - name: Build storybook
+        run: pnpm build-storybook
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          storybookBuildDir: 'dist/storybook/shared-storybook'
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,5 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2
 }
diff --git a/apps/oeth/index.html b/apps/oeth/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -7,7 +7,14 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/src/styles.css" />
+    <!-- Inter font -->
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <!--  -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/typeface-sailec@1.0.0/index.min.css"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/oeth/src/components/App.tsx b/apps/oeth/src/components/App.tsx
@@ -0,0 +1,17 @@
+import { HistoryView, SwapView, WrapView } from '@origin/defi/oeth';
+import { Route, Routes } from 'react-router-dom';
+
+import { Layout } from './Layout';
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route index element={<SwapView />} />
+        <Route path="wrap" element={<WrapView />} />
+        <Route path="history" element={<HistoryView />} />
+        <Route path="swap" element={<SwapView />} />
+      </Route>
+    </Routes>
+  );
+}
diff --git a/apps/oeth/src/components/Layout.tsx b/apps/oeth/src/components/Layout.tsx
@@ -0,0 +1,39 @@
+import { Container } from '@mui/material';
+import { TopNav } from '@origin/shared/components';
+import { useIntl } from 'react-intl';
+import { Outlet } from 'react-router-dom';
+
+export function Layout() {
+  const intl = useIntl();
+
+  return (
+    <>
+      <TopNav
+        logo="https://app.oeth.com/images/origin-ether-logo.svg"
+        tabs={[
+          intl.formatMessage({ defaultMessage: 'Swap' }),
+          intl.formatMessage({ defaultMessage: 'Wrap' }),
+          intl.formatMessage({ defaultMessage: 'History' }),
+        ]}
+        selected={0}
+        connected={false}
+        ipfsLink={'https://oeth.on.fleek.co/'}
+      />
+      <Container
+        sx={{
+          mt: {
+            xs: 3,
+            md: 5,
+            paddingInline: {
+              xs: 2,
+              md: 0,
+            },
+          },
+        }}
+        maxWidth="sm"
+      >
+        <Outlet />
+      </Container>
+    </>
+  );
+}
diff --git a/apps/oeth/src/components/index.tsx b/apps/oeth/src/components/index.tsx
@@ -0,0 +1 @@
+export * from './App';
diff --git a/apps/oeth/src/index.tsx b/apps/oeth/src/index.tsx
diff --git a/apps/oeth/src/main.tsx b/apps/oeth/src/main.tsx
@@ -1,7 +1,6 @@
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { OethRoot } from './views/root';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '@origin/shared/data-access';
 import { theme } from '@origin/shared/theme';
@@ -11,6 +10,7 @@ import {
 } from '@mui/material';
 import { IntlProvider } from 'react-intl';
 import { en } from './lang';
+import { App } from './components';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -22,7 +22,7 @@ root.render(
         <QueryClientProvider client={queryClient}>
           <CssVarsProvider theme={theme} defaultMode="dark">
             <CssBaseline />
-            <OethRoot />
+            <App />
           </CssVarsProvider>
         </QueryClientProvider>
       </BrowserRouter>

diff --git a/apps/oeth/src/views/root/index.tsx b/apps/oeth/src/views/root/index.tsx
diff --git a/apps/oeth/tsconfig.app.json b/apps/oeth/tsconfig.app.json
@@ -18,5 +18,5 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "../../libs/defi/oeth/src/components/TopNav.tsx"]
 }
diff --git a/apps/oeth/vite.config.ts b/apps/oeth/vite.config.ts
@@ -1,6 +1,10 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite';
+/// <reference types="vite-plugin-svgr/client" />
 import react from '@vitejs/plugin-react';
+import path from 'path';
+import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import svgr from 'vite-plugin-svgr';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
@@ -17,6 +21,7 @@ export default defineConfig({
   },
 
   plugins: [
+    svgr(),
     react({
       babel: {
         plugins: [
@@ -33,6 +38,14 @@ export default defineConfig({
     viteTsConfigPaths({
       root: '../../',
     }),
+    viteStaticCopy({
+      targets: [
+        {
+          src: path.resolve(__dirname, '../../libs/shared/assets/files/*'),
+          dest: './images',
+        },
+      ],
+    }),
   ],
 
   // Uncomment this if you are using workers.

diff --git a/apps/ousd/index.html b/apps/ousd/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -7,7 +7,6 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/src/styles.css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/libs/defi/oeth/src/components/History/HistoryButton.stories.tsx b/libs/defi/oeth/src/components/History/HistoryButton.stories.tsx
@@ -0,0 +1,30 @@
+import { HistoryFilterButton } from './HistoryButton';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof HistoryFilterButton> = {
+  component: HistoryFilterButton,
+  title: 'History/History filter button',
+  args: {
+    circle: false,
+    children: 'Test',
+  },
+  render: (args) => <HistoryFilterButton {...args} />,
+};
+
+export default meta;
+
+export const Primary: StoryObj<typeof HistoryFilterButton> = {};
+
+export const WithCircle: StoryObj<typeof HistoryFilterButton> = {
+  args: {
+    circle: true,
+  },
+};
+
+export const Selected: StoryObj<typeof HistoryFilterButton> = {
+  args: {
+    circle: true,
+    selected: true,
+  },
+};