feat: load web wallet using the read-only token

.github/workflows/main.yml

@@ -21,10 +21,34 @@ jobs:
       run: |
         nix develop . -c yarn install
 
-    - name: lint
+    - name: Lint hathor-rpc-handler
       run: |
         nix develop . -c yarn workspace @hathor/hathor-rpc-handler run lint
 
-    - name: tests
+    - name: Test hathor-rpc-handler
       run: |
         nix develop . -c yarn workspace @hathor/hathor-rpc-handler run test
+
+    - name: Lint web-wallet
+      run: |
+        nix develop . -c yarn workspace @hathor/web-wallet run lint
+
+    - name: Test web-wallet
+      run: |
+        nix develop . -c yarn workspace @hathor/web-wallet run test --run
+
+    - name: Install Playwright browsers
+      run: |
+        nix develop . -c yarn workspace @hathor/web-wallet exec playwright install chromium --with-deps
+
+    - name: E2E test web-wallet
+      run: |
+        nix develop . -c yarn workspace @hathor/web-wallet exec playwright test --project=chromium
+
+    - name: Lint snap
+      run: |
+        nix develop . -c yarn workspace @hathor/snap run lint
+
+    - name: Test snap
+      run: |
+        nix develop . -c yarn workspace @hathor/snap run test

.gitignore

@@ -11,3 +11,4 @@ coverage/
 public/
 *.swp
 *.swo
+.claude

.yarn/patches/bitcore-lib-npm-8.25.10-2b2055eaf2.patch

