Skip to content

Commit

Permalink
Merge branch 'master' into refactor/manifest-v3-support
Browse files Browse the repository at this point in the history
  • Loading branch information
bumi authored Jan 9, 2023
2 parents 955581f + 1a71c1e commit f624f63
Show file tree
Hide file tree
Showing 106 changed files with 4,329 additions and 1,518 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ dist/
.nova
.vscode/**/*
!.vscode/extensions.json
!.vscode/settings.json
*.suo
*.ntvs*
*.njsproj
Expand Down
8 changes: 8 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
"typescript.preferences.importModuleSpecifier": "non-relative",
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
18 changes: 4 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Add Alby to your browser
### Try out the most recent version of Alby (Nightly Releases)

- [Firefox Nightly](https://nightly.link/getAlby/lightning-browser-extension/workflows/build/master/firefox.xpi.zip) - best to install it as a temporary add-on as discussed in the "Load extension into browser" section
- [Chrome Nightly](https://nightly.link/getAlby/lightning-browser-extension/workflows/build/master/chrome.zip) - go to `chrome://extensions/`, enable "Developer mode" (top right) and drag & drop the file in the browser
- [Chrome Nightly](https://nightly.link/getAlby/lightning-browser-extension/workflows/build/master/chrome.zip) - go to `chrome://extensions/`, enable "Developer mode" (top right), and drag & drop the file in the browser

(Note: You might need to reconfigure your wallet after installing new versions)

Expand All @@ -81,21 +81,11 @@ Then run the following

### 🛠 Development

- Install dependencies\
`yarn install`
- To watch file changes in development
- Chrome\
`yarn run dev:chrome`
- Firefox\
`yarn run dev:firefox`
- Opera\
`yarn run dev:opera`

[Refer to SETUP.md for info regarding how to setup Alby](./doc/SETUP.md)

## Native Companions

Alby supports native connectors to native applications on the host computer. For this the extension passes each call to a native application (using [native messaging](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging)).
Alby supports native connectors to native applications on the host computer. For this, the extension passes each call to a native application (using [native messaging](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging)).
This allows Alby also to connect to nodes behind Tor (through this native "proxy" application).

Currently, there is one native companion app available to connect to Tor nodes: [https://github.com/getAlby/alby-companion-rs](https://github.com/getAlby/alby-companion-rs)
Expand Down Expand Up @@ -123,7 +113,7 @@ We use the [Development Project Board](https://github.com/orgs/getAlby/projects/
#### Anyone

- Have a look at this Readme. Can it be improved? Do you see typos? You can open a PR or reach out to us in [our community chat](https://bitcoindesign.slack.com/archives/C02591ADXM2).
- You can help with [translations](#translations)
- You can help with [translations](./doc/CONTRIBUTION.md#translations)
- [Code of Conduct](./doc/CODE_OF_CONDUCT.md)

## ❔ FAQs
Expand All @@ -132,7 +122,7 @@ We use the [Development Project Board](https://github.com/orgs/getAlby/projects/

Joule is a full interface to manage a LND node. It only supports one LND account.
Our goal is NOT to write a full UI for a Lightning Network node with all the channel management features, but instead to only focus on what is necessary for the web (for payment and authentication flows). We believe there are already way better management UIs.
Also we focus on supporting multiple different node backends (non-custodial and custodial).
Also, we focus on supporting multiple different node backends (non-custodial and custodial).

#### What is WebLN?

Expand Down
6 changes: 5 additions & 1 deletion doc/CONTRIBUTION.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ When creating a PR please take this points as a reminder:
- Think in iterations (babysteps)\
You can always start a PR and if you feel like adding on more things to it, better branch off and [create a new i.e. _draft_-PR](https://github.blog/2019-02-14-introducing-draft-pull-requests/)
- Newly added components should have a unit-test
- If you work on a more complex PR please [join our community chat](https://bitcoindesign.slack.com/archives/C02591ADXM2) to get feedback, discuss the best way to tackle the challenge, and to ensure that there's no duplication of work. It's often faster and nicer to chat or call about questions than to do ping-pong comments in PRs
- If you work on a more complex PR please [join our community chat](https://bitcoindesign.slack.com/archives/C02591ADXM2) (Invite link at https://bitcoin.design/) to get feedback, discuss the best way to tackle the challenge, and to ensure that there's no duplication of work. It's often faster and nicer to chat or call about questions than to do ping-pong comments in PRs

### Code format & preferences

Expand All @@ -49,6 +49,10 @@ For better support we recommend these extensions:
- [vscode-tailwindcss](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [vscode-html-css](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

### Branch names

Please prefix your branch names with `feat/`, `fix/`, `chore/`, `refactor/`, `docs/` based on the intent of the branch or issue being addressed (see commit message format below).

### Commit message format

Alby enforces [Conventional Commits Specification](https://www.conventionalcommits.org/en/)
Expand Down
24 changes: 24 additions & 0 deletions doc/SETUP.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,22 @@

## 🚀 Quick Start

- Install dependencies\
`$ yarn install`

### 💻 Load extension into browser

- Start development build, which will automatically watch for file changes:

- Chrome\
`$ yarn run dev:chrome`
- Firefox\
`$ yarn run dev:firefox`
- Opera\
`$ yarn run dev:opera`

**NOTE:** by default, the extension built this way will talk to the testnet API (which runs under [app.regtest.getalby.com](https://app.regtest.getalby.com/user)). In case you want to do manual tests against the mainnet API, add the following `WALLET_CREATE_URL` environment variable to your command: `$ WALLET_CREATE_URL="https://getalby.com/api/users" yarn run dev:your-browser-of-choice`

- **Chrome**

- Go to the browser address bar and type `chrome://extensions`
Expand All @@ -26,6 +40,16 @@

To connect to a remote development LND node you can use a [test account](https://github.com/bumi/lightning-browser-extension/wiki/Test-setup)

### Multiple Extensions

It is not recommended to have multiple versions of the extension (development + official) running in the same browser. You will have instances of the extension with the same icon which is confusing, and also leads to a poor webln experience as both extensions will launch a popup. There may also be unexpected bugs due to conflict with the two extensions running at the same time.

Some ways you can work around this are:

- Use a separate Chrome / firefox profile for development of the extension (this profile would not have the official extension installed)
- Use a dedicated browser for development of the extension (this browser would not have the official extension installed)
- Disable the official extension during development, and disable the development extension when you want to use Alby as normal.

### Testnet/testing-accounts for development use localhost testnet

For most people who are new to the btc lightning network, starting a test version of the lightning network environment locally is very helpful for developing wallets, so that they can transfer money with confidence.
Expand Down
46 changes: 23 additions & 23 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "lightning-browser-extension",
"version": "1.20.1",
"version": "1.22.1",
"description": "Lightning browser extension",
"private": true,
"repository": "https://github.com/bumi/lightning-browser-extension.git",
Expand Down Expand Up @@ -36,7 +36,7 @@
},
"dependencies": {
"@bitcoin-design/bitcoin-icons-react": "^0.1.9",
"@headlessui/react": "^1.7.4",
"@headlessui/react": "^1.7.7",
"@noble/secp256k1": "^1.7.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.2",
Expand All @@ -45,11 +45,11 @@
"bech32": "^2.0.0",
"bolt11": "^1.4.0",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.6",
"dayjs": "^1.11.7",
"dexie": "^3.2.2",
"elliptic": "^6.5.4",
"html5-qrcode": "^2.3.1",
"i18next": "^22.0.6",
"i18next": "^22.4.6",
"i18next-browser-languagedetector": "^7.0.1",
"lnmessage": "^0.0.14",
"lodash.merge": "^4.6.2",
Expand All @@ -58,11 +58,11 @@
"react": "^18.2.0",
"react-confetti": "^6.1.0",
"react-dom": "^18.2.0",
"react-i18next": "^12.0.0",
"react-i18next": "^12.1.1",
"react-loading-skeleton": "^3.1.0",
"react-modal": "^3.16.1",
"react-qr-code": "^2.0.8",
"react-router-dom": "^6.4.4",
"react-router-dom": "^6.6.1",
"react-toastify": "^9.1.1",
"stream": "^0.0.2",
"tailwindcss": "^3.2.4",
Expand All @@ -74,20 +74,20 @@
"@commitlint/cli": "^17.3.0",
"@commitlint/config-conventional": "^17.3.0",
"@jest/types": "^29.3.1",
"@playwright/test": "^1.28.0",
"@swc/core": "^1.3.21",
"@swc/jest": "^0.2.23",
"@playwright/test": "^1.29.1",
"@swc/core": "^1.3.24",
"@swc/jest": "^0.2.24",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@trivago/prettier-plugin-sort-imports": "^4.0.0",
"@types/chrome": "^0.0.203",
"@types/chrome": "^0.0.206",
"@types/crypto-js": "^4.1.1",
"@types/elliptic": "^6.4.14",
"@types/lodash.merge": "^4.6.7",
"@types/lodash.pick": "^4.4.0",
"@types/pubsub-js": "^1.8.3",
"@types/react-dom": "^18.0.9",
"@types/react-dom": "^18.0.10",
"@types/react-modal": "^3.13.1",
"@types/uuid": "^9.0.0",
"@types/webextension-polyfill": "^0.9.2",
Expand All @@ -99,10 +99,10 @@
"complete-randomer": "^1.9.1",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.7.2",
"css-loader": "^6.7.3",
"css-minimizer-webpack-plugin": "^4.2.2",
"del-cli": "^5.0.0",
"eslint": "^8.29.0",
"eslint": "^8.30.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-react": "^7.31.11",
Expand All @@ -113,27 +113,27 @@
"husky": "^8.0.2",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"jest-webextension-mock": "^3.8.6",
"lint-staged": "^13.0.4",
"mini-css-extract-plugin": "^2.7.0",
"msw": "^0.49.0",
"postcss": "^8.4.19",
"jest-webextension-mock": "^3.8.7",
"lint-staged": "^13.1.0",
"mini-css-extract-plugin": "^2.7.2",
"msw": "^0.49.2",
"postcss": "^8.4.20",
"postcss-cli": "^10.1.0",
"postcss-loader": "^7.0.2",
"pptr-testing-library": "^0.7.0",
"prettier": "^2.8.0",
"prettier": "^2.8.1",
"process": "^0.11.10",
"puppeteer": "^19.3.0",
"sass": "^1.56.1",
"puppeteer": "^19.4.1",
"sass": "^1.57.1",
"sass-loader": "^13.2.0",
"stream-browserify": "^3.0.0",
"swc-loader": "^0.2.3",
"terser-webpack-plugin": "^5.3.6",
"tsconfig-paths-webpack-plugin": "^4.0.0",
"typescript": "^4.9.3",
"typescript": "^4.9.4",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.7.0",
"webpack-cli": "^5.0.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-sources": "^3.2.3",
"wext-manifest-loader": "^3.0.0",
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/AccountMenu/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,10 @@ function AccountMenu({ showOptions = true }: Props) {
{title || <Skeleton />}
</p>

{balancesDecorated.satsBalance ? (
{balancesDecorated.accountBalance ? (
<p className="flex justify-between">
<span className="text-xs dark:text-white">
{balancesDecorated.satsBalance}
{balancesDecorated.accountBalance}
</span>
{!!balancesDecorated.fiatBalance && (
<span className="text-xs text-gray-600 dark:text-neutral-400 ml-2">
Expand Down
9 changes: 8 additions & 1 deletion src/app/components/Button/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { forwardRef } from "react";
import type { Ref } from "react";
import { forwardRef } from "react";
import Loading from "~/app/components/Loading";
import { classNames } from "~/app/utils/index";

Expand All @@ -9,8 +9,10 @@ export type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
label: string;
icon?: React.ReactNode;
primary?: boolean;
outline?: boolean;
loading?: boolean;
disabled?: boolean;
flex?: boolean;
direction?: "row" | "column";
};

Expand All @@ -26,7 +28,9 @@ const Button = forwardRef(
fullWidth = false,
halfWidth = false,
primary = false,
outline = false,
loading = false,
flex = false,
}: Props,
ref: Ref<HTMLButtonElement>
) => {
Expand All @@ -41,12 +45,15 @@ const Button = forwardRef(
fullWidth || halfWidth ? "px-0 py-2" : "px-7 py-2",
primary
? "bg-orange-bitcoin text-white border border-transparent"
: outline
? "bg-white text-orange-bitcoin border border-orange-bitcoin dark:bg-surface-02dp"
: `bg-white text-gray-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800`,
primary && !disabled && "hover:bg-orange-bitcoin-700",
!primary &&
!disabled &&
"hover:bg-gray-50 dark:hover:bg-surface-16dp",
disabled ? "cursor-default opacity-60" : "cursor-pointer",
flex && "flex-1",
"inline-flex justify-center items-center font-medium rounded-md shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-orange-bitcoin transition duration-150"
)}
onClick={onClick}
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/CompanionDownloadInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function CompanionDownloadInfo({ hasTorCallback }: Props) {
<a
href={`https://getalby.com/install/companion/${getOS()}`}
target="_blank"
rel="noreferrer"
rel="noreferrer noopener"
className="font-bold"
>
{t("download_here")}
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/ConnectorForm/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@ function ConnectorForm({
<div className="relative lg:flex mt-14 bg-white dark:bg-surface-02dp px-10 py-12">
<div className="lg:w-1/2">
{typeof title === "string" ? (
<h1 className="mb-6 text-2xl font-bold dark:text-white">{title}</h1>
<h1 className="mb-2 text-2xl font-bold dark:text-white">{title}</h1>
) : (
title
)}
{description && (
<div className="mb-6 text-gray-500 dark:text-neutral-400">
<div className="text-gray-500 dark:text-neutral-400 whitespace-pre-line">
{typeof description === "string" ? (
<p>{description}</p>
) : (
Expand Down
21 changes: 21 additions & 0 deletions src/app/components/ConnectorPath/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
type Props = {
title: string;
description: string;
content: React.ReactNode;
actions: React.ReactNode;
};

function ConnectorPath({ title, description, content, actions }: Props) {
return (
<div className="shadow-lg p-12 rounded-xl bg-white dark:bg-surface-02dp text-center">
<h1 className="text-2xl font-bold dark:text-white">{title}</h1>
<p className="text-gray-500 mt-6 dark:text-neutral-400">{description}</p>
<div className="h-56 flex flex-col justify-center items-center">
{content}
</div>
<div className="flex gap-4">{actions}</div>
</div>
);
}

export default ConnectorPath;
14 changes: 5 additions & 9 deletions src/app/components/LinkButton/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,20 @@ import { Link } from "react-router-dom";
type Props = {
to: string;
title: string;
description?: string;
logo?: string;
};

export default function LinkButton({ to, title, description, logo }: Props) {
export default function LinkButton({ to, title, logo }: Props) {
return (
<Link to={to} className="block">
<div className="p-4 bg-white dark:bg-surface-02dp h-96 text-center shadow-lg overflow-hidden border-b border-gray-300 dark:border-neutral-700 rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition duration-200">
<div className="p-4 bg-white dark:bg-surface-02dp h-80 text-center shadow-lg overflow-hidden border-b border-gray-300 dark:border-neutral-700 rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition duration-200">
<div className="my-12">
<img src={logo} alt="logo" className="inline rounded-3xl w-32" />
</div>
<div>
<span className="block dark:text-white text-lg">{title}</span>
{description && (
<span className="text-sm text-gray-500 dark:text-neutral-300">
{description}
</span>
)}
<span className="block dark:text-white text-lg font-medium">
{title}
</span>
</div>
</div>
</Link>
Expand Down
Loading

0 comments on commit f624f63

Please sign in to comment.