chore: distributed session keys (#41)

* chore: distributed session keys

.env.example

@@ -0,0 +1,3 @@
+VITE_PAYMASTER_KEY=
+VITE_BUNDLER_URL=https://bundler.biconomy.io/api/v2/80002/cJPK7B3ru.dd7f7861-190d-45ic-af80-6877f74b8f44
+VITE_SILENCE_LABS_NPM_TOKEN=npm_XXX

.eslintrc.cjs

@@ -2,17 +2,17 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true }
+    ]
+  }
 }

.github/workflows/dev.yaml

@@ -31,6 +31,7 @@ jobs:
           CI: false
           NODE_OPTIONS: --max_old_space_size=4096
           REACT_APP_PKEY: ${{ secrets.REACT_APP_PKEY }}
+          SILENCE_LABS_NPM_TOKEN: ${{ secrets.SILENCE_LABS_NPM_TOKEN }}
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1

.github/workflows/staging.yaml

@@ -31,6 +31,7 @@ jobs:
           CI: false
           NODE_OPTIONS: --max_old_space_size=4096
           REACT_APP_PKEY: ${{ secrets.REACT_APP_PKEY }}
+          SILENCE_LABS_NPM_TOKEN: ${{ secrets.SILENCE_LABS_NPM_TOKEN }}
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1

.gitignore

@@ -23,3 +23,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

biome.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+  "files": {
+    "ignore": [
+      "package.json",
+      "node_modules",
+      "**/node_modules",
+      "cache",
+      "coverage",
+      "tsconfig.json",
+      "tsconfig.*.json",
+      "_cjs",
+      "_esm",
+      "_types",
+      "bun.lockb",
+      "docs",
+      "dist",
+      "build"
+    ]
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      },
+      "style": {
+        "noUnusedTemplateLiteral": "off",
+        "noNonNullAssertion": "off",
+        "noUselessElse": "off",
+        "noParameterAssign": "off",
+        "useTemplate": "off"
+      },
+      "a11y": {
+        "noAccessKey": "off",
+        "useKeyWithClickEvents": "off",
+        "useKeyWithMouseEvents": "off",
+        "useButtonType": "off"
+      },
+      "complexity": {
+        "noExtraBooleanCast": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": true,
+    "lineWidth": 80,
+    "indentWidth": 2,
+    "indentStyle": "space"
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "trailingComma": "none"
+    }
+  }
+}

bunfig.toml

@@ -0,0 +1,2 @@
+[install.scopes]
+silencelaboratories = { token = "$VITE_SILENCE_LABS_NPM_TOKEN", url = "https://registry.npmjs.org" }

package.json

@@ -4,15 +4,17 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "bun i && bun link @biconomy/account && vite",
+    "dev": "bun i && bun link @biconomy/account @biconomy/use-aa && vite",
     "start": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "biome format . --write",
+    "lint": "biome check .",
+    "lint:fix": "bun run lint --apply",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@biconomy/account": "^4.4.5",
-    "@biconomy/use-aa": "1.0.11",
+    "@biconomy/account": "^4.5.4",
+    "@biconomy/use-aa": "^1.1.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@ethersproject/providers": "^5.7.2",
@@ -21,16 +23,17 @@
     "@mui/styles": "^5.11.12",
     "@rainbow-me/rainbowkit": "^2.0.0",
     "@tanstack/react-query": "^5.22.2",
+    "@types/react-toastify": "^4.1.0",
     "ethers": "^6.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "react-toastify": "^9.0.8",
+    "react-toastify": "^10.0.5",
     "viem": "^2.13.7",
     "wagmi": "^2.9.9"
   },
   "devDependencies": {
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
@@ -39,6 +42,11 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "simple-git-hooks": "^2.9.0",
+    "@biomejs/biome": "1.6.0"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "bun run format && bun run lint:fix"
   }
 }

src/App.tsx

@@ -1,13 +1,13 @@
-import React from "react";
-import { makeStyles } from "@mui/styles";
-import { ToastContainer } from "react-toastify";
-import { useAccount } from "wagmi";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
-import TabsBody from "./components/TabsBody";
+import { makeStyles } from "@mui/styles"
+import { ConnectButton } from "@rainbow-me/rainbowkit"
+import type React from "react"
+import { ToastContainer } from "react-toastify"
+import { useAccount } from "wagmi"
+import TabsBody from "./components/TabsBody"
 
 const App: React.FC = () => {
-  const classes = useStyles();
-  const { address } = useAccount();
+  const classes = useStyles()
+  const { address } = useAccount()
 
   if (!address) {
     return (
@@ -17,7 +17,7 @@ const App: React.FC = () => {
             <img
               width={35}
               style={{
-                marginRight: 20,
+                marginRight: 20
               }}
               src="/logo.svg"
               alt=""
@@ -31,16 +31,16 @@ const App: React.FC = () => {
           <ConnectButton />
         </div>
       </div>
-    );
+    )
   }
 
   return (
     <div className={classes.bgCover}>
       <TabsBody loading={false} />
       <ToastContainer position="bottom-left" newestOnTop theme="dark" />
     </div>
-  );
-};
+  )
+}
 
 const useStyles = makeStyles(() => ({
   bgCover: {
@@ -51,7 +51,7 @@ const useStyles = makeStyles(() => ({
     color: "#e6e6e6",
     justifyContent: "start",
     alignItems: "center",
-    padding: "0px 20px",
+    padding: "0px 20px"
   },
   container: {
     width: "60vw",
@@ -64,17 +64,17 @@ const useStyles = makeStyles(() => ({
     flexDirection: "column",
     alignItems: "start",
     justifyContent: "center",
-    gap: 20,
+    gap: 20
   },
   title: {
     margin: 0,
     fontSize: 50,
-    color: "#ffb999",
+    color: "#ffb999"
   },
   subTitle: {
     fontSize: 22,
-    margin: 0,
-  },
-}));
+    margin: 0
+  }
+}))
 
-export default App;
+export default App