Feat/implement swap routes

.env

@@ -1,3 +1,5 @@
 VITE_SUBSQUID_URL="https://squid.subsquid.io/origin-squid/v/v4/graphql"
+# VITE_CUSTOM_RPC="https://rpc.tenderly.co/fork/751e79c6-6420-4ea9-ac13-1f6b20f318bc"
+# VITE_CUSTOM_RPC="http://127.0.0.1:8545"
 VITE_WALLET_CONNECT_PROJECT_ID=
-VITE_INFURA_ID=
+VITE_ALCHEMY_ID=

.gitignore

@@ -34,6 +34,9 @@ yarn-error.log
 testem.log
 /typings
 
+# generated
+*-generated.ts
+
 # System Files
 .DS_Store
 Thumbs.db

README.md

@@ -1,13 +1,23 @@
 # Origin Defi
 
-## Start any the app
+## Setup environment
 
-To start the development server run `nx serve ousd` or `nx serve oeth`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+Duplicate `.env` file to `.env.local` and fill the variables with your secrets, they will take precedence over the defaults.
+
+## Start the app
+
+To start the development server run `pnpm nx serve oeth` or `pnpm nx serve ousd`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+
+## Apps
+
+| Status | Name | Nx project | Port | Public hosts |
+|:------:|:-----|:-----------|:-----|:-------------|
+|   🚧   | OETH | `oeth`     | 4200 | [fleek]()    |
+|   🚧   | OUSD | `ousd`     | 4201 | [fleek]()    |
 
 ## Storybook
 
-There is a shared storybook aggregator that can run all the stories across all the libraries, run
-`pnpm storybook`. If you want to run storybook for one individual library (eg: ousd) simply run `pnpm nx storybook defi-ousd` (basically the command is `pnpm nx storybook name-of-the-lib`).
+There is a shared storybook aggregator that can run all the stories across all the libraries, run `pnpm storybook`. If you want to run storybook for one individual library (eg: ousd) simply run `pnpm nx storybook defi-ousd` (basically the command is `pnpm nx storybook name-of-the-lib`).
 
 ## Translations
 
@@ -17,20 +27,20 @@ Basic translation setup was added to the repo. It might require some changes dep
 
 To execute tasks with Nx use the following syntax:
 
-```
-nx <target> <project> <...options>
+```bash
+pnpm nx <target> <project> <...options>
 ```
 
 You can also run multiple targets:
 
-```
-nx run-many -t <target1> <target2>
+```bash
+pnpm nx run-many -t <target1> <target2>
 ```
 
 ..or add `-p` to filter specific projects
 
