web monetization project configuration

.editorconfig

@@ -0,0 +1,14 @@
+# Top-most EditorConfig file ?
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Indentiation Rules
+[*.{css,js,jsx,json,html,scss}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1,2 @@
+!.github
+node_modules/

.eslintrc.json

@@ -0,0 +1,92 @@
+{
+  "env": {
+    "es2020": true,
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:jsx-a11y/recommended",
+    "plugin:cypress/recommended",
+    "plugin:tailwind/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2020,
+    "ecmaFeatures": { "jsx": true }
+  },
+  "plugins": [
+    "prettier",
+    "react",
+    "node",
+    "react-hooks",
+    "cypress",
+    "@typescript-eslint",
+    "jest",
+    "simple-import-sort",
+    "@funboxteam/no-only-tests"
+  ],
+  "rules": {
+    "semi": "off",
+    "prettier/prettier": "error",
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    "react/prop-types": "off",
+    "no-param-reassign": "error",
+    "no-use-before-define": "off",
+    "no-underscore-dangle": "off",
+    "no-implicit-coercion": ["error", { "allow": ["!!"] }],
+    "block-scoped-var": "error",
+    "no-shadow": "warn",
+    "no-unsafe-optional-chaining": ["error", { "disallowArithmeticOperators": true }],
+    "no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
+    "no-return-assign": "warn",
+    "consistent-return": "off",
+    "import/no-unresolved": "error",
+    "no-redeclare": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "react/jsx-props-no-spreading": "off",
+    "import/prefer-default-export": "off",
+    "jsx-a11y/anchor-is-valid": "warn",
+    "jsx-a11y/no-noninteractive-tabindex": "warn",
+    "jsx-a11y/tabindex-no-positive": "warn",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/no-static-element-interactions": "warn",
+    "jsx-a11y/no-noninteractive-element-interactions": "warn",
+    "tailwind/class-order": "error",
+    "no-console": "error",
+    "no-empty": ["error", { "allowEmptyCatch": true }],
+    "@funboxteam/no-only-tests/no-only": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-uses-react": "off"
+  },
+  "overrides": [
+    {
+      "files": [".*rc.js", ".*rc.cjs", "*.config.js", "*.config.cjs"],
+      "env": {
+        "node": true
+      }
+    }
+  ],
+  "ignorePatterns": ["dist/**", "dist-firefox-v2"],
+  "globals": {
+    "chrome": true
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,57 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: rm -rf node_modules && yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: rm -rf node_modules && yarn install --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: yarn
+
+      - name: Install dependencies
+        run: rm -rf node_modules && yarn install --frozen-lockfile
+
+      - name: Unit test
+        run: yarn ci:test

.gitignore

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

.nano-staged.json

@@ -0,0 +1,4 @@
+{
+  "**/*": "prettier --ignore-unknown --ignore-path .gitignore --write",
+  "**/*.{js,ts,tsx}": "eslint --fix"
+}

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "all",
+  "quoteProps": "as-needed",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "bracketSameLine": true,
+  "semi": false
+}

README.md

@@ -0,0 +1 @@
+Web monetization extension for Chrome and Firefox

jest.config.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.(scss|sass|css)$': 'identity-obj-proxy',
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+};

package.json

@@ -0,0 +1,92 @@
+{
+  "name": "web-monetization-extension",
+  "description": "Web Monetization Extension",
+  "repository": "https://github.com/interledger/web-monetization-extension",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "run-s clean && vite",
+    "build": "run-s clean && tsc && vite build && run-s firefox-mv2-build",
+    "firefox-mv2-build": "node tools/unstable_mv3ToMv2Build.js",
+    "clean": "run-p clean:*",
+    "clean:dist": "rimraf dist",
+    "clean:dist-firefox-v2": "rimraf dist-firefox-v2",
+    "format": "run-p format:*",
+    "format:eslint": "run-s \" lint:eslint --fix \"",
+    "format:prettier": "run-s \" lint:prettier --write \"",
+    "lint": "run-p lint:*",
+    "lint:eslint": "eslint . --ext .js,.ts,.tsx --max-warnings 0 --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.(md|json|yml)\" --ignore-path .gitignore --check",
+    "lint:type": "tsc --noEmit",
+    "test": "jest",
+    "ci:test": "run-s \" test --ci --reporters=\"default\" --reporters=\"github-actions\" \"",
+    "prepare": "simple-git-hooks"
+  },
+  "dependencies": {
+    "@eduardoac-skimlinks/webext-redux": "3.0.1-release-candidate",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@twind/core": "^1.1.3",
+    "@twind/preset-autoprefix": "^1.0.7",
+    "@twind/preset-tailwind": "^1.1.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.1.0",
+    "redux-persist-webextension-storage": "^1.0.2",
+    "reduxjs-toolkit-persist": "^7.2.1",
+    "webextension-polyfill": "^0.10.0"
+  },
+  "devDependencies": {
+    "@crxjs/vite-plugin": "^2.0.0-beta.18",
+    "@funboxteam/eslint-plugin-no-only-tests": "^4.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/fs-extra": "^11.0.1",
+    "@types/jest": "^29.5.2",
+    "@types/lodash-es": "^4.17.7",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/redux-persist-webextension-storage": "^1.0.0",
+    "@types/webextension-polyfill": "^0.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.8",
+    "construct-style-sheets-polyfill": "^3.1.0",
+    "eslint": "^8.15.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-next": "^12.1.6",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.5",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-tailwind": "^0.2.1",
+    "fs-extra": "^11.1.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-chrome": "^0.8.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "lodash-es": "^4.17.21",
+    "nano-staged": "^0.8.0",
+    "npm-run-all2": "^6.0.5",
+    "postcss": "^8.4.24",
+    "prettier": "^2.7.1",
+    "rimraf": "^3.0.2",
+    "simple-git-hooks": "^2.8.0",
+    "tailwindcss": "^3.3.2",
+    "ts-jest": "^29.1.0",
+    "typescript": "4.9.5",
+    "vite": "^4.4.7"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "./node_modules/.bin/nano-staged"
+  }
+}

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

