Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: interledger/web-monetization-extension
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 27e33bb08d893aa6bcb126293dc91b0b31fce9cd
Choose a base ref
..
head repository: interledger/web-monetization-extension
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 3c073eb6cc5d10aa96390d6e8889b42268f1649d
Choose a head ref
Showing with 2,212 additions and 3,518 deletions.
  1. +2 −2 .editorconfig
  2. +0 −8 .eslintignore
  3. +0 −98 .eslintrc.json
  4. +5 −11 .github/CONTRIBUTING.md
  5. +1 −2 .github/actions/bump-manifest-version.cjs
  6. +0 −1 .github/actions/delete-artifacts.cjs
  7. +0 −1 .github/actions/get-built-version.cjs
  8. +5 −6 .github/actions/get-workflow-artifacts.cjs
  9. +1 −1 .github/workflows/bump-manifest-version.yml
  10. +8 −0 .prettierignore
  11. +1 −1 .vscode/extensions.json
  12. +0 −1 README.md
  13. +68 −0 biome.jsonc
  14. +0 −1 cspell.json
  15. +1 −1 docs/DEVELOP.md
  16. +4 −4 esbuild/dev.ts
  17. +11 −8 esbuild/plugins.ts
  18. +3 −4 esbuild/prod.ts
  19. +11 −1 jest.setup.ts
  20. +15 −22 package.json
  21. +0 −1 playwright.config.ts
  22. +477 −2,203 pnpm-lock.yaml
  23. +1 −1 renovate.json
  24. +5 −6 scripts/build.ts
  25. +15 −1 src/background/container.ts
  26. +16 −12 src/background/services/background.ts
  27. +1 −1 src/background/services/deduplicator.test.ts
  28. +1 −1 src/background/services/deduplicator.ts
  29. +5 −8 src/background/services/events.ts
  30. +2 −0 src/background/services/index.ts
  31. +27 −18 src/background/services/monetization.ts
  32. +6 −907 src/background/services/openPayments.ts
  33. +476 −0 src/background/services/outgoingPaymentGrant.ts
  34. +169 −31 src/background/services/paymentSession.ts
  35. +0 −6 src/background/services/sendToPopup.ts
  36. +5 −3 src/background/services/storage.ts
  37. +415 −0 src/background/services/wallet.ts
  38. +49 −2 src/background/utils.ts
  39. +1 −1 src/content/container.ts
  40. +0 −1 src/content/debug.ts
  41. +0 −2 src/content/keyAutoAdd/lib/helpers.ts
  42. +1 −1 src/content/keyAutoAdd/lib/keyAutoAdd.ts
  43. +1 −1 src/content/messages.ts
  44. +3 −3 src/content/polyfill.ts
  45. +11 −11 src/content/services/frameManager.ts
  46. +11 −14 src/content/services/monetizationLinkManager.ts
  47. +0 −1 src/content/utils.ts
  48. +2 −1 src/pages/app/pages/PostInstall.tsx
  49. +1 −1 src/pages/popup/Popup.tsx
  50. +2 −2 src/pages/popup/components/Settings/Budget.tsx
  51. +1 −0 src/pages/popup/components/Settings/RateOfPay.tsx
  52. +2 −0 src/pages/popup/lib/context.tsx
  53. +1 −1 src/pages/popup/pages/ConnectWallet.tsx
  54. +0 −1 src/pages/popup/pages/Home.tsx
  55. +3 −3 src/pages/progress-connect/components/Countdown.tsx
  56. +1 −1 src/pages/shared/components/AutoKeyAddConsent.tsx
  57. +3 −3 src/pages/shared/components/InputAmount.tsx
  58. +3 −2 src/pages/shared/components/ui/Button.tsx
  59. +1 −0 src/pages/shared/components/ui/Label.tsx
  60. +3 −1 src/pages/shared/components/ui/RadioGroup.tsx
  61. +2 −1 src/pages/shared/components/ui/Slider.tsx
  62. +4 −2 src/pages/shared/components/ui/Switch.tsx
  63. +8 −3 src/pages/shared/lib/hooks.test.tsx
  64. +3 −2 src/pages/shared/lib/hooks.ts
  65. +1 −1 src/pages/shared/lib/utils.ts
  66. +1 −1 src/shared/crypto.ts
  67. +15 −18 src/shared/helpers.ts
  68. +3 −2 src/shared/messages.ts
  69. +4 −0 src/shared/types.ts
  70. +1 −1 tailwind.config.ts
  71. +1 −1 tests/e2e/auth.setup.ts
  72. +2 −10 tests/e2e/basic.spec.ts
  73. +3 −18 tests/e2e/connect.spec.ts
  74. +2 −3 tests/e2e/connectAutoKeyChimoney.spec.ts
  75. +3 −6 tests/e2e/connectAutoKeyFynbos.spec.ts
  76. +3 −6 tests/e2e/connectAutoKeyTestWallet.spec.ts
  77. +130 −2 tests/e2e/fixtures/base.ts
  78. +3 −3 tests/e2e/fixtures/connected.ts
  79. +23 −6 tests/e2e/fixtures/helpers.ts
  80. +0 −1 tests/e2e/helpers/common.ts
  81. +1 −1 tests/e2e/helpers/testWallet.ts
  82. +14 −3 tests/e2e/pages/popup.ts
  83. +128 −2 tests/e2e/simple.spec.ts