-```
-nx run-many -t <target1> <target2> -p <proj1> <proj2>
+```bash
+pnpm nx run-many -t <target1> <target2> -p <proj1> <proj2>
 ```
 
 Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).

apps/oeth/src/App.tsx

@@ -1,10 +1,10 @@
 import { Container, Stack } from '@mui/material';
 import { HistoryView } from '@origin/oeth/history';
+import { ApyHeader } from '@origin/oeth/shared';
 import { SwapView } from '@origin/oeth/swap';
 import { WrapView } from '@origin/oeth/wrap';
 import { Route, Routes } from 'react-router-dom';
 
-import { ApyHeader } from './components/ApyHeader';
 import { Topnav } from './components/Topnav';
 
 export function App() {

apps/oeth/src/components/Topnav.tsx

@@ -7,6 +7,7 @@ import {
   Link as MuiLink,
   Tab,
   Tabs,
+  useMediaQuery,
   useTheme,
 } from '@mui/material';
 import { OpenAccountModalButton } from '@origin/shared/providers';
@@ -17,6 +18,7 @@ import type { BoxProps } from '@mui/material';
 
 export function Topnav(props: BoxProps) {
   const theme = useTheme();
+  const isSmall = useMediaQuery(theme.breakpoints.down('md'));
   const intl = useIntl();
   const [value, setValue] = useState(0);
 
@@ -25,8 +27,10 @@ export function Topnav(props: BoxProps) {
       component="nav"
       sx={{
         display: 'grid',
-        borderBlockEnd: { xs: 'none', md: '1px solid' },
-        borderColor: 'background.paper',
+        borderBlockEnd: {
+          xs: 'none',
+          md: '1px solid var(--mui-palette-background-paper)',
+        },
         gap: { xs: 1, md: 10 },
         alignItems: 'center',
         backgroundColor: 'divider',
@@ -42,10 +46,6 @@ export function Topnav(props: BoxProps) {
           xs: '1fr 1fr',
           md: 'auto 1fr auto',
         },
-        rowGap: {
-          xs: 1.5,
-          md: 0,
-        },
         ...props?.sx,
       }}
     >
@@ -83,6 +83,10 @@ export function Topnav(props: BoxProps) {
             xs: 'span 2',
             md: 'span 1',
           },
+          marginBlockStart: {
+            xs: 4,
+            md: 0,
+          },
           backgroundColor: 'transparent',
           minHeight: 0,
           overflow: 'visible',
@@ -146,8 +150,9 @@ export function Topnav(props: BoxProps) {
         sx={{
           display: 'flex',
           justifyContent: 'flex-end',
+          alignItems: 'stretch',
           gap: { xs: 1, md: 2 },
-          '& > a': {
+          '& > a, & > *': {
             fontSize: {
               xs: '0.75rem',
               md: '1rem',
@@ -161,11 +166,8 @@ export function Topnav(props: BoxProps) {
           href="https://oeth.on.fleek.co/"
           target="_blank"
           sx={{
-            backgroundColor: 'background.paper',
             borderRadius: 25,
-            paddingBlock: 1,
-            color: 'primary.contrastText',
-            boxShadow: (theme) => theme.shadows['24'],
+            paddingBlock: 0.75,
             display: 'grid',
             placeContent: 'center',
             paddingInline: {
@@ -185,9 +187,12 @@ export function Topnav(props: BoxProps) {
               background: (theme) => theme.palette.background.paper,
               backgroundImage: 'none',
             },
+            color: 'primary.contrastText',
+            boxSizing: 'border-box',
+            lineHeight: '1rem',
           }}
         >
-          {theme.breakpoints.down('md')
+          {isSmall
             ? intl.formatMessage({ defaultMessage: 'IPFS' })
             : intl.formatMessage({ defaultMessage: 'View on IPFS' })}
         </MuiLink>
@@ -198,9 +203,11 @@ export function Topnav(props: BoxProps) {
           display: { xs: 'block', md: 'none' },
           gridColumn: 'span 2',
           gridRowStart: 1,
-          borderColor: 'background.paper',
+          borderColor: (theme) => theme.palette.background.paper,
           position: 'relative',
-          bottom: '-4rem',
+          width: 'calc(100% + 1.5rem)',
+          bottom: '-3.75rem',
+          left: '-0.75rem',
         }}
       />
     </Box>

apps/oeth/src/env.d.ts

@@ -2,7 +2,9 @@
 
 interface ImportMetaEnv {
   readonly VITE_WALLET_CONNECT_PROJECT_ID: string;
-  readonly VITE_INFURA_ID: string;
+  readonly VITE_ALCHEMY_ID: string;
+  readonly VITE_SUBSQUID_URL: string;
+  readonly VITE_CUSTOM_RPC?: string;
 }
 
 interface ImportMeta {

apps/oeth/src/main.tsx

@@ -8,18 +8,23 @@ import {
   CssBaseline,
   Experimental_CssVarsProvider as CssVarsProvider,
 } from '@mui/material';
+import { chains, queryClient, wagmiConfig } from '@origin/oeth/shared';
+import { CurveProvider } from '@origin/shared/providers';
 import { theme } from '@origin/shared/theme';
 import { composeContexts } from '@origin/shared/utils';
 import { darkTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { QueryClientProvider } from '@tanstack/react-query';
+import { setAutoFreeze } from 'immer';
 import { IntlProvider } from 'react-intl';
 import { BrowserRouter } from 'react-router-dom';
 import { WagmiConfig } from 'wagmi';
 
 import { App } from './App';
-import { chains, queryClient, wagmiConfig } from './clients';
 import { en } from './lang';
 
+// https://github.com/dai-shi/proxy-compare/pull/8
+setAutoFreeze(false);
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
@@ -33,6 +38,13 @@ root.render(
       [CssVarsProvider, { theme: theme, defaultMode: 'dark' }],
       [WagmiConfig, { config: wagmiConfig }],
       [RainbowKitProvider, { chains: chains, theme: darkTheme() }],
+      [
+        CurveProvider,
+        {
+          alchemyApiKey: import.meta.env.VITE_ALCHEMY_ID,
+          customRpcUrl: import.meta.env.VITE_CUSTOM_RPC,
+        },
+      ],
     ],
     <>
       <CssBaseline />

apps/ousd/src/main.tsx

@@ -5,9 +5,7 @@ import {
   CssBaseline,
   Experimental_CssVarsProvider as CssVarsProvider,
 } from '@mui/material';
-import { queryClient } from '@origin/shared/data-access';
 import { theme } from '@origin/shared/theme';
-import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from 'react-intl';
 
 import { OUSDRoot } from './components';
@@ -19,12 +17,10 @@ const root = ReactDOM.createRoot(
 root.render(
   <StrictMode>
     <IntlProvider messages={en} locale="en" defaultLocale="en">
-      <QueryClientProvider client={queryClient}>
-        <CssVarsProvider theme={theme} defaultMode="dark">
-          <CssBaseline />
-          <OUSDRoot />
-        </CssVarsProvider>
-      </QueryClientProvider>
+      <CssVarsProvider theme={theme} defaultMode="dark">
+        <CssBaseline />
+        <OUSDRoot />
+      </CssVarsProvider>
     </IntlProvider>
   </StrictMode>,
 );

apps/ousd/vite.config.ts

@@ -1,18 +1,18 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   cacheDir: '../../node_modules/.vite/ousd',
 
   server: {
-    port: 4200,
+    port: 4201,
     host: 'localhost',
   },
 
   preview: {
-    port: 4300,
+    port: 4301,
     host: 'localhost',
   },
 

libs/defi/oeth/src/components/Swap/GasPopover.tsx

@@ -17,13 +17,13 @@ import {
 } from '@mui/material';
 import { useIntl } from 'react-intl';
 
-import type { Theme } from '@mui/material';
+import type { SxProps } from '@mui/material';
 
 const defaultPriceTolerance = 0.01;
 
 const gridStyles = {
   display: 'grid',
-  gridTemplateColumns: (theme: Theme) => `1.5fr 1fr`,
+  gridTemplateColumns: `1.5fr 1fr`,
   gap: 1,
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -32,9 +32,10 @@ const gridStyles = {
 interface Props {
   gasPrice: number;
   onPriceToleranceChange: (value: number) => void;
+  sx?: SxProps;
 }
 
-export function GasPopover({ gasPrice, onPriceToleranceChange }: Props) {
+export function GasPopover({ gasPrice, onPriceToleranceChange, sx }: Props) {
   const theme = useTheme();
   const intl = useIntl();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@@ -48,6 +49,7 @@ export function GasPopover({ gasPrice, onPriceToleranceChange }: Props) {
       <IconButton
         onClick={(e) => setAnchorEl(e.currentTarget)}
         data-testid="gas-popover-button"
+        sx={{ ...sx }}
       >
         <img src="/images/settings-icon.svg" />
       </IconButton>