@@ -0,0 +1,12 @@
+diff --git a/index.js b/index.js
+index 4cbe6bf2ac69202558e0cfb8457fec21c2d48017..98cad3a403bacc0ebd2d1223d3c17adc23a53bc7 100644
+--- a/index.js
++++ b/index.js
+@@ -5,6 +5,7 @@ var bitcore = module.exports;
+ // module information
+ bitcore.version = 'v' + require('./package.json').version;
+ bitcore.versionGuard = function(version) {
++  return;
+   if (version !== undefined) {
+     var message = 'More than one instance of bitcore-lib found. ' +
+       'Please make sure to require bitcore-lib and check that submodules do' +

.yarn/patches/bitcore-lib-npm-8.25.47-62066b9183.patch

@@ -22,4 +22,4 @@ index 6bea796b8a174a1ecb24d3c745fc32edf83bf4c2..7002d96c2e5571ca8097f286190f937a
 +    r = Q.getX().umod(N);
      s = k.invm(N).mul(e.add(d.mul(r))).umod(N);
    } while (r.cmp(BN.Zero) <= 0 || s.cmp(BN.Zero) <= 0);
-
+ 

Dockerfile.web-wallet

@@ -0,0 +1,45 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy yarn configuration and patches
+COPY .yarnrc.yml ./
+COPY .yarn ./.yarn
+COPY package.json yarn.lock ./
+COPY packages/web-wallet/package.json ./packages/web-wallet/
+COPY packages/snap-utils/package.json ./packages/snap-utils/
+COPY packages/hathor-rpc-handler/package.json ./packages/hathor-rpc-handler/
+
+# Install dependencies
+RUN corepack enable && yarn install
+
+# Copy source code
+COPY packages/web-wallet ./packages/web-wallet
+COPY packages/snap-utils ./packages/snap-utils
+COPY packages/hathor-rpc-handler ./packages/hathor-rpc-handler
+
+# Build snap-utils first (web-wallet depends on it)
+WORKDIR /app/packages/snap-utils
+RUN yarn build
+
+# Build hathor-rpc-handler (snap-utils depends on it)
+WORKDIR /app/packages/hathor-rpc-handler
+RUN yarn build
+
+# Build the web-wallet application
+WORKDIR /app/packages/web-wallet
+RUN yarn build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built files to nginx
+COPY --from=builder /app/packages/web-wallet/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY packages/web-wallet/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

package.json

@@ -5,7 +5,8 @@
   "workspaces": [
     "packages/hathor-rpc-handler",
     "packages/snap",
-    "packages/snap-utils"
+    "packages/snap-utils",
+    "packages/web-wallet"
   ],
   "resolutions": {
     "bitcore-lib@npm:8.25.10": "patch:bitcore-lib@npm%3A8.25.47#~/.yarn/patches/bitcore-lib-npm-8.25.47-62066b9183.patch",

packages/snap-utils/src/react-hooks/MetamaskContext.tsx

@@ -59,4 +59,4 @@ export const MetaMaskProvider = ({ children }: { children: ReactNode }) => {
  */
 export function useMetaMaskContext() {
   return useContext(MetaMaskContext);
-}
+}

packages/snap-utils/src/react-hooks/useRequest.ts

@@ -19,10 +19,10 @@ export const useRequest = () => {
    * @param params.method - The method to call.
    * @param params.params - The method params.
    * @returns The result of the request.
+   * @throws Will throw an error if the request fails.
    */
   const request: Request = async ({ method, params }) => {
     try {
-      setError(null);
       const data =
         (await provider?.request({
           method,
@@ -31,9 +31,13 @@ export const useRequest = () => {
 
       return data;
     } catch (requestError: any) {
+      // Set error in context for UI notifications
       setError(requestError);
 
-      return null;
+      // Re-throw the error so callers can distinguish between
+      // null response vs error. This allows proper error handling
+      // instead of treating all errors as null responses.
+      throw requestError;
     }
   };
 

packages/snap-utils/src/types.ts

@@ -26,7 +26,7 @@ interface EIP6963AnnounceProviderEvent extends CustomEvent<{
     rdns: string;
   };
   provider: MetaMaskInpageProvider;
-}> {}
+}> { }
 
 declare global {
   interface WindowEventMap {

packages/snap-utils/tsconfig.json

@@ -20,4 +20,3 @@
     "dist"
   ]
 }
-

packages/snap/snap.manifest.json

@@ -3,7 +3,7 @@
   "description": "Hathor Network Snap integration",
   "proposedName": "Hathor Wallet",
   "source": {
-    "shasum": "9j6opOXoJBG0aZv1ZsDnlCpUZ55XZbUVWBABoFvJYIQ=",
+    "shasum": "Zt62bKmJtkjJKomv2U76V5gdAG447bsG8ytJGS144Ac=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/constants.ts

@@ -31,9 +31,9 @@ const NANO_BRAVO_URLS = {
 }
 
 const TESTNET_URLS = {
-  nodeURL: 'https://node1.testnet.hathor.network/v1a/',
-  walletServiceURL: 'https://wallet-service.testnet.hathor.network',
-  txMiningURL: 'https://txmining.testnet.hathor.network/',
+  nodeURL: 'https://node1.india.testnet.hathor.network/v1a/',
+  walletServiceURL: 'https://wallet-service.india.testnet.hathor.network',
+  txMiningURL: 'https://txmining.india.testnet.hathor.network/',
   network: 'testnet',
 }
 
@@ -52,6 +52,6 @@ export const NETWORK_MAP = {
   'dev-testnet': DEV_TESTNET_URLS,
 }
 
-export const DEFAULT_NETWORK = 'mainnet';
+export const DEFAULT_NETWORK = 'testnet';
 
 export const DEFAULT_PIN_CODE = '123';

packages/snap/src/dialogs/address.tsx

@@ -59,4 +59,4 @@ export const addressPage = async (data, params, origin) => (
       ),
     },
   })
-)
+)

packages/snap/src/dialogs/createNano.tsx

@@ -6,7 +6,7 @@
  */
 
 import { REQUEST_METHODS, DIALOG_TYPES } from '../constants';
-import { Bold, Box, Card, Container, Copyable, Divider, Heading, Icon, Section, Text, Tooltip } from '@metamask/snaps-sdk/jsx';
+import { Bold, Box, Card, Container, Copyable, Heading, Icon, Section, Text, Tooltip } from '@metamask/snaps-sdk/jsx';
 import { constants as libConstants, bigIntUtils, dateUtils, NanoContractActionType, numberUtils } from '@hathor/wallet-lib';
 
 const renderOptionalContractDetail = (param, title) => {

packages/snap/src/index.tsx

@@ -59,7 +59,9 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
 }) => {
   // Almost all RPC requests need the network, so I add it here
   const networkData = await getNetworkData();
+
   request.params = { ...request.params, network: networkData.network };
+
   // Use read-only wallet for requests that don't require signing
   const isReadOnly = READ_ONLY_METHODS.has(request.method as RpcMethods);
 

packages/snap/src/utils/network.ts

@@ -25,6 +25,7 @@ export const getNetworkData = async () => {
 
 /*
  * Set network, persist data in storage and update wallet lib config
+ * Also initializes the wallet on the new network's wallet-service
  */
 export const setNetwork = async (network: string) => {
   const persistedData = await snap.request({

packages/snap/src/utils/wallet.ts

@@ -143,4 +143,4 @@ export const getAndStartHathorWallet = async (): Promise<HathorWalletServiceWall
   await wallet.start({ pinCode: DEFAULT_PIN_CODE, password: DEFAULT_PIN_CODE });
 
   return wallet;
-}
+};

packages/web-wallet/.dockerignore

@@ -0,0 +1,13 @@
+node_modules
+dist
+.git
+.gitignore
+*.log
+.env
+.env.*
+coverage
+test-results
+playwright-report
+*.md
+Dockerfile
+.dockerignore

packages/web-wallet/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/web-wallet/Dockerfile

@@ -0,0 +1,36 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy yarn configuration and patches from repo root
+COPY ../../.yarnrc.yml ./
+COPY ../../.yarn ./.yarn
+COPY ../../package.json ../../yarn.lock ./
+COPY ../hathor-rpc-handler/package.json ./packages/hathor-rpc-handler/
+COPY ../snap-utils/package.json ./packages/snap-utils/
+COPY package.json ./packages/web-wallet/
+
+# Install dependencies
+RUN corepack enable && yarn install
+
+# Copy source code
+COPY . ./packages/web-wallet
+COPY ../snap-utils ../snap-utils
+
+# Build the application
+WORKDIR /app/packages/web-wallet
+RUN yarn build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built files to nginx
+COPY --from=builder /app/packages/web-wallet/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

packages/web-wallet/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

packages/web-wallet/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}