feat(ui): eslint prettier

ui/.eslintrc.cjs

@@ -5,14 +5,16 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: ['react-refresh', 'prettier'],
   rules: {
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
+    'prettier/prettier': 'error',
   },
-}
+};

ui/package.json

@@ -8,27 +8,31 @@
     "build": "tsc && vite build",
     "test": "exit 0",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "yarn lint --fix",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@agoric/rpc": "^0.6.0",
-    "@agoric/web-components": "0.12.0",
     "@agoric/eventual-send": "^0.14.1",
     "@agoric/notifier": "^0.6.2",
+    "@agoric/rpc": "^0.6.0",
     "@agoric/store": "^0.9.2",
     "@agoric/ui-components": "^0.9.0",
+    "@agoric/web-components": "0.12.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "prettier": "^3.2.4",
     "ses": "^0.18.8",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
@@ -37,5 +41,10 @@
   "resolutions": {
     "**/ses": "^0.18.8",
     "**/@agoric/xsnap": "0.14.3-dev-9f085d3.0"
+  },
+  "prettier": {
+    "trailingComma": "all",
+    "arrowParens": "avoid",
+    "singleQuote": true
   }
 }

ui/src/App.tsx

@@ -31,7 +31,7 @@ type Wallet = Awaited<ReturnType<typeof makeAgoricWalletConnection>>;
 
 const watcher = makeAgoricChainStorageWatcher(
   'http://localhost:26657',
-  'agoriclocal'
+  'agoriclocal',
 );
 
 interface CopyBag<T = string> {
@@ -68,7 +68,7 @@ const setup = async () => {
       useAppStore.setState({
         offerUpInstance: instances.find(([name]) => name === 'offerUp')!.at(1),
       });
-    }
+    },
   );
 
   watcher.watchLatest<Array<[string, unknown]>>(
@@ -78,7 +78,7 @@ const setup = async () => {
       useAppStore.setState({
         brands: fromEntries(brands),
       });
-    }
+    },
   );
 };
 
@@ -121,7 +121,7 @@ const makeOffer = (giveValue: bigint, wantChoices: Record<string, bigint>) => {
       if (update.status === 'refunded') {
         alert('Offer rejected');
       }
-    }
+    },
   );
 };
 
@@ -156,7 +156,7 @@ function App() {
       switch (err.message) {
         case 'KEPLR_CONNECTION_ERROR_NO_SMART_WALLET':
           alert(
-            'no smart wallet at that address; try: yarn docker:make print-key'
+            'no smart wallet at that address; try: yarn docker:make print-key',
           );
           break;
         default:
@@ -199,7 +199,7 @@ function App() {
               {stringifyAmountValue(
                 istPurse.currentAmount,
                 istPurse.displayInfo.assetKind,
-                istPurse.displayInfo.decimalPlaces
+                istPurse.displayInfo.decimalPlaces,
               )}
             </div>
             <div>
@@ -211,7 +211,7 @@ function App() {
                       <li key={name}>
                         {String(number)} {name}
                       </li>
-                    )
+                    ),
                   )}
                 </ul>
               ) : (
@@ -232,7 +232,7 @@ function App() {
       value={stringifyAmountValue(
         { ...purse.currentAmount, value: giveValue },
         purse.displayInfo.assetKind,
-        purse.displayInfo.decimalPlaces
+        purse.displayInfo.decimalPlaces,
       )}
       onChange={ev => setGiveValue(parseValue(ev?.target?.value, purse))}
       className={giveValue >= terms.price ? 'ok' : 'error'}

ui/src/main.tsx

@@ -7,5 +7,5 @@ import './index.css';
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

ui/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});