Project improvements: correctness fixes, DRY refactors, logger, tests/CI, tooling

.env.example

@@ -0,0 +1,9 @@
+# Copy to `.env` to override defaults. Only variables prefixed with REACT_APP_
+# are exposed to the app (Create React App convention).
+
+# Enable verbose debug/log output in production builds.
+# - During local development (`npm start`) logs are ON by default regardless.
+# - In production builds logs are OFF unless this is set to "true".
+# - You can also toggle logs at runtime from the browser console, without
+#   rebuilding: dappLogs.on() / dappLogs.off() / dappLogs.toggle().
+REACT_APP_DEBUG=false

.github/workflows/build.yml

@@ -22,6 +22,10 @@ jobs:
         run: |
           npm i
 
+      - name: Create production .env
+        run: |
+          echo "REACT_APP_DEBUG=false" > .env
+
       - name: Build
         run: |
           npm run build

.github/workflows/test.yml

@@ -0,0 +1,37 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Read .nvmrc
+        id: nvm
+        run: echo "version=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '${{ steps.nvm.outputs.version }}'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Check formatting
+        run: npm run format:check
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Run tests
+        run: npm run test:ci

.prettierrc

@@ -7,8 +7,5 @@
   "semi": false,
   "singleQuote": true,
   "bracketSpacing": false,
-  "arrowParens": "always",
-  "importOrder": ["^@(.*)$", "^[./]" ],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
+  "arrowParens": "always"
 }

README.md

@@ -1,7 +1,90 @@
 # dapp-example
 
-The project is created with purpose to show how to work with yoroi dApp-connector.
+A simple, multi-chain example dApp that shows how to interact with wallet
+connectors — built for clarity, learning, testing, and extension.
 
-It may not look good but it works and can be used as an example to other projects how to interact with the dApp-connector.
+Live demo: https://dapp-example.yoroiwallet.com/
 