renovate.json

@@ -0,0 +1,11 @@
+{
+  "extends": ["config:base", ":semanticCommits", ":preserveSemverRanges"],
+  "postUpdateOptions": ["yarnDedupeHighest"],
+  "prCreation": "not-pending",
+  "prConcurrentLimit": 3,
+  "prHourlyLimit": 1,
+  "stabilityDays": 3,
+  "vulnerabilityAlerts": {
+    "labels": ["security"]
+  }
+}

src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { type TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+
+import type { AppDispatch, RootState } from './store'
+
+export const useAppDispatch = useDispatch<AppDispatch>
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/app/hooks/useMonetization.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+
+const useMonetization = () => {
+  const [isMonetized, setIsMonetized] = useState(false)
+
+  useEffect(() => {
+    const monetizationTag = document.querySelector('link[rel="monetization"]')
+    if (monetizationTag) {
+      setIsMonetized(true)
+    } else {
+      setIsMonetized(false)
+    }
+  }, [])
+
+  return isMonetized
+}
+
+export default useMonetization

src/app/lib/index.ts

@@ -0,0 +1 @@
+export { addMessageListener, sendMessage } from './messageUtils'

src/app/lib/messageUtils.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+
+interface Message {
+  type: string
+  data?: any
+}
+
+export const sendMessage = (message: Message, callback?: (response: any) => void) => {
+  chrome.runtime.sendMessage(message, response => {
+    if (callback && typeof callback === 'function') {
+      callback(response)
+    }
+  })
+}
+
+export const addMessageListener = (
+  listener: (
+    message: Message,
+    sender: chrome.runtime.MessageSender,
+    sendResponse: (response?: any) => void,
+  ) => void,
+) => {
+  chrome.runtime.onMessage.addListener(listener)
+}