[TAS-182] Feat/web3

.browserlistrc

@@ -0,0 +1,7 @@
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11

.env

@@ -0,0 +1,2 @@
+VITE_WALLET_CONNECT_PROJECT_ID=
+VITE_INFURA_ID=

.eslintrc.json

@@ -6,6 +6,7 @@
     "formatjs",
     "unused-imports",
     "simple-import-sort",
+    "import",
     "prettier"
   ],
   "overrides": [
@@ -27,24 +28,29 @@
           }
         ],
         "react/react-in-jsx-scope": "off",
+        "no-empty": ["error", { "allowEmptyCatch": true }],
         // Unused imports rules
         "unused-imports/no-unused-imports": "error",
-        "unused-imports/no-unused-vars": "warn",
+        "unused-imports/no-unused-vars": [
+          "warn",
+          {
+            "varsIgnorePattern": "^_",
+            "args": "none",
+            "argsIgnorePattern": "^_",
+            "ignoreRestSiblings": true
+          }
+        ],
 
         // 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$"]
@@ -54,6 +60,7 @@
 
         // import types rules
         "@typescript-eslint/consistent-type-imports": "error",
+        "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
 
         // FormatJS rules
         "formatjs/enforce-default-message": ["error", "literal"],

.gitignore

@@ -37,3 +37,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# env
+.env.local

apps/oeth/src/App.tsx

@@ -0,0 +1,39 @@
+import { Container, Stack } from '@mui/material';
+import { HistoryView } from '@origin/oeth/history';
+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() {
+  return (
+    <Stack>
+      <Topnav />
+      <Container
+        sx={{
+          mt: {
+            xs: 3,
+            md: 5,
+            paddingInline: {
+              xs: 2,
+              md: 0,
+            },
+          },
+        }}
+        maxWidth="sm"
+      >
+        <ApyHeader />
+        <Stack mt={3}>
+          <Routes>
+            <Route index element={<SwapView />} />
+            <Route path="wrap" element={<WrapView />} />
+            <Route path="history" element={<HistoryView />} />
+            <Route path="swap" element={<SwapView />} />
+          </Routes>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}

apps/oeth/src/clients/index.ts

@@ -0,0 +1,2 @@
+export * from './reactQuery';
+export * from './wagmi';

apps/oeth/src/clients/reactQuery.ts

@@ -0,0 +1,5 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: { queries: { staleTime: 1000 * 60 * 20 } },
+});

apps/oeth/src/clients/wagmi.ts

@@ -0,0 +1,63 @@
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  argentWallet,
+  braveWallet,
+  coinbaseWallet,
+  imTokenWallet,
+  injectedWallet,
+  ledgerWallet,
+  metaMaskWallet,
+  rainbowWallet,
+  safeWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';
+import { configureChains, createConfig } from 'wagmi';
+import { goerli, localhost, mainnet } from 'wagmi/chains';
+import { infuraProvider } from 'wagmi/providers/infura';
+import { publicProvider } from 'wagmi/providers/public';
+
+const VITE_WALLET_CONNECT_PROJECT_ID = import.meta.env
+  .VITE_WALLET_CONNECT_PROJECT_ID;
+const VITE_INFURA_ID = import.meta.env.VITE_INFURA_ID;
+
+export const { chains, publicClient, webSocketPublicClient } = configureChains(
+  [mainnet, goerli, localhost],
+  [infuraProvider({ apiKey: VITE_INFURA_ID }), publicProvider()],
+);
+
+const connectors = connectorsForWallets([
+  {
+    groupName: 'Recommended',
+    wallets: [
+      metaMaskWallet({
+        chains,
+        shimDisconnect: true,
+        projectId: VITE_WALLET_CONNECT_PROJECT_ID,
+      }),
+      ledgerWallet({ chains, projectId: VITE_WALLET_CONNECT_PROJECT_ID }),
+      walletConnectWallet({
+        chains,
+        projectId: VITE_WALLET_CONNECT_PROJECT_ID,
+      }),
+      coinbaseWallet({ appName: 'mStable', chains }),
+    ],
+  },
+  {
+    groupName: 'Others',
+    wallets: [
+      injectedWallet({ chains, shimDisconnect: true }),
+      safeWallet({ chains }),
+      rainbowWallet({ chains, projectId: VITE_WALLET_CONNECT_PROJECT_ID }),
+      braveWallet({ chains, shimDisconnect: true }),
+      argentWallet({ chains, projectId: VITE_WALLET_CONNECT_PROJECT_ID }),
+      imTokenWallet({ chains, projectId: VITE_WALLET_CONNECT_PROJECT_ID }),
+    ],
+  },
+]);
+
+export const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors,
+  publicClient,
+  webSocketPublicClient,
+});