-You can find the dApp on this link https://dapp-example.yoroiwallet.com/
+> It may not look fancy, but it works and is meant as a reference for other
+> projects on how to talk to wallet dApp-connectors.
+
+## Supported chains
+
+- **Cardano** (CIP-30) — live, via browser wallet extensions (e.g. Yoroi)
+- **Ethereum** (EIP-1193) — live, via `window.ethereum`
+- **Bitcoin** — planned (provider is currently a stub)
+
+## Tech stack
+
+- React 18 (functional components + hooks), JavaScript only (no TypeScript)
+- Tailwind CSS + Material Tailwind
+- Create React App + craco
+- Cardano serialization via `@emurgo/cardano-serialization-lib-browser`
+
+## Getting started
+
+Prerequisites: Node.js (see [`.nvmrc`](./.nvmrc)) and npm.
+
+```bash
+npm install      # install dependencies
+npm start        # run the dev server at http://localhost:3000
+npm run build    # production build into ./build
+```
+
+A Cardano and/or Ethereum browser wallet extension is required to exercise the
+connect flows.
+
+## Available scripts
+
+| Script | Description |
+| --- | --- |
+| `npm start` | Start the development server |
+| `npm run build` | Production build |
+| `npm test` | Run tests in watch mode |
+| `npm run test:ci` | Run tests once (CI mode) |
+| `npm run lint` | Lint `src` with ESLint |
+| `npm run lint:fix` | Lint and auto-fix |
+| `npm run format` | Format `src` with Prettier |
+| `npm run format:check` | Check formatting without writing |
+
+## Project structure
+
+```
+src/
+  hooks/        # Providers (one per chain) + network toggle + shared hooks
+  components/   # UI: access buttons, tabs, cards, shared inputs
+  utils/        # Helpers and blockchain utilities (cslTools, ethereumUtils, ...)
+```
+
+Each chain follows the same flow: **Provider → Access Button → Main Tab →
+Subtabs → Cards**. See [`CLAUDE.md`](./CLAUDE.md) for the full architecture and
+conventions.
+
+## Logging
+
+The app uses a small debug-gated logger (`src/utils/logger.js`):
+
+- `debug` / `log` / `info` print only in development, or in a production build
+  started with `REACT_APP_DEBUG=true` (see [`.env.example`](./.env.example)).
+- `warn` / `error` always print.
+
+You can toggle logs live from the browser console — no rebuild needed:
+
+```js
+dappLogs.on()      // enable and remember across reloads
+dappLogs.off()     // disable and remember across reloads
+dappLogs.toggle()  // flip current state
+dappLogs.status()  // -> true | false
+dappLogs.reset()   // forget the override, fall back to the build default
+```
+
+## Testing
+
+Tests use Jest + React Testing Library (via CRA). Run `npm run test:ci` for a
+single pass, or `npm test` to watch. Tests and linting run in CI on pushes to
+`main` and on pull requests.
+
+## Configuration
+
+Copy [`.env.example`](./.env.example) to `.env` to override defaults. Only
+variables prefixed with `REACT_APP_` are exposed to the app.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dapp-example",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": true,
   "dependencies": {
     "@emurgo/cardano-serialization-lib-browser": "14.1.2",
@@ -30,12 +30,18 @@
     "@rollup/plugin-terser": "^0.4.4",
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.16",
+    "prettier": "^3.9.4",
     "tailwindcss": "^3.1.8"
   },
   "scripts": {
     "start": "craco start",
     "build": "CI=false && craco build",
     "test": "craco test",
+    "test:ci": "CI=true craco test",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write \"src/**/*.js\"",
+    "format:check": "prettier --check \"src/**/*.js\"",
     "eject": "craco eject"
   },
   "eslintConfig": {

src/App.js

@@ -1,8 +1,9 @@
+import logger from './utils/logger'
 import React, {useEffect} from 'react'
 import AccessButton from './components/accessButton'
 import MainTab from './components/tabs/mainTab'
 import TabsComponent from './components/tabs/tabsComponent'
-import useYoroi from './hooks/yoroiProvider'
+import useCardano from './hooks/cardanoProvider'
 import useNetwork, {NETWORK_CARDANO, NETWORK_ETHEREUM} from './hooks/networkProvider'
 import BitcoinAccessButton from './components/bitcoinAccessButton'
 import BitcoinMainTab from './components/tabs/bitcoinMainTab'
@@ -24,7 +25,7 @@ import EthTransactionsTab from './components/tabs/subtabs/ethTransactionsTab'
 import Erc20Tab from './components/tabs/subtabs/erc20Tab'
 
 const App = () => {
-  const {connectionState, selectedWallet, setConnectionState, setConnectionStateFalse} = useYoroi()
+  const {connectionState, selectedWallet, setConnectionState, setConnectionStateFalse} = useCardano()
   const {activeNetwork} = useNetwork()
   const isWalletConnected = connectionState === CONNECTED
   const isNoProvider = connectionState === NO_PROVIDER
@@ -42,7 +43,7 @@ const App = () => {
 
   useEffect(() => {
     const getConnectionState = async () => {
-      console.debug(`[dApp][App] Checking connection works`)
+      logger.debug(`[dApp][App] Checking connection works`)
       try {
         const walletObject = window.cardano[selectedWallet]
         const conState = await walletStateWithTimeout(walletObject, 10000)
@@ -54,14 +55,14 @@ const App = () => {
         }
       } catch (error) {
         setConnectionStateFalse()
-        console.error(error)
+        logger.error(error)
       }
     }
 
     if (isWalletConnected) {
       const connectionTimer = setInterval(getConnectionState, 10000)
       return () => {
-        console.debug(`[dApp][App] Checking connection is stopped`)
+        logger.debug(`[dApp][App] Checking connection is stopped`)
         clearInterval(connectionTimer)
       }
     }

src/components/accessButton.js

@@ -1,11 +1,13 @@
+import logger from '../utils/logger'
 import React from 'react'
-import useYoroi from '../hooks/yoroiProvider'
+import useCardano from '../hooks/cardanoProvider'
 import {IN_PROGRESS} from '../utils/connectionStates'
 import WalletsModal from './walletsModal'
+import AccessButtonShell from './accessButtonShell'
 
 const AccessButton = () => {
-  const {api, connectionState, availableWallets, selectedWallet} = useYoroi()
-  console.log(`[dApp][AccessButton] available wallets: ${availableWallets.length}`)
+  const {api, connectionState, availableWallets, selectedWallet} = useCardano()
+  logger.log(`[dApp][AccessButton] available wallets: ${availableWallets.length}`)
 
   const getWalletIcon = () => {
     return window.cardano[selectedWallet].icon
@@ -19,27 +21,25 @@ const AccessButton = () => {
   }
 
   return (
-    <div className="mx-auto bg-gray-900">
-      <div className="grid justify-items-center py-3">
-        {api ? (
-          <div className="flex items-center justify-center gap-3 py-5">
-            <img src={getWalletIcon()} alt="wallet icon" className="w-10 sm:w-14 lg:w-16" />
-            <div className="text-base sm:text-xl font-bold tracking-tight text-white text-center">
-              <div>Connected To {getWalletName()}</div>
-              <div className="py-1 text-sm sm:text-base">anonymous wallet</div>
-            </div>
+    <AccessButtonShell>
+      {api ? (
+        <div className="flex items-center justify-center gap-3 py-5">
+          <img src={getWalletIcon()} alt="wallet icon" className="w-10 sm:w-14 lg:w-16" />
+          <div className="text-base sm:text-xl font-bold tracking-tight text-white text-center">
+            <div>Connected To {getWalletName()}</div>
+            <div className="py-1 text-sm sm:text-base">anonymous wallet</div>
           </div>
-        ) : connectionState === IN_PROGRESS ? (
-          <div className="pt-5 pb-5 text-m font-bold tracking-tight text-green-500">
-            <label>Wallet connecting is in progress ...</label>
-          </div>
-        ) : (
-          <div>
-            <WalletsModal />
-          </div>
-        )}
-      </div>
-    </div>
+        </div>
+      ) : connectionState === IN_PROGRESS ? (
+        <div className="pt-5 pb-5 text-m font-bold tracking-tight text-green-500">
+          <label>Wallet connecting is in progress ...</label>
+        </div>
+      ) : (
+        <div>
+          <WalletsModal />
+        </div>
+      )}
+    </AccessButtonShell>
   )
 }
 

src/components/accessButtonShell.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+// Shared chrome for each chain's access button: dark background + centered grid.
+const AccessButtonShell = ({children, innerClassName = 'grid justify-items-center py-3'}) => (
+  <div className="mx-auto bg-gray-900">
+    <div className={innerClassName}>{children}</div>
+  </div>
+)
+
+export default AccessButtonShell

src/components/bitcoinAccessButton.js

@@ -1,18 +1,14 @@
-import React from 'react'
+import AccessButtonShell from './accessButtonShell'
 
-const BitcoinAccessButton = () => {
-  return (
-    <div className="mx-auto bg-gray-900">
-      <div className="grid justify-items-center py-3">
-        <button
-          className="rounded-md bg-orange-600 py-5 px-5 disabled:opacity-50 text-white font-semibold cursor-not-allowed"
-          disabled
-        >
-          Bitcoin (Coming Soon)
-        </button>
-      </div>
-    </div>
-  )
-}
+const BitcoinAccessButton = () => (
+  <AccessButtonShell>
+    <button
+      className="rounded-md bg-orange-600 py-5 px-5 disabled:opacity-50 text-white font-semibold cursor-not-allowed"
+      disabled
+    >
+      Bitcoin (Coming Soon)
+    </button>
+  </AccessButtonShell>
+)
 
 export default BitcoinAccessButton