4 changes: 2 additions & 2 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -7,8 +7,8 @@ end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# Indentiation Rules
[*.{css,js,jsx,json,html,scss}]
# Indentation Rules
[*.{css,js,ts,tsx,jsx,json,html,scss}]
charset = utf-8
indent_style = space
indent_size = 2
8 changes: 0 additions & 8 deletions .eslintignore

This file was deleted.

98 changes: 0 additions & 98 deletions .eslintrc.json

This file was deleted.

16 changes: 5 additions & 11 deletions .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -47,22 +47,16 @@ This project uses `PNPM`. A list of steps for setting up a [local development en

All the code quality tools used in the project are installed and configured at the root.

#### Linting
#### Linting & Formatting

[Eslint](https://eslint.org/) is used for linting.
We use [Biome](https://biomejs.dev/) for linting and formatting.

```shell
./.eslintrc.json # config
./.eslintignore # ignore file
```

#### Formatting
Check `format` and `lint` commands in `package.json`, along with their `:fix` counterparts on how to automatically fix formatting and linting issues.

[Prettier](https://prettier.io/) is used for formatting.
We also rely on prettier, for Markdown and YAML files, until Biome supports them.

```shell
./.prettierrc.json # config
./.prettierignore # ignore file
./biome.jsonc # config
```

#### Testing
3 changes: 1 addition & 2 deletions .github/actions/bump-manifest-version.cjs
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// @ts-check
/* eslint-disable @typescript-eslint/no-require-imports, no-console */
const fs = require('node:fs/promises');

/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
@@ -45,6 +44,6 @@ function bumpVersion(existingVersion, type) {
case 'minor':
return [major, minor + 1, 0, 0];
default:
throw new Error('Unknown bump type: ' + type);
throw new Error(`Unknown bump type: ${type}`);
}
}
1 change: 0 additions & 1 deletion .github/actions/delete-artifacts.cjs
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// @ts-check
/* eslint-disable @typescript-eslint/no-require-imports, no-console */
const { BROWSERS } = require('./constants.cjs');

/**
1 change: 0 additions & 1 deletion .github/actions/get-built-version.cjs
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// @ts-check
/* eslint-disable @typescript-eslint/no-require-imports */
const fs = require('node:fs/promises');

/**
11 changes: 5 additions & 6 deletions .github/actions/get-workflow-artifacts.cjs
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// @ts-check
/* eslint-disable @typescript-eslint/no-require-imports, no-console */
const fs = require('node:fs/promises');
const { COLORS, TEMPLATE_VARS, BADGE } = require('./constants.cjs');

@@ -42,7 +41,7 @@ function formatBytes(bytes, decimals = 2) {
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`;
return `${Number.parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]}`;
}

/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
@@ -75,14 +74,14 @@ module.exports = async ({ github, context, core }) => {
run_id: runId,
});

artifacts.data.artifacts.forEach((artifact) => {
for (const artifact of artifacts.data.artifacts) {
const key = /** @type {Browser} */ (artifact.name.split('-')[1]);
ARTIFACTS_DATA[key].url =
`${baseUrl}/suites/${suiteId}/artifacts/${artifact.id}`;
ARTIFACTS_DATA[key].size = formatBytes(artifact.size_in_bytes);
});
}

Object.keys(ARTIFACTS_DATA).forEach((k) => {
for (const k of Object.keys(ARTIFACTS_DATA)) {
const { name, url, size } = ARTIFACTS_DATA[/** @type {Browser} */ (k)];
if (!url && !size) {
const badgeUrl = getBadge('failure', COLORS.red, name);
@@ -95,7 +94,7 @@ module.exports = async ({ github, context, core }) => {
`<tr><td align="center">${badgeUrl}</td><td align="center"><a href="${url}">Download</a></td></tr>`,
);
}
});
}

const tableBody = tableRows.join('');
const commentBody = template
2 changes: 1 addition & 1 deletion .github/workflows/bump-manifest-version.yml
Original file line number Diff line number Diff line change
@@ -38,7 +38,7 @@ jobs:
const script = require('./.github/actions/bump-manifest-version.cjs')
await script({ github, context, core })
- name: Format with prettier
- name: Format with Biome
run: pnpm format:fix

- name: Create pull request
8 changes: 8 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -7,3 +7,11 @@ pnpm-lock.yaml
.prettierignore
coverage
LICENSE

*.tsx
*.cjs
*.ts
*.js
*.json
*.jsonc
*.css
2 changes: 1 addition & 1 deletion .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"recommendations": [
"biomejs.biome",
"bradlc.vscode-tailwindcss",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"github.vscode-github-actions",
"mikestead.dotenv",
1 change: 0 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<h1 align="center">Web Monetization Extension</h1>

![Github Actions CI](https://github.com/interledger/web-monetization-extension/actions/workflows/sanity.yml/badge.svg?branch=main)
[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)

The Web Monetization browser extension is an open source implementation of the Web Monetization draft specification - learn more [here](https://webmonetization.org/specification/). The extension is built with React and TypeScript.

68 changes: 68 additions & 0 deletions biome.jsonc
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true,
"defaultBranch": "main"
},
"files": { "ignoreUnknown": true, "ignore": [] },
"formatter": {
"enabled": true,
"useEditorconfig": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 80
},
"organizeImports": { "enabled": false },
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"style": {
"noUnusedTemplateLiteral": "off", // TODO: turn on, too many cases
"noUselessElse": "off", // TODO: turn on, too many cases
"noNonNullAssertion": "off" // TODO: turn on, too many cases
},
"suspicious": {
"noExplicitAny": "off", // TODO: turn on, too many cases
"noConsole": "warn"
},
"a11y": {
"noSvgWithoutTitle": "off"
}
}
},
"javascript": {
"jsxRuntime": "reactClassic",
"formatter": {
"jsxQuoteStyle": "double",
"trailingCommas": "all",
"semicolons": "always",
"quoteStyle": "single"
},
"globals": ["chrome", "browser"]
},
"css": {
"formatter": {
"quoteStyle": "single"
}
},
"overrides": [
{
"include": [
"esbuild/*",
"scripts/*",
".github/actions/*",
"src/content/debug.ts"
],
"linter": {
"rules": {
"suspicious": {
"noConsole": "off"
}
}
}
}
]
}
1 change: 0 additions & 1 deletion cspell.json
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@
"temp",
"*.svg",
"pnpm-lock.yaml",
".eslintrc.json",
".gitignore",
".vscode/extensions.json",
"cspell-dictionary.txt"
2 changes: 1 addition & 1 deletion docs/DEVELOP.md
Original file line number Diff line number Diff line change
@@ -69,7 +69,7 @@ During the sign up process, it'll ask you for KYC details. As it's a test wallet

Use whatever IDE/code editor you're comfortable with.

We suggest your IDE supports syntax highlighting for TypeScript and React at least (unless you're ok working without syntax highlighting). Intellisense support for TS would be most helpful - to let you jump around functions and files. Additional plugins to support code formatting with prettier and eslint integration would be helpful. For the frontend, having easy access to TailwindCSS class names is also good to have.
We suggest your IDE supports syntax highlighting for TypeScript and React at least (unless you're ok working without syntax highlighting). Intellisense support for TS would be most helpful - to let you jump around functions and files. Additional plugins to support code formatting with [Biome](https://biomejs.dev/) and prettier integration would be helpful. For the frontend, having easy access to TailwindCSS class names is also good to have.

With VSCode, we include some plugin recommendations in the repo.

8 changes: 4 additions & 4 deletions esbuild/dev.ts
Original file line number Diff line number Diff line change
@@ -98,7 +98,7 @@ function liveReloadPlugin({ target }: { target: Target }): ESBuildPlugin {
build.onLoad({ filter: /src\/background\/index\.ts$/ }, async (args) => {
const contents = await readFile(args.path, 'utf8');
return {
contents: reloadScriptBackground + '\n' + contents,
contents: `${reloadScriptBackground}\n${contents}`,
loader: 'ts' as const,
};
});
@@ -108,22 +108,22 @@ function liveReloadPlugin({ target }: { target: Target }): ESBuildPlugin {
async (args) => {
const contents = await readFile(args.path, 'utf8');
return {
contents: contents + '\n\n\n' + reloadScriptPopup,
contents: `${contents}\n\n\n${reloadScriptPopup}`,
loader: 'tsx' as const,
};
},
);
build.onLoad({ filter: /src\/pages\/.+\/index.tsx$/ }, async (args) => {
const contents = await readFile(args.path, 'utf8');
return {
contents: contents + '\n\n\n' + reloadScriptPages,
contents: `${contents}\n\n\n${reloadScriptPages}`,
loader: 'tsx' as const,
};
});
build.onLoad({ filter: /src\/content\// }, async (args) => {
const contents = await readFile(args.path, 'utf8');
return {
contents: contents + '\n\n\n' + reloadScriptContent,
contents: `${contents}\n\n\n${reloadScriptContent}`,
loader: 'ts' as const,
};
});
